/* Ultron — ChatGPT-style dark UI */
:root {
  --bg: #0f0f10;
  --surface: #1c1c1f;
  --surface-2: #26262a;
  --bubble: #2b2b30;
  --border: #2e2e33;
  --text: #ececf1;
  --muted: #9a9aa6;
  --faint: #6c6c78;
  --accent: #6d8bff;
  --accent-2: #7c5cff;
  --green: #46d39a;
  --red: #f87a7a;
  --amber: #e3b341;
  --col: 1520px;
  --radius: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.logo { filter: saturate(1.2); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { display: flex; flex-direction: column; gap: 14px; width: 340px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.login-brand { font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.login-sub { margin: -8px 0 8px; color: var(--muted); font-size: 13px; }
.login-box label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.login-box input { font: inherit; padding: 11px 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); outline: none; }
.login-box input:focus { border-color: var(--accent); }
.login-box button { font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; cursor: pointer; }
.login-error { margin: 0; color: var(--red); font-size: 13px; min-height: 1em; }
.sso-btn { font: inherit; font-weight: 600; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); text-align: center; text-decoration: none; }
.sso-btn:hover { border-color: var(--accent); }
.sso-btn.busy { opacity: .6; pointer-events: none; }
.login-box button:disabled { opacity: .6; cursor: default; }
.login-box .linkish { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; font-weight: 400; text-decoration: underline; cursor: pointer; }

/* ---------- App shell ---------- */
#app { height: 100vh; display: flex; flex-direction: column; }
header { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: rgba(15,15,16,.8); backdrop-filter: blur(8px); }
.brand { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 7px; }
.scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash { color: var(--faint); }
.window-hint { color: var(--faint); font-size: 12px; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* user menu */
.user-menu { position: relative; }
.user-menu-items { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.5); z-index: 100; }
.user-menu-items button { display: block; width: 100%; text-align: left; padding: 8px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.user-menu-items button:hover { background: var(--surface-2); }

/* config modal */
.config-modal { width: min(560px, 92vw); padding: 28px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; color: var(--text); }
.config-modal::backdrop { background: rgba(0,0,0,.6); }
.config-modal h2 { margin: 0 0 4px; font-size: 18px; }
.cfg-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.config-modal form { display: flex; flex-direction: column; gap: 14px; }
.config-modal label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.config-modal input { font: inherit; padding: 11px 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); outline: none; }
.config-modal input:focus { border-color: var(--accent); }
.cfg-status { margin: 0; font-size: 13px; color: var(--amber); min-height: 1em; }
.cfg-actions { display: flex; justify-content: flex-end; gap: 10px; }
.cfg-save { font: inherit; font-weight: 600; padding: 9px 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; cursor: pointer; }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }

.date { font: inherit; font-size: 13px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); color-scheme: dark; }
.date::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }

.shell { flex: 1; min-height: 0; display: flex; }
main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }

