/* ============================================================================
   VOICE MODULE - CSS STYLES
   ADD THIS TO public/css/style.css OR CREATE A NEW FILE
   ============================================================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Modal Container */
.agent-config-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Modal Header */
.agent-config-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.header-actions {
    display: flex;
    gap: 10px;
}

/* Butonul stă în `.agent-config-modal .modal-header`, care avea gradient violet.
   Măsurat azi: header-ul e #f9fafb (light-theme.css îl impune cu `!important`), deci
   „alb translucid peste alb" = #fafbfc, iar textul alb ieșea 1.04:1 — invizibil.
   Culorile de mai jos sunt pentru header deschis; dacă header-ul redevine închis,
   ele trebuie măsurate din nou. */
.btn-sync {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-sync:hover {
    background: #f1f5f9;
}

.btn-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
}

/* Tabs */
.config-tabs {
    display: flex;
    gap: 5px;
    padding: 15px 20px 0;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
}

.config-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 0.95rem;
    transition: all 0.3s;
    color: #666;
}

.config-tab-btn:hover {
    background: rgba(102, 126, 234, 0.1);
}

.config-tab-btn.active {
    background: white;
    color: #667eea;
    font-weight: 600;
    border-bottom: 3px solid #667eea;
}

/* Modal Body */
.agent-config-modal .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.config-tab-content {
    animation: fadeIn 0.3s ease-in;
}

.config-tab-content.hidden {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: #999;
    font-size: 0.85rem;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
}

/* Range Sliders */
.range-slider {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #667eea;
    border-radius: 50%;
    cursor: pointer;
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #667eea;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.range-value {
    display: inline-block;
    background: #667eea;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-left: 10px;
}

/* Version History */
.version-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.version-card {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s;
}

.version-card:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.version-card.active {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(102, 126, 234, 0.1));
}

.version-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.version-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
}

.version-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-draft {
    background: #ffc107;
    color: #333;
}

.status-deploying {
    background: #17a2b8;
    color: white;
}

.status-deployed {
    background: #28a745;
    color: white;
}

.status-failed {
    background: #dc3545;
    color: white;
}

.version-active {
    background: #28a745;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.version-meta {
    margin: 10px 0;
    color: #666;
    font-size: 0.9rem;
}

.version-meta p {
    margin: 5px 0;
}

.version-description {
    margin: 10px 0;
    padding: 10px;
    background: white;
    border-left: 4px solid #667eea;
    border-radius: 4px;
}

.version-changes {
    margin: 10px 0;
}

.version-changes h5 {
    margin: 0 0 8px 0;
    color: #333;
}

.version-changes ul {
    margin: 0;
    padding-left: 20px;
}

.version-changes li {
    margin: 5px 0;
    font-size: 0.9rem;
    color: #666;
}

.version-changes code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #667eea;
}

.version-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.btn-restore {
    background: #667eea;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-restore:hover {
    background: #5568d3;
    transform: translateY(-2px);
}

/* Modal Footer */
.agent-config-modal .modal-footer {
    padding: 20px;
    border-top: 2px solid #f0f0f0;
    background: #f8f9fa;
}

.change-description-container {
    margin-bottom: 15px;
}

