/**
 * Chat Suport Module — Widget CSS (frontend)
 *
 * Stiluri autonome (fara framework), namespace-uite sub #chat-widget si .ch-.
 * Include buton flotant, panou 350x500, bule de mesaje, carduri de produs,
 * butoane, input si un mod mobil corect (full screen, fara scroll dublu).
 */

/* ── Radacina widget ───────────────────────────────────────── */
#chat-widget,
#chat-widget * {
    box-sizing: border-box;
}

#chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* ── Buton flotant ─────────────────────────────────────────── */
#chat-widget .ch-launcher {
    position: relative; /* reper pentru badge-ul de notificare */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #007bff;
    color: #fff;
    border: 0;
    cursor: grab;
    touch-action: none; /* permite drag pe touch fara a derula pagina */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

#chat-widget .ch-launcher:hover {
    background: #0069d9;
    transform: scale(1.03);
}

#chat-widget .ch-launcher:active {
    transform: scale(0.96);
}

/* Badge de notificare (mesaje noi cand panoul e minimizat) */
#chat-widget .ch-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    display: none;
    pointer-events: none;
    animation: ch-badge-pop 0.25s ease;
}

#chat-widget .ch-badge.ch-visible {
    display: block;
}

@keyframes ch-badge-pop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

#chat-widget .ch-launcher.ch-has-unread {
    animation: ch-launcher-pulse 1.6s ease-in-out infinite;
}

@keyframes ch-launcher-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(0, 123, 255, 0.45); }
    50%      { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 0 0 8px rgba(0, 123, 255, 0); }
}

/* ── Balon de suport (text editabil din Chat -> Setari) ────── */
#chat-widget .ch-teaser {
    position: absolute;
    right: 74px;
    bottom: 12px;
    max-width: 240px;
    padding: 9px 14px;
    background: #fff;
    color: #212529;
    border: 1px solid #e3e6ea;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.3;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: ch-fade-in 0.22s ease;
}

#chat-widget .ch-teaser:hover {
    border-color: #007bff;
    color: #007bff;
}

/* Pe ecrane mici limitam latimea ca sa nu iasa din ecran. */
@media (max-width: 640px) {
    #chat-widget .ch-teaser {
        right: 66px;
        max-width: 60vw;
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ── Panou chat ────────────────────────────────────────────── */
#chat-widget .ch-panel {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: 350px;
    height: 500px;
    max-height: calc(100vh - 100px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    transform-origin: bottom right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

#chat-widget .ch-panel.ch-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

@media (max-width: 640px) {
    #chat-widget .ch-panel {
        transform: translateY(100%);
    }
    #chat-widget .ch-panel.ch-open {
        transform: translateY(0);
    }
}

/* ── Header ────────────────────────────────────────────────── */
#chat-widget .ch-header {
    background: #007bff;
    color: #fff;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}

#chat-widget .ch-title {
    font-size: 15px;
    font-weight: 600;
}

#chat-widget .ch-subtitle {
    font-size: 11px;
    opacity: 0.85;
    display: block;
}

#chat-widget .ch-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

#chat-widget .ch-menu,
#chat-widget .ch-close {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#chat-widget .ch-menu:hover,
#chat-widget .ch-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

#chat-widget .ch-close {
    font-size: 24px;
}

/* ── Corp mesaje ───────────────────────────────────────────── */
#chat-widget .ch-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    background: #f6f8fa;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#chat-widget .ch-row {
    display: flex;
    margin-bottom: 8px;
}

#chat-widget .ch-row.ch-client {
    justify-content: flex-end;
}

#chat-widget .ch-bubble {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#chat-widget .ch-row.ch-bot .ch-bubble {
    background: #e9ecef;
    color: #212529;
    border-top-left-radius: 4px;
}

#chat-widget .ch-row.ch-client .ch-bubble {
    background: #007bff;
    color: #fff;
    border-top-right-radius: 4px;
}

#chat-widget .ch-row.ch-operator .ch-bubble {
    background: #28a745;
    color: #fff;
    border-top-left-radius: 4px;
}

