:root {
  --bg: #F6F7F9;
  --panel: #FFFFFF;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E4E7EC;
  /* the floating pills, after Safari's toolbar: a see-through step off the page colour, a hairline edge */
  --pill: rgba(255, 255, 255, .74);
  --glass: rgba(255, 255, 255, .86);          /* popovers: glass, but dense enough to read a list on */
  --glass-hi: rgba(255, 255, 255, .7);        /* the light catch along a glass edge */
  --pill-edge: rgba(15, 23, 42, .1);
  --pill-active: rgba(15, 23, 42, .08);      /* the arrow's filled cell */
  --hover: #F1F3F6;
  --accent: #4F46E5;
  --accent-ink: #FFFFFF;
  --accent-soft: #EEF0FF;
  --accent-line: #D9DCFB;
  --live: #E11D48;
  --live-soft: #FFE4EA;
  --src-ink: #556274;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-pop: 0 4px 12px rgba(15, 23, 42, .08), 0 18px 48px rgba(15, 23, 42, .16);
  --fs: 17px;
  color-scheme: light dark;
}
/* dark: by the device's setting (theme "auto") or chosen in the menu (static/theme.js sets data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0F17;
    --panel: #141A24;
    --ink: #E6E9EF;
    --muted: #8B95A7;
    --line: #232B38;
    --pill: rgba(38, 43, 53, .74);
    --glass: rgba(30, 35, 45, .86);
    --glass-hi: rgba(255, 255, 255, .08);
    --pill-edge: rgba(255, 255, 255, .12);
    --pill-active: rgba(0, 0, 0, .38);
    --hover: #1C2330;
    --accent: #818CF8;
    --accent-ink: #0B0F17;
    --accent-soft: #1D2240;
    --accent-line: #2E3566;
    --live: #FB7185;
    --live-soft: #3A1621;
    --src-ink: #9AA4B4;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-pop: 0 4px 12px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #0B0F17;
  --panel: #141A24;
  --ink: #E6E9EF;
  --muted: #8B95A7;
  --line: #232B38;
  --pill: rgba(38, 43, 53, .74);
  --glass: rgba(30, 35, 45, .86);
  --glass-hi: rgba(255, 255, 255, .08);
  --pill-edge: rgba(255, 255, 255, .12);
  --pill-active: rgba(0, 0, 0, .38);
  --hover: #1C2330;
  --accent: #818CF8;
  --accent-ink: #0B0F17;
  --accent-soft: #1D2240;
  --accent-line: #2E3566;
  --live: #FB7185;
  --live-soft: #3A1621;
  --src-ink: #9AA4B4;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, select, input, textarea { font: inherit; color: inherit; }
button { -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 10px;
  padding: 8px 14px; cursor: pointer; text-decoration: none; color: var(--ink);
}
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.big { padding: 12px 28px; font-size: 16px; font-weight: 600; }
select {
  border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 7px 10px; max-width: 100%;
}

.flag {
  display: block; width: 24px; height: 16px; border-radius: 3px; object-fit: cover; flex: none;
  outline: 1px solid rgba(15, 23, 42, .12); outline-offset: -1px;
}
.flag.sm { width: 18px; height: 12px; border-radius: 2px; }

/* ---------- sign-in ---------- */
body.signin { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.signin-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 40px 32px; max-width: 360px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.signin-card h1 { margin: 8px 0 0; font-size: 28px; }
.signin-card h2 { margin: 4px 0 0; font-size: 17px; font-weight: 500; color: var(--muted); }
.signin-card p { margin: 4px 0; }
.signin-card .btn { margin-top: 28px; }
/* home: name in the middle, the language and the sign-in button at the bottom (the thumb's reach on a phone) */
.signin-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.signin-actions { width: 100%; margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.signin-actions .btn { margin: 0; width: 100%; height: 52px; border-radius: 14px; font-size: 17px; }
@media (max-width: 600px) {
  body.signin:has(.home) { display: block; padding: 0; }
  .signin-card.home {
    max-width: none; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; background: var(--bg);
    padding: calc(24px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
  }
  .signin-card.home .signin-hero { flex: 1; justify-content: center; }
  /* one-handed reach: the button sits around 70% of the screen height, the language well above it */
  .signin-card.home .signin-actions { margin-top: 0; margin-bottom: max(16px, 15vh); margin-bottom: max(16px, 15dvh); gap: 44px; }
}
.lang-drop {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 999px; background: transparent;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  font-size: 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.lang-drop:hover, .lang-drop[aria-expanded="true"] { background: var(--hover); color: var(--ink); border-color: var(--line); }


/* ---------- interpreter layout ---------- */
/* --vvh is the visible height (keyboard excluded), kept by app.js: iOS doesn't shrink the page for the keyboard */
html:has(body.interp) { overflow: hidden; overscroll-behavior: none; }
body.interp { height: 100vh; height: var(--vvh, 100dvh); display: flex; flex-direction: column; overflow: hidden; position: relative; }
body.interp.kb .dock { padding-bottom: 8px; }   /* the keyboard covers the home indicator */

/* the space above the pills; a home-screen app on a touch screen gets more, as iPadOS lays its own blur over the top
   of the window. A desktop app window (Chrome, Edge) has its own title bar above and keeps the browser's gap */
body.interp { --top-gap: 10px; }
@media (display-mode: standalone) and (any-pointer: coarse) { body.interp { --top-gap: 30px; } }

/* no bar: the language pair and the menu float over the transcript, which scrolls on beneath them; taps between
   them reach the lines */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 10px 16px; padding-top: calc(var(--top-gap) + env(safe-area-inset-top));
}
/* no brand in the corner: the pair keeps the middle column, the menu the right one */
.top > .pair { grid-column: 2; }
.top > #menu-btn { grid-column: 3; }
.top > * { pointer-events: auto; }
/* glass, for everything that floats over the transcript (the pair, the menu button, the composer): the lines show
   through, blurred, inside a hairline edge with a light catch along the top; the blur sits on a layer of its own
   beneath the content, so the flags, codes and text are drawn as sharp as the rest of the page */
.pair, #menu-btn, .composer {
  position: relative; isolation: isolate; background: transparent; border: 1px solid var(--pill-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(15, 23, 42, .12), 0 10px 30px rgba(15, 23, 42, .10);
}
.pair::before, #menu-btn::before, .composer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--pill);
  backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
}
#menu-btn { justify-self: end; width: 46px; height: 46px; border-radius: 50%; }
#menu-btn:hover::before, #menu-btn[aria-expanded="true"]::before { background: var(--hover); }

/* three equal cells, so the direction arrow is as easy to hit as a language */
.pair { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px 0 12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  cursor: pointer; font-weight: 700; letter-spacing: .04em; transition: background .15s;
}
.lang-btn:hover { background: var(--hover); }
.lang-btn .cc { font-size: 14px; min-width: 2ch; }
.swap {
  height: 100%; border-radius: 999px; transition: transform .25s, color .15s, background .15s;
}
/* one design language for every icon button, at the top and in the composer: a filled cell with a faint glass edge,
   so it reads as a button to press, and the icon in the ink colour at the one size and stroke (svg above) */
.swap, .tool-btn {
  border: 1px solid var(--pill-edge); background: var(--pill-active); color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(15, 23, 42, .10);
  display: grid; place-items: center; cursor: pointer;
}
.swap:hover { background: var(--hover); }   /* monotone: the arrow's shape alone tells ⇄ from → and ← */

.icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--hover); }

