/* live.css - Talk live with Lola (#/talk, js/screens/talk.js). Phone first and full height: Lola and what is
   happening at the top, the words in the middle (they scroll, newest at the bottom), the big Start/End
   button with the microphone meter and the volume at the bottom, under the thumb. The call fills the
   screen at least (min-height): a note that appears makes the page longer, never squeezes Start off it, and
   the controls stay pinned to the foot of the screen, on a phone above the tab bar (and the offline note,
   --below, set by talk.js); above 720 px the offline note is at the top and the page starts under it (--above). From
   900 px, and on a phone held sideways, the call sits on the left and the words on the right. Toasts show at
   the top of the screen here, clear of the controls. Colours only through the tokens in app.css; nothing
   wider than the screen at 320 px; every control at least 44 px to tap. */
body.live-on .tutor { display: none; }
body.live-on #toasts { top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px); bottom: auto; }

.live { --face: clamp(56px, 12dvh, 132px); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(110px, 1fr) auto; grid-template-areas: "top" "stage" "talk" "controls";
  min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 46px); }
.live-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-width: 0; }
.live-top h1 { margin: 0; font-size: 22px; }
.live-left { font-variant-numeric: tabular-nums; }

.live-stage { grid-area: stage; display: grid; justify-items: center; text-align: center; gap: 4px; min-width: 0; }
.live-face { height: var(--face); aspect-ratio: 120 / 150; transition: transform .08s linear; }
.live-face svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(40, 28, 16, .18)); }
.live-face svg .bob { animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.live-face.talk svg .beak-low { animation: talk .22s ease-in-out infinite alternate; }
.live-status { margin: 2px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; min-height: 1.3em; }
.live-line { margin: 0; overflow-wrap: anywhere; }
/* Tall enough to tap (44 px) without making its line taller. */
.live-change { display: inline-block; padding: 12px 4px; margin: -12px 0; font-weight: 600; }
.live-note { width: 100%; max-width: 560px; margin-top: 4px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--fg); font-size: 14px; text-align: left; }
.live-note.info { background: var(--accent-2-soft); }
.live-note p { margin: 0; }
.live-note a, .live-note .link { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; font-weight: 600; }

/* The words: as tall as the call leaves room for (their own length never sets it: contain), scrolling inside. */
.live-talk { grid-area: talk; contain: size; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.live-empty { color: var(--fg); max-width: 520px; margin: 0 auto; padding: 4px 2px; }
.live-empty p { margin: 0 0 8px; }
.live-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.live-lines li { max-width: 88%; padding: 9px 14px 10px; border-radius: 16px; line-height: 1.45; overflow-wrap: anywhere; animation: rise .18s ease-out; }
.live-lines .line-lola { justify-self: start; background: var(--sunk); border-bottom-left-radius: 4px; }
.live-lines .line-me { justify-self: end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.live-lines .line-who { display: block; font-size: 12px; font-weight: 650; color: var(--mute); margin-bottom: 1px; }
.live-after { display: flex; justify-content: center; padding-top: 14px; }
/* Saved: said at full contrast, as done, not as a dimmed button. */
#lv-save[data-done], #lv-save[data-done]:hover { opacity: 1; filter: none; background: var(--good-soft); color: var(--good); border-color: transparent; cursor: default; }

/* Pinned to the foot of the screen (above the tab bar on a phone), so a long page never hides Start. */
.live-controls { grid-area: controls; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 4px 2px 2px; min-width: 0;
  position: sticky; bottom: env(safe-area-inset-bottom); z-index: 2; background: var(--bg); }
.live-go { position: relative; width: 84px; height: 84px; min-height: 0; padding: 0; border-radius: 50%; border: 0; flex-direction: column; gap: 2px;
  background: var(--accent-2); color: var(--panel); font-size: 14px; box-shadow: var(--shadow); }
.live-go:hover { border: 0; filter: brightness(1.06); }
.live-go:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 5px; border-radius: 50%; }
.live-go > svg { width: 30px; height: 30px; }
.live-go.on { background: var(--bad); }
.live-go.on:focus-visible { outline-color: var(--bad); }
.live-go .spinner { display: none; position: absolute; inset: -7px; width: auto; height: auto; border-width: 3px; border-color: transparent; border-top-color: var(--accent-2); }
.live[data-phase=connecting] .live-go { background: var(--sunk); color: var(--fg); }
.live[data-phase=connecting] .live-go .spinner { display: block; }
.live-levels { display: grid; gap: 4px; min-width: 0; }
/* Start/End and, during a call, Mute beside it (a phone call's pair): the slashed microphone and its word;
   pressed, it fills with ink and says Muted. */
.live-btns { display: flex; align-items: center; gap: 14px; }
.live-mute { position: relative; width: 62px; height: 62px; min-height: 0; padding: 0; border-radius: 50%; flex: none; flex-direction: column; gap: 2px; font-size: 12.5px; }
.live-mute > svg { width: 22px; height: 22px; }
.live-mute[aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) { .live-mute:hover { background: var(--sunk); border-color: var(--field); } .live-mute[aria-pressed=true]:hover { background: var(--fg); border-color: var(--fg); filter: brightness(1.15); } }
.live-mute:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; border-radius: 50%; }
.live-mic, .live-vol { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 3em; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 500; }
.live-bar { height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.live-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-2); transition: width .08s linear; }
.live-vol input { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent); background: transparent; }
.live-vol output { text-align: right; }

