/* Agent Room ("Room"), owner-only. Moved out of index.html in speed P6 so
   staff don't download it on every launch: app.js (tpRoomCss) adds this sheet
   the first time the Room opens. Every rule is scoped under #view-room with
   rm- prefixed classes. The head bob/sway/blink keyframes stay in index.html
   (the AI Assist fleet view uses them too). */
#view-room{ --rm-ink:#111; --rm-mute:#73736D; --rm-line:#E3E3DC; --rm-line2:#EFEFE9;
  --rm-bg:#F4F4EF; --rm-card:#FFFFFF; --rm-soft:#ECECE5; --rm-pill:#FFF4B9; --rm-y:#F5C500;
  --rm-green:#1E9A4B; --rm-amber:#E0A100; --rm-red:#D6362B;
  --rm-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; }
#view-room .rm-wrap{ max-width:620px; margin:0 auto; padding:10px 16px 40px; color:var(--rm-ink);
  -webkit-font-smoothing:antialiased; }
#view-room .rm-hdr{ padding:6px 2px 12px; }
#view-room .rm-eyebrow{ font-size:10px; font-weight:650; letter-spacing:1.3px; color:#86867c;
  text-transform:uppercase; display:flex; align-items:center; gap:7px; }
#view-room .rm-pip{ width:7px; height:7px; border-radius:50%; background:var(--rm-green); }
#view-room .rm-pip.quiet{ background:#b9b9ad; }
#view-room .rm-pip.off{ background:var(--rm-amber); }
#view-room .rm-hdr h1{ font-size:28px; font-weight:680; letter-spacing:-1px; line-height:1.1; margin:5px 0 0; }
#view-room .rm-hdr .rm-sub{ font-size:12.5px; color:var(--rm-mute); margin-top:3px; }
#view-room .rm-chip-sample{ display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-size:10px; font-weight:650; letter-spacing:.4px; text-transform:uppercase;
  color:#766009; background:#fff0a6; border:1px solid #f0dd7a; border-radius:999px; padding:4px 10px; }
#view-room .rm-chip-sample.off{ color:#7a2c28; background:#fbe4e2; border-color:#ecc7c4; }
#view-room .rm-card{ background:var(--rm-card); border:1px solid var(--rm-line); border-radius:17px;
  margin-bottom:12px; overflow:hidden; }
#view-room .rm-card-h{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px 9px; }
#view-room .rm-card-h h3{ font-size:14px; font-weight:680; letter-spacing:-.25px; margin:0; }
#view-room .rm-card-h .rm-meta{ font-size:11px; color:#9a9a8e; font-weight:500; display:flex; align-items:center; gap:5px; }
#view-room .rm-card-h .rm-meta .d{ width:6px; height:6px; border-radius:50%; background:var(--rm-green); }
/* host */
#view-room .rm-host{ display:flex; align-items:center; gap:13px; padding:13px 15px; }
#view-room .rm-av-h{ position:relative; width:58px; height:58px; flex:none; }
#view-room .rm-av-h .disc{ position:absolute; inset:5px; border-radius:50%; background:#fff;
  border:1px solid var(--rm-line); display:grid; place-items:center; box-shadow:0 0 0 .5px rgba(0,0,0,.05);
  animation:rmBreathe 4.6s ease-in-out infinite; }
#view-room .rm-av-h .disc svg{ width:30px; height:30px; color:var(--rm-y); fill:var(--rm-y); stroke:var(--rm-y); stroke-width:1; }
#view-room .rm-av-h .hdot{ position:absolute; right:3px; bottom:3px; width:13px; height:13px; border-radius:50%;
  background:var(--rm-green); border:2.5px solid #fff; }
#view-room .rm-host .info{ flex:1; min-width:0; }
#view-room .rm-host .name{ font-size:16px; font-weight:680; letter-spacing:-.3px; display:flex; align-items:center; gap:6px; }
#view-room .rm-host .tag{ font-size:8px; font-weight:700; letter-spacing:.6px; color:#8a7a2a;
  background:var(--rm-pill); border-radius:5px; padding:2px 6px; text-transform:uppercase; }
#view-room .rm-host .status{ font-size:12px; color:#5c5c54; margin-top:3px; display:flex; align-items:center; gap:6px; }
#view-room .rm-host .status .d{ width:6px; height:6px; border-radius:50%; background:var(--rm-green); flex:none; }
#view-room .rm-host .status.quiet .d{ background:#b9b9ad; }
#view-room .rm-stats{ display:flex; gap:20px; margin-top:9px; }
#view-room .rm-stats div{ display:flex; flex-direction:column; }
#view-room .rm-stats b{ font-size:16px; font-weight:660; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
#view-room .rm-stats span{ font-size:9px; color:#8b8b80; letter-spacing:.3px; margin-top:1px; text-transform:uppercase; }
/* room grid */
#view-room .rm-room-body{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 2px; padding:4px 10px 12px; }
#view-room .rm-agent{ width:33.33%; max-width:128px; display:flex; flex-direction:column; align-items:center;
  text-align:center; position:relative; padding:6px 2px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#view-room .rm-av-wrap{ position:relative; width:62px; height:62px; }
