/*
  NeonChat fix12: Discord-like "model" icon buttons (no visible squares)
  Goal: icon buttons look like Discord voice controls (transparent base, bg only on hover/active)
  Customizable via CSS variables (can be set from JS).
*/

:root{
  /* Icon button geometry */
  --dc-ic-size: 32px;
  --dc-ic-size-sm: 30px;
  --dc-ic-radius: 6px;
  --dc-ic-radius-lg: 10px;

  /* Colors (Discord-ish) */
  --dc-ic-fg: rgba(181,186,193,1);          /* #B5BAC1 */
  --dc-ic-fg-hover: rgba(219,222,225,1);    /* #DBDEE1 */
  --dc-ic-bg-hover: rgba(79,84,92,0.35);    /* #4F545C */
  --dc-ic-bg-active: rgba(79,84,92,0.55);
  --dc-ic-bg-on: rgba(79,84,92,0.35);
  --dc-ic-ring: 0 0 0 2px rgba(88,101,242,0.35);

  /* Accents */
  --dc-danger: rgba(237,66,69,1);           /* #ED4245 */
  --dc-success: rgba(35,165,90,1);          /* #23A55A */
}

/* Helper: all visual layers MUST follow shape */
.icon-btn,
.call-icon-btn,
.call-control,
.nc-tp-mini{
  border-radius: var(--dc-ic-radius);
}
.icon-btn::before, .icon-btn::after,
.call-icon-btn::before, .call-icon-btn::after,
.call-control::before, .call-control::after,
.nc-tp-mini::before, .nc-tp-mini::after{
  border-radius: inherit !important;
}
.btn-ripple{ border-radius: inherit; overflow:hidden; }

/* === Discord model style for icon-type buttons === */
html[data-btn-skin] .icon-btn,
html[data-btn-skin] .call-icon-btn,
html[data-btn-skin] .call-control,
html[data-btn-skin] .nc-tp-mini{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--dc-ic-fg) !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

/* Base sizes */
html[data-btn-skin] .icon-btn{ width: var(--dc-ic-size); height: var(--dc-ic-size); }
html[data-btn-skin] .icon-btn.sm{ width: var(--dc-ic-size-sm); height: var(--dc-ic-size-sm); }
html[data-btn-skin] .call-icon-btn{ width: var(--dc-ic-size); height: var(--dc-ic-size); }

/* Call controls are a bit larger in big call window */
html[data-btn-skin] .call-controls-main .call-control,
html[data-btn-skin] .call-controls-incoming .call-control{
  width: 40px;
  height: 40px;
  border-radius: var(--dc-ic-radius-lg);
}

/* DM mini call bar should match screenshot */
html[data-btn-skin] .voice-mini .icon-btn.sm{
  width: 32px;
  height: 32px;
  border-radius: var(--dc-ic-radius);
}

/* Hover/active background appears only when interacting */
html[data-btn-skin] .icon-btn:hover,
html[data-btn-skin] .call-icon-btn:hover,
html[data-btn-skin] .call-control:hover,
html[data-btn-skin] .nc-tp-mini:hover{
  background: var(--dc-ic-bg-hover) !important;
  color: var(--dc-ic-fg-hover) !important;
}

html[data-btn-skin] .icon-btn:active,
html[data-btn-skin] .call-icon-btn:active,
html[data-btn-skin] .call-control:active,
html[data-btn-skin] .nc-tp-mini:active{
  background: var(--dc-ic-bg-active) !important;
  transform: scale(0.96);
}

/* Elevated mode: tiny shadow on hover to feel like a "model" */
html[data-btn-skin="elevated"] .icon-btn:hover,
html[data-btn-skin="elevated"] .call-icon-btn:hover,
html[data-btn-skin="elevated"] .call-control:hover,
html[data-btn-skin="elevated"] .nc-tp-mini:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Flat mode: no motion (Discord-like calm) */
html[data-btn-skin="flat"] .icon-btn:hover,
html[data-btn-skin="flat"] .call-icon-btn:hover,
html[data-btn-skin="flat"] .call-control:hover,
html[data-btn-skin="flat"] .nc-tp-mini:hover{
  transform: none;
}

