/* Ask Bella, the panel and the /ask/ page (split from ask.css 2026-10-13 to keep 15KB of CSS off every page's first
   render): loaded up front only on /ask/; elsewhere bella-panel.js turns the prefetched copy into a stylesheet the first
   time someone heads for Bella (hover, focus, touch) or opens her. */


.cc {
  --shell: #3fb6a8;          /* Bella's teal: the launcher, your bubbles */
  --shell-dark: #2a8a7f;
  --screen: #f4f1ea;         /* the cream console screen */
  --ink-px: #1d2027;
  --muted-px: #5b6170;
  --px: "DotGothic16", ui-monospace, monospace;
  display: flex; flex-direction: column; min-height: 0;
}
.cc-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--screen); color: var(--ink-px); }

/* Top bar: who you're talking to, and how much of Hayden's system you've seen. */
.cc-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 2px solid var(--ink-px); }
.cc-who { display: inline-flex; align-items: center; gap: 8px; font: 400 .95rem/1 var(--px); }
.cc-bella { position: relative; display: block; width: 40px; height: 40px; flex: none; }
.cc-bella img { position: absolute; inset: 0; width: 40px; height: 40px; image-rendering: pixelated; border: 2px solid var(--ink-px); border-radius: 50%; background: #fff; visibility: hidden; object-fit: cover; }
.cc-bella[data-mood="idle"] [data-mood-img="idle"], .cc-bella[data-mood="fetch"] [data-mood-img="fetch"], .cc-bella[data-mood="happy"] [data-mood-img="happy"] { visibility: visible; }
.cc-pieces { position: relative; display: grid; justify-items: start; gap: 4px; min-height: 44px; padding: 4px 8px; background: #fff; border: 2px solid var(--ink-px); border-radius: 4px; font: 400 .8rem/1 var(--px); color: var(--ink-px); cursor: pointer; }
.cc-pieces b { font-weight: 400; color: var(--ink-px); }
.cc-pieces-t { white-space: nowrap; }
.cc-bar { display: grid; grid-template-columns: repeat(15, 6px); gap: 1px; }
.cc-bar i { height: 6px; background: #d9d4c8; }
.cc-bar i.is-on { background: var(--proof); }
@media (prefers-reduced-motion: no-preference) { .cc-pieces.is-new::after { content: ""; position: absolute; inset: 0; background: var(--proof); border-radius: 2px; pointer-events: none; opacity: 0; animation: lock-flash var(--m-flash) steps(2, end) 2; }}

/* The conversation. */
.cc-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.cc-msg { position: relative; max-width: 88%; padding: 10px 12px; border-radius: 10px; font: 400 1rem/1.5 var(--face); }
.cc-msg p { margin: 0; }
.cc-msg p + p, .cc-msg p + .cc-src-h { margin-top: 8px; }
.cc-msg--bella { align-self: flex-start; background: #fff; border: 2px solid var(--ink-px); border-bottom-left-radius: 2px; }
.cc-msg--you { align-self: flex-end; background: var(--shell); color: #0b2f2b; font-weight: 650; border-bottom-right-radius: 2px; }
.cc-lead { font-weight: 750; }
.cc-cite { margin-inline: 2px; }
.cc-cite a, .cc .ask-cite a { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; background: var(--proof); color: var(--ink-px); font: 800 .75rem/1 var(--face); text-decoration: none; border-radius: 4px; vertical-align: 2px; }
.cc .ask-cite { margin-inline: 2px; }
.cc-src-h { margin: 10px 0 2px; font: 400 .78rem/1 var(--px); color: var(--muted-px); }
.cc-sources { margin: 0; padding: 0 0 0 1.6em; font: 600 .9rem/1.45 var(--face); }
.cc-sources li::marker { font-weight: 800; color: var(--ink-px); }
.cc-sources li { padding: 2px 0; }
.cc-sources a, .cc-msg a { color: var(--work-ink); }
.cc-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 800; color: var(--work-ink); }
.cc-note { margin-top: 6px !important; font: 400 .8rem/1.4 var(--px) !important; color: var(--muted-px); }
.cc-unlock { position: relative; margin-top: 8px !important; padding: 8px 10px 8px 26px; background: var(--screen); border-radius: 6px; font: 600 .88rem/1.4 var(--face); }
.cc-unlock::before { content: ""; position: absolute; left: 9px; top: 12px; width: 10px; height: 10px; background: var(--proof); }
.cc-unlock.cc-cov--found::before { background: var(--found); } .cc-unlock.cc-cov--understood::before { background: var(--understood); } .cc-unlock.cc-cov--chosen::before { background: var(--chosen); }
.cc-tools { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px !important; }
.cc-tools button, .cc-tools a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: 600 .8rem/1.2 var(--face); color: var(--muted-px); text-decoration: underline; cursor: pointer; }

/* Quick replies: her menu and any follow-ups, always one tap away above the box. */
.cc-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid #d9d4c8; }
.cc-quick button, .cc-guide button, .cc-coverage button { min-height: 44px; padding: 6px 12px; background: #fff; border: 2px solid var(--ink-px); border-radius: 18px; font: 400 .9rem/1.2 var(--px); color: var(--ink-px); cursor: pointer; text-align: left; }
.cc-quick .cc-q-also { font-family: var(--face); font-weight: 650; border-color: var(--shell-dark); }
@media (hover: hover) { .cc-quick button:hover, .cc-guide button:hover, .cc-coverage button:hover { background: #fff3d6; }}
.cc-guide, .cc-guide-links { display: grid; gap: 6px; margin-top: 8px; }

.cc-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 2px solid var(--ink-px); background: var(--screen); }
.cc-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; background: #fff; border: 2px solid var(--ink-px); border-radius: 22px; font: 400 1rem/1.2 var(--face); color: var(--ink-px); }
.cc-form input:focus { outline: none; box-shadow: 0 0 0 3px var(--proof); }
.cc-send { min-height: 44px; padding: 0 18px; background: var(--ink-px); color: #fff; border: 0; border-radius: 22px; font: 400 .95rem/1 var(--px); cursor: pointer; }
.cc :focus-visible { outline: 3px solid var(--ink-px); outline-offset: 2px; }

/* The coverage list (tap the counter). */
.cc-cov-h { position: relative; margin: 10px 0 4px !important; padding-left: 14px; font: 400 .8rem/1 var(--px); color: var(--muted-px); }
.cc-cov-h::before { content: ""; position: absolute; left: 0; top: 1px; width: 9px; height: 9px; }
.cc-cov--found::before { background: var(--found); } .cc-cov--understood::before { background: var(--understood); } .cc-cov--chosen::before { background: var(--chosen); }
.cc-coverage { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 600 .88rem/1.3 var(--face); }
.cc-coverage li.is-in { display: flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 8px; background: #eef6e6; border-radius: 6px; }
.cc-coverage button { display: flex; gap: 6px; width: 100%; font-family: var(--face); font-weight: 600; border-radius: 6px; border-width: 1px; }

.cc-fine { margin: 0; padding: 8px 12px 12px; font-size: .8rem; line-height: 1.5; color: var(--bone-soft); }
.cc-fine a { color: var(--bone); font-weight: 700; }
.cc-mark { display: block; margin-top: 4px; font: 400 .8rem/1 var(--px); letter-spacing: .12em; color: var(--shell); }

/* Bella's moves. */
@media (prefers-reduced-motion: no-preference) {
  .cc-bella[data-anim="happy"] img { animation: cc-hop .5s steps(3) 2; }
  .cc-bella[data-anim="fetch"] img { animation: cc-fetch 1.2s steps(6); }
  .cc-bella[data-anim="spin"] img { animation: cc-spin .8s steps(8); }
  .cc-bella[data-anim="sniff"] img { animation: cc-sniff .6s steps(2) 3; }
  .cc-bella[data-anim="sideeye"] img { animation: cc-side .9s steps(2); }
  .cc-bella[data-anim="sit"] img, .cc-bella[data-anim="speak"] img { animation: cc-hop .4s steps(2) 1; }
  @keyframes cc-hop { 50% { transform: translateY(-6px); } }
  @keyframes cc-fetch { 30% { transform: translateX(30px); } 60% { transform: translateX(30px) scaleX(-1); } 100% { transform: none; } }
  @keyframes cc-spin { to { transform: rotate(360deg); } }
  @keyframes cc-sniff { 50% { transform: translateX(3px) rotate(-4deg); } }
  @keyframes cc-side { 50% { transform: scaleX(-1); } }}

/* Comic burst: one shape, used sparingly, on the message where something lands. */
.cc-burst { position: absolute; z-index: 2; right: -10px; top: -22px; width: 84px; height: 72px; display: grid; place-items: center; pointer-events: none; }
.cc-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-burst span { position: relative; font: 400 .85rem/1 var(--px); color: var(--ink-px); transform: rotate(-8deg); }
/* Readable now (Hayden, 2026-10-12: 'the bam! flash graphic ... i can't even read cause it's so fast'): it pops in,
   holds for about two seconds, then fades. */
@media (prefers-reduced-motion: no-preference) { .cc-burst { animation: cc-pop 2.6s steps(4) both; } @keyframes cc-pop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 8% { transform: scale(1.1) rotate(4deg); opacity: 1; } 14% { transform: scale(1); opacity: 1; } 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }}
@media (prefers-reduced-motion: reduce) { .cc-burst { display: none; }}
.bella-panel { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #1d2027; color: var(--bone); overflow-y: auto; overscroll-behavior: contain; box-shadow: -12px 0 40px rgba(0,0,0,.45); }
.bella-panel::backdrop { background: rgba(10, 12, 16, .55); }
.bella-panel-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #1d2027; border-bottom: 2px solid #2a2e38; }
.bella-panel-title { margin: 0; font: 800 1.05rem/1.2 var(--face); }
.bella-panel-title span { display: block; font-weight: 600; font-size: .82rem; color: var(--bone-soft); }
.bella-panel-close { min-height: 44px; padding: 0 14px; background: #2a2e38; color: var(--bone); border: 0; border-radius: 3px; font: 700 .9rem/1 var(--face); cursor: pointer; }
.bella-panel[open] { display: flex; flex-direction: column; overflow: hidden; }
.bella-panel .cc { flex: 1; }
@media (max-width: 600px) {
  .bella-panel { inset: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
  .bella-panel .cc-quick { flex-wrap: wrap; } /* wraps instead of scrolling sideways (Hayden: "the bella system buttons cut off the screen") */
  .bella-panel .cc-quick button { flex: none; white-space: nowrap; }
  .bella-panel .cc-fine { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .bella-panel .cc-fine-explain, .bella-panel .cc-mark { display: none; }
  /* When the keyboard takes half a short screen, leave the answer and input room to breathe. */
  .bella-panel.is-typing .cc-status, .bella-panel.is-typing .cc-quick, .bella-panel.is-typing .cc-fine, .bella-panel.is-typing .bella-panel-title span { display: none; }}
/* The drawer is a container, so it eases; Bella is a piece, so she lands after it in steps.
   Desktop: in from the right edge. Phone: a bottom sheet. bella-panel.js waits for the exit before closing. */
@media (prefers-reduced-motion: no-preference) {
  .bella-panel[open] { animation: bella-in var(--m-drawer-in) var(--ease-out) both; }
  .bella-panel[open]::backdrop { animation: bella-fade-in var(--m-drawer-in) var(--ease-out) both; }
  .bella-panel[open].is-closing { animation: bella-out var(--m-drawer-out) var(--ease-in) both; }
  .bella-panel[open].is-closing::backdrop { animation: bella-fade-out var(--m-drawer-out) var(--ease-in) both; }
  .bella-panel[open]:not(.is-closing) .cc-bella img { animation: cc-hop 240ms steps(2, end) var(--m-drawer-in) 1; }
  @keyframes bella-in { from { transform: translateX(100%); } }
  @keyframes bella-out { to { transform: translateX(100%); } }
  @keyframes bella-fade-in { from { opacity: 0; } }
  @keyframes bella-fade-out { to { opacity: 0; } }
  @media (max-width: 600px) {
    .bella-panel[open] { animation: bella-up var(--m-sheet-in) var(--ease-sheet) both; }
    .bella-panel[open].is-closing { animation: bella-down var(--m-sheet-out) var(--ease-in) both; }
    @keyframes bella-up { from { transform: translateY(100%); } }
    @keyframes bella-down { to { transform: translateY(100%); } }}}
@media print { .bella-launch, .bella-panel { display: none !important; }}

/* Under the audience buttons: the four most-read posts, quieter (data/ask-device.json "top"). */
.cc-top { margin: 10px 0 0; font-size: .92rem; color: var(--ink-soft, #4a4f5b); }
.cc-top a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 12px; color: var(--ink, #1d2027); font-weight: 700; text-underline-offset: .2em; }

/* Answers that fit (Hayden, 2026-10-12: "make it so the response fits on mobile all in one box"): citation numbers sit
   inside the line instead of stretching it, and the sources become one "Keep going" list of tappable page rows. */
.cc-cite a, .cc .ask-cite a { min-width: 18px; height: 18px; padding: 0 3px; font-size: .68rem; border-radius: 3px; vertical-align: 1px; line-height: 1; }
.cc-next { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e3ddd0; }
.cc-next .cc-src-h { margin: 0 0 4px; }
.cc-next .cc-sources { display: grid; gap: 4px; padding: 0; list-style: none; }
.cc-next .cc-sources li { padding: 0; }
.cc-next .cc-sources a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; background: #f6f2e9; border-radius: 6px; color: var(--ink-px); text-decoration: none; font: 650 .9rem/1.3 var(--face); }
.cc-next .cc-sources .is-first a { background: var(--ink-px); color: #fff; }
.cc-next .cc-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; background: var(--proof); color: var(--ink-px); border-radius: 3px; font: 800 .72rem/1 var(--face); }
.cc-next .cc-label { flex: 1; }
@media (hover: hover) { .cc-next .cc-sources a:hover { box-shadow: inset 0 0 0 2px var(--proof); }}
@media (max-width: 640px) {
  .cc-msg p, .cc p { font-size: .96rem; line-height: 1.5; }
  .cc-lead { font-size: .92rem !important; }
  .cc-note { font-size: .74rem !important; }}
@media (max-width: 640px) { .cc-msg--bella { max-width: 100%; width: 100%; }}
.cc-bridge { margin-top: 10px !important; padding-top: 8px; border-top: 1px solid #e3ddd0; font: 600 .92rem/1.5 var(--face); }
.cc-bridge a { color: var(--work-ink); font-weight: 750; }
.cc-li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: #0a66c2; color: #fff !important; border-radius: 6px; font-weight: 800; text-decoration: none; }
.cc-msg--bella:has(.cc-burst) { margin-top: 46px; }
.cc-burst { top: -60px !important; right: 10px !important; width: 74px; height: 62px; transform: rotate(var(--tilt, -6deg)); }
.cc-burst--left { right: auto !important; left: 10px; }
@media (max-width: 600px) {
  .bella-panel .cc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px; }
  .bella-panel .cc-quick button { min-height: 44px; padding: 4px 10px; font-size: .82rem; line-height: 1.15; border-radius: 12px; }}
.cc-unlock:has(.cc-evo) { display: flex; align-items: center; gap: 8px; padding-left: 8px !important; }
.cc-unlock:has(.cc-evo)::before { display: none; }
.cc-evo { width: 40px; height: 40px; flex: none; image-rendering: pixelated; }
/* Her fetch run (ask.js run()): the running frames chase a ball across the status bar once. Frames swap by data-f; the
   lane moves by transform only. Reduced motion never starts it (ask.js checks calm). */
.cc-status { position: relative; overflow: hidden; }
.cc-run { position: absolute; left: 0; bottom: 0; width: 46px; height: 28px; pointer-events: none; visibility: hidden; z-index: 2; }
.cc-run .cr-f { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; }
.cc-run[data-f="0"] .cr-f:nth-child(1), .cc-run[data-f="1"] .cr-f:nth-child(2),
.cc-run[data-f="2"] .cr-f:nth-child(3), .cc-run[data-f="3"] .cr-f:nth-child(4) { opacity: 1; }
.cc-ball { position: absolute; right: -14px; top: 8px; width: 8px; height: 8px; background: #e0563b; border: 2px solid #1d2027; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .cc-run.is-running { visibility: visible; animation: cc-chase 1.8s linear 1 both; }
  .cc-run.is-running .cc-ball { animation: cc-bounce 300ms steps(2, end) 6; }
  @keyframes cc-chase { from { transform: translateX(-60px); } to { transform: translateX(var(--run-w, 360px)); } }
  @keyframes cc-bounce { 50% { transform: translateY(-6px); } }
}