/* Step 3: reference-UI composition, kept independent from the analysis engine. */

.selfie-screen .selfie-security,
.analysis-loading-screen.is-running .analysis-security,
.analysis-result-screen .result-security {
  display:grid!important;
  grid-template-columns:18px minmax(0,245px)!important;
  align-items:center!important;
  justify-content:center!important;
  column-gap:9px!important;
  width:100%!important;
  max-width:none!important;
  min-height:44px!important;
  height:auto!important;
  margin:0!important;
  padding:9px 14px!important;
  border-radius:13px!important;
  background:#f2f2f2!important;
  color:#5c5e60!important;
  text-align:left!important;
}

.selfie-screen .security-icon,
.analysis-loading-screen.is-running .analysis-security-icon,
.analysis-result-screen .result-security-icon {
  display:grid!important;
  width:18px!important;
  height:18px!important;
  place-items:center!important;
  color:#151718!important;
  align-self:center!important;
}

.selfie-screen .security-icon svg,
.analysis-loading-screen.is-running .analysis-security-icon svg,
.analysis-result-screen .result-security-icon svg {
  width:16px!important;
  height:16px!important;
  stroke-width:1.8!important;
}

.selfie-screen .security-text,
.analysis-loading-screen.is-running .analysis-security-text,
.analysis-result-screen .result-security-text {
  display:block!important;
  width:100%!important;
  max-width:245px!important;
  min-width:0!important;
  font-size:11px!important;
  line-height:1.2!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.step-header .step-previous .step-back-label { color:#151718; font-size:11px; font-weight:750; line-height:1; }

/* Header de parcours : back + barre de progression cote a cote, alignes a
   GAUCHE comme un bloc (meme layout sur tous les ecrans). */
.screen .step-header {
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
}

.screen .step-nav.step-previous {
  flex:0 0 auto!important;
  margin-left:4px!important;
  width:50px!important;
  height:30px!important;
  padding:0!important;
  border:1px solid #141414!important;
  border-radius:999px!important;
  background:#141414!important;
  color:#fff!important;
  box-shadow:none!important;
}

.screen .step-nav.step-previous { display:grid!important; place-items:center!important; }
.screen .step-nav.step-previous .step-back-label { color:#fff!important; font-size:10px!important; font-weight:800!important; text-align:left!important; }
.screen .steps { align-self:center!important; }

/* Keep all selfie actions and the privacy card visible within a compact viewport. */
.selfie-screen .selfie-capture-frame { height:330px!important; min-height:330px!important; margin:6px auto!important; }
/* Tips agrandis : le conteneur s'adapte au contenu (plus de hauteur figee) et
   on met un ecart NET avant le bloc bas pour eviter tout chevauchement. */
.selfie-screen .tips { height:auto!important; min-height:0!important; margin-bottom:22px!important; }
.selfie-screen .tips-title { height:auto!important; font-size:15px!important; font-weight:800!important; margin-bottom:10px!important; }
.selfie-screen .tip-icon { width:46px!important; height:46px!important; margin:0 auto 8px!important; }
.selfie-screen .tip-icon svg { width:26px!important; height:26px!important; }
.selfie-screen .tip-label { font-size:12px!important; line-height:1.25!important; }
/* CAUSE RACINE du chevauchement : .selfie-screen est en min-height:100vh +
   flex column, et .selfie-bottom-stack a margin-top:auto -> le bloc bas est
   COLLE en bas de la fenetre. Sur un viewport court, il remonte et se superpose
   aux tips. On neutralise : l'ecran s'empile naturellement (hauteur = contenu)
   et le bloc bas suit le flux avec un ecart fixe (plus de margin-top:auto). */
/* CAUSE RACINE reelle : le conteneur d'ecran a une HAUTEUR FIXE (674px, imposee
   par phone-template avec !important) + display:flex column. Le bloc photo
   (330px) + titre + tips agrandis depassent 674px : en hauteur fixe, les
   elements flex ne retrecissent pas -> ils se chevauchent. On laisse donc
   l'ecran GRANDIR selon son contenu et SCROLLER (au lieu d'ecraser). On cible
   #app > .screen.selfie-screen : meme specificite que phone-template mais
   defini APRES (ce fichier est charge en dernier) -> on gagne proprement. */
#app > .screen.selfie-screen {
  /* Hauteur BORNEE au cadre du telephone + scroll interne : c'est ce qui rend
     le defilement possible (height auto laissait grandir sans zone scrollable
     -> pas de scroll). On garde overflow-y:auto et on masque la scrollbar. */
  height: var(--prototype-layout-height, 674px) !important;
  min-height: var(--prototype-layout-height, 674px) !important;
  max-height: var(--prototype-layout-height, 674px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;              /* Firefox : pas de scrollbar */
  display: block !important;                     /* neutralise le flex qui figeait */
  padding-bottom: 20px !important;               /* juste ce qu'il faut sous le contenu */
  box-sizing: border-box !important;
}
/* Le "trait noir" au milieu du vide etait le home-indicator (barre facon iPhone) :
   inutile ici, on le masque sur l'ecran selfie. */
#app > .screen.selfie-screen .home-indicator { display: none !important; }
#app > .screen.selfie-screen::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.selfie-screen { min-height: 0 !important; height: auto !important; }
/* Bloc bas : suit le flux normal, ecart net des tips, plus de margin-top:auto. */
.selfie-screen .selfie-bottom-stack { margin-top: 18px !important; }
.selfie-screen .selfie-actions { margin-bottom:7px!important; }
.selfie-screen .selfie-button { min-height:42px!important; height:42px!important; }
.selfie-screen .selfie-button { position:relative; display:block!important; text-align:left!important; }
.selfie-screen .selfie-button.secondary { background:#f2f2f2!important; color:#1a1715!important; }
.selfie-screen .selfie-button-label { position:absolute; inset:0; display:grid!important; place-items:center!important; text-align:left!important; }
.selfie-screen .selfie-button-label { position:static!important; inset:auto!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; width:auto!important; height:auto!important; text-align:left!important; white-space:nowrap!important; }
.selfie-screen .selfie-button-label svg { width:24px!important; height:24px!important; flex:0 0 24px!important; }
.selfie-screen .selfie-button-icon { position:absolute; z-index:1; left:12px; top:50%; transform:translateY(-50%); }
.selfie-screen .selfie-start-action { min-height:46px!important; height:46px!important; margin-bottom:7px!important; }
.selfie-screen .selfie-start-action { position:relative; display:block!important; text-align:left!important; }
.selfie-screen .selfie-start-action .analysis-preferences-label { position:absolute; inset:0; display:grid!important; place-items:center!important; text-align:left!important; }
.selfie-screen .selfie-start-action .analysis-preferences-icon { position:absolute; z-index:1; left:16px; top:50%; transform:translateY(-50%); }
.selfie-screen .selfie-start-action .analysis-preferences-arrow { position:absolute; z-index:1; right:16px; top:50%; transform:translateY(-50%); }
.selfie-screen .home-indicator { margin:5px auto 0!important; }

/* The Recommended styles has its own header, so it receives the same Back control. */
.recommendation-header { min-height:56px!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:18px!important; }
.recommendation-nav.recommendation-close { flex:0 0 auto!important; margin-left:4px!important; width:50px!important; height:30px!important; padding:0!important; border:1px solid #141414!important; border-radius:999px!important; background:#141414!important; color:#fff!important; box-shadow:none!important; }
.recommendation-back-label { color:#fff; font-size:10px; font-weight:800; line-height:1; }

/* Step 2 uses the same reference layout, while the real analysis is running. */
#app>.analysis-loading-screen { overflow-y:auto; }
.analysis-loading-screen.is-running { padding:0 14px 12px; }
.analysis-loading-screen.is-running .step-previous { color:#161819; }
.analysis-loading-screen.is-running .step-previous svg { stroke:currentColor; }
.analysis-loading-screen.is-running h1 { max-width:330px; margin:14px auto 8px; font-size:39px; line-height:1.05; }
.analysis-loading-screen.is-running .analysis-lead { margin:0 auto 12px; font-size:12px; line-height:1.35; }
.analysis-loading-screen.is-running .analysis-scan-status { display:flex; align-items:center; justify-content:center; gap:6px; min-height:18px; margin:-6px 0 8px; color:#6c6864; font-size:10px; line-height:1.2; text-align:center; }
.analysis-loading-screen.is-running .analysis-scan-status-dot { width:6px; height:6px; border-radius:50%; background:#141414; box-shadow:0 0 0 4px rgba(0,0,0,.12); }
.analysis-loading-screen.is-running .analysis-photo { width:min(100%,332px)!important; height:300px!important; min-height:300px!important; max-height:none!important; margin:8px auto 14px!important; border-radius:20px!important; background:#101617!important; }
.analysis-loading-screen.is-running .analysis-photo>img { width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 20%!important; }
.analysis-loading-screen.is-running .analysis-preferences-action { width:100%!important; height:46px!important; min-height:46px!important; margin:0 0 10px!important; padding:8px 16px!important; border-radius:14px!important; grid-template-columns:24px minmax(0,1fr) 24px; }
.analysis-loading-screen.is-running .analysis-preferences-label { font-size:13px!important; line-height:1.1; white-space:nowrap; }
.analysis-loading-screen .analysis-preferences-action { position:relative!important; display:block!important; text-align:left!important; }
.analysis-loading-screen .analysis-preferences-label { position:absolute; inset:0; display:grid!important; place-items:center!important; text-align:left!important; }
.analysis-loading-screen .analysis-preferences-icon { position:absolute; z-index:1; left:16px; top:50%; transform:translateY(-50%); }
.analysis-loading-screen .analysis-preferences-arrow { position:absolute; z-index:1; right:16px; top:50%; transform:translateY(-50%); }

/* The reference bottom stack is shared by the selfie screen. */
#app>.selfie-screen { overflow-y:auto; }
.selfie-screen .selfie-bottom-stack { margin-top:10px; }
.selfie-screen .selfie-actions { width:100%; max-width:none; margin:0 0 9px; grid-template-columns:1fr 1fr; gap:8px; }
.selfie-screen .selfie-button { min-height:44px; height:44px; padding:7px 8px; border-radius:13px; }
.selfie-screen .selfie-button-label { font-size:11px; line-height:1.1; white-space:nowrap; }
.selfie-screen .selfie-start-action { width:100%; min-height:48px; height:48px; margin:0 0 9px; padding:8px 16px; border-radius:15px; grid-template-columns:24px minmax(0,1fr) 24px; }
.selfie-screen .analysis-preferences-label { font-size:13px; line-height:1.1; white-space:nowrap; }
.selfie-screen .home-indicator { margin:8px auto 0; }

/* Step 3: use the Step 2 capture treatment and readable horizontal direction cards. */
.vlm-details-backdrop{padding:6px!important}.vlm-details-modal{width:100%!important;max-width:none!important;padding:20px 18px 18px!important;border-radius:22px!important}.vlm-details-close{top:14px!important;right:14px!important;width:32px!important;height:32px!important;border-radius:10px!important;background:#2a3131!important;border:1px solid rgba(255,255,255,.22)!important}.vlm-details-close svg{width:16px!important;height:16px!important}.vlm-details-modal h2{margin-right:45px!important}


/* Keep the full Step 3 journey reachable on a small viewport. */
.analysis-loading-screen.is-running h1{
  font-size:27px!important;
  line-height:1.04!important;
}


/* Locked Detected by AI modal: keep recommendation values readable on mobile. */
.vlm-detail-card b{
  font-size:12.5px!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
}











/* Step 1 security block hard reset: same visible compact layout as Step 3. */
.selfie-screen .bottom-security.selfie-security{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:100%!important;
  max-width:336px!important;
  height:auto!important;
  min-height:44px!important;
  margin:0 auto!important;
  padding:9px 14px!important;
  border-radius:13px!important;
  background:#f2f2f2!important;
  color:#5c5e60!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.selfie-screen .bottom-security.selfie-security .security-icon,
.selfie-screen .bottom-security.selfie-security .security-text{
  position:static!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
.selfie-screen .bottom-security.selfie-security .security-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  color:#151718!important;
}
.selfie-screen .bottom-security.selfie-security .security-icon svg{
  display:block!important;
  width:16px!important;
  height:16px!important;
  stroke-width:1.8!important;
}
.selfie-screen .bottom-security.selfie-security .security-text{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:245px!important;
  min-width:0!important;
  color:#242728!important;
  font-size:11px!important;
  line-height:1.2!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
/* Step 2 (is-running) : garde un peu d'air sous la note de securite, le menu
   du bas etant ancre plus bas. L'etape 3 gere son propre layout flex ailleurs. */
#app>.analysis-loading-screen.is-running{
  box-sizing:border-box;
}

/* Step 1: retain 48 px of clear space directly below the safety note. */
#app>.screen.selfie-screen .selfie-security{margin-bottom:100px!important}