/* Integration with Cerebro Digital Hub - Dark Mode Glassmorphism Override */
:root {
    --bg-base: #050508;
    --bg-surface: rgba(18, 20, 24, 0.65);
    --border-glass: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    
    /* Override existing GLPI vars for dark mode */
    --ink-950: #ffffff;
    --ink-900: #e2e8f0;
    --ink-800: #cbd5e1;
    --ink-700: #94a3b8;
    --ink-500: #64748b;
    --panel: var(--bg-surface);
    --panel-strong: #121418;
    --surface: rgba(25, 28, 33, 0.7);
    --line: rgba(255, 255, 255, 0.1);
}

body {
    background-color: var(--bg-base) !important;
    background-image: 
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 40%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 40%) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, .eyebrow {
    font-family: 'Outfit', sans-serif !important;
}

/* Glassmorphism Containers */
.chat-container, .side-panel {
    background: var(--bg-surface) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}

.chat-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.context-card, .chat-input-area, .chat-messages {
    background: transparent !important;
}

.chat-input-area {
    border-top: 1px solid var(--border-glass) !important;
    padding-bottom: 24px;
}

/* Input Overrides */
#chat-form, .profile-selector, .menu-btn, .minimal-input, .context-action-btn, textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(10px);
}

#message-input::placeholder, .minimal-input::placeholder {
    color: var(--text-secondary) !important;
}

#chat-form:focus-within, .profile-selector:focus, .minimal-input:focus {
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

/* Messages */
.message-content {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

.message.bot .message-content {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-primary) !important;
}

.message.user .message-content {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    color: #fff !important;
}

/* Badges */
.context-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--border-glass) !important;
    color: var(--text-primary) !important;
}

/* --- Handoff Animation --- */
@keyframes agentSwitchPulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

.bot-avatar.handoff-active {
    animation: agentSwitchPulse 1.5s ease-in-out infinite;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1)) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #c4b5fd !important;
}

.handoff-message {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #c4b5fd;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    margin: 10px 0;
    max-width: fit-content;
}

.handoff-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(196, 181, 253, 0.3);
    border-top-color: #c4b5fd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }