/* FIX33: overrides loaded LAST (after skins). Ensures changes actually apply. */

/* 1) Remove square focus outline on server icons / avatars. Use round ring instead */
.dc-server-btn,
.dc-rail-action,
.dc-brand-btn{
  outline: none !important;
}
.dc-server-btn:focus-visible,
.dc-rail-action:focus-visible,
.dc-brand-btn:focus-visible{
  outline: none !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 0 0 4px rgba(16,185,129,.28) !important;
}
/* If browser still draws focus for inner span */
.dc-server-btn *:focus{ outline:none !important; }

/* Remove square “active tile” behind server icon (Discord-like: icon only) */
.dc-rail .dc-server-btn,
.dc-rail .channel-item.active .dc-server-btn,
.dc-rail .channel-item:hover .dc-server-btn{
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Switches: real full-fill colors + move 1mm up + prevent global button-motion transforms */
.nc-vv-switch,
.nc-ct-switch,
.switch{
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Move up slightly (1-2px). Use top instead of transform so we don't fight hover transforms. */
.nc-vv-switch,
.nc-ct-switch{
  position: relative !important;
  top: 0px !important; /* FIX36: restore switch row position */
}
/* Checkbox-style .switch rows */
.settings-row .switch,
.svs-row .switch,
.nc-settings-row .switch{
  position: relative !important;
  top: 0px !important;
  /* FIX36: restore switch row position */
}

/* 2b) Current user avatar: remove any square hover/focus “tile” and keep perfect circle */
#current-user-avatar{
  border-radius: 999px !important;
  /* IMPORTANT: allow the presence dot to overlap outside the avatar circle */
  overflow: visible !important;
  position: relative !important;
  isolation: isolate;

  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* FIX37: ensure the online presence dot renders ABOVE the avatar and is not clipped */
#current-user-avatar .presence-dot{
  z-index: 60 !important;
  right: -1px !important;
  bottom: -1px !important;
}
.current-user-left .avatar-circle,
.current-user .avatar-circle{
  border-radius: 999px !important;
}
#current-user-avatar:hover,
#current-user-avatar:active{
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
#current-user-avatar:focus,
#current-user-avatar:focus-visible{
  outline: none !important;
  /* keep a subtle circular ring (no square) */
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 0 0 4px rgba(16,185,129,.20) !important;
}

/* Force OFF/ON fill */
.nc-vv-switch{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.nc-vv-switch.is-on{
  background: rgba(16,185,129,.95) !important;
  border-color: rgba(16,185,129,.65) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 18px rgba(16,185,129,.35) !important;
}

.nc-ct-switch{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.nc-ct-switch.is-on{
  background: rgba(16,185,129,.95) !important;
  border-color: rgba(16,185,129,.65) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 18px rgba(16,185,129,.35) !important;
}

/* Legacy checkbox switch */
.switch input:not(:checked) + .slider{
  background: rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
.switch input:checked + .slider{
  background: rgba(16,185,129,0.96) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22), 0 0 18px rgba(16,185,129,0.35) !important;
}
/* Perfect knob centering */
.switch .slider:before{
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.switch input:checked + .slider:before{
  transform: translateY(-50%) translateX(20px) !important;
}

/* FIX36: perfectly center the KNOB inside switches (only the circle, not the whole switch) */
.nc-vv-switch .nc-vv-switch-knob{
  top: 50% !important;
  left: 3px !important;
  --x: 0px;
  transform: translate3d(var(--x), -50%, 0) !important;
}
.nc-vv-switch.is-on .nc-vv-switch-knob{ --x: 20px; }

.nc-ct-switch .nc-ct-switch-knob{
  top: 50% !important;
  left: 3px !important;
  --x: 0px;
  transform: translate3d(var(--x), -50%, 0) !important;
}
.nc-ct-switch.is-on .nc-ct-switch-knob{ --x: 20px; }
/* 3) Sliders: straight track + centered thumb + green fill (like screenshot) */
.nc-ap-range input[type="range"],
.nc-tp-slider input[type="range"],
.nc-settings-page input[type="range"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  height: 10px !important;
  border-radius: 999px !important;
  outline:none !important;
  --fill: 0;
  background:
    linear-gradient(90deg, rgba(16,185,129,1) 0%, rgba(52,224,168,1) 60%, rgba(0,160,120,1) 100%) 0 0 / calc(var(--fill) * 1%) 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.nc-ap-range input[type="range"]::-webkit-slider-runnable-track,
.nc-tp-slider input[type="range"]::-webkit-slider-runnable-track,
.nc-settings-page input[type="range"]::-webkit-slider-runnable-track{
  height: 6px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

.nc-ap-range input[type="range"]::-webkit-slider-thumb,
.nc-tp-slider input[type="range"]::-webkit-slider-thumb,
.nc-settings-page input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  border: 2px solid rgba(16,185,129,.75) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 4px rgba(16,185,129,.10) !important;
  margin-top: -5px !important; /* center thumb on 6px track */
}

/* Firefox */
.nc-ap-range input[type="range"]::-moz-range-track,
.nc-tp-slider input[type="range"]::-moz-range-track,
.nc-settings-page input[type="range"]::-moz-range-track{
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
}
.nc-ap-range input[type="range"]::-moz-range-progress,
.nc-tp-slider input[type="range"]::-moz-range-progress,
.nc-settings-page input[type="range"]::-moz-range-progress{
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(16,185,129,1), rgba(52,224,168,1)) !important;
}
.nc-ap-range input[type="range"]::-moz-range-thumb,
.nc-tp-slider input[type="range"]::-moz-range-thumb,
.nc-settings-page input[type="range"]::-moz-range-thumb{
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  border: 2px solid rgba(16,185,129,.75) !important;
}

/* 4) Appearance palette: keep gradients + add brush hover */
.nc-ap-color{
  background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
  position: relative;
  overflow: hidden;
}

.nc-ap-color::after{
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.2,.9,.2,1);
  background: none;
  pointer-events: none;
}

/* Brush svg as mask */
.nc-ap-color::before{
  content:"";
  position:absolute;
  width: 16px;
  height: 16px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.92);
  opacity: 0;
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  background: rgba(255,255,255,.92);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3l3 3"/><path d="M3 21l9-9"/><path d="M14 4l6 6"/><path d="M10 8l6 6"/><path d="M8 10l6 6"/><path d="M6 12l6 6"/><path d="M4 14l6 6"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3l3 3"/><path d="M3 21l9-9"/><path d="M14 4l6 6"/><path d="M10 8l6 6"/><path d="M8 10l6 6"/><path d="M6 12l6 6"/><path d="M4 14l6 6"/></svg>') center/contain no-repeat;
}

@keyframes ncBrushWiggle{
  0%{ transform: translate(-50%,-50%) rotate(-8deg) scale(.92); }
  50%{ transform: translate(-50%,-50%) rotate(10deg) scale(1.02); }
  100%{ transform: translate(-50%,-50%) rotate(0deg) scale(.98); }
}

.nc-ap-color:hover::before{
  opacity: .95;
  animation: ncBrushWiggle 520ms cubic-bezier(.2,.9,.2,1);
}

/* keep brush visible on active selection (subtle) */
.nc-ap-color.is-active::before{ opacity: .75; }



/* ===== Voice & Video: Camera preview (Discord-like) ===== */
.nc-vv-cam-card{
  margin-top: 10px;
}

.nc-vv-cam-preview{
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 18px 40px rgba(0,0,0,.25);
}

@supports (aspect-ratio: 16/9){
  .nc-vv-cam-preview{ height: auto; aspect-ratio: 16/9; }
}

.nc-vv-cam-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.06), transparent 55%),
              radial-gradient(120% 140% at 0% 100%, rgba(46,200,128,.10), transparent 60%);
  pointer-events:none;
}

