/* YouTube Daily Dive canvas — palette from base.css (lime=bull, red=bear, gold=mixed, fog=neutral). */
.dd-root { --bull: var(--green); --bear: var(--red); --mixed: var(--gold); --neu: var(--fog);
  font-family: var(--fb); color: var(--cloud); position: relative; }
.dd-main { max-width: 1480px; margin: 0 auto; padding: 0 10px 100px; }
/* studio title: show the full "YouTube Deep Dive · 18 July 2026" (don't ellipsis it) */
body.dd-active .canvas-view-title { flex: 0 0 auto; overflow: visible; text-overflow: clip; max-width: none; }

/* ── Standalone YouTube Deep Dive PAGE (front page / default landing) ── */
/* No fade-in animation here: its retained transform would make .page a containing
   block, and the .ytd-body scroll-port would then CLIP the daily-dive's fixed chat /
   drawer / FAB. Killing the animation keeps those anchored to the viewport. */
/* Full-bleed — override the generic `main{max-width:62rem}` (from the ranking design
   system) that was otherwise squeezing the whole page into a ~680px column. */
main#page-youtube_dive { max-width: none; margin: 0; padding: 0; width: 100%; }
#page-youtube_dive { animation: none; }
.ytd-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Header bar: title CENTRED across the panel; date-nav floats at the right edge. */
.ytd-header { padding: 1rem 0; border-bottom: 1px solid var(--rim); flex-shrink: 0; }
.ytd-header-inner { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 0 1.5rem; width: 100%; box-sizing: border-box; }
.ytd-header-title { display: flex; align-items: center; gap: 0.875rem; }
.ytd-header-logo { width: 2.625rem; height: 2.625rem; border-radius: 0.625rem; overflow: hidden; flex-shrink: 0; display: block; box-shadow: 0 2px 10px rgba(255,0,0,.25); }
.ytd-header-logo svg { width: 100%; height: 100%; display: block; }
.ytd-header-h1 { font-family: var(--fb); font-size: 1.4rem; font-weight: 800; color: var(--snow); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
.ytd-header-sub { font-size: 0.8125rem; color: var(--fog); margin-top: 3px; line-height: 1.35; }
.ytd-header-nav { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); }
.ytd-header-nav .dd-nav { display: flex; align-items: center; gap: 0.5rem; }
.ytd-header-nav .dd-daylabel { font-family: var(--fm); font-size: 0.75rem; color: var(--cloud); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4375rem; }
.ytd-body { flex: 1; min-height: 0; overflow-y: auto; padding-top: 0.5rem; }

/* Tickers-section header row — one clean line: title (left) · stat pills · tabs (right) */
.dd-tickers .dd-sec-head { align-items: center; row-gap: 0.625rem; column-gap: 0.875rem; flex-wrap: nowrap; }
.dd-tickers .dd-sec-head .dd-stats { display: flex; align-items: center; gap: 0.375rem; }
.dd-tickers .dd-sec-head .dd-stats i { display: none; }
.dd-tickers .dd-sec-head .dd-stats span { display: inline-flex; align-items: baseline; gap: 0.25rem; background: var(--bg2); border: 1px solid var(--rim); border-radius: 0.4375rem; padding: 0.3125rem 0.5rem; font-size: 0.5625rem; color: var(--fog); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.dd-tickers .dd-sec-head .dd-stats b { font-size: 0.95rem; font-family: var(--fm); color: var(--snow); margin: 0; }
.dd-tickers .dd-sec-head .dd-tabs { margin-left: auto; }   /* tabs pinned to the far right */
/* ── "Top 10 tickers today" header — bigger + more beautiful ── */
.dd-tickers .dd-sec-head { margin: 14px 0 18px; column-gap: 1.1rem; }
.dd-tickers .dd-sec-head h2 { font-size: 1.72rem; font-weight: 700; letter-spacing: -.015em; }
.dd-tickers .dd-sec-head .dd-stats { gap: 0.5rem; }
.dd-tickers .dd-sec-head .dd-stats span { padding: 0.45rem 0.7rem; font-size: 0.62rem; border-radius: 0.6rem; gap: 0.35rem; background: linear-gradient(160deg, var(--bg2), var(--bg1)); }
.dd-tickers .dd-sec-head .dd-tabs { padding: 5px; }
.dd-tickers .dd-sec-head .dd-tab { font-size: .9rem; padding: 8px 18px; }

/* The daily-dive drawer / chat / backdrop are viewport-fixed; on the standalone page
   the sticky top-nav (3.625rem) would cover their top. Sit them flush against the nav
   (no gap, square top) so the panel connects cleanly to the upper nav.
   The backdrop is transparent (no dim/haze) — opening the panel keeps the page clear. */
#page-youtube_dive .dd-drawer-back { top: 3.625rem; background: transparent; }
#page-youtube_dive .dd-drawer { top: 3.625rem; border-top-left-radius: 0; }
#page-youtube_dive .dd-chat { top: 3.625rem; border-top-right-radius: 0; }

.dd-loading, .dd-error { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 300px; color: var(--fog); font-size: .92rem; text-align: center; }
.dd-error small { color: var(--mist); }
.dd-spin { width: 26px; height: 26px; border: 2px solid var(--rim2); border-top-color: var(--green); border-radius: 50%; animation: dd-spin .8s linear infinite; }
.dd-spin-sm { width: 15px; height: 15px; border-width: 2px; }
@keyframes dd-spin { to { transform: rotate(360deg); } }

/* logos + avatars */
/* Clean WHITE chip. FMP serves logos in MIXED variants — most are dark/colour (read on
   white), but a few are white-on-transparent (Amazon, Uber → invisible on white). A tight
   dark outline-shadow on the <img> rescues those white logos (gives them a dark edge on the
   white tile) without harming the dark/colour ones. The <img> fills the tile with white,
   covering the monogram behind it (which only shows if the img 404s). */
.dd-logo { position: relative; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.dd-logo-i { position: absolute; font-family: var(--fm); font-size: .74rem; font-weight: 700; color: #555; }
.dd-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 16%; box-sizing: border-box; background: #fff;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.45)); }
.dd-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg3); }
.dd-av-fb { display: inline-flex; align-items: center; justify-content: center; font-family: var(--fm); font-size: .68rem; font-weight: 700; color: var(--fog); }
/* avatar with a real image: initials behind, image on top; img removes itself if it 404s */
.dd-av-ph { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.dd-av-ini { font-family: var(--fm); font-size: .62rem; font-weight: 700; color: var(--fog); }
.dd-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dd-av-fail { background: var(--bg3); }
.dd-av-sm { width: 26px; height: 26px; } .dd-av-lg { width: 46px; height: 46px; }
.dd-yt { width: 26px; height: 19px; vertical-align: middle; }

/* ── topbar ── */
/* headbar lives INSIDE the Studio .canvas-view-header — ONE row: Back · title …grows… nav · stats · zoom.
   The app title keeps flex:1 (grows, pushing the controls to the right); the headbar takes just its
   content width in order so it never overlaps the zoom actions. */
.dd-headbar { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; flex-shrink: 0; margin-left: 14px; }
.dd-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dd-stats { flex-shrink: 0; }
.dd-navbtn { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--rim2); background: var(--bg2); color: var(--snow); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: .15s; }
.dd-navbtn:hover:not([disabled]) { border-color: var(--green); color: var(--green); }
.dd-navbtn[disabled] { opacity: .3; cursor: default; }
.dd-datewrap { display: flex; align-items: center; gap: 8px; }
.dd-dateinput { background: var(--bg2); border: 1px solid var(--rim2); color: var(--snow); border-radius: var(--r-sm); padding: 8px 11px; font-family: var(--fm); font-size: .92rem; color-scheme: dark; }
.dd-dateinput:focus { outline: none; border-color: var(--green); }
.dd-latest-tag { font-family: var(--fm); font-size: .62rem; letter-spacing: .1em; font-weight: 700; color: var(--bg); background: var(--green); padding: 4px 8px; border-radius: 5px; }
.dd-jump { background: none; border: none; color: var(--gold); cursor: pointer; font-size: .84rem; font-family: var(--fm); }
.dd-jump:hover { text-decoration: underline; }
.dd-stats { display: flex; align-items: center; gap: 14px; font-size: .92rem; color: var(--fog); }
.dd-stats b { color: var(--snow); font-family: var(--fm); font-size: 1.12rem; margin-right: 2px; }
.dd-stats i { width: 1px; height: 18px; background: var(--rim2); }
.dd-refresh { background: var(--bg2); border: 1px solid var(--rim2); color: var(--fog); width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer; font-size: 1.02rem; }
.dd-refresh:hover { color: var(--green); border-color: var(--green); }
.dd-main { padding-top: 8px; }

/* ── section headers ── */
.dd-sec-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; flex-wrap: wrap; }
.dd-sec-head h2 { font-family: var(--fd); font-size: 1.28rem; color: var(--snow); margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dd-sec-sub { font-size: .8rem; color: var(--fog); }
.dd-sec-label { font-family: var(--fm); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fog); margin: 26px 0 12px; }
.dd-dim { color: var(--mist); }
.dd-tickers .dd-sec-head { margin-top: 6px; align-items: center; }
/* ── ticker tabs (Most Bullish / Hidden Gems) ── */
.dd-tabs { display: inline-flex; gap: 4px; margin-left: auto; background: var(--bg2); border: 1px solid var(--rim); border-radius: 10px; padding: 4px; }
.dd-tab { background: none; border: none; color: var(--fog); font-family: var(--fb); font-size: .82rem; font-weight: 600; padding: 7px 15px; border-radius: 7px; cursor: pointer; transition: .15s; }
.dd-tab:hover { color: var(--cloud); }
.dd-tab.active { background: var(--green); color: var(--bg); }
.dd-gems-soon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; border: 1px dashed var(--rim2); border-radius: 16px; background: var(--bg1); }
.dd-gems-ic { font-size: 2.4rem; }
.dd-gems-t { font-family: var(--fd); font-size: 1.25rem; color: var(--snow); display: flex; align-items: center; gap: 10px; }
.dd-gems-tag { font-family: var(--fm); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(245,166,35,.35); background: rgba(245,166,35,.08); padding: 3px 8px; border-radius: 5px; }
.dd-gems-s { font-size: .9rem; color: var(--fog); line-height: 1.6; max-width: 54ch; }

