/* ================================================================
   ChatXpert - Combined Stylesheet
   ================================================================
   Bevat alle CSS voor het admin panel, de chatbot frontend
   en de authenticatie pagina.
   ================================================================ */

/* ================================================================
   SECTIE 1: ADMIN PANEL (was: css/config.css)
   ================================================================ */
/**
 * ============================================
 * RAG Editor - Config Admin Stylesheet
 * ============================================
 * OpenCart-inspired admin panel styling
 */

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Forceer light color-scheme op alle niveaus zodat macOS dark mode
   geen witte tekst in formulierelementen veroorzaakt */
:root, html {
    color-scheme: light;
}
body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: #f5f5f5;
    color-scheme: light;
}

/* ============================================
   LAYOUT: OpenCart-style
   ============================================ */
.wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: linear-gradient(180deg, #2a3f54 0%, #1a2a3a 100%);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}
/* Offset main content for fixed sidebar */
.main-content {
    margin-left: 220px;
}
.sidebar-header {
    padding: 20px;
    background: #23527c;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header h1 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.sidebar-header .admin-label {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    margin-top: 4px;
}
.sidebar-header .enterprise-label {
    display: block;
    color: #f39c12;
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.sidebar-header .professional-label {
    display: block;
    color: #b388ff;
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.sidebar-header .starter-label {
    display: block;
    color: #2ecc71;
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.sidebar-menu {
    list-style: none;
    padding: 10px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sidebar-menu-bottom {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
}
.sidebar-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sidebar-menu a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.2s;
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-left: 3px solid #3498db;
}
.sidebar-menu i {
    width: 24px;
    margin-right: 10px;
    text-align: center;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Top Header */
.top-header {
    background: #fff;
    padding: 15px 25px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.breadcrumb {
    color: #666;
    font-size: 13px;
}
.breadcrumb a {
    color: #3498db;
    text-decoration: none;
}
.page-title {
    font-size: 24px;
    font-weight: 300;
    color: #333;
}

/* Content Area */
.content-area {
    flex: 1;
    padding: 25px;
    overflow: auto;
}

/* Panel */
.panel {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-radius: 4px 4px 0 0;
}
.panel-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-body {
    padding: 20px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.btn i {
    font-size: 14px;
}
.btn-primary {
    background: #3498db;
    color: #fff;
}
.btn-primary:hover {
    background: #2980b9;
}
.btn-success {
    background: #27ae60;
    color: #fff;
}
.btn-success:hover {
    background: #1e8449;
}
.btn-danger {
    background: #e74c3c;
    color: #fff;
}
.btn-danger:hover {
    background: #c0392b;
}
.btn-warning {
    background: #f39c12;
    color: #fff;
}
.btn-warning:hover {
    background: #d68910;
}
.btn-secondary {
    background: #95a5a6;
    color: #fff;
}
.btn-secondary:hover {
    background: #7f8c8d;
}
.btn-info {
    background: #17a2b8;
    color: #fff;
}
.btn-info:hover {
    background: #138496;
}
.btn-orange {
    background: #fd7e14;
    color: #fff;
}
.btn-orange:hover {
    background: #e8690a;
}
/* Kopieer-knop boven een code-blok in het admin panel */
.btn-copy-code-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.btn-copy-code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1.6;
}
.btn-copy-code:hover {
    background: #0b5ed7;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.toolbar-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #1a3a5c;
}
/* Forceer donkere tekst op admin formulierelementen (macOS dark mode fix) */
.wrapper input, .wrapper textarea, .wrapper select,
.auth-container input, .auth-container textarea, .auth-container select {
    color: #333;
    -webkit-text-fill-color: #333;
    color-scheme: light;
}
.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #edf6ff;
    transition: border-color 0.2s, background-color 0.2s;
    -webkit-text-fill-color: #333;
}
.form-control::placeholder {
    color: #aaa;
    opacity: 1;
}
.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
    background-color: #fff;
    color: #333;
    -webkit-text-fill-color: #333;
}
textarea.form-control {
    min-height: 100px;
    resize: vertical;
    font-family: 'Consolas', 'Monaco', monospace;
}
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.form-inline {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}
.form-inline .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* ============================================
   META FIELDS
   ============================================ */
.meta-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 4px;
    align-items: flex-end;
}
.meta-fields .form-group {
    margin-bottom: 0;
}
.meta-fields input {
    width: 200px;
}
.meta-fields input.meta-wide {
    width: 600px;
}
.meta-info {
    color: #666;
    font-size: 13px;
    margin-left: auto;
}

/* ============================================
   DATA TABLE
   ============================================ */
.table-container {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    height: 600px;
    min-height: 200px;
    max-height: 800px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    background: #f5f5f5;
    padding: 12px 10px;
    text-align: left;
    font-weight: 700;
    color: #1a3a5c;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    cursor: pointer;
    user-select: none;
}
.data-table th:hover {
    background: #e8e8e8;
}
.data-table th i {
    margin-left: 5px;
    color: #999;
}
.data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.data-table tr:nth-child(even) {
    background: #f0f0f0;
}
.data-table tr:nth-child(odd) {
    background: #fff;
}
.data-table tr:hover {
    background: #eef5fc;
}
.data-table tr.selected {
    background: #e3f2fd;
}
.data-table input[type="text"],
.data-table textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    -webkit-text-fill-color: #333;
}
.data-table textarea {
    min-height: 60px;
    max-height: 130px;
    resize: vertical;
}
.data-table input:focus,
.data-table textarea:focus {
    outline: none;
    border-color: #3498db;
}

/* RAG tabel kolomkleuren + lettertypes */
.data-table td:nth-child(3) input[type="text"] {
    background-color: #f0fff4; /* lichtgroen – Categorie */
    font-family: 'Consolas', 'Monaco', monospace;
}
.data-table td:nth-child(4) input[type="text"] {
    background-color: #fff5eb; /* lichtoranje – Kernwoorden */
    font-family: 'Consolas', 'Monaco', monospace;
}
.data-table td:nth-child(5) textarea {
    background-color: #e8f4fd; /* lichtblauw – Omschrijving */
}

.col-checkbox {
    width: 40px;
    text-align: center;
}
.col-categorie {
    width: 234px; /* 180 × 1.3 */
}
.col-kernwoorden {
    width: 325px; /* 250 × 1.3 */
}
.col-omschrijving {
    min-width: 400px;
}
.row-number {
    color: #999;
    font-size: 11px;
    width: 30px;
    text-align: center;
}

/* ============================================
   TABS (for content sections)
   ============================================ */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* ============================================
   STATUS & ALERTS
   ============================================ */
.status-bar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    padding: 12px 24px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    max-width: 400px;
    font-size: 13px;
    font-weight: 500;
}
.status-bar.error {
    background: #ffebee;
    color: #c62828;
}
.status-bar.warning {
    background: #fff3e0;
    color: #ef6c00;
}
.status-bar.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================
   HIDDEN FILE INPUT
   ============================================ */
.hidden-input {
    display: none;
}

/* ============================================
   LOADING OVERLAY
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loading-overlay.show {
    display: flex;
}
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   MODEL RULES TABLE
   ============================================ */
.model-rules-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.model-rules-table th,
.model-rules-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}
.model-rules-table th {
    background: #f5f5f5;
    font-weight: 700;
    color: #1a3a5c;
}
.model-rules-table input {
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.model-rules-table .btn-remove {
    padding: 4px 8px;
    font-size: 12px;
}

/* Footer */
.footer {
    padding: 15px 25px;
    text-align: center;
    color: #999;
    font-size: 12px;
    border-top: 1px solid #e0e0e0;
    background: #fff;
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    margin-bottom: 15px;
    font-weight: 700;
    color: #1a3a5c;
    font-size: 15px;
}

/* ============================================
   LOG VIEWER - Apache-style dual panel
   ============================================ */
.logs-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0;
    height: calc(100vh - 320px);
    min-height: 500px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

/* File Explorer Panel (Left) */
.logs-explorer {
    width: 750px;
    min-width: 650px;
    max-width: 850px;
    flex: 0 0 750px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 2px solid #ccc;
    height: 100%;
}
.logs-explorer-header {
    padding: 10px 15px;
    background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logs-explorer-header strong {
    color: #333;
}
.logs-explorer-header i {
    color: #f0ad4e;
    margin-right: 6px;
}
.select-all-logs {
    font-size: 12px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.select-all-logs input {
    cursor: pointer;
}
.logs-file-list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    background: #fff;
}
.log-file-item {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
    gap: 8px;
    transition: background 0.1s;
}
.log-file-item:hover {
    background: #f5f5f5;
}
.log-file-item.active {
    background: #e8f4fc;
}
.log-file-item input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.log-file-name {
    flex: 1;
    cursor: pointer;
    color: #0066cc;
    font-size: 13px;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.log-file-name:hover {
    text-decoration: underline;
    color: #003d7a;
}
.log-file-name i {
    color: #666;
    margin-right: 6px;
}
.log-file-size {
    font-size: 12px;
    color: #666;
    font-family: monospace;
    flex-shrink: 0;
    min-width: 70px;
    text-align: right;
}
.log-file-empty {
    padding: 30px 20px;
    text-align: center;
    color: #999;
    font-style: italic;
}
.logs-explorer-footer {
    padding: 8px 15px;
    background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
    border-top: 1px solid #ccc;
    font-size: 12px;
    color: #555;
    text-align: left;
}

/* Log Content Viewer Panel (Right) */
.logs-viewer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-width: 0;
    height: 100%;
}
.logs-viewer-header {
    padding: 10px 15px;
    background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}
.logs-viewer-header i {
    color: #337ab7;
    margin-right: 6px;
}
.logs-content {
    flex: 1;
    margin: 0;
    padding: 15px;
    overflow: auto;
    background: #fafafa;
    color: #333;
    font-size: 13px;
    line-height: 1.5;
    border: none;
}

/* JSON Log Viewer - Structured sections */
.log-section {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.log-section-header {
    padding: 8px 12px;
    background: linear-gradient(to bottom, #f5f7fa, #e8ecf1);
    font-weight: 600;
    font-size: 13px;
    color: #1a3a5c;
    border-bottom: 1px solid #e0e0e0;
}
.log-section-header i {
    margin-right: 6px;
    color: #5a7ea8;
    width: 14px;
    text-align: center;
}
.log-section-body {
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
    word-wrap: break-word;
}
.log-section-pre {
    white-space: pre-wrap;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    background: #f8f9fa;
    max-height: 300px;
    overflow-y: auto;
}
/* Log section color coding */
.log-section-time {
    border-left: 4px solid #f0ad4e;
}
.log-section-time .log-section-body {
    background: #fff8ee;
}
.log-section-user {
    border-left: 4px solid #5cb85c;
}
.log-section-user .log-section-body {
    background: #f0faf0;
}
.log-section-assistant {
    border-left: 4px solid #5bc0de;
}
.log-section-assistant .log-section-body {
    background: #f0f8ff;
}
.log-section-detail {
    border-left: 3px solid #95a5a6;
}

/* Entry dividers and labels for multi-entry logs */
.log-entries-count {
    font-size: 12px;
    color: #666;
    padding: 8px 12px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 16px;
    font-weight: 600;
}
.log-entries-count i {
    margin-right: 6px;
    color: #5a7ea8;
}
.log-entry {
    margin-bottom: 8px;
}
.log-entry-divider {
    display: flex;
    align-items: center;
    margin: 24px 0 16px 0;
    gap: 12px;
}
.log-entry-divider::before,
.log-entry-divider::after {
    content: '';
    flex: 1;
    height: 3px;
    background: linear-gradient(to right, #3498db, #95a5a6);
    border-radius: 2px;
}
.log-entry-divider span {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #3498db;
    padding: 3px 14px;
    border-radius: 12px;
    white-space: nowrap;
}
.log-divider {
    border: none;
    border-top: 2px dashed #ccc;
    margin: 20px 0 12px 0;
}
.log-detail-header {
    font-weight: 700;
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}
.log-detail-header i {
    margin-right: 6px;
    color: #95a5a6;
}
.log-token-table {
    width: 100%;
    max-width: 350px;
    border-collapse: collapse;
    font-size: 12px;
}
.log-token-table th,
.log-token-table td {
    padding: 4px 10px;
    text-align: right;
    border-bottom: 1px solid #eee;
}
.log-token-table th {
    font-weight: 600;
    color: #555;
    background: #f5f5f5;
}
.log-token-table td:first-child,
.log-token-table th:first-child {
    text-align: left;
}

/* Apache-style file table */
.apache-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.apache-table th {
    background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
    padding: 8px 10px;
    text-align: left;
    font-weight: normal;
    color: #333;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    font-size: 13px;
}
.apache-table th.col-check {
    width: 30px;
    text-align: center;
}
.apache-table th.col-name {
    width: auto;
}
.apache-table th.col-size {
    width: 100px;
    text-align: right;
    white-space: nowrap;
}
.apache-table th.col-date {
    width: 140px;
}
.apache-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.apache-table td.col-check {
    text-align: center;
}
.apache-table td.col-size {
    text-align: right;
    font-family: monospace;
    color: #666;
    white-space: nowrap;
}
.apache-table td.col-date {
    font-family: monospace;
    color: #666;
    font-size: 11px;
}
.log-file-row {
    transition: background 0.1s;
}
.log-file-row:hover {
    background: #f5f5f5;
}
.log-file-row.active {
    background: #e8f4fc;
}
.log-file-link {
    color: #0066cc;
    text-decoration: none;
    font-family: monospace;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.apache-table td.col-name {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-file-link:hover {
    text-decoration: underline;
    color: #003d7a;
}
.log-file-link i {
    color: #888;
    margin-right: 5px;
}

/* Sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.sortable:hover {
    background: #d0d0d0;
}
.sortable i {
    margin-left: 5px;
    opacity: 0.6;
    font-size: 11px;
}
.sortable i.fa-sort-up,
.sortable i.fa-sort-down {
    opacity: 1;
    color: #0066cc;
}

/* ============================================
   RAG FILE BROWSER
   ============================================ */
.rag-files-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: linear-gradient(to bottom, #f7f7f7, #e9e9e9);
    border-bottom: 1px solid #ccc;
}
.rag-files-toolbar .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}
.current-file-indicator {
    margin-left: auto;
    font-size: 13px;
    color: #555;
}
.current-file-indicator i {
    color: #27ae60;
    margin-right: 4px;
}
.current-file-indicator strong {
    color: #27ae60;
}
.rag-files-list {
    max-height: 250px;
    overflow-y: auto;
}
.rag-file-row {
    transition: background 0.1s;
}
.rag-file-row:hover {
    background: #f5f5f5;
}
.rag-file-row.active {
    background: #e8f4fc;
}
.rag-file-link {
    color: #0066cc;
    text-decoration: none;
    font-family: monospace;
}
.rag-file-link:hover {
    text-decoration: underline;
    color: #003d7a;
}
.rag-file-link.active {
    color: #27ae60;
    font-weight: bold;
}
.badge-current {
    display: inline-block;
    padding: 2px 6px;
    background: #27ae60;
    color: #fff;
    font-size: 10px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.btn-xs {
    padding: 3px 6px;
    font-size: 11px;
}
.apache-table .col-icon {
    width: 30px;
    text-align: center;
}
.apache-table .col-actions {
    width: 60px;
    text-align: center;
}

/* ============================================
   SIDEBAR DIVIDER
   ============================================ */
.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 10px 15px;
    border: none;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-container {
    text-align: center;
    padding: 40px 20px;
    max-width: 500px;
    margin: 0 auto;
}
.about-logo {
    margin-bottom: 20px;
}
.about-logo img {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.about-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 10px 0;
}
.about-version {
    font-size: 16px;
    color: #666;
    margin: 0 0 30px 0;
}
.about-info {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}
.about-info a {
    color: #0066cc;
    text-decoration: none;
}
.about-info a:hover {
    text-decoration: underline;
}

/* ============================================
   DASHBOARD INFO TABLES
   ============================================ */
.dashboard-info-table {
    width: 100%;
    border-collapse: collapse;
}
.dashboard-info-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    vertical-align: middle;
}
.dashboard-info-table td.dash-label {
    font-weight: 600;
    color: #555;
    width: 130px;
    white-space: nowrap;
}
.dashboard-info-table a {
    color: #0066cc;
    text-decoration: none;
}
.dashboard-info-table a:hover {
    text-decoration: underline;
}

/* ============================================
   USAGE CHARTS (bar graphs)
   ============================================ */
.usage-chart-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    min-height: 220px;
}
.usage-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    margin-bottom: 12px;
}
.usage-chart-title i {
    margin-right: 4px;
    color: #667eea;
}
.usage-chart {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 180px;
    /* Ruimte bovenaan voor de absoluut gepositioneerde waarde-labels */
    padding-top: 22px;
}
.usage-chart-yaxis {
    position: relative;
    width: 40px;
    flex-shrink: 0;
    height: 100%;
    margin-right: 4px;
}
.usage-yaxis-label {
    position: absolute;
    right: 4px;
    font-size: 11px;
    color: #999;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: monospace;
}
.usage-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex: 1;
    height: 100%;
    position: relative;
    min-width: 0;
}
.usage-chart-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed #e0e0e0;
    pointer-events: none;
    z-index: 0;
}
.usage-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}
/* Waarde-label zweeft absoluut boven de balk, buiten de flex-flow */
.usage-bar-value {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
}
.usage-bar {
    width: 100%;
    max-width: 48px;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.4s ease;
    position: relative;
    overflow: visible;
}
.usage-bar:hover {
    opacity: 0.85;
    cursor: default;
}
.usage-bar-label {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    white-space: nowrap;
    text-align: center;
}
.usage-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    color: #aaa;
    font-style: italic;
    font-size: 13px;
}
@media (max-width: 768px) {
    #usageChartsContainer {
        grid-template-columns: 1fr !important;
    }
    .usage-chart {
        height: 120px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Token limit progress bar */
.token-limit-track {
    width: 100%;
    height: 18px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.token-limit-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease, background 0.4s ease;
    min-width: 2px;
}
body.dark-mode .token-limit-track {
    background: #2a2a4a;
}
body.dark-mode #tokenLimitTitle {
    color: #ccc;
}
body.dark-mode #tokenLimitInfo {
    color: #aaa !important;
}
body.dark-mode #tokenLimitUsed,
body.dark-mode #tokenLimitMax {
    color: #888;
}

