/* Coucou design system — palette "Croix-Rousse Café": deep teal actions, apricot + butter accents, cream background.
   Inspired by Zendesk Garden (one clear action colour, 4.5:1 contrast) and monday.com (vivid, rounded, friendly). */
:root {
  --bg:#FFF8F0; --surface:#FFFFFF; --surface-2:#FBF1E6; --ink:#1F2A30; --muted:#6B7480; --line:#EDE3D6;
  --primary:#0F766E; --primary-ink:#FFFFFF; --primary-soft:#E3F2F0;
  --accent:#F28C52; --accent-soft:#FDE9DC; --butter:#F6C744; --butter-soft:#FDF3D2;
  --success:#2F9E44; --danger:#E03131; --mark:#C2410C; --hl:#FDF3D2;
  --radius:18px; --shadow:0 1px 2px #1f2a300d, 0 4px 14px #1f2a300f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12171A; --surface:#1B2227; --surface-2:#222B31; --ink:#EEF2F1; --muted:#9AA6AD; --line:#2C373E;
    --primary:#2BA89E; --primary-ink:#06231F; --primary-soft:#173733;
    --accent:#F59E6B; --accent-soft:#3A271C; --butter:#F6C744; --butter-soft:#3A3219;
    --success:#51CF66; --danger:#FF6B6B; --mark:#FFA36B; --hl:#3A3219;
    --shadow:none;
    color-scheme: dark;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 Nunito, system-ui, -apple-system, sans-serif; }
