/* WebChatDesign - Studio Micro moderne (micro uniquement) */
:root{
  --wcd-eq-bg:rgba(5,13,29,.97);
  --wcd-eq-panel:rgba(12,27,50,.88);
  --wcd-eq-border:rgba(255,255,255,.24);
  --wcd-eq-cyan:#5ff5ff;
  --wcd-eq-blue:#008cff;
  --wcd-eq-text:#fff;
  --wcd-eq-muted:rgba(255,255,255,.69);
}
#wcdEqPanel{
  position:fixed;z-index:999999;width:610px;max-width:calc(100vw - 16px);
  color:var(--wcd-eq-text);font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.015) 38%),var(--wcd-eq-bg);
  border:1px solid var(--wcd-eq-border);border-radius:20px;padding:11px;
  box-shadow:0 22px 54px rgba(0,0,0,.62),0 0 28px rgba(0,170,255,.24),inset 0 1px 0 rgba(255,255,255,.23);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#wcdEqPanel[hidden]{display:none!important}
.wcd-eq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;padding:1px 2px}
.wcd-eq-title{display:flex;align-items:center;gap:9px;font-weight:900;font-size:17px;text-shadow:0 0 10px rgba(95,245,255,.55)}
.wcd-eq-title>i{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:linear-gradient(180deg,rgba(95,245,255,.30),rgba(0,96,190,.30));border:1px solid rgba(126,245,255,.45);box-shadow:0 0 15px rgba(0,183,255,.26)}
.wcd-eq-title small{font-size:9px;letter-spacing:1.25px;color:var(--wcd-eq-cyan);padding:4px 7px;border-radius:20px;border:1px solid rgba(95,245,255,.28);background:rgba(95,245,255,.08)}
.wcd-eq-close{width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.30);background:rgba(255,255,255,.09);color:#fff;cursor:pointer;font-weight:900;font-size:18px}
.wcd-mic-console{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(230px,.92fr);gap:10px}
.wcd-mic-controls,.wcd-mic-meter{border:1px solid rgba(255,255,255,.17);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),var(--wcd-eq-panel);padding:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.wcd-eq-note{font-size:11px;line-height:1.3;color:var(--wcd-eq-muted);margin:0 0 10px}
.wcd-mic-sliders{display:grid;gap:7px}
.wcd-mic-row{display:grid;grid-template-columns:100px 1fr 54px;align-items:center;gap:8px;padding:6px 7px;border-radius:11px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.08)}
.wcd-mic-label{display:flex;align-items:center;gap:7px;color:#f5fcff;font-size:12px;font-weight:850}
.wcd-mic-label i{width:18px;text-align:center;color:var(--wcd-eq-cyan);filter:drop-shadow(0 0 5px rgba(95,245,255,.55))}
.wcd-mic-row input[type=range]{width:100%;accent-color:var(--wcd-eq-cyan);cursor:pointer}
.wcd-mic-row output{text-align:right;font-size:11px;font-weight:900;color:#dffcff;font-variant-numeric:tabular-nums}
.wcd-mic-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.wcd-mic-presets button,.wcd-eq-reset{border:1px solid rgba(255,255,255,.23);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));color:#fff;font-size:10px;font-weight:850;padding:7px 6px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.wcd-mic-presets button:hover,.wcd-eq-reset:hover,.wcd-eq-close:hover{filter:brightness(1.16)}
.wcd-meter-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.wcd-meter-top span{font-size:10px;font-weight:900;letter-spacing:.8px;color:rgba(255,255,255,.72)}
.wcd-meter-top strong{font-size:13px;color:var(--wcd-eq-cyan);font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(95,245,255,.50)}
.wcd-spectrum{position:relative;height:126px;padding:9px 23px 8px 9px;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:repeating-linear-gradient(to top,transparent 0,transparent 24px,rgba(255,255,255,.07) 25px),linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,12,27,.72));box-shadow:inset 0 0 18px rgba(0,0,0,.58),0 0 14px rgba(0,183,255,.11)}
.wcd-spectrum-bars{height:100%;display:flex;align-items:flex-end;gap:4px}
.wcd-spectrum-bars span{--h:3%;flex:1;height:var(--h);min-height:3px;border-radius:4px 4px 1px 1px;background:linear-gradient(to top,#20e66e 0 48%,#ffe02b 68%,#ff962c 84%,#ff3131 100%);box-shadow:0 0 7px rgba(32,230,110,.34);transition:height .055s linear}
.wcd-spectrum-scale{position:absolute;right:4px;top:7px;bottom:7px;display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:rgba(255,255,255,.45)}
.wcd-vu-wrap{margin-top:9px}
.wcd-vu-labels{display:flex;justify-content:space-between;font-size:7px;color:rgba(255,255,255,.52);margin:0 2px 4px}
.wcd-vu-track{position:relative;height:13px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.19);background:rgba(0,0,0,.48);box-shadow:inset 0 0 7px rgba(0,0,0,.65)}
#wcdVuFill{display:block;width:0;height:100%;background:linear-gradient(90deg,#21e876 0 58%,#ffe12c 72%,#ff982d 86%,#ff3030 100%);box-shadow:0 0 9px rgba(33,232,118,.38);transition:width .045s linear}
#wcdVuPeak{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 7px #fff;transition:left .045s linear}
.wcd-setting-readout{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:9px}
.wcd-setting-readout div{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.wcd-setting-readout span{font-size:7px;font-weight:900;color:rgba(255,255,255,.55);letter-spacing:.5px}
.wcd-setting-readout b{font-size:9px;color:#e8fdff;font-variant-numeric:tabular-nums}
.wcd-eq-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:0 2px}
.wcd-mic-status{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.68);font-size:10px}
.wcd-mic-status i{width:8px;height:8px;border-radius:50%;background:#708096;box-shadow:0 0 7px rgba(112,128,150,.45)}
.wcd-mic-status.active i{background:#27eb75;box-shadow:0 0 9px rgba(39,235,117,.8)}
.wcd-mic-status.active b{color:#baffd1}
.wcd-eq-reset{padding:7px 11px}
@media(max-width:700px){
  #wcdEqPanel{width:min(390px,calc(100vw - 12px));padding:8px;border-radius:16px}
  .wcd-mic-console{grid-template-columns:1fr;gap:7px;max-height:calc(100vh - 120px);overflow:auto}
  .wcd-mic-controls,.wcd-mic-meter{padding:8px}
  .wcd-mic-row{grid-template-columns:88px 1fr 49px;padding:5px 6px;gap:6px}
  .wcd-spectrum{height:92px}
  .wcd-eq-title{font-size:14px}.wcd-eq-title small{display:none}
  .wcd-mic-presets button{font-size:9px;padding:6px 4px}
}


/* === Studio Micro intégré exactement dans la carte du player radio === */
#radioRoomWrap.wcd-eq-mode > .radio-room-card{display:none!important}
#radioRoomWrap.wcd-eq-mode{position:relative!important;width:100%!important;max-width:100%!important}
#radioRoomWrap #wcdEqPanel.wcd-eq-docked{
  position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:var(--wcd-radio-height,auto)!important;min-height:0!important;max-height:none!important;
  margin:var(--wcd-radio-margin,0)!important;padding:7px 8px!important;overflow:hidden!important;box-sizing:border-box!important;
  border-radius:var(--wcd-radio-radius,14px)!important;
  border:1px solid rgba(0,255,140,.55)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.01) 40%),rgba(5,13,29,.96)!important;
  box-shadow:0 0 18px rgba(0,255,140,.10),inset 0 0 16px rgba(0,255,140,.08)!important;
  z-index:3!important;transform:none!important;
}
#radioRoomWrap #wcdEqPanel .wcd-eq-head{margin-bottom:4px!important;min-height:20px}
#radioRoomWrap #wcdEqPanel .wcd-eq-title{font-size:11px!important;gap:5px!important}
#radioRoomWrap #wcdEqPanel .wcd-eq-title>i{width:22px!important;height:22px!important;border-radius:7px!important;font-size:10px!important}
#radioRoomWrap #wcdEqPanel .wcd-eq-title small{font-size:6px!important;padding:2px 4px!important;letter-spacing:.5px!important}
#radioRoomWrap #wcdEqPanel .wcd-eq-close{width:22px!important;height:22px!important;border-radius:7px!important;font-size:14px!important;line-height:18px!important;padding:0!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-console{grid-template-columns:1.08fr .92fr!important;gap:5px!important;max-height:none!important;overflow:hidden!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-controls,
#radioRoomWrap #wcdEqPanel .wcd-mic-meter{padding:5px!important;border-radius:9px!important;min-width:0!important}
#radioRoomWrap #wcdEqPanel .wcd-eq-note{display:none!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-sliders{gap:2px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-row{grid-template-columns:62px minmax(0,1fr) 38px!important;gap:3px!important;padding:2px 3px!important;border-radius:6px!important;min-height:18px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-label{font-size:7px!important;gap:3px!important;white-space:nowrap}
#radioRoomWrap #wcdEqPanel .wcd-mic-label i{width:10px!important;font-size:7px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-row input[type=range]{height:12px!important;min-width:0!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-row output{font-size:7px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-presets{grid-template-columns:repeat(3,1fr)!important;gap:2px!important;margin-top:3px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-presets button{font-size:6px!important;padding:3px 1px!important;border-radius:6px!important;white-space:nowrap}
#radioRoomWrap #wcdEqPanel .wcd-meter-top{margin-bottom:2px!important}
#radioRoomWrap #wcdEqPanel .wcd-meter-top span{font-size:6px!important}
#radioRoomWrap #wcdEqPanel .wcd-meter-top strong{font-size:8px!important}
#radioRoomWrap #wcdEqPanel .wcd-spectrum{height:48px!important;padding:4px 14px 4px 4px!important;border-radius:7px!important}
#radioRoomWrap #wcdEqPanel .wcd-spectrum-bars{gap:2px!important}
#radioRoomWrap #wcdEqPanel .wcd-spectrum-scale{font-size:5px!important;right:2px!important;top:3px!important;bottom:3px!important}
#radioRoomWrap #wcdEqPanel .wcd-vu-wrap{margin-top:3px!important}
#radioRoomWrap #wcdEqPanel .wcd-vu-labels{font-size:5px!important;margin-bottom:1px!important}
#radioRoomWrap #wcdEqPanel .wcd-vu-track{height:7px!important}
#radioRoomWrap #wcdEqPanel .wcd-setting-readout{gap:2px!important;margin-top:3px!important}
#radioRoomWrap #wcdEqPanel .wcd-setting-readout div{padding:2px 3px!important;border-radius:5px!important}
#radioRoomWrap #wcdEqPanel .wcd-setting-readout span{font-size:5px!important}
#radioRoomWrap #wcdEqPanel .wcd-setting-readout b{font-size:6px!important}
#radioRoomWrap #wcdEqPanel .wcd-eq-footer{margin-top:3px!important;gap:4px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-status{font-size:6px!important;gap:3px!important}
#radioRoomWrap #wcdEqPanel .wcd-mic-status i{width:5px!important;height:5px!important}
#radioRoomWrap #wcdEqPanel .wcd-eq-reset{font-size:6px!important;padding:3px 5px!important;border-radius:6px!important}
@media(max-width:900px){
  #radioRoomWrap #wcdEqPanel.wcd-eq-docked{padding:5px!important}
  #radioRoomWrap #wcdEqPanel .wcd-eq-title small{display:none!important}
  #radioRoomWrap #wcdEqPanel .wcd-mic-row{grid-template-columns:54px minmax(0,1fr) 34px!important}
  #radioRoomWrap #wcdEqPanel .wcd-mic-label{font-size:6px!important}
  #radioRoomWrap #wcdEqPanel .wcd-spectrum{height:42px!important}
}

/* Studio Micro : masquer uniquement la barre de titre réservée au player radio. */
#radioRoomWrap.wcd-eq-mode > .radio-room-titlebar{
  display:none!important;
}

