/* Voice Chat - Full Screen Session */

/* Session time-limit countdown badge + notice (colors come from Bootstrap
   .badge / .alert classes; layout only here). */
.voice-timer-wrap {
    margin-top: 0.75rem;
}

.voice-session-notice {
    max-width: 520px;
    margin: 0 auto 1rem;
    text-align: center;
}

.voice-session-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}

/* Client Avatar */
.voice-avatar-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.voice-avatar-ring {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.2);
    transition: border-color 0.3s ease;
}

.voice-avatar-ring img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
}

.voice-avatar-ring .avatar-placeholder {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Additional-speaker session: extra sims fanned in an arc above the central ring,
   each just touching it and fully visible. Positions are computed inline (percentage
   of the ring box) so the mobile ring resize keeps the fan aligned. */
.voice-avatar-wrap {
    position: relative;
}

/* Reserve headroom so the fan doesn't overlap whatever sits above the avatar. */
.voice-avatar-wrap.has-fan {
    padding-top: 100px;
}

.voice-avatar-wrap .voice-avatar-ring {
    position: relative;
    z-index: 2;
}

.voice-avatar-extra {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 3; /* fully visible above the ring */
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(var(--bs-white-rgb), 0.25);
    background: rgba(var(--bs-white-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-avatar-extra img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-avatar-extra .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(var(--bs-white-rgb), 0.5);
}

/* Group session: all sims the same size, slightly overlapping. */
.voice-avatar-group {
    display: flex;
    align-items: center;
}

.voice-avatar-group .voice-avatar-ring-sm {
    width: 175px;
    height: 175px;
    position: relative;
}

.voice-avatar-group .voice-avatar-ring-sm + .voice-avatar-ring-sm {
    margin-left: -28px;
}

.voice-avatar-group .voice-avatar-ring-sm img,
.voice-avatar-group .voice-avatar-ring-sm .avatar-placeholder {
    width: 160px;
    height: 160px;
    font-size: 2.5rem;
}

.voice-client-name {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.voice-phase-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

/* State indicator animations */
.voice-avatar-ring.state-listening {
    border-color: #4caf50;
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
    animation: pulse-green 2s infinite;
}

.voice-avatar-ring.state-processing {
    border-color: #ff9800;
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    animation: pulse-yellow 1.5s infinite;
}

.voice-avatar-ring.state-speaking {
    border-color: #2196f3;
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
    animation: pulse-blue 1.8s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    70% { box-shadow: 0 0 0 20px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes pulse-yellow {
    0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.5); }
    70% { box-shadow: 0 0 0 20px rgba(255, 152, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); }
}

@keyframes pulse-blue {
    0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.5); }
    70% { box-shadow: 0 0 0 20px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

/* Status pill — explicit indicator of session state. Solid background so
   nothing passing behind it (waveform ring, ripples, etc.) can smear the
   text. Color shifts with state to make "Listening" unmistakable. */
.voice-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    min-height: 2.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1100;
}

.voice-status-label.is-idle {
    visibility: hidden;
}

.voice-status-label.is-listening {
    background: #4caf50;
    border-color: #4caf50;
    color: #fff;
}

.voice-status-label.is-processing {
    background: #ff9800;
    border-color: #ff9800;
    color: #fff;
}

.voice-status-label.is-speaking {
    background: #2196f3;
    border-color: #2196f3;
    color: #fff;
}

.voice-status-label .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: status-dot-pulse 1.1s ease-in-out infinite;
}

@keyframes status-dot-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Live STT caption — shows what the user is currently saying */
.voice-interim-caption {
    max-width: min(720px, 90vw);
    margin: -1rem auto 2rem auto;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    animation: caption-fade-in 0.15s ease-out;
}

@keyframes caption-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Bottom control bar — three-column grid so the mic wrap stays exactly
   centered on the page even when the side controls (toggles / end button)
   change width. */
.voice-control-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 2rem;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1001;
}

/* Side controls hug the center column rather than the screen edges, so
   they stay visually grouped with the mic on wide screens. */
.voice-control-bar > .voice-toggles { justify-self: end; }
.voice-control-bar > .voice-mic-wrap { justify-self: center; }
.voice-control-bar > .voice-end-controls { justify-self: start; }

.voice-end-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Pause/resume button — same dimensions as end button so the pair is visually balanced */
.voice-pause-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--bs-warning, #ffc107);
    background: transparent;
    color: var(--bs-warning, #ffc107);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-pause-btn:hover:not(:disabled) {
    background: var(--bs-warning, #ffc107);
    color: var(--bs-dark, #000);
}

.voice-pause-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.voice-pause-btn.is-paused {
    background: var(--bs-warning, #ffc107);
    color: var(--bs-dark, #000);
}

.voice-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.voice-toggles .form-check-input {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.voice-toggles .form-check-input:checked {
    background-color: #4caf50;
    border-color: #4caf50;
}

/* Mic button */
.voice-mic-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-mic-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.voice-mic-btn.active {
    background: #f44336;
    border-color: #f44336;
}

/* The mic button sits inside a wrapper so a sibling canvas can render
   a live waveform ring around it without affecting layout. */
.voice-mic-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
}

.voice-mic-wrap .voice-mic-btn {
    position: relative;
    z-index: 1;
}

.voice-mic-viz {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.voice-mic-viz.active {
    opacity: 1;
}

/* End session button */
.voice-end-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #f44336;
    background: transparent;
    color: #f44336;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-end-btn:hover {
    background: #f44336;
    color: #fff;
}

/* Admin transcript panel */
.voice-transcript-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-transcript-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.voice-transcript-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.voice-transcript-msg {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.voice-transcript-msg.user-msg {
    background: rgba(76, 175, 80, 0.15);
    border-left: 3px solid #4caf50;
}

.voice-transcript-msg.ai-msg {
    background: rgba(33, 150, 243, 0.15);
    border-left: 3px solid #2196f3;
}

.voice-transcript-msg .msg-role {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.voice-transcript-msg .msg-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    float: right;
}

.voice-transcript-msg .msg-text {
    color: rgba(255, 255, 255, 0.85);
}

/* Multi-speaker: per-speaker name colors in the live transcript (speaker-0 = primary) */
.voice-transcript-msg .msg-text .speaker-name {
    color: var(--bs-primary);
}

.voice-transcript-msg .msg-text .speaker-name.speaker-1 {
    color: var(--bs-info);
}

.voice-transcript-msg .msg-text .speaker-name.speaker-2 {
    color: var(--bs-success);
}

.voice-transcript-msg .msg-text .speaker-name.speaker-3 {
    color: var(--bs-warning);
}

/* Responsive */
@media (max-width: 768px) {
    .voice-avatar-ring {
        width: 200px;
        height: 200px;
    }

    .voice-avatar-ring img,
    .voice-avatar-ring .avatar-placeholder {
        width: 180px;
        height: 180px;
    }

    .voice-avatar-group .voice-avatar-ring-sm {
        width: 120px;
        height: 120px;
    }

    .voice-avatar-group .voice-avatar-ring-sm + .voice-avatar-ring-sm {
        margin-left: -20px;
    }

    .voice-avatar-group .voice-avatar-ring-sm img,
    .voice-avatar-group .voice-avatar-ring-sm .avatar-placeholder {
        width: 108px;
        height: 108px;
        font-size: 1.75rem;
    }

    .voice-avatar-extra {
        width: 64px;
        height: 64px;
    }

    .voice-avatar-wrap.has-fan {
        padding-top: 70px;
    }

    .voice-client-name {
        font-size: 1.25rem;
    }

    .voice-transcript-panel {
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 80px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .voice-control-bar {
        column-gap: 1rem;
        padding: 1rem;
    }

    .voice-mic-btn {
        width: 60px;
        height: 60px;
        font-size: 1.3rem;
    }

    .voice-mic-wrap {
        width: 170px;
        height: 170px;
    }

    .voice-end-btn,
    .voice-pause-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }

    .voice-end-controls {
        gap: 0.5rem;
    }
}