:root {
  --ink:#0d0d18; --ink-soft:#171827; --paper:#f6f2ea;
  --coral:#ff6f61; --violet:#8b6cff; --aqua:#55dbc8;
  --text:#f8f5ef; --muted:#aaa9b8; --line:rgba(255,255,255,.11);
  --shadow:0 24px 70px rgba(0,0,0,.38);
}
::view-transition { pointer-events:none; }
::view-transition-group(*) { animation-duration:60ms; }

* { box-sizing:border-box; }
html { color-scheme:dark; background:var(--ink); }
body {
  margin:0; min-width:320px; min-height:100dvh; overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 13% 18%,rgba(255,111,97,.13),transparent 26rem),
    radial-gradient(circle at 70% 74%,rgba(139,108,255,.12),transparent 28rem),
    var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,textarea,input { font:inherit; }
button { color:inherit; }
button:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible {
  outline:3px solid var(--aqua); outline-offset:3px;
}

.app-shell { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; }
.room-topbar { grid-column:1/-1; }
.room-stage { position:relative; min-width:0; overflow:hidden; }
.room-topbar[hidden],.room-stage[hidden],.left-screen[hidden],.toast[hidden] { display:none!important; }
.speaker-circle { position:relative; width:min(62vh,620px); aspect-ratio:1; margin:auto; border-radius:50%; }
body.chat-open .app-shell { grid-template-columns:minmax(0,1fr) 360px; }
.chat-panel { grid-column:1; grid-row:2; }
body.chat-open .chat-panel { grid-column:2; }

.room-topbar {
  min-height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:24px; padding:14px 26px 14px 30px; border-bottom:1px solid var(--line);
  background:rgba(13,13,24,.88); z-index:20;
}
.brand {
  width:max-content; display:inline-flex; align-items:center; gap:10px; color:var(--paper);
  font:700 1.3rem Georgia,"Times New Roman",serif; letter-spacing:-.02em; text-decoration:none;
}
.brand-mark {
  width:38px; height:38px; display:grid; place-items:center; border-radius:52% 48% 42% 58%;
  background:var(--coral); color:var(--ink); font-size:1.45rem; transform:rotate(-7deg);
}
.room-meta { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:.83rem; }
.live-status {
  display:inline-flex; align-items:center; gap:8px; color:var(--paper); font-weight:750;
  letter-spacing:.08em; text-transform:uppercase;
}
.live-status span {
  width:8px; height:8px; border-radius:50%; background:var(--coral);
  box-shadow:0 0 0 5px rgba(255,111,97,.12);
}
.text-action,.chat-close { min-height:44px; border:0; background:transparent; cursor:pointer; }
.share-button {
  justify-self:end; display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  color:var(--paper); font-weight:700;
}
.share-button span { color:var(--aqua); font-size:1.2rem; }

