/* ============================================================
   NOVIABOT — Responsive partagé (référence : index + mobile-fixes header)
   À charger après header.css / modals.css, en dernier sur les pages hors index
   (sur index : avant index/mobile-fixes.css).
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
}

/* ── Header marketing / app (#main-header) — mêmes breakpoints que index ── */
@media (max-width: 1100px), (max-width: 1280px) and (max-height: 900px) {
  header#main-header {
    position: sticky;
    top: 0;
    z-index: 5000;
  }

  #main-header .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px !important;
    min-height: auto;
  }

  #main-header .logo-zone {
    order: 1;
  }

  #main-header .lang-dropdown {
    order: 2;
    margin-left: 0 !important;
  }

  #main-header .twitch-center {
    order: 3;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    justify-content: flex-start;
  }

  #main-header nav {
    order: 4;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px !important;
    margin: 0 !important;
  }

  #main-header .nav-btn,
  #main-header .lang-btn {
    font-size: 14px !important;
    padding: 4px 6px !important;
    line-height: 1.2;
  }

  #main-header nav a[href*="client_id="] {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #main-header .logo-nov {
    font-size: 16px !important;
  }

  #main-header .logo-img {
    width: 18px !important;
    height: 18px !important;
  }

  #main-header .nav-btn,
  #main-header .lang-btn {
    font-size: 13px !important;
    padding: 3px 5px !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  #main-header .header-inner {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    gap: 5px !important;
  }

  #main-header .nav-btn,
  #main-header .lang-btn {
    font-size: 12px !important;
  }
}

/* ── Pages glass (setup, safety, …) ── */
@media (max-width: 900px) {
  body.setup-glass-page .glass-wrap {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  .glass-header {
    padding-left: 0;
    padding-right: 0;
    padding-top: clamp(16px, 4vw, 32px);
  }

  .glass-card {
    padding: clamp(18px, 4vw, 35px);
    border-radius: 18px;
  }

  .glass-card .card-title {
    font-size: clamp(1.1rem, 4vw, 1.6rem);
  }

  .glass-header-row {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .glass-card .field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .glass-card .field-row label {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── Discord dashboard (.dc-page, cartes login — surcharge styles inline) ── */
@media (max-width: 900px) {
  .dc-page {
    padding: clamp(16px, 4vw, 44px) clamp(12px, 3vw, 24px) 72px !important;
  }

  .login-card {
    padding: clamp(28px, 6vw, 56px) clamp(18px, 5vw, 40px) 36px !important;
    border-radius: 22px !important;
  }

  .login-brand {
    font-size: clamp(2rem, 9vw, 3.6rem) !important;
  }

  .login-features {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #view-login,
  #view-servers {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}

/* ── Modales globales (complète modals.css — encoches + petits écrans) ── */
@media (max-width: 800px) {
  .beta-backdrop,
  #starterModal.starter-backdrop {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .beta-modal {
    max-height: min(calc(100dvh - 24px), calc(100vh - 24px));
  }
}

@media (max-width: 600px) {
  .modal__panel,
  .legal-modal-panel,
  .welcome-modal .modal__panel.welcome-panel {
    width: min(
      560px,
      calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right)))
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: min(calc(100dvh - 20px), calc(100vh - 20px)) !important;
  }

  .modal__actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}