/* Темы оформления для ChatGPT интерфейса */

/* Базовые переменные темы */
:root {
    /* Светлая тема (дефолтные значения) */
    --bg-primary: #f8fafc; /* slate-50 */
    --bg-secondary: #f1f5f9; /* slate-100 */
    --bg-tertiary: #e2e8f0; /* slate-200 */
    --text-primary: #0f172a; /* slate-900 */
    --text-secondary: #334155; /* slate-700 */
    --text-tertiary: #64748b; /* slate-500 */
    --border-color: #cbd5e1; /* slate-300 */
    
    /* Специфичные для компонентов */
    --sidebar-bg: var(--bg-secondary);
    --table-header-bg: #cbd5e1; /* slate-300 */
    --table-row-hover: #e2e8f0; /* slate-200 */
    --message-bg: #f1f5f9; /* slate-100 */
    --user-message-bg: #f8fafc; /* slate-50 */
    --assistant-message-bg: rgba(226, 232, 240, 0.5); /* slate-200 с прозрачностью */
    --input-bg: #f1f5f9; /* slate-100 */
    --button-hover: #e2e8f0; /* slate-200 */
    --scrollbar-track: #e2e8f0; /* slate-200 */
    --scrollbar-thumb: #94a3b8; /* slate-400 */
    --scrollbar-thumb-hover: #64748b; /* slate-500 */
    --code-bg: #f8fafc; /* slate-50 */
    --code-border: #e2e8f0; /* slate-200 */
    --error-bg: rgba(239, 68, 68, 0.1); /* red-500 с прозрачностью */
    --error-border: #ef4444; /* red-500 */
    --success-bg: rgba(34, 197, 94, 0.1); /* green-500 с прозрачностью */
    --success-border: #22c55e; /* green-500 */
    --dropdown-bg: #f1f5f9; /* slate-100 */
}

/* Темная тема */
[data-theme="dark"] {
    /* Темная тема */
    --bg-primary: #18181b; /* zinc-900 */
    --bg-secondary: #27272a; /* zinc-800 */
    --bg-tertiary: #3f3f46; /* zinc-700 */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa; /* zinc-400 */
    --text-tertiary: #71717a; /* zinc-500 */
    --border-color: #3f3f46; /* zinc-700 */
    
    /* Специфичные для компонентов */
    --sidebar-bg: var(--bg-primary);
    --table-header-bg: #2a2a35; /* темнее zinc-800 */
    --table-row-hover: #2a2a35; /* темнее zinc-800 */
    --message-bg: #27272a; /* zinc-800 */
    --user-message-bg: #18181b; /* zinc-900 */
    --assistant-message-bg: rgba(45, 45, 50, 0.4); /* слегка светлее zinc-900 */
    --input-bg: #27272a; /* zinc-800 */
    --button-hover: #3f3f46; /* zinc-700 */
    --scrollbar-track: #27272a; /* zinc-800 */
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
    --code-bg: #1e1e2e;
    --code-border: #2d2d3a;
    --error-bg: rgba(239, 68, 68, 0.2); /* red-500 с прозрачностью */
    --error-border: #ef4444; /* red-500 */
    --success-bg: rgba(34, 197, 94, 0.2); /* green-500 с прозрачностью */
    --success-border: #22c55e; /* green-500 */
    --dropdown-bg: #27272a; /* zinc-800 */
}

/* Общие стили для обеих тем */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* Боковая панель */
#sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--border-color);
}

/* Контейнер сообщений */
#messages-container, #chat-area {
    background-color: var(--bg-primary);
}

/* Элементы сайдбара */
.sidebar-item {
    color: var(--text-primary);
}

.sidebar-item:hover {
    background-color: var(--button-hover);
}

.sidebar-item.active {
    background-color: var(--button-hover);
}

/* Сообщения */
.user-message {
    background-color: var(--user-message-bg);
}

.assistant-message {
    background-color: var(--assistant-message-bg);
}

/* Дополнительные стили для обеспечения контраста */
.py-5 {
    background-color: var(--user-message-bg);
    color: var(--text-primary);
}

.py-5.bg-zinc-800\/40 {
    background-color: var(--assistant-message-bg);
    color: var(--text-primary);
}

/* Стили для текста сообщений */
.whitespace-pre-wrap, .prose.prose-invert {
    color: var(--text-primary);
}

/* Имена отправителей */
.font-medium {
    color: var(--text-primary);
}

/* Пустое состояние */
#empty-state h1 {
    color: var(--text-primary);
}

/* Стили для поля ввода */
#empty-input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Поле ввода */
#input-container {
    border-top-color: var(--border-color);
    background-color: var(--bg-primary);
}

#message-input, .input-area {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Дополнительные стили для заголовков и текста */
h1, h2, h3, h4, h5, h6, p, span, div {
    color: var(--text-primary);
}

/* Плейсхолдеры для полей ввода */
::placeholder {
    color: var(--text-tertiary);
}

/* Кнопки */
button, .btn {
    color: var(--text-primary);
}

button:hover, .btn:hover {
    background-color: var(--button-hover);
}

/* Исправления для иконок */
i[class^="ri-"] {
    color: var(--text-primary);
}

/* Исправляем цвет текста в пространстве сообщений */
.text-white {
    color: var(--text-primary);
}

/* Добавляем явное указание цвета текста для всех основных элементов */
#sidebar, #chat-area, #messages-container, #messages {
    color: var(--text-primary);
}

/* Скроллбар */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Блоки кода */
.markdown-content code {
    background-color: var(--code-bg);
}

.markdown-content pre {
    background-color: var(--code-bg);
    border-color: var(--code-border);
}

/* Сообщения об ошибках */
.error-message {
    background-color: var(--error-bg);
    border-color: var(--error-border);
}

/* Сообщения об успехе */
.success-message {
    background-color: var(--success-bg);
    border-color: var(--success-border);
}

/* Кнопка переключения темы */
.theme-toggle {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.theme-toggle:hover {
    background-color: var(--button-hover);
}

/* Иконки переключения темы */
.theme-icon-dark, .theme-icon-light {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
}

/* При светлой теме показываем иконку темной темы и наоборот */
[data-theme="dark"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: block;
}

[data-theme="light"] .theme-icon-dark {
    display: block;
}

[data-theme="light"] .theme-icon-light {
    display: none;
}

/* Стили для выпадающего меню */
#profile-dropdown {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#profile-dropdown a, 
#profile-dropdown button, 
#profile-dropdown span {
    color: var(--text-primary) !important;
}