/* ── ticker grid (TOP) — exactly 3 wide so the lone #10 can sit centered under AMZN ── */
.dd-tk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dd-tk-grid .dd-tk:nth-child(10):last-child { grid-column: 2; }   /* center the 10th (under the middle column) */
.dd-tk { display: flex; flex-direction: column; text-align: left; background: linear-gradient(160deg, var(--bg1), var(--bg2)); border: 1px solid var(--rim); border-radius: 14px; padding: 16px; cursor: pointer; color: var(--cloud); transition: .18s; position: relative; overflow: hidden; }
.dd-tk::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.dd-tk-bull::before { background: var(--bull); } .dd-tk-bear::before { background: var(--bear); } .dd-tk-mixed::before { background: var(--mixed); } .dd-tk-neu::before { background: var(--neu); }
.dd-tk:hover { transform: translateY(-3px); border-color: var(--rim3); box-shadow: 0 12px 34px rgba(0,0,0,.4); }
/* everything above the bull/bear bar is one standardized stack, so the bar sits at the SAME
   height on every card in a row (id · targets · price-changes · counts — all fixed rows) */
.dd-tk-top { display: flex; flex-direction: column; gap: 11px; margin-bottom: 13px; }
.dd-tk-id { display: flex; align-items: center; gap: 10px; }
.dd-tk-rank { font-family: var(--fm); font-size: .74rem; color: var(--mist); flex: none; }
.dd-tk-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dd-tk-sym { font-family: var(--fm); font-weight: 700; font-size: 1.05rem; color: var(--snow); letter-spacing: .02em; }
.dd-tk-name { font-size: .76rem; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.dd-tk-sent { flex: none; font-size: .6rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }
/* price + sentiment stacked on the right of the id row */
.dd-tk-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.dd-tk-price { font-family: var(--fm); font-size: 1rem; font-weight: 700; color: var(--snow); letter-spacing: -.01em; line-height: 1; }
/* price targets: YT (creators) then analyst — two aligned rows */
.dd-tk-tgts { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; background: var(--bg2); border: 1px solid var(--rim); border-radius: 9px; }
.dd-tgt { display: flex; align-items: baseline; gap: 8px; font-family: var(--fm); font-size: .82rem; border-radius: 6px; padding: 3px 5px; }
.dd-tgt-click { cursor: pointer; transition: background .12s; }
.dd-tgt-click:hover { background: var(--bg3); }
.dd-tgt-l { flex: none; width: 58px; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fog); }
.dd-tgt-v { font-weight: 700; color: var(--snow); }
.dd-tgt-v-yt { color: var(--gold); }                 /* YouTube target = gold */
.dd-tgt-v-analyst { color: var(--blue); }            /* analyst consensus = modern blue */
.dd-tgt-pct { font-size: .68rem; font-weight: 700; }
.dd-tgt-pct small { font-size: .82em; font-weight: 600; color: var(--fog); opacity: .8; }
.dd-tgt-pct.up { color: var(--green); } .dd-tgt-pct.down { color: var(--red); }
.dd-tgt-dash { color: var(--fog); font-weight: 700; }
.dd-tgt-dash-y { color: var(--gold); }        /* yellow "–" = no creator gave a target */
.dd-tgt-tag { font-family: var(--fm); font-size: .5rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fog); background: var(--bg3); border-radius: 4px; padding: 1px 4px; margin-left: 1px; cursor: help; }
.dd-tgt-go { margin-left: auto; color: var(--fog); font-weight: 700; opacity: 0; transition: opacity .12s; }
.dd-tgt-click:hover .dd-tgt-go { opacity: 1; color: var(--green); }
.dd-tk-tgtcap { font-size: .56rem; color: var(--mist); letter-spacing: .02em; padding: 3px 5px 1px; }
/* price-target breakdown popout */
.dd-tp-sec { margin-bottom: 20px; }
.dd-tp-sec h4 { font-family: var(--fm); font-size: .82rem; color: var(--snow); margin: 0 0 10px; }
.dd-tp-sec h4 .dd-dim { color: var(--fog); font-weight: 400; }
.dd-tp-sum { font-size: .9rem; color: var(--cloud); margin-bottom: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dd-tp-sum b { font-family: var(--fm); font-size: 1.15rem; }
.dd-tp-spread { display: flex; gap: 16px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--rim); border-radius: 9px; margin-bottom: 10px; font-size: .78rem; color: var(--fog); }
.dd-tp-spread b { color: var(--snow); font-family: var(--fm); font-size: .92rem; display: block; margin-top: 2px; }
.dd-tp-note { font-size: .76rem; color: var(--fog); line-height: 1.5; }
.dd-tp-note b { color: var(--cloud); }
.dd-tp-list { display: flex; flex-direction: column; gap: 2px; }
.dd-tp-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: .82rem; }
.dd-tp-row:hover { background: var(--bg2); }
.dd-tp-cr { background: none; border: none; padding: 0; color: var(--snow); font-family: var(--fm); font-size: .8rem; cursor: pointer; }
.dd-tp-cr:hover { color: var(--green); }
.dd-tp-pt { font-family: var(--fm); font-weight: 700; color: var(--gold); margin-left: auto; }
.dd-tp-rel { font-family: var(--fm); font-size: .7rem; font-weight: 700; }
.dd-tp-rel.up { color: var(--green); } .dd-tp-rel.down { color: var(--red); }
.dd-tp-when { font-size: .68rem; color: var(--mist); font-family: var(--fm); min-width: 82px; text-align: right; }
/* daily / weekly / 30-day price moves + 30-day volume trend.
   4 EQUAL columns on one line (never wrap) so this row is the SAME height on every card in a row —
   wide values (e.g. "▲38.4%", "VOL 30D") shrink to fit instead of wrapping and shoving the rows
   below out of alignment with sibling cards. */
