/* Card chat styles, shared by the review page and the consumer mock (see chat.js).
   Pages set the base colours (--bg, --panel, --ink, --muted, --line, --accent, --chip, --chip-ink, --todo,
   --shadow) and put class "cardback" on the element holding the chat; paint() adds --hue and "tinted". */
.cardback blockquote { margin: 8px 0 0; quotes: "「" "」" "『" "』"; }
.cardback blockquote::before { content: open-quote; }
.cardback blockquote::after { content: close-quote; }
.cardback cite { display: block; text-align: right; color: var(--muted); font-style: normal; font-size: 13px; }
.cardback cite::before { content: "～"; }
.cardback button { font: inherit; cursor: pointer; }
.cardback button:disabled { opacity: .4; cursor: default; }
#log { display: flex; flex-direction: column; gap: 8px; }
.bub { max-width: 88%; padding: 6px 10px; border-radius: 12px; white-space: pre-line; }
/* --hue comes from the painting (see paint()); lightness is fixed per theme so text stays readable. */
.cardback { --me: var(--chip); --me-ink: var(--chip-ink); --bot: var(--bg); --act: var(--accent); }
/* Only the painting's hue is taken; lightness and chroma are fixed in OKLCH, which keeps perceived
   lightness equal across hues. Checked over all hues (WCAG): accent text on the panel or a reply bubble
   ≥ 5.1:1, bubble text ≥ 8.4:1, light and dark. --act-ink is text on an accent background. */
.cardback.tinted { --me: oklch(.92 .05 var(--hue)); --me-ink: oklch(.36 .09 var(--hue)); --bot: oklch(.965 .018 var(--hue)); --act: oklch(.50 .14 var(--hue)); --act-ink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cardback.tinted { --me: oklch(.36 .07 var(--hue)); --me-ink: oklch(.92 .05 var(--hue)); --bot: oklch(.26 .02 var(--hue)); --act: oklch(.80 .12 var(--hue)); --act-ink: oklch(.22 .04 var(--hue)); } }
:root[data-theme="dark"] .cardback.tinted { --me: oklch(.36 .07 var(--hue)); --me-ink: oklch(.92 .05 var(--hue)); --bot: oklch(.26 .02 var(--hue)); --act: oklch(.80 .12 var(--hue)); --act-ink: oklch(.22 .04 var(--hue)); }
.bub.me { align-self: flex-end; background: var(--me); color: var(--me-ink); }
.bub.bot { align-self: flex-start; background: var(--bot); }
.bub.tbd { color: var(--todo); font-style: italic; }
.bub.live { border: 1px dashed var(--accent); }
.bub .path { font-size: 11px; color: var(--muted); cursor: copy; font-style: normal; }
.bub .notice, .bub .choices { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sys { align-self: center; font-size: 12px; color: var(--muted); text-align: center; }
/* Suggestions, not sent messages: outlined, on the reply's side, in the painting's accent colour. */
.row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 4px; }
#spacer { flex: none; }
.bub .later { display: none; } /* links and lists wait, taking no room, until the text is typed */
.bub .verses { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.bub .verses blockquote:first-child { margin-top: 0; }
.bub .shown { animation: pop .28s ease-out both; }
.row button.honest { color: var(--muted); border-color: var(--line); }
.row button.seen { color: var(--muted); border-color: var(--line); pointer-events: none; } /* no hover, press or cursor */
.row button.seen::after { content: ' ✓'; }
.row button.neutral { color: var(--muted); border-color: var(--line); } /* same quiet style as the problem-side chips */
.typing { display: flex; gap: 4px; padding: 10px 12px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.row button { border-radius: 16px; background: transparent; color: var(--act); border: 1.5px solid var(--act); padding: 5px 12px; }
.row button:hover { background: var(--me); }
.row button.tbd { border: 1px dashed var(--chip-ink); }
/* Motion: the tap pops in, the reply follows a beat later, then the chips rise one by one.
   Opacity-only delays keep layout (and scrolling) fixed from the start. */
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes glow { 50% { box-shadow: 0 0 0 6px oklch(.7 .12 var(--hue, 30) / .2); } }
.bub, .row button { animation: pop .28s ease-out both; }
.bub.me { transform-origin: right bottom; }
.bub.bot { transform-origin: left bottom; }
.row button { animation-delay: calc(var(--i, 0) * .08s); }
/* Pressed: darken, don't shrink; a shrinking chip slips out from under a press near its edge and the tap is lost. */
.row button:active, .ask:active { filter: brightness(.9); }
.ask { animation: glow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bub, .bub .shown, .row button, .ask, .typing i { animation: none; }
  .typing i { opacity: .6; }
}
.cardacts { display: flex; justify-content: center; gap: 8px; }
.cardacts button { padding: 4px 14px; border-radius: 16px; font-size: 13px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
#bottom.startbar { display: flex; gap: 8px; }
#bottom.startbar .ask { flex: 1; width: auto; }
.talk { flex: none; width: 46px; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--act); border: 1.5px solid var(--act); }
.ask { width: 100%; padding: 12px; font-weight: 600; border-radius: 10px; background: var(--act); color: var(--act-ink, #fff); border: none; }
.inputbar { display: flex; gap: 6px; }
.cardacts select { font: inherit; font-size: 13px; padding: 4px 6px 4px 12px; border-radius: 16px 0 0 16px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-right: none; max-width: 11em; }
/* [聲音 | 🔊] split button: pick the voice on the left, read aloud on the right. */
.split { display: inline-flex; }
.split select:not([hidden]) + button { border-radius: 0 16px 16px 0; padding-left: 10px; }
#bottom { position: relative; }
.consent { position: fixed; inset: auto; margin: 0; width: min(300px, calc(100vw - 32px)); padding: 12px; border-radius: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; overflow: visible; }
.consent::backdrop { background: rgb(0 0 0 / .35); }
.consent::after { content: ''; position: absolute; right: 18px; bottom: -6px; width: 10px; height: 10px; background: var(--panel); border: solid var(--line); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.consent p { margin: 0 0 10px; }
.consent a { color: var(--act); }
.consent div { display: flex; justify-content: flex-end; gap: 8px; }
.consent button { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.consent button.ok { background: var(--act); border-color: var(--act); color: var(--act-ink, #fff); }
.branches { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; }
.branches li { padding: 4px 0; border-top: 1px solid var(--line); }
/* Links inside replies use the bubble's ink colour (dark on light, light on dark), never browser blue. */
.cardid { font: 600 .95em ui-monospace, SFMono-Regular, Consolas, monospace; padding: 1px 6px; border-radius: 5px; background: var(--me); color: var(--me-ink); }
.bub a, .branches a { color: var(--me-ink); font-weight: 600; text-underline-offset: 3px; }
/* Opens elsewhere: a small box-and-arrow icon after the link, in the link's colour. */
a[target="_blank"]::after { content: ''; display: inline-block; width: .8em; height: .8em; margin-left: .2em; vertical-align: -.05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.inputbar input { flex: 1; min-width: 0; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }