:root{
  --bg:#FBF8F5; --panel:#ffffff; --panel2:#f4efe9; --line:#e8e0d6;
  --ink:#1c1512; --muted:#8a7f74; --amber:#c2410c; --orange:#F97316; --gray:#6b6157;
  --good:#1f9d55; --bad:#c0392b; --prospect-bg:#fdf1e5; --prospect-ink:#8a4b1f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
main{display:flex;flex-direction:column;height:100%;padding:10px 12px;gap:9px}

/* top bar */
.topbar{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand{font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.brand .ghost{color:var(--orange)}
.stage{font-weight:800;font-size:12px;letter-spacing:.06em;padding:4px 12px;border-radius:999px;text-transform:uppercase}
.stage.opener{background:#e7eefb;color:#2456c9}
.stage.discovery{background:#e3f3fb;color:#0e83b8}
.stage.pitch{background:#efe7fb;color:#7a45c9}
.stage.objection{background:#fde8e2;color:#c2410c}
.stage.booking{background:#e5f6ec;color:#1f9d55}
.stage.wrap{background:#efeae5;color:#8a7f74}
.timer{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:var(--muted)}
.dots{display:flex;align-items:center;gap:4px}
.dots small{color:var(--muted);font-size:10px;margin-right:6px}
.dot{width:9px;height:9px;border-radius:50%;background:#d8cfc4}
.dot.on{background:var(--good);box-shadow:0 0 6px rgba(31,157,85,.5)}

/* SUGGESTION — full width, horizontal-flowing */
.suggestion-card{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:13px 16px;flex-shrink:0;box-shadow:0 2px 10px rgba(28,21,18,.05)}
.src{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;min-height:16px}
.src .instant{background:var(--good);color:#fff;padding:2px 8px;border-radius:6px;margin-right:8px}
.src .ai{background:#efe7fb;color:#7a45c9;padding:2px 8px;border-radius:6px;margin-right:8px}
.src .lbl{color:var(--muted)}
.suggestion{font-size:22px;font-weight:700;line-height:1.4;color:var(--ink)}   /* horizontal flow */
.suggestion.idle{color:var(--muted);font-weight:500;font-size:16px}
.latency{color:var(--muted);font-size:11px;margin-top:8px;min-height:14px}

/* transcript below, light */
.tcol{display:flex;flex-direction:column;min-height:0;flex:1}
.transcript{overflow-y:auto;display:flex;flex-direction:column;gap:6px;flex:1;padding:2px}
.line{max-width:88%;padding:8px 13px;border-radius:13px;font-size:14px;line-height:1.4}
.line.prospect{align-self:flex-start;background:var(--prospect-bg);color:var(--prospect-ink);border:1px solid #f2d9c2}
.line.setter{align-self:flex-end;background:var(--panel2);color:var(--gray)}
.line.interim{opacity:.5;font-style:italic}
.simbar{padding-top:8px;flex-shrink:0}
.simbar input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:14px;padding:10px 13px;outline:none}
.simbar input:focus{border-color:var(--orange)}
.history-lbl,.history,.hint{display:none}   /* keep it clean/CRM-like */