/* Focus ring */
html[data-btn-skin] .icon-btn:focus-visible,
html[data-btn-skin] .call-icon-btn:focus-visible,
html[data-btn-skin] .call-control:focus-visible,
html[data-btn-skin] .nc-tp-mini:focus-visible{
  outline: none !important;
  box-shadow: var(--dc-ic-ring) !important;
}

/* Toggled/on state: keep background subtle, but allow icon color accents */
html[data-btn-skin] .icon-btn.toggled,
html[data-btn-skin] .call-control.toggled,
html[data-btn-skin] .call-control.is-on,
html[data-btn-skin] .icon-btn.is-on{
  background: var(--dc-ic-bg-on) !important;
  color: var(--dc-ic-fg-hover) !important;
}

/* Muted / danger state for mic/sound buttons: icon becomes red like Discord */
html[data-btn-skin] .icon-btn.danger:not(:hover),
html[data-btn-skin] .call-control.danger:not(:hover){
  background: transparent !important;
  color: var(--dc-danger) !important;
}

/* End-call button should stay "filled" */
html[data-btn-skin] #btn-end-call.call-control.danger{
  background: rgba(237,66,69,0.90) !important;
  color: #fff !important;
}
html[data-btn-skin] #btn-end-call.call-control.danger:hover{
  background: rgba(237,66,69,1) !important;
}
html[data-btn-skin] #btn-end-call.call-control.danger:active{
  background: rgba(210,57,60,1) !important;
}

/* Small dropdown caret buttons (if present) */
html[data-btn-skin] .icon-btn.caret,
html[data-btn-skin] .call-control.caret{
  width: 24px;
  height: 32px;
  border-radius: 6px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion)[data-btn-skin] .icon-btn,
  html:not(.force-motion)[data-btn-skin] .call-icon-btn,
  html:not(.force-motion)[data-btn-skin] .call-control,
  html:not(.force-motion)[data-btn-skin] .nc-tp-mini{
    transition: none !important;
    transform: none !important;
  }
}

/* Ripple should be subtle and follow button shape */
html[data-btn-skin] .icon-btn.btn-ripple .ripple,
html[data-btn-skin] .call-icon-btn.btn-ripple .ripple,
html[data-btn-skin] .call-control.btn-ripple .ripple,
html[data-btn-skin] .nc-tp-mini.btn-ripple .ripple{
  background: rgba(255,255,255,0.28) !important;
  mix-blend-mode: normal !important;
}



/* ==== FIX19: Make call controls feel alive (Discord-like, no squares) ==== */

/* keep icons perfectly centered */
.icon-btn svg.i, .call-control svg.i, .call-icon-btn svg.i{
  width:20px; height:20px;
  display:block;
}

/* per-button hover vibes (light, not annoying) */
#btn-toggle-mic:hover, #btn-voice-mic:hover, #me-mic:hover{ animation: ncWiggle 620ms cubic-bezier(.2,.9,.2,1); }
#btn-toggle-sound:hover, #btn-voice-sound:hover, #me-deafen:hover{ animation: ncFloat 900ms cubic-bezier(.2,.9,.2,1) infinite alternate; }
#btn-call-video:hover, #btn-header-call:hover{ animation: ncFlip 520ms cubic-bezier(.2,.9,.2,1); }
#btn-share-screen:hover{ animation: ncSlide 520ms cubic-bezier(.2,.9,.2,1); }
#btn-end-call:hover{ animation: ncShake 420ms cubic-bezier(.2,.9,.2,1); }
#btn-header-group-call:hover{ animation: ncPulse 780ms cubic-bezier(.2,.9,.2,1) infinite; }

/* FIX22: fallback hover animation for ANY icon button (so it's never "dead")
   Specific per-button rules above will still override this when present. */