#profile-dropdown a:hover, 
#profile-dropdown button:hover {
    background-color: var(--button-hover) !important;
}

#profile-dropdown .h-px {
    background-color: var(--border-color) !important;
}

/* Общие стили для выпадающих меню и компонентов */
.absolute {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

/* Стили для всех других выпадающих элементов */
.dropdown-menu, 
.dropdown, 
.menu, 
.popup, 
select, 
option {
    background-color: var(--dropdown-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Исправление для текста ссылок */
a, a:link, a:visited {
    color: var(--text-primary);
}

/* Стили для администраторской панели */
.admin-panel, .form-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.form-section, 
.form-group, 
.back-btn, 
input, 
textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Плавный переход между темами */
body, #sidebar, #chat-area, .sidebar-item, 
#messages-container, #input-container, button,
input, textarea, #empty-state, .message-content,
.form-input, .form-select, .form-container, .admin-panel,
#profile-dropdown, a, select, option {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Ники и сообщения пользователей в чате */
.font-medium, 
.whitespace-pre-wrap, 
.prose.prose-invert,
.message-content,
.text-white,
span.text-white,
div.text-white {
    color: var(--text-primary) !important;
}

/* Дополнительное усиление для ников участников чата */
.flex-1 .font-medium, 
.flex-1 span.text-white, 
.sender-name, 
.message-sender {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Текст чата и сообщений */
.flex-1 .whitespace-pre-wrap, 
.prose.prose-invert .whitespace-pre-wrap,
.message-content,
.chat-message {
    color: var(--text-primary) !important;
}

/* Кнопки в области ввода */
#send-button, 
#send-button i,
label[for="file-input"],
label[for="file-input"] i {
    color: var(--highlight-color) !important;
    opacity: 0.9;
}

#send-button:hover, 
label[for="file-input"]:hover {
    background-color: var(--button-hover) !important;
}

#send-button:hover i, 
label[for="file-input"]:hover i {
    opacity: 1;
    color: var(--highlight-color) !important;
}

/* Animations for empty state */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes borderPulse {
    0% {
        border-color: var(--border-color);
    }
    50% {
        border-color: var(--highlight-color);
    }
    100% {
        border-color: var(--border-color);
    }
}

/* Apply animations to empty state elements */
#empty-state .w-16 {
    animation: pulse 3s infinite ease-in-out;
}

#empty-state h1 {
    animation: fadeInUp 0.6s ease-out;
}

#empty-state p {
    animation: fadeInUp 0.8s ease-out;
}

#empty-state #empty-input {
    animation: fadeInUp 1s ease-out;
}

#empty-state .grid {
    animation: fadeInUp 1.2s ease-out;
}

#empty-state .empty-state-example {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#empty-state .empty-state-example:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#empty-state .empty-state-example:active {
    transform: translateY(0);
}

/* Ensure text is visible in light mode for empty state examples */
[data-theme="light"] #empty-state .empty-state-example h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] #empty-state .empty-state-example p {
    color: var(--text-primary) !important;
    opacity: 0.8;
}

[data-theme="light"] #empty-state .empty-state-example:hover h3,
[data-theme="light"] #empty-state .empty-state-example:hover p {
    color: var(--text-primary) !important;
    opacity: 1;
}

/* Fix background color for example cards in light theme */
[data-theme="light"] #empty-state .empty-state-example {
    background-color: #f1f5f9 !important;  /* slate-100 */
    border-color: #e2e8f0 !important;      /* slate-200 */
}

[data-theme="light"] #empty-state .empty-state-example:hover {
    background-color: #e2e8f0 !important;  /* slate-200 */
    border-color: #cbd5e1 !important;      /* slate-300 */
}

/* Highlight effect for the input field */
#empty-input:focus {
    animation: borderPulse 2s infinite ease-in-out;
}

/* Additional visual improvements */
.bg-\[\#19c37d\] {
    box-shadow: 0 0 15px 5px rgba(25, 195, 125, 0.2);
}

/* Override browser autofill styling to prevent UI breaking */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
}

/* Ensure autocomplete suggestions have proper styling */
input:-internal-autofill-selected,
textarea:-internal-autofill-selected {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Prevent background color change for autocomplete */
input:-webkit-autofill,
textarea:-webkit-autofill {
    appearance: none !important;
}

/* Специальные стили для мобильного сайдбара в светлой теме */
@media (max-width: 768px) {
    [data-theme="light"] #sidebar {
        background-color: #f4f4f5; /* zinc-100 */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Усиливаем контраст текста в светлой теме для мобильных устройств */
    [data-theme="light"] #sidebar .sidebar-item,
    [data-theme="light"] #sidebar .text-zinc-400,
    [data-theme="light"] #sidebar .text-zinc-300,
    [data-theme="light"] #sidebar h3,
    [data-theme="light"] #sidebar .text-white,
    [data-theme="light"] #sidebar .truncate,
    [data-theme="light"] #sidebar .font-medium {
        color: #18181b !important; /* zinc-900 - темный текст для лучшей читаемости */
    }
    
    /* Стили для подзаголовков в сайдбаре */
    [data-theme="light"] #sidebar .font-medium {
        font-weight: 600 !important;
    }
    
    /* Улучшаем стиль для заголовков в сайдбаре */
    [data-theme="light"] #sidebar h3.text-white,
    [data-theme="light"] #sidebar h3.text-zinc-300 {
        color: #18181b !important;
        font-weight: 600 !important;
    }
    
    /* Улучшаем контраст при наведении */
    [data-theme="light"] #sidebar .sidebar-item:hover {
        background-color: #e4e4e7 !important; /* zinc-200 */
    }
    
    /* Активный элемент в мобильном сайдбаре */
    [data-theme="light"] #sidebar .sidebar-item.active {
        background-color: #e4e4e7 !important; /* zinc-200 */
        border-color: #0ea5e9 !important; /* sky-500 - цвет акцента */
    }
    
    /* Иконки в мобильном сайдбаре в светлой теме */
    [data-theme="light"] #sidebar i[class^="ri-"],
    [data-theme="light"] #sidebar .ri-add-line,
    [data-theme="light"] #sidebar .ri-delete-bin-line {
        color: #18181b !important; /* zinc-900 */
    }
    
    /* Кнопки в мобильном сайдбаре */
    [data-theme="light"] #sidebar button {
        color: #18181b !important;
    }
    
    /* Разделитель в сайдбаре */
    [data-theme="light"] #sidebar-divider {
        background-color: #d4d4d8 !important; /* zinc-300 - более заметный */
    }
    
    /* Профиль пользователя в сайдбаре */
    [data-theme="light"] #sidebar-profile {
        border-top-color: #d4d4d8 !important; /* zinc-300 */
    }
}

