/* ===========================================
   SEARCHABLE LoRA COMBOBOX

   The one stylesheet for .lora-combobox — the searchable picker behind the
   generation character selector (#qwenGenCharacter), both inpaint pickers
   (#inpaintLoraSelect, #inpaintNsfwLoraSelect), every anatomy/LoRA slot
   (#groinLoraCombobox and the chest stack rows built by addChestLoraRow())
   and the Library's character filter (#libTabCharactersCombobox).

   These rules used to live in an inline <style> buried next to the Advanced
   Settings markup in index.html, which is why the component was invisible to
   css/theme-light.css: nobody restyling the light theme ever found it. Moving
   them here follows what PR #248 did for the Send-to menu — one file, linked
   after css/main.css so the .light-theme block below wins the cascade on
   specificity alone, with no !important anywhere.

   No other stylesheet styles these classes. The character glyph that lands
   inside .lora-combobox-label and .lora-combobox-option (.char-icon /
   .char-name, from ProductModelCatalog.characterLabelHtml()) is styled in
   css/send-to-menu.css, beside the Send-to row icons it matches.
   =========================================== */

/* ---------- Base (dark) ------------------------------------------------
   Moved verbatim from index.html. --input-bg is not defined by
   css/variables.css in either theme, so both fallbacks below are what
   actually paints: rgba(0,0,0,0.3) on the trigger and #1c1c1c on the panel.
   That is exactly why the light theme needed its own block — the panel was
   hard-coded dark in both themes while --text-primary flipped to near-black
   under it. */

.lora-combobox { position: relative; flex: 1; min-width: 0; font-size: 0.85em; }
.lora-combobox-display {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.15));
  background: var(--input-bg, rgba(0,0,0,0.3));
  color: var(--text-primary, #fff);
  cursor: pointer;
  border-radius: 4px;
  min-height: 28px;
  box-sizing: border-box;
}
.lora-combobox-display:focus { outline: 1px solid var(--accent-color, #888); }
.lora-combobox-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lora-combobox-caret { margin-left: 6px; opacity: 0.6; flex-shrink: 0; }
.lora-combobox-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--input-bg, #1c1c1c);
  border: 1px solid var(--border-color, rgba(255,255,255,0.15));
  border-radius: 4px;
  margin-top: 2px;
  max-height: 240px;
  display: flex; flex-direction: column;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.lora-combobox-search {
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.15));
  background: rgba(0,0,0,0.2);
  color: var(--text-primary, #fff);
  outline: none;
  font-size: 0.85em;
  width: 100%;
  box-sizing: border-box;
}
.lora-combobox-options { overflow-y: auto; flex: 1; }
.lora-combobox-option {
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.85em;
  color: var(--text-primary, #fff);
}
.lora-combobox-option:hover { background: rgba(255,100,200,0.15); }
.lora-combobox-option[data-empty] {
  padding: 10px; color: var(--text-secondary, #888);
  cursor: default; font-style: italic; text-align: center;
}

/* ---------- Light theme -------------------------------------------------
   The defect this block fixes: the panel above is hard-coded #1c1c1c, while
   css/theme-light.css repaints --text-primary #1d1d1f and paints every <span>
   the same near-black (`.light-theme span`, 0-1-1). Under .light-theme the
   dropdown was therefore near-black text on a near-black panel — the plain
   "All characters" row just as unreadable as a character row.

   Values follow css/send-to-menu.css so a picker panel and a Send-to panel
   read as the same object: a white translucent panel over a blur, a
   rgba(0,0,0,0.10) hairline, a neutral rgba(0,0,0,0.06) hover instead of the
   dark theme's pink tint, #1d1d1f text and #4a4a4f for the secondary row.

   Every selector here is 0-2-0 or higher, which outranks `.light-theme span`
   (0-1-1) and `.light-theme p, span, label` on its own. Nothing needs
   !important, and the base rules above are untouched — the dark theme renders
   byte-for-byte what it rendered before this file existed. */

.light-theme .lora-combobox-display {
  background: #f5f5f7;
  border-color: rgba(0, 0, 0, 0.10);
  color: #1d1d1f;
}

/* The dark theme's 1px #888 hairline is invisible on a light ground. Keyboard
   focus has to stay obvious: the trigger is the only tab stop that opens the
   panel. */
.light-theme .lora-combobox-display:focus,
.light-theme .lora-combobox-display:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.45);
  outline-offset: 1px;
}

.light-theme .lora-combobox-dropdown {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* Without a blur to sit on, 0.94 alpha over a busy card is muddy — go opaque,
   exactly as the Send-to panel does. */
@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .light-theme .lora-combobox-dropdown {
    background: #ffffff;
  }
}

/* The search field is deliberately absent: css/theme-light.css already claims
   every `input` in the app with `background:#f0f0f5 !important` and matching
   border/colour, so it lands on .lora-combobox-search on its own — #1d1d1f on
   #f0f0f5, 15.7:1, and a quiet grey strip at the top of the white panel that
   reads exactly like a macOS search field. Restyling it here would mean an
   !important arms race against the app's own light-input rule to arrive
   somewhere no better. The rows below are divs, so nothing shadows them.

   The row colour, not the span colour: .char-icon and .char-name resolve to
   currentColor / inherit (css/send-to-menu.css), so colouring the row paints
   the glyph and the name together and a character row reads exactly like the
   plain row beside it. */
.light-theme .lora-combobox-option {
  color: #1d1d1f;
}

.light-theme .lora-combobox-option:hover,
.light-theme .lora-combobox-option:focus,
.light-theme .lora-combobox-option:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}

.light-theme .lora-combobox-option:active {
  background: rgba(0, 0, 0, 0.10);
}

/* "No LoRAs available" / "No characters" — quieter than a real row, still a
   comfortable 8.8:1 on the white panel. */
.light-theme .lora-combobox-option[data-empty] {
  color: #4a4a4f;
}