/* MGR_SONO_NEON_PRO_V1 */
/* Style uniquement : aucune logique audio ou formulaire modifiee */

#mgrSono:has(.mgr-sono-room-host) {
  --mgr-bg: #061129;
  --mgr-surface: #0b1a3a;
  --mgr-surface2: #101d40;
  --mgr-border: rgba(65,142,255,.38);
  --mgr-purple: #a637ff;
  --mgr-pink: #e72bfa;
  --mgr-blue: #247dff;
  --mgr-cyan: #43dfff;
  --mgr-text: #f3f5ff;
  --mgr-muted: #aebddd;
  color: var(--mgr-text);
}

#mgrSono:has(.mgr-sono-room-host) .sono-heading {
  position: relative;
  overflow: hidden;
  padding: 26px 30px !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(137,76,255,.55) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse at 75% 15%,rgba(135,39,255,.35),transparent 46%),
    linear-gradient(120deg,#07132d,#101b47 57%,#21113f) !important;
  box-shadow: 0 10px 35px rgba(0,0,0,.2);
}

#mgrSono:has(.mgr-sono-room-host) .sono-heading:after {
  content: "?";
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(42px,5vw,86px);
  font-weight: bold;
  color: rgba(210,79,255,.75);
  text-shadow: 0 0 28px #7f31ff;
  pointer-events: none;
}

#mgrSono:has(.mgr-sono-room-host) .sono-heading h1 {
  color: #fff !important;
  font-size: clamp(29px,3vw,47px) !important;
  letter-spacing: -.8px;
  line-height: 1.12;
  margin: 6px 0 10px;
}

#mgrSono:has(.mgr-sono-room-host) .sono-heading em {
  font-style: normal;
  color: #e55cff;
}

#mgrSono:has(.mgr-sono-room-host) .sono-heading p {
  color: #c9d9fa !important;
  max-width: 80%;
}

#mgrSono:has(.mgr-sono-room-host) .sono-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 20px;
}

/* Cartes de configuration audio existantes */

#mgrSono:has(.mgr-sono-room-host) .sono-card {
  background:
    linear-gradient(145deg,rgba(10,26,60,.98),rgba(13,15,42,.98))
    !important;
  border: 1px solid rgba(56,132,245,.42) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-header {
  background:
    linear-gradient(110deg,rgba(105,30,211,.24),rgba(16,70,153,.24))
    !important;
  border: 1px solid rgba(163,72,255,.5) !important;
  border-radius: 18px !important;
  padding: 24px !important;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-header h2 {
  color: #fff;
  font-size: clamp(21px,2vw,30px) !important;
  letter-spacing: -.5px;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-grid {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 16px !important;
  margin-top: 18px;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-panel {
  min-width: 0;
  padding: 21px !important;
  border-radius: 17px !important;
  border: 1px solid var(--mgr-border) !important;
  background:
    linear-gradient(135deg,#0a2148,#10142f) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: border-color .18s, box-shadow .18s;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-panel:hover {
  border-color: rgba(176,74,255,.65) !important;
  box-shadow: 0 5px 20px rgba(49,54,174,.13);
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-panel h3 {
  color: #c47cff !important;
  font-size: clamp(16px,1.25vw,20px) !important;
  margin-top: 0;
  margin-bottom: 15px;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-panel p,
#mgrSono:has(.mgr-sono-room-host) .mgroom-note {
  color: #b8c8eb !important;
  line-height: 1.55;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-choice {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 13px !important;
  margin: 8px 0 !important;
  border: 1px solid rgba(71,122,221,.45);
  border-radius: 12px;
  background: rgba(20,41,84,.6);
  color: #eef3ff;
  cursor: pointer;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-choice:has(input:checked) {
  border-color: #b345ff;
  background: rgba(109,27,187,.27);
  box-shadow: inset 0 0 0 1px rgba(206,57,255,.23);
}

#mgrSono:has(.mgr-sono-room-host) input[type=radio],
#mgrSono:has(.mgr-sono-room-host) input[type=checkbox] {
  accent-color: #c34cff;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#mgrSono:has(.mgr-sono-room-host) .mgroom-link {
  min-height: 45px;
  padding: 12px !important;
  border: 1px dashed rgba(100,144,255,.55);
  border-radius: 10px;
  background: #081632;
  color: #dbe5ff;
  overflow-wrap: anywhere;
}

/* Formulaire Room : memes champs, memes identifiants */

#mgrSono .mgr-sono-room-host {
  margin-top: 20px !important;
  padding: 25px !important;
  border: 1px solid rgba(155,61,250,.65) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(144,39,213,.16),transparent 45%),
    linear-gradient(140deg,#081932,#0c1732 58%,#180e36)
    !important;
}

#mgrSono .mgr-sono-room-host > h2 {
  color: #fff !important;
  font-size: clamp(23px,2.3vw,34px) !important;
  margin: 0 0 8px !important;
  padding-left: 18px;
  border-left: 5px solid #b736ff;
  line-height: 1.25;
}

#mgrSono .mgr-sono-room-host > p {
  color: #aec9f3 !important;
  font-size: 14px;
}

#mgrSono .mgr-sono-room-host #roomPublishModal.mgr-sono-room-inline {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 18px !important;
  box-shadow: none !important;
  color: #eef3ff;
}

#mgrSono .mgr-sono-room-host #roomPublishModal .modal-head {
  display: none !important;
}

#mgrSono .mgr-sono-room-host .room-modal-box {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 17px 20px !important;
  padding: 0 !important;
  background: transparent !important;
  width: 100%;
}

