/* ============================================================
   nova-skin.css — « Mon webchat » : personnalisation membre
   ------------------------------------------------------------
   Toutes les règles sont portées par body.cn-skin-on et par des
   variables --cn-skin-* avec valeur de repli = thème par défaut.
   => Aucun effet tant que la classe n'est pas posée. Réversible
   en retirant la classe (cf. settings-panel.js).
   ============================================================ */

/* Cases de couleur du panneau « Mon webchat » : la pastille remplit la case
   (sinon, sur Android/Chrome, la couleur ne s'affiche pas). */
.cn-skin-input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.cn-skin-input::-webkit-color-swatch-wrapper{ padding:0; }
.cn-skin-input::-webkit-color-swatch{ border:none; border-radius:6px; }
.cn-skin-input::-moz-color-swatch{ border:none; border-radius:6px; }

body.cn-skin-on{
  /* Le texte global suit la couleur choisie (tout le CSS lit var(--text)) */
  --text: var(--cn-skin-text, #e8edf5);
  background: var(--cn-skin-bg, #141c2e) !important;
}

/* Topbar */
body.cn-skin-on .topbar{
  background: var(--cn-skin-topbar, linear-gradient(180deg, rgba(17,20,29,.96), rgba(10,12,17,.94))) !important;
}

/* Liste des membres (nicklist) */
body.cn-skin-on .members-rail{
  background: var(--cn-skin-rail, linear-gradient(180deg, rgba(17,20,29,.98), rgba(10,12,17,.99))) !important;
}

/* Bulles de message */
body.cn-skin-on .msg{
  background: var(--cn-skin-bubble, linear-gradient(180deg, rgba(26,32,52,.97), rgba(20,26,42,.98))) !important;
}

/* Zone de saisie */
body.cn-skin-on .composer{
  background: var(--cn-skin-composer, rgba(20,25,40,.99)) !important;
}

/* Accent : bouton d'envoi + focus du champ + survol membre */
body.cn-skin-on .composer-send{
  background: var(--cn-skin-accent, #4f8ef7) !important;
}
body.cn-skin-on #messageInput:focus{
  border-color: var(--cn-skin-accent, rgba(255,179,71,.70)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cn-skin-accent, #ffb347) 22%, transparent) !important;
  outline-color: var(--cn-skin-accent, rgba(255,179,71,.45)) !important;
}
body.cn-skin-on .user-item:hover{
  background: color-mix(in srgb, var(--cn-skin-accent, #ffffff) 14%, transparent) !important;
}