/* ==========================================================================
   searchbox.css -- the AI-style search box (searchbar.composer.theme.php,
   searchbox.js; $Searchbox_AI_On). Loaded only while it is on, after
   app.css, and every rule hangs off form[data-fs-sbx], so turning it off
   leaves the classic box exactly as it was.

   The card is the existing #searchgroup composer (app.css): it wraps, so the
   prompt chip sits above the words and the bar below them. The classic
   submit and clear buttons give way to the bar's. The filter row moves into
   the Filters pop-up (searchbox.js); the date and match buttons open pop-up
   lists of their menus' choices. Until the script has moved it the row is
   hidden (html[data-fs-theme] is set by the head script, so without
   JavaScript the classic row stays).
   Hybrid is the base; dark mode below (data-fs-theme="dark").
   ========================================================================== */

form[data-fs-sbx] #searchgroup{
  flex-wrap:wrap;
  align-items:center;
  padding:8px 10px 7px 16px;
  row-gap:2px;
}
form[data-fs-sbx] #searchgroup textarea.search-input{
  flex:1 1 100%;
  width:100%;
  min-height:38px;
  padding:.45rem .2rem .3rem;
}
form[data-fs-sbx] #searchgroup textarea.search-input-lg{ min-height:52px; }
form[data-fs-sbx] #searchgroup > .btn-warning,
form[data-fs-sbx] #searchgroup > .search-clear-button{ display:none !important; }
form[data-fs-sbx] .fs-mobile-filter-toggle{ display:none !important; }
/* A Prompts or Commands menu open: the typeahead's suggestions wait. */
form[data-fs-sbx].has-sbx-menu #typeahead-menu{ display:none !important; }
/* #searchgroup is z-index:2 (app.css), which would keep its pop-ups under the
   tab strip's scroll arrows; lift it while one is open. */
form[data-fs-sbx].has-sbx-menu #searchgroup{ z-index:1060; }