.nc-vv-cam-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  background: rgba(0,0,0,.20);
}

.nc-btn.vv.cam{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06);
  transition: transform 160ms cubic-bezier(.2,.9,.2,1), filter 160ms ease;
}

\.nc-btn.vv.cam:hover{
  transform: translate(-50%,-50%);
  filter: brightness(1.06);
}

.nc-btn.vv.cam:active{
  transform: translate(-50%,-50%) scale(.98);
}

@media (max-width: 700px){
  .nc-vv-cam-preview{ height: 180px; }
}


/* FIX39: Voice & Video -> Sounds / Soundboard / Advanced (Discord-like fill) */
.nc-vv-section-first{ border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }
.nc-vv-h2{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

/* Sound rows */
.nc-vv-sound-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nc-vv-sound-row:first-of-type{ border-top: none; }
.nc-vv-sound-left{ display:flex; flex-direction:column; gap: 4px; min-width: 0; align-items:flex-start; }
.nc-vv-sound-title{ font-weight: 900; font-size: 13px; color: rgba(255,255,255,.92); }
.nc-vv-sound-play{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: rgba(120,200,255,.95);
  cursor: pointer;
}
.nc-vv-sound-play:hover{ text-decoration: underline; }

.nc-vv-more-sounds-btn{
  width: 100%;
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.85);
  font-weight: 900;
  cursor: pointer;
}
.nc-vv-more-sounds-btn:hover{ background: rgba(255,255,255,.05); }
.nc-vv-more-sounds-chev{
  width: 18px; height: 18px;
  opacity: .8;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.nc-vv-more-sounds-chev:before{
  content:"";
  display:block;
  width: 18px; height: 18px;
  background: rgba(255,255,255,.75);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") center/contain no-repeat;
}
.nc-vv-more-sounds-btn.is-open .nc-vv-more-sounds-chev{ transform: rotate(180deg); }

.nc-vv-related-head{
  margin-top: 16px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
  letter-spacing: .2px;
}
.nc-vv-related-tile{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  text-align: left;
}
.nc-vv-related-tile:hover{ background: rgba(255,255,255,.05); }
.nc-vv-related-ico{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.nc-vv-related-ico:before{
  content:"";
  width: 18px; height: 18px;
  background: rgba(255,255,255,.80);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22ZM18 16v-5a6 6 0 0 0-5-5.91V4a1 1 0 1 0-2 0v1.09A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22ZM18 16v-5a6 6 0 0 0-5-5.91V4a1 1 0 1 0-2 0v1.09A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2Z'/></svg>") center/contain no-repeat;
}
.nc-vv-related-body{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.nc-vv-related-title{ color: rgba(255,255,255,.92); font-weight: 1000; font-size: 13px; }
.nc-vv-related-desc{ color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.2; }
.nc-vv-related-arrow{
  margin-left:auto;
  width: 18px; height: 18px;
  opacity: .65;
}
.nc-vv-related-arrow:before{
  content:"";
  display:block;
  width: 18px; height: 18px;
  background: rgba(255,255,255,.80);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m10 17 5-5-5-5 1.41-1.41L17.83 12l-6.42 6.41z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m10 17 5-5-5-5 1.41-1.41L17.83 12l-6.42 6.41z'/></svg>") center/contain no-repeat;
}

/* Soundboard layout */
.nc-vv-panel{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.nc-vv-range-wide{ margin-top: 10px; }
.nc-vv-sb-choose-wrap{ margin-top: 12px; }
.nc-vv-sb-choose{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.90);
  cursor: pointer;
}
.nc-vv-sb-choose:hover{ border-color: rgba(255,255,255,.12); background: rgba(0,0,0,.22); }
.nc-vv-sb-left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.nc-vv-sb-speaker{
  width: 18px; height: 18px;
  background: rgba(255,255,255,.82);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3.23v2.06c3.39.49 6 3.39 6 6.71s-2.61 6.22-6 6.71v2.06c4.45-.52 8-4.27 8-8.77s-3.55-8.25-8-8.77ZM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02ZM3 9v6h4l5 5V4L7 9H3Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14 3.23v2.06c3.39.49 6 3.39 6 6.71s-2.61 6.22-6 6.71v2.06c4.45-.52 8-4.27 8-8.77s-3.55-8.25-8-8.77ZM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02ZM3 9v6h4l5 5V4L7 9H3Z'/></svg>") center/contain no-repeat;
  opacity: .9;
}
.nc-vv-sb-sound{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
.nc-vv-sb-edit{
  width: 18px; height: 18px;
  opacity: .8;
  background: rgba(255,255,255,.85);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm18.71-11.04a1 1 0 0 0 0-1.41l-2.5-2.5a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.99-1.68Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm18.71-11.04a1 1 0 0 0 0-1.41l-2.5-2.5a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.99-1.68Z'/></svg>") center/contain no-repeat;
}

/* Advanced accordion */
.nc-vv-adv-card{
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.nc-vv-adv-head{
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align:left;
}
.nc-vv-adv-head:hover{ background: rgba(255,255,255,.04); }
.nc-vv-adv-text{ min-width:0; }
.nc-vv-adv-title{ font-weight: 1000; color: rgba(255,255,255,.92); font-size: 13px; }
.nc-vv-adv-chev{
  width: 18px; height: 18px;
  margin-top: 2px;
  opacity: .8;
  transition: transform .18s ease;
}
.nc-vv-adv-chev:before{
  content:"";
  display:block;
  width: 18px; height: 18px;
  background: rgba(255,255,255,.75);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") center/contain no-repeat;
}
.nc-vv-adv-head.is-open .nc-vv-adv-chev{ transform: rotate(180deg); }
.nc-vv-adv-body{ padding: 0 12px 12px; }

.nc-vv-reset-row{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.nc-vv-reset-text{ min-width:0; }

/* Keep vv tabs usable on small widths */
@media(max-width: 720px){
  .nc-vv-tabs{ overflow-x:auto; }
}



/* FIX40: Voice & Video sub-navigation like Discord (nested items in left sidebar) */
.nc-vv-tabs{ display:none !important; } /* use left nested nav instead */
.nc-vv-subnav{
  margin: 6px 0 10px 0;
  padding: 0 0 8px 0;
}
.nc-vv-subnav.is-hidden{ display:none !important; }
.nc-settings-subitem{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px 8px 28px;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.68);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .01em;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.nc-settings-subitem:hover{
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
}
.nc-settings-subitem.is-active{
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.95);
}
.nc-settings-subitem.is-active::before{
  content:"";
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: rgba(16,185,129,.95);
  margin-left: -14px;
  margin-right: 10px;
  box-shadow: 0 0 0 2px rgba(16,185,129,.10), 0 0 18px rgba(16,185,129,.25);
}

/* FIX40: Sounds "Show 18 more sounds" button layout */
.nc-vv-more-sounds-btn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.nc-vv-more-sounds-text{
  display:flex;
  flex-direction:column;
  gap: 3px;
  min-width: 0;
}
.nc-vv-more-sounds-main{
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  line-height: 1.05;
}
.nc-vv-more-sounds-sub{
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FIX40: Related settings card (Notifications) */
.nc-vv-related{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nc-vv-related-title{
  font-weight: 1000;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  margin-bottom: 10px;
}
.nc-vv-related-item{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  text-align:left;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.nc-vv-related-item:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.nc-vv-related-ico{
  width: 28px; height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
}
.nc-vv-related-ico::before{
  content:"";
  position:absolute;
  inset: 6px;
  background: rgba(255,255,255,.85);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z'/></svg>") center/contain no-repeat;
}
.nc-vv-related-body{
  display:flex;
  flex-direction:column;
  gap: 3px;
  min-width: 0;
}
.nc-vv-related-name{
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.nc-vv-related-desc{
  font-weight: 800;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-vv-related-arrow{
  width: 18px; height: 18px;
  margin-left: auto;
  opacity: .8;
}
.nc-vv-related-arrow::before{
  content:"";
  display:block;
  width: 18px; height: 18px;
  background: rgba(255,255,255,.75);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m9 18 6-6-6-6-1.41 1.41L12.17 12l-4.58 4.59z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m9 18 6-6-6-6-1.41 1.41L12.17 12l-4.58 4.59z'/></svg>") center/contain no-repeat;
}

/* FIX40: Soundboard modal */
.nc-vv-sb-modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  z-index: 9999;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
}
.nc-vv-sb-modal.is-hidden{ display:none !important; }
.nc-vv-sb-modal-card{
  width: min(560px, 92vw);
  max-height: min(560px, 86vh);
  overflow:hidden;
  border-radius: 18px;
  background: rgba(20,22,26,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.nc-vv-sb-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nc-vv-sb-modal-title{
  font-weight: 1100;
  color: rgba(255,255,255,.94);
  font-size: 14px;
}
.nc-vv-sb-modal-close{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  cursor:pointer;
}
.nc-vv-sb-modal-close:hover{ background: rgba(255,255,255,.09); }
.nc-vv-sb-modal-close::before{
  content:"";
  display:block;
  width: 18px; height: 18px;
  margin: 7px auto 0;
  background: rgba(255,255,255,.85);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.29-6.3z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.29-6.3z'/></svg>") center/contain no-repeat;
}
.nc-vv-sb-modal-body{
  padding: 14px;
}
.nc-vv-sb-modal-hint{
  font-weight: 800;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-bottom: 10px;
}
.nc-vv-sb-modal-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 430px;
  overflow:auto;
  padding-right: 4px;
}
.nc-vv-sb-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.nc-vv-sb-item:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.nc-vv-sb-item.is-selected{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.nc-vv-sb-play{
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.nc-vv-sb-play::before{
  content:"";
  display:block;
  width: 16px; height: 16px;
  margin: 7px auto 0;
  background: rgba(255,255,255,.85);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>") center/contain no-repeat;
}
.nc-vv-sb-name{
  font-weight: 1000;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  flex: 1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nc-vv-sb-pill{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.14);
  color: rgba(16,185,129,1);
  font-weight: 1100;
  font-size: 11px;
  border: 1px solid rgba(16,185,129,.22);
}


/* v9.13 fix41: Discord-like left subnav for Voice & Video */
body.nc-vv-leftsub .nc-vv-tabs{ display:none !important; }
body.nc-vv-leftsub .nc-settings-page[data-page="voicevideo"] .nc-settings-page-head{ margin-bottom: 14px; }


/* v9.13 fix42: Notifications (Discord-like) + linked tiles + no-square icons */
.nc-nf-pane{ display:none; }
.nc-nf-pane.is-active{ display:block; }

/* tighter sound rows in notifications */
.nc-nf-sound-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nc-nf-sound-row:first-child{ border-top: none; padding-top: 0; }
.nc-nf-sound-left{ min-width: 0; }
.nc-nf-sound-actions{ margin-top: 8px; display:flex; gap: 10px; align-items:center; }

/* Fix: soundboard wide range should not let thumb overflow */
.nc-vv-range-wide{
  display:flex;
  align-items:center;
  gap: 12px;
  padding-right: 10px;
}
.nc-vv-range-wide input[type="range"]{ flex: 1 1 auto; min-width: 0; }
.nc-vv-range-val{ flex: 0 0 auto; font-weight: 900; opacity:.9; }

/* Linked settings icon: remove square background, keep only the glyph */
.nc-vv-related-ico{
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nc-vv-related-ico:before{
  width: 18px !important;
  height: 18px !important;
  background: rgba(255,255,255,.88) !important;
}

/* Default bell icon */
.nc-vv-related-ico[data-ico="bell"]::before{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22ZM18 16v-5a6 6 0 0 0-5-5.91V4a1 1 0 1 0-2 0v1.09A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22ZM18 16v-5a6 6 0 0 0-5-5.91V4a1 1 0 1 0-2 0v1.09A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2Z'/></svg>") center/contain no-repeat;
}

/* Mic icon */
.nc-vv-related-ico[data-ico="mic"]::before{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21h2v-3.07A7 7 0 0 0 19 11h-2Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21h2v-3.07A7 7 0 0 0 19 11h-2Z'/></svg>") center/contain no-repeat;
}

/* Camera test button: no jumping on hover (keep position) */
.nc-btn.vv.cam:hover{
  transform: translate(-50%,-50%) !important;
}

/* FIX81: Make all "Послушать звук" buttons look одинаково и красивее */
/* Used in Voice&Video -> Sounds and other sound lists */
.nc-vv-sound-play,
.nc-sound-preview-btn,
button.nc-sound-preview-btn,
button[data-action="sound-preview"],
.nc-nf-sound-actions button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 950 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  padding: 6px 12px !important;
  width: fit-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  min-height: 28px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* small play icon (Discord-ish) */
.nc-vv-sound-play::before,
.nc-sound-preview-btn::before,
button.nc-sound-preview-btn::before,
button[data-action="sound-preview"]::before{
  content: "▶";
  font-size: 10px;
  line-height: 1;
  opacity: .9;
  transform: translateY(-.5px);
}

.nc-vv-sound-play:hover,
.nc-sound-preview-btn:hover,
button.nc-sound-preview-btn:hover,
button[data-action="sound-preview"]:hover,
.nc-nf-sound-actions button:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.nc-vv-sound-play:active,
.nc-sound-preview-btn:active,
button.nc-sound-preview-btn:active,
button[data-action="sound-preview"]:active,
.nc-nf-sound-actions button:active{
  transform: translateY(1px);
}

/* Visual feedback while a preview beep is playing */
.nc-vv-sound-play.is-playing,
.nc-sound-preview-btn.is-playing,
button.nc-sound-preview-btn.is-playing,
button[data-action="sound-preview"].is-playing{
  background: rgba(16,185,129,.16) !important;
  border-color: rgba(16,185,129,.34) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.08);
}

/* Keep these buttons from looking weird in very narrow sidebars */
.nc-vv-sound-row .nc-vv-sound-play{ min-width: 140px; }



/* ===== Voice screenshare strip (multi-share, Discord-like) ===== */
.voice-share-strip{
  display:flex;
  gap:10px;
  padding:10px;
  overflow-x:auto;
  background:rgba(0,0,0,.22);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.vshare-tile{
  width:160px;
  flex:0 0 auto;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  user-select:none;
}

.vshare-tile.is-sel{
  border-color: rgba(0,255,255,.65);
  box-shadow: 0 0 0 2px rgba(0,255,255,.16) inset;
}

.vshare-thumb{
  width:100%;
  height:90px;
  object-fit:cover;
  display:block;
  background:rgba(0,0,0,.2);
}

.vshare-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  font-size:12px;
  color:#fff;
}

.vshare-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:120px;
  opacity:.92;
}

.vshare-pin{
  border:none;
  background:transparent;
  cursor:pointer;
  opacity:.55;
  font-size:14px;
  line-height:1;
}
.vshare-pin.is-pin{ opacity:1; }


/* ===== Music: compact Yandex Music-like panel (v9.13.4) ===== */
/* Center the music drawer above the call controls like a real player bar */
.layout.is-dm-call .call-music-drawer{
  right:auto !important;
  left:50% !important;
  transform:translateX(-50%);
  width:min(580px, calc(100% - 28px)) !important;
  bottom:64px !important;
}

/* Keep expanded view scrollable, but make collapsed view a real player bar */
.call-music-drawer .music-card.music2026.is-collapsed{
  min-height:78px !important;
  max-height:78px !important;
  height:78px !important;
  padding:10px 12px 12px 12px !important;
  overflow:hidden !important;
  background:rgba(12,14,20,0.66) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 16px 44px rgba(0,0,0,0.48) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:grid !important;
  grid-template-columns:52px 1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:10px;
}

html.yabrowser .call-music-drawer .music-card.music2026.is-collapsed{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* “Cover” placeholder */
.call-music-drawer .music-card.music2026.is-collapsed::before{
  content:"";
  width:52px;
  height:52px;
  border-radius:16px;
  grid-column:1;
  grid-row:1 / span 2;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), rgba(0,0,0,0) 52%),
    linear-gradient(135deg, rgba(43,255,180,0.26), rgba(118,81,255,0.22), rgba(255,91,197,0.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 10px 22px rgba(0,0,0,0.22);
}

/* In collapsed mode we don't need heavy FX layers */
.call-music-drawer .music-card.music2026.is-collapsed .music2026-bg{ opacity:0.50; }
.call-music-drawer .music-card.music2026.is-collapsed .music2026-blob,
.call-music-drawer .music-card.music2026.is-collapsed .music2026-rays,
.call-music-drawer .music-card.music2026.is-collapsed .music2026-viz,
.call-music-drawer .music-card.music2026.is-collapsed .music2026-noise{ display:none !important; }

/* Layout rows */
.call-music-drawer .music-card.music2026.is-collapsed .music2026-top{
  margin:0 !important;
  grid-column:2;
  grid-row:1;
  align-items:center !important;
  justify-content:space-between !important;
}
.call-music-drawer .music-card.music2026.is-collapsed .music2026-actions{ gap:6px !important; }

.call-music-drawer .music-card.music2026.is-collapsed .music2026-titleline{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px;
}
.call-music-drawer .music-card.music2026.is-collapsed .music2026-state{
  font-size:13px !important;
  opacity:0.86;
}

.call-music-drawer .music-card.music2026.is-collapsed .music2026-nowrow{
  margin:0 !important;
  grid-column:2;
  grid-row:2;
}
.call-music-drawer .music-card.music2026.is-collapsed .music-now{
  font-size:11px !important;
  opacity:0.78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.call-music-drawer .music-card.music2026.is-collapsed .music2026-controls{
  margin:0 !important;
  grid-column:3;
  grid-row:1 / span 2;
  justify-content:flex-end !important;
  gap:8px !important;
}

/* Buttons: small, consistent */
.call-music-drawer .music-card.music2026.is-collapsed .music2026-ctl{
  width:34px;
  height:34px;
  padding:0 !important;
  border-radius:12px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.call-music-drawer .music-card.music2026.is-collapsed .music2026-play{
  width:38px;
  height:38px;
  padding:0 !important;
  border-radius:14px !important;
}

/* “Stop” is too “dev-like” for a player bar – keep it only in expanded mode */
.call-music-drawer .music-card.music2026.is-collapsed #music-stop{ display:none !important; }

/* Progress bar: thin like Yandex */
.call-music-drawer .music-card.music2026.is-collapsed .music-seek{
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:3px !important;
  margin:0 !important;
  opacity:0.95;
}
.call-music-drawer .music-card.music2026.is-collapsed .music-seek::-webkit-slider-thumb{
  width:0 !important; height:0 !important;
  border:none !important;
  box-shadow:none !important;
}
.call-music-drawer .music-card.music2026.is-collapsed .music-seek::-webkit-slider-runnable-track{
  height:3px;
  border-radius:999px;
}
.call-music-drawer .music-card.music2026.is-collapsed .music-seek::-moz-range-thumb{
  width:0 !important; height:0 !important;
  border:none !important;
}
.call-music-drawer .music-card.music2026.is-collapsed .music-seek::-moz-range-track{
  height:3px;
  border-radius:999px;
}

@media (max-width: 520px){
  .layout.is-dm-call .call-music-drawer{
    left:14px !important;
    right:14px !important;
    transform:none !important;
    width:auto !important;
  }
  .call-music-drawer .music-card.music2026.is-collapsed::before{
    width:46px; height:46px; border-radius:14px;
  }
  .call-music-drawer .music-card.music2026.is-collapsed{
    grid-template-columns:46px 1fr auto;
    min-height:72px !important;
    max-height:72px !important;
    height:72px !important;
  }
}

/* =============================
   FIX32+: Discord-like brand animation
   ============================= */
@keyframes ncBrandHue {
  0% { filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(56,189,248,.35)); }
  50% { filter: hue-rotate(140deg) drop-shadow(0 0 14px rgba(34,197,94,.35)); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 8px rgba(236,72,153,.35)); }
}
@keyframes ncBrandPulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.03); }
}
@keyframes ncBrandJitter {
  0% { transform: translateZ(0) rotate(0deg); }
  25% { transform: translateZ(0) translate(0.5px,-0.5px) rotate(-0.6deg); }
  50% { transform: translateZ(0) translate(-0.6px,0.4px) rotate(0.7deg); }
  75% { transform: translateZ(0) translate(0.4px,0.6px) rotate(-0.5deg); }
  100% { transform: translateZ(0) rotate(0deg); }
}

.dc-brand-btn{
  position: relative;
  border-radius: 18px;
  overflow: visible;
}
.dc-brand-btn .dc-brand-img{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: cover;
  background: transparent;
  animation: ncBrandHue 7s linear infinite, ncBrandPulse 2.6s ease-in-out infinite;
  will-change: filter, transform;
}
.dc-brand-btn:hover .dc-brand-img{
  animation-duration: 2.4s, 1.4s;
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 18px rgba(99,102,241,.38));
}
.dc-brand-btn:hover .dc-brand-img{
  animation-name: ncBrandHue, ncBrandJitter;
}

/* =============================
   FIX32+ (extra): Brand logo "Discord-like" letters jump + spin
   ============================= */
@keyframes ncBrandRingSpin { to { transform: rotate(360deg); } }
@keyframes ncNPFloat {
  0%,100% { transform: translateZ(18px) translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateZ(18px) translateY(-1.2px) rotate(1.6deg) scale(1.02); }
}
@keyframes ncNPBounceN {
  0% { transform: translateZ(18px) translate(-6px,0) rotate(0deg) scale(1); }
  30% { transform: translateZ(18px) translate(-10px,-10px) rotate(-18deg) scale(1.18, .92); }
  55% { transform: translateZ(18px) translate(-4px,2px) rotate(10deg) scale(.98,1.06); }
  75% { transform: translateZ(18px) translate(-7px,-2px) rotate(-8deg) scale(1.04); }
  100% { transform: translateZ(18px) translate(-6px,0) rotate(0deg) scale(1); }
}
@keyframes ncNPBounceP {
  0% { transform: translateZ(18px) translate(6px,0) rotate(0deg) scale(1); }
  28% { transform: translateZ(18px) translate(10px,-11px) rotate(26deg) scale(1.16,.90); }
  52% { transform: translateZ(18px) translate(5px,3px) rotate(-12deg) scale(.98,1.08); }
  74% { transform: translateZ(18px) translate(8px,-2px) rotate(10deg) scale(1.03); }
  100% { transform: translateZ(18px) translate(6px,0) rotate(0deg) scale(1); }
}
@keyframes ncNPShimmer {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.18) saturate(1.35); }
  100% { filter: brightness(1) saturate(1); }
}


@keyframes ncNPWiggleN {
  0%, 100% { transform: translateZ(18px) translateX(-6px) rotate(0deg); }
  50% { transform: translateZ(18px) translateX(-6px) rotate(14deg); }
}
@keyframes ncNPWiggleP {
  0%, 100% { transform: translateZ(18px) translateX(6px) rotate(0deg); }
  50% { transform: translateZ(18px) translateX(6px) rotate(-14deg); }
}

.dc-brand-btn{ perspective: 650px; }
.dc-brand-btn:hover{ transform: translateZ(0) rotateX(10deg) rotateY(-10deg); }
.dc-brand-btn::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 24px;
  background: conic-gradient(from 0deg, rgba(99,102,241,.0), rgba(56,189,248,.55), rgba(34,197,94,.45), rgba(236,72,153,.50), rgba(99,102,241,.0));
  filter: blur(12px);
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 0;
}
.dc-brand-btn:hover::before{
  opacity: .65;
  animation: ncBrandRingSpin 1.8s linear infinite;
}

.dc-brand-btn .dc-brand-img{ position: relative; z-index: 1; transform-style: preserve-3d; }

.dc-brand-btn .dc-brand-np{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index: 2;
  opacity: 0;
  transform: translateZ(18px);
  transition: opacity .18s ease;
}
.dc-brand-btn .dc-brand-np .np{
  display:inline-block;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -1px;
  padding: 1px 0;
  text-shadow:
    0 0 10px rgba(56,189,248,.22),
    0 0 18px rgba(99,102,241,.16);
  opacity: .0;
}
.dc-brand-btn:hover .dc-brand-np{ opacity: 1; }
.dc-brand-btn:hover .dc-brand-np .np{ opacity: .92; animation: ncNPShimmer 1.1s ease-in-out infinite; }

.dc-brand-btn .dc-brand-np .np.n{ transform: translateZ(18px) translateX(-6px); }
.dc-brand-btn .dc-brand-np .np.p{ transform: translateZ(18px) translateX(6px); }

/* Idle: barely-there float so it feels alive */
.dc-brand-btn .dc-brand-np .np{ animation: ncNPFloat 3.6s ease-in-out infinite; }

/* Hover: N and P jump + rotate independently ("Discord vibe") */
.dc-brand-btn:hover .dc-brand-np .np.n{ animation: ncNPBounceN .85s cubic-bezier(.18,.9,.24,1.25) 1, ncNPWiggleN 2.6s ease-in-out .85s infinite, ncNPShimmer 1.1s ease-in-out infinite; }
.dc-brand-btn:hover .dc-brand-np .np.p{ animation: ncNPBounceP .85s cubic-bezier(.18,.9,.24,1.25) 1, ncNPWiggleP 2.6s ease-in-out .85s infinite, ncNPShimmer 1.1s ease-in-out infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dc-brand-btn .dc-brand-img,
  .dc-brand-btn .dc-brand-np .np,
  .dc-brand-btn::before{ animation: none !important; transition: none !important; }
}


/* =============================
   FIX32+: Password preview toggle + screenshare privacy lock
   ============================= */
.pw-wrap{
  position: relative;
  display: block;
  width: 100%;
}
.pw-wrap input{
  width: 100%;
  box-sizing: border-box;
}

/* Keep generator button visible in register: input grows, button keeps size */
.pw-row .pw-wrap{ flex: 1 1 auto; min-width: 0; }
.pw-row .pw-gen{ flex: 0 0 auto; }

/* Eye inside the input — no square, no "jump" animation */
.pw-eye{
  position: absolute;
  right: 12px;
  top: 50%;
  /* IMPORTANT: global button hover styles in other skins can add transforms.
     We hard-freeze the transform so the eye never "flies out" of the input. */
  transform: translateY(-50%) !important;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  opacity: .78;
  border-radius: 10px;
  z-index: 2;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
  /* Prevent global button hover glow from making it look like the eye "jumps out" */
  box-shadow: none !important;
  filter: none !important;
}
.pw-eye::before,
.pw-eye::after{
  /* Some legacy skins attach tooltip bubbles via pseudo-elements.
     The eye button must stay visually fixed inside the input. */
  content: none !important;
}
.pw-eye:hover{ opacity: 1; background: rgba(255,255,255,.10) !important; transform: translateY(-50%) !important; box-shadow:none !important; filter:none !important; }
.pw-eye:active{ background: rgba(255,255,255,.14) !important; transform: translateY(-50%) !important; box-shadow:none !important; filter:none !important; }
.pw-eye.is-disabled{ opacity: .35; cursor: not-allowed; }

/* IMPORTANT: When button skin is enabled (especially elevated), there are
   highly-specific !important transform rules on button:hover/button:active.
   They can override .pw-eye and make it "jump" outside the input.
   Force-freeze transform with higher specificity for ALL skins. */
html[data-btn-skin] .pw-eye,
html[data-btn-skin] .pw-eye:hover,
html[data-btn-skin] .pw-eye:active,
html[data-btn-skin="elevated"] .pw-eye:hover,
html[data-btn-skin="elevated"] .pw-eye:active{
  transform: translateY(-50%) !important;
}

/* Hard-disable global button motion effects for the eye (ripple/pop can make it look like it "flies" out). */
.pw-eye.btn-pop{ animation: none !important; }
.pw-eye.btn-ripple{ overflow: visible !important; }
.pw-eye .ripple{ display: none !important; }

/* Make room for the eye button */
.pw-wrap input[type="password"],
.pw-wrap input.nc-pw-input{ padding-right: 40px !important; }

/* Privacy lock: blur and force-hidden */
html.nc-lock-password .pw-eye{ opacity:.35 !important; pointer-events:none !important; }
html.nc-lock-password input[type="password"],
html.nc-lock-password input.nc-pw-input{ filter: blur(7px); }

/* =============================
   FIX32+: Music mini-bar bottom-right + drawer above (Discord-like)
   ============================= */
/* In call HUD */
#call-bar .music-minibar{
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  bottom: 16px !important;
  width: 320px !important;
  z-index: 1200 !important;
}
#call-bar .call-music-drawer{
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  bottom: 86px !important; /* above minibar */
  width: 360px !important;
  max-height: calc(100vh - 140px) !important;
  z-index: 1201 !important;
}

/* Advanced panel/content overflow & contrast */
#call-bar .call-music-drawer,
#call-bar .music-card{ overflow: visible !important; }
#call-bar .music2026-link,
#call-bar .music2026-linkrow,
#call-bar .music2026-hint,
#call-bar .music2026-sub{ color: rgba(255,255,255,.88) !important; }
#call-bar .music2026-mini{ display: inline-grid; place-items:center; }

/* Center the "note" icon (wave state) */
#call-bar .music2026-state{ display:inline-flex; width: 26px; justify-content:center; }


/* =============================
   FIX: Brand hover lightning outline (logo-shaped)
   - no white "N/P" overlay
   - lightning outline follows the actual logo silhouette (brand.png alpha)
   ============================= */

/* safety: if any older markup exists */
.dc-brand-btn .dc-brand-np{ display:none !important; }

/* no 3D tilt for the brand button */
.dc-brand-btn{ overflow: visible; }
.dc-brand-btn:hover{ transform:none !important; }

/* disable previous soft glow ring (we want only the bolt outline) */
.dc-brand-btn::before{ opacity:0 !important; animation:none !important; }

/* Bolt animations */
@keyframes ncBoltHue {
  0%   { filter: hue-rotate(0deg)   brightness(1.10) saturate(1.25); }
  50%  { filter: hue-rotate(150deg) brightness(1.35) saturate(1.45); }
  100% { filter: hue-rotate(360deg) brightness(1.10) saturate(1.25); }
}
@keyframes ncBoltFlicker {
  0%, 100% { opacity: .95; }
  12% { opacity: .55; }
  20% { opacity: 1; }
  44% { opacity: .62; }
  56% { opacity: 1; }
  74% { opacity: .68; }
}
@keyframes ncBoltShift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 180px 0, -260px 0, 0 0; }
}

/* Logo-shaped electric outline:
   1) backgrounds generate "jagged" electric streaks + a hue-shifting ring
   2) 2-layer mask creates a stroke (outer logo minus inner logo)
*/
.dc-brand-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index: 0;

  background:
    /* jagged electric streaks */
    repeating-linear-gradient(100deg,
      rgba(255,255,255,0) 0 10px,
      rgba(255,255,255,.75) 10px 12px,
      rgba(255,255,255,0) 12px 24px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0) 0 14px,
      rgba(255,255,255,.55) 14px 16px,
      rgba(255,255,255,0) 16px 34px),
    /* color ring (hue will shift to match logo vibe) */
    conic-gradient(from 0deg,
      rgba(56,189,248,0),
      rgba(56,189,248,.95),
      rgba(99,102,241,.85),
      rgba(236,72,153,.85),
      rgba(34,197,94,.85),
      rgba(56,189,248,0));

  background-size: 220px 220px, 260px 260px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;

  /* Make it a stroke that follows the PNG alpha */
  -webkit-mask-image: url("../img/brand.png"), url("../img/brand.png");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: 100% 100%, calc(100% - 6px) calc(100% - 6px);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0;
  transition: opacity .18s ease;

  filter:
    blur(.15px)
    contrast(1.35)
    drop-shadow(0 0 10px rgba(56,189,248,.32))
    drop-shadow(0 0 20px rgba(99,102,241,.24))
    drop-shadow(0 0 28px rgba(236,72,153,.16));
}

.dc-brand-btn:hover::after{
  opacity: 1;
  animation:
    ncBoltHue 3.2s linear infinite,
    ncBoltFlicker .95s steps(2,end) infinite,
    ncBoltShift 1.05s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .dc-brand-btn::after{ animation:none !important; }
}


/* Unread total badge on brand logo (Discord-like) */
#rail-brand{ position:relative; }
#nc-brand-unread{
  position:absolute;
  right:-2px;
  bottom:-2px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  line-height:18px;
  text-align:center;
  font-weight:700;
  color:#fff;
  background:rgba(255, 64, 64, .96);
  box-shadow:0 0 18px rgba(255, 64, 64, .35);
  pointer-events:none;
  transform: translateZ(0);
}
#nc-brand-unread.is-hidden{ display:none; }