.dd-tk-chgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dd-chg { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 4px 5px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--rim); }
.dd-chg small, .dd-chg b { white-space: nowrap; }
.dd-chg small { font-size: .54rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fog); }
.dd-chg b { font-family: var(--fm); font-size: .74rem; font-weight: 700; line-height: 1; }
.dd-chg-up b { color: var(--green); } .dd-chg-down b { color: var(--red); } .dd-chg-flat b { color: var(--cloud); }
.dd-chg-na b { color: var(--mist); }
/* 3 EQUAL columns so mentions/analyses/creators line up across cards regardless of digit count
   ("11 mentions" must not shove "analyses"/"creators" right vs a neighbouring "4 mentions"). */
.dd-tk-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dd-mm { display: flex; flex-direction: column; min-width: 0; }
.dd-mm b { font-family: var(--fm); font-size: 1.06rem; color: var(--snow); line-height: 1.1; }
.dd-mm small { font-size: .64rem; color: var(--fog); }
.dd-mm-a b { color: var(--green); } .dd-mm-pt b { color: var(--gold); }
.dd-tk-take { flex: 1 1 auto; font-size: .84rem; line-height: 1.5; color: var(--cloud); margin: 11px 0 4px; }
.dd-tk-open { font-family: var(--fm); font-size: .68rem; color: var(--fog); opacity: 0; transition: .15s; }
.dd-tk:hover .dd-tk-open { opacity: 1; color: var(--green); }

