/* itclicks — the general loop page. Same "night reading" look as the app. */
:root{
  --bg:#0f1a2a; --panel:rgba(255,255,255,.05); --panel-line:rgba(255,255,255,.11); --line:rgba(255,255,255,.07);
  --ink:#f5f1e8; --ink-warm:#f2ede4; --ink-soft:#a9b3c2; --ink-dim:#8f9aab; --ink-faint:#6b7687;
  --source-ink:#d3ccbb; --accent:#e08a55; --accent-muted:#cf8a63; --accent-ink:#1a1208;
  --ok:#8fbf9f; --warn:#e2b76a; --stop:#d98d7c; --stop-line:rgba(154,75,63,.55);
  --serif:'Source Serif 4',Georgia,serif; --sans:'Albert Sans',system-ui,sans-serif; --maxw:720px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent-muted);text-decoration:none} a:hover{color:var(--accent)}
button{font:inherit;cursor:pointer;color:inherit}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.15;margin:0}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem clamp(1rem,4vw,1.6rem);background:linear-gradient(var(--bg) 70%,transparent)}
.brand{display:flex;align-items:center;gap:8px}
.logo-word{font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink-warm)}
.bar-right{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end}
.pill{background:var(--panel);border:1px solid var(--panel-line);border-radius:999px;padding:.3rem .8rem;font-size:.82rem;color:var(--ink-soft)}
.pill:hover{border-color:rgba(255,255,255,.25);color:var(--ink)}
.pill[aria-pressed="true"]{border-color:var(--ok);color:var(--ok)}
.pill.stop{border-color:var(--stop-line);color:var(--stop)}
.pill.balance{border-color:rgba(224,138,85,.35);color:var(--accent-muted)}
.pill.balance:hover{border-color:var(--accent);color:var(--accent)}
.banner{margin:0 auto;max-width:var(--maxw);padding:.4rem 1rem;font-size:.82rem;color:var(--warn);text-align:center}

.room{max-width:var(--maxw);margin:0 auto;padding:1rem clamp(1rem,4vw,1.6rem) 1rem}
.front{text-align:center;padding-top:clamp(2rem,12vh,6rem)}
.front.is-hidden{display:none}
.kicker{margin:0 0 12px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-muted)}
.front h1{font-size:clamp(1.8rem,5.5vw,2.6rem);margin-bottom:1rem}
.lede{font-family:var(--serif);font-size:1.15rem;color:var(--ink-soft);max-width:34rem;margin:0 auto}

.thread{display:flex;flex-direction:column;gap:1.4rem;margin-top:1rem}
/* Keeps the sticky top bar (56-64px tall) from covering whatever the page
   just scrolled to — every direct child is a possible scroll target when a
   new idea or the "Reading…" spinner appears. */
.thread>*{scroll-margin-top:76px}
.user-turn{align-self:flex-end;max-width:85%;background:rgba(224,138,85,.14);border:1px solid rgba(224,138,85,.28);border-radius:18px 18px 4px 18px;padding:.6rem .95rem;white-space:pre-wrap;overflow-wrap:anywhere}
.marker{align-self:flex-end;font-size:.8rem;color:var(--ink-faint);font-style:italic}
.marker-final{color:var(--accent);font-weight:700;font-style:normal}
.brought{align-self:flex-end;font-size:.82rem;color:var(--ink-dim)}

