/* Extrait de communaute.html le 20260823-203619 — bloc <style id="giri-twafix3-20260711">.
   Posé ici pour que le navigateur le garde en cache au lieu de le
   retélécharger à chaque visite. L'ordre de cascade est conservé :
   le <link> occupe exactement la place de l'ancien <style>. */

/* ═══ [TWAFIX3 2026-07-11] ═══════════════════════════════════════════
   1. La boule mobile = ASSISTANCE (ga-fab), jamais le Sanctuaire
   2. ga-fab remonté au-dessus de la bottom nav
   3. Tailles de texte accessibles (malvoyants) via html[data-giri-fs] */

/* 1. Aucune boule Sanctuaire dans l'app mobile */
body.giri-mobile-shell #lahiri-orb-fab{ display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* 2. [XA-V4 2026-07-17] Boule Assistance externe #ga-fab MASQUEE (remplace par bouton dans sidebar) */
body.giri-mobile-shell #ga-fab,
body.giri-mobile-shell #ga-menu,
body.giri-mobile-shell #ga-widget{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* 3. Échelles de texte — [2026-07-14] défaut DÉJÀ grand (Xiaomi/mobile lisible d'office).
   Niveau 0 = base grande, 1/2/3 = encore plus grand pour malvoyants. */
body.giri-mobile-shell{ font-size: 25px; }
html[data-giri-fs="1"]{ font-size: 27px !important; }
html[data-giri-fs="2"]{ font-size: 29px !important; }
html[data-giri-fs="3"]{ font-size: 32px !important; }

body.giri-mobile-shell .msg .msg-content{ font-size: 24px; line-height: 1.5; }
html[data-giri-fs="1"] .msg-content, html[data-giri-fs="1"] body.giri-mobile-shell .msg .msg-content{ font-size: 24px !important; line-height: 1.52 !important; }
html[data-giri-fs="2"] .msg-content, html[data-giri-fs="2"] body.giri-mobile-shell .msg .msg-content{ font-size: 27px !important; line-height: 1.54 !important; }
html[data-giri-fs="3"] .msg-content, html[data-giri-fs="3"] body.giri-mobile-shell .msg .msg-content{ font-size: 31px !important; line-height: 1.56 !important; }

html[data-giri-fs="1"] .msg-author, html[data-giri-fs="1"] body.giri-mobile-shell .msg .msg-author{ font-size: 16px !important; }
html[data-giri-fs="2"] .msg-author, html[data-giri-fs="2"] body.giri-mobile-shell .msg .msg-author{ font-size: 19px !important; }
html[data-giri-fs="3"] .msg-author, html[data-giri-fs="3"] body.giri-mobile-shell .msg .msg-author{ font-size: 22px !important; }

html[data-giri-fs="1"] .msg-time, html[data-giri-fs="1"] body.giri-mobile-shell .msg .msg-time{ font-size: 12.5px !important; }
html[data-giri-fs="2"] .msg-time, html[data-giri-fs="2"] body.giri-mobile-shell .msg .msg-time{ font-size: 14px !important; }
html[data-giri-fs="3"] .msg-time, html[data-giri-fs="3"] body.giri-mobile-shell .msg .msg-time{ font-size: 16px !important; }

html[data-giri-fs="1"] .msg-input-box textarea, html[data-giri-fs="1"] body.giri-mobile-shell .msg-input-box textarea{ font-size: 18px !important; }
html[data-giri-fs="2"] .msg-input-box textarea, html[data-giri-fs="2"] body.giri-mobile-shell .msg-input-box textarea{ font-size: 21px !important; }
html[data-giri-fs="3"] .msg-input-box textarea, html[data-giri-fs="3"] body.giri-mobile-shell .msg-input-box textarea{ font-size: 24px !important; }

html[data-giri-fs="1"] .giri-bottomnav-label{ font-size: 12px !important; }
html[data-giri-fs="2"] .giri-bottomnav-label{ font-size: 13.5px !important; }
html[data-giri-fs="3"] .giri-bottomnav-label{ font-size: 15px !important; }

html[data-giri-fs="2"] .channel-item, html[data-giri-fs="2"] .channel-name{ font-size: 18px !important; }
html[data-giri-fs="3"] .channel-item, html[data-giri-fs="3"] .channel-name{ font-size: 21px !important; }

html[data-giri-fs="2"] body.giri-mobile-shell .profile-modal *{ font-size: 18px !important; }
html[data-giri-fs="3"] body.giri-mobile-shell .profile-modal *{ font-size: 21px !important; }

html[data-giri-fs="1"] .giri-notif-prompt .gnp-txt span{ font-size: 15px !important; }
html[data-giri-fs="2"] .giri-notif-prompt .gnp-txt span{ font-size: 17px !important; }
html[data-giri-fs="3"] .giri-notif-prompt .gnp-txt span{ font-size: 19px !important; }

/* Bouton Aa + panneau */
#giriFsBtn{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  right: 10px;
  z-index: 2147483630;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(212,168,83,.45);
  background: linear-gradient(160deg, rgba(36,20,40,.92), rgba(26,15,31,.92));
  color: #f5c36a;
  font-size: 17px; font-weight: 800; font-family: Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 14px rgba(212,168,83,.18);
  cursor: pointer;
}
#giriFsPanel{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 118px);
  right: 10px;
  z-index: 2147483631;
  background: linear-gradient(160deg,#241428,#1a0f1f);
  border: 1px solid rgba(212,168,83,.4);
  border-radius: 18px;
  padding: 16px 16px 14px;
  width: min(86vw, 320px);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  color: #f8f3e8;
  display: none;
  font-family: inherit;
}
#giriFsPanel.open{ display: block; }
#giriFsPanel .fs-title{ font-weight: 700; color: #f5c36a; font-size: 16px; margin-bottom: 4px; }
#giriFsPanel .fs-sub{ font-size: 12.5px; opacity: .75; margin-bottom: 12px; line-height: 1.4; }
#giriFsPanel .fs-opts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#giriFsPanel .fs-opt{
  border: 1px solid rgba(212,168,83,.3);
  background: rgba(212,168,83,.08);
  color: #f8f3e8;
  border-radius: 12px;
  padding: 10px 4px 7px;
  cursor: pointer;
  text-align: center;
  font-family: Georgia, serif;
  line-height: 1.1;
}
#giriFsPanel .fs-opt small{ display: block; font-family: inherit; font-size: 10px; opacity: .75; margin-top: 5px; letter-spacing: .3px; }
#giriFsPanel .fs-opt.active{
  background: linear-gradient(135deg,#d4a853,#f5c36a);
  color: #1a0f1f; border-color: #f5c36a; font-weight: 700;
}
#giriFsPanel .fs-opt.active small{ opacity: .9; }

/* ═══ ZOOM GLOBAL MASSIF (2026-07-15) — TOUT beaucoup plus gros, partout ═══
   Demande Maha : agrandir massivement l'ensemble de l'interface mobile.
   Levier 1 : font-size racine énorme -> tout le rem/em grossit d'un coup.
   Levier 2 : overrides !important spécificité max sur les éléments en px. */
html.giri-mobile-shell-html, html body.giri-mobile-shell{ font-size:30px !important; }

/* Messages */
html body.giri-mobile-shell .msg .msg-content{ font-size:30px !important; line-height:1.5 !important; }
html body.giri-mobile-shell .msg .msg-author{ font-size:22px !important; }
html body.giri-mobile-shell .msg .msg-time{ font-size:16px !important; }
html body.giri-mobile-shell .msg .msg-avatar{ width:56px !important; height:56px !important; font-size:20px !important; }
html[data-giri-fs="1"] body.giri-mobile-shell .msg .msg-content{ font-size:34px !important; }
html[data-giri-fs="2"] body.giri-mobile-shell .msg .msg-content{ font-size:38px !important; }
html[data-giri-fs="3"] body.giri-mobile-shell .msg .msg-content{ font-size:42px !important; }

/* Barre d'écriture + ses boutons */
html body.giri-mobile-shell .msg-input-box textarea{ font-size:24px !important; min-height:64px !important; }
html body.giri-mobile-shell .msg-input-box button,
html body.giri-mobile-shell .msg-input-box .attach-btn{ min-width:64px !important; min-height:64px !important; }
html body.giri-mobile-shell .msg-input-box button svg,
html body.giri-mobile-shell .msg-input-box .attach-btn svg{ width:34px !important; height:34px !important; }

