/* ============================================================
   ROYAL MORTGAGE.ai — ROVER's house
   Forked from the royalai.ai design system so the two sites are siblings:
   same navy, same gold, same coin, same light source.
   One difference that matters: here there is only ONE coin.
   ============================================================ */
:root{
  --navy:#152B6B; --navy-deep:#0E1D49; --gold:#CAA25F; --gold-deep:#8a6f3f;
  --gold-text:#7A5E2A;
  --paper:#F8F6F1; --card:#FFFFFF; --ink:#1B2140; --muted:#5C6178; --line:#E7E4DB;
  --green:#2F6B4F; --greenbg:#EFF6F2;
  --rover-bubble:#F4F2EC;
  /* Montserrat is the Royal standard on every surface. Falls back cleanly
     on machines where it is not installed. */
  --royal-font:"Montserrat","Segoe UI","Avenir Next","Helvetica Neue",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);
  font-family:var(--royal-font);
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;
  overflow-x:hidden;line-height:1.6}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- THE ROVER WORDMARK ----------
   LAW (Bryan, 7/25/2026): ROVER never renders as plain type. Not in a
   headline, not in a sentence, not in fine print.
     R  = the chrome castle R. The same mark we fought to get into the app.
          ROVER starts with an R, so the R is the logo. Nothing else.
     O  = the solid gold ball at cap height. All gold, nothing on it.
     VER = Montserrat 800, navy.
   Both marks are inline-blocks sitting on the baseline at cap height, so
   they optically replace the letters instead of floating near them.
   js/royal-brand.js paints this over every occurrence on every surface.

   Cap height in Montserrat 800 is .72em. Both marks overshoot it a little —
   the R because a bevelled chrome edge reads shorter than flat ink, the ball
   because a solid disc always reads smaller than the letters beside it. Same
   reason a typeface draws its O past the cap line. */
.rw{font-weight:800;letter-spacing:.07em;color:var(--navy);white-space:nowrap}
.rw .chr{display:inline-block;vertical-align:baseline;height:.79em;width:.745em;
  margin-right:.02em;-webkit-user-drag:none;user-select:none}
