/* Keep the transmission and conversation together; details stay below. */
.live-watch-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30vw,360px);gap:18px;height:var(--live-available,calc(100dvh - 170px));max-height:760px;min-width:0;min-height:0;align-items:stretch;scroll-margin-top:var(--live-scroll-top,100px)}
.live-watch-grid:fullscreen{width:100%;height:100%;max-height:none;padding:12px;background:var(--bg)}
.live-stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.live-watch-grid .live-stage>.preview{flex:1;min-height:0;aspect-ratio:auto;width:100%}
.camera-fit-control{position:absolute;top:10px;right:10px;z-index:8;width:auto;max-width:58%;margin:0;padding:5px 7px;border:1px solid #ffffff45;border-radius:7px;background:#0c1422;color:#f4f7ff;font-size:12px}
.preview:has(> .camera-fit-control option[value="cover"]:checked)>video{object-fit:cover}
.live-stage .video-actions{flex:none;margin:8px 0 0;gap:7px}
.live-stage .video-actions .button{padding:8px 10px;font-size:11px}
.live-chat{min-width:0;min-height:0}
.live-chat>.chat-panel{display:flex;flex-direction:column;height:100%;min-height:0}
.live-chat .chat-title{flex:none;padding:12px 14px;gap:8px}
.live-chat .chat-title strong{font-size:13px}
.live-chat .chat-messages{height:auto;flex:1;min-height:0;padding:12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.live-chat .chat-form{flex:none;padding:12px}
.live-chat .chat-welcome{margin:auto 0;padding:16px 12px}
.live-chat .chat-form .field{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:9px;white-space:nowrap}
.live-chat .chat-form .field input{flex:1;width:0;margin:0;padding:8px}
.live-chat .form-status{margin:6px 0 0;font-size:11px}
.live-chat .form-status:empty{margin:0;min-height:0}
.live-room-details{margin-top:22px}
.live-room-details .room-heading{margin-top:0}
.paid-room-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;align-items:start}
.chat-locked .chat-messages{display:flex;justify-content:center}
.chat-locked .button{margin-top:14px}
.minutes-panel{scroll-margin-top:100px}
.studio-primary{display:contents}
.studio-layout.studio-live{display:block}
.studio-live .studio-primary{display:grid}
.studio-live .studio-controls{margin-top:22px}
.studio-live #studio-note,.studio-live #prepare{display:none}
.studio-live .live-stage .button.full{width:auto}
@media(max-width:700px){
 .live-room-view .topbar{height:56px;padding:0 12px;gap:8px}
 .live-room-view .brand,.live-room-view .brand img{width:130px}
 .live-room-view .top-actions .button{padding:7px 9px;font-size:11px}
 .live-room-view .sidebar,.live-room-view .page-heading{display:none}
 .live-room-view .shell{display:block}
 .live-room-view main{padding:8px 12px 24px}
 .live-room-view .back{margin-bottom:8px;font-size:11px;line-height:20px}
 .live-watch-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px,min(52%,calc((100vw - 24px)*.5625 + 65px))) minmax(0,1fr);gap:8px;height:var(--live-available,calc(100dvh - 108px));max-height:none}
 .live-watch-grid:has(> .live-stage > .preview[data-camera-orientation="portrait"]){grid-template-rows:minmax(100px,54%) minmax(0,1fr)}
 .camera-fit-control{top:7px;right:7px;padding:5px;font-size:16px}
 .live-stage .preview{border-radius:10px}
 .live-stage .video-actions{margin-top:6px;gap:6px}
 .live-stage .video-actions .button{font-size:10px;padding:6px 9px}
 .live-stage .connection{font-size:10px;margin:0 0 0 auto;width:auto}
 .live-chat .chat-title{padding:8px 12px}
 .live-chat .chat-title strong{font-size:12px}
 .live-chat .chat-title span{font-size:10px}
 .live-chat .chat-messages{padding:10px 12px;gap:10px}
 .live-chat .chat-form{padding:8px 10px}
 .live-chat .chat-form .field{font-size:10px;margin-bottom:7px}
 .live-chat .chat-form .field input,.live-chat .chat-input input{font-size:16px;padding:6px 8px}
 .live-chat .chat-input .button{padding:7px 12px}
 .live-chat .chat-welcome{font-size:11px;padding:9px 12px}
 .live-room-details{margin-top:20px}
 .paid-room-details{grid-template-columns:1fr;gap:16px}
 .live-room-details .room-heading h1{font-size:20px}
 .live-stage .preview-placeholder{padding:8px}
 .live-stage .preview-placeholder>span{font-size:22px;margin-bottom:4px}
 .live-stage .preview-placeholder p{margin:4px auto 0;font-size:11px}
 .live-short-view .topbar{display:none}
 .live-room-view.live-short-view .live-watch-grid{grid-template-rows:minmax(76px,33%) minmax(0,1fr)}
}
@media(min-width:560px) and (max-width:1000px) and (orientation:landscape){
 .live-room-view .sidebar,.live-room-view .page-heading{display:none}
 .live-room-view .shell{display:block}
 .live-room-view .topbar{height:52px}
 .live-room-view main{padding:8px 12px 24px}
 .live-room-view .back{margin-bottom:6px;line-height:18px}
 .live-watch-grid{grid-template-columns:minmax(0,1fr) clamp(230px,38vw,340px);grid-template-rows:minmax(0,1fr);height:var(--live-available,calc(100dvh - 98px));gap:10px}
 .live-watch-grid:has(> .live-stage > .preview[data-camera-orientation="portrait"]){grid-template-rows:minmax(0,1fr)}
}
@media(min-width:701px), (min-width:560px) and (orientation:landscape){
 .live-watch-grid:has(> .live-stage > .preview[data-camera-orientation="portrait"] > .camera-fit-control option[value="contain"]:checked){
  grid-template-columns:minmax(0,min(52%,clamp(230px,calc((min(var(--live-available,620px),760px) - 45px)*.5625),450px))) minmax(230px,min(42%,460px));
  justify-content:center;
 }
}