/**
 * TFW Knowledge Hub frontend styles.
 * Scoped to .tfwkh-* classes to minimise theme collisions.
 * Uses --tfwkh-primary custom property set inline per render for per-company branding.
 */

.tfwkh-login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    min-height: 420px;
    box-sizing: border-box;
}

.tfwkh-login-card {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.tfwkh-login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tfwkh-login-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tfwkh-primary) 12%, white);
    color: var(--tfwkh-primary);
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tfwkh-login-logo {
    max-width: 140px;
    max-height: 56px;
    margin: 0 auto 12px;
    display: block;
}

.tfwkh-login-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.tfwkh-login-sub {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.tfwkh-login-form label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    margin-top: 12px;
    font-weight: 500;
    color: #374151;
}

.tfwkh-login-form input[type="email"],
.tfwkh-login-form input[type="password"],
.tfwkh-login-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
    background: #ffffff;
    color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tfwkh-login-form input:focus {
    outline: none;
    border-color: var(--tfwkh-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tfwkh-primary) 15%, transparent);
}

.tfwkh-btn {
    display: inline-block;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    margin-top: 1rem;
}

.tfwkh-btn-primary {
    background: var(--tfwkh-primary);
    color: #ffffff;
    border-color: var(--tfwkh-primary);
}

.tfwkh-btn-primary:hover {
    filter: brightness(0.92);
}

.tfwkh-btn-secondary {
    background: #ffffff;
    color: #374151;
    border-color: #d1d5db;
}

.tfwkh-btn-secondary:hover {
    background: #f9fafb;
}

.tfwkh-login-footer {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}

.tfwkh-login-footer a {
    color: var(--tfwkh-primary);
    text-decoration: none;
}

.tfwkh-login-footer a:hover {
    text-decoration: underline;
}

.tfwkh-muted {
    color: #6b7280;
}

.tfwkh-login-footer-note {
    margin-top: 14px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

.tfwkh-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.tfwkh-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

.tfwkh-alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-color: #93c5fd;
}

/* Dashboard placeholder styles */
.tfwkh-dash-wrap {
    padding: 1rem 0;
}

.tfwkh-dash {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}

.tfwkh-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.tfwkh-dash-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.tfwkh-dash-sub {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

.tfwkh-dash-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
}

.tfwkh-user-badge {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tfwkh-primary) 15%, white);
    color: var(--tfwkh-primary);
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

.tfwkh-user-name {
    font-weight: 500;
}

.tfwkh-linkbtn {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}

.tfwkh-linkbtn:hover {
    color: var(--tfwkh-primary);
}

.tfwkh-chat-header {
    background: var(--tfwkh-primary);
    color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 12px 12px 0 0;
    margin: -1.5rem -1.75rem 1.5rem;
    border-bottom: none;
}

.tfwkh-chat-header .tfwkh-dash-user,
.tfwkh-chat-header .tfwkh-linkbtn {
    color: #ffffff;
}

.tfwkh-chat-title {
    font-weight: 600;
    font-size: 15px;
}

.tfwkh-chat-sub {
    font-size: 12px;
    opacity: 0.85;
}

.tfwkh-chat-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    padding: 4px;
    box-sizing: border-box;
}

.tfwkh-placeholder {
    padding: 2rem 1.5rem;
    background: #f9fafb;
    border-radius: 8px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}

.tfwkh-placeholder p {
    margin: 0 0 0.75rem;
}

.tfwkh-placeholder ul {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

/* ============================================================
   Phase 2: Document Hub dashboard
   ============================================================ */

.tfwkh-doc-dashboard {
    padding: 1.5rem 1.75rem;
}

/* Stat cards row */
.tfwkh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}
.tfwkh-stat {
    background: #f9fafb;
    border-radius: 8px;
    padding: 14px 16px;
}
.tfwkh-stat-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}
.tfwkh-stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
}

/* Drop zone */
.tfwkh-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 1.25rem;
}
.tfwkh-dropzone:hover,
.tfwkh-dropzone-over {
    border-color: var(--tfwkh-primary);
    background: color-mix(in srgb, var(--tfwkh-primary) 6%, white);
}
.tfwkh-dropzone-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tfwkh-primary) 12%, white);
    color: var(--tfwkh-primary);
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.tfwkh-dropzone-text {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}
.tfwkh-dropzone-sub {
    font-size: 13px;
    color: #6b7280;
}

/* Upload progress */
.tfwkh-upload-progress {
    margin-bottom: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    background: #ffffff;
}
.tfwkh-progress-header {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}
.tfwkh-progress-item {
    display: grid;
    grid-template-columns: 1fr 140px 100px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
}
.tfwkh-progress-name {
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tfwkh-progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.tfwkh-progress-bar-fill {
    height: 100%;
    background: var(--tfwkh-primary);
    width: 0;
    transition: width 0.2s;
}
.tfwkh-progress-status {
    font-size: 12px;
    color: #6b7280;
    text-align: right;
}
.tfwkh-progress-done .tfwkh-progress-status {
    color: #16a34a;
}
.tfwkh-progress-error .tfwkh-progress-status {
    color: #dc2626;
}

/* Toolbar (search, show archived, sync) */
.tfwkh-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.tfwkh-toolbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 280px;
}
.tfwkh-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tfwkh-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.tfwkh-search {
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    min-width: 220px;
}
.tfwkh-search:focus {
    outline: none;
    border-color: var(--tfwkh-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tfwkh-primary) 15%, transparent);
}
.tfwkh-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}
.tfwkh-btn-inline {
    width: auto;
    margin-top: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
}

