:root{
  --paper:#FBFAF6; --surface:#FFFFFF; --ink:#17211E; --muted:#6B7772;
  --line:#E3E6E0; --jade:#2F7A63; --jade-soft:#E8F1ED; --clay:#C4644A; --clay-soft:#F7E7E1;
  --warn:#8A6D2F; --warn-soft:#FBF3DE;
  --radius:14px; --radius-lg:20px;
  --body:"Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Kanit","Sarabun",sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131916; --surface:#1C2320; --ink:#EDF1EE; --muted:#98A49E;
    --line:#2C3531; --jade:#58B394; --jade-soft:#1B2C26; --clay:#E08A6E; --clay-soft:#2E211C;
    --warn:#D9BC7A; --warn-soft:#2A2418;
  }
}
:root[data-theme="dark"]{
  --paper:#131916; --surface:#1C2320; --ink:#EDF1EE; --muted:#98A49E;
  --line:#2C3531; --jade:#58B394; --jade-soft:#1B2C26; --clay:#E08A6E; --clay-soft:#2E211C;
  --warn:#D9BC7A; --warn-soft:#2A2418;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
button,input,select{font-family:inherit}
a{color:var(--jade)}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{outline:3px solid var(--clay); outline-offset:2px}

/* Gate */
.gate{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:max(20px,var(--safe-t)) max(16px,var(--safe-r)) max(20px,var(--safe-b)) max(16px,var(--safe-l));
}
.gate-card{
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px 22px; display:flex; flex-direction:column; gap:14px;
}
.gate-card h1{font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0}
.gate-copy{color:var(--muted); font-size:.92rem; margin:0}
#accessForm{display:flex; flex-direction:column; gap:8px}
#accessForm label{font-size:.85rem; color:var(--muted)}
#accessForm input{
  font-size:16px; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); min-height:44px;
}
#accessForm input:focus-visible{border-color:var(--jade)}
#accessSubmit{
  margin-top:4px; font-family:var(--display); font-weight:500; font-size:1rem;
  border:none; border-radius:10px; padding:12px; min-height:44px; cursor:pointer;
  background:var(--jade); color:#fff;
}
#accessSubmit:disabled{opacity:.6; cursor:default}
.gate-error{color:var(--clay); font-size:.88rem; margin:0}

/* App shell */
.app{
  display:flex; flex-direction:column; height:100dvh; max-width:640px; margin:0 auto;
  padding-left:max(0px,var(--safe-l)); padding-right:max(0px,var(--safe-r));
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:max(14px,var(--safe-t)) 16px 10px;
}
.topbar h1{font-family:var(--display); font-weight:600; font-size:1.2rem; margin:0; letter-spacing:-.01em}
.hint-select select{
  font-size:16px; padding:9px 12px; min-height:44px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); max-width:52vw;
}

