/* Sets all the text color to red! */
/* #KB-view {
  display: flex;
  justify-content: center;
  align-items: flex-start;
} */
.status-bar-item.plugin-keyboard-analyzer span.icon {
  display: flex;
  align-items: center;
  line-height: 1;
}

.status-bar-item.plugin-keyboard-analyzer {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* // Extra Small devices (landscape phones, 576px and up) */
#keyboard-component.xs {
  /* background-color: #f5f5f5; */
}

/* // Small devices (landscape phones, 576px and up) */
#keyboard-component.sm {
  /* background-color: aqua; */
}

/* // Medium devices (tablets, 768px and up) */
#keyboard-component.md {
  /* background-color: blueviolet; */
}

/* // Large devices (desktops, 992px and up) */
#keyboard-component.lg {
  /* background-color: chartreuse; */
}

/* // X-Large devices (large desktops, 1200px and up) */
#keyboard-component.xl {
  /* background-color: darkcyan; */
}

/* // XX-Large devices (larger desktops, 1400px and up) */
#keyboard-component.xxl {
  /* background-color: darkgoldenrod; */
}

#keyboard-component {
  /* Allow the component to grow with content so sticky can remain pinned
     across the entire scroll; avoid forcing it to viewport height. */
  height: auto;
  min-height: 100%;
}

.keyboard-wrapper {
  max-width: 700px;
}

#KB-view {
  padding: 0px !important;
  overflow-y: scroll;
}

/* Center the keyboard panel and allow inner horizontal scroll */
#keyboard-preview-view {
  display: flex;
  justify-content: center;
  /* allow child sticky (.keyboard-panel.pinned) to work across full scroll */
  overflow: visible;
  width: 100%;
}

/* removed wrapper-level sticky; use panel-level sticky instead */
/* When keyboard panel is pinned, make the wrapper sticky so it
   remains at the top while the command list scrolls underneath. */
#keyboard-preview-view:has(.keyboard-panel.pinned) {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--background-primary);
}

/* #keyboard-component .hotkey-setting-container {
  display: flex;
  overflow: unset;
  flex-direction: column;
  padding-bottom: 60px;
  height: fit-content;
} */

#keyboard-component .hotkey-settings-container {
  height: fit-content;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  overflow: visible;
  position: relative;
}

/* Anchor wrapper to position dropdowns under their triggering buttons */
.menu-anchor {
  position: relative;
  display: inline-block;
}

#keyboard-component .setting-item-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible; /* ensure inline popovers are not clipped */
  position: relative; /* safe anchor context for children */
}

/* Ensure info container doesn't clip anchored popovers */
#keyboard-component .setting-item-info {
  overflow: visible;
}

/* Inline info icon styles for filter items */
.setting-item-name .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px; /* reserve space to prevent layout shift */
  height: 16px;
  margin-left: 6px; /* spacing between text and icon */
  color: var(--text-muted);
  opacity: 0; /* hidden by default */
  visibility: hidden;
  transition: color 80ms ease; /* show instantly; only color animates */
  position: relative;
  z-index: 1;
}

/* Show the icon only when hovering the setting row; avoid width jump via min-width */
.popup-filter-menu .setting-item:hover .info-icon,
.popup-filter-menu .setting-item:focus-within .info-icon {
  opacity: 1;
  visibility: visible;
}

/* Active/hover state of the info icon */
.setting-item-name .info-icon:hover,
.setting-item-name .info-icon:focus-visible,
.setting-item-name .info-icon:focus,
.setting-item-name .info-icon:active {
  color: var(--text-accent);
}

/* (Using native title tooltips for icons to match Obsidian) */

#keyboard-component .setting-item-name .command-name {
  padding-right: 8px;
}

/* Keep legacy styling for span prefix (if used elsewhere) */
#keyboard-component .setting-item-name span.suggestion-prefix {
  color: var(--text-accent);
  font-size: 90%;
  font-style: italic;
  text-transform: uppercase;
  margin-right: 6px; /* space before command title */
}

#keyboard-component .setting-item-name span.suggestion-prefix:hover {
  cursor: pointer;
}

/* Commands list uses a button for the plugin name. Keep style neutral, only add spacing. */
#keyboard-component .setting-item-name button.suggestion-prefix {
  margin-right: 6px; /* space before command title */
}

#keyboard-component
  .setting-item-name
  button.suggestion-prefix.is-builtin::before,
