:root { --kb-offset: 0px; --sidebar-width: 280px; }

html, body { height: 100svh; height: 100%; overflow: hidden; background: #333f48; background-color: #333f48; }
.container, .main { height: 100%; }
/* Chat styles extracted to static file */

/* Base adjustments */
.messages { padding-bottom: var(--input-h); }

.input-area { position: sticky; bottom: 0; z-index: 5; }

/* Fix desktop focus jump: avoid layout shift on focus */
@media (min-width: 1025px) {
    body.keyboard-open .input-area { padding-bottom: 24px !important; }
    .message-input:focus { outline: none; }
}

.scroll-to-top {
    position: fixed;
    bottom: 110px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #21a038;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
}
.scroll-to-top:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(33, 160, 56, 0.35); }
.scroll-to-top.visible { display: flex; }

/* Desktop */
@media (min-width: 1025px) {
    .menu-btn { display: none !important; visibility: hidden !important; opacity: 0 !important; }
}

/* Tablet: фиксируем панель, учитываем высоту клавиатуры; убираем нижний safe-area у input */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Центруем страницу между safe-зонами iPad и заполняем их градиентом тела */
    body { 
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .input-area { position: sticky; left: var(--sidebar-width); right: 0; bottom: 0; }
    .messages { padding-bottom: var(--input-h); }
    .message-input { font-size: 16px; }
}

/* iPad / планшеты с сенсорным вводом (включая landscape), ширина >= 769px */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    body { 
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .input-area { bottom: 0; }
}

