/* =========================================================
   CoreStream Overlay Controls
   - Desktop: show on hover OR paused OR ui-lock
   - Touch: show when paused OR ui-lock
   - Includes centre feedback (slide)
   - Includes theatre-mode easing (no "pop")
========================================================= */

/* -------------------------
   Overlay visibility shell
------------------------- */
.cs-ui{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:10;
}

/* Desktop: show on hover OR paused OR ui-lock */
@media (hover:hover){
  .player-wrap:hover .cs-ui,
  .player-wrap.ui-lock .cs-ui,
  .player-wrap.is-paused .cs-ui{
    opacity:1;
    pointer-events:auto;
  }
}

/* Touch: show when paused OR ui-lock */
@media (hover:none), (pointer:coarse){
  .player-wrap.is-paused .cs-ui,
  .player-wrap.ui-lock .cs-ui{
    opacity:1;
    pointer-events:auto;
  }
}

/* Only real controls get clicks */
.cs-ui .cs-controls,
.cs-ui .ctrl-cluster,
.cs-ui .res-menu,
.cs-ui .cs-menu{
  pointer-events:auto;
}

/* =========================================================
   THEATRE TOGGLE SMOOTHING (fixes the “pop”)
   - This makes the player box ease between normal and theatre.
   - Works even if View Transitions aren’t supported.
========================================================= */
.player-wrap{
  transition:
    width .28s cubic-bezier(.22,.61,.36,1),
    height .28s cubic-bezier(.22,.61,.36,1),
    transform .28s cubic-bezier(.22,.61,.36,1),
    border-radius .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1);
  will-change: width, height, transform, border-radius;
}

/* Optional hint for browsers using View Transitions */
.player-wrap{ view-transition-name: cs-player; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .player-wrap{ transition:none; }
  .cs-ui{ transition:none; }
}

/* =========================
   Top cluster (quality/theatre)
========================= */
.ctrl-cluster{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index:20;
}

.badge, .icon-btn{
  color:var(--on-media);
  background:rgba(0,0,0,.38);
  border:1px solid var(--glass-line);
  backdrop-filter: blur(12px);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.badge{
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
}

.icon-btn{
  width:40px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}

.icon-btn[aria-pressed="true"]{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* Resolution menu */
.res-menu{
  position:absolute;
  top:54px;
  right:10px;
  min-width:160px;
  background:var(--glass2);
  border:1px solid var(--glass-line);
  border-radius:14px;
  padding:8px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  font-size:13px;
  z-index:30;
}
.res-menu[hidden]{ display:none; }

.res-menu button{
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  background:transparent;
  border:0;
  color:var(--on-media);
  padding:10px 10px;
  border-radius:12px;
}
.res-menu button:hover{ background:rgba(255,255,255,.08); }
.res-menu button[aria-checked="true"]{
  background:rgba(255,255,255,.12);
  font-weight:800;
}

/* =========================
   Bottom control bar
========================= */
.cs-controls{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:15;
  color:var(--on-media);

  padding:14px;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.40) 30%,
    rgba(0,0,0,.78) 100%
  );
  backdrop-filter: blur(12px);
}

.cs-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.cs-btn{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(18,22,33,.50);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  color:var(--on-media);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cs-btn:hover{ background:rgba(28,34,48,.68); }

.cs-btn svg{
  display:block;
  margin:auto;
  flex:none;
  transform-origin:center;
}

#btnFull{
  padding:0;
}

#btnFull svg{
  transition: transform .18s ease, opacity .18s ease;
}

#btnFull:hover svg,
#btnFull:focus-visible svg{
  transform: scale(1.08);
}

#btnFull.is-active svg{
  transform: scale(0.96);
}

.cs-time{
  font-variant-numeric:tabular-nums;
  min-width:106px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.14);
  opacity:.95;
}

.cs-vol{ width:110px; accent-color:var(--seek); }

/* Seek */
.cs-seek-wrap{
  position:relative;
  flex:1;
  height:24px;
  display:flex;
  align-items:center;
}

.cs-seek{
  position:relative;
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
}

.cs-seek-buffered{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background:rgba(255,255,255,.20);
  opacity:.75;
}

.cs-seek-played{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background:var(--seek);
  filter:saturate(1.15);
}

.cs-seek-hover{
  position:absolute;
  bottom:28px;
  transform:translateX(-50%);
  display:none;
  pointer-events:none;
  padding:4px 8px;
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  backdrop-filter: blur(10px);
}

/* Speed menu */
.cs-menu-wrap{ position:relative; }

.cs-menu{
  position:absolute;
  bottom:52px;
  right:0;
  min-width:85px;
  background:rgba(0, 0, 0, 0.9);
  border:1px solid var(--glass-line);
  border-radius:14px;
  padding:8px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  font-size:13px;
  z-index:30;
}
.cs-menu[hidden]{ display:none; }

.cs-menu button{
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  background:transparent;
  border:0;
  color:var(--on-media);
  padding:10px 10px;
  border-radius:12px;
}
.cs-menu button:hover{ background:rgba(255,255,255,.08); }
.cs-menu button[aria-checked="true"]{
  background:rgba(255,255,255,.12);
  font-weight:800;
}

/* =========================================================
   Center feedback (play/pause): YouTube-style POP (scale)
========================================================= */
#csPop.cs-pop{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:25;

  opacity:0;
  transform: scale(.92);
  will-change: transform, opacity;
}

#csPop.cs-pop .bubble{
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:rgba(10,14,22,.58);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 36px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
}

#csPop.cs-pop .bubble svg{
  width:34px;
  height:34px;
  display:block;
}

#csPop.cs-pop .cs-pop__pill{
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  background:rgba(10,14,22,.72);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 36px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  font-weight:700;
}

#csPop.cs-pop.show{
  animation: csPop 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes csPop{
  0%   { opacity:0; transform:scale(.86); }
  45%  { opacity:1; transform:scale(1.00); }
  100% { opacity:0; transform:scale(1.08); }
}

@media (prefers-reduced-motion: reduce){
  #csPop.cs-pop.show{ animation: csPopReduce 200ms ease-out forwards; }
  @keyframes csPopReduce{ 0%{opacity:0;} 100%{opacity:1;} }
}

/* =========================
   PHONE MODE (touch + small width)
========================= */
@media (hover:none) and (pointer:coarse) and (max-width: 900px){

  /* Hide playback speed + volume + mute on phones */
  #btnSpeed,
  #speedMenu,
  .cs-vol,
  #volSlider,
  #btnMute{
    display:none !important;
  }

  /* Pin fullscreen to the bottom-right corner of the video */
  #btnFull{
    position:absolute !important;
    right:12px;
    bottom:12px;
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:110;
  }

  /* Prevent other controls from sitting underneath fullscreen */
  .cs-controls .cs-row{ padding-right:64px; }

  /* Fixed player behavior (NOT theatre) */
  body:not(.theatre) .player-wrap{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + var(--header-h));
    left:0;
    right:0;
    width:100vw;
    margin:0;
    z-index:95;
    border-radius:0;
    border-left:0;
    border-right:0;
    background:#000;
    aspect-ratio:16/9;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
  }

  body:not(.theatre) .player-row{ padding-top:var(--player-h); }

  .cs-controls{ z-index:96; }
}

/* Keep top cluster hidden on iPhone (quality/theatre live here) */
@media (hover:none) and (pointer:coarse){
  html.is-ios:not(.is-ipad) .ctrl-cluster{ display:none !important; }
  html.is-ios:not(.is-ipad) .res-menu{ display:none !important; }
}