/* Document list */
.tfwkh-doc-list {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.tfwkh-doc-list-head,
.tfwkh-doc-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1.1fr 1.8fr;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    align-items: center;
}
.tfwkh-doc-list-head {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.tfwkh-doc-row {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.tfwkh-doc-row:last-child {
    border-bottom: none;
}
.tfwkh-doc-row:hover {
    background: #fafbfc;
}
.tfwkh-doc-archived {
    opacity: 0.65;
}
.tfwkh-doc-title {
    font-weight: 500;
    color: #111827;
}
.tfwkh-doc-filename {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}
.tfwkh-doc-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}
.tfwkh-doc-error {
    color: #dc2626;
}
.col-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.tfwkh-iconbtn {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
    transition: all 0.15s;
}
.tfwkh-iconbtn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}
.tfwkh-iconbtn-danger:hover {
    border-color: #fca5a5;
    color: #dc2626;
}
.tfwkh-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}
.badge-active   { background: #d1fae5; color: #065f46; }
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-failed   { background: #fee2e2; color: #991b1b; }
.badge-default  { background: #f3f4f6; color: #6b7280; }
.tfwkh-status-hint {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 3px;
}

/* Toast */
.tfwkh-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 18px;
    background: #111827;
    color: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 9999;
    max-width: 360px;
}
.tfwkh-toast-error {
    background: #dc2626;
}
.tfwkh-toast-info {
    background: #111827;
}

/* Responsive: stack list columns on narrow viewports */
@media (max-width: 780px) {
    .tfwkh-doc-list-head {
        display: none;
    }
    .tfwkh-doc-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px;
    }
    .col-category::before { content: 'Category: '; color: #9ca3af; }
    .col-uploaded::before { content: 'Updated: '; color: #9ca3af; }
    .col-actions {
        justify-content: flex-start;
    }
}


/* ============================================================
   Phase 4: Polished chatbot interface
   ============================================================ */

.tfwkh-chat-wrap {
    padding: 1rem 0;
    font-size: 14px;
}

.tfwkh-chat-shell {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Fluid width: never narrower than 600px, never wider than 1400px,
       otherwise 92% of viewport. Keeps the shell looking right at any zoom. */
    width: 100%;
    max-width: clamp(600px, 92vw, 1400px);
    margin: 0 auto;
    /* Fluid min-height: takes up a good chunk of the viewport but stays
       reasonable on both tall 4K screens and zoomed-in narrow viewports. */
    min-height: clamp(480px, 72vh, 780px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    position: relative;
    /* v2.4.1: configurable font family (falls back to system stack) */
    font-family: var(--tfwkh-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}

/* ---------- Fullscreen mode (shell class .tfwkh-fullscreen-mode) ----------
   Adapted from Employee Demo Chatbot v11.2.4 pattern. Applies on any screen
   size. Uses !important to defeat theme CSS. */
.tfwkh-chat-shell.tfwkh-fullscreen-mode {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* In fullscreen mode, messages area expands (not capped at 520px) */
.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-messages {
    flex: 1 !important;
    max-height: none !important;
    min-height: 0 !important;
}

.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-header,
.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-input-wrap,
.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-toolbar,
.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-privacy {
    flex-shrink: 0 !important;
}

/* Body class: prevent background scroll while fullscreen active */
body.tfwkh-chat-fullscreen-active {
    overflow: hidden !important;
}

/* iOS safe-area support in fullscreen mode */
.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-header {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
}
.tfwkh-chat-shell.tfwkh-fullscreen-mode .tfwkh-chat-privacy {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

/* ---------- Header ---------- */

.tfwkh-chat-header {
    background: linear-gradient(135deg, var(--tfwkh-primary), color-mix(in srgb, var(--tfwkh-primary) 85%, #1a1a2e));
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    border: 0;
    /* Ensure header sits flush to the top of the shell with no gap */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.tfwkh-chat-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tfwkh-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--tfwkh-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.tfwkh-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.tfwkh-chat-titles {
    min-width: 0;
}

.tfwkh-chat-name {
    font-weight: 700;
    font-size: clamp(16px, 1.2vw + 0.5rem, 20px);
    line-height: 1.2;
}

.tfwkh-chat-tagline {
    font-size: clamp(12px, 0.5vw + 0.5rem, 14px);
    opacity: 0.9;
    margin-top: 2px;
}

.tfwkh-chat-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tfwkh-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.9);
}

.tfwkh-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.3);
}

/* Language button */
.tfwkh-lang-wrap {
    position: relative;
}

.tfwkh-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    background: rgba(255,255,255,0.95);
    color: #111827;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.tfwkh-lang-btn:hover {
    background: #ffffff;
}

.tfwkh-lang-flag {
    font-size: 14px;
    line-height: 1;
}

.tfwkh-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.tfwkh-lang-item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
}

.tfwkh-lang-item:hover {
    background: #f3f4f6;
}

.tfwkh-lang-item .tfwkh-lang-flag {
    font-size: 18px;
}

.tfwkh-lang-native {
    font-weight: 500;
    color: #111827;
}

.tfwkh-lang-english {
    font-size: 11px;
    color: #6b7280;
}

/* Text size button */
.tfwkh-textsize-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.15s;
}

.tfwkh-textsize-btn:hover {
    background: rgba(255,255,255,0.3);
}

.tfwkh-aa-small {
    font-size: 10px;
    font-weight: 600;
}
.tfwkh-aa-big {
    font-size: 14px;
    font-weight: 700;
    margin-left: 1px;
}

/* ---------- Messages ---------- */

.tfwkh-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 20px;
    background: #f4f5fb;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Fluid scrollable area - grows/shrinks with viewport. At 100% zoom on
       a normal laptop (~768px viewport height), clamps to ~461px.
       At 4K 100% zoom (~2160px height), goes up to 720px. */
    min-height: clamp(320px, 45vh, 520px);
    max-height: clamp(420px, 60vh, 720px);
    /* Smooth scrolling and prevent awkward horizontal shift from tables */
    scroll-behavior: smooth;
}

.tfwkh-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    /* Responsive max-width: allow bigger bubbles on wide viewports */
    max-width: min(720px, 88%);
}

.tfwkh-msg-bot {
    align-self: flex-start;
}

.tfwkh-msg-user {
    align-self: flex-end;
    flex-direction: row;
}

.tfwkh-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tfwkh-primary), color-mix(in srgb, var(--tfwkh-primary) 70%, #1a1a2e));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    overflow: hidden;
}

.tfwkh-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.tfwkh-msg-avatar-user {
    background: #e5e7eb;
    color: #374151;
}

.tfwkh-msg-content {
    min-width: 0;
    flex: 1;
}

.tfwkh-msg-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.tfwkh-msg-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #e0e4ff;
    color: var(--tfwkh-primary);
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.tfwkh-msg-action:hover {
    background: #f5f6ff;
    border-color: var(--tfwkh-primary);
}

.tfwkh-msg-action.tfwkh-speaking {
    background: var(--tfwkh-primary);
    color: #ffffff;
}

.tfwkh-msg-action.tfwkh-flash {
    background: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
}