#view-room .rm-ring{ position:absolute; inset:0; width:62px; height:62px; transform:rotate(-90deg); }
#view-room .rm-ring .track{ fill:none; stroke:#E8E8E0; stroke-width:4; }
#view-room .rm-ring .prog{ fill:none; stroke:var(--rm-green); stroke-width:4; stroke-linecap:round; }
#view-room .rm-agent[data-state="waiting"] .rm-ring .prog,
#view-room .rm-agent[data-state="stale"] .rm-ring .prog{ stroke:var(--rm-amber); }
#view-room .rm-disc{ position:absolute; inset:7px; border-radius:50%; display:grid; place-items:center; background:#f2f1ea; overflow:hidden; }
#view-room .rm-disc svg{ width:23px; height:23px; color:#6b6b61; }
#view-room .rm-sdot{ position:absolute; right:5px; bottom:5px; width:11px; height:11px; border-radius:50%;
  border:2.5px solid #fff; background:var(--rm-green); }
#view-room .rm-agent[data-state="waiting"] .rm-sdot,
#view-room .rm-agent[data-state="stale"] .rm-sdot{ background:var(--rm-amber); }
#view-room .rm-agent[data-state="done"] .rm-sdot{ background:var(--rm-green); }
#view-room .rm-ag-name{ font-size:10.5px; font-weight:650; letter-spacing:-.1px; margin-top:7px; line-height:1.15;
  color:#2c2c26; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-room .rm-ag-task{ font-size:9.5px; color:#8b8b80; line-height:1.25; margin-top:2px; max-width:112px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* live speech bubble: what an active agent is doing right now (text = a.current_action) */
#view-room .rm-say{ position:relative; max-width:116px; margin:7px auto 0; padding:5px 9px;
  background:#fff; border:1px solid var(--rm-line); border-radius:11px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); font-size:9.5px; line-height:1.3; color:#3a3a33;
  animation:rmSayIn .28s cubic-bezier(.2,.8,.2,1); will-change:transform,opacity; }
#view-room .rm-say span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; }
/* little tail pointing up toward the head */
#view-room .rm-say::before{ content:""; position:absolute; top:-4px; left:50%; margin-left:-4px;
  width:8px; height:8px; background:#fff; border-left:1px solid var(--rm-line); border-top:1px solid var(--rm-line);
  border-top-left-radius:2px; transform:rotate(45deg); }
/* echo the amber status colour, very subtly, while waiting/stale */
#view-room .rm-agent[data-state="waiting"] .rm-say,
#view-room .rm-agent[data-state="waiting"] .rm-say::before,
#view-room .rm-agent[data-state="stale"] .rm-say,
#view-room .rm-agent[data-state="stale"] .rm-say::before{ border-color:#ecdcad; }
@keyframes rmSayIn{ from{ opacity:0; transform:translateY(-3px) scale(.96);} to{ opacity:1; transform:translateY(0) scale(1);} }
/* quiet empty */
#view-room .rm-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 20px 18px; }
#view-room .rm-halo{ width:54px; height:54px; border-radius:50%; background:var(--rm-soft); display:grid; place-items:center;
  animation:rmBreathe 4.6s ease-in-out infinite; }
#view-room .rm-halo svg{ width:26px; height:26px; color:#9a9a8e; }
#view-room .rm-empty h4{ font-size:15px; font-weight:650; letter-spacing:-.2px; margin:10px 0 0; }
#view-room .rm-empty p{ font-size:12px; color:#8b8b80; line-height:1.4; margin-top:4px; max-width:290px; }
/* done shelf */
#view-room .rm-shelf{ display:flex; align-items:center; gap:9px; margin:0 11px 11px; padding:9px 12px;
  background:var(--rm-soft); border-radius:12px; }