.beat{background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;padding:1.15rem 1.25rem}
.beat-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem;min-height:1rem}
.dots{display:flex;gap:5px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.dots i.on{background:var(--accent)}
.idea-count{font-size:.78rem;color:var(--ink-dim);letter-spacing:.04em}
.idea-count-num{color:var(--accent);font-weight:700}
.idea{font-family:var(--serif);font-size:1.22rem;line-height:1.5;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.ground{margin:.7rem 0 0;font-size:.82rem;color:var(--warn)}
.urgent{margin:.8rem 0 0;padding:.7rem .9rem;border:1px solid var(--stop-line);border-radius:12px;color:var(--stop);font-size:.95rem}

.sources-group{margin-top:.95rem}
.sources-label{margin:0 0 .4rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
/* Only rendered with 2+ sources — one summary pill standing in for the
   full list below, which starts collapsed. Four individually-open source
   pills read as a wall of near-identical boxes; this keeps the common
   case (nobody needs every source open at once) to one clean line. */
.sources-summary{display:flex;align-items:center;gap:.4rem;width:100%;background:transparent;border:1px solid var(--panel-line);border-radius:999px;padding:.4rem .8rem;font-size:.8rem;color:var(--ink-dim);letter-spacing:.02em;margin-bottom:.5rem}
.sources-summary:hover{border-color:rgba(255,255,255,.28);color:var(--ink)}
.sources-summary .ok{color:var(--ok)}
.sources-summary .chev{margin-left:auto;width:.5rem;height:.5rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s ease;opacity:.7}
.sources-group.is-open .sources-summary .chev{transform:rotate(-135deg)}
/* A row, not a column — two short source pills sit side by side when
   there's room (they were needlessly forced full-width before) and wrap to
   stacked on their own once the card gets too narrow for that. */
.sources{display:flex;flex-wrap:wrap;gap:.5rem}
/* [hidden] and .sources both have one-class specificity, so without this
   the flex display above silently wins over the browser's default
   [hidden]{display:none} and the "collapsed" state never actually hides
   anything. Caught by checking computed style, not just a screenshot. */
.sources[hidden]{display:none}
/* Collapsed by default — a tap reveals the exact quote. Keeps the promise
   (every claim is checkable against its source) without every idea being
   dominated by full quoted paragraphs. */
.source{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;flex:1 1 240px;min-width:200px;max-width:100%}
.source-toggle{display:flex;align-items:center;gap:.4rem;width:100%;min-width:0;background:transparent;border:1px solid var(--panel-line);border-radius:999px;padding:.4rem .8rem .4rem .7rem;font-size:.8rem;color:var(--ink-dim);letter-spacing:.02em}
.source-toggle:hover{border-color:rgba(255,255,255,.28);color:var(--ink)}
.source-toggle .ok{color:var(--ok)}
.source-toggle-label{flex-shrink:0}
.source-toggle-preview{color:var(--ink-faint);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.source-toggle .chev{width:.5rem;height:.5rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s ease;opacity:.7}
.source.is-open .source-toggle .chev{transform:rotate(-135deg)}
.source-quote{margin:0;padding:.5rem 0 .1rem .8rem;border-left:2px solid var(--accent-muted);color:var(--source-ink);font-size:.95rem;line-height:1.5;overflow-wrap:anywhere;max-width:100%}
.source-link{font-size:.78rem;color:var(--accent-muted)}
.source-link:hover{color:var(--accent)}

/* Next point / Ask a clarifying question — free, so kept apart from the
   costed pills below, and now its own row instead of sharing one with the
   sources above (that's what was squeezing a second source pill sideways).
   Centered, not left-aligned: this is a deliberate "pause point" in the
   card, not a continuation of the body text above it. */
.free-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.1rem}
.next-idea-btn,.clarify-idea-btn{flex-shrink:0}

.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:.6rem 1.3rem;font-weight:700;font-size:1rem;box-shadow:0 2px 10px rgba(224,138,85,.25)}
.btn:hover{filter:brightness(1.08)}
/* A dimmer solid fill still read as "the same button, slightly off" next
   to "Next point" — two solids in the same hue rarely feel distinct at a
   glance. Outline/ghost vs solid is the standard, unambiguous way to mark
   primary vs secondary regardless of exact shade. */
.clarify-idea-btn{background:transparent;color:var(--accent-muted);border:1px solid var(--accent-muted);box-shadow:none}
.clarify-idea-btn:hover{color:var(--accent);border-color:var(--accent)}
/* Top margin is the point: this used to sit flush against whatever came
   before it (the sources, or the free buttons), reading as if it belonged
   to that instead of the paid pills directly below it. Centered, and the
   faint rule underneath is the actual visual threshold: everything above
   it was free, everything below it (the pills) spends an answer. */
.suggestions{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--panel-line)}
.suggestions-lead{margin:.3rem 0 .15rem;font-size:.8rem;color:var(--ink-dim)}
.suggestion-link{background:none;border:0;padding:.2rem 0;text-align:left;font-size:.92rem;line-height:1.4;color:var(--ink-soft);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.suggestion-link:hover{color:var(--accent);text-decoration-color:var(--accent)}
.link-btn{background:none;border:0;color:var(--accent-muted);text-decoration:underline;padding:0;font-size:.86rem}

.thinking{display:flex;align-items:center}
.thinking-label{margin-left:.65rem;font-size:.88rem;color:var(--ink-dim)}
.thinking-logo circle{transform-box:fill-box;transform-origin:center;animation:pulse 1.2s ease-in-out infinite}
.thinking-logo .think-dot-2{animation-delay:.15s}
.thinking-logo .think-dot-3{animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.thinking-logo circle{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.notice{margin-top:1rem;padding:.7rem .9rem;border:1px solid var(--stop-line);border-radius:12px;color:var(--stop);font-size:.92rem}
.notice-text{margin:0 0 .55rem}
.notice-action{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:.45rem 1rem;font-weight:700;font-size:.86rem}
.notice-action:hover{filter:brightness(1.08)}

/* position:sticky, not fixed+manually-toggled: this is what actually
   generalizes to every case at once — an empty screen, a short reply that
   doesn't fill an iPad's height, and a long thread that needs real
   scrolling. Short content: the dock just sits in normal flow right after
   it, no gap, because there's nothing yet to stick against. Long content:
   it sticks to the bottom of the viewport once scrolling would otherwise
   carry it past that point, same as a fixed dock did, but only when that
   behavior is actually needed. No JS state, no per-case padding to keep in
   sync — the two prior fixes were patching this one case at a time instead
   of fixing what made every case need patching. */
.dock{position:sticky;bottom:0;left:0;right:0;z-index:6;padding:.8rem clamp(1rem,4vw,1.6rem) .6rem;background:linear-gradient(transparent,var(--bg) 22%)}
.composer{max-width:var(--maxw);margin:0 auto;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:26px;padding:.5rem .55rem .5rem .5rem;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.composer:focus-within{border-color:rgba(224,138,85,.55)}
.composer-row{display:flex;align-items:flex-end;gap:.35rem}
.composer textarea{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;resize:none;padding:.5rem .3rem;max-height:9rem;line-height:1.45}
.composer textarea::placeholder{color:var(--ink-faint)}
.icon-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:0;color:var(--ink-soft);display:grid;place-items:center}
.icon-btn:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.icon-btn.is-listening{color:var(--accent);background:rgba(207,138,99,.18)}
@keyframes mic-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.icon-btn.is-listening svg{animation:mic-pulse 1.1s ease-in-out infinite}
.send{width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.send:disabled{opacity:.4;cursor:default}
.doc-chip{display:flex;align-items:center;gap:.5rem;margin:.1rem .4rem .35rem;font-size:.85rem;color:var(--ink-soft)}
.doc-chip[hidden]{display:none}
.doc-meta{color:var(--ink-faint)}
.doc-chip button{background:none;border:0;color:var(--ink-dim);font-size:1.2rem;line-height:1;padding:0 .2rem}
.clarify-chip{color:var(--accent-muted);font-weight:600}
.caution{max-width:var(--maxw);margin:.5rem auto 0;text-align:center;font-size:.72rem;color:var(--ink-faint);line-height:1.4}
.balance-line{max-width:var(--maxw);margin:0 auto .4rem;text-align:center;font-size:.72rem;font-weight:700;color:var(--accent-muted)}
.balance-line[hidden]{display:none}

.dialog{background:#15223a;color:var(--ink);border:1px solid var(--panel-line);border-radius:18px;max-width:min(520px,92vw);padding:1.3rem 1.4rem}
.dialog::backdrop{background:rgba(0,0,0,.6)}
.dialog h2{font-size:1.3rem;margin-bottom:.4rem}
.dialog-note{color:var(--ink-dim);font-size:.9rem;margin:0 0 .9rem}
.saved-list{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem;max-height:50vh;overflow:auto}
.saved-list li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border:1px solid var(--panel-line);border-radius:12px;padding:.55rem .8rem}
.saved-list .open{flex:1;text-align:left;background:none;border:0;color:var(--ink);padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-list small{color:var(--ink-faint);display:block}
.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem}

#contact-form{display:flex;flex-direction:column;gap:.6rem}
#contact-message{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:.6rem .9rem;color:var(--ink);font:inherit;resize:vertical}
#contact-email{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--panel-line);border-radius:999px;padding:.5rem .9rem;color:var(--ink);font:inherit}
#contact-message::placeholder,#contact-email::placeholder{color:var(--ink-faint)}
#contact-status{margin:0}

.redeem-row{margin:0 0 1.1rem}
.redeem-row #redeem-form:not([hidden]){display:flex;gap:.5rem;margin-top:.6rem}
.redeem-row input{flex:1;background:var(--panel);border:1px solid var(--panel-line);border-radius:999px;padding:.4rem .9rem;color:var(--ink);font:inherit}
.redeem-row .dialog-note{margin:.5rem 0 0}

.packages{display:flex;flex-direction:column;gap:.6rem;margin:0 0 1.1rem}
.package-option{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;text-align:left;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:.7rem .9rem;color:var(--ink)}
.package-option:hover:not(:disabled){border-color:var(--accent);background:rgba(224,138,85,.08)}
.package-option:disabled{opacity:.55;cursor:default}
.package-head{display:flex;align-items:baseline;justify-content:space-between;width:100%;gap:.8rem}
.package-name{font-weight:600}
.package-price{font-family:var(--serif);font-size:1.05rem;color:var(--accent-muted)}
.package-per{font-size:.78rem;color:var(--ink-faint)}
@media (max-width:520px){.beat{padding:1rem}.idea{font-size:1.12rem}.bar-right .pill{font-size:.76rem;padding:.28rem .65rem}}

/* how did we do? */
.feedback-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3rem .7rem;margin-top:1.1rem;font-size:.8rem;text-align:center;color:var(--ink-dim)}
.feedback-btn{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;background:var(--panel);border:1px solid var(--panel-line);border-radius:50%;color:var(--ink-soft)}
.feedback-btn:hover{border-color:var(--accent);color:var(--accent)}
.feedback-more{background:none;border:0;padding:0;white-space:nowrap;font-size:.8rem;color:var(--accent-muted);text-decoration:underline;text-underline-offset:2px}
.feedback-more:hover{color:var(--accent)}
.restored-note{margin:.6rem 0 0;font-size:.8rem;color:var(--ink-dim)}