/* Стили для уведомления о переключении ассистента в светлой теме */
[data-theme="light"] #assistant-notification {
    background: linear-gradient(to right, #0284c7, #7e22ce);
    color: white;
}

/* Кнопка закрытия в светлой теме */
[data-theme="light"] #assistant-notification button {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] #assistant-notification button:hover {
    color: rgba(255, 255, 255, 1);
}

/* Кнопки в чате */
.input-action-button {
    color: var(--text-tertiary);
}

.input-action-button:hover {
    color: var(--text-primary);
    background-color: var(--button-hover);
}

/* Явное указание цветов для кнопок в светлой теме */
[data-theme="light"] .input-action-button {
    color: #64748b; /* темнее цвет для лучшей видимости */
}

[data-theme="light"] .input-action-button:hover {
    color: #334155; /* еще темнее при наведении */
    background-color: #e2e8f0;
}

[data-theme="light"] #send-button {
    color: #64748b; /* темнее цвет для кнопки отправки */
}

[data-theme="light"] #send-button:hover {
    color: #334155; /* еще темнее при наведении */
}

[data-theme="light"] #send-button i {
    color: #64748b; /* темнее цвет для иконки отправки */
}

[data-theme="light"] #send-button:hover i {
    color: #334155; /* еще темнее при наведении */
}

[data-theme="light"] #empty-state #empty-state-submit {
    color: #0f766e; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state #empty-state-submit:hover {
    color: #0d9488; /* более яркий при наведении */
}

[data-theme="light"] #empty-state #empty-state-submit i {
    color: #0f766e; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state #empty-state-submit:hover i {
    color: #0d9488; /* более яркий при наведении */
}

/* Темы оформления для ChatGPT интерфейса */

/* Базовые переменные темы */
:root {
    /* Светлая тема (дефолтные значения) */
    --bg-primary: #f8fafc; /* slate-50 */
    --bg-secondary: #f1f5f9; /* slate-100 */
    --bg-tertiary: #e2e8f0; /* slate-200 */
    --text-primary: #0f172a; /* slate-900 */
    --text-secondary: #334155; /* slate-700 */
    --text-tertiary: #64748b; /* slate-500 */
    --border-color: #cbd5e1; /* slate-300 */
    
    /* Специфичные для компонентов */
    --sidebar-bg: var(--bg-secondary);
    --table-header-bg: #cbd5e1; /* slate-300 */
    --table-row-hover: #e2e8f0; /* slate-200 */
    --message-bg: #f1f5f9; /* slate-100 */
    --user-message-bg: #f8fafc; /* slate-50 */
    --assistant-message-bg: rgba(226, 232, 240, 0.5); /* slate-200 с прозрачностью */
    --input-bg: #f1f5f9; /* slate-100 */
    --button-hover: #e2e8f0; /* slate-200 */
    --scrollbar-track: #e2e8f0; /* slate-200 */
    --scrollbar-thumb: #94a3b8; /* slate-400 */
    --scrollbar-thumb-hover: #64748b; /* slate-500 */
    --code-bg: #f8fafc; /* slate-50 */
    --code-border: #e2e8f0; /* slate-200 */
    --error-bg: rgba(239, 68, 68, 0.1); /* red-500 с прозрачностью */
    --error-border: #ef4444; /* red-500 */
    --success-bg: rgba(34, 197, 94, 0.1); /* green-500 с прозрачностью */
    --success-border: #22c55e; /* green-500 */
    --dropdown-bg: #f1f5f9; /* slate-100 */
}

/* Темная тема */
[data-theme="dark"] {
    /* Темная тема */
    --bg-primary: #18181b; /* zinc-900 */
    --bg-secondary: #27272a; /* zinc-800 */
    --bg-tertiary: #3f3f46; /* zinc-700 */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa; /* zinc-400 */
    --text-tertiary: #71717a; /* zinc-500 */
    --border-color: #3f3f46; /* zinc-700 */
    
    /* Специфичные для компонентов */
    --sidebar-bg: var(--bg-primary);
    --table-header-bg: #2a2a35; /* темнее zinc-800 */
    --table-row-hover: #2a2a35; /* темнее zinc-800 */
    --message-bg: #27272a; /* zinc-800 */
    --user-message-bg: #18181b; /* zinc-900 */
    --assistant-message-bg: rgba(45, 45, 50, 0.4); /* слегка светлее zinc-900 */
    --input-bg: #27272a; /* zinc-800 */
    --button-hover: #3f3f46; /* zinc-700 */
    --scrollbar-track: #27272a; /* zinc-800 */
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
    --code-bg: #1e1e2e;
    --code-border: #2d2d3a;
    --error-bg: rgba(239, 68, 68, 0.2); /* red-500 с прозрачностью */
    --error-border: #ef4444; /* red-500 */
    --success-bg: rgba(34, 197, 94, 0.2); /* green-500 с прозрачностью */
    --success-border: #22c55e; /* green-500 */
    --dropdown-bg: #27272a; /* zinc-800 */
}

/* Общие стили для обеих тем */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* Боковая панель */
#sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--border-color);
}

/* Контейнер сообщений */
#messages-container, #chat-area {
    background-color: var(--bg-primary);
}

/* Элементы сайдбара */
.sidebar-item {
    color: var(--text-primary);
}

.sidebar-item:hover {
    background-color: var(--button-hover);
}

.sidebar-item.active {
    background-color: var(--button-hover);
}

