/* Approved channel mockup: login-sized control, quieter than the section menu.
   taste-skill-ignore: the requested smoked glass uses lavender optical highlights. */
.sidebar .channel-menu {
  --channel-size:46px; --channel-gap:10px; --channel-inset:10px;
  --channel-panel-width:calc(var(--channel-size) * 2 + var(--channel-gap) + var(--channel-inset) * 2 + 2px);
  position:relative; z-index:12; flex:none; width:var(--channel-size); height:var(--channel-size);
}
.sidebar .channel-toggle {
  position:relative; isolation:isolate; display:grid; place-items:center; flex:none;
  width:100%; height:100%; min-height:0; margin:0; padding:0;
  border:1px solid #c9b6df79; border-radius:15px; color:#eee5f5;
  background:linear-gradient(142deg,#bda4d535,#38323d9c 45%,#202128ce 72%,#ad8bd92e); /* taste-skill-ignore: approved smoky glass trigger. */
  box-shadow:inset 0 1px 1px #f7eaff45,inset 0 -1px 3px #d8b7f329,0 2px 7px #09091026; /* taste-skill-ignore: fine glass edge reflections from the approved mockup. */
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); /* taste-skill-ignore: match the existing glass header controls. */
  cursor:pointer; overflow:visible; -webkit-tap-highlight-color:transparent;
  transition:color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 160ms ease;
}
.sidebar .channel-toggle::before {
  content:''; display:block; position:absolute; z-index:-1; inset:2px; border-radius:12px;
  border-top:1px solid #f2e1ff3b; border-bottom:1px solid #c7a5e51a;
  background:radial-gradient(ellipse at 14% 0%,#e4c9ff1c,transparent 65%); /* taste-skill-ignore: approved upper-left glass reflection. */
  pointer-events:none;
}
.sidebar .channel-toggle::after { display:none; }
.sidebar .channel-toggle svg { display:block; width:28px; height:28px; pointer-events:none; }
/* Keep the compact 12px visual gap inside the continuous hover target. */
.sidebar .channel-menu::after {
  content:''; position:absolute; top:100%; right:0; width:var(--channel-panel-width); height:13px;
  pointer-events:none;
}
.sidebar .channel-menu.is-open::after { pointer-events:auto; }
.sidebar .channel-panel {
  position:absolute; top:calc(100% + 12px); right:0; width:var(--channel-panel-width);
  padding:var(--channel-inset); border:1px solid #c9b0df6e; border-radius:19px;
  background:linear-gradient(145deg,#77708035,#302b37d9 42%,#24232cdb 78%,#77628748); /* taste-skill-ignore: user-approved glass dropdown backing. */
  box-shadow:inset 0 1px 1px #f3deff3b,inset 0 -1px 1px #d4b5ed24,0 12px 30px #05050d38; /* taste-skill-ignore: real floating menu needs elevation from the stage. */
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); /* taste-skill-ignore: real overlay with the approved glass material. */
  transform-origin:calc(100% - var(--channel-size) / 2) 0;
  transform:translateY(-6px) scale(.97); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform 160ms cubic-bezier(.25,.65,.3,1),opacity 140ms ease,visibility 0s 160ms;
}
.sidebar .channel-menu.is-open .channel-panel {
  transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 170ms ease-out,visibility 0s;
}
.sidebar .channel-menu .channel-icons {
  display:grid; grid-template-columns:repeat(2,var(--channel-size)); gap:var(--channel-gap);
  width:auto; padding:0; margin:0; border:0; align-items:center;
}
.sidebar .channel-menu .channel-icons .social-icon {
  width:var(--channel-size); height:var(--channel-size); min-width:0; margin:0; padding:0;
  border-radius:13px; border-color:#d3bfdf64; color:#eee7f5;
  background:linear-gradient(140deg,#c6add42a,#4a405025 48%,#26252f8c 70%,#b591d018); /* taste-skill-ignore: approved small glass channel tiles. */
  box-shadow:inset 0 1px 1px #fff0ff28,inset 0 -1px 1px #e7c3ff13; /* taste-skill-ignore: preserve existing link-button edge highlights. */
  transform:translateY(-3px); opacity:0;
  transition:transform 150ms cubic-bezier(.22,1,.36,1),opacity 110ms ease,border-color 150ms ease,color 150ms ease;
}
.sidebar .channel-menu .channel-icons .social-icon::before { border-radius:10px; }
.sidebar .channel-menu.is-open .social-icon {
  transform:translateY(0); opacity:1;
  transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 160ms ease,border-color 150ms ease,color 150ms ease;
}
.sidebar .channel-menu.is-open .social-icon:nth-child(n+3) { transition-delay:30ms,30ms,0s,0s; }
.sidebar .channel-menu .social-icon svg { width:29px; height:29px; }
.sidebar .channel-menu .social-icon .soop-glyph { width:34px; height:24px; }
.sidebar .channel-menu .brand-youtube svg { width:31px; height:31px; transform:none; }
.sidebar .channel-menu .brand-cafe svg { width:27px; height:27px; overflow:visible; filter:drop-shadow(0 1px 0 #110e1c80); }
.sidebar .channel-menu .social-icon small { right:5px; bottom:3px; font:400 9px/1 var(--sans); color:#e0d0ed; }
.sidebar .channel-menu.is-open .channel-toggle {
  border-color:#dcc3f0a8; color:#fff5ff;
  box-shadow:inset 0 1px 2px #fff0ff45,inset 0 -1px 4px #b28bd44d,0 0 9px #bc8eea1c; /* taste-skill-ignore: restrained active glass reflection. */
}
@media(hover:hover) and (pointer:fine) {
  .sidebar .channel-toggle:hover { border-color:#e3cbf5ac; color:#fff5ff; }
  .sidebar .channel-menu .social-icon:hover { transform:translateY(-1px); border-color:#e8d0f8ab; color:#fff5ff; }
}
.sidebar .channel-toggle:focus-visible,.sidebar .channel-menu .social-icon:focus-visible { outline:2px solid #e5c5fc; outline-offset:4px; }
.sidebar .channel-toggle:active:not(:disabled) { transform:scale(.96); }
.sidebar .channel-menu .social-icon:active { transform:scale(.96); }
@media(max-width:600px) {
  .sidebar .channel-menu { --channel-size:44px; --channel-gap:8px; --channel-inset:8px; }
  .sidebar .header-actions { gap:10px; }
  .sidebar .channel-toggle { border-radius:13px; }
  .sidebar .channel-toggle::before { border-radius:10px; }
  /* The second-row section icon remains exposed on phones. The panel aligns
     to the outer account edge while its contents retain 44px touch targets. */
  .sidebar .channel-panel { right:-82px; transform-origin:18px 0; }
  .sidebar .channel-menu::after { right:-82px; width:calc(var(--channel-panel-width) + 82px); }
}
@media(max-width:600px) and (pointer:coarse) { .sidebar .channel-menu::after { display:none; } }
@media(prefers-reduced-motion:reduce) {
  .sidebar .channel-menu * { transition:none!important; }
  .sidebar .channel-panel,.sidebar .channel-menu .channel-icons .social-icon { transform:none; }
  .sidebar .channel-toggle:active:not(:disabled) { transform:none; }
}