body.dark-mode .dashboard-info-table td {
    border-bottom-color: #444;
}
body.dark-mode .dashboard-info-table td.dash-label {
    color: #aaa;
}
body.dark-mode .dashboard-info-table a {
    color: #6db3f2;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet and smaller screens */
@media screen and (max-width: 1200px) {
    .logs-explorer {
        width: 500px;
        min-width: 400px;
        flex: 0 0 500px;
    }
    .logs-container {
        height: calc(100vh - 280px);
        min-height: 400px;
    }
}

/* Small tablets / large phones */
@media screen and (max-width: 992px) {
    .wrapper {
        flex-direction: column;
    }
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: column;
        min-height: auto;
    }
    .main-content {
        margin-left: 0;
    }
    .sidebar-header {
        padding: 15px;
    }
    .sidebar-header h1 {
        font-size: 16px;
    }
    .sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 5px;
        gap: 2px;
    }
    .sidebar-menu li {
        border-bottom: none;
        flex: 0 0 auto;
    }
    .sidebar-menu a {
        padding: 10px 12px;
        font-size: 12px;
    }
    .sidebar-menu i {
        width: auto;
        margin-right: 6px;
    }
    .sidebar-menu-bottom {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
    }
    .sidebar-divider {
        display: none;
    }
    .main-content {
        min-height: calc(100vh - 150px);
    }
    .content-area {
        padding: 15px;
    }
    .logs-container {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    .logs-explorer {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        max-height: 300px;
        border-right: none;
        border-bottom: 2px solid #ccc;
    }
    .logs-viewer {
        min-height: 400px;
    }
    .meta-fields {
        flex-direction: column;
        gap: 10px;
    }
    .meta-fields input,
    .meta-fields input.meta-wide {
        width: 100%;
    }
    .meta-info {
        margin-left: 0;
    }
    .toolbar {
        flex-wrap: wrap;
    }
    .toolbar-right {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Mobile phones */
@media screen and (max-width: 768px) {
    .sidebar-menu a {
        padding: 8px 10px;
        font-size: 11px;
    }
    .sidebar-menu a span {
        display: none;
    }
    .sidebar-menu i {
        margin-right: 0;
        font-size: 16px;
    }
    .page-title {
        font-size: 18px;
    }
    .top-header {
        padding: 10px 15px;
    }
    .breadcrumb {
        font-size: 11px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    .panel-body {
        padding: 15px;
    }
    .col-omschrijving {
        min-width: 200px;
    }
    .rag-files-toolbar {
        flex-wrap: wrap;
    }
    .current-file-indicator {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
}

/* Extra small screens */
@media screen and (max-width: 480px) {
    .sidebar-header {
        padding: 10px;
    }
    .sidebar-header h1 {
        font-size: 14px;
    }
    .sidebar-header .admin-label,
    .sidebar-header .enterprise-label,
    .sidebar-header .professional-label,
    .sidebar-header .starter-label {
        font-size: 10px;
    }
    .sidebar-menu {
        justify-content: center;
    }
    .content-area {
        padding: 10px;
    }
    .toolbar .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ============================================
   RAG FILTER - TAG INPUT
   ============================================ */
.rag-filter-category {
    margin-bottom: 20px;
}
.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #edf6ff;
    min-height: 44px;
    cursor: text;
}
.tag-input-wrap:focus-within {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
    background: #fff;
}
.tag-input-wrap .tag-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    padding: 4px 2px;
    min-width: 140px;
    flex: 1;
    color: #333;
    -webkit-text-fill-color: #333;
}
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #e0e0e0;
    border-radius: 3px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    white-space: nowrap;
}
.tag-item .tag-remove {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #888;
    line-height: 1;
    margin-left: 2px;
}
.tag-item .tag-remove:hover {
    color: #c0392b;
}

/* ============================================
   DARK MODE
   ============================================ */
body.dark-mode {
    background: #1a1a2e;
    color: #e0e0e0;
}
body.dark-mode .main-content {
    background: #1a1a2e;
}
body.dark-mode .top-header {
    background: #16213e;
    border-bottom-color: #2a2a4a;
}
body.dark-mode .page-title {
    color: #e0e0e0;
}
body.dark-mode .breadcrumb {
    color: #aaa;
}
body.dark-mode .breadcrumb a {
    color: #5dade2;
}
body.dark-mode .content-area {
    background: #1a1a2e;
}
body.dark-mode .panel {
    background: #16213e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
body.dark-mode .panel-header {
    background: #1a2744;
    border-bottom-color: #2a2a4a;
}
body.dark-mode .panel-header h3 {
    color: #e0e0e0;
}
body.dark-mode .panel-body {
    color: #ccc;
}
body.dark-mode .form-group label {
    color: #a8c4e0;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
    color-scheme: dark;
}
body.dark-mode .form-control {
    background-color: #0f3460;
    border-color: #2a2a4a;
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
}
body.dark-mode .form-control::placeholder {
    color: #6a7d9a;
    opacity: 1;
}
body.dark-mode .form-control:focus {
    background-color: #16213e;
    border-color: #3498db;
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
}
body.dark-mode textarea.form-control {
    background-color: #0f3460;
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
}
body.dark-mode .data-table th {
    background: #1a2744;
    color: #a8c4e0;
    border-bottom-color: #2a2a4a;
}
body.dark-mode .data-table td {
    border-bottom-color: #2a2a4a;
    color: #ccc;
}
body.dark-mode .data-table tr:nth-child(even) {
    background: #16213e;
}
body.dark-mode .data-table tr:nth-child(odd) {
    background: #1a1a2e;
}
body.dark-mode .data-table tr:hover {
    background: #1a2744;
}
body.dark-mode .data-table input[type="text"],
body.dark-mode .data-table textarea {
    background: #0f3460;
    border-color: #2a2a4a;
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
}
body.dark-mode .data-table td:nth-child(3) input[type="text"] {
    background: #072a12; /* lichtgroen-donker – Categorie */
}
body.dark-mode .data-table td:nth-child(4) input[type="text"] {
    background: #2a1a06; /* lichtoranje-donker – Kernwoorden */
}
body.dark-mode .data-table td:nth-child(5) textarea {
    background: #0d2a45; /* lichtblauw-donker – Omschrijving */
}
body.dark-mode .meta-fields {
    background: #16213e;
    border-color: #2a2a4a;
}
body.dark-mode .meta-info {
    color: #aaa;
}
body.dark-mode .toolbar {
    border-bottom-color: #2a2a4a;
}
body.dark-mode .table-container {
    border-color: #2a2a4a;
}
body.dark-mode .section-header {
    color: #a8c4e0;
}
body.dark-mode .footer {
    background: #16213e;
    border-top-color: #2a2a4a;
    color: #777;
}
body.dark-mode .status-bar {
    background: #1a3a2e;
    color: #4caf50;
}
body.dark-mode .status-bar.error {
    background: #3a1a1a;
    color: #ef5350;
}
body.dark-mode .status-bar.warning {
    background: #3a2a1a;
    color: #ffa726;
}
body.dark-mode .loading-overlay {
    background: rgba(0,0,0,0.7);
}
body.dark-mode .logs-container {
    border-color: #2a2a4a;
    background: #16213e;
}
body.dark-mode .logs-explorer {
    background: #16213e;
    border-right-color: #2a2a4a;
}
body.dark-mode .logs-explorer-header,
body.dark-mode .logs-explorer-footer {
    background: linear-gradient(to bottom, #1a2744, #16213e);
    border-color: #2a2a4a;
    color: #ccc;
}
body.dark-mode .logs-viewer {
    background: #16213e;
}
body.dark-mode .logs-viewer-header {
    background: linear-gradient(to bottom, #1a2744, #16213e);
    border-color: #2a2a4a;
    color: #ccc;
}
body.dark-mode #logDownloadBtn {
    background: #1a2744;
    color: #a8c8e8;
    border-color: #2a2a4a;
}
body.dark-mode #logDownloadBtn:hover {
    background: #253654;
}
body.dark-mode .logs-content {
    background: #0f3460;
    color: #e0e0e0;
}
body.dark-mode .log-section {
    background: #1a2744;
    border-color: #2a2a4a;
}
body.dark-mode .log-section-header {
    background: linear-gradient(to bottom, #1e2d4a, #1a2744);
    color: #a8c8e8;
    border-color: #2a2a4a;
}
body.dark-mode .log-section-header i {
    color: #5dade2;
}
body.dark-mode .log-section-body {
    color: #ddd;
}
body.dark-mode .log-section-pre {
    background: #0d2137;
}
body.dark-mode .log-section-time .log-section-body {
    background: #2a2210;
}
body.dark-mode .log-section-user .log-section-body {
    background: #1a2a1a;
}
body.dark-mode .log-section-assistant .log-section-body {
    background: #1a2030;
}
body.dark-mode .log-entries-count {
    background: #1a2744;
    color: #aaa;
}
body.dark-mode .log-entry-divider::before,
body.dark-mode .log-entry-divider::after {
    background: linear-gradient(to right, #2a5a8a, #2a2a4a);
}
body.dark-mode .log-entry-divider span {
    background: #2a5a8a;
}
body.dark-mode .log-divider {
    border-top-color: #2a2a4a;
}
body.dark-mode .log-detail-header {
    color: #aaa;
}
body.dark-mode .log-token-table th {
    background: #1a2744;
    color: #aaa;
}
body.dark-mode .log-token-table td {
    border-color: #2a2a4a;
}
body.dark-mode .log-file-item {
    border-bottom-color: #2a2a4a;
}
body.dark-mode .log-file-item:hover {
    background: #1a2744;
}
body.dark-mode .log-file-item.active {
    background: #0f3460;
}
body.dark-mode .log-file-name {
    color: #5dade2;
}
body.dark-mode .log-file-size {
    color: #aaa;
}
body.dark-mode .apache-table th {
    background: linear-gradient(to bottom, #1a2744, #16213e);
    border-color: #2a2a4a;
    color: #ccc;
}
body.dark-mode .apache-table td {
    border-bottom-color: #2a2a4a;
    color: #ccc;
}
body.dark-mode .apache-table td.col-size,
body.dark-mode .apache-table td.col-date {
    color: #aaa;
}
body.dark-mode .log-file-link,
body.dark-mode .rag-file-link {
    color: #5dade2;
}
body.dark-mode .model-rules-table th {
    background: #1a2744;
    color: #a8c4e0;
    border-color: #2a2a4a;
}
body.dark-mode .model-rules-table td {
    border-color: #2a2a4a;
    color: #ccc;
}
body.dark-mode .model-rules-table input {
    background: #0f3460;
    border-color: #2a2a4a;
    color: #e0e0e0;
}
body.dark-mode .about-title {
    color: #e0e0e0;
}
body.dark-mode .about-version {
    color: #aaa;
}
body.dark-mode .about-info {
    color: #ccc;
}
body.dark-mode .about-info a {
    color: #5dade2;
}
/* Dark mode selector items (loader, icon, sound) */
body.dark-mode .loader-item,
body.dark-mode .icon-item,
body.dark-mode .sound-item {
    background: #0f3460;
    border-color: #2a2a4a;
}
body.dark-mode .loader-item:hover,
body.dark-mode .icon-item:hover,
body.dark-mode .sound-item:hover {
    border-color: #3498db;
    background: #1a2744;
}
body.dark-mode .loader-item.selected,
body.dark-mode .icon-item.selected,
body.dark-mode .sound-item.selected {
    border-color: #5dff8a;
    background: #1a3a2e;
    box-shadow: 0 0 0 3px rgba(93, 255, 138, 0.25);
}
body.dark-mode .rag-files-toolbar {
    background: linear-gradient(to bottom, #1a2744, #16213e);
    border-color: #2a2a4a;
}
body.dark-mode .current-file-indicator {
    color: #ccc;
}
body.dark-mode .current-file-indicator i,
body.dark-mode .current-file-indicator strong {
    color: #5dff8a;
}
/* Dark mode: RAG file browser panel */
body.dark-mode .rag-files-list {
    background: #16213e;
}
body.dark-mode .rag-file-row:hover {
    background: #1a2744;
}
body.dark-mode .rag-file-row.active {
    background: #0f3460;
}

/* Dark mode: Dashboard headings (override inline styles) */
body.dark-mode #tab-dashboard h1 {
    color: #e0e0e0 !important;
}
body.dark-mode #tab-dashboard h4 {
    color: #e0e0e0 !important;
    border-bottom-color: #2a2a4a !important;
}
body.dark-mode #tab-dashboard h5 {
    color: #ccc !important;
}
body.dark-mode #tab-dashboard hr {
    border-top-color: #2a2a4a !important;
}

/* Dark mode: Manage Tools table (override inline styles) */
body.dark-mode #tab-tools table thead tr {
    background: linear-gradient(to bottom, #1a2744, #16213e) !important;
}
body.dark-mode #tab-tools table thead th {
    color: #ccc !important;
    border-bottom-color: #2a2a4a !important;
}
body.dark-mode #tab-tools table tbody tr {
    border-bottom-color: #2a2a4a !important;
}
body.dark-mode #tab-tools table tbody td {
    color: #ccc !important;
}