#keyboard-component
  .setting-item-name
  span.suggestion-prefix.is-builtin::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--interactive-accent);
  margin-right: 6px;
  vertical-align: middle;
}

#keyboard-component .setting-item .star-icon {
  display: none;
  line-height: 0;
}

#keyboard-component .setting-item:hover .star-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Keep action icons visible when row has active popover */
#keyboard-component .setting-item.show-actions .star-icon,
#keyboard-component .setting-item.show-actions .folder-plus-icon {
  display: flex;
  align-items: center;
}

#keyboard-component .setting-item .star-icon:hover {
  color: var(--text-accent);
}

#keyboard-component .setting-item.is-starred .star-icon {
  color: var(--text-accent);
  display: flex;
}

/* Add-to-group icon mirrors star behavior: hidden until hover */
#keyboard-component .setting-item .star-icon,
#keyboard-component .setting-item .folder-plus-icon {
  /* Keep a stable slot so rows don't jump on hover */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  line-height: 0;
}

/* Folder-plus is subtle by default, becomes visible on row hover */
#keyboard-component .setting-item .folder-plus-icon {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease;
}
#keyboard-component .setting-item:hover .folder-plus-icon {
  cursor: pointer;
  visibility: visible;
  opacity: 0.85;
  transition-duration: 0.05s; /* faster fade-in */
}
#keyboard-component .setting-item .folder-plus-icon:hover {
  color: var(--text-accent);
  opacity: 1;
}

.shortcuts-wrapper {
  max-width: 768px;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0px auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* .hotkey-search-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
} */

#keyboard-component .hotkey-search-container {
  display: block;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
  flex-grow: 2;
}

/* #keyboard-component.xs .hotkey-search-container { */
/* max-width: unset;
  flex-grow: 2;
  flex-basis: 100%; */
/* } */

.search-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* background: var(--background-modifier-form-field); */
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-normal);
  border-radius: 4px;
  padding: 8px 14px;
  margin-bottom: 12px;
  margin-top: 20px;
}

.search-wrapper.is-focused {
  /* background: var(--color-d-blacker); */
  border: 1px solid var(--interactive-accent);
  box-shadow: 0px 0px 0px 3px var(--color-d-gray-60);
}

.meta-search-wrapper {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.modifiers-wrapper {
  display: flex;
  width: fit-content;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 1;
  align-content: center;
}

kbd.modifier {
  padding: 2px 6px;
  margin-right: 4px;
  border: 1px solid var(--indentation-guide);
  background-color: var(--background-secondary-alt);
  cursor: pointer;
  transition: background-color 0.5s ease;
}

kbd.modifier:hover {
  background-color: var(--interactive-hover);
}

/* Align search modifier chips with command list hotkey chips */
.modifiers-wrapper .setting-hotkey {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  margin-bottom: 2px; /* allow wrap with small vertical spacing */
  cursor: pointer; /* keep clickable behavior in search bar */
}

.modifiers-wrapper kbd.modifier:last-child {
  margin-right: 12px;
}

#keyboard-component .hotkey-search-container input {
  height: 40px;
  width: 100%;
  font-size: 16px;
  padding: unset;
  margin-top: 0px;
  margin-bottom: 0px;
  /* padding-bottom: 2px; */
  padding-right: 48px;
  border: none !important;
  border-radius: unset;
  background: unset;
  color: var(--text-normal);
  box-shadow: unset;
}

/* Group by plugin view */
.plugin-group {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  margin-bottom: 10px;
  background: var(--background-secondary);
}

.plugin-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}

.plugin-group-header .plugin-name {
  flex: 1 1 auto;
}

.plugin-group-header .plugin-meta {
  font-weight: 400;
}

/* Generic chevron rotation helper */
.chevron {
  display: inline-flex;
  transform: rotate(0deg); /* base: down */
  transition: transform 120ms ease;
}
.chevron.is-collapsed {
  /* closed: point right */
  transform: rotate(270deg);
}
.chevron.is-open-up {
  /* open: rotate 270deg CW to point up */
  transform: rotate(540deg);
}

/* Keep explicit scope for plugin groups for clarity (same values) */
.plugin-group-header .chevron {
  display: inline-flex;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}
.plugin-group-header .chevron.is-collapsed {
  transform: rotate(-90deg);
}

.plugin-group-header.is-builtin .plugin-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--interactive-accent);
  margin-right: 6px;
  vertical-align: middle;
}

.plugin-badge.built-in {
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-muted);
  border-radius: 4px;
  font-size: 10px;
  padding: 0 4px;
  text-transform: uppercase;
}

