/* Room surfaces and transport controls. Playback geometry is intentionally
   untouched; fullscreen owns its own viewport and toolbar rules. */
.room-shell{--room-ink:#5c473c;--room-soft:#9a8170;--room-line:#eadccf}
.room-header{padding-top:15px;padding-bottom:15px}
.room-heading{gap:12px}
.room-heading-icon{width:42px;height:42px;border:0;border-radius:13px;background:#ead8c9;color:#967051;box-shadow:none}
.room-heading-icon>svg{width:23px;height:23px}
.room-heading strong{font-size:16px;font-weight:700;letter-spacing:-.25px}
.room-code{width:max-content;min-height:26px;gap:7px;margin:1px 0 -5px;padding:3px 5px 3px 0;letter-spacing:1.05px;color:#957965;border-radius:6px}
.room-code>svg:last-child{width:14px;height:14px;color:#9a765b}
.room-code:hover{color:#664b38;background:#ead8c64d}
.room-header .header-actions{gap:8px}
.people-button{gap:8px;padding:9px 12px;min-height:40px;border:0;background:#eedece;color:#775740;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff45}
.people-button>svg{width:20px;height:20px}
.people-button>b{min-width:15px;height:auto;background:transparent;color:inherit;font-size:12px;font-weight:700;border-radius:0}
.people-button:hover{background:#e5ceb9;color:#60452f}
.room-host-action.stop-action{min-height:40px;border:0;border-radius:12px;background:#fffaf4;box-shadow:0 1px 3px #6d4d3610;color:#8e674c;padding:10px 13px}
.room-host-action.stop-action>svg{width:12px;height:12px}
.room-host-action.stop-action:hover{background:#eddccb;color:#765239}
.room-header .icon-button{width:38px;min-width:38px;height:40px;min-height:40px;border:0;border-radius:12px;color:#9b7c64}
.room-header .icon-button:hover{background:#edddcd;color:#6b4d36}
.stage.stage-idle{background:#fcf6ee}
.stage-welcome{padding:36px 30px;justify-content:center;gap:18px}
.screening-content{gap:23px;width:min(100%,470px);margin:0}
.screening-symbol{width:62px;height:62px;display:grid;place-items:center;flex-shrink:0;border-radius:19px;background:#f0e1d2;color:#b28c6b}
.screening-symbol>svg{width:27px;height:27px;stroke-width:1.65}
.screening-intro{gap:10px}
.stage-welcome h1{font-size:clamp(23px,2.4vw,31px);letter-spacing:-.8px;color:#684b38}
.stage-welcome p{font-size:12px;color:#9e826d;line-height:1.55}
.movie-back{position:absolute;top:18px;left:18px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;color:#a18167;background:#f2e6d9;transition:background-color .15s,color .15s}
.movie-back:hover{background:#e8d6c2;color:#755139}
.movie-back>svg{width:18px;height:18px}
.has-movie.stage-welcome{padding-top:56px;padding-bottom:34px}
.movie-selection-card{border:0;background:#f5e9dc;padding:10px;gap:17px;border-radius:17px;box-shadow:none}
.movie-cover{min-height:120px;min-width:139px;width:139px;border-radius:10px;background:#e6d2bd}
.movie-cover-tag{font-size:8px;text-transform:none;letter-spacing:.15px;border:0;background:#34251ec2;padding:4px 6px;color:#fff9f2;border-radius:5px}
.movie-selection-info{gap:10px;padding:8px 8px 8px 0}
.movie-selection-info>strong{font-size:13px;font-weight:650;line-height:1.45;color:#795840}
.movie-facts{font-size:10px;color:#aa8c70}
.ready-tracks{gap:6px}
.ready-tracks .track-trigger{height:29px;min-height:29px;padding:4px 8px;border:0;border-radius:8px;background:#e9d8c5;color:#8c6749;font-size:10px}
.ready-tracks .track-trigger:hover{background:#dec6ad}
.screening-actions{gap:14px}
.stage-welcome .cinema-primary{min-height:43px;border:0;border-radius:12px;background:#e9b08f;color:#6d462d;box-shadow:0 2px 5px #a06b4310;padding:11px 21px;font-size:12px}
.stage-welcome .cinema-primary:hover{background:#e6a780;box-shadow:0 3px 9px #93603a15}
.stage-welcome .cinema-primary>svg{width:16px;height:16px}
.screening-members{gap:9px;text-align:left;padding:5px 7px;border-radius:10px;min-height:43px;color:#9b795d}
.screening-members:hover{background:#ecdac754}
.screening-members-summary{display:flex;flex-direction:column;gap:4px;line-height:1.2}
.screening-members-summary>strong{font-size:10px;font-weight:600;color:#957053}
.screening-members-summary>small{font-size:9px;color:#b09379}
.screening-members>.member-avatars .avatar{width:24px!important;height:24px!important;border-color:#fcf6ee}
.screening-members>svg{opacity:.7;margin-left:1px}

/* A proper timeline row keeps seek, time and track controls from competing. */
.stage:not(.is-fullscreen):not(:fullscreen) .controls{display:flex;flex-wrap:nowrap;align-items:center;gap:7px;min-height:87px;padding:35px 17px 12px;background:linear-gradient(transparent,#13100fe8 53%,#13100ff5);box-sizing:border-box}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek{position:absolute;top:11px;left:18px;width:calc(100% - 36px);right:18px;min-width:0;height:20px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;accent-color:#edbc9f;cursor:pointer;touch-action:pan-x}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek::-webkit-slider-runnable-track{height:3px;border:0;border-radius:8px;background:linear-gradient(to right,#f3c7ad 0%,#f3c7ad var(--seek-progress,0%),#fff5e947 var(--seek-progress,0%),#fff5e947 100%)}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:0;border-radius:50%;background:#f3c7ad;box-shadow:0 0 0 3px #f6d5be13}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek::-moz-range-track{height:3px;border:0;border-radius:8px;background:#fff5e947}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek::-moz-range-progress{height:3px;border-radius:8px;background:#f3c7ad}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#f3c7ad}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek:focus-visible{outline:0}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #f5d8c653}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .icon-button{width:34px;height:34px;min-width:34px;min-height:34px;border:0;border-radius:9px;display:grid;place-items:center;background:transparent;color:#fff7ef;flex-shrink:0}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .icon-button:hover{background:#ffffff14}
.stage:not(.is-fullscreen):not(:fullscreen) .controls>.icon-button:first-child{margin-left:-4px;margin-right:3px}
.stage:not(.is-fullscreen):not(:fullscreen) .controls>.icon-button:last-child{margin-left:2px;margin-right:-4px}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .playback-time{font-size:11px;line-height:1.2;font-weight:500;letter-spacing:.1px;color:#f3e4d6;white-space:nowrap;flex-shrink:0}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .duration-time{display:block!important;margin-right:auto;color:#c1b4a8}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .duration-time::before{content:'/';margin-right:7px;color:#a8988d}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger{height:34px;min-height:34px;min-width:34px;padding:7px;border:0;background:transparent;border-radius:9px;color:#f5eade;gap:5px;flex-shrink:0}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger:hover{background:#ffffff14}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger>svg:first-child{width:19px;height:19px}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger>svg:last-child{display:none}
.stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger>span{font-size:10px;max-width:42px}
.stage:not(.is-fullscreen):not(:fullscreen)[data-controls-visible="true"] .custom-subtitle-overlay{bottom:max(93px,calc(var(--caption-letterbox,0px) + max(5%,14px)))}
.stage:not(.is-fullscreen):not(:fullscreen) .controls-reveal{border:0;background:#2119128f;color:#fce8d8;width:31px;height:27px;border-radius:8px;right:13px;bottom:10px}

@media(max-width:1000px){
  .stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger>span{display:none}
  .movie-cover{width:116px;min-width:116px;min-height:103px}
}
@media(max-width:760px){
  .room-header{height:68px;min-height:68px;padding:10px 13px;gap:8px}
  .room-heading{gap:9px}.room-heading-icon{width:35px;height:35px;border-radius:11px}.room-heading-icon>svg{width:20px;height:20px}
  .room-heading strong{font-size:14px}.room-code{min-height:21px;gap:5px;font-size:9px;margin-top:1px;padding-top:1px;padding-bottom:1px}.room-code>svg:last-child{width:12px;height:12px}
  .room-header .header-actions{gap:5px}.people-button{min-height:35px;padding:7px 9px;border-radius:10px;gap:6px}.people-button>svg{width:18px;height:18px}.people-button>b{font-size:11px;min-width:12px}
  .room-host-action.stop-action{min-height:35px;padding:8px 10px;border-radius:10px;font-size:11px}.room-header .icon-button{width:30px;min-width:30px;min-height:35px;height:35px;border-radius:10px}
  .stage-welcome{padding:20px 17px;gap:13px}.screening-content{gap:14px}.screening-symbol{width:44px;height:44px;border-radius:14px}.screening-symbol>svg{width:23px;height:23px}.stage-welcome h1{font-size:22px;letter-spacing:-.65px}.stage-welcome p{font-size:11px;max-width:280px}
  .movie-back{top:10px;left:10px;width:29px;height:29px;border-radius:9px}.movie-back>svg{width:16px;height:16px}.has-movie.stage-welcome{padding:43px 16px 17px}
  .movie-selection-card{padding:7px;gap:11px;border-radius:13px}.movie-cover{width:91px;min-width:91px;min-height:80px;border-radius:8px}.movie-cover-tag{font-size:7px;padding:3px 5px;left:6px;bottom:6px}.movie-selection-info{gap:6px;padding:3px 4px 3px 0}.movie-selection-info>strong{font-size:11px;line-height:1.4}.movie-facts{font-size:9px;gap:7px}.ready-tracks .track-trigger{height:24px;min-height:24px;padding:3px 5px;font-size:8px;border-radius:7px}
  .screening-actions{gap:10px}.stage-welcome .cinema-primary{min-height:37px;padding:9px 16px;font-size:11px;border-radius:10px}.screening-members{gap:7px;min-height:37px;padding:4px}.screening-members-summary{gap:3px}.screening-members-summary>strong{font-size:9px}.screening-members-summary>small{font-size:8px}.screening-members>.member-avatars .avatar{width:21px!important;height:21px!important}
  .stage:not(.is-fullscreen):not(:fullscreen) .controls{min-height:75px;padding:29px 11px 8px;gap:5px}
  .stage:not(.is-fullscreen):not(:fullscreen) .controls .seek{left:13px;right:13px;width:calc(100% - 26px);top:6px;height:20px}
  .stage:not(.is-fullscreen):not(:fullscreen) .controls .icon-button{width:32px;min-width:32px;height:32px;min-height:32px}
  .stage:not(.is-fullscreen):not(:fullscreen) .controls .playback-time{font-size:10px}
  .stage:not(.is-fullscreen):not(:fullscreen) .controls .duration-time::before{margin-right:5px}
  .stage:not(.is-fullscreen):not(:fullscreen) .controls .track-trigger{height:32px;min-height:32px;min-width:32px;padding:6px}
  .stage:not(.is-fullscreen):not(:fullscreen)[data-controls-visible="true"] .custom-subtitle-overlay{bottom:max(79px,calc(var(--caption-letterbox,0px) + 12px))}
}
@media(max-height:720px) and (max-width:760px){
  .stage-welcome{padding:13px 16px;gap:9px}.screening-content{gap:10px}.screening-symbol{width:36px;height:36px;border-radius:12px}.screening-symbol>svg{width:20px;height:20px}.stage-welcome h1{font-size:20px}.screening-intro{gap:6px}
  .has-movie.stage-welcome{padding:37px 15px 12px}.movie-cover{min-height:69px;width:83px;min-width:83px}.movie-selection-info>strong{font-size:10px}.movie-facts{font-size:8px}.screening-members>.member-avatars{display:none}
}
@media(prefers-reduced-motion:reduce){.movie-back{transition:none}}

/* Keyboard mode frees the header's space without resizing or remounting video. */
@media(max-width:760px){
 .room-shell:not(.chat-layer-shell)>.room-header{transition:margin-top .18s ease,opacity .14s ease;flex-shrink:0}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-shell:not(.chat-layer-shell){height:calc(var(--visual-height) + var(--visual-top,0px))!important;max-height:calc(var(--visual-height) + var(--visual-top,0px))!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-header{margin-top:-68px;opacity:0;pointer-events:none}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side .composer{position:relative!important;inset:auto!important;transform:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;flex-shrink:0}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side .chat-title{display:none}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side .review-inbox{display:none}
}
.room-dialog .invite-ticket{display:flex;align-items:center;flex-direction:column;gap:8px;width:100%;position:relative;margin:18px 0 22px;padding:20px 24px;border:1px solid #e0c7b1;border-radius:17px;color:#71513f;background:#f4e4d4;box-shadow:inset 0 1px #fff9f1;cursor:pointer;transition:background .15s,transform .15s;text-align:center}
.room-dialog .invite-ticket::before,.room-dialog .invite-ticket::after{display:none}
.room-dialog .invite-ticket:hover{background:#efd9c4}.room-dialog .invite-ticket:active{transform:scale(.985)}
.room-dialog .invite-ticket .invite-code-label{font-size:9px;font-weight:650;letter-spacing:2px;color:#a0836c}
.room-dialog .invite-ticket strong{font-size:29px;letter-spacing:5px;font-weight:750;line-height:1.2;font-variant-numeric:tabular-nums}
.room-dialog .invite-ticket .invite-copy{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#987258}
.room-dialog .member-nudge{display:flex;align-items:center;gap:5px;flex-shrink:0;border:1px solid #e5d3c0;border-radius:10px;padding:8px 10px;background:#f7ecdf;color:#92704f;font-size:11px;min-height:35px}
.room-dialog .member-nudge:hover{background:#efdfcb}.room-dialog .member-nudge:disabled{opacity:.5}
@media(prefers-reduced-motion:reduce){.room-header{transition:none!important}}
/* Keyboard composition is one compact input surface, not a squeezed chat panel. */
@media(max-width:760px),(pointer:coarse) and (max-width:1100px){
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-shell:not(.chat-layer-shell){top:var(--visual-top,0px)!important;height:var(--visual-height)!important;max-height:var(--visual-height)!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-header{display:none!important;margin:0!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:12px;min-height:0!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-main>.stage{height:100%!important;min-height:0!important;max-height:100%!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side{height:auto;min-height:0!important;border:0;box-shadow:none;background:transparent;overflow:visible}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side .chat{height:auto!important;background:transparent;overflow:visible}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side .chat>:not(.composer){display:none!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-side .composer{padding:0!important;background:transparent!important;position:relative!important;inset:auto!important;transform:none!important}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .stage-welcome{padding:14px 18px;min-height:0;gap:6px}
 :root[data-room-composing="true"][data-room-fullscreen="false"] .screening-content{gap:10px;margin:auto 0}
}
.room-notice{animation:room-notice-arrive 3.6s both;will-change:transform,opacity}
@keyframes room-notice-arrive{0%{opacity:0;transform:translate(-50%,-12px)}7%,89%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-5px)}}
@media(prefers-reduced-motion:reduce){.room-notice{animation:none}}

@media(max-width:760px),(pointer:coarse) and (max-width:1100px){
 :root[data-room-composing="true"][data-room-fullscreen="false"] .room-main>.stage:not(.stage-idle){max-height:min(100%,56.25vw)!important;align-self:center}
}

@media(max-width:760px),(pointer:coarse) and (max-width:1100px){
 :root[data-room-emoji-search="true"][data-room-fullscreen="false"] .room-main{grid-template-rows:minmax(0,min(26vw,calc(var(--visual-height)*.24))) auto;align-content:space-between}
 :root[data-room-emoji-search="true"][data-room-fullscreen="false"] .stage-welcome{padding:10px 14px}
 :root[data-room-emoji-search="true"][data-room-fullscreen="false"] .stage-welcome .screening-symbol,:root[data-room-emoji-search="true"][data-room-fullscreen="false"] .stage-welcome .screening-intro p{display:none}
 :root[data-room-emoji-search="true"][data-room-fullscreen="false"] .stage-welcome h1{font-size:16px}
}