.op-twitch-dock{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:1200;
  width:350px;
  max-width:calc(100vw - 24px);
  overflow:hidden;
  border:1px solid rgba(145,71,255,.42);
  border-radius:14px;
  background:#070b19;
  box-shadow:0 16px 38px rgba(0,0,0,.43),0 0 20px rgba(145,71,255,.11);
  transition:width .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.op-twitch-dock.is-collapsed{
  width:236px;
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}

.op-twitch-dock.is-live{
  border-color:rgba(64,238,145,.48);
  box-shadow:0 16px 38px rgba(0,0,0,.43),0 0 22px rgba(49,235,135,.13);
}

.op-twitch-dock.is-live.is-collapsed{
  box-shadow:0 10px 28px rgba(0,0,0,.34),0 0 17px rgba(49,235,135,.18);
}

.op-twitch-dock-head{
  appearance:none;
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 9px 6px 11px;
  border:0;
  background:linear-gradient(180deg,rgba(30,18,61,.97),rgba(13,12,31,.98));
  color:#f4edff;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.op-twitch-dock.is-live .op-twitch-dock-head{
  background:linear-gradient(180deg,rgba(12,60,43,.97),rgba(8,31,28,.98));
}

.op-twitch-dock-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  color:#eee9fb;
  font-size:9.5px;
  font-weight:950;
  letter-spacing:.065em;
  text-transform:uppercase;
  white-space:nowrap;
}

.op-twitch-status-dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#7e879b;
  box-shadow:0 0 7px rgba(126,135,155,.42);
}

.op-twitch-dock.is-offline .op-twitch-status-dot{
  background:#9aa3b5;
  box-shadow:none;
}

.op-twitch-dock.is-live .op-twitch-status-dot{
  background:#42f394;
  animation:op-twitch-live-pulse 1.45s ease-in-out infinite;
}

.op-twitch-status-label{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#aeb8ce;
  font-size:8px;
  letter-spacing:.1em;
}

.op-twitch-dock.is-live .op-twitch-status-label{
  background:rgba(61,236,141,.14);
  color:#9effca;
}

.op-twitch-toggle-label{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:22px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  padding:0 7px;
  color:#cfc6e8;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  transition:background .2s ease,color .2s ease;
}

.op-twitch-dock-head:hover .op-twitch-toggle-label{background:rgba(255,255,255,.11);color:#fff;}

.op-twitch-dock-body{
  border-top:1px solid rgba(145,71,255,.22);
  background:#000;
}

.op-twitch-player-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#000;
}

.op-twitch-player{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

@keyframes op-twitch-live-pulse{
  0%,100%{opacity:.62;box-shadow:0 0 5px rgba(66,243,148,.42);}
  50%{opacity:1;box-shadow:0 0 13px rgba(66,243,148,.96);}
}

@media (max-width:560px){
  .op-twitch-dock{right:8px;bottom:8px;width:min(350px,calc(100vw - 16px));}
  .op-twitch-dock.is-collapsed{width:220px;}
}

@media (prefers-reduced-motion:reduce){
  .op-twitch-dock,.op-twitch-toggle-label{transition:none;}
  .op-twitch-dock.is-live .op-twitch-status-dot{animation:none;box-shadow:0 0 8px rgba(66,243,148,.75);}
}