/* Voice messages and calls (assets/comms.js) */

/* ---------- Voice bubble ---------- */
.xn-voice { display: inline-flex; align-items: center; gap: 9px; min-width: 180px; max-width: 260px; padding: 2px 2px; }
.xn-voice audio { display: none; }
.xn-voice-play {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .22); color: #fff; display: grid; place-items: center;
}
.chat-bubble:not([style*="bubble-out"]) .xn-voice-play { background: var(--xn-accent, #8b7bff); }
.xn-voice-play svg { width: 18px; height: 18px; fill: currentColor; }
.xn-voice-play .xn-ic-pause { display: none; }
.xn-voice.is-playing .xn-voice-play .xn-ic-play { display: none; }
.xn-voice.is-playing .xn-voice-play .xn-ic-pause { display: block; }
.xn-voice-track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); overflow: hidden; min-width: 60px; }
.chat-bubble:not([style*="bubble-out"]) .xn-voice-track { background: var(--border-color); }
.xn-voice-track i { display: block; height: 100%; width: 0; background: currentColor; }
.xn-voice-time { flex: none; font-size: 12px; opacity: .85; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }

/* ---------- Composer mic button ---------- */
.xn-mic-btn {
    width: 36px; height: 36px; border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
    transition: color .2s, transform .2s;
}
.xn-mic-btn:hover { color: var(--xn-accent); transform: scale(1.1); }
.xn-mic-btn.is-recording { color: #ef4444; animation: xn-mic-pulse 1s ease-in-out infinite; }
@keyframes xn-mic-pulse { 50% { opacity: .4; } }

.xn-recbar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
    display: flex; align-items: center; gap: 10px; padding: 0 14px;
    background: var(--bg-color); border-top: 1px solid var(--border-color);
}
.xn-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; animation: xn-mic-pulse 1s infinite; flex: none; }
.xn-rec-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-main); }
.xn-rec-hint { flex: 1; color: var(--text-muted); font-size: 13px; }
.xn-recbar button { border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.xn-rec-cancel { background: var(--input-bg); color: var(--text-muted); }
.xn-rec-send { background: var(--xn-accent, #8b7bff); color: #fff; }
.chat-input-bar { position: relative; }

/* ---------- Call buttons in header ---------- */
.xn-call-btns { display: flex; gap: 6px; }
.xn-call-btn {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-main); cursor: pointer; display: grid; place-items: center;
    transition: background-color .15s, color .15s, transform .1s;
}
.xn-call-btn svg { width: 19px; height: 19px; }
.xn-call-btn:hover { background: var(--xn-accent-soft, rgba(139,123,255,.14)); color: var(--xn-accent-text, #b8adff); }
.xn-call-btn:active { transform: scale(.94); }

/* ---------- Call overlay ---------- */
.xn-call-overlay {
    position: fixed; inset: 0; z-index: 1000005; display: none; align-items: center; justify-content: center;
    background: rgba(2, 2, 6, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.xn-call-card {
    position: relative; width: min(440px, 94vw); height: min(78vh, 720px);
    border-radius: 24px; overflow: hidden; background: #0b0b12;
    border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column;
}
.xn-call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0b12; display: none; }
.xn-call-overlay.is-video .xn-call-remote { display: block; }
.xn-call-local {
    position: absolute; right: 12px; top: 12px; width: 108px; height: 150px; object-fit: cover;
    border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: #000; z-index: 3; display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.xn-call-top {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 56px 20px 0; text-align: center; color: #fff; flex: 1;
}
.xn-call-overlay.is-video .xn-call-top { position: absolute; top: 0; left: 0; right: 0; padding-top: 24px; flex: none; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.xn-call-ava, .xn-call-ava img, .xn-call-letter { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.xn-call-letter { display: grid; place-items: center; background: var(--xn-accent, #8b7bff); font-size: 40px; font-weight: 800; color: #fff; }
.xn-call-overlay.is-video .xn-call-ava { width: 56px; height: 56px; }
.xn-call-who b { display: block; font-size: 22px; font-weight: 800; }
.xn-call-who small { color: rgba(255,255,255,.7); font-size: 14px; }
.xn-call-actions {
    position: relative; z-index: 4; display: flex; gap: 16px; align-items: center; justify-content: center;
    padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.xn-call-overlay.is-video .xn-call-actions { position: absolute; left: 0; right: 0; bottom: 0; }
.xn-call-actions button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.xn-call-accept, .xn-call-hangup, .xn-call-mute, .xn-call-cam {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
}
.xn-call-accept { background: #10b981; color: #fff; }
.xn-call-hangup { background: #ef4444; color: #fff; width: auto; min-width: 60px; height: 52px; padding: 0 22px; border-radius: 999px; font-size: 15px; }
.xn-call-overlay.is-video .xn-call-hangup { width: 60px; padding: 0; border-radius: 50%; }
.xn-call-mute, .xn-call-cam { background: rgba(255,255,255,.16); color: #fff; }
.xn-call-mute.is-off, .xn-call-cam.is-off { background: #fff; color: #111; }

@media (prefers-reduced-motion: reduce) { .xn-mic-btn.is-recording, .xn-rec-dot { animation: none; } }