/* ============================================================================
   TEMA: notte — Dark mode tecnologico
   Sfondi scuri, bolle slate, accento blu elettrico. Ideale per brand tech/EV.
   Selezione: frontend.theme: "notte" in config/dealer.yml
   ============================================================================ */

:root {
    --primary-color: #3b82f6;
    --hover-color: #2563eb;
    --bg-color: #0f172a;
    --text-color: #e2e8f0;
    --secondary-text: #94a3b8;
    --border-color: #1e293b;
    --chat-bg-user: #2563eb;
    --chat-bg-bot: #1e293b;
    --status-online: #34d399;
    --avatar-user-bg: #7c3aed;
    --avatar-bot-bg: #334155;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-header {
    background-color: #0b1220;
    border-bottom: 1px solid #1e293b;
    box-shadow: none;
}

.header-right .icon-btn {
    background: rgba(59, 130, 246, 0.15);
}

#session-id-display {
    color: #7dd3fc;
}

.welcome-content {
    background: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.welcome-screen h2 {
    color: #f1f5f9;
}

.brand-logo-large {
    background-color: #334155;
}

.disclaimer-container {
    background: #162032;
    border-color: #1e293b;
}

.disclaimer-container h3 {
    color: #f1f5f9;
}

.disclaimer-text {
    color: #94a3b8;
}

.checkbox-text {
    color: #cbd5e1;
}

.message-container.bot .message-bubble {
    border-color: #334155;
}

.message-container.bot .message-time {
    color: #64748b;
}

.typing-indicator {
    background-color: #1e293b;
    border-color: #334155;
}

.typing-dot {
    background-color: #3b82f6;
}

.app-footer {
    background: #0b1220;
    border-top: 1px solid #1e293b;
}

.input-wrapper {
    background: #1e293b;
    border-color: #334155;
}

#user-input {
    color: #e2e8f0;
}

.input-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.chip {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.chip:hover {
    background: #334155;
    color: #f1f5f9;
}

.message-content img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}