/* ======================================================================
   Ask CoinLobster — the bottom-left dock.

   The rules between the two VERBATIM markers are lifted unchanged from the
   approved design (dev/ai-dock-mock.html, lines 63-235). Do not re-tune them
   here: change the mock, re-lift, or the two drift apart and the approved
   design stops being the thing we ship.

   Everything outside those markers is what the mock's own page scaffolding
   stood in for: where the dock is pinned, the phone form, focus rings, and
   stopping the motion for anyone who asked for less of it.
   ====================================================================== */

/* The mock names its colours --cl-*. They are the house tokens under another
   name, so they are bound here to terminal-tokens.css (the source of truth)
   with the mock's own hex as the fallback, and scoped to the dock so nothing
   else on the page inherits them. */
#cl-dock {
    --cl-blue-950: #071E33;
    --cl-blue-900: var(--tt-body-bg, #0A2A44);
    --cl-blue-850: var(--tt-input-bg, #0D3152);
    --cl-blue-800: var(--tt-panel-solid, #103756);
    --cl-blue-700: #17466B;
    --cl-hair: var(--tt-border, rgba(255,246,234,0.12));
    --cl-hair-soft: var(--tt-border-soft, rgba(255,246,234,0.07));
    --cl-orange: var(--tt-accent, #EE5A2C);
    --cl-sky: var(--tt-sky, #2FB1E6);
    --cl-gold: var(--tt-gold, #F7C11E);
    --cl-mint: var(--tt-up, #37D98A);
    --cl-red: var(--tt-down, #FA5772);
    --cl-cream: var(--tt-text, #FFF6EA);
    --cl-cream-mut: var(--tt-text-muted, #A9C2D6);
    /* Text-safe siblings. The raw accent and dim tokens measure under 4.5:1 on
       this panel, so they never carry type. */
    --cl-dim-text: var(--tt-text-dim-text, #93AEC4);
    --cl-accent-text: var(--tt-accent-text, #FF8A5C);
    --cl-disp: var(--tt-display, 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif);
    --cl-sans: var(--tt-sans, 'Hanken Grotesk', system-ui, sans-serif);
    --cl-mono: var(--tt-mono, 'JetBrains Mono', ui-monospace, monospace);
    --cl-ease: var(--tt-ease-out, cubic-bezier(0.22,1,0.36,1));
}

/* ══ VERBATIM FROM dev/ai-dock-mock.html BEGINS ══════════════════════════ */
/* — launcher ————————————————————————————————————————————————— */
.dk-launch{display:inline-flex;align-items:center;gap:8px;background:var(--cl-orange);
  border:none;border-radius:999px;padding:11px 18px 11px 15px;color:#fff;cursor:pointer;
  font-family:var(--cl-sans);font-size:13px;font-weight:700;letter-spacing:0.005em;
  box-shadow:0 10px 24px rgba(238,90,44,0.40),0 2px 5px rgba(0,0,0,0.3);
  transition:transform 0.16s var(--cl-ease),box-shadow 0.16s var(--cl-ease),filter 0.16s var(--cl-ease)}
.dk-launch:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(238,90,44,0.48),0 2px 5px rgba(0,0,0,0.3)}
.dk-launch:active{transform:translateY(0)}
.dk-launch svg{width:17px;height:17px;flex:none}
/* the unspent-question tick, so the allowance is legible before you open it */
.dk-launch-n{font-family:var(--cl-mono);font-size:11px;font-weight:800;background:rgba(10,30,48,0.28);
  border-radius:999px;padding:2px 7px;margin-left:1px}

/* — panel ——————————————————————————————————————————————————— */
.dk{width:420px;background:var(--cl-blue-800);border:1px solid var(--cl-hair);border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,0.46),0 3px 8px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.dk-head{display:flex;align-items:center;gap:9px;padding:13px 14px 12px 16px;
  border-bottom:1px solid var(--cl-hair-soft);background:rgba(7,30,51,0.34)}
.dk-mark{width:20px;height:20px;color:var(--cl-accent-text);flex:none}
.dk-title{font-family:var(--cl-disp);font-size:14.5px;font-weight:700;letter-spacing:-0.012em;flex:1 1 auto}
.dk-ico{background:none;border:none;color:var(--cl-dim-text);cursor:pointer;padding:5px;border-radius:7px;
  line-height:0;transition:color 0.14s,background-color 0.14s}
.dk-ico:hover{color:var(--cl-cream);background:rgba(255,246,234,0.08)}
.dk-ico svg{width:15px;height:15px}

.dk-body{padding:16px;display:flex;flex-direction:column;gap:20px;
  max-height:440px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cl-blue-700) transparent}

/* — one exchange: the question echoed, the read, then the card ——————— */
.dk-q{display:flex;gap:8px;align-items:baseline;margin:0 0 9px}
.dk-q-mark{color:var(--cl-accent-text);font-family:var(--cl-mono);font-size:11px;font-weight:800;flex:none;
  transform:translateY(-1px)}
.dk-q-txt{font-family:var(--cl-mono);font-size:12px;font-weight:500;color:var(--cl-dim-text);
  line-height:1.45;letter-spacing:-0.01em}
.dk-read{margin:0 0 13px;font-size:13.5px;line-height:1.52;color:var(--cl-cream);
  text-wrap:pretty}
.dk-read b{font-weight:700}

/* the answer card — same vocabulary as public/css/ask-box.css .ask-card */
.dk-card{background:rgba(7,30,51,0.55);border:1px solid var(--cl-hair);border-radius:12px;padding:13px 14px}
.dk-card-head{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.dk-subject{font-family:var(--cl-disp);font-size:13px;font-weight:800;letter-spacing:-0.01em}
.dk-sep{color:var(--cl-dim-text);font-size:12px}
.dk-pill{margin-left:auto;font-family:var(--cl-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--cl-mint);background:rgba(55,217,138,0.14);border-radius:999px;padding:3px 8px;
  display:inline-flex;align-items:center;gap:5px}
.dk-pill-dot{width:5px;height:5px;border-radius:50%;background:var(--cl-mint);
  box-shadow:0 0 0 0 rgba(55,217,138,0.6);animation:dkpulse 2.4s var(--cl-ease) infinite}
@keyframes dkpulse{0%{box-shadow:0 0 0 0 rgba(55,217,138,0.55)}70%{box-shadow:0 0 0 6px rgba(55,217,138,0)}100%{box-shadow:0 0 0 0 rgba(55,217,138,0)}}
.dk-pill-stale{color:var(--cl-gold);background:rgba(247,193,30,0.13)}
.dk-pill-stale .dk-pill-dot{background:var(--cl-gold);animation:none}

.dk-big{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.dk-big-v{font-family:var(--cl-disp);font-size:2.1rem;font-weight:800;letter-spacing:-0.045em;line-height:0.95}
.dk-up{color:var(--cl-mint)} .dk-down{color:var(--cl-red)} .dk-flag{color:var(--cl-gold)}
.dk-big-l{font-size:12px;color:var(--cl-cream-mut);line-height:1.35}
.dk-big-l b{color:var(--cl-cream);font-weight:700;font-family:var(--cl-mono);font-size:11.5px}

.dk-bar{display:flex;height:7px;border-radius:999px;overflow:hidden;background:var(--cl-red);margin-bottom:6px}
.dk-bar-buy{display:block;height:100%;background:var(--cl-mint)}
.dk-legend{display:flex;justify-content:space-between;font-family:var(--cl-mono);font-size:10px;font-weight:700;
  letter-spacing:0.02em;margin-bottom:12px}
.dk-leg-buy{color:var(--cl-mint)} .dk-leg-sell{color:var(--cl-red)}

.dk-chips{display:flex;flex-wrap:wrap;gap:7px}
.dk-chip{display:inline-flex;flex-direction:column;gap:2px;background:rgba(255,246,234,0.05);
  border:1px solid var(--cl-hair-soft);border-radius:9px;padding:6px 10px}
.dk-chip b{font-family:var(--cl-mono);font-size:12px;font-weight:700;color:var(--cl-cream);line-height:1}
.dk-chip i{font-style:normal;font-size:9.5px;color:var(--cl-dim-text);letter-spacing:0.02em}

/* receipts: the scored history strip, drawn not written */
.dk-receipts{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--cl-hair-soft)}
.dk-rec-ticks{display:flex;gap:3px}
.dk-rec-tick{width:13px;height:5px;border-radius:2px;background:var(--cl-red)}
.dk-rec-tick.is-up{background:var(--cl-mint)}
.dk-rec-l{font-size:10.5px;color:var(--cl-dim-text);line-height:1.3}
.dk-rec-l b{color:var(--cl-cream-mut);font-weight:600}

/* the honesty line: what this tier does not reach */
.dk-withheld{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--cl-hair-soft)}
.dk-withheld svg{width:14px;height:14px;color:var(--cl-gold);flex:none;margin-top:1px}
.dk-withheld p{margin:0;font-size:11.5px;line-height:1.45;color:var(--cl-cream-mut)}
.dk-withheld a{color:var(--cl-accent-text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}

/* — thinking: skeleton, never a spinner —————————————————————————— */
.dk-skel{display:grid;gap:8px}
.dk-skel-l{height:10px;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,246,234,0.07) 0%,rgba(255,246,234,0.15) 50%,rgba(255,246,234,0.07) 100%);
  background-size:220% 100%;animation:dkshim 1.5s ease-in-out infinite}
@keyframes dkshim{0%{background-position:140% 0}100%{background-position:-40% 0}}
.dk-skel-card{height:92px;border-radius:12px;border:1px solid var(--cl-hair-soft);
  background:linear-gradient(90deg,rgba(7,30,51,0.5) 0%,rgba(23,70,107,0.45) 50%,rgba(7,30,51,0.5) 100%);
  background-size:220% 100%;animation:dkshim 1.5s ease-in-out infinite;margin-top:12px}
.dk-working{display:flex;align-items:center;gap:7px;font-family:var(--cl-mono);font-size:10.5px;
  font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--cl-dim-text);margin-bottom:11px}
.dk-working svg{width:12px;height:12px;color:var(--cl-accent-text);animation:dkspin 1.6s linear infinite}
@keyframes dkspin{to{transform:rotate(360deg)}}

/* — empty state: teaches the box, does not apologise ————————————— */
.dk-empty-h{font-family:var(--cl-disp);font-size:16px;font-weight:800;letter-spacing:-0.02em;margin:2px 0 5px}
.dk-empty-p{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--cl-cream-mut)}
.dk-starters{display:grid;gap:7px}
.dk-starter{text-align:left;background:var(--cl-blue-850);border:1px solid var(--cl-hair);border-radius:10px;
  padding:10px 12px;color:var(--cl-cream);font-family:var(--cl-sans);font-size:12.5px;font-weight:500;
  cursor:pointer;display:flex;align-items:center;gap:9px;
  transition:border-color 0.14s,background-color 0.14s,transform 0.12s var(--cl-ease)}
.dk-starter:hover{border-color:var(--cl-orange);background:var(--cl-blue-700)}
.dk-starter:active{transform:translateY(1px)}
.dk-starter svg{width:13px;height:13px;color:var(--cl-dim-text);flex:none}
.dk-starter:hover svg{color:var(--cl-accent-text)}

/* — composer ————————————————————————————————————————————————— */
.dk-foot{border-top:1px solid var(--cl-hair-soft);background:rgba(7,30,51,0.34);padding:11px 12px 10px}
.dk-input{display:flex;align-items:center;gap:8px;background:var(--cl-blue-850);
  border:1px solid var(--cl-hair);border-radius:11px;padding:4px 4px 4px 12px;
  transition:border-color 0.14s}
.dk-input:focus-within{border-color:var(--cl-orange)}
.dk-input input{flex:1 1 auto;background:none;border:none;outline:none;color:var(--cl-cream);
  font-family:var(--cl-sans);font-size:13px;padding:9px 0;caret-color:var(--cl-orange)}
.dk-input input::placeholder{color:var(--cl-dim-text)}
.dk-send{flex:none;width:32px;height:32px;border-radius:8px;border:none;background:var(--cl-orange);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:filter 0.14s,opacity 0.14s}
.dk-send:hover{filter:brightness(1.08)}
.dk-send:disabled{background:var(--cl-blue-700);color:var(--cl-dim-text);cursor:not-allowed}
.dk-send svg{width:15px;height:15px}

/* the allowance, drawn as spent/unspent ticks — the number is the caption */
.dk-rail{display:flex;align-items:center;gap:9px;margin-top:9px;padding:0 3px}
.dk-meter{display:flex;gap:3px}
.dk-tick{width:15px;height:4px;border-radius:2px;background:var(--cl-mint)}
.dk-tick.is-spent{background:rgba(255,246,234,0.15)}
.dk-tick.is-last{background:var(--cl-gold)}
.dk-tick.is-none{background:rgba(250,87,114,0.42)}
.dk-rail-l{font-family:var(--cl-mono);font-size:10px;font-weight:700;letter-spacing:0.03em;
  color:var(--cl-dim-text)}
.dk-rail-l b{color:var(--cl-cream-mut);font-weight:700}
.dk-more{margin-left:auto;background:none;border:none;color:var(--cl-dim-text);cursor:pointer;padding:3px 5px;
  border-radius:6px;line-height:0;transition:color 0.14s,background-color 0.14s}
.dk-more:hover{color:var(--cl-cream);background:rgba(255,246,234,0.08)}
.dk-more svg{width:15px;height:15px}

/* — overflow menu: where feedback now lives —————————————————————— */
.dk-menu{position:absolute;right:10px;bottom:56px;width:224px;background:var(--cl-blue-700);
  border:1px solid var(--cl-hair);border-radius:12px;padding:5px;
  box-shadow:0 14px 34px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.3)}
.dk-menu-i{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  color:var(--cl-cream);font-family:var(--cl-sans);font-size:12.5px;font-weight:500;text-align:left;
  padding:9px 10px;border-radius:8px;cursor:pointer;transition:background-color 0.12s}
.dk-menu-i:hover{background:rgba(255,246,234,0.09)}
.dk-menu-i svg{width:14px;height:14px;color:var(--cl-dim-text);flex:none}
.dk-menu-i:hover svg{color:var(--cl-accent-text)}
.dk-menu-sep{height:1px;background:var(--cl-hair-soft);margin:4px 8px}

/* — out of questions ————————————————————————————————————————— */
.dk-out-h{font-family:var(--cl-disp);font-size:15.5px;font-weight:800;letter-spacing:-0.02em;margin:0 0 5px}
.dk-out-p{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--cl-cream-mut)}
.dk-opt{display:flex;align-items:center;gap:12px;background:var(--cl-blue-850);border:1px solid var(--cl-hair);
  border-radius:12px;padding:12px 13px;cursor:pointer;width:100%;text-align:left;margin-bottom:8px;
  transition:border-color 0.14s,background-color 0.14s}
.dk-opt:hover{border-color:var(--cl-orange);background:var(--cl-blue-700)}
.dk-opt-i{width:34px;height:34px;border-radius:9px;background:rgba(238,90,44,0.15);display:grid;place-items:center;
  flex:none;color:var(--cl-accent-text)}
.dk-opt-i.is-quiet{background:rgba(47,177,230,0.14);color:var(--cl-sky)}
.dk-opt-i svg{width:16px;height:16px}
.dk-opt-t{display:block;font-size:12.5px;font-weight:700;color:var(--cl-cream);line-height:1.3;margin-bottom:2px}
.dk-opt-s{display:block;font-size:11px;color:var(--cl-cream-mut);line-height:1.4}
.dk-opt-n{margin-left:auto;font-family:var(--cl-mono);font-size:11px;font-weight:800;color:var(--cl-cream);flex:none}
.dk-opt-n i{font-style:normal;color:var(--cl-dim-text);font-weight:500}
/* ══ VERBATIM FROM dev/ai-dock-mock.html ENDS ════════════════════════════ */

/* ── Where it sits ──────────────────────────────────────────────────────
   The mock drew the dock inside a stage. On a real page the launcher and the
   panel are the same corner: exactly one of the two is on screen at a time,
   so the corner never holds two controls. 16px off the edge is the offset
   lib/dock-avoid.js reserves; changing it here without changing EDGE there
   leaves rows running under the dock. */
#cl-dock-launch,
#cl-dock-panel {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9999;
}
#cl-dock-launch { position: fixed; }
#cl-dock-panel { max-width: calc(100vw - 32px); }
#cl-dock [hidden] { display: none !important; }
/* Id-scoped, because the launcher can be re-parented out of #cl-dock (above)
   and .dk-launch's own display rule would otherwise keep a hidden launcher on
   screen. Same trap the feedback widget hit. */
#cl-dock-launch[hidden],
#cl-dock-panel[hidden] { display: none !important; }

/* The round form. Taken on a phone, and on any width where the page's own
   margin holds the 48px chip but not the 170px pill (lib/dock-avoid.js
   decides which, exactly as it did for the control this replaces). */
#cl-dock-launch.is-slim {
    padding: 0;
    width: 48px;
    height: 48px;
    justify-content: center;
    border-radius: 50%;
    gap: 0;
}
#cl-dock-launch.is-slim .dk-launch-label { display: none; }
/* The count survives the round form as a corner tick: it is the one thing the
   closed launcher is carrying. */
#cl-dock-launch.is-slim .dk-launch-n {
    position: absolute;
    top: -5px;
    right: -5px;
    margin: 0;
    background: var(--cl-blue-950);
    border: 1px solid rgba(255,246,234,0.22);
}

/* ── Phone ─────────────────────────────────────────────────────────────
   Full width, same rail, same card. Mirrors the mock's .phone .dk rules. */
@media (max-width: 480px) {
    #cl-dock-launch,
    #cl-dock-panel { left: 12px; bottom: 12px; }
    #cl-dock-panel {
        right: 12px;
        width: auto;
        max-width: none;
        border-radius: 18px;
    }
    #cl-dock-panel .dk-body { max-height: min(392px, 52vh); }
    #cl-dock-launch {
        padding: 0;
        width: 48px;
        height: 48px;
        justify-content: center;
        border-radius: 50%;
        gap: 0;
    }
    #cl-dock-launch .dk-launch-label { display: none; }
    #cl-dock-launch .dk-launch-n {
        position: absolute;
        top: -5px;
        right: -5px;
        margin: 0;
        background: var(--cl-blue-950);
        border: 1px solid rgba(255,246,234,0.22);
    }
}

