/* Color + type system mimics OpenAI Build Hours translate UI */
:root {
  --bg: #0c0c0c;
  --card: #faf6ee;
  --ink: #1a1813;
  --muted: #8a8275;
  --accent: #2b2a25;
  --line: #e3ddcd;
  --pill: #1d1c18;
  --pill-text: #f4ecda;
  --input-color: #4f7cff;
  --output-color: #6abf69;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
body { min-height: 100vh; padding: 32px; }

.card { display: grid; grid-template-columns: 280px 1fr; gap: 24px;
  background: var(--card); border-radius: 12px; padding: 28px;
  max-width: 1300px; margin: 0 auto; }

.sidebar { padding-right: 16px; border-right: 1px solid var(--line); }
.title { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.subtitle { font-size: 13px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.subtitle a { color: var(--accent); text-decoration: underline; }

.btn { width: 100%; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--pill); color: var(--pill-text); }
.btn-primary:hover { background: #2a2823; }
.btn-ghost { background: rgba(31,30,26,0.85); color: var(--pill-text);
  width: auto; padding: 6px 12px; border-radius: 999px; font-size: 12px; }

.status-row { display: flex; justify-content: space-between; font-size: 11px;
  margin: 12px 0; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.status-row .chip { color: var(--ink); font-weight: 500; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.section { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px; font-weight: 600; }

.field { display: block; margin: 10px 0; }
.label-text { display: block; font-size: 12px; margin-bottom: 4px; color: var(--accent); }
.info { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #d8d1c0; color: var(--muted); font-size: 10px; text-align: center;
  line-height: 14px; margin-left: 4px; cursor: default; }
select, input[type="text"] { width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; }
select:disabled, input[readonly] { color: var(--muted); background: #f5efe1; }

.checkbox { display: flex; gap: 10px; align-items: flex-start; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; margin-top: 8px;
  font-size: 12px; cursor: pointer; }
.checkbox input { margin-top: 2px; }
.checkbox small { display: block; color: var(--muted); margin-top: 2px; }

.conn { margin-top: 18px; }
.conn summary { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; padding: 8px 0; }

.main { padding: 4px 8px; }
.waveform-card { position: relative; padding: 14px; background: #fbf7ee;
  border-radius: 10px; min-height: 180px; }
.legend { position: absolute; right: 16px; top: 16px; display: flex; gap: 14px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot-input  { background: var(--input-color); }
.dot-output { background: var(--output-color); }
canvas { width: 100%; height: 160px; display: block; }
#replayBtn { position: absolute; top: 14px; left: 14px; }

.transcripts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.transcript { background: #f3ecdb; border-radius: 10px; padding: 14px 16px;
  min-height: 220px; }
.transcript header { display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.08em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 10px; }
.transcript .label { color: var(--accent); font-weight: 600; }
.t-body { font-size: 18px; line-height: 1.55; word-wrap: break-word; min-height: 160px; }
.placeholder { color: var(--muted); font-style: italic; font-size: 14px; }

/* Streaming-word fade so the latest words are darker — matches the mockup feel */
.word { color: #4d4944; transition: color 600ms ease; }
.word.fresh { color: var(--ink); }