/* Studio Micro : récupérer exactement l'espace libéré par l'ancienne barre radio. */
#radioRoomWrap.wcd-eq-mode #wcdEqPanel.wcd-eq-docked{
  margin-top:-18px!important;
  height:calc(var(--wcd-radio-height, 0px) + 18px)!important;
}

/* === Studio Micro synchronisé avec les skins du chat ===
   Couleurs appliquées par touches uniquement : boutons, textes, curseurs,
   lignes et lueurs. Dimensions et fonctionnement audio inchangés. */
body.wcd-skin-active #wcdEqPanel{
  --wcd-eq-cyan:var(--wcd-skin-primary);
  --wcd-eq-blue:var(--wcd-skin-secondary);
  --wcd-eq-panel:color-mix(in srgb, var(--wcd-skin-panel) 76%, rgba(5,13,29,.90));
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 68%, rgba(255,255,255,.22)) !important;
  box-shadow:0 0 18px color-mix(in srgb, var(--wcd-skin-glow) 72%, transparent),
             inset 0 0 16px color-mix(in srgb, var(--wcd-skin-primary) 12%, transparent) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-eq-title{
  text-shadow:0 0 10px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-eq-title>i{
  color:#fff !important;
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 72%, white 12%) !important;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--wcd-skin-primary) 38%, transparent),
    color-mix(in srgb, var(--wcd-skin-secondary) 25%, rgba(0,0,0,.35))) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 0 13px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-eq-title small,
