/* The live session, in the browser app (web.html) and the phone companion (mobile.html).
   It looks like the desktop app's panel (renderer/session.css): dark graphite, the app's font, and its red
   Ask AI style for the one action that matters. It stays dark whatever the site theme, since it sits next
   to a call. The answer is the hero: a wide reading column, older answers dimmed, nothing boxed twice.
   mobile.js adds body.in-session while a session runs. */

#session-wrap, body.wa-pip {
  --s-bg: #0E0E11;
  --s-panel: #16161A;
  --s-raised: #1F1F24;
  --s-hover: #2A2A31;
  --s-line: #2A2A30;
  --s-line2: #212126;
  --s-text: #F4F4F5;
  --s-soft: #D4D4D8;
  --s-muted: #A1A1AA;
  --s-faint: #71717A;
  --s-accent: #E11D48;
  --s-accent-hover: #F43F5E;
  --s-accent-soft: rgb(225 29 72 / 0.16);
  --s-accent-fg: #FB7185;
  --s-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: dark;
}
body.in-session { background: #0E0E11; }
body.in-session .cp-top { display: none; }
#session-wrap { background: var(--s-bg); color: var(--s-text); font-family: var(--s-ui); }
#session-wrap button, #session-wrap input { font-family: var(--s-ui); }
#session-wrap :focus-visible { outline: 2px solid var(--s-text); outline-offset: 2px; border-radius: 8px; }

/* ── the one bar at the top ── */
#session-wrap .ss-bar { display: flex; align-items: center; gap: 12px; flex: none; height: 52px; padding-top: env(safe-area-inset-top, 0px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--s-line2); background: var(--s-panel); }
#session-wrap .ss-brand { display: flex; align-items: center; gap: 8px; color: var(--s-text); text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
#session-wrap .ss-brand img { width: 24px; height: 24px; }
#session-wrap .ss-sep { width: 1px; height: 20px; background: var(--s-line); }
#session-wrap .ss-live { display: inline-flex; align-items: center; gap: 8px; color: var(--s-text); font-weight: 600; font-size: 14px; }
#session-wrap .ss-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent); box-shadow: 0 0 0 3px rgb(225 29 72 / 0.25); animation: ss-pulse 1.8s ease-in-out infinite; }
@keyframes ss-pulse { 50% { box-shadow: 0 0 0 6px rgb(225 29 72 / 0); } }
#session-wrap .ss-timer { color: var(--s-text); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
#session-wrap .ss-tag:not(:empty) { padding: 2px 8px; border-radius: 999px; background: var(--s-raised); color: var(--s-muted); font-size: 12px; font-weight: 600; }
#session-wrap .ss-fill { flex: 1; }
#session-wrap .ss-mins { color: var(--s-muted); font-size: 13px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
#session-wrap .ss-mins:hover { color: var(--s-text); }
#session-wrap .ss-ghost { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--s-muted); font-weight: 600; font-size: 13px; cursor: pointer; }
#session-wrap .ss-ghost:hover { background: var(--s-raised); color: var(--s-text); }
#session-wrap .ss-end { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 8px; background: var(--s-accent-soft); color: var(--s-accent-fg); font-weight: 600; font-size: 13px; cursor: pointer; }
#session-wrap .ss-end::before { content: ""; width: 10px; height: 10px; border-radius: 2.5px; background: currentColor; }
#session-wrap .ss-end:hover { background: var(--s-accent); color: #fff; }

/* ── answers: the reading column ── */
#session-wrap .cp-chat { background: transparent; scrollbar-width: thin; scrollbar-color: var(--s-line) transparent; }
#session-wrap .cp-turn { display: grid; gap: 10px; padding: 22px 0 18px; border: 0; border-bottom: 1px solid var(--s-line2); border-radius: 0; background: transparent; transition: opacity 0.2s ease; }
#session-wrap .cp-turn:not(:last-of-type) { opacity: 0.62; }
#session-wrap .cp-turn:not(:last-of-type):hover { opacity: 1; }
#session-wrap .cp-q { color: var(--s-muted); font-size: 14px; line-height: 1.5; }
#session-wrap .cp-q-tag { height: 20px; padding: 0 7px; border-radius: 6px; background: var(--s-raised); color: var(--s-muted); font-family: var(--s-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
#session-wrap .cp-a { color: var(--s-soft); font-size: 17px; line-height: 1.62; }
#session-wrap .cp-a strong { color: #fff; }
#session-wrap .cp-a h1, #session-wrap .cp-a h2, #session-wrap .cp-a h3, #session-wrap .cp-a h4 { color: #fff; }
#session-wrap .cp-a :not(pre) > code { background: var(--s-raised); color: #E4E4E7; }
#session-wrap .cp-a .md-code { border-color: var(--s-line); background: #0A0A0D; }
#session-wrap .cp-a .md-code-head { border-color: var(--s-line2); color: var(--s-faint); }
#session-wrap .cp-a .md-code-copy { border-color: var(--s-line); background: var(--s-raised); color: var(--s-soft); }
#session-wrap .cp-a th, #session-wrap .cp-a td { border-color: var(--s-line); }
#session-wrap .cp-a.streaming::after { background: var(--s-accent); }
#session-wrap .cp-dots i { background: var(--s-faint); }
#session-wrap .cp-turn-foot { color: var(--s-faint); }
#session-wrap .cp-copy { color: var(--s-muted); }
#session-wrap .cp-copy:hover { background: var(--s-raised); color: var(--s-text); }
#session-wrap .cp-copy.copied { color: #34D399; }
/* the question while it is still being asked */
#session-wrap .cp-hearing { margin-top: 18px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--s-panel); box-shadow: inset 3px 0 0 var(--s-accent); color: var(--s-text); }
#session-wrap .cp-hearing small { color: var(--s-accent-fg); }
#session-wrap .cp-hearing small i { background: var(--s-accent); }
#session-wrap .cp-hearing.empty .cp-hearing-text::before { color: var(--s-faint); }
/* nothing asked yet */
#session-wrap .cp-empty { color: var(--s-muted); font-size: 15px; }
#session-wrap .cp-empty b { color: var(--s-text); font-family: var(--s-ui); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
#session-wrap .cp-empty-steps { color: var(--s-faint); }
#session-wrap .cp-empty-steps i { background: #F4F4F5; color: #16161A; }
#session-wrap .cp-empty-steps i.stop { background: var(--s-accent); color: #fff; }

/* ═════ browser app ═════ */
.wa #session-wrap.active { height: 100dvh; }
.wa .ss-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
/* left rail: the tab, and every word it hears */
.wa .ss-rail { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 16px; border-right: 1px solid var(--s-line2); background: var(--s-panel); }
.wa .ss-preview { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px var(--s-line); }
.wa .ss-preview video { display: block; width: 100%; height: 100%; object-fit: contain; }
.wa .ss-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--s-faint); font-size: 13px; }
.wa .ss-preview-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 11.5px; font-weight: 600; }
.wa .ss-hears-head { display: flex; align-items: baseline; gap: 8px; color: var(--s-text); font-weight: 600; font-size: 13px; }
.wa .ss-hears-head span:last-child { margin-left: auto; color: var(--s-faint); font-weight: 500; font-size: 12px; }
.wa .ss-hears { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 10px; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--s-line) transparent; }
.wa .ss-hears .wa-hears-empty { margin: 0; color: var(--s-faint); font-size: 14px; }
.wa .ss-hears .wa-line { margin: 0; padding: 0; color: var(--s-muted); font-size: 14px; line-height: 1.5; box-shadow: none; }
.wa .ss-hears .wa-line span { display: block; margin-bottom: 2px; color: var(--s-faint); font-family: var(--s-ui); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wa .ss-hears .wa-line.is-now { color: var(--s-text); }
.wa .ss-hears .wa-line.is-now span { display: inline-flex; align-items: center; gap: 6px; color: var(--s-accent-fg); }
.wa .ss-hears .wa-line.is-now span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-accent); }
/* right: answers, then the bar */
.wa .ss-main { display: flex; flex-direction: column; min-height: 0; }
.wa .ss-main .cp-chat { flex: 1; min-height: 0; overflow-y: auto; display: block; padding: 8px max(24px, calc((100% - 760px) / 2)) 24px; }
.wa .ss-main .cp-chat.empty { display: flex; }
.wa .ss-main .cp-empty { margin: auto; max-width: 42ch; display: grid; gap: 10px; justify-items: center; text-align: center; line-height: 1.5; }
.wa .ss-keycaps { display: inline-flex; align-items: center; gap: 4px; color: var(--s-faint); font-size: 13px; }
.wa .ss-keycaps kbd { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--s-line); background: var(--s-raised); color: var(--s-soft); font-family: var(--s-ui); font-size: 12px; font-weight: 600; }
.wa .ss-dock { flex: none; padding: 0 max(24px, calc((100% - 760px) / 2)) 18px; }
.wa .ss-tools { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-panel); box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.7); }
.wa .ss-auto { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 8px; border-radius: 10px; color: var(--s-muted); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wa .ss-auto:hover { background: var(--s-raised); }
.wa .ss-auto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa .ss-track { width: 28px; height: 16px; padding: 2px; display: flex; border-radius: 999px; background: #4A4A52; transition: background 0.15s ease; }
.wa .ss-track::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.wa .ss-auto input:checked + .ss-track { background: var(--s-accent); }
.wa .ss-auto input:checked + .ss-track::after { transform: translateX(12px); }
.wa .ss-auto input:checked ~ .ss-auto-label { color: var(--s-soft); }
.wa .ss-auto input:focus-visible + .ss-track { outline: 2px solid var(--s-text); outline-offset: 2px; }
.wa .ss-type { flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 4px 0 12px; border-radius: 10px; background: var(--s-raised); }
.wa .ss-type:focus-within { box-shadow: 0 0 0 1px var(--s-accent); }
.wa .ss-type input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--s-text); font-size: 15px; outline: none; }
.wa .ss-type input::placeholder { color: var(--s-faint); }
.wa .ss-send { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--s-muted); cursor: pointer; }
.wa .ss-send:hover { background: var(--s-hover); color: var(--s-text); }
.wa .ss-send svg { width: 16px; height: 16px; }
.wa .ss-send:disabled { opacity: 0.5; }
.wa .ss-tool { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--s-raised); color: var(--s-soft); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.wa .ss-tool:hover { background: var(--s-hover); color: var(--s-text); }
.wa .ss-tool:disabled { opacity: 0.55; cursor: progress; }
.wa .ss-tool svg { width: 16px; height: 16px; }
.wa .ss-ask { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 16px; border: 0; border-radius: 999px; background: var(--s-accent); color: #fff; font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, transform 0.12s ease; }
.wa .ss-ask:hover { background: var(--s-accent-hover); }
.wa .ss-ask:active { transform: scale(0.97); }
.wa .ss-ask:disabled { opacity: 0.7; cursor: progress; }
.wa .ss-ask-c { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--s-accent); }
.wa .ss-ask-c svg { width: 15px; height: 15px; }
.wa .ss-under { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 0 6px; color: var(--s-faint); font-size: 12px; }
@media (max-width: 900px) {
  .wa #session-wrap.active { height: auto; min-height: 100dvh; }
  .wa .ss-grid { grid-template-columns: minmax(0, 1fr); }
  .wa .ss-rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--s-line2); }
  .wa .ss-preview { width: 40%; align-self: flex-start; }
  .wa .ss-rail > :not(.ss-preview) { min-width: 0; }
  .wa .ss-hears-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; max-height: 190px; }
  .wa .ss-main .cp-chat { min-height: 50dvh; }
  .wa .ss-tools { flex-wrap: wrap; }
  .wa .ss-type { order: -1; flex-basis: 100%; }
  .wa .ss-ask { margin-left: auto; }
  .wa .ss-under { display: none; }
}
.wa .ss-hears-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
/* floated into its own window (Document Picture-in-Picture): answers only */
body.wa-pip { margin: 0; background: #0E0E11; }
body.wa-pip #session-wrap { display: flex; height: 100vh; }
body.wa-pip .ss-grid { grid-template-columns: minmax(0, 1fr); }
body.wa-pip .ss-rail { display: none; }

/* ═════ phone companion ═════ */
.cp:not(.wa) #session-wrap.active { min-height: 100dvh; }
.cp:not(.wa) #session-wrap .ss-bar { gap: 10px; }
.cp:not(.wa) #session-wrap .ss-brand span { display: none; }
#session-wrap .cp-heard { border-color: var(--s-line2); background: var(--s-panel); color: var(--s-faint); }
#session-wrap .cp-heard.on { color: var(--s-muted); }
#session-wrap .cp-heard i { background: var(--s-faint); }
#session-wrap .cp-heard.sound i { background: var(--s-accent); }
#session-wrap .cp-heard.on i { background: var(--s-accent); box-shadow: 0 0 0 3px rgb(225 29 72 / 0.22); }
.cp:not(.wa) #session-wrap .cp-chat { display: block; padding-top: 4px; }
.cp:not(.wa) #session-wrap .cp-chat.empty { display: flex; }
#session-wrap .cp-dock { background: linear-gradient(to bottom, rgb(14 14 17 / 0), var(--s-bg) 30%); }
#session-wrap .cp-side { color: var(--s-muted); }
/* the tap button: white to start, red while the question is open */
#session-wrap .cp-mic { background: #F4F4F5; color: #16161A; box-shadow: 0 14px 34px -12px rgb(0 0 0 / 0.8); }
#session-wrap .cp-mic.recording { background: var(--s-accent); color: #fff; box-shadow: 0 0 0 0 rgb(225 29 72 / 0.5); animation: ss-ring 1.5s ease-out infinite; }
@keyframes ss-ring { 70%, 100% { box-shadow: 0 0 0 18px rgb(225 29 72 / 0); } }
#session-wrap .cp-mic.thinking { background: var(--s-raised); color: var(--s-text); }
#session-wrap .cp-mic .mic-spin { border-color: var(--s-line); border-top-color: var(--s-accent); }
#session-wrap .cp-mic-label { color: var(--s-text); }

@media (prefers-reduced-motion: reduce) { #session-wrap .ss-live i, #session-wrap .cp-mic.recording { animation: none; } }

/* the Mic button: the user's own voice, off until pressed */
.wa .ss-voice.on { background: rgb(225 29 72 / 0.16); color: var(--s-accent-fg); box-shadow: inset 0 0 0 1px rgb(225 29 72 / 0.5), 0 0 0 calc(var(--lvl, 0) * 5px) rgb(225 29 72 / 0.22); }
.wa .ss-voice.starting { opacity: 0.6; cursor: progress; }
.wa .ss-hears .wa-line.is-you span { color: var(--s-accent-fg); }
/* browser app on a narrow screen: the top bar keeps Live, the timer, minutes, Clear and End in view */
@media (max-width: 560px) {
  .wa #session-wrap .ss-bar { gap: 8px; }
  .wa #session-wrap .ss-brand span, .wa #session-wrap .ss-sep { display: none; }
  .wa #session-wrap .ss-ghost, .wa #session-wrap .ss-end { padding-left: 9px; padding-right: 9px; }
}