/* Сообщения */
.user-message {
    background-color: var(--user-message-bg);
}

.assistant-message {
    background-color: var(--assistant-message-bg);
}

/* Дополнительные стили для обеспечения контраста */
.py-5 {
    background-color: var(--user-message-bg);
    color: var(--text-primary);
}

.py-5.bg-zinc-800\/40 {
    background-color: var(--assistant-message-bg);
    color: var(--text-primary);
}

/* Стили для текста сообщений */
.whitespace-pre-wrap, .prose.prose-invert {
    color: var(--text-primary);
}

/* Имена отправителей */
.font-medium {
    color: var(--text-primary);
}

/* Пустое состояние */
#empty-state h1 {
    color: var(--text-primary);
}

/* Стили для поля ввода */
#empty-input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Поле ввода */
#input-container {
    border-top-color: var(--border-color);
    background-color: var(--bg-primary);
}

#message-input, .input-area {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Дополнительные стили для заголовков и текста */
h1, h2, h3, h4, h5, h6, p, span, div {
    color: var(--text-primary);
}

/* Плейсхолдеры для полей ввода */
::placeholder {
    color: var(--text-tertiary);
}

/* Кнопки */
button, .btn {
    color: var(--text-primary);
}

button:hover, .btn:hover {
    background-color: var(--button-hover);
}

/* Исправления для иконок */
i[class^="ri-"] {
    color: var(--text-primary);
}

/* Исправляем цвет текста в пространстве сообщений */
.text-white {
    color: var(--text-primary);
}

/* Добавляем явное указание цвета текста для всех основных элементов */
#sidebar, #chat-area, #messages-container, #messages {
    color: var(--text-primary);
}

/* Скроллбар */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Блоки кода */
.markdown-content code {
    background-color: var(--code-bg);
}

.markdown-content pre {
    background-color: var(--code-bg);
    border-color: var(--code-border);
}

/* Сообщения об ошибках */
.error-message {
    background-color: var(--error-bg);
    border-color: var(--error-border);
}

/* Сообщения об успехе */
.success-message {
    background-color: var(--success-bg);
    border-color: var(--success-border);
}

/* Кнопка переключения темы */
.theme-toggle {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.theme-toggle:hover {
    background-color: var(--button-hover);
}

/* Иконки переключения темы */
.theme-icon-dark, .theme-icon-light {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
}

/* При светлой теме показываем иконку темной темы и наоборот */
[data-theme="dark"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: block;
}

[data-theme="light"] .theme-icon-dark {
    display: block;
}

[data-theme="light"] .theme-icon-light {
    display: none;
}

/* Стили для выпадающего меню */
#profile-dropdown {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#profile-dropdown a, 
#profile-dropdown button, 
#profile-dropdown span {
    color: var(--text-primary) !important;
}

#profile-dropdown a:hover, 
#profile-dropdown button:hover {
    background-color: var(--button-hover) !important;
}

#profile-dropdown .h-px {
    background-color: var(--border-color) !important;
}

/* Общие стили для выпадающих меню и компонентов */
.absolute {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

/* Стили для всех других выпадающих элементов */
.dropdown-menu, 
.dropdown, 
.menu, 
.popup, 
select, 
option {
    background-color: var(--dropdown-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Исправление для текста ссылок */
a, a:link, a:visited {
    color: var(--text-primary);
}

/* Стили для администраторской панели */
.admin-panel, .form-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.form-section, 
.form-group, 
.back-btn, 
input, 
textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Плавный переход между темами */
body, #sidebar, #chat-area, .sidebar-item, 
#messages-container, #input-container, button,
input, textarea, #empty-state, .message-content,
.form-input, .form-select, .form-container, .admin-panel,
#profile-dropdown, a, select, option {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Ники и сообщения пользователей в чате */
.font-medium, 
.whitespace-pre-wrap, 
.prose.prose-invert,
.message-content,
.text-white,
span.text-white,
div.text-white {
    color: var(--text-primary) !important;
}

/* Дополнительное усиление для ников участников чата */
.flex-1 .font-medium, 
.flex-1 span.text-white, 
.sender-name, 
.message-sender {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Текст чата и сообщений */
.flex-1 .whitespace-pre-wrap, 
.prose.prose-invert .whitespace-pre-wrap,
.message-content,
.chat-message {
    color: var(--text-primary) !important;
}

/* Кнопки в области ввода */
#send-button, 
#send-button i,
label[for="file-input"],
label[for="file-input"] i {
    color: var(--highlight-color) !important;
    opacity: 0.9;
}

#send-button:hover, 
label[for="file-input"]:hover {
    background-color: var(--button-hover) !important;
}

#send-button:hover i, 
label[for="file-input"]:hover i {
    opacity: 1;
    color: var(--highlight-color) !important;
}

/* Animations for empty state */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes borderPulse {
    0% {
        border-color: var(--border-color);
    }
    50% {
        border-color: var(--highlight-color);
    }
    100% {
        border-color: var(--border-color);
    }
}

/* Apply animations to empty state elements */
#empty-state .w-16 {
    animation: pulse 3s infinite ease-in-out;
}

#empty-state h1 {
    animation: fadeInUp 0.6s ease-out;
}

#empty-state p {
    animation: fadeInUp 0.8s ease-out;
}

#empty-state #empty-input {
    animation: fadeInUp 1s ease-out;
}

#empty-state .grid {
    animation: fadeInUp 1.2s ease-out;
}

#empty-state .empty-state-example {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#empty-state .empty-state-example:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#empty-state .empty-state-example:active {
    transform: translateY(0);
}

/* Ensure text is visible in light mode for empty state examples */
[data-theme="light"] #empty-state .empty-state-example h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] #empty-state .empty-state-example p {
    color: var(--text-primary) !important;
    opacity: 0.8;
}

[data-theme="light"] #empty-state .empty-state-example:hover h3,
[data-theme="light"] #empty-state .empty-state-example:hover p {
    color: var(--text-primary) !important;
    opacity: 1;
}

/* Fix background color for example cards in light theme */
[data-theme="light"] #empty-state .empty-state-example {
    background-color: #f1f5f9 !important;  /* slate-100 */
    border-color: #e2e8f0 !important;      /* slate-200 */
}