.rw i{display:inline-block;vertical-align:baseline;width:.76em;height:.76em;border-radius:50%;
  margin:0 .04em;font-style:normal;
  background:radial-gradient(circle at 32% 26%, #fdf6e3 0%, #f5e2b4 15%, #e2c283 33%,
    var(--gold) 52%, #a5814a 70%, #7d6238 87%, #6a5330 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7), inset 0 -2px 4px rgba(90,66,30,.45),
    0 1px 2px rgba(21,27,60,.22)}
/* On navy the navy R would vanish, so he wears the platinum cut of the same
   mark. Same glyph, same bevel, same gold keystone — only the metal changes. */
.rw.onnavy{color:#fff}
.rw.onnavy i{box-shadow:inset 0 1px 2px rgba(255,255,255,.7),
  inset 0 -2px 4px rgba(90,66,30,.45), 0 1px 2px rgba(0,0,0,.35)}

/* ---------- THE WRITTEN NAMES ----------
   Same law, one level up: RoyalMortgage.ai, ROYAL Ai and royalai.app are
   lockups, never keyboard text. Navy word, gold suffix, always. */
.rmai,.rai{font-weight:800;color:var(--navy);letter-spacing:.01em;white-space:nowrap}
.rmai em,.rai em,.rai i{font-style:italic;color:var(--gold-deep);font-weight:800}
.onnavy .rmai,.onnavy .rai,.rmai.onnavy,.rai.onnavy,
.card.price .rmai,.card.price .rai,
.endcard .rmai,.endcard .rai,
.row.me .rmai,.row.me .rai,
.toast .rmai,.toast .rai{color:#fff}
.onnavy .rmai em,.onnavy .rai em,.onnavy .rai i,
.rmai.onnavy em,.rai.onnavy em,.rai.onnavy i,
.card.price .rmai em,.card.price .rai em,.card.price .rai i,
.endcard .rmai em,.endcard .rai em,.endcard .rai i,
.row.me .rmai em,.row.me .rai em,.row.me .rai i,
.toast .rmai em,.toast .rai em,.toast .rai i{color:var(--gold)}
/* The Ai mark itself. Chrome art down to ~16px; below that the raster turns
   to mush, so the lockup falls back to gold italic Montserrat (see
   ROVER-RULES.md §6, THE CHROME LINE). */
.aimk{display:inline-block;vertical-align:baseline;height:.72em;width:1.156em;
  margin:0 .02em;-webkit-user-drag:none;user-select:none}

/* ---------- THE SITE WORDMARK: ROYAL MORTGAGE.ai ---------- */
.markwrap{padding:clamp(26px,5.5vh,58px) 16px 0;display:flex;justify-content:center}
.sitemark{width:min(620px,94vw);display:flex;align-items:center;justify-content:center;gap:14px}
.sitemark .castle{height:clamp(38px,7vw,54px);width:auto;flex:none}
.sitemark .words{font-weight:800;color:var(--navy);letter-spacing:.01em;line-height:1;
  font-size:clamp(21px,4.6vw,38px)}
.sitemark .words em{font-style:italic;color:var(--gold-deep)}

/* ---------- home stage ---------- */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding:clamp(16px,3.5vh,40px) 20px 40px;width:100%}
.anchorline{font-size:clamp(14px,2.1vw,17px);color:var(--ink);font-weight:700;
  margin:0 0 6px;text-align:center;max-width:34ch;line-height:1.4}
.anchorsub{font-size:clamp(12.5px,1.8vw,14.5px);color:var(--muted);font-weight:600;
  margin:0 0 20px;text-align:center;max-width:50ch;line-height:1.55}

/* ---------- the ask bar (home) ---------- */
.searchbox{width:min(620px,100%);position:relative}
.searchbox input{width:100%;border:1.5px solid var(--line);border-radius:999px;
  background:var(--card);padding:17px 58px 17px 26px;font-size:16.5px;font-family:inherit;
  color:var(--ink);box-shadow:0 10px 30px rgba(21,43,107,.10);outline:none;
  transition:box-shadow .2s,border-color .2s}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 12px 34px rgba(202,162,95,.28)}
/* The branded placeholder. The real one goes transparent and this sits on
   top of it, so his name is the mark even inside a form field. */
.searchbox input::placeholder{color:transparent}
.searchbox input::-webkit-input-placeholder{color:transparent}
.phold{position:absolute;left:26px;top:50%;transform:translateY(-50%);right:58px;
  pointer-events:none;font-size:16.5px;line-height:1.5;color:var(--muted);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .12s ease}
.searchbox input:not(:placeholder-shown) ~ .phold{opacity:0}
.phold .rw{color:var(--muted);opacity:.92}
.searchbox .btns{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px}
.searchbox button{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;flex:none;padding:0}
.searchbox .go{background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 22%,#d5b271 45%,#ab854a 70%,#7d6238 100%);
  box-shadow:0 3px 8px rgba(21,27,60,.25)}
.searchbox .go svg{width:17px;height:17px;stroke:var(--navy-deep);stroke-width:2.4;fill:none}
.searchbox .mic{background:var(--card);border:1.5px solid var(--line)}
.searchbox .mic svg{width:17px;height:17px;fill:var(--navy)}
.searchbox .mic[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)}
.searchbox .mic[aria-pressed="true"] svg{fill:var(--gold)}
.searchbox .mic.hearing{animation:micpulse 1.3s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(202,162,95,.55)}
  50%{box-shadow:0 0 0 9px rgba(202,162,95,0)}}

.answer{width:min(620px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:18px;margin-top:14px;padding:18px 22px;font-size:14.5px;line-height:1.6;
  color:var(--ink);box-shadow:0 10px 30px rgba(21,43,107,.08);display:none}
.answer.show{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.answer .q{color:var(--muted);font-size:13px;margin:0 0 8px}
.answer .a{margin:0}
.answer .hook{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--muted)}

/* ---------- the wake-word strip ---------- */
.wakestrip{width:min(620px,100%);margin:12px 0 0;display:flex;align-items:center;
  justify-content:center;gap:11px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:12px 18px}
.wakestrip .wl{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.5;text-align:center}
.wakestrip .wl b{color:var(--navy)}
.waketoggle{display:inline-flex;align-items:center;gap:9px;background:var(--card);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--navy);flex:none;
  transition:border-color .15s,transform .12s}