body.wcd-skin-active #wcdEqPanel .wcd-meter-top strong,
body.wcd-skin-active #wcdEqPanel .wcd-mic-label i{
  color:var(--wcd-skin-primary) !important;
  text-shadow:0 0 8px var(--wcd-skin-glow) !important;
  filter:drop-shadow(0 0 5px var(--wcd-skin-glow));
}
body.wcd-skin-active #wcdEqPanel .wcd-eq-title small{
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 54%, transparent) !important;
  background:color-mix(in srgb, var(--wcd-skin-primary) 12%, transparent) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-controls,
body.wcd-skin-active #wcdEqPanel .wcd-mic-meter{
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 34%, rgba(255,255,255,.14)) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),
             color-mix(in srgb, var(--wcd-skin-panel) 68%, rgba(12,27,50,.78)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 9px color-mix(in srgb, var(--wcd-skin-glow) 32%, transparent) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-row{
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 22%, rgba(255,255,255,.07)) !important;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--wcd-skin-primary) 8%, rgba(0,0,0,.18)),
    rgba(0,0,0,.15)) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-row input[type=range]{
  accent-color:var(--wcd-skin-primary) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-row output,
body.wcd-skin-active #wcdEqPanel .wcd-setting-readout b{
  color:color-mix(in srgb, var(--wcd-skin-primary) 62%, white) !important;
  text-shadow:0 0 6px var(--wcd-skin-glow);
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-presets button,
body.wcd-skin-active #wcdEqPanel .wcd-eq-reset,
body.wcd-skin-active #wcdEqPanel .wcd-eq-close{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 62%, rgba(255,255,255,.20)) !important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.20),
    color-mix(in srgb, var(--wcd-skin-primary) 20%, rgba(0,0,0,.26))) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 0 9px color-mix(in srgb, var(--wcd-skin-glow) 58%, transparent) !important;
  text-shadow:0 0 6px rgba(0,0,0,.75),0 0 7px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-presets button::before,
