/* Home page: scoped styles for the voice-first simulator
   Note: Prefixed with .home-sim to avoid colliding with global styles */

.home-sim .telemetry{position:static;width:100%;background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px) saturate(1.1);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:.75rem;margin-top:.5rem}

.home-sim .telemetry__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.home-sim .telemetry .tag{font-size:.7rem;opacity:.7;border:1px solid rgba(255,255,255,.12);padding:.1rem .35rem;border-radius:.35rem}

.home-sim .telemetry__grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.home-sim .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:.6rem;padding:.6rem;box-shadow:none}
.home-sim .card h4{font-size:.9rem;margin:0 0 .4rem}

.home-sim .pill{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;margin:.35rem 0}
.home-sim .meter{height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.home-sim .meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3dd7ff,#6cffb4)}
.home-sim .meter--lg{height:12px}

.home-sim .kv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.4rem;margin:.3rem 0}
.home-sim .kv em{opacity:.6;font-style:normal;font-size:.75rem}

.home-sim .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0}
.home-sim .chips li{font-size:.75rem;opacity:.65;border:1px solid rgba(255,255,255,.1);padding:.12rem .4rem;border-radius:.4rem}
.home-sim .chips li.on{opacity:1;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}

.home-sim .spark{width:100%;height:auto;display:block;margin-top:.35rem;opacity:.95}

.home-sim-cta{margin-top:var(--space-6);display:flex;justify-content:flex-start}
.home-sim-cta .btn{min-width:220px}

/* Caption UI (mini phone-call HUD + two-line captions) */
.home-sim .caption-ui{position:relative;z-index:2;max-width:820px;margin:0;--cc-line-height:1.35;--cc-font-size:1.15rem}
@media (min-width:1024px){ .home-sim .caption-ui{ margin-left: 0 } }
.home-sim .call-sim.stage{ max-width: 860px; }
.home-sim .caption-ui__hud{display:flex;gap:.5rem;align-items:center;justify-content:flex-start;padding:.4rem .6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:.6rem .6rem 0 0;font-size:.86rem}
.home-sim .dot{width:.5rem;height:.5rem;border-radius:50%}
.home-sim .dot--green{background:#2ecc71}
.home-sim .sep{opacity:.5}
.home-sim .hud__cc{margin-left:auto;font-size:.7rem;opacity:.65;border:1px solid rgba(255,255,255,.25);padding:.05rem .35rem;border-radius:.35rem;letter-spacing:.04em}
.home-sim .cc2{position:relative;background:rgba(0,0,0,.55);backdrop-filter:blur(2px) saturate(1.1);border:1px solid rgba(255,255,255,.08);border-top:0;border-radius:0 0 .6rem .6rem;padding:.65rem .8rem 1.25rem}
.home-sim .cc2__line{display:flex;gap:.5rem;align-items:baseline;margin:.25rem 0}
.home-sim .cc2__prev{opacity:.65;filter:saturate(.9)}
.home-sim .tag{font-size:.72rem;border:1px solid rgba(255,255,255,.2);border-radius:.4rem;padding:.05rem .35rem}
.home-sim .tag--echo{opacity:.9}
.home-sim #cc-curr,.home-sim #cc-prev{font-size:var(--cc-font-size);line-height:var(--cc-line-height)}
.home-sim .caret{display:inline-block;width:.6ch;height:1.05em;vertical-align:baseline;opacity:.7;background:currentColor;animation:blink 1s steps(1,end) infinite;margin-left:.1ch}
@keyframes blink{50%{opacity:0}}
@keyframes homeDotFlickerBlue{
  0%{ opacity:.65; box-shadow:0 0 4px rgba(56,189,248,.4); }
  45%{ opacity:1; box-shadow:0 0 10px rgba(125,211,252,.55); }
  55%{ opacity:.45; box-shadow:0 0 3px rgba(56,189,248,.2); }
  100%{ opacity:.85; box-shadow:0 0 8px rgba(56,189,248,.45); }
}
@keyframes homeDotPulseGreen{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(16,185,129,.45); }
  50%{ transform:scale(1.15); box-shadow:0 0 0 10px rgba(16,185,129,0); }
}
@keyframes homeDotPulseAmber{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,158,11,.4); }
  50%{ transform:scale(1.12); box-shadow:0 0 0 9px rgba(245,158,11,0); }
}
.home-sim .caption-ui__hud .dot{
  position:relative;
  box-shadow:0 0 0 0 transparent;
  transform-origin:center;
  animation:none;
}
.home-sim .caption-ui__hud .dot--idle{
  background:#38bdf8;
  animation:homeDotFlickerBlue 1.15s linear infinite;
}
.home-sim .caption-ui__hud .dot--playing{
  background:#10b981;
  animation:homeDotPulseGreen 1.8s ease-in-out infinite;
}
.home-sim .caption-ui__hud .dot--paused{
  background:#f59e0b;
  animation:homeDotPulseAmber 1.6s ease-in-out infinite;
}
/* Min caption area height: 8 lines on mobile, 5 on desktop */
.home-sim .cc2{line-height:var(--cc-line-height);min-height:calc(var(--cc-line-height) * var(--cc-font-size) * 8 + 1.2rem)}
@media (min-width:960px){ .home-sim .cc2{ min-height:calc(var(--cc-line-height) * var(--cc-font-size) * 5 + 1.2rem) } }
.home-sim .cc2__meta{position:absolute;left:.8rem;right:.8rem;bottom:.4rem;margin-top:0;font-size:.74rem;opacity:.7}
.home-sim .caption-ui__controls{display:grid;gap:.5rem;align-items:center;grid-template-columns:1fr; margin-top:.5rem}
@media (min-width: 780px){ .home-sim .caption-ui__controls{ grid-template-columns: 1fr auto } }
.home-sim .caption-ui__controls .btn{min-height:36px}
.home-sim .caption-ui__controls .btn:focus{ outline-offset:-2px }
.home-sim .modes{display:flex;gap:.4rem;flex-wrap:wrap}
/* Ensure correct visibility for mobile/desktop variants */
.home-sim .modes--mobile{ display:flex; margin-bottom:.5rem }
.home-sim .modes--desktop{ display:none }
@media (min-width:960px){
  .home-sim .modes--mobile{ display:none }
  .home-sim .modes--desktop{ display:flex }
}
.home-sim .modes .tab{ background: transparent; color: var(--text); border:1px solid var(--border); border-radius:.4rem; padding:.4rem .6rem; }
.home-sim .modes .tab.active, .home-sim .modes .tab[aria-selected="true"]{ background: rgba(20,184,166,.12); border-color: var(--brand); }

/* Reduce gap between call UI and telemetry */
.home-sim .telemetry{ margin-top:.4rem }

/* Waveform canvas (not used on home, safe to keep for parity) */
.home-sim .wave{ display:block; width:100%; height:120px; color: rgba(108,255,180,.9); }
@media (min-width:960px){ .home-sim .wave{ height:140px } }