/* Dark mode: Manage Logs explorer header text */
body.dark-mode .logs-explorer-header strong {
    color: #e0e0e0;
}

/* Dark mode: log-file-row (table rows in logs explorer) */
body.dark-mode .log-file-row:hover {
    background: #1a2744;
}
body.dark-mode .log-file-row.active {
    background: #0f3460;
}
/* Dark mode: usage charts */
body.dark-mode .usage-chart-box {
    background: #1a2744;
    border-color: #2a2a4a;
}
body.dark-mode .usage-chart-title {
    color: #ccc;
}
body.dark-mode .usage-bar-value {
    color: #bbb;
}
body.dark-mode .usage-bar-label {
    color: #888;
}
body.dark-mode .usage-chart-empty {
    color: #666;
}
body.dark-mode .usage-yaxis-label {
    color: #777;
}
body.dark-mode .usage-chart-gridline {
    border-top-color: #2a2a4a;
}
body.dark-mode #statsYearFilter {
    background: #1a2744;
    color: #ccc;
    border-color: #2a2a4a;
}
/* Dark mode: log explorer file list (tbody area) */
body.dark-mode .logs-file-list {
    background: #16213e;
}
body.dark-mode .apache-table tbody {
    background: #16213e;
}
body.dark-mode .apache-table tbody tr:hover {
    background: #1a2744;
}
body.dark-mode .apache-table tbody tr.active {
    background: #0f3460;
}

