/* ============================================================
 * app.css — общие стили Storm AI Chat (v61: извлечены из index.html,
 * чтобы чат и «Личный кабинет» (cabinet.html) использовали один файл)
 * ============================================================ */
:root {
  --bg: #f6f5f2;
  --bg-elevated: #ffffff;
  --bg-sunken: #eeece6;
  --text: #17181c;
  --text-muted: #6b7178;
  --border: #e2dfd8;
  --accent-1: #6d5efc;
  --accent-2: #2f7bfa;
  --accent-grad: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --accent-soft: rgba(109, 94, 252, 0.12);
  /* v57: цвет свечения кнопок/пузырей — переопределяется палитрами (Настройки → Оформление) */
  --accent-glow: rgba(109, 94, 252, 0.32);
  --user-bubble: linear-gradient(135deg, #6d5efc, #2f7bfa);
  --user-text: #ffffff;
  --bot-bubble: #ffffff;
  --success: #12b886;
  --error: #ef4444;
  --warning: #e8a53a;
  --code-bg: #1b1c22;
  --code-text: #e7e6ea;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(20,20,35,0.06);
  --shadow-md: 0 10px 40px rgba(20,20,35,0.12);
  --msg-font-size: 16px;
  --sidebar-w: 288px;
  /* v58: скелетоны загрузки (светлая тема) */
  --sk-base: rgba(23, 24, 28, 0.09);
  --sk-hi: rgba(23, 24, 28, 0.2);
}

.dark-theme {
  --bg: #0e0f13;
  --bg-elevated: #191b21;
  --bg-sunken: #14151a;
  --text: #edecf1;
  --text-muted: #9296a3;
  --border: #262832;
  --accent-1: #8f7bff;
  --accent-2: #4a92ff;
  --accent-soft: rgba(143, 123, 255, 0.16);
  --user-bubble: linear-gradient(135deg, #7a67f4, #3f7dfa);
  --user-text: #ffffff;
  --bot-bubble: #1c1e26;
  --code-bg: #0c0d11;
  --code-text: #e7e6ea;
  /* v58: скелетоны загрузки (тёмная тема) */
  --sk-base: rgba(255, 255, 255, 0.1);
  --sk-hi: rgba(255, 255, 255, 0.24);
  --shadow-sm: 0 2px 14px rgba(0,0,0,0.35);
  --shadow-md: 0 20px 60px rgba(0,0,0,0.5);
  --glow-accent: 0 0 0 1px rgba(143,123,255,0.14), 0 8px 24px rgba(74,146,255,0.16);
}
.dark-theme .bot-message { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03); }
.dark-theme .btn-new-chat, .dark-theme .send-button { box-shadow: var(--glow-accent), 0 6px 18px var(--accent-glow); }
.dark-theme .brand .logo-dot { box-shadow: var(--glow-accent); }

* { margin: 0; padding: 0; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--msg-font-size);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

code, .mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; }

.app-shell { display: flex; height: 100dvh; width: 100vw; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }

.sidebar-top { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 10px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 2px 4px 8px; }
.brand .logo-dot {
  width: 28px; height: 28px; border-radius: 9px; background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px;
  box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-new-chat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: var(--radius-md); background: var(--accent-grad);
  color: #fff; border: none; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 18px var(--accent-glow); transition: transform .15s ease, box-shadow .15s ease;
}
.btn-new-chat:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--accent-glow); }
.btn-new-chat:active { transform: scale(0.97); }

.sidebar-search { position: relative; }
.sidebar-search input {
  width: 100%; padding: 9px 12px 9px 34px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 13px; font-family: inherit;
}
.sidebar-search input:focus { outline: none; border-color: var(--accent-2); }
.sidebar-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }

.sidebar-sessions { flex: 1; overflow-y: auto; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }

.session-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text); position: relative; transition: background-color .12s ease;
}
.session-item:hover { background: var(--accent-soft); }
.session-item.active { background: var(--accent-soft); }
.session-item.active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent-grad);
}
.session-item-icon {
  width: 26px; height: 26px; border-radius: 8px; background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted);
  flex-shrink: 0; border: 1px solid var(--border);
}
.session-item-text { flex: 1; min-width: 0; }
.session-item-title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item-date { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.session-item-actions { display: none; gap: 3px; flex-shrink: 0; }
.session-item:hover .session-item-actions { display: flex; }
.session-item-action {
  width: 24px; height: 24px; border-radius: 7px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all .12s ease;
}
.session-item-action:hover { background: var(--bg-elevated); color: var(--text); }

.sidebar-bottom { padding: 10px 14px 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.sidebar-bottom-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; cursor: pointer;
  font-family: inherit; transition: all .12s ease;
}
.sidebar-bottom-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }

.sync-pill { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; }
.sync-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.sync-pill.synced .dot { background: var(--success); }
.sync-pill.error .dot { background: var(--error); }

/* v57: --dock-h — текущая высота дока ввода; от неё считаются плавающие кнопки «вверх/вниз».
 * @property позволяет анимировать кастомное свойство (кнопки едут вместе со сворачиванием дока). */
@property --dock-h { syntax: '<length>'; inherits: true; initial-value: 176px; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; position: relative; --dock-h: 176px; transition: --dock-h .32s cubic-bezier(.4,0,.2,1); }

.chat-main.drag-active::after {
  content: 'Отпустите файл, чтобы прикрепить';
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  border: 2px dashed var(--accent-2); backdrop-filter: blur(2px);
  font-size: 15px; font-weight: 600; color: var(--accent-2);
}

