/* ============================================================
   DKtorrent — App Mobile iOS-like
   Approche : reset radical en < 768px, structure type app native.
   - Header desktop masqué, remplacé par un header minimal sticky
   - Mode switcher desktop masqué, remplacé par bottom tab bar fixe
   - Bouton FAB Play central proéminent (action : reprendre dernière lecture)
   - Grilles compactes posters, modales fullscreen slide-up
   ============================================================ */

/* Tab bar + mini-menu Player : cachés sur desktop par défaut */
.mobile-tabbar { display: none; }
.mobile-player-menu { display: none; }

@media (max-width: 768px) {

  /* === Foundations === */
  :root {
    --mob-tabbar-h: 64px;          /* hauteur tab bar */
    --mob-fab-size: 56px;          /* taille bouton play central */
    --mob-header-h: 48px;          /* hauteur header compact */
    --mob-safe-bot: env(safe-area-inset-bottom, 0);
    --mob-blur-bg: rgba(15, 18, 28, 0.85);
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    /* base font 16px pour bloquer auto-zoom iOS sur tout input */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  /* Bloque double-tap zoom + flash bleu tap */
  html, body, button, a { touch-action: manipulation; }
  * { -webkit-tap-highlight-color: transparent; }

  /* Tous les inputs/select en 16px pour pas que iOS zoom */
  input, textarea, select, button { font-size: 16px !important; }

  /* === Cache l'UI desktop encombrante === */
  header > .mode-switcher,
  header .downloads-btn .downloads-label,
  header .status-text,
  header .vpn-text { display: none !important; }

  /* === Header desktop TOTALEMENT MASQUÉ en mobile ===
     Plus de logo, profil, admin, download, lock, vpn, refresh.
     Toutes ces actions sont accessibles via le tab Profil ou les modales. */
  header { display: none !important; }
  /* Safe-area-inset-top GLOBAL : descend tout sous Dynamic Island / encoche caméra,
     quelle que soit la page (AI, Stream, Recherche, modales). */
  body { padding-top: env(safe-area-inset-top, 0px) !important; }
  main { padding-top: 8px !important; }

  /* Couvre la zone safe-area-top avec un overlay blur continu :
     évite que les films/contenus défilent sous Dynamic Island via le "trou" du padding. */
  body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--mob-blur-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 150;
    pointer-events: none;
  }

  /* Header desktop reste TOTALEMENT caché en mobile — pas de "display:flex" qui réactive */

  /* Le panel Stream a padding desktop important pour le header sticky + côtés — en mobile on veut full-bleed */
  .stream-panel { padding: 0 !important; }
  .ai-wizard { padding-top: 12px !important; }
  main { padding: 0 !important; }
  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  /* User a demandé : virer le logo en mobile (se mélange avec chip profil) */
  .header-left .header-logo,
  .header-logo-link { display: none !important; }
  /* On garde uniquement le chip profil pour identifier la session */
  .profile-status-prefix { display: none !important; }
  .profile-status .profile-bubble {
    font-size: 12px !important;
    padding: 3px 10px !important;
    height: auto;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .header-right button {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.85) !important;
  }
  .header-right button svg { width: 20px; height: 20px; }

  /* === Padding bottom global pour libérer l'espace tab bar === */
  body {
    padding-bottom: calc(var(--mob-tabbar-h) + max(2px, calc(var(--mob-safe-bot) / 4)) + 8px) !important;
  }

  /* === Bottom Tab Bar iOS === */
  .mobile-tabbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* On respecte juste la moitié du safe-area-inset pour éviter le home indicator
       tout en laissant la barre plus compacte. iPhone safe-bot ≈ 34px → on garde ~17px. */
    height: calc(var(--mob-tabbar-h) + max(2px, calc(var(--mob-safe-bot) / 4)));
    padding: 4px 8px max(2px, calc(var(--mob-safe-bot) / 4));
    background: var(--mob-blur-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 0.5px solid rgba(255,255,255,0.08);
    z-index: 200;
    box-sizing: border-box;
  }
  .mtab {
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
    font-family: inherit;
    height: 50px;
  }
  .mtab svg { width: 22px; height: 22px; }
  .mtab span { font-size: 10px !important; line-height: 1.2; font-weight: 500; }
  .mtab.active { color: #38bdf8; }
  .mtab:active { transform: scale(0.92); }

  /* FAB Player central — gros bouton rond qui dépasse, icône TV */
  .mtab-fab {
    width: var(--mob-fab-size);
    height: var(--mob-fab-size);
    border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.45), 0 0 0 4px var(--mob-blur-bg);
    margin-top: -18px;        /* dépasse au-dessus de la barre */
    padding: 0 !important;
    height: var(--mob-fab-size);
  }
  .mtab-fab svg { width: 26px; height: 26px; margin: 0; }
  .mtab-fab.active { box-shadow: 0 0 0 4px var(--mob-blur-bg), 0 0 0 6px rgba(56, 189, 248, 0.4); }
  .mtab-fab:active { transform: scale(0.94); }

  /* === Mini-modale du FAB Player : 3 boutons (Films / Séries / Animation) === */
  .mobile-player-menu {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.55);
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px calc(var(--mob-tabbar-h) + var(--mob-safe-bot) + 12px);
    animation: mobFadeIn 0.18s ease;
  }
  .mobile-player-menu.hidden { display: none !important; }
  .mobile-player-menu-inner {
    width: 100%;
    max-width: 420px;
    background: rgba(28, 31, 43, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    animation: mobSlideUp 0.22s ease;
  }
  .mobile-player-menu-inner button {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 14px 6px !important;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, transform 0.1s;
  }
  .mobile-player-menu-inner button span { font-size: 28px; line-height: 1; }
  .mobile-player-menu-inner button:active { transform: scale(0.96); background: rgba(56,189,248,0.15) !important; }
  @keyframes mobFadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* === Main : padding minimal === */
  main { padding: 8px 12px !important; }

  /* === Mode Stream : sticky bar ÉPURÉE ===
     Le user veut UNIQUEMENT : barre de recherche + filtres tri.
     On cache tabs Films/Séries/Animation (sélection se fait via FAB Player),
     titre de section, badges count, chips IA. */
  .stream-sticky-head {
    background: var(--mob-blur-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 12px 4px !important;
    position: sticky !important;
    top: 0;
    z-index: 50;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Cache les tabs Films/Séries/Animation (redondant avec mini-modal FAB) */
  .stream-tab { display: none !important; }

  /* Chips IA cachés (apparaissent quand prompt IA active — tolérable) */

  /* La structure reste : on garde uniquement .stream-search-wrap visible dans .stream-tabs */
  .stream-tabs {
    display: block !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    margin-bottom: 6px !important;
  }
  .stream-search-wrap {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .stream-search {
    background: rgba(255,255,255,0.08) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    font-size: 14px !important;
    color: #fff !important;
    box-sizing: border-box;
  }
  #stream-ai-prompt-btn {
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    min-height: 40px;
  }

  /* Sort bar : scroll horizontal avec indicateur visuel (gradient bord droit) */
  .stream-sort-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 6px 4px !important;     /* padding-right pour laisser place au gradient indicateur */
    margin-bottom: 6px !important;
    gap: 6px !important;
    scrollbar-width: none;
    position: relative;
    /* Mask gradient indique qu'il y a du contenu à droite */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    scroll-snap-type: x proximity;
  }
  .stream-sort-bar::-webkit-scrollbar { display: none; }
  .stream-sort-label { display: none !important; }      /* "Trier :" mangerait de l'espace */
  .stream-sort-btn, .stream-pack-filter, .stream-genre-wrapper {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 32px;
    height: auto;
    border-radius: 16px !important;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Grille de posters : 3 colonnes Netflix-like, gap minimal, padding latéral pour pas coller au bord */
  .stream-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 8px 8px 16px !important;
  }
  .stream-card {
    border-radius: 8px !important;
    overflow: hidden;
  }
  .stream-card-poster { aspect-ratio: 2/3; }
  .stream-card-title { font-size: 11px !important; line-height: 1.2; padding: 6px 6px 2px !important; }
  .stream-card-year, .stream-card-meta { font-size: 9px !important; padding: 0 6px 6px !important; }
  .stream-card-pack-badge, .stream-card-version-badge { font-size: 9px; padding: 1px 4px; }

  /* === Mobile cards : virer le bouton play/download central + étoile favoris toujours visible ===
     Sur tactile :
     - Bouton play hover prenait trop d'espace au centre → difficile de cliquer à côté
     - Le double-tap (hover puis click) sur iOS gênait → 1 tap ouvre la modale direct
     - L'étoile favoris doit être visible sans hover (mobile n'a pas de hover) */
  .stream-card-play,
  .stream-card-install,
  .stream-card-cloud-dl,
  .stream-card .stream-card-download-btn { display: none !important; }
  .stream-card-fav-btn {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* Taille tactile : 32px clickable */
    width: 32px; height: 32px;
    top: 4px; right: 4px;
  }

  /* === Continuer à regarder : ligne horizontale scrollable, alignée avec la grille === */
  .stream-watching-row { padding: 0 12px !important; }
  .stream-watching-rowlabel { font-size: 13px !important; padding: 10px 0 6px !important; }
  .stream-watching-grid {
    grid-auto-columns: 38vw !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .stream-watching-mini { border-radius: 8px; }

  /* === AI Wizard plein écran compact === */
  .ai-wizard { padding: 16px 14px 24px !important; }
  .wizard-greeting { font-size: 18px !important; }
  .wizard-title { font-size: 22px !important; line-height: 1.25 !important; }
  .wizard-subtitle { font-size: 14px !important; }
  .wizard-input { padding: 12px 14px 12px 42px !important; min-height: 48px; border-radius: 12px !important; }

  /* === Modales : full screen slide-up iOS === */
  .stream-detail-overlay,
  #admin-overlay,
  #profile-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .stream-detail-modal,
  .sniper-modal,
  .profile-modal,
  .admin-modal {
    inset: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 30px) !important;
    max-height: calc(100vh - 30px) !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    transform: none !important;
    animation: mobSlideUp 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @keyframes mobSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Handle de drag-down style iOS sur le haut de chaque sheet */
  .stream-detail-modal::before,
  .sniper-modal::before,
  .profile-modal::before,
  .admin-modal::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    margin: 8px auto 4px;
  }

  /* === Login plein écran === */
  .login-overlay { padding: 24px 20px !important; align-items: center !important; }
  .login-modal-content {
    width: 100% !important;
    max-width: 360px !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .login-modal-content input {
    padding: 14px 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    min-height: 48px;
  }
  .login-modal-content button[type="submit"] {
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    min-height: 48px;
  }

  /* === Lecteur vidéo mobile : controls compacts iOS-like === */
  /* User a demandé : virer le volume (touches physiques) */
  #stream-player-vol-btn, .stream-player-vol-btn,
  #stream-player-vol-slider, .stream-player-vol-slider,
  .stream-player-vol-wrap { display: none !important; }

  /* Boutons plus gros pour tactile */
  .stream-player-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
  }
  .stream-player-btn svg { width: 22px; height: 22px; }
  .stream-player-controls {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom, 12px)) !important;
    bottom: 0 !important;
  }
  .stream-player-controls-row {
    gap: 4px !important;
    justify-content: space-between !important;
  }
  /* Bouton play central plus proéminent */
  #stream-player-play, .stream-player-play-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50%;
    background: rgba(255,255,255,0.15) !important;
  }
  #stream-player-play svg, .stream-player-play-btn svg { width: 28px; height: 28px; }

  /* Timeline plus haute pour tactile */
  .stream-player-seek, .stream-player-progress {
    height: 6px !important;
    margin: 0 8px 8px !important;
  }
  .stream-player-time-cur, .stream-player-time-tot { font-size: 12px !important; }

  /* === Toast: au-dessus de la tab bar === */
  .toast-container {
    bottom: calc(var(--mob-tabbar-h) + var(--mob-safe-bot) + 16px) !important;
  }

  /* === Cast modal au-dessus tabbar === */
  .cast-modal-overlay { padding: 20px !important; align-items: flex-end !important; padding-bottom: calc(var(--mob-tabbar-h) + 20px) !important; }
  .cast-modal { border-radius: 16px !important; }

  /* === Panneau Téléchargements en plein écran (était une pop-up moche en mobile) === */
  .downloads-overlay { background: transparent !important; }
  .downloads-panel {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: 0 !important;
    /* Tient compte de la safe-area top + tab bar bottom */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(var(--mob-tabbar-h) + max(2px, calc(var(--mob-safe-bot) / 4)));
    box-shadow: none !important;
    animation: mobSlideUp 0.22s ease !important;
  }
  .downloads-panel-header { padding: 12px 16px !important; }

  /* === Misc: cache le bouton flottant help (la lampe verte) en mobile === */
  #help-fab, .help-fab, #help-bubble-btn, .help-popover { display: none !important; }

  /* Limite les icônes header-right au strict nécessaire (3 max) */
  .header-right .header-action-status,           /* point vert status réseau */
  .header-right .vpn-indicator { display: none !important; }
}