/* Data + ora fiecarui mesaj (discret, in coltul de jos al bulei) */
#chat-widget .ch-time {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ── Bula de sistem (anunturi de tranzitie: preluare / inchidere) ── */
#chat-widget .ch-row.ch-system {
    justify-content: center;
}

#chat-widget .ch-bubble-system {
    max-width: 92%;
    background: transparent;
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding: 2px 8px;
}

/* Blocul clepsidra + timp (sta pe acelasi rand; nu se rupe intre ele) */
#chat-widget .ch-wait-inline {
    display: inline-block;
    margin-left: 5px;
    white-space: nowrap;
    vertical-align: -1px;
}

/* Bula de asteptare operator: tipografie distincta (serif, italic) */
#chat-widget .ch-row.ch-bot .ch-bubble.ch-bubble-wait {
    font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #2c3e50;
    background: #eef3fb;
    border-left: 3px solid #4c8bf5;
}

/* Clepsidra animata dupa mesajul de asteptare operator */
#chat-widget .ch-hourglass {
    display: inline-block;
    margin-left: 0;
    animation: ch-hourglass-spin 1.6s linear infinite;
}

@keyframes ch-hourglass-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Timpul scurs (mm:ss) langa clepsidra */
#chat-widget .ch-timer {
    display: inline-block;
    margin-left: 5px;
    color: #4c6a92;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* Raspuns generat de AI (marcaj vizual, ca sa nu para scris de un om) */
#chat-widget .ch-bubble-ai {
    border-left: 3px solid #6f42c1;
}
#chat-widget .ch-bubble-ai::before {
    content: '\1F916 ';
}

/* Linkuri in bule (deschise in tab nou) */
#chat-widget .ch-bubble a {
    color: #0056b3;
    text-decoration: underline;
    word-break: break-all;
}
#chat-widget .ch-row.ch-client .ch-bubble a {
    color: #fff;
}

#chat-widget .ch-typing {
    font-size: 12px;
    color: #6c757d;
    padding: 0 4px 8px;
    display: none;
    align-items: center;
    gap: 5px;
}

#chat-widget .ch-typing.ch-visible {
    display: flex;
}

#chat-widget .ch-typing-dots {
    display: inline-flex;
    gap: 3px;
}

#chat-widget .ch-typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #adb5bd;
    animation: ch-typing-blink 1.1s infinite ease-in-out;
}

#chat-widget .ch-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
#chat-widget .ch-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ch-typing-blink {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1; transform: translateY(-2px); }
}

/* Mesaje si carduri: apar cu o mica animatie, nu brusc. */
#chat-widget .ch-row,
#chat-widget .ch-produse,
#chat-widget .ch-buttons,
#chat-widget .ch-ident {
    animation: ch-fade-in 0.22s ease;
}

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

/* Scrollbar subtire, discreta (Chrome/Edge/Firefox) */
#chat-widget .ch-body {
    scrollbar-width: thin;
    scrollbar-color: #c7cdd4 transparent;
}
#chat-widget .ch-body::-webkit-scrollbar {
    width: 6px;
}
#chat-widget .ch-body::-webkit-scrollbar-thumb {
    background: #c7cdd4;
    border-radius: 4px;
}
#chat-widget .ch-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Carduri produs ────────────────────────────────────────── */
#chat-widget .ch-produse {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 8px;
}

#chat-widget .ch-prod {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 8px;
    cursor: default;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

/* Doar cardurile din lista sunt clickabile (deschid detaliile). */
#chat-widget .ch-prod-click {
    cursor: pointer;
}

#chat-widget .ch-prod:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

#chat-widget .ch-prod:active {
    transform: translateY(0);
}

#chat-widget .ch-prod-img {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
    background: #f1f3f5;
}

#chat-widget .ch-prod-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 20px;
}

#chat-widget .ch-prod-info {
    flex: 1 1 auto;
    min-width: 0;
}