.tfwkh-msg-bubble {
    /* v2.4.1: configurable bubble colours with sensible defaults */
    background: var(--tfwkh-bubble-bot-bg, #ffffff);
    color: var(--tfwkh-bubble-bot-text, #111827);
    border-radius: 12px;
    padding: 12px 16px;
    /* Fluid font size: minimum 14px on small viewports, up to 16px on large.
       Scales with viewport width so text stays readable at any zoom. */
    font-size: clamp(14px, 1vw + 0.625rem, 16px);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border: 1px solid #edeef5;
}

.tfwkh-msg-bubble p {
    margin: 0 0 0.6rem;
}
.tfwkh-msg-bubble p:last-child {
    margin-bottom: 0;
}
.tfwkh-msg-bubble strong {
    font-weight: 600;
}

.tfwkh-msg-user .tfwkh-msg-bubble {
    /* v2.4.1: configurable user bubble colour; fallback = auto-tint from primary */
    background: var(--tfwkh-bubble-user-bg, color-mix(in srgb, var(--tfwkh-primary) 15%, white));
    border-color: var(--tfwkh-bubble-user-bg, color-mix(in srgb, var(--tfwkh-primary) 28%, white));
    color: var(--tfwkh-bubble-user-text, #111827);
}

.tfwkh-msg-time {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 5px;
    padding: 0 4px;
}

.tfwkh-msg-user .tfwkh-msg-time {
    text-align: right;
}

.tfwkh-msg-citations {
    margin-top: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #edeef5;
    border-radius: 8px;
    font-size: 12px;
}

.tfwkh-cite-label {
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

.tfwkh-cite {
    display: inline-block;
    background: #f3f4f6;
    color: #374151;
    padding: 2px 8px;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
    font-size: 11px;
}

/* v2.7.0: stale-policy warning badge next to a citation */
.tfwkh-cite-stale {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    padding: 2px 8px;
    border-radius: 6px;
    margin: 2px 4px 2px 0;
    font-size: 11px;
    font-weight: 500;
}

/* ============================================================
   v2.8.0: Email card - shown when the bot drafts an email.
   Subject line, letter-style body, copy / open-in-mail actions,
   and a language switcher on the draft itself.
   ============================================================ */
.tfwkh-msg-bubble-email {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: 100%;
}
/* v2.8.1: chatty lead-in shown above the card as a normal bubble */
.tfwkh-email-preamble {
    background: #ffffff;
    border: 1px solid #e4e6ea;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 10px rgba(20,24,32,.08);
    padding: 12px 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #1f2329;
    max-width: 680px;
    margin-bottom: 10px;
}
.tfwkh-email-preamble p { margin: 0 0 8px; }
.tfwkh-email-preamble p:last-child { margin-bottom: 0; }
.tfwkh-email-card {
    background: #ffffff;
    border: 1px solid #e4e6ea;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(20,24,32,.08);
    overflow: hidden;
    max-width: 680px;
}
.tfwkh-email-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #e4e6ea;
    flex-wrap: wrap;
}
.tfwkh-email-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tfwkh-primary, #c8102e);
}
.tfwkh-email-spacer { flex: 1; }
.tfwkh-email-langlabel {
    font-size: 12px;
    color: #6b7280;
}
.tfwkh-email-lang {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #d4d7dd;
    background: #ffffff;
    color: #1f2329;
    cursor: pointer;
    font-family: inherit;
}
.tfwkh-email-lang:disabled { opacity: .6; cursor: wait; }
.tfwkh-email-subject {
    padding: 14px 20px 0;
    font-size: 12.5px;
    color: #6b7280;
}
.tfwkh-email-subject strong {
    display: block;
    color: #1f2329;
    font-size: 16px;
    font-weight: 700;
    margin-top: 3px;
    line-height: 1.35;
}
.tfwkh-email-body {
    background: #fdfdfc;
    margin: 12px 20px 16px;
    border: 1px solid #ececea;
    border-radius: 10px;
    padding: 18px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #1f2329;
}
.tfwkh-email-body p { margin: 0 0 12px; }
.tfwkh-email-body p:last-child { margin-bottom: 0; }
.tfwkh-email-body ol,
.tfwkh-email-body ul { margin: 4px 0 14px 22px; padding: 0; }
.tfwkh-email-body li { margin-bottom: 9px; padding-left: 4px; }
.tfwkh-email-actions {
    display: flex;
    gap: 10px;
    padding: 0 20px 14px;
    flex-wrap: wrap;
    align-items: center;
}
.tfwkh-email-btn {
    border: 1px solid #dfe2e8;
    background: #ffffff;
    color: #1f2329;
    padding: 8px 15px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    text-decoration: none;
}
.tfwkh-email-btn:hover { border-color: var(--tfwkh-primary, #c8102e); }
.tfwkh-email-copy {
    background: var(--tfwkh-primary, #c8102e);
    border-color: var(--tfwkh-primary, #c8102e);
    color: #ffffff;
}
.tfwkh-email-copy:hover { filter: brightness(.92); }
.tfwkh-email-status { font-size: 12.5px; font-weight: 600; }
.tfwkh-email-status-ok { color: #16a34a; }
.tfwkh-email-status-err { color: #dc2626; }
.tfwkh-email-note {
    font-size: 11.5px;
    color: #9aa3af;
    padding: 0 20px 14px;
}
@media (max-width: 640px) {
    .tfwkh-email-body { margin: 10px 12px 12px; padding: 14px; }
    .tfwkh-email-subject, .tfwkh-email-actions, .tfwkh-email-note { padding-left: 14px; padding-right: 14px; }
}

.tfwkh-provider-note {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 12px;
}

.tfwkh-msg-error .tfwkh-msg-avatar {
    background: #dc2626;
}

.tfwkh-msg-error .tfwkh-msg-bubble {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.tfwkh-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ca3af;
    margin: 0 2px;
    animation: tfwkh-blink 1.4s infinite ease-in-out both;
}
.tfwkh-dot:nth-child(2) { animation-delay: 0.2s; }
.tfwkh-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes tfwkh-blink {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

/* ---------- Suggested questions ---------- */

.tfwkh-suggested {
    background: #ffffff;
    border-top: 1px solid #edeef5;
    padding: 0 20px;
}

.tfwkh-suggested-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: #f8f9ff;
    border: 1px solid #e0e4ff;
    border-radius: 10px;
    margin: 12px 0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    color: #4a5568;
    transition: all 0.15s;
}
.tfwkh-suggested-toggle:hover {
    background: #eef0ff;
}

.tfwkh-suggested-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.tfwkh-bulb {
    font-size: 14px;
}

.tfwkh-caret {
    transition: transform 0.15s;
}
.tfwkh-suggested-open .tfwkh-caret {
    transform: rotate(180deg);
}

.tfwkh-suggested-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    padding: 0 0 12px;
}

.tfwkh-suggested-chip {
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e0e4ff;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    line-height: 1.4;
}
.tfwkh-suggested-chip:hover {
    background: color-mix(in srgb, var(--tfwkh-primary) 6%, white);
    border-color: var(--tfwkh-primary);
    color: var(--tfwkh-primary);
}

/* ---------- Input ---------- */

.tfwkh-chat-input-wrap {
    background: #ffffff;
    border-top: 1px solid #edeef5;
    padding: 14px 20px;
}

.tfwkh-chat-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.tfwkh-chat-input {
    flex: 1;
    border: 1px solid #e0e4ff;
    border-radius: 24px;
    padding: 12px 18px;
    /* 16px minimum to prevent iOS Safari auto-zoom when focusing the input.
       Scales up to 17px on large desktop viewports. */
    font-size: clamp(16px, 0.85vw + 0.75rem, 17px);
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
    min-height: 44px;
    max-height: 140px;
    line-height: 1.4;
    color: #111827;
    background: #f8f9ff;
    transition: all 0.15s;
}

.tfwkh-chat-input:focus {
    outline: none;
    border-color: var(--tfwkh-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tfwkh-primary) 15%, transparent);
}

.tfwkh-chat-input:disabled {
    opacity: 0.6;
}

.tfwkh-mic-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #6b7280;
    border: 1px solid #e0e4ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: inherit;
    transition: all 0.15s;
}
.tfwkh-mic-btn:hover {
    background: #f3f4f6;
    color: #374151;
}
.tfwkh-mic-btn.tfwkh-mic-active {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    animation: tfwkh-mic-pulse 1.2s infinite;
}
.tfwkh-mic-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes tfwkh-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

.tfwkh-chat-send {
    padding: 0 22px;
    height: 44px;
    border-radius: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tfwkh-primary) 90%, white), var(--tfwkh-primary));
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    flex-shrink: 0;
    transition: all 0.15s;
}
.tfwkh-chat-send:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.tfwkh-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Toolbar ---------- */

.tfwkh-chat-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 14px;
    background: #ffffff;
    align-items: center;
}

.tfwkh-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #ffffff;
    border: 1px solid #e0e4ff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.tfwkh-tool:hover {
    background: #f8f9ff;
    border-color: var(--tfwkh-primary);
    color: var(--tfwkh-primary);
}
.tfwkh-tool-signout:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

