* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* =======================================================================
   TARATURA SAGOMA (Blocco 8a). Davanti a un'auto vera si regolano due cose,
   ciascuna in UN SOLO PUNTO, senza rifare gli asset _LT:

   • SPESSORE  →  NON è qui. È l'attributo `radius` del filtro <feMorphology>
                  con id="pose-dilate" in public/index.html. Alzalo per linee
                  più grosse (dilatazione morfologica reale, bordo netto e
                  senza puntini). Vedi il commento su quel filtro.
   • OPACITÀ   →  --pose-line-opacity qui sotto (0 trasparente … 1 pieno).

   (Il COLORE non sta qui: è --pose-color, scelto a runtime dal selettore.)
   ======================================================================= */
:root {
  --pose-line-opacity: 0.65;
}

/* Contenitore del filtro SVG di ispessimento (#pose-dilate): deve stare nel DOM
   perché il filtro è referenziato, ma resta invisibile e fuori dal flusso.
   NON usare display:none: alcuni browser non applicano un filtro referenziato
   da un SVG nascosto in quel modo. */
.sagoma-filter {
  position: absolute;
  width: 0;
  height: 0;
}

/* Stream camera a tutto schermo */
#camera {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Overlay generico (errore / avviso rotazione) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
}

.overlay[hidden] {
  display: none;
}

.overlay__box {
  max-width: 420px;
  text-align: center;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.15rem;
  line-height: 1.5;
}

.overlay--error .overlay__box {
  color: #ffd7d7;
}

/* Icona del ponte "ruota il telefono" (Blocco 7b): oscilla per suggerire il gesto. */
.rotate-icon {
  display: block;
  margin: 0 auto 18px;
  color: #fff;
  transform-origin: center;
  animation: rotate-hint 2.2s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%, 40%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}

/* ===== Overlay guida della posa =====
   Sta sopra la camera (z 5) ma sotto errore/rotazione (z 10).
   Non intercetta tocchi: è puramente visivo. */
.pose-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Sagoma-fondale: il PNG _LT è usato come CSS mask, così il riempimento
   è dato da background-color ed è RICOLORABILE via --pose-color (default nero).
   Semi-trasparente per guidare senza coprire la scena. */
/* Wrapper della sagoma: porta l'opacità e l'ISPESSIMENTO della taratura (8a).
   Il filtro deve stare QUI (sul padre) e non su .pose-mask: la CSS mask si
   applica DOPO il filter, quindi sul figlio agirebbe sul rettangolo pieno. Sul
   padre invece agisce sulla silhouette già ritagliata dal figlio.
   Ispessimento = <feMorphology> "dilate" (dilatazione morfologica REALE: ingrossa
   la linea in modo uniforme e netto, senza i puntini/frange che davano gli aloni
   sommati). Lo spessore si tara sull'attributo `radius` del filtro #pose-dilate
   in index.html. */
