/* Planimetria 3D: l'immagine del render e sopra il modello vero (three.js, js/plan3d.js) appena e' pronto.
   Senza WebGL resta l'immagine; i comandi cambiano solo la frase di stato. */

@layer components {
  .plan3d-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--render); /* stesso fondo del render: l'immagine non si vede come un rettangolo */

    & > img { position: absolute; inset: 10% 4% 16%; width: 92%; height: 74%; object-fit: contain; }
    &.live > img { opacity: 0; transition: opacity .4s var(--ease); }

    /* Il badge sta sopra un canvas WebGL che si ridisegna a ogni fotogramma: il puntino e' fisso (un puntino animato
       compariva e spariva a fotogrammi alterni su Safari, il badge cambiava larghezza e sfarfallava). */
    & > .badge { position: absolute; top: 18px; left: 18px; z-index: 2; }
    & > .badge::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
  }

  .p3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    cursor: grab;
    touch-action: pan-y;
    transition: opacity .6s var(--ease);

    &:active { cursor: grabbing; }
    & canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y !important; }
    & .labels { position: absolute; inset: 0; pointer-events: none; }
    /* CSS2DRenderer riassegna lo z-index di ogni etichetta a ogni fotogramma in base alla distanza: due etichette vicine
       (Bagno/Corridoio) si scambiavano l'ordine di continuo mentre la vista ruota e sfarfallavano. Ordine fisso. */
    & .labels > div { z-index: auto !important; }
  }
  .plan3d-stage.live .p3d { opacity: 1; }

  /* barra dei comandi in basso */
  .p3d-tools {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 3;
    translate: -50% 0;
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: var(--r-pill);
    background: var(--ground);
    white-space: nowrap;

    & button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: var(--control-h-sm);
      padding: 0 14px;
      border: 0;
      border-radius: var(--r-pill);
      background: transparent;
      color: var(--ink);
      font: 500 var(--step-small) var(--font);
      cursor: pointer;
      transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }
    & button:hover { background: var(--tint); }
    & button[aria-pressed="true"] { background: var(--select); color: var(--on-ink); }
    & svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    & .help { width: var(--control-h-sm); padding: 0; justify-content: center; font-size: var(--step-body); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--line); }
    & .help[aria-expanded="true"] { background: var(--select); color: var(--on-ink); box-shadow: none; }
  }
  @media (max-width: 640px) {
    .p3d-tools button span { display: none; }
  }

  .p3d-help {
    position: absolute;
    left: 50%;
    bottom: 76px;
    z-index: 4;
    width: min(330px, calc(100% - 32px));
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: var(--shadow-menu);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity var(--dur-fast) var(--ease), transform .25s var(--ease), visibility 0s .25s;

    &.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--dur-fast) var(--ease), transform .25s var(--ease), visibility 0s; }
    & .title { margin-bottom: 8px; font-weight: 600; }
    & ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--step-small); }
    & li { display: grid; gap: 1px; }
    & b { font-weight: 600; color: var(--accent-soft); }
    & span { color: var(--on-ink-soft); }
  }

  /* etichette delle stanze (create dallo script) */
  .room-tag {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--on-ink) 92%, transparent);
    color: var(--ink);
    font: 600 11px/1.2 var(--font);
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .45s cubic-bezier(.34, 1.7, .5, 1) var(--d, 0s), opacity .25s var(--ease) var(--d, 0s);

    & small { margin-left: 4px; font-weight: 500; color: var(--ink-soft); }
    &.on { background: var(--select); color: var(--on-ink); transform: scale(1.12); }
    &.on small { color: var(--on-ink-soft); }
    &.gone { transform: scale(0); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.5, -0.6, .7, .3) var(--d, 0s), opacity var(--dur-fast) var(--ease) calc(var(--d, 0s) + .1s); }
  }
  @media (max-width: 640px) {
    .room-tag:not(.on) { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .room-tag, .room-tag.gone { transition: none; }
  }
}