/* ============================================================
   Voice Agent — Avatar & Controls
   Styles for the real-time voice conversation UI including the
   avatar selector row, animated SVG/photo avatar with state ring,
   audio visualizer bars, state label, thinking dots, call controls
   (start / end / mute), timer, and responsive breakpoints.
   ============================================================ */

/* ── Container ─────────────────────────────────────────
   Outer wrapper for the entire voice agent panel.
   Switches background gradient when a session is active. */
.voice-agent-container {
    display: flex; flex-direction: column; align-items: center;
    padding: 16px; background: linear-gradient(135deg, #f0f4f8, #e8eef5);
    border-radius: 16px; margin-bottom: 12px;
    border: 1px solid var(--border, #e5e7eb);
    transition: all 0.3s ease;
}
.voice-agent-container.active {
    background: linear-gradient(135deg, #e8f5e9, #e3f2fd);
    border-color: #4caf50;
}

/* ── Avatar Selector ────────────────────────────────────
   Horizontal row of circular thumbnails the user clicks to
   choose which avatar persona to display during the call. */
.avatar-selector {
    display: flex; gap: 6px; margin-bottom: 10px;
    justify-content: center; flex-wrap: wrap;
}
.avatar-thumb {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid #e5e7eb; background: #f8f9fa;
    cursor: pointer; padding: 0; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.avatar-thumb img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.avatar-thumb:hover { border-color: #003366; transform: scale(1.1); }
.avatar-thumb.selected { border-color: #003366; box-shadow: 0 0 0 2px rgba(0,51,102,0.3); }

/* ── Avatar ─────────────────────────────────────────────
   Main avatar container (140x140 px). Holds either an inline SVG
   character or a photo avatar. State classes (idle, listening,
   thinking, speaking) drive animations on child elements. */
.voice-avatar {
    position: relative; width: 140px; height: 140px;
    margin-bottom: 12px;
}
.voice-avatar svg { width: 100%; height: 100%; }

/* ── Photo Avatar ───────────────────────────────────────
   Circular photo wrapper used when a real image is selected
   instead of the SVG character. Gets a coloured box-shadow glow
   while speaking (blue) or listening (green). */
.avatar-photo-wrap {
    position: relative; width: 100%; height: 100%;
    border-radius: 50%; overflow: hidden;
}
.avatar-photo {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 50%;
}
/* ── Audio Visualizer Bars ──────────────────────────────
   Five small vertical bars beneath the photo avatar that bounce
   when the AI is speaking. Each bar has a staggered animation-delay
   for a natural equaliser effect. Hidden (opacity 0) until the
   .active class is applied by JS. */
.audio-visualizer {
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 3px; align-items: flex-end;
    height: 20px; opacity: 0; transition: opacity 0.3s;
}
.audio-visualizer.active { opacity: 1; }
.viz-bar {
    width: 4px; background: linear-gradient(to top, #4caf50, #81c784);
    border-radius: 2px; transition: height 0.1s ease;
    animation: viz-bounce 0.6s ease-in-out infinite alternate;
}
.viz-bar:nth-child(1) { animation-delay: 0s; }
.viz-bar:nth-child(2) { animation-delay: 0.1s; }
.viz-bar:nth-child(3) { animation-delay: 0.2s; }
.viz-bar:nth-child(4) { animation-delay: 0.15s; }
.viz-bar:nth-child(5) { animation-delay: 0.05s; }

/* viz-bounce: vertical scale oscillation for equaliser bars */
@keyframes viz-bounce {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

/* Speaking / listening glow effect applied to photo avatar */
.voice-avatar.speaking .avatar-photo-wrap {
    box-shadow: 0 0 20px rgba(33,150,243,0.4);
}
.voice-avatar.listening .avatar-photo-wrap {
    box-shadow: 0 0 15px rgba(76,175,80,0.3);
}

/* ── State Ring ─────────────────────────────────────────
   Circular border ring positioned just outside the avatar.
   Changes colour and pulse speed to reflect the current voice
   agent state: grey (idle), green (listening), orange (thinking),
   blue (speaking). Uses the pulse-ring keyframe animation. */
.avatar-ring {
    position: absolute; inset: -4px;
    border: 3px solid transparent; border-radius: 50%;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.voice-avatar.idle .avatar-ring { border-color: #cbd5e1; }
.voice-avatar.listening .avatar-ring {
    border-color: #4caf50;
    animation: pulse-ring 1.5s ease-in-out infinite;
}
.voice-avatar.thinking .avatar-ring {
    border-color: #ff9800;
    animation: pulse-ring 1s ease-in-out infinite;
}
.voice-avatar.speaking .avatar-ring {
    border-color: #2196f3;
    animation: pulse-ring 0.8s ease-in-out infinite;
}

/* ── SVG Avatar Animations ─────────────────────────────
   Subtle breathing, eye-blink, and mouth animations for the
   inline SVG character avatar. Mouth transform is driven by
   JS audio amplitude when speaking; CSS handles idle states. */
/* Avatar body breathing */
.avatar-body { transition: transform 0.3s; }
.voice-avatar.idle .avatar-body { animation: breathe 3s ease-in-out infinite; }

/* Eye blink */
.avatar-eyes { transform-origin: center; animation: blink 4s ease-in-out infinite; }

/* Mouth -- scaleY driven by JS audio amplitude while speaking; CSS transitions smooth it */
.avatar-mouth { transition: transform 0.05s ease; transform-origin: center; }

@keyframes breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}
@keyframes blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(76,175,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}

/* ── State Label ───────────────────────────────────── */
.voice-state-label {
    font-size: 13px; font-weight: 600; color: var(--text-secondary, #6b7280);
    margin-bottom: 12px; min-height: 20px;
    display: flex; align-items: center; gap: 6px;
}
.voice-state-label .state-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
}
.voice-state-label .state-dot.idle { background: #94a3b8; }
.voice-state-label .state-dot.listening { background: #4caf50; animation: pulse-dot 1s infinite; }
.voice-state-label .state-dot.thinking { background: #ff9800; animation: pulse-dot 0.7s infinite; }
.voice-state-label .state-dot.speaking { background: #2196f3; animation: pulse-dot 0.5s infinite; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Thinking Dots ─────────────────────────────────── */
.thinking-dots {
    display: none; gap: 4px;
}
.voice-avatar.thinking .thinking-dots { display: flex; }
.thinking-dots span {
    width: 6px; height: 6px; background: #ff9800;
    border-radius: 50%; animation: dot-bounce 1.4s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

/* ── Controls ──────────────────────────────────────────
   Row of action buttons: Start call (navy pill), End call (red pill),
   and Mute toggle (circular icon button). Disabled state dims the
   start button; muted state turns the mute button red. */
.voice-controls {
    display: flex; align-items: center; gap: 10px;
}
.btn-voice-start {
    background: #003366; color: #fff; border: none;
    padding: 10px 24px; border-radius: 24px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: background 0.2s;
}
.btn-voice-start:hover { background: #004488; }
.btn-voice-start:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-voice-end {
    background: #dc2626; color: #fff; border: none;
    padding: 10px 24px; border-radius: 24px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: background 0.2s;
}
.btn-voice-end:hover { background: #b91c1c; }

.btn-voice-mute {
    background: none; border: 1px solid var(--border, #e5e7eb);
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.btn-voice-mute:hover { background: #f1f5f9; }
.btn-voice-mute.muted { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Timer ─────────────────────────────────────────────
   Elapsed call duration shown below the controls.
   Uses tabular-nums for fixed-width digit rendering. */
.voice-timer {
    font-size: 12px; color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* ── Start Prompt ──────────────────────────────────────
   Instructional text shown before a voice session starts. */
.voice-start-prompt {
    text-align: center;
}
.voice-start-prompt p {
    font-size: 13px; color: var(--text-secondary, #6b7280);
    margin: 8px 0 0;
}

/* ── Voice Mode Banner ─────────────────────────────────
   Green banner shown inside the chat input area while a live
   voice session is active, reminding the user they are in voice mode. */
.voice-mode-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: #e8f5e9; border: 1px solid #4caf50;
    border-radius: 12px; margin-bottom: 6px; font-size: 13px; color: #2e7d32;
}

/* ── Voice & Language Options ──────────────────────────
   Row of voice/language selectors shown below the avatar
   before the session starts. */
.voice-options-row {
    display: flex; flex-direction: column; gap: 6px;
    align-items: center; margin: 8px 0;
}
.voice-option-group {
    display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.voice-option-label {
    color: var(--text-secondary, #6b7280); font-weight: 500;
}
.voice-option-value {
    color: var(--text-primary, #333); font-weight: 600; text-transform: capitalize;
}
.language-pills {
    display: flex; gap: 3px; flex-wrap: wrap; justify-content: center;
}
.lang-pill {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid transparent; background: #f5f5f5;
    cursor: pointer; font-size: 14px; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.2s; padding: 0;
}
.lang-pill:hover { border-color: #aaa; background: #eee; }
.lang-pill.selected {
    border-color: var(--primary, #1a365d); background: #e3f2fd;
    box-shadow: 0 0 0 1px var(--primary, #1a365d);
}

/* ── Responsive ────────────────────────────────────────
   Shrinks avatar and thumbnails on narrow viewports (<480px). */
@media (max-width: 480px) {
    .voice-avatar { width: 100px; height: 100px; }
    .voice-agent-container { padding: 12px; }
    .avatar-thumb { width: 26px; height: 26px; }
    .avatar-selector { gap: 4px; }
}