.change-description-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.action-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-cancel, .btn-save-local, .btn-deploy {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-cancel {
    background: #dc3545;
    color: white;
}

.btn-cancel:hover {
    background: #c82333;
}

.btn-save-local {
    background: #ffc107;
    color: #333;
}

.btn-save-local:hover {
    background: #e0a800;
}

.btn-deploy {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-deploy:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Feedback Section */
.voice-feedback-section {
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 8px;
    border: 2px solid #667eea;
}

.voice-feedback-section h4 {
    margin: 0 0 15px 0;
    color: #667eea;
}

.feedback-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-feedback-like, .btn-feedback-dislike, .btn-feedback-auto {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-feedback-like {
    background: #28a745;
    color: white;
}

.btn-feedback-like:hover {
    background: #218838;
    transform: translateY(-2px);
}

.btn-feedback-dislike {
    background: #dc3545;
    color: white;
}

.btn-feedback-dislike:hover {
    background: #c82333;
    transform: translateY(-2px);
}

.btn-feedback-auto {
    background: #17a2b8;
    color: white;
}

.btn-feedback-auto:hover {
    background: #138496;
    transform: translateY(-2px);
}

.feedback-result {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.feedback-result.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback-result.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Admin-only elements */
.admin-only {
    /* Will be shown/hidden by JavaScript based on user role */
}

/* Responsive */
@media (max-width: 768px) {
    .agent-config-modal {
        width: 95%;
        max-height: 95vh;
    }
    
    .config-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .config-tab-btn {
        white-space: nowrap;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .btn-cancel, .btn-save-local, .btn-deploy {
        width: 100%;
    }
    
    .feedback-buttons {
        flex-direction: column;
    }
    
    .btn-feedback-like, .btn-feedback-dislike, .btn-feedback-auto {
        width: 100%;
    }
}

/* ============================================================================
   MODALUL „🔧 Edit Agent Configuration" — ÎNCADRARE (desktop + mobil)
   ----------------------------------------------------------------------------
   Măsurat pe marcajul real (modal forțat vizibil), 2026-08-02:

   1280x800 — bara de taburi avea scrollWidth 959 într-o ramă de 900px, iar
     `overflow-x` era `visible` (regula de scroll exista DOAR sub 768px), deci
     ultimul tab („👁️ Preview", left 1052 → right 1149) ieșea **59px** în afara
     ramei albe (right 1090). E a doua oară: la 8 taburi (commit 39f74f0) încă
     încăpea, la 9 nu mai încape.

   375x812 — bara: scrollWidth 1317 vs clientWidth 334 (se scrola, dar fără
     niciun indiciu vizual); titlul se rupea pe 3 rânduri (h 72px) și ajungea
     exact la butonul „Sincronizează" (0px între ele); footerul avea 228px cu
     butoanele stivuite pe 3 rânduri; iar `.mobile-bottom-nav` (position fixed,
     z-index 9997, h 77px, top 735) ACOPEREA ultimii 44px ai footerului —
     inclusiv baza butonului „🚀 Salvează și Publică" (705→763). Cauza: un
     <style> injectat din app.js dă `.modal-overlay { z-index: 1000 }` și bate
     `z-index: 10000` declarat mai sus în acest fișier.

   SOLUȚIA pentru taburi, în două regimuri (măsurat, nu presupus):
   Cele 9 taburi de azi cer 1111px pe un singur rând, într-o ramă de 900px.
   Nu încap oricât le-am strânge — la 0.9rem și padding 12px tot ies 1111px —
   deci „taburi mai înguste" NU e o soluție, doar amână cu un tab.

     • ≥ 641px (desktop/tabletă): `flex-wrap: wrap`. Toate taburile rămân
       VIZIBILE, pe două rânduri. Nu costă înălțime în plus: bara avea deja
       92.6px pe desktop, pentru că textul se rupea în interiorul butoanelor
       (butonul măsura 76px); acum are ~90px cu două rânduri curate.
       La 10–14 taburi rămâne pe 2–3 rânduri, previzibil, fără nimic ascuns.
     • ≤ 640px: șină pe un rând cu scroll orizontal — pe telefon wrap-ul ar
       da ~4 rânduri (~170px) din verticala care oricum lipsește. Ca să se
       vadă că mai există taburi, bara are scrollbar subțire vizibil PLUS o
       umbră de margine care apare AUTOMAT doar când mai e conținut dincolo
       de margine (truc pur CSS cu `background-attachment: local`: „capacul"
       în culoarea fundalului se mișcă odată cu conținutul și descoperă
       umbra). Zero JS, zero întreținere la adăugarea unui tab.

   În ambele regimuri containerul are `overflow-x: auto`, deci decupează:
   un tab nu mai POATE ieși din rama albă, indiferent câte devin.
   Alternativă respinsă: doar pictograme sub o lățime — 📋/📚/📊/🔌 nu spun
   ce e tabul, utilizatorul ar trebui să ghicească.

   TOȚI selectorii pornesc de la #editAgentConfigModal: `.config-tabs`,
   `.modal-header`, `.modal-footer`, `.action-buttons` și `.btn-sync` sunt
   partajate cu alte modale (addKnowledgeModal, toolPushPreviewModal, …) și cu
   butoanele de sincronizare din CRM (`.btn btn-sync` în crmPipeline.js).
   ============================================================================ */

/* Peste bara de navigație de jos (9997), nu sub ea. ID + clasă bate regula de
   clasă injectată din app.js, fără să atingă celelalte modale. */
#editAgentConfigModal.modal-overlay {
    z-index: 10001;
}

/* Cele două modale care se deschid DIN acest modal (fără să-l închidă) trebuie
   să rămână deasupra lui. Până acum toate trei aveau z-index 1000 și ordinea o
   dădea poziția în DOM (ele sunt după el în index.html); odată ce părintele a
   urcat la 10001, ele ar fi rămas dedesubt — verificat cu elementFromPoint:
   punctul din antetul modalului-copil returna elemente din modalul-părinte.
   Nu se aplică altor modale: selectorii sunt pe id. */
#addKnowledgeModal.modal-overlay,
#toolPushPreviewModal.modal-overlay {
    z-index: 10002;
}

/* ── Bara de taburi ────────────────────────────────────────────────────────── */
/* Implicit: taburile curg pe mai multe rânduri, deci nu există depășire pe
   orizontală și nici umbre (capacele acoperă umbrele când nu e ce scrola). */
#editAgentConfigModal .config-tabs {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    padding: 12px 16px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.55) transparent;

    /* Umbre de scroll: capacele (local) stau peste umbre cât timp ești la capăt. */
    background-color: #f8f9fa;
    background-image:
        linear-gradient(to right, #f8f9fa 40%, rgba(248, 249, 250, 0)),
        linear-gradient(to left,  #f8f9fa 40%, rgba(248, 249, 250, 0)),
        linear-gradient(to right, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0)),
        linear-gradient(to left,  rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    /* Alpha 0.08 pe 16px, deliberat: în pixelul cel mai închis fundalul devine
       ~#e5e7e9, deci textul taburilor (#666) rămâne la 4.64:1 — peste pragul
       AA de 4.5:1 — și urcă înapoi la 5.34:1 pe restul barei. O umbră mai
       puternică (0.14) cobora la 4.06:1, sub prag. */
    background-size: 24px 100%, 24px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

#editAgentConfigModal .config-tabs::-webkit-scrollbar {
    height: 6px;
}

#editAgentConfigModal .config-tabs::-webkit-scrollbar-track {
    background: transparent;
}

#editAgentConfigModal .config-tabs::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.55);
    border-radius: 3px;
}

/* Metrici compacte: 9 taburi încap în ramă; `line-height` fix taie și înălțimea
   umflată de cutia de linie a emoji-urilor (butonul măsura 76px). */
#editAgentConfigModal .config-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 12px;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ── Antet: titlul și „Sincronizează" nu se mai calcă ──────────────────────── */
#editAgentConfigModal .modal-header {
    gap: 12px;
    flex-wrap: wrap;
}

#editAgentConfigModal .modal-header h2 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(1.05rem, 2.4vw + 0.35rem, 1.5rem);
    line-height: 1.25;
}

