/* === Studio Skins Chat - ajouté sans toucher au reste du chat === */
:root{
  --wcd-skin-primary:#ffd34d;
  --wcd-skin-secondary:#ff7ac3;
  --wcd-skin-glow:rgba(255,211,77,.42);
  --wcd-skin-soft:rgba(255,211,77,.18);
  --wcd-skin-panel:rgba(5,8,18,.76);
  --wcd-skin-text:#ffffff;
}

#btnChatSkin{
  pointer-events:auto !important;
  cursor:pointer !important;
  position:relative;
  overflow:hidden;
}
#btnChatSkin::before,
body.wcd-skin-active .tb::before,
body.wcd-skin-active .btn::before,
body.wcd-skin-active .options-tab::before,
body.wcd-skin-active .mobile-side-tab::before{
  content:'';
  position:absolute;
  left:2px;
  right:2px;
  top:2px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  opacity:.72;
  pointer-events:none;
}

.wcd-skin-menu{
  position:fixed;
  width:296px;
  max-width:calc(100vw - 18px);
  max-height:min(520px, calc(100vh - 26px));
  padding:10px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(8,12,28,.98), rgba(0,0,0,.94));
  box-shadow:0 18px 45px rgba(0,0,0,.72), 0 0 30px var(--wcd-skin-glow);
  color:#fff;
  z-index:999999;
  overflow:auto;
  backdrop-filter:blur(12px);
}
.wcd-skin-menu[hidden]{display:none!important;}
.wcd-skin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.wcd-skin-title{
  font-size:14px;
  font-weight:900;
  letter-spacing:.25px;
  color:#fff;
  text-shadow:0 0 10px var(--wcd-skin-glow);
}
.wcd-skin-close,
.wcd-skin-reset{
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
  background:rgba(255,255,255,.08);
  border-radius:10px;
  min-height:26px;
  padding:4px 8px;
  cursor:pointer;
  font-weight:800;
}
.wcd-skin-close{width:28px;padding:0;}
.wcd-skin-reset{width:100%;margin:8px 0 0;}
.wcd-skin-list{display:flex;flex-direction:column;gap:7px;}
.wcd-skin-card{
  display:grid;
  grid-template-columns:54px 1fr auto;
  align-items:center;
  gap:9px;
  min-height:54px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  padding:6px 8px;
  background:rgba(255,255,255,.065);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.wcd-skin-card::after{
  content:'';
  position:absolute;
  left:8px;right:8px;top:3px;height:3px;border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  opacity:.6;
}
.wcd-skin-card:hover,
.wcd-skin-card.active{
  border-color:var(--wcd-skin-primary);
  box-shadow:0 0 14px var(--wcd-skin-glow), inset 0 0 18px rgba(255,255,255,.06);
}
.wcd-skin-preview{
  width:54px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75), 0 0 14px rgba(255,255,255,.16);
}
.wcd-skin-name{font-size:13px;font-weight:900;line-height:1.1;}
.wcd-skin-sub{font-size:10px;opacity:.82;margin-top:3px;}
.wcd-skin-bgopt{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#fff;}
.wcd-skin-bgopt input{width:15px;height:15px;accent-color:var(--wcd-skin-primary);}
.wcd-skin-tip{font-size:10px;line-height:1.25;opacity:.78;margin-top:7px;text-align:center;}

body.wcd-skin-active{
  color:var(--wcd-skin-text) !important;
}
body.wcd-skin-active:not(.wcd-skin-bg-on){
  background-image:url('/css/img/fond-bleu-bariole-noir.jpg') !important;
}
body.wcd-skin-active.wcd-skin-bg-on{
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body.wcd-skin-active .topbar,
body.wcd-skin-active .panel,
body.wcd-skin-active .card,
body.wcd-skin-active .pm-window,
body.wcd-skin-active .room-modal,
body.wcd-skin-active .options-panel,
body.wcd-skin-active .format-menu,
body.wcd-skin-active .bg-menu,
body.wcd-skin-active .emoji-panel,
body.wcd-skin-active .sticker-panel,
body.wcd-skin-active .gif-search-panel{
  border-color:var(--wcd-skin-primary) !important;
  background:linear-gradient(180deg, var(--wcd-skin-panel), rgba(0,0,0,.34)) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34), 0 0 20px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active .panel .header,
body.wcd-skin-active .chat-header,
body.wcd-skin-active .card .header{
  border-color:var(--wcd-skin-primary) !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(255,255,255,.20), var(--wcd-skin-soft)) !important;
  text-shadow:0 0 8px var(--wcd-skin-glow);
}
body.wcd-skin-active .tb,
body.wcd-skin-active .btn,
body.wcd-skin-active button.send,
body.wcd-skin-active .emoji-btn,
body.wcd-skin-active .options-tab,
body.wcd-skin-active .mobile-side-tab,
body.wcd-skin-active .topbar a.btn,
body.wcd-skin-active .topbar .nick-pill,
body.wcd-skin-active .chip,
body.wcd-skin-active #roomsListPub > li,
body.wcd-skin-active #roomsListTmp > li,
body.wcd-skin-active aside#paneRooms .body ul#roomsListPub > li,
body.wcd-skin-active aside#paneRooms .body ul#roomsListTmp > li,
body.wcd-skin-active #usersList li.user,
body.wcd-skin-active #paneUsers .body #usersList li.user,
body.wcd-skin-active #btnTemp,
body.wcd-skin-active .temp-entry-button,
body.wcd-skin-active .temp-entry-main,
body.wcd-skin-active .temp-entry-side,
body.wcd-skin-active .sep-box,
body.wcd-skin-active .chip.accent,
body.wcd-skin-active .users-header-actions .chip,
body.wcd-skin-active .section-sep .sep-box{
  position:relative;
  border-color:var(--wcd-skin-primary) !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(255,255,255,.18), var(--wcd-skin-soft) 12%, rgba(0,0,0,.24)) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 0 14px var(--wcd-skin-glow) !important;
  text-shadow:0 0 7px rgba(0,0,0,.75), 0 0 8px var(--wcd-skin-glow);
}
body.wcd-skin-active #roomsListPub > li.active,
body.wcd-skin-active #roomsListTmp > li.active,
body.wcd-skin-active #usersList li.user.me,
body.wcd-skin-active #usersList li.user.self{
  border-color:var(--wcd-skin-secondary) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7), 0 0 22px var(--wcd-skin-glow), 0 0 18px var(--wcd-skin-secondary) !important;
}
body.wcd-skin-active .messages{
  background:radial-gradient(900px 420px at 16% 0%, var(--wcd-skin-soft), transparent 62%) !important;
}
body.wcd-skin-active .msg{
  border:1px solid color-mix(in srgb, var(--wcd-skin-primary) 65%, transparent) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)) !important;
  box-shadow:0 0 10px color-mix(in srgb, var(--wcd-skin-primary) 30%, transparent) !important;
}
body.wcd-skin-active input,
body.wcd-skin-active textarea,
body.wcd-skin-active select{
  border-color:var(--wcd-skin-primary) !important;
  color:#fff !important;
  background:rgba(0,0,0,.38) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 0 12px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active a,
body.wcd-skin-active .chat-header-value{
  color:var(--wcd-skin-primary) !important;
}


/* Corrections skins : boutons jaunes + transparence proche du thème par défaut */
body.wcd-skin-active .temp-form,
body.wcd-skin-active .inputbar,
body.wcd-skin-active .room-options-row,
body.wcd-skin-active .mic-test-wrap,
body.wcd-skin-active .yt-room-card,
body.wcd-skin-active .mic-visual-wrap{
  border-color:var(--wcd-skin-primary) !important;
  background:rgba(0,0,0,.28) !important;
  box-shadow:0 0 14px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active .sep-box,
body.wcd-skin-active .chip.accent,
body.wcd-skin-active .users-header-actions .chip,
body.wcd-skin-active #btnTemp,
body.wcd-skin-active .temp-entry-button{
  border-color:var(--wcd-skin-primary) !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(255,255,255,.22), var(--wcd-skin-soft) 14%, rgba(0,0,0,.24)) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.62), 0 0 16px var(--wcd-skin-glow) !important;
  text-shadow:0 0 7px rgba(0,0,0,.85), 0 0 9px var(--wcd-skin-glow) !important;
}
body.wcd-skin-active .temp-entry-main,
body.wcd-skin-active .temp-entry-side{
  background:transparent !important;
  color:#fff !important;
}
body.wcd-skin-active .panel,
body.wcd-skin-active .card,
body.wcd-skin-active .pm-window,
body.wcd-skin-active .room-modal,
body.wcd-skin-active .options-panel,
body.wcd-skin-active .format-menu,
body.wcd-skin-active .bg-menu,
body.wcd-skin-active .emoji-panel,
body.wcd-skin-active .sticker-panel,
body.wcd-skin-active .gif-search-panel{
  backdrop-filter:blur(4px);
}