/* ---------- Privacy notice ---------- */

.tfwkh-chat-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #f8f9ff;
    border-top: 1px solid #edeef5;
    font-size: 11px;
    color: #6b7280;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
}

/* v2.6.11 (F2): "Powered by" footer.
   Deliberately small and unobtrusive - sits below the privacy line,
   link opacity rises on hover so it's discoverable but never competes
   with the charity's own branding. */
.tfwkh-chat-powered-by {
    padding: 6px 20px 10px;
    background: #f8f9ff;
    font-size: 10px;
    text-align: center;
    line-height: 1.4;
}
.tfwkh-chat-powered-by a {
    color: #9ca3af;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.tfwkh-chat-powered-by a:hover,
.tfwkh-chat-powered-by a:focus {
    opacity: 1;
    color: #0F6E56;
    text-decoration: underline;
}

/* ---------- Toast ---------- */

.tfwkh-chat-toast {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 20px);
    background: #111827;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
    opacity: 0;
    transition: all 0.3s;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tfwkh-chat-toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- Text size modes (Normal → Large → Extra Large → Huge) ---------- */

/* Normal is the default - no class needed, uses the clamp() sizes on bubble/input */

/* Large: bumps bubble to 17px, input to 17px */
.tfwkh-chat-shell.tfwkh-text-large .tfwkh-msg-bubble { font-size: 17px !important; line-height: 1.65 !important; }
.tfwkh-chat-shell.tfwkh-text-large .tfwkh-chat-input { font-size: 17px !important; }
.tfwkh-chat-shell.tfwkh-text-large .tfwkh-chat-name { font-size: 19px !important; }

/* Extra Large: 20px */
.tfwkh-chat-shell.tfwkh-text-xlarge .tfwkh-msg-bubble { font-size: 20px !important; line-height: 1.7 !important; }
.tfwkh-chat-shell.tfwkh-text-xlarge .tfwkh-chat-input { font-size: 20px !important; }
.tfwkh-chat-shell.tfwkh-text-xlarge .tfwkh-chat-name { font-size: 21px !important; }
.tfwkh-chat-shell.tfwkh-text-xlarge .tfwkh-chat-messages { gap: 22px !important; }

/* Huge (NEW): 24px - for accessibility / large-print users */
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-msg-bubble {
    font-size: 24px !important;
    line-height: 1.75 !important;
    padding: 16px 20px !important;
}
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-chat-input {
    font-size: 22px !important;
    padding: 14px 20px !important;
    min-height: 54px !important;
}
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-chat-name { font-size: 24px !important; }
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-chat-tagline { font-size: 15px !important; }
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-chat-messages { gap: 26px !important; }
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-chat-send { font-size: 16px !important; padding: 0 22px !important; }
.tfwkh-chat-shell.tfwkh-text-huge .tfwkh-tool { font-size: 14px !important; padding: 8px 14px !important; }

/* ---------- Mobile ----------
   Adapted from Employee Demo Chatbot v11.2.4 pattern.
   At 768px or narrower the chat ALWAYS fills the viewport regardless of
   admin display-mode setting. JS skips the picker modal on mobile too. */

/* ---------- Chat fullscreen overlay (v2.4.4)
   The chat wrap is a fixed-position overlay with a very high z-index.
   It sits ON TOP of the theme instead of hiding it. This is much safer
   than display:none-ing siblings (which caused race conditions with
   slow-loading themes / cached pages where the chat flashed then
   disappeared). Body scroll is disabled while the chat is active. */

body.tfwkh-chat-mobile-lock {
    overflow: hidden !important;
    /* Don't change body position - that breaks lots of themes. Just disable scroll. */
}

/* The chat wrap covers the viewport as a fixed overlay */
.tfwkh-chat-wrap {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483000 !important; /* extremely high to beat any theme z-index */
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Leave room for the WP admin bar when logged in */
body.admin-bar .tfwkh-chat-wrap {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar .tfwkh-chat-wrap {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
}

/* The chat shell fills the wrap */
.tfwkh-chat-shell {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1 !important;
    background: #ffffff !important;
}

/* ---------- Mobile refinements ---------- */

@media screen and (max-width: 768px) {
    .tfwkh-chat-header {
        padding: 12px 14px;
        padding-top: max(12px, env(safe-area-inset-top));
        flex-shrink: 0;
    }

    .tfwkh-chat-messages {
        flex: 1 !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 16px 12px;
        overflow-y: auto;
    }

    .tfwkh-chat-input-wrap {
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .tfwkh-chat-toolbar {
        padding: 0 12px 10px;
        flex-shrink: 0;
    }

    .tfwkh-chat-privacy {
        padding: 8px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        flex-shrink: 0;
    }

    .tfwkh-msg { max-width: 94%; }
    .tfwkh-chat-tagline { display: none; }
    .tfwkh-online { display: none; }
    .tfwkh-lang-label { display: none; }
    .tfwkh-suggested-list { grid-template-columns: 1fr; }
    .tfwkh-tool { font-size: 11px; padding: 5px 10px; }
    .tfwkh-chat-send { padding: 0 16px; font-size: 12px; }

    /* Picker modal never shows on mobile - JS hides it and CSS double-hides */
    .tfwkh-viewmode-modal { display: none !important; }
    .tfwkh-viewswitch-btn { display: none !important; }
}

@media screen and (max-width: 600px) {
    /* Extra tightening for small phones */
    .tfwkh-chat-header { padding: 10px 12px; }
    .tfwkh-chat-avatar { width: 40px; height: 40px; }
    .tfwkh-chat-name { font-size: 16px; }
}

/* Downloadable citation chips */
.tfwkh-cite-link {
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--tfwkh-primary) 8%, white);
    color: var(--tfwkh-primary);
    border: 1px solid color-mix(in srgb, var(--tfwkh-primary) 25%, white);
    transition: all 0.15s;
}
.tfwkh-cite-link:hover {
    background: color-mix(in srgb, var(--tfwkh-primary) 15%, white);
    border-color: var(--tfwkh-primary);
    text-decoration: none;
}
.tfwkh-cite-link:focus {
    outline: 2px solid var(--tfwkh-primary);
    outline-offset: 2px;
}

/* ============================================================
   v1.4.0: Header breathing room, mobile fullscreen, new toolbar features
   ============================================================ */

/* Header - bigger padding so the title doesn't feel cramped */
.tfwkh-chat-header {
    padding: 20px 24px;
    gap: 16px;
}
.tfwkh-chat-avatar {
    width: 52px;
    height: 52px;
}
.tfwkh-chat-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
}
.tfwkh-chat-tagline {
    font-size: 13px;
    opacity: 0.92;
    line-height: 1.3;
}

/* Feature buttons (Check Internet / Upload Docs / Image Upload) */
.tfwkh-tool-feature {
    position: relative;
    padding-left: 22px;
    font-weight: 600;
}
.tfwkh-tool-dot {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.tfwkh-tool-dot-blue  { background: #2196F3; box-shadow: 0 0 0 2px rgba(33,150,243,0.2); }
.tfwkh-tool-dot-green { background: #4CAF50; box-shadow: 0 0 0 2px rgba(76,175,80,0.2); }
.tfwkh-tool-dot-pink  { background: #E91E63; box-shadow: 0 0 0 2px rgba(233,30,99,0.2); }

.tfwkh-tool-internet {
    color: #1976d2;
    border-color: rgba(33,150,243,0.35);
    background: rgba(33,150,243,0.06);
}
.tfwkh-tool-internet:hover { background: rgba(33,150,243,0.12); border-color: rgba(33,150,243,0.55); color: #1565c0; }

.tfwkh-tool-upload {
    color: #2e7d32;
    border-color: rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.06);
}
.tfwkh-tool-upload:hover { background: rgba(76,175,80,0.12); border-color: rgba(76,175,80,0.55); color: #1b5e20; }

.tfwkh-tool-image {
    color: #c2185b;
    border-color: rgba(233,30,99,0.35);
    background: rgba(233,30,99,0.06);
}
.tfwkh-tool-image:hover { background: rgba(233,30,99,0.12); border-color: rgba(233,30,99,0.55); color: #ad1457; }

.tfwkh-tool-active {
    background: #e3f2fd;
    border-color: #1976d2;
    color: #0d47a1;
    box-shadow: 0 0 0 2px rgba(33,150,243,0.25);
}

.tfwkh-toolbar-sep {
    width: 1px;
    height: 22px;
    background: #e0e4ff;
    margin: 0 4px;
}

.tfwkh-signout-form {
    display: inline;
    margin-left: auto;
}

/* Attachment chips (shown above input when user attaches doc/image) */
.tfwkh-attachments {
    padding: 8px 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tfwkh-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    background: #f5f6ff;
    border: 1px solid #d8ddff;
    border-radius: 10px;
    max-width: 280px;
    font-size: 12px;
    color: #374151;
}
.tfwkh-attach-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
}
.tfwkh-attach-icon {
    color: var(--tfwkh-primary);
    display: inline-flex;
}
.tfwkh-attach-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.tfwkh-attach-size {
    color: #9ca3af;
    font-size: 11px;
}
.tfwkh-attach-remove {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
}
.tfwkh-attach-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* User message attachment preview (image thumb / doc chip inside user bubble area) */
.tfwkh-msg-user-attach {
    margin-bottom: 6px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.tfwkh-msg-attach-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 10px;
    border: 1px solid #edeef5;
    display: block;
}
.tfwkh-msg-attach-doc {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #edeef5;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: #374151;
}

/* Web citation (different icon colour hint) */
.tfwkh-cite-web {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}
.tfwkh-cite-web:hover {
    background: #ffedd5;
    border-color: #fb923c;
    color: #7c2d12;
}

/* ============================================================
   Supplementary mobile polish (tightens toolbar/header text)
   The heavy lifting (fullscreen sizing) is done by the main mobile
   media query above, and by .tfwkh-fullscreen-mode on the shell.
   ============================================================ */

@media (max-width: 700px) {
    /* Tighten toolbar on mobile so all 6 buttons fit */
    .tfwkh-chat-toolbar {
        gap: 6px;
        padding: 0 12px 12px;
    }
    .tfwkh-tool { font-size: 11px; padding: 6px 10px; }
    .tfwkh-tool-feature { padding-left: 20px; }
    .tfwkh-toolbar-sep { display: none; }
    .tfwkh-signout-form { margin-left: 0; flex: 0 0 auto; }

    /* Header stays compact but not squashed */
    .tfwkh-chat-header { gap: 12px; }
    .tfwkh-chat-avatar { width: 44px; height: 44px; }
    .tfwkh-chat-name { font-size: 17px; }
    .tfwkh-chat-tagline { font-size: 12px; }
    .tfwkh-online { display: none; }
    .tfwkh-lang-label { display: none; }
    .tfwkh-lang-btn { padding: 5px 8px; }
}

/* ============================================================
   v1.5.0: Thumbs up / thumbs down feedback
   ============================================================ */

.tfwkh-msg-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 0;
    font-size: 11px;
    color: #6b7280;
}

.tfwkh-feedback-label {
    font-weight: 500;
}

.tfwkh-feedback-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e0e4ff;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    font-family: inherit;
}

.tfwkh-feedback-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--tfwkh-primary) 8%, white);
    border-color: var(--tfwkh-primary);
    color: var(--tfwkh-primary);
    transform: translateY(-1px);
}

.tfwkh-feedback-btn[data-rating="up"].tfwkh-feedback-active {
    background: #dcfce7;
    border-color: #22c55e;
    color: #16a34a;
}

.tfwkh-feedback-btn[data-rating="down"].tfwkh-feedback-active {
    background: #fee2e2;
    border-color: #ef4444;
    color: #dc2626;
}

.tfwkh-feedback-btn:disabled {
    cursor: default;
}

.tfwkh-feedback-submitted .tfwkh-feedback-btn:not(.tfwkh-feedback-active) {
    opacity: 0.35;
}

/* ============================================================
   v2.3.0: Markdown tables and lists inside chat bubbles
   ============================================================ */

.tfwkh-table-wrap {
    margin: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tfwkh-chat-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.tfwkh-chat-table th,
.tfwkh-chat-table td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #edeef5;
    border-right: 1px solid #edeef5;
}

.tfwkh-chat-table th:last-child,
.tfwkh-chat-table td:last-child {
    border-right: none;
}

.tfwkh-chat-table tr:last-child td {
    border-bottom: none;
}

.tfwkh-chat-table thead {
    background: color-mix(in srgb, var(--tfwkh-primary) 8%, white);
}

.tfwkh-chat-table th {
    font-weight: 600;
    color: #111827;
    border-bottom: 2px solid color-mix(in srgb, var(--tfwkh-primary) 30%, white);
}

.tfwkh-chat-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.tfwkh-chat-table tbody tr:hover {
    background: color-mix(in srgb, var(--tfwkh-primary) 5%, white);
}

/* Mobile: tables scroll horizontally if they're too wide */
@media (max-width: 600px) {
    .tfwkh-chat-table {
        font-size: 12px;
    }
    .tfwkh-chat-table th,
    .tfwkh-chat-table td {
        padding: 6px 8px;
    }
}

/* Lists inside chat bubbles */
.tfwkh-chat-list {
    margin: 6px 0 6px 1.2em;
    padding: 0;
}

.tfwkh-chat-list li {
    margin: 3px 0;
    line-height: 1.5;
}

ul.tfwkh-chat-list {
    list-style: disc;
}

ol.tfwkh-chat-list {
    list-style: decimal;
}

.tfwkh-chat-sublist {
    margin: 4px 0 2px 0.5em;
    padding: 0;
    list-style: disc;
}

.tfwkh-chat-sublist li {
    margin: 2px 0;
    line-height: 1.5;
}

/* Inline code (appears inside paragraphs and table cells) */
.tfwkh-inline-code {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: ui-monospace, Consolas, Menlo, monospace;
    font-size: 0.88em;
    color: #374151;
}

/* ============================================================
   v2.3.8: View-mode picker modal
   Adapted directly from Employee Demo Chatbot v11.2.4 - proven pattern.
   ============================================================ */

.tfwkh-viewmode-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 16px;
    box-sizing: border-box;
}

