/* \assets\css\style.css */

/* --- СБРОС И БАЗОВЫЕ НАСТРОЙКИ СТРАНИЦЫ --- */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #131314; color: #e3e3e3; display: flex; height: 100vh; overflow: hidden; }

/* --- БОКОВАЯ ПАНЕЛЬ (SIDEBAR) --- */
.sidebar { width: 300px; background-color: #1e1f20; display: flex; flex-direction: column; border-right: 1px solid #3c4043; transition: all 0.3s ease; z-index: 10; flex-shrink: 0; }
.sidebar.hidden { margin-left: -300px; }
.sidebar-header { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.btn-new-chat { width: 100%; padding: 12px; background-color: #1a1b1c; border: 1px dashed #5f6368; border-radius: 24px; color: #a8c7fa; font-weight: 500; cursor: pointer; text-align: center; transition: background 0.2s; outline: none; }
.btn-new-chat:hover { background-color: #2a2b2d; }

/* --- СПИСОК ЧАТОВ В САЙДБАРЕ --- */
.chat-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 8px; cursor: pointer; margin-bottom: 4px; font-size: 14px; transition: background 0.2s; }
.chat-item:hover { background-color: #2d2f31; }
.chat-item.active { background-color: #004a77; color: #c2e7ff; }
.chat-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.btn-delete-chat { background: none; border: none; color: #9aa0a6; cursor: pointer; font-size: 16px; padding: 0 4px; display: none; }
.chat-item:hover .btn-delete-chat { display: block; }
.btn-delete-chat:hover { color: #f28b82; }

/* --- ПОДВАЛ САЙДБАРА И ПРОФИЛИ --- */
.sidebar-footer { padding: 12px 16px; border-top: 1px solid #3c4043; background-color: #1a1b1c; display: flex; flex-direction: column; gap: 8px; }
.btn-prompt-settings { width: 100%; padding: 10px; background-color: #3c4043; border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 13px; text-align: left; outline: none; }
.account-manager { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-top: 1px solid #2d2f31; margin-top: 4px; }
.account-info { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.account-avatar { width: 28px; height: 28px; border-radius: 50%; background-color: #a8c7fa; color: #042143; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 12px; }
.account-avatar.guest { background-color: #3c4043; color: #aaa; }
.btn-account-action { background: none; border: none; color: #a8c7fa; cursor: pointer; font-size: 13px; text-decoration: underline; outline: none; }
.btn-account-action.logout { color: #f28b82; }

/* --- ОСНОВНАЯ ЗОНА И ВЕРХНЯЯ ПАНЕЛЬ --- */
.main-content { flex: 1; display: flex; flex-direction: column; background-color: #131314; position: relative; min-width: 0; /* ЗАЩИТА ОТ РАСТЯГИВАНИЯ */ }
.main-header { height: 60px; display: flex; align-items: center; padding: 0 20px; gap: 15px; background-color: #131314; flex-shrink: 0; }
.toggle-sidebar-btn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; outline: none; }
.controls-group { display: flex; gap: 15px; align-items: center; flex: 1; }
select { background-color: #1e1f20; color: #fff; border: 1px solid #3c4043; padding: 6px 12px; border-radius: 8px; outline: none; font-size: 14px; cursor: pointer; }

/* --- ОКНО ВЫВОДА СООБЩЕНИЙ --- */
.messages-container { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; /* ЗАЩИТА FLEX-СЕТКИ */ padding: 30px 10%; display: flex; flex-direction: column; gap: 24px; }
.welcome-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: #757575; text-align: center; gap: 10px; }
.welcome-screen h1 { color: #fff; font-weight: 400; }
.message-row { display: flex; width: 100%; }
.message-row.user { justify-content: flex-end; }
.message-row.assistant { justify-content: flex-start; }
.message-bubble { max-width: 85%; min-width: 0; /* ЗАЩИТА ОТ РАСТЯГИВАНИЯ */ padding: 14px 20px; border-radius: 18px; font-size: 16px; line-height: 1.6; word-wrap: break-word; }
.message-row.user .message-bubble { background-color: #2a2b2d; color: #fff; border-bottom-right-radius: 4px; }
.message-row.assistant .message-bubble { background-color: transparent; color: #e3e3e3; padding-left: 0; width: 100%; }

/* --- ОФОРМЛЕНИЕ БЛОКОВ КОДА С КНОПКОЙ КОПИРОВАНИЯ --- */
.code-block-wrapper { background-color: #1e1f20; border: 1px solid #3c4043; border-radius: 8px; margin: 12px 0; overflow: hidden; position: relative; max-width: 100%; /* УДЕРЖАНИЕ В ГРАНИЦАХ */ }
.code-block-header { background-color: #1a1b1c; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2d2f31; }
.code-file-name { font-size: 12px; color: #a8c7fa; font-family: monospace; font-weight: bold; }
.btn-copy-code { background: none; border: none; color: #9aa0a6; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 5px; font-weight: 500; outline: none; padding: 4px 8px; border-radius: 4px; }
.btn-copy-code:hover { color: #fff; background-color: #2a2b2d; }
pre { padding: 14px; overflow-x: auto; margin: 0; background: none; border: none; max-width: 100%; }
code { font-family: 'Courier New', Courier, monospace; font-size: 14px; color: #f8f8f2; }

/* --- ЗОНА ВВОДА СООБЩЕНИЙ --- */
.input-container { padding: 10px 10% 25px 10%; background-color: #131314; flex-shrink: 0; }
.input-wrapper { display: flex; flex-direction: column; background-color: #1e1f20; border: 1px solid #3c4043; border-radius: 20px; padding: 12px 16px 8px 16px; }
.input-wrapper:focus-within { border-color: #a8c7fa; box-shadow: 0 0 4px rgba(168,199,250,0.2); }
textarea { width: 100%; background: none; border: none; color: #fff; font-size: 16px; outline: none; resize: none; padding: 0 4px; max-height: 180px; }
.input-action-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; border-top: 1px solid #2d2f31; padding-top: 8px; }
.model-selector-bottom { background-color: #131314; color: #a8c7fa; border: 1px solid #3c4043; padding: 6px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; }
.btn-send { background-color: #a8c7fa; border: none; color: #042143; font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s, transform 0.1s; outline: none; }
.btn-send:disabled { background-color: #3c4043; color: #5f6368; cursor: not-allowed; }
.btn-send:active:not(:disabled) { transform: scale(0.9); }

/* --- МОДАЛЬНЫЕ ОКНА (УНИВЕРСАЛЬНЫЕ) --- */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 100; }
.modal-content { background-color: #1e1f20; border: 1px solid #3c4043; border-radius: 12px; padding: 24px; width: 90%; max-width: 450px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { color: #fff; font-weight: 500; }
.modal-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; outline: none; }
.modal-label { font-size: 14px; color: #aaa; display: block; margin-bottom: 5px; }
.form-control { width: 100%; padding: 12px; background-color: #2a2b2d; border: 1px solid #3c4043; border-radius: 8px; color: #fff; margin-bottom: 15px; outline: none; font-size: 15px; }
.form-control:focus { border-color: #a8c7fa; }
.btn-modal-save { width: 100%; padding: 12px; border-radius: 24px; font-weight: 600; cursor: pointer; text-align: center; transition: background 0.2s; border: none; background-color: #a8c7fa; color: #042143; font-size: 15px; outline: none; }
.btn-modal-save:hover { background-color: #c2e7ff; }
.toggle-auth-link { text-align: center; margin-top: 15px; font-size: 13px; color: #aaa; }
.toggle-auth-link span { color: #a8c7fa; cursor: pointer; text-decoration: underline; }

/* --- СТИЛИ ДЛЯ АДМИН-ПАНЕЛИ --- */
.admin-link { color: #fdad84; text-decoration: none; font-size: 13px; font-weight: 600; display: block; padding: 4px 0; }
.admin-link:hover { text-decoration: underline; }
.admin-body { background-color: #131314; color: #e3e3e3; padding: 30px; font-family: 'Segoe UI', sans-serif; overflow-y: auto; height: 100vh; }
.admin-container { max-width: 1200px; margin: 0 auto; }
.admin-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #3c4043; padding-bottom: 15px; }
.admin-nav { display: flex; gap: 20px; margin-bottom: 25px; }
.admin-nav-btn { background-color: #1e1f20; color: #fff; border: 1px solid #3c4043; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.admin-nav-btn.active { background-color: #004a77; border-color: #a8c7fa; color: #c2e7ff; }
.admin-section { display: none; background-color: #1e1f20; border: 1px solid #3c4043; border-radius: 12px; padding: 20px; }
.admin-section.active { display: block; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 15px; text-align: left; }
.admin-table th, .admin-table td { padding: 12px; border-bottom: 1px solid #3c4043; font-size: 14px; }
.admin-table th { background-color: #1a1b1c; color: #a8c7fa; font-weight: 500; }
.admin-table tr:hover { background-color: #2a2b2d; }
.btn-danger { background-color: #5c2523; color: #fdad84; border: 1px solid #8c322f; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-danger:hover { background-color: #8c322f; }
.btn-view { background-color: #1a3d22; color: #b4f4c2; border: 1px solid #235c32; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-right: 5px; }
.btn-view:hover { background-color: #235c32; }
.log-viewer { background-color: #131314; border: 1px solid #3c4043; padding: 15px; border-radius: 8px; max-height: 400px; overflow-y: auto; margin-top: 15px; }

/* --- СТИЛИ ДЛЯ ЗАГРУЗКИ ФАЙЛОВ --- */
.btn-attach { 
    background: none; border: none; color: #a8c7fa; cursor: pointer; 
    display: flex; justify-content: center; align-items: center; 
    padding: 6px; border-radius: 50%; transition: background 0.2s, transform 0.1s; outline: none; 
}
.btn-attach:hover { background-color: #2a2b2d; color: #fff; }
.btn-attach:active { transform: scale(0.9); }

.drag-overlay { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(19, 19, 20, 0.95); z-index: 9999; 
    justify-content: center; align-items: center; flex-direction: column; 
    color: #a8c7fa; border: 4px dashed #a8c7fa; box-sizing: border-box; 
}
.drag-overlay.active { display: flex; animation: fadeIn 0.2s ease-in-out; }
.drag-overlay svg { width: 80px; height: 80px; margin-bottom: 20px; animation: bounce 1s infinite alternate; }
.drag-overlay h2 { font-weight: 500; font-size: 24px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-15px); } }