/* v1.3.0 live/movie/chat feature set */
.chat-panel{grid-template-rows:48px auto auto minmax(0,1fr) auto}
.chat-header{position:relative}
.viewer-popover-button{height:25px;border:1px solid var(--border);border-radius:999px;background:#11161d;color:#b8c0ca;padding:0 8px;font-size:9px;font-weight:800;white-space:nowrap}
.viewer-popover-button:hover{border-color:#3a4654;color:#fff}
.viewer-popover{position:absolute;z-index:30;top:42px;left:8px;width:min(300px,calc(100% - 16px));max-height:330px;overflow:auto;border:1px solid #303945;border-radius:10px;background:rgba(13,17,22,.98);box-shadow:0 16px 42px rgba(0,0,0,.55);padding:7px 7px 7px 3px}
.viewer-popover-title{padding:5px 7px 8px;color:#84909d;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.viewer-popover-list{display:flex;flex-direction:column;gap:3px}.viewer-popover-row{display:flex;align-items:center;gap:6px;padding:7px 4px 7px 2px;border-radius:7px;font-size:11px}.viewer-popover-row:hover{background:#171c24}.viewer-popover-row .role-icon{margin:0}.viewer-mini-state{margin-left:auto;color:#87919e;font-size:9px}.viewer-popover-empty{padding:12px 4px;color:var(--muted);font-size:10px}
.chat-mention{display:inline-flex;align-items:center;min-height:18px;margin:0 1px;padding:0 6px;border:1px solid rgba(94,179,255,.28);border-radius:999px;background:rgba(49,169,255,.12);color:#bfe0ff;font-weight:850;line-height:1.2}
.chat-mention.mention-self{border-color:rgba(173,139,255,.46);background:rgba(169,128,255,.20);color:#f0e3ff}
.message.is-mentioned{border:1px solid rgba(94,179,255,.24);border-left:3px solid #31a9ff;background:rgba(32,56,79,.24)}
.message.is-mentioned:hover{background:rgba(35,62,88,.30)}
.message-line{min-width:0}.message-author{appearance:none;border:0;background:transparent;padding:0;margin:0 3px 0 0;cursor:pointer;font:inherit;font-weight:850;text-shadow:0 1px 2px rgba(0,0,0,.55)}.message-author:hover{text-decoration:underline}
.message-reply-quote{display:flex;align-items:center;gap:7px;width:100%;min-width:0;margin:0 0 4px;padding:4px 7px;border:0;border-left:2px solid #566171;border-radius:4px;background:#0c1015;color:#8994a1;text-align:left;font-size:9px}.message-reply-quote strong{flex:0 0 auto;color:#b4bec9}.message-reply-quote span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-reply-quote:hover{background:#141a21}
.message-actions{position:absolute;z-index:3;right:5px;top:3px;display:flex;gap:3px;opacity:0;transition:opacity .12s}.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}.message-action{height:23px;border:1px solid #303844;border-radius:5px;background:#1b2129;color:#aeb7c2;padding:0 6px;font-size:8px;font-weight:800}.message-action:hover,.message-action.active{color:#fff;border-color:#465362}.message-action.danger{color:#ff98a2;border-color:#583038;background:#211116}.hide-admin .message-action.moderation-delete{display:none}
.message-flash{animation:messageFlash 1.2s ease}@keyframes messageFlash{0%,100%{box-shadow:none}35%{box-shadow:inset 0 0 0 1px var(--accent);background:rgba(49,169,255,.12)}}
.chat-banner{margin:6px 8px 0;border:1px solid var(--border);border-radius:8px;padding:7px 9px;display:flex;align-items:flex-start;gap:8px;min-width:0;font-size:10px;line-height:1.35}.chat-banner strong{flex:0 0 auto;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.chat-banner span{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.announcement-banner{background:#171208;border-color:#5a4820;color:#f0d990}.announcement-banner strong{color:#ffcf4b}.pinned-banner{position:relative;width:calc(100% - 16px);min-height:58px;padding:0;gap:0;align-items:center;overflow:hidden;border-color:#303a46;border-radius:10px;background:linear-gradient(180deg,rgba(21,27,34,.98),rgba(13,17,22,.98));box-shadow:inset 3px 0 #f2c14e,0 5px 16px rgba(0,0,0,.18);color:#d4dbe4;text-align:left}.pinned-banner-main{appearance:none;border:0;background:transparent;color:inherit;min-width:0;flex:1;align-self:stretch;display:flex;align-items:center;gap:10px;padding:9px 8px 9px 11px;text-align:left;font:inherit;line-height:1.35;cursor:pointer;transition:background .14s ease}.pinned-banner-main::before{content:"";width:29px;height:29px;flex:0 0 29px;border:1px solid rgba(242,193,78,.26);border-radius:8px;background:rgba(242,193,78,.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c14e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M5 17h14'/%3E%3Cpath d='M6 3h12l-2 8 3 3H5l3-3-2-8z'/%3E%3C/svg%3E") center/15px 15px no-repeat}.pinned-banner-main:hover{background:rgba(255,255,255,.035)}.pinned-banner .pinned-banner-copy{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}.pinned-banner .pinned-banner-label{display:block;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;color:#9ba6b2;font-size:8px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.11em}.pinned-banner #pinnedText{display:-webkit-box;min-width:0;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#d7dde5;font-size:10px;line-height:1.4}.pinned-banner #pinnedText .role-icon{display:inline-flex;overflow:visible;-webkit-line-clamp:unset;vertical-align:middle}.pinned-banner #pinnedText .site-theme-user-badge{display:none;overflow:visible;-webkit-line-clamp:unset;vertical-align:middle}.theme-resident-evil .pinned-banner #pinnedText .site-theme-user-badge,.theme-fallout .pinned-banner #pinnedText .site-theme-user-badge,.theme-spooktober .pinned-banner #pinnedText .site-theme-user-badge{display:inline-flex}.pinned-unpin-button{appearance:none;flex:0 0 auto;height:27px;margin:0 8px 0 5px;border:1px solid #394553;border-radius:7px;background:#161c23;color:#aeb8c4;padding:0 9px;font-size:8px;font-weight:900;letter-spacing:.02em;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease}.pinned-unpin-button:hover{border-color:#776331;background:#201c12;color:#f6cf69}.pinned-unpin-button:focus-visible,.pinned-banner-main:focus-visible{outline:2px solid #f2c14e;outline-offset:-2px}.pinned-unpin-button:disabled{opacity:.55;cursor:wait}.pinned-message-author{font-weight:850}.system-message.system-announcement{color:#efd98d;border-color:#58491f;background:#181307}
.reply-composer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;padding:6px 7px;border:1px solid #334150;border-radius:7px;background:#0b1117}.reply-composer>div{display:flex;flex-direction:column;min-width:0}.reply-composer strong{font-size:9px;color:#9ccfff}.reply-composer span{font-size:9px;color:#7f8a97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-composer .icon-button{width:26px;height:26px;flex:0 0 auto}
.reply-composer .compact-preview-emote,.message-reply-quote .compact-preview-emote,.pinned-banner .compact-preview-emote{height:18px;max-height:18px;max-width:72px;margin:0 1px;vertical-align:middle}.reply-composer #replyPreview,.message-reply-quote .reply-preview-content,.pinned-banner #pinnedText{line-height:18px}
.chat-toggle-button{position:relative}.chat-unread-badge{position:absolute;right:-4px;top:-5px;min-width:17px;height:17px;border-radius:999px;padding:0 4px;display:grid;place-items:center;background:#ff4d5f;color:#fff;border:2px solid #050607;font-size:8px;font-weight:950}
.jump-live-btn{color:#fff;background:rgba(255,77,95,.12);border:1px solid rgba(255,77,95,.35)}.jump-live-btn:hover{background:rgba(255,77,95,.24)}.cc-button.active{background:#fff;color:#111}
.settings-textarea{width:100%;resize:vertical;min-height:72px;border:1px solid var(--border);border-radius:8px;background:#0a0d11;color:var(--text);padding:9px 10px}.compact-actions{padding-top:8px}
.invite-row-actions{flex-wrap:wrap;justify-content:flex-end}
.chat-scrim{display:none}

/* Fullscreen now contains video plus an optional chat drawer. */
.stage:fullscreen{width:100vw;height:100vh;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 6px var(--chat-width);overflow:hidden;background:#000}
.stage:fullscreen .content-column{height:100vh;padding:0;overflow:hidden}.stage:fullscreen .player-shell,.stage:fullscreen .player-shell.is-fullscreen{width:100%;height:100vh;max-height:none}.stage:fullscreen .chat-panel{height:100vh}.stage:fullscreen #theaterBtn{display:none}
body.chat-collapsed .stage:fullscreen{grid-template-columns:minmax(0,1fr)}
body.chat-collapsed .stage:fullscreen .chat-panel{display:none}

@media (max-width:820px){
  .chat-panel{position:fixed;z-index:52;left:8px;right:8px;top:auto;bottom:8px;height:min(76dvh,680px);max-height:calc(100dvh - 16px);border:1px solid #303946;border-radius:15px;box-shadow:0 20px 70px rgba(0,0,0,.7);padding-top:0;transform:translateY(calc(100% + 24px));transition:transform .2s ease;background:rgba(11,14,18,.98);backdrop-filter:blur(18px)}
  .chat-panel.mobile-open{transform:translateY(0)}
  .chat-header{min-height:48px;border-radius:15px 15px 0 0}.chat-header:before{content:"";position:absolute;top:5px;left:50%;width:34px;height:3px;border-radius:999px;background:#46515e;transform:translateX(-50%)}
  .chat-scrim{position:fixed;z-index:51;inset:0;display:block;border:0;background:rgba(0,0,0,.42);backdrop-filter:blur(2px)}
  .chat-scrim[hidden]{display:none!important}
  .viewer-popover{position:absolute;top:44px;left:8px;right:8px;width:auto}
  .message-actions{position:static;opacity:1;margin-top:4px;justify-content:flex-end}.message-action{height:26px;font-size:9px}
  .stage:fullscreen{display:block}.stage:fullscreen .content-column,.stage:fullscreen .player-shell,.stage:fullscreen .player-shell.is-fullscreen{height:100dvh}.stage:fullscreen .chat-panel{height:min(76dvh,680px)}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:920px){
  .chat-panel{left:auto;width:min(390px,55vw);height:calc(100dvh - 12px);bottom:6px;right:6px}
}


/* v1.3.1 chat layout hotfix
   Keep the composer anchored to the bottom even when optional banners are hidden.
   Flex is used here because hidden grid children otherwise collapse the intended row mapping. */
.chat-panel{
  display:flex;
  flex-direction:column;
}
.chat-header,
.chat-banner,
.chat-composer{
  flex:0 0 auto;
}
.messages{
  flex:1 1 auto;
  min-height:0;
}
@media (max-width:820px){
  body.chat-collapsed .chat-panel{display:flex}
}


/* v1.3.11 watch-room UI: resizable chat, overlay chat, compact controls, live sync, transparent subtitles. */
:root{--chat-width:370px}
.stage{position:relative;grid-template-columns:minmax(0,1fr) 6px var(--chat-width)}
.chat-resize-handle{position:relative;z-index:35;width:6px;height:100vh;cursor:col-resize;background:transparent;touch-action:none;user-select:none}
.chat-resize-handle::after{content:"";position:absolute;left:2px;top:0;bottom:0;width:2px;background:transparent;transition:background .14s ease,box-shadow .14s ease}
.chat-resize-handle:hover::after,.chat-resize-handle.dragging::after,.chat-resize-handle:focus-visible::after{background:#3b4654;box-shadow:0 0 10px rgba(49,169,255,.15)}
body.chat-resizing{cursor:col-resize;user-select:none}
body.chat-collapsed .chat-resize-handle{display:none}
body.chat-collapsed .stage{grid-template-columns:minmax(0,1fr)}

body.chat-overlay .stage{grid-template-columns:minmax(0,1fr)}
body.chat-overlay .chat-resize-handle{display:block;position:absolute;z-index:44;top:12px;bottom:12px;right:calc(var(--chat-width) + 9px);height:auto}
body.chat-overlay .chat-panel{position:absolute;z-index:42;top:12px;right:12px;bottom:12px;width:min(var(--chat-width),calc(100vw - 24px));height:auto;border:1px solid rgba(61,72,86,.9);border-radius:12px;background:rgba(11,14,18,.91);box-shadow:0 18px 50px rgba(0,0,0,.5);backdrop-filter:blur(15px);overflow:hidden}
body.chat-overlay .chat-header,body.chat-overlay .chat-composer{background:rgba(11,14,18,.92)}
body.chat-overlay .messages{background:linear-gradient(180deg,rgba(11,14,18,.38),rgba(11,14,18,.7))}
body.chat-overlay.chat-collapsed .chat-panel{display:none}

.live-sync-pill{height:29px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(10,12,16,.68);color:#dce2e8;padding:0 9px;font-size:10px;font-weight:850;letter-spacing:.02em;white-space:nowrap;transition:.14s ease}
.live-sync-pill:disabled{cursor:default;opacity:.72}.live-sync-pill:not(:disabled):hover{background:rgba(255,255,255,.12)}
.live-sync-dot{width:7px;height:7px;border-radius:50%;background:#6d7785}
.live-sync-pill.live{color:#e9fff2;border-color:rgba(66,229,139,.27);background:rgba(26,70,48,.48)}.live-sync-pill.live .live-sync-dot{background:#42e58b;box-shadow:0 0 8px rgba(66,229,139,.72)}
.live-sync-pill.behind{color:#fff0c2;border-color:rgba(245,200,76,.3);background:rgba(86,66,14,.42)}.live-sync-pill.behind .live-sync-dot{background:#f5c84c;box-shadow:0 0 8px rgba(245,200,76,.52)}
.live-sync-pill.connecting{color:#c9d6e6}.live-sync-pill.connecting .live-sync-dot{background:#79b7ff;box-shadow:0 0 8px rgba(121,183,255,.45)}
.live-sync-pill.offline{color:#a4adb8}.live-sync-pill.offline .live-sync-dot{background:#69727e}
.jump-live-btn{border:1px solid rgba(245,200,76,.25)!important;background:rgba(78,61,13,.3)!important;color:#ffe7a0!important;font-weight:800}.jump-live-btn:hover{background:rgba(104,80,15,.48)!important}

.settings-gear-button[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.player-settings-menu{width:250px;padding:7px;right:0;bottom:39px}
.player-settings-heading{padding:7px 9px 8px;color:#f0f3f6;font-size:12px;font-weight:900;border-bottom:1px solid #29313c;margin-bottom:4px}
.player-settings-section{padding:5px 0;border-bottom:1px solid #252c35}.player-settings-section:last-child{border-bottom:0}
.player-settings-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 9px;color:#8994a2;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.player-settings-section-title strong{color:#dfe5eb;font-size:10px;letter-spacing:0;text-transform:none}
.player-settings-row{width:100%;height:36px;border:0;border-radius:6px;background:transparent;color:#e9edf2;padding:0 9px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;text-align:left}.player-settings-row:hover{background:#20262f}.player-settings-row strong{color:#98a3af;font-size:10px}
.player-settings-row.active strong{color:var(--accent)}
.chat-layout-options{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px 7px 7px}.chat-layout-option{height:32px;border:1px solid #2d3540;border-radius:6px;background:#11161c;color:#9ba5b0;font-size:11px;font-weight:800}.chat-layout-option:hover{background:#1b222b;color:#fff}.chat-layout-option.active{border-color:rgba(49,169,255,.42);background:rgba(49,169,255,.11);color:#8fcfff}
.player-controls{gap:7px;padding-right:12px;padding-left:12px}
.time-display{font-variant-numeric:tabular-nums}
.time-display.movie-time-remaining{display:inline-flex!important;align-items:center;color:#eef2f6;font-size:11px;font-weight:800;letter-spacing:.01em}

@media (max-width:1100px){:root{--chat-width:330px}}
@media (max-width:820px){
  .stage{display:block}
  .chat-resize-handle{display:none!important}
  body.chat-overlay .chat-panel{position:fixed;z-index:50;inset:0;width:auto;height:100vh;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transform:translateX(100%)}
  body.chat-overlay .chat-panel.mobile-open{transform:translateX(0)}
  .live-sync-pill{height:28px;padding:0 8px}.live-sync-pill.behind #liveSyncLabel{max-width:74px;overflow:hidden;text-overflow:ellipsis}
  .player-settings-menu{right:-38px;width:min(250px,calc(100vw - 24px))}
}
@media (max-width:520px){
  .volume-slider{display:none}
  .player-controls{gap:4px;padding-left:8px;padding-right:8px}
  .player-btn{width:31px}
  .jump-live-btn{padding:0 7px;font-size:10px}
  .live-sync-pill{padding:0 7px;font-size:9px}
  .time-display.movie-time-remaining{font-size:10px}
}
body.chat-overlay:not(.chat-collapsed) .player-controls{right:calc(var(--chat-width) + 18px)}
@media (max-width:820px){body.chat-overlay:not(.chat-collapsed) .player-controls{right:0}}


/* v1.3.11 chat interaction polish: aligned media buttons, message menu, autocomplete, grouped viewers. */
.composer-row-media.has-giphy{grid-template-columns:36px 36px minmax(0,1fr) 58px}
.composer-icon,.composer-gif-button{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;margin:0;line-height:1;border:0;border-radius:7px;background:transparent;color:#b8c0ca}
.composer-gif-button{font-size:10px;font-weight:900;letter-spacing:.02em}
.composer-icon:hover,.composer-gif-button:hover{background:var(--panel-3);color:var(--text)}
.chat-composer{position:relative}
.emote-autocomplete{position:absolute;z-index:45;left:8px;right:8px;bottom:calc(100% + 6px);max-height:min(300px,42vh);overflow:auto;padding:5px;border:1px solid #303945;border-radius:10px;background:rgba(13,17,22,.99);box-shadow:0 16px 42px rgba(0,0,0,.55)}
.emote-autocomplete[hidden]{display:none}
.emote-autocomplete-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:38px;padding:4px 7px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left}
.emote-autocomplete-item:hover,.emote-autocomplete-item.active{background:#1a2028}
.emote-autocomplete-item img{width:30px;height:30px;object-fit:contain}
.emote-autocomplete-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.emote-autocomplete-item span{color:#778390;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.mention-autocomplete{position:absolute;z-index:46;left:8px;right:8px;bottom:calc(100% + 6px);max-height:min(300px,42vh);overflow:auto;padding:5px;border:1px solid #303945;border-radius:10px;background:rgba(13,17,22,.99);box-shadow:0 16px 42px rgba(0,0,0,.55)}
.mention-autocomplete[hidden]{display:none}
.mention-autocomplete-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:38px;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left}
.mention-autocomplete-item:hover,.mention-autocomplete-item.active{background:#1a2028}
.mention-autocomplete-dot{display:block;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.mention-autocomplete-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.mention-autocomplete-meta{color:#778390;font-size:8px;font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.viewer-popover-list{gap:7px}
.viewer-popover-section{display:flex;flex-direction:column;gap:2px}
.viewer-popover-section+.viewer-popover-section{padding-top:5px;border-top:1px solid #242c35}
.viewer-popover-section-title{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 3px 2px;color:#7f8b98;font-size:8px;font-weight:950;text-transform:uppercase;letter-spacing:.09em}
.viewer-mini-state.synced{color:#69e8a6}.viewer-mini-state.watching{color:#d7c66a}.viewer-mini-state.online{color:#87919e}
.message:not(.system-message){cursor:context-menu;border-radius:5px}
.message:not(.system-message):focus-visible{outline:1px solid #44505e;outline-offset:-1px;background:#10151b}
.message-context-menu{position:fixed;z-index:10050;width:164px;padding:5px;border:1px solid #35404d;border-radius:9px;background:#11161d;box-shadow:0 18px 50px rgba(0,0,0,.62)}
.message-context-menu[hidden]{display:none}
.message-context-head{padding:4px 7px 5px;color:#7f8b98;font-size:8px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #29313b;margin-bottom:2px}
.message-context-separator{height:1px;margin:3px 5px;background:#29313b}
.message-context-action{display:flex;align-items:center;gap:7px;width:100%;height:27px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:#c5cdd6;font-size:10px;font-weight:750;text-align:left;transition:background-color .12s ease,color .12s ease}
.message-context-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;color:#8995a3;font-size:12px;font-weight:850;line-height:1}
.message-context-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-context-action:hover,.message-context-action:focus-visible{background:#1d252e;color:#fff;outline:none}.message-context-action:hover .message-context-icon,.message-context-action:focus-visible .message-context-icon{color:currentColor}
.message-context-action.warning{color:#e5bd6a}.message-context-action.warning .message-context-icon{color:#c99d4d}.message-context-action.warning:hover,.message-context-action.warning:focus-visible{background:#251f14;color:#f4cf83}
.message-context-action.danger{color:#ff9ca6}.message-context-action.danger .message-context-icon{color:#d86f7b}.message-context-action.danger:hover,.message-context-action.danger:focus-visible{background:#26151a;color:#ffbbc2}
.message-context-action.danger-strong{color:#ff7e8b;font-weight:850}.message-context-action.danger-strong .message-context-icon{color:#ff6f7d}
.message-timeout-options{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px 2px 4px}
.message-timeout-options[hidden]{display:none}.message-timeout-options .message-context-action{height:25px;justify-content:center;padding:0;font-size:9px;background:#171d25;border:1px solid #2b3540}.message-timeout-options .message-context-label{overflow:visible}
@media (max-width:820px){
  .composer-row-media.has-giphy{grid-template-columns:42px 42px minmax(0,1fr) 60px}
  .composer-icon,.composer-gif-button{width:42px;height:42px;min-width:42px}
  .emote-autocomplete{position:absolute;left:0;right:0;bottom:calc(100% + 6px);max-height:min(280px,40dvh)}
  .mention-autocomplete{position:absolute;left:0;right:0;bottom:calc(100% + 6px);max-height:min(280px,40dvh)}
  .message-context-menu{width:min(210px,calc(100vw - 24px));padding:6px}.message-context-action{height:34px;font-size:11px}.message-context-icon{flex-basis:18px;width:18px;font-size:13px}
  .message-actions{display:none!important}
}



/* 1.0.9 hot fix: keep pinned role/theme badges and username in one compact aligned author cluster. */
.pinned-banner #pinnedText .pinned-message-author-group{display:inline-flex;align-items:center;gap:2px;max-width:100%;vertical-align:middle;margin-right:2px;white-space:nowrap}
.pinned-banner #pinnedText .pinned-message-author-group .role-icon{width:16px;height:16px;margin:0;vertical-align:middle;flex:0 0 16px}
.pinned-banner #pinnedText .pinned-message-author-group .role-icon svg{width:16px;height:16px}
.pinned-banner #pinnedText .pinned-message-author-group .site-theme-user-badge{margin:0;vertical-align:middle}
.pinned-banner #pinnedText .pinned-message-author{line-height:1.2}


/* Chat updates must not invalidate the video surface on touch/WebKit. */
@media (pointer:coarse){
  .messages{contain:layout paint;}
}

/* 1.2.0 viewer-list layout fix: reserve status space, constrain names, and keep scrolling vertical. */
.viewer-popover{
  max-height:min(460px,calc(100dvh - 112px));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.viewer-popover-list,.viewer-popover-section,.viewer-popover-row{min-width:0}
.viewer-popover-row{overflow:hidden}
.viewer-popover-row .role-icon,.viewer-popover-row>.site-theme-user-badge{flex:0 0 auto}
body .viewer-popover-row>.site-theme-user-badge{margin-right:0}
.viewer-popover-row .viewer-name-profile{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.viewer-popover-row .viewer-mini-state{
  flex:0 0 auto;
  min-width:46px;
  margin-left:auto;
  white-space:nowrap;
  text-align:right;
}
@media (max-width:820px){
  .viewer-popover{max-height:min(calc(76dvh - 64px),616px)}
}