/* Picker and palette styles extracted from styles.css */

/* ----------------------------------------------------------------
   Custom Picker System - replaces native <select> elements
   ---------------------------------------------------------------- */

/* Picker trigger button (replaces select) - styled as plain UI text */
.picker-trigger {
  background: transparent;
  /* Keep a stable 1px border box so focus doesn't shift layout */
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
  color: var(--snow);
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  font-weight: var(--ui-font-weight);
  cursor: pointer;
  text-align: right;
  line-height: var(--switch-height);
  height: var(--switch-height);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: auto;
  transition: color 100ms ease;
}
.picker-trigger:hover {
  /* Match popup option hover: background and text color identical */
  color: var(--ui-text-hover);
  background-color: var(--ui-hover-bg);
  border-color: transparent; /* keep hover look identical to popup option */
}

.picker-trigger:focus {
  outline: none; /* hide default focus outline */
}

.picker-trigger:focus-visible {
  outline: none;
  /* Underline the trigger text and tint the background on keyboard focus
     to indicate selection without showing a border */
  border-color: transparent;
  background-color: var(--select-focus-color);
  color: var(--ui-text-focus);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* helper wrapper for picker text so runtime alignment transforms only apply to
   the text glyphs (not the button container). The alignment script wraps the
   trigger text in a .picker-text span when needed. */
.picker-trigger .picker-text {
  display: inline-block; /* measurable box for precise adjustments */
  transition: transform 120ms ease;
  transform: translateX(0);
}

/* Picker modal - similar to file picker / drive modal */
.picker-modal {
  /* Scope the picker modal to the editor pane (not the whole viewport) so
     the backdrop only affects the editor like other modals. When the panel
     is "pinned" (near cursor) it switches to fixed positioning via JS. */
  position: absolute;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease-in-out;
}
.picker-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.picker-modal .picker-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
}
.picker-modal .picker-panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  /* match other panels: give the same outer padding as modal content */
  padding: var(--modal-padding);
  min-width: 180px;
  max-width: min(320px, 90vw);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(-1 * var(--slide-offset)));
  opacity: 0;
  transition: transform 100ms ease, opacity 100ms ease;
}
.picker-modal.open .picker-panel {
  transform: translateY(0);
  opacity: 1;
}
.picker-modal .picker-panel.pinned {
  /* When JS pins the panel next to the cursor we place it with absolute coords
     relative to the editor pane so it "sticks" when the editor is resized.
     If the JS prefers viewport-fixed positioning (no editor pane available)
     the script will set position:fixed inline as a fallback. */
  position: absolute;
  transform: none !important;
  transition: none;
}
/* picker has no title — options render directly inside the padded panel */
.picker-modal .picker-options {
  list-style: none;
  margin: 0;
  padding: 0; /* rely on panel padding to space content */
  overflow-y: auto;
  flex: 1;
}
.picker-modal .picker-option {
  margin: 0;
  padding: 0;
}
.picker-modal .picker-option button {
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--space-sm) var(--space-sm);
  margin: 0;
  height: auto;
  line-height: 1;
  min-height: auto;
  text-align: left;
  color: var(--ui-text-default);
  font-family: var(--ui-font);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--control-gap);
  transition: background var(--ui-transition-fast), 
              color var(--ui-transition-fast);
}
.picker-modal .picker-option button:hover {
  background: var(--ui-hover-bg);
  color: var(--ui-text-hover);
}
.picker-modal .picker-option button[aria-selected="true"] {
  /* When an option is selected (aria-selected) it should be highlighted
     with the accent background while keeping dark text for readability */
  background: var(--ui-selected-bg);
  font-weight: var(--ui-font-weight);
}
.picker-modal .picker-option button[aria-selected="true"]::after {
  /* removed checkmark — selection is already indicated by background highlighting */
  content: none; /* no glyph */
}

/* Command Palette Modal */
.palette-modal {
  /* Position inside the editor pane so the backdrop only covers the
     editor area. .editor-pane is position:relative, so absolute will
     scope the palette to that container. */
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column; /* stack panel and hint vertically */
  align-items: center;    /* center horizontally */
  justify-content: flex-start; /* start from top */
  padding-top: 10vh; /* place palette near the top of the editor pane */
  pointer-events: none; /* palette is keyboard-first by default */
}

.palette-modal[aria-hidden="true"] {
  display: none;
}

