:root {
  --bg: #0f172a;
  --panel: rgba(15, 23, 42, .78);
  --text: #f8fafc;
  --muted: #cbd5e1;
  --accent: #22c55e;
  --accent-2: #0ea5e9;
  --danger: #ef4444;
  --mine: #1e3a8a;
  --theirs: #14532d;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 18px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }

/* ---------- setup + lobby ---------- */
.screen { height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); text-align: center; }
.logo { width: 96px; height: 96px; border-radius: 22px; }
h1 { margin: 0; font-size: 30px; }
.msg { margin: 0; color: var(--muted); max-width: 520px; }
.big { width: min(100%, 420px); padding: 22px; border-radius: 18px; font-size: 24px; font-weight: 700; background: #334155; }
.big.primary { background: var(--accent); color: #052e16; }
#setup input { width: min(100%, 420px); padding: 14px; border-radius: 12px; border: 1px solid #475569; background: #1e293b; color: var(--text); font: inherit; }
#links { width: min(100%, 520px); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.linkrow { display: flex; gap: 8px; }
.linkrow input { flex: 1; min-width: 0; font-size: 14px !important; }
.linkrow button { padding: 0 16px; border-radius: 12px; background: var(--accent-2); }

/* ---------- call alerts ---------- */
#alerts-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; width: min(100%, 420px); }
#btn-alerts { width: 100%; padding: 14px; border-radius: 14px; background: #f59e0b; color: #1c1917; font-size: 20px; font-weight: 700; }
#btn-alerts-test { padding: 6px 14px; border-radius: 999px; background: #334155; font-size: 15px; }
#alerts-msg { font-size: 16px; }
.big.ringing { animation: ring 0.9s infinite; }
@keyframes ring { 50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(34, 197, 94, .35); } }

/* ---------- who's here ---------- */
.who-box .lbl { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { padding: 10px 18px; border-radius: 999px; background: #334155; font-size: 20px; border: 2px solid transparent; }
.chip.on { background: var(--accent); color: #052e16; font-weight: 700; border-color: #bbf7d0; }
#who-lobby, #home-lobby { display: flex; flex-direction: column; gap: 10px; width: min(100%, 520px); }
#home-lobby .chip.on { background: var(--accent-2); color: #fff; border-color: #bae6fd; }
#links-vi { display: flex; flex-direction: column; gap: 8px; }
#fixes-box { width: min(100%, 520px); text-align: left; display: flex; flex-direction: column; gap: 8px; }
#fixes-box h2 { margin: 12px 0 0; font-size: 22px; }
.fix { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #1e293b; }
.fix .t { flex: 1; min-width: 0; font-size: 15px; }
.fix .wrong { color: #fca5a5; }
.fix .right { color: #86efac; }
.fix button { padding: 8px 12px; border-radius: 10px; background: #7f1d1d; font-size: 14px; }
#who-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 720px; }
#who-call .lbl { font-size: 14px; }
#who-call .chip { font-size: 15px; padding: 5px 12px; }

/* ---------- call ---------- */
#call { position: fixed; inset: 0; background: #000; }
#remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#remote-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding-bottom: 35vh; background: radial-gradient(circle at 50% 30%, #1e3a5f, #0f172a 70%); }
#remote-avatar { font-size: 88px; }
#remote-name { font-size: 26px; font-weight: 700; }
#local { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 28vw; max-width: 180px;
  aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.6); transform: scaleX(-1); background: #111; }
#status { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; max-width: calc(100% - 40vw);
  padding: 8px 14px; border-radius: 999px; background: var(--panel); font-size: 16px; }
#remote-talking { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 48px); left: 12px;
  padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #052e16; font-weight: 700; font-size: 16px; animation: pulse 1.2s infinite; }
#tap-sound { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); padding: 20px 28px;
  border-radius: 16px; background: var(--accent); color: #052e16; font-size: 22px; font-weight: 700; }

#bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.85) 22%); }
#caps { width: 100%; max-width: 720px; max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.cap { padding: 10px 14px; border-radius: 16px; max-width: 88%; }
.cap.theirs { align-self: flex-start; background: var(--theirs); }
.cap.mine { align-self: flex-end; background: var(--mine); }
.cap .who { font-size: 13px; color: var(--muted); }
.cap .big-t { font-size: 22px; font-weight: 600; }
.cap .small-t { font-size: 15px; color: var(--muted); margin-top: 2px; }
.cap.theirs .big-t::after { content: " 🔁"; font-size: 14px; opacity: .6; }
.cap { position: relative; padding-right: 44px; }
.cap .edit { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.12); font-size: 15px; }
.cap.fixed .who::after { content: " · ✏️"; }

/* ---------- fix-a-translation dialog ---------- */
#editor { width: min(92vw, 520px); border: 0; border-radius: 18px; padding: 18px; background: #1e293b; color: var(--text); }
#editor::backdrop { background: rgba(0,0,0,.6); }
#editor form { display: flex; flex-direction: column; gap: 8px; }
#editor h2 { margin: 0 0 4px; font-size: 22px; }
#editor label { color: var(--muted); font-size: 15px; }
#editor textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #475569; background: #0f172a;
  color: var(--text); font: inherit; font-size: 19px; resize: vertical; }
#ed-again { align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #334155; font-size: 15px; }
#editor .check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 16px; margin-top: 4px; }
#editor .check input { width: 22px; height: 22px; }
.ed-row { display: flex; gap: 10px; margin-top: 8px; }
.ed-row button { flex: 1; padding: 14px; border-radius: 12px; background: #334155; font-size: 18px; font-weight: 700; }
.ed-row .primary { background: var(--accent); color: #052e16; }

#live { min-height: 22px; font-size: 16px; color: var(--muted); text-align: center; max-width: 720px; }

#talk { width: min(100%, 420px); display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px; border-radius: 999px; background: var(--accent); color: #052e16; font-size: 24px; font-weight: 800; }
#talk .ico { font-size: 28px; }
#talk.rec { background: var(--danger); color: #fff; animation: pulse 1s infinite; }
#talk.auto { background: var(--accent-2); color: #fff; }
#talk.busy { opacity: .75; }

#controls { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 480px; }
.ctl { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px;
  border-radius: 14px; background: rgba(51, 65, 85, .9); min-width: 0; }
.ctl .ico { font-size: 22px; }
.ctl small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ctl.off { background: #7f1d1d; }
.ctl.on { background: #075985; }
.ctl.hang { background: var(--danger); }
.ctl.hang .ico { display: inline-block; transform: rotate(135deg); }

#toast { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); max-width: 90%;
  padding: 14px 20px; border-radius: 14px; background: rgba(0,0,0,.85); font-size: 18px; text-align: center; }

@keyframes pulse { 50% { opacity: .7; } }