html.force-motion .icon-btn:hover svg.i,
html.force-motion .call-control:hover svg.i,
html.force-motion .call-icon-btn:hover svg.i,
html.force-motion .nc-tp-mini:hover svg.i{
  transform-origin: 50% 50%;
  animation: ncIconBop 240ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes ncIconBop{
  0%{ transform: translateY(0) scale(1); }
  60%{ transform: translateY(-1px) scale(1.06); }
  100%{ transform: translateY(0) scale(1); }
}

/* click burst class */
.icon-btn.fx-tap, .call-control.fx-tap, .call-icon-btn.fx-tap{
  animation: ncTapPop 180ms cubic-bezier(.2,.9,.2,1);
}
@keyframes ncTapPop{ from{ transform: translateY(0) scale(1);} to{ transform: translateY(-1px) scale(1.06);} }

/* unique click classes (added by JS) */
.icon-btn.fx-mic, .call-control.fx-mic{ animation: ncWiggle 620ms cubic-bezier(.2,.9,.2,1); }
.icon-btn.fx-sound, .call-control.fx-sound{ animation: ncFloatOnce 620ms cubic-bezier(.2,.9,.2,1); }
.icon-btn.fx-cam, .call-control.fx-cam{ animation: ncFlip 520ms cubic-bezier(.2,.9,.2,1); }
.icon-btn.fx-screen, .call-control.fx-screen{ animation: ncSlide 520ms cubic-bezier(.2,.9,.2,1); }
.icon-btn.fx-hang, .call-control.fx-hang{ animation: ncShake 420ms cubic-bezier(.2,.9,.2,1); }
.icon-btn.fx-group, .call-control.fx-group{ animation: ncPulseOnce 620ms cubic-bezier(.2,.9,.2,1); }

/* gear: spin on hover + on click */
#btn-voice-settings:hover svg, #gm-settings:hover svg, #me-settings:hover svg, #ss-settings:hover svg,
#btn-header-settings:hover svg, #btn-call-settings:hover svg,
.icon-btn.fx-gear svg, .call-control.fx-gear svg{
  transform-origin: 50% 50%;
  animation: ncGearSpin 1.1s linear infinite;
}
@keyframes ncGearSpin{ to{ transform: rotate(360deg);} }

@keyframes ncWiggle{
  0%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-1px) rotate(-6deg); }
  60%{ transform: translateY(-1px) rotate(7deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}
@keyframes ncShake{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-2px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}
@keyframes ncFloat{
  from{ transform: translateY(0); }
  to{ transform: translateY(-2px); }
}
@keyframes ncFloatOnce{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
  100%{ transform: translateY(0); }
}
@keyframes ncFlip{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(22deg); }
}
@keyframes ncSlide{
  0%{ transform: translateX(0); }
  60%{ transform: translateX(3px); }
  100%{ transform: translateX(0); }
}
@keyframes ncPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
@keyframes ncPulseOnce{
  0%{ transform: scale(1); }
  55%{ transform: scale(1.10); }
  100%{ transform: scale(1); }
}



/* ==== FIX23: stronger icon-only animations (mic trembles, headphones move, etc.) ==== */
html.force-motion #btn-toggle-mic:hover svg.i,
html.force-motion #btn-voice-mic:hover svg.i,
html.force-motion #me-mic:hover svg.i{
  transform-origin: 50% 60%;
  animation: ncMicTremble 520ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #btn-toggle-sound:hover svg.i,
html.force-motion #btn-voice-sound:hover svg.i{
  transform-origin: 50% 55%;
  animation: ncSpeakerTick 620ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #me-deafen:hover svg.i{
  transform-origin: 50% 70%;
  animation: ncHeadphonesBob 720ms cubic-bezier(.2,.9,.2,1);
}

/* FIX24: earcups slide toward each other (Discord-like “closing”) */
html.force-motion #me-deafen:hover svg.i .hp-cup{
  transform-box: fill-box;
  transform-origin: center;
}
html.force-motion #me-deafen:hover svg.i .hp-cup-left{
  animation: ncCupLeftIn 720ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #me-deafen:hover svg.i .hp-cup-right{
  animation: ncCupRightIn 720ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #btn-toggle-music:hover svg.i{
  transform-origin: 50% 70%;
  animation: ncMusicBounce 700ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #btn-call-video:hover svg.i,
html.force-motion #btn-header-call:hover svg.i{
  transform-origin: 50% 50%;
  animation: ncCamPeek 560ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #btn-share-screen:hover svg.i{
  transform-origin: 50% 50%;
  animation: ncScreenSlide 640ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #btn-end-call:hover svg.i{
  transform-origin: 50% 55%;
  animation: ncPhoneShake 420ms cubic-bezier(.2,.9,.2,1);
}
html.force-motion #btn-header-group-call:hover svg.i{
  transform-origin: 50% 50%;
  animation: ncGroupPulse 860ms cubic-bezier(.2,.9,.2,1) infinite;
}

