/* Ask Bella's handheld (2026-10-11). An original late-90s color handheld homage: no console or franchise
   names, logos, sounds or sprites. Reskin it with the tokens on .cc. Pixel font for the console's own
   labels and dialogue; the answer itself is set in the site's reading face so it stays easy to read. */
@font-face { font-family: "DotGothic16"; src: url("/assets/fonts/dotgothic16-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.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; } }

/* The launcher and the panel (2026-10-12). Bottom-right launcher; the back-to-top piece sits above it. */
/* The launcher is Bella herself (2026-10-12, Hayden: "bella's picture on the ask bella should be our animation,
   so it moves... almost like the paperclip in the old word, kind of spoofing that"): her sitting sprite, blinking,
   with a hop now and then, and a name tag. Big enough to notice; still one tap target. */
.bella-launch { position: fixed; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 56; display: inline-flex; align-items: flex-end; gap: 6px;
  min-height: 52px; padding: 0; background: none; color: #0b2f2b; font: 800 .95rem/1 var(--face); text-decoration: none; }
.bella-launch .bl-dog { position: relative; display: block; width: 104px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.bella-launch .bl-dog .sprite { display: block; width: 100%; height: auto; }
.bella-launch .bl-f1 { position: absolute; inset: 0; opacity: 0; }
.bella-launch .bl-label { order: -1; margin-bottom: 14px; padding: 9px 12px; background: var(--shell, #3fb6a8); border-radius: 14px 14px 4px 14px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.3); white-space: nowrap; }
@media (hover: hover) { .bella-launch:hover .bl-label { background: #52c7b9; } }
/* She moves in moments, not loops (check-design: "nothing loops to decorate"): bella-panel.js adds
   .is-blink and .is-hop for one short beat at a time, then settles after a few minutes. */
@media (prefers-reduced-motion: no-preference) {
  .bella-launch.is-blink .bl-f1 { animation: bl-blink .3s steps(1) 1; }
  .bella-launch.is-hop .bl-dog { animation: bl-hop .6s var(--ease-out, ease-out) 1; }
  @media (hover: hover) { .bella-launch:hover .bl-dog { animation: bl-hop .6s var(--ease-out, ease-out) 1; } }
  @keyframes bl-blink { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes bl-hop { 30% { transform: translateY(-10px); } 60% { transform: none; } 80% { transform: translateY(-4px); } }
}
/* Her tip, once per visit: a nod to the old paperclip assistant, including its famous way out. */
.bella-tip { position: fixed; right: 18px; bottom: calc(128px + env(safe-area-inset-bottom)); z-index: 57; width: min(290px, calc(100vw - 36px)); padding: 12px 14px; background: #ffffe1; color: #1d2027; border: 2px solid #1d2027; border-radius: 10px; box-shadow: 4px 4px 0 rgba(0,0,0,.35); font-size: .95rem; line-height: 1.4; }
.bella-tip::after { content: ""; position: absolute; right: 38px; bottom: -11px; width: 18px; height: 18px; background: #ffffe1; border-right: 2px solid #1d2027; border-bottom: 2px solid #1d2027; transform: rotate(45deg); }
.bella-tip p { margin: 0 0 10px; max-width: none; }
.bella-tip-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bella-tip-acts button { min-height: 44px; padding: 0 12px; border: 2px solid #1d2027; border-radius: 4px; background: #fff; color: #1d2027; font: 700 .85rem/1.1 var(--face); cursor: pointer; }
.bella-tip-acts .bella-tip-yes { background: #3fb6a8; }
html.bella-open .bella-tip { display: none; }
/* Nothing at the bottom of a page hides under her. */
.site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.bella-launch:focus-visible { outline: 3px solid #1d2027; outline-offset: 3px; }
.to-top { bottom: calc(124px + env(safe-area-inset-bottom)) !important; }
html:has(.bella-tip:not([hidden])) .to-top { visibility: hidden; }
html.bella-open .bella-launch { visibility: hidden; }
.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 stays one tap away in the sticky header. First-screen answers no longer sit behind her. */
  .bella-launch { display: none; }
  /* 10px from the edge sat under a phone's rounded screen corner (Hayden: "the back to top on mobile is cut off on the corner"). */
  .to-top { right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)) !important; }
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .bella-tip { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .bella-panel .cc-quick { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .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%); } }
  }
}
/* Folded while reading (menu.js adds .bella-mini past 60% of a screen): her face only, still 52px to tap.
   The name stays as the accessible label, so nothing is lost to a screen reader. */
html.bella-mini .bella-launch .bl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@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; }
/* Posts have a sticky contents column on the right: Bella shows just her sprite there, so her tag never covers it. */
@media (min-width: 1100px) { .page-post .bella-launch .bl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* 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; }