/* Phones: the page's own padding gives the call the whole height above the tab bar, and the controls stay
   pinned just above the tab bar (and the offline note) however long the page grows. */
@media (max-width: 720px) {
  .page.talk-page { padding: 10px var(--gut-r, 14px) calc(70px + var(--below, 0px) + env(safe-area-inset-bottom)) var(--gut-l, 14px); }
  .live { min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 84px - var(--below, 0px) - env(safe-area-inset-bottom)); gap: 8px; }
  .live-controls { bottom: calc(60px + var(--below, 0px) + env(safe-area-inset-bottom)); padding: 6px 2px; }
  /* Pinned, nothing of the page shows between them and the tab bar. */
  .live-controls::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 64px; background: var(--bg); pointer-events: none; }
  .live-top h1 { font-size: 19px; }
  .live-status { font-size: 18px; }
}
@media (max-width: 360px) {
  .live-go { width: 76px; height: 76px; }
  .live-mic, .live-vol { grid-template-columns: 3.9em minmax(0, 1fr) 2.6em; gap: 6px; }
  .live-btns { gap: 10px; }
  .live-mute { width: 54px; height: 54px; }
  .live-controls:has(.live-mute:not([hidden])) { gap: 10px; }
  .live-controls:has(.live-mute:not([hidden])) .live-mic, .live-controls:has(.live-mute:not([hidden])) .live-vol { grid-template-columns: 3.3em minmax(0, 1fr) 2.4em; font-size: 13px; }
}
/* Above 720 px, with no connection, the room the offline note takes at the top of the page (--above). */
@media (min-width: 721px) {
  .page.talk-page { padding-top: calc(28px + var(--above, 0px)); }
  .live { min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 46px - var(--above, 0px)); }
}
/* Wide: the call on the left, the words on the right. */
@media (min-width: 900px) {
  .live { --face: 170px; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "top talk" "stage talk" "controls talk"; column-gap: 28px; row-gap: 14px; min-height: max(460px, calc(100dvh - var(--bar-h) - 90px - var(--above, 0px))); }
  .live-stage { align-content: center; }
  .live-talk { padding: 20px; }
  .live-controls { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .live-go { width: 104px; height: 104px; font-size: 15px; }
  .live-levels { width: 100%; max-width: 340px; }
}
/* A phone held sideways (short and wide): the call in a narrow column beside the words, Lola smaller, the
   heading for screen readers only (the minutes stay), so Start and End are on the first screen. (560 px wide
   or more: an upright phone with the keyboard up is wider than tall too, and keeps its own layout.) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .live { --face: clamp(44px, 15dvh, 72px); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "top talk" "stage talk" "controls talk"; column-gap: 16px; row-gap: 6px; }
  .live-top { justify-content: center; }
  .live-top h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .live-stage { gap: 2px; align-content: center; }
  .live-status { font-size: 17px; margin: 0; }
  .live-talk { padding: 12px 14px; }
  .live-controls { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; gap: 12px; padding: 4px 2px; }
  .live-go { width: 64px; height: 64px; font-size: 13px; }
  .live-go > svg { width: 24px; height: 24px; }
  .live-mute { width: 52px; height: 52px; }
  .live-btns { gap: 10px; }
  .live-levels { max-width: none; gap: 0; }
  .live-mic { min-height: 24px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 721px) {
  .page.talk-page { padding-top: calc(8px + var(--above, 0px)); }
  .live { min-height: calc(100dvh - var(--bar-h) - env(safe-area-inset-top) - 24px - var(--above, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .live-face, .live-bar i { transition: none; }
  .live-face svg .bob, .live-face.talk svg .beak-low, .live-lines li { animation: none; }
}

/* The Talk live card on the Speak page (js/screens/speak.js). */
.live-card { display: flex; align-items: center; gap: 14px; min-height: 68px; margin: -4px 0 18px; padding: 12px 16px; border-radius: var(--r); background: var(--accent-2-soft);
  color: var(--fg); text-decoration: none; border: 1.5px solid transparent; }
.live-card:hover { border-color: var(--accent-2); }
.live-card b { display: block; font-size: 16px; }
.live-card small { display: block; color: var(--mute); font-size: 13.5px; line-height: 1.35; }
.live-card-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-2); color: var(--panel); flex: none; }
.live-card-ic svg { width: 22px; height: 22px; }
.live-card-go { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent-2); color: var(--panel); font-weight: 650; }
@media (max-width: 420px) { .live-card-go { display: none; } }

/* The Admin page's Talk live panel (js/screens/owner-live.js): its switch is a full-size target. */
.own-live .switch { min-height: 44px; }