.tfwkh-viewmode-modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tfwkh-viewmode-content {
    background: #ffffff;
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.35s ease;
}

.tfwkh-viewmode-modal.show .tfwkh-viewmode-content {
    transform: translateY(0) scale(1);
}

.tfwkh-viewmode-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 28px;
    text-align: center;
}

.tfwkh-viewmode-header h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.tfwkh-viewmode-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
}

.tfwkh-viewmode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 28px;
}

.tfwkh-viewmode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    font-family: inherit;
}

.tfwkh-viewmode-option:hover,
.tfwkh-viewmode-option:focus-visible {
    border-color: #667eea;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
    outline: none;
}

.tfwkh-viewmode-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.tfwkh-viewmode-option.fullscreen .tfwkh-viewmode-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tfwkh-viewmode-option.embedded .tfwkh-viewmode-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.tfwkh-viewmode-option h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.tfwkh-viewmode-option p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.tfwkh-viewmode-footer {
    padding: 0 28px 22px;
    text-align: center;
}

.tfwkh-viewmode-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    user-select: none;
}

.tfwkh-viewmode-remember input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

@media (max-width: 520px) {
    .tfwkh-viewmode-options {
        grid-template-columns: 1fr;
    }
    .tfwkh-viewmode-header { padding: 20px 24px; }
    .tfwkh-viewmode-header h3 { font-size: 18px; }
}