/* subtle “alive” state when toggled (mute/deafen) */
html.force-motion #btn-toggle-mic.toggled svg.i,
html.force-motion #btn-voice-mic.toggled svg.i,
html.force-motion #me-mic.toggled svg.i{
  transform-origin: 50% 60%;
  animation: ncMutedHum 1.15s ease-in-out infinite;
}
html.force-motion #btn-toggle-sound.toggled svg.i,
html.force-motion #btn-voice-sound.toggled svg.i,
html.force-motion #me-deafen.toggled svg.i{
  transform-origin: 50% 70%;
  animation: ncMutedHum 1.15s ease-in-out infinite;
}

@keyframes ncMicTremble{
  0%{ transform: translateX(0) rotate(0deg) scale(1); }
  12%{ transform: translateX(-1px) rotate(-6deg) scale(1.02); }
  24%{ transform: translateX(1px) rotate(6deg) scale(1.02); }
  36%{ transform: translateX(-1px) rotate(-5deg) scale(1.03); }
  52%{ transform: translateX(1px) rotate(5deg) scale(1.03); }
  70%{ transform: translateX(-0.5px) rotate(-3deg) scale(1.02); }
  100%{ transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes ncHeadphonesBob{
  0%{ transform: translateY(0) scale(1); }
  30%{ transform: translateY(-1px) scale(1.03); }
  60%{ transform: translateY(0) scale(1.02); }
  100%{ transform: translateY(0) scale(1); }
}

@keyframes ncCupLeftIn{
  0%{ transform: translateX(0) rotate(0deg) scale(1); }
  30%{ transform: translateX(1.6px) rotate(6deg) scale(1.06); }
  62%{ transform: translateX(1.0px) rotate(3deg) scale(1.03); }
  100%{ transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes ncCupRightIn{
  0%{ transform: translateX(0) rotate(0deg) scale(1); }
  30%{ transform: translateX(-1.6px) rotate(-6deg) scale(1.06); }
  62%{ transform: translateX(-1.0px) rotate(-3deg) scale(1.03); }
  100%{ transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes ncSpeakerTick{
  0%{ transform: translateX(0) rotate(0deg); }
  30%{ transform: translateX(1px) rotate(6deg); }
  60%{ transform: translateX(-1px) rotate(-6deg); }
  100%{ transform: translateX(0) rotate(0deg); }
}
@keyframes ncMusicBounce{
  0%{ transform: translateY(0) scale(1); }
  35%{ transform: translateY(-2px) scale(1.05); }
  70%{ transform: translateY(0) scale(1.02); }
  100%{ transform: translateY(0) scale(1); }
}
@keyframes ncCamPeek{
  0%{ transform: translateY(0) rotate(0deg); }
  45%{ transform: translateY(-1px) rotate(16deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}
@keyframes ncScreenSlide{
  0%{ transform: translateX(0) scale(1); }
  35%{ transform: translateX(3px) scale(1.03); }
  70%{ transform: translateX(-1px) scale(1.01); }
  100%{ transform: translateX(0) scale(1); }
}
@keyframes ncPhoneShake{
  0%{ transform: rotate(0deg); }
  20%{ transform: rotate(-10deg); }
  40%{ transform: rotate(10deg); }
  60%{ transform: rotate(-8deg); }
  80%{ transform: rotate(8deg); }
  100%{ transform: rotate(0deg); }
}
@keyframes ncGroupPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.09); }
  100%{ transform: scale(1); }
}
@keyframes ncMutedHum{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-0.6px) scale(1.03); }
  100%{ transform: translateY(0) scale(1); }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) #btn-toggle-mic:hover,
  html:not(.force-motion) #btn-toggle-sound:hover,
  html:not(.force-motion) #btn-voice-mic:hover,
  html:not(.force-motion) #btn-voice-sound:hover,
  html:not(.force-motion) #me-mic:hover,
  html:not(.force-motion) #me-deafen:hover,
  html:not(.force-motion) #btn-call-video:hover,
  html:not(.force-motion) #btn-header-call:hover,
  html:not(.force-motion) #btn-share-screen:hover,
  html:not(.force-motion) #btn-end-call:hover,
  html:not(.force-motion) #btn-header-group-call:hover{
    animation:none !important;
  }
  html:not(.force-motion) #btn-header-settings:hover svg,
  html:not(.force-motion) #btn-call-settings:hover svg{ animation:none !important; }
}