/* Mobile */
@media (max-width: 768px) {
    /* На iPhone: сохраняем верхний safe-area, убираем нижний */
    body {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: 0;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .messages { padding: 16px 20px; padding-bottom: var(--input-h); }
    .input-area { padding: 16px 20px; position: sticky; left: 0; right: 0; bottom: 0; }
    .message-input { font-size: 16px; min-height: 44px; }
}

/* Touch devices (iPad в ландшафте и др.), даже если ширина больше десктопной) */
@media (hover: none) and (pointer: coarse) {
    .input-area { position: sticky; bottom: 0; }
    .messages { padding-bottom: var(--input-h); }
    /* При открытой клавиатуре учитываем только сдвиг клавиатуры, без safe-area снизу */
    body.kb-open .input-area { position: fixed; right: 0; bottom: var(--kb-offset, 0px); z-index: 1500; }
    body.kb-open .messages { padding-bottom: calc(var(--input-h) + var(--kb-offset, 0px)); }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    body.kb-open .input-area { left: var(--sidebar-width); }
}

/* Когда клавиатура открыта (класс ставит JS), переводим панель в fixed и учитываем высоту клавиатуры */
@media (max-width: 1024px) {
    body.kb-open .input-area { position: fixed; right: 0; bottom: var(--kb-offset, 0px); z-index: 1500; }
    body.kb-open .messages { padding-bottom: calc(var(--input-h) + var(--kb-offset, 0px)); }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body.kb-open .input-area { left: var(--sidebar-width); }
}

/* iOS Safari/Chromium keyboard overlay hint */
/* На новых браузерах safe-area учтена, js не требуется */

/* App wrapper учитывает нижнюю safe-area, фон непрерывен */
.container {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: constant(safe-area-inset-bottom, 0px);
    background: inherit;
}


/* Safe-area bottom bleed overlay removed: swipe area remains transparent */

/* Light theme overrides */
html.light-theme, body.light-theme {
    background: #ffffff;
    background-color: #ffffff;
    color: #1f2937;
}

body.light-theme a { color: #17822d; }

/* Header title */
body.light-theme .chat-title { color: #111827; }

/* Apple-like glass (frosted) for dropdowns */
/* visuals moved to glass.css */

/* overlays controlled by glass.css */

/* Glass buttons (bell/settings) */
/* buttons' glass styles handled in glass.css */

/* Light theme variants */
/* light theme dropdown visuals handled in glass.css */

/* light theme button visuals handled in glass.css */

/* Notifications list typography inside dropdown */
body.light-theme #notifDropdown .notif-item-title { color: #0f172a; }
body.light-theme #notifDropdown .notif-item-time { color: #6b7280; }

/* Messages area */
body.light-theme .messages { color: #111827; }
/* message bubbles overridden in chat.html */

/* Input area */
body.light-theme .input-area { background: rgba(255,255,255,0.55); backdrop-filter: saturate(160%) blur(10px); }
body.light-theme .message-input {
    background: rgba(255,255,255,0.9);
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Scroll to top button - keep gradient, just ensure good contrast */
body.light-theme .scroll-to-top { color: #fff; }

/* Animated pretty theme toggle */
#themeToggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
    width: 48px !important;
    height: 28px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    backdrop-filter: saturate(160%) blur(8px);
}
#themeToggle::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(100% 100% at 30% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 35%, rgba(230,230,230,0.9) 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.08);
    transition: transform .25s ease, width .1s ease, background .25s ease;
}
#themeToggle:active::before { width: 24px; }
#themeToggle:checked:active::before { transform: translateX(16px); width: 24px; }
#themeToggle:checked::before { transform: translateX(20px); }
#themeToggle:focus-visible { outline: 2px solid rgba(40,112,246,0.6); outline-offset: 2px; }

/* Track colors by theme */
#themeToggle:not(:checked) {
    background: linear-gradient(180deg, rgba(60,72,88,0.65), rgba(30,38,50,0.65));
    border-color: rgba(255,255,255,0.18);
}
#themeToggle:checked {
    background: linear-gradient(135deg, #25BC98 0%, #20B5B6 15%, #0FA8E0 30%, #2870F6 100%);
    border-color: rgba(40,112,246,0.55);
}

/* Light theme track subtle */
body.light-theme #themeToggle:not(:checked) {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,247,250,0.9));
    border-color: rgba(0,0,0,0.08);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Light theme: assistant message bubble and content contrast */
body.light-theme .message.assistant .message-content {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(33,160,56,0.35) !important;
    box-shadow: 0 4px 14px rgba(33,160,56,0.35) !important;
}

/* Keep user bubble gradient in all themes (no override needed) */
/* This rule intentionally left without changes to preserve the gradient from template */

/* Light theme: markdown text elements */
body.light-theme .message-content h1,
body.light-theme .message-content h2,
body.light-theme .message-content h3,
body.light-theme .message-content h4,
body.light-theme .message-content h5,
body.light-theme .message-content h6,
body.light-theme .message-content p,
body.light-theme .message-content li,
body.light-theme .message-content blockquote,
body.light-theme .message-content strong,
body.light-theme .message-content em {
    color: #111827 !important;
}

/* Light theme: assistant message text should be black */
body.light-theme .message.assistant .message-content,
body.light-theme .message.assistant .message-content h1,
body.light-theme .message.assistant .message-content h2,
body.light-theme .message.assistant .message-content h3,
body.light-theme .message.assistant .message-content h4,
body.light-theme .message.assistant .message-content h5,
body.light-theme .message.assistant .message-content h6,
body.light-theme .message.assistant .message-content p,
body.light-theme .message.assistant .message-content li,
body.light-theme .message.assistant .message-content strong,
body.light-theme .message.assistant .message-content em { color: #111827 !important; }
body.light-theme .message.assistant .message-content a { color: #111827 !important; }

/* Light theme: input container should be pure white without gray gap */
body.light-theme .input-container { background: #ffffff !important; border-color: #ffffff !important; }

/* Light theme: links */
body.light-theme .message-content a { color: #17822d !important; }
body.light-theme .message-content a:hover { text-decoration: underline; }

/* Light theme: code & pre */
body.light-theme .message-content code {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}
body.light-theme .message-content pre {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}
body.light-theme .message-content pre code { color: #0f172a !important; }

/* Light theme: tables */
body.light-theme .message-content table {
    background: #ffffff !important;
    color: #111827 !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}
body.light-theme .message-content th,
body.light-theme .message-content td {
    border-bottom: 1px solid #e5e7eb !important;
}
body.light-theme .message-content th {
    background: #f9fafb !important;
    color: #0f172a !important;
}
body.light-theme .message-content tr:hover { background: #f3f4f6 !important; }

/* Light theme: horizontal rule */
body.light-theme .message-content hr {
    background: #e5e7eb !important;
}


/* User bubble: green background and white text in all themes */
.message.user .message-content {
    background: #21a038 !important;
    color: #ffffff !important;
}

/* Ensure links inside user bubble stay readable */
.message.user .message-content a {
    color: #ffffff !important;
}

/* Ensure common typography inside user bubble stays white (overrides light theme) */
.message.user .message-content h1,
.message.user .message-content h2,
.message.user .message-content h3,
.message.user .message-content h4,
.message.user .message-content h5,
.message.user .message-content h6,
.message.user .message-content p,
.message.user .message-content li,
.message.user .message-content blockquote,
.message.user .message-content strong,
.message.user .message-content em { color: #ffffff !important; }

/* Sidebar text in light theme should be black */
body.light-theme .sidebar .logo,
body.light-theme .sidebar .folder-header,
body.light-theme .sidebar .folder-name,
body.light-theme .sidebar .folder-actions .folder-btn,
body.light-theme .sidebar .chat-button,
body.light-theme .sidebar .chat-title-text { color: #111827 !important; }

/* Light theme: make "New Folder" button text black (override inline color) */
body.light-theme .sidebar .new-folder-btn { color: #111827 !important; }
body.light-theme .sidebar .new-folder-btn {
    background: #e5e7eb !important; /* darker than #f3f4f6 sidebar */
    border: 1px solid #d1d5db !important;
}
body.light-theme .sidebar .new-folder-btn:hover {
    background: #dfe3ea !important;
    border-color: #cbd5e1 !important;
}

/* Light theme: make send button same as dark theme */
body.light-theme .send-btn {
    background: #21a038 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(33, 160, 56, 0.35) !important;
}
body.light-theme .send-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(33, 160, 56, 0.45) !important;
}

/* Light theme: disabled state must look gray */
body.light-theme .send-btn:disabled {
    background: #bdc3c7 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    border: none !important;
}

/* User avatar background same green as user message */
.avatar.user {
    background: #21a038 !important;
    color: #ffffff !important;
}

/* Sidebar theming */
/* Dark theme (default): slightly darker than chat background */
.sidebar {
    background: #2b343b !important;
}

/* Light theme: slightly darker than white (soft gray) */
body.light-theme .sidebar {
    background: #f3f4f6 !important;
    border-right: 1px solid rgba(0,0,0,0.08) !important;
}

/* New chat button styling per theme */
/* Dark theme: white button with dark text */
.sidebar .new-chat-btn {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
}
.sidebar .new-chat-btn:hover {
    background: #f1f5f9 !important;
}

/* Light theme: black button with white text */
body.light-theme .sidebar .new-chat-btn {
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #111827 !important;
    box-shadow: none !important;
}
body.light-theme .sidebar .new-chat-btn:hover {
    background: #000000 !important;
}

/* Hide scrollbar for message input while keeping scroll functionality when needed */
.message-input {
    overflow-y: auto;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}
.message-input::-webkit-scrollbar { width: 0; height: 0; }