/* Barre de navigation du bas */
html body.giri-mobile-shell{ --bottom-nav-h:92px !important; }
html body.giri-mobile-shell .giri-bottomnav-btn svg{ width:40px !important; height:40px !important; }
html body.giri-mobile-shell .giri-bottomnav-label{ font-size:16px !important; }

/* En-tête de salon */
html body.giri-mobile-shell .ch-header .ch-name{ font-size:24px !important; }
html body.giri-mobile-shell .ch-header{ min-height:64px !important; }

/* Boutons flottants (assistance + Aa) */
html body.giri-mobile-shell #ga-fab .ga-btn{ width:70px !important; height:70px !important; }
html body #giriFsBtn{ width:60px !important; height:60px !important; font-size:24px !important; }

/* Modale notif bois — tout plus grand */
html body .giri-notif-prompt .gnp-txt span{ font-size:1.55rem !important; line-height:1.5 !important; }
html body .giri-notif-prompt .gnp-txt strong{ font-size:2.1rem !important; }
html body .giri-notif-prompt .gnp-yes{ font-size:1.35rem !important; min-height:70px !important; }
html body .giri-notif-prompt .gnp-orb{ width:92px !important; height:92px !important; font-size:2.6rem !important; }

/* ═══ ANTI-DEBORDEMENT (2026-07-15) — le zoom massif ne doit jamais couper le texte ═══
   Tout le contenu passe à la ligne et rentre dans l'écran. Les gros titres du gate
   (déjà en rem élevé) sont ramenés à une taille qui tient, sans réduire le salon. */
html body.giri-mobile-shell, html body.giri-mobile-shell *{ overflow-wrap:anywhere; word-break:break-word; }
html body.giri-mobile-shell .gate h1,
html body.giri-mobile-shell .gate-title{ font-size:40px !important; line-height:1.12 !important; width:100% !important; text-align:center !important; overflow-wrap:break-word !important; }
html body.giri-mobile-shell .gate h1 em{ display:block !important; width:100% !important; margin-top:4px !important; }
html body.giri-mobile-shell .gate-sub,
html body.giri-mobile-shell .gate p{ font-size:1.05rem !important; line-height:1.4 !important; }
html body.giri-mobile-shell .gate{ padding-left:18px !important; padding-right:18px !important; }
html body.giri-mobile-shell .gate{ padding-bottom:140px !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
/* Le champ email et le CTA restent larges mais contenus */
html body.giri-mobile-shell .gate input,
html body.giri-mobile-shell .gate button{ max-width:100% !important; box-sizing:border-box !important; }

/* ============================================================
   [XIAOMI-AUDIT 2026-07-17] Corrections accessibilite + ergonomie
   Objectifs :
   - Contraste WCAG AA sur tous les CTA
   - Toutes cibles tactiles >= 44px (WCAG 2.5.5)
   - Aucun texte < 12px
   - Aucun texte casse en 2 lignes sur bouton/input
   ============================================================ */

/* [XA-1] CTA principal "Entrer en cercle" — contraste 1.07 -> 12+ */
html body.giri-mobile-shell .gate .gate-form button,
html body.giri-mobile-shell .gate #gateBtn,
.gate .gate-form button,
.gate #gateBtn{
  background: linear-gradient(180deg, #e3bc60 0%, #c89b3c 100%) !important;
  color: #221604 !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-shadow: none !important;
  border: 1px solid rgba(120,86,20,.55) !important;
  min-height: 52px !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,246,214,.5), inset 0 -1px 0 rgba(90,60,10,.35), 0 4px 14px rgba(0,0,0,.3) !important;
}
html body.giri-mobile-shell .gate .gate-form button:hover,
.gate .gate-form button:hover{
  filter: brightness(1.08) !important;
}

/* [XA-2] Bouton MENU header — le mot ne casse plus JAMAIS */
body.giri-mobile-shell .ch-header .mobile-toggle{
  width: 112px !important;
  min-width: 112px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
  gap: 8px !important;
  font-size: 15px !important;
}
body.giri-mobile-shell .ch-header .mobile-toggle::after{
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
}

/* [XA-3] Barre input message — placeholder "Message..." tient sur 1 ligne */
body.giri-mobile-shell .msg-input-box textarea,
body.giri-mobile-shell #msgInput{
  min-width: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  min-height: 48px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.giri-mobile-shell .msg-input-box textarea::placeholder,
body.giri-mobile-shell #msgInput::placeholder{
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Reduire boutons composer sur petit ecran pour laisser place au textarea */
body.giri-mobile-shell .msg-input-box{
  gap: 6px !important;
  padding: 4px 6px !important;
}
body.giri-mobile-shell .msg-input-box button,
body.giri-mobile-shell .msg-input-box .attach-btn{
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}
body.giri-mobile-shell .msg-input-box .attach-btn svg,
body.giri-mobile-shell .msg-input-box button svg{
  width: 20px !important;
  height: 20px !important;
}
/* Sur viewport < 420px, masquer l'emoji picker pour eviter compression */
@media (max-width: 419px){
  body.giri-mobile-shell .msg-input-box .attach-btn[title*="moji" i],
  body.giri-mobile-shell .msg-input-box #emojiBtn{
    display: none !important;
  }
}

/* [XA-4] Cibles tactiles < 44px — Accessibilite WCAG 2.5.5 */
.create-ch-btn,
#createChBtn{
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  font-size: 22px !important;
  border-radius: 12px !important;
  background: rgba(212,168,83,.12) !important;
  color: #f5c36a !important;
  border: 1px solid rgba(212,168,83,.3) !important;
  transition: background .15s ease, transform .1s ease !important;
}
.create-ch-btn:hover,
.create-ch-btn:focus{
  background: rgba(212,168,83,.22) !important;
}
.create-ch-btn:active{ transform: scale(.94) !important; }

.ch-header .mobile-members-btn,
.ch-header .ch-icon-btn{
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}