.chat-topbar {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 5;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: all .15s ease; flex-shrink: 0;
}
.icon-btn:hover { background: var(--accent-grad); color: #fff; border-color: transparent; transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }

.topbar-title-wrap { min-width: 0; flex: 1; }
.topbar-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-badge {
  font-size: 11.5px; color: var(--text-muted); margin-top: 1px; display: flex; align-items: center; gap: 5px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-badge.no-profile { color: var(--warning); }
.topbar-badge .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: pulseDot 1.8s infinite ease-in-out; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.topbar-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.quick-select {
  padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); font-size: 12.5px; max-width: 150px; font-family: inherit; cursor: pointer;
}

.chat-messages {
  flex: 1; overflow-y: auto; padding: 28px clamp(12px, 8vw, 220px) 20px;
  display: flex; flex-direction: column; gap: 18px; align-items: stretch;
  /* v57: scroll-behavior:smooth убран — на длинных чатах CSS-анимация мешала
   * автоскроллу стрима (scrollToBottom «отлипал» от растущего ответа) */
}

/* v47: пузыри сообщений растягиваются на всю ширину поля чата */
.message-row {
  display: flex; gap: 12px; width: 100%; max-width: 100%;
  animation: msgIn .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.message-row.user-row { flex-direction: row-reverse; align-self: flex-end; }
.message-row.bot-row { align-self: flex-start; }

.avatar {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
  background: var(--accent-grad); margin-top: 2px;
}
.avatar.bot-avatar { background: var(--accent-grad); color: #fff; border: none; }

.message {
  flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0;
  padding: 13px 17px; border-radius: var(--radius-md); line-height: 1.6;
  position: relative; word-wrap: break-word; overflow-wrap: break-word; font-size: var(--msg-font-size);
}
.user-message { background: var(--user-bubble); color: var(--user-text); border-bottom-right-radius: 4px; box-shadow: 0 6px 20px var(--accent-glow); }
.bot-message { background: var(--bot-bubble); border: 1px solid var(--border); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.message-error { border-color: var(--error); }

.message-content > *:first-child { margin-top: 0; }
.message-content > *:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { margin: 6px 0 6px 20px; }
.message-content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.inline-code { font-family: 'JetBrains Mono', monospace; background: rgba(127,127,127,0.16); padding: 1.5px 6px; border-radius: 5px; font-size: 0.9em; }
/* v48: математика KaTeX — выключные формулы с горизонтальной прокруткой, фолбэк без библиотеки */
.message-content .katex-display { overflow-x: auto; overflow-y: hidden; padding: 3px 2px; margin: 8px 0; }
.message-content .katex { font-size: 1.08em; }
.message-content .math-fallback-display { font-family: 'JetBrains Mono', monospace; background: rgba(127,127,127,0.1); border-radius: 8px; padding: 8px 12px; margin: 8px 0; overflow-x: auto; white-space: pre; }
.message-content code.math-fallback { white-space: nowrap; }
/* v37: markdown-таблицы в ответах */
.md-table-wrap { overflow-x: auto; max-width: 100%; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); -webkit-overflow-scrolling: touch; }
.md-table { border-collapse: collapse; width: 100%; font-size: 0.92em; line-height: 1.45; }
.md-table th, .md-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.md-table th:last-child, .md-table td:last-child { border-right: none; }
.md-table tbody tr:last-child td { border-bottom: none; }
.md-table thead th { background: var(--accent-soft); font-weight: 600; white-space: nowrap; }
.md-table tbody tr:nth-child(even) { background: rgba(127,127,127,0.06); }
.md-table tbody tr:hover { background: rgba(127,127,127,0.10); }
.md-ta-c { text-align: center !important; }
.md-ta-r { text-align: right !important; }
/* v37: заголовки и горизонтальная линия в ответах */
.md-heading { font-weight: 700; line-height: 1.3; margin: 14px 0 6px; }
.md-h2 { font-size: 1.22em; }
.md-h3 { font-size: 1.13em; }
.md-h4 { font-size: 1.05em; }
.md-h5 { font-size: 1em; color: var(--text-muted); }
.md-hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
/* v38: бета-баннер, заявки на доступ и статусы */
.beta-banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px solid var(--accent-glow); }
.beta-banner-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--accent-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 4px 12px var(--accent-glow); }
.beta-banner-text { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.beta-banner-btn { display: inline-flex; align-items: center; gap: 6px; margin: 7px 0 0; padding: 6px 13px; border: none; border-radius: 18px;
  background: var(--accent-grad); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.beta-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-glow); }
.apply-sent { padding: 14px 15px; border-radius: 12px; margin-bottom: 12px; text-align: center;
  background: rgba(18,184,134,0.10); border: 1px solid rgba(18,184,134,0.4); }
.apply-sent > i { font-size: 26px; color: var(--success); }
.apply-sent-title { font-weight: 700; margin: 6px 0 4px; color: var(--text); }
.apply-sent-text { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.pending-header { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; margin-bottom: 7px; color: var(--text); }
.pending-count-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--warning); color: #fff;
  font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.uac-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.uac-st-active { background: rgba(18,184,134,0.14); color: var(--success); }
.uac-st-soon { background: rgba(232,165,58,0.16); color: var(--warning); }
.uac-st-pending { background: rgba(109,94,252,0.14); color: var(--accent-1); }
.uac-st-rejected { background: rgba(107,113,120,0.15); color: var(--text-muted); }
.uac-st-blocked { background: rgba(239,68,68,0.13); color: var(--error); }
.uac-st-expired { background: rgba(239,68,68,0.13); color: var(--error); }
.uac-approve { background: rgba(18,184,134,0.12); color: var(--success); }
.uac-approve:hover { background: var(--success); color: #fff; }
.uac-reject { background: rgba(239,68,68,0.10); color: var(--error); }
.uac-reject:hover { background: var(--error); color: #fff; }
.uac-pending { border-color: var(--accent-1); box-shadow: 0 0 0 1px rgba(109,94,252,0.25); }
.uac-inactive { opacity: 0.72; }
.uac-note { font-size: 11.5px; color: var(--text-muted); font-style: italic; margin-top: 3px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* v63: читаемость строки метаданных поднята (0.6 → 0.72) — по просьбе
   пользователя: подпись модели и бейдж токенов должны быть хорошо видны
   под каждым ответом ИИ, а не «пропадать» в блеклой строке. */
.message-meta { font-size: 11px; opacity: 0.72; margin-top: 7px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-stop-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 8px;
  background: rgba(239,68,68,0.12); color: var(--error); border: 1px solid var(--error);
  border-radius: 20px; padding: 4px 12px; cursor: pointer; font-family: inherit;
}
.inline-stop-btn:hover { background: var(--error); color: #fff; }

.message-actions {
  position: absolute; top: -14px; right: 12px; display: none; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 3px; box-shadow: var(--shadow-sm);
}
.user-row .message-actions { right: auto; left: 12px; }
.message-row:hover .message-actions { display: flex; }
.message-action {
  width: 26px; height: 26px; border-radius: 7px; background: transparent; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: var(--text-muted); transition: all .12s ease;
}
.message-action:hover { background: var(--accent-grad); color: #fff; }

.followup-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.followup-chip {
  padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: 12px; cursor: pointer; color: var(--accent-2); transition: all .15s ease;
}
.followup-chip:hover { background: var(--accent-grad); color: #fff; border-color: transparent; }

/* v58: скелетоны вместо точек «печатает» — мерцающие строки повторяют форму
 * будущего текстового ответа (messageSkeletonHtml в 12-chat-core.js).
 * Цвета --sk-base/--sk-hi заданы в :root и .dark-theme, анимация отключается
 * автоматически при prefers-reduced-motion (блок ниже глушит все анимации). */
.msg-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; width: min(320px, 72vw); }
.sk-line {
  height: 11px; border-radius: 6px;
  background: linear-gradient(100deg, var(--sk-base) 40%, var(--sk-hi) 50%, var(--sk-base) 60%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.sk-line.w1 { width: 96%; } .sk-line.w2 { width: 82%; } .sk-line.w3 { width: 90%; } .sk-line.w4 { width: 46%; }
.sk-line.d1 { animation-delay: .12s; } .sk-line.d2 { animation-delay: .24s; } .sk-line.d3 { animation-delay: .36s; }
@keyframes skeletonShimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
/* v58: скелетон-заглушка на время генерации изображения */
.sk-image {
  width: min(280px, 72vw); aspect-ratio: 4 / 3; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--text-muted);
  background: linear-gradient(100deg, var(--sk-base) 40%, var(--sk-hi) 50%, var(--sk-base) 60%);
  background-size: 220% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.sk-image i { font-size: 26px; opacity: .65; }
.sk-image .sk-image-note { font-size: 12px; opacity: .75; }

.empty-state { margin: auto; text-align: center; color: var(--text-muted); max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; }
.empty-state .empty-icon {
  width: 64px; height: 64px; border-radius: 20px; background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; box-shadow: 0 12px 30px var(--accent-glow);
}
.empty-state h3 { color: var(--text); font-size: 19px; font-weight: 700; }
.empty-hint { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.empty-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.suggestion-chip {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: 12.5px; cursor: pointer; color: var(--text); transition: all .15s ease;
}
.suggestion-chip:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-1px); }

/* v47: overflow:clip вместо hidden — не создаёт контейнер прокрутки, sticky внутри работает.
 * Шапка код-блока «липнет» к верху чата, пока блок на экране — кнопки «Копировать/Скачать» видны даже в конце длинного кода. */
.code-block { margin: 12px 0; border-radius: 12px; overflow: hidden; overflow: clip; border: 1px solid rgba(255,255,255,0.08); }
.code-block-header {
  display: flex; justify-content: space-between; align-items: center; background: #24252d; color: #b8bcc8;
  font-size: 12px; padding: 8px 13px; font-family: 'JetBrains Mono', monospace;
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 1px 0 rgba(255,255,255,0.07), 0 10px 18px -12px rgba(0,0,0,0.7);
}
.code-block-actions { display: flex; gap: 6px; }
.code-copy-btn {
  background: transparent; border: 1px solid #454857; color: #d5d8e0; border-radius: 6px; padding: 3px 10px;
  font-size: 11.5px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit;
}
.code-copy-btn:hover { background: #3a3d4a; }
.code-block pre { background: var(--code-bg); color: var(--code-text); padding: 14px 16px; overflow-x: auto; margin: 0; }
.code-block code { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; line-height: 1.55; }
.code-block pre code.hljs { background: transparent !important; padding: 0 !important; }

.chat-input-dock { flex-shrink: 0; padding: 14px clamp(12px, 8vw, 220px) 20px; background: linear-gradient(to top, var(--bg) 55%, transparent); }
.chat-input-shell {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-md);
  padding: 10px 10px 10px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-input-shell:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); }

.chat-input-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-input {
  flex: 1; border: none; background: transparent; color: var(--text); font-size: 15.5px; outline: none;
  resize: none; max-height: 220px; font-family: inherit; line-height: 1.5; padding: 8px 0;
}
.chat-input::placeholder { color: var(--text-muted); }

.input-actions { display: flex; gap: 5px; flex-shrink: 0; padding-bottom: 2px; }
.input-action-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s ease; flex-shrink: 0;
}
.input-action-btn:hover { background: var(--accent-soft); color: var(--accent-2); }
.input-action-btn.soon { opacity: 0.4; cursor: help; }
.input-action-btn.soon:hover { background: transparent; color: var(--text-muted); }

.send-button {
  width: 40px; height: 40px; flex-shrink: 0; background: var(--accent-grad); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, box-shadow .15s ease; box-shadow: 0 6px 16px var(--accent-glow);
}
.send-button:hover { transform: scale(1.06); }
.send-button:active { transform: scale(0.92); }
.send-button.btn-stop { background: var(--error); box-shadow: 0 6px 16px rgba(239,68,68,0.35); animation: stopPulse 1.4s infinite; }
@keyframes stopPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4);} 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.send-button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.input-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 8px; padding: 0 6px; }
.context-indicator {
  display: flex; align-items: center; gap: 8px; padding: 0 6px; margin-top: 8px; font-size: 11px; color: var(--text-muted);
}
.context-bar-track { flex: 1; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; max-width: 140px; }
.context-bar-fill { height: 100%; background: var(--accent-grad); border-radius: 4px; transition: width .3s ease; }
.context-indicator.context-warning .context-bar-fill { background: var(--warning); }
.context-indicator.context-danger .context-bar-fill { background: var(--error); }
.context-bar-label { white-space: nowrap; }

.usage-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding: 0 6px; }
.usage-chip { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.usage-chip .usage-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.usage-chip b { color: var(--text); font-family: 'JetBrains Mono', monospace; }

.message-image-wrap { display: flex; flex-direction: column; gap: 7px; }
.message-image-wrap img { max-width: 100%; border-radius: 12px; display: block; }
.message-image-prompt { font-size: 11.5px; opacity: 0.75; font-style: italic; }
/* ===== v44: видео в чате ===== */
.message-video-wrap { display: flex; flex-direction: column; gap: 7px; }
.message-video-wrap video { max-width: 100%; max-height: 420px; border-radius: 12px; display: block; background: #000; }
.message-video-prompt { font-size: 11.5px; opacity: 0.75; font-style: italic; }
.video-pending { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text-muted); }
.video-pending i { font-size: 20px; animation: videoPulse 1.6s ease-in-out infinite; }
.video-progress-text { font-size: 12.5px; }
@keyframes videoPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.overlay {
  position: fixed; inset: 0; background: rgba(10,10,20,0.45); backdrop-filter: blur(2px);
  z-index: 999; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.overlay.active { opacity: 1; pointer-events: auto; }

.settings-panel {
  position: fixed; top: 0; right: 0; width: 400px; max-width: 94vw; height: 100dvh;
  background: var(--bg-elevated); box-shadow: var(--shadow-md); transform: translateX(100%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1); z-index: 1000; display: flex; flex-direction: column;
}
.settings-panel.active { transform: translateX(0); }

.settings-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.settings-panel-header h2 { font-size: 17px; font-weight: 700; }
.panel-close-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--bg-sunken);
  color: var(--text); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.panel-close-btn:hover { background: var(--accent-grad); color: #fff; }

.settings-body { overflow-y: auto; padding: 20px 22px; flex: 1; }
.settings-section { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.settings-section:last-child { border-bottom: none; }
.settings-section h3 {
  margin-bottom: 15px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
.settings-section h3 i { color: var(--accent-2); }

.theme-toggle { display: flex; gap: 8px; margin-bottom: 6px; }
/* v47: режимы лимита ответа — перенос строк, чтобы три кнопки влезали в панель настроек */
#limitModeToggle { flex-wrap: wrap; }
.theme-btn, .size-btn {
  flex: 1; padding: 10px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-family: inherit; transition: all .15s ease;
}
.theme-btn:hover, .size-btn:hover { border-color: var(--accent-2); }
.theme-btn.active, .size-btn.active { background: var(--accent-grad); color: #fff; border-color: transparent; }

.setting-group { margin-bottom: 14px; }
.setting-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.setting-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.field-input, select.field-input, textarea.field-input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-sunken); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.field-input:focus { outline: none; border-color: var(--accent-2); }
textarea.field-input { resize: vertical; min-height: 64px; }

.key-field-row { display: flex; gap: 6px; }
.key-field-row .field-input { flex: 1; }
.icon-btn-sm {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-sunken); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.icon-btn-sm:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* v54: «глазок» показа пароля внутри поля */
.pw-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.pw-wrap .field-input { width: 100%; flex: 1; padding-right: 36px; }
.pw-eye-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; background: transparent; border-radius: 8px;
  color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 13px; padding: 0; line-height: 1; z-index: 2;
}
.pw-eye-btn:hover { color: var(--accent-2); background: var(--accent-soft); }
.pw-eye-btn .fa-eye-slash { color: var(--accent-2); }

.form-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn {
  padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer; font-size: 13.5px;
  display: flex; align-items: center; gap: 6px; font-family: inherit; transition: all .15s ease;
}
.btn-primary { background: var(--accent-grad); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--bg-sunken); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent-2); color: var(--accent-2); }
.btn-danger { background: transparent; color: var(--error); border: 1px solid var(--error); }
.btn-danger:hover { background: var(--error); color: #fff; }
.btn-block { width: 100%; justify-content: center; }
.hidden { display: none !important; }

/* v39: предупреждение при первой загрузке файлов в чате */
.attach-warn-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(10, 11, 16, 0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.attach-warn-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; max-width: 430px; width: 100%; padding: 26px 24px 22px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.attach-warn-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: rgba(232, 165, 58, 0.15); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.attach-warn-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.attach-warn-text { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); text-align: left; margin: 0 0 18px; }

.profile-item, .history-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 13px; border-radius: 12px;
  margin-bottom: 7px; background: var(--bg-sunken); border: 1px solid var(--border);
}
.profile-item.active-profile, .history-item.active-session { border-color: var(--accent-2); background: var(--accent-soft); }
.profile-info, .history-item-text { min-width: 0; cursor: pointer; flex: 1; }
.profile-label, .history-item-title {
  font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px;
}
.profile-meta, .history-item-date { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.badge { font-size: 10px; font-weight: 700; background: var(--success); color: #fff; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.02em; }
.profile-actions, .history-item-actions { display: flex; gap: 5px; flex-shrink: 0; }
.history-item-action {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11.5px;
}
.history-item-action:hover { background: var(--accent-grad); color: #fff; border-color: transparent; }
.history-list, .profiles-list { max-height: 280px; overflow-y: auto; margin-bottom: 10px; }
.session-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 10px 10px 4px;
}

.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--accent-2); }
.slider-value { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; min-width: 32px; text-align: right; color: var(--text-muted); }

.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.switch { position: relative; display: inline-block; width: 44px; height: 25px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); transition: .2s; border-radius: 24px; }
.switch-slider::before { position: absolute; content: ''; height: 19px; width: 19px; left: 3px; bottom: 3px; background: #fff; transition: .2s; border-radius: 50%; }
.switch input:checked + .switch-slider { background: var(--accent-grad); }
.switch input:checked + .switch-slider::before { transform: translateX(19px); }

.security-note {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--text-muted);
  background: var(--accent-soft); padding: 12px 14px; border-radius: 12px; line-height: 1.5;
}
.security-note i { color: var(--accent-2); margin-top: 2px; }

.model-field-row { display: flex; gap: 6px; }
.model-field-row .field-input { flex: 1; }
.model-select-wrap { margin-top: 9px; }
.model-description-box {
  margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--text-muted);
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.model-description-box .badge-free, .model-description-box .badge-paid {
  font-size: 10px; padding: 2px 7px; border-radius: 8px; margin-right: 6px; text-transform: uppercase; color: #fff;
}
.model-description-box .badge-free { background: var(--success); }
.model-description-box .badge-paid { background: var(--text-muted); }

.provider-key-row { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; background: var(--bg-sunken); }
.provider-key-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

/* ===== Компактная карточка пользователя (панель админа) ===== */
.user-admin-card { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; background: var(--bg-sunken); }
.uac-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--accent-grad); text-transform: uppercase; }
.uac-info { flex: 1; min-width: 0; }
.uac-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; min-width: 0; }
.uac-nick { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uac-self { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); flex-shrink: 0; }
.uac-role { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); white-space: nowrap; flex-shrink: 0; }
.uac-role-admin { background: rgba(18,184,134,0.14); color: var(--success); }
.uac-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.uac-meta i { font-size: 11px; }
.uac-dot { opacity: .5; }
.uac-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.user-admin-card .icon-btn-sm { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; }
.uac-admin-lock { color: var(--text-muted); opacity: .6; font-size: 12.5px; }
@media (max-width: 480px) {
  .user-admin-card { gap: 8px; padding: 7px 8px; }
  .uac-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; }
  .uac-name { font-size: 13px; }
  .uac-meta { font-size: 11px; }
}

