/* ════════════════════════════════════════════════════════════════════════
   AGENT VOICE CSS v1.0 — agent-voice.css
   Feature 8: 🎙 Voice-to-Agent Interface — AlphaVault AI
   ════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
    --av-primary    : #6366f1;
    --av-primary-bg : rgba(99,102,241,.10);
    --av-danger     : #ef4444;
    --av-success    : #10b981;
    --av-warning    : #f59e0b;
    --av-speaking   : #06b6d4;
    --av-border     : var(--mcp-border,    #e2e8f0);
    --av-surface    : var(--mcp-surface,   #ffffff);
    --av-bg-2       : var(--mcp-bg-2,      #f8fafc);
    --av-text       : var(--mcp-text,      #1e293b);
    --av-muted      : var(--mcp-text-muted,#64748b);
    --av-font       : var(--mcp-font,      'Inter', -apple-system, sans-serif);
    --av-transition : all .18s ease;
    --av-radius     : 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VOICE BUTTON STATES
═══════════════════════════════════════════════════════════════════════════ */

/* ── Base Voice Button ───────────────────────────────────────────────────── */
.av-voice-btn {
    position   : relative;
    transition : var(--av-transition);
    overflow   : visible !important;
}

/* ── IDLE state: default ab-attach-btn appearance (no override needed) ─── */

/* ── LISTENING state ─────────────────────────────────────────────────────── */
.av-voice-btn.av-vb-listening {
    background   : rgba(239,68,68,.12) !important;
    border       : 1.5px solid rgba(239,68,68,.4) !important;
    color        : #ef4444 !important;
    animation    : av-pulse-listening 1.4s ease infinite;
}

.av-voice-btn.av-vb-listening i { animation: av-mic-bounce .6s ease infinite alternate; }

@keyframes av-pulse-listening {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
    50%       { box-shadow: 0 0 0 8px rgba(239,68,68,.0); }
}

@keyframes av-mic-bounce {
    from { transform: scale(1); }
    to   { transform: scale(1.18); }
}

/* ── PROCESSING state ────────────────────────────────────────────────────── */
.av-voice-btn.av-vb-processing {
    background: rgba(245,158,11,.1) !important;
    border    : 1.5px solid rgba(245,158,11,.35) !important;
    color     : #f59e0b !important;
    cursor    : not-allowed !important;
}

/* ── SPEAKING state ──────────────────────────────────────────────────────── */
.av-voice-btn.av-vb-speaking {
    background: rgba(6,182,212,.1) !important;
    border    : 1.5px solid rgba(6,182,212,.35) !important;
    color     : #06b6d4 !important;
    animation : av-speaking-wave 1.8s ease infinite;
}

@keyframes av-speaking-wave {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6,182,212,.3); }
    50%       { box-shadow: 0 0 0 6px rgba(6,182,212,.0); }
}

/* ── ERROR state ─────────────────────────────────────────────────────────── */
.av-voice-btn.av-vb-error {
    background: rgba(239,68,68,.08) !important;
    border    : 1.5px solid rgba(239,68,68,.3) !important;
    color     : #ef4444 !important;
    animation : av-shake .4s ease;
}

