.room{--room-ink:#ece9e2;--room-soft:#ece9e29e;--room-green:#3ddc84;width:100%;min-width:0;color:var(--room-ink);background:#1a1917;border:1px solid #ffffff14;border-radius:18px;font-size:12px;position:relative;overflow:hidden;box-shadow:0 40px 90px #0000008c,inset 0 2px #ffffff08}.room-top{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:10px 14px;font-weight:500;display:flex}.room-name{text-overflow:ellipsis;min-width:0;overflow:hidden}.room-meta{flex:none}.room-name,.room-meta,.room-live,.room-count{white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.room-meta{color:var(--room-soft);font-variant-numeric:tabular-nums;gap:12px}.room-live{color:var(--room-ink);text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:600}.room-live i{background:#e5484d;border-radius:50%;width:7px;height:7px;animation:1.6s ease-in-out infinite room-pulse;box-shadow:0 0 0 3px #e5484d40}.room-grid{background:#0d0c0b;grid-template-columns:repeat(2,1fr);gap:5px;padding:5px;display:grid}@media (min-width:40rem){.room-grid{grid-template-columns:repeat(3,1fr)}}.room-tile{aspect-ratio:4/3;outline-offset:-2px;animation:.6s both room-tile-in;animation-delay:calc(var(--i) * 70ms);background:#16211c;border-radius:8px;outline:2px solid #0000;position:relative;overflow:hidden}.room-grid .room-tile.is-wide{display:none}@media (min-width:40rem){.room-grid .room-tile.is-wide{display:block}.room-grid .room-tile.is-wide.is-off{display:grid}}.room-tile.is-speaking{outline-color:var(--room-green)}.room-figure{width:100%;height:100%;position:absolute;inset:0}.room-tile[data-tone="1"]{background:linear-gradient(160deg,#4a3a30 0%,#211a16 70%)}.room-tile[data-tone="2"]{background:linear-gradient(160deg,#2f4252 0%,#151b21 70%)}.room-tile[data-tone="3"]{background:linear-gradient(160deg,#3a4a37 0%,#171d16 70%)}.room-tile[data-tone="4"]{background:linear-gradient(160deg,#473a4f 0%,#1c1722 70%)}.room-tile[data-tone="5"]{background:linear-gradient(160deg,#4d432f 0%,#1e1a13 70%)}.room-tile[data-tone="6"]{background:linear-gradient(160deg,#35404f 0%,#171a20 70%)}.room-tile[data-tone="7"]{background:linear-gradient(160deg,#3d3934 0%,#1a1816 70%)}.room-tile.is-off{background:#1f1e1c;place-items:center;display:grid}.room-initial{width:38px;height:38px;color:var(--room-ink);background:#3a3733;border-radius:50%;place-items:center;font-size:15px;font-weight:600;display:grid}.room-label{white-space:nowrap;background:#0000008c;border-radius:5px;align-items:center;gap:5px;max-width:calc(100% - 12px);padding:3px 7px;font-size:11px;font-weight:500;display:inline-flex;position:absolute;bottom:6px;left:6px}.room-label .is-muted{color:#ff6b66}.room-role{color:#1c1a17;letter-spacing:.04em;text-transform:uppercase;background:#f4c144e6;border-radius:4px;padding:2px 6px;font-size:9.5px;font-weight:700;position:absolute;top:6px;right:6px}.room-hand{color:#ffd166;opacity:0;background:#0000008c;border-radius:6px;place-items:center;width:24px;height:24px;animation:.4s 3.6s both room-in;display:grid;position:absolute;top:6px;right:6px}.room-bars{align-items:flex-end;gap:2px;height:11px;display:inline-flex}.room-bars i{background:var(--room-green);transform-origin:bottom;border-radius:2px;width:3px;height:100%;animation:.9s ease-in-out infinite room-bar}.room-bars i:nth-child(2){animation-delay:.15s}.room-bars i:nth-child(3){animation-delay:.3s}.room-bar{border-top:1px solid #ffffff0f;justify-content:center;align-items:center;gap:4px;padding:8px 10px 10px;display:flex}.room-bar>span{min-width:0;max-width:64px;color:var(--room-soft);border-radius:8px;flex-direction:column;flex:1 1 0;align-items:center;gap:3px;padding:5px 4px;font-size:9.5px;display:inline-flex}.room-bar .room-chat{position:relative}.room-dot{opacity:0;background:#e5484d;border-radius:50%;width:8px;height:8px;animation:.3s 2.2s both room-in;position:absolute;top:3px;right:calc(50% - 13px);box-shadow:0 0 0 2px #1a1917}.room-bar .room-leave{color:#fff;background:#e5484d;border-radius:999px;flex-direction:row;flex:none;gap:6px;max-width:none;margin-left:6px;padding:7px 11px;font-size:11px;font-weight:600}@keyframes room-pulse{50%{box-shadow:0 0 0 5px #e5484d1a}}@keyframes room-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes room-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes room-tile-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.room-tile,.room-dot,.room-hand,.room-live i,.room-bars i{opacity:1;animation:none;transform:none}}