#view-room .rm-shelf .lbl{ font-size:8px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#8e8e82; }
#view-room .rm-shelf .cnt{ font-size:11px; color:#4a4a42; font-weight:600; margin-left:auto; font-variant-numeric:tabular-nums; }
/* stream */
#view-room .rm-ev{ display:flex; align-items:center; gap:10px; padding:9px 15px; border-top:1px solid var(--rm-line2); }
#view-room .rm-ev:first-child{ border-top:0; }
#view-room .rm-ev .t{ font-family:var(--rm-mono); font-size:10px; color:#9a9a8f; letter-spacing:-.2px; flex:none; width:38px; }
#view-room .rm-ev .body{ flex:1; min-width:0; font-size:11.5px; line-height:1.35; color:#3a3a33;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-room .rm-ev .tdot{ width:6px; height:6px; border-radius:50%; background:var(--rm-green); flex:none; }
#view-room .rm-ev.alerts .tdot{ background:var(--rm-red); }
#view-room .rm-ev.alerts .body{ color:#7a2c28; }
#view-room .rm-empty-row{ padding:14px 15px; font-size:12px; color:#9a9a8e; text-align:center; }
/* next up */
#view-room .rm-nrow{ display:flex; align-items:center; gap:12px; padding:9px 15px; border-top:1px solid var(--rm-line2); }
#view-room .rm-nrow:first-child{ border-top:0; }
#view-room .rm-ntile{ width:44px; height:44px; border-radius:11px; background:var(--rm-soft); display:flex;
  flex-direction:column; align-items:center; justify-content:center; flex:none; }
#view-room .rm-ntile b{ font-size:13px; font-weight:680; line-height:1; letter-spacing:-.3px; }
#view-room .rm-ntile span{ font-size:8px; font-weight:650; color:#8b8b80; letter-spacing:.3px; margin-top:2px; }
#view-room .rm-ninfo{ flex:1; min-width:0; }
#view-room .rm-ninfo strong{ display:block; font-size:13px; font-weight:600; letter-spacing:-.1px; }
#view-room .rm-ninfo span{ display:block; font-size:11px; color:#8b8b80; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-room .rm-ntag{ font-size:9px; font-weight:650; color:#6e6e63; background:#f1f1ea; border:1px solid #e7e7de;
  border-radius:6px; padding:3px 7px; white-space:nowrap; }
/* detail sheet */
#view-room .rm-scrim{ position:fixed; inset:0; background:rgba(20,20,16,.34); z-index:60; opacity:0;
  pointer-events:none; transition:opacity .18s ease; }
#view-room .rm-scrim.open{ opacity:1; pointer-events:auto; }
#view-room .rm-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--rm-card);
  border-radius:22px 22px 0 0; box-shadow:0 -18px 50px rgba(0,0,0,.22); padding:0 18px 26px;
  max-width:620px; margin:0 auto; transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
  max-height:86vh; overflow:auto; }
#view-room .rm-sheet.open{ transform:translateY(0); }
#view-room .rm-handle{ width:38px; height:5px; border-radius:3px; background:#d7d7cd; margin:9px auto 2px; }
#view-room .rm-sheet-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 2px; }
#view-room .rm-sheet-top .kick{ font-size:10px; font-weight:700; letter-spacing:1.1px; color:#9a9a8e; text-transform:uppercase; }
#view-room .rm-xbtn{ width:28px; height:28px; border-radius:50%; background:var(--rm-soft); display:grid; place-items:center; cursor:pointer; border:0; }
#view-room .rm-xbtn svg{ width:16px; height:16px; color:#6c6c62; stroke-width:2.2; }
#view-room .rm-hero{ display:flex; flex-direction:column; align-items:center; padding:6px 0 2px; }
#view-room .rm-big{ position:relative; width:104px; height:104px; }
#view-room .rm-big .disc{ position:absolute; inset:10px; border-radius:50%; background:#f3f2ec; display:grid; place-items:center; overflow:hidden; }
#view-room .rm-big .disc svg{ width:40px; height:40px; color:#6b6b61; }
#view-room .rm-big .sdot{ position:absolute; right:8px; bottom:8px; width:16px; height:16px; border-radius:50%; background:var(--rm-green); border:3px solid #fff; }
#view-room .rm-sheet .name{ font-size:21px; font-weight:680; letter-spacing:-.5px; margin-top:12px; text-align:center; }
#view-room .rm-sheet .statusline{ font-size:13px; color:#5c5c54; margin-top:4px; text-align:center; }
#view-room .rm-sheet .statusline b{ color:var(--rm-green); font-weight:650; }
#view-room .rm-chips{ display:flex; justify-content:center; gap:7px; margin-top:13px; flex-wrap:wrap; }
#view-room .rm-dchip{ display:flex; align-items:center; gap:5px; background:#f2f1ea; border:1px solid #e8e8df;
  border-radius:999px; padding:5px 11px; font-size:11px; font-weight:550; color:#5a5a52; }