/* Dark mode: brighter checkbox accents for visibility */
body.dark-mode input[type="checkbox"] {
    accent-color: #5dff8a;
    filter: brightness(1.3);
}
body.dark-mode input[type="checkbox"]:checked {
    accent-color: #5dff8a;
    filter: brightness(1.4);
}
/* Dark mode: tag input */
body.dark-mode .tag-input-wrap {
    background: #0f3460;
    border-color: #2a2a4a;
}
body.dark-mode .tag-input-wrap:focus-within {
    border-color: #3498db;
    background: #16213e;
}
body.dark-mode .tag-input-wrap .tag-input {
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0;
}
body.dark-mode .tag-item {
    background: #1a2744;
    color: #ccc;
}
body.dark-mode .tag-item .tag-remove {
    color: #aaa;
}
body.dark-mode .tag-item .tag-remove:hover {
    color: #ef5350;
}
/* Settings slider styling */
.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #b8d8f8;
    outline: none;
    margin-top: 6px;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
}
.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    border: none;
}
body.dark-mode .settings-slider {
    background: #2a2a4a;
}
body.dark-mode .settings-slider::-webkit-slider-thumb {
    background: #5dade2;
}
body.dark-mode .settings-slider::-moz-range-thumb {
    background: #5dade2;
}
.slider-value {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: #0d6efd;
    font-size: 14px;
}
.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.slider-row .settings-slider {
    flex: 1;
}
.slider-bound {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    min-width: 30px;
    text-align: center;
}
body.dark-mode .slider-value {
    color: #5dade2;
}