/* Switch view button in header (only on desktop) */
.tfwkh-viewswitch-btn {
    width: 32px;
    height: 32px;
    padding: 0;
}
@media (max-width: 768px) {
    .tfwkh-viewswitch-btn { display: none !important; }
}

/* ============================================================
   v2.4.0: Dark mode protection
   
   Many users install browser extensions like Dark Reader, Night Eye,
   Midnight Lizard, or enable OS-level dark mode that invert page colours.
   These tools often badly mangle chat UIs - making white bubbles black,
   missing text colours, bad contrast on accent colours (see screenshot
   issue where primary teal becomes unreadable on dark background).
   
   This CSS makes the Knowledge Hub chat ALWAYS render in its intended
   light palette, regardless of system or extension dark-mode settings.
   We do this three ways:
   
   1. color-scheme: only light - tells browsers we don't support dark mode
   2. Explicit colour values on all key elements (no "inherit" from body)
   3. Filter: invert hacks defeated by preventing Dark Reader's injection
   ============================================================ */

.tfwkh-light-mode-force {
    color-scheme: light only;
}

.tfwkh-light-mode-force .tfwkh-chat-shell {
    background: #ffffff !important;
    color: #111827 !important;
}

.tfwkh-light-mode-force .tfwkh-chat-messages {
    background: #f4f5fb !important;
}

.tfwkh-light-mode-force .tfwkh-msg-bubble {
    background: var(--tfwkh-bubble-bot-bg, #ffffff) !important;
    color: var(--tfwkh-bubble-bot-text, #111827) !important;
    border-color: #edeef5 !important;
}

.tfwkh-light-mode-force .tfwkh-msg-user .tfwkh-msg-bubble {
    background: var(--tfwkh-bubble-user-bg, color-mix(in srgb, var(--tfwkh-primary) 15%, #ffffff)) !important;
    color: var(--tfwkh-bubble-user-text, #111827) !important;
}

.tfwkh-light-mode-force .tfwkh-msg-error .tfwkh-msg-bubble {
    background: #fef2f2 !important;
    color: #7f1d1d !important;
    border-color: #fecaca !important;
}

.tfwkh-light-mode-force .tfwkh-chat-input-wrap {
    background: #ffffff !important;
    border-top-color: #e5e7eb !important;
}

.tfwkh-light-mode-force .tfwkh-chat-input {
    background: #f8f9ff !important;
    color: #111827 !important;
    border-color: #e0e4ff !important;
}

.tfwkh-light-mode-force .tfwkh-chat-input:focus {
    background: #ffffff !important;
}

.tfwkh-light-mode-force .tfwkh-chat-toolbar {
    background: #ffffff !important;
}

.tfwkh-light-mode-force .tfwkh-chat-privacy {
    background: #f8f9ff !important;
    color: #6b7280 !important;
    border-top-color: #e5e7eb !important;
}

.tfwkh-light-mode-force .tfwkh-msg-time {
    color: #6b7280 !important;
}

.tfwkh-light-mode-force .tfwkh-msg-bot-actions button,
.tfwkh-light-mode-force .tfwkh-msg-feedback-btn {
    background: #ffffff !important;
    color: var(--tfwkh-primary) !important;
    border-color: #e5e7eb !important;
}

.tfwkh-light-mode-force .tfwkh-tool {
    background: #ffffff !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}

.tfwkh-light-mode-force .tfwkh-suggested-list .tfwkh-suggested-item {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

.tfwkh-light-mode-force .tfwkh-msg-avatar-user {
    background: #e5e7eb !important;
    color: #374151 !important;
}

.tfwkh-light-mode-force .tfwkh-chat-table {
    background: #ffffff !important;
}
.tfwkh-light-mode-force .tfwkh-chat-table th {
    color: #111827 !important;
}
.tfwkh-light-mode-force .tfwkh-chat-table td {
    color: #111827 !important;
}
.tfwkh-light-mode-force .tfwkh-chat-table tbody tr:nth-child(even) {
    background: #fafafa !important;
}

.tfwkh-light-mode-force .tfwkh-inline-code {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #e5e7eb !important;
}

/* Tell Dark Reader specifically to leave us alone. The extension respects
   this meta hint and skips inversion on elements with data-darkreader-ignore */
.tfwkh-light-mode-force,
.tfwkh-light-mode-force * {
    -webkit-filter: none !important;
    filter: none !important;
}

/* OS-level dark mode (without extensions): also force light */
@media (prefers-color-scheme: dark) {
    .tfwkh-light-mode-force {
        color-scheme: light only;
    }
    .tfwkh-light-mode-force .tfwkh-chat-shell,
    .tfwkh-light-mode-force .tfwkh-chat-messages,
    .tfwkh-light-mode-force .tfwkh-msg-bubble,
    .tfwkh-light-mode-force .tfwkh-chat-input,
    .tfwkh-light-mode-force .tfwkh-chat-toolbar,
    .tfwkh-light-mode-force .tfwkh-chat-privacy,
    .tfwkh-light-mode-force .tfwkh-tool {
        background-color: revert !important;
        color: revert !important;
    }
}

/* Dashboard + Login wrap light-mode protection */
.tfwkh-light-mode-force.tfwkh-dash-wrap,
.tfwkh-light-mode-force.tfwkh-login-wrap {
    background: #f4f5fb !important;
    color: #111827 !important;
}

.tfwkh-light-mode-force .tfwkh-dash,
.tfwkh-light-mode-force .tfwkh-login-card {
    background: #ffffff !important;
    color: #111827 !important;
}

.tfwkh-light-mode-force .tfwkh-dash-header,
.tfwkh-light-mode-force .tfwkh-login-header {
    color: #111827 !important;
}

.tfwkh-light-mode-force .tfwkh-form-input,
.tfwkh-light-mode-force .tfwkh-form-input input,
.tfwkh-light-mode-force .tfwkh-form-input textarea,
.tfwkh-light-mode-force input[type="text"],
.tfwkh-light-mode-force input[type="email"],
.tfwkh-light-mode-force input[type="password"],
.tfwkh-light-mode-force textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.tfwkh-light-mode-force label,
.tfwkh-light-mode-force .tfwkh-label,
.tfwkh-light-mode-force h1,
.tfwkh-light-mode-force h2,
.tfwkh-light-mode-force h3,
.tfwkh-light-mode-force h4,
.tfwkh-light-mode-force p,
.tfwkh-light-mode-force span:not(.tfwkh-online-dot):not(.tfwkh-aa-small):not(.tfwkh-aa-big),
.tfwkh-light-mode-force td,
.tfwkh-light-mode-force th {
    color: inherit !important;
}

.tfwkh-light-mode-force .tfwkh-doc-row,
.tfwkh-light-mode-force .tfwkh-doc-card {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* ---------- Client Portal (v2.6.14) ----------
   A public-facing landing page for charity/CIC staff showing the three
   paths into the system: Chat / Upload / Training. Designed to be
   dyslexia-friendly and mobile-responsive. */
.tfwkh-portal-wrap {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tfwkh-portal-card-main {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.tfwkh-portal-header {
    text-align: center;
    margin-bottom: 32px;
}

.tfwkh-portal-logo {
    max-height: 64px;
    max-width: 200px;
    margin: 0 auto 12px;
    display: block;
}

.tfwkh-portal-title {
    font-size: 28px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px;
    line-height: 1.2;
}

.tfwkh-portal-sub {
    color: #6b7280;
    font-size: 15px;
    margin: 0;
    line-height: 1.5;
}

.tfwkh-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.tfwkh-portal-item {
    display: block;
    padding: 24px 22px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
}

.tfwkh-portal-item:hover,
.tfwkh-portal-item:focus {
    background: #ffffff;
    border-color: var(--tfwkh-primary, #0F6E56);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    text-decoration: none;
}

.tfwkh-portal-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--tfwkh-primary, #0F6E56);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.tfwkh-portal-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px;
    line-height: 1.3;
}

.tfwkh-portal-item p {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

.tfwkh-portal-lock {
    display: inline-block;
    margin-top: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #92400e;
    background: #fef3c7;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 600px) {
    .tfwkh-portal-card-main { padding: 24px 18px; }
    .tfwkh-portal-title { font-size: 22px; }
    .tfwkh-portal-grid { grid-template-columns: 1fr; gap: 12px; }
    .tfwkh-portal-item { padding: 20px 18px; }
}

/* ---------- About / Transparency Panel (v2.6.18) ----------
   A lightweight overlay showing end users what the assistant is,
   what happens to their data, its limitations, and how to report
   issues. Satisfies GDPR Article 13 transparency best-practice. */
.tfwkh-about-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: currentColor;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.18s ease, border-color 0.18s ease;
    margin-left: 4px;
}
.tfwkh-about-btn:hover,
.tfwkh-about-btn:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
    outline: none;
}

.tfwkh-about-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    padding: 20px;
}
.tfwkh-about-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.tfwkh-about-panel {
    background: #ffffff;
    color: #1f2937;
    max-width: 460px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    padding: 26px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    position: relative;
    transform: translateY(10px);
    transition: transform 0.22s ease;
}
.tfwkh-about-overlay[aria-hidden="false"] .tfwkh-about-panel {
    transform: translateY(0);
}

.tfwkh-about-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.tfwkh-about-close:hover,
.tfwkh-about-close:focus-visible {
    background: #f3f4f6;
    color: #1f2937;
    outline: none;
}

.tfwkh-about-h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #111827;
    padding-right: 28px;
    line-height: 1.3;
}

.tfwkh-about-section {
    margin-bottom: 16px;
}
.tfwkh-about-section h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tfwkh-primary, #0F6E56);
    margin: 0 0 6px;
}
.tfwkh-about-section p {
    font-size: 14px;
    line-height: 1.55;
    color: #374151;
    margin: 0 0 8px;
}
.tfwkh-about-section p:last-child {
    margin-bottom: 0;
}
.tfwkh-about-section ul {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #374151;
}
.tfwkh-about-section ul li {
    margin-bottom: 4px;
}
.tfwkh-about-section a {
    color: var(--tfwkh-primary, #0F6E56);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tfwkh-about-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}
.tfwkh-about-footer a {
    color: #6b7280;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .tfwkh-about-panel {
        padding: 22px 20px;
        max-height: 85vh;
    }
    .tfwkh-about-h2 { font-size: 17px; }
}

/* Force the overlay into the chat container positioning */
.tfwkh-chat-container { position: relative; }

/* ---------- Markdown headings within chat bubbles (v2.6.20) ----------
   The AI sometimes returns markdown headings (##, ###, etc.) especially
   when producing reports or structured answers. These styles make them
   render cleanly inside chat bubbles without overwhelming the layout. */
.tfwkh-msg-bubble .tfwkh-md-h {
    margin: 14px 0 6px;
    color: inherit;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.tfwkh-msg-bubble .tfwkh-md-h:first-child { margin-top: 0; }

.tfwkh-msg-bubble .tfwkh-md-h3 { font-size: 1.15em; }
.tfwkh-msg-bubble .tfwkh-md-h4 { font-size: 1.08em; }
.tfwkh-msg-bubble .tfwkh-md-h5 { font-size: 1em; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; }
.tfwkh-msg-bubble .tfwkh-md-h6 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }

.tfwkh-msg-bubble .tfwkh-hr {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
    margin: 14px 0;
}

/* When headings appear, the wrapping <p> creates awkward margins. Neutralise. */
.tfwkh-msg-bubble p:has(> .tfwkh-md-h:only-child),
.tfwkh-msg-bubble p:has(> .tfwkh-hr:only-child) {
    margin: 0;
}

/* =============================================================
   v2.6.21 — LAYOUT RECLAIM
   Widens chat bubbles and compacts the surrounding chrome so more
   of the conversation is visible on screen. Approved from the
   side-by-side mock. Changes are kept as overrides at the end of
   the file for easy rollback if needed.
   ============================================================= */

/* --- Bigger chat bubbles -----------------------------------------
   Was: max-width: min(720px, 88%)
   Now: 92% for bot messages (they're usually longer and benefit more),
   82% for user messages (still visibly "outgoing" without dominating). */
.tfwkh-msg-bot {
    max-width: min(900px, 92%);
}
.tfwkh-msg-user {
    max-width: min(760px, 82%);
}

/* --- Compact header --------------------------------------------
   Avatar 48px -> 36px, padding 16px -> 10px.
   Saves about 20px of vertical space. */
.tfwkh-chat-header {
    padding: 10px 18px;
    gap: 10px;
}
.tfwkh-chat-identity {
    gap: 10px;
}
.tfwkh-chat-avatar {
    width: 36px;
    height: 36px;
}
.tfwkh-chat-name {
    font-size: clamp(14px, 1vw + 0.5rem, 17px);
}
.tfwkh-chat-tagline {
    font-size: clamp(11px, 0.4vw + 0.4rem, 13px);
    margin-top: 1px;
}

/* --- Condensed action row --------------------------------------
   Tighter padding on the row; pills themselves already scale via
   their existing classes. Saves about 8-12px. */
.tfwkh-action-row,
.tfwkh-chat-action-row,
.tfwkh-action-pills,
.tfwkh-chat-footer-actions {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
}

/* --- Shorter privacy notice ------------------------------------
   We tighten the line height and padding. The full GDPR text
   remains accessible via the About panel (the "i" icon we shipped
   in v2.6.18). Saves about 15-25px. */
.tfwkh-privacy-notice,
.tfwkh-chat-privacy-note,
.tfwkh-chat-footer-privacy {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

/* --- Suggested questions panel ---------------------------------
   Tighter when collapsed. */
.tfwkh-suggested-row,
.tfwkh-suggestions-row,
.tfwkh-suggested-wrap {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* --- Responsive tweaks -----------------------------------------
   On very narrow screens (under 600px) the avatar shrink plus
   tighter padding would feel cramped, so we restore a tiny bit
   of breathing room. */
@media (max-width: 600px) {
    .tfwkh-chat-header {
        padding: 12px 16px;
    }
    .tfwkh-chat-avatar {
        width: 40px;
        height: 40px;
    }
    .tfwkh-msg-bot {
        max-width: 96%;
    }
    .tfwkh-msg-user {
        max-width: 88%;
    }
}

/* ---------- Inline links in bot messages (v2.6.22) ----------
   Makes [markdown links](url), bare URLs, emails, and phone numbers
   clearly clickable within chat bubbles. Underline + brand accent. */
.tfwkh-msg-bubble .tfwkh-md-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;  /* Long URLs shouldn't break the layout */
    transition: text-decoration-thickness 0.15s ease;
}
.tfwkh-msg-bubble .tfwkh-md-link:hover,
.tfwkh-msg-bubble .tfwkh-md-link:focus {
    text-decoration-thickness: 2px;
    opacity: 0.9;
}
/* Phone and email links get a small prefix icon so users spot them */
.tfwkh-msg-bubble .tfwkh-md-link-tel::before {
    content: "📞";
    font-size: 0.85em;
    margin-right: 3px;
    text-decoration: none;
    display: inline-block;
}
.tfwkh-msg-bubble .tfwkh-md-link-mail::before {
    content: "✉";
    font-size: 0.9em;
    margin-right: 3px;
    text-decoration: none;
    display: inline-block;
}

/* ---------- Chat close button (v2.6.24) ----------
   Sits in the header to the right of the About (i) button. Same circular
   style as About and AA buttons, but slightly more prominent on hover
   because it's a navigation action (leaves the chat) rather than an
   in-place control. Inherits header text colour, so it works against
   any brand-coloured header background. */
.tfwkh-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: currentColor;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    text-decoration: none;  /* it's an <a> tag */
}
.tfwkh-close-btn:hover,
.tfwkh-close-btn:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
    outline: none;
    transform: scale(1.05);
}
.tfwkh-close-btn:active {
    transform: scale(0.96);
}
.tfwkh-close-btn svg {
    pointer-events: none;
}

/* On very narrow screens the header may run out of room. Keep the close
   button visible (it's the most important escape route) but allow the
   language label to truncate or hide if needed. */
@media (max-width: 480px) {
    .tfwkh-close-btn {
        width: 28px;
        height: 28px;
    }
}