/*
 * Widgetul de chat Balkan.ro.
 * Culorile și fontul sunt cele ale site-ului (albastru #21439B, Montserrat), ca să pară
 * parte din magazin, nu o fereastră venită de altundeva. Totul e prefixat cu .bai- ca
 * să nu atingem stilurile temei.
 */

.bai-root {
    --bai-blue: #21439B;
    --bai-blue-light: #4286F4;
    --bai-dark: #17181C;
    --bai-grey: #eeeff1;
    --bai-line: #dcdfe6;
    --bai-muted: #6b7280;
    --bai-red: #EA0029;
    --bai-radius: 14px;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Butonul flotant ---------- */

.bai-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--bai-blue);
    color: #fff;
    font: 600 14px/1 "Montserrat", sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(33, 67, 155, .32);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bai-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(33, 67, 155, .4); }
.bai-launcher svg { width: 22px; height: 22px; flex: none; }
.bai-launcher.bai-hidden { display: none; }

/* ---------- Fereastra ---------- */

.bai-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    display: none;
    flex-direction: column;
    width: 392px;
    max-width: calc(100vw - 32px);
    height: min(640px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: var(--bai-radius);
    box-shadow: 0 18px 60px rgba(23, 24, 28, .26);
    overflow: hidden;
}
.bai-panel.bai-open { display: flex; }

.bai-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bai-blue);
    color: #fff;
}
.bai-avatar {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}
.bai-avatar svg { width: 20px; height: 20px; }
.bai-title { font-size: 15px; font-weight: 700; line-height: 1.2; }
.bai-subtitle { font-size: 12px; opacity: .8; }
.bai-header-actions { margin-left: auto; display: flex; gap: 4px; }
.bai-iconbtn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: transparent; color: #fff;
    cursor: pointer; opacity: .85;
}
.bai-iconbtn:hover { background: rgba(255, 255, 255, .15); opacity: 1; }
.bai-iconbtn svg { width: 18px; height: 18px; }

/* ---------- Mesaje ---------- */

.bai-messages {
    flex: 1;
    min-height: 0;                    /* fara asta, flex-ul nu lasa zona sa se micsoreze pe iOS */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bai-msg { max-width: 86%; font-size: 14px; line-height: 1.55; }
.bai-msg.bai-user { align-self: flex-end; }
.bai-msg.bai-bot { align-self: flex-start; width: 100%; max-width: 100%; }
.bai-bubble {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--bai-line);
    color: var(--bai-dark);
    white-space: pre-wrap;
    word-break: break-word;
}
.bai-msg.bai-user .bai-bubble {
    background: var(--bai-blue);
    border-color: var(--bai-blue);
    color: #fff;
}
.bai-bubble table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.bai-bubble th, .bai-bubble td { border: 1px solid var(--bai-line); padding: 5px 7px; text-align: left; }
.bai-bubble th { background: var(--bai-grey); }
.bai-bubble strong { font-weight: 700; }

.bai-typing { display: flex; gap: 4px; padding: 12px 14px; }
.bai-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #b6bcc9;
    animation: bai-bounce 1.2s infinite;
}
.bai-typing span:nth-child(2) { animation-delay: .18s; }
.bai-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes bai-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-5px); opacity: 1 } }

/* ---------- Carduri de produs ---------- */

.bai-products { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bai-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--bai-line);
    border-radius: 12px;
}
.bai-card-img {
    width: 74px; height: 74px; flex: none;
    border-radius: 8px; background: var(--bai-grey);
    object-fit: contain;
}
.bai-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bai-card-name {
    font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--bai-dark);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bai-card-price { font-size: 15px; font-weight: 700; color: var(--bai-blue); }