body .mobile-members-close,
body .ga-close,
body .tll-close{
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

.giri-skip-link{
  min-width: 200px !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* [XA-5] Texte "BIENTÔT DISPONIBLE" 9.5px -> 11.5px */
.tll-soon-badge{
  font-size: 11.5px !important;
  padding: 3px 10px !important;
  letter-spacing: .06em !important;
}

/* [XA-6] Focus visible sur TOUS les elements interactifs (a11y clavier) */
body.giri-mobile-shell button:focus-visible,
body.giri-mobile-shell a:focus-visible,
body.giri-mobile-shell input:focus-visible,
body.giri-mobile-shell textarea:focus-visible,
body.giri-mobile-shell [role="button"]:focus-visible{
  outline: 3px solid #f5c36a !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* [XA-7] Titre "La Giri Family" — italique plus assume */
html body.giri-mobile-shell .gate h1 em,
.gate h1 em{
  font-style: italic !important;
  font-weight: 700 !important;
  color: #f5c36a !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* [XA-8] Golden ball : rendu net */
.sb-header-logo,
.gate-logo{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* [XA-9] Message erreur session expiree ("Oups!")
   [SEUIL-LISIBLE-2026-08-29] l or clair + ombre noire venaient d un ecran sombre ;
   la porte est au marbre clair. Le message porte son propre ecrin : lisible partout. */
.gate-error,
#gateError{
  color: #7a2410 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  margin: 12px auto 0 !important;
  max-width: 520px;
  padding: 10px 14px;
  line-height: 1.45;
  background: rgba(255,252,245,.94);
  border: 1px solid rgba(190,120,60,.42);
  border-left: 3px solid #b4541f;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(90,55,15,.10);
}
/* vide, il ne laisse aucune boite fantome sous le champ */
.gate-error:empty,
#gateError:empty{
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/* [XA-11] Ecran 'Oups!' / session expiree : lisibilite maximale */
.welcome-msg{ padding: 24px 20px !important; }
.welcome-msg h2{
  color: #f5c36a !important;
  font-size: 1.8em !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  opacity: 1 !important;
}
.welcome-msg p{
  color: #f8f3e8 !important;
  opacity: .95 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-family: Inter, system-ui, sans-serif !important;
}
.welcome-msg a{
  color: #f5c36a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.welcome-msg a.reconnect-link{
  background: rgba(212,168,83,.10) !important;
  border: 1px solid rgba(212,168,83,.35) !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  min-height: 44px !important;
}

/* [XA-10] Lien reconnexion : tap friendly */
a[href*="reconnecter" i],
.reconnect-link,
button.link-reconnect{
  min-height: 44px !important;
  padding: 10px 14px !important;
  display: inline-block !important;
  color: #f5c36a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
}

/* ============================================================
   [XIAOMI-AUDIT V2 2026-07-17] Refonte ergonomie + premium mobile
   Objectifs :
   - Bouton Aa retire (redondant avec zoom global)
   - Bulle Maha : masquee flottante, integree dans sidebar
   - Bottom-nav : icones + labels agrandis, effet premium or
   - Composer : un seul cercle, pas double-anneau
   - Sidebar et drawers : PLEIN ECRAN (100vw)
   - VIP modal (Moi) : plein ecran
   - Save button : shimmer clignotant supprime, gradient or premium
   - dm-new-btn : violet -> or (charte Giri)
   - Membres : noms + avatars agrandis
   - Fond legerement plus clair pour respiration
   ============================================================ */

/* ────────── [V2-1] RETIRER LE BOUTON Aa TAILLE POLICE ────────── */
#giriFsBtn,
.giri-fs-btn,
[data-giri-fs-btn]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ────────── [V2-2] BOTTOM-NAV — Premium or ────────── */
.giri-bottomnav{
  height: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, #2a1a2f 0%, #150a1a 100%) !important;
  border-top: 2px solid rgba(212,168,83,.4) !important;
  box-shadow: 0 -8px 28px rgba(0,0,0,.65) !important;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px)) 0 !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
}
.giri-bottomnav-btn{
  padding: 8px 4px !important;
  gap: 4px !important;
  color: rgba(248,243,232,.62) !important;
  transition: color .18s ease, transform .12s ease !important;
  min-height: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  background: transparent !important;
  border: 0 !important;
  position: relative !important;
}
.giri-bottomnav-btn svg{
  width: 30px !important;
  height: 30px !important;
  stroke-width: 1.9 !important;
  transition: transform .12s ease !important;
}
.giri-bottomnav-btn:active svg{
  transform: scale(.9) !important;
}
.giri-bottomnav-btn .giri-bottomnav-label,
.giri-bottomnav-btn span{
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1.1 !important;
}
.giri-bottomnav-btn.active{
  color: #f5c36a !important;
}
.giri-bottomnav-btn.active svg{
  filter: drop-shadow(0 0 8px rgba(245,195,106,.55)) !important;
}
.giri-bottomnav-btn.active::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 22% !important;
  right: 22% !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #f5c36a 30%, #f5c36a 70%, transparent) !important;
  border-radius: 0 0 3px 3px !important;
}
.giri-bottomnav-btn.active .giri-bottomnav-label,
.giri-bottomnav-btn.active span{
  font-weight: 700 !important;
}

/* ────────── [V2-3] BULLE MAHA — SUPPRIMEE (integree dans sidebar) ────────── */
.maha-fab,
#mahaFab{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Assistance dans sidebar - style bouton premium or */
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn,
body.giri-mobile-shell .sidebar .sb-assistance-btn{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: calc(100% - 24px) !important;
  margin: 14px 12px !important;
  padding: 16px 18px !important;
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  color: #1a0f1f !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 22px rgba(212,168,83,.4) !important;
  cursor: pointer !important;
  min-height: 56px !important;
  text-align: left !important;
  letter-spacing: .01em !important;
}
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn:active{
  transform: scale(.98) !important;
}
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn img{
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ────────── [V2-4] COMPOSER — un seul cercle, plus premium ────────── */
body.giri-mobile-shell .msg-input-wrap{
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(212,168,83,.18) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(26,15,31,.6) 100%) !important;
}
body.giri-mobile-shell .msg-input-box{
  background: rgba(212,168,83,.06) !important;
  border: 1px solid rgba(212,168,83,.32) !important;
  border-radius: 28px !important;
  padding: 6px 6px 6px 8px !important;
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35) inset !important;
}
body.giri-mobile-shell .msg-input-box textarea,
body.giri-mobile-shell #msgInput{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 12px 6px !important;
  font-size: 16px !important;
  min-height: 44px !important;
  color: #f8f3e8 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}
body.giri-mobile-shell .msg-input-box textarea::placeholder,
body.giri-mobile-shell #msgInput::placeholder{
  color: rgba(248,243,232,.42) !important;
  font-style: normal !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Boutons composer : PAS de border ni border-radius circulaire independant */
body.giri-mobile-shell .msg-input-box button,
body.giri-mobile-shell .msg-input-box .attach-btn{
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: #f5c36a !important;
  font-size: 22px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s ease !important;
}
body.giri-mobile-shell .msg-input-box button:hover,
body.giri-mobile-shell .msg-input-box button:active,
body.giri-mobile-shell .msg-input-box .attach-btn:active{
  background: rgba(212,168,83,.15) !important;
}
body.giri-mobile-shell .msg-input-box #sendBtn{
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  color: #1a0f1f !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(212,168,83,.4) !important;
}
body.giri-mobile-shell .msg-input-box #sendBtn:active{
  background: linear-gradient(135deg, #b88f45, #d4a853) !important;
}
body.giri-mobile-shell .msg-input-box #voiceBtn{
  background: rgba(212,168,83,.14) !important;
  border: 1px solid rgba(212,168,83,.35) !important;
}
body.giri-mobile-shell .msg-input-box svg{
  width: 22px !important;
  height: 22px !important;
}

