/* ============================================================
   chat-responsive-fix-20260713-v8.css
   PWA iPhone (chat.solana.ist) — responsive + safe-area.
   Pattern "barre de statut opaque assumée" (X / Instagram /
   Telegram Web) suite au verdict recherche :

   - Bug WebKit #313800 (iOS 26.x, non résolu) : en standalone
     black-translucent, innerHeight = écran − barre de statut et le
     compositeur CLIPPE peinture+taps à cette hauteur → bande morte
     de ~62pt en bas. Aucun CSS/JS ne peut la remplir.
   - black-translucent est déprécié (WebKit #317153) : le fix est de
     RETIRER le meta apple-mobile-web-app-status-bar-style → l'app
     se place SOUS la barre de statut avec la vraie hauteur.
   - Piège #316008 : sans le meta, 100vh/100lvh sont surévalués sur
     iOS 26 → INTERDIT d'en mettre sur le shell. Le inset:0 du
     bundle est le bon comportement, on n'y touche plus.
   - env(safe-area-inset-top) devient 0 dans ce mode → toutes les
     règles env() ci-dessous s'adaptent seules.
   - Réinstallation du web clip obligatoire (réglage figé à
     l'installation) ; les anciennes installs gardent le camouflage
     fond sombre (section 0) en attendant.
   ============================================================ */

/* --- 0. LE FIX : plus aucune surface grise derrière le shell --- */
/* body #131313 -> #05070d (le noir du bas du dégradé de l'app).
   Scopé au mode standalone via :has -> zéro impact sur le studio
   desktop. Si :has non supporté, on retombe sur l'ancien = pas de
   régression. */
html:has(.tg-standalone),
body:has(.tg-standalone) {
  background: #05070d !important;
}
/* Filet : le shell lui-même porte un fond sombre opaque sous son
   dégradé décoratif (au cas où il ne couvre pas tout le bord). */
.tg-standalone {
  background-color: #05070d;
}

/* --- 1. SHELL : inset HAUT + côtés (le bas touche le bord) ---- */
.tg-standalone > .tg {
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  left: env(safe-area-inset-left, 0px);
  bottom: 0;
}

/* --- 1b. CONTENU du bas : padder pour clear la home indicator -- */
.tg-standalone > .tg .tg-dialogs.scroll {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
.tg-standalone > .tg .tg-compose-wrap {
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* --- 2. ANTI-ZOOM iOS textarea --------------------------- */
.tg-compose textarea,
.tg-compose input[type="text"],
.tg-compose [contenteditable="true"] {
  font-size: 16px !important;
  line-height: 1.35;
}

/* --- 3. TAP TARGETS >= 44px sur mobile ------------------- */
@media (max-width: 640px) {
  .tg-burger,
  .tg-conv-head .tg-icon,
  .tg-conv-head .tg-moback,
  .tg-icon {
    min-width: 44px;
    min-height: 44px;
  }
  .tg-tab { min-height: 40px; }
  .tg-compose-wrap .emojq-e,
  .emojq-bar .emojq-e {
    min-width: 40px;
    min-height: 40px;
    font-size: 22px;
  }
  .tg-menu-pop .tg-menu-item,
  .tg-menu-pop .tg-menu-acc {
    min-height: 44px;
  }
}

/* --- 4. INDICATEUR SCROLL barre de tabs ------------------ */
.tg-tabs {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.tg-tabs .tg-tab { scroll-snap-align: start; }

/* --- 5. ANTI débordement horizontal ---------------------- */
html, body {
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* --- 6. LOGIN : hors .tg-standalone -> safe-area propre --- */
.login-wrap,
.crm-login,
form.login,
.tg-login,
.auth-wrap {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  box-sizing: border-box;
}

/* --- 7. Filet : modales/sheets portées hors du shell ----- */
.tg-sheet,
.tg-modal-bottom,
[class*="sheet-bottom"] {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* --- 0c. PWA : peindre les lignes jusqu'au bord physique ------- */
/* Bug iOS black-translucent : le viewport déclaré (innerHeight) est
   plus court que l'écran de la hauteur de la barre de statut. La
   surface EST peignable jusqu'en bas, mais perf-lite pose
   content-visibility:auto sur les lignes -> Safari considère les
   lignes sous innerHeight comme hors-écran et ne les PEINT pas
   => bande vide en bas. En PWA installée on force leur rendu.
   Desktop/navigateur : non concernés (display-mode != standalone). */
@media (display-mode: standalone) {
  .tg-dialog,
  .tg-msgrow {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }
}