.bai-card-price del { font-size: 12px; font-weight: 500; color: var(--bai-muted); margin-left: 6px; }
.bai-card-stock { font-size: 11px; color: #16803c; }
.bai-card-stock.bai-out { color: var(--bai-red); }
.bai-card-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.bai-btn {
    padding: 7px 12px;
    border: 1px solid var(--bai-blue);
    border-radius: 8px;
    background: #fff;
    color: var(--bai-blue);
    font: 600 12px/1 "Montserrat", sans-serif;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.bai-btn:hover { background: #f2f5fd; color: var(--bai-blue); }
.bai-btn.bai-primary { background: var(--bai-blue); color: #fff; }
.bai-btn.bai-primary:hover { background: #1b3782; color: #fff; }
.bai-btn[disabled] { opacity: .6; cursor: default; }

/* ---------- Sugestii de start ---------- */

.bai-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bai-starter {
    padding: 7px 12px;
    border: 1px solid var(--bai-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bai-dark);
    font: 500 12px/1.3 "Montserrat", sans-serif;
    cursor: pointer;
    text-align: left;
}
.bai-starter:hover { border-color: var(--bai-blue); color: var(--bai-blue); }

/* ---------- Feedback ---------- */

.bai-feedback { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--bai-muted); }
.bai-fb {
    border: 1px solid var(--bai-line); background: #fff; border-radius: 6px;
    padding: 3px 9px; cursor: pointer; font: 500 12px "Montserrat", sans-serif; color: var(--bai-muted);
}
.bai-fb:hover { border-color: var(--bai-blue); color: var(--bai-blue); }
.bai-fb.bai-active { border-color: var(--bai-blue); background: #eef2fd; color: var(--bai-blue); }

/* ---------- Zona de scriere ---------- */

.bai-composer { border-top: 1px solid var(--bai-line); background: #fff; padding: 10px 12px 8px; }
.bai-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.bai-input {
    flex: 1;
    max-height: 110px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--bai-line);
    border-radius: 10px;
    font: 400 14px/1.4 "Montserrat", sans-serif;
    color: var(--bai-dark);
    resize: none;
    outline: none;
}
.bai-input:focus { border-color: var(--bai-blue-light); }
.bai-send {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: var(--bai-blue); color: #fff; cursor: pointer;
}
.bai-send[disabled] { opacity: .45; cursor: default; }
.bai-send svg { width: 18px; height: 18px; }
.bai-disclaimer { margin: 7px 2px 0; font-size: 10.5px; line-height: 1.3; color: var(--bai-muted); text-align: center; }

/*
 * Widgeturile fixe ale site-ului (butonul „Beneficii" de la theMarketer) stau pe
 * z-index maxim, deci nu pot fi acoperite de chat. Pe telefon, unde chatul ocupa tot
 * ecranul, ar cadea fix peste zona de scris — asa ca le ascundem cat timp chatul e
 * deschis si revin imediat ce se inchide. Pe desktop nu se suprapun, deci le lasam.
 */
@media (max-width: 600px) {
    body.bai-chat-open #theMarketer-launcher-widget,
    body.bai-chat-open .mktl-widget-toggle,
    body.bai-chat-open .mktl-widget-container,
    body.bai-chat-open .product-controls {
        display: none !important;
    }
}

/* Pe telefon, cat timp chatul e deschis, pagina din spate nu se mai misca. */
body.bai-chat-open {
    overscroll-behavior: contain;
}

/* ---------- Telefon ---------- */

@media (max-width: 600px) {
    /*
     * Pe telefon chatul ocupa tot ecranul. Il ancoram pe toate cele patru laturi in loc
     * sa-i dam o inaltime: „100dvh" plus „bottom: 0" se bat cap in cap pe Safari iOS si
     * impingeau zona de scris sub bara de jos.
     */
    .bai-panel {
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%; max-width: 100%;
        height: auto;
        max-height: none;        /* limita de pe desktop ar taia 40px din ecran */
        border-radius: 0;
    }

    /*
     * Cand tastatura e deschisa, iOS nu micsoreaza pagina — doar zona vizibila. Atunci
     * chat.js masoara inaltimea reala si o pune in --bai-vh, iar panoul se potriveste
     * peste ce a mai ramas din ecran (altfel butonul de trimitere ramane sub tastatura).
     */
    .bai-panel.bai-viewport {
        bottom: auto;
        height: var(--bai-vh, 100%);
    }

    /* Spatiu pentru bara de gesturi de pe iPhone, ca butonul sa nu cada sub ea. */
    .bai-composer { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

    /*
     * 16px nu e o alegere estetica: sub 16px, Safari pe iOS mareste automat pagina cand
     * intri in casuta, iar layoutul iese din ecran (butonul de trimis ajunge in afara).
     */
    .bai-input { font-size: 16px; }

    .bai-launcher {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding: 12px;
    }
    .bai-launcher span { display: none; }
    .bai-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .bai-launcher, .bai-typing span { transition: none; animation: none; }
}