#view-room .rm-dchip b{ font-weight:650; color:#39392f; }
#view-room .rm-sect{ margin-top:16px; }
#view-room .rm-sect .lab{ font-size:10px; font-weight:700; letter-spacing:.7px; color:#8e8e82; text-transform:uppercase; margin-bottom:6px; }
#view-room .rm-task{ background:#faf9f4; border:1px solid var(--rm-line2); border-radius:12px; padding:11px 13px;
  font-size:12.5px; line-height:1.5; color:#3a3a33; }
#view-room .rm-pbar{ display:flex; align-items:center; gap:9px; margin-top:10px; }
#view-room .rm-pbar .track{ flex:1; height:6px; border-radius:4px; background:#ececE5; overflow:hidden; }
#view-room .rm-pbar .fill{ height:100%; border-radius:4px; background:var(--rm-green); }
#view-room .rm-pbar .pct{ font-size:11px; font-weight:650; color:#4a4a42; font-variant-numeric:tabular-nums; }
#view-room .rm-note{ font-size:11px; color:#9a9a8e; line-height:1.45; margin-top:8px; }
#view-room .rm-actions{ display:flex; gap:9px; margin-top:18px; }
#view-room .rm-btn{ flex:1; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13px; font-weight:650; border:1px solid #e4e4da; background:#f1f1ea; color:#9a9a90; }
#view-room .rm-btn svg{ width:18px; height:18px; }
#view-room .rm-btn[disabled]{ cursor:not-allowed; opacity:.65; }
#view-room .rm-btn.danger{ background:#fff; border-color:#ecc7c4; color:#cf8b86; }
#view-room .rm-phase2{ text-align:center; font-size:10px; color:#a5a59a; margin-top:8px; letter-spacing:.2px; }
/* AI usage & spend panel */
#view-room .rm-usage .rm-u-sec{ padding:11px 15px 13px; border-top:1px solid var(--rm-line2); }
#view-room .rm-usage .rm-u-fees{ padding:11px 15px 13px; }
#view-room .rm-u-sec-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
#view-room .rm-u-sec-h .lab{ font-size:9px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:#8e8e82; }
#view-room .rm-u-sec-h .hint{ font-size:10px; color:#a5a59a; }
#view-room .rm-u-age{ font-size:10px; color:#9a9a8e; font-variant-numeric:tabular-nums; }
#view-room .rm-u-age.stale{ color:var(--rm-amber); }
#view-room .rm-u-age.none{ color:#b7b7ab; font-style:italic; }
/* plan fees (editable) */
#view-room .rm-u-feerow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--rm-line2); }
#view-room .rm-u-feerow:first-of-type{ border-top:0; }
#view-room .rm-u-fl strong{ display:block; font-size:13px; font-weight:600; letter-spacing:-.1px; color:var(--rm-ink); }
#view-room .rm-u-fl span{ display:block; font-size:10.5px; color:#8b8b80; margin-top:1px; }
#view-room .rm-u-fv{ border:1px solid #e4e4da; background:#faf9f4; border-radius:9px; padding:6px 11px; font-size:14px;
  font-weight:660; letter-spacing:-.3px; color:var(--rm-ink); cursor:pointer; font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent; }
#view-room .rm-u-fv small{ font-size:9px; font-weight:600; color:#9a9a8e; margin-left:1px; letter-spacing:0; }
#view-room .rm-u-fv.unset{ background:var(--rm-pill); border-color:#f0dd7a; }
#view-room .rm-u-fv .set{ font-size:11px; font-weight:700; letter-spacing:.3px; color:#8a7320; text-transform:uppercase; }
#view-room .rm-u-feeedit{ display:inline-flex; align-items:center; gap:6px; }
#view-room .rm-u-feeedit input{ width:88px; height:32px; border:1px solid #d9d9cf; border-radius:8px; padding:0 9px;
  font-size:14px; font-weight:600; color:var(--rm-ink); background:#fff; font-variant-numeric:tabular-nums; }
#view-room .rm-u-feeedit button{ height:32px; border-radius:8px; padding:0 11px; font-size:12px; font-weight:650; border:1px solid #e4e4da; cursor:pointer; }
#view-room .rm-u-feeedit .ok{ background:var(--rm-y); border-color:#e3b600; color:#111; }
#view-room .rm-u-feeedit .no{ background:#f1f1ea; color:#6e6e63; }
#view-room .rm-u-total{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:11px 12px;
  background:var(--rm-soft); border-radius:12px; }
