/* ---------- before a conversation: Babble opens the thread, at the bottom, by the thumb ---------- */
body[data-mode="assist"]:not(.live):not(.done) .controls { flex: 1; display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow-y: auto; } /* the setup chat scrolls; the controls at the bottom stay in view */
body[data-mode="assist"]:not(.live):not(.done) .controls > * { flex-shrink: 0; }
#setup:has(.opener) .promise { display: none; } /* "tap Start: I'll say this" says it already */
body[data-mode="assist"]:not(.live):not(.done) #intro { margin-top: 0; } /* the hero above takes the free space */
body[data-mode="assist"]:not(.live):not(.done) main { flex: 0 0 auto; min-height: 0; padding: 0; }
.intro, .goal-ideas, .promise { display: none; }
body[data-mode="assist"]:not(.live):not(.done) .intro { display: block; }
body[data-mode="assist"]:not(.live):not(.done) .goal-ideas { display: flex; }
body[data-mode="assist"]:not(.live):not(.done) .promise { display: block; }
/* Babble's bubble, with its cursive initial as the avatar. */
.welcome { position: relative; align-self: flex-start; margin: 0; margin-inline-start: 38px; max-width: 84%; padding: 10px 15px; background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-l); border-end-start-radius: var(--radius-xs); font-size: var(--text-xl); line-height: 1.4; }
.welcome::before { content: "B"; position: absolute; inset-inline-start: -38px; bottom: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius-round); background: var(--color-action); color: var(--color-accent); font: var(--text-3xl)/1 var(--font-script); padding-top: 3px; }
/* Your answer: dotted while it's being written, solid pistachio once it's there. */
body[data-mode="assist"]:not(.live) .goal-field { align-self: flex-end; width: 84%; }
body[data-mode="assist"]:not(.live) .goal-label-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body[data-mode="assist"]:not(.live) .goal { border: 2px dotted rgb(var(--rgb-action) / .5); background: transparent; border-radius: var(--radius-l);
  border-end-end-radius: var(--radius-xs); padding: 12px 15px; font-size: var(--text-xl); transition: background .2s, border-color .2s; }
body[data-mode="assist"]:not(.live) .goal::placeholder { color: var(--color-text-muted); font-weight: 400; }
body[data-mode="assist"]:not(.live) .goal:not(:placeholder-shown) { border-style: solid; border-color: transparent; background: var(--color-bubble-me); }
body[data-mode="assist"]:not(.live) .goal:focus { outline: none; border-color: var(--color-action); }
/* Quick ideas, like a messaging app's suggested replies. */
.goal-ideas { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.goal-ideas button { background: none; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); padding: 7px 13px; font-size: var(--text-md);
  color: var(--color-text); cursor: pointer; }
.goal-ideas button.on { background: var(--color-bubble-me); border-color: transparent; }
.promise { margin: 2px 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.you-said { align-self: flex-end; max-width: 84%; margin: 0; padding: 10px 15px; background: var(--color-bubble-me); border-radius: var(--radius-l);
  border-end-end-radius: var(--radius-xs); font-size: var(--text-xl); font-weight: 600; }
.intro.thread { display: none; flex-direction: column; gap: 8px; }
body[data-mode="assist"]:not(.live):not(.done) .intro.thread { display: flex; }
body[data-mode="assist"]:not(.live):not(.done) .goal-field { display: none; } /* the thread asks for the goal instead */
/* The opener: a reply Babble wrote for you to start with; tap it to start and say it. */
.intro .draft.opener { display: grid; align-self: flex-end; }
.welcome.typing, .you-said.typing { color: var(--color-text-muted); animation: breathe 1.4s ease-in-out infinite; }
/* The goal, once set, rises to the top as the conversation's subject. */
body[data-mode="assist"]:not(.live):not(.done) header { order: -2; }
body[data-mode="assist"]:not(.live):not(.done) #assist-panel { order: -1; }
/* Before a conversation the round mic is a wide Start button, and under it a message box to Babble. */
.brief { display: flex; align-items: center; gap: 8px; background: var(--color-surface);
  border-radius: var(--radius-pill); padding: 5px; padding-inline-start: 18px; }
.brief input { flex: 1; min-width: 0; border: 0; background: none; font-size: var(--text-base); padding: 10px 0; color: var(--color-text); }
.brief input:focus { outline: none; }
.brief-mic { width: 52px; height: 52px; flex: none; border-radius: var(--radius-round); border: 0; background: var(--color-action); color: var(--color-accent);
  display: grid; place-items: center; cursor: pointer; }
.brief-mic svg { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.brief.recording .brief-mic { background: var(--color-danger); color: var(--color-on-action); box-shadow: 0 0 0 calc(var(--level, 0) * 10px) rgb(var(--rgb-danger) / .25); }
body[data-mode="assist"]:not(.live):not(.done) .mic-row { display: block; background: none; padding: 0; }
body[data-mode="assist"]:not(.live):not(.done) .mic-row > :not(#handsfree) { display: none; }
body[data-mode="assist"]:not(.live):not(.done) #handsfree { width: 100%; height: 56px; border-radius: var(--radius-pill); background: var(--color-accent);
  color: var(--color-on-accent); font-size: var(--text-xl); font-weight: 700; }
body[data-mode="assist"]:not(.live):not(.done) #handsfree svg { display: none; }
/* Waiting for the introduction in their language (setup.js startLabel): visibly not ready yet. */
body[data-mode="assist"]:not(.live):not(.done) #handsfree:disabled { opacity: .55; cursor: progress; font-weight: 500; }
/* One primary action: Start, labelled with what it will do (data-label: "Start: I'll introduce you in Hindi",
   "Start: say this"). The message box to Babble only shows when you ask for it ("Tell Babble": body[data-setup=brief]). */
body[data-mode="assist"]:not(.live):not(.done) #handsfree::after { content: attr(data-label); }
body:not(.live):not(.done) .promise { display: none !important; } /* Start's label says what happens */
/* The hero: the language pair, large, in the space above the chat. */