/* ── Keyboard ──────────────────────────────────────────────────────────
   ONE focus indicator per control, and it is the site's, not ours.

   terminal-tokens.css declares the house focus ring with !important, on
   purpose: app.css ships a blanket `outline: none !important` from a vendor
   theme, and that !important is the documented WCAG 2.4.7 repair for the
   whole site. It cannot be overridden from here and MUST NOT be: seven of
   eight controls on the live site had no visible ring before it existed.

   So the dock adds nothing of its own. What it had produced was a DOUBLE
   orange highlight on the composer, measured in the browser: the form's
   border turned #EE5A2C on :focus-within, and the input inside it drew the
   site ring in the same #EE5A2C two pixels further out. Two concentric
   orange strokes around one field, four pixels apart.

   The composer's own accent border is therefore cancelled here, AFTER the
   verbatim mock block that sets it. The mock is right on its own terms (it
   loads no site stylesheet, so there its border is the only indicator); it
   is only wrong once the real page's ring is also present, which is why this
   is an override rather than an edit to the block a test diffs.

   Only outline-OFFSET is tuned below, and only because terminal-tokens.css
   deliberately leaves offset overridable so a rounded control can sit its
   ring correctly. */
#cl-dock .dk-input:focus-within { border-color: var(--cl-hair); }
/* The input itself has no radius, so its ring drew as a hard rectangle inside
   an 11px rounded field. The ring follows the element's corners, so the radius
   goes on the input. */