#view-room .rm-u-total span{ font-size:11px; font-weight:650; letter-spacing:.3px; text-transform:uppercase; color:#6e6e63; }
#view-room .rm-u-total b{ font-size:19px; font-weight:680; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
#view-room .rm-u-total b small{ font-size:10px; font-weight:600; color:#8b8b80; margin-left:1px; }
#view-room .rm-u-total b.unset{ font-size:12px; font-weight:650; color:#a5a59a; letter-spacing:0; }
#view-room .rm-u-foot{ font-size:10.5px; color:#a5a59a; line-height:1.45; margin-top:9px; }
/* per-provider usage */
#view-room .rm-u-prov{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
#view-room .rm-u-big b{ font-size:26px; font-weight:680; letter-spacing:-1px; line-height:1; font-variant-numeric:tabular-nums; }
#view-room .rm-u-big span{ display:block; font-size:10.5px; color:#8b8b80; margin-top:3px; }
#view-room .rm-u-noti{ text-align:right; }
#view-room .rm-u-noti b{ font-size:16px; font-weight:660; letter-spacing:-.4px; color:#4a4a42; font-variant-numeric:tabular-nums; }
#view-room .rm-u-noti span{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.2px; text-transform:uppercase; color:#b08900; margin-top:2px; }
#view-room .rm-u-plan{ text-align:right; }
#view-room .rm-u-plan .pct{ font-size:18px; font-weight:680; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
#view-room .rm-u-plan .pct.green{ color:var(--rm-green); } #view-room .rm-u-plan .pct.amber{ color:var(--rm-amber); } #view-room .rm-u-plan .pct.red{ color:var(--rm-red); }
#view-room .rm-u-plan span{ display:block; font-size:9.5px; color:#8b8b80; margin-top:2px; }
#view-room .rm-u-mini{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
#view-room .rm-u-mini span{ font-size:10px; color:#6e6e63; background:#f1f1ea; border:1px solid #e9e9e0; border-radius:6px;
  padding:3px 8px; font-variant-numeric:tabular-nums; }
#view-room .rm-u-bar{ display:flex; align-items:center; gap:9px; margin-top:10px; }
#view-room .rm-u-bar .track{ flex:1; height:6px; border-radius:4px; background:#ececE5; overflow:hidden; }
#view-room .rm-u-bar .fill{ height:100%; border-radius:4px; background:var(--rm-green); }
#view-room .rm-u-bar .fill.amber{ background:var(--rm-amber); } #view-room .rm-u-bar .fill.red{ background:var(--rm-red); }
#view-room .rm-u-bar .rst{ font-size:10px; color:#8b8b80; white-space:nowrap; font-variant-numeric:tabular-nums; }
#view-room .rm-u-models{ margin-top:11px; border-top:1px solid var(--rm-line2); }
#view-room .rm-u-mrow{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--rm-line2); }
#view-room .rm-u-mrow:first-child{ border-top:0; }
#view-room .rm-u-mrow .nm{ flex:1; font-size:12px; font-weight:550; color:#3a3a33; }
#view-room .rm-u-mrow .tk{ font-size:11.5px; color:#6e6e63; font-variant-numeric:tabular-nums; min-width:52px; text-align:right; }
#view-room .rm-u-mrow .ct{ font-size:11.5px; color:#9a9a8e; font-variant-numeric:tabular-nums; min-width:58px; text-align:right; }
#view-room .rm-u-addons{ display:flex; gap:9px; }
#view-room .rm-u-ad{ flex:1; background:#faf9f4; border:1px solid var(--rm-line2); border-radius:12px; padding:10px 12px; }
#view-room .rm-u-ad.stale{ opacity:.55; }
#view-room .rm-u-ad .t{ font-size:11px; font-weight:600; color:#5a5a52; }
#view-room .rm-u-ad .v{ font-size:18px; font-weight:680; letter-spacing:-.5px; margin-top:3px; font-variant-numeric:tabular-nums; }
#view-room .rm-u-ad .v small{ font-size:10px; font-weight:600; color:#8b8b80; margin-left:2px; letter-spacing:0; }
#view-room .rm-u-ad .m{ font-size:9.5px; color:#9a9a8e; margin-top:4px; font-variant-numeric:tabular-nums; }
#view-room .rm-u-ad .m.none{ font-style:italic; color:#b7b7ab; }
#view-room .rm-u-blank{ font-size:11.5px; color:#9a9a8e; padding:4px 0 2px; }
/* ---- AI Meters v2: header refresh button + generic limit bars ---- */
#view-room .rm-u-head-r{ display:flex; align-items:center; gap:10px; }
#view-room .rm-u-sec-h .sub{ font-weight:500; color:#a5a59a; letter-spacing:0; text-transform:none; }
#view-room .rm-u-sec-r{ display:inline-flex; align-items:center; gap:6px; }
#view-room .rm-u-refresh{ display:inline-flex; align-items:center; gap:6px; border:1px solid #e4e4da; background:#faf9f4;
  color:var(--rm-ink); border-radius:9px; padding:6px 11px; font-size:12px; font-weight:650; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#view-room .rm-u-refresh:active{ transform:translateY(1px); }
