/* VISIONA Recommended styles prototype — FaceShape final layout.
   Loaded last, intentionally short: one source of truth for Step 2 + Step 3.
   If this file grows into stacked date-based patches again, delete and replace. */

.phone .analysis-loading-screen,
.analysis-loading-screen {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.analysis-loading-screen .analysis-lead,
.analysis-loading-screen.is-running .analysis-types,
.analysis-loading-screen.is-running .analysis-section-row {
  display: none !important;
}

.analysis-loading-screen .step-header {
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 0 10px !important;
}

.analysis-title-icon svg {
  width: .76em !important;
  height: .76em !important;
}

/* Step 2 — scan in progress.
   The selfie is the hero, but remains fully contained and centered. */
.analysis-loading-screen.is-running {
  padding: 10px 30px 12px !important;
}

.analysis-loading-screen.is-running h1 {
  max-width: 580px !important;
  margin: 0 auto 12px !important;
  font-size: clamp(30px, 5.1vw, 42px) !important;
  line-height: 1.02 !important;
  letter-spacing: -1.35px !important;
}

.analysis-loading-screen.is-running .analysis-photo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(88%, 500px) !important;
  height: clamp(285px, 39vh, 365px) !important;
  min-height: 285px !important;
  max-height: 365px !important;
  margin: 0 auto 12px !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background: #101719 !important;
  box-sizing: border-box !important;
}

.analysis-loading-screen.is-running .analysis-photo > img,
.analysis-loading-screen.is-running .analysis-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.analysis-loading-screen.is-running .analysis-photo .face-scan-visual,
.analysis-loading-screen.is-running .analysis-photo .face-landmark-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

.analysis-loading-screen.is-running .analysis-preferences-action {
  width: min(100%, 650px) !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 auto 12px !important;
  border-radius: 20px !important;
}

.analysis-loading-screen.is-running .analysis-preferences-label {
  font-size: clamp(17px, 2.8vw, 22px) !important;
}

.analysis-loading-screen .analysis-security {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 580px) !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 auto !important;
  padding: 9px 18px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

.analysis-loading-screen .analysis-security-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.analysis-loading-screen .analysis-security-text {
  font-size: clamp(13px, 2.05vw, 16px) !important;
  line-height: 1.15 !important;
}

/* Step 3 — frame direction.
   Compact enough to show title, selfie, three cards, CTA and security block. */

@media (max-height: 790px) {
  .analysis-loading-screen.is-running {
    /* padding-top aligne sur l'ecran resultat (0) pour supprimer le "saut"
       vertical du header entre faux scan et resultats d'analyse. */
    padding-top: 0 !important;
    padding-bottom: 9px !important;
  }

  /* Meme hauteur de header que l'ecran resultat (is-direction-result) pour que
     le bloc back+barre soit positionne IDENTIQUEMENT sur les deux ecrans. */
  .analysis-loading-screen.is-running .step-header{
    height: 56px !important;
    min-height: 56px !important;
    margin-bottom: 8px !important;
  }

  .analysis-loading-screen.is-running h1 {
    font-size: clamp(26px, 4.5vw, 36px) !important;
    margin-bottom: 10px !important;
  }

  .analysis-loading-screen.is-running .analysis-photo {
    height: clamp(250px, 35vh, 310px) !important;
    min-height: 250px !important;
    max-height: 310px !important;
    margin-bottom: 12px !important;
  }

  .analysis-loading-screen.is-running .analysis-preferences-action {
    height: 52px !important;
    min-height: 52px !important;
    margin-bottom: 10px !important;
  }

  .analysis-loading-screen .analysis-security {
    height: 48px !important;
    min-height: 48px !important;
  }
}

/* Final hard overrides for the compact Step 3 face-direction layout.
   These selectors intentionally match the highest-specificity legacy rules
   from analysis.css, otherwise the browser keeps the older oversized cards. */

@media (max-height: 790px) {
}
/* 2026-08-25 visual QA hard overrides: compact analysis flow, no cropped selfie */
.analysis-loading-screen.is-running {
  overflow: hidden !important;
  padding: 8px 18px 12px !important;
}

.analysis-loading-screen.is-running h1 {
  font-size: clamp(34px, 7.4vw, 54px) !important;
  line-height: .94 !important;
  margin: 8px auto 8px !important;
  max-width: 100% !important;
}

.analysis-loading-screen.is-running .analysis-lead {
  font-size: clamp(14px, 3.1vw, 18px) !important;
  line-height: 1.28 !important;
  margin: 0 auto 14px !important;
}

.analysis-loading-screen.is-running .analysis-photo {
  width: min(calc(100% - 44px), 560px) !important;
  height: clamp(300px, 43vh, 420px) !important;
  min-height: 300px !important;
  max-height: 420px !important;
  margin: 0 auto 14px !important;
  border-radius: 26px !important;
}

.analysis-loading-screen.is-running .analysis-photo > img,
.analysis-loading-screen.is-running .analysis-photo img {
  object-fit: contain !important;
  object-position: center center !important;
}

.analysis-loading-screen.is-running .analysis-preferences-action {
  width: min(calc(100% - 44px), 560px) !important;
  min-height: 54px !important;
  height: 54px !important;
  margin: 0 auto 12px !important;
}

.analysis-loading-screen.is-running .analysis-security {
  width: min(calc(100% - 72px), 520px) !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  line-height: 1.16 !important;
}

@media (max-height: 790px) {
  .analysis-loading-screen.is-running h1 {
    font-size: clamp(30px, 6.7vw, 44px) !important;
    margin-top: 4px !important;
  }

  .analysis-loading-screen.is-running .analysis-photo {
    height: clamp(270px, 40vh, 340px) !important;
    min-height: 270px !important;
  }

  .analysis-loading-screen.is-running .analysis-preferences-action {
    min-height: 50px !important;
    height: 50px !important;
  }
}