#cl-dock .dk-input input { border-radius: 7px; }
#cl-dock .dk-launch:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* The muted half of a card head (subject · when). An inline style in the mock;
   a class here, so the renderer sets one attribute instead of writing three
   declarations it would then own a second copy of. */
#cl-dock .dk-when {
    font-family: var(--cl-disp);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cl-cream-mut);
}

/* The signed-out and paused states borrow the out-of-questions layout, so
   they need nothing of their own beyond a little air under the heading. */
#cl-dock .dk-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cl-cream-mut); }

/* ── Less motion ───────────────────────────────────────────────────────
   The shimmer on the skeleton and the pulse on the live dot are the two
   things that never stop by themselves. Both go. */
@media (prefers-reduced-motion: reduce) {
    #cl-dock .dk-skel-l,
    #cl-dock .dk-skel-card,
    #cl-dock .dk-pill-dot,
    #cl-dock .dk-working svg {
        animation: none !important;
    }
    #cl-dock .dk-launch,
    #cl-dock .dk-ico,
    #cl-dock .dk-starter,
    #cl-dock .dk-opt,
    #cl-dock .dk-send,
    #cl-dock .dk-more,
    #cl-dock .dk-menu-i,
    #cl-dock .dk-input {
        transition: none !important;
    }
    #cl-dock .dk-launch:hover,
    #cl-dock .dk-starter:active { transform: none !important; }
}

/* The answer, announced once, for a screen reader. Everyone else reads the
   card; this element is never visible and never takes space. */
#cl-dock .dk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Two menu rows are links (they go somewhere) and one is a button (it opens
   the note form here). They have to look identical, so the link takes the
   button's reset. */
#cl-dock a.dk-menu-i { text-decoration: none; }

/* The starter list is a flow of buttons whose label wraps; the mock's row
   alignment assumes one line, so a long question keeps its icon at the top. */
#cl-dock .dk-starter { align-items: flex-start; line-height: 1.35; }
#cl-dock .dk-starter svg { margin-top: 2px; }

/* One exchange: the question, the read, the cards. It carries no rules of its
   own (the body's own gap spaces the stack), and it exists so the renderer has
   a named box to append into rather than a bare div nobody can find. */
#cl-dock .dk-turn { display: block; }