/* Vmail: white, ink, one thin gold rule. Palette from the Portal Hub (apps/auth/static/style.css). */
:root {
  --bg:#ffffff; --card:#ffffff; --soft:#faf9f6;
  --ink:#1f2330; --ink-soft:#3a4050; --muted:#6b7080;
  --border:#e5e3dd; --border-strong:#d5d2c8;
  --gold:#826C34; --gold-deep:#5f4e25; --gold-line:#cbb988; --gold-soft:#f0e8d2;
  --red:#9b3a2e; --red-soft:#fbecea; --blue:#2a5a8a; --amber:#8a6a12; --gray:#8a8a8a;
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","Helvetica Neue",sans-serif;
  --radius:10px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px;
  line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--gold-deep); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--gold-line); background:var(--bg);
  position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.logo { height:26px; width:auto; display:block; }
.brandname { font-weight:650; letter-spacing:.01em; padding-left:10px; border-left:1px solid var(--border-strong); }
.who { display:flex; align-items:center; gap:8px; min-width:0; }
.whoname { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.who form { margin:0; }
.wrap { max-width:760px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:0 0 6px; }
h2 { font-size:16px; margin:0; display:inline-flex; align-items:center; gap:8px; }
.muted { color:var(--muted); }
.tiny { font-size:12px; }
.btn { display:inline-block; background:var(--gold); color:#fff; border:1px solid var(--gold); border-radius:var(--radius);
  padding:10px 18px; font:600 14px var(--font); cursor:pointer; text-decoration:none; min-height:40px; }
.btn:hover { background:var(--gold-deep); border-color:var(--gold-deep); }
.btn.ghost { background:transparent; color:var(--ink-soft); border-color:var(--border-strong); }
.btn.ghost:hover { background:var(--soft); }
.btn.sm { padding:7px 12px; font-size:13px; min-height:36px; }
.panel { border:1px solid var(--border); border-top:2px solid var(--gold); border-radius:var(--radius);
  padding:28px 22px; margin:8vh auto 0; max-width:420px; }
.center { text-align:center; }
.stack { display:flex; flex-direction:column; gap:10px; text-align:left; }
.stack label { font-size:13px; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
input, select, textarea { font:15px var(--font); color:var(--ink); background:#fff; border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:9px 11px; width:100%; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.flash { background:var(--red-soft); border:1px solid #e6c9c2; color:var(--red); padding:10px 12px;
  border-radius:var(--radius); margin-bottom:12px; font-size:14px; }
.status { font-size:13px; color:var(--muted); padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:12px; background:var(--soft); }
.status.stale { color:var(--red); background:var(--red-soft); border-color:#e6c9c2; }
.search { display:flex; gap:8px; margin-bottom:8px; }
.search input { flex:1; }
.sec { margin:22px 0 0; }
.sec > h2, .sec summary h2 { margin-bottom:10px; }
.sec summary { cursor:pointer; list-style:none; }
.sec summary::-webkit-details-marker { display:none; }
.sec details > summary h2::after { content:"Show"; font-size:12px; font-weight:500; color:var(--gold-deep); }
.sec details[open] > summary h2::after { content:"Hide"; }
.count { font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--border-strong);
  border-radius:999px; padding:0 8px; }
.count.hot { color:#fff; background:var(--red); border-color:var(--red); }
.empty { color:var(--muted); font-size:14px; margin:4px 0 0; }
.card { border:1px solid var(--border); border-left:3px solid var(--gray); border-radius:var(--radius);
  padding:12px 14px; margin:0 0 10px; background:var(--card); overflow-wrap:anywhere; }
.card.b-important { border-left-color:var(--red); }
.card.b-staff { border-left-color:var(--blue); }
.card.b-maybe { border-left-color:var(--amber); }
.card.is-handled { opacity:.85; }
.cardhead { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; }
.caller { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.phone { font-weight:600; text-decoration:none; padding:4px 0; }
.when { color:var(--muted); font-size:13px; display:flex; gap:8px; }
.dur::before { content:"\00b7  "; }
.summary { margin:6px 0; }
.facts { margin:4px 0 8px; font-size:13px; }
.facts div { display:flex; gap:8px; }
.facts dt { color:var(--muted); min-width:66px; }
.facts dd { margin:0; }
audio { width:100%; margin:4px 0; }
details.transcript, details.addnote { font-size:14px; margin:4px 0; }
details.transcript summary, details.addnote summary { cursor:pointer; color:var(--gold-deep); padding:6px 0; }
details.transcript p { white-space:pre-wrap; margin:4px 0; color:var(--ink-soft); }
.note { font-size:14px; background:var(--soft); border:1px solid var(--border); border-radius:8px;
  padding:6px 10px; margin:6px 0; white-space:pre-wrap; }
.noteby { display:block; font-size:12px; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.actions form { margin:0; }
.move { display:flex; gap:6px; }
.move select { width:auto; padding:7px 8px; font-size:13px; }
@media (min-width:640px) { .wrap { padding:24px; } }