/* =============================================================
   voice.css  –  Animations & voice UI styles
   Kept in a static file so @keyframes is valid CSS
   (avoids CS0103 / CSS041 warnings in .cshtml Razor files)
   ============================================================= */

/* ── Floating mic button pulse (Layout) ── */
@keyframes micPulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(108,99,255,.5); }
    50%      { box-shadow: 0 0 0 14px rgba(108,99,255,0);  }
}

/* ── Voice overlay slide-up (Layout) ── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Ripple rings (Create page) ── */
@keyframes ripple {
    0%   { opacity: .8; transform: translateY(-50%) scale(.8);  }
    100% { opacity: 0;  transform: translateY(-50%) scale(1.4); }
}

/* ── Ring elements ── */
.ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(108,99,255,.35);
    animation: ripple 2s infinite ease-out;
}
.r1 { width:60px;  height:60px;  top:50%; left:26px; transform:translateY(-50%); animation-delay:0s;  }
.r2 { width:90px;  height:90px;  top:50%; left:11px; transform:translateY(-50%); animation-delay:.5s; }
.r3 { width:120px; height:120px; top:50%; left:-4px; transform:translateY(-50%); animation-delay:1s;  }

/* ── Voice panel border states (Create page) ── */
#voicePanel.wake-mode   { border-color: #ffd166 !important; }
#voicePanel.cmd-mode    { border-color: #6c63ff !important; }
#voicePanel.parsed-mode { border-color: #00d4a1 !important; }
#voicePanel.error-mode  { border-color: #ff4d6d !important; }