main { max-width:960px; margin:0 auto; padding:16px 16px 120px; }
a { color:var(--primary); font-weight:700; text-decoration:none; }
h1 { font-size:26px; line-height:1.2; margin:6px 0 10px; font-weight:800; }
h2 { font-size:19px; margin:24px 0 10px; font-weight:800; }
h3 { font-size:16px; margin:0 0 6px; font-weight:800; }
.muted { color:var(--muted); font-size:14px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.status { font-size:14px; color:var(--muted); min-height:1.3em; } .status.err { color:var(--danger); }

/* Header + phone tab bar (injected by web/nav.ts) */
.topbar { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar .inner { max-width:960px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.brand img { width:34px; height:34px; }
.topnav { display:flex; gap:4px; }
.topnav a, .tabbar a { color:var(--muted); font-weight:700; font-size:15px; border-radius:12px; padding:6px 12px; display:flex; align-items:center; gap:6px; }
.topnav a.on { color:var(--primary); background:var(--primary-soft); }
.tabbar { display:none; }
@media (max-width: 720px) {
  .topnav { display:none; }
  .tabbar { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:6; background:var(--surface); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content:space-around; }
  .tabbar a { flex-direction:column; gap:2px; font-size:12px; padding:4px 10px; }
  .tabbar a.on { color:var(--primary); }
  .tabbar svg { width:24px; height:24px; }
  main { padding-bottom:110px; }
}

/* Surfaces */
.card { background:var(--surface); border-radius:var(--radius); padding:16px; margin:12px 0; box-shadow:var(--shadow); display:block; color:inherit; }
a.card { font-weight:inherit; }
.hero { border-radius:24px; padding:18px; color:#fff; background:linear-gradient(135deg, #0F766E 0%, #14897F 55%, #1E9A86 100%); box-shadow:var(--shadow); }
.hero .who { display:flex; gap:14px; align-items:center; }
.hero img.portrait { width:76px; height:76px; border-radius:50%; object-fit:cover; border:3px solid #ffffffb3; flex:none; }
.hero .name { font-size:22px; font-weight:800; line-height:1.1; }
.hero .sub { opacity:.9; font-size:14px; }
.hero .note { background:#ffffff26; border-radius:12px; padding:8px 12px; font-size:14px; margin-top:12px; }
.hero .chip { background:#ffffff1f; color:#fff; border-color:#ffffff59; }
.hero .chip.on { background:#fff; color:#0F766E; border-color:#fff; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.tile { background:var(--surface); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); color:var(--ink); display:block; font-weight:700; }
.tile .big { font-size:26px; font-weight:800; display:block; line-height:1.15; }
.tile .label { color:var(--muted); font-size:13px; font-weight:700; }
.tile.apricot { background:var(--accent-soft); } .tile.butter { background:var(--butter-soft); } .tile.teal { background:var(--primary-soft); }

/* Buttons and chips */
button { font:inherit; cursor:pointer; }
.btn, button.primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:14px; padding:12px 18px; font-weight:800; background:var(--primary); color:var(--primary-ink); }
.btn.block { display:flex; width:100%; padding:16px; font-size:19px; }
.btn.apricot { background:var(--accent); color:#3A1A06; }
.btn.light { background:#ffffff; color:#0F766E; }
.btn.ghost, button.plain { background:transparent; color:var(--ink); border:1.5px solid var(--line); border-radius:12px; padding:9px 14px; font-weight:700; }
.btn.danger { background:var(--danger); color:#fff; }
.chip { border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 14px; font-weight:700; font-size:14px; }
.chip.on { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.badge { display:inline-block; font-size:12px; font-weight:800; padding:2px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink); vertical-align:middle; }
.badge.draft { background:var(--butter); color:#3a2e00; }
.link { background:none; border:0; color:var(--primary); font-weight:700; padding:0; font-size:14px; }

/* Forms */
input, select, textarea { font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:9px 11px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset:2px; }
label { font-weight:700; }
.slider { display:block; margin:16px 0; }
.slider > span { display:flex; justify-content:space-between; font-weight:700; }
.slider input[type=range] { width:100%; accent-color:var(--primary); padding:0; border:0; background:transparent; }
.slider small { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
details.card summary { font-weight:800; cursor:pointer; }
textarea { width:100%; }

/* Progress bar */
.bar { height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin:8px 0 12px; }
.bar span { display:block; height:100%; background:var(--primary); border-radius:6px; }
.bar.warn span { background:var(--accent); }

/* Lists with "forget" buttons (settings) */
ul.items { list-style:none; padding:0; margin:6px 0 12px; }
ul.items li { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
ul.items button { padding:2px 10px; font-size:13px; color:var(--muted); background:transparent; border:1.5px solid var(--line); border-radius:10px; flex:none; }
.day { width:38px; padding:6px 0; border-radius:999px; font-size:14px; font-weight:800; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); }
.day.on { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.window { border:1.5px solid var(--line); border-radius:14px; padding:10px; margin:8px 0; }
table { width:100%; border-collapse:collapse; font-size:15px; } td, th { padding:7px 4px; border-bottom:1px solid var(--line); text-align:left; } td:last-child { text-align:right; }

/* Call page */
.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat { background:var(--surface); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow); } .stat b { font-size:24px; display:block; }
.meters { display:grid; gap:4px; margin:8px 0; } .meter { height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.meter span { display:block; height:100%; width:0; background:var(--primary); } #meter-out { background:var(--accent); }
#transcript p { padding:9px 13px; border-radius:16px; margin:6px 0; max-width:86%; }
#transcript .user { background:var(--primary-soft); margin-left:auto; border-bottom-right-radius:6px; }
#transcript .agent { background:var(--accent-soft); border-bottom-left-radius:6px; }
#rating { text-align:center; }
#rating button { font-size:18px; width:46px; height:46px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); margin:2px; font-weight:800; }
.btn.call { background:var(--success); color:#fff; }
.btn.hangup { background:var(--danger); color:#fff; }

/* Reader */
.sentence-row { padding:6px 8px; border-radius:12px; margin:2px -8px; cursor:pointer; }
.sentence-row.playing { background:var(--hl); }
.para { margin-top:14px; }
.tr { color:var(--muted); font-size:15px; }
.mark { color:var(--mark); font-weight:800; text-decoration:underline dotted; text-underline-offset:3px; cursor:pointer; }
@media (min-width: 800px) { .sentence-row.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .sentence-row.two .tr { font-size:16px; } }
.player { position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); z-index:7; }
.player .inner { max-width:960px; margin:0 auto; display:flex; gap:12px; align-items:center; }
.player button.play { width:48px; height:48px; border-radius:50%; border:0; background:var(--primary); color:var(--primary-ink); font-size:20px; flex:none; }
.player input[type=range] { flex:1; accent-color:var(--primary); padding:0; border:0; background:transparent; }
.sheet-bg { position:fixed; inset:0; background:#0007; display:flex; align-items:flex-end; justify-content:center; z-index:10; }
.sheet { background:var(--surface); width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); max-height:85vh; overflow:auto; }
@media (min-width: 800px) { .sheet-bg { align-items:center; } .sheet { border-radius:22px; } }
.sheet .word { font-size:26px; font-weight:800; color:var(--mark); margin:0; }
.sheet .meaning { font-size:17px; margin:10px 0; }
.sheet blockquote { margin:8px 0; padding:8px 12px; border-left:4px solid var(--accent); background:var(--surface-2); border-radius:0 10px 10px 0; }
.sheet img { width:100%; max-width:360px; display:block; margin:10px auto; border-radius:16px; }
.log { font:13px/1.5 ui-monospace,monospace; background:var(--surface-2); border-radius:10px; padding:8px; white-space:pre-wrap; max-height:220px; overflow:auto; }
.actions { margin-top:8px; }
.level-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
/* Chat (web/chat.ts): thread of bubbles + composer fixed above the phone tab bar */
.chat-main { max-width:720px; padding-bottom:110px; }
/* Stays under the top bar while the thread scrolls, so the language switch is always reachable. */
.chat-head { display:flex; gap:12px; align-items:center; margin:-8px -16px 12px; padding:8px 16px; position:sticky; top:var(--topbar-h, 56px); z-index:4; background:var(--bg); border-bottom:1px solid var(--line); }
.chat-head .avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.chat-head b { font-size:18px; }
.seg { margin-left:auto; display:inline-flex; border:1.5px solid var(--line); border-radius:999px; padding:2px; background:var(--surface); flex:none; }
.seg button { border:0; background:none; color:var(--muted); border-radius:999px; padding:5px 11px; font:inherit; font-size:13px; font-weight:800; }
.seg button.on { background:var(--primary); color:var(--primary-ink); }
.sep.note { font-weight:700; }
.thread { display:flex; flex-direction:column; gap:4px; }
.msg { max-width:82%; padding:8px 12px 6px; border-radius:18px; overflow-wrap:anywhere; }
.msg.user { align-self:flex-end; background:var(--primary-soft); border-bottom-right-radius:6px; }
.msg.assistant { align-self:flex-start; background:var(--surface); box-shadow:var(--shadow); border-bottom-left-radius:6px; }
.msg + .msg.user, .msg + .msg.assistant { margin-top:2px; }
.msg .meta { font-size:11px; color:var(--muted); text-align:right; margin-top:2px; }
.msg.failed .meta { color:var(--danger); font-weight:800; }
.msg .vt { color:var(--muted); font-size:15px; margin-top:4px; }
.msg.assistant .vt { color:var(--ink); }
.voice { display:flex; align-items:center; gap:10px; min-width:200px; }
.voice button.pp { width:38px; height:38px; border-radius:50%; border:0; background:var(--primary); color:var(--primary-ink); font-size:15px; flex:none; }
.msg.assistant .voice button.pp { background:var(--accent); color:#3A1A06; }
.voice .track { flex:1; height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.voice .track span { display:block; height:100%; width:0; background:currentColor; }
.voice .dur { font-size:12px; color:var(--muted); min-width:32px; }
.sep { align-self:center; font-size:12px; font-weight:800; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:2px 10px; margin:10px 0 4px; }
.typing { display:inline-flex; gap:4px; padding:4px 2px; } .typing i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay:.2s; } .typing i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }
.composer { position:fixed; left:0; right:0; bottom:0; z-index:6; background:var(--bg); border-top:1px solid var(--line); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
.composer .inner { max-width:720px; margin:0 auto; display:flex; gap:8px; align-items:flex-end; }
.composer textarea { flex:1; resize:none; max-height:140px; border-radius:20px; padding:10px 14px; line-height:1.35; }
.composer button.round { width:44px; height:44px; border-radius:50%; border:0; background:var(--primary); color:var(--primary-ink); font-size:19px; flex:none; }
.composer button.round.recording { background:var(--danger); color:#fff; }
.composer .rec { flex:1; display:flex; align-items:center; gap:10px; height:44px; padding:0 8px; font-weight:800; }
.composer .rec .dot { width:10px; height:10px; border-radius:50%; background:var(--danger); animation:blink 1s infinite; }
.composer .rec .link { margin-left:auto; }
@media (max-width: 720px) {
  .chat-page .composer { bottom:calc(62px + env(safe-area-inset-bottom)); padding-bottom:8px; }
  .chat-main { padding-bottom:140px; }
}
.level-basic { background:var(--success); } .level-intermediate { background:var(--accent); } .level-advanced { background:var(--mark); }

/* Study plan ("Today"): listening against the goal, calendar of listening days, word review cards */
.today .task { margin-top:10px; font-weight:700; }
.today .bar { margin:6px 0 0; }
.today .week-text { margin-top:12px; font-size:15px; }
.listens { font-weight:800; color:var(--primary); white-space:nowrap; }
.today .streak { margin:10px 0 0; }
/* Calendar: 7 columns; a met day is a filled circle, met days side by side join into a pill (a band behind
   the circles), a missed day is a red ring with a small x, today is bold. */
.cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); row-gap:8px; margin-top:12px; }
.cal-head { text-align:center; font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; }
.cal-day { position:relative; height:38px; padding:0; border:0; background:none; font:inherit; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cal-day span { position:relative; z-index:1; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.cal-day.met::before { content:""; position:absolute; top:1px; bottom:1px; left:50%; right:50%; background:var(--primary); }
.cal-day.met.jl::before { left:-1px; }
.cal-day.met.jr::before { right:-1px; }
.cal-day.met span { background:var(--primary); color:var(--primary-ink); }
.cal-day.missed span { border:2px solid var(--danger); color:var(--danger); }
.cal-day.missed span::after { content:"×"; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); padding:0 2px; line-height:1; font-size:14px; font-weight:800; color:var(--danger); background:var(--surface); }
.cal-day.today span { border:2px solid var(--primary); }
.cal-day.is-today span { font-weight:800; font-size:16px; }
.cal-day.future, .cal-day.before { color:var(--muted); }
.cal-day:focus-visible span { outline:2px solid var(--butter); outline-offset:2px; }
.cal.week { margin-top:14px; }
.cal.week .cal-day { cursor:inherit; }
.calendar .cal-bar { font-weight:800; font-size:17px; text-transform:capitalize; }
.cal-nav { font-size:24px; line-height:1; padding:2px 12px; }
.cal-nav:disabled { visibility:hidden; }
/* The play button keeps its own line so the controls don't jump when it changes to "Keep listening". */
#all-play { flex:1 1 100%; }
.cal-detail { margin:12px 0 0; text-align:center; min-height:1.4em; }
.cal-legend { margin:4px 0 0; text-align:center; font-size:12px; }
.words-box summary { cursor:pointer; list-style:none; }
.words-box summary::-webkit-details-marker { display:none; }
.words-box summary h2 { display:inline-block; }
.words-box summary h2::after { content:" ▾"; color:var(--muted); }
.words-box[open] summary h2::after { content:" ▴"; }
.today h3 { margin-bottom:2px; }
.bar.full span { background:var(--success); }
.streak { font-weight:800; color:var(--mark); }
.done-msg { margin:12px 0 0; font-weight:800; color:var(--success); }
.today-link { display:block; margin-top:12px; }
.badge.new { background:var(--accent-soft); color:var(--mark); }
.text-card h3 { margin:0; }
.text-card .row { margin-top:6px; font-size:14px; }
.word-card .word { font-size:22px; font-weight:800; color:var(--mark); margin:0; }
.word-card blockquote { margin:10px 0; padding:8px 12px; border-left:4px solid var(--accent); background:var(--surface-2); border-radius:0 10px 10px 0; }
.word-card blockquote.tr { border-left-color:var(--primary); }
.word-card .meaning { font-size:17px; margin:8px 0; }
.word-card.reviewed { opacity:.75; }
.word-card .word-img { width:100%; max-width:320px; display:block; margin:10px auto 4px; border-radius:16px; }
.all-player .now { margin:10px 0 0; font-weight:800; min-height:1.3em; }
.all-player .bar { margin:6px 0 8px; }
.all-player > .muted { margin:0; }
.text-card.playing { outline:2px solid var(--primary); }

/* Learner level card (settings) */
.level-list { display:grid; gap:8px; margin:12px 0; }
.level-opt { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:14px; padding:10px 14px; }
.level-opt span { color:var(--muted); font-size:14px; }
.level-opt.on { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--surface)); box-shadow:inset 0 0 0 1px var(--primary); }
.level-opt.on b::after { content:' ✓'; color:var(--primary); }
.level-suggest, .level-check { background:var(--surface-2); border-radius:14px; padding:12px 14px; margin:12px 0; }
.level-suggest[hidden], .level-check[hidden] { display:none; }
.level-strong { font-weight:700; margin:0 0 8px; }