#view-room .rm-u-refresh.busy{ color:#8b8b80; cursor:default; }
#view-room .rm-u-rspin{ width:12px; height:12px; border-radius:50%; border:2px solid #d9d9cf; border-top-color:var(--rm-ink); display:none; box-sizing:border-box; }
#view-room .rm-u-refresh.busy .rm-u-rspin{ display:inline-block; border-top-color:#8b8b80; animation:rmSpin .8s linear infinite; }
#view-room .rm-u-rspin.sm{ display:inline-block; width:11px; height:11px; border-top-color:var(--rm-amber); animation:rmSpin .8s linear infinite; }
#view-room .rm-u-bars{ margin-top:11px; display:flex; flex-direction:column; gap:11px; }
#view-room .rm-m-lh{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
#view-room .rm-m-lh .k{ font-size:11px; font-weight:600; color:#5a5a52; }
#view-room .rm-m-lh .v{ font-size:13px; font-weight:680; color:#4a4a42; font-variant-numeric:tabular-nums; }
#view-room .rm-m-lh .v.green{ color:var(--rm-green); } #view-room .rm-m-lh .v.amber{ color:var(--rm-amber); } #view-room .rm-m-lh .v.red{ color:var(--rm-red); }
#view-room .rm-m-none{ font-size:11px; font-style:italic; color:#b7b7ab; }
#view-room .rm-m-track{ height:6px; border-radius:4px; background:#ececE5; overflow:hidden; }
#view-room .rm-m-fill{ height:100%; border-radius:4px; background:var(--rm-green); }
#view-room .rm-m-fill.amber{ background:var(--rm-amber); } #view-room .rm-m-fill.red{ background:var(--rm-red); }
#view-room .rm-m-rst{ font-size:10px; color:#8b8b80; margin-top:4px; font-variant-numeric:tabular-nums; }
#view-room .rm-u-note-sm{ font-size:10.5px; color:#9a9a8e; margin-top:9px; font-style:italic; }
/* ---- Agent Room "little colleagues": glyph fix + motion layer ---- */
/* Room glyphs are line-art. Without this the <use> symbols inherit the SVG
   default (fill:black, stroke:none) and render as solid black blobs — the
   "black square in the centre" bug (the cpu fallback is a filled rounded
   square). Force line-art fill/stroke. The host star keeps its own filled
   rule (higher specificity: #view-room .rm-av-h .disc svg). */
#view-room .rm-ic{ width:1em; height:1em; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* work shimmer: a soft dot that orbits the progress ring */
#view-room .rm-rotator{ position:absolute; inset:0; pointer-events:none; transform-origin:50% 50%; will-change:transform; }
#view-room .rm-sheen{ position:absolute; top:1px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%;
  background:var(--rm-green); box-shadow:0 0 6px 1px rgba(30,154,75,.55); opacity:0; }
#view-room .rm-agent[data-state="waiting"] .rm-sheen,
#view-room .rm-agent[data-state="stale"] .rm-sheen{ background:var(--rm-amber); box-shadow:0 0 6px 1px rgba(224,161,0,.5); }
/* success check overlay (shown for done; base-visible so reduced-motion keeps it) */
#view-room .rm-check{ position:absolute; inset:7px; border-radius:50%; display:grid; place-items:center;
  background:rgba(236,243,237,.94); opacity:0; }