/* sentiment tokens + bar */
.dd-sent-bull { color: var(--bg); background: var(--bull); } .dd-sent-bear { color: var(--snow); background: var(--bear); }
.dd-sent-mixed { color: var(--bg); background: var(--mixed); } .dd-sent-neu { color: var(--snow); background: var(--mist); }
.dd-bbn { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--bg3); }
.dd-bbn-b { background: var(--bull); } .dd-bbn-r { background: var(--bear); } .dd-bbn-n { background: var(--mist); }
.dd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ── executive brief / daily summary ── */
.dd-exec { margin-top: 30px; }
.dd-exec-card { background: linear-gradient(165deg, var(--bg1), rgba(20,20,20,.4)); border: 1px solid var(--rim2); border-radius: 16px; padding: 24px; }
.dd-exec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dd-tone { font-family: var(--fm); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; white-space: nowrap; margin-top: 7px; border: 1px solid var(--rim2); }
.dd-tone-risk_on { color: var(--green); background: var(--green-soft); border-color: rgba(204,255,0,.3); }
.dd-tone-risk_off { color: var(--red); background: rgba(255,80,0,.08); border-color: rgba(255,80,0,.3); }
.dd-tone-mixed, .dd-tone-rotational { color: var(--gold); background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.3); }
.dd-headline { font-family: var(--fd); font-size: 1.9rem; line-height: 1.12; color: var(--snow); margin: 0; font-weight: 600; }
.dd-lead { font-size: 1.04rem; line-height: 1.62; color: var(--cloud); margin: 0 0 20px; max-width: 80ch; }
.dd-exsecs { display: grid; gap: 9px; margin-bottom: 22px; }
.dd-exsec { border: 1px solid var(--rim); border-radius: 12px; background: var(--bg1); overflow: hidden; }
.dd-exsec-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 4px; background: none; border: none; cursor: pointer; color: var(--snow); text-align: left; }
.dd-exsec-head[disabled] { cursor: default; }
.dd-exsec--nd .dd-exsec-head { padding-bottom: 4px; }
.dd-exsec-title { font-weight: 600; font-size: .98rem; }
.dd-exsec-more { font-family: var(--fm); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fog); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dd-exsec-head:hover .dd-exsec-more { color: var(--green); }
.dd-exsec-chev { transition: transform .2s; }
.dd-exsec.open .dd-exsec-chev { transform: rotate(180deg); }
.dd-exsec-lead { padding: 0 16px 14px; margin: 0; color: var(--cloud); line-height: 1.6; font-size: .92rem; }
.dd-exsec-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dd-exsec.open .dd-exsec-body { max-height: 1200px; }
.dd-exsec-detail { padding: 12px 16px 16px; margin: 0 16px; color: var(--fog); line-height: 1.65; font-size: .88rem; border-top: 1px dashed var(--rim2); }
/* Voices Today — nav header + scrollable feed */
.dd-quotes { margin-top: 26px; }
.dd-voices-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dd-voices-title { font-family: var(--fh, var(--fb)); font-size: 1.15rem; font-weight: 800; color: var(--snow); margin: 0; letter-spacing: -.01em; }
/* the Mix / By-ticker / Macro filter — an obvious segmented control */
.dd-voices-nav { display: inline-flex; align-items: center; gap: 4px; background: var(--bg2); border: 1px solid var(--rim2); border-radius: 11px; padding: 4px; }
.dd-voices-flabel { font-family: var(--fm); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); padding: 0 6px 0 4px; }
.dd-vtab { font-family: var(--fb); font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--fog); background: none; border: none; border-radius: 8px; padding: 7px 15px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 5px; }
.dd-vtab:hover { background: var(--bg3); color: var(--snow); }
.dd-vtab.is-on { background: var(--green); color: #071; font-weight: 800; box-shadow: 0 2px 9px rgba(204,255,0,.28); }
.dd-quote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
.dd-quote-meta .dd-reach { margin: 0; }
.dd-q-pt { font-family: var(--fm); font-size: .64rem; font-weight: 700; color: var(--gold); }
.dd-vcar { font-size: .6rem; opacity: .8; }
.dd-vpick { position: relative; }
.dd-vmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 260px; background: var(--bg1); border: 1px solid var(--rim); border-radius: 12px; padding: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.dd-vsearch { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--rim2); border-radius: 8px; padding: 8px 10px; color: var(--snow); font: inherit; font-size: .8rem; outline: none; }
.dd-vsearch:focus { border-color: var(--green); }
.dd-vsug-label { font-family: var(--fm); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin: 11px 0 7px; }
.dd-vsug { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-vchip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--rim); border-radius: 999px; padding: 4px 9px 4px 5px; cursor: pointer; color: var(--cloud); font-family: var(--fm); font-size: .72rem; font-weight: 700; transition: .12s; }
.dd-vchip:hover { border-color: var(--green); color: var(--snow); }
.dd-vchip .dd-logo { width: 17px; height: 17px; border-radius: 5px; } .dd-vchip .dd-logo-i { font-size: .46rem; }
.dd-quotes-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; max-height: 30rem; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.dd-quotes-scroll::-webkit-scrollbar { width: 8px; } .dd-quotes-scroll::-webkit-scrollbar-thumb { background: var(--rim2); border-radius: 8px; }
.dd-vticker-head, .dd-vempty { grid-column: 1 / -1; }
.dd-vticker-head { font-family: var(--fm); font-size: .74rem; color: var(--fog); padding: 2px 2px 4px; }
.dd-vticker-head b { color: var(--green); }
.dd-vempty { color: var(--mist); font-size: .84rem; font-style: italic; padding: 18px 4px; }
.dd-q-senti { font-family: var(--fm); font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; font-weight: 700; }
.dd-q-senti-bullish { color: var(--green); background: rgba(120,220,120,.12); }
.dd-q-senti-bearish { color: #ff7a7a; background: rgba(255,120,120,.12); }
.dd-q-senti-neutral { color: var(--fog); background: var(--bg3); }
.dd-q-senti-soon { color: var(--mist); background: var(--bg3); }
.dd-q-pt { font-family: var(--fm); font-size: .62rem; font-weight: 700; color: var(--snow); background: var(--bg3); border-radius: 5px; padding: 2px 6px; }
/* Macro dummy */
.dd-macro-note { grid-column: 1 / -1; background: var(--bg1); border: 1px dashed var(--rim2); border-radius: 12px; padding: 14px 16px; color: var(--fog); font-size: .86rem; line-height: 1.55; }
.dd-macro-note b { color: var(--snow); }
.dd-quote--ghost { opacity: .55; border-left-color: var(--rim2); filter: grayscale(.4); }
.dd-quote--ghost .dd-quote-text { color: var(--fog); }
.dd-av-ghost { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--bg3); }
.dd-quote { text-align: left; background: var(--bg1); border: 1px solid var(--rim); border-left: 2px solid var(--green); border-radius: 12px; padding: 14px 16px; color: var(--cloud); transition: .15s; display: flex; flex-direction: column; gap: 9px; }
.dd-quote:hover { background: var(--bg2); transform: translateY(-2px); border-left-color: var(--green); }
.dd-quote-main { text-align: left; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 9px; }
.dd-quote-vid { margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--rim2); }
.dd-quote-head { display: flex; align-items: center; gap: 7px; }
.dd-quote-head .dd-logo { width: 22px; height: 22px; border-radius: 6px; } .dd-quote-head .dd-logo-i { font-size: .52rem; }
.dd-quote-h { font-family: var(--fm); font-size: .76rem; color: var(--snow); }
.dd-quote-on { font-size: .7rem; color: var(--mist); }
.dd-quote-tk { font-family: var(--fm); font-size: .76rem; font-weight: 700; color: var(--green); }
.dd-quote-text { display: block; font-size: .9rem; line-height: 1.5; font-style: italic; color: var(--cloud); }

/* ── news rail ── */
.dd-news-wrap { margin: 20px 0 22px; }
.dd-news-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.dd-news { display: flex; gap: 11px; background: var(--bg1); border: 1px solid var(--rim); border-radius: 12px; padding: 10px; text-decoration: none; transition: .15s; overflow: hidden; }
.dd-news:hover { background: var(--bg2); border-color: var(--rim3); transform: translateY(-2px); }
.dd-news-img { flex: none; width: 66px; height: 66px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--bg3); }
.dd-news-img-fb { background: linear-gradient(135deg, var(--bg3), var(--bg2)); }
.dd-news-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dd-news-title { font-size: .82rem; color: var(--snow); line-height: 1.35; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dd-news-meta { font-family: var(--fm); font-size: .68rem; color: var(--fog); margin-top: 5px; } .dd-news-meta b { color: var(--green); }

/* ── the tape ── */
.dd-tape-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 10px; }
.dd-tape-item { display: flex; align-items: center; gap: 12px; background: var(--bg1); border: 1px solid var(--rim); border-radius: 12px; padding: 11px 13px; cursor: pointer; transition: .15s; }
.dd-tape-item:hover { background: var(--bg2); border-color: var(--rim3); }
.dd-tape-av { position: relative; flex: none; }
.dd-tape-av .dd-av { width: 42px; height: 42px; }
.dd-tape-yt { position: absolute; bottom: -3px; right: -5px; background: var(--bg); border-radius: 4px; padding: 1px; line-height: 0; }
.dd-tape-yt .dd-yt { width: 18px; height: 13px; }
.dd-tape-body { flex: 1; min-width: 0; }
.dd-tape-title { font-size: .86rem; color: var(--snow); font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dd-tape-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .72rem; color: var(--fog); flex-wrap: wrap; }
.dd-tape-cr { color: var(--cloud); } .dd-tape-h { color: var(--mist); font-family: var(--fm); font-size: .68rem; }
.dd-tape-tks { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.dd-tape-tk { font-family: var(--fm); font-size: .66rem; font-weight: 700; color: var(--cloud); background: var(--bg3); border: 1px solid var(--rim2); border-radius: 4px; padding: 2px 6px; }
.dd-tape-tk:hover { border-color: var(--green); color: var(--green); }
.dd-tape-watch { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--fog); text-decoration: none; border-radius: 6px; font-size: .8rem; }
.dd-tape-watch:hover { color: var(--red); background: var(--bg3); }