.plugin-group-body {
  padding: 0 10px 0 26px;
}

/* Reduce left padding on extra-small/mobile to save space */
#keyboard-component.xs .plugin-group-body {
  padding-left: 10px;
}

/* Slightly smaller command text on extra-small panes */
#keyboard-component.xs .hotkey-list-container .setting-item .setting-item-name {
  font-size: 13px;
}
#keyboard-component.xs .hotkey-list-container .setting-item-info {
  font-size: 12px;
}

/* Mobile: keyboard surface takes full width; grid scrolls horizontally */
#keyboard-component.xs .keyboard-panel .keyboard-surface {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
#keyboard-component.xs #keyboard-layout {
  width: 100%;
}

/* Compact rows inside groups */
.setting-item.compact {
  padding: 6px 0;
  margin: 0;
  border: none;
}

.plugin-group-body .setting-item.compact + .setting-item.compact {
  border-top: 1px solid var(--background-modifier-border);
}

.plugin-groups-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 6px 0 10px;
}

.plugin-groups-toolbar .btn-filter {
  height: 32px;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-modifier-form-field);
  color: var(--text-muted);
}

.plugin-groups-toolbar .btn-filter:hover,
.plugin-groups-toolbar .btn-filter:focus-visible {
  color: var(--text-normal);
  border-color: var(--interactive-accent);
}

#keyboard-component .hotkey-search-container div.icon {
  display: flex;
  align-content: center;
  justify-content: center;
}

/* Normalize meta search action buttons (keyboard listener, clear) */
.meta-search-wrapper .icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-modifier-form-field);
  color: var(--text-faint);
}
.meta-search-wrapper .icon:hover,
.meta-search-wrapper .icon:focus-visible {
  border-color: var(--interactive-accent);
  color: var(--text-normal);
}

.keyboard-icon {
  cursor: pointer;
}

.keyboard-icon:hover {
  opacity: 1;
}

.keyboard-icon:pressed {
  opacity: 1;
}

.keyboard-icon.pulse {
  color: var(--text-error);
  box-shadow: 0 0 0 0 rgba(10, 228, 112, 0.5);
}

/* .meta-search-indicator .inner-circle {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background: var(--interactive-accent);
  width: 7px;
  border-radius: 50%;
  height: 7px;
} */

.pulse {
  animation: pulse-animation 1s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(10, 228, 112, 0.5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(183, 38, 38, 0);
  }
}

#keyboard-component .hotkey-search-container .search-input-clear-button {
  position: absolute;
  right: 0px;
  top: -50% !important;
  transform: translate(-50%, -50%);
  top: 18px;
  color: var(--text-faint);
  cursor: var(--cursor);
  background-color: transparent;
}

.clear-icon {
  color: var(--text-faint);
  cursor: var(--cursor);
}

.clear-icon:hover {
  color: var(--text-error);
}

/* #keyboard-component .hotkey-search-container .search-input-clear-button:hover {
  color: var(--text-error);
} */

/* #keyboard-component .hotkey-search-container .search-input-clear-button:before {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 22px;
  content: '\D7';
} */

#hotkey-filter-button {
  width: fit-content;
  margin-top: 0px;
  margin-right: 8px;
  margin-bottom: 0px;
  height: 32px;
}

#hotkey-filter-button:hover {
  cursor: pointer;
}

#hotkey-filter-button.is-active {
  color: var(--text-primary);
  background-color: var(--interactive-accent);
}

/* Mirror active state for other dropdown buttons */
#hotkey-view-button.is-active,
#hotkey-modules-button.is-active,
#hotkey-edit-button.is-active {
  color: var(--text-primary);
  background-color: var(--interactive-accent);
}

/* Spacing and sizing for view and modules buttons */
#hotkey-view-button,
#hotkey-modules-button,
#hotkey-edit-button {
  height: 32px;
  margin-right: 8px;
}

/* Make Edit/Refresh buttons visually consistent with search input action icons */
#hotkey-edit-button,
#hotkey-refresh-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-modifier-form-field);
  color: var(--text-faint);
}
#hotkey-edit-button:hover,
#hotkey-edit-button:focus-visible,
#hotkey-refresh-button:hover,
#hotkey-refresh-button:focus-visible {
  border-color: var(--interactive-accent);
  color: var(--text-normal);
}