.server-key-pill {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 10.5px; padding: 2px 8px; border-radius: 10px;
  background: var(--success); color: #fff; font-weight: 600; white-space: nowrap;
}
.server-key-pill-local { background: var(--text-muted); }

.toast-container { position: fixed; bottom: 22px; right: 22px; z-index: 2000; display: flex; flex-direction: column; gap: 9px; }
.toast {
  display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-radius: 12px; background: var(--bg-elevated);
  color: var(--text); box-shadow: var(--shadow-md); border: 1px solid var(--border); font-size: 13.5px; max-width: 320px;
  opacity: 0; transform: translateY(12px) scale(.97); transition: all .3s cubic-bezier(.2,.9,.3,1);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { border-color: var(--success); } .toast-success i { color: var(--success); }
.toast-error { border-color: var(--error); } .toast-error i { color: var(--error); }
.toast-warning { border-color: var(--warning); } .toast-warning i { color: var(--warning); }
.toast-info i { color: var(--accent-2); }

/* Новое: кнопка действия внутри тоста (например, «Отменить» при удалении чата) */
.toast-action-btn {
  margin-left: 6px; background: transparent; border: 1px solid var(--border); color: var(--accent-2);
  border-radius: 8px; padding: 4px 11px; font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 600; flex-shrink: 0;
}
.toast-action-btn:hover { background: var(--accent-soft); border-color: var(--accent-2); }

/* Новое: плавающая кнопка «вниз» + счётчик новых сообщений */
.scroll-down-btn {
  position: absolute; right: clamp(20px, 6vw, 240px); bottom: calc(var(--dock-h, 176px) + 14px); z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--accent-2); cursor: pointer;
  box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 15px;
  opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .2s cubic-bezier(.2,.9,.3,1);
}
.scroll-down-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-down-btn:hover { background: var(--accent-grad); color: #fff; border-color: transparent; }
/* v47: кнопка «вверх» — над кнопкой «вниз» (v57: позиция от --dock-h) */
.scroll-up-btn { bottom: calc(var(--dock-h, 176px) + 68px); }
.scroll-down-count {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--error); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Новое: состояние записи голосового ввода */
.input-action-btn.listening { background: var(--error); color: #fff; animation: micPulse 1.4s infinite ease-out; }
@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  70% { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* v47: кастомный скроллбар в стиле сайта — заметный, с удобным хватом мышью */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(127,127,127,0.05); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(127,127,127,0.58), rgba(127,127,127,0.44));
  border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent-1); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: auto; scrollbar-color: rgba(127,127,127,0.5) rgba(127,127,127,0.05); }