#mgrSono .mgr-sono-room-host .room-modal-box > * {
  min-width: 0;
}

#mgrSono .mgr-sono-room-host .room-modal-box label {
  color: #dce9ff !important;
  font-weight: 650;
  line-height: 1.45;
}

#mgrSono .mgr-sono-room-host .room-modal-box > label:has(textarea),
#mgrSono .mgr-sono-room-host .room-image-row,
#mgrSono .mgr-sono-room-host .room-suno-box {
  grid-column: 1 / -1;
}

#mgrSono .mgr-sono-room-host .room-image-row {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 17px !important;
  background: rgba(18,51,93,.65);
  border: 1px solid rgba(65,141,242,.32);
  border-radius: 15px;
}

#mgrSono .mgr-sono-room-host .room-image-preview {
  width: min(100%,300px) !important;
  max-height: 175px !important;
  object-fit: cover !important;
  border-radius: 13px !important;
  border: 1px solid rgba(180,77,255,.7);
}

#mgrSono .mgr-sono-room-host input:not([type=checkbox]):not([type=radio]),
#mgrSono .mgr-sono-room-host select,
#mgrSono .mgr-sono-room-host textarea {
  width: 100%;
  max-width: 100%;
  min-height: 43px;
  box-sizing: border-box;
  border: 1px solid #31599b !important;
  border-radius: 10px !important;
  background: #0b2349 !important;
  color: #f4f6ff !important;
  padding: 11px 13px !important;
  font-size: 14px;
  outline: none;
}

#mgrSono .mgr-sono-room-host textarea {
  min-height: 110px;
  resize: vertical;
}

#mgrSono .mgr-sono-room-host input:focus-visible,
#mgrSono .mgr-sono-room-host select:focus-visible,
#mgrSono .mgr-sono-room-host textarea:focus-visible {
  border-color: #bf57ff !important;
  box-shadow: 0 0 0 3px rgba(168,71,255,.22);
}

#mgrSono .mgr-sono-room-host input[type=file] {
  cursor: pointer;
}

#mgrSono .mgr-sono-room-host input[type=file]::file-selector-button {
  background: linear-gradient(100deg,#225ee8,#8b27ec);
  color: white;
  border: 0;
  border-radius: 7px;
  padding: 9px 13px;
  margin-right: 12px;
  cursor: pointer;
}

/* Boutons : les handlers JavaScript existants restent en place */

#mgrSono:has(.mgr-sono-room-host) button:not(.close-modal),
#mgrSono:has(.mgr-sono-room-host) .sono-actions a {
  border-radius: 11px !important;
  border: 1px solid rgba(141,100,255,.45) !important;
  background:
    linear-gradient(105deg,#2058e4,#8a29ef) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 11px 17px;
  min-height: 42px;
  box-shadow: 0 3px 13px rgba(77,44,194,.2);
  transition: filter .15s, transform .15s;
}

#mgrSono:has(.mgr-sono-room-host) button:not(:disabled):hover,
#mgrSono:has(.mgr-sono-room-host) .sono-actions a:hover {
  filter: brightness(1.16);
  transform: translateY(-1px);
}

#mgrSono:has(.mgr-sono-room-host) button:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  box-shadow: none;
}

#mgrSono:has(.mgr-sono-room-host) button:focus-visible,
#mgrSono:has(.mgr-sono-room-host) a:focus-visible {
  outline: 3px solid #55d8ff !important;
  outline-offset: 2px;
}

#mgrSono:has(.mgr-sono-room-host) .room-modal-box .danger,
#mgrSono:has(.mgr-sono-room-host) .room-modal-box
button[id*="Delete"],
#mgrSono:has(.mgr-sono-room-host) .room-modal-box
button[id*="delete"] {
  background: rgba(103,19,53,.6) !important;
  border-color: #ca3b71 !important;
  color: #ffc1d3 !important;
}

/* Eviter les colonnes trop serrees */

@media (max-width:1150px) {
  #mgrSono:has(.mgr-sono-room-host) .mgroom-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:700px) {
  #mgrSono:has(.mgr-sono-room-host) .sono-heading {
    padding: 20px !important;
  }
  #mgrSono:has(.mgr-sono-room-host) .sono-heading p {
    max-width: 100%;
  }
  #mgrSono:has(.mgr-sono-room-host) .sono-heading:after {
    opacity: .22;
  }
  #mgrSono:has(.mgr-sono-room-host) .mgroom-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #mgrSono .mgr-sono-room-host {
    padding: 15px !important;
  }
  #mgrSono .mgr-sono-room-host .room-modal-box {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #mgrSono .mgr-sono-room-host .room-modal-box > * {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion:reduce) {
  #mgrSono:has(.mgr-sono-room-host) button,
  #mgrSono:has(.mgr-sono-room-host) .mgroom-panel {
    transition: none !important;
  }
}