/* ── other tickers ("everything else mentioned") — a beautiful, clickable scroll table ── */
.dd-others-sec { margin-top: 26px; }
.dd-others-c { font-family: var(--fm); font-size: .8rem; color: var(--fog); font-weight: 500; }
.dd-others-scroll { max-height: 440px; overflow-y: auto; border: 1px solid var(--rim); border-radius: 14px; background: linear-gradient(180deg, var(--bg1), var(--bg2)); }
.dd-others-scroll::-webkit-scrollbar { width: 10px; }
.dd-others-scroll::-webkit-scrollbar-thumb { background: var(--rim2); border-radius: 6px; border: 3px solid var(--bg1); }
.dd-others-scroll::-webkit-scrollbar-thumb:hover { background: var(--rim3); }
.dd-ot-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
.dd-ot-table th { position: sticky; top: 0; z-index: 1; background: var(--bg2); color: var(--fog); font-weight: 600; text-align: left; padding: 11px 14px; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--rim2); }
.dd-ot-table th.dd-ot-th-n { text-align: right; }
.dd-ot-row { cursor: pointer; transition: background .13s; }
.dd-ot-row td { padding: 10px 14px; border-top: 1px solid var(--rim); color: var(--cloud); vertical-align: middle; }
.dd-ot-row:hover td { background: var(--bg3); }
.dd-ot-row:hover .dd-ot-go { color: var(--green); }
.dd-ot-row:hover .dd-ot-arrow { opacity: 1; transform: translateX(0); }
.dd-ot-sym { display: flex; align-items: center; gap: 9px; font-family: var(--fm); font-weight: 700; color: var(--snow); }
.dd-ot-sym .dd-logo { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.dd-ot-sym .dd-logo-i { font-size: .58rem; }
.dd-ot-name { color: var(--fog); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-ot-pill { display: inline-block; font-size: .56rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; }
.dd-ot-n { font-family: var(--fm); text-align: right; color: var(--cloud); }
.dd-ot-n-a { color: var(--green); }
.dd-ot-barcell { vertical-align: middle; }
.dd-ot-barin { display: flex; align-items: center; gap: 9px; }
.dd-ot-barwrap { width: 88px; flex: none; }
.dd-ot-bbnn { font-family: var(--fm); font-size: .7rem; color: var(--fog); white-space: nowrap; }
.dd-ot-go { font-family: var(--fm); font-size: .68rem; color: var(--mist); white-space: nowrap; text-align: right; vertical-align: middle; }
.dd-ot-arrow { display: inline-block; margin-left: 5px; opacity: 0; transform: translateX(-3px); transition: .15s; }

/* ── drawer ── */
.dd-drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; opacity: 0; transition: opacity .25s; }
.dd-drawer-back.open { opacity: 1; }
.dd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(860px, 96vw); background: var(--bg1); border-left: 1px solid var(--rim2); z-index: 61; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); overflow-y: auto; overflow-x: hidden; box-shadow: -24px 0 70px rgba(0,0,0,.55); }
.dd-drawer.open { transform: translateX(0); }
.dd-drawer-inner { padding: 22px 24px 70px; }
.dd-dd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; position: sticky; top: 0; background: var(--bg1); padding: 16px 0 14px; margin-top: -22px; z-index: 2; }
.dd-dd-id { display: flex; align-items: flex-start; gap: 12px; }   /* top-align logo with the ticker (block is 3 rows now) */
.dd-dd-id .dd-logo { width: 44px; height: 44px; margin-top: 1px; }
.dd-dd-sym { font-family: var(--fm); font-weight: 700; font-size: 1.3rem; color: var(--snow); display: flex; align-items: center; gap: 10px; }
.dd-dd-sent { font-size: .58rem; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.dd-dd-name { font-size: .82rem; color: var(--fog); margin-top: 2px; }
/* market row (price + 1D/1W/30D price moves + 30d volume) — relocated here from the front cards */
.dd-dd-market { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dd-dd-price { font-family: var(--fm); font-size: 1.05rem; font-weight: 700; color: var(--snow); letter-spacing: -.01em; }
.dd-dd-chgs { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-dd-chgs .dd-chg { min-width: 52px; padding: 4px 8px; }
.dd-dd-close { background: var(--bg3); border: 1px solid var(--rim2); color: var(--cloud); width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer; flex: none; }
.dd-dd-close:hover { color: var(--red); border-color: var(--red); }
.dd-dd-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.dd-count { background: var(--bg2); border: 1px solid var(--rim); border-radius: 10px; padding: 12px; text-align: center; }
.dd-count b { display: block; font-family: var(--fm); font-size: 1.55rem; color: var(--snow); line-height: 1; }
.dd-count-a b { color: var(--green); }
.dd-count span { display: block; font-size: .72rem; color: var(--cloud); margin-top: 5px; font-weight: 600; }
.dd-count small { display: block; font-size: .61rem; color: var(--mist); margin-top: 3px; line-height: 1.3; }
.dd-dd-takeaway { font-size: 1rem; line-height: 1.5; color: var(--snow); background: var(--green-soft); border-left: 2px solid var(--green); padding: 13px 15px; border-radius: 8px; margin-bottom: 16px; }
.dd-dd-block { margin-bottom: 18px; }
.dd-dd-block h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fog); margin: 0 0 9px; font-weight: 600; }
.dd-dd-block > p { margin: 0; line-height: 1.6; color: var(--cloud); font-size: .9rem; }
.dd-dd-cases { display: grid; gap: 10px; margin-bottom: 18px; }
.dd-case { border: 1px solid var(--rim); border-radius: 10px; padding: 12px 14px; background: var(--bg2); }
.dd-case h5 { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.dd-case p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--cloud); }
.dd-case-bull { border-left: 2px solid var(--green); } .dd-case-bull h5 { color: var(--green); }
.dd-case-bear { border-left: 2px solid var(--red); } .dd-case-bear h5 { color: var(--red); }
.dd-dd-disagree { background: rgba(245,166,35,.05); border: 1px solid rgba(245,166,35,.2); border-radius: 10px; padding: 12px 14px; }
.dd-dd-disagree h4 { color: var(--gold); }
.dd-cats { margin: 0; padding-left: 18px; color: var(--cloud); font-size: .88rem; line-height: 1.6; }

