/* ══════════════════════════════════════════════════════════════════════════
   STARKOS — THE ONBOARDING CONVERSATION
   ONBOARD ROW 2. MASTER-PLAN-2 section 9 ROW 2.
   ══════════════════════════════════════════════════════════════════════════

   The front door for a new account. `js/onboard-talk.js` builds it; this is
   what it looks like. It is a full screen, not a sheet: the sheet VOICE ROW 1
   built was a modal a man opened from a form, and this is the thing he lands
   on.

   ONBOARD ROW 3 took the sheet's two doors and then the sheet itself, so what
   was in `css/voice.css` and had nowhere else to live is here: the
   microphone and its ring, the live transcript, the sentence naming whose
   recogniser it is, and the button on the form that opens this screen.

   THE CHARACTER IS THE ONLY PLAYFUL THING HERE and it is above the fold, in a
   fixed area. Everything else on this screen obeys the cold design law: matte
   black, white primary text, steel secondary, 18px radius, the accent only on
   a tapped state.

   MOTION: transform and opacity only, durations and easings from
   css/tokens.css. The character's own five states are css/character.css's and
   are not repeated here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ WHILE THE CONVERSATION IS UP, THE FORM'S OWN CHROME IS NOT ═══════════
   The questionnaire carries two fixed overlays of its own and BOTH were drawn
   on top of the conversation on the first real walk. The screenshot is why it
   was caught: `.pinned-header` is z-index 50 against this screen's 40, and it
   sat across the top of the page CUTTING THE CHARACTER'S HEAD OFF, with the
   form's own "1 / 35" counter over a conversation that has no numbered steps.
   Every assertion in that run was green.

   So it is fixed twice, and both locks are here on purpose. The z-index puts
   the conversation above them; the two rules below remove them anyway, because
   a progress counter and a Continue button belong to the form and mean nothing
   during a conversation. `.resume-gate` is z-index 60 and is deliberately left
   ABOVE this screen: a man being asked whether to resume a draft is being asked
   something that has to be answered first.

   And the questionnaire underneath does not scroll: two scrollers stacked is
   the failure where a man drags the conversation and the form moves behind it. */
html.talk-open,
html.talk-open body { overflow: hidden; }
html.talk-open .pinned-header,
html.talk-open .nav-bar { display: none; }

.talk {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--bg, #040404);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the iPhone's home indicator, and the keyboard when it is up */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── THE STAGE · the character and what it just said ─────────────────────
   A FIXED HEIGHT, on purpose. MASTER-PLAN-2 asks for "the character top centre
   in a fixed area", and the reason is that the log below it grows with every
   answer: an area that sized itself to its contents would walk the character
   down the screen as a man worked, and he would stop looking at it. */
.talk-stage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* THE NOTCH. The questionnaire's own header carried this inset and the
     conversation replaces that header, so it has to carry it too: measured on
     the walk's screenshot, the character's top edge was 43 px down a 390 screen
     and an iPhone with a notch would have taken a bite out of its head. */
  padding: calc(env(safe-area-inset-top) + 18px) 20px 16px;
}