/* ---------- Recents sidebar ---------- */
.recents { flex: 0 0 230px; min-height: 0; overflow-y: auto; padding: 16px 10px; border-right: 1px solid var(--border); }
.recents-head { padding: 0 10px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.recents-list { display: flex; flex-direction: column; gap: 2px; }
.recents-item { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recents-item:hover { background: var(--surface-2); }
.recents-item.active { background: var(--surface-2); }
@media (max-width: 900px) { .recents { display: none; } }

/* ---------- Thread ---------- */
/* Full-window scroller: the scrollbar lives at the window's far right (native, show-on-scroll).
   The readable column is capped on the turns inside, not on the scroller. */
.thread { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; padding: 28px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.turn { width: 100%; max-width: var(--col); padding: 0 18px; display: flex; flex-direction: column; gap: 16px; }
.turn-q { align-self: flex-end; max-width: 85%; background: var(--bubble); padding: 11px 16px; border-radius: 20px 20px 6px 20px; white-space: pre-wrap; font-size: 15px; }
.answer { align-self: stretch; display: flex; flex-direction: column; gap: 18px; }

/* report: vertical rhythm between sections; empty sections must not leave stray gaps */
.report { display: flex; flex-direction: column; gap: 16px; }
.report > :empty { display: none; }

.summary { white-space: pre-wrap; font-size: 15.5px; line-height: 1.7; }
.summary strong { font-weight: 650; }

/* thinking indicator */
.thinking { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.spinner { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* metric cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.card-label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.card-value { font-size: 24px; font-weight: 650; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.delta { font-size: 13px; font-weight: 600; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }

/* charts */
.charts { display: flex; flex-direction: column; gap: 12px; }
.chart { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; overflow-x: auto; }
.chart figcaption { font-size: 13px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
/* scale to the card width (viewBox keeps aspect); min-width scrolls on narrow screens instead of shrinking text */
.chart-svg { display: block; width: 100%; height: auto; min-width: 640px; }
.axlbl { font-size: 10.5px; fill: #c7ccda; }
.ytick { font-size: 9.5px; fill: #8a8a96; }

/* scope + caveats */
.scope-note { font-size: 12.5px; color: var(--muted); margin-top: -8px; }  /* hugs the summary above */
.caveats { display: flex; flex-direction: column; gap: 6px; }
.caveat { font-size: 13px; color: #fbbf24; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.25); border-radius: 10px; padding: 8px 12px; }

/* recommendations */
.recs { display: flex; flex-direction: column; gap: 10px; }
/* text left, creative previews right; previews scale with card width */
.rec { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 16px 20px; display: flex; align-items: flex-start; gap: 24px; }
.rec-main { flex: 1; min-width: 0; }
.rec-title { font-weight: 650; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.rec-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rec-detail { color: var(--text); opacity: .9; font-size: 14px; }
.rec-proof { margin-top: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-creatives { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; flex: 0 1 440px; }
.cr { display: flex; flex-direction: column; gap: 5px; flex: 1 1 190px; max-width: 280px; text-decoration: none; color: var(--muted); font-size: 12px; }
.cr img, .cr-id { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .rec { flex-direction: column; gap: 12px; } .rec-creatives { flex-basis: auto; justify-content: flex-start; width: 100%; } }

/* ---------- Evidence drill-down ---------- */
.card.has-ev { cursor: pointer; }
.card.has-ev:hover { border-color: var(--accent); }
.card-ev { margin-top: 6px; font-size: 11px; color: var(--muted); }
.ev-toggle { border: 0; background: none; padding: 0; margin-left: 6px; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; }
.evidence { grid-column: 1 / -1; margin-top: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.ev-spec { color: var(--muted); }
.ev-raw summary { cursor: pointer; font-size: 12px; margin-top: 4px; }
.ev-raw pre { margin: 6px 0 0; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 11.5px; overflow-x: auto; }
.ev-rows { margin-top: 8px; color: var(--muted); }
.ev-table-wrap { overflow: auto; max-height: 320px; border: 1px solid var(--border); border-radius: 8px; }
.ev-table { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; width: 100%; }
.ev-table th, .ev-table td { padding: 5px 12px; border-bottom: 1px solid var(--border); text-align: left; color: var(--text); }
.ev-table th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-weight: 600; }
.ev-actions { margin-top: 8px; display: flex; gap: 8px; }
.ev-actions .btn-small { flex: 0 0 auto; }
a.cr:hover img, a.cr:hover .cr-id { border-color: var(--accent); }
.cr-stat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 20px; background: var(--surface-2); color: var(--muted); }

/* deliverables: ideation brief + storyboard */
.deliverable { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.dlv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.dlv-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 6px; background: rgba(109,139,255,.14); color: var(--accent); }
.dlv-tag.sb { background: rgba(124,92,255,.14); color: var(--accent-2); }
.dlv-title { font-weight: 650; font-size: 15px; }
.dlv-ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kv { font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.kv span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.dlv-section-h { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 8px; }
.cat { margin-bottom: 12px; }
.cat-name { font-weight: 650; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
.el { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.el-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.src { font-size: 11px; color: var(--muted); background: var(--surface-2); padding: 2px 7px; border-radius: 20px; }
.flag { font-size: 11px; color: var(--amber); background: rgba(227,179,65,.12); padding: 2px 7px; border-radius: 20px; }
.el-nums { display: flex; align-items: baseline; gap: 8px; font-size: 13px; white-space: nowrap; }
.lift.up { color: var(--green); font-weight: 600; }
.lift.down { color: var(--red); font-weight: 600; }
.spend { color: var(--muted); font-size: 12px; }
.dlv-notes { font-size: 13px; color: var(--text); opacity: .9; margin-top: 8px; }
.dlv-notes span { display: block; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.sbv { border-left: 3px solid var(--accent); padding: 10px 0 6px 14px; margin-top: 14px; }
.sbv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sbv-name { font-weight: 700; font-size: 14px; }
.sbv-kind { font-size: 12px; color: var(--muted); }
.sbv-rationale { font-size: 13px; color: var(--text); opacity: .9; margin: 4px 0 8px; }
.sbv-cta { font-size: 12.5px; color: var(--accent); margin: 8px 0; }
.scene { padding: 8px 0; border-top: 1px solid var(--border); }
.sc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.sc-n { width: 20px; height: 20px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-obj { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.sc-tc { font-size: 11px; color: var(--faint); margin-left: auto; font-variant-numeric: tabular-nums; }
.sc-f { font-size: 13px; margin: 3px 0 3px 28px; }
.sc-f span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }

/* video generation */
.gen-video { margin-left: auto; font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--accent-2); background: rgba(124,92,255,.12); color: var(--text); cursor: pointer; }
.gen-video:hover:not(:disabled) { background: rgba(124,92,255,.22); }
.gen-video:disabled { opacity: .55; cursor: default; }
.video-job { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.vj-log { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; font-variant-numeric: tabular-nums; }
.vj-log div:last-child { color: var(--text); }
/* folded log blocks: compiler I/O, plan JSON, request manifests */
.vj-fold summary { cursor: pointer; color: var(--text); }
.vj-fold summary:hover { color: var(--accent); }
.vj-fold pre { margin: 6px 0 4px; padding: 8px 10px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.vj-log-fold { font-size: 12px; }
.vj-log-fold summary { color: var(--faint); }
.vj-log-fold .vj-log { margin-top: 6px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.vj-media { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 14px; }
.vj-player { display: block; width: 100%; max-width: 320px; border-radius: 14px; background: #000; box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px var(--border); }
.vj-dl { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.vj-dl:hover { border-color: var(--accent); color: var(--accent); }

/* content drafts */
.content-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.content-kind { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.content-block ul { margin: 0; padding-left: 18px; }
.content-block li { margin: 3px 0; }

/* share row */
.share { display: flex; align-items: center; gap: 8px; }
.share:empty { display: none; }
.share-label { font-size: 12.5px; color: var(--faint); }
.share-btn { font: inherit; font-size: 12.5px; padding: 5px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--muted); cursor: pointer; }
.share-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.share-btn:disabled { opacity: .55; cursor: default; }

/* --- Feedback (👍/👎 + categories + correction + retry) --- */
.feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.feedback:empty { display: none; }
.fb-btn { font: inherit; font-size: 13px; padding: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; }
.fb-btn:hover { border-color: var(--accent); }
.fb-status { font-size: 12.5px; color: var(--muted); }
.fb-panel { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.fb-cats { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.fb-cats label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.fb-correction { font: inherit; font-size: 13px; padding: 9px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); resize: vertical; outline: none; }
.fb-correction:focus { border-color: var(--accent); }
.fb-actions { display: flex; gap: 8px; }
.fb-actions button { font: inherit; font-size: 12.5px; padding: 5px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--muted); cursor: pointer; }
.fb-actions button:hover { border-color: var(--accent); color: var(--text); }

/* suggestions */
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.suggestion { font: inherit; font-size: 13.5px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; color: var(--text); cursor: pointer; text-align: left; }
.suggestion:hover { background: var(--surface-2); border-color: var(--accent); }
/* off-road angle: dashed accent border marks it as the tangent, not a straight follow-up */
.suggestion.explore { border-style: dashed; border-color: var(--accent-2); color: var(--muted); }
.suggestion.explore:hover { color: var(--text); border-color: var(--accent-2); }

/* cold-start empty state: heading + composer + chips vertically centered (ChatGPT-style) */
main.empty { justify-content: center; }
main.empty .thread { flex: 0 0 auto; overflow: visible; padding: 0 0 12px; }
.starters { width: 100%; max-width: var(--col); padding: 0 18px; text-align: center; }
.starters-head { font-size: 26px; font-weight: 600; color: var(--text); }
.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 14px; }

/* reasoning trace */
.trace { font-size: 13px; color: var(--muted); }
.trace summary { cursor: pointer; color: var(--faint); }
.trace-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; list-style: none; }
.trace-list li { margin: 5px 0; color: var(--text); opacity: .9; }
.trace-list li.trace-sub { margin: 0 0 6px 12px; color: var(--muted); font-size: 12.5px; opacity: .85; }

.status { font-size: 12px; color: var(--faint); }
.turn-error { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.retry-btn { font: inherit; font-size: 12.5px; padding: 5px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--muted); cursor: pointer; }
.retry-btn:hover { border-color: var(--accent); color: var(--text); }
.caption { margin: 0; }

/* ---------- Composer ---------- */
.composer { flex: 0 0 auto; width: 100%; max-width: var(--col); padding: 8px 18px 16px; }
.composer-inner { display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 8px 8px 8px 18px; box-shadow: 0 2px 20px rgba(0,0,0,.3); }
.composer-inner:focus-within { border-color: #4a4a52; }
#q { flex: 1; background: transparent; border: 0; resize: none; color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; max-height: 200px; outline: none; padding: 8px 0; }
#q::placeholder { color: var(--faint); }
.send-btn { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); font-size: 18px; line-height: 1; cursor: pointer; transition: opacity .15s; }
.send-btn:hover { opacity: .85; }
.send-btn:disabled { opacity: .25; cursor: default; }
.composer-foot { text-align: center; color: var(--faint); font-size: 11.5px; margin-top: 8px; }

/* ---------- Account dropdown ---------- */
.dropdown { position: relative; }
.dropdown-toggle { padding: 7px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 13px; min-width: 180px; }
.dropdown-toggle:hover { border-color: #4a4a52; }
.dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; width: 440px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; z-index: 100; box-shadow: 0 16px 48px rgba(0,0,0,.5); overflow: hidden; }
.dropdown-search { padding: 8px; border-bottom: 1px solid var(--border); }
.dropdown-search input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.dropdown-items { max-height: 340px; overflow-y: auto; }
.dropdown-group { padding: 6px 0; }
.dropdown-group.selected-group { background: rgba(109,139,255,.08); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.dropdown-group-title { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }
.dropdown-group-title.selected-title { color: var(--accent); }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; }
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item label { display: flex; flex-direction: row; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-item input[type=checkbox] { accent-color: var(--accent); flex-shrink: 0; }
.account-id-badge { font: 11px/1 monospace; padding: 2px 4px; border-radius: 3px; color: var(--muted); background: var(--surface-2); flex-shrink: 0; }
.product-badge { font-size: 11px; padding: 2px 6px; border-radius: 3px; color: var(--accent); background: rgba(109,139,255,.12); flex-shrink: 0; white-space: nowrap; }
.network-badge { font-size: 11px; padding: 2px 6px; border-radius: 3px; color: var(--muted); background: var(--surface-2); flex-shrink: 0; white-space: nowrap; }
.dropdown-actions { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--border); }
.btn-small { flex: 1; padding: 7px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.btn-small:hover { background: var(--surface-2); border-color: var(--accent); }