[data-theme="light"] #empty-state .empty-state-example:hover {
    background-color: #e2e8f0 !important;  /* slate-200 */
    border-color: #cbd5e1 !important;      /* slate-300 */
}

/* Highlight effect for the input field */
#empty-input:focus {
    animation: borderPulse 2s infinite ease-in-out;
}

/* Additional visual improvements */
.bg-\[\#19c37d\] {
    box-shadow: 0 0 15px 5px rgba(25, 195, 125, 0.2);
}

/* Override browser autofill styling to prevent UI breaking */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
}

/* Ensure autocomplete suggestions have proper styling */
input:-internal-autofill-selected,
textarea:-internal-autofill-selected {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Prevent background color change for autocomplete */
input:-webkit-autofill,
textarea:-webkit-autofill {
    appearance: none !important;
}

/* Специальные стили для мобильного сайдбара в светлой теме */
@media (max-width: 768px) {
    [data-theme="light"] #sidebar {
        background-color: #f4f4f5; /* zinc-100 */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Усиливаем контраст текста в светлой теме для мобильных устройств */
    [data-theme="light"] #sidebar .sidebar-item,
    [data-theme="light"] #sidebar .text-zinc-400,
    [data-theme="light"] #sidebar .text-zinc-300,
    [data-theme="light"] #sidebar h3,
    [data-theme="light"] #sidebar .text-white,
    [data-theme="light"] #sidebar .truncate,
    [data-theme="light"] #sidebar .font-medium {
        color: #18181b !important; /* zinc-900 - темный текст для лучшей читаемости */
    }
    
    /* Стили для подзаголовков в сайдбаре */
    [data-theme="light"] #sidebar .font-medium {
        font-weight: 600 !important;
    }
    
    /* Улучшаем стиль для заголовков в сайдбаре */
    [data-theme="light"] #sidebar h3.text-white,
    [data-theme="light"] #sidebar h3.text-zinc-300 {
        color: #18181b !important;
        font-weight: 600 !important;
    }
    
    /* Улучшаем контраст при наведении */
    [data-theme="light"] #sidebar .sidebar-item:hover {
        background-color: #e4e4e7 !important; /* zinc-200 */
    }
    
    /* Активный элемент в мобильном сайдбаре */
    [data-theme="light"] #sidebar .sidebar-item.active {
        background-color: #e4e4e7 !important; /* zinc-200 */
        border-color: #0ea5e9 !important; /* sky-500 - цвет акцента */
    }
    
    /* Иконки в мобильном сайдбаре в светлой теме */
    [data-theme="light"] #sidebar i[class^="ri-"],
    [data-theme="light"] #sidebar .ri-add-line,
    [data-theme="light"] #sidebar .ri-delete-bin-line {
        color: #18181b !important; /* zinc-900 */
    }
    
    /* Кнопки в мобильном сайдбаре */
    [data-theme="light"] #sidebar button {
        color: #18181b !important;
    }
    
    /* Разделитель в сайдбаре */
    [data-theme="light"] #sidebar-divider {
        background-color: #d4d4d8 !important; /* zinc-300 - более заметный */
    }
    
    /* Профиль пользователя в сайдбаре */
    [data-theme="light"] #sidebar-profile {
        border-top-color: #d4d4d8 !important; /* zinc-300 */
    }
}

/* Стили для уведомления о переключении ассистента в светлой теме */
[data-theme="light"] #assistant-notification {
    background: linear-gradient(to right, #0284c7, #7e22ce);
    color: white;
}

/* Кнопка закрытия в светлой теме */
[data-theme="light"] #assistant-notification button {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] #assistant-notification button:hover {
    color: rgba(255, 255, 255, 1);
}

/* Кнопки в чате */
.input-action-button {
    color: var(--text-tertiary);
}

.input-action-button:hover {
    color: var(--text-primary);
    background-color: var(--button-hover);
}

/* Явное указание цветов для кнопок в светлой теме */
[data-theme="light"] .input-action-button {
    color: #64748b; /* темнее цвет для лучшей видимости */
}

[data-theme="light"] .input-action-button:hover {
    color: #334155; /* еще темнее при наведении */
    background-color: #e2e8f0;
}

[data-theme="light"] #send-button {
    color: #64748b; /* темнее цвет для кнопки отправки */
}

[data-theme="light"] #send-button:hover {
    color: #334155; /* еще темнее при наведении */
}

[data-theme="light"] #send-button i {
    color: #64748b; /* темнее цвет для иконки отправки */
}

[data-theme="light"] #send-button:hover i {
    color: #334155; /* еще темнее при наведении */
}

[data-theme="light"] #empty-state #empty-state-submit {
    color: #0f766e; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state #empty-state-submit:hover {
    color: #0d9488; /* более яркий при наведении */
}

[data-theme="light"] #empty-state #empty-state-submit i {
    color: #0f766e; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state #empty-state-submit:hover i {
    color: #0d9488; /* более яркий при наведении */
}

/* Темы оформления для ChatGPT интерфейса */

/* Базовые переменные темы */
:root {
    /* Светлая тема (дефолтные значения) */
    --bg-primary: #f8fafc; /* slate-50 */
    --bg-secondary: #f1f5f9; /* slate-100 */
    --bg-tertiary: #e2e8f0; /* slate-200 */
    --text-primary: #0f172a; /* slate-900 */
    --text-secondary: #334155; /* slate-700 */
    --text-tertiary: #64748b; /* slate-500 */
    --border-color: #cbd5e1; /* slate-300 */
    
    /* Специфичные для компонентов */
    --sidebar-bg: var(--bg-secondary);
    --table-header-bg: #cbd5e1; /* slate-300 */
    --table-row-hover: #e2e8f0; /* slate-200 */
    --message-bg: #f1f5f9; /* slate-100 */
    --user-message-bg: #f8fafc; /* slate-50 */
    --assistant-message-bg: rgba(226, 232, 240, 0.5); /* slate-200 с прозрачностью */
    --input-bg: #f1f5f9; /* slate-100 */
    --button-hover: #e2e8f0; /* slate-200 */
    --scrollbar-track: #e2e8f0; /* slate-200 */
    --scrollbar-thumb: #94a3b8; /* slate-400 */
    --scrollbar-thumb-hover: #64748b; /* slate-500 */
    --code-bg: #f8fafc; /* slate-50 */
    --code-border: #e2e8f0; /* slate-200 */
    --error-bg: rgba(239, 68, 68, 0.1); /* red-500 с прозрачностью */
    --error-border: #ef4444; /* red-500 */
    --success-bg: rgba(34, 197, 94, 0.1); /* green-500 с прозрачностью */
    --success-border: #22c55e; /* green-500 */
    --dropdown-bg: #f1f5f9; /* slate-100 */
}