#view-room .rm-check svg{ width:24px; height:24px; color:var(--rm-green); stroke-width:2.4; }
/* working: orbiting shimmer + gentle ring shimmer (the head carries its own idle bob/sway/blink) */
#view-room .rm-agent[data-state="working"] .rm-rotator{ animation:rmSpin 2s linear infinite; }
#view-room .rm-agent[data-state="working"] .rm-sheen{ opacity:1; }
#view-room .rm-agent[data-state="working"] .rm-ring .prog{ animation:rmRingPulse 2s ease-in-out infinite; }
/* waiting / stale: slow amber pulse */
#view-room .rm-agent[data-state="waiting"] .rm-sdot,
#view-room .rm-agent[data-state="stale"] .rm-sdot{ animation:rmAmberPulse 2s ease-in-out infinite; will-change:transform; }
#view-room .rm-agent[data-state="waiting"] .rm-rotator,
#view-room .rm-agent[data-state="stale"] .rm-rotator{ animation:rmSpin 4s linear infinite; }
#view-room .rm-agent[data-state="waiting"] .rm-sheen,
#view-room .rm-agent[data-state="stale"] .rm-sheen{ opacity:.85; }
#view-room .rm-agent[data-state="waiting"] .rm-ring .prog,
#view-room .rm-agent[data-state="stale"] .rm-ring .prog{ animation:rmRingPulse 2s ease-in-out infinite; }
/* done: persistent soft check + calm settle-in + gentle breath, no corner dot */
#view-room .rm-agent[data-state="done"] .rm-check{ opacity:1; animation:rmCheckIn .5s ease-out; }
#view-room .rm-agent[data-state="done"] .rm-av-wrap{ opacity:.94; animation:rmDoneSettle .6s ease-out; }
#view-room .rm-agent[data-state="done"] .rm-sdot{ display:none; }
/* stagger the heads' bob/sway/blink + the shimmer so the room never moves in lockstep */
#view-room .rm-room-body .rm-agent:nth-child(2) .rm-head .char-bob{ animation-delay:-.9s; }
#view-room .rm-room-body .rm-agent:nth-child(3) .rm-head .char-bob{ animation-delay:-1.9s; }
#view-room .rm-room-body .rm-agent:nth-child(4) .rm-head .char-bob{ animation-delay:-2.7s; }
#view-room .rm-room-body .rm-agent:nth-child(5) .rm-head .char-bob{ animation-delay:-1.3s; }
#view-room .rm-room-body .rm-agent:nth-child(6) .rm-head .char-bob{ animation-delay:-3.3s; }
#view-room .rm-room-body .rm-agent:nth-child(7) .rm-head .char-bob{ animation-delay:-.5s; }
#view-room .rm-room-body .rm-agent:nth-child(8) .rm-head .char-bob{ animation-delay:-2.2s; }
#view-room .rm-room-body .rm-agent:nth-child(2) .rm-head .char-sway{ animation-delay:-3s; }
#view-room .rm-room-body .rm-agent:nth-child(3) .rm-head .char-sway{ animation-delay:-1.7s; }
#view-room .rm-room-body .rm-agent:nth-child(4) .rm-head .char-sway{ animation-delay:-2.4s; }
#view-room .rm-room-body .rm-agent:nth-child(5) .rm-head .char-sway{ animation-delay:-5s; }
#view-room .rm-room-body .rm-agent:nth-child(6) .rm-head .char-sway{ animation-delay:-.8s; }
#view-room .rm-room-body .rm-agent:nth-child(7) .rm-head .char-sway{ animation-delay:-4.2s; }
#view-room .rm-room-body .rm-agent:nth-child(8) .rm-head .char-sway{ animation-delay:-2s; }
#view-room .rm-room-body .rm-agent:nth-child(2) .rm-head .eyes{ animation-delay:-2s; }
#view-room .rm-room-body .rm-agent:nth-child(3) .rm-head .eyes{ animation-delay:-4s; }
#view-room .rm-room-body .rm-agent:nth-child(4) .rm-head .eyes{ animation-delay:-6s; }
#view-room .rm-room-body .rm-agent:nth-child(5) .rm-head .eyes{ animation-delay:-1s; }
#view-room .rm-room-body .rm-agent:nth-child(6) .rm-head .eyes{ animation-delay:-5s; }
#view-room .rm-room-body .rm-agent:nth-child(7) .rm-head .eyes{ animation-delay:-3s; }
#view-room .rm-room-body .rm-agent:nth-child(8) .rm-head .eyes{ animation-delay:-7s; }
#view-room .rm-room-body .rm-agent:nth-child(2) .rm-rotator{ animation-delay:-.7s; }
#view-room .rm-room-body .rm-agent:nth-child(3) .rm-rotator{ animation-delay:-1.3s; }
#view-room .rm-room-body .rm-agent:nth-child(4) .rm-rotator{ animation-delay:-.4s; }
#view-room .rm-room-body .rm-agent:nth-child(5) .rm-rotator{ animation-delay:-1.1s; }
#view-room .rm-room-body .rm-agent:nth-child(6) .rm-rotator{ animation-delay:-1.7s; }
/* detail-sheet hero avatar: gentle life + done check (the head carries its own bob/sway/blink) */
#view-room .rm-big .rm-check{ inset:10px; }
#view-room .rm-big .rm-check svg{ width:40px; height:40px; }
#view-room .rm-big[data-state="done"] .rm-check{ opacity:1; animation:rmCheckIn .5s ease-out; }
#view-room .rm-big[data-state="done"] .sdot{ display:none; }
@keyframes rmBreathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.035);} }
@keyframes rmSpin{ to{ transform:rotate(360deg);} }
@keyframes rmDoneBreath{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.02);} }
@keyframes rmCheckIn{ from{ opacity:0; transform:scale(.6);} to{ opacity:1; transform:scale(1);} }
@keyframes rmDoneSettle{ from{ opacity:.5; transform:translateY(-3px);} to{ opacity:.94; transform:translateY(0);} }
/* ---- memoji heads: fill the disc + the sample's idle motion (bob/sway/blink + breathing ground shadow) ---- */
#view-room .rm-disc .rm-head{ width:100%; height:100%; display:block; }
#view-room .rm-big .disc .rm-head{ width:100%; height:100%; display:block; }
#view-room .rm-head .char-bob{ transform-box:view-box; transform-origin:36px 54px; animation:rmHeadBob 4s ease-in-out infinite; will-change:transform; }
#view-room .rm-head .char-sway{ transform-box:view-box; transform-origin:36px 48px; animation:rmHeadSway 8s ease-in-out infinite; will-change:transform; }
#view-room .rm-head .eyes{ transform-box:view-box; transform-origin:36px 33px; animation:rmHeadBlink 8s ease-in-out infinite; }
#view-room .rm-head .shadow{ transform-box:view-box; transform-origin:36px 66px; animation:rmHeadShadow 4s ease-in-out infinite; }
@keyframes rmHeadShadow{ 0%,100%{ transform:scaleX(1); opacity:.28;} 50%{ transform:scaleX(.9); opacity:.2;} }
/* ---- animated avatars: in-place updates (app.js roomPaintAgents) ---- */
/* ring-fill: the progress arc eases to each new value instead of jumping */
#view-room .rm-ring .prog{ transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1), stroke .4s ease; }
/* a run joining the room fades + scales in */
#view-room .rm-agent.rm-enter{ animation:rmAgentIn .45s cubic-bezier(.2,.8,.2,1) both; }
/* leaving: no taps, no bubble; a run that didn't finish OK just fades */
#view-room .rm-agent.rm-leaving{ pointer-events:none; }
#view-room .rm-agent.rm-leaving .rm-sdot{ display:none; }
#view-room .rm-agent.rm-leaving .rm-rotator{ animation:none; opacity:0; }
#view-room .rm-agent.rm-gone{ animation:rmAgentOut .6s ease forwards; }
/* finished OK: check holds, then the avatar drifts onto the shelf (WAAPI) and the name fades */
#view-room .rm-agent.rm-drift{ z-index:3; }   /* glide over neighbours' bubbles on the way down */
#view-room .rm-agent.rm-drift .rm-ag-name{ transition:opacity .5s ease; opacity:0; }
#view-room .rm-agent.rm-drift .rm-av-wrap{ animation:none; }
@keyframes rmAgentIn{ from{ opacity:0; transform:translateY(6px) scale(.86);} to{ opacity:1; transform:none;} }
@keyframes rmAgentOut{ to{ opacity:0; transform:scale(.9);} }
/* "Done today" shelf: ghost heads with a small green check, newest on the right */
#view-room .rm-shelf-done .cnt{ margin-left:0; font-size:10.5px; color:#6e6e63; white-space:nowrap; }
#view-room .rm-shelf-done .rm-ghosts + .cnt{ margin-left:6px; }
#view-room .rm-shelf-done .lbl{ flex:none; }
#view-room .rm-shelf-done > .cnt:nth-child(2){ margin-left:auto; }
#view-room .rm-ghosts{ display:flex; align-items:center; margin-left:auto; padding-left:8px; min-width:0; }
#view-room .rm-gh{ position:relative; width:28px; height:28px; flex:none; margin-left:-7px; border-radius:50%;
  border:2px solid var(--rm-soft); background:#f2f1ea; box-sizing:content-box;
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
#view-room .rm-gh:first-child{ margin-left:0; }
#view-room .rm-gh .rm-gh-d{ position:absolute; inset:0; border-radius:50%; overflow:hidden; }
#view-room .rm-gh .rm-head{ width:100%; height:100%; display:block; }
#view-room .rm-gh .rm-head *{ animation:none !important; }   /* shelf heads rest still */
#view-room .rm-gh .gcheck{ position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%;
  background:var(--rm-green); border:2px solid var(--rm-soft); display:grid; place-items:center; }
#view-room .rm-gh .gcheck svg{ width:7px; height:7px; color:#fff; stroke-width:3.4; }
#view-room .rm-gh.rm-gh-wait{ opacity:0; transform:translateY(-6px) scale(.5); }
@media (max-width:360px){ #view-room .rm-gh:nth-child(-n+2){ display:none; } }
@media (prefers-reduced-motion: reduce){
  /* every Room animation (incl. the new head bob/sway/blink/shadow) stops → clean static heads */
  #view-room *{ animation:none !important; }
  #view-room .rm-sheen{ display:none !important; }
  /* no eased ring-fill / ghost pop either: values and the shelf just update */
  #view-room .rm-ring .prog, #view-room .rm-gh, #view-room .rm-ag-name{ transition:none !important; }
}