.waketoggle:hover{border-color:var(--gold);transform:translateY(-1px)}
.waketoggle .dot{width:9px;height:9px;border-radius:50%;background:#CFCBBE;flex:none}
.waketoggle[aria-pressed="true"]{border-color:var(--gold);background:#FDFAF3}
.waketoggle[aria-pressed="true"] .dot{background:var(--green);
  box-shadow:0 0 0 0 rgba(47,107,79,.5);animation:livedot 1.6s ease-in-out infinite}
@keyframes livedot{0%,100%{box-shadow:0 0 0 0 rgba(47,107,79,.45)}50%{box-shadow:0 0 0 6px rgba(47,107,79,0)}}
.waketoggle.off{opacity:.55;cursor:not-allowed}

/* ---------- THE ONE COIN ---------- */
.onlycoin{margin-top:clamp(28px,5.5vh,54px);display:flex;flex-direction:column;align-items:center}
.onlycoin .cell{display:flex;flex-direction:column;align-items:center;gap:13px;
  text-decoration:none;color:var(--ink);background:none;border:none;cursor:pointer;
  font-family:inherit;padding:0}
.coin{width:clamp(112px,26vw,148px);aspect-ratio:1;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, var(--gold) 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
  box-shadow:
    0 12px 28px rgba(21,27,60,.24),
    inset 0 2px 6px rgba(255,255,255,.65),
    inset 0 -6px 12px rgba(90,66,30,.45);
  display:grid;place-items:center;transition:transform .18s ease, box-shadow .18s ease}
.coin::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 100%);
  pointer-events:none}
.cell:hover .coin{transform:translateY(-5px) scale(1.05);
  box-shadow:0 18px 36px rgba(21,27,60,.30),inset 0 2px 6px rgba(255,255,255,.65),inset 0 -6px 12px rgba(90,66,30,.45)}

/* ---------- ASLEEP, THEN AWAKE ----------
   LAW (Bryan, 7/25/2026): the gold circle carries NOTHING at rest. It is
   just the ball. Touch it — or say his name — and the chrome R rises out
   of the gold. That is the moment ROVER comes to life, and it is the same
   mark that lives on the app icon, assembling itself in front of you.
   .awake is set by hover, by focus, by pointerdown (touch), and by the
   wake word. It is never the default state. */
.coin .inner{width:66%;height:66%;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:inset 0 1px 4px rgba(90,66,30,.35);overflow:hidden;
  opacity:0;transform:scale(.55);
  transition:opacity .24s ease, transform .34s cubic-bezier(.34,1.42,.5,1)}
.coin .inner img{max-width:70%;max-height:70%;width:auto;height:auto;display:block}
.coin.awake .inner,
.coin:hover .inner,
.cell:hover .coin .inner,
.cell:focus-visible .coin .inner{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .coin .inner{transition:opacity .01s linear;transform:none}
}
.onlycoin .label{display:flex;flex-direction:column;align-items:center;gap:4px}
.onlycoin .label .rw{font-size:clamp(19px,4vw,25px)}
.onlycoin .label small{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase}
.cell:hover .label small{color:var(--navy)}

/* ---------- the promise row ---------- */
.promise{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:clamp(26px,5vh,44px) 0 0;width:min(620px,100%)}
.promise div{flex:1 1 150px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;text-align:center}
.promise b{display:block;font-size:15px;color:var(--navy);letter-spacing:-.01em}
.promise small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;
  line-height:1.5;margin-top:3px}

.trust{width:min(640px,100%);background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;margin-top:clamp(24px,4.5vh,40px);font-size:12px;color:var(--muted);
  line-height:1.6;text-align:center}
.trust b{color:var(--ink)}

footer{padding:22px 16px 34px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.6}
footer b{color:var(--ink)}
footer a{color:var(--muted)}
.toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--navy);color:#fff;padding:10px 22px;border-radius:99px;font-size:13px;
  font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:90;
  max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ============================================================
   THE INTERVIEW ROOM — rover.html
   ============================================================ */
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  max-width:760px;margin:0 auto;width:100%;gap:14px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--navy);text-decoration:none;
  font-size:14px;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.back .arr{font-size:19px;line-height:1}
.top .tag{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold-deep);text-transform:uppercase}

