/* AI-assistent (aibot) — 1-op-1 overgenomen uit de WHMCS-kennisbank
   (templates/lagom2 .../vars/custom.css, aibot-blok) zodat de popup er exact
   hetzelfde uitziet. Onderaan: /new-popup-aanvullingen (sluitknop, hidden). */
.aibot-container {
    max-width: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(10, 15, 30, 0.18), 0 2px 8px rgba(23, 25, 28, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 500px;
    border: 1px solid #e9eaec;
}

/* Header */
.aibot-header {
    background: linear-gradient(to top right, #26479A, #4570B5);
    color: white;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aibot-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 15, 30, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.aibot-header-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.aibot-header-info {
    flex: 1;
}

.aibot-header-title {
    font-size: 15px;
    font-weight: 600;
}

.aibot-status {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aibot-status-dot {
    width: 8px;
    height: 8px;
    background: #56D16C;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

/* Messages Area */
.aibot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
}

/* Message Bubbles */
.aibot-message {
    max-width: 85%;
    padding: 12px 15px;
    border-radius: 14px;
    line-height: 1.55;
    font-size: 13.5px;
    word-wrap: break-word;
}

.aibot-message-user {
    background: #2F61AD;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}

.aibot-message-assistant {
    background: #f0f2f6;
    color: #17191c;
    align-self: flex-start;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 14px;
}

/* Markdown styling in assistant messages */
.aibot-message-assistant p {
    margin: 0 0 10px 0;
}

.aibot-message-assistant p:last-child {
    margin-bottom: 0;
}

.aibot-message-assistant ol,
.aibot-message-assistant ul {
    margin: 10px 0;
    padding-left: 20px;
}

.aibot-message-assistant li {
    margin-bottom: 6px;
}

.aibot-message-assistant strong {
    font-weight: 600;
    color: #1a1a1a;
}

.aibot-message-assistant code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

.aibot-message-assistant a {
    color: #0066cc;
    text-decoration: none;
}

.aibot-message-assistant a:hover {
    text-decoration: underline;
}

/* Typing Indicator */
.aibot-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 12px;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
}

.aibot-typing span {
    width: 8px;
    height: 8px;
    background: #0066cc;
    border-radius: 50%;
    animation: aibot-typing 1.4s infinite;
    opacity: 0.4;
}

.aibot-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.aibot-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aibot-typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Input Area */
.aibot-input-container,
.aibot-input-area {
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    display: flex;
    gap: 12px;
}

.aibot-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f0f2f6;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.aibot-input:focus {
    border-color: #2F61AD;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(38, 71, 154, 0.14);
}

.aibot-input:disabled {
    background: #f9fafb;
}

.aibot-input::placeholder {
    color: #9ca3af;
}

.aibot-send-btn,
.aibot-send {
    width: 44px;
    height: 44px;
    background: #2F61AD;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.aibot-send-btn:hover:not(:disabled),
.aibot-send:hover:not(:disabled) {
    background: #26479A;
}

.aibot-send-btn:disabled,
.aibot-send:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Error Message */
.aibot-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin: 0 16px 16px;
    border: 1px solid #fecaca;
}

/* Footer */
.aibot-footer {
    padding: 8px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e8e8e8;
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* New Chat Button */
.aibot-new-chat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.aibot-new-chat:hover {
    background: #f3f4f6;
    color: #374151;
    border-color: #9ca3af;
}

.aibot-new-chat svg {
    opacity: 0.7;
}

.aibot-new-chat:hover svg {
    opacity: 1;
}

/* Copy Chat Button */
.aibot-copy-chat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.aibot-copy-chat:hover {
    background: #f3f4f6;
    color: #374151;
    border-color: #9ca3af;
}

.aibot-copy-chat svg {
    opacity: 0.7;
}

.aibot-copy-chat:hover svg {
    opacity: 1;
}

/* Copy to Ticket Button */
.aibot-copy-to-ticket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.aibot-copy-to-ticket:hover {
    background: #0052a3;
}

/* Expand Button */
.aibot-expand-btn,
.aibot-expand {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.aibot-expand-btn:hover,
.aibot-expand:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Zwevende launcher rechtsonder (site-breed, opent de chat): tekstballon
   "Hulp nodig?" + bol met het supportmannetje, samen één knop. */
.aibot-launcher {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    border: 0; padding: 0; background: none; cursor: pointer;
    transition: transform .15s ease;
}
.aibot-launcher:hover { transform: translateY(-3px); }
.aibot-launcher:focus-visible { outline: 3px solid rgba(16, 98, 254, .6); outline-offset: 4px; border-radius: 999px; }
.aibot-launcher-label {
    background: #fff; color: #17191c;
    font-family: 'Roboto', system-ui, sans-serif; font-size: 13.5px; font-weight: 700;
    padding: 10px 16px; border-radius: 999px 999px 4px 999px;
    box-shadow: 0 8px 24px rgba(10, 15, 30, .22), 0 1px 3px rgba(10, 15, 30, .12);
    white-space: nowrap;
}
.aibot-launcher-bol {
    position: relative; flex: none;
    width: 62px; height: 62px; border-radius: 50%;
    background: linear-gradient(135deg, #152a80, #1d65af);
    box-shadow: 0 10px 30px rgba(10, 15, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    display: grid; place-items: center;
}
.aibot-launcher:hover .aibot-launcher-bol { box-shadow: 0 16px 38px rgba(10, 15, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.aibot-launcher img { width: 48px; height: 48px; border-radius: 50%; display: block; }
.aibot-launcher-stip {
    position: absolute; top: 2px; right: 2px; width: 13px; height: 13px;
    border-radius: 50%; background: #36c055; border: 2px solid #fff;
}
@media (max-width: 540px) { .aibot-launcher-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .aibot-launcher { transition: none; } }
@media print { .aibot-launcher { display: none; } }

/* Modal Overlay */
.aibot-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    backdrop-filter: blur(2px);
}

.aibot-overlay-visible,
.aibot-overlay.active {
    display: block;
}

/* Expanded Modal State */
.aibot-container.aibot-expanded,
.aibot-container.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    height: 70vh;
    z-index: 9999;
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.aibot-container.aibot-expanded .aibot-messages,
.aibot-container.expanded .aibot-messages {
    padding: 24px;
}

.aibot-container.aibot-expanded .aibot-message,
.aibot-container.expanded .aibot-message {
    max-width: 75%;
    font-size: 15px;
}

/* ==========================================================================
   Kennisbank specific styles
   ========================================================================== */

.aibot-kb {
    margin-bottom: 20px;
}

.aibot-kb .aibot-footer {
    justify-content: space-between;
}

.aibot-kb .aibot-footer .aibot-new-chat {
    order: 2;
    margin-left: auto;
}

/* ==========================================================================
   Feedback Sterren
   ========================================================================== */

.aibot-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.aibot-feedback-label {
    font-size: 11px;
    color: #6b7280;
}

.aibot-stars {
    display: flex;
    gap: 2px;
}

.aibot-star {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    font-size: 16px;
    color: #d1d5db;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.aibot-star:hover {
    transform: scale(1.15);
}

.aibot-star.active,
.aibot-star:hover {
    color: #ffd166;
}

.aibot-feedback-thanks {
    font-size: 11px;
    color: #22c55e;
    font-weight: 500;
}

/* ==========================================================================
   Image Upload
   ========================================================================== */

.aibot-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aibot-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.aibot-input-row .aibot-input {
    flex: 1;
}

/* Upload knop */
.aibot-upload-btn {
    width: 44px;
    height: 44px;
    background: #ECF0FF;
    color: #26479A;
    border: 1px solid rgba(38, 71, 154, 0.35);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.aibot-upload-btn:hover {
    background: #dfe7ff;
    color: #26479A;
}

.aibot-upload-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.aibot-upload-btn svg {
    width: 20px;
    height: 20px;
}

/* Verborgen file input */
.aibot-file-input {
    display: none;
}

/* Preview container */
.aibot-image-preview {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.aibot-image-preview.has-images {
    display: flex;
}

/* Individuele preview */
.aibot-preview-item {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d1d5db;
}

.aibot-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aibot-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.aibot-preview-remove:hover {
    background: #dc2626;
}

/* Afbeeldingen in chat berichten */
.aibot-message-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.aibot-message-image {
    max-width: 120px;
    max-height: 120px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.aibot-message-image:hover {
    transform: scale(1.05);
}

/* Lightbox voor grote weergave */
.aibot-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.aibot-lightbox.active {
    display: flex;
}

.aibot-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.aibot-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aibot-lightbox-close:hover {
    background: rgba(255,255,255,0.2);
}


/* ==========================================================================
   /new-popup-aanvullingen
   ========================================================================== */
/* Verborgen tot de klant hem opent (dashboard-hero of ?ai_session=). */
.aibot-container[hidden]{display:none!important}
/* Sluitknop in de header (de kennisbank-variant had alleen uitklappen). */
.aibot-sluit-btn{background:rgba(255,255,255,.15);border:0;border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex:none}
.aibot-sluit-btn:hover{background:rgba(255,255,255,.28)}
@media(max-width:640px){.aibot-container.aibot-expanded{width:96%;height:82vh}}

/* Privacy-disclaimer direct onder het invoerveld: subtiel, gecentreerd. */
.aibot-privacy {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin: 8px 0 0; padding: 0 4px;
    font-size: 11px; color: #979ba4; line-height: 1.45; text-align: center;
}
.aibot-privacy svg { flex: none; }
.aibot-privacy span { min-width: 0; }

/* ==========================================================================
   Redesign 2026-08 — wok-designtaal: merkgradient-header, brand-primary,
   pill-vormen en zachtere vlakken. Overrides op het geporte WHMCS-blok
   hierboven; het origineel blijft onaangeraakt.
   ========================================================================== */
.aibot-container { border-radius: 18px; box-shadow: 0 24px 60px rgba(10, 15, 30, .28), 0 2px 10px rgba(10, 15, 30, .12); }
.aibot-container.aibot-expanded, .aibot-container.expanded { border-radius: 18px; max-width: 760px; height: min(76vh, 780px); }
.aibot-header { background: linear-gradient(90deg, #152a80, #1d65af); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); padding: 12px 18px; }
.aibot-messages { background: #f7f8fa; }
.aibot-message { animation: aibot-in .18s ease both; }
@keyframes aibot-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aibot-message-user { background: #1062fe; }
.aibot-message-assistant { background: #fff; border: 1px solid #e9eaec; box-shadow: 0 1px 3px rgba(10, 15, 30, .05); }
.aibot-input { border-radius: 999px; }
.aibot-input:focus { border-color: #1062fe; box-shadow: 0 0 0 3px rgba(16, 98, 254, .15); }
/* Knoppen volgens de knoppengids (docs/knoppen-bestelflow.md): maat klein
   (13px/700, 8px 15px), pill-radius, primair effen merkblauw met kleine
   schaduw, secundair blauw-tint, stil grijs; icoonknoppen als cirkel. */
.aibot-send-btn, .aibot-send { background: var(--btn-primary, #1d65af); border-radius: 50%; box-shadow: 0 1px 3px rgba(29, 101, 175, .35); transition: background .15s ease, transform .15s ease; }
.aibot-send-btn:hover:not(:disabled), .aibot-send:hover:not(:disabled) { background: #17548f; transform: translateY(-1px); }
.aibot-upload-btn { border-radius: 50%; background: rgba(16, 98, 254, .08); color: #1d65af; border: 0; }
.aibot-upload-btn:hover { background: rgba(16, 98, 254, .15); color: #1d65af; }
.aibot-new-chat, .aibot-copy-chat, .aibot-copy-to-ticket { border: 0; border-radius: 50px; padding: 8px 15px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.aibot-new-chat { background: rgba(16, 98, 254, .08); color: #1d65af; }
.aibot-new-chat:hover { background: rgba(16, 98, 254, .15); color: #1d65af; }
.aibot-copy-chat { background: #f0f2f6; color: #5e636e; }
.aibot-copy-chat:hover { background: #e6e9ef; color: #5e636e; }
.aibot-copy-to-ticket { background: var(--btn-primary, #1d65af); color: #fff; box-shadow: 0 1px 3px rgba(29, 101, 175, .35); }
.aibot-copy-to-ticket:hover { background: #17548f; }
.aibot-sluit-btn, .aibot-expand-btn, .aibot-expand { border-radius: 999px; }
.aibot-messages::-webkit-scrollbar { width: 8px; }
.aibot-messages::-webkit-scrollbar-thumb { background: rgba(13, 20, 45, .18); border-radius: 999px; }
.aibot-messages::-webkit-scrollbar-thumb:hover { background: rgba(13, 20, 45, .3); }
@media (prefers-reduced-motion: reduce) { .aibot-message { animation: none; } }

/* ==========================================================================
   Gesprekken-zijbalk: eerdere gesprekken van de ingelogde klant, links in de
   popup. Op brede schermen een vaste kolom, op smalle schermen een uitschuif-
   paneel over de berichten heen (toggle in de header).
   ========================================================================== */
.aibot-body { display: flex; flex: 1 1 auto; min-height: 0; position: relative; }
.aibot-hoofd { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.aibot-zijbalk { width: 240px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f2f5fb; border-right: 1px solid #e9eaec; }
.aibot-zijbalk[hidden] { display: none; }
.aibot-zijbalk-nieuw { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--btn-primary, #1d65af); color: #fff; border: 0; border-radius: 50px; padding: 8px 15px; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(29, 101, 175, .35); cursor: pointer; transition: background .15s ease; }
.aibot-zijbalk-nieuw:hover { background: #17548f; }
.aibot-zijbalk-lijst { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.aibot-zijbalk-lijst::-webkit-scrollbar { width: 8px; }
.aibot-zijbalk-lijst::-webkit-scrollbar-thumb { background: rgba(13, 20, 45, .18); border-radius: 999px; }
.aibot-gesprek-btn { width: 100%; text-align: left; background: none; border: 0; border-radius: 12px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background .15s ease; }
.aibot-gesprek-btn:hover { background: #e6ecf9; }
.aibot-gesprek-btn[aria-current="true"] { background: #ECF0FF; box-shadow: inset 0 0 0 1px rgba(16, 98, 254, .3); }
.aibot-gesprek-titel { font-size: 12.5px; font-weight: 600; color: #17191c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aibot-gesprek-datum { font-size: 11px; color: #5a6270; }
.aibot-zijbalk-leeg { margin: 2px 2px 0; font-size: 12px; color: #5a6270; }
/* Gesprekken-knop in de header: gelabelde witte pill; open-stand = volle
   witte knop met merkblauwe tekst, zodat de stand direct afleesbaar is. */
.aibot-gesprekken-toggle { display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .38); border-radius: 50px; padding: 7px 13px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; flex: none; transition: background .15s ease, color .15s ease; }
.aibot-gesprekken-toggle:hover { background: rgba(255, 255, 255, .26); }
.aibot-gesprekken-toggle[aria-expanded="true"] { background: #fff; border-color: #fff; color: #1d65af; }
.aibot-gesprekken-toggle svg { flex: none; }
@media (max-width: 640px) {
    .aibot-gesprekken-toggle-tekst { display: none; }
    .aibot-gesprekken-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; }
}
@media (max-width: 719px) {
    .aibot-zijbalk { position: absolute; top: 0; bottom: 0; left: 0; width: min(80%, 280px); z-index: 6; box-shadow: 12px 0 30px rgba(10, 15, 30, .18); }
}