/* mobile-opti.css — optimisation PWA mobile du panneau Twitter (VA au doigt sur iPhone).
   Chargé APRÈS index.html/dozka.css pour gagner la cascade. Issu de l'audit mobile 30/07.
   Breakpoint aligné sur l'app (820px). Ne touche pas au desktop. */

/* ---------- réglages iOS globaux ---------- */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }

@media (max-width: 820px) {
  /* jamais de scroll horizontal de la page + mots/URLs qui débordent */
  html, body { overflow-x: clip; }
  .post .t, .reform, .ptext, .pair .out, .pair .orig, .dm-b, .mv-b,
  .pv, .dm-conv .pv, .mv-conv .pv { overflow-wrap: anywhere; }

  /* momentum scroll natif sur toutes les zones scrollables */
  .main, .rail-scroll, .dm-msgs, .dm-list, dialog,
  #trainPairs, #slangList, .plan-wrap,
  #msgview .mv-msgs, #msgview .mv-list, #msgview .mv-top {
    -webkit-overflow-scrolling: touch;
  }
  .main, .dm-msgs, #msgview .mv-msgs { overscroll-behavior: contain; }

  /* ---------- LE fix n°1 : plus aucun champ sous 16px (sinon iOS zoome au focus) ---------- */
  input, select, textarea { font-size: 16px !important; line-height: 1.4 !important; }

  /* ---------- cibles tactiles >= 44px ---------- */
  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px !important; padding: 0 14px !important; font-size: 13px !important; }
  .iconbtn { min-width: 44px !important; min-height: 44px !important; }
  .navitem { min-height: 44px; }
  .subtab { min-height: 44px; display: flex; align-items: center; }
  .modal-head .btn.ghost, .modal-head .btn { min-width: 44px; min-height: 44px; }
  /* cases à cocher (sélection d'une proposition, thèmes vault) */
  .prop .sel input, .chk input, input[type=checkbox], .psel {
    width: 22px !important; height: 22px !important;
  }
  .prop .sel { padding: 15px 10px 0 14px !important; }
  .rail .iconbtn, .rail-sec #addCreaBtn { min-width: 44px; min-height: 44px; }

  /* ---------- boutons cachés au survol -> inaccessibles au doigt ---------- */
  .fol .rm { opacity: 1 !important; min-width: 40px; min-height: 40px; }

  /* ---------- safe-area (encoche + barre home iOS) ---------- */
  .top { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
  .body { padding-left: calc(env(safe-area-inset-left)); padding-right: calc(env(safe-area-inset-right)); }
  .tabbar { padding-left: calc(env(safe-area-inset-left)); padding-right: calc(env(safe-area-inset-right)); }
  .dm-reply { padding-bottom: calc(11px + env(safe-area-inset-bottom)) !important; }

  /* le toast (confirmations) ne doit pas se cacher derrière la tabbar */
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)) !important; z-index: 100 !important; }

  /* clavier ouvert -> on masque la tabbar flottante qui sinon flotte sur le champ */
  body.kb-open .tabbar { display: none !important; }

  /* lisibilité au téléphone (contraste + petits labels) */
  :root { --faint: #6f6f6f; }
  .tabbar button span { font-size: 10.5px; }
  .hint-i, .top .sub { font-size: 12px; }

  /* ---------- Planning : séparateurs de jour collants ---------- */
  .daybar {
    position: sticky; top: var(--top-h, 84px); z-index: 6;
    background: var(--canvas); margin: 0 -12px 8px; padding: 12px 12px 8px;
  }
  /* éloigner l'action irréversible (Poster) de Approuver sur la carte */
  .prop .pa .btn[data-act="post"] { flex-basis: 100%; }

  /* ---------- Sources ---------- */
  .src-side { position: static !important; top: auto !important; }

  /* ---------- Stats : top-posts lisibles (2 lignes au lieu de tronqué) ---------- */
  .tp-row { flex-wrap: wrap !important; }
  .tp-row .tx {
    white-space: normal !important; flex: 1 1 100% !important; order: 5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---------- Dialogs plein écran haut + clavier ---------- */
  dialog {
    margin-top: max(env(safe-area-inset-top), 12px) !important;
    margin-bottom: auto !important;
    max-height: calc(100dvh - max(env(safe-area-inset-top), 12px) - 12px) !important;
  }
  /* plus de double-scroll dans les dialogs (les listes internes se déroulent avec le dialog) */
  #trainPairs, #slangList { max-height: none !important; overflow: visible !important; }
  /* paires de champs côte-à-côte : on empile plutôt que déborder */
  #adBody div[style*="display:flex"], #mgBody div[style*="display:flex"] { flex-wrap: wrap !important; }
  #adBody .fld[style*="flex:1"], #mgBody .fld[style*="flex:1"] { flex: 1 1 100% !important; }
  #slangWord { flex: 1 1 100% !important; }

  /* ---------- ancienne vue DM (crea>sous-onglet) : éviter le triple scroll ---------- */
  .dm { height: calc(100dvh - 150px) !important; }
  .dm-list { max-height: 34vh; }

  /* ---------- barre d'onglets : PLEINE LARGEUR + STATIQUE façon Twitter ----------
     (avant : pilule flottante centrée qui chevauchait la zone Répondre/Envoyer) */
  .tabbar {
    justify-content: stretch !important; padding: 0 !important; pointer-events: auto !important;
    background: var(--panel) !important; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .tabbar .bar {
    width: 100% !important; max-width: none !important; gap: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; padding: 0 !important; justify-content: space-around !important;
  }
  .tabbar button {
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
    border-radius: 0 !important; padding: 9px 2px 7px !important;
  }
  .tabbar button.on { background: transparent !important; }

  /* pendant Messages : seul Messages actif dans la barre */
  body.msg-open #tabbar button[data-view].on { color: var(--muted); opacity: .55; }
  body.msg-open #tabbar button[data-view].on .ic { color: var(--faint); }
  body.msg-open #tabMsg { color: var(--fg); }
  body.msg-open #tabMsg .ic { color: var(--accent); }

  /* ---------- Messages plein écran façon Twitter ---------- */
  #msgview .mv-main { grid-template-columns: 1fr !important; }   /* jamais 2 colonnes sur mobile */
  #msgview .mv-thread { display: none; }
  #msgview.thread .mv-list { display: none; }
  #msgview.thread .mv-thread { display: flex; }
  #msgview.thread .mv-top { display: none; }        /* en conversation : plein écran, pas de switcher */
  #msgview .mv-back { display: flex !important; }
}

/* boutons révélés au survol : inaccessibles sur tout appareil sans hover (tablette/tel) */
@media (hover: none) {
  .fol .rm { opacity: 1 !important; }
}