:root{
  --ps-blue:#005495;--ps-navy:#09304d;--ps-ink:#2a3d50;--ps-muted:#5b6b78;
  --ps-gold:#ffbd59;--ps-line:#e3eaf0;--ps-font-heading:Montserrat,system-ui,sans-serif;
  --ps-font-body:Lato,system-ui,sans-serif;--ps-font-accent:"Playfair Display",Georgia,serif;
  color:var(--ps-ink);font-family:var(--ps-font-body);background:#f8fafc;
}
*{box-sizing:border-box}
body{margin:0;height:var(--room-height,100dvh);display:flex;flex-direction:column;overflow:hidden}
[hidden]{display:none!important}
main{flex:1;min-height:0;width:100%}
.room-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,27vw,400px);height:100%;min-height:0}
.workshop{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f4f7fa;position:relative}
.stage-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px}
.player{position:relative;aspect-ratio:16/9;width:min(100%,calc((var(--room-height,100dvh) - 40px)*16/9));background:var(--ps-navy);overflow:hidden;border-radius:4px}
video{display:block;width:100%;height:100%;object-fit:contain}
.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:linear-gradient(140deg,#f4f8fb,#e4eef5);color:var(--ps-blue);font:500 24px var(--ps-font-accent)}
button{cursor:pointer;font:600 12px var(--ps-font-heading);border:0;background:var(--ps-blue);color:white;border-radius:8px;padding:12px}
button:disabled{opacity:.5;cursor:default}
button:hover:not(:disabled){background:var(--ps-navy)}
button:focus-visible,input:focus-visible{outline:3px solid var(--ps-gold);outline-offset:2px}
.sound-pill{position:absolute;left:16px;bottom:16px;border-radius:24px;box-shadow:0 2px 10px #0003;animation:unmute-glow 3s ease-in-out 3}
.resume{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#connection{position:absolute;top:12px;left:12px;right:12px;font-size:12px;color:var(--ps-ink);margin:0;padding:10px 12px;background:#ffffffee;border-radius:6px;z-index:2}
.conversation{display:flex;flex-direction:column;min-height:0;min-width:0;background:white;border-left:1px solid var(--ps-line);overflow:hidden}
.chat-heading{flex-shrink:0;padding:12px 16px;border-bottom:1px solid var(--ps-line)}
h2{font:600 13px/1.35 var(--ps-font-heading);color:var(--ps-navy);margin:0 0 3px}
.room-identity{display:flex;gap:9px;align-items:center}.room-identity img{flex-shrink:0}.room-identity p{margin:0;color:var(--ps-muted);font-size:11px}
.room-presence{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ps-muted);margin-top:10px}
.session-dot{height:6px;width:6px;flex-shrink:0;border-radius:50%;background:#9aa7b1}
.session-dot.connected{background:#269b61;animation:session-pulse 2.8s ease-out infinite}
.attendees{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font-variant-numeric:tabular-nums}
.attendees svg{height:14px;width:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.messages{flex:1;min-height:56px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ccd8e2 transparent;padding:14px 16px}
.message{margin-bottom:13px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.message-name{display:inline;font:700 12px var(--ps-font-body);color:var(--ps-blue)}
.message-text{display:inline;white-space:pre-wrap;margin:0 0 0 7px;line-height:1.5}
.badge{display:inline-block;vertical-align:middle;font:700 9px var(--ps-font-heading);color:var(--ps-blue);background:#dceeff;border-radius:4px;padding:3px 5px;margin-left:7px;letter-spacing:.02em}
.highlight{border-left:3px solid var(--ps-gold);padding:10px;background:#fff8ec;border-radius:4px}
.message-host,.message-cohost{padding:11px 12px;border-left:3px solid var(--ps-blue);border-radius:0 7px 7px 0;background:#eef6fc}
.message-host .message-name,.message-cohost .message-name{display:block;margin-bottom:5px;font-size:12px}
.message-host .message-text,.message-cohost .message-text{display:block;margin:0}
.message-cohost{border-left-color:var(--ps-gold);background:#fff8ec}
.message-cohost .badge{color:var(--ps-navy);background:#ffdfae}
#chat-form{flex-shrink:0;display:flex;padding:12px;gap:8px;border-top:1px solid var(--ps-line);padding-bottom:max(12px,env(safe-area-inset-bottom))}
input{width:100%;min-width:0;border:1px solid #dce5ed;border-radius:8px;padding:11px 10px;font:14px var(--ps-font-body);background:#f8fafc;color:var(--ps-ink)}
input::placeholder{color:#7a8792}
#send{width:42px;flex-shrink:0;padding:8px;font-size:17px}
.card-tab{width:100%;border-radius:0;display:flex;justify-content:space-between;align-items:center;padding:11px 16px;font-size:12px}
#card-arrow{font-size:16px}
#card-tray{flex-shrink:0;border-top:1px solid var(--ps-line)}
#card-body{max-height:clamp(64px,calc(var(--room-height,100dvh) - 300px),380px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#card-body iframe{display:block;width:100%;border:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:900px){
  body{--stage-height:min(56.25vw,calc(var(--room-height,100dvh)*.42))}
  .room-grid{display:flex;flex-direction:column}
  .workshop{flex-shrink:0}
  .stage-content{flex:none;padding:0;background:var(--ps-navy)}
  .player{width:min(100%,calc(var(--room-height,100dvh)*.42*16/9));border-radius:0}
  .conversation{flex:1;border-left:0;border-top:1px solid var(--ps-line)}
  .chat-heading{padding:12px 14px}
  .messages{padding:12px 14px}
  .sound-pill{left:10px;bottom:10px;padding:9px 12px;font-size:11px}
  .cover{font-size:20px}
  #card-body{max-height:clamp(64px,calc(var(--room-height,100dvh) - var(--stage-height) - 254px - env(safe-area-inset-bottom)),380px)}
}
@keyframes unmute-glow{0%,100%{box-shadow:0 2px 10px #0003}50%{box-shadow:0 0 0 4px #ffbd5930,0 0 20px #ffbd5930}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.sound-pill{animation:none}}

@media(max-width:900px){
  .compact-room .player{width:min(100%,calc(var(--room-height,100dvh)*.28*16/9))}
  .compact-room .stage-content{background:var(--ps-navy)}
  .compact-room{--stage-height:min(56.25vw,calc(var(--room-height,100dvh)*.28))}
  .compact-room .chat-heading{padding:10px 14px}.compact-room .room-presence{margin-top:6px}
  .compact-room .messages{min-height:40px}
  .compact-room #card-body{max-height:clamp(64px,calc(var(--room-height,100dvh)*.72 - 234px - env(safe-area-inset-bottom)),240px)}
}

.sound-pill{display:inline-flex;align-items:center;gap:7px}
.sound-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

@keyframes session-pulse{0%{box-shadow:0 0 0 0 #269b6140}75%,100%{box-shadow:0 0 0 4px #269b6100}}
@media(prefers-reduced-motion:reduce){.session-dot.connected{animation:none}}