.msg-search-bar {
  position: absolute; top: 12px; right: 20px; left: 20px; max-width: 480px; margin-left: auto; z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md);
  animation: msgIn .2s cubic-bezier(.2,.9,.3,1);
}
.msg-search-bar i.fa-magnifying-glass { color: var(--text-muted); font-size: 13px; flex-shrink: 0; margin-left: 4px; }
.msg-search-bar input {
  flex: 1; border: none; background: transparent; color: var(--text); font-size: 13.5px; outline: none; font-family: inherit; min-width: 0;
}
.msg-search-count { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
.msg-search-bar .icon-btn-sm { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; font-size: 11px; }
.msg-search-bar .icon-btn-sm:hover { background: var(--accent-soft); color: var(--accent-2); }
.message.search-match { box-shadow: 0 0 0 2px var(--accent-2); }
.message.search-current { box-shadow: 0 0 0 2px var(--accent-2), 0 0 20px rgba(74,146,255,0.35); }

.export-menu-wrap { position: relative; }
.export-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; z-index: 20;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md);
  animation: msgIn .18s cubic-bezier(.2,.9,.3,1);
}
.export-menu-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; border: none; background: transparent;
  color: var(--text); font-size: 13px; cursor: pointer; font-family: inherit; text-align: left; transition: background-color .12s ease;
}
.export-menu-item:hover { background: var(--accent-soft); color: var(--accent-2); }
.export-menu-item i { width: 16px; text-align: center; color: var(--text-muted); }
.export-menu-item:hover i { color: var(--accent-2); }