@media (max-width:768px){
  .wcd-skin-menu{width:min(292px, calc(100vw - 14px));padding:8px;}
  .wcd-skin-card{grid-template-columns:48px 1fr auto;min-height:50px;gap:7px;padding:5px 7px;}
  .wcd-skin-preview{width:48px;height:34px;}
  .wcd-skin-name{font-size:12px;}
  .wcd-skin-sub,.wcd-skin-bgopt{font-size:9px;}
}

/* Correction : l'onglet Options doit garder son positionnement natif */
body.wcd-skin-active .options-container{
  left:0 !important;
  right:0 !important;
}
body.wcd-skin-active .options-tab{
  position:absolute !important;
  left:auto !important;
  right:12px !important;
  bottom:-10px !important;
  transform:translateY(-100%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:auto !important;
  margin:0 !important;
}
body.wcd-skin-active .options-container.open .options-tab{
  bottom:60px !important;
  transform:none !important;
}
@media (max-width:768px){
  body.wcd-skin-active .options-tab{
    right:10px !important;
  }
}

/* === Correction menus Admin/Modo avec skins ===
   Le backdrop-filter sur le panneau des connectés transforme les menus fixes
   en éléments enfermés dans cette colonne. On garde le skin, mais on retire
   uniquement ce filtre sur ce panneau afin de préserver le comportement natif
   des menus de modération existants. */
body.wcd-skin-active #paneUsers.panel{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  transform:none !important;
}

/* === Correction réelle : sous-menus Options avec skins ===
   Les menus existants #formatMenu et #bgMenu sont en position:fixed.
   Un backdrop-filter sur leur parent .options-panel crée un nouveau repère
   et, avec overflow:hidden, les découpe dans les 60px du panneau.
   On conserve toutes les couleurs du skin, mais on retire uniquement ce
   contexte graphique sur le parent afin de garder les menus d'origine. */
body.wcd-skin-active .options-panel{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  transform:none !important;
}