.talk-char {
  height: 124px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── THE SPEECH BUBBLE ───────────────────────────────────────────────────
   No tail and no cartoon outline: the character is the playful thing, the
   words are not. A card, at the product's own radius, with the product's own
   border. */
.talk-bubble {
  width: 100%;
  max-width: 340px;
  min-height: 76px;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 18px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.talk-bubble-text {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: #fff;
}

/* where js/waiting.js puts the three dots while it writes */
.talk-bubble-wait { min-height: 0; }

/* ── HIS TURNS ───────────────────────────────────────────────────────────
   Below the stage, newest last, right aligned so the column reads as his
   side of the conversation without needing a label on every line. */
.talk-log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 20px 12px;
  align-items: flex-end;
}

.talk-line { max-width: 84%; }

.talk-said {
  margin: 0;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  text-align: left;
}

/* A turn that did not go through. His words are still on the screen and still
   his to send again; they are just visibly not counted. */
.talk-unsent .talk-said {
  opacity: 0.45;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.talk-msg {
  margin: 0 20px 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #ff4d4d;
}

/* ── THE BAR ─────────────────────────────────────────────────────────────
   Docked to the foot in normal flow rather than positioned over the log, so
   it can never cover the last thing he said. */
.talk-bar {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  padding: 10px 20px 14px;
  background: var(--bg, #040404);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── THE TAPPABLE OPTIONS ────────────────────────────────────────────────
   The next field's own choices, from the questionnaire's closed catalogue.
   They scroll sideways rather than wrapping to three rows and pushing the
   input off a small screen.

   ONBOARD ROW 5 put a line above them naming the field they answer, because
   the model is free to ask an optional question first and three buttons
   reading Lean, Athletic, Big under "What time do you wake up?" read as an
   assistant that is not listening. Chrome: no hue, and the label comes off the
   same catalogue the chips do, so the two can never disagree. */
.talk-chips-label {
  padding: 0 4px 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.talk-chips-label[hidden] { display: none; }

.talk-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
  margin: 0 -20px 0;
  padding-left: 20px;
  padding-right: 20px;
}
.talk-chips::-webkit-scrollbar { display: none; }
.talk-chips[hidden] { display: none; }

.talk-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.talk-chip:active {
  transform: scale(0.96);
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── THE INPUT ROW · back, the field, send ───────────────────────────── */
.talk-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.talk-icon-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.talk-icon-btn:active { transform: scale(0.96); }
.talk-icon-btn:disabled { opacity: 0.35; cursor: default; }

#talkInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #161616;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  /* 16px is the floor. Under it, iOS Safari zooms the whole page on focus and
     a man loses the character off the top of his screen. */
  font-size: 16px;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
#talkInput:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-tint);
}
#talkInput::placeholder { color: #9ca3af; }

/* Neutralise Safari's autofill yellow, which reads as a browser artefact
   rather than as a state we chose. */
#talkInput:-webkit-autofill,
#talkInput:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #161616 inset;
  -webkit-text-fill-color: #fff;
}

/* ── SKIP, CHECK MY ANSWERS, AND ROW 3's WAY BACK TO THE FORM ──────────
   Three quiet controls on one line at 390, measured rather than assumed, and
   allowed to wrap rather than to shrink: a control under 44px is not a
   control anybody can tap. */
.talk-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 10px;
  min-height: 44px;
}

.talk-quiet {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #9ca3af;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.talk-quiet:active { transform: scale(0.96); color: #fff; }
.talk-quiet:disabled { opacity: 0.35; cursor: default; }
.talk-quiet[hidden] { display: none; }

/* ── THE SUMMARY ─────────────────────────────────────────────────────────
   VOICE ROW 1's confirm list: every field it filled, grouped under the
   heading he would find it under on the form, his own words beside each one,
   and a control to strike it. It covers the conversation rather than
   replacing it, so "Keep talking" is a close and not a rebuild. */
.talk-review {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  background: var(--bg, #040404);
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.talk-review[hidden] { display: none; }

.talk-review-title {
  margin: 0 0 6px;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
}
.talk-review-title:focus { outline: none; }

.talk-review-sub {
  margin: 0 0 20px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #9ca3af;
}

.talk-group { margin-bottom: 22px; }

.talk-group-title {
  margin-bottom: 10px;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.talk-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 18px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.talk-field-body { flex: 1 1 auto; min-width: 0; }

.talk-field-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  color: #9ca3af;
}

.talk-field-value {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  color: #fff;
  margin-top: 2px;
}

.talk-field-quote {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #9ca3af;
  margin-top: 6px;
}

.talk-strike { width: 36px; height: 36px; }

.talk-review-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 8px;
}

.talk-save {
  min-height: 52px;
  border-radius: 18px;
  border: 0;
  background: #fff;
  color: #040404;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.talk-save:active { transform: scale(0.97); }
.talk-save:disabled { opacity: 0.35; cursor: default; }

/* ── THE MICROPHONE · MOVED OUT BY DICTATE ROW 2 ─────────────────────────
   Everything that made the microphone look like a microphone is now
   css/mic.css, which BOTH screens that carry one link: this conversation and
   the chat bar in dashboard.html. ONBOARD ROW 3's rules lived here and the
   chat bar had none, so the day the same control landed on both, one of them
   was going to drift. Gone from here with their state: `.talk-mic`,
   `.talk-ring`, `.talk.is-listening` and the `talkRing` keyframes.

   `.talk-mic` SURVIVES AS A POSITION AND NOTHING ELSE. js/mic.js takes a
   `cls`, and this screen passes `talk-mic` so the button can be placed in a
   row that is not the chat bar's. It carries no size, no border and no colour:
   those are .mic's, once.

   REMOVED WITH THEM: `.talk-live`, the running transcript. A recording is
   transcribed in one request after he stops, so there is nothing to show
   word by word, and MASTER-PLAN-2-APPENDIX B.9 says the button shows the level
   and no words. */
/* A PILL IN THIS ROW, BECAUSE THE ROW IS PILLS. `.talk-icon-btn` is 44px at
   `border-radius: 100px` and Back and Send are both one, so the shared
   microphone's 18px corner sat between two circles as a rounded square. The
   assertions were all green and the 390px screenshot was obviously wrong,
   which is the class of defect CLAUDE.md names; it was found in the image.
   The chat bar's own buttons are 18px squares, so this belongs HERE, scoped to
   the row, and not in css/mic.css. The ring follows the button or it is a
   square halo round a circle. A fully rounded control is exempt from the
   concentric corner rule: its radius is capped at half its height. */
.talk-row .mic,
.talk-row .mic .mic-ring { border-radius: 100px; }
.talk-row .mic { border-color: rgba(255, 255, 255, 0.14); }

/* FINISH ROW 4's sentence. Chrome, so no hue, and small: it is a fact he
   needs before he taps the microphone, not a heading. */
.talk-privacy {
  margin: 10px 0 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* ── THE BUTTON ON THE FORM THAT OPENS THIS SCREEN ───────────────────────
   "Talk it through instead", on the questionnaire's first question. It was
   `.voice-open-btn` in css/voice.css and it opened the sheet; ONBOARD ROW 3
   made it the way BACK from the form to this conversation, which is the
   second half of the plan's "switches to the existing form and back". */
.talk-open-btn {
  margin-top: 18px;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-control);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.talk-open-btn:active { transform: scale(0.96); }
.talk-open-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── REDUCED MOTION ──────────────────────────────────────────────────────
   Every transition above is already tokenised, and css/tokens.css collapses
   the three duration tokens to 0.01ms under this query, so the presses stop
   on their own. The character's own states are switched off in
   css/character.css, which is the file that owns them. This block exists for
   the one thing tokens cannot reach: a transform that is mid-flight when the
   preference changes. */
@media (prefers-reduced-motion: reduce) {
  .talk-chip,
  .talk-icon-btn,
  .talk-quiet,
  .talk-save,
  .talk-open-btn,
  #talkInput { transition: none; }
}