/* Small animation hint for refresh */
#hotkey-refresh-button.animation-is-active {
  animation: kba-refresh-spin 0.9s linear 1;
}
@keyframes kba-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* A bit more space before the summary */
#keyboard-component .community-plugin-search-summary.u-muted {
  margin-left: 8px;
}

.hotkey-search-container button {
  /* height: 40px; */
  height: fit-content;
  width: fit-content;
  flex-shrink: 0;
}

.popup-filter-menu-container:not(.is-open) {
  display: none;
}

.popup-filter-menu-container {
  position: absolute;
  background-color: var(--background-primary-alt);
  top: calc(100% + 8px);
  left: 0;
  outline: 2px solid var(--background-modifier-form-field-highlighted);
  width: max-content;
  min-width: 220px;
  z-index: 150000;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  padding-left: 16px;
  padding-top: 12px;
  padding-right: 16px;
  padding-bottom: 12px;
  box-shadow: 0px 45px 18px rgba(5, 5, 5, 0.01),
    0px 25px 15px rgba(5, 5, 5, 0.03), 0px 11px 11px rgba(5, 5, 5, 0.04),
    0px 3px 6px rgba(5, 5, 5, 0.05), 0px 0px 0px rgba(5, 5, 5, 0.05);
}

/* .is-mobile .popup-filter-menu-container { */
/* left: 20px;
  width: calc(100% - 40px); */
/* } */

/* .is-mobile .popup-filter-menu-background {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--background-primary-alt);
  opacity: 0.5;
  z-index: -1;
} */

#keyboard-component .community-plugin-search-summary.u-muted {
  padding-left: 0px;
  padding-right: 0px;
  /* width: 100%; */
  flex-grow: 1;
  padding-bottom: 0px;
  border-bottom: none;
  flex-shrink: 2;
}
#keyboard-component .community-plugin-search-summary.u-muted span {
  text-align: center;
}

/* On extra-small/mobile screens, hide the labels ("keys"/"cmds") to save space */
#keyboard-component.xs .community-plugin-search-summary .label,
#keyboard-component.xs .community-plugin-search-summary .label {
  display: none;
}

button#hotkey-refresh-button {
  background-color: transparent;
  border: none;
  margin-right: unset;
  width: fit-content;
  box-shadow: none;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 4px;
}

button#hotkey-refresh-button.animation-is-active .lucide-refresh-cw {
  animation-name: rotation;
  animation-duration: 0.8s;
  /* ease-in animation timing */
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: both;
}

button#hotkey-refresh-button:hover {
  cursor: pointer;
  color: var(--text-accent);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.search-results {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 8px;
  border-bottom: none;
}

#keyboard-component .hotkey-list-container {
  user-select: text;
  padding: 0px 0px 64px 0px;
  width: 100%;
  overflow: unset;
}

/* .KB-view > .setting-item {
  display: flex;
  align-items: center;
  padding: 12px 0 12px 0;
  border-top: 1px solid var(--background-modifier-border);
} */

/* -------------------------------------------------------------- */
/* SETTING ITEMS                                                  */
/* -------------------------------------------------------------- */

#keyboard-component .hotkey-list-container .setting-item {
  background-color: var(--background-primary);
  padding-left: 6px;
  transition: background-color 0.2s ease-in-out;
}

#keyboard-component .hotkey-list-container .setting-item.is-starred {
  /* background-color: var(--background-secondary, --color-d-gray-60); */
  border-left: 3px solid var(--interactive-accent);
  padding-left: 12px;
}

/* Subtle hover highlight for command rows (normal view) */
#keyboard-component .hotkey-list-container .setting-item,
#keyboard-component .kbanalizer-setting-item.setting-item {
  transition: background-color 0.1s ease; /* slower fade-out */
}
#keyboard-component .hotkey-list-container .setting-item:hover,
#keyboard-component .kbanalizer-setting-item.setting-item:hover {
  background-color: var(--background-modifier-hover);
  transition-duration: 0.05s; /* faster fade-in */
}
#keyboard-component .kbanalizer-setting-item.setting-item:focus-within {
  background-color: var(--background-modifier-hover);
  transition-duration: 0.05s;
}

#keyboard-component.xs .setting-item {
  flex-direction: row;
  align-items: flex-start;
}

#keyboard-component .setting-item-info small {
  color: var(--text-muted);
  font-size: small;
}

#keyboard-component .hotkey-list-container .setting-item:first-child {
  padding-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}

#keyboard-component .hotkey-list-container .setting-item:last-child {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--background-modifier-border);
}