/* ---- bar ---- */
.fs-sbx-bar{
  position:relative;
  flex:1 1 100%;
  order:10;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-width:0;
}
.fs-sbx-l, .fs-sbx-r{ display:flex; align-items:center; gap:2px; min-width:0; }
.fs-sbx-l{ flex:1 1 auto; overflow-x:auto; scrollbar-width:none; }
.fs-sbx-l::-webkit-scrollbar{ display:none; }
.fs-sbx-r{ flex:0 0 auto; }
.fs-sbx-ico{ width:16px; height:16px; flex:0 0 auto; }
.fs-sbx-btn{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  border:1px solid transparent; background:transparent; border-radius:999px;
  color:#5b6472; font:inherit; font-size:13px; font-weight:500; line-height:1.2;
  padding:6px 10px; white-space:nowrap; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.fs-sbx-btn[hidden], .fs-sbx-icon[hidden], .fs-sbx-sep[hidden]{ display:none !important; }
.fs-sbx-btn:hover, .fs-sbx-btn.is-on{ background:#f1f3f7; color:#0e1116; }
.fs-sbx-btn:focus-visible, .fs-sbx-icon:focus-visible, .fs-sbx-mi:focus-visible{ outline:2px solid #845ef7; outline-offset:1px; }
.fs-sbx-btn.is-outline{ border-color:#e1e6ee; }
.fs-sbx-btn.is-ai{
  color:#4c3fb3; font-weight:600;
  background:linear-gradient(135deg, rgba(76,141,251,.14), rgba(132,94,247,.14));
}
.fs-sbx-btn.is-ai:hover, .fs-sbx-btn.is-ai.is-on{ background:linear-gradient(135deg, rgba(76,141,251,.24), rgba(132,94,247,.24)); color:#3b2f9c; }
.fs-sbx-btn .fs-sbx-ico + span + .fs-sbx-ico{ width:12px; height:12px; opacity:.6; margin-left:-2px; }
.fs-sbx-quick{ max-width:220px; }
.fs-sbx-quick [data-fs-sbx-label]{ overflow:hidden; text-overflow:ellipsis; }
.fs-sbx-count{
  min-width:18px; padding:0 6px; border-radius:999px;
  background:#845ef7; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
.fs-sbx-count[hidden]{ display:none; }
.fs-sbx-sep{ width:1px; height:20px; background:#e5e9f0; margin:0 5px; flex:0 0 auto; }
.fs-sbx-icon{
  width:34px; height:34px; border-radius:50%; border:0; background:transparent;
  display:grid; place-items:center; color:#5b6472; cursor:pointer;
}
.fs-sbx-icon:hover{ background:#f1f3f7; color:#0e1116; }
.fs-sbx-icon.is-on{ background:#fde8e8; color:#c81e1e; }
.fs-sbx-send{
  width:40px; height:40px; border-radius:50%; border:0; flex:0 0 auto; margin-left:4px;
  display:grid; place-items:center; color:#fff; cursor:pointer;
  background:linear-gradient(120deg,#4c8dfb,#845ef7 55%,#1abc9c);
  box-shadow:0 4px 12px rgba(132,94,247,.38);
  transition:transform .15s var(--ease, ease), box-shadow .15s ease;
}
.fs-sbx-send .fs-sbx-ico{ width:20px; height:20px; stroke-width:2.4; }
.fs-sbx-send:hover{ transform:scale(1.07); box-shadow:0 6px 16px rgba(132,94,247,.5); }
.fs-sbx-send:active{ transform:scale(.94); }
.fs-sbx-send:focus-visible{ outline:3px solid rgba(132,94,247,.35); outline-offset:2px; }

/* ---- prompt and file chips (above the words) ---- */
.fs-sbx-chips{ flex:1 1 100%; order:-1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding-top:4px; min-width:0; }
.fs-sbx-chips[hidden]{ display:none; }
.fs-sbx-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  border-radius:999px; padding:3px 4px 3px 10px; font-size:13px; font-weight:600;
  background:linear-gradient(135deg, rgba(76,141,251,.14), rgba(132,94,247,.14)); color:#4c3fb3; white-space:nowrap;
}
.fs-sbx-chip .fs-sbx-ico{ width:13px; height:13px; }
.fs-sbx-chip-x{
  width:20px; height:20px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(0,0,0,.07); color:inherit; font-size:15px; line-height:1;
}
.fs-sbx-chip-x:hover{ background:rgba(0,0,0,.14); }
.fs-sbx-chip-note{ font-size:12px; color:#8b93a1; white-space:nowrap; }
.fs-sbx-chip.is-file{ background:#f1f3f7; color:#1f2937; font-weight:500; }
.fs-sbx-chip.is-file .fs-sbx-ico{ color:#845ef7; }
.fs-sbx-chip-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fs-sbx-chip.is-file .fs-sbx-chip-t{ max-width:200px; }
.fs-sbx-chip-note.is-warn{ color:#b45309; white-space:normal; }

/* ---- + (attach files) ---- */
.fs-sbx-plus{ flex:0 0 auto; border:1px solid #e1e6ee; width:32px; height:32px; margin-right:4px; }
.fs-sbx-plus .fs-sbx-ico{ width:18px; height:18px; }
.fs-sbx-plus.is-on{ background:#f3f0ff; color:#4c3fb3; border-color:#cfc3fb; }
.fs-sbx-attach{ width:min(340px, calc(100vw - 32px)); }
.fs-sbx-attach-note{ margin:6px 10px 4px; font-size:12px; line-height:1.45; color:#8b93a1; }
form[data-fs-sbx] #searchgroup.is-sbx-drop{ outline:2px dashed #845ef7; outline-offset:2px; }

/* ---- menus ---- */
.fs-sbx-menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:1070;
  width:min(440px, calc(100vw - 32px)); max-height:min(420px, 60vh); overflow:auto;
  background:#fff; border:1px solid #e3e8ef; border-radius:16px; padding:6px;
  box-shadow:0 18px 44px -12px rgba(9,14,22,.45);
  color:#1f2937; font-size:13.5px; text-align:left;
}
.fs-sbx-menu[hidden]{ display:none; }
.fs-sbx-h{ margin:8px 10px 4px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8b93a1; }
.fs-sbx-mi{
  display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:transparent; border-radius:10px; padding:8px 10px;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.fs-sbx-mi .fs-sbx-ico{ color:#845ef7; }
.fs-sbx-mi b{ font-weight:600; color:#0e1116; white-space:nowrap; }
.fs-sbx-mi small{ margin-left:auto; padding-left:12px; color:#8b93a1; font-size:12px; text-align:right; }
.fs-sbx-mi:hover, .fs-sbx-mi.is-active{ background:#f3f0ff; }
.fs-sbx-none{ padding:10px 12px; color:#8b93a1; }

/* ---- Filters pop-up (the classic filter row, moved into the bar) ---- */
html[data-fs-theme] form[data-fs-sbx] .scroll-container{ display:none !important; }
.fs-sbx-fpop{ width:min(560px, calc(100vw - 32px)); max-height:none; overflow:visible; padding:6px 12px 14px; }
.fs-sbx-fpop[hidden]{ display:none !important; }
.fs-sbx-fgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; padding:4px 0 0; }
.fs-sbx-fgrid > *{ margin:0 !important; padding:0 !important; width:auto !important; min-width:0; max-width:none; flex:none; }
/* Label on its own line above the menu (the row's items are flex boxes). */
.fs-sbx-fgrid > [data-fs-sbx-label]{ display:flex !important; flex-wrap:wrap; align-items:center; gap:0 6px; }
.fs-sbx-fgrid > [data-fs-sbx-label]::before{
  content:attr(data-fs-sbx-label); flex:0 0 100%; margin:0 0 5px 2px;
  font-size:11.5px; font-weight:600; color:#5b6472;
}
.fs-sbx-fgrid > [data-fs-sbx-label] > select,
.fs-sbx-fgrid > [data-fs-sbx-label] > .fs-snt-btn{ flex:1 1 100%; }
.fs-sbx-fgrid .fs-words-range input{ flex:1 1 0; }
/* The row's own arrow (on the item); the menus here draw theirs. */
.fs-sbx-fgrid > *::after{ display:none !important; }
.fs-sbx-fgrid > .d-none{ display:none !important; }
.fs-sbx-fgrid .form-select,
.fs-sbx-fgrid .form-control{
  width:100% !important; height:38px; min-height:0;
  background-color:#f6f7fa !important; color:#1f2937 !important;
  border:1px solid #e1e6ee !important; border-radius:10px !important;
  font-size:13.5px; box-shadow:none;
}
.fs-sbx-fgrid select.form-select{
  padding:0 30px 0 11px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b6472' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:12px 9px !important;
}
.fs-sbx-fgrid .form-select:focus,
.fs-sbx-fgrid .form-control:focus{ border-color:#845ef7 !important; box-shadow:0 0 0 3px rgba(132,94,247,.16); outline:0; }
.fs-sbx-fgrid .fs-snt-btn{ padding:0 30px 0 11px; text-align:left; }
/* The open lists: the header paints filter options white for its dark row
   (app.css, select.custom-height option); here they sit on a light list. */
.fs-sbx-fgrid select option,
.fs-sbx-fgrid select optgroup{ color:#1f2937 !important; background-color:#ffffff !important; }
.fs-sbx-fgrid .fs-words-range{ display:flex; align-items:center; gap:6px; color:#5b6472; }
.fs-sbx-fgrid .fs-words-range input::placeholder{ color:#8b93a1; }
.fs-sbx-ffoot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px; border-top:1px solid #edf0f4;
}
.fs-sbx-ffoot .fs-gw{ display:inline-flex; align-items:center; gap:7px; margin:0; padding:0; color:#1f2937; font-size:13px; }
.fs-sbx-ffoot .fs-gw .form-check-input{ float:none; margin:0; }
.fs-sbx-ffoot .fs-news-link{ color:#4c3fb3; font-size:13px; font-weight:600; text-decoration:none; }
.fs-sbx-ffoot .fs-news-link:hover, .fs-sbx-ffoot .fs-news-link:focus{ color:#3b2f9c; text-decoration:underline; }
.fs-sbx-fgrid .scroll-button{ display:none; }

/* ---- date and match lists ---- */
.fs-sbx-opts{ width:min(320px, calc(100vw - 32px)); }
.fs-sbx-opt{ padding:7px 10px 7px 34px; position:relative; }
.fs-sbx-opt b{ font-weight:500; }
.fs-sbx-opt.is-sel b{ font-weight:650; color:#4c3fb3; }
.fs-sbx-opt.is-sel::before{
  content:""; position:absolute; left:13px; top:50%; width:10px; height:6px; margin-top:-5px;
  border-left:2px solid #845ef7; border-bottom:2px solid #845ef7; transform:rotate(-45deg);
}

/* Phones: two rows, so every choice stays in sight. The filter buttons on
   the first; Prompts, Commands, Clear and Search on the second. The left
   group stops being a box, and the divider becomes the line break. */
@media (max-width: 575.98px){
  form[data-fs-sbx] #searchgroup{ padding:6px 8px 6px 12px; }
  .fs-sbx-bar{ flex-wrap:wrap; justify-content:flex-start; gap:4px 2px; }
  .fs-sbx-l{ display:contents; }
  .fs-sbx-sep:not([hidden]){ display:block; flex:0 0 100%; width:auto; height:0; margin:0; background:none; }
  .fs-sbx-r{ margin-left:auto; }
  .fs-sbx-btn[data-fs-sbx-clear] span{ display:none !important; }
  .fs-sbx-quick{ max-width:150px; }
  .fs-sbx-btn{ padding:6px 8px; }
  .fs-sbx-send{ width:36px; height:36px; }
  .fs-sbx-chip-note{ display:none; }
  .fs-sbx-chip-note.is-warn{ display:block; flex:1 1 100%; }
  .fs-sbx-chip.is-file .fs-sbx-chip-t{ max-width:140px; }
  .fs-sbx-mi small{ display:none; }
  /* Room for + and the microphone: the menus' down-arrows go. */
  .fs-sbx-quick > .fs-sbx-ico:last-child,
  .fs-sbx-btn[data-fs-sbx-menu="prompts"] > .fs-sbx-ico:last-child{ display:none; }
}
/* Narrow phones: Filters is its icon and count (the word stays for screen readers). */
@media (max-width: 399.98px){
  .fs-sbx-btn[data-fs-sbx-menu="filters"] > span:not(.fs-sbx-count){
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .fs-sbx-btn{ padding:6px 6px; }
  .fs-sbx-icon{ width:32px; height:32px; }
}
@media (max-width: 459.98px){
  .fs-sbx-fgrid{ grid-template-columns:minmax(0, 1fr); }
}

/* ---- dark ---- */
html[data-fs-theme="dark"] .fs-sbx-btn,
html[data-fs-theme="dark"] .fs-sbx-icon{ color:#9aa7b6; }
html[data-fs-theme="dark"] .fs-sbx-btn:hover,
html[data-fs-theme="dark"] .fs-sbx-btn.is-on,
html[data-fs-theme="dark"] .fs-sbx-icon:hover{ background:#232e3b; color:#e6edf5; }
html[data-fs-theme="dark"] .fs-sbx-btn.is-outline{ border-color:#2c3949; }
html[data-fs-theme="dark"] .fs-sbx-btn.is-ai{ color:#cbbcff; background:linear-gradient(135deg, rgba(76,141,251,.22), rgba(132,94,247,.22)); }
html[data-fs-theme="dark"] .fs-sbx-btn.is-ai:hover,
html[data-fs-theme="dark"] .fs-sbx-btn.is-ai.is-on{ color:#e2d9ff; background:linear-gradient(135deg, rgba(76,141,251,.32), rgba(132,94,247,.32)); }
html[data-fs-theme="dark"] .fs-sbx-sep{ background:#2c3949; }
html[data-fs-theme="dark"] .fs-sbx-icon.is-on{ background:rgba(248,113,113,.18); color:#fca5a5; }
html[data-fs-theme="dark"] .fs-sbx-chip{ color:#cbbcff; background:linear-gradient(135deg, rgba(76,141,251,.22), rgba(132,94,247,.22)); }
html[data-fs-theme="dark"] .fs-sbx-chip-x{ background:rgba(255,255,255,.1); }
html[data-fs-theme="dark"] .fs-sbx-chip-x:hover{ background:rgba(255,255,255,.18); }
html[data-fs-theme="dark"] .fs-sbx-chip-note,
html[data-fs-theme="dark"] .fs-sbx-h,
html[data-fs-theme="dark"] .fs-sbx-mi small,
html[data-fs-theme="dark"] .fs-sbx-none{ color:#7c8b9d; }
html[data-fs-theme="dark"] .fs-sbx-menu{ background:#161d26; border-color:#2c3949; color:#c6d0dc; box-shadow:0 18px 44px -12px rgba(0,0,0,.7); }
html[data-fs-theme="dark"] .fs-sbx-mi b{ color:#e6edf5; }
html[data-fs-theme="dark"] .fs-sbx-mi .fs-sbx-ico{ color:#a98bff; }
html[data-fs-theme="dark"] .fs-sbx-mi:hover,
html[data-fs-theme="dark"] .fs-sbx-mi.is-active{ background:rgba(132,94,247,.18); }
html[data-fs-theme="dark"] .fs-sbx-fgrid > [data-fs-sbx-label]::before,
html[data-fs-theme="dark"] .fs-sbx-fgrid .fs-words-range{ color:#9aa7b6; }
html[data-fs-theme="dark"] .fs-sbx-fgrid .form-select,
html[data-fs-theme="dark"] .fs-sbx-fgrid .form-control{
  background-color:#1f2833 !important; color:#dbe4ee !important; border-color:#2c3949 !important;
}
html[data-fs-theme="dark"] .fs-sbx-fgrid select.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa7b6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
html[data-fs-theme="dark"] .fs-sbx-opt.is-sel b{ color:#cbbcff; }
html[data-fs-theme="dark"] .fs-sbx-opt.is-sel::before{ border-color:#a98bff; }
html[data-fs-theme="dark"] .fs-sbx-fgrid select option,
html[data-fs-theme="dark"] .fs-sbx-fgrid select optgroup{ color:#dbe4ee !important; background-color:#1f2833 !important; }
html[data-fs-theme="dark"] .fs-sbx-ffoot{ border-top-color:#232e3b; }
html[data-fs-theme="dark"] .fs-sbx-ffoot .fs-gw{ color:#c6d0dc; }
html[data-fs-theme="dark"] .fs-sbx-ffoot .fs-news-link{ color:#cbbcff; }
html[data-fs-theme="dark"] .fs-sbx-chip.is-file{ background:#232e3b; color:#dbe4ee; }
html[data-fs-theme="dark"] .fs-sbx-chip.is-file .fs-sbx-ico{ color:#a98bff; }
html[data-fs-theme="dark"] .fs-sbx-chip-note.is-warn{ color:#fbbf24; }
html[data-fs-theme="dark"] .fs-sbx-plus{ border-color:#2c3949; }
html[data-fs-theme="dark"] .fs-sbx-plus.is-on{ background:rgba(132,94,247,.18); color:#cbbcff; border-color:#5b4a9e; }
html[data-fs-theme="dark"] .fs-sbx-attach-note{ color:#8291a3; }