/* ────────── [V2-5] SIDEBAR — PLEIN ECRAN sur mobile ────────── */
body.giri-mobile-shell .sidebar{
  width: 100vw !important;
  max-width: 100vw !important;
  left: -100vw !important;
  border-right: 0 !important;
  background: linear-gradient(180deg, #1a0f1f 0%, #0f0715 100%) !important;
}
body.giri-mobile-shell .sidebar.open{
  left: 0 !important;
}
body.giri-mobile-shell .sidebar-overlay{
  background: rgba(0,0,0,.85) !important;
}

/* ────────── [V2-6] MOBILE MEMBERS PANEL — vraie hauteur ────────── */
body.giri-mobile-shell .mobile-members-panel{
  max-height: 90vh !important;
  height: 90vh !important;
  border-radius: 24px 24px 0 0 !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-body,
body.giri-mobile-shell .mobile-members-panel > *:not(.mobile-members-close):not(::before){
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* ────────── [V2-7] MODAL PROFIL / VIP — PLEIN ECRAN ────────── */
body.giri-mobile-shell .profile-modal,
body.giri-mobile-shell .vip-modal-overlay,
body.giri-mobile-shell .vip-modal{
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}
body.giri-mobile-shell .vip-modal-overlay .vip-modal{
  width: calc(100vw - 24px) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 12px !important;
  max-height: calc(100vh - 24px) !important;
}
body.giri-mobile-shell .profile-modal{
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ────────── [V2-8] SAVE BUTTON — SHIMMER CLIGNOTANT SUPPRIME ────────── */
#profileSaveBtn,
.profile-save-btn,
body.giri-mobile-shell #profileSaveBtn,
body.giri-mobile-shell .profile-save-btn{
  animation: none !important;
  background-image: none !important;
  background: linear-gradient(135deg, #d4a853 0%, #f5c36a 55%, #d4a853 100%) !important;
  color: #1a0f1f !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 14px 24px !important;
  min-height: 56px !important;
  width: calc(100% - 12px) !important;
  max-width: 100% !important;
  margin: 16px 6px 8px !important;
  box-shadow: 0 6px 20px rgba(212,168,83,.35) !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  display: block !important;
}
#profileSaveBtn:active,
.profile-save-btn:active{
  filter: brightness(.92) !important;
}

/* ────────── [V2-9] dm-new-btn — VIOLET -> OR ────────── */
.dm-new-btn,
body.giri-mobile-shell .dm-new-btn{
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  background-image: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  color: #1a0f1f !important;
  border: 0 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  padding: 16px 20px !important;
  border-radius: 16px !important;
  min-height: 56px !important;
  box-shadow: 0 6px 20px rgba(212,168,83,.35) !important;
  letter-spacing: .02em !important;
}

/* ────────── [V2-10] MEMBRES — noms + avatars agrandis ────────── */
body.giri-mobile-shell .member,
body.giri-mobile-shell .rp-member,
body.giri-mobile-shell .rp-list li,
body.giri-mobile-shell [class*="member-item"]{
  padding: 12px 14px !important;
  gap: 14px !important;
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px !important;
}
body.giri-mobile-shell .member img,
body.giri-mobile-shell .member .avatar,
body.giri-mobile-shell .rp-member img,
body.giri-mobile-shell .rp-member .avatar,
body.giri-mobile-shell .rp-list img,
body.giri-mobile-shell [class*="member"] img,
body.giri-mobile-shell [class*="member"] .avatar{
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(212,168,83,.3) !important;
}
body.giri-mobile-shell .member .member-name,
body.giri-mobile-shell .rp-member .member-name,
body.giri-mobile-shell .rp-list .member-name,
body.giri-mobile-shell [class*="member-name"]{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f8f3e8 !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .member .member-status,
body.giri-mobile-shell [class*="member-status"],
body.giri-mobile-shell [class*="member-role"]{
  font-size: 13px !important;
  color: rgba(245,195,106,.85) !important;
  line-height: 1.2 !important;
}

/* ────────── [V2-11] FOND — Legere respiration, moins noir sur noir ────────── */
body.giri-mobile-shell{
  background: linear-gradient(180deg, #150a1a 0%, #0d0612 100%) !important;
}
body.giri-mobile-shell .messages-wrap,
body.giri-mobile-shell #messagesWrap{
  background: transparent !important;
}
body.giri-mobile-shell .main{
  background: transparent !important;
}

/* Message content : legerement plus contraste */
body.giri-mobile-shell .msg{
  background: rgba(212,168,83,.04) !important;
  border: 1px solid rgba(212,168,83,.10) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
}

/* ────────── [V2-12] INPUT/TEXTAREA GLOBAUX — plus grands ────────── */
body.giri-mobile-shell input[type="text"],
body.giri-mobile-shell input[type="email"],
body.giri-mobile-shell input[type="password"],
body.giri-mobile-shell input[type="search"],
body.giri-mobile-shell input[type="tel"],
body.giri-mobile-shell input[type="url"],
body.giri-mobile-shell textarea:not(#msgInput){
  min-height: 52px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(212,168,83,.25) !important;
  background: rgba(212,168,83,.04) !important;
  color: #f8f3e8 !important;
  font-family: "Inter", system-ui, sans-serif !important;
}
body.giri-mobile-shell input:focus,
body.giri-mobile-shell textarea:focus{
  border-color: rgba(212,168,83,.6) !important;
  background: rgba(212,168,83,.08) !important;
  outline: 0 !important;
}
body.giri-mobile-shell input::placeholder,
body.giri-mobile-shell textarea::placeholder{
  color: rgba(248,243,232,.4) !important;
}

/* ────────── [V2-13] BOUTON MENU HEADER — plus premium ────────── */
body.giri-mobile-shell .ch-header .mobile-toggle{
  width: 124px !important;
  min-width: 124px !important;
  height: 52px !important;
  padding: 0 16px !important;
  background: linear-gradient(135deg, #d4a853 0%, #f5c36a 50%, #d4a853 100%) !important;
  background-size: 200% 200% !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  gap: 10px !important;
  box-shadow: 0 4px 14px rgba(212,168,83,.45), 0 0 0 1px rgba(255,220,140,.4) inset !important;
}

/* Icones header droits (DM + Membres) : agrandis */
body.giri-mobile-shell .ch-header .mobile-members-btn,
body.giri-mobile-shell .ch-header .ch-icon-btn{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 12px !important;
  background: rgba(212,168,83,.10) !important;
  border: 1px solid rgba(212,168,83,.28) !important;
  color: #f5c36a !important;
}
body.giri-mobile-shell .ch-header .mobile-members-btn svg,
body.giri-mobile-shell .ch-header .ch-icon-btn svg{
  width: 22px !important;
  height: 22px !important;
}

/* ────────── [V2-14] Notif prompt / pop up push — lisibilite ────────── */
body.giri-mobile-shell .giri-notif-prompt,
body.giri-mobile-shell [class*="notif-prompt"]{
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 20px 22px !important;
  border-radius: 18px !important;
  max-width: calc(100vw - 32px) !important;
  width: calc(100vw - 32px) !important;
  color: #f8f3e8 !important;
}
body.giri-mobile-shell .giri-notif-prompt h3,
body.giri-mobile-shell .giri-notif-prompt h2,
body.giri-mobile-shell .giri-notif-prompt strong{
  font-size: 18px !important;
  color: #f5c36a !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
}
body.giri-mobile-shell .giri-notif-prompt button,
body.giri-mobile-shell [class*="notif-prompt"] button{
  min-height: 48px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

/* ────────── [V2-15] SIDEBAR PLEIN ECRAN : items plus grands ────────── */
body.giri-mobile-shell .sidebar .ch-item,
body.giri-mobile-shell .sidebar .sb-item,
body.giri-mobile-shell .sidebar .sn-tab{
  padding: 16px 18px !important;
  font-size: 16px !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  margin: 4px 8px !important;
}
body.giri-mobile-shell .sidebar .sb-header-logo{
  width: 44px !important;
  height: 44px !important;
}
body.giri-mobile-shell .sidebar .sb-brand{
  font-size: 22px !important;
  font-weight: 800 !important;
}



/* ────────── [V2-16] Label 'Membres' ne casse plus en 2 lignes ────────── */
.giri-bottomnav-btn{
  white-space: nowrap !important;
}
.giri-bottomnav-btn .giri-bottomnav-label,
.giri-bottomnav-btn span{
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
}

/* ────────── [V2-17] DISCUSSIONS OUVERTES : violet -> or ────────── */
body.giri-mobile-shell .sidebar .sb-section-row .label,
body.giri-mobile-shell .sidebar .sb-section-row span.label,
.sidebar .sb-section-row .label{
  color: #f5c36a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  opacity: .9 !important;
}
body.giri-mobile-shell .sidebar .sb-section-row{
  padding: 14px 14px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* ────────── [V2-18] mobileMembersPanel : contenu visible plein (pas juste header) ────────── */
body.giri-mobile-shell #mobileMembersPanel .rp-list,
body.giri-mobile-shell #mobileMembersPanel .rp-members,
body.giri-mobile-shell #mobileMembersPanel > div{
  max-height: calc(90vh - 60px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.giri-mobile-shell #mobileMembersPanel{
  display: flex !important;
  flex-direction: column !important;
}

/* ────────── [V2-19] Suppression backdrop 30px du composer, laisser le fond glisser ────────── */
body.giri-mobile-shell .msg-input-wrap::before{
  display: none !important;
}


/* ────────── [V2-20] profile-box + titre Mon Profil ────────── */
body.giri-mobile-shell .profile-modal{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}
body.giri-mobile-shell .profile-modal .profile-box{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  margin: 10px auto !important;
  padding: 20px 18px !important;
  border-radius: 20px !important;
  max-height: calc(100vh - 20px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.giri-mobile-shell .profile-modal h2,
body.giri-mobile-shell .profile-modal .profile-title{
  color: #f5c36a !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 18px !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}
body.giri-mobile-shell .profile-modal .close-modal{
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 24px !important;
  color: #f5c36a !important;
  background: rgba(212,168,83,.12) !important;
  border: 1px solid rgba(212,168,83,.28) !important;
  border-radius: 12px !important;
}
body.giri-mobile-shell .profile-modal .profile-field label{
  font-size: 13px !important;
  color: rgba(245,195,106,.85) !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}
body.giri-mobile-shell .profile-modal .profile-field input,
body.giri-mobile-shell .profile-modal .profile-field textarea{
  min-height: 52px !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(212,168,83,.05) !important;
  border: 1px solid rgba(212,168,83,.25) !important;
  color: #f8f3e8 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   [XIAOMI-AUDIT V3 2026-07-17] Fixes critiques : croix profil, upload photo,
   modal profil pas persistant, zoom clavier, drawer DM, popup Maha
   ============================================================ */

/* ────────── [V3-1] .profile-modal : cache par defaut, visible quand .visible ────────── */
/* CORRECTION V2-7 : mon display:flex forcait le modal a rester ouvert. */
body.giri-mobile-shell .profile-modal:not(.visible){
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.giri-mobile-shell .profile-modal.visible{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(6,6,14,.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ────────── [V3-2] Profil : espacement plus aere + tout plus gros ────────── */
body.giri-mobile-shell .profile-modal .profile-box{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  margin: 0 auto 20px !important;
  padding: 24px 20px 100px !important;  /* padding bas pour ne pas etre cache par bottom-nav */
  border-radius: 20px !important;
  max-height: none !important;
  overflow: visible !important;
}

body.giri-mobile-shell .profile-modal h2{
  font-size: 26px !important;
  margin: 8px 0 22px !important;
}

body.giri-mobile-shell .profile-modal .profile-field{
  margin-bottom: 22px !important;
}
body.giri-mobile-shell .profile-modal .profile-field label{
  font-size: 14px !important;
  margin-bottom: 10px !important;
  display: block !important;
}
body.giri-mobile-shell .profile-modal .profile-field input,
body.giri-mobile-shell .profile-modal .profile-field textarea{
  min-height: 56px !important;
  padding: 16px 18px !important;
  font-size: 16px !important;  /* CRITIQUE : min 16px pour empecher zoom auto Chrome mobile */
  border-radius: 14px !important;
  line-height: 1.4 !important;
}
body.giri-mobile-shell .profile-modal .profile-field textarea{
  min-height: 88px !important;
}

/* Avatar profil plus grand */
body.giri-mobile-shell .profile-modal .profile-avatar-wrap{
  margin: 16px auto 12px !important;
  display: flex !important;
  justify-content: center !important;
}
body.giri-mobile-shell .profile-modal .profile-avatar-circle{
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(212,168,83,.4) !important;
  background: rgba(212,168,83,.08) !important;
  box-shadow: 0 8px 24px rgba(212,168,83,.25) !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
body.giri-mobile-shell .profile-modal .avatar-overlay{
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 8px 4px !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)) !important;
  color: #f5c36a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: .05em !important;
}
body.giri-mobile-shell .profile-modal .profile-avatar-hint{
  text-align: center !important;
  font-size: 14px !important;
  color: rgba(248,243,232,.7) !important;
  margin: 4px 0 20px !important;
}

/* Croix fermer PLUS visible + grande */
body.giri-mobile-shell .profile-modal .close-modal{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: #f5c36a !important;
  background: rgba(212,168,83,.15) !important;
  border: 1.5px solid rgba(212,168,83,.4) !important;
  border-radius: 14px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
body.giri-mobile-shell .profile-modal .close-modal:active{
  background: rgba(212,168,83,.25) !important;
  transform: scale(.94) !important;
}

/* Thème visuel : cases plus grandes 2 par ligne */
body.giri-mobile-shell .profile-modal .theme-section{
  margin: 28px 0 !important;
}
body.giri-mobile-shell .profile-modal .theme-section > label{
  font-size: 14px !important;
  margin-bottom: 12px !important;
  display: block !important;
}
body.giri-mobile-shell .profile-modal .theme-swatches,
body.giri-mobile-shell .profile-modal .theme-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
body.giri-mobile-shell .profile-modal .theme-swatch,
body.giri-mobile-shell .profile-modal .theme-btn,
body.giri-mobile-shell .profile-modal [data-theme]{
  min-height: 60px !important;
  padding: 16px 12px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

/* Toggle switches plus grands */
body.giri-mobile-shell .profile-modal .toggle,
body.giri-mobile-shell .profile-modal input[type="checkbox"] + .slider,
body.giri-mobile-shell .profile-modal .switch{
  width: 56px !important;
  height: 32px !important;
  min-width: 56px !important;
}
body.giri-mobile-shell .profile-modal .toggle::before,
body.giri-mobile-shell .profile-modal .slider::before{
  width: 26px !important;
  height: 26px !important;
}

/* Zone sensible / quitter communaute */
body.giri-mobile-shell .profile-modal .danger-zone,
body.giri-mobile-shell .profile-modal .quit-community{
  margin-top: 32px !important;
  padding: 20px 18px !important;
  background: rgba(255,80,80,.06) !important;
  border: 1px solid rgba(255,80,80,.25) !important;
  border-radius: 16px !important;
}
body.giri-mobile-shell .profile-modal .danger-zone h3,
body.giri-mobile-shell .profile-modal .zone-sensible-title{
  color: #ff8080 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
body.giri-mobile-shell .profile-modal button.danger-btn,
body.giri-mobile-shell .profile-modal .quit-btn{
  background: rgba(255,80,80,.15) !important;
  color: #ff8080 !important;
  border: 1px solid rgba(255,80,80,.5) !important;
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  width: 100% !important;
}

/* ────────── [V3-3] Upload photo : superposer un label click pour bypass restriction WebView ────────── */
body.giri-mobile-shell #profileAvatarCircle{
  position: relative !important;
}
body.giri-mobile-shell #profileAvatarCircle::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
body.giri-mobile-shell #avatarFileInput{
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: block !important;
  pointer-events: auto !important;
}
/* wrapping input in avatar circle */
body.giri-mobile-shell .profile-avatar-wrap{
  position: relative !important;
}

/* ────────── [V3-4] PREVENTION ZOOM CLAVIER (Chrome/WebView Android) ────────── */
/* Chrome mobile auto-zoome quand on tape sur un input avec font-size < 16px.
   Force TOUT les inputs a 16px minimum */
body.giri-mobile-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.giri-mobile-shell textarea,
body.giri-mobile-shell select{
  font-size: 16px !important;
}
/* Meme regle pour tous les inputs dans profile modal */
body.giri-mobile-shell .profile-modal input,
body.giri-mobile-shell .profile-modal textarea{
  font-size: 16px !important;
}

/* ────────── [V3-5] DM overlay : force plein ecran + hide bottom-nav quand ouvert ────────── */
body.giri-mobile-shell .dm-overlay{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1500 !important;
  background: linear-gradient(180deg, #150a1a 0%, #0d0612 100%) !important;
  display: none;
  flex-direction: column !important;
}
body.giri-mobile-shell .dm-overlay.active{
  display: flex !important;
}
/* Cacher bottom-nav quand DM/Members/Profile ouverts */
body.giri-mobile-shell:has(.dm-overlay.active) .giri-bottomnav,
body.giri-mobile-shell:has(#mobileMembersPanel.open) .giri-bottomnav,
body.giri-mobile-shell:has(.profile-modal.visible) .giri-bottomnav{
  display: none !important;
}

/* ────────── [V3-6] Maha chat popup : plein ecran drawer bas ────────── */
body.giri-mobile-shell .maha-chat{
  display: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.giri-mobile-shell .maha-chat.open{
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 82vh !important;
  height: 82dvh !important;
  max-height: 82vh !important;
  z-index: 2100 !important;
  transform: translateY(0) !important;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1) !important;
  background: linear-gradient(180deg, #241528 0%, #150a1a 100%) !important;
  border-radius: 24px 24px 0 0 !important;
  border-top: 2px solid rgba(212,168,83,.4) !important;
  box-shadow: 0 -14px 40px rgba(0,0,0,.6) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.giri-mobile-shell .maha-chat-header{
  padding: 18px 20px calc(18px + var(--safe-t, 0px)) !important;
  border-bottom: 1px solid rgba(212,168,83,.25) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(212,168,83,.06) !important;
}
body.giri-mobile-shell .maha-chat-header .mch-name{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #f5c36a !important;
  flex: 1 !important;
}
body.giri-mobile-shell .maha-chat-header::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  background: rgba(255,240,200,.3);
  border-radius: 3px;
}
body.giri-mobile-shell .maha-chat .mch-close{
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 26px !important;
  color: #f5c36a !important;
  background: rgba(212,168,83,.12) !important;
  border: 1px solid rgba(212,168,83,.3) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}
body.giri-mobile-shell .maha-chat-messages{
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px 18px !important;
  -webkit-overflow-scrolling: touch !important;
}
body.giri-mobile-shell .maha-chat-input{
  /* [FIX-MAHACHAT-BOTTOMNAV 2026-08-15] la bottomnav est passee a z-index 2100 (meme niveau que .maha-chat) pour rester au-dessus de l ecran Prives, elle recouvrait aussi la saisie Ananda sans le vouloir ; meme principe que le padding-bottom de #dmOverlay/.profile-modal juste plus bas dans ce fichier */
  padding: 12px 12px calc(12px + 94px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(212,168,83,.2) !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
body.giri-mobile-shell .maha-chat-input input{
  flex: 1 !important;
  padding: 14px 18px !important;
  font-size: 16px !important;
  border-radius: 22px !important;
  background: rgba(212,168,83,.06) !important;
  border: 1px solid rgba(212,168,83,.3) !important;
  color: #f8f3e8 !important;
  min-height: 48px !important;
}
body.giri-mobile-shell .maha-chat-input button{
  min-width: 48px !important;
  min-height: 48px !important;
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  color: #1a0f1f !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}
body.giri-mobile-shell .mcm-msg{
  padding: 14px 18px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  max-width: 85% !important;
}
body.giri-mobile-shell .mcm-msg.bot{
  background: rgba(212,168,83,.10) !important;
  border: 1px solid rgba(212,168,83,.2) !important;
  color: #f8f3e8 !important;
}
body.giri-mobile-shell .mcm-msg.user{
  background: rgba(212,168,83,.25) !important;
  color: #1a0f1f !important;
  margin-left: auto !important;
}


/* ============================================================
   [XIAOMI-AUDIT V4 2026-07-17] Corrections retour Maha :
   - Zoom clavier : inputs 16px (anti-zoom auto iOS) ; pincement LIBRE depuis le 27/07
   - Crop photo modal : plein largeur canvas 320
   - Sidebar : agrandir noms salons + arbre + userFooter roue + logout visibles
   - Retirer #lahiri-orb-fab (icone doree "telephone" flottante inutile)
   - Fix Fanderock3 mange en bas de sidebar : userFooter padding + safe-area
   - Refaire liste Messages style Messenger avatars 56 noms 17
   - Espacement lisibilite generale
   ============================================================ */

/* ────────── [V4-1] MODAL RECADRAGE PHOTO plein largeur ────────── */
body.giri-mobile-shell .crop-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  background: rgba(6,6,14,.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
body.giri-mobile-shell .crop-overlay.visible,
body.giri-mobile-shell .crop-overlay.active,
body.giri-mobile-shell .crop-overlay[style*="display: flex"],
body.giri-mobile-shell .crop-overlay[style*="display:flex"]{
  display: flex !important;
}
body.giri-mobile-shell .crop-box{
  width: calc(100vw - 32px) !important;
  max-width: calc(100vw - 32px) !important;
  padding: 24px 20px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #241528 0%, #150a1a 100%) !important;
  border: 1px solid rgba(212,168,83,.3) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.7) !important;
}
body.giri-mobile-shell .crop-box h3{
  color: #f5c36a !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 20px !important;
}
body.giri-mobile-shell .crop-canvas-wrap{
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  max-width: 320px !important;
  margin: 0 auto 20px !important;
  position: relative !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid rgba(212,168,83,.4) !important;
  box-shadow: 0 8px 24px rgba(212,168,83,.2) !important;
}
body.giri-mobile-shell #cropCanvas{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  touch-action: none !important;
  cursor: move !important;
}
body.giri-mobile-shell .crop-guide{
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid rgba(245,195,106,.5) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
body.giri-mobile-shell .crop-slider-wrap{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 8px 0 20px !important;
  padding: 0 4px !important;
}
body.giri-mobile-shell .crop-slider-wrap .label{
  color: #f5c36a !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  min-width: 24px !important;
  text-align: center !important;
}
body.giri-mobile-shell .crop-slider-wrap input[type="range"]{
  flex: 1 !important;
  height: 8px !important;
  -webkit-appearance: none !important;
  background: rgba(212,168,83,.2) !important;
  border-radius: 999px !important;
  outline: 0 !important;
}
body.giri-mobile-shell .crop-slider-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 2px solid #1a0f1f !important;
  box-shadow: 0 3px 8px rgba(212,168,83,.5) !important;
}
body.giri-mobile-shell .crop-actions{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 12px !important;
}
body.giri-mobile-shell .crop-actions button{
  min-height: 56px !important;
  padding: 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  border: 0 !important;
  cursor: pointer !important;
  letter-spacing: .03em !important;
}
body.giri-mobile-shell .crop-actions .cancel{
  background: rgba(248,243,232,.08) !important;
  color: #f8f3e8 !important;
  border: 1px solid rgba(248,243,232,.15) !important;
}
body.giri-mobile-shell .crop-actions .confirm{
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  color: #1a0f1f !important;
  box-shadow: 0 4px 14px rgba(212,168,83,.4) !important;
}

/* ────────── [V4-2] RETIRER icone doree flottante Lahiri (bulle "telephone" inutile) ────────── */
#lahiri-orb-fab,
#lahiri-orb-fab-style + #lahiri-orb-fab,
[id^="lahiri-orb"]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ────────── [V4-3] SIDEBAR : tout plus grand, plus lisible ────────── */
body.giri-mobile-shell .sidebar{
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;  /* espace pour userFooter */
}

/* Titres section (DISCUSSIONS OUVERTES + autres) */
body.giri-mobile-shell .sidebar .sb-section-row{
  padding: 18px 16px 10px !important;
}
body.giri-mobile-shell .sidebar .sb-section-row .label{
  font-size: 14px !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
}

/* Items de salon : Le Sanctuaire d'Ea-Hoel etc */
body.giri-mobile-shell .sidebar .ch-item{
  padding: 18px 20px !important;
  min-height: 64px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  gap: 14px !important;
  border-radius: 14px !important;
  margin: 6px 10px !important;
  line-height: 1.3 !important;
}
body.giri-mobile-shell .sidebar .ch-item .icon,
body.giri-mobile-shell .sidebar .ch-item img{
  width: 32px !important;
  height: 32px !important;
  font-size: 22px !important;
}
body.giri-mobile-shell .sidebar .ch-item .ch-name,
body.giri-mobile-shell .sidebar .ch-item .name{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f8f3e8 !important;
}
body.giri-mobile-shell .sidebar .ch-item .ch-desc,
body.giri-mobile-shell .sidebar .ch-item .desc{
  font-size: 13px !important;
  color: rgba(245,195,106,.75) !important;
  margin-top: 2px !important;
}

/* Categories / summary : Le Sanctuaire d'Ea-Hoel */
body.giri-mobile-shell .sidebar summary,
body.giri-mobile-shell .sidebar .cat-name,
body.giri-mobile-shell .sidebar .sb-category{
  padding: 14px 18px !important;
  font-size: 15px !important;
  min-height: 56px !important;
  font-weight: 700 !important;
}
body.giri-mobile-shell .sidebar summary .cat-title,
body.giri-mobile-shell .sidebar summary > span:first-child{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f5c36a !important;
}
body.giri-mobile-shell .sidebar summary .cat-sub{
  font-size: 12px !important;
  color: rgba(248,243,232,.7) !important;
}

/* Arbre a liens : titre + sub */
body.giri-mobile-shell .sidebar .sb-arbre-card{
  min-height: 90px !important;
  padding: 16px 18px !important;
  gap: 14px !important;
  margin: 12px 10px !important;
  border-radius: 18px !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-eyebrow{
  font-size: 11.5px !important;
  letter-spacing: .12em !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-title{
  font-size: 18px !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-sub{
  font-size: 13px !important;
  line-height: 1.3 !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-orb-wrap{
  width: 54px !important;
  height: 54px !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-cta-txt{
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Mettre a jour l'app : petit link mais lisible */
body.giri-mobile-shell .sidebar #updateAppBtn,
body.giri-mobile-shell .sidebar [class*="update-app"]{
  font-size: 13px !important;
  padding: 10px 14px !important;
  min-height: 40px !important;
  color: rgba(245,195,106,.85) !important;
}

/* ────────── [V4-4] USER FOOTER : Fanderock3 visible + roue dentee + logout ────────── */
body.giri-mobile-shell .sidebar .sb-user,
body.giri-mobile-shell .sidebar #userFooter{
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(15,7,21,.98) 40%, rgba(15,7,21,1) 100%) !important;
  border-top: 1px solid rgba(212,168,83,.2) !important;
  margin: 0 !important;
  width: 100% !important;
}
body.giri-mobile-shell .sidebar #userFooter .avatar,
body.giri-mobile-shell .sidebar .sb-user .avatar{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(212,168,83,.4) !important;
  cursor: pointer !important;
}
body.giri-mobile-shell .sidebar #userFooter .avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.giri-mobile-shell .sidebar #userFooter .info,
body.giri-mobile-shell .sidebar .sb-user .info{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
body.giri-mobile-shell .sidebar #userFooter .info .uname,
body.giri-mobile-shell .sidebar .sb-user .uname{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f8f3e8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .sidebar #userFooter .settings-btn,
body.giri-mobile-shell .sidebar .sb-user .settings-btn{
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(212,168,83,.12) !important;
  border: 1px solid rgba(212,168,83,.28) !important;
  border-radius: 12px !important;
  color: #f5c36a !important;
  font-size: 20px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.giri-mobile-shell .sidebar #userFooter .settings-btn:active{
  background: rgba(212,168,83,.22) !important;
  transform: scale(.94) !important;
}

/* sb-install "Installer l'app" */
body.giri-mobile-shell .sidebar .sb-install{
  margin: 12px 10px !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  min-height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ────────── [V4-5] HEADER droit : icones DM/Membres cliquables et pas cachees ────────── */
body.giri-mobile-shell .ch-header{
  padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
  gap: 8px !important;
}
body.giri-mobile-shell .ch-header .ch-header-right,
body.giri-mobile-shell .ch-header .ch-actions{
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ────────── [V4-6] LISTE MESSAGES (DM) style Messenger ────────── */
body.giri-mobile-shell .dm-conv{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  min-height: 76px !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(212,168,83,.08) !important;
  transition: background .15s ease !important;
}
body.giri-mobile-shell .dm-conv:active,
body.giri-mobile-shell .dm-conv:hover{
  background: rgba(212,168,83,.06) !important;
}
body.giri-mobile-shell .dm-conv-av,
body.giri-mobile-shell .dm-conv-av-ph{
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(212,168,83,.25) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f5c36a !important;
  background: rgba(212,168,83,.15) !important;
}
body.giri-mobile-shell .dm-conv-body{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.giri-mobile-shell .dm-conv-name{
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #f8f3e8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .dm-conv-last{
  font-size: 14px !important;
  color: rgba(248,243,232,.65) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  font-style: normal !important;
}
body.giri-mobile-shell .dm-conv-meta{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  min-width: 24px !important;
}
body.giri-mobile-shell .dm-conv-badge{
  background: linear-gradient(135deg, #d4a853, #f5c36a) !important;
  color: #1a0f1f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.giri-mobile-shell .dm-header{
  padding: 16px 18px calc(16px + env(safe-area-inset-top, 0px)) !important;
  min-height: 72px !important;
  gap: 14px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(212,168,83,.15) !important;
  background: linear-gradient(180deg, #241528 0%, #1a0f1f 100%) !important;
}
body.giri-mobile-shell .dm-header .dm-back{
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 26px !important;
  color: #f5c36a !important;
  background: rgba(212,168,83,.10) !important;
  border: 1px solid rgba(212,168,83,.25) !important;
  border-radius: 12px !important;
  padding: 0 !important;
}
body.giri-mobile-shell .dm-header-info h3{
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #f8f3e8 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .dm-header-info small{
  font-size: 13px !important;
  color: rgba(245,195,106,.85) !important;
  line-height: 1.2 !important;
}

/* ────────── [V4-7] EMPÊCHER ZOOM CLAVIER : agressif via touch-action + font-size 16px ────────── */
body.giri-mobile-shell,
body.giri-mobile-shell *{
  touch-action: manipulation !important;
}
/* Sauf pour la barre input et editor : garder touch normal */
body.giri-mobile-shell .msg-input-box textarea,
body.giri-mobile-shell #msgInput,
body.giri-mobile-shell #cropCanvas{
  touch-action: auto !important;
}
/* Force 16px sur TOUT input/textarea au niveau maximum specificite */
html body.giri-mobile-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html body.giri-mobile-shell textarea,
html body.giri-mobile-shell select{
  font-size: 16px !important;
  transform: translateZ(0) !important;  /* force GPU layer stable */
}


/* [V4-9] Supprimer doublon 'Mettre a jour l'app' : conserver seulement .sb-update (petit lien discret) */
body.giri-mobile-shell .giri-sidebar-refresh{
  display: none !important;
}

/* [V4-10] Style .sb-update dans sidebar mobile : plus grand et cliquable */
body.giri-mobile-shell .sidebar .sb-update{
  padding: 12px 18px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  margin: 8px 12px !important;
  gap: 10px !important;
}
body.giri-mobile-shell .sidebar .sb-update .sb-update-ico{
  width: 20px !important;
  height: 20px !important;
}
body.giri-mobile-shell .sidebar .sb-update .sb-update-ico svg{
  width: 18px !important;
  height: 18px !important;
}

/* ────────── [V4-8] Profile modal : rendre thème visuel et toggles plus grands + lisibles ────────── */
body.giri-mobile-shell .profile-modal .theme-section > label,
body.giri-mobile-shell .profile-modal h3{
  font-size: 15px !important;
  color: rgba(245,195,106,.9) !important;
  letter-spacing: .1em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin: 22px 0 12px !important;
}
/* Toggle rangs plein largeur : Notifications push, Apparaitre en ligne, etc */
body.giri-mobile-shell .profile-modal .toggle-row,
body.giri-mobile-shell .profile-modal .settings-row,
body.giri-mobile-shell .profile-modal .pref-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 4px !important;
  border-bottom: 1px solid rgba(212,168,83,.08) !important;
}
body.giri-mobile-shell .profile-modal .toggle-row .label,
body.giri-mobile-shell .profile-modal .settings-row .label{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f8f3e8 !important;
  line-height: 1.3 !important;
}
body.giri-mobile-shell .profile-modal .toggle-row .desc,
body.giri-mobile-shell .profile-modal .settings-row .desc,
body.giri-mobile-shell .profile-modal .toggle-row small{
  font-size: 13px !important;
  color: rgba(248,243,232,.6) !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}


/* ============================================================
   [XIAOMI-AUDIT V5 2026-07-17] TOUT GROSSIR :
   Retour Maha : "toujours trop petit partout"
   - Sidebar salons, textes, avatars, roue dentee, Fanderock3
   - DM Messages: avatars vignettes 68, noms 20, sous-texte 16
   - Members: avatars 60, noms 19, badges + gros
   - Espacement userFooter reduit (proche barre bas)
   ============================================================ */

/* ────────── [V5-1] SIDEBAR : TOUT PLUS GROS ────────── */
/* Header sidebar (La Giri Family / ESPACE LIBRE) */
body.giri-mobile-shell .sidebar .sb-header{
  padding: 20px 18px !important;
  gap: 14px !important;
}
body.giri-mobile-shell .sidebar .sb-header-logo,
body.giri-mobile-shell .sidebar .sb-header img{
  width: 72px !important;
  height: 72px !important;
}
body.giri-mobile-shell .sidebar .sb-header .title,
body.giri-mobile-shell .sidebar .sb-header .sb-brand{
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .sidebar .sb-header .sub{
  font-size: 13px !important;
  letter-spacing: .12em !important;
  color: rgba(245,195,106,.75) !important;
  margin-top: 2px !important;
}

/* Arbre a Liens : carte plus grande */
body.giri-mobile-shell .sidebar .sb-arbre-card{
  min-height: 100px !important;
  padding: 18px 20px !important;
  gap: 16px !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-eyebrow{
  font-size: 12px !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-title{
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-sub{
  font-size: 14px !important;
  line-height: 1.35 !important;
}
body.giri-mobile-shell .sidebar .sb-arbre-orb-wrap{
  width: 62px !important;
  height: 62px !important;
}

/* DISCUSSIONS OUVERTES section header */
body.giri-mobile-shell .sidebar .sb-section-row{
  padding: 22px 18px 12px !important;
}
body.giri-mobile-shell .sidebar .sb-section-row .label{
  font-size: 15px !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .sidebar .sb-section-row .create-ch-btn,
body.giri-mobile-shell .sidebar .sb-section-row #createChBtn{
  min-width: 48px !important;
  min-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 26px !important;
}

/* Categories : Le Sanctuaire d Ea-Hoel, L Accueil, etc */
body.giri-mobile-shell .sidebar details summary,
body.giri-mobile-shell .sidebar .cat-name,
body.giri-mobile-shell .sidebar .sb-category{
  padding: 16px 20px !important;
  font-size: 16px !important;
  min-height: 66px !important;
  font-weight: 700 !important;
  gap: 12px !important;
}
body.giri-mobile-shell .sidebar summary > *:first-child,
body.giri-mobile-shell .sidebar summary .cat-title,
body.giri-mobile-shell .sidebar summary span:first-child{
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #f5c36a !important;
}
body.giri-mobile-shell .sidebar summary .cat-sub,
body.giri-mobile-shell .sidebar summary small{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(248,243,232,.75) !important;
  line-height: 1.3 !important;
  letter-spacing: .05em !important;
}
body.giri-mobile-shell .sidebar summary::after,
body.giri-mobile-shell .sidebar details summary::marker{
  font-size: 16px !important;
}

/* Salons individuels (Paroles du Maître, Annonces, Le Cœur, etc) */
body.giri-mobile-shell .sidebar .ch-item,
body.giri-mobile-shell .sidebar .sb-item{
  padding: 18px 22px !important;
  min-height: 72px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  gap: 16px !important;
  border-radius: 14px !important;
  margin: 6px 12px !important;
  line-height: 1.3 !important;
}
body.giri-mobile-shell .sidebar .ch-item .icon,
body.giri-mobile-shell .sidebar .ch-item > span:first-child,
body.giri-mobile-shell .sidebar .ch-item img{
  width: 38px !important;
  height: 38px !important;
  font-size: 26px !important;
  flex-shrink: 0 !important;
}
body.giri-mobile-shell .sidebar .ch-item .ch-name,
body.giri-mobile-shell .sidebar .ch-item .name{
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f8f3e8 !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .sidebar .ch-item .ch-desc,
body.giri-mobile-shell .sidebar .ch-item .desc{
  font-size: 14px !important;
  color: rgba(245,195,106,.8) !important;
  margin-top: 3px !important;
}

/* Assistance Mahayawen bouton : plus gros */
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn,
body.giri-mobile-shell .sidebar .sb-assistance-btn{
  padding: 20px 22px !important;
  min-height: 72px !important;
  font-size: 18px !important;
  gap: 16px !important;
  margin: 16px 12px !important;
}
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn img{
  width: 42px !important;
  height: 42px !important;
}
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn span:first-of-type,
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn > div > span:first-child{
  font-size: 18px !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn span:last-of-type,
body.giri-mobile-shell .sidebar #sidebarAssistanceBtn > div > span:last-child{
  font-size: 14px !important;
}

/* Bouton "Installer l'app" */
body.giri-mobile-shell .sidebar .sb-install{
  padding: 16px 20px !important;
  font-size: 16px !important;
  min-height: 58px !important;
  gap: 14px !important;
}
body.giri-mobile-shell .sidebar .sb-install-icon{
  font-size: 22px !important;
}

/* "Mettre a jour l'app" (sb-update) */
body.giri-mobile-shell .sidebar .sb-update{
  padding: 14px 20px !important;
  font-size: 15px !important;
  min-height: 50px !important;
  margin: 6px 12px !important;
  gap: 12px !important;
}
body.giri-mobile-shell .sidebar .sb-update .sb-update-ico,
body.giri-mobile-shell .sidebar .sb-update .sb-update-ico svg{
  width: 22px !important;
  height: 22px !important;
  font-size: 18px !important;
}

/* ────────── [V5-2] USER FOOTER : REDUIRE ESPACE + GROSSIR ROUE ────────── */
body.giri-mobile-shell .sidebar{
  /* [FIX-ZERODEFAUT 2026-08-15] Les 8px d'origine supposaient un footer
     position:sticky qui se recale toujours juste au-dessus de la bottomnav --
     mais le contenu de la sidebar a grandi aujourd'hui (bouton Retour, nav
     condensee) et #userFooter est desormais pousse SOUS la bottomnav fixe
     (mesure : top 695px sur 780px d'ecran, recouvert a 100%, confirme par
     sonde-defauts.js + capture). Meme variable --bottom-nav-h que le fix du
     composer ce matin, pour rester synchronise avec sa vraie hauteur rendue. */
  padding-bottom: calc(var(--bottom-nav-h, 94px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
}
body.giri-mobile-shell .sidebar .sb-user,
body.giri-mobile-shell .sidebar #userFooter{
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 74px !important;
  gap: 14px !important;
  margin-top: 0 !important;
}
body.giri-mobile-shell .sidebar #userFooter .avatar,
body.giri-mobile-shell .sidebar .sb-user .avatar{
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border: 2.5px solid rgba(212,168,83,.5) !important;
}
body.giri-mobile-shell .sidebar #userFooter .info .uname,
body.giri-mobile-shell .sidebar .sb-user .uname{
  font-size: 17px !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .sidebar #userFooter .settings-btn,
body.giri-mobile-shell .sidebar .sb-user .settings-btn{
  min-width: 52px !important;
  min-height: 52px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 26px !important;
  border-radius: 14px !important;
}

/* ────────── [V5-3] DM MESSAGES : AVATARS + GROS, NOMS + GROS ────────── */
body.giri-mobile-shell .dm-conv{
  padding: 16px 18px !important;
  min-height: 88px !important;
  gap: 16px !important;
}
body.giri-mobile-shell .dm-conv-av,
body.giri-mobile-shell .dm-conv-av-ph{
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  font-size: 26px !important;
  border-width: 2.5px !important;
}
body.giri-mobile-shell .dm-conv-name{
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .dm-conv-last{
  font-size: 16px !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}
body.giri-mobile-shell .dm-conv-badge{
  min-width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}
body.giri-mobile-shell .dm-header{
  min-height: 84px !important;
  padding: 20px 20px calc(20px + env(safe-area-inset-top, 0px)) !important;
  gap: 16px !important;
}
body.giri-mobile-shell .dm-header .dm-back{
  min-width: 52px !important;
  min-height: 52px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 30px !important;
}
body.giri-mobile-shell .dm-header-info h3{
  font-size: 24px !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .dm-header-info small{
  font-size: 15px !important;
  margin-top: 2px !important;
}

/* + Nouvelle conversation */
body.giri-mobile-shell .dm-new-btn{
  padding: 20px 24px !important;
  font-size: 18px !important;
  min-height: 66px !important;
  margin: 16px 16px !important;
  border-radius: 18px !important;
}

/* Empty state DM */
body.giri-mobile-shell .dm-empty{
  padding: 40px 20px !important;
}
body.giri-mobile-shell .dm-empty-icon{
  font-size: 64px !important;
  margin-bottom: 20px !important;
}
body.giri-mobile-shell .dm-empty p{
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: rgba(248,243,232,.75) !important;
}

/* ────────── [V5-4] MEMBRES DRAWER : TOUT PLUS GROS ────────── */
body.giri-mobile-shell .mobile-members-panel{
  height: 92vh !important;
  height: 92dvh !important;
  max-height: 92vh !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-header{
  padding: 20px 20px 14px !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-header h3{
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #f8f3e8 !important;
  margin: 0 !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-header #mobileMemberCount{
  font-size: 20px !important;
  color: rgba(245,195,106,.85) !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-search{
  padding: 8px 18px 16px !important;
}
body.giri-mobile-shell .mobile-members-panel #mobileMemberSearch{
  min-height: 56px !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(212,168,83,.28) !important;
  background: rgba(212,168,83,.06) !important;
  color: #f8f3e8 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-list{
  padding: 0 8px 20px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item{
  padding: 16px 16px !important;
  gap: 16px !important;
  min-height: 84px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 14px !important;
  margin-bottom: 4px !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .m-avatar{
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .m-avatar img,
body.giri-mobile-shell .mobile-members-panel .member-item .m-avatar > div{
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .online-dot{
  width: 16px !important;
  height: 16px !important;
  border: 2.5px solid #150a1a !important;
  bottom: 2px !important;
  right: 2px !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .m-name{
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #f8f3e8 !important;
  line-height: 1.2 !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .role-title{
  font-size: 14.5px !important;
  color: rgba(245,195,106,.85) !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  display: inline-block !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .m-status{
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
}
body.giri-mobile-shell .mobile-members-panel .member-item .role-badge{
  font-size: 12.5px !important;
  padding: 5px 10px !important;
  margin-left: 8px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body.giri-mobile-shell .mobile-members-panel .mobile-members-close{
  min-width: 52px !important;
  min-height: 52px !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 30px !important;
  border-radius: 14px !important;
  color: #f5c36a !important;
  background: rgba(212,168,83,.12) !important;
  border: 1px solid rgba(212,168,83,.3) !important;
}

/* Sections header online/offline */
body.giri-mobile-shell .mobile-members-panel .mobile-members-list > div[style*="uppercase"]{
  font-size: 13px !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
  padding: 14px 12px 8px !important;
}

/* ────────── [V5-5] Header salon : plus gros aussi ────────── */
body.giri-mobile-shell .ch-header{
  padding: 16px 18px !important;
  padding-top: calc(16px + var(--safe-t, 0px)) !important;
  min-height: 84px !important;
  gap: 14px !important;
}
body.giri-mobile-shell .ch-header .ch-name{
  font-size: 20px !important;
  font-weight: 800 !important;
}
body.giri-mobile-shell .ch-header .ch-desc{
  font-size: 14px !important;
}
body.giri-mobile-shell .ch-header .mobile-toggle{
  height: 56px !important;
  width: 128px !important;
  min-width: 128px !important;
  font-size: 16px !important;
}
body.giri-mobile-shell .ch-header .mobile-toggle svg{
  width: 24px !important;
  height: 24px !important;
}
body.giri-mobile-shell .ch-header .mobile-members-btn,
body.giri-mobile-shell .ch-header .ch-icon-btn{
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}
body.giri-mobile-shell .ch-header .mobile-members-btn svg,
body.giri-mobile-shell .ch-header .ch-icon-btn svg{
  width: 24px !important;
  height: 24px !important;
}

/* ────────── [V5-6] Bottom-nav : icones + labels + gros ────────── */
.giri-bottomnav{
  height: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
}
.giri-bottomnav-btn svg{
  width: 32px !important;
  height: 32px !important;
}
.giri-bottomnav-btn .giri-bottomnav-label,
.giri-bottomnav-btn span{
  font-size: 13.5px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}