/* Темная тема */
[data-theme="dark"] {
    /* Темная тема */
    --bg-primary: #18181b; /* zinc-900 */
    --bg-secondary: #27272a; /* zinc-800 */
    --bg-tertiary: #3f3f46; /* zinc-700 */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa; /* zinc-400 */
    --text-tertiary: #71717a; /* zinc-500 */
    --border-color: #3f3f46; /* zinc-700 */
    
    /* Специфичные для компонентов */
    --sidebar-bg: var(--bg-primary);
    --table-header-bg: #2a2a35; /* темнее zinc-800 */
    --table-row-hover: #2a2a35; /* темнее zinc-800 */
    --message-bg: #27272a; /* zinc-800 */
    --user-message-bg: #18181b; /* zinc-900 */
    --assistant-message-bg: rgba(45, 45, 50, 0.4); /* слегка светлее zinc-900 */
    --input-bg: #27272a; /* zinc-800 */
    --button-hover: #3f3f46; /* zinc-700 */
    --scrollbar-track: #27272a; /* zinc-800 */
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
    --code-bg: #1e1e2e;
    --code-border: #2d2d3a;
    --error-bg: rgba(239, 68, 68, 0.2); /* red-500 с прозрачностью */
    --error-border: #ef4444; /* red-500 */
    --success-bg: rgba(34, 197, 94, 0.2); /* green-500 с прозрачностью */
    --success-border: #22c55e; /* green-500 */
    --dropdown-bg: #27272a; /* zinc-800 */
}

/* Общие стили для обеих тем */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* Боковая панель */
#sidebar {
    background-color: var(--sidebar-bg);
    border-right-color: var(--border-color);
}

/* Контейнер сообщений */
#messages-container, #chat-area {
    background-color: var(--bg-primary);
}

/* Элементы сайдбара */
.sidebar-item {
    color: var(--text-primary);
}

.sidebar-item:hover {
    background-color: var(--button-hover);
}

.sidebar-item.active {
    background-color: var(--button-hover);
}

/* Сообщения */
.user-message {
    background-color: var(--user-message-bg);
}

.assistant-message {
    background-color: var(--assistant-message-bg);
}

/* Дополнительные стили для обеспечения контраста */
.py-5 {
    background-color: var(--user-message-bg);
    color: var(--text-primary);
}

.py-5.bg-zinc-800\/40 {
    background-color: var(--assistant-message-bg);
    color: var(--text-primary);
}

/* Стили для текста сообщений */
.whitespace-pre-wrap, .prose.prose-invert {
    color: var(--text-primary);
}

/* Имена отправителей */
.font-medium {
    color: var(--text-primary);
}

/* Пустое состояние */
#empty-state h1 {
    color: var(--text-primary);
}

/* Стили для поля ввода */
#empty-input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Поле ввода */
#input-container {
    border-top-color: var(--border-color);
    background-color: var(--bg-primary);
}

#message-input, .input-area {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Дополнительные стили для заголовков и текста */
h1, h2, h3, h4, h5, h6, p, span, div {
    color: var(--text-primary);
}

/* Плейсхолдеры для полей ввода */
::placeholder {
    color: var(--text-tertiary);
}

/* Кнопки */
button, .btn {
    color: var(--text-primary);
}

button:hover, .btn:hover {
    background-color: var(--button-hover);
}

/* Исправления для иконок */
i[class^="ri-"] {
    color: var(--text-primary);
}

/* Исправляем цвет текста в пространстве сообщений */
.text-white {
    color: var(--text-primary);
}

/* Добавляем явное указание цвета текста для всех основных элементов */
#sidebar, #chat-area, #messages-container, #messages {
    color: var(--text-primary);
}

/* Скроллбар */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

/* Блоки кода */
.markdown-content code {
    background-color: var(--code-bg);
}

.markdown-content pre {
    background-color: var(--code-bg);
    border-color: var(--code-border);
}

/* Сообщения об ошибках */
.error-message {
    background-color: var(--error-bg);
    border-color: var(--error-border);
}

/* Сообщения об успехе */
.success-message {
    background-color: var(--success-bg);
    border-color: var(--success-border);
}

/* Кнопка переключения темы */
.theme-toggle {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.theme-toggle:hover {
    background-color: var(--button-hover);
}

/* Иконки переключения темы */
.theme-icon-dark, .theme-icon-light {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
}

/* При светлой теме показываем иконку темной темы и наоборот */
[data-theme="dark"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: block;
}

[data-theme="light"] .theme-icon-dark {
    display: block;
}

[data-theme="light"] .theme-icon-light {
    display: none;
}

/* Стили для выпадающего меню */
#profile-dropdown {
    background-color: var(--dropdown-bg) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#profile-dropdown a, 
#profile-dropdown button, 
#profile-dropdown span {
    color: var(--text-primary) !important;
}

#profile-dropdown a:hover, 
#profile-dropdown button:hover {
    background-color: var(--button-hover) !important;
}

#profile-dropdown .h-px {
    background-color: var(--border-color) !important;
}

