/* =========================================
 ДИЗАЙН-СИСТЕМА (СВЕТЛАЯ ТЕМА) — ProZavet
 ========================================= */
:root {
 --bg-body: #f0f4f9;
 --bg-card: #ffffff;
 --text-primary: #455a64;
 --text-secondary: #65676b;
 --border-color: #e4e6eb;
 --btn-bg: #607d8b;
 --btn-text: #ffffff;
 --accent-color: #007aff;
 --badge-bg: rgba(0, 122, 255, 0.1);

 --bg-main: var(--bg-card);
 --bg-sidebar: var(--bg-body);
 --bg-input: var(--bg-body);
 --msg-user-bg: var(--bg-body);
 --msg-user-text: var(--text-primary);
 --msg-bot-bg: transparent;
 --promo-bg: var(--bg-card);
 --promo-hover: rgba(0,0,0,0.03);
}

/* =========================================
 ТЁМНАЯ ТЕМА (ЧЕРЕЗ АТРИБУТ)
 ========================================= */
[data-theme="dark"] {
 --bg-body: #131314;
 --bg-card: #1e1f20;
 --text-primary: #e3e3e3;
 --text-secondary: #c4c7c5;
 --border-color: #444746;
 --btn-bg: #e3e3e3;
 --btn-text: #131314;
 --accent-color: #66b2ff;
 --badge-bg: rgba(102, 178, 255, 0.15);

 --bg-main: var(--bg-card);
 --bg-sidebar: var(--bg-body);
 --bg-input: var(--bg-body);
 --msg-user-bg: #282a2c;
 --msg-user-text: var(--text-primary);
 --msg-bot-bg: transparent;
 --promo-bg: #282a2c;
 --promo-hover: #3c4043;
}

/* =========================================
 БАЗА
 ========================================= */
* { box-sizing: border-box; }
::-webkit-scrollbar { width: 0px !important; display: none !important; }
* { -ms-overflow-style: none; scrollbar-width: none; }

html { scroll-behavior: smooth; }

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 background-color: var(--bg-main);
 color: var(--text-primary);
 margin: 0;
 height: 100dvh;
 display: flex;
 overflow: hidden;
 transition: background-color 0.3s, color 0.3s;
}

/* =========================================
 SIDEBAR (СПИСОК ЧАТОВ)
 ========================================= */
.sidebar {
 width: 280px; flex-shrink: 0;
 background-color: var(--bg-sidebar);
 display: flex; flex-direction: column;
 border-right: 1px solid var(--border-color);
 height: 100dvh;
}

.sidebar-header {
 padding: 20px;
 display: flex;
 align-items: center;
 gap: 15px;
}

.sidebar-header h1 {
 font-size: 20px;
 font-weight: 700;
 margin: 0;
 color: var(--text-primary);
}

.badge {
 background: var(--badge-bg);
 color: var(--accent-color);
 padding: 2px 10px;
 border-radius: 12px;
 font-size: 13px;
 font-weight: 600;
}

.sidebar-content {
 flex: 1;
 overflow-y: auto;
 padding: 10px 20px;
 display: flex;
 flex-direction: column;
 gap: 15px;
}

.sidebar-chats {
 flex: 1;
 overflow-y: auto;
 padding: 10px 20px;
}

/* Элемент чата в списке */
.chat-item-link {
 text-decoration: none;
 color: inherit;
 display: block;
}

.chat-entry {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 12px;
 cursor: pointer;
 transition: background-color 0.2s;
 border-radius: 12px;
}

.chat-entry:hover {
 background: var(--promo-hover);
}

.entry-avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: var(--btn-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 18px;
 color: var(--btn-text);
 flex-shrink: 0;
}

.entry-body {
 flex: 1;
 min-width: 0;
}

.entry-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.entry-name {
 font-weight: 600;
 font-size: 15px;
 color: var(--text-primary);
}

.entry-date {
 font-size: 12px;
 color: var(--text-secondary);
}

.entry-item {
 font-size: 13px;
 color: var(--accent-color);
 margin-top: 2px;
}

.entry-msg {
 font-size: 13px;
 color: var(--text-secondary);
 margin-top: 2px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* =========================================
 ГЛАВНАЯ ОБЛАСТЬ (ЧАТ)
 ========================================= */
.main-area, .main {
 flex: 1;
 display: flex;
 flex-direction: column;
 position: relative;
 width: 100%;
 background: var(--bg-main);
}

/* Шапка чата */
.chat-header {
 padding: 10px 20px;
 display: flex;
 align-items: center;
 gap: 14px;
 min-height: 60px;
 border-bottom: 1px solid var(--border-color);
 background: var(--bg-card);
}

.back-btn {
 background: transparent;
 border: none;
 color: var(--accent-color);
 font-size: 24px;
 cursor: pointer;
 text-decoration: none;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 transition: background 0.2s;
}

.back-btn:hover {
 background: var(--badge-bg);
}

.chat-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--btn-bg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 16px;
 color: var(--btn-text);
 flex-shrink: 0;
}

.chat-info {
 line-height: 1.3;
}

.chat-name {
 font-weight: 600;
 font-size: 16px;
 color: var(--text-primary);
}

.chat-item {
 font-size: 13px;
 color: var(--text-secondary);
}

/* =========================================
 СООБЩЕНИЯ
 ========================================= */
.chat-wrapper {
 flex: 1;
 max-width: 850px;
 width: 100%;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.chat-messages {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 padding: 20px;
 gap: 8px;
}

.message {
 margin-bottom: 20px;
 line-height: 1.5;
 font-size: 16px;
 word-wrap: break-word;
 display: flex;
 max-width: 80%;
}

.message-them {
 align-self: flex-start;
}

.message-me {
 align-self: flex-end;
}

.msg-bubble {
 padding: 12px 18px;
 border-radius: 24px;
 position: relative;
}

.message-them .msg-bubble {
 background-color: var(--msg-bot-bg);
 color: var(--text-primary);
 border: 1px solid var(--border-color);
 border-bottom-left-radius: 4px;
}

.message-me .msg-bubble {
 background-color: var(--msg-user-bg);
 color: var(--msg-user-text);
 border: 1px solid var(--border-color);
 border-bottom-right-radius: 4px;
}

.msg-text {
 font-size: 15px;
 line-height: 1.4;
 word-wrap: break-word;
}

.msg-time {
 font-size: 11px;
 color: var(--text-secondary);
 text-align: right;
 margin-top: 4px;
}

/* =========================================
 ПОЛЕ ВВОДА
 ========================================= */
.chat-input {
 padding: 10px 20px 15px;
 background: var(--bg-main);
 width: 100%;
}

.chat-input form {
 display: flex;
 gap: 10px;
 align-items: center;
}

.chat-input input[type="text"] {
 flex: 1;
 padding: 14px 18px;
 border-radius: 24px;
 border: 1px solid var(--border-color);
 background: var(--bg-input);
 color: var(--text-primary);
 font-size: 16px;
 outline: none;
 transition: border-color 0.2s;
}

.chat-input input[type="text"]:focus {
 border-color: var(--accent-color);
}

.chat-input input::placeholder {
 color: var(--text-secondary) !important;
 opacity: 1 !important;
}

.chat-input button {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: none;
 background: var(--btn-bg);
 color: var(--btn-text);
 font-size: 18px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: opacity 0.2s;
 padding: 0;
 margin: 0;
}

.chat-input button:hover {
 opacity: 0.8;
}

/* =========================================
 ПУСТОЕ СОСТОЯНИЕ
 ========================================= */
.empty-state, .empty-chats, .empty-messages {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: var(--text-secondary);
 gap: 8px;
 padding: 40px;
 text-align: center;
}

.theme-toggle {
 background: transparent;
 border: none;
 font-size: 20px;
 cursor: pointer;
 padding: 5px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-primary);
 transition: background-color 0.2s;
 width: 36px;
 height: 36px;
}

.theme-toggle:hover {
 background-color: rgba(128,128,128,0.1);
}

.empty-icon {
 font-size: 48px;
 margin-bottom: 10px;
}

.empty-state h2 {
 font-size: 20px;
 font-weight: 600;
 margin: 0;
 color: var(--text-primary);
}

.empty-state p {
 font-size: 14px;
 color: var(--text-secondary);
 margin: 0;
}

/* =========================================
 АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ
 ========================================= */
@media (max-width: 768px) {
 body {
 font-size: 14px;
 }

 .sidebar {
 width: 100%;
 max-width: 300px;
 position: absolute;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 1050;
 }

 .app {
 position: relative;
 }

 .chat-messages {
 padding: 12px;
 }

 .message {
 max-width: 90%;
 }

 .sidebar + .main-area, .sidebar + .main {
 width: 100%;
 }
}