.palette-backdrop {
  /* Backdrop limited to the editor pane area when palette is inside it */
  position: absolute;
  inset: 0;
  background: var(--backdrop-color);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  z-index: -1;
  pointer-events: auto;
}

.palette-panel {
  width: min(600px, 90vw);
  /* Use the same editor background token so the palette looks integrated */
  background: var(--bg);
  /* ensure 1px border all around the palette box */
  border: 1px solid var(--border);
  overflow: hidden;
  /* Keyboard-only - disable mouse interactions inside the panel
     so the palette is navigated exclusively via keyboard */
  /* Keep keyboard-only behavior (disable pointer to avoid cursor focus) */
  pointer-events: none;
  position: relative; /* contain absolutely positioned children */
}

/* When the palette is open, enable pointer interactions inside the panel
   so users can scroll and click suggestions if desired. We keep the overall
   palette keyboard-first by not enabling pointer-events on the modal root. */
.palette-modal[aria-hidden="false"] .palette-panel {
  pointer-events: auto;
}

.palette-input {
  width: 100%;
  padding: 12px 48px 12px 16px; /* add right padding to fit submit button */
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  background: var(--bg);
  color: var(--text);
  border: none;
    /* Remove inner divider so the palette panel retains a single 1px border
      around the whole box (avoid doubling at the bottom). */
    border-bottom: none;
  outline: none;
  /* prevent mouse focusing/clicking; palette is keyboard-only */
  pointer-events: none;
}

/* Input wrapper to allow absolute positioning of submit button within the input area */
.palette-input-wrap {
  position: relative;
}

/* Submit button that appears when the input is a full valid command */
.palette-enter-btn {
  position: absolute;
  right: 8px; /* small gap from panel edge */
  top: 50%; /* center vertically within the input area */
  transform: translateY(-50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 0; /* flat UI — no rounded corners */
}

.palette-input::placeholder {
  color: var(--placeholder-muted);
}

.palette-input:focus {
  background: color-mix(in srgb, var(--bg) 95%, var(--accent) 5%);
}

/* Make the results list darker than the panel so entries feel inset and lower-contrast.
   Use color-mix to darken slightly relative to var(--bg) which keeps the theme tokens.
*/
.palette-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto; /* enable scrolling with native scrollbar */
  /* Slightly darker than the panel background so the list feels distinct */
  background: var(--bg-darker);
  /* Allow pointer interaction for results so suggestions can be clicked (fills input instead of closing). */
  pointer-events: auto;
  /* Keep highlight edge-to-edge behind the scrollbar */
  padding-inline-end: 0;
}

.palette-result-item {
  /* Match the palette input horizontal padding so items align with the input */
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: background 100ms ease, opacity 120ms ease;
  pointer-events: auto; /* allow clicking individual items */
  height: var(--palette-item-height, 40px);
  align-items: center;
}

.palette-result-item:hover {
  background: color-mix(in srgb, var(--ui-selected-bg) 65%, transparent 35%);
}

/* No dividing lines between suggested items — rely on spacing/contrast. */


.palette-result-item.selected {
  /* Keep selected visible but slightly darker and subtler than before */
  background: var(--ui-selected-bg);
}

.palette-result-type {
  /* Category shown on the right (muted) */
  font-weight: var(--ui-font-weight);
  color: var(--placeholder-muted);
  min-width: 64px;
  font-size: var(--ui-font-size);
  margin-left: auto; /* push to the right */
  text-align: right;
}

.palette-result-name {
  color: var(--text);
  flex: 1;
}

/* Opacity gradient for visible suggestions (7 visible items)
   1-4: 100%, 5: 80%, 6: 60%, 7: 20% */
/* Removed opacity gradient for scrollable list */

/* Hint shown below the suggestion list */
.palette-hint {
  /* Place the hint outside the palette panel so it reads as meta-help text.
     Match the panel width and horizontal padding so the text aligns exactly
     with the suggestion box content. */
  width: min(600px, 90vw);
  margin-top: 0.5rem;
  padding: 12px 16px; /* match palette input horizontal padding */
  font-size: var(--ui-font-size);
  color: var(--border); /* same color as the suggestion box outline */
  text-align: left; /* align with text in the suggestion box */
  pointer-events: none;
  opacity: 0.95;
}

/* Right-align hints that are rendered beneath modals */
.palette-hint.search-hint,
.palette-hint.confirm-hint {
  text-align: right;
} 


/* debug styles removed — picker appearance handled in the main .picker-trigger block */