.roomhead{text-align:center;padding:6px 20px 0;max-width:760px;margin:0 auto}
.roomhead .kicker{color:var(--gold-text);font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:10px}
.roomhead h1{font-size:clamp(25px,4.4vw,40px);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 12px;font-weight:800;text-wrap:balance}
.roomhead h1 .gold{color:var(--gold-deep)}
.roomhead .lede{font-size:15.5px;color:var(--muted);max-width:52ch;margin:0 auto;font-weight:500}

.room{max-width:760px;width:calc(100% - 32px);margin:22px auto 10px;background:var(--card);
  border:1.5px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 44px rgba(21,43,107,.10);display:flex;flex-direction:column}
.roomtop{padding:13px 22px 11px;border-bottom:1px solid var(--line);background:#FCFBF8}
.sections{display:flex;gap:13px;flex-wrap:wrap;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#8E8877}
.sections span.on{color:var(--gold-text)}
.sections span.done{color:var(--navy);opacity:.75}
.bar{height:3px;background:#EEEBE2;border-radius:2px;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:var(--gold);border-radius:2px;
  transition:width .35s ease}

.chat{height:min(56vh,540px);min-height:360px;overflow-y:auto;padding:24px 22px 18px;
  display:flex;flex-direction:column;gap:13px;scroll-behavior:smooth}
.row{display:flex;gap:10px;align-items:flex-end}
.row.me{justify-content:flex-end}
.avatar{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;margin-bottom:2px;
  background:radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, var(--gold) 52%, #a5814a 70%, #6a5330 100%);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.65), inset 0 -3px 6px rgba(90,66,30,.45);
  display:grid;place-items:center}
.avatar span{width:66%;height:66%;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 3px rgba(90,66,30,.3)}
.avatar img{max-width:72%;max-height:72%;display:block}
/* Scoped to a chat row on purpose: an unscoped .bubble leaks its max-width
   onto the hub's coin anchors, which also carry .bubble, and shoves the whole
   coin grid off the shared 620px centre line. */
.row .bubble{max-width:78%;padding:11px 16px;border-radius:16px;font-size:15px;line-height:1.55}
.row.rover .bubble{background:var(--rover-bubble);border-bottom-left-radius:5px;color:var(--ink)}
.row.me .bubble{background:var(--navy);color:#fff;border-bottom-right-radius:5px;font-weight:600}
.typing{display:inline-flex;gap:5px;padding:6px 2px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.4;
  animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.8}.bar i{transition:none}}

/* cards ROVER can lay down inside the chat */
.card{max-width:86%;border-radius:16px;border-bottom-left-radius:5px;padding:15px 19px;font-size:13.5px}
.card.secure{background:#FCFAF4;border:1.5px solid var(--gold)}
.card.secure b{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:14.5px}
.card.secure b svg{width:15px;height:15px;fill:var(--gold-deep);flex:none}
.card.secure p{margin:6px 0 0;color:var(--muted);line-height:1.55}
.card.human{background:var(--greenbg);border:1.5px solid #BFD7CA}
.card.human b{color:var(--green);font-size:14.5px;display:block}
.card.human p{margin:6px 0 0;color:#3D5A4C;line-height:1.55}
.card.note{background:#FCFBF8;border:1.5px solid var(--line)}
.card.note b{color:var(--navy);font-size:14.5px;display:block}
.card.note p{margin:6px 0 0;color:var(--muted);line-height:1.55}
.card.price{background:linear-gradient(170deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;
  border:none;max-width:88%}
.card.price .amt{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.card.price .amtlab{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.card.price ul{margin:12px 0 0;padding:0;list-style:none}
.card.price li{font-size:13px;color:#D7DBEC;line-height:1.5;padding:4px 0 4px 20px;position:relative}
.card.price li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

.summarycard{max-width:90%;background:#FCFBF8;border:1.5px solid var(--line);
  border-radius:16px;border-bottom-left-radius:5px;padding:16px 20px;font-size:13.5px}
.summarycard h4{margin:12px 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text)}
.summarycard h4:first-child{margin-top:0}
.summarycard .kv{display:flex;justify-content:space-between;gap:18px;padding:3px 0;
  border-bottom:1px dashed #EEEBE2}
.summarycard .kv:last-child{border-bottom:none}
.summarycard .k{color:var(--muted)}
.summarycard .v{color:var(--ink);font-weight:700;text-align:right}

.endcard{max-width:90%;background:var(--navy);color:#fff;border-radius:16px;
  border-bottom-left-radius:5px;padding:18px 22px}
.endcard b{font-size:15.5px}
.endcard p{margin:7px 0 12px;font-size:13.5px;color:#C7CBE0;line-height:1.6}
.endcard .actions{display:flex;gap:10px;flex-wrap:wrap}
.endcard a{display:inline-block;text-decoration:none;font-weight:700;font-size:13.5px;
  border-radius:10px;padding:9px 16px}
.endcard a.gold{background:var(--gold);color:var(--navy-deep)}
.endcard a.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff}

/* the dock */
.dock{border-top:1px solid var(--line);background:#FCFBF8;padding:12px 18px 14px}
.dockmeta{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;
  font-size:12px;min-height:18px;gap:12px}
.backlink,.restart{background:none;border:none;font-size:12px;cursor:pointer;padding:0;
  font-family:inherit;font-weight:700}
.backlink{color:var(--muted)}
.backlink:hover{color:var(--navy)}
.restart{color:#B9B4A6}
.restart:hover{color:var(--gold-deep)}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit;
  transition:border-color .12s, transform .12s}
.chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.chip.ghostchip{border-style:dashed;color:var(--muted)}
.inputrow{display:flex;gap:9px;align-items:center}
.inputrow .field{flex:1;display:flex;align-items:center;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:0 14px;min-width:0}
.inputrow .field:focus-within{border-color:var(--gold)}
.inputrow .field.locked{background:#FCFAF4;border-color:var(--gold)}
.inputrow .prefix{color:var(--muted);font-weight:700;margin-right:2px;flex:none}
.inputrow .lockico{width:14px;height:14px;fill:var(--gold-deep);flex:none;margin-right:8px}
.inputrow input{flex:1;border:none;outline:none;font-size:15px;padding:11px 4px;
  font-family:inherit;color:var(--ink);background:transparent;min-width:0}
.micbtn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;flex:none;padding:0}
.micbtn svg{width:18px;height:18px;fill:var(--navy)}
.micbtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy)}
.micbtn[aria-pressed="true"] svg{fill:var(--gold)}
.micbtn.hearing{animation:micpulse 1.3s ease-in-out infinite}
.micbtn.off{display:none}
.send{width:44px;height:44px;border-radius:12px;border:none;background:var(--navy);
  color:#fff;cursor:pointer;display:grid;place-items:center;flex:none;transition:transform .12s;padding:0}
.send:hover{transform:translateY(-1px)}
.send svg{width:18px;height:18px;fill:#fff}
.bigbtn{background:var(--navy);color:#fff;border:none;border-radius:12px;padding:12px 26px;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .12s}
.bigbtn:hover{transform:translateY(-1px)}
.bigbtn.gold{background:linear-gradient(160deg,#fdf6e3 0%,#f0d9a6 18%,#d5b271 45%,#ab854a 78%,#8a6f3f 100%);
  color:var(--navy-deep);font-weight:800}
.errnote{color:#A34B3D;font-size:12px}
.errnote:not(:empty){margin-top:6px}

/* voice bar under the dock */
.voicebar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:11.5px;
  color:var(--muted);font-weight:600;text-align:center}
.voicebar.off{display:none}
.voicebar .heard{color:var(--navy);font-style:italic}

.privline{text-align:center;font-size:12px;color:var(--muted);margin:14px auto 0;
  max-width:62ch;padding:0 20px}
.privline svg{width:12px;height:12px;vertical-align:-1.5px;fill:var(--gold-deep)}
.finebox{max-width:860px;width:calc(100% - 32px);margin:24px auto 26px;background:#F4F2EC;
  border-radius:12px;padding:16px 22px;font-size:11.5px;color:var(--muted);line-height:1.65}

@media(max-width:560px){
  .bubble,.card,.summarycard,.endcard{max-width:88%}
  .chat{padding:18px 14px 14px}
  .dock{padding:10px 12px 12px}
  .sections{gap:9px;font-size:9.5px}
  .room{width:calc(100% - 20px);border-radius:18px}
}