/* ==================================================================
// --- Файл: /public/chatbot/chatbot.css (Версия 5.6)
// --- Описание: Исправлен фон области сообщений для светлой темы.
// ================================================================== */

/* --- ОБЩИЕ СТИЛИ (не зависят от темы) --- */
.messenger-body { font-family: inherit; } 
.messenger-main-container { height: 100%; transition: background-color 0.3s, color 0.3s; }
.message-container { display: flex; margin-bottom: 1rem; }
.message-container.user-message { justify-content: flex-end; }
.message-container.instructor-message { justify-content: flex-start; }
.message-content { display: flex; align-items: flex-start; gap: 8px; max-width: 90%; }
.message-container.user-message .message-content { flex-direction: row-reverse; }
.message-bubble { max-width: 100%; padding: 0.75rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.messenger-control-button { border-radius: 9999px; padding: 8px; transition: all 0.3s; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; outline: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
#messenger-voice-settings { position: absolute; top: 100%; right: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 220px; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; padding: 12px; border-radius: 8px; }
#messenger-voice-settings.visible { opacity: 1; visibility: visible; }
#messenger-voice-settings label { font-size: 12px; font-weight: 500; }
#messenger-voice-settings input[type="range"],
#messenger-voice-settings select { width: 100%; border-radius: 4px; padding: 2px; }
.copy-btn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 50%; opacity: 0; transition: opacity 0.2s, color 0.2s; margin-top: 4px; flex-shrink: 0; }
.message-content:hover .copy-btn { opacity: 1; }
.related-links-wrapper { margin-top: 6px; max-width: 80%; }
.related-links-container { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.related-links-title { font-weight: 600; white-space: nowrap; }
.related-link-item a { text-decoration: none; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100px; }
.related-link-item.first-link a { max-width: 180px; }
.related-link-item a:hover { text-decoration: underline; }

/* ==================================================================
// --- БАЗОВАЯ (ТЕМНАЯ) ТЕМА ---
// ================================================================== */

.messenger-main-container { background-color: #1f2937; }
/* ИСПРАВЛЕНИЕ: Явное указание фона для области сообщений */
#messenger-messages-area { background-color: #1f2937; }
.messenger-overflow-y-auto::-webkit-scrollbar-track { background: #374151; }
.messenger-overflow-y-auto::-webkit-scrollbar-thumb { background: #6B7280; }
#messenger-left-panel, #messenger-chat-header, #messenger-input-panel { background-color: #374151; border-color: #4b5563; }
#messenger-search-input, #messenger-message-input { background-color: #111827; color: #f9fafb; border: 1px solid #4b5563; }
#messenger-search-input::placeholder, #messenger-message-input::placeholder { color: #9ca3af; }
#messenger-search-input:focus, #messenger-message-input:focus { --tw-ring-color: #BB86FC; }
#messenger-chat-title, .contact-item .font-semibold { color: #f9fafb; }
.contact-item:hover { background-color: #4b5563; }
.contact-item.active { background-color: #3d4655; }
.instructor-message .message-bubble { background-color: #374151; color: #F3F4F6; border-bottom-left-radius: 0; }
.user-message .message-bubble { background-color: #BB86FC; color: #121212; border-bottom-right-radius: 0; }
.messenger-control-button { background-color: #4B5563; color: #E0E0E0; }
.messenger-control-button:hover { background-color: #6B7280; }
.messenger-control-button.active { color: #BB86FC; }
#messenger-send-button { background-color: #BB86FC; color: #121212; }
#messenger-send-button:hover { background-color: #FFFFFF; }
#messenger-voice-settings { background-color: #374151; border: 1px solid #4b5563;}
#messenger-voice-settings label { color: #D1D5DB; }
#messenger-voice-settings input[type="range"], #messenger-voice-settings select { background-color: #4B5563; border: 1px solid #6B7280; color: #E0E0E0; }
.copy-btn { color: #9CA3AF; }
.copy-btn:hover { color: #E5E7EB; }
.copy-btn.copied { color: #4ADE80; }
.related-links-container { background-color: rgba(0,0,0,0.2); }
.related-links-title { color: #9CA3AF; }
.related-link-item a { color: #A5B4FC; }
.related-link-item a:hover { color: #C7D2FE; }

/* ==================================================================
// --- СТИЛИ ДЛЯ СВЕТЛОЙ ТЕМЫ ---
// ================================================================== */

.messenger-main-container.light-theme { background-color: #f9fafb; color: #1f2937; }
/* ИСПРАВЛЕНИЕ: Явное указание фона для области сообщений */
.light-theme #messenger-messages-area { background-color: #f9fafb; }
.light-theme .messenger-overflow-y-auto::-webkit-scrollbar-track { background: #e5e7eb; }
.light-theme .messenger-overflow-y-auto::-webkit-scrollbar-thumb { background: #9ca3af; }
.light-theme #messenger-left-panel, .light-theme #messenger-chat-header, .light-theme #messenger-input-panel { background-color: #f3f4f6; border-color: #e5e7eb; }
.light-theme #messenger-search-input, .light-theme #messenger-message-input { background-color: #ffffff; border: 1px solid #d1d5db; color: #111827; }
.light-theme #messenger-search-input::placeholder, .light-theme #messenger-message-input::placeholder { color: #6b7280; }
.light-theme #messenger-search-input:focus, .light-theme #messenger-message-input:focus { --tw-ring-color: #8224E3; }
.light-theme #messenger-chat-title, .light-theme .contact-item .font-semibold { color: #111827; }
.light-theme .contact-item:hover { background-color: #e5e7eb; }
.light-theme .contact-item.active { background-color: #d1d5db; }
.light-theme .instructor-message .message-bubble { background-color: #e5e7eb; color: #1f2937; }
.light-theme .messenger-control-button { background-color: #e5e7eb; color: #4b5563; }
.light-theme .messenger-control-button:hover { background-color: #d1d5db; }
.light-theme .messenger-control-button.active { color: #8224E3; }
.light-theme #messenger-send-button { background-color: #8224E3; color: #ffffff; }
.light-theme #messenger-send-button:hover { background-color: #6b7280; }
.light-theme #messenger-voice-settings { background-color: #ffffff; border: 1px solid #e5e7eb; }
.light-theme #messenger-voice-settings label { color: #4b5563; }
.light-theme #messenger-voice-settings input[type="range"], .light-theme #messenger-voice-settings select { background-color: #f3f4f6; border: 1px solid #d1d5db; color: #1f2937; }
.light-theme .copy-btn { color: #6b7280; }
.light-theme .copy-btn:hover { color: #1f2937; }
.light-theme .related-links-container { background-color: rgba(0,0,0,0.05); }
.light-theme .related-links-title { color: #4b5563; }
.light-theme .related-link-item a { color: #6366f1; }
.light-theme .related-link-item a:hover { color: #4f46e5; }