.pending-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 10px; }
.pending-attachment { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.pending-attachment img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v40: чипы файловых вложений (не картинки) */
.pending-attachment.file-chip { width: auto; max-width: 250px; height: auto; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 7px 28px 7px 11px; border-radius: 12px; background: var(--bg-elevated); overflow: visible; }
.pending-attachment.file-chip > i.fa-solid { font-size: 17px; color: var(--accent-2); flex: 0 0 auto; }
.pending-attachment.file-chip.binary > i.fa-solid { color: var(--warning); }
.pending-attachment.file-chip .fc-info { min-width: 0; }
.pending-attachment.file-chip .fc-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pending-attachment.file-chip .fc-sub { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pending-attachment.file-chip.binary .fc-name { color: var(--warning); }
/* v40: чипы файлов в отправленном сообщении */
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.msg-file-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 10px; background: rgba(127,127,127,.14); border: 1px solid var(--border); max-width: 100%; }
.msg-file-chip i.fa-solid { color: var(--accent-2); }
.msg-file-chip.binary i.fa-solid { color: var(--warning); }
.msg-file-chip .fc-size { opacity: .6; font-size: 10.5px; font-weight: 500; }
/* v40: плашка «запрошен сброс пароля» в карточке пользователя */
.uac-reset-req { color: var(--warning); font-weight: 700; white-space: nowrap; }
.uac-reset-req i.fa-solid { animation: none; }
.pending-attachment-remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1;
}
.pending-attachment-remove:hover { background: var(--error); }

.message-image-wrap .attached-images { display: flex; flex-wrap: wrap; gap: 8px; }
.message-image-wrap .attached-images img { max-width: 200px; max-height: 200px; border-radius: 12px; object-fit: cover; display: block; }

/* ===== Новое: разделители дат в ленте ===== */
.date-separator {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 2px;
  user-select: none; pointer-events: none;
}
.date-separator::before, .date-separator::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.date-separator span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 12px; white-space: nowrap;
}

/* ===== Новое: бейджи модели и токенов на сообщениях ===== */
.msg-badges { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.msg-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; line-height: 1;
  color: var(--text-muted); background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px 8px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
.msg-badge i { font-size: 9px; opacity: 0.8; }
/* v63: разбивка токенов вход/выход внутри бейджа (↑вход / ↓выход);
 * вход — чуть приглушён, выход — жирнее: сразу видно, сколько «наслушали»
 * и сколько сгенерировано */
.msg-badge .tok-in { font-weight: 650; opacity: .82; }
.msg-badge .tok-out { font-weight: 700; }
.msg-badge .tok-in + .tok-out { margin-left: 5px; }
.user-message .msg-badge { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.75); }

/* ===== Новое: активная кнопка веб-поиска ===== */
.input-action-btn.active { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: 0 2px 10px var(--accent-glow); }

/* v59: улучшитель промтов — идёт запрос, кнопка занята (иконка крутится через fa-spin) */
.input-action-btn.improving { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: 0 2px 10px var(--accent-glow); cursor: progress; }
.input-action-btn.improving i { animation: fa-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .input-action-btn.improving i { animation: none; opacity: 0.7; } }

