/* ==========================================================================
   css/components/voice-messages.css
   Split from app.html (build 2026.10.08.9-beta), original lines 3838-3878.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Voice messages (waveform pill player) ----------------------- */
.vmsg { display:inline-flex; align-items:center; gap:9px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px 7px 8px; margin-top:4px; max-width:100%; }
.vmsg audio { display:none; }
.vmsg-play { width:34px; height:34px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vmsg-play:hover { filter:brightness(1.12); }
.vmsg-wave { display:flex; align-items:center; gap:2px; height:26px; cursor:pointer; }
.vmsg-wave span { width:3px; border-radius:2px; background:var(--text-muted); opacity:.55; transition:background .12s; }
.vmsg-wave span.on { background:var(--accent); opacity:1; }
.vmsg-time { font-size:12px; font-weight:600; color:var(--text-secondary); min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
.vmsg-rate { border:none; background:var(--bg-surface); color:var(--text-secondary); font-size:11px; font-weight:800; border-radius:6px; padding:3px 7px; cursor:pointer; }
.vmsg-rate:hover { color:var(--text-primary); }
.vmsg-vol { border:none; background:none; color:var(--text-secondary); cursor:pointer; display:flex; padding:2px; }
.vmsg-vol:hover { color:var(--text-primary); }
/* Record Voice Message modal */
.vmm-overlay { position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; animation:overlay-in .15s ease; }
.vmm { width:420px; max-width:94vw; background:var(--bg-elevated,#1a1c22); border:1px solid var(--border-strong); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.5); padding:20px 22px; animation:modal-pop .22s var(--ease-out,ease); }
.vmm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.vmm-title { font-family:var(--font-display,'Space Grotesk',sans-serif); font-size:17px; font-weight:800; color:var(--text-primary); }
.vmm-x { background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer; padding:4px 6px; border-radius:6px; }
.vmm-x:hover { color:var(--text-primary); background:var(--bg-hover); }
.vmm-actions { display:flex; gap:10px; margin-bottom:18px; }
.vmm-btn { flex:1; padding:11px; border-radius:10px; border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-primary); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:filter .12s,background .12s; }
.vmm-btn:hover { background:var(--bg-hover); }
.vmm-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.vmm-btn.primary:hover { filter:brightness(1.1); }
.vmm-btn.primary.rec { background:#ed4245; border-color:#ed4245; animation:vmGlow 1.3s ease-in-out infinite; }
.vmm-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.vmm-preview { margin-bottom:18px; }
.vmm-preview .vmsg { width:100%; box-sizing:border-box; }
.vmm-preview .vmsg-empty { opacity:.6; }
.vmm-preview .vmsg-empty .vmsg-play { background:var(--bg-surface); }
.vmm-send { width:100%; padding:12px; border-radius:10px; border:none; background:var(--accent); color:#fff; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; }
.vmm-send:disabled { opacity:.5; cursor:not-allowed; }
.vmm-send:not(:disabled):hover { filter:brightness(1.1); }
/* Recording indicator: a glowing ring, NOT a size change (the button growing was jarring). */
@keyframes vmGlow { 0%,100% { box-shadow:0 0 0 0 rgba(237,66,69,.5); } 50% { box-shadow:0 0 0 6px rgba(237,66,69,0); } }
.vmsg-recording { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; }
.vmsg-recdot { width:9px; height:9px; border-radius:50%; background:#ed4245; flex-shrink:0; animation:rec-blink 1s steps(2,start) infinite; }
.vmsg-recording .vmsg-wave { flex:1; }
.vmsg-recording .vmsg-wave span { background:var(--accent); opacity:.9; }