.room-stage {
  min-height:0; display:grid; grid-template-rows:auto minmax(410px,1fr) auto auto;
  gap:8px; padding:18px 22px; isolation:isolate;
}
.room-stage::before,.room-stage::after {
  content:""; position:absolute; border-radius:46% 54% 65% 35%/52% 42% 58% 48%;
  filter:blur(1px); pointer-events:none; z-index:-1;
}
.room-stage::before {
  width:310px; height:230px; left:-120px; top:19%; background:rgba(85,219,200,.07);
  transform:rotate(18deg);
}
.room-stage::after {
  width:330px; height:270px; right:-110px; bottom:7%; background:rgba(255,111,97,.08);
  transform:rotate(-23deg);
}
.stage-intro { position:relative; z-index:3; text-align:center; }
.eyebrow {
  margin:0 0 4px; color:var(--aqua); font-size:.72rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
h1,h2,p { margin-top:0; }
h1 {
  margin-bottom:4px; color:var(--paper); font:500 clamp(2rem,4.4vw,4.6rem)/.98 Georgia,"Times New Roman",serif;
  letter-spacing:-.055em;
}
.room-hint { margin-bottom:0; color:var(--muted); font-size:.88rem; }
.stage-canvas { position:relative; min-height:410px; display:grid; place-items:center; }

.speaker-circle {
  width:min(52vh,510px); display:grid; place-items:center; border:1px solid rgba(246,242,234,.2);
  background:
    radial-gradient(circle at 42% 37%,rgba(255,255,255,.075),transparent 34%),
    radial-gradient(circle at 67% 71%,rgba(85,219,200,.075),transparent 35%),
    var(--ink-soft);
  box-shadow:inset 0 0 0 12px rgba(255,255,255,.015),var(--shadow);
}
.speaker-circle::before,.speaker-circle::after {
  content:""; position:absolute; border-radius:50%; pointer-events:none;
}
.speaker-circle::before { inset:-11px; border:1px dashed rgba(139,108,255,.34); }
.speaker-circle::after {
  width:92px; height:92px; left:2%; bottom:5%; background:rgba(139,108,255,.17); filter:blur(22px);
}
.circle-note {
  position:absolute; inset:50% auto auto 50%; display:grid; gap:2px; color:var(--muted);
  text-align:center; transform:translate(-50%,-50%);
}
.circle-note span { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.circle-note strong {
  color:rgba(248,245,239,.42); font:500 1.25rem Georgia,"Times New Roman",serif;
}
.people-zone { position:absolute; inset:0; }
.person-card { display:flex; align-items:center; gap:9px; min-width:0; }
.avatar {
  flex:0 0 auto; display:grid; place-items:center; border-radius:43% 57% 48% 52%/50% 44% 56% 50%;
  color:var(--ink); font-weight:850; letter-spacing:-.03em; box-shadow:0 10px 28px rgba(0,0,0,.3);
}
.person-copy { display:grid; gap:2px; min-width:0; }
.person-copy strong {
  overflow:hidden; color:var(--paper); font-size:.76rem; font-weight:750; line-height:1.15;
  text-overflow:ellipsis; white-space:nowrap;
}
.person-copy span { color:var(--muted); font-size:.66rem; line-height:1.15; }
.speaker-card { position:absolute; width:138px; flex-direction:column; text-align:center; }
.speaker-card .avatar { width:clamp(68px,7.1vw,88px); height:clamp(68px,7.1vw,88px); font-size:1.15rem; }
.speaker-card:nth-child(1) { left:15%; top:16%; transform:rotate(-2deg); }
.speaker-card:nth-child(2) { right:14%; top:18%; transform:rotate(2deg); }
.speaker-card:nth-child(3) { left:17%; bottom:14%; transform:rotate(2deg); }
.speaker-card:nth-child(4) { right:15%; bottom:13%; transform:rotate(-3deg); }
.person-card--coral .avatar { background:var(--coral); }
.person-card--violet .avatar { background:var(--violet); }
.person-card--aqua .avatar { background:var(--aqua); }
.person-card--sun .avatar { background:#ffd166; }
.person-card--rose .avatar { background:#f29cb4; }
.person-card--blue .avatar { background:#85a8ff; }
.person-card--mint .avatar { background:#9ce3cf; }
.person-card--plum .avatar { background:#c390dc; }
.person-card--peach .avatar { background:#ffb38a; }
.person-card--lime .avatar { background:#b9dc72; }
.person-card--self .avatar { background:var(--paper); }
.is-speaking .avatar {
  box-shadow:0 0 0 4px var(--ink-soft),0 0 0 7px var(--coral),0 14px 34px rgba(255,111,97,.28);
  animation:voice-pulse 2.4s ease-in-out infinite;
}
.is-speaking .person-copy span { color:var(--coral); font-weight:800; }
.self-participant.is-speaking .avatar {
  box-shadow:0 0 0 5px var(--ink),0 0 0 9px var(--aqua),0 0 34px rgba(85,219,200,.55);
}
.self-participant.speaker-card {
  left:50%; top:61%; bottom:auto; width:138px; padding:0; border:0; background:transparent; box-shadow:none;
  transform:translate(-50%,-50%);
}
.self-participant.speaker-card .avatar { width:clamp(68px,7.1vw,88px); height:clamp(68px,7.1vw,88px); }
.self-participant.is-muted .status { color:var(--muted); }
.self-participant.is-muted .status::before {
  content:""; display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:var(--muted);
}
.self-participant.is-speaking .status::before {
  content:""; display:inline-block; width:7px; height:7px; margin-right:4px; border-radius:50%; background:var(--aqua);
}
#micButton:disabled { opacity:.5; cursor:not-allowed; }

.listeners-zone { position:absolute; inset:0; pointer-events:none; }
.listeners-zone h2 {
  position:absolute; left:14px; bottom:14px; margin:0; color:rgba(248,245,239,.48);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
}
.listener-card { position:absolute; width:100px; }
.listener-card .avatar { width:42px; height:42px; font-size:.78rem; }
.listener-card--one { left:3%; top:18%; }
.listener-card--two { right:2%; top:22%; }
.listener-card--three { left:5%; top:52%; }
.listener-card--four { right:1%; top:57%; }
.listener-card--five { left:13%; bottom:1%; }
.listener-card--six { right:14%; bottom:0; }
.self-participant {
  left:50%; bottom:-1%; width:112px; padding:5px 8px 5px 5px; border:1px solid rgba(246,242,234,.2);
  border-radius:24px; background:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.26);
  transform:translateX(-50%);
}
.self-participant .avatar { width:46px; height:46px; }

.music-player {
  width:min(100%,410px); min-height:56px; justify-self:start; display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto 94px; align-items:center; gap:10px;
  padding:7px 12px 7px 8px; border:1px solid var(--line); border-radius:20px 20px 20px 8px;
  background:#12131f;
}
.room-bottom-row {
  min-width:0; display:grid; grid-template-columns:minmax(260px,410px) minmax(0,1fr);
  align-items:end; gap:18px;
}
.play-button {
  min-height:44px; padding:0 11px; border:0; border-radius:999px; background:var(--aqua);
  color:var(--ink); cursor:pointer; font-size:.68rem; font-weight:800;
}
.track-cover { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,var(--coral),var(--violet)); color:var(--paper); font-size:1.1rem; }
.track-copy { min-width:0; display:grid; gap:2px; }
.track-copy span { overflow:hidden; color:var(--muted); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.track-copy strong { overflow:hidden; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.sound-wave { height:22px; display:flex; align-items:center; gap:3px; }
.sound-wave i { width:2px; height:35%; border-radius:4px; background:var(--violet); }
.sound-wave i:nth-child(2) { height:72%; }
.sound-wave i:nth-child(3) { height:100%; }
.sound-wave i:nth-child(4) { height:55%; }
.volume-control { display:grid; gap:3px; }
.volume-control span { color:var(--muted); font-size:.57rem; font-weight:760; }
.volume-control input { width:94px; accent-color:var(--violet); }

.action-bar {
  position:static; z-index:10; justify-self:end; display:flex; align-items:stretch;
  justify-content:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:22px;
  background:#11121d; box-shadow:0 16px 46px rgba(0,0,0,.42);
}
.action-button {
  position:relative; min-width:92px; min-height:48px; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; padding:9px 13px; border:1px solid var(--line);
  border-radius:15px; background:#1b1c2a; color:var(--text); font-size:.74rem;
  font-weight:740; cursor:pointer;
}
.action-button:hover:not(:disabled) { border-color:rgba(255,255,255,.28); transform:translateY(-1px); }
.action-button:disabled { color:#7c7c89; cursor:not-allowed; }
.action-button--primary { min-width:130px; border-color:transparent; background:var(--paper); color:var(--ink); }
.action-button--primary span { color:var(--coral); font-size:1.12rem; }
.action-button--secondary { color:#d9d1ff; }
.action-button--leave { color:#ffaaa2; }
.unread-badge {
  min-width:19px; height:19px; display:grid; place-items:center; border-radius:50%;
  background:var(--coral); color:var(--ink); font-size:.65rem; font-weight:900;
}
.unread-badge[hidden] { display:none; }

.reaction-picker {
  margin:0; padding:8px; border:1px solid var(--line); border-radius:18px; background:#1b1c2a;
  box-shadow:var(--shadow);
}
.reaction-picker:popover-open { display:flex; align-items:center; gap:5px; }
.reaction-picker button {
  width:44px; height:44px; border:0; border-radius:13px; background:#292a3b; cursor:pointer; font-size:1.3rem;
}
.reaction-picker button:hover,.reaction-picker button:focus-visible { background:#3a3b51; }
.floating-reaction {
  position:fixed; z-index:70; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--paper); box-shadow:0 12px 35px rgba(0,0,0,.35); font-size:1.55rem; pointer-events:none;
  animation:reaction-float 1.6s ease-out forwards;
}
.toast {
  position:fixed; z-index:80; left:50%; bottom:28px; max-width:calc(100% - 32px); padding:11px 15px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; background:#242536; color:var(--paper);
  box-shadow:var(--shadow); font-size:.74rem; font-weight:760; pointer-events:none; transform:translateX(-50%);
}
.leave-dialog {
  width:min(420px,calc(100% - 32px)); padding:24px; border:1px solid rgba(255,255,255,.16); border-radius:22px;
  background:var(--paper); color:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.leave-dialog::backdrop { background:rgba(13,13,24,.72); }
.leave-dialog h2 { margin-bottom:8px; font:500 1.7rem Georgia,"Times New Roman",serif; }
.leave-dialog p { margin-bottom:20px; color:#5d5b67; line-height:1.45; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.dialog-actions button,.left-screen button { min-height:44px; padding:9px 14px; border:0; border-radius:13px; cursor:pointer; font-weight:800; }
#leaveCancel { background:#e9e5dc; color:var(--ink); }
#leaveConfirm { background:var(--coral); color:var(--ink); }
.left-screen {
  width:min(620px,calc(100% - 32px)); min-height:100dvh; margin:auto; display:grid; align-content:center;
  justify-items:start; gap:10px; text-align:left;
}
.left-screen h1 { margin-bottom:0; }
.left-screen > p:not(.eyebrow) { max-width:36ch; margin-bottom:12px; color:var(--muted); line-height:1.5; }
.left-screen button { background:var(--aqua); color:var(--ink); }

.chat-panel {
  min-width:0; min-height:0; display:none; grid-template-rows:auto minmax(0,1fr) auto;
  padding:24px 22px 18px; border-left:1px solid var(--line); background:var(--paper); color:var(--ink);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility 0s linear .2s;
}
.chat-panel.open { display:grid; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.chat-header {
  display:flex; align-items:start; justify-content:space-between; gap:14px; padding:2px 2px 20px;
  border-bottom:1px solid rgba(13,13,24,.12);
}
.chat-header .eyebrow { color:#6451c7; }
.chat-header h2 {
  margin-bottom:0; font:500 1.8rem Georgia,"Times New Roman",serif; letter-spacing:-.04em;
}
.chat-close { display:block; color:#5f5d68; font-size:.72rem; font-weight:750; }
.chat-feed { overflow-y:auto; padding:22px 2px 16px; }
.message { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; margin-bottom:22px; }
.message-avatar {
  width:38px; height:38px; display:grid; place-items:center; border-radius:48% 52% 43% 57%;
  font-size:.68rem; font-weight:850;
}
.message-avatar--coral { background:var(--coral); }
.message-avatar--aqua { background:var(--aqua); }
.message-avatar--violet { background:var(--violet); color:var(--paper); }
.message-avatar--self { background:var(--coral); }
.message header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.message header strong { font-size:.78rem; }
.message time { color:#85828e; font-size:.66rem; }
.message p { margin:4px 0 0; color:#3c3a45; font-size:.79rem; line-height:1.48; }
.system-note {
  width:max-content; max-width:100%; margin:2px auto 20px; padding:6px 10px;
  border-radius:999px; background:#e9e2ff; color:#5549a0; font-size:.65rem; font-weight:700;
}
.chat-composer {
  display:grid; grid-template-columns:1fr auto; gap:8px; padding-top:15px;
  border-top:1px solid rgba(13,13,24,.12);
}
.chat-composer label {
  grid-column:1/-1; color:#676570; font-size:.68rem; font-weight:760;
}
.chat-composer textarea {
  min-width:0; resize:none; padding:11px 12px; border:1px solid rgba(13,13,24,.15);
  border-radius:13px; background:#fffdf8; color:var(--ink);
}
.chat-composer textarea::placeholder { color:#8d8994; }
.chat-composer button {
  min-width:94px; border:0; border-radius:13px; background:var(--ink); color:var(--paper);
  font-size:.74rem; font-weight:760; cursor:pointer;
}
.chat-backdrop { display:none; }
.visually-hidden {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}
@keyframes voice-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }

@media (max-width:1180px) and (min-width:1001px) {
  .speaker-circle { width:min(47vh,460px); }
  .listener-card--one,.listener-card--three { left:1%; }
  .listener-card--two,.listener-card--four { right:0; }
  .action-button { min-width:78px; padding-inline:10px; }
}

@media (max-width:1000px) {
  body.chat-open { overflow:hidden; }
  body.chat-open .chat-panel { grid-column:auto; }
  .chat-backdrop {
    position:fixed; inset:0; z-index:35; display:block; opacity:0; visibility:hidden; pointer-events:none;
    background:rgba(13,13,24,.58); transition:opacity .28s ease,visibility 0s linear .28s;
  }
  body.chat-open .chat-backdrop { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  body {
    padding-bottom:env(safe-area-inset-bottom);
    background:
      radial-gradient(circle at 8% 14%,rgba(255,111,97,.13),transparent 19rem),
      radial-gradient(circle at 92% 64%,rgba(85,219,200,.1),transparent 20rem),
      var(--ink);
  }
  .app-shell { min-height:100dvh; display:block; }
  .room-topbar {
    min-height:66px; grid-template-columns:1fr auto; gap:10px; padding:10px 15px;
  }
  .brand { font-size:1.12rem; }
  .brand-mark { width:34px; height:34px; font-size:1.25rem; }
  .room-meta { justify-self:end; font-size:.68rem; }
  .participant-count { display:none; }
  .share-button { min-width:44px; min-height:44px; display:inline-flex; justify-content:center; padding:8px; font-size:0; }
  .share-button span { font-size:1.2rem; }
  .room-stage {
    min-height:calc(100dvh - 66px); display:grid; grid-template-rows:auto auto auto 82px;
    grid-template-columns:minmax(0,1fr); gap:9px; padding:14px 12px 94px; overflow:hidden;
  }
  .stage-intro .eyebrow { display:none; }
  h1 { margin-bottom:4px; font-size:clamp(2rem,11vw,3rem); }
  .room-hint { font-size:.75rem; }
  .stage-canvas { width:100%; min-width:0; min-height:360px; display:block; overflow:hidden; }
  .speaker-circle { width:min(calc(100vw - 46px),350px); margin:10px auto 0; }
  .speaker-card { width:112px; }
  .speaker-card .avatar { width:62px; height:62px; font-size:.9rem; }
  .speaker-card:nth-child(1) { left:10%; top:15%; }
  .speaker-card:nth-child(2) { right:9%; top:17%; }
  .speaker-card:nth-child(3) { left:11%; bottom:13%; }
  .speaker-card:nth-child(4) { right:10%; bottom:12%; }
  .listeners-zone {
    position:relative; top:auto; right:auto; bottom:auto; left:auto; width:100%; max-width:100%;
    min-width:0; display:flex; align-items:flex-start; gap:6px;
    padding:24px 4px 6px; overflow-x:auto; scrollbar-width:none; pointer-events:auto;
  }
  .listeners-zone::-webkit-scrollbar { display:none; }
  .listeners-zone h2 { position:absolute; left:4px; top:2px; bottom:auto; }
  .listener-card {
    position:static; width:44px; flex:0 0 44px; flex-direction:column; gap:5px; text-align:center;
  }
  .listener-card .avatar { width:38px; height:38px; }
  .listener-card .person-copy strong { max-width:44px; font-size:.65rem; }
  .listener-card .person-copy span {
    max-width:44px; color:#8f8e9e; font-size:.52rem; line-height:1.08; white-space:normal;
  }
  .self-participant {
    order:-1; padding:0; border:0; background:transparent; box-shadow:none; transform:none;
  }
  .self-participant .avatar { box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--paper); }
  .self-participant.speaker-card {
    left:50%; top:61%; bottom:auto; width:104px; order:initial; transform:translate(-50%,-50%);
  }
  .self-participant.speaker-card .avatar { width:62px; height:62px; }
  .music-player {
    width:100%; min-height:78px; grid-template-columns:40px minmax(0,1fr) auto;
    padding:6px 10px 8px 6px; border-radius:16px;
  }
  .track-cover { width:40px; height:40px; }
  .sound-wave { display:none; }
  .volume-control { grid-column:2/-1; grid-row:2; display:flex; align-items:center; gap:7px; }
  .volume-control input { width:100%; }
  .room-bottom-row { min-width:0; display:block; }
  .action-bar {
    position:fixed; left:10px; right:10px; bottom:max(8px,env(safe-area-inset-bottom));
    z-index:30; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px; padding:7px; border-radius:20px; transform:none;
  }
  .action-button { min-width:0; min-height:52px; padding:5px 3px; font-size:.59rem; line-height:1.1; }
  .action-button--primary { min-width:0; }
  .action-button--secondary,.action-button--leave { display:inline-flex; }
  .toast { bottom:calc(86px + env(safe-area-inset-bottom)); }
  body.chat-open .action-bar {
    left:auto; right:16px; bottom:calc(75dvh + 12px); z-index:45; width:auto; display:block;
    padding:0; border:0; background:transparent; box-shadow:none; pointer-events:none;
  }
  body.chat-open .action-bar > :not(#chatToggle) { display:none; }
  body.chat-open #chatToggle { min-height:44px; padding:8px 12px; pointer-events:auto; }
  .unread-badge { position:absolute; right:6px; top:5px; }
  .chat-panel {
    position:fixed; left:0; right:0; bottom:0; z-index:40; width:100%; height:75dvh; display:grid;
    padding:18px 16px max(15px,env(safe-area-inset-bottom)); border:0;
    border-radius:24px 24px 0 0; box-shadow:0 -20px 70px rgba(0,0,0,.46);
    transform:translateY(105%); transition:transform .28s ease,opacity .2s ease,visibility 0s linear .28s;
  }
  .chat-panel.open { transform:translateY(0); transition-delay:0s; }
  .chat-header { touch-action:none; }
}

@media (max-width:600px) {
  .app-shell,.room-topbar,.room-stage { width:min(390px,100%); }
  .action-bar { right:auto; width:min(370px,calc(100% - 20px)); }
  .chat-panel { right:auto; width:min(390px,100%); }
}

@media (max-width:380px) {
  .room-stage { padding-inline:9px; }
  .speaker-circle { width:min(calc(100vw - 34px),340px); }
  .speaker-card .avatar { width:58px; height:58px; }
  .action-button { font-size:.64rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important; animation-duration:.01ms!important;
    animation-iteration-count:1!important; transition-duration:.01ms!important;
  }
  .participant.is-speaking .status,.person-card.is-speaking .status { font-weight:800; text-decoration:underline; }
}

@keyframes reaction-float { from { opacity:1; transform:translateY(0) scale(.8); } to { opacity:0; transform:translateY(-70px) scale(1.16); } }