.statusbar{
  display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; min-height:1px;
}
.chip{
  font-size:.72rem; font-weight:500; letter-spacing:.02em; color:var(--muted);
  background:var(--jade-soft); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.chip[data-tone="warn"]{background:var(--warn-soft); color:var(--warn)}
.chip[data-tone="clay"]{background:var(--clay-soft); color:var(--clay)}
.chip[data-tone="jade"]{background:var(--jade-soft); color:var(--jade)}
.chip[hidden]{display:none}

/* Feed */
.feed{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 16px 12px; display:flex; flex-direction:column; gap:8px;
  scroll-behavior:auto;
}
@media (prefers-reduced-motion: reduce){.feed{scroll-behavior:auto}}
.empty{color:var(--muted); font-size:.92rem; text-align:center; margin:40px 0}

.segment{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; display:flex; flex-direction:column; gap:4px; min-width:0;
}
/* A line still being spoken keeps one look until it closes, however often its words flip
   between partial and final, so it never flickers. */
.segment[data-live="1"]{border-style:dashed}
.segment[data-review="1"]{background:var(--warn-soft); border-style:dashed}
.segment[data-mine="1"]{background:var(--jade-soft); border-color:transparent; align-self:flex-end; max-width:88%}

/* A run of lines from one speaker shows the name once. */
.feed .segment[data-continues="1"] .speakerChip,.feed .segment[data-continues="1"] .heardBadge{display:none}
.feed .segment[data-continues="1"]{margin-top:-4px}
.feed .segment[data-continues="1"] .segment-top:empty{display:none}

/* Hesitation sounds fold into a quiet row; a tap opens the full line. */
.feed .segment[data-filler="1"]:not([data-open="1"]){
  background:transparent; border-color:transparent; padding:0 12px; gap:0;
}
.feed .segment[data-filler="1"]:not([data-open="1"]) .segment-top{display:none}
.feed .segment[data-filler="1"]:not([data-open="1"]) .thai,
.feed .segment[data-filler="1"]:not([data-open="1"]) .english{
  font-size:.82rem; line-height:1.4; color:var(--muted); font-weight:400;
}
.feed .segment[data-filler="1"]:not([data-open="1"]) .roman{display:none}
.feed .segment[data-filler="1"]:not([data-open="1"]):has(.english:not(:empty)) .thai{display:none}
.feed .segment[data-filler="1"]:not([data-open="1"]) + .segment[data-filler="1"]:not([data-open="1"]){margin-top:-8px}

/* History keeps its controls folded until the line is tapped. */
.feed .segment:not([data-open="1"]) .segment-controls{display:none}
.feed .segment{cursor:pointer}

/* The newest line sits above the controls and never scrolls away. */
.now{padding:10px 16px 6px; border-top:1px solid var(--line); background:var(--paper)}
.now .segment{border:none; background:transparent; padding:0; max-width:none; align-self:auto}
.now .segment[data-mine="1"]{background:var(--jade-soft); padding:10px 12px}
.now .segment[data-mine="0"] .english{font-size:1.3rem; line-height:1.4}
.now .segment[data-mine="1"] .thai{font-size:clamp(26px,7vw,30px)}
.reviewpanel{margin:0 16px 8px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--warn-soft)}
.reviewpanel>summary{min-height:44px; padding:10px 0; color:var(--warn); cursor:pointer}
.reviewpanel>p{font-size:.8rem; margin:0 0 10px; color:var(--warn)}
.reviewfeed{max-height:35dvh; overflow:auto; display:flex; flex-direction:column; gap:10px; padding-bottom:12px}
.segment-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.speakerChip{
  max-width:100%; overflow-wrap:anywhere;
  font-family:var(--display); font-weight:500; font-size:.78rem;
  border:1px solid transparent; background:var(--jade-soft); color:var(--jade);
  border-radius:999px; padding:8px 14px; min-height:44px; cursor:pointer;
}
.speakerChip:hover{border-color:var(--jade)}
.segment[data-uncertain="1"] .speakerChip{border-style:dashed; border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
.speakerChip[data-editing="1"]{display:none}
.renameForm{display:none; align-items:center; gap:6px}
.speakerChip[data-editing="1"] + .renameForm{display:flex}
.renameForm input{
  font-size:16px; padding:8px 10px; min-height:44px; width:min(46vw,180px);
  border-radius:8px; border:1px solid var(--jade); background:var(--surface); color:var(--ink);
}
.renameForm button{
  font-size:.85rem; border:none; background:var(--jade); color:#fff; border-radius:8px;
  padding:8px 12px; min-height:44px; cursor:pointer;
}

.heardBadge{
  font-family:var(--display); font-weight:500; font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.tag{
  font-size:.68rem; color:var(--warn); background:var(--warn-soft);
  border-radius:999px; padding:3px 9px;
}
.tag[hidden]{display:none}

/* Their lines lead with the English he reads; his lead with the Thai the phone says. */
.thai{
  font-size:1rem; line-height:1.6; font-weight:400; color:var(--muted); margin:0;
  overflow-wrap:break-word;
}
.thai:empty{display:none}
.segment[data-mine="1"] .thai{font-size:clamp(22px,6vw,26px); line-height:1.65; font-weight:500; color:var(--ink)}
.thai[data-updating="1"]::after,.english[data-updating="1"]::after{content:"…"; color:var(--muted)}
/* The open line: settled words at full strength, the tail the recognizer may still change
   lighter after them, and the interim translation muted until the line closes. */
.tail{color:var(--muted); opacity:.72}
.segment[data-live="1"] p[data-interim="1"]{color:var(--muted)}
.settledTag{font-size:.68rem; color:var(--muted); padding:3px 0}
.settledTag::before{content:"\2713\00a0"}
.roman{font-size:.85rem; color:var(--muted); font-style:italic; margin:0; overflow-wrap:break-word}
.roman:empty{display:none}
.english{font-size:1.1rem; line-height:1.45; font-weight:500; color:var(--ink); margin:0; overflow-wrap:break-word}
.segment[data-mine="1"] .english{font-size:.9rem; font-weight:400; color:var(--muted)}
.english:empty{display:none}
.segment[data-mine="1"] .thai,.segment[data-mine="1"] .english,.segment[data-mine="1"] .roman{text-align:right}
.segment[data-mine="1"] .segment-top,.segment[data-mine="1"] .segment-controls{justify-content:flex-end}
.segment[data-mine="1"] .correction{display:none}

.segment-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px}
.btn{
  font-size:.85rem; font-weight:500; cursor:pointer; min-height:44px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:999px; padding:7px 14px;
}
.btn:hover{border-color:var(--jade); color:var(--jade)}
.btn:disabled{opacity:.5; cursor:default}
.correction select{
  max-width:100%; min-width:0;
  font-size:16px; min-height:44px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
.correction{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:.8rem; color:var(--muted); max-width:100%; min-width:0}
#ttsPlayer{width:100%; max-width:360px}
.correctedTag{font-size:.72rem; color:var(--jade)}
.correctedTag[hidden]{display:none}

/* Jump affordance */
.jump{
  align-self:center; margin:0 16px 8px; font-family:var(--display); font-weight:500;
  font-size:.85rem; border:none; border-radius:999px; padding:10px 18px; min-height:44px;
  background:var(--ink); color:var(--paper); cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.jump[hidden]{display:none}

/* Backlog / failure disclosure */
.backlogBar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin:0 16px 8px; padding:8px 12px; border-radius:10px;
  background:var(--warn-soft); color:var(--warn); font-size:.82rem;
}
.backlogBar>span{flex-basis:100%}
.gap{font-size:.9rem; color:var(--clay); padding:8px 0; margin:0}
.backlogBar[data-tone="clay"]{background:var(--clay-soft); color:var(--clay)}
.backlogBar[hidden]{display:none}
.backlogBar .btn{min-height:44px; padding:6px 14px; border-color:currentColor}

/* Controls */
.controlbar{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:10px 16px max(14px,var(--safe-b));
  border-top:1px solid var(--line); background:var(--surface);
}
.level{width:100%; max-width:320px; height:5px; border-radius:3px; background:var(--line); overflow:hidden}
.level > i{display:block; height:100%; width:100%; background:var(--jade); transform:scaleX(0); transform-origin:left; transition:transform .08s linear}
@media (prefers-reduced-motion: reduce){.level > i{transition:none}}

.startstop{
  font-family:var(--display); font-size:1.05rem; font-weight:500;
  border:none; border-radius:999px; padding:16px 40px; min-height:56px; min-width:220px;
  cursor:pointer; background:var(--jade); color:#fff; transition:transform .12s ease, background .2s ease;
}
.startstop:hover:not(:disabled){transform:translateY(-1px)}
.startstop:disabled{opacity:.5; cursor:default; transform:none}
.startstop[data-state="recording"]{background:var(--clay)}
.startstop[data-state="interrupted"]{background:var(--warn)}
.startstop[data-state="starting"],.startstop[data-state="stopping"]{opacity:.75}
@media (prefers-reduced-motion: reduce){.startstop{transition:none}}

.capturehint{color:var(--muted); font-size:.82rem; text-align:center; margin:0; max-width:44ch; min-height:1.2em}

@media (max-width:360px){
  .startstop{min-width:0; width:100%; padding:16px 20px}
  .topbar h1{font-size:1.05rem}
}