/* ---------- transcript ---------- */
.transcript {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px max(16px, calc((100% - 880px) / 2)) calc(var(--dock-h, 76px) + 12px);
  padding-top: calc(62px + var(--top-gap) + env(safe-area-inset-top));      /* the first line starts below the floating pair */
}
.empty { margin: auto; text-align: center; color: var(--muted); padding: 24px 8px; max-width: 420px; }
.empty-logo { display: block; margin: 0 auto 20px; border-radius: 18px; box-shadow: var(--shadow); }
.empty h2 { color: var(--ink); font-size: 20px; margin: 0 0 14px; letter-spacing: -.01em; }
.empty p { margin: 0; }
:lang(ko) .empty, :lang(ko) .hint, :lang(ko) .signin-card { word-break: keep-all; }

/* the floating window (Document Picture-in-Picture) holds the transcript alone; the page keeps a button to bring
   it back */
body.pip { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.pip .transcript { padding: 10px 12px; }
.pip .empty-logo { width: 48px; height: 48px; margin-bottom: 12px; }
.floated {
  flex: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
}
.floated:hover { color: var(--ink); }
.floated svg { width: 56px; height: 56px; stroke-width: 1.3; }

.line {
  align-self: flex-start; max-width: min(640px, 88%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px;
  padding: 7px 12px 8px; font-size: var(--fs); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  animation: rise .2s ease-out;
}
.line.side-1 { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line); border-radius: 16px 16px 5px 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.line { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* no double-tap zoom */
/* a flag copies its row: an arrow with the copy icon (two boxes, as on the summary's copy button) instead of the
   system copy cursor, a plus on macOS; the hot spot is the arrow's tip */
.line .flag {
  cursor: url("icons/cursor-copy.svg") 3 2, copy;
  cursor: image-set(url("icons/cursor-copy.svg") 1x, url("icons/cursor-copy@2x.svg") 2x) 3 2, copy;
}
/* copied words light up in the accent colour and fade back */
.line .text.copied { animation: copied 1s ease-out; border-radius: 4px; }
@keyframes copied {
  0%, 25% { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
}
.line .text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.line .text:lang(ko) { word-break: keep-all; }
.src-row, .tr { display: flex; gap: 8px; align-items: baseline; }
.src-row .flag, .tr .flag { transform: translateY(1px); opacity: .9; }
.line .src { font-size: .82em; line-height: 1.35; color: var(--src-ink); }
.line.partial .src { font-style: italic; }
.trs { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.tr { color: var(--ink); font-weight: 400; line-height: 1.4; }
/* lines from the same side stack tightly; a change of speaker gets a little more room */
.interp .line:not(.side-1) + .line.side-1, .interp .line.side-1 + .line:not(.side-1) { margin-top: 6px; }
.tr.pending .text::before { content: "…"; color: var(--muted); }
/* the menu's translation alignment: right-aligned translation text (the spoken text keeps its own) */
.transcript.tr-right .tr .text { flex: 1; text-align: right; }
/* the menu's bubble position "all left": one column, the right-hand language's bubbles on the left too (their colour
   kept) */
.transcript.all-left .line.side-1 { align-self: flex-start; border-radius: 16px 16px 16px 5px; }
/* a draft (static/drafts.js): the tail that has not yet survived an update faded, the words that replaced others
   flashing once, key terms bold */
.tr .text .dt { opacity: .55; }
.tr .text .dx {
  animation: draft-swap .6s ease-out both; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@keyframes draft-swap {
  from { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  to { background: transparent; }
}
.tr .text .kt { font-weight: 700; }
.tr.streaming .text::after { content: "▍"; color: var(--accent); animation: pulse 1s infinite; margin-left: 2px; }
@keyframes pulse { 50% { opacity: .3; } }

/* a speaker's colour: the bubble's border, in both views */
.line.spk[data-spk="0"] { --spk: #0EA5E9; }
.line.spk[data-spk="1"] { --spk: #F59E0B; }
.line.spk[data-spk="2"] { --spk: #10B981; }
.line.spk[data-spk="3"] { --spk: #EC4899; }
.line.spk[data-spk="4"] { --spk: #8B5CF6; }
.line.spk[data-spk="5"] { --spk: #F97316; }
.line.spk { background: var(--panel); border: 1.5px solid var(--spk); padding: 6.5px 11.5px 7.5px; }
/* one-language view: the same bubbles, holding only the chosen language's line (the source shown as prominently
   as a translation) */
.line.focus .trs { margin: 0; }
.line.focus .src { font-size: 1em; line-height: 1.4; color: var(--ink); font-weight: 500; }
.line.focus.partial .src { color: var(--muted); }
/* the floating window, mostly for watching a video: left-aligned plain bubbles whoever spoke (no sides, no speaker
   colours, no flags), the translation in front and the spoken words small and faint above it */
body.pip .line {
  align-self: stretch; max-width: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 7px 12px 8px;
}
body.pip .flag, body.pip .tr.pending { display: none; }
/* with the source hidden a bubble holds only its translation: "…" until it comes, there too */
body.pip .transcript.hide-src .tr.pending { display: flex; }
body.pip .line .src { font-size: .72em; color: var(--muted); opacity: .75; }

/* ---------- dock ---------- */
.dock {
  /* floats over the transcript like the pills at the top, so the lines scroll on beneath the glass composer; app.js
     keeps --dock-h, the room the transcript leaves for it */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none;
  padding: 8px max(12px, calc((100% - 880px) / 2)) calc(12px + env(safe-area-inset-bottom));
}
.dock > * { pointer-events: auto; }
.hint { margin: 0 4px 8px; font-size: 13px; color: var(--muted); text-align: center; }
.collect { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin: 0 4px 6px;
            font-size: 12px; color: var(--muted); text-align: center; }   /* development only (app/collect.py) */
.collect input { margin: 0; accent-color: var(--accent); }
.collect-note::before { content: "· "; }
/* one row while the text fits on a line; with more lines (Gemini style) the text takes the full width on top,
   grows upward and the buttons move to a row below it */
.composer {
  display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: end; gap: 4px;
  grid-template-areas: "model notes text timer send record";
  border-radius: 28px; padding: 6px; transition: border-color .15s, box-shadow .15s, border-radius .15s;
}
.composer.multi { grid-template-areas: "text text text text text text" "model notes . timer send record"; border-radius: 24px; row-gap: 2px; }
#model-btn { grid-area: model; } #notes { grid-area: notes; } #timer { grid-area: timer; } #send { grid-area: send; } #record { grid-area: record; }
.composer:focus-within { border-color: var(--accent-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--accent-soft), var(--shadow); }
.composer.live { border-color: color-mix(in srgb, var(--live) 45%, var(--line)); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--live-soft), var(--shadow); }
.composer textarea {
  grid-area: text; min-width: 0; align-self: center; resize: none; border: 0; outline: 0; background: transparent;
  padding: 9px 6px; font-size: 16px; line-height: 1.45; min-height: 42px; max-height: min(40vh, 320px); overflow-y: auto;
}
.composer.multi textarea { align-self: stretch; padding: 10px 12px 6px; }
.composer textarea::placeholder { color: var(--muted); }

.tool-btn {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; transition: background .15s;
}
.tool-btn:hover, .tool-btn[aria-expanded="true"] { background: var(--hover); }
/* the badge sits on the cell's lower right rim, like a status dot, so the icon stays centred as in every other cell */
.tool-badge { position: absolute; right: -2px; bottom: -2px; display: flex; pointer-events: none; }
.tool-badge:empty { display: none; }
.tool-badge .flag, .tool-badge .flag.sm { width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1.5px var(--panel); }
.tool-badge .region { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: var(--panel); color: var(--ink); stroke-width: 2.2; }

.send, .record {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  display: grid; place-items: center; transition: background .2s, transform .1s, box-shadow 90ms;
}
/* one button in the corner, as in messengers: the mic, and the send button once there is text to send (both while
   the mic runs) */
.send { background: var(--accent); color: var(--accent-ink); animation: swapin .16s ease-out; }
.composer:not(.typing) .send, .composer.typing:not(.rec) .record { display: none; }
.composer.typing:not(.rec) #send { grid-area: record; }   /* alone, it takes the mic's own place */
@keyframes swapin { from { transform: scale(.6); opacity: 0; } }
.send:not(:disabled):active, .record:active { transform: scale(.92); }
.record { background: var(--accent); color: var(--accent-ink); --lvl: 0; }
.record .stop { display: none; }
.record.on { background: var(--live); color: #fff; box-shadow: 0 0 0 calc(3px + var(--lvl) * 9px) color-mix(in srgb, var(--live) 22%, transparent); }
.record.on .mic { display: none; }
.record.on .stop { display: block; width: 14px; height: 14px; border-radius: 4px; background: currentColor; }
.record.wait { opacity: .7; animation: pulse 1.2s infinite; }
.timer {
  align-self: center; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--live);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px;
}
.timer::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite; }

/* ---------- start-over question ---------- */
.ask {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px 14px; width: min(320px, calc(100vw - 32px));
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-pop); animation: pop .14s ease-out;
}
.ask::backdrop { background: rgba(15, 23, 42, .35); }
/* centred in what is visible between the floating pair and the bottom: with the iOS keyboard up, the bottom edge
   stops at the keyboard (--vvh, kept by app.js), so the box and its button stay above it, clear of the pair, and a
   box taller than that scrolls inside */
.ask {
  --ask-top: calc(62px + var(--top-gap, 10px) + env(safe-area-inset-top));   /* below the pair, as the transcript starts */
  top: var(--ask-top); bottom: max(0px, calc(100dvh - var(--vvh, 100dvh)));
  max-height: calc(var(--vvh, 100dvh) - var(--ask-top) - 12px); overflow-y: auto;
}
/* the floating composer and the empty-state logo would show through the backdrop above the keyboard */
body:has(dialog[open]) .dock, body:has(dialog[open]) .empty { visibility: hidden; }
.ask p { margin: 0 4px 16px; font-size: 15px; line-height: 1.45; }
.ask-actions { display: flex; gap: 8px; }
.ask-btn {
  flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
.ask-btn:hover { background: var(--hover); }
.ask-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- meeting notes ---------- */
.ask.notes { width: min(420px, calc(100vw - 32px)); }
.ask.notes textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 16px; line-height: 1.45;
}   /* 16px: iOS zooms the page into a smaller field */
.ask.notes textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ask.notes textarea::placeholder { color: var(--muted); }
/* the AWS glossary: a row naming it and what it does, with an on/off switch at the end */
.switch-row {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.switch-row:hover { background: var(--hover); }
.switch-row > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.switch-row[aria-checked="true"] > svg { color: var(--accent); }
.switch-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; font-weight: 600; }
.switch-text small { font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--muted); }
.switch {
  flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px;
  background: color-mix(in srgb, var(--muted) 45%, transparent); transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .15s;
}
.switch-row[aria-checked="true"] .switch { background: var(--accent); }
.switch-row[aria-checked="true"] .switch::after { transform: translateX(16px); }
/* icon buttons beside Done: copy, save */
.ask-btn.icon { flex: none; width: 40px; padding: 0; display: grid; place-items: center; color: var(--muted); }
.ask-btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ask-btn.icon:disabled { opacity: .4; cursor: default; background: var(--panel); }

/* ---------- meeting summary ---------- */
.ask.summary { width: min(720px, calc(100vw - 32px)); }
/* the summary language: one flag button beside copy and save, its list opening upwards from it. The list lives in the
   dialog (a popover outside would sit under the dialog's top layer) and is fixed in place by app.js, as the dialog
   scrolls its content and would cut off a list that reaches above it */
.summary-pick { flex: none; }
.summary-pick .ask-btn.icon .flag { width: 22px; height: auto; }
.summary-langs { --pop-from: 4px; }
.summary-text {
  min-height: 120px; max-height: calc(var(--vvh, 100dvh) - var(--ask-top) - 160px); overflow-y: auto; margin: 0 0 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.summary-text.working:empty::before { content: attr(data-working); color: var(--muted); }
/* the notes button (a clipboard: the meeting's agenda) carries a dot on its upper right rim while notes are set */
#notes.set::after { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }

/* ---------- popovers ---------- */
.popover {
  position: fixed; z-index: 50; min-width: 220px; max-width: calc(100vw - 24px); max-height: min(70vh, 480px); overflow-y: auto;
  background: var(--glass); border: 1px solid var(--pill-edge); border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-pop);
  backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
  padding: 6px; animation: pop .14s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(var(--pop-from, -4px)) scale(.98); } }
.option, .menu-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left; font-size: 14px; color: var(--ink);
}
.option:hover, .menu-item:hover, .option:focus-visible { background: var(--hover); outline: 0; }
.option .cc { font-weight: 700; font-size: 12px; letter-spacing: .05em; color: var(--muted); width: 2.4ch; }
.option .name { flex: 1; }
.option .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.option .check { width: 18px; height: 18px; color: var(--accent); visibility: hidden; }
.option[aria-selected="true"] { font-weight: 600; }
.option[aria-selected="true"] .check { visibility: visible; }
.option:disabled { opacity: .4; cursor: default; }
.option .badge { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.group-label, .menu-label {
  display: block; padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.menu-section { padding: 4px 0; }
.menu-section > .segmented, .menu-section > select { margin: 0 8px; width: calc(100% - 16px); }
.group-label { display: flex; align-items: center; gap: 8px; }
.region { width: 18px; height: 18px; color: var(--accent); stroke-width: 1.8; }
.group-label .region { width: 14px; height: 14px; }
.option .region { width: 18px; margin: 0 3px; flex: none; }
.popover hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu-item svg { color: var(--muted); }
/* the actions: one row of icons, named in their tooltips */
.menu-actions { display: flex; gap: 2px; padding: 0 4px; }
.menu-actions .menu-item { flex: 1; justify-content: center; padding: 10px 0; }
.menu-item[aria-pressed="true"] svg { color: var(--accent); }
#main-menu { width: min(280px, calc(100vw - 24px)); max-height: calc(100dvh - 84px); }   /* the whole menu, down to sign-out */
.segmented { display: flex; gap: 2px; padding: 3px; background: var(--pill-active); border: 1px solid var(--pill-edge); border-radius: 12px; }
.segmented button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted);
}
.segmented button:hover { color: var(--ink); }
.segmented button svg { width: 17px; height: 17px; }
.flag-pair { display: inline-flex; align-items: flex-start; height: 18px; }
/* the second flag overlaps the first from below right, cut out by a ring in the button's colour */
.flag-pair .flag + .flag { margin: 6px 0 0 -7px; box-shadow: 0 0 0 1.5px var(--bg); }
[aria-checked="true"] > .flag-pair .flag + .flag { box-shadow: 0 0 0 1.5px var(--panel); }
.segmented button[aria-checked="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

.toast {
  position: fixed; left: 50%; top: calc(62px + var(--top-gap) + env(safe-area-inset-top)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px);
  z-index: 60; font-size: 14px; box-shadow: var(--shadow-pop); animation: pop .15s ease-out;
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .top { padding-left: 12px; padding-right: 8px; }
  .line { max-width: 92%; }
}
@media (max-width: 420px) {
  .lang-btn { gap: 6px; padding: 0 6px 0 10px; height: 36px; }
  .tool-btn { width: 40px; height: 40px; }
}
/* narrow windows (down to ~240px): flags without codes in the language rows, a tighter header and composer */
@media (max-width: 360px) {
  body.signin { padding: 10px; }
  .signin-card { padding: 28px 16px; }
  .top { padding-left: 8px; padding-right: 4px; gap: 4px; }
  .lang-btn { gap: 5px; padding: 0 10px 0 8px; }
  .lang-btn .cc { font-size: 13px; }
  .dock { padding-left: 8px; padding-right: 8px; }
  .tool-btn { width: 36px; height: 36px; }
  .send, .record { width: 40px; height: 40px; }
  .composer textarea { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 300px) {
  .top { grid-template-columns: 1fr auto; }
  .top > .pair { grid-column: 1; justify-self: start; }
  .top > #menu-btn { grid-column: 2; }
}
/* ---------- tooltip (app.js initTooltips) ---------- */
/* the ink and the panel swapped, so it reads in both themes; it fades and slides out of the control it names */
.tooltip {
  position: fixed; inset: auto; margin: 0; top: 0; left: 0; z-index: 1000; box-sizing: border-box;
  max-width: min(260px, calc(100vw - 16px)); width: max-content; padding: 5px 9px; overflow: visible;
  border: 0; border-radius: 7px; background: var(--ink); color: var(--panel); box-shadow: var(--shadow-pop);
  font-size: 12.5px; font-weight: 500; line-height: 1.35; pointer-events: none;
  opacity: 0; transform: translateY(var(--tip-from, -4px));
  transition: opacity .15s ease, transform .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
}
.tooltip.glide { transition-property: opacity, transform, overlay, display, top, left; transition-duration: .15s; }
.tooltip:not([popover]) { display: none; }
.tooltip:popover-open, .tooltip.open { display: block; opacity: 1; transform: none; }
@starting-style {
  .tooltip:popover-open, .tooltip.open { opacity: 0; transform: translateY(var(--tip-from, -4px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}