#keyboard-component.xs .popup-filter-menu-container .setting-item {
  flex-direction: row;
}

.kbanalizer-setting-item {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--background-modifier-border);
  padding: 10px 0px 10px 0px;
}

.kbanalizer-setting-item-control {
  flex: 1 0 auto !important;
  flex-shrink: 0 !important;
}

/* XS: keep row layout; wrap title; let hotkeys wrap inside their column */
#keyboard-component.xs .kbanalizer-setting-item.setting-item {
  flex-direction: row;
  align-items: flex-end;
}
#keyboard-component.xs .kbanalizer-setting-item .setting-item-info {
  flex: 1 1 60%;
  min-width: 50%;
  margin-bottom: 0;
  overflow: visible;
}
#keyboard-component.xs
  .kbanalizer-setting-item
  .kbanalizer-setting-item-control {
  justify-content: flex-end;
  flex: 0 1 40% !important;
  min-width: 40%;
}
#keyboard-component.xs .kbanalizer-setting-item .setting-command-hotkeys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
/* Allow command titles to wrap instead of shrinking the row */
#keyboard-component .setting-item-name .command-name {
  white-space: normal;
  word-break: break-word;
}

.KB-view > .setting-command-hotkeys {
  flex-shrink: 0 !important;
  flex: 1 0 auto !important;
}

.kbanalizer-setting-hotkey {
  min-height: 24px !important;
  position: relative;
  font-size: 14px;
  background-color: var(--background-secondary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 4px 10px;
  min-height: 24px;
  align-self: flex-end;
  position: relative;
  transition: background-color, color 0.5s ease;
}

.kbanalizer-setting-hotkey:hover {
  background-color: var(--interactive-hover);
  color: var(--text-normal);
}

.kbanalizer-setting-hotkey.is-customized {
  /* background-color: var(--background-secondary-alt); */
  /* color: var(--text-accent); */
  border: 1px solid var(--interactive-accent);
}

.kbanalizer-setting-hotkey.is-duplicate {
  cursor: pointer;
  color: var(--text-normal);
  background-color: var(--background-modifier-error);
}

.kb-analizer-hotkey-list-container {
  padding-right: 0px !important;
}

/* ----------- */
/* -------     */
/* -------Keyboard Layout */
/* -------     */
/* ----------- */

.svelte-keyboard {
  width: 100%;
  height: 100%;
  /* transform: scale(0.5); */
}

/* :global(.svelte-keyboard:nth-last-child(1)) {
  display: none;
} */

.svelte-keyboard button.key-- {
  background: transparent !important;
  background-color: transparent;
  user-select: none;
  background-color: unset !important;
  color: unset !important;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.svelte-keyboard button.key--.active {
  background: transparent;
}

.svelte-keyboard button.key {
  padding: 4px 16px;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 12px;
  text-align: center;
  color: var(--text-normal);
  margin: 0px 2px;
  background-color: var(--background-secondary-alt);
}
.svelte-keyboard button.key:hover {
  background-color: var(--interactive-accent);
}
.svelte-keyboard button.key:active {
  background-color: red;
}

#keyboard {
  width: 100%;
}

/* -------------------------------------------------------------- */
/* KEYBOARD LAYOUT                                                 */
/* -------------------------------------------------------------- */

#keyboard-preview-view {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* On small widths, allow inner horizontal scrolling and left-align */
#keyboard-component.xs #keyboard-preview-view,
#keyboard-component.sm #keyboard-preview-view {
  justify-content: flex-start;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}

/* grid-template-columns: 3.75fr 0.75fr 1fr; */
#keyboard-layout {
  display: grid;
  position: relative;
  grid-template-rows: 1fr;
  gap: 0px 10px;
  grid-template-areas: 'main other num';
  background-color: var(--background-modifier-border);
  border-radius: 0px 0px 12px 12px;
  border: 1px solid var(--indentation-guide);
  min-width: 720px;
  height: 280px;
  /* margin-top: 16px; */
  padding: 24px;
}

.sm #keyboard-layout,
.xs #keyboard-layout {
  /* Keep intrinsic min width for horizontal scroll inside preview view */
  border-radius: 0px;
  margin-top: 0px;
}