/* creator takes + per-ticker detail */
.dd-takes { display: grid; gap: 10px; min-width: 0; }
.dd-take { background: var(--bg2); border: 1px solid var(--rim); border-radius: 10px; padding: 12px 13px; min-width: 0; max-width: 100%; overflow: hidden; }
.dd-take-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.dd-take-cr { font-family: var(--fb); font-size: .84rem; font-weight: 600; color: var(--snow); background: none; border: none; cursor: pointer; padding: 0; }
.dd-take-cr:hover { color: var(--green); }
.dd-take-cr--sm { font-size: .74rem; font-family: var(--fm); color: var(--fog); }
.dd-sent-pill { font-size: .58rem; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; font-weight: 700; }
.dd-take-pt { font-family: var(--fm); font-size: .72rem; color: var(--gold); }
.dd-take-yt { margin-left: auto; color: var(--fog); text-decoration: none; font-size: .8rem; }
.dd-take-yt:hover { color: var(--red); }
/* freshness chip — how recent the source video (and thus the take) is */
.dd-when { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-size: .64rem; font-weight: 600; color: var(--fog); white-space: nowrap; cursor: default; }
.dd-take-when, .dd-quote-when { margin-left: auto; }
/* video-source link — which video a quote/take came from: small YT glyph + the real video title,
   clickable to open it on YouTube. Lets you tell apart two same-creator/same-ticker cards. */
.dd-vidlink { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; text-decoration: none; color: var(--fog); font-family: var(--fm); font-size: .7rem; line-height: 1.3; transition: color .15s; }
.dd-vidlink .dd-yt { flex: none; width: 15px; height: 11px; opacity: .85; }
.dd-vidlink-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-vidlink:hover { color: var(--green); }
.dd-vidlink:hover .dd-yt { opacity: 1; }
.dd-take-vid { margin: -2px 0 7px; }
/* creator reach — channel subscribers, plus this video's views when the card is one specific video */
.dd-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 13px; margin: 0; }
/* in a take/quote head, reach sits right next to the name + sentiment (not pushed to the edge) */
.dd-take-head .dd-reach, .dd-quote-head .dd-reach { margin: 0; }
.dd-reach-i { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-size: .64rem; font-weight: 600; color: var(--fog); white-space: nowrap; }
/* date at the END of the quote sentence — inline, upright, muted */
.dd-inline-when { margin-left: 7px; font-style: normal; font-weight: 500; opacity: .82; }
.dd-reach-sub { width: 12px; height: 12px; opacity: .8; flex: none; }
.dd-reach-v .dd-yt { width: 13px; height: 10px; opacity: .85; flex: none; }
.dd-subs { display: inline-flex; align-items: center; gap: 4px; color: var(--fog); }
.dd-subs .dd-reach-sub { width: 11px; height: 11px; }
.dd-take-quote { font-size: .88rem; line-height: 1.5; color: var(--cloud); font-style: italic; overflow-wrap: anywhere; }
.dd-take-deep { margin-top: 10px; background: none; border: 1px solid var(--rim2); color: var(--green); border-radius: 6px; padding: 5px 11px; font-size: .74rem; font-weight: 600; cursor: pointer; transition: .15s; }
.dd-take-deep:hover { background: var(--green-soft); border-color: var(--green); }
.dd-take-deep.open { background: var(--green-soft); }
.dd-take-detail { margin-top: 11px; padding-top: 12px; border-top: 1px dashed var(--rim2); }
.dd-mini-load { display: flex; align-items: center; gap: 8px; color: var(--fog); font-size: .82rem; }
.dd-error-sm { min-height: 0; font-size: .82rem; }
.dd-md-thesis { font-size: .92rem; color: var(--snow); font-weight: 600; line-height: 1.45; margin-bottom: 8px; }
.dd-md-p { font-size: .86rem; color: var(--cloud); line-height: 1.55; margin: 0 0 10px; }
.dd-md-cr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.dd-md-col h6 { margin: 0 0 5px; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fog); }
.dd-md-col ul { margin: 0; padding-left: 15px; font-size: .8rem; color: var(--cloud); line-height: 1.5; }
.dd-md-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dd-md-conv { font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--rim2); color: var(--cloud); }
.dd-conv-high { color: var(--green); border-color: rgba(204,255,0,.3); } .dd-conv-passing { color: var(--fog); }
.dd-md-take { font-size: .82rem; color: var(--cloud); font-style: italic; }
/* extra AI paragraphs + key numbers pulled from a fuller take */
.dd-md-detail { margin: 0 0 10px; }
.dd-md-nums { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.dd-md-num { font-family: var(--fm); font-size: .72rem; color: var(--snow); background: var(--bg3); border: 1px solid var(--rim2); border-radius: 5px; padding: 3px 9px; }
/* transcript context — made obvious: red accent, verbatim, with the timestamp span it covers */
.dd-md-ctx { margin-top: 12px; border: 1px solid rgba(255,117,96,.32); border-left: 3px solid var(--red); border-radius: 8px; background: rgba(255,117,96,.06); padding: 9px 12px; }
.dd-md-ctx summary { list-style: none; display: flex; align-items: center; gap: 8px; font-family: var(--fm); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); cursor: pointer; }
.dd-md-ctx summary::-webkit-details-marker { display: none; }
.dd-md-ctx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; box-shadow: 0 0 0 3px rgba(255,117,96,.18); }
.dd-md-ts { font-family: var(--fm); font-size: .64rem; font-weight: 600; color: var(--red); background: rgba(255,117,96,.12); border-radius: 4px; padding: 1px 6px; text-transform: none; letter-spacing: 0; }
.dd-md-ctx-hint { margin-left: auto; font-size: .58rem; font-weight: 500; color: var(--fog); text-transform: none; letter-spacing: 0; }
.dd-md-ctx-body { font-size: .84rem; color: var(--cloud); line-height: 1.6; margin: 9px 0 0; font-style: italic; }
.dd-passing { margin-top: 12px; font-size: .78rem; color: var(--fog); line-height: 1.9; } .dd-passing b { color: var(--cloud); }

/* creator canvas */
.dd-posture { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 4px; margin-bottom: 14px; border: 1px solid var(--rim2); color: var(--cloud); }
.dd-posture-bullish { color: var(--green); border-color: rgba(204,255,0,.3); background: var(--green-soft); }
.dd-posture-bearish { color: var(--red); border-color: rgba(255,80,0,.3); }
.dd-posture-cautious { color: var(--gold); border-color: rgba(245,166,35,.3); }
.dd-cc { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rim); font-size: .86rem; }
.dd-cc-tk { font-family: var(--fm); font-weight: 700; color: var(--snow); min-width: 52px; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.dd-cc-tk:hover { color: var(--green); }
.dd-cc-note { color: var(--cloud); line-height: 1.4; }

/* ── day chat: bottom-LEFT bubble → LEFT vertical panel (keeps the right free for drawers) ── */
/* FAB + chat sit ABOVE the drawer backdrop (z 60) + drawer (z 61) so you can chat while a
   ticker/creator drawer is open on the right (center stays dimmed by the backdrop). */
.dd-chatfab { position: fixed; left: 26px; bottom: 26px; z-index: 67; display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 24px 15px 20px; border-radius: 34px; background: var(--green); color: var(--bg); border: none;
  font-family: var(--fb); font-size: 1.02rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 38px rgba(204,255,0,.4);
  transition: .18s; animation: dd-fab-pulse 2.6s ease-in-out infinite; }
.dd-chatfab-ic { font-size: 1.5rem; line-height: 1; }
.dd-chatfab-lb { white-space: nowrap; }
.dd-chatfab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 50px rgba(204,255,0,.55); animation: none; }
@keyframes dd-fab-pulse { 0%, 100% { box-shadow: 0 10px 38px rgba(204,255,0,.4); } 50% { box-shadow: 0 10px 46px rgba(204,255,0,.62); } }
/* This canvas owns the day-chat on the LEFT → hide the app's right-side rag launchers + the
   pointless mind-map zoom/collapse controls (Back to Studio is the exit). */