/* Общие стили для выпадающих меню и компонентов */
.absolute {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

/* Стили для всех других выпадающих элементов */
.dropdown-menu, 
.dropdown, 
.menu, 
.popup, 
select, 
option {
    background-color: var(--dropdown-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Исправление для текста ссылок */
a, a:link, a:visited {
    color: var(--text-primary);
}

/* Стили для администраторской панели */
.admin-panel, .form-container {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.form-section, 
.form-group, 
.back-btn, 
input, 
textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Плавный переход между темами */
body, #sidebar, #chat-area, .sidebar-item, 
#messages-container, #input-container, button,
input, textarea, #empty-state, .message-content,
.form-input, .form-select, .form-container, .admin-panel,
#profile-dropdown, a, select, option {
    transition: 
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Ники и сообщения пользователей в чате */
.font-medium, 
.whitespace-pre-wrap, 
.prose.prose-invert,
.message-content,
.text-white,
span.text-white,
div.text-white {
    color: var(--text-primary) !important;
}

/* Дополнительное усиление для ников участников чата */
.flex-1 .font-medium, 
.flex-1 span.text-white, 
.sender-name, 
.message-sender {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Текст чата и сообщений */
.flex-1 .whitespace-pre-wrap, 
.prose.prose-invert .whitespace-pre-wrap,
.message-content,
.chat-message {
    color: var(--text-primary) !important;
}

/* Кнопки в области ввода */
#send-button, 
#send-button i,
label[for="file-input"],
label[for="file-input"] i {
    color: var(--highlight-color) !important;
    opacity: 0.9;
}

#send-button:hover, 
label[for="file-input"]:hover {
    background-color: var(--button-hover) !important;
}

#send-button:hover i, 
label[for="file-input"]:hover i {
    opacity: 1;
    color: var(--highlight-color) !important;
}

/* Animations for empty state */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes borderPulse {
    0% {
        border-color: var(--border-color);
    }
    50% {
        border-color: var(--highlight-color);
    }
    100% {
        border-color: var(--border-color);
    }
}

/* Apply animations to empty state elements */
#empty-state .w-16 {
    animation: pulse 3s infinite ease-in-out;
}

#empty-state h1 {
    animation: fadeInUp 0.6s ease-out;
}

#empty-state p {
    animation: fadeInUp 0.8s ease-out;
}

#empty-state #empty-input {
    animation: fadeInUp 1s ease-out;
}

#empty-state .grid {
    animation: fadeInUp 1.2s ease-out;
}

#empty-state .empty-state-example {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#empty-state .empty-state-example:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#empty-state .empty-state-example:active {
    transform: translateY(0);
}

/* Ensure text is visible in light mode for empty state examples */
[data-theme="light"] #empty-state .empty-state-example h3 {
    color: var(--text-primary) !important;
    font-weight: 600;
}

[data-theme="light"] #empty-state .empty-state-example p {
    color: var(--text-primary) !important;
    opacity: 0.8;
}

[data-theme="light"] #empty-state .empty-state-example:hover h3,
[data-theme="light"] #empty-state .empty-state-example:hover p {
    color: var(--text-primary) !important;
    opacity: 1;
}

/* Fix background color for example cards in light theme */
[data-theme="light"] #empty-state .empty-state-example {
    background-color: #f1f5f9 !important;  /* slate-100 */
    border-color: #e2e8f0 !important;      /* slate-200 */
}

[data-theme="light"] #empty-state .empty-state-example:hover {
    background-color: #e2e8f0 !important;  /* slate-200 */
    border-color: #cbd5e1 !important;      /* slate-300 */
}

/* Highlight effect for the input field */
#empty-input:focus {
    animation: borderPulse 2s infinite ease-in-out;
}

/* Additional visual improvements */
.bg-\[\#19c37d\] {
    box-shadow: 0 0 15px 5px rgba(25, 195, 125, 0.2);
}

/* Override browser autofill styling to prevent UI breaking */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
}

/* Ensure autocomplete suggestions have proper styling */
input:-internal-autofill-selected,
textarea:-internal-autofill-selected {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Prevent background color change for autocomplete */
input:-webkit-autofill,
textarea:-webkit-autofill {
    appearance: none !important;
}

/* Специальные стили для мобильного сайдбара в светлой теме */
@media (max-width: 768px) {
    [data-theme="light"] #sidebar {
        background-color: #f4f4f5; /* zinc-100 */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Усиливаем контраст текста в светлой теме для мобильных устройств */
    [data-theme="light"] #sidebar .sidebar-item,
    [data-theme="light"] #sidebar .text-zinc-400,
    [data-theme="light"] #sidebar .text-zinc-300,
    [data-theme="light"] #sidebar h3,
    [data-theme="light"] #sidebar .text-white,
    [data-theme="light"] #sidebar .truncate,
    [data-theme="light"] #sidebar .font-medium {
        color: #18181b !important; /* zinc-900 - темный текст для лучшей читаемости */
    }
    
    /* Стили для подзаголовков в сайдбаре */
    [data-theme="light"] #sidebar .font-medium {
        font-weight: 600 !important;
    }
    
    /* Улучшаем стиль для заголовков в сайдбаре */
    [data-theme="light"] #sidebar h3.text-white,
    [data-theme="light"] #sidebar h3.text-zinc-300 {
        color: #18181b !important;
        font-weight: 600 !important;
    }
    
    /* Улучшаем контраст при наведении */
    [data-theme="light"] #sidebar .sidebar-item:hover {
        background-color: #e4e4e7 !important; /* zinc-200 */
    }
    
    /* Активный элемент в мобильном сайдбаре */
    [data-theme="light"] #sidebar .sidebar-item.active {
        background-color: #e4e4e7 !important; /* zinc-200 */
        border-color: #0ea5e9 !important; /* sky-500 - цвет акцента */
    }
    
    /* Иконки в мобильном сайдбаре в светлой теме */
    [data-theme="light"] #sidebar i[class^="ri-"],
    [data-theme="light"] #sidebar .ri-add-line,
    [data-theme="light"] #sidebar .ri-delete-bin-line {
        color: #18181b !important; /* zinc-900 */
    }
    
    /* Кнопки в мобильном сайдбаре */
    [data-theme="light"] #sidebar button {
        color: #18181b !important;
    }
    
    /* Разделитель в сайдбаре */
    [data-theme="light"] #sidebar-divider {
        background-color: #d4d4d8 !important; /* zinc-300 - более заметный */
    }
    
    /* Профиль пользователя в сайдбаре */
    [data-theme="light"] #sidebar-profile {
        border-top-color: #d4d4d8 !important; /* zinc-300 */
    }
}

/* Стили для уведомления о переключении ассистента в светлой теме */
[data-theme="light"] #assistant-notification {
    background: linear-gradient(to right, #0284c7, #7e22ce);
    color: white;
}