/* #keyboard-layout .main {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  grid-template-rows: 0.75fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2px 2px;
  grid-template-areas:
    '. . . . . . . . . . . . . .'
    '. . . . . . . . . . . . . .'
    '. . . . . . . . . . . . . .'
    '. . . . . . . . . . . . . .'
    '. . . . . . . . . . . . . .'
    '. . . . . . . . . . . . . .';
  grid-area: main;
  height: auto;
}

#keyboard-layout .other {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 0.75fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2px 2px;
  grid-template-areas:
    '. . .'
    '. . .'
    '. . .'
    '. . .'
    '. . .'
    '. . .';
  grid-area: other;
}

#keyboard-layout .num {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: 0.75fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2px 2px;
  grid-template-areas:
    '. . . .'
    '. . . .'
    '. . . .'
    '. . . .'
    '. . . .'
    '. . . .';
  grid-area: num;
} */

:root {
  --font-scale-0: 12px;
  --font-scale-0-5: 14px;
  --font-scale-1: 16px;
  --font-scale-2: 18px;
  --font-scale-3: 20px;
}

/* 
.kb-layout-key {
  border: 1px solid var(--indentation-guide);
  font-size: var(--font-scale-0);
  line-height: initial;

/* -------------------------------------------------------------- */
/* FLOATING UI ELEMENTS                                           */
/* -------------------------------------------------------------- */

/* Base floating element styles required by @skeletonlabs/floating-ui-svelte */
.floating {
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200000; /* Above other popups */
}

/* Enhanced floating tooltip styles */
.floating-tooltip {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-normal);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: 300px;
  word-wrap: break-word;
  z-index: 200001;
}

/* Floating dropdown container */
.floating-dropdown {
  background: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 12px 16px;
  min-width: 220px;
  box-shadow: 0px 45px 18px rgba(5, 5, 5, 0.01),
    0px 25px 15px rgba(5, 5, 5, 0.03), 0px 11px 11px rgba(5, 5, 5, 0.04),
    0px 3px 6px rgba(5, 5, 5, 0.05), 0px 0px 0px rgba(5, 5, 5, 0.05);
  z-index: 150000;
}

/* Floating popover container */
.floating-popover {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 8px;
  min-width: 260px;
  max-height: 320px;
  overflow: auto;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  z-index: 160000;
}

/* Floating arrow styles for tooltips and popovers */
.floating-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
}

/* Arrow positioning adjustments */
.floating-arrow[data-side="top"] {
  bottom: -4px;
  border-bottom: none;
  border-right: none;
}

.floating-arrow[data-side="bottom"] {
  top: -4px;
  border-top: none;
  border-left: none;
}

.floating-arrow[data-side="left"] {
  right: -4px;
  border-right: none;
  border-bottom: none;
}

.floating-arrow[data-side="right"] {
  left: -4px;
  border-left: none;
  border-top: none;
}

/* Floating element animations */
.floating-enter {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 150ms ease, transform 150ms ease;
}

.floating-enter-active {
  opacity: 1;
  transform: scale(1);
}

.floating-exit {
  opacity: 1;
  transform: scale(1);
  transition: opacity 100ms ease, transform 100ms ease;
}

.floating-exit-active {
  opacity: 0;
  transform: scale(0.95);
}

/* Specific styling for dev-dropdown content */
.floating-dropdown.dev-dropdown {
  min-width: 220px;
  padding: 8px;
}

.floating-dropdown .dev-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
}

.floating-dropdown .dev-item .inline {
  margin-right: auto;
  color: var(--text-muted);
}

.floating-dropdown .dev-item .link {
  background: none;
  border: none;
  color: var(--interactive-accent);
  cursor: pointer;
  padding: 0;
}

.floating-dropdown .dev-item select {
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: 4px;
  color: var(--text-normal);
  background-color: var(--background-primary);
}

.kb-layout-key.small-text {
  font-size: 10px;
}

.kb-layout-key[data-weight='1'] {
  background-color: #f0bca469;
}
.kb-layout-key[data-weight='2'] {
  background-color: #e694846f;
}
.kb-layout-key[data-weight='3'] {
  background-color: #d96f6f84;
}
.kb-layout-key[data-weight='4'] {
  background-color: #c94f4f81;
}
.kb-layout-key[data-weight='5'] {
  background-color: #b932328e;
}

.kb-layout-key.is-active {
  color: var(--text-on-accent);
  background-color: var(--interactive-accent);
}

.kb-layout-key.is-active:hover {
  color: var(--text-on-accent);
  background-color: var(--interactive-accent-hover);
}

.kb-layout-key:hover {
  background-color: var(--background-primary-alt);
}

.kb-layout-key.empty {
  border: none;
  background-color: transparent;
}
