/* Studio: la luce calda arriva dall'alto a sinistra, come la key del modello
   (-3, 6, 4). Il lato destro degrada verso il tono freddo delle sue ombre. */
.vd-virgil .vd-virgil__atmosphere {
  background:
    radial-gradient(ellipse at 24% 4%, rgba(255, 248, 231, 0.68), transparent 62%),
    linear-gradient(125deg, #f3f2ed 0%, #e1e5e2 48%, #c0ccce 100%);
  background-size: auto;
}

.vd-virgil .vd-virgil__atmosphere::after { display: none; }

/* La camera mostra il ritratto superiore del busto leggero.
   Il campo ampio mantiene la scala ravvicinata di testa e spalle. */
.vd-virgil__bust {
  --vd-bust-height: max(0px, calc(100dvh - var(--vd-virgil-header-h) - 16px));
  position: absolute;
  z-index: 0;
  top: calc((100dvh + var(--vd-virgil-header-h) - var(--vd-bust-height)) / 2);
  right: max(0px, calc((100vw - var(--vd-virgil-frame)) / 2));
  width: min(64vw, 1100px);
  height: var(--vd-bust-height);
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.vd-virgil__canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.vd-virgil[data-bust='ready'] .vd-virgil__canvas { opacity: 1; }

/* Il busto ci mette qualche secondo, e prima non c'era niente: solo un vuoto
   che sembrava un guasto. Qui Virgil si annuncia e dice a che punto e'; la
   riga sotto segue il caricamento del modello. Se ne va con la stessa
   dissolvenza con cui entra il marmo — o subito, se il busto non arriva. */
.vd-virgil__bust-loading {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 46, 50, 0.5);
  transition: opacity 0.45s ease;
}

.vd-virgil__bust-loading::after {
  content: '';
  width: min(170px, 40%);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    rgba(28, 46, 50, 0.45) calc(var(--vd-bust-progress, 0) * 100%),
    rgba(28, 46, 50, 0.13) calc(var(--vd-bust-progress, 0) * 100%)
  );
}

.vd-virgil[data-bust='ready'] .vd-virgil__bust-loading,
.vd-virgil[data-bust='error'] .vd-virgil__bust-loading,
.vd-virgil[data-bust='disposed'] .vd-virgil__bust-loading {
  opacity: 0;
}

.vd-virgil[data-intro='preparing'] .vd-virgil__bust-loading {
  opacity: 0;
}

@media (min-width: 901px) {
  .vd-virgil__layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .vd-virgil__dialogue { width: 36%; }
}

@media (min-width: 681px) {
  /* Il comando resta vicino al bordo inferiore della scena. */
  .vd-virgil[data-bust='ready'] .vd-virgil__restart {
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 680px) {
  /* Il foglio ha altezza fissa (vd-virgil.css), quindi anche il busto: occupa
     la fascia sopra il foglio e non si sposta né cambia scala durante la
     conversazione. Il fondo entra di 20px sotto il bordo arrotondato del
     foglio, così il taglio del modello non si vede. */
  .vd-virgil__bust {
    --vd-bust-height: max(0px, calc(
      100% - var(--vd-virgil-header-h) - var(--vd-virgil-sheet-box) + 14px
    ));
    top: calc(var(--vd-virgil-header-h) + 6px);
    right: 4px;
    width: calc(100% - 8px);
  }

  /* Un tocco sul busto manda avanti veloce il messaggio, come un tocco sul
     testo. Il bersaglio copre il busto, anche mentre il modello carica, e
     lascia liberi i comandi sulla destra e il foglio in basso. */
  .vd-virgil__bust-tap {
    z-index: 2;
    top: var(--vd-virgil-header-h);
    right: 64px;
    left: 20px;
    height: max(0px, calc(100% - var(--vd-virgil-header-h) - var(--vd-virgil-sheet-box)));
  }

  .vd-virgil[data-keyboard='open'] .vd-virgil__bust { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-virgil__bust,
  .vd-virgil__canvas,
  .vd-virgil__bust-loading { transition: none; }
}