/* Gele "pakket vereist" balken → zacht/transparant in donker modus */
body.dark-mode [style*="background: #fff3cd"],
body.dark-mode [style*="background:#fff3cd"] {
    background: rgba(255, 193, 7, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.25) !important;
    color: #d4aa30 !important;
}

/* ================================================================
   SECTIE 2: LEGACY CHATBOT (was: css/style.css)
   Gescoped met body.chatbot-page om conflicten met admin te voorkomen.
   ================================================================ */
/* ChatXpert - XHTML Chatbot Styling */

body.chatbot-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#chatbot-container {
    width: 100%;
    max-width: 500px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 600px;
}

#chatbot-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

#chatbot-header h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

#chatbot-header p {
    font-size: 14px;
    opacity: 0.9;
}

#chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #f8f9fa;
}

.message {
    margin-bottom: 15px;
    display: flex;
}

.bot-message {
    justify-content: flex-start;
}

.user-message {
    justify-content: flex-end;
}

.message-content {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.bot-message .message-content {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
}

.user-message .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

#chatbot-input-area {
    padding: 15px 20px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
}

#chat-form {
    display: flex;
    gap: 10px;
}

#user-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

#user-input:focus {
    border-color: #667eea;
}

#send-button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#send-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#send-button:active {
    transform: translateY(0);
}

#chatbot-footer {
    padding: 10px;
    background-color: #f8f9fa;
    text-align: center;
    border-top: 1px solid #e0e0e0;
}

#chatbot-footer p {
    font-size: 12px;
    color: #888888;
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background-color: #667eea;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}

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

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

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

/* Scrollbar styling */
#chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