@keyframes av-shake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-4px)}
    40%{transform:translateX(4px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
}

/* ── Gear button ─────────────────────────────────────────────────────────── */
.av-voice-gear-btn {
    padding  : 7px !important;
    min-width: 32px !important;
    transition: var(--av-transition);
}

.av-voice-gear-btn:hover { color: #6366f1 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   WAVEFORM CANVAS — minimaliste & discret
═══════════════════════════════════════════════════════════════════════════ */

.av-waveform-canvas {
    position       : absolute;
    bottom         : 52px;          /* juste au-dessus de la barre d'input */
    left           : 50%;
    transform      : translateX(-50%);
    width          : 200px;         /* largeur fixe centrée — pas full-width */
    height         : 28px;          /* hauteur réduite */
    border-radius  : 14px;
    background     : transparent;   /* aucun fond visible */
    pointer-events : none;
    z-index        : 10;
    transition     : opacity .3s ease, transform .3s ease;

    /* Pas de bordure — on supprime tout ce qui attire l'œil */
}

.av-waveform-canvas.av-wf-hidden {
    opacity        : 0;
    transform      : translateX(-50%) translateY(4px);
    pointer-events : none;
}

/* Légère teinte en dark mode — toujours aucun fond */
body.dark-mode .av-waveform-canvas {
    background     : transparent;
}

/* Responsive : réduit encore sur mobile */
@media (max-width: 768px) {
    .av-waveform-canvas {
        width  : 140px;
        height : 22px;
        bottom : 46px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSCRIPTION PREVIEW
═══════════════════════════════════════════════════════════════════════════ */

.av-transcript-preview {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 7px 14px;
    margin       : 0 0 6px;
    border-radius: var(--av-radius);
    background   : linear-gradient(135deg,
                       rgba(99,102,241,.07),
                       rgba(139,92,246,.05));
    border       : 1px solid rgba(99,102,241,.18);
    font-size    : 12px;
    font-family  : var(--av-font);
    color        : var(--av-muted);
    min-height   : 32px;
    animation    : av-fade-in .2s ease;
    transition   : opacity .2s ease;
    position     : relative;
    overflow     : hidden;
}

.av-transcript-preview.av-tp-hidden {
    display: none;
}

.av-tp-mic {
    width          : 22px;
    height         : 22px;
    border-radius  : 50%;
    background     : rgba(239,68,68,.15);
    color          : #ef4444;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 9px;
    flex-shrink    : 0;
    animation      : av-pulse-listening 1.2s ease infinite;
}

.av-tp-mic.av-tp-ok {
    background: rgba(16,185,129,.15);
    color     : #10b981;
    animation : none;
}

.av-tp-text {
    flex       : 1;
    font-weight: 600;
    color      : var(--av-text);
    white-space: nowrap;
    overflow   : hidden;
    text-overflow: ellipsis;
}

.av-tp-text.av-tp-interim {
    color  : var(--av-muted);
    font-style: italic;
}

.av-tp-dots {
    display    : flex;
    gap        : 3px;
    align-items: center;
    flex-shrink: 0;
}

.av-tp-dots span {
    width        : 5px;
    height       : 5px;
    border-radius: 50%;
    background   : #6366f1;
    animation    : av-dot-bounce .8s ease infinite;
}

.av-tp-dots span:nth-child(2) { animation-delay: .15s; }
.av-tp-dots span:nth-child(3) { animation-delay: .30s; }

@keyframes av-dot-bounce {
    0%,80%,100% { transform: scale(0.6); opacity:.4; }
    40%          { transform: scale(1.1); opacity:1; }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   HANDS-FREE INDICATOR (header pill)
═══════════════════════════════════════════════════════════════════════════ */

.av-hf-indicator {
    display      : flex;
    align-items  : center;
    gap          : 7px;
    padding      : 5px 10px 5px 8px;
    border-radius: 20px;
    background   : rgba(239,68,68,.1);
    border       : 1.5px solid rgba(239,68,68,.3);
    color        : #ef4444;
    font-size    : 12px;
    font-weight  : 700;
    font-family  : var(--av-font);
    transition   : var(--av-transition);
    animation    : av-fade-in .2s ease;
    flex-shrink  : 0;
}

.av-hf-indicator.av-hf-hidden { display: none; }

.av-hf-indicator.av-hf-speaking {
    background: rgba(6,182,212,.1);
    border-color: rgba(6,182,212,.35);
    color     : #06b6d4;
}

.av-hf-dot {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    background   : currentColor;
    flex-shrink  : 0;
    animation    : av-dot-live 1s ease infinite;
}

@keyframes av-dot-live {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.75); }
}

.av-hf-label {
    white-space: nowrap;
    max-width  : 100px;
    overflow   : hidden;
    text-overflow: ellipsis;
}

.av-hf-stop-btn {
    background   : none;
    border       : none;
    cursor       : pointer;
    color        : currentColor;
    padding      : 2px 4px;
    border-radius: 50%;
    font-size    : 10px;
    opacity      : .75;
    transition   : opacity .15s;
    display      : flex;
    align-items  : center;
}

.av-hf-stop-btn:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   VOICE SETTINGS PANEL (slide-in overlay)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.av-sp-overlay {
    position       : fixed;
    inset          : 0;
    z-index        : 13000;
    background     : rgba(0,0,0,.5);
    backdrop-filter: blur(5px);
    display        : flex;
    justify-content: flex-end;
    opacity        : 0;
    pointer-events : none;
    transition     : opacity .22s ease;
}

.av-sp-overlay.av-sp-open {
    opacity       : 1;
    pointer-events: auto;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.av-sp-panel {
    width       : 100%;
    max-width   : 460px;
    height      : 100%;
    background  : var(--av-surface);
    display     : flex;
    flex-direction: column;
    box-shadow  : -12px 0 48px rgba(0,0,0,.2);
    transform   : translateX(30px);
    transition  : transform .22s ease;
    overflow    : hidden;
}

.av-sp-overlay.av-sp-open .av-sp-panel { transform: translateX(0); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.av-sp-header {
    display        : flex;
    align-items    : center;
    gap            : 12px;
    padding        : 16px 22px;
    border-bottom  : 1px solid var(--av-border);
    background     : linear-gradient(135deg,
                         rgba(99,102,241,.06),
                         rgba(118,75,162,.04));
    flex-shrink    : 0;
}

.av-sp-header-icon {
    width          : 40px;
    height         : 40px;
    border-radius  : 12px;
    background     : linear-gradient(135deg, #667eea, #764ba2);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : white;
    font-size      : 16px;
    flex-shrink    : 0;
}

.av-sp-title {
    font-size  : 16px;
    font-weight: 800;
    color      : var(--av-text);
}

.av-sp-sub {
    font-size: 11px;
    color    : var(--av-muted);
}

.av-sp-close {
    margin-left: auto;
    background : none;
    border     : none;
    cursor     : pointer;
    color      : var(--av-muted);
    font-size  : 16px;
    padding    : 6px;
    border-radius: 8px;
    transition : var(--av-transition);
    flex-shrink: 0;
}

.av-sp-close:hover { color: var(--av-text); background: var(--av-bg-2); }

/* ── Support Banner ──────────────────────────────────────────────────────── */
.av-sp-support {
    display    : flex;
    align-items: flex-start;
    gap        : 10px;
    padding    : 10px 18px;
    font-size  : 12px;
    line-height: 1.6;
    flex-shrink: 0;
}

.av-sp-support-ok   { background: rgba(16,185,129,.06);  color: #065f46; border-bottom: 1px solid rgba(16,185,129,.15); }
.av-sp-support-warn { background: rgba(239,68,68,.06);   color: #991b1b; border-bottom: 1px solid rgba(239,68,68,.15); }

.av-sp-support i { margin-top: 2px; flex-shrink: 0; font-size: 14px; }

body.dark-mode .av-sp-support-ok  { background: rgba(16,185,129,.08);  color: #6ee7b7; }
body.dark-mode .av-sp-support-warn{ background: rgba(239,68,68,.08);   color: #fca5a5; }

/* ── Scrollable Body ─────────────────────────────────────────────────────── */
.av-sp-body {
    flex      : 1;
    overflow-y: auto;
    padding   : 0;
}

/* ── Setting Row ─────────────────────────────────────────────────────────── */
.av-sp-row {
    display    : flex;
    align-items: center;
    justify-content: space-between;
    gap        : 14px;
    padding    : 16px 22px;
    border-bottom: 1px solid var(--av-border);
    transition : background .12s;
}

.av-sp-row:hover { background: rgba(99,102,241,.025); }

.av-sp-row.av-sp-row-col {
    flex-direction: column;
    align-items   : stretch;
}

.av-sp-row-left {
    display    : flex;
    align-items: center;
    gap        : 12px;
    flex       : 1;
    min-width  : 0;
}

.av-sp-icon {
    width          : 36px;
    height         : 36px;
    border-radius  : 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 14px;
    flex-shrink    : 0;
}

.av-sp-label {
    font-size  : 13px;
    font-weight: 700;
    color      : var(--av-text);
    display    : flex;
    align-items: center;
    gap        : 6px;
}

.av-sp-desc {
    font-size: 11px;
    color    : var(--av-muted);
    margin-top: 2px;
}

.av-sp-voice-count {
    font-size  : 10px;
    font-weight: 700;
    color      : #6366f1;
    background : rgba(99,102,241,.1);
    padding    : 1px 6px;
    border-radius: 20px;
}

/* Experimental badge */
.av-sp-badge-exp {
    font-size    : 9px;
    font-weight  : 800;
    padding      : 2px 6px;
    border-radius: 4px;
    background   : rgba(245,158,11,.15);
    color        : #d97706;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ── Toggle Switch ───────────────────────────────────────────────────────── */
.av-toggle-sw { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.av-toggle-sw input { opacity:0; width:0; height:0; position:absolute; }

.av-toggle-track {
    display       : block;
    width         : 42px;
    height         : 24px;
    border-radius : 12px;
    background    : var(--av-border);
    cursor        : pointer;
    transition    : background .2s;
    position      : relative;
}

.av-toggle-track::after {
    content      : '';
    position     : absolute;
    top          : 3px;
    left         : 3px;
    width        : 18px;
    height       : 18px;
    border-radius: 50%;
    background   : white;
    box-shadow   : 0 1px 4px rgba(0,0,0,.2);
    transition   : transform .2s;
}

.av-toggle-sw input:checked + .av-toggle-track { background: #6366f1; }
.av-toggle-sw input:checked + .av-toggle-track::after { transform: translateX(18px); }

/* ── Select ──────────────────────────────────────────────────────────────── */
.av-sp-select {
    width        : 100%;
    padding      : 9px 12px;
    border-radius: var(--av-radius);
    border       : 1.5px solid var(--av-border);
    background   : var(--av-bg-2);
    color        : var(--av-text);
    font-size    : 13px;
    font-family  : var(--av-font);
    outline      : none;
    cursor       : pointer;
    transition   : border-color .15s;
    box-sizing   : border-box;
}

.av-sp-select:focus { border-color: #6366f1; }

/* ── Speed Slider ────────────────────────────────────────────────────────── */
.av-slider-wrap {
    display    : flex;
    align-items: center;
    gap        : 10px;
    margin-top : 4px;
}

.av-slider-edge {
    font-size  : 11px;
    font-weight: 700;
    color      : var(--av-muted);
    white-space: nowrap;
    flex-shrink: 0;
    width      : 30px;
    text-align : center;
}

.av-slider {
    flex             : 1;
    -webkit-appearance: none;
    height           : 5px;
    border-radius    : 99px;
    background       : var(--av-border);
    outline          : none;
    cursor           : pointer;
    accent-color     : #6366f1;
}

.av-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width             : 18px;
    height            : 18px;
    border-radius     : 50%;
    background        : linear-gradient(135deg, #667eea, #764ba2);
    cursor            : pointer;
    box-shadow        : 0 2px 6px rgba(99,102,241,.4);
    border            : 2px solid white;
}

/* ── Speed Presets ───────────────────────────────────────────────────────── */
.av-speed-presets {
    display  : flex;
    gap      : 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.av-speed-chip {
    padding      : 4px 10px;
    border-radius: 20px;
    border       : 1.5px solid var(--av-border);
    background   : var(--av-bg-2);
    color        : var(--av-muted);
    font-size    : 11px;
    font-weight  : 800;
    cursor       : pointer;
    transition   : var(--av-transition);
    font-family  : var(--av-font);
}

.av-speed-chip:hover { border-color: #6366f1; color: #6366f1; }
.av-speed-chip.active {
    background  : rgba(99,102,241,.1);
    border-color: #6366f1;
    color       : #6366f1;
}

/* ── Test Voice Button ───────────────────────────────────────────────────── */
.av-sp-test-btn {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    padding      : 8px 16px;
    border-radius: var(--av-radius);
    border       : 1.5px solid rgba(239,68,68,.3);
    background   : rgba(239,68,68,.06);
    color        : #ef4444;
    font-size    : 12px;
    font-weight  : 700;
    cursor       : pointer;
    font-family  : var(--av-font);
    transition   : var(--av-transition);
    flex-shrink  : 0;
}

.av-sp-test-btn:hover:not(:disabled) { background: rgba(239,68,68,.12); }
.av-sp-test-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Keyboard Shortcuts hint ─────────────────────────────────────────────── */
.av-sp-shortcuts {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 10px 22px;
    font-size  : 11px;
    color      : var(--av-muted);
    background : var(--av-bg-2);
    border-top : 1px solid var(--av-border);
    flex-shrink: 0;
    flex-wrap  : wrap;
}

.av-sp-shortcuts kbd {
    display      : inline-flex;
    padding      : 2px 6px;
    border-radius: 4px;
    border       : 1px solid var(--av-border);
    background   : var(--av-surface);
    font-size    : 10px;
    font-weight  : 700;
    font-family  : var(--av-font);
    color        : var(--av-text);
    box-shadow   : 0 1px 2px rgba(0,0,0,.06);
}

/* ── Footer Buttons ──────────────────────────────────────────────────────── */
.av-sp-footer {
    display        : flex;
    justify-content: flex-end;
    gap            : 10px;
    padding        : 14px 22px;
    border-top     : 1px solid var(--av-border);
    background     : var(--av-bg-2);
    flex-shrink    : 0;
}

.av-sp-btn-primary {
    display      : flex;
    align-items  : center;
    gap          : 7px;
    padding      : 10px 20px;
    border-radius: var(--av-radius);
    border       : none;
    background   : linear-gradient(135deg, #667eea, #764ba2);
    color        : white;
    font-size    : 13px;
    font-weight  : 800;
    cursor       : pointer;
    font-family  : var(--av-font);
    transition   : opacity .15s;
}

.av-sp-btn-primary:hover { opacity: .88; }

.av-sp-btn-ghost {
    display      : flex;
    align-items  : center;
    gap          : 7px;
    padding      : 10px 18px;
    border-radius: var(--av-radius);
    border       : 1.5px solid var(--av-border);
    background   : var(--av-surface);
    color        : var(--av-muted);
    font-size    : 13px;
    font-weight  : 700;
    cursor       : pointer;
    font-family  : var(--av-font);
    transition   : var(--av-transition);
}

.av-sp-btn-ghost:hover { border-color: #6366f1; color: #6366f1; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════════════════════════════════════ */
body.dark-mode .av-sp-panel   { background: #1e293b; }
body.dark-mode .av-sp-header,
body.dark-mode .av-sp-footer,
body.dark-mode .av-sp-shortcuts { background: #0f172a; }
body.dark-mode .av-sp-row:hover { background: rgba(99,102,241,.06); }
body.dark-mode .av-sp-select  { background: #0f172a; color: #e2e8f0; border-color: rgba(255,255,255,.1); }
body.dark-mode .av-speed-chip { background: #0f172a; border-color: rgba(255,255,255,.1); }
body.dark-mode .av-sp-btn-ghost { background: #1e293b; border-color: rgba(255,255,255,.1); }

body.dark-mode .av-transcript-preview {
    background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.07));
    border-color: rgba(99,102,241,.25);
}

body.dark-mode .av-hf-indicator {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.35);
}

body.dark-mode .av-voice-btn.av-vb-listening {
    background: rgba(239,68,68,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .av-sp-panel  { max-width: 100%; }
    .av-hf-label  { max-width: 70px; font-size: 11px; }
    .av-waveform-canvas { height: 32px; bottom: 44px; }
    .av-sp-shortcuts { display: none; }
}

@media (max-width: 480px) {
    .av-speed-presets { gap: 4px; }
    .av-speed-chip    { padding: 3px 8px; font-size: 10px; }
}