/* Fullscreen includes the existing video and chat; neither iframe is moved. */
.provider-native-fullscreen-layer {display:contents;color:inherit}
.provider-native-fullscreen-layer[open] {
  display:block;position:fixed;inset:0;width:100vw;height:100dvh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:inherit;overflow:visible;pointer-events:none;
}
.provider-native-fullscreen-layer::backdrop {background:transparent;pointer-events:none}
.provider-native-fullscreen-layer[open] :is(.featured-live-frame,.provider-feature-chat,.provider-chat-toggle) {pointer-events:auto}
/* The provider's own fullscreen control is the only fullscreen button. */
.provider-spotlight :is(.provider-fullscreen-toggle,.provider-fullscreen-without-chat) {display:none!important}
.provider-spotlight.is-channel-mode .provider-chat-heading>.provider-chat-toggle {width:100%!important}
.provider-spotlight .provider-fullscreen-toggle {
  position:absolute;
  z-index:12;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:8px;
  border:1px solid rgb(255 255 255 / 18%);
  border-radius:5px;
  background:rgb(11 11 12 / 72%);
  color:#fff;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.provider-spotlight .provider-fullscreen-toggle:hover {background:rgb(50 50 54 / 94%)}
.provider-spotlight .provider-fullscreen-toggle svg {
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.provider-spotlight:not(.is-channel-mode) .provider-fullscreen-toggle {display:none}
body.watch-player-fullscreen {overflow:hidden}
.provider-spotlight::backdrop {background:#000}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) {
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:block;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden;
  background:#000;
  color:#fff;
  container-type:normal!important;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-layout {
  display:block!important;position:relative!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;gap:0!important;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-stage.feature-slide {
  display:block!important;position:relative!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;overflow:visible!important;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-video {
  display:block!important;position:relative!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) :is(.provider-feature-footer,.provider-channel-profile,.provider-channel-banner) {display:none!important}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat {
  position:absolute!important;
  z-index:10;
  inset:0 0 auto auto!important;
  display:flex;
  width:min(360px,32vw)!important;
  min-width:260px;
  height:min(74dvh,740px)!important;
  min-height:0!important;
  max-width:100vw!important;
  max-height:100dvh!important;
  border:0;
  border-left:1px solid rgb(255 255 255 / 12%);
  border-bottom:1px solid rgb(255 255 255 / 12%);
  border-radius:0 0 0 8px;
  background:rgb(11 11 12 / 12%);
  box-shadow:-4px 8px 24px rgb(0 0 0 / 20%);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  overflow:hidden;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback).is-chat-collapsed .provider-feature-chat {display:none!important}
/* The provider owns its iframe background, so blend that whole layer over the
   blurred video rather than changing anything inside the embedded chat. */
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-frame {opacity:.76}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-heading {
  position:absolute;z-index:4;inset:0 0 auto;display:block!important;width:100%;height:64px;padding:8px;border:0;background:linear-gradient(rgb(11 11 12 / 78%) 0 48px,transparent);pointer-events:none;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-heading>h2 {display:none}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-heading>.provider-chat-toggle {
  position:relative;inset:auto;display:flex;gap:8px;width:100%;height:40px;padding:0 12px;border:0;border-radius:6px;color:#fff;background:rgb(32 32 36 / 46%);pointer-events:auto;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-toggle-label {display:block}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-video>.provider-chat-toggle {
  position:absolute;z-index:12;inset:64px 16px auto auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;color:#fff;background:rgb(11 11 12 / 72%);border-radius:5px;pointer-events:auto;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-video>.provider-chat-toggle .provider-chat-toggle-label {display:none}
@media(max-width:760px) {
  body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat {width:min(300px,60vw)!important;min-width:0;height:74dvh!important;inset:0 0 auto auto!important}
}

/* Keep video-only fullscreen beside the existing chat control. */
.provider-spotlight .provider-fullscreen-without-chat {
  position:absolute;
  z-index:5;
  top:16px;
  right:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:12px;
  border:1px solid rgb(255 255 255 / 10%);
  border-radius:6px;
  color:#fff;
  background:rgb(32 32 36 / 46%);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
  pointer-events:auto;
}
.provider-spotlight .provider-fullscreen-without-chat:hover {background:rgb(60 60 66 / 75%)}
.provider-spotlight .provider-fullscreen-without-chat svg {
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:761px) {
  .provider-spotlight.is-channel-mode .provider-chat-heading:has(>.provider-fullscreen-without-chat:not([hidden]))>.provider-chat-toggle {width:calc(100% - 56px)}
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-heading>.provider-chat-toggle {width:calc(100% - 48px)}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-fullscreen-without-chat {top:8px;right:8px;width:40px;height:40px;padding:10px}

.provider-spotlight .provider-chat-drag-area {display:none}
.provider-spotlight[data-provider="kick"] {--fullscreen-chat-footer:#090b0f}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat {
  box-sizing:border-box;
  padding-bottom:24px;
}
/* Reserve space below the provider's composer and controls. Nothing overlays
   the embedded input, send button, settings, or message scrolling area. */
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-drag-area {
  position:absolute;
  z-index:5;
  inset:auto 0 0;
  display:block;
  height:24px;
  padding:0;
  border:0;
  background:var(--fullscreen-chat-footer,var(--provider-surface,#18181b));
  opacity:.76;
  cursor:grab;
  touch-action:none;
  user-select:none;
  pointer-events:auto;
}
.provider-spotlight .provider-chat-drag-area:focus-visible {outline:2px solid #ffcf00;outline-offset:-3px}
.provider-spotlight .provider-chat-drag-area::after {
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:24px;
  height:10px;
  margin-left:-12px;
  color:var(--provider-muted,#b4b4bb);
  background:radial-gradient(circle,currentColor 1px,transparent 1.5px) 0 0 / 8px 5px;
  opacity:.7;
  pointer-events:none;
}
.provider-spotlight .provider-chat-drag-area:is(:hover,:focus-visible)::after {opacity:1}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat.is-chat-moved {
  inset:var(--chat-y,0px) auto auto var(--chat-x,0px)!important;
  border-radius:8px;
}
.provider-spotlight .provider-feature-chat.is-chat-dragging,
.provider-spotlight .provider-feature-chat.is-chat-dragging .provider-chat-drag-area {cursor:grabbing}
.provider-spotlight .provider-feature-chat.is-chat-dragging .provider-chat-frame {pointer-events:none}

/* Invisible edge hit areas behave like window borders. Side gutters keep
   them clear of the embedded chat's scrollbar and message controls. */
.provider-spotlight .provider-chat-resize-area {display:none}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat {
  padding:0 6px 24px;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat::before {
  content:"";
  position:absolute;
  inset:0 0 24px;
  background:linear-gradient(to right,var(--fullscreen-chat-footer,var(--provider-surface,#18181b)) 0 6px,transparent 6px calc(100% - 6px),var(--fullscreen-chat-footer,var(--provider-surface,#18181b)) calc(100% - 6px));
  opacity:.76;
  pointer-events:none;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-resize-area {
  position:absolute;
  z-index:6;
  display:block;
  background:transparent;
  touch-action:none;
  user-select:none;
  pointer-events:auto;
}
.provider-spotlight .provider-chat-resize-area.is-left {inset:12px auto 12px 0;width:6px;cursor:ew-resize}
.provider-spotlight .provider-chat-resize-area.is-right {inset:12px 0 12px auto;width:6px;cursor:ew-resize}
.provider-spotlight .provider-chat-resize-area.is-top {inset:0 12px auto;height:6px;cursor:ns-resize}
.provider-spotlight .provider-chat-resize-area.is-bottom {inset:auto 12px 0;height:6px;cursor:ns-resize}
.provider-spotlight .provider-chat-resize-area:is(.is-top-left,.is-top-right,.is-bottom-left,.is-bottom-right) {width:12px;height:12px}
.provider-spotlight .provider-chat-resize-area.is-top-left {inset:0 auto auto 0;cursor:nwse-resize}
.provider-spotlight .provider-chat-resize-area.is-top-right {inset:0 0 auto auto;cursor:nesw-resize}
.provider-spotlight .provider-chat-resize-area.is-bottom-left {inset:auto auto 0 0;cursor:nesw-resize}
.provider-spotlight .provider-chat-resize-area.is-bottom-right {inset:auto 0 0 auto;cursor:nwse-resize}
.provider-spotlight .provider-chat-resize-area:focus-visible {outline:2px solid #ffcf00;outline-offset:-3px}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-feature-chat.is-chat-resized {
  width:var(--chat-width)!important;
  height:var(--chat-height)!important;
  min-width:0!important;
}
.provider-spotlight .provider-feature-chat.is-chat-resizing .provider-chat-frame {pointer-events:none}
/* In fullscreen, Hide Chat already provides the video-only view. */
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-fullscreen-without-chat {display:none!important}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-fullscreen-toggle {display:none!important}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback) .provider-chat-heading>.provider-chat-toggle {width:100%!important}
body .provider-spotlight.is-iframe-fullscreen .provider-feature-chat,
body .provider-spotlight.is-iframe-fullscreen .provider-feature-video>.provider-chat-toggle {position:fixed!important}
/* The video is already in the browser's fullscreen layer. Its original
   wrappers must neither cover it nor intercept its built-in controls. */
body .provider-spotlight.is-iframe-fullscreen :is(.provider-feature-layout,.provider-feature-stage,.provider-feature-video,.feature-player) {
  background:transparent!important;pointer-events:none!important;
}
body .provider-spotlight.is-iframe-fullscreen .provider-feature-poster {display:none!important}
/* The closed chat control moves independently from the open panel. */
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback).is-chat-collapsed .provider-feature-video>.provider-chat-toggle {
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback).is-chat-collapsed .provider-feature-video>.provider-chat-toggle.is-chat-button-moved {
  inset:var(--chat-button-y,64px) auto auto var(--chat-button-x,0px)!important;
}
body .provider-spotlight:is(.is-player-fullscreen,.is-fullscreen-fallback).is-chat-collapsed .provider-feature-video>.provider-chat-toggle.is-chat-button-dragging {cursor:grabbing}