/* Floating YouTube channel dock (homepage, Zoid-style). */

.yt-dock[hidden],
.yt-dock-open[hidden]{
  display:none !important;
}

.yt-dock{
  position:fixed;
  z-index:80;
  bottom:1.1rem;
  left:calc(var(--site-rail-width) + 0.9rem);
  width:min(17.6rem, calc(100vw - 2rem));
  padding:0.85rem 0.85rem 0.75rem;
  border-radius:0.95rem;
  background:rgba(8,14,40,0.88);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 16px 40px rgba(0,0,0,0.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

body:not(.is-rail-expanded) .yt-dock{
  left:calc(var(--site-rail-collapsed) + 0.75rem);
}

@media (max-width:899.98px){
  .yt-dock{
    left:0.85rem;
    right:auto;
    bottom:0.95rem;
  }
}

.yt-dock__close{
  position:absolute;
  top:0.42rem;
  right:0.45rem;
  width:1.45rem;
  height:1.45rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:0.4rem;
  background:transparent;
  color:rgba(255,255,255,0.45);
  cursor:pointer;
  font-size:0.78rem;
}

.yt-dock__close:hover{
  color:#fff;
  background:rgba(255,255,255,0.08);
}

.yt-dock__head{
  display:flex;
  align-items:center;
  gap:0.7rem;
  padding-right:1.4rem;
  text-decoration:none;
  color:inherit;
}

.yt-dock__avatar{
  width:2.45rem;
  height:2.45rem;
  border-radius:0.55rem;
  object-fit:cover;
  background:#0a1638;
  flex-shrink:0;
}

.yt-dock__avatar--fallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  font-weight:800;
  color:#00CFFF;
}

.yt-dock__meta{
  display:flex;
  flex-direction:column;
  gap:0.12rem;
  min-width:0;
}

.yt-dock__name{
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:0.92rem;
  font-weight:800;
  letter-spacing:0.04em;
  color:#fff;
  line-height:1.15;
}

.yt-dock__subs{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(200,214,255,0.55);
}

.yt-dock__foot{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-top:0.8rem;
}

.yt-dock__platform{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.7rem;
  height:1.7rem;
  border-radius:0.4rem;
  background:#ff0000;
  color:#fff;
  font-size:0.85rem;
  flex-shrink:0;
}

.yt-dock__status{
  flex:1;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(200,214,255,0.5);
}

.yt-dock__status.is-live{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  color:#ff4d4d;
}

.yt-dock__live-dot{
  width:0.45rem;
  height:0.45rem;
  border-radius:999px;
  background:#ff2d2d;
  box-shadow:0 0 8px rgba(255,45,45,0.8);
  animation:ytDockPulse 1.4s ease-in-out infinite;
}

@keyframes ytDockPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.45;transform:scale(0.75)}
}

.yt-dock__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.85rem;
  padding:0.28rem 0.85rem;
  border-radius:0.48rem;
  background:#155EEF;
  color:#fff;
  font-family:"Gabarito","Space Grotesk",system-ui,sans-serif;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(21,94,239,0.35);
}

.yt-dock__cta:hover{
  filter:brightness(1.08);
}

@media (prefers-reduced-motion:reduce){
  .yt-dock__live-dot{
    animation:none;
  }
}

.yt-dock-open{
  position:fixed;
  z-index:80;
  bottom:1.15rem;
  left:calc(var(--site-rail-width) + 0.55rem);
  width:2.35rem;
  height:2.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:0.7rem;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,18,48,0.92);
  color:#fff;
  cursor:pointer;
  font-size:0.85rem;
  box-shadow:0 10px 24px rgba(0,0,0,0.4);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.yt-dock-open:hover{
  background:rgba(21,94,239,0.85);
  border-color:rgba(255,255,255,0.22);
}

body:not(.is-rail-expanded) .yt-dock-open{
  left:calc(var(--site-rail-collapsed) + 0.45rem);
}

@media (max-width:899.98px){
  .yt-dock-open{
    left:0.75rem;
    bottom:0.95rem;
  }
}