#editAgentConfigModal .header-actions {
    flex: 0 0 auto;
}

/* Butoanele de acțiune: fără `line-height` explicit, cutia de linie a emoji-urilor
   umfla butoanele la 84px (măsurat), ceea ce dubla înălțimea footerului. */
#editAgentConfigModal .btn-cancel,
#editAgentConfigModal .btn-save-local,
#editAgentConfigModal .btn-deploy {
    line-height: 1.35;
}

/* ≤640px: bara redevine un singur rând, cu scroll și indiciu vizual. */
@media (max-width: 640px) {
    #editAgentConfigModal .config-tabs {
        flex-wrap: nowrap;
        padding: 10px 12px 0;
    }

    #editAgentConfigModal .config-tab-btn {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    /* Modalul rămâne integral în ecran; 100dvh ține cont de barele browserului
       mobil, cu revenire la 100vh unde nu e suportat. */
    #editAgentConfigModal .agent-config-modal {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    /* Footer compact: 3 butoane stivuite (228px) → 2 rânduri. Acțiunea primară
       trece SUS (order: -1), departe de marginea de jos a ecranului.
       `.modal-footer` e `display: flex; flex-direction: row` (crm.css + stilul
       injectat din app.js), deci pe telefon câmpul „Change Description" ajungea
       lat de 92px, lângă butoane; pe coloană primește toată lățimea.
       `!important` doar pentru padding: light-theme.css impune 16px 24px tot cu
       `!important`, altfel marginea de siguranță de jos nu se aplică. */
    #editAgentConfigModal .modal-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    #editAgentConfigModal .change-description-container {
        margin-bottom: 10px;
    }

    #editAgentConfigModal .change-description-container label {
        margin-bottom: 4px;
        font-size: 0.85rem;
    }

    #editAgentConfigModal .action-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    #editAgentConfigModal .btn-deploy {
        flex: 1 1 100%;
        order: -1;
        width: auto;
    }

    #editAgentConfigModal .btn-cancel,
    #editAgentConfigModal .btn-save-local {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    #editAgentConfigModal .btn-cancel,
    #editAgentConfigModal .btn-save-local,
    #editAgentConfigModal .btn-deploy {
        padding: 10px 8px;
        font-size: 0.85rem;
    }
}

/* Sub 480px eticheta butonului de sincronizare dispare (rămâne 🔄 + aria-label),
   ca titlul să aibă loc pe același rând. Scopat pe modal: `.btn-sync` e folosit
   și de butoanele de sincronizare din CRM (`btn btn-sync` în crmPipeline.js). */
@media (max-width: 480px) {
    #editAgentConfigModal .btn-sync-label {
        display: none;
    }

    #editAgentConfigModal .btn-sync {
        padding: 8px 12px;
    }

    /* Cu eticheta ascunsă, titlul și acțiunile încap pe un rând: `nowrap` ca
       titlul să se strângă (min-width: 0) în loc să împingă butoanele pe rândul
       următor — antetul scade de la 109px la ~70px. */
    #editAgentConfigModal .modal-header {
        flex-wrap: nowrap;
        padding: 14px 16px;
    }

    #editAgentConfigModal .modal-header h2 {
        overflow-wrap: anywhere;
    }
}