:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#101012;color:#ededee;--chat-width:360px;--viewport-height:100dvh}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #edaa70;outline-offset:-3px}button:hover,a:hover{color:#ffd2a0}.room{height:var(--viewport-height);display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#101012}.topbar{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #2c2c30;gap:12px}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.7px}.brand-icon{display:grid;place-items:center;background:#2b211c;color:#efa966;font-size:17px;width:35px;height:35px;border-radius:10px;padding-left:2px}.brand-sub{font-size:12px;font-weight:400;letter-spacing:1.4px;color:#aaa6a3;margin-left:12px}.actions{display:flex;align-items:center;gap:12px}.broadcast-button{height:44px;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid #3b3530;border-radius:9px;background:#201c1a;color:#e7e1dc;font-size:14px}.live-dot{width:8px;height:8px;border-radius:50%;background:#e15f55;box-shadow:0 0 0 3px rgba(225,95,85,.13)}.view-switch{display:flex;padding:4px;background:#1c1c20;border:1px solid #303035;border-radius:10px;gap:2px}.view-switch button{background:none;border:0;border-radius:6px;min-height:36px;padding:0 16px;font-size:14px;color:#aaaab4}.view-switch button[aria-pressed=true]{background:#3a3027;color:#ffd2a0}.icon-button{width:44px;height:44px;border:1px solid #303035;border-radius:9px;background:transparent;display:grid;place-items:center}.icon-button svg{width:20px;height:20px}.stage{display:grid;grid-template-columns:minmax(0,1fr) 7px var(--chat-width);flex:1;min-height:0;overflow:hidden}.video-panel{min-width:0;min-height:0;background:#000;display:flex;flex-direction:column;overflow:hidden}.player-holder{position:relative;flex:1;min-height:0;overflow:hidden}iframe{display:block;border:0}.player-holder iframe{position:absolute;top:50%;left:50%;transform-origin:center;transform:translate(-50%,-50%);background:#000}.video-footer{height:48px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;flex:none;background:#141416;border-top:1px solid #26262b;font-size:14px;color:#ababaf;gap:10px}.channel{display:flex;align-items:center;gap:9px;color:#dedee2}.channel-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#29202f;color:#d9aff6;font-size:13px;font-weight:700}.video-footer a{min-height:44px;display:flex;align-items:center;gap:6px}.resize-handle{background:#161618;cursor:col-resize;display:grid;place-items:center;touch-action:none}.resize-handle span{width:2px;height:36px;background:#424248;border-radius:2px}.resize-handle:hover,.resize-handle:focus-visible{background:#5b4330}.chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:#161618}.chat-label{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding-left:15px;border-bottom:1px solid #2a2a2d;font-size:14px;color:#c4c4ca}.chat-label a{width:44px;height:44px;display:grid;place-items:center;font-size:22px}.chat-body{position:relative;flex:1;min-height:0}.chat-body iframe{position:absolute;inset:0;width:100%;height:100%;background:#161618}.chat-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px;font-size:16px}.chat-loading p{margin:12px 0}.chat-loading .help-copy{max-width:250px;font-size:14px;line-height:1.5;color:#a4a4ae}.chat-loading a{color:#ffd2a0;padding:12px}.chat-loading button{background:#2b2b30;border:1px solid #44444c;border-radius:8px;padding:12px;margin-top:8px}.chat-loading[hidden]{display:none}.chat-body iframe.pending{visibility:hidden}.loader{width:22px;height:22px;border:2px solid #414147;border-top-color:#efa966;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.room[data-view=video] .stage{grid-template-columns:1fr}.room[data-view=video] .chat-panel,.room[data-view=video] .resize-handle{display:none}.room[data-view=chat] .stage{grid-template-columns:1fr}.room[data-view=chat] .video-panel,.room[data-view=chat] .resize-handle{display:none}.notice{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#363038;border:1px solid #64576a;padding:12px 18px;border-radius:10px;font-size:14px;max-width:90%;z-index:5}.dragging iframe{pointer-events:none}
.broadcast-dialog{width:min(92vw,460px);padding:0;border:1px solid #3b3b42;border-radius:16px;background:#1b1b1f;color:#eee;box-shadow:0 25px 80px #000b}.broadcast-dialog::backdrop{background:#08080bcc;backdrop-filter:blur(4px)}.dialog-card{padding:22px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.dialog-head h2{font-size:22px;margin:3px 0 0}.eyebrow{margin:0;color:#d69d69;font-size:12px;letter-spacing:1.2px;text-transform:uppercase}.dialog-close{width:40px;height:40px;border:0;border-radius:9px;background:#29292e;font-size:25px;line-height:1}.field{display:grid;gap:8px;margin:16px 0;font-size:14px;color:#c6c3c1}.field input,.field select{width:100%;height:46px;padding:0 13px;border:1px solid #44444c;border-radius:9px;background:#111114;color:#f3f3f4;font:inherit}.field small{color:#8f8f98;line-height:1.4}.form-error{padding:10px 12px;border-radius:8px;background:#3a2020;color:#ffb6b0;font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.dialog-actions button{min-height:44px;padding:0 16px;border-radius:9px;font-weight:600}.secondary-button{border:1px solid #414148;background:#29292e}.primary-button{border:1px solid #d98f52;background:#d98f52;color:#17100b}.primary-button:disabled{opacity:.55;cursor:wait}
@media(max-width:760px){.topbar{height:58px;padding:0 10px;gap:7px}.brand{font-size:19px;gap:7px}.brand-icon{width:29px;height:29px;font-size:14px}.brand-sub{display:none}.actions{gap:6px}.broadcast-button{width:42px;padding:0;justify-content:center}.broadcast-button #manageLabel{display:none}.view-switch{padding:3px;border-radius:9px}.view-switch button{padding:0 10px;min-height:38px}.icon-button{width:38px;height:44px;border:none}.stage{grid-template-columns:1fr;grid-template-rows:minmax(0,2fr) minmax(0,3fr)}.resize-handle{display:none}.video-footer{height:38px;padding:0 12px;font-size:13px}.video-footer a{min-height:36px}.chat-panel{border-top:1px solid #353539}.chat-label{height:36px}.chat-label a{height:36px}.room[data-view=video] .stage,.room[data-view=chat] .stage{grid-template-rows:minmax(0,1fr)}.room[data-view=video] .video-footer{display:none}}
@media(max-height:500px) and (orientation:landscape){.topbar{height:48px}.stage{grid-template-columns:minmax(0,1fr) 7px min(40vw,360px);grid-template-rows:minmax(0,1fr)}.resize-handle{display:grid}.video-footer{display:none}.chat-label{height:32px}.chat-label a{height:32px}}
@media(max-width:360px){.brand-icon{display:none}.view-switch button{padding:0 8px}.topbar{padding:0 8px}}
@media(prefers-reduced-motion:reduce){.loader{animation:none}}

/* Immersive view: the player owns the whole viewport. */
.room.cinema{position:fixed;inset:0;width:100%;height:100dvh;padding:0;background:#000}
.room.cinema .topbar,.room.cinema .resize-handle,.room.cinema .chat-panel,.room.cinema .video-footer{display:none!important}
.room.cinema .stage{display:block;width:100%;height:100%;flex:1}
.room.cinema .video-panel{display:flex!important;width:100%;height:100%}
.cinema-tools{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:8;display:flex;align-items:flex-start;gap:8px;font-size:14px}
.cinema-tools[hidden],.cinema-chat[hidden],#cinemaOptions[hidden]{display:none}
.cinema-tools button{min-height:40px;border:1px solid #ffffff35;border-radius:8px;padding:8px 12px;background:#111d;color:white}
#cinemaMenu{opacity:.3;transition:opacity .15s}#cinemaMenu:hover,#cinemaMenu:focus-visible,#cinemaMenu[aria-expanded=true]{opacity:1}
#cinemaOptions{padding:10px;border:1px solid #ffffff35;background:#111e;border-radius:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:min(420px,75vw)}
#cinemaOptions label{display:grid;gap:7px;flex:1;min-width:130px}#cinemaOptions input{width:100%;accent-color:#d98f52}
.cinema-chat{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(65px,env(safe-area-inset-bottom));width:min(340px,36vw);max-height:65%;overflow:hidden;z-index:4;background:rgba(0,0,0,var(--overlay-alpha,.55));padding:12px;border-radius:8px;pointer-events:none;color:#fff;font-size:16px;line-height:1.4;text-shadow:0 1px 3px #000}
#overlayMessages{display:flex;flex-direction:column;gap:10px}.overlay-message{overflow-wrap:anywhere;white-space:pre-wrap}.overlay-message b{color:#efbe8d;font-size:14px}.overlay-media{display:block;max-width:160px;max-height:115px;object-fit:contain;margin-top:4px}.overlay-emoji{width:24px;height:24px;vertical-align:middle;object-fit:contain}#overlayStatus{font-size:14px;color:#c7c7cb;margin:0 0 8px}#overlayStatus:empty{display:none}
@media(max-width:600px){.cinema-chat{width:min(280px,55vw);font-size:14px;padding:8px;max-height:55%}.overlay-media{max-width:110px;max-height:80px}.brand{font-size:17px}.brand-icon{display:none}.view-switch button{padding:0 8px}.actions{gap:4px}.broadcast-button{width:36px}}

.field select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dddde2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}

/* Send through the existing iframe to retain its identity, draft and media picker. */
.compose-bar{display:none}.room.cinema.composer-open .chat-panel{display:flex!important;position:absolute;z-index:10;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:min(390px,calc(100% - 24px));height:min(540px,calc(var(--viewport-height) - 76px));border:1px solid #414148;border-radius:12px;overflow:hidden;box-shadow:0 12px 48px #0008}
.room.cinema.composer-open .compose-bar{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;min-height:40px;background:#202025;font-size:14px}
.compose-bar button{border:0;border-radius:6px;background:#35353d;padding:8px 10px;color:#fff;font-size:14px}.room.cinema.composer-open .chat-label{display:none}
.room.cinema{height:var(--viewport-height);bottom:auto}.cinema-tools{max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:flex-end}
.icon-button[hidden],#cinemaFullscreen[hidden]{display:none}.install-copy{font-size:16px;line-height:1.55;color:#c7c7d0}.broadcast-dialog{max-height:calc(100dvh - 24px);overflow-y:auto}.field input,.field select{font-size:16px}
@media(max-width:760px){
 .topbar{height:44px;padding:0 8px;gap:4px}.topbar .brand{display:none}.actions{width:100%;justify-content:space-between;gap:4px}.view-switch{border:0;padding:2px}.view-switch button{min-height:36px;padding:0 12px}.icon-button,.broadcast-button{height:40px;min-width:36px}.chat-label{display:none}
 .room:not(.cinema)[data-view=both] .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(56.25vw,38%)) minmax(0,1fr)}
 .room:not(.cinema) .chat-panel{border-top:1px solid #29292d}.room:not(.cinema) .resize-handle{display:none}
 .room.keyboard-open:not(.cinema)[data-view=both] .stage{grid-template-rows:minmax(0,23%) minmax(0,1fr)}
 .room.cinema.composer-open .chat-panel{height:calc(var(--viewport-height) - 76px);max-height:560px}
}
@media(pointer:coarse) and (min-width:600px) and (max-height:600px){
 .topbar{height:40px;padding:0 10px}.topbar .brand{display:none}.actions{width:100%;justify-content:space-between}.broadcast-button #manageLabel{display:none}.broadcast-button{width:38px;padding:0;justify-content:center}.view-switch button{min-height:32px}.icon-button{height:36px}.chat-label{display:none}
 .room.cinema.composer-open .chat-panel{width:min(380px,48vw);height:calc(var(--viewport-height) - 24px);right:max(12px,env(safe-area-inset-right));bottom:12px}
 .room.cinema.composer-open .cinema-tools{right:auto;left:max(12px,env(safe-area-inset-left));max-width:45%}
}
@media(max-height:360px){.room.cinema.composer-open .chat-panel{height:calc(var(--viewport-height) - 12px);bottom:6px}.room.cinema.composer-open .cinema-tools{right:auto;left:6px;max-width:40%}}
@media(max-width:360px){.room:not(.cinema) .view-switch button{padding:0 8px}}

/* Mobile chat size changes layout without recreating either iframe. */
.mobile-chat-size{display:none}
@media(max-width:760px), (pointer:coarse) and (max-width:1100px){
 .video-panel{position:relative}
 .room[data-view=both]:not(.cinema) .video-panel>.mobile-chat-size{display:block;position:absolute;top:8px;left:max(8px,env(safe-area-inset-left));z-index:2;min-height:44px;padding:0 12px;border:1px solid #ffffff30;border-radius:9px;background:#171719dc;color:#eee;font-size:14px;box-shadow:0 2px 10px #0004}
 .room.cinema .cinema-tools>.mobile-chat-size{display:block}
 .room:not(.cinema)[data-view=both][data-chat-size=compact] .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) clamp(180px,30dvh,240px)}
 .room:not(.cinema)[data-view=both][data-chat-size=hidden] .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 .room:not(.cinema)[data-view=both][data-chat-size=hidden] .chat-panel{display:none}
 .room:not(.cinema)[data-view=both][data-chat-size=compact] .resize-handle,.room:not(.cinema)[data-view=both][data-chat-size=hidden] .resize-handle{display:none}
 .room.keyboard-open:not(.cinema)[data-view=both][data-chat-size=compact] .stage{grid-template-rows:minmax(0,23%) minmax(0,1fr)}
 .room.cinema[data-chat-size=compact] .cinema-chat{max-height:28%;width:min(300px,44vw);padding:8px;font-size:14px}
 .room.cinema[data-chat-size=compact] .overlay-media{max-height:64px;max-width:100px}
 .room.cinema[data-chat-size=compact] #overlayMessages{gap:6px}
}