/* Titlu pe o singura linie cu "..." (fara -webkit-line-clamp, care duplica textul). */
#chat-widget .ch-prod-name {
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-widget .ch-prod-price {
    font-size: 13px;
    font-weight: 600;
    color: #007bff;
}

#chat-widget .ch-prod-old {
    color: #6c757d;
    text-decoration: line-through;
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
}

#chat-widget .ch-prod-link {
    display: inline-block;
    margin-top: 3px;
    font-size: 12px;
    color: #007bff;
    text-decoration: underline;
}

/* ── Butoane predefinite ───────────────────────────────────── */
#chat-widget .ch-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0 6px;
}

#chat-widget .ch-btn {
    text-align: left;
    background: #fff;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

#chat-widget .ch-btn:hover {
    background: #007bff;
    color: #fff;
}

#chat-widget .ch-launcher:focus-visible,
#chat-widget .ch-menu:focus-visible,
#chat-widget .ch-close:focus-visible,
#chat-widget .ch-btn:focus-visible,
#chat-widget .ch-prod:focus-visible,
#chat-widget .ch-send:focus-visible,
#chat-widget .ch-ident-btn:focus-visible {
    outline: 2px solid #80bdff;
    outline-offset: 2px;
}

/* ── Bara de input ─────────────────────────────────────────── */
#chat-widget .ch-inputbar {
    display: none;
    border-top: 1px solid #dee2e6;
    padding: 8px;
    background: #fff;
    gap: 8px;
    flex: 0 0 auto;
}

#chat-widget .ch-inputbar.ch-visible {
    display: flex;
}

#chat-widget .ch-input {
    flex: 1 1 auto;
    border: 1px solid #ced4da;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 13.5px;
    outline: none;
    min-width: 0;
}

#chat-widget .ch-input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

#chat-widget .ch-send {
    background: #007bff;
    color: #fff;
    border: 0;
    border-radius: 18px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 13.5px;
}

#chat-widget .ch-send:hover {
    background: #0069d9;
}

/* ── Responsive: full screen pe ecrane mici ────────────────── */
@media (max-width: 640px) {
    #chat-widget {
        right: 16px;
        bottom: 16px;
    }

    #chat-widget .ch-launcher {
        width: 54px;
        height: 54px;
        font-size: 23px;
    }

    /* Panou pe mobil tip „bottom sheet": se intinde EXACT cat continutul si
       sta lipit de josul ecranului, ca sa nu existe spatiu gol (nici sub
       meniu, nici deasupra primului mesaj). Cand mesajele depasesc ecranul,
       creste pana la max-height si .ch-body face scroll. */
    #chat-widget .ch-panel {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        border-radius: 0;
    }

    /* Cand panoul e deschis, ascundem butonul flotant (nu se mai suprapune) */
    #chat-widget.ch-mobile-open .ch-launcher {
        display: none;
    }

    /* Spatiu pentru bara de jos a telefonului (iPhone) */
    #chat-widget .ch-inputbar {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    #chat-widget .ch-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }
}

/* ── Formular identitate (nume + telefon obligatoriu) ──────── */
#chat-widget .ch-ident {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 12px;
    margin: 4px 0 8px;
}

#chat-widget .ch-ident-intro {
    margin: 0 0 10px;
    font-size: 13px;
    color: #495057;
}

#chat-widget .ch-ident-group {
    margin-bottom: 8px;
}

#chat-widget .ch-ident-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 3px;
}

#chat-widget .ch-ident-input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13.5px;
    outline: none;
}

#chat-widget .ch-ident-input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.25);
}

#chat-widget .ch-ident-err {
    color: #dc3545;
    font-size: 12px;
    min-height: 16px;
    margin-bottom: 6px;
}

#chat-widget .ch-ident-btn {
    width: 100%;
    background: #007bff;
    color: #fff;
    border: 0;
    border-radius: 18px;
    padding: 9px 12px;
    font-size: 13.5px;
    cursor: pointer;
}

#chat-widget .ch-ident-btn:hover {
    background: #0069d9;
}

#chat-widget .ch-ident-btn[disabled] {
    opacity: 0.65;
    cursor: default;
}