/* ============================================
   UNSA CSS OVERRIDE - Room (Salle vidéo)
   Cible: meet.syndicat.ai/join/*
   Style Apple glassmorphism pour les contrôles
   Masque tout branding MiroTalk
   ============================================ */

/* === MASQUER BRANDING === */
body {
  background: var(--unsa-bg, #009ee0) !important;
  color: var(--unsa-text, #ffffff) !important;
}

#logo,
.logo,
.brand,
.brand-logo,
.brand-name,
.app-logo,
.app-brand,
.header-logo,
.header-brand,
.header-logo-image,
.powered-by,
.support-us,
footer,
.footer,
.footer-brand,
.footer-copyright,
.footer-links,
.footer-social-links,
[role="banner"],
[role="contentinfo"] {
  display: none !important;
}

/* === CONTRÔLES VIDÉO - Style glassmorphism Apple === */
:root {
  --unsa-ui-bg: rgba(255, 255, 255, 0.12);
  --unsa-ui-border: rgba(255, 255, 255, 0.2);
  --unsa-ui-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  --unsa-ui-pill: 999px;
}

/* Barre de contrôles */
.controls,
.toolbar,
.controls-bar,
.room-controls,
.bottom-bar,
.footer__controls,
.menu-bar,
.buttons,
#buttonsBar,
#bottomButtons {
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 12px !important;
  margin: 12px !important;
}

/* Boutons de contrôle individuels */
button,
.btn,
.control,
.controls button,
.toolbar button,
.menu-bar button,
.buttons button,
#buttonsBar button,
#bottomButtons button {
  margin: 0 2px !important;
  border-radius: var(--unsa-ui-pill) !important;
  min-width: 48px;
  height: 48px;
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--unsa-ui-bg) !important;
  border: 1px solid var(--unsa-ui-border) !important;
  box-shadow: none !important;
  color: var(--unsa-text, #ffffff) !important;
  backdrop-filter: blur(12px);
  transition: all 0.15s ease !important;
}

button svg,
.btn svg,
.control svg {
  width: 20px;
  height: 20px;
}

button:hover,
.btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(1.05);
}

/* Bouton actif (ex: micro allumé, caméra allumée) */
.active button,
button.active,
.btn.active,
.control.active,
.toolbar button.active {
  background: #ffffff !important;
  color: var(--unsa-primary, #009ee0) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
}

/* Bouton danger (raccrocher) */
button.leave,
button.end,
button.hangup,
button[title*="Leave"],
button[title*="End"],
button[title*="Hang"],
.leave-button,
.end-call,
#exitButton {
  background: #ff3b30 !important;
  color: #ffffff !important;
  border-color: rgba(255, 59, 48, 0.5) !important;
}

button.leave:hover,
button.end:hover,
button.hangup:hover,
#exitButton:hover {
  background: #e5352b !important;
}

/* === PANNEAUX LATÉRAUX (Chat, Settings, etc.) === */
.sidebar,
.panel,
.drawer,
.modal,
.settings,
.chat,
#chatRoom,
#mySettings,
#participantsPanel {
  background: rgba(28, 28, 30, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.sidebar input,
.panel input,
.drawer input,
.modal input,
.settings input,
.chat input,
.chat textarea,
.panel select,
.panel textarea,
#chatRoom input,
#chatRoom textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

.sidebar input:focus,
.chat input:focus,
#chatRoom input:focus {
  border-color: var(--unsa-primary, #009ee0) !important;
  box-shadow: 0 0 0 3px rgba(0, 158, 224, 0.2) !important;
}

/* Badges & pills */
.badge,
.tag,
.pill {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 100px !important;
}

/* === MENUS & DROPDOWNS === */
[class*="menu"],
[class*="dropdown"],
[class*="context"],
[class*="popup"],
.menu,
.dropdown,
.popup,
.context-menu,
.menu-content {
  background: rgba(28, 28, 30, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

[class*="menu"] button,
[class*="dropdown"] button,
.menu button,
.dropdown button,
.context-menu button,
.menu li,
.dropdown li {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  min-width: auto !important;
  min-height: auto !important;
  height: auto !important;
  box-shadow: none !important;
}

[class*="menu"] button:hover,
[class*="dropdown"] button:hover,
.menu button:hover,
.dropdown button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: none !important;
}

[class*="menu"] .active,
[class*="dropdown"] .active,
.menu .active,
.dropdown .active {
  background: rgba(0, 158, 224, 0.2) !important;
}

/* === SELECT (Who are you page) === */
#initUser,
.init-user,
.who-are-you {
  background: rgba(28, 28, 30, 0.95) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(24px);
}