/* ===== Новое: статистика расходов в настройках ===== */
.usage-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.usage-stat-cell {
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; display: flex; flex-direction: column; gap: 3px;
}
.usage-stat-cell .usage-stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.usage-stat-cell .usage-stat-value { font-size: 15px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.usage-stat-cell .usage-stat-sub { font-size: 11px; color: var(--text-muted); }
.usage-budget-track { height: 7px; border-radius: 6px; background: var(--bg-sunken); border: 1px solid var(--border); overflow: hidden; margin: 10px 0 4px; }
.usage-budget-fill { height: 100%; border-radius: 6px; background: var(--accent-grad); transition: width .3s ease; }
.usage-budget-fill.warn { background: var(--warning); }
.usage-budget-fill.over { background: var(--error); }
.usage-models { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.usage-model-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); }
.usage-model-row b { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-model-row .usage-model-cost { color: var(--text); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }

/* ===== v54: тарифы и пакеты токенов ===== */
.billing-test-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; margin-bottom: 12px;
  background: rgba(232, 165, 58, 0.1); border: 1px solid rgba(232, 165, 58, 0.35);
}
.billing-test-banner-icon { color: var(--warning); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.billing-test-banner-text { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.billing-balance-card {
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px;
}
.billing-balance-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.billing-balance-value { font-size: 19px; font-weight: 800; font-family: 'JetBrains Mono', monospace; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.billing-balance-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.billing-balance-sub b { color: var(--text); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.billing-packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.billing-package-card {
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 3px;
}
.billing-package-card .bp-label { font-weight: 700; font-size: 13px; }
.billing-package-card .bp-tokens { font-family: 'JetBrains Mono', monospace; font-size: 14.5px; font-weight: 700; color: var(--accent-2); }
.billing-package-card .bp-price { font-size: 12px; color: var(--text-muted); }
.billing-package-card .bp-buy { margin-top: 6px; padding: 7px 10px; font-size: 12px; }
.billing-package-card .bp-buy:disabled { opacity: 0.55; cursor: not-allowed; }
.billing-purchases { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.billing-purchase-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-muted); }
.billing-purchase-row b { color: var(--text); font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ===== v54: админская статистика (Пользователи + Контроль расходов) ===== */
.stats-period-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.stats-period-row .theme-btn { font-size: 11.5px; padding: 5px 10px; }
.stats-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.stats-table-wrap { overflow-x: auto; margin: 6px 0 12px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.stats-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 7px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.stats-table td { padding: 5px 7px; border-bottom: 1px solid var(--border); font-family: 'JetBrains Mono', monospace; font-size: 11px; white-space: nowrap; }
.stats-table td.stats-name { font-family: inherit; font-size: 11.5px; }
.stats-table th.stats-ta-r, .stats-table td.stats-ta-r { text-align: right; }
.stats-block-title { font-size: 12px; font-weight: 700; margin: 10px 0 2px; display: flex; align-items: center; gap: 6px; }
.stats-block-hint { font-size: 11px; color: var(--text-muted); margin: 0 0 4px; }
.peak-hours { display: flex; align-items: flex-end; gap: 2px; height: 74px; padding: 4px 0 0; margin-bottom: 4px; }
.peak-hour-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; height: 100%; position: relative; }
.peak-hour-bar { width: 100%; border-radius: 2px 2px 0 0; background: var(--accent-2); min-height: 1px; opacity: 0.85; }
.peak-hour-bar.peak-max { background: var(--accent-1); opacity: 1; box-shadow: 0 0 6px rgba(109,94,252,0.5); }
.peak-hour-bar.visit-bar { background: rgba(18, 184, 134, 0.55); }
.peak-hour-labels { display: flex; gap: 2px; }
.peak-hour-labels span { flex: 1; text-align: center; font-size: 8.5px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.stats-inline-list { display: flex; flex-direction: column; gap: 3px; }
.stats-inline-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-muted); }
.stats-inline-row b { color: var(--text); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.uac-balance { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; border-radius: 12px; padding: 2px 8px; background: var(--accent-soft); color: var(--accent-2); font-family: 'JetBrains Mono', monospace; }
.uac-balance.negative { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.uac-token-btn { font-size: 10px; padding: 2px 7px; border-radius: 8px; border: 1px dashed var(--accent-2); background: transparent; color: var(--accent-2); cursor: pointer; }
.uac-token-btn:hover { background: var(--accent-soft); }

/* ===== Новое: бейдж роли пользователя ===== */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  border-radius: 12px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-2); border: 1px solid transparent;
}
.role-badge.role-admin { background: rgba(18,184,134,0.14); color: var(--success); }

/* ===== Новое: мобильные улучшения ===== */
.input-action-btn, .icon-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.chat-messages { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 850; background: rgba(10,10,18,0.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }

@media (hover: none) and (pointer: coarse) {
  /* v57: display:flex — раньше кнопки «Копировать/Регенерировать/Озвучить» на тач-экранах
   * не показывались вовсе (hover не наступает): opacity:1 не помогал при display:none */
  .message-actions { display: flex; opacity: 1; }
  .input-action-btn { width: 40px; height: 40px; }
  .send-button { width: 44px; height: 44px; }
}

@media (max-width: 860px) {
  .usage-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .message-actions { display: flex; opacity: 1; } /* v57: тач-фикс, см. блок (hover:none) */
  .msg-badge { font-size: 9px; padding: 2px 6px; }
  .date-separator { margin-top: 6px; }
  .scroll-down-btn { right: 14px; } /* v57: bottom теперь от --dock-h */
}

@media (max-width: 480px) {
  .usage-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .usage-stat-cell { padding: 7px 8px; }
  .usage-stat-cell .usage-stat-value { font-size: 13px; }
  .form-actions .btn { padding: 10px 12px; }
  .chat-input { font-size: 16px; }
  .role-badge { display: none; }
}

/* Мобильный фикс (v57: ужат до ~112px ≈ 3 строки): поле ввода не разрастается
 * на пол-экрана, длинный текст скроллится внутри самого поля */
@media (max-width: 640px) {
  .chat-input { max-height: 112px; }
  /* v57: статистика токенов — одна прокручиваемая строка, а не несколько рядов чипов */
  .usage-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .usage-bar::-webkit-scrollbar { display: none; }
  .usage-chip { flex-shrink: 0; }
}

/* v42: мобильный фикс «мёртвого» поля ввода.
 * Раньше 6 кнопок (flex-shrink:0, на тач-экранах 40px) сжимали textarea
 * до нулевой ширины — тапы не попадали в поле, курсор не появлялся.
 * Теперь textarea — отдельная строка на всю ширину, кнопки + отправка ниже. */
@media (max-width: 640px) {
  .chat-input-row { flex-wrap: wrap; gap: 8px 10px; }
  .chat-input { order: -1; flex: 1 1 100%; min-width: 0; font-size: 16px; }
  .input-actions {
    order: 0; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .input-actions::-webkit-scrollbar { display: none; }
  .send-button { order: 1; flex-shrink: 0; margin-left: auto; }
  /* Подсказка про Enter бессмысленна на сенсорном экране — экономим место */
  .input-meta { display: none; }
  /* 16px у всех полей: iOS не автозумит страницу при фокусе (maximum-scale убран ради доступности) */
  .field-input, select.field-input, textarea.field-input,
  .sidebar-search input, .msg-search-bar input { font-size: 16px; }
}

/* ===== v55: панель параметров генерации видео ===== */
.chat-input-dock { position: relative; }
.gen-video-panel {
  position: absolute; right: 10px; bottom: calc(100% - 6px);
  width: min(432px, calc(100vw - 24px));
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); z-index: 870; overflow: hidden;
  animation: gvpIn .16s ease;
}
@keyframes gvpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gvp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--border); }
.gvp-close { background: none; border: none; cursor: pointer; color: inherit; font-size: 15px; padding: 4px 6px; }
.gvp-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; max-height: min(58dvh, 460px); overflow: auto; }
.gvp-row { display: flex; flex-direction: column; gap: 5px; }
.gvp-label { font-size: 12px; color: var(--text-muted); }
.gvp-select { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elevated); color: inherit; font: inherit; }
.gvp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gvp-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 13px; }
.gvp-chip.active { background: var(--accent-1, #6d5efc); border-color: var(--accent-1, #6d5efc); color: #fff; }
.gvp-note { font-size: 12px; color: var(--text-muted); }
.gvp-price { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14px; padding: 8px 10px; border-radius: 9px; background: var(--bg-sunken); }
.gvp-price-trial { color: var(--success); font-weight: 700; }
.gvp-price-sub { font-size: 12px; color: var(--text-muted); }
.gvp-balance { width: 100%; font-size: 12px; color: var(--text-muted); }
.gvp-go { width: 100%; }
.gvp-hint { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
/* v55: мобильная адаптация — панель становится нижним листом над композером */
@media (max-width: 640px) {
  .gen-video-panel { position: fixed; left: 8px; right: 8px; bottom: 96px; width: auto; z-index: 940; }
  .gvp-body { max-height: calc(70dvh - 54px); }
  .gvp-chip { padding: 7px 13px; } /* комфортные тач-цели */
}

@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; height: 100dvh; z-index: 900; box-shadow: var(--shadow-md); width: min(288px, 84vw); }
  .sidebar.collapsed { margin-left: -84vw; }
  .chat-messages { padding-left: 12px; padding-right: 12px; }
  .chat-input-dock { padding-left: 10px; padding-right: 10px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .message { max-width: 100%; }
  .quick-select { max-width: 96px; }
  .msg-search-bar { left: 12px; right: 12px; max-width: none; }
}

@media (max-width: 480px) {
  .chat-topbar { padding: 0 10px; gap: 8px; }
  /* v42: ужимаем контролы топбара, чтобы заголовок чата не сжимался до вертикальных букв */
  .topbar-controls { gap: 4px; }
  .icon-btn { width: 36px; height: 36px; }
  .quick-select { max-width: 82px; padding: 7px 6px; }
  /* «Копировать диалог» на телефоне прячем — редко нужен, освобождает место заголовку */
  #copyChatBtn { display: none; }
  #imageProfileQuickSelect { display: none; }
  .chat-messages { padding-top: 16px; gap: 14px; }
  .message { max-width: 100%; padding: 11px 14px; }
  .avatar { width: 28px; height: 28px; }
  .export-menu { right: -8px; min-width: 170px; }
  .settings-panel { width: 100vw; max-width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
 * v57: СКРЫВАНИЕ ПОЛЯ ВВОДА ПРИ СКРОЛЛЕ (мобильные)
 * Обёртка .chat-input-wrap — одна grid-строка, анимация 1fr→0fr
 * плавно сворачивает док ввода, освобождая экран под текст ответа ИИ.
 * ============================================================ */
.chat-input-wrap {
  position: relative; flex-shrink: 0;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1);
}
.chat-input-wrap.dock-collapsed { grid-template-rows: 0fr; }
.chat-input-wrap .chat-input-dock {
  min-height: 0; overflow: hidden;
  transition: opacity .22s ease, padding .32s cubic-bezier(.4,0,.2,1);
}
.chat-input-wrap.dock-collapsed .chat-input-dock { opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }

/* Кнопка-возврат: маленькая пилюля по центру низа, видна только когда док свёрнут */
.dock-restore-btn {
  position: absolute; left: 50%; bottom: 12px; z-index: 60;
  transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--accent-2); font-size: 14.5px; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .28s ease, background-color .15s ease, color .15s ease;
}
.dock-restore-btn.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dock-restore-btn:hover { background: var(--accent-grad); color: #fff; border-color: transparent; }
.dock-restore-btn:active { transform: translateX(-50%) scale(0.95); }
@media (min-width: 861px) { .dock-restore-btn { display: none; } } /* фича только для узких экранов */

/* ============================================================
 * v57: ЦВЕТОВЫЕ ПАЛИТРЫ (Настройки → Оформление)
 * html[data-accent="..."] переопределяет акценты; тёмная тема —
 * каскадом через body.dark-theme.
 * ============================================================ */
html[data-accent="emerald"] {
  --accent-1: #0e9f6e; --accent-2: #0b8a8f;
  --accent-grad: linear-gradient(135deg, #0e9f6e, #0b8a8f);
  --accent-soft: rgba(14, 159, 110, 0.13);
  --accent-glow: rgba(14, 159, 110, 0.30);
  --user-bubble: linear-gradient(135deg, #0e9f6e, #0b8a8f); --user-text: #ffffff;
}
html[data-accent="emerald"] .dark-theme {
  --accent-1: #2bd4a3; --accent-2: #2cb2c9;
  --accent-soft: rgba(43, 212, 163, 0.15);
  --accent-glow: rgba(43, 212, 163, 0.26);
  --user-bubble: linear-gradient(135deg, #1fae82, #1f97ad);
}
html[data-accent="sunset"] {
  --accent-1: #ef5d2f; --accent-2: #e8961e;
  --accent-grad: linear-gradient(135deg, #ef5d2f, #e8961e);
  --accent-soft: rgba(239, 93, 47, 0.12);
  --accent-glow: rgba(239, 93, 47, 0.30);
  --user-bubble: linear-gradient(135deg, #ef5d2f, #e8961e); --user-text: #ffffff;
}
html[data-accent="sunset"] .dark-theme {
  --accent-1: #ff7a4d; --accent-2: #ffb056;
  --accent-soft: rgba(255, 122, 77, 0.15);
  --accent-glow: rgba(255, 122, 77, 0.26);
  --user-bubble: linear-gradient(135deg, #e05e33, #d98d24);
}
html[data-accent="graphite"] {
  --accent-1: #4b535c; --accent-2: #777f89;
  --accent-grad: linear-gradient(135deg, #3f474f, #6c757f);
  --accent-soft: rgba(75, 83, 92, 0.12);
  --accent-glow: rgba(75, 83, 92, 0.30);
  --user-bubble: linear-gradient(135deg, #3f474f, #6c757f); --user-text: #ffffff;
}
html[data-accent="graphite"] .dark-theme {
  --accent-1: #a9b2bc; --accent-2: #ccd3da;
  --accent-soft: rgba(169, 178, 188, 0.14);
  --accent-glow: rgba(169, 178, 188, 0.22);
  --user-bubble: linear-gradient(135deg, #99a2ac, #c3cad1);
}

/* Чипы выбора палитры в настройках */
.accent-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.accent-chip {
  flex: 1 1 auto; min-width: 96px; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s ease;
}
.accent-chip:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.accent-chip.active { border-color: var(--accent-2); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-2); }
.accent-swatch { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.swatch-storm { background: linear-gradient(135deg, #6d5efc, #2f7bfa); }
.swatch-emerald { background: linear-gradient(135deg, #0e9f6e, #0b8a8f); }
.swatch-sunset { background: linear-gradient(135deg, #ef5d2f, #e8961e); }
.swatch-graphite { background: linear-gradient(135deg, #3f474f, #6c757f); }

/* ============================================================
 * v57: ФОН ОБЛАСТИ ЧАТА (Настройки → Оформление)
 * ============================================================ */
/* ===== v60: анимированные фоны чата =====
 * Слои: #chatBgFx внутри .chat-main (под сообщениями) — canvas для
 * «Созвездия» и «Звёзд» (js/21-chat-bg.js), CSS-блобы для «Сияния».
 * Мягкость блобов — радиальные градиенты до прозрачного, без blur-фильтра
 * (дёшево для композитора). Трансформы анимируются на GPU (will-change). */
html[data-chatbg] .chat-messages { position: relative; z-index: 1; background-image: none; }
#chatBgFx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#chatBgFx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#chatBgFx .bg-blob { position: absolute; border-radius: 50%; opacity: .2; will-change: transform; }
html[data-chatbg="aurora"] #chatBgFx canvas { display: none; }
html:not([data-chatbg="aurora"]) #chatBgFx .bg-blob { display: none; }
.bg-blob-1 { width: 65vmax; height: 44vmax; left: -18vmax; top: -16vmax; background: radial-gradient(closest-side, var(--accent-2), transparent 72%); animation: bgAurora1 37s ease-in-out infinite alternate; }
.bg-blob-2 { width: 58vmax; height: 42vmax; right: -20vmax; top: -8vmax; background: radial-gradient(closest-side, var(--accent), transparent 74%); animation: bgAurora2 46s ease-in-out infinite alternate; }
.bg-blob-3 { width: 70vmax; height: 48vmax; left: 10vw; bottom: -32vmax; background: radial-gradient(closest-side, var(--accent-2), transparent 72%); animation: bgAurora3 53s ease-in-out infinite alternate; opacity: .15; }
@keyframes bgAurora1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14vw, 9vh, 0) scale(1.18); } }
@keyframes bgAurora2 { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-12vw, 15vh, 0) scale(.94); } }
@keyframes bgAurora3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-10vw, -8vh, 0) scale(1.15); } }
.dark-theme #chatBgFx .bg-blob { opacity: .27; }
@media (prefers-reduced-motion: reduce) { #chatBgFx .bg-blob { animation: none; } }

/* ===== Аккордеон панели настроек ===== */
.settings-section > h3 {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
}
.settings-section > h3 .acc-chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: .55;
  transition: transform .18s ease;
}
.settings-section.collapsed > h3 .acc-chevron { transform: rotate(-90deg); }
.settings-section.collapsed > *:not(h3) { display: none !important; }

/* ===== Безопасность ПДн: компактные категории и чипы ===== */
.pii-cats { margin: 2px 0 10px; }
.pii-cats summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: .9;
  padding: 6px 0;
}
.pii-cats summary::-webkit-details-marker { display: none; }
.pii-cats summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 10px;
  opacity: .55;
  transition: transform .18s ease;
}
.pii-cats[open] summary::after { transform: rotate(180deg); }
.pii-cats-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .14);
  color: #a78bfa;
}
.pii-cats[open] .pii-cats-count { margin-left: 0; }
.pii-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 4px 14px;
  padding: 8px 2px 2px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}
.pii-cats-grid .toggle-row { margin: 0; }
.pii-cats-grid .setting-label { font-size: 12.5px; }
.pii-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pii-chips:empty { margin: 0; }
.pii-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: rgba(139, 92, 246, .12);
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 999px;
  padding: 3px 6px 3px 11px;
  font-size: 12px;
}
.pii-chip .pii-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.pii-chip button {
  background: none;
  border: none;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1;
}
.pii-chip button:hover { opacity: 1; }
.pii-empty-hint { font-size: 12px; opacity: .55; }

/* ============================================================
 * v61: КНОПКА-КАРТОЧКА «ЛИЧНЫЙ КАБИНЕТ» в панели настроек
 * ============================================================ */
.cabinet-link-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; margin-bottom: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 14px; cursor: pointer; text-align: left;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  font: inherit; color: inherit; text-decoration: none;
}
.cabinet-link-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 16%, transparent); }
.cabinet-link-card:active { transform: translateY(0); }
.cabinet-link-card .cl-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 34%, transparent);
}
.cabinet-link-card .cl-text { flex: 1; min-width: 0; }
.cabinet-link-card .cl-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabinet-link-card .cl-title { font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.cabinet-link-card .cl-sub { font-size: 12px; opacity: .68; margin-top: 2px; line-height: 1.35; }
.cabinet-link-card .cl-arrow { flex: 0 0 auto; opacity: .55; font-size: 13px; transition: transform .18s ease, opacity .18s ease; }
.cabinet-link-card:hover .cl-arrow { transform: translateX(3px); opacity: .9; }

/* v62: индикатор-лампочка входа на карточке «Личный кабинет»:
 * зелёная пульсирующая — вход выполнен, красная — нет */
.cabinet-link-card .cl-light {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
  max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.cabinet-link-card .cl-light .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cabinet-link-card .cl-light.on { color: #0c8f6c; background: rgba(43, 212, 163, .16); }
.cabinet-link-card .cl-light.on .dot { background: #2bd4a3; box-shadow: 0 0 9px rgba(43, 212, 163, .95); animation: clPulse 2.2s ease-in-out infinite; }
.cabinet-link-card .cl-light.off { color: #c0392b; background: rgba(255, 93, 93, .13); }
.cabinet-link-card .cl-light.off .dot { background: #ff5d5d; box-shadow: 0 0 9px rgba(255, 93, 93, .85); }
.dark-theme .cabinet-link-card .cl-light.on { color: #4fe3b5; }
.dark-theme .cabinet-link-card .cl-light.off { color: #ff8f8f; }
@keyframes clPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cabinet-link-card .cl-light .dot { animation: none; } }

/* ============================================================
 * v61: ЧАТ-ПОТОК — подпись модели под каждым ответом ИИ
 * ============================================================ */
.msg-model-sig {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 650; font-size: 12.5px; letter-spacing: .01em;
  color: var(--text); vertical-align: middle; margin-right: 8px;
}
.msg-model-sig .sig-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sig-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-color, var(--accent)) 22%, transparent);
}
.msg-model-sig .sig-via { opacity: .55; font-weight: 500; }
.message-error .msg-model-sig { opacity: .6; }

/* ============================================================
 * v62: СТРАНИЦА «ЛИЧНЫЙ КАБИНЕТ» (cabinet.html) — дашборд
 * с живым анимированным фоном как у главного окна чата
 * ============================================================ */
.cabinet-shell {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; background: var(--bg);
}
/* контент кабинета — над фоном (фон вставляет js/21-chat-bg.js) */
html[data-chatbg] .cabinet-body { position: relative; z-index: 1; }
.cabinet-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 12px clamp(14px, 3vw, 28px); padding-top: max(12px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.cabinet-topbar .cb-title { font-weight: 800; font-size: 16px; letter-spacing: .01em; flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.cabinet-topbar .cb-title .cl-icon {
  width: 30px; height: 30px; border-radius: 9px; font-size: 13px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.cabinet-theme-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  font-size: 14px; cursor: pointer; transition: border-color .16s ease, transform .16s ease;
}
.cabinet-theme-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
/* v62: статус синхронизации в топбаре — читаемее стандартного пилюли:
 * текст чуть ярче и жирнее (VLM-ревью тёмной темы отметило низкий контраст) */
.cabinet-topbar .sync-pill { color: var(--text); opacity: .88; font-weight: 600; padding-bottom: 0; }
.cabinet-back-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: border-color .16s ease, background .16s ease;
}
.cabinet-back-btn:hover { border-color: var(--accent); }
.cabinet-body {
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 20px clamp(14px, 3vw, 28px) 56px; flex: 1;
}

/* ---------- v62: hero-карточка аккаунта ---------- */
.cabinet-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 22px; margin-bottom: 14px; border-radius: 18px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.cabinet-hero-avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--text-muted);
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.cabinet-hero-avatar.logged {
  color: #fff; font-weight: 800; font-size: 23px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cabinet-hero-info { flex: 1; min-width: 220px; }
.cabinet-hero-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabinet-hero-name { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.cabinet-role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--accent-2); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.cabinet-role-chip.admin { color: #b8860b; background: rgba(232, 165, 58, .14); border-color: rgba(232, 165, 58, .4); }
.dark-theme .cabinet-role-chip.admin { color: #f2c14e; }
.cabinet-hero-meta { font-size: 12.5px; opacity: .72; margin-top: 4px; line-height: 1.45; }
.cabinet-hero-bal { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cabinet-bal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
}
.cabinet-bal-chip i { color: var(--accent-2); font-size: 11px; }
.cabinet-bal-chip.muted { opacity: .65; font-weight: 500; }
.cabinet-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- v62: навигация-чипы по разделам ---------- */
.cabinet-nav {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cabinet-nav::-webkit-scrollbar { display: none; }
/* v62: градиент-подсказка «чипы прокручиваются» — включается классом
 * .scrollable из 22-cabinet.js, когда чипы не влезают (мобильные) */
.cabinet-nav .cabinet-nav-fade {
  position: absolute; right: 0; top: 0; bottom: 14px; width: 36px;
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.cabinet-nav.scrollable .cabinet-nav-fade { opacity: 1; }
.cabinet-nav { position: relative; }
.cabinet-nav-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
  font-family: inherit;
}
.cabinet-nav-chip i { font-size: 11px; opacity: .72; color: var(--accent-2); }
.cabinet-nav-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.cabinet-nav-chip.hidden { display: none; }

/* ---------- v62: сетка карточек-секций ---------- */
.cabinet-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1020px) { .cabinet-grid { grid-template-columns: 1fr 1fr; } }
.cabinet-grid .span-2 { grid-column: 1 / -1; }
.cabinet-body .settings-section {
  margin: 0; padding: 18px 18px 20px;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cabinet-body .settings-section.flash {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cabinet-body .settings-section > h3 {
  padding: 2px 0 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.cabinet-body .settings-section > h3 > i:first-child {
  color: var(--accent-2); font-size: 13px;
}

/* ---------- v62: футер кабинета ---------- */
.cabinet-footer {
  position: relative; z-index: 1; margin-top: auto;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px clamp(14px, 3vw, 28px); padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.cabinet-footer-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
}
.cabinet-footer-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.cabinet-footer-brand i { color: var(--accent-2); }

@media (max-width: 640px) {
  .cabinet-topbar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .cabinet-back-btn span { display: none; }
  .cabinet-back-btn { padding: 8px 10px; }
  .cabinet-body { padding: 14px 12px 40px; }
  /* v62: топбар узкий — заголовок компактнее, статус синхронизации с
   * многоточием вместо обрезки по краю экрана */
  .cabinet-topbar .cb-title { font-size: 14.5px; }
  .cabinet-topbar .cb-title .cl-icon { width: 26px; height: 26px; font-size: 12px; }
  .cabinet-topbar .sync-pill { min-width: 0; max-width: 112px; }
  .cabinet-topbar .sync-pill > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cabinet-hero { padding: 16px; gap: 12px; }
  .cabinet-hero-avatar { width: 46px; height: 46px; font-size: 16px; }
  .cabinet-hero-avatar.logged { font-size: 19px; }
  .cabinet-hero-name { font-size: 17px; }
  .cabinet-hero-actions { width: 100%; }
  .cabinet-hero-actions .btn { flex: 1; }
}