/* ---------- Babble, any time: the B in the header and the side chat it opens ---------- */
.side-open { grid-column: 3; grid-row: 1; justify-self: end; width: 36px; height: 36px; border-radius: var(--radius-round); border: 0; padding: 3px 0 0;
  background: var(--color-action); color: var(--color-accent); font: var(--text-4xl)/1 var(--font-script); cursor: pointer; display: grid; place-items: center; }
.side-open[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-action); }
/* When the panel folds back in, the B answers with a small bounce, so you see where Babble went. */
.side-open.landed { animation: landed .45s ease-out .2s; }
@keyframes landed { 40% { transform: scale(1.18); } 100% { transform: none; } }
.side-scrim { position: fixed; inset: 0; z-index: 19; background: rgb(var(--rgb-shadow) / .28); }
/* Closed, it's folded into the B (top right); opening, it starts off the right edge and slides in. */
.side { position: fixed; z-index: 20; inset-block: 0; inset-inline-end: 0; width: min(88vw, 420px); display: flex; flex-direction: column;
  gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); background: var(--color-bg);
  box-shadow: -10px 0 40px rgb(var(--rgb-shadow) / .18); border-start-start-radius: var(--radius-l); border-end-start-radius: var(--radius-l);
  transform-origin: calc(100% - 34px) 30px; transform: scale(.05); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.3, .7, .2, 1), opacity .25s; }
.side.from-edge { transform: translateX(100%); opacity: 1; transition: none; }
.side.open { transform: none; opacity: 1; pointer-events: auto; }
[dir="rtl"] .side { transform-origin: 34px 30px; box-shadow: 10px 0 40px rgb(var(--rgb-shadow) / .18); }
[dir="rtl"] .side.from-edge { transform: translateX(-100%); }
.side-head { display: flex; align-items: center; justify-content: space-between; }
.side-title { font: var(--text-7xl)/1 var(--font-script); color: var(--color-action); padding-top: 4px; }
.side-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--radius-round); background: none;
  color: var(--color-text-muted); cursor: pointer; }
.side-close:hover { background: var(--color-surface); color: var(--color-text); }
.side-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.side-thread > :first-child { margin-top: auto; }
.side-thread .welcome { max-width: calc(100% - 38px); }
.side-thread .you-said { max-width: 88%; }

/* "Prep with Babble first": optional, so it's quiet: a text button with a small mic, just above Start. */
.welcome .eg { display: block; margin-top: 6px; font-size: var(--text-md); color: var(--color-text-muted); }
.prep { display: none; }
body[data-mode="assist"]:not(.live):not(.done) .prep { display: inline-flex; }
.prep { align-self: center; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; background: none; border: 0;
  color: var(--color-action); font: inherit; font-size: var(--text-base); font-weight: 600; cursor: pointer; border-radius: var(--radius-pill); }
.prep:hover { background: rgb(var(--rgb-action) / .07); }
.prep::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%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'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero { display: none; }
body[data-mode="assist"]:not(.live):not(.done) .hero { display: grid; justify-items: center; gap: 6px; margin: auto 0; padding: 18px 0;
  background: none; border: 0; cursor: pointer; color: var(--color-text); }
.hero-langs { display: flex; align-items: baseline; gap: 14px; font-size: var(--text-display); font-weight: 700; letter-spacing: -.01em; }
.hero-arrow { color: var(--color-text-muted); font-weight: 400; font-size: var(--text-6xl); }
#hero-theirs.unknown { color: var(--color-text-muted); font-weight: 600; }
.hero-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
/* The languages line under the name gives way to the hero before a conversation. */
body:not(.live) .bar .settings-line { display: none; }
/* "Start": the one moment of motion, pointing at the next step once Babble is set. */
.mic.nudge { animation: nudge 1s ease-in-out 2; }
@keyframes nudge { 50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgb(var(--rgb-accent) / .5); } }
@media (prefers-reduced-motion: reduce) { .mic.nudge { animation: none; } }
.whisper { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.whisper:has(small) { align-items: flex-start; }
.whisper:has(small) input { margin-top: 3px; }
.whisper small { font-size: var(--text-2xs); }

/* Settings: a sheet that rises from the bottom, under the thumb. */
.sheet { width: 100%; max-width: 640px; margin: auto auto 0; border: 0; border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--color-bg); color: var(--color-text); padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto; }
.sheet[open] { display: grid; gap: 14px; }
.sheet::backdrop { background: rgb(var(--rgb-scrim) / .35); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.sheet-head h2 { margin: 0; font-size: var(--text-3xl); }
.settings-line { justify-self: start; background: none; border: 0; padding: 0; text-align: start; font-size: var(--text-sm);
  color: var(--color-text-muted); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
body.live .settings-line, body.done .settings-line { display: none; }
.voice-field small, .field > span small { font-weight: 400; }
/* A three-way choice, like a segmented control. */
.seg { display: flex; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px; }
.seg button { flex: 1; background: none; border: 0; border-radius: var(--radius-pill); padding: 8px 6px; font-size: var(--text-md); color: var(--color-text); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--color-bubble-me); font-weight: 600; }
.vp-status { font-size: var(--text-sm); color: var(--color-text); }
.vp-prompt { font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-s); padding: 10px 12px; }
.vp-row { display: flex; gap: 8px; }
.vp-row button { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-s); padding: 9px 14px;
  font-size: var(--text-md); cursor: pointer; }
.vp-row button.recording { border-color: var(--color-danger); color: var(--color-danger); font-weight: 600; }
.reset { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--color-action); font-size: var(--text-sm); cursor: pointer; }
.sheet-done { background: var(--color-text); color: var(--color-bg); border: 0; border-radius: var(--radius-pill); padding: 8px 18px; font-weight: 600; cursor: pointer; }

/* During a conversation the setup folds into one line; the goal stays visible in it. */
body.live .controls { display: none; }
body.live.show-setup .controls { display: grid; }