/* ============================================================
   NodeAIr Demo — Assistant Theme Override
   Loaded after package CSS. Uses html prefix for specificity.
   ============================================================ */

/* --- Variable overrides --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant {
    --nodeair-assistant-primary: var(--na-cyan, #06b6d4);
    --nodeair-assistant-bg: transparent;
    --nodeair-assistant-header-bg: rgba(15, 23, 42, 0.85);
    --nodeair-assistant-footer-bg: rgba(15, 23, 42, 0.4);
    --nodeair-assistant-msg-user-bg: linear-gradient(135deg, #06b6d4, #3b82f6);
    --nodeair-assistant-msg-assistant-bg: rgba(15, 23, 42, 0.4);
    --nodeair-assistant-input-bg: rgba(15, 23, 42, 0.6);
    --nodeair-assistant-border: var(--na-border, rgba(6, 182, 212, 0.3));
    --nodeair-assistant-fg: var(--na-text-primary, #e2e8f0);
    --nodeair-assistant-scrollbar-thumb: rgba(6, 182, 212, 0.3);

    /* Remove glass-light blur on root container (let bg-grid show through) */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- Ensure grid pattern shows through message area --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-content,
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-body {
    background: transparent;
}

/* --- Header glass effect aligned to demo --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-header {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--na-border, rgba(6, 182, 212, 0.3));
}

/* --- Header center: 12px gap for logo/title/pill --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-header-center {
    gap: 12px;
}

/* --- Footer: match pre-package input area style --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-footer {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--na-border, rgba(6, 182, 212, 0.3));
}

/* --- Input wrapper: darker, rounded, cyan border like parameter inputs --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-input {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 16px;
    border: 1px solid var(--na-border, rgba(6, 182, 212, 0.3));
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-input:focus-within {
    border-color: var(--na-cyan, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* --- Textarea inside input: no border (wrapper handles it) --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-textarea {
    border: none;
    box-shadow: none;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-textarea:focus {
    border: none;
    box-shadow: none;
}

/* --- Header buttons: match .na-header-btn style --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-btn-history,
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-btn-settings {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--na-radius-sm, 8px);
    color: var(--na-text-secondary, #94a3b8);
    font-size: 14px;
    transition: all 0.3s ease;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-btn-history:hover,
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-btn-settings:hover {
    color: var(--na-cyan-light, #22d3ee);
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
}

/* --- Message bubbles: aligned glass effect with cyan borders --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-bubble {
    border: 1px solid var(--na-border, rgba(6, 182, 212, 0.3));
}

/* --- User message: cyan→blue gradient like pre-package style --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-message-user .nodeair-assistant-bubble {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

/* --- Offcanvas panels: match demo offcanvas style --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-sidebar,
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-popup-panel {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Left-anchored panels (conversations): round right corners */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-sidebar--left {
    border-radius: 0 var(--na-radius, 16px) var(--na-radius, 16px) 0;
    border-left: none;
}

/* Right-anchored panels (settings, stats): round left corners */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-sidebar--right {
    border-radius: var(--na-radius, 16px) 0 0 var(--na-radius, 16px);
    border-right: none;
}

/* --- Offcanvas close buttons: match .na-header-btn --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-sidebar-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--na-radius-sm, 8px);
    color: var(--na-text-secondary, #94a3b8);
    font-size: 14px;
    transition: all 0.3s ease;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-sidebar-close:hover {
    color: var(--na-cyan-light, #22d3ee);
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.3);
}

/* --- Scrollbar: cyan to match demo --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-body::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.3);
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-body::-webkit-scrollbar-thumb:hover {
    background: rgba(6, 182, 212, 0.5);
}

/* --- Chips: cyan accent --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-chip.active {
    border-color: var(--na-cyan, #06b6d4);
    color: var(--na-cyan-light, #22d3ee);
}

/* --- Send button: cyan gradient matching demo --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-btn-send {
    background: linear-gradient(135deg, var(--na-cyan, #06b6d4), var(--na-blue, #3b82f6));
}

/* --- Citations: styled like related document cards --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-citations-list {
    gap: 0.375rem;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-citation {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.1);
    gap: 12px;
    font-size: inherit;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-citation:hover {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.3);
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-citation-title {
    font-size: 13px;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-citation-source {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-citation-category {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border: none;
}

/* --- Mermaid toggle: NodeAir themed --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .mermaid-theme-toggle {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(6, 182, 212, 0.2);
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .mermaid-theme-toggle:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.4);
    color: var(--na-cyan-light, #22d3ee);
}

/* --- Scroll FAB: demo theme colors --- */
html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-scroll-fab {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

html[data-bs-theme="dark"][data-tsd-theme="glassmorphic"] .nodeair-assistant-scroll-fab:hover {
    border-color: rgba(6, 182, 212, 0.5);
    color: var(--na-cyan-light, #22d3ee);
}