/* ============================================================
   HVAC AI — Interactive Simulator overlay
   A cleaned screenshot "plate" + live HTML equipment boxes that
   change colour state (running / paused / fault) on tap.
   Metrics use container-query units (cqw) so the overlay scales
   perfectly with the phone width.
   ============================================================ */

.sim-media{ position:relative; display:flex; justify-content:center; }

.sim-phone{
  position:relative;
  width:min(370px, 84vw);
  background:#000;
  border-radius:40px;
  padding:10px;
  box-shadow:0 0 0 2px #2a1116, 0 40px 90px rgba(0,0,0,.7), 0 0 70px rgba(255,45,79,.28);
}
.sim-phone::before{ /* punch-hole */
  content:""; position:absolute; top:17px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:#15151c; z-index:6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

.sim-screen{
  position:relative;
  width:100%;
  aspect-ratio:941/1672;
  border-radius:30px;
  overflow:hidden;
  background:#010104;
  container-type:inline-size;
}
.sim-plate{ width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }

.sim-overlay{ position:absolute; inset:0; pointer-events:none; }
.sim-overlay > *{ pointer-events:auto; }

/* ---------- status banner ---------- */
.sim-banner{
  position:absolute; left:50%; top:6.7%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:2.2cqw;
  padding:1.8cqw 4.4cqw; border-radius:2.6cqw;
  background:rgba(8,11,16,.66); backdrop-filter:blur(4px);
  border:0.55cqw solid var(--bc,#2fe06a);
  box-shadow:0 0 5cqw -1cqw var(--bc,#2fe06a), inset 0 0 4cqw -2cqw var(--bc,#2fe06a);
  white-space:nowrap; transition:border-color .35s, box-shadow .35s;
}
.sim-banner .sb-ic{ width:4.6cqw; height:4.6cqw; flex:0 0 auto; color:var(--bc,#2fe06a); }
.sim-banner .sb-ic svg{ width:100%; height:100%; }
.sim-banner .sb-text{
  font-family:var(--display); font-weight:600; font-size:3.5cqw;
  color:#fff; letter-spacing:.01em;
}

/* ---------- tap hint ---------- */
.sim-hint{
  position:absolute; left:50%; top:12.4%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:1.6cqw;
  font-family:var(--body); font-weight:500; font-size:3cqw;
  color:var(--bc,#2fe06a); white-space:nowrap; transition:color .35s;
}
.sim-hint svg{ width:3.6cqw; height:3.6cqw; }

/* ---------- equipment box ---------- */
.eq{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w);
  display:flex; align-items:center; justify-content:space-between; gap:1.4cqw;
  padding:2.1cqw 2.6cqw;
  border-radius:2.4cqw;
  background:rgba(9,12,17,.66);
  backdrop-filter:blur(3px);
  border:0.55cqw solid var(--c,#2fe06a);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 0 4cqw -1.4cqw var(--c,#2fe06a), inset 0 0 3cqw -2cqw var(--c,#2fe06a);
  transition:border-color .3s, box-shadow .3s, transform .12s;
  font-family:var(--display);
}
.eq:hover{ transform:scale(1.035); }
.eq.tapped{ transform:scale(.95); }

/* corner brackets */
.eq::before,.eq::after{
  content:""; position:absolute; width:4.2cqw; height:4.2cqw;
  border:0.62cqw solid var(--c,#2fe06a); pointer-events:none;
  filter:drop-shadow(0 0 1.4cqw var(--c,#2fe06a));
  transition:border-color .3s, filter .3s;
}
.eq::before{ top:-1.3cqw; left:-1.3cqw; border-right:0; border-bottom:0; border-radius:2.2cqw 0 0 0; }
.eq::after{ bottom:-1.3cqw; right:-1.3cqw; border-left:0; border-top:0; border-radius:0 0 2.2cqw 0; }

.eq-name{ font-weight:600; font-size:3.35cqw; line-height:1.1; letter-spacing:-.01em; text-align:left; }

/* round play/pause control */
.eq-btn{
  flex:0 0 auto; width:6.6cqw; height:6.6cqw; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 0.5cqw color-mix(in srgb, var(--c) 60%, transparent);
  color:#fff;
}
.eq-btn svg{ width:3.4cqw; height:3.4cqw; }
.eq.running .ico-play{ display:none; }
.eq.paused  .ico-pause{ display:none; }
.eq.fault   .ico-pause{ display:none; }

/* tap cursor affordance */
.eq-tap{
  position:absolute; right:-2.2cqw; bottom:-2.6cqw; width:5.2cqw; height:5.2cqw;
  color:#fff; opacity:.92; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.eq-tap svg{ width:100%; height:100%; }

/* stacked layout for big equipment (right column) */
.eq.stack{ flex-direction:column; align-items:center; gap:1.4cqw; padding-top:2.4cqw; padding-bottom:2.6cqw; }
.eq.stack .eq-name{ text-align:center; }

/* ---------- colour states ---------- */
.eq.running{ --c:#2fe06a; }
.eq.paused { --c:#ffb733; }
.eq.fault  { --c:#ff3b54; }

/* running gets a gentle breathing glow when system is live */
.sim-screen.live .eq.running{ animation:eqBreath 2.4s ease-in-out infinite; }
@keyframes eqBreath{
  0%,100%{ box-shadow:0 0 4cqw -1.4cqw var(--c), inset 0 0 3cqw -2cqw var(--c); }
  50%    { box-shadow:0 0 6.5cqw -1cqw var(--c), inset 0 0 4cqw -1.6cqw var(--c); }
}

/* simulate sweep highlight */
.eq.flow{ animation:eqFlow .6s ease-out; }
@keyframes eqFlow{
  0%  { transform:scale(1); }
  35% { transform:scale(1.12); box-shadow:0 0 8cqw -.5cqw var(--c), inset 0 0 5cqw -1cqw var(--c); }
  100%{ transform:scale(1); }
}

/* ---------- SIMULAR hit target (over baked button) ---------- */
.sim-play{
  position:absolute; left:48.6%; top:86.9%; transform:translate(-50%,-50%);
  width:13.5%; aspect-ratio:1; border-radius:50%;
  background:transparent; border:0; cursor:pointer; z-index:4;
  -webkit-tap-highlight-color:transparent;
}
.sim-play:focus-visible{ outline:2px solid var(--ice); outline-offset:2px; }
.sim-screen.simulating .sim-play{ pointer-events:none; }

/* ripple shown on the SIMULAR press */
.sim-play .ring{
  position:absolute; inset:0; border-radius:50%; border:2px solid #fff; opacity:0;
}
.sim-screen.simulating .sim-play .ring{ animation:simRing 1s ease-out; }
@keyframes simRing{ 0%{ opacity:.7; transform:scale(.7);} 100%{ opacity:0; transform:scale(2.1);} }

/* refrigerant pill (R22) — informational badge over baked selector area is left baked;
   no extra styles needed. */

@media (prefers-reduced-motion:reduce){
  .sim-screen.live .eq.running{ animation:none; }
  .eq.flow{ animation:none; }
  .sim-screen.simulating .sim-play .ring{ animation:none; }
}