/* Кнопка закрытия в светлой теме */
[data-theme="light"] #assistant-notification button {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] #assistant-notification button:hover {
    color: rgba(255, 255, 255, 1);
}

/* Кнопки в чате */
.input-action-button {
    color: var(--text-tertiary);
}

.input-action-button:hover {
    color: var(--text-primary);
    background-color: var(--button-hover);
}

/* Явное указание цветов для кнопок в светлой теме */
[data-theme="light"] .input-action-button {
    color: #64748b; /* темнее цвет для лучшей видимости */
}

[data-theme="light"] .input-action-button:hover {
    color: #334155; /* еще темнее при наведении */
    background-color: #e2e8f0;
}

[data-theme="light"] #send-button {
    color: #64748b; /* темнее цвет для кнопки отправки */
}

[data-theme="light"] #send-button:hover {
    color: #334155; /* еще темнее при наведении */
}

[data-theme="light"] #send-button i {
    color: #64748b; /* темнее цвет для иконки отправки */
}

[data-theme="light"] #send-button:hover i {
    color: #334155; /* еще темнее при наведении */
}

[data-theme="light"] #empty-state #empty-state-submit {
    color: #0f766e; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state #empty-state-submit:hover {
    color: #0d9488; /* более яркий при наведении */
}

[data-theme="light"] #empty-state #empty-state-submit i {
    color: #0f766e; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state #empty-state-submit:hover i {
    color: #0d9488; /* более яркий при наведении */
}

[data-theme="light"] .flex.items-center.bg-zinc-800 {
    background-color: #f8fafc !important; /* светлый фон */
    border: 1px solid #cbd5e1 !important; /* более заметная рамка */
}

[data-theme="light"] .flex.items-center.bg-zinc-800:focus-within {
    border-color: #0ea5e9 !important; /* синий цвет при фокусе */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important; /* свечение для привлечения внимания */
}

/* Улучшение видимости текстовой области ввода в светлой теме */
[data-theme="light"] #message-input {
    color: #334155 !important; /* темный текст для лучшей видимости */
}

/* Плейсхолдер для поля ввода в светлой теме */
[data-theme="light"] #message-input::placeholder {
    color: #94a3b8 !important; /* slate-400 для видимости плейсхолдера */
}

/* Стили для блоков срока действия аккаунта в светлой теме */
[data-theme="light"] .duration-option label {
    background: #e2e8f0 !important; /* slate-200 */
    color: #0f172a !important; /* slate-900 */
    border: 2px solid #cbd5e1 !important; /* slate-300 */
}

[data-theme="light"] .duration-option label .text-xs {
    color: #334155 !important; /* slate-700 */
}

[data-theme="light"] .duration-option input[type="radio"]:checked + label {
    background: #0ea5e9 !important;
    color: #fff !important;
    border: 2px solid #0ea5e9 !important;
}

[data-theme="light"] .duration-option input[type="radio"]:checked + label .text-xs {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Стили для улучшения видимости кнопок в чате в светлой теме */

/* Кнопки прикрепления файлов и поиска в чате */
[data-theme="light"] .input-action-button {
    color: #64748b !important; /* темнее цвет для лучшей видимости */
}

[data-theme="light"] .input-action-button:hover {
    color: #334155 !important; /* еще темнее при наведении */
    background-color: #e2e8f0 !important;
}

/* Кнопка отправки сообщения */
[data-theme="light"] #send-button,
[data-theme="light"] #send-button i {
    color: #0f766e !important; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #send-button:hover,
[data-theme="light"] #send-button:hover i {
    color: #0d9488 !important; /* более яркий при наведении */
}

/* Кнопка отправки в пустом состоянии */
[data-theme="light"] #empty-state-submit,
[data-theme="light"] #empty-state-submit i {
    color: #0f766e !important; /* темно-бирюзовый для лучшей видимости */
}

[data-theme="light"] #empty-state-submit:hover,
[data-theme="light"] #empty-state-submit:hover i {
    color: #0d9488 !important; /* более яркий при наведении */
}

/* Улучшение контраста и видимости поля ввода в светлой теме */
[data-theme="light"] .flex.items-center.bg-zinc-800 {
    background-color: #f8fafc !important; /* светлый фон */
    border: 1px solid #cbd5e1 !important; /* более заметная рамка */
}

[data-theme="light"] .flex.items-center.bg-zinc-800:focus-within {
    border-color: #0ea5e9 !important; /* синий цвет при фокусе */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important; /* свечение для привлечения внимания */
}

/* Улучшение видимости текстовой области ввода в светлой теме */
[data-theme="light"] #message-input {
    color: #334155 !important; /* темный текст для лучшей видимости */
}

/* Плейсхолдер для поля ввода в светлой теме */
[data-theme="light"] #message-input::placeholder {
    color: #94a3b8 !important; /* slate-400 для видимости плейсхолдера */
}

/* Улучшение видимости имени пользователя в профиле */
[data-theme="light"] #profile-button .truncate {
    color: #334155 !important; /* Темный текст для имени пользователя */
    font-weight: 500 !important; /* Делаем текст чуть жирнее */
}

[data-theme="light"] #profile-button .bg-zinc-700 {
    background-color: #cbd5e1 !important; /* Светлый фон для аватара */
    color: #1e293b !important; /* Темный текст для буквы в аватаре */
}

/* Улучшение видимости в меню профиля */
[data-theme="light"] #profile-dropdown {
    background-color: #ffffff !important; /* Белый фон */
    border: 1px solid #e2e8f0 !important; /* Светлая рамка */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; /* Более заметная тень */
}

[data-theme="light"] #profile-dropdown a,
[data-theme="light"] #profile-dropdown button {
    color: #1e293b !important; /* Темный текст для пунктов меню */
}

[data-theme="light"] #profile-dropdown a:hover,
[data-theme="light"] #profile-dropdown button:hover {
    background-color: #f1f5f9 !important; /* Светлый фон при наведении */
}

[data-theme="light"] #profile-dropdown .h-px {
    background-color: #e2e8f0 !important; /* Светлый разделитель */
}

[data-theme="light"] #profile-dropdown i {
    color: #64748b !important; /* Темный цвет для иконок */
}