@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Единая тема: тёмный тёплый серый фон, белый текст. */

:root {
    color-scheme: dark;

    --color-bg: rgb(36, 35, 32);
    --color-fg: #ffffff;
    --color-on-light: rgb(38, 37, 35);
    --color-muted: rgba(255, 255, 255, 0.78);
    --color-muted-2: rgba(255, 255, 255, 0.58);

    --color-surface: rgba(255, 255, 255, 0.05);
    --color-surface-2: rgba(255, 255, 255, 0.09);
    --color-surface-3: rgba(255, 255, 255, 0.13);

    --color-border: rgba(255, 255, 255, 0.16);
    --color-border-strong: rgba(255, 255, 255, 0.28);

    --color-primary: #60a5fa;
    --color-primary-2: #93c5fd;
    --color-success: #6ee7a0;
    --color-danger: #fca5a5;

    --shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.55);

    --hover-bg: var(--color-surface-2);
    --active-bg: var(--color-surface-3);

    --bg-color: var(--color-bg);
    --text-color: var(--color-fg);
    --chat-user: #93c5fd;
    --chat-bot: #86efac;
    --chat-bg: rgba(0, 0, 0, 0.22);

    --border-color: var(--color-border);
    --border-strong: var(--color-border-strong);
}

html, body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.0625rem;
    margin: 0;
}

#chatBox { background-color: var(--chat-bg); }

.user { color: var(--chat-user); text-align: right; }
.bot { color: var(--chat-bot); text-align: left; }

.site-logo {
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.25rem;
}
.site-logo:hover {
    text-decoration: underline;
    opacity: 0.9;
}
.site-logo img {
    height: 52px;
    display: block;
    vertical-align: middle;
}