body.dd-active.studio-expanded .gai-fab,
body.dd-active.studio-expanded .ai-fab,
body.dd-active.studio-expanded #aiFab,
body.dd-active.studio-expanded .search-fab-wrap { display: none !important; }
body.dd-active .canvas-view-actions { display: none !important; }
.dd-chat { position: fixed; left: 0; top: 0; bottom: 0; width: min(600px, 96vw); background: var(--bg1); border-right: 1px solid var(--rim2); z-index: 66; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1), width .25s ease; box-shadow: 24px 0 70px rgba(0,0,0,.55); }
.dd-chat.open { transform: translateX(0); }
.dd-chat--wide { width: min(920px, 96vw); }
.dd-chat--deep { border-right-color: rgba(204,255,0,.4); }
.dd-chat[hidden] { display: none !important; }   /* author display:flex would otherwise beat the [hidden] attr */
.dd-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--rim); font-size: .9rem; color: var(--cloud); }
.dd-chat-head-t b { color: var(--green); font-family: var(--fm); }
.dd-chat-head-r { display: flex; align-items: center; gap: 4px; }
.dd-chat-wider, .dd-chat-x { background: none; border: none; color: var(--fog); cursor: pointer; width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; transition: .13s; }
.dd-chat-wider:hover { color: var(--green); background: var(--bg3); }
.dd-chat--wide .dd-chat-wider { color: var(--green); }
.dd-chat-x:hover { color: var(--red); background: var(--bg3); }
/* deep-analysis mode switch */
.dd-chat-modebar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--rim); background: var(--bg2); flex-wrap: wrap; }
.dd-chat-switch { display: inline-flex; align-items: center; gap: 8px; background: var(--bg1); border: 1px solid var(--rim2); border-radius: 999px; padding: 4px 12px 4px 5px; cursor: pointer; color: var(--fog); font-family: var(--fb); font-size: .78rem; font-weight: 600; transition: .15s; }
.dd-chat-switch-k { position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--rim2); transition: .15s; flex: none; }
.dd-chat-switch-k::after { content: ''; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--fog); transition: .15s; }
.dd-chat-switch.on { color: #071; background: var(--green); border-color: var(--green); }
.dd-chat-switch.on .dd-chat-switch-k { background: rgba(0,0,0,.25); border-color: transparent; }
.dd-chat-switch.on .dd-chat-switch-k::after { left: 14px; background: #071; }
.dd-chat-mode-hint { font-size: .68rem; color: var(--mist); }
.dd-chat-mode-hint .dd-chat-plus { color: var(--fog); font-weight: 600; }
.dd-chat--deep .dd-chat-mode-hint .dd-chat-plus { color: var(--green); }
.dd-msg-deep { display: inline-block; font-family: var(--fm); font-size: .56rem; font-weight: 700; letter-spacing: .04em; color: #071; background: var(--green); border-radius: 4px; padding: 1px 5px; margin-right: 7px; vertical-align: middle; }
.dd-chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dd-chat-hint { font-size: .82rem; color: var(--fog); line-height: 1.5; background: var(--bg2); padding: 12px; border-radius: 10px; }
/* Empty state: YouTube logo + grounding line + 4 popular-today starters */
.dd-chat-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: auto 0; padding: 8px 4px; }
.dd-chat-yt { width: 60px; height: 42px; display: inline-flex; margin-bottom: 2px; filter: drop-shadow(0 6px 18px rgba(255,0,0,.28)); }
.dd-chat-yt .dd-yt { width: 100%; height: 100%; }
.dd-chat-empty-t { font-family: var(--fd); font-size: 1.25rem; color: var(--snow); font-weight: 600; }
.dd-chat-empty-s { font-size: .82rem; color: var(--fog); line-height: 1.55; max-width: 40ch; }
.dd-chat-suggs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.dd-sugg { display: flex; align-items: center; gap: 9px; text-align: left; background: var(--bg2); border: 1px solid var(--rim2); border-radius: 11px; padding: 10px 11px; color: var(--cloud); font-family: var(--fb); font-size: .8rem; line-height: 1.3; cursor: pointer; transition: .15s; min-width: 0; }
.dd-sugg:hover { border-color: var(--green); background: var(--green-soft); color: var(--snow); transform: translateY(-1px); }
.dd-sugg .dd-logo { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.dd-sugg .dd-logo-i { font-size: .5rem; }
.dd-sugg-ic { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: none; }
.dd-sugg-q { flex: 1; min-width: 0; }
.dd-sugg-go { color: var(--green); font-weight: 700; opacity: .5; flex: none; }
.dd-sugg:hover .dd-sugg-go { opacity: 1; }
@media (max-width: 560px) { .dd-chat-suggs { grid-template-columns: 1fr; } }
.dd-msg { max-width: 92%; font-size: .88rem; line-height: 1.55; padding: 10px 13px; border-radius: 10px; }
.dd-msg-u { align-self: flex-end; background: var(--green-dim); color: var(--snow); border: 1px solid rgba(204,255,0,.2); }
.dd-msg-a { align-self: flex-start; background: var(--bg2); color: var(--cloud); border: 1px solid var(--rim); white-space: pre-wrap; }
.dd-typing { color: var(--fog); }
/* markdown-formatted answer */
.dd-msg-a.dd-md { white-space: normal; }
.dd-md > :first-child { margin-top: 0; }
.dd-md > :last-child { margin-bottom: 0; }
.dd-md p { margin: 0 0 .55em; }
.dd-md h1, .dd-md h2, .dd-md h3, .dd-md h4 { margin: .85em 0 .4em; line-height: 1.25; color: var(--snow); font-family: var(--fb); font-weight: 700; }
.dd-md h1 { font-size: 1.05rem; } .dd-md h2 { font-size: 1rem; } .dd-md h3 { font-size: .92rem; } .dd-md h4 { font-size: .88rem; }
.dd-md ul, .dd-md ol { margin: .3em 0 .6em; padding-left: 1.25em; }
.dd-md li { margin: .2em 0; }
.dd-md li::marker { color: var(--fog); }
.dd-md strong { color: var(--snow); font-weight: 700; }
.dd-md em { color: var(--cloud); }
.dd-md a { color: var(--green); text-decoration: underline; }
.dd-md code { font-family: var(--fm); font-size: .82em; background: var(--bg3); padding: 1px 5px; border-radius: 4px; }
.dd-md pre { background: var(--bg3); border: 1px solid var(--rim2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: .5em 0; }
.dd-md pre code { background: none; padding: 0; }
.dd-md blockquote { margin: .5em 0; padding: .2em 0 .2em .8em; border-left: 2px solid var(--rim3); color: var(--fog); }
.dd-md hr { border: none; border-top: 1px solid var(--rim2); margin: .7em 0; }
.dd-cursor { display: inline-block; width: 7px; height: 14px; background: var(--green); margin-left: 2px; vertical-align: text-bottom; animation: dd-blink 1s steps(2) infinite; }
@keyframes dd-blink { 50% { opacity: 0; } }
.dd-cites { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--rim2); }
.dd-cites-lb { font-family: var(--fm); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.dd-cite-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dd-cite { flex: none; font-family: var(--fm); font-size: .68rem; color: var(--green); background: var(--green-soft); border: 1px solid rgba(204,255,0,.2); border-radius: 4px; padding: 2px 7px; cursor: pointer; }
.dd-cite-vid { min-width: 0; }
/* @handle mentions inside a chat answer — green + clickable → opens the creator's day drawer */
.dd-at { display: inline; font: inherit; color: var(--green); font-weight: 600; background: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 3px; }
.dd-at:hover { text-decoration: underline; background: var(--green-soft); }
.dd-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--rim); }
.dd-chat-in { flex: 1; background: var(--bg2); border: 1px solid var(--rim2); color: var(--snow); border-radius: 8px; padding: 10px 12px; font-size: .86rem; font-family: var(--fb); }
.dd-chat-in:focus { outline: none; border-color: var(--green); }
.dd-chat-send { background: var(--green); color: var(--bg); border: none; border-radius: 8px; width: 40px; cursor: pointer; font-size: 1.1rem; font-weight: 700; }

/* ── clickable stat pills (videos / creators / calls / tickers) ── */
.dd-stats--click span { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: 0 -2px; transition: .13s; }
.dd-stats--click span:hover { background: var(--bg3); color: var(--snow); }
.dd-stats--click span:hover b { color: var(--green); }
/* brief highlight when a stat scrolls you to the "everything else" table */
@keyframes dd-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(204,255,0,0); } 25% { box-shadow: 0 0 0 3px rgba(204,255,0,.5); } }
.dd-others-scroll { transition: box-shadow .2s; }
.dd-flash .dd-others-scroll { animation: dd-flash 1.1s ease-out; }

/* ── blur-backdrop sheet (stat-pill scroll modals) ── */
.dd-sheet-back { position: fixed; inset: 3.625rem 0 0 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(6,8,10,.55); backdrop-filter: blur(9px) saturate(.9); -webkit-backdrop-filter: blur(9px) saturate(.9);
  opacity: 0; transition: opacity .2s; padding: 3.2vh 16px 16px; overflow-y: auto; }
.dd-sheet-back.open { opacity: 1; }
.dd-sheet { width: min(860px, 100%); max-height: 90%; display: flex; flex-direction: column; background: var(--bg1);
  border: 1px solid var(--rim2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden;
  transform: translateY(10px) scale(.99); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.dd-sheet-back.open .dd-sheet { transform: none; }
.dd-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--rim); flex: none; }
.dd-sheet-title { font-family: var(--fb); font-size: 1.2rem; font-weight: 800; color: var(--snow); margin: 0; }
.dd-sheet-sub { font-size: .78rem; color: var(--fog); margin-top: 3px; }
.dd-sheet-x { background: var(--bg3); border: 1px solid var(--rim2); color: var(--cloud); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; flex: none; }
.dd-sheet-x:hover { color: var(--red); border-color: var(--red); }
.dd-sheet-body { overflow-y: auto; padding: 14px 18px 20px; }

/* videos sheet */
.dd-vsheet-list { display: flex; flex-direction: column; gap: 8px; }
.dd-vsheet-item { display: flex; align-items: flex-start; gap: 13px; padding: 12px 13px; background: var(--bg2); border: 1px solid var(--rim); border-radius: 11px; transition: .13s; }
.dd-vsheet-item:hover { border-color: var(--rim2); background: var(--bg3); }
.dd-vsheet-av { position: relative; flex: none; cursor: pointer; }
.dd-vsheet-av .dd-av { width: 44px; height: 44px; }
.dd-vsheet-yt { position: absolute; right: -4px; bottom: -3px; }
.dd-vsheet-yt .dd-yt { width: 18px; height: 13px; }
.dd-vsheet-av { align-self: flex-start; }
.dd-vsheet-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dd-vsheet-title { font-family: var(--fb); font-weight: 600; font-size: .92rem; color: var(--snow); text-decoration: none; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dd-vsheet-title:hover { color: var(--green); }
.dd-vsheet-meta { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: .74rem; color: var(--fog); }
.dd-vsheet-cr { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--cloud); cursor: pointer; }
.dd-vsheet-cr:hover { color: var(--green); }
.dd-vsheet-h { font-family: var(--fm); font-size: .68rem; color: var(--mist); }
.dd-vsheet-main .dd-reach { margin: 0; }
.dd-vsheet-tks { display: flex; flex-wrap: wrap; gap: 5px; }
.dd-vsheet-item .dd-tape-watch { flex: none; align-self: center; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--fog); text-decoration: none; border-radius: 7px; }
.dd-vsheet-item .dd-tape-watch:hover { color: var(--red); background: var(--bg1); }

/* creators sheet */
.dd-csheet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
.dd-csheet-item { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px; background: var(--bg2); border: 1px solid var(--rim); border-radius: 12px; }
.dd-csheet-id { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.dd-csheet-id .dd-av { width: 46px; height: 46px; }
.dd-csheet-idt { min-width: 0; }
.dd-csheet-name { font-family: var(--fb); font-weight: 700; font-size: .96rem; color: var(--snow); }
.dd-csheet-id:hover .dd-csheet-name { color: var(--green); }
.dd-csheet-sub { font-size: .72rem; color: var(--fog); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dd-csheet-bbn { }
.dd-csheet-actions { display: flex; gap: 8px; }
.dd-csheet-btn { flex: 1; font-family: var(--fb); font-size: .78rem; font-weight: 600; border-radius: 8px; padding: 9px 10px; cursor: pointer; transition: .13s; }
.dd-csheet-btn--go { background: var(--green-soft); border: 1px solid rgba(204,255,0,.25); color: var(--green); }
.dd-csheet-btn--go:hover { background: var(--green); color: #071; border-color: var(--green); }
.dd-csheet-btn--soon { background: var(--bg1); border: 1px solid var(--rim2); color: var(--mist); cursor: default; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dd-soon { font-family: var(--fm); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bg); background: var(--gold); border-radius: 4px; padding: 1px 5px; }

@media (max-width: 640px) { .dd-dd-counts, .dd-md-cr { grid-template-columns: 1fr; } .dd-headline { font-size: 1.45rem; } .dd-csheet-list { grid-template-columns: 1fr; } }