/* ===== ASCE Cinematic Call Visualizer — holographic, reactive (idle → alive) ===== */
.acv-panel {
    position: relative;
    background: radial-gradient(ellipse at 50% 0%, rgba(20,40,60,0.9), rgba(8,10,14,0.96));
    border: 1px solid rgba(90,215,255,0.30);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.5rem;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(40,140,200,0.18), inset 0 0 60px rgba(0,0,0,0.5);
    font-family: 'Arial', 'Segoe UI', sans-serif;
    color: #eaf6ff;
}
.acv-panel * { box-sizing: border-box; }

/* holographic scanline + flicker overlay (imperfections = realism) */
.acv-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: 16px;
    background: repeating-linear-gradient(0deg, rgba(120,220,255,0.045) 0px, rgba(120,220,255,0.045) 1px, transparent 2px, transparent 4px);
    mix-blend-mode: screen; animation: acvScan 7s linear infinite, acvFlicker 3.6s steps(2,end) infinite;
}
@keyframes acvScan { from { background-position-y: 0; } to { background-position-y: 64px; } }
@keyframes acvFlicker { 0%,100% { opacity: .9; } 48% { opacity: .8; } 50% { opacity: 1; } 52% { opacity: .85; } }

.acv-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; position:relative; z-index:5; }
.acv-title { font-weight:900; letter-spacing:2px; text-transform:uppercase; font-size:.95rem; color:#7fdcff; text-shadow:0 0 14px rgba(90,215,255,.5); }
.acv-sub { font-size:.72rem; letter-spacing:1px; color:#9fb6c6; text-transform:uppercase; }

/* the live stage */
.acv-stage { position:relative; height:170px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg, rgba(10,22,32,.7), rgba(6,10,14,.9)); border:1px solid rgba(90,215,255,.15); z-index:5; }
.acv-canvas { width:100%; height:100%; display:block; }
.acv-prompt {
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events:none; text-align:center; transition:opacity .4s ease;
}
.acv-prompt .big { font-size:1.05rem; font-weight:800; letter-spacing:1px; color:#bfe9ff; text-shadow:0 0 16px rgba(90,215,255,.6); }
.acv-prompt .small { font-size:.78rem; color:#8fb0c2; margin-top:.25rem; }
.acv-stage.live .acv-prompt { opacity:0; }

/* controls */
.acv-controls { display:flex; gap:.6rem; justify-content:center; margin-top:.85rem; position:relative; z-index:5; }
.acv-btn {
    border:none; cursor:pointer; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; font-size:.85rem;
    padding:12px 26px; border-radius:8px; transition:all .2s ease; -webkit-tap-highlight-color:transparent;
}
.acv-btn.go { background:linear-gradient(135deg,#19c2ff,#0a78b0); color:#03121c; box-shadow:0 4px 22px rgba(40,160,220,.5); }
.acv-btn.go:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(40,160,220,.7); }
.acv-btn.stop { background:linear-gradient(135deg,#ff5a3c,#b81f0c); color:#fff; box-shadow:0 4px 22px rgba(220,60,30,.5); }
.acv-btn[disabled] { opacity:.4; cursor:not-allowed; transform:none !important; }

/* result */
.acv-result { margin-top:1rem; position:relative; z-index:5; opacity:0; max-height:0; overflow:hidden; transition:opacity .5s ease, max-height .5s ease; }
.acv-result.show { opacity:1; max-height:640px; }
.acv-resgrid { display:grid; grid-template-columns: 200px 1fr; gap:1.25rem; align-items:center; }
@media (max-width:560px){ .acv-resgrid { grid-template-columns:1fr; } }

.acv-radar-wrap { position:relative; }
.acv-score-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.acv-score-num { font-size:2.6rem; font-weight:900; line-height:1; color:#fff; text-shadow:0 0 22px rgba(90,215,255,.7); }
.acv-score-lbl { font-size:.62rem; letter-spacing:2px; color:#8fb0c2; text-transform:uppercase; margin-top:2px; }

.acv-readout { font-size:.9rem; }
.acv-pill { display:inline-block; font-weight:800; letter-spacing:1px; text-transform:uppercase; font-size:.72rem; padding:5px 13px; border-radius:30px; margin-bottom:.6rem; }
.acv-pill.authentic { background:rgba(0,255,120,.14); color:#5dffa0; border:1px solid rgba(0,255,120,.4); }
.acv-pill.fake { background:rgba(255,90,60,.14); color:#ff8a72; border:1px solid rgba(255,90,60,.45); }
.acv-pill.weak { background:rgba(255,200,40,.12); color:#ffd24d; border:1px solid rgba(255,200,40,.4); }
.acv-line { color:#cfe6f2; margin:.25rem 0; }
.acv-line b { color:#fff; }
.acv-response { margin-top:.7rem; font-size:1rem; font-weight:800; color:#bfe9ff; text-shadow:0 0 12px rgba(90,215,255,.45); }

@media (prefers-reduced-motion: reduce) {
    .acv-panel::after { animation:none; }
}