#chatbot-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#chatbot-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ================================================================
   SECTIE 3: CHATBOT FRONTEND (was: inline CSS in index.html)
   ================================================================ */
  /* ==========================================================
     1. CSS VARIABELEN (Custom Properties)
     - Licht-thema als standaard
     - Donker-thema via data-theme="dark" of prefers-color-scheme
     - --vvh : dynamische viewport-hoogte (VisualViewport fix)
     ========================================================== */
  :root {
    /* --- Layout maten (desktop) --- */
    --chat-width  : 720px;
    --chat-height : 800px;

    /* Dynamische hoogte (wordt via JS bijgewerkt bij keyboard open/sluit) */
    --vvh : 100dvh;

    /* Marge tot de rand van het scherm (desktop) */
    --edge-pad  : 16px;    /* fallback voor mobiel/fullscreen */
    --edge-pad-x: 20px;    /* afstand van rechterrand  (instelbaar via config) */
    --edge-pad-y: 20px;    /* afstand van onderrand    (instelbaar via config) */

    /* Extra padding binnen de chat op mobiel (voorkomt tekst tegen rand) */
    --mobile-inner-pad-x : 18px;
    --mobile-inner-pad-y : 14px;

    /* --- Kleuren: LICHT thema (standaard) --- */
    --bg              : #f8f9fa;
    --panel           : #ffffff;
    --panel-border    : rgba(0,0,0,.12);
    --muted           : rgba(0,0,0,.6);

    --assistant-bg    : #f8f9fa;
    --assistant-border: rgba(0,0,0,.12);
    --assistant-text  : #111111;

    --user-bg         : #0d6efd;  /* Bootstrap primary blauw */
    --user-text       : #ffffff;

    --md-pre-bg       : rgba(0,0,0,.04);  /* achtergrond code-blokken */
    --md-code-bg      : rgba(0,0,0,.04);  /* inline code */

    /* Systeminstelling respecteren */
    color-scheme: light dark;
  }

  /* ==========================================================
     2. DONKER THEMA — via prefers-color-scheme (automatisch)
     Alleen actief als er GEEN expliciet data-theme="light" staat.
     ========================================================== */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg              : #0b0f14;
      --panel           : #111823;
      --panel-border    : rgba(255,255,255,.12);
      --muted           : rgba(255,255,255,.65);

      --assistant-bg    : rgba(255,255,255,.06);
      --assistant-border: rgba(255,255,255,.12);
      --assistant-text  : rgba(255,255,255,.92);

      --user-bg         : #1a56b8;
      --user-text       : #ffffff;

      --md-pre-bg       : rgba(255,255,255,.08);
      --md-code-bg      : rgba(255,255,255,.10);
    }
  }

  /* ==========================================================
     3. DONKER THEMA — via data-theme="dark" (handmatig gekozen)
     ========================================================== */
  :root[data-theme="dark"] {
    --bg              : #0b0f14;
    --panel           : #111823;
    --panel-border    : rgba(255,255,255,.12);
    --muted           : rgba(255,255,255,.65);

    --assistant-bg    : rgba(255,255,255,.06);
    --assistant-border: rgba(255,255,255,.12);
    --assistant-text  : rgba(255,255,255,.92);

    --user-bg         : #1a56b8;
    --user-text       : #ffffff;

    --md-pre-bg       : rgba(255,255,255,.08);
    --md-code-bg      : rgba(255,255,255,.10);
  }

  /* ==========================================================
     4. DONKER-THEMA OVERRIDES (specifieke elementen)
     Bootstrap kleuren overschrijven met !important waar nodig.
     ========================================================== */

  /* 4a) "Stel uw vraag..." placeholder-tekst leesbaar in donker */
  :root[data-theme="dark"] #chatBody .text-muted {
    color: rgba(255,255,255,0.75) !important;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #chatBody .text-muted {
      color: rgba(255,255,255,0.75) !important;
    }
  }

  /* 4b) Invoerveld donker achtergrond */
  :root[data-theme="dark"] #chatInput {
    background-color        : #1e2633 !important;
    color                   : #c8ccd0 !important;
    -webkit-text-fill-color : #c8ccd0 !important;
    border-color            : rgba(255,255,255,0.25) !important;
  }
  :root[data-theme="dark"] #chatInput::placeholder {
    color                   : rgba(255,255,255,0.55) !important;
    -webkit-text-fill-color : rgba(255,255,255,0.55) !important;
  }

  /* 4b2) Gebruiker-bel donkerder blauw in donker thema */
  :root[data-theme="dark"] .bubble.user {
    background: #1a56b8 !important;
  }
  :root[data-theme="dark"] .bubble.user::before {
    background: #1a56b8 !important;
  }

  /* 4c) Theme-button rand in donker */
  :root[data-theme="dark"] #themeBtn {
    background   : transparent;
    border-color : rgba(255,255,255,.35);
  }

  /* 4d) Zelfde overrides voor auto-donker (prefers-color-scheme) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #chatInput {
      background-color        : #1e2633 !important;
      color                   : #c8ccd0 !important;
      -webkit-text-fill-color : #c8ccd0 !important;
      border-color            : rgba(255,255,255,0.25) !important;
    }
    :root:not([data-theme="light"]) #chatInput::placeholder {
      color                   : rgba(255,255,255,0.55) !important;
      -webkit-text-fill-color : rgba(255,255,255,0.55) !important;
    }
    :root:not([data-theme="light"]) .bubble.user {
      background: #1a56b8 !important;
    }
    :root:not([data-theme="light"]) .bubble.user::before {
      background: #1a56b8 !important;
    }
  }

  /* ==========================================================
     5. BASIS LAYOUT (html, body)
     Gescoped: alleen actief op chatbot-pagina (body:has(#chatWidget))
     ========================================================== */
  body:has(#chatWidget) {
    height : 100%;
    margin : 0;
    padding: 0;
    background: var(--bg);
  }

  /* ==========================================================
     6. CHAT-WIDGET (het hoofdvenster)
     - Desktop: vaste breedte, rechtsBeneden gepositieerd
     - Flexbox kolom: header → body (scrollbaar) → footer
     ========================================================== */
  #chatWidget {
    position : fixed;
    right    : var(--edge-pad-x);   /* instelbare rechter offset */
    bottom   : var(--edge-pad-y);   /* instelbare onder offset   */

    width    : var(--chat-width);

    /* Hoogte: gewenst max, maar nooit groter dan scherm minus marge.
       Onder = --edge-pad-y (instelbaar), boven = vaste 16px marge. */
    height   : min(
      calc(var(--chat-height) + 110px),
      calc(100dvh - var(--edge-pad-y) - 16px)
    );
    /* Fallback voor browsers zonder dvh-support */
    max-height: calc(100vh - var(--edge-pad-y) - 16px);

    z-index  : 9999;

    background   : var(--panel);
    border       : 1px solid var(--panel-border);
    border-radius: 14px;

    /* Kolom-layout: header, body, footer stapelen verticaal */
    display        : flex;
    flex-direction : column;
    overflow       : hidden;

    /* Lettertype rendering verbeteren */
    -webkit-font-smoothing : antialiased;
    text-rendering         : optimizeLegibility;
  }

  /* ==========================================================
     7. HEADER (blauwe balk bovenaan)
     ========================================================== */
  #chatHeader {
    background   : #0d6efd;   /* Bootstrap primary */
    color        : #ffffff;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  /* Knoppen in de header zichtbaar op blauw achtergrond */
  #chatHeader .btn {
    border-color : rgba(255,255,255,.35) !important;
    color        : #ffffff !important;
  }
  #chatHeader .btn:hover {
    border-color : rgba(255,255,255,.55) !important;
    background   : rgba(255,255,255,.12) !important;
  }

  /* Compacte header knoppen - minder ruimte tussen iconen */
  .header-actions {
    gap          : 4px;
    flex-shrink  : 0;
  }
  .header-icon-btn {
    padding      : 2px 6px !important;
    font-size    : 13px !important;
    line-height  : 1.3 !important;
    min-width    : 0 !important;
  }

  /* Titelbalk-container neemt alle resterende breedte, zodat de tekst
     pas afkapt als er echt geen ruimte meer is (geen vaste max-width). */
  #chatHeader > .d-flex:first-child {
    flex     : 1;
    min-width: 0;
    overflow : hidden;
  }
  #chatboxTitle.title-truncate {
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
  }

  /* ==========================================================
     8. CHAT-BODY (scrollbaar gedeelte met berichten)
     ========================================================== */
  #chatBody {
    flex     : 1;              /* vul beschikbare ruimte */
    overflow : auto;           /* scroll als inhoud groter is */
    padding  : 12px;
    overscroll-behavior       : contain;   /* voorkomt scroll-leak naar achtergrond */
    -webkit-overflow-scrolling: touch;     /* iOS momentum-scroll */
  }

  /* ==========================================================
     9. FOOTER (invoer + knoppen onderaan)
     ========================================================== */
  #chatFooter {
    background  : var(--panel);
    border-top  : 1px solid var(--panel-border);
  }

  /* Beetje ruimte tussen invoerveld en Stuur-knop */
  #chatFooter .input-group > .form-control {
    margin-right: 10px;
  }

  /* ==========================================================
     10. COLLAPSED STAAT (geminimaliseerd)
     Css-klasse .is-collapsed op #chatWidget verbergt body + footer.
     ========================================================== */
  #chatWidget.is-collapsed #chatBody,
  #chatWidget.is-collapsed #chatFooter {
    display: none;
  }
  #chatWidget.is-collapsed {
    height : auto;
    width  : 360px;   /* compacte balk op desktop */
  }

  /* ==========================================================
     11. CHAT-BELLEN (user + assistant)
     ========================================================== */
  .bubble {
    max-width    : 85%;
    border-radius: 14px;
    padding      : .6rem .75rem;
    white-space  : pre-wrap;
    word-break   : break-word;
  }

  /* Gebruiker-bel (rechts, blauw) */
  .bubble.user {
    background: var(--user-bg);
    color     : var(--user-text);
    position  : relative;
    border-bottom-right-radius: 4px;
    margin-right: 12px;
  }

  /* iOS-stijl tekstballon staartje voor gebruiker (rechtsonder) */
  .bubble.user::before {
    content      : '';
    position     : absolute;
    bottom       : 0;
    right        : -10px;
    width        : 20px;
    height       : 20px;
    background   : var(--user-bg);
    border-bottom-left-radius: 16px 14px;
  }

  .bubble.user::after {
    content      : '';
    position     : absolute;
    bottom       : 0;
    right        : -10px;
    width        : 10px;
    height       : 20px;
    background   : var(--panel);
    border-bottom-left-radius: 10px;
  }

  /* Assistent-bel (links, neutraal) */
  .bubble.assistant {
    background  : var(--assistant-bg);
    border      : 1px solid var(--assistant-border);
    color       : var(--assistant-text);
    position    : relative;
    border-bottom-left-radius: 4px;
    margin-left: 14px;
    min-width   : 60px;  /* Minimum breedte voor loader animaties */
  }

  /* iOS-stijl tekstballon staartje voor assistent (linksonder)
     Driehoek die naar linksonder wijst */
  .bubble.assistant::before {
    content      : '';
    position     : absolute;
    bottom       : 0;
    left         : -9px;
    width        : 0;
    height       : 0;
    border-style : solid;
    border-width : 10px 10px 0 0;
    border-color : transparent var(--assistant-border) transparent transparent;
  }

  .bubble.assistant::after {
    content      : '';
    position     : absolute;
    bottom       : 1px;
    left         : -6px;
    width        : 0;
    height       : 0;
    border-style : solid;
    border-width : 8px 8px 0 0;
    border-color : transparent var(--assistant-bg) transparent transparent;
  }

  /* ==========================================================
     12. MARKDOWN RENDERING IN ASSISTENT-BELLEN
     marked.js + DOMPurify produceren HTML; deze styles zorgen
     ervoor dat code-blokken en lijsten netjes ogen.
     ========================================================== */
  .md p:last-child  { margin-bottom: 0; }
  .md ul, .md ol    { margin-bottom: 0; }

  /* Code-blok (meerdere regels) */
  .md pre {
    padding      : .75rem;
    border-radius: .6rem;
    background   : var(--md-pre-bg);
    overflow     : auto;
    border       : 1px solid var(--panel-border);
  }

  /* Inline code */
  .md code {
    background   : var(--md-code-bg);
    padding      : .1rem .25rem;
    border-radius: .25rem;
  }

  /* Binnen een pre-blok geen dubbele achtergrond */
  .md pre code {
    background: transparent;
    padding   : 0;
  }

  /* ==========================================================
     13. STATUS-REGEL (onder invoer; "Wacht op antwoord…" e.d.)
     ========================================================== */
  #statusLine {
    color     : var(--muted);
    min-height: 1.2em;
  }

  /* ==========================================================
     14. MOBIEL LAYOUT (max-width: 768px)
     - Widget wordt fullscreen
     - safe-area insets voor notch / home-indicator
     - iOS zoom-op-focus voorkomen (font-size: 16px)
     ========================================================== */
  @media (max-width: 768px) {
    #chatWidget {
      left         : 0;
      right        : 0;
      top          : 0;
      bottom       : 0;
      width        : 100vw;
      height       : var(--vvh);   /* dynamisch via JS */
      border-radius: 0;
      border-left  : 0;
      border-right : 0;
    }

    /* Extra padding links/rechts + safe-area (notch/afgeronde hoeken) */
    #chatBody {
      padding-left : calc(var(--mobile-inner-pad-x) + env(safe-area-inset-left));
      padding-right: calc(var(--mobile-inner-pad-x) + env(safe-area-inset-right));
      padding-top  : var(--mobile-inner-pad-y);
      padding-bottom: var(--mobile-inner-pad-y);
    }

    /* Header safe-area bovenaan (iOS notch) + compacter op mobiel */
    #chatHeader {
      padding-top: calc(.5rem + env(safe-area-inset-top));
      padding-left: .5rem;
      padding-right: .5rem;
      padding-bottom: .35rem;
    }
    .header-actions {
      gap: 3px;
    }
    .header-icon-btn {
      padding: 1px 4px !important;
      font-size: 12px !important;
    }
    /* title-truncate uitsluitend font-size aanpassing op kleine viewports;
       overflow/ellipsis worden al geregeld via de algemene header-regel. */
    #chatboxTitle.title-truncate {
      font-size: 14px;
    }

    /* Footer safe-area onderaan (Android/iOS home-indicator) */
    #chatFooter {
      padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }

    /*
      iOS: voorkomt dat Safari automatisch inzoomt op een
      input-veld kleiner dan 16px. Crisp en zonder zoom-verwarring.
    */
    #chatInput {
      font-size: 16px;
    }

    /* Collapsed op mobiel: kleine balk onderin */
    #chatWidget.is-collapsed {
      top          : auto;
      left         : var(--edge-pad);
      right        : var(--edge-pad);
      bottom       : var(--edge-pad);
      width        : calc(100vw - (2 * var(--edge-pad)));
      border-radius: 14px;
      border-left  : 1px solid var(--panel-border);
      border-right : 1px solid var(--panel-border);
    }
  }

  /* ==========================================================
     15. MOBIEL LAYOUT — via JS data-device="mobile"
     Backup voor apparaten waar de media-query niet triggert
     maar JS wel detecteert dat het een telefoon is.
     ========================================================== */
  :root[data-device="mobile"] #chatWidget {
    left         : 0;
    right        : 0;
    top          : 0;
    bottom       : 0;
    width        : 100vw;
    height       : var(--vvh);
    border-radius: 0;
    border-left  : 0;
    border-right : 0;
  }

  :root[data-device="mobile"] #chatBody {
    padding-left : calc(var(--mobile-inner-pad-x) + env(safe-area-inset-left));
    padding-right: calc(var(--mobile-inner-pad-x) + env(safe-area-inset-right));
    padding-top  : var(--mobile-inner-pad-y);
    padding-bottom: var(--mobile-inner-pad-y);
  }

  :root[data-device="mobile"] #chatHeader {
    padding-top: calc(.5rem + env(safe-area-inset-top));
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .35rem;
  }
  :root[data-device="mobile"] .header-actions {
    gap: 3px;
  }
  :root[data-device="mobile"] .header-icon-btn {
    padding: 1px 4px !important;
    font-size: 12px !important;
  }
  :root[data-device="mobile"] #chatboxTitle.title-truncate {
    font-size: 14px;
  }

  :root[data-device="mobile"] #chatFooter {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  }

  /* Collapsed op mobiel (data-device variant) */
  :root[data-device="mobile"] #chatWidget.is-collapsed {
    top          : auto;
    left         : var(--edge-pad);
    right        : var(--edge-pad);
    bottom       : var(--edge-pad);
    width        : calc(100vw - (2 * var(--edge-pad)));
    border-radius: 14px;
    border-left  : 1px solid var(--panel-border);
    border-right : 1px solid var(--panel-border);
  }

  /* ==========================================================
     16. POLISH: invoerveld hover/focus glow
     ========================================================== */
  #chatInput {
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  }
  #chatInput:hover {
    border-color: rgba(13,110,253,.45) !important;
  }
  #chatInput:focus {
    border-color: rgba(13,110,253,.85) !important;
    box-shadow  : 0 0 0 .20rem rgba(13,110,253,.22) !important;
  }

  /* Donker-thema: iets duidelijkere focus-ring */
  :root[data-theme="dark"] #chatInput:hover {
    box-shadow: 0 0 0 .20rem rgba(43,124,255,.18) !important;
  }
  :root[data-theme="dark"] #chatInput:focus,
  :root[data-theme="dark"] #chatInput:focus-visible {
    box-shadow: 0 0 0 .20rem rgba(43,124,255,.28) !important;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #chatInput:hover {
      box-shadow: 0 0 0 .20rem rgba(43,124,255,.18) !important;
    }
    :root:not([data-theme="light"]) #chatInput:focus,
    :root:not([data-theme="light"]) #chatInput:focus-visible {
      box-shadow: 0 0 0 .20rem rgba(43,124,255,.28) !important;
    }
  }

  /* ==========================================================
     17. POLISH: Stuur-knop donker-thema
     ========================================================== */
  :root[data-theme="dark"] #sendBtn {
    filter: brightness(.92) saturate(.90);
  }
  :root[data-theme="dark"] #sendBtn:hover {
    filter: brightness(.98) saturate(.95);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #sendBtn {
      filter: brightness(.92) saturate(.90);
    }
    :root:not([data-theme="light"]) #sendBtn:hover {
      filter: brightness(.98) saturate(.95);
    }
  }

  /* ==========================================================
     18. TYPING-INDICATOR / LOADER
     Container voor de loader animatie.
     Box-shadow loaders hebben extra ruimte nodig (±20px aan elke kant).
     ========================================================== */
  .loader-wrapper {
    display        : flex;
    align-items    : center;
    justify-content: center;
    min-width      : 50px;
    min-height     : 20px;
    padding        : var(--loader-pad-y, 4px) var(--loader-pad-x, 20px);
  }

  /* ==========================================================
     19. LOGGING-NOTICE (waarschuwing: gesprek wordt gelogd)
     ========================================================== */
  .log-notice {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-size   : 0.85rem;
    padding     : 7px 10px;
    border-radius: 6px;
    margin      : 8px 12px 6px 12px;
    background  : rgba(255, 193, 7, 0.22);
    color       : rgba(0,0,0,.80);
    border      : 1px solid rgba(255, 193, 7, 0.45);
  }
  .log-notice .log-ico  { flex: 0 0 auto; }
  .log-notice .log-text { flex: 1 1 auto; }

  /* Donker-thema variant */
  :root[data-theme="dark"] .log-notice {
    background  : rgba(255, 193, 7, 0.18);
    color       : rgba(255,255,255,.85);
    border-color: rgba(255, 193, 7, 0.40);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .log-notice {
      background  : rgba(255, 193, 7, 0.18);
      color       : rgba(255,255,255,.85);
      border-color: rgba(255, 193, 7, 0.40);
    }
  }

  /* ==========================================================
     20. MODEL-STATUS BAR (groen; toon welk model antwoord gaf)
     ========================================================== */
  .model-status {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    font-size       : 0.85rem;
    padding         : 7px 10px;
    margin          : 8px 12px 6px 12px;
    border-radius   : 6px;
    background      : rgba(40, 180, 99, 0.15);
    color           : #1e8449;
    border          : 1px solid rgba(40, 180, 99, 0.35);
  }

  /* Donker-thema */
  :root[data-theme="dark"] .model-status {
    background  : rgba(40, 180, 99, 0.22);
    color       : #b8f5d0;
    border-color: rgba(40, 180, 99, 0.45);
  }

  /* Links: icon + modelnaam */
  .model-left {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
  }

  /* Info-knop (ⓘ) naast modelnaam */
  .model-info-btn {
    border          : 0;
    background      : transparent;
    color           : inherit;
    font-weight     : 700;
    line-height     : 1;
    width           : 26px;
    height          : 26px;
    border-radius   : 999px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    opacity         : .9;
  }
  .model-info-btn:hover  { opacity: 1; filter: brightness(1.1); }
  .model-info-btn:active { transform: translateY(1px); }

  /* ==========================================================
     21. MODEL-INFO PANEL (popup bij klik op ⓘ)
     ========================================================== */
  .model-info-panel {
    position      : absolute;
    right         : 6px;
    top           : calc(100% + 6px);
    width         : min(360px, calc(100vw - 28px));
    background    : var(--panel);
    border        : 1px solid var(--panel-border);
    border-radius : 10px;
    box-shadow    : 0 12px 40px rgba(0,0,0,.22);
    padding       : 10px 12px;
    z-index       : 99999;
  }
  .model-info-title {
    font-weight   : 700;
    margin-bottom : 6px;
  }
  .model-info-body {
    font-size   : 0.9rem;
    color       : var(--assistant-text);
    white-space : pre-wrap;
  }

  /* ==========================================================
     22. VERBORGEN HELPER-KLASSE
     ========================================================== */
  .hidden { display: none !important; }

  /* Lichtgray "Stel uw vraag..." beetje naar rechts */
  #chatBody .text-muted { padding-left: 6px; }

  /* ==========================================================
     23. TIMESTAMP (klein, lichtgrijs, linksboven in de bel)
     ========================================================== */
  .bubble-timestamp {
    font-size  : 0.7rem;
    color      : #b0b0b0;
    margin-bottom: 2px;
    line-height: 1;
  }

  /* ==========================================================
     24. TOOL INDICATOR (tandwiel icoon bij tool-gebruik)
     ========================================================== */
  .tool-indicator {
    display       : flex;
    align-items   : center;
    gap           : 6px;
    font-size     : 0.78rem;
    color         : var(--muted);
    padding       : 4px 10px;
    margin-bottom : 4px;
    border-radius : 6px;
    background    : rgba(0,0,0,.03);
    max-width     : 85%;
  }
  .tool-indicator .tool-gear {
    font-size : 1rem;
    animation : tool-spin 1.5s linear infinite;
  }
  .tool-indicator.done .tool-gear {
    animation : none;
  }
  @keyframes tool-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ==========================================================
     25. MINIMIZED CHAT ICON (robot iconen)
     ========================================================== */
  .minimized-icon {
    position : fixed;
    right    : var(--edge-pad-x);   /* instelbare rechter offset */
    bottom   : var(--edge-pad-y);   /* instelbare onder offset   */
    z-index  : 9998;
    cursor   : pointer;
    width    : var(--minimize-icon-size, 70px);
    height   : var(--minimize-icon-size, 70px);
    transition: filter 0.2s ease, transform 0.2s ease;
  }
  .minimized-icon img {
    width  : 100%;
    height : 100%;
    object-fit: contain;
  }
  .minimized-icon:hover {
    filter   : drop-shadow(0 0 8px var(--glow-color, rgba(13,110,253,.6))) drop-shadow(0 0 16px var(--glow-color-soft, rgba(13,110,253,.3)));
    transform: scale(1.05);
  }

  /* ==========================================================
     26. CENTER SCREEN MODE
     ========================================================== */
  #centerOverlay {
    display    : none;
    position   : fixed;
    top        : 0;
    left       : 0;
    width      : 100vw;
    height     : 100vh;
    background : rgba(0, 0, 0, 0.6);
    z-index    : 9998;
  }
  body.center-mode #centerOverlay {
    display: block;
  }
  body.center-mode #chatWidget {
    position : fixed;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
    right    : auto;
    bottom   : auto;
  }
  body.center-mode #minBtn {
    display: none !important;
  }

  /* Center-mode op mobiel: fullscreen ipv gecentreerd zwevend */
  @media (max-width: 768px) {
    body.center-mode #chatWidget {
      top          : 0;
      left         : 0;
      transform    : none;
      right        : 0;
      bottom       : 0;
      width        : 100vw;
      height       : 100dvh;
      max-height   : 100vh;
      border-radius: 0;
      border       : 0;
    }
    body.center-mode #centerOverlay {
      display: none;
    }
  }
  /* data-device="mobile" variant voor center-mode */
  :root[data-device="mobile"] body.center-mode #chatWidget {
    top          : 0;
    left         : 0;
    transform    : none;
    right        : 0;
    bottom       : 0;
    width        : 100vw;
    height       : 100dvh;
    max-height   : 100vh;
    border-radius: 0;
    border       : 0;
  }
  :root[data-device="mobile"] body.center-mode #centerOverlay {
    display: none;
  }