body.wcd-skin-active #wcdEqPanel .wcd-eq-reset::before,
body.wcd-skin-active #wcdEqPanel .wcd-eq-close::before{
  content:'';
  position:absolute;
  left:2px;right:2px;top:1px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  opacity:.72;pointer-events:none;
}
body.wcd-skin-active #wcdEqPanel .wcd-spectrum{
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 36%, rgba(255,255,255,.12)) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.58),0 0 13px color-mix(in srgb, var(--wcd-skin-glow) 42%, transparent) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-spectrum-bars span{
  box-shadow:0 0 7px color-mix(in srgb, var(--wcd-skin-primary) 38%, rgba(32,230,110,.28)) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-vu-track,
body.wcd-skin-active #wcdEqPanel .wcd-setting-readout div{
  border-color:color-mix(in srgb, var(--wcd-skin-primary) 28%, rgba(255,255,255,.09)) !important;
}
body.wcd-skin-active #wcdEqPanel .wcd-mic-status.active b{
  color:color-mix(in srgb, var(--wcd-skin-primary) 55%, #baffd1) !important;
  text-shadow:0 0 7px var(--wcd-skin-glow);
}

/* Mode automatique : aucune fermeture manuelle, le micro pilote la vue. */
#wcdEqPanel .wcd-eq-close{display:none!important}