/* ============================================================
   MASTER VORTEX — chart-header symbol search + WATCHLIST +
   styles. Pairs with chart-search.js. Tokens match styles.css
   (--green, --panel, --panel-2, --edge, --dim, --ink). Every
   weight in this file is 400 — the platform unbold rule.
   The dropdown + notice are position:fixed layers on <body>:
   .chart-symbar clips overflow, so they can never live in it.
   ============================================================ */

/* Search cluster: first child of .chart-symbar (app.js spans
   follow it). align-self:center — the symbar aligns baselines,
   the input is taller than the price text. */
.cs-cluster{display:inline-flex; align-items:center; gap:4px;
  align-self:center; flex:0 0 auto; margin-right:2px}
.cs-mag{font-size:12px; font-weight:400; color:var(--dim); line-height:1}
.cs-input{
  width:110px; padding:2px 6px; font-size:11px; font-weight:400;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--ink); background:var(--panel-2, #0a1322);
  border:1px solid var(--edge); border-radius:6px;
}
.cs-input::placeholder{color:var(--dim); letter-spacing:.8px}
.cs-input:focus{outline:none; border-color:rgba(30,227,8,.65)}

/* WATCHLIST + button: last child of .chart-symbar, pushed to
   the right edge by margin-left:auto. The plus is the loud
   part — big and green; the label rides small beside it. */
.cs-wl-btn{
  margin-left:auto; align-self:center; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px 3px; cursor:pointer;
  color:var(--ink); background:rgba(30,227,8,.07);
  border:1px solid var(--edge); border-radius:6px;
  font-size:11px; font-weight:400; letter-spacing:1.1px;
}
.cs-wl-btn:hover:not(:disabled){background:rgba(30,227,8,.14);
  border-color:rgba(30,227,8,.55)}
.cs-wl-btn:disabled{cursor:default; opacity:.75}
.cs-wl-plus{font-size:17px; font-weight:400; line-height:1;
  color:var(--green, #30e708)}
.cs-wl-btn.cs-on{background:rgba(30,227,8,.12); opacity:.85}
.cs-wl-btn.cs-adding{cursor:wait}
.cs-wl-btn.cs-failed{border-color:#ff5252; background:rgba(255,82,82,.08)}

/* Suggestion dropdown (fixed layer). */
.cs-dd{
  position:fixed; z-index:80; min-width:220px; max-width:360px;
  background:var(--panel-2, #0a1322); border:1px solid var(--edge);
  border-radius:8px; padding:3px; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.cs-dd[hidden]{display:none}
.cs-dd-row{
  display:flex; align-items:baseline; gap:8px; padding:5px 8px;
  border-radius:5px; cursor:pointer; white-space:nowrap;
}
.cs-dd-row.active{background:#0b1a10; box-shadow:inset 3px 0 0 var(--green, #30e708)}
.cs-dd-sym{font-size:12px; font-weight:400; letter-spacing:.4px; color:var(--ink)}
.cs-dd-name{font-size:11px; font-weight:400; color:#9fb6d8;
  overflow:hidden; text-overflow:ellipsis}
.cs-dd-go{margin-left:auto; font-size:10px; font-weight:400;
  letter-spacing:1px; color:var(--green, #30e708)}

/* Symbar notice (fixed layer under the symbar). */
.cs-notice{
  position:fixed; z-index:80; max-width:420px;
  background:var(--panel-2, #0a1322); border:1px solid var(--edge);
  border-radius:8px; padding:6px 10px;
  font-size:11.5px; font-weight:400; color:var(--ink);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.cs-notice[hidden]{display:none}
.cs-notice.err{border-color:#ff5252; color:#ffb3b3}

/* Optimistic watchlist rows (classes ride on app.js's own
   .wl-item markup — see chart-search.js appendOptimisticRow). */
.wl-item-pending{opacity:.55}
.wl-item-failed{box-shadow:inset 3px 0 0 #ff5252}
.wl-fail-tag{font-size:9px; font-weight:400; letter-spacing:.8px;
  color:#ff7a7a; align-self:center}