/* ================================================================
   SECTIE 4: AUTH PAGINA (was: inline CSS in admin/index.php)
   Gescoped met body:has(.auth-container) om conflicten te voorkomen.
   ================================================================ */
        body:has(.auth-container) {
            font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #1a2a3a 0%, #2a3f54 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .auth-container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
        .auth-logo {
            margin-bottom: 20px;
        }
        .auth-logo img {
            width: 64px;
            height: 64px;
        }
        .auth-title {
            font-size: 24px;
            color: #2a3f54;
            margin-bottom: 8px;
        }
        .auth-subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 30px;
        }
        .auth-container .form-group {
            margin-bottom: 20px;
            text-align: left;
        }
        .auth-container .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }
        .auth-container .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        .auth-container .form-control:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
        }
        .captcha-group {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .captcha-question {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .captcha-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            text-align: center;
        }
        .btn-submit {
            width: 100%;
            padding: 14px;
            background: #3498db;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-submit:hover {
            background: #2980b9;
        }
        .error-message {
            background: #ffebee;
            color: #c62828;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
            display: none;
        }
        .error-message.show {
            display: block;
        }
        .info-text {
            margin-top: 20px;
            color: #666;
            font-size: 12px;
        }
        .warning-text {
            margin-top: 20px;
            color: #8b0000;
            font-size: 13px;
            font-weight: bold;
        }
        .warning-text i {
            color: #f0ad4e;
            margin-right: 6px;
        }
        .refresh-captcha {
            background: none;
            border: none;
            color: #3498db;
            cursor: pointer;
            font-size: 12px;
            margin-top: 8px;
        }
        .refresh-captcha:hover {
            text-decoration: underline;
        }

/* ================================================================
   SECTIE 5: ADMIN SELECTORS (was: inline CSS in admin/index.php)
   ================================================================ */
    /* Loader selector items */
    .loader-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 14px;
        background: #f8f9fa;
        border: 2px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 110px;
    }
    .loader-item:hover {
        border-color: #3498db;
        background: #e8f4fc;
    }
    .loader-item.selected {
        border-color: #27ae60;
        background: #e8f5e9;
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
    }
    .loader-item .loader-preview {
        width: 90px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        overflow: hidden;
        pointer-events: none;
    }
    .loader-item .loader-preview iframe {
        pointer-events: none;
    }
    .loader-item .loader-name {
        font-size: 11px;
        color: #666;
        text-align: center;
        word-break: break-all;
    }
    /* Minimize icon selector items */
    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 15px;
        background: #f8f9fa;
        border: 2px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 100px;
    }
    .icon-item:hover {
        border-color: #3498db;
        background: #e8f4fc;
    }
    .icon-item.selected {
        border-color: #27ae60;
        background: #e8f5e9;
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
    }
    .icon-item .icon-preview {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
    }
    .icon-item .icon-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: opacity 0.2s;
    }
    .icon-item:hover .icon-preview img.icon-01 { display: none; }
    .icon-item:hover .icon-preview img.icon-02 { display: inline; }
    .icon-item .icon-preview img.icon-02 { display: none; }
    .icon-item .icon-name {
        font-size: 11px;
        color: #666;
        text-align: center;
        word-break: break-all;
    }
    /* Section divider */
    .section-divider {
        border: none;
        border-top: 2px solid #e0e0e0;
        margin: 25px 0 20px 0;
    }
    /* Sound selector items */
    .sound-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 15px;
        background: #f8f9fa;
        border: 2px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 100px;
    }
    .sound-item:hover {
        border-color: #3498db;
        background: #e8f4fc;
    }
    .sound-item.selected {
        border-color: #27ae60;
        background: #e8f5e9;
        box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
    }
    .sound-item .sound-icon {
        font-size: 28px;
        color: #555;
        margin-bottom: 6px;
    }
    .sound-item .sound-name {
        font-size: 11px;
        color: #666;
        text-align: center;
        word-break: break-all;
    }
    /* Volume slider */
    .volume-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: #ddd;
        outline: none;
    }
    .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #3498db;
        cursor: pointer;
    }
    .volume-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #3498db;
        cursor: pointer;
        border: none;
    }