:root{
  --bg:#0f1115;
  --surface:#1a1e26;
  --surface2:#232833;
  --border:#333a48;
  --text:#f2f4f8;
  --muted:#9aa5b5;
  --accent:#ffb020;
  --accent2:#3ec6ff;
  --danger:#ff5d5d;
  --ok:#43d17c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
a{color:var(--accent2)}
.hidden{display:none !important}

/* Top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:5;
}
.brand{font-size:20px;font-weight:700}
.topbar-actions{display:flex;align-items:center;gap:10px}
.autospeak-toggle{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--muted);cursor:pointer}
.autospeak-toggle input{width:22px;height:22px;accent-color:var(--accent)}
.icon-btn{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font-size:20px;width:44px;height:44px;border-radius:10px;cursor:pointer;
}

/* Setup banner */
.setup-banner{
  margin:12px;padding:14px;background:#2a2113;border:1px solid var(--accent);
  border-radius:12px;font-size:16px;line-height:1.45;
}
.setup-banner p{margin:0 0 10px}
.small-btn{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  padding:10px 16px;border-radius:10px;font-size:16px;cursor:pointer;min-height:44px;
}
.small-btn.primary{background:var(--accent);color:#141414;border-color:var(--accent);font-weight:700}

/* Language bar */
.langbar{
  display:flex;align-items:flex-end;gap:10px;padding:12px 14px 4px;
}
.lang-col{flex:1;display:flex;flex-direction:column;gap:4px}
.lang-col label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lang-col select{
  width:100%;min-height:52px;font-size:18px;padding:8px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;
}
.swap-btn{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  background:var(--surface2);border:1px solid var(--border);color:var(--accent);
  font-size:24px;cursor:pointer;margin-bottom:0;
}

/* Conversation thread */
.thread{
  flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;
}
.empty-state{
  color:var(--muted);text-align:center;font-size:18px;line-height:1.5;
  margin:auto;padding:20px;max-width:420px;
}
.empty-state .hint{font-size:15px}
.bubble{
  max-width:92%;padding:12px 14px;border-radius:16px;background:var(--surface);
  border:1px solid var(--border);
}
.bubble.from-side{align-self:flex-start;border-bottom-left-radius:4px}
.bubble.to-side{align-self:flex-end;border-bottom-right-radius:4px;background:#14202b}
.bubble .original{font-size:16px;color:var(--muted);line-height:1.4;word-wrap:break-word}
.bubble .translation{font-size:26px;font-weight:600;line-height:1.35;margin-top:4px;word-wrap:break-word}
.bubble .row-actions{display:flex;gap:8px;margin-top:8px}
.replay-btn{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:8px 12px;font-size:15px;cursor:pointer;min-height:40px;
}
.bubble.interim{opacity:.65}
.bubble.error-b{border-color:var(--danger)}
.bubble .translation.err{color:var(--danger);font-size:18px}

/* Status line */
.status-line{
  min-height:24px;text-align:center;color:var(--accent);font-size:16px;margin:2px 12px;
}
.status-line.err{color:var(--danger)}

/* Mic bar — the core control */
.micbar{
  display:flex;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--border);
  position:sticky;bottom:0;
}
.mic-btn{
  flex:1;min-height:84px;border-radius:16px;border:2px solid var(--border);
  background:var(--surface2);color:var(--text);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:17px;font-weight:700;padding:8px 4px;
}
.mic-btn .mic-emoji{font-size:32px}
.mic-from{border-color:var(--accent)}
.mic-to{border-color:var(--accent2)}
.mic-btn.listening{
  background:#3a1414;border-color:var(--danger);color:#fff;
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.mic-btn:disabled{opacity:.45}

/* Typing fallback */
.typebar{
  display:flex;gap:8px;padding:10px 14px;background:var(--surface);
  border-top:1px solid var(--border);
}
.typebar input{
  flex:1;min-height:48px;font-size:17px;padding:8px 12px;min-width:0;
  background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;
}
.typebar select{
  min-height:48px;font-size:15px;background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:10px;max-width:118px;
}
.type-btn{
  min-height:48px;padding:0 16px;font-size:16px;font-weight:700;
  background:var(--accent);color:#141414;border:none;border-radius:10px;cursor:pointer;
}

/* Settings */
.settings-panel{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:20;
  display:flex;align-items:flex-start;justify-content:center;padding:20px 14px;
}
.settings-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:20px;width:100%;max-width:480px;
}
.settings-card h2{margin:0 0 14px;font-size:22px}
.settings-card label{display:block;font-size:15px;color:var(--muted);margin-bottom:6px}
.settings-card input{
  width:100%;min-height:50px;font-size:16px;padding:10px;
  background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;
}
.settings-note{font-size:14px;color:var(--muted);line-height:1.45}
.settings-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.settings-msg{color:var(--ok);font-size:15px;min-height:20px}