.pose-mask-wrap {
  position: absolute;
  inset: 0;
  opacity: var(--pose-line-opacity, 0.65);
  filter: url(#pose-dilate);
}

.pose-mask {
  position: absolute;
  inset: 0;
  background-color: var(--pose-color, #000);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  /* -webkit-mask-image / mask-image vengono impostati da main.js */
  /* Blocco 11: scala e offset verticale PER-POSA. Le variabili le imposta
     main.js dai campi `scale`/`offsetY` della posa; i default (1 / 0%)
     riproducono ESATTAMENTE l'attuale contain/center. La taratura dei valori
     è in poses.config.js. */
  transform: translateY(var(--pose-offset-y, 0%)) scale(var(--pose-scale, 1));
  transform-origin: center center;
}

/* Griglia dei terzi */
.pose-grid[hidden] {
  display: none;
}

.grid-line {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
}

.grid-line--v {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
}

.grid-line--h {
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-0.5px);
}

.grid-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

/* Cornice ad angoli */
.pose-corners {
  position: absolute;
  inset: 16px;
}

.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

.corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ===== Colonna miniature pose (sinistra) =====
   Striscia verticale scorrevole: mostra ~3 miniature per volta, la corrente
   resta centrata. È interattiva (tap/swipe), quindi sopra l'overlay-posa (z5)
   ma sotto errore/rotazione (z10). Il padding verticale (top/bottom) viene
   impostato da main.js per permettere di centrare anche prima e ultima voce. */
.pose-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  /* content-box: `width` è la larghezza del CONTENUTO (miniatura); il padding —
     inclusa la safe-area a sinistra (Dynamic Island / notch in landscape) — si
     somma ATTORNO, senza comprimere le miniature. Così la striscia parte dopo
     l'isola e le miniature non traboccano di lato. */
  box-sizing: content-box;
  width: 80px;
  padding: 0 10px 0 calc(10px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;   /* mai scroll orizzontale */
  touch-action: pan-y;  /* lo swipe col dito resta solo verticale */
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.pose-rail::-webkit-scrollbar {
  display: none;
}

.thumb {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 92px;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

/* Posa corrente: piena opacità, bordo bianco, leggero ingrandimento */
.thumb--active {
  opacity: 1;
  border-color: #fff;
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.06);
}

/* Anteprima silhouette: stesso PNG _LT usato come mask, riempito di bianco
   così è visibile sulla striscia scura. */
.thumb__img {
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Voce "Difetti": segnaposto vuoto con etichetta, senza immagine. */
.thumb__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  font: 600 0.68rem/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* HUD: etichetta + contatore, con rispetto delle safe-area (notch) */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(108px + env(safe-area-inset-left));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

.hud__label,
.hud__counter {
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Badge di stato sulla miniatura (upload). Un solo stato per volta. */
.thumb--done::after,
.thumb--error::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font: 700 0.72rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Caricata con successo: spunta verde definitiva */
.thumb--done::after {
  background: #2e7d32;
}

/* Upload fallito: badge rosso "!" — la miniatura è tap-per-ritentare */
.thumb--error::after {
  content: "!";
  background: #c62828;
}

.thumb--error {
  border-color: #c62828;
}

/* Upload in corso: spinner ambra */
.thumb--uploading::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-top-color: #ffb300;
  background: rgba(0, 0, 0, 0.35);
  animation: thumb-spin 0.8s linear infinite;
}

@keyframes thumb-spin {
  to { transform: rotate(360deg); }
}

/* ===== Foto in revisione: copre la camera al centro dopo lo scatto =====
   Sopra la camera (z0) e sopra le guide (z5, che comunque nascondiamo), ma
   sotto le colonne interattive (z6). */
.review-photo {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.review-photo[hidden] {
  display: none;
}

/* ===== Colonna azioni (destra): scatto / revisione =====
   Speculare alle miniature. Il contenitore non intercetta i tocchi (così le
   zone vuote non bloccano nulla): lo fanno solo i controlli. */
.action-col {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px calc(12px + env(safe-area-inset-right)) 12px 12px;
  pointer-events: none;
}

.action-col > * {
  pointer-events: auto;
}

.action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.action-group[hidden] {
  display: none;
}

/* Pulsante di scatto circolare (anello bianco + disco) */
.shutter {
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}

.shutter:active {
  transform: scale(0.92);
}

/* Pulsanti a pillola (Rifai / Conferma / Ho finito) */
.btn {
  min-width: 128px;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  font: 600 0.95rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s;
}

.btn:active {
  transform: scale(0.96);
}

.btn--confirm { background: #2e7d32; }
.btn--retake  { background: rgba(60, 60, 60, 0.92); }
.btn--finish  { background: #1565c0; }

.btn[hidden] {
  display: none;
}

/* Contatore foto difetti (sopra lo scatto sulla posa "Difetti") */
.difetti-counter {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 600 0.9rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.difetti-counter[hidden] {
  display: none;
}

/* ===== 7c. Selettore colore sagoma (colonna destra, sotto lo scatto) =====
   Il colore scelto va in --pose-color (su :root): la .pose-mask lo eredita e
   si ricolora subito. Nascosto su "Difetti" (nessuna sagoma). */
.color-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 9px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

.color-picker[hidden] {
  display: none;
}

.color-dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.color-dot:active {
  transform: scale(0.9);
}

.color-dot--white  { background: #ffffff; }
.color-dot--black  { background: #000000; }
.color-dot--yellow { background: #ffdd00; }

/* Colore selezionato: anello bianco e leggero ingrandimento. */
.color-dot--active {
  border-color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.6);
  transform: scale(1.12);
}

/* ===== Schermate verticali di apertura/chiusura (Blocco 7a / 7d) =====
   Coprono l'intera app (sopra colonne z6 e overlay z10). Pensate per il portrait:
   l'utente tiene il telefono normalmente. */
.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(28px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
  background: #0d0f12;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.screen[hidden] {
  display: none;
}

.screen__box {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

/* 10d: slot logo cliente, auto-riparante. Con il PNG presente mostra il logo;
   se l'img viene rimossa da onerror (file mancante) lo slot resta :empty e
   mostra un placeholder discreto, senza icona di immagine rotta. */
.brand-slot {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  max-height: 60px;
  max-width: 70%;
  height: auto;
  width: auto;
  object-fit: contain;
}
.brand-slot:empty::before {
  content: "logo Cars Hotel";
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 10px 18px;
}

.screen__icon {
  color: #8ab4f8;
}

.screen__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}

.screen__text {
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* 10c: rassicurazione targa — riquadro distinto dal claim, testo a sinistra con
   iconcina, così l'utente lo nota e non taglia l'auto per proteggere la targa. */
.screen__reassure {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(138, 180, 248, 0.12);
  border: 1px solid rgba(138, 180, 248, 0.3);
  border-radius: 12px;
  padding: 14px 16px;
}
.screen__reassure-icon {
  flex: none;
  font-size: 1.1rem;
  line-height: 1.45;
}

/* 9e: riga discreta ma leggibile sul tempo di conservazione. */
.screen__note {
  margin-top: 2px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.screen__note:empty {
  display: none;
}

.screen__btn {
  margin-top: 6px;
  min-width: 200px;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  background: #2e7d32;
  color: #fff;
  font: 700 1.1rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.screen__btn:active {
  transform: scale(0.96);
}

.screen__btn[hidden] {
  display: none;
}

.screen__btn--retry {
  background: #c62828;
}

/* Icona di esito sulla schermata finale: spunta (ok), "!" (errore), spinner (in corso). */
.finish-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 2.2rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

.finish-icon--ok { background: #2e7d32; }
.finish-icon--ok::before { content: "\2713"; }

.finish-icon--error { background: #c62828; }
.finish-icon--error::before { content: "!"; }

.finish-icon--pending {
  background: transparent;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffb300;
  animation: thumb-spin 0.8s linear infinite;
}