:root{
  --ai-bg:#f5f7fb;
  --ai-card:#ffffff;
  --ai-border:#e6e9f0;
  --ai-primary:#4f7cff;
  --ai-primary-dark:#3a63d8;
  --ai-sidebar:#0f172a;
  --ai-sidebar-hover:#1a2540;
  --ai-text:#1e293b;
  --ai-muted:#64748b;
  --ai-radius:12px;
}

*{box-sizing:border-box}
body.admin-body,body.chat-body{
  background:var(--ai-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ai-text);
  margin:0;
}

/* ---------- ADMIN LAYOUT ---------- */
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{
  width:260px;flex-shrink:0;background:var(--ai-sidebar);color:#e2e8f0;
  display:flex;flex-direction:column;padding:18px 0;
}
.admin-brand{
  display:flex;align-items:center;gap:10px;padding:0 22px 22px;
  font-weight:600;font-size:17px;color:#fff;
}
.admin-brand i{font-size:22px;color:var(--ai-primary)}
.admin-nav{display:flex;flex-direction:column;padding:0 10px;gap:4px;flex:1}
.admin-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:9px;
  color:#cbd5e1;text-decoration:none;transition:.15s;
  font-size:14px;
}
.admin-nav-item:hover{background:var(--ai-sidebar-hover);color:#fff}
.admin-nav-item.active{background:var(--ai-primary);color:#fff}
.admin-nav-item i{font-size:17px}
.admin-nav-item .badge{font-size:11px;background:rgba(255,255,255,.14) !important}
.admin-sidebar-footer{padding:14px 10px 0;border-top:1px solid rgba(255,255,255,.08)}

.admin-content{flex:1;min-width:0;padding:28px 32px;overflow-x:hidden}

.admin-page-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;gap:16px;flex-wrap:wrap;
}
.admin-page-head h1{font-size:22px;font-weight:700;margin:0 0 4px}

.admin-card{
  background:var(--ai-card);border:1px solid var(--ai-border);
  border-radius:var(--ai-radius);padding:18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.admin-card .card-head{
  font-weight:600;font-size:15px;margin:-18px -18px 16px;
  padding:14px 18px;border-bottom:1px solid var(--ai-border);
}

.admin-table{font-size:14px}
.admin-table th{
  background:#f8fafc;font-weight:600;color:var(--ai-muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--ai-border);
}
.admin-table td{border-color:var(--ai-border)}
.admin-table code{background:#f1f5f9;padding:2px 6px;border-radius:6px;font-size:12px}

.stat-card{
  background:var(--ai-card);border:1px solid var(--ai-border);
  border-radius:var(--ai-radius);padding:16px 18px;
}
.stat-label{font-size:12px;color:var(--ai-muted);text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:24px;font-weight:700;margin-top:6px}
.stat-sub{font-size:12px;color:var(--ai-muted);margin-top:4px}

/* ---------- CHAT ---------- */
.chat-layout{display:flex;height:100vh;overflow:hidden}
.chat-sidebar{
  width:300px;flex-shrink:0;background:#fff;
  border-right:1px solid var(--ai-border);
  display:flex;flex-direction:column;
}
.chat-sidebar-head{padding:16px;border-bottom:1px solid var(--ai-border)}
.chat-sidebar-body{flex:1;overflow-y:auto;padding:8px}
.chat-sidebar-foot{padding:12px;border-top:1px solid var(--ai-border);display:flex;gap:8px}

.chat-item{
  padding:10px 12px;border-radius:9px;cursor:pointer;margin-bottom:2px;
  transition:.12s;
}
.chat-item:hover{background:#f1f5f9}
.chat-item.active{background:#e7efff}
.chat-item .title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item .subtitle{font-size:12px;color:var(--ai-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--ai-bg)}
.chat-head{
  padding:12px 20px;border-bottom:1px solid var(--ai-border);background:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.chat-head .model-name{font-weight:600}
.chat-messages{flex:1;overflow-y:auto;padding:22px 20px;scroll-behavior:smooth}
.chat-composer{
  background:#fff;border-top:1px solid var(--ai-border);padding:12px 16px;
}

.msg{display:flex;gap:12px;margin-bottom:18px;max-width:900px;margin-left:auto;margin-right:auto}
.msg-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;
}
.msg-user .msg-avatar{background:var(--ai-primary);color:#fff}
.msg-ai .msg-avatar{background:#0f172a;color:#fff}
.msg-bubble{
  background:#fff;border:1px solid var(--ai-border);border-radius:14px;
  padding:12px 16px;flex:1;min-width:0;word-wrap:break-word;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.msg-user .msg-bubble{background:#eef4ff;border-color:#dbe7ff}
.msg-bubble pre{position:relative;border-radius:10px;margin:0}
.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble pre code{padding:14px;display:block;font-size:13px;line-height:1.55}
.msg-bubble :not(pre)>code{
  background:#f1f5f9;padding:2px 6px;border-radius:6px;font-size:13px;
}
.copy-btn{
  position:absolute;top:8px;right:8px;font-size:12px;padding:3px 9px;
  background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.1);
  border-radius:6px;cursor:pointer;transition:.12s;
}
.copy-btn:hover{background:rgba(255,255,255,.18)}
.msg-meta{font-size:12px;color:var(--ai-muted);margin-top:6px}

.composer-form{display:flex;gap:10px;align-items:flex-end;max-width:900px;margin:0 auto}
.composer-form textarea{
  flex:1;resize:none;min-height:44px;max-height:220px;
  border:1px solid var(--ai-border);border-radius:12px;
  padding:11px 14px;font-size:14px;
}
.composer-form textarea:focus{
  outline:none;border-color:var(--ai-primary);box-shadow:0 0 0 3px rgba(79,124,255,.12);
}

.attach-btn{
  width:44px;height:44px;border-radius:12px;background:#f1f5f9;border:1px solid var(--ai-border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s;
}
.attach-btn:hover{background:#e2e8f0}

.send-btn{
  min-width:44px;height:44px;border:none;border-radius:12px;
  background:var(--ai-primary);color:#fff;font-weight:600;padding:0 18px;
  cursor:pointer;transition:.12s;
}
.send-btn:hover{background:var(--ai-primary-dark)}
.send-btn:disabled{opacity:.6;cursor:not-allowed}

.load-prev-btn{
  display:block;margin:0 auto 16px;padding:7px 16px;border-radius:20px;
  background:#fff;border:1px solid var(--ai-border);color:var(--ai-muted);
  font-size:13px;cursor:pointer;transition:.12s;
}
.load-prev-btn:hover{background:#f1f5f9;color:var(--ai-text)}

@media (max-width:768px){
  .chat-sidebar{width:64px}
  .chat-sidebar .full{display:none}
  .admin-sidebar{width:64px}
  .admin-nav-item span,.admin-brand span{display:none}
}

.chat-stats-btn{
  background: #f1f5f9; border: 1px solid var(--ai-border);
  border-radius: 10px; padding: 6px 12px;
  font-size: 13px; color: var(--ai-text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: .12s;
}
.chat-stats-btn:hover{ background: #e2e8f0; }
.chat-stats-btn i{ color: var(--ai-primary); }

.catalog-json{
  background:#0f172a; color:#e2e8f0;
  border-radius:10px; padding:16px;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:12.5px; line-height:1.55;
  max-height:70vh; overflow:auto;
  white-space:pre; margin:0;
}

/* ---------- ТЕМЫ ЧАТА ---------- */
.chat-body.theme-light{
  --c-bg:#f5f7fb;
  --c-surface:#ffffff;
  --c-surface-2:#eef3fb;
  --c-border:#e6e9f0;
  --c-text:#1e293b;
  --c-muted:#64748b;
  --c-accent:#4f7cff;
  --c-user-bubble:#dbe7ff;
  --c-ai-bubble:#ffffff;
  --c-code-bg:#0f172a;
}

.chat-body.theme-dark{
  --c-bg:#0d1421;
  --c-surface:#161e2e;
  --c-surface-2:#1c2536;
  --c-border:#28324a;
  --c-text:#e2e8f0;
  --c-muted:#94a3b8;
  --c-accent:#6b93ff;
  --c-user-bubble:#22304a;
  --c-ai-bubble:#1a2338;
  --c-code-bg:#0a0f1a;
}

.chat-body{ background:var(--c-bg); color:var(--c-text); }
.chat-body .chat-sidebar{ background:var(--c-surface); border-right:1px solid var(--c-border); }
.chat-body .chat-sidebar-head,
.chat-body .chat-sidebar-foot{ border-color:var(--c-border); }
.chat-body .chat-item:hover{ background:var(--c-surface-2); }
.chat-body .chat-item.active{ background:var(--c-user-bubble); }
.chat-body .chat-main{ background:var(--c-bg); }
.chat-body .chat-head{ background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.chat-body .chat-composer{ background:var(--c-surface); border-top:1px solid var(--c-border); }
.chat-body .msg-bubble{
  background:var(--c-ai-bubble);
  border:1px solid var(--c-border);
  color:var(--c-text);
}
.chat-body .msg-user .msg-bubble{
  background:var(--c-user-bubble);
  border-color:var(--c-user-bubble);
}
.chat-body .msg-bubble pre{ background:var(--c-code-bg) !important; }
.chat-body textarea,
.chat-body input,
.chat-body select{
  background:var(--c-surface-2);
  color:var(--c-text);
  border-color:var(--c-border);
}
.chat-body textarea::placeholder{ color:var(--c-muted); }
.chat-body .text-muted{ color:var(--c-muted) !important; }
.chat-body .chat-stats-btn{ background:var(--c-surface-2); color:var(--c-text); border-color:var(--c-border); }
.chat-body .load-prev-btn{ background:var(--c-surface); color:var(--c-muted); border-color:var(--c-border); }
.chat-body .attach-btn{ background:var(--c-surface-2); border-color:var(--c-border); color:var(--c-text); }

.theme-toggle{
  background:var(--c-surface-2); color:var(--c-text);
  border:1px solid var(--c-border); border-radius:10px;
  width:38px; height:38px; cursor:pointer; transition:.12s;
}
.theme-toggle:hover{ background:var(--c-border); }

.model-picker-table td,
.model-picker-table th{ vertical-align:middle; font-size:14px; }
.model-picker-table tr:hover{ background:var(--c-surface-2); }

.chat-del-btn{
  background:transparent; border:none; color:var(--c-muted);
  padding:4px 6px; border-radius:6px; cursor:pointer; transition:.12s;
}
.chat-del-btn:hover{ background:#fee2e2; color:#b91c1c; }

/* ============================================================
   FIX: контраст в тёмной теме
   ============================================================ */

/* общее для чата — весь текст наследует тему */
.chat-body{
  color: var(--c-text, #1e293b);
}
.chat-body.theme-dark{
  color-scheme: dark;
}

/* бренд "ИИ ассистент +" в сайдбаре */
.chat-body.theme-dark .chat-sidebar-head strong,
.chat-body.theme-dark .chat-sidebar-head .fw-semibold,
.chat-body.theme-dark .chat-sidebar-head > div > div > strong{
  color: var(--c-text) !important;
}

/* названия чатов в списке */
.chat-body.theme-dark .chat-item .title{
  color: var(--c-text) !important;
}
.chat-body.theme-dark .chat-item .subtitle{
  color: var(--c-muted) !important;
}
.chat-body.theme-dark .chat-item.active .title,
.chat-body.theme-dark .chat-item.active .subtitle{
  color: #fff !important;
}

/* шапка чата */
.chat-body.theme-dark .chat-head .model-name{
  color: var(--c-text) !important;
}
.chat-body.theme-dark .chat-head .text-muted,
.chat-body.theme-dark .chat-head .small{
  color: var(--c-muted) !important;
}

/* сообщения */
.chat-body.theme-dark .msg-user .msg-bubble,
.chat-body.theme-dark .msg-ai  .msg-bubble{
  color: var(--c-text) !important;
}
.chat-body.theme-dark .msg-meta{
  color: var(--c-muted) !important;
}

/* поля ввода */
.chat-body.theme-dark textarea,
.chat-body.theme-dark input,
.chat-body.theme-dark select{
  color: var(--c-text) !important;
  background: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
}
.chat-body.theme-dark textarea::placeholder,
.chat-body.theme-dark input::placeholder{
  color: var(--c-muted) !important;
}

/* кнопки-иконки */
.chat-body.theme-dark .attach-btn,
.chat-body.theme-dark .theme-toggle,
.chat-body.theme-dark .chat-stats-btn,
.chat-body.theme-dark .load-prev-btn{
  color: var(--c-text) !important;
  background: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
}
.chat-body.theme-dark .attach-btn:hover,
.chat-body.theme-dark .theme-toggle:hover,
.chat-body.theme-dark .chat-stats-btn:hover{
  background: var(--c-border) !important;
}

/* кнопки выхода/админки */
.chat-body.theme-dark .chat-sidebar-foot .btn-outline-secondary,
.chat-body.theme-dark .chat-sidebar-foot .btn-outline-danger{
  color: var(--c-text);
  border-color: var(--c-border);
}

/* бейдж баланса */
.chat-body.theme-dark .badge.bg-success-subtle{
  background: rgba(34,197,94,.15) !important;
  color: #4ade80 !important;
}

/* модальные окна в тёмной теме (Bootstrap) */
body.theme-dark .modal-content{
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer{
  border-color: var(--c-border);
}
body.theme-dark .modal-content .table{
  color: var(--c-text);
}
body.theme-dark .modal-content .table th,
body.theme-dark .modal-content .table td{
  border-color: var(--c-border);
}
body.theme-dark .modal-content .text-muted{
  color: var(--c-muted) !important;
}
body.theme-dark .modal-content .badge.bg-light{
  background: #22304a !important;
  color: var(--c-text) !important;
}
body.theme-dark .modal-content .form-control,
body.theme-dark .modal-content .form-select{
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border);
}
body.theme-dark .btn-close{ filter: invert(1) brightness(2); }

/* markdown внутри сообщений */
.chat-body.theme-dark .msg-bubble a{ color: #7aa2ff; }
.chat-body.theme-dark .msg-bubble blockquote{
  border-left-color: var(--c-border);
  color: var(--c-muted);
}
.chat-body.theme-dark .msg-bubble table{
  color: var(--c-text);
}
.chat-body.theme-dark .msg-bubble th,
.chat-body.theme-dark .msg-bubble td{
  border-color: var(--c-border);
}

.code-wrap {
  position: relative;
  margin: 12px 0;
}

.code-wrap pre {
  margin: 0;
  border-radius: 10px;
}

/* Заголовок с названием языка */
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  padding: 6px 12px;
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-lang {
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #9cb2d6;
  text-transform: uppercase;
  font-size: 11px;
}

/* Когда есть head — pre примыкает к нему без верхних скруглений */
.code-head + pre {
  border-radius: 0 0 10px 10px !important;
}

/* Кнопка "Копировать" остаётся в правом верхнем углу */
.code-wrap .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

/* Когда есть code-head — кнопку сдвигаем чуть ниже или оставляем в углу pre */
.code-head ~ .copy-btn,
.code-head + pre + .copy-btn {
  top: 44px;  /* под заголовком */
}

.scroll-bottom-btn{
  position: absolute;
  right: 24px;
  bottom: 110px;              /* над полем ввода */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-border, #e6e9f0);
  background: var(--c-surface, #fff);
  color: var(--c-text, #1e293b);
  box-shadow: 0 4px 14px rgba(15,23,42,.15);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
}
.scroll-bottom-btn:hover{
  background: var(--c-surface-2, #eef3fb);
  transform: translateY(-2px);
}
.scroll-bottom-btn i{ font-size: 18px; }

/* нужно, чтобы .chat-main мог позиционировать кнопку */
.chat-main{ position: relative; }

/* ============ МОДАЛЬНЫЕ ОКНА: тёмная тема ============ */
body.theme-dark .modal-content,
.chat-body.theme-dark ~ .modal .modal-content{
  background: var(--c-surface, #161e2e);
  color: var(--c-text, #e2e8f0);
  border-color: var(--c-border, #28324a);
}
body.theme-dark .modal-header,
body.theme-dark .modal-footer{
  border-color: var(--c-border, #28324a);
}
body.theme-dark .modal-body{
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .modal .table{
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .modal .table th,
body.theme-dark .modal .table td{
  border-color: var(--c-border, #28324a);
}
body.theme-dark .modal .text-muted{
  color: var(--c-muted, #94a3b8) !important;
}
body.theme-dark .modal .badge.bg-light{
  background: #22304a !important;
  color: #e2e8f0 !important;
}
body.theme-dark .modal .form-control,
body.theme-dark .modal .form-select{
  background: var(--c-surface-2, #1c2536);
  color: var(--c-text, #e2e8f0);
  border-color: var(--c-border, #28324a);
}
body.theme-dark .modal .form-control::placeholder{ color: var(--c-muted, #94a3b8); }
body.theme-dark .modal .btn-close{ filter: invert(1) brightness(2); }

/* ============ ФИЛЬТРЫ В МОДАЛКЕ НОВОГО ЧАТА ============ */
.model-filters{
  padding: 12px 14px;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
  background: var(--c-surface-2, #f8fafc);
}
body.theme-dark .model-filters{
  background: var(--c-surface-2, #1c2536);
  border-color: var(--c-border, #28324a);
}
.filter-label{ font-weight: 600; }

.media-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 16px;
  cursor: pointer;
  background: var(--c-surface, #fff);
  font-size: 13px;
  user-select: none;
  transition: .12s;
}
.media-chip input{ margin:0; accent-color: var(--c-accent, #4f7cff); }
.media-chip:has(input:checked){
  background: var(--c-user-bubble, #dbe7ff);
  border-color: var(--c-accent, #4f7cff);
}
body.theme-dark .media-chip{
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}

.tag-chip{
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--c-border, #e6e9f0);
  background: var(--c-surface, #fff);
  cursor: pointer;
  font-size: 13px;
  transition: .12s;
}
.tag-chip:hover{ background: var(--c-surface-2, #eef3fb); }
.tag-chip.active{
  background: var(--c-accent, #4f7cff);
  color: #fff;
  border-color: var(--c-accent, #4f7cff);
}
body.theme-dark .tag-chip{
  background: var(--c-surface, #161e2e);
  color: var(--c-text, #e2e8f0);
  border-color: var(--c-border, #28324a);
}
body.theme-dark .tag-chip:hover{ background: var(--c-surface-2, #1c2536); }

.tag-mini{
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 8px;
  background: var(--c-surface-2, #eef3fb);
  color: var(--c-muted, #64748b);
  margin-right: 3px;
}
body.theme-dark .tag-mini{
  background: #22304a;
  color: #b8c2d6;
}

/* ============ СКРОЛЛ ОПИСАНИЯ В "ПОДРОБНЕЕ" ============ */
.model-info-description{
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  border-radius: 8px;
  background: var(--c-surface-2, transparent);
}
body.theme-dark .model-info-description{
  background: rgba(255,255,255,.03);
}

/* Скроллбар в тёмной теме */
body.theme-dark .modal-content ::-webkit-scrollbar{ width: 8px; height: 8px; }
body.theme-dark .modal-content ::-webkit-scrollbar-thumb{
  background: #384663; border-radius: 4px;
}
body.theme-dark .modal-content ::-webkit-scrollbar-track{ background: transparent; }

/* Таблица выбора модели — фон в тёмной теме */
body.theme-dark .model-picker-table tr:hover{ background: rgba(255,255,255,.04); }
body.theme-dark .model-picker-table td,
body.theme-dark .model-picker-table th{ border-color: var(--c-border, #28324a); }

/* ============ МОДАЛКА: скролл таблицы моделей ============ */
.model-picker-wrap{
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
}
body.theme-dark .model-picker-wrap{
  border-color: var(--c-border, #28324a);
}
.model-picker-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-surface, #fff);
}
body.theme-dark .model-picker-table thead th{
  background: var(--c-surface, #161e2e);
}

/* ============ Стильные radio ============ */
.radio-modern{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 22px;
  height: 22px;
}
.radio-modern input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-modern-mark{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--c-border, #cbd5e1);
  background: var(--c-surface, #fff);
  display: inline-block;
  transition: .15s;
  position: relative;
}
.radio-modern input:checked + .radio-modern-mark{
  border-color: var(--c-accent, #4f7cff);
  background: var(--c-accent, #4f7cff);
  box-shadow: 0 0 0 3px rgba(79,124,255,.15);
}
.radio-modern input:checked + .radio-modern-mark::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.radio-modern input:focus-visible + .radio-modern-mark{
  outline: 2px solid var(--c-accent, #4f7cff);
  outline-offset: 2px;
}
body.theme-dark .radio-modern-mark{
  border-color: #3b4763;
  background: #1a2338;
}

/* ============ Логотип в "Подробнее": белый фон ============ */
.model-info-head{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.model-info-logo{
  width: 72px; height: 72px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid #e6e9f0;
  flex-shrink: 0;
}
.model-info-logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.model-info-title-block{ min-width: 0; }

/* ============ Кнопки в списке чатов ============ */
.chat-actions{
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: .12s;
}
.chat-item:hover .chat-actions,
.chat-item.active .chat-actions{ opacity: 1; }

.chat-icon-btn{
  background: transparent;
  border: none;
  color: var(--c-muted, #64748b);
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: .12s;
}
.chat-icon-btn:hover{
  background: var(--c-surface-2, #eef3fb);
  color: var(--c-text, #1e293b);
}
.chat-icon-btn.danger:hover{
  background: #fee2e2;
  color: #b91c1c;
}
body.theme-dark .chat-icon-btn:hover{ background: rgba(255,255,255,.06); }
body.theme-dark .chat-icon-btn.danger:hover{ background: rgba(239,68,68,.2); color: #fca5a5; }

/* ============ Отмена в модалке — уже btn-secondary ============ */

/* ============ Заголовки таблицы выбора модели ============ */
.model-picker-table thead th{
  color: var(--c-muted, #64748b) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--c-border, #e6e9f0);
  background: var(--c-surface, #fff);
}

body.theme-dark .model-picker-table thead th{
  color: #b8c2d6 !important;
  background: var(--c-surface, #161e2e);
  border-bottom-color: var(--c-border, #28324a);
}

/* На всякий случай — цвет обычных ячеек */
.model-picker-table tbody td{
  color: var(--c-text, #1e293b);
}
body.theme-dark .model-picker-table tbody td{
  color: var(--c-text, #e2e8f0);
}
/* ============================================================
   FIX: таблица выбора модели в модалке (тёмная тема)
   Bootstrap задаёт собственные переменные --bs-table-*,
   их нужно переопределить явно.
   ============================================================ */

body.theme-dark .modal-content .model-picker-table,
body.theme-dark .modal-content .model-picker-table > :not(caption) > * > *{
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text, #e2e8f0);
  --bs-table-border-color: var(--c-border, #28324a);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--c-text, #e2e8f0);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-hover-color: var(--c-text, #e2e8f0);
  --bs-table-active-bg: rgba(79,124,255,.18);
  --bs-table-active-color: var(--c-text, #e2e8f0);

  background-color: transparent !important;
  color: var(--c-text, #e2e8f0) !important;
}

/* Явно для ячеек — самый надёжный вариант */
body.theme-dark .modal-content .model-picker-table td,
body.theme-dark .modal-content .model-picker-table th{
  background-color: transparent !important;
  color: var(--c-text, #e2e8f0) !important;
  border-color: var(--c-border, #28324a) !important;
}

/* Шапка — она sticky, ей нужен непрозрачный фон */
body.theme-dark .modal-content .model-picker-table thead th{
  background: var(--c-surface, #161e2e) !important;
  color: #b8c2d6 !important;
}

/* Тексты внутри ячеек, которые могут наследовать чёрный цвет от Bootstrap */
body.theme-dark .modal-content .model-picker-table .fw-semibold{
  color: var(--c-text, #e2e8f0) !important;
}
body.theme-dark .modal-content .model-picker-table .text-muted{
  color: var(--c-muted, #94a3b8) !important;
}

/* Бейджи провайдеров */
body.theme-dark .modal-content .model-picker-table .badge.bg-light{
  background: #22304a !important;
  color: #e2e8f0 !important;
}

/* Обёртка-скролл тоже в тему */
body.theme-dark .modal-content .model-picker-wrap{
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
}

/* ============================================================
   Логотип провайдера в таблице выбора модели:
   всегда белый фон, чтобы тёмные логотипы читались
   ============================================================ */
.model-picker-table td .model-logo-cell{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid var(--c-border, #e6e9f0);
  box-sizing: border-box;
}
.model-picker-table td .model-logo-cell img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
body.theme-dark .model-picker-table td .model-logo-cell{
  border-color: #2a3651;
}

/* ============ ФОРМЫ АВТОРИЗАЦИИ ============ */
.auth-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card{
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 32px rgba(15,23,42,.08);
  border: 1px solid #e6e9f0;
}
.auth-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.auth-head i{
  font-size: 30px;
  color: #4f7cff;
}
.auth-brand{
  font-weight: 700;
  font-size: 18px;
}
.auth-card .nav-tabs{ border-bottom: 1px solid #e6e9f0; }
.auth-card .nav-link{
  color: #64748b;
  border: none;
  border-bottom: 2px solid transparent;
}
.auth-card .nav-link.active{
  color: #4f7cff;
  border-bottom-color: #4f7cff;
  background: transparent;
}

/* MEDIA CONFIG в админке */
.pricing-row{ background: var(--c-surface-2, #f8fafc); padding: 6px 8px; border-radius: 8px; }
body.theme-dark .pricing-row{ background: var(--c-surface-2, #1c2536); }

.media-info-block{ margin-top: 16px; padding: 12px 14px; border:1px solid var(--c-border,#e6e9f0); border-radius: 10px; }
.media-info-title{ font-weight: 600; margin-bottom: 8px; }
body.theme-dark .media-info-block{ border-color: var(--c-border,#28324a); }

.media-settings-block{ padding: 12px 14px; border:1px solid var(--c-border,#e6e9f0); border-radius: 10px; margin-bottom: 12px; }
body.theme-dark .media-settings-block{ border-color: var(--c-border,#28324a); }

/* ============================================================
   Логотип провайдера — белая квадратная подложка
   Работает и в чате (.model-picker-table), и в админке (.admin-table)
   ============================================================ */
.model-logo-cell{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid var(--c-border, #e6e9f0);
  flex-shrink: 0;
  overflow: hidden;
}
.model-logo-cell img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

body.theme-dark .model-logo-cell{
  border-color: #2a3651;
}

/* Специфично для таблицы чата — чуть-чуть крупнее */
.model-picker-table td .model-logo-cell{
  width: 34px;
  height: 34px;
}

/* =============== ПЛАШКА ВЛОЖЕНИЯ =============== */
.attach-preview{
  max-width: 900px;
  margin: 8px auto 0;
}
.attach-preview-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--c-surface-2, #f1f5f9);
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 12px;
  color: var(--c-text, #1e293b);
}
body.theme-dark .attach-preview-card{
  background: var(--c-surface-2, #1c2536);
  border-color: var(--c-border, #28324a);
}
.attach-preview-thumb{
  width: 48px; height: 48px;
  border-radius: 8px;
  background: #fff center/cover no-repeat;
  border: 1px solid var(--c-border, #e6e9f0);
  flex-shrink: 0;
}
.attach-preview-meta{ flex: 1; min-width: 0; }
.attach-preview-name{
  font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-preview-info{
  font-size: 12px; color: var(--c-muted, #64748b);
}
.attach-preview-close{
  background: transparent;
  border: none;
  color: var(--c-muted, #64748b);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
  font-size: 14px;
}
.attach-preview-close:hover{
  background: #fee2e2;
  color: #b91c1c;
}
body.theme-dark .attach-preview-close:hover{
  background: rgba(239,68,68,.15);
  color: #fca5a5;
}

/* drag & drop */
.chat-main.drag-over{
  outline: 2px dashed var(--c-accent, #4f7cff);
  outline-offset: -8px;
  background: rgba(79,124,255,.04);
}

.msg-bubble-error{
  background: #fff5f5 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
}
.msg-bubble-error i{ margin-right: 6px; }
body.theme-dark .msg-bubble-error{
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}

.balance-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--c-border, #e6e9f0);
  background: #eef7ee;
  color: #1f7a3d;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: .12s;
}
.balance-btn:hover{ background: #e1f0e2; }
body.theme-dark .balance-btn{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
  color: #4ade80;
}
body.theme-dark .balance-btn:hover{ background: rgba(34,197,94,.2); }

/* ============================================================
   FIX: модалка "Мои чеки" — тёмная тема
   ============================================================ */

/* 1) Сводные карточки баланса/пополнений/ожидающих */
body.theme-dark .modal .stat-card{
  background: var(--c-surface, #161e2e);
  border: 1px solid var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .modal .stat-card .stat-label{
  color: var(--c-muted, #94a3b8);
}
body.theme-dark .modal .stat-card .stat-value{
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .modal .stat-card .stat-sub{
  color: var(--c-muted, #94a3b8);
}

/* 2) Таблица чеков в тёмной теме */
body.theme-dark .modal #billTable{
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text, #e2e8f0);
  --bs-table-border-color: var(--c-border, #28324a);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--c-text, #e2e8f0);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-hover-color: var(--c-text, #e2e8f0);
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .modal #billTable th,
body.theme-dark .modal #billTable td{
  background-color: transparent !important;
  color: var(--c-text, #e2e8f0) !important;
  border-color: var(--c-border, #28324a) !important;
}

body.theme-dark .modal #billTable thead th{
  color: #b8c2d6 !important;
  border-bottom-color: var(--c-border, #28324a) !important;
}

body.theme-dark .modal #billTable .text-muted,
body.theme-dark .modal #billTable small{
  color: var(--c-muted, #94a3b8) !important;
}

/* Бейджи внутри таблицы чеков */
body.theme-dark .modal #billTable .badge.bg-success{
  background: rgba(34,197,94,.2) !important;
  color: #86efac !important;
}
body.theme-dark .modal #billTable .badge.bg-warning{
  background: rgba(234,179,8,.2) !important;
  color: #fde68a !important;
}
body.theme-dark .modal #billTable .badge.bg-danger{
  background: rgba(239,68,68,.2) !important;
  color: #fca5a5 !important;
}

/* 3) Таблица и stat-card в ЛЮБОЙ модалке (на всякий случай, если ещё где-то всплывут) */
body.theme-dark .modal .admin-card{
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .modal .card-head{
  border-bottom-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}

/* ============ СВОРАЧИВАНИЕ СТАРЫХ СООБЩЕНИЙ ============ */
.msg-folded{
  display: block;
  margin-bottom: 8px;
}
.msg-folded .load-prev-btn{
  width: 100%;
  margin: 0;
}
.msg-folded-stack{
  border-left: 2px dashed var(--c-border, #e6e9f0);
  padding-left: 8px;
  margin-top: 10px;
  margin-bottom: 8px;
}
body.theme-dark .msg-folded-stack{
  border-color: var(--c-border, #28324a);
}

/* ============ РЕЙТИНГ ЗВЁЗДАМИ ============ */
.rating-stars{
  position: relative;
  display: inline-block;
  font-family: 'Segoe UI Symbol', 'Apple Color Emoji', Arial, sans-serif;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
  color: #e2e8f0;             /* пустые */
}

/* Слой заливки — обрезаем по ширине */
.rating-stars .rating-fill{
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #f5b301;             /* жёлтый */
  pointer-events: none;
}

/* В «Подробнее» звёзды соразмерны заголовку */
.rating-stars.rating-lg{
  font-size: 28px;
  letter-spacing: 2px;
}

/* В списке моделей — маленькие, как название */
.rating-stars.rating-sm{
  font-size: 14px;
  letter-spacing: 1px;
}

/* Интерактивные звёзды в «Подробнее» */
.rating-stars.rating-interactive{
  cursor: pointer;
}
.rating-stars.rating-interactive .rating-fill{
  pointer-events: auto;
  cursor: pointer;
}

/* Скрытый счётчик «хитов» на каждой звезде для клика */
.rating-stars .rating-hit{
  position: absolute;
  top: 0; bottom: 0;
  width: 20%;
  z-index: 3;
  cursor: pointer;
}

/* Метаданные под звёздами */
.rating-meta{
  font-size: 12px;
  margin-left: 8px;
  vertical-align: middle;
}
.rating-meta.muted{ color: var(--c-muted, #64748b); }

.rating-alert{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  vertical-align: middle;
}
.rating-alert.success{
  background: rgba(34,197,94,.15);
  color: #16a34a;
}
.rating-alert.warning{
  background: rgba(234,179,8,.18);
  color: #a16207;
}
body.theme-dark .rating-alert.success{
  background: rgba(34,197,94,.2);
  color: #86efac;
}
body.theme-dark .rating-alert.warning{
  background: rgba(234,179,8,.2);
  color: #fde68a;
}

/* Тёмная тема — пустые звёзды чуть светлее */
body.theme-dark .rating-stars{ color: #3b4763; }

/* ============================================================
   FIX: таблица деталей модели в модалке "Подробнее" — тёмная тема
   ============================================================ */

/* Таблица внутри #modelInfoBody */
body.theme-dark .modal #modelInfoBody table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text, #e2e8f0);
  --bs-table-border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
  background: transparent;
}
body.theme-dark .modal #modelInfoBody table th,
body.theme-dark .modal #modelInfoBody table td{
  background-color: transparent !important;
  color: var(--c-text, #e2e8f0) !important;
  border-color: var(--c-border, #28324a) !important;
}
body.theme-dark .modal #modelInfoBody table th{
  color: var(--c-muted, #94a3b8) !important;
  font-weight: 600;
  width: 40%;
}
body.theme-dark .modal #modelInfoBody table td .text-muted{
  color: var(--c-muted, #94a3b8) !important;
}

/* Медиа-иконки в таблице деталей */
.media-icon{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--c-surface-2, #f1f5f9);
  color: var(--c-text, #1e293b);
  font-size: 12px;
  margin-right: 4px;
}
.media-icon i{
  font-size: 13px;
  color: var(--c-accent, #4f7cff);
}
.media-label{
  font-size: 12px;
}
body.theme-dark .media-icon{
  background: var(--c-surface-2, #1c2536);
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .media-icon i{
  color: #7aa2ff;
}

/* ============================================================
   Слой с размытием под модалкой "Подробнее"
   ============================================================ */
.model-info-blur{
  position: fixed;
  inset: 0;
  z-index: 1055;                     /* выше первой модалки (1050) и её backdrop (1050), ниже второй (1056+) */
  background: rgba(15, 23, 42, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: auto;              /* нужен для клика "закрыть" */
}
.model-info-blur.is-visible{
  opacity: 1;
}

/* Сама модалка деталей — поднимаем чуть выше blur-слоя */
#modelInfoModal{
  z-index: 1060;
}
#modelInfoModal .modal-dialog{
  /* убираем лишнюю тень, чтобы визуально отличался от первой модалки */
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
#modelInfoModal .modal-content{
  /* чтобы чётко отделить от первой модалки, чуть более выраженная рамка */
  border: 1px solid var(--c-border, #e6e9f0);
}

/* Дополнительно: если backdrop от Bootstrap всё-таки создался,
   для второй модалки приглушим его (на случай нестандартных сборок) */
body.theme-dark .model-info-blur{
  background: rgba(0, 0, 0, 0.45);
}

.ct-answer{
  min-height: 80px;
  padding: 12px;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
  background: var(--c-surface-2, #f8fafc);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
}
body.theme-dark .ct-answer{
  background: var(--c-surface-2, #1c2536);
  border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}

#imageGenBtn i { font-size: 18px; }

/* ============================================================
   ЛАЙТБОКС ДЛЯ ИЗОБРАЖЕНИЙ
   ============================================================ */

.image-lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;                     /* выше всех модалок */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .2s ease;
  cursor: zoom-out;                  /* клик по фону закрывает */
}

.image-lightbox.is-visible{
  opacity: 1;
}

.image-lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  cursor: default;
  /* лёгкая анимация появления */
  transform: scale(0.98);
  transition: transform .2s ease;
}

.image-lightbox.is-visible img{
  transform: scale(1);
}

.image-lightbox-close,
.image-lightbox-download{
  position: fixed;
  top: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  z-index: 2010;
  transition: background .15s;
}
.image-lightbox-close:hover,
.image-lightbox-download:hover{
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}
.image-lightbox-close{
  right: 20px;
}
.image-lightbox-download{
  right: 76px;
}

@media (max-width: 768px){
  .image-lightbox{ padding: 12px; }
  .image-lightbox-close{ top: 12px; right: 12px; }
  .image-lightbox-download{ top: 12px; right: 64px; }
}

/* ============================================================
   FIX: прокрутка чата вниз при открытии
   (убираем CSS-сглаживание, чтобы behavior:'auto' был мгновенным)
   ============================================================ */
.chat-body .chat-messages,
.chat-body #messages {
  scroll-behavior: auto !important;
}

/* ============================================================
   Sortable: перетаскивание чатов
   ============================================================ */
.chat-item-ghost {
  opacity: 0.45;
  background: var(--c-surface-2, #eef3fb) !important;
  border: 1px dashed var(--c-accent, #4f7cff);
  border-radius: 9px;
}

.chat-item-chosen {
  background: var(--c-surface-2, #eef3fb);
  box-shadow: 0 2px 8px rgba(15,23,42,.10);
}

.chat-item-drag {
  opacity: 1;
  cursor: grabbing;
}

.chat-item {
  /* Плавное появление при вставке в DOM */
  transition: background .15s, box-shadow .15s;
}
body.theme-dark .chat-item-ghost {
  background: rgba(79,124,255,.12) !important;
  border-color: #6b93ff;
}
body.theme-dark .chat-item-chosen {
  background: #1c2536;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

/* ============================================================
   Эффект "новый чат": краткая подсветка
   ============================================================ */
@keyframes chatItemNew {
  0% {
    background: rgba(79,124,255,.35);
    transform: translateY(-4px);
    opacity: 0.4;
  }
  40% {
    background: rgba(79,124,255,.22);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    background: transparent;
    transform: translateY(0);
    opacity: 1;
  }
}

.chat-item-new {
  animation: chatItemNew 1.3s ease-out;
}

body.theme-dark .chat-item-new {
  animation: chatItemNewDark 1.3s ease-out;
}

@keyframes chatItemNewDark {
  0% {
    background: rgba(107,147,255,.35);
    transform: translateY(-4px);
    opacity: 0.4;
  }
  40% {
    background: rgba(107,147,255,.22);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    background: transparent;
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   Кнопка "Использовать как референс" на картинке в чате
   ============================================================ */

/* Обёртка картинки — чтобы позиционировать кнопку */
.msg-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
}

.msg-img-wrap img {
  display: block;
}

/* Сама кнопка */
.msg-img-ref-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, transform .12s;
  z-index: 2;
  font-size: 14px;
  padding: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.msg-img-ref-btn:hover {
  background: rgba(79, 124, 255, 0.9);
  transform: scale(1.06);
}

.msg-img-ref-btn i {
  font-size: 15px;
  line-height: 1;
}

/* Показываем при ховере на картинку */
.msg-img-wrap:hover .msg-img-ref-btn {
  opacity: 1;
}

/* На мобильных / тач-устройствах ховера нет — показываем всегда */
@media (hover: none) {
  .msg-img-ref-btn {
    opacity: 1;
    background: rgba(15, 23, 42, 0.45);
  }
}

/* В тёмной теме кнопка чуть светлее */
body.theme-dark .msg-img-ref-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}
body.theme-dark .msg-img-ref-btn:hover {
  background: rgba(107, 147, 255, 0.85);
  color: #fff;
}

/* ============================================================
   Описание модели в "Дополнительно" (модалка генерации)
   ============================================================ */
.ig-model-desc {
  max-height: 180px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--c-surface-2, #f1f5f9);
  border: 1px solid var(--c-border, #e6e9f0);
  color: var(--c-text, #1e293b);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

body.theme-dark .ig-model-desc {
  background: rgba(255,255,255,.04);
  border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}

/* Кнопка "Дополнительно" — аккуратный вид */
#igAdvanced + * {
  /* ничего, просто на всякий случай */
}

button[data-bs-target="#igAdvanced"] {
  border-color: var(--c-border, #e6e9f0);
  color: var(--c-text, #1e293b);
}
button[data-bs-target="#igAdvanced"]:hover {
  background: var(--c-surface-2, #f1f5f9);
}
body.theme-dark button[data-bs-target="#igAdvanced"] {
  border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}
body.theme-dark button[data-bs-target="#igAdvanced"]:hover {
  background: rgba(255,255,255,.05);
}

/* Иконка chevron поворачивается при открытии */
button[data-bs-target="#igAdvanced"][aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
  transition: transform .15s;
}
button[data-bs-target="#igAdvanced"] .bi-chevron-down {
  transition: transform .15s;
}

/* ============================================================
   Скроллбар в .ig-model-desc (тёмная тема)
   ============================================================ */
.ig-model-desc::-webkit-scrollbar {
  width: 6px;
}
.ig-model-desc::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 3px;
}
body.theme-dark .ig-model-desc::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
}

/* ============================================================
   ВИЗУАЛЬНОЕ РАЗДЕЛЕНИЕ: сообщения пользователя и ассистента
   ============================================================ */

/* --- Ограничение ширины сообщений --- */
.chat-body .msg {
  max-width: 900px;
  margin: 0 auto 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* --- Сообщения пользователя: аватарка СПРАВА, пузырь прижат вправо --- */
.chat-body .msg-user {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.chat-body .msg-user .msg-bubble {
  /* Ограничиваем ширину, чтобы было видно, что это «короткое» сообщение */
  max-width: 75%;
}

/* --- Сообщения ассистента: как раньше, но с ограничением --- */
.chat-body .msg-ai .msg-bubble {
  max-width: 85%;
}

/* --- Скругления «пузыря» --- */
.chat-body .msg-user .msg-bubble {
  /* Верхний правый угол «острый» — он смотрит в сторону аватарки */
  border-radius: 14px 4px 14px 14px;
}

.chat-body .msg-ai .msg-bubble {
  /* Верхний левый угол «острый» — он смотрит в сторону аватарки */
  border-radius: 4px 14px 14px 14px;
}

/* --- Фоны пузырей --- */
/* Светлая тема */
.chat-body.theme-light .msg-user .msg-bubble {
  background: #cfe1ff;
  border-color: #b8d3ff;
}

.chat-body.theme-light .msg-ai .msg-bubble {
  background: #ffffff;
  border-color: var(--ai-border, #e6e9f0);
}

/* Тёмная тема */
.chat-body.theme-dark .msg-user .msg-bubble {
  background: #2a3d5c;
  border-color: #365172;
}

.chat-body.theme-dark .msg-ai .msg-bubble {
  background: #1a2338;
  border-color: #28324a;
}

/* Аватарка пользователя в правой части — визуально отличается */
.chat-body .msg-user .msg-avatar {
  background: var(--c-accent, #4f7cff);
  color: #fff;
}

.chat-body .msg-ai .msg-avatar {
  background: #0f172a;
  color: #fff;
}

/* Тёмная тема: аватарка ассистента чуть мягче */
.chat-body.theme-dark .msg-ai .msg-avatar {
  background: #22304a;
}

/* ============================================================
   ПРОМПТ-СООБЩЕНИЯ (msg-bubble-prompt)
   Отличаем текст промпта для генерации от обычных сообщений
   ============================================================ */

/* Светлая тема: тёмно-синий + курсив */
.chat-body.theme-light .msg-bubble-prompt {
  color: #1e3a8a;
  font-style: italic;
}

/* Тёмная тема: жёлтый + курсив */
.chat-body.theme-dark .msg-bubble-prompt {
  color: #fbbf24;
  font-style: italic;
}

/* У промпта есть свой «технический» вид — иконка палитры в начале */
.chat-body .msg-bubble-prompt::before {
  content: '🎨 ';
  font-style: normal;
  margin-right: 4px;
}

/* ============================================================
   FIX: мета-строка под сгенерированным изображением
   ============================================================ */
.chat-body .msg-meta {
  font-size: 12px;
  color: var(--c-muted, #64748b);
  margin-top: 8px;
  line-height: 1.5;
}

.chat-body.theme-dark .msg-meta {
  color: var(--c-muted, #94a3b8);
}

/* ============================================================
   FIX: аккуратный код внутри промпт-сообщений и обычных
   ============================================================ */

.chat-body .msg-user .msg-bubble :not(pre) > code {
  background: rgba(15, 23, 42, 0.08);
}

.chat-body.theme-dark .msg-user .msg-bubble :not(pre) > code {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

/* ============================================================
   FIX: hover на сообщение — лёгкий подсвет, чтобы было понятно, что «это блок»
   ============================================================ */
.chat-body .msg:hover .msg-bubble {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.chat-body.theme-dark .msg:hover .msg-bubble {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   Адаптив: на мобильных ограничиваем ширину сильнее
   ============================================================ */
@media (max-width: 768px) {
  .chat-body .msg-user .msg-bubble {
    max-width: 85%;
  }
  .chat-body .msg-ai .msg-bubble {
    max-width: 90%;
  }
  .chat-body .msg-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
}

/* ============================================================
   МЕНЮ СООБЩЕНИЯ (три точки) + ИСКЛЮЧЕНИЕ ИЗ КОНТЕКСТА
   ============================================================ */

/* --- Кнопка "три точки" --- */
.msg-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--c-muted, #64748b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  z-index: 3;
  font-size: 14px;
  padding: 0;
}

.msg-menu-btn:hover {
  background: var(--c-surface-2, #f1f5f9);
  color: var(--c-text, #1e293b);
}

/* Показываем при ховере на сообщение */
.msg:hover .msg-menu-btn {
  opacity: 1;
}

/* На мобильных — всегда видна (немного приглушена, чтобы не мешала) */
@media (hover: none) {
  .msg-menu-btn {
    opacity: 0.6;
  }
  .msg-menu-btn:hover {
    opacity: 1;
  }
}

/* В тёмной теме */
body.theme-dark .msg-menu-btn {
  color: var(--c-muted, #94a3b8);
}
body.theme-dark .msg-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text, #e2e8f0);
}

/* --- Иконка "исключено из контекста" --- */
.msg-excluded-icon {
  position: absolute;
  top: 6px;
  right: 36px;      /* слева от кнопки меню */
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted, #94a3b8);
  font-size: 14px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}

body.theme-dark .msg-excluded-icon {
  color: #cbd5e1;
}

/* --- Полупрозрачность исключённого сообщения --- */
.msg-excluded .msg-bubble {
  opacity: 0.55;
  transition: opacity .15s;
}

/* При ховере — снимаем прозрачность, чтобы можно было прочитать */
.msg-excluded:hover .msg-bubble {
  opacity: 1;
}

/* На всякий случай — на тач-устройствах без ховера показываем полностью */
@media (hover: none) {
  .msg-excluded .msg-bubble {
    opacity: 0.85;
  }
}

/* --- Выпадающее меню действий с сообщением --- */
.msg-menu {
  position: absolute;
  z-index: 1200;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 4px;
  font-size: 13px;
  color: var(--c-text, #1e293b);
  animation: msgMenuFadeIn .12s ease-out;
}

@keyframes msgMenuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.theme-dark .msg-menu {
  background: #1c2536;
  border-color: #28324a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
}

/* --- Пункты меню --- */
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}

.msg-menu-item:hover {
  background: var(--c-surface-2, #f1f5f9);
}

.msg-menu-item.danger {
  color: #dc2626;
}

.msg-menu-item.danger:hover {
  background: #fee2e2;
}

body.theme-dark .msg-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .msg-menu-item.danger {
  color: #f87171;
}

body.theme-dark .msg-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.msg-menu-item i {
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================================
   FIX: позиционирование кнопок внутри bubble сообщения
   Без этого правила .msg-menu-btn, .msg-excluded-icon и другие
   absolute-элементы внутри bubble привязываются к .chat-main
   и улетают в угол страницы.
   ============================================================ */
.chat-body .msg-bubble {
  position: relative;
}

/* ============================================================
   ВИДЕО В ЧАТЕ
   ============================================================ */

/* Обёртка видео в bubble */
.msg-video-wrap {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

/* Сам плеер */
.msg-video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 420px;
  background: #000;
  
  
  object-fit: contain;
  outline: none;
}

/* Кнопки под видео */
.msg-video-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

/* ============================================================
   PENDING: "Генерируется видео…"
   ============================================================ */
.msg-video-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--c-surface-2, #f1f5f9);
  border: 1px dashed var(--c-border, #e6e9f0);
  animation: videoPendingPulse 2s ease-in-out infinite;
}

.msg-video-pending-spinner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--c-text, #1e293b);
}

.msg-video-pending-spinner .spinner-border {
  width: 18px;
  height: 18px;
  border-width: 2px;
  color: var(--c-accent, #4f7cff);
}

.msg-video-pending-info {
  font-size: 12px;
  color: var(--c-muted, #64748b);
  line-height: 1.5;
}

@keyframes videoPendingPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* Тёмная тема */
body.theme-dark .msg-video-pending {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-border, #28324a);
}
body.theme-dark .msg-video-pending-spinner {
  color: var(--c-text, #e2e8f0);
}
body.theme-dark .msg-video-pending-info {
  color: var(--c-muted, #94a3b8);
}

/* ============================================================
   FAILED: ошибка генерации
   ============================================================ */
.msg-video-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff5f5;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
}

.msg-video-failed > i {
  font-size: 16px;
}

.msg-video-failed-detail {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 12px;
  color: #991b1b;
  word-break: break-word;
}

body.theme-dark .msg-video-failed {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
body.theme-dark .msg-video-failed-detail {
  color: #fecaca;
}

/* ============================================================
   АДАПТИВ: на мобильных видео меньше
   ============================================================ */
@media (max-width: 768px) {
  .msg-video {
    max-height: 300px;
  }
  .msg-video-actions {
    gap: 6px;
  }
  .msg-video-actions .btn {
    font-size: 12px;
    padding: 4px 8px;
  }
}

/* ============================================================
   КНОПКА "ЗАДАЧИ ГЕНЕРАЦИИ"
   ============================================================ */

.tasks-btn {
  position: relative;
  transition: all .2s;
}

.tasks-btn.tasks-btn-active {
  background: rgba(79, 124, 255, 0.15);
  color: var(--c-accent, #4f7cff);
  animation: tasksPulse 2s ease-in-out infinite;
}

.tasks-btn.tasks-btn-active i {
  color: var(--c-accent, #4f7cff);
}

@keyframes tasksPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 124, 255, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(79, 124, 255, 0);
  }
}

body.theme-dark .tasks-btn.tasks-btn-active {
  background: rgba(107, 147, 255, 0.18);
}

/* Бейдж с числом активных задач */
.tasks-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 14px;
  z-index: 1;
  border: 1.5px solid var(--c-surface, #fff);
}

body.theme-dark .tasks-badge {
  border-color: var(--c-surface, #161e2e);
}

/* ============================================================
   СПИСОК ЗАДАЧ
   ============================================================ */

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-row {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border, #e6e9f0);
  background: var(--c-surface, #fff);
  transition: box-shadow .15s;
}

.task-row:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.task-row.task-pending {
  border-left: 3px solid #f59e0b;
}

.task-row.task-completed {
  border-left: 3px solid #10b981;
}

.task-row.task-failed {
  border-left: 3px solid #ef4444;
}

.task-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.task-status-icon {
  font-size: 16px;
}

.task-pending .task-status-icon   { color: #f59e0b; }
.task-completed .task-status-icon { color: #10b981; }
.task-failed .task-status-icon    { color: #ef4444; }

.task-kind {
  font-size: 12px;
  color: var(--c-muted, #64748b);
}

.task-cost {
  margin-left: auto;
  font-weight: 600;
  font-size: 13px;
  color: var(--c-text, #1e293b);
}

.task-prompt {
  font-size: 14px;
  color: var(--c-text, #1e293b);
  margin-bottom: 6px;
  line-height: 1.4;
  word-break: break-word;
}

.task-meta {
  font-size: 12px;
  color: var(--c-muted, #64748b);
  margin-bottom: 8px;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.task-chat {
  color: var(--c-accent, #4f7cff);
  cursor: pointer;
  text-decoration: none;
  transition: .12s;
}

.task-chat:hover {
  text-decoration: underline;
}

.task-times {
  color: var(--c-muted, #64748b);
}

.task-error {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 12px;
  color: #b91c1c;
  word-break: break-word;
}

/* Тёмная тема */
body.theme-dark .task-row {
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
}

body.theme-dark .task-row.task-pending {
  border-left-color: #f59e0b;
}
body.theme-dark .task-row.task-completed {
  border-left-color: #10b981;
}
body.theme-dark .task-row.task-failed {
  border-left-color: #ef4444;
}

body.theme-dark .task-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

body.theme-dark .task-cost {
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .task-prompt {
  color: var(--c-text, #e2e8f0);
}

/* ============================================================
   ПОДСВЕТКА СООБЩЕНИЯ ПРИ ПЕРЕХОДЕ
   ============================================================ */
.msg-highlight .msg-bubble {
  animation: msgHighlightPulse 2s ease-out;
}

@keyframes msgHighlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 124, 255, 0.6); }
  40%  { box-shadow: 0 0 0 8px rgba(79, 124, 255, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(79, 124, 255, 0); }
}

.katex { font-size: 1.05em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* ============================================================
   ФОРМУЛЫ (KaTeX)
   ============================================================ */

.katex {
  font-size: 1.05em;
}

/* Блочные формулы: горизонтальный скролл при переполнении */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  margin: 8px 0;
}

/* Тёмная тема: цвет текста формул наследуется от bubble */
.chat-body.theme-dark .katex {
  color: var(--c-text, #e2e8f0);
}

.chat-body.theme-dark .katex-display {
  color: var(--c-text, #e2e8f0);
}

/* ============================================================
   МЕДИА-БИБЛИОТЕКА
   ============================================================ */

.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.ml-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e6e9f0);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.ml-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

.ml-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
}

.ml-card-preview img,
.ml-card-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ml-card-video-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 48px;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ml-card-delete,
.ml-card-download {
  position: absolute;
  top: 6px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(15, 23, 42, 0.6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s;
  text-decoration: none;
  font-size: 15px;
}

.ml-card-delete { right: 6px; }
.ml-card-download { right: 44px; }

.ml-card-delete:hover { background: rgba(220, 38, 38, 0.9); }
.ml-card-download:hover { background: rgba(79, 124, 255, 0.9); color: #fff; }

.ml-card-info {
  padding: 8px 10px;
}

.ml-card-prompt {
  font-size: 12px;
  color: var(--c-text, #1e293b);
  margin-bottom: 4px;
  line-height: 1.35;
  word-break: break-word;
  max-height: 34px;
  overflow: hidden;
}

.ml-card-meta {
  font-size: 11px;
  color: var(--c-muted, #64748b);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.ml-card-meta span {
  white-space: nowrap;
}

body.theme-dark .ml-card {
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
}

body.theme-dark .ml-card-prompt {
  color: var(--c-text, #e2e8f0);
}

/* ============================================================
   FIX: таблица внутри модалки "Статистика чата"
   Стили как у .stat-card (верхний блок с метриками)
   ============================================================ */

#chatStatsModal .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text, #1e293b);
  --bs-table-border-color: var(--c-border, #e6e9f0);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
  --bs-table-striped-color: var(--c-text, #1e293b);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.04);
  --bs-table-hover-color: var(--c-text, #1e293b);
  --bs-table-active-bg: rgba(79, 124, 255, 0.08);
  --bs-table-active-color: var(--c-text, #1e293b);

  background-color: transparent !important;
  color: var(--c-text, #1e293b) !important;
  border-color: var(--c-border, #e6e9f0) !important;
}

#chatStatsModal .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--c-text, #1e293b) !important;
  border-color: var(--c-border, #e6e9f0) !important;
}

#chatStatsModal .table thead th {
  color: var(--c-muted, #64748b) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: transparent !important;
  border-bottom: 1px solid var(--c-border, #e6e9f0) !important;
}

/* Тёмная тема — цвета как у .stat-card */
body.theme-dark #chatStatsModal .table,
body.theme-dark #chatStatsModal .table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  --bs-table-color: var(--c-text, #e2e8f0);
  --bs-table-border-color: var(--c-border, #28324a);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--c-text, #e2e8f0);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: var(--c-text, #e2e8f0);
  --bs-table-active-bg: rgba(107, 147, 255, 0.15);
  --bs-table-active-color: var(--c-text, #e2e8f0);

  background-color: transparent !important;
  color: var(--c-text, #e2e8f0) !important;
  border-color: var(--c-border, #28324a) !important;
}

body.theme-dark #chatStatsModal .table thead th {
  color: var(--c-muted, #94a3b8) !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--c-border, #28324a) !important;
}

body.theme-dark #chatStatsModal .table tbody td {
  background-color: transparent !important;
  color: var(--c-text, #e2e8f0) !important;
  border-color: var(--c-border, #28324a) !important;
}

/* ============================================================
   ТАБЛИЦЫ В СООБЩЕНИЯХ (markdown → marked → <table>)
   ============================================================ */

.chat-body .msg-bubble table {
  /* Отделяем от текста */
  margin: 12px 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 13.5px;
  line-height: 1.5;

  /* Общий контейнер */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-border, #e6e9f0);
}

/* Ячейки — базовые отступы и границы */
.chat-body .msg-bubble table th,
.chat-body .msg-bubble table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border, #e6e9f0);
  color: var(--c-text, #1e293b);
  background: transparent;
}

/* Заголовок */
.chat-body .msg-bubble table thead th {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--c-muted, #64748b);
  background: var(--c-surface-2, #f1f5f9);
  text-transform: none;
  letter-spacing: 0;
}

/* Убираем нижнюю границу у последней строки — иначе двойная рамка */
.chat-body .msg-bubble table tbody tr:last-child td {
  border-bottom: none;
}

/* Зебра (чётные строки) */
.chat-body .msg-bubble table tbody tr:nth-child(even) td {
  background: var(--c-surface-2, #f8fafc);
}

/* Выравнивание текста в ячейках */
.chat-body .msg-bubble table th[align="right"],
.chat-body .msg-bubble table td[align="right"] {
  text-align: right;
}
.chat-body .msg-bubble table th[align="center"],
.chat-body .msg-bubble table td[align="center"] {
  text-align: center;
}

/* Горизонтальный скролл, если таблица шире bubble */
.chat-body .msg-bubble {
  overflow-x: auto;
}
.chat-body .msg-bubble table {
  min-width: 100%;
}

/* ============ Тёмная тема ============ */
body.theme-dark .chat-body .msg-bubble table,
body.theme-dark .chat-body .msg-bubble table th,
body.theme-dark .chat-body .msg-bubble table td {
  border-color: var(--c-border, #28324a);
}

body.theme-dark .chat-body .msg-bubble table thead th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-muted, #94a3b8);
}

body.theme-dark .chat-body .msg-bubble table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

body.theme-dark .chat-body .msg-bubble table td,
body.theme-dark .chat-body .msg-bubble table th {
  color: var(--c-text, #e2e8f0);
}

/* ============================================================
   ЛОГОТИП МОДЕЛИ В АВАТАРКЕ
   ============================================================ */

.msg-avatar img.msg-avatar-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
  box-sizing: border-box;
  display: block;
}

/* Аватарка текстовой модели — кликабельная */
.msg-avatar-clickable {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.msg-avatar-clickable:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(79, 124, 255, 0.25);
}

.msg-avatar-clickable:active {
  transform: scale(0.98);
}

/* Тёмная тема: у логотипа остаётся белый фон — так лучше видно */
body.theme-dark .msg-avatar img.msg-avatar-logo {
  background: #ffffff;
}

/* Общий стиль аватарки: круг, чтобы логотип вписался */
.msg-avatar {
  overflow: hidden;
}

/* ============================================================
   ТАЙМЕР ГЕНЕРАЦИИ ОТВЕТА
   ============================================================ */

.typing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.typing-row .spinner-border {
  flex-shrink: 0;
}

.typing-label {
  color: var(--c-text, #1e293b);
}

.typing-timer {
  font-variant-numeric: tabular-nums;  /* моноширинные цифры, чтобы не «дёргалось» */
  font-feature-settings: "tnum";
  margin-left: auto;
  font-size: 13px;
  color: var(--c-muted, #64748b);
  transition: color .2s;
}

body.theme-dark .typing-label {
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .typing-timer {
  color: var(--c-muted, #94a3b8);
}

/* Мигание для «слишком долго» (>40 сек) */
@keyframes typingTimerBlink {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.35; }
}

.typing-timer-blink {
  animation: typingTimerBlink 1s ease-in-out infinite;
}

/* ============================================================
   ПАНЕЛЬ ФОРМАТИРОВАНИЯ (B / I / U) НАД TEXTAREA
   ============================================================ */

.format-panel {
  max-width: 900px;
  margin: 0 auto 8px;
  padding: 4px 6px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  animation: formatPanelFadeIn .15s ease-out;
}

@keyframes formatPanelFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.format-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--c-text, #1e293b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background .12s, color .12s;
  padding: 0;
}

.format-btn:hover {
  background: var(--c-surface-2, #eef3fb);
}

.format-btn:active {
  background: var(--c-border, #e6e9f0);
}

.format-help-btn {
  margin-left: auto;
  color: var(--c-muted, #64748b);
}

.format-help-btn:hover {
  color: var(--c-accent, #4f7cff);
}

/* Тёмная тема */
body.theme-dark .format-panel {
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.theme-dark .format-btn {
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .format-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .format-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

/* Мобильные: увеличим кнопки для удобства тапов */
@media (max-width: 768px) {
  .format-btn {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
}

/* ============================================================
   МОДАЛКА "ЗАЧЕМ НУЖНО ФОРМАТИРОВАНИЕ?"
   ============================================================ */

#formatHelpModal .modal-body {
  font-size: 14.5px;
  line-height: 1.65;
}

#formatHelpModal .modal-body h6 {
  font-size: 15px;
  margin-bottom: 10px;
}

.format-help-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.format-help-list li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--c-surface-2, #f8fafc);
  border-left: 3px solid var(--c-accent, #4f7cff);
  border-radius: 6px;
}

.format-help-list li:last-child {
  margin-bottom: 0;
}

body.theme-dark .format-help-list li {
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   СВОРАЧИВАНИЕ ДЛИННЫХ СООБЩЕНИЙ
   ============================================================ */

.msg-bubble.msg-collapsible {
  position: relative;
  max-height: 250px;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* Градиент внизу свёрнутого сообщения */
.msg-bubble.msg-collapsible::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--c-ai-bubble, #ffffff) 100%
  );
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Развёрнутое состояние */
.msg-bubble.msg-collapsible.msg-expanded {
  max-height: none;
}

.msg-bubble.msg-collapsible.msg-expanded::after {
  opacity: 0;
}

/* Для user-сообщений — градиент цвета user-бабла */
.msg-user .msg-bubble.msg-collapsible::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--c-user-bubble, #dbe7ff) 100%
  );
}

/* В тёмной теме — цвета тёмных баблов */
body.theme-dark .msg-ai .msg-bubble.msg-collapsible::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--c-ai-bubble, #1a2338) 100%
  );
}

body.theme-dark .msg-user .msg-bubble.msg-collapsible::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--c-user-bubble, #22304a) 100%
  );
}

/* Обёртка с кнопкой "Развернуть" */
.msg-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
  margin-bottom: 14px;
}

.msg-toggle-btn {
  background: var(--c-surface-2, #f1f5f9);
  border: 1px solid var(--c-border, #e6e9f0);
  color: var(--c-text, #1e293b);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}

.msg-toggle-btn:hover {
  background: var(--c-border, #e6e9f0);
  border-color: var(--c-accent, #4f7cff);
  color: var(--c-accent, #4f7cff);
}

.msg-toggle-btn i {
  font-size: 12px;
}

/* Тёмная тема */
body.theme-dark .msg-toggle-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-border, #28324a);
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .msg-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #6b93ff;
  color: #6b93ff;
}

/* ============================================================
   ЦИТИРОВАНИЕ — плавающая кнопка
   ============================================================ */

.quote-float-btn {
  position: absolute;
  z-index: 1200;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border, #e6e9f0);
  background: #ffffff;
  color: var(--c-text, #1e293b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
  transition: background .15s, color .15s, transform .15s;
  padding: 0;
}

.quote-float-btn:hover {
  background: var(--c-accent, #4f7cff);
  color: #ffffff;
  border-color: var(--c-accent, #4f7cff);
  transform: scale(1.08);
}

body.theme-dark .quote-float-btn {
  background: var(--c-surface, #161e2e);
  color: var(--c-text, #e2e8f0);
  border-color: var(--c-border, #28324a);
}

body.theme-dark .quote-float-btn:hover {
  background: var(--c-accent, #6b93ff);
  color: #fff;
}

/* ============================================================
   БЛОК ЦИТАТЫ НАД TEXTAREA
   ============================================================ */

.quote-wrap {
  max-width: 900px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #e6e9f0);
  border-left: 4px solid var(--c-accent, #4f7cff);
  border-radius: 10px;
  animation: formatPanelFadeIn .15s ease-out;
}

.quote-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-muted, #64748b);
  margin-bottom: 6px;
}

.quote-head i {
  color: var(--c-accent, #4f7cff);
  font-size: 14px;
}

.quote-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--c-muted, #64748b);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background .12s, color .12s;
  font-size: 12px;
}

.quote-close:hover {
  background: var(--c-surface-2, #f1f5f9);
  color: #ef4444;
}

.quote-text {
  max-height: 80px;
  overflow-y: auto;
  font-size: 13.5px;
  color: var(--c-text, #1e293b);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Тёмная тема */
body.theme-dark .quote-wrap {
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
  border-left-color: var(--c-accent, #6b93ff);
}

body.theme-dark .quote-close:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .quote-text {
  color: var(--c-text, #e2e8f0);
}

/* ============================================================
   ЦИТАТА ВНУТРИ СООБЩЕНИЯ (в чате)
   ============================================================ */

.msg-quote {
  background: var(--c-surface-2, #f1f5f9);
  border-left: 3px solid var(--c-accent, #4f7cff);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.msg-quote-head {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-muted, #64748b);
  font-size: 11.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.msg-quote-head i {
  color: var(--c-accent, #4f7cff);
  font-size: 13px;
}

.msg-quote-text {
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  color: var(--c-text, #1e293b);
}

/* Тёмная тема */
body.theme-dark .msg-quote {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: #6b93ff;
}

body.theme-dark .msg-quote-text {
  color: var(--c-text, #e2e8f0);
}

/* ============================================================
   ПОИСК ПО СООБЩЕНИЯМ
   ============================================================ */

.search-modal-dialog {
  transition: none !important;   /* отключаем transform-transition для draggable */
}

.search-modal-header {
  user-select: none;
}

.search-input-wrap {
  position: relative;
}

.search-input-wrap .form-control {
  padding-right: 120px;
}

.search-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--c-muted, #64748b);
  pointer-events: none;
}

.search-results {
  max-height: 60vh;
  overflow-y: auto;
}

.search-item {
  padding: 10px 12px;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}

.search-item:hover {
  background: var(--c-surface-2, #f1f5f9);
  border-color: var(--c-accent, #4f7cff);
  transform: translateX(2px);
}

.search-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--c-muted, #64748b);
  margin-bottom: 4px;
}

.search-item-chat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-accent, #4f7cff);
  font-weight: 500;
}

.search-item-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-item-frag {
  font-size: 13.5px;
  color: var(--c-text, #1e293b);
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}

.search-item-frag mark {
  background: #fef08a;
  color: #1a1a1a;
  padding: 0 2px;
  border-radius: 3px;
}

/* Тёмная тема */
body.theme-dark .search-item {
  background: var(--c-surface, #161e2e);
  border-color: var(--c-border, #28324a);
}

body.theme-dark .search-item:hover {
  background: var(--c-surface-2, #1c2536);
  border-color: #6b93ff;
}

body.theme-dark .search-item-frag {
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .search-item-frag mark {
  background: #a16207;
  color: #fef3c7;
}

/* Скроллбар */
.search-results::-webkit-scrollbar {
  width: 8px;
}
.search-results::-webkit-scrollbar-thumb {
  background: var(--c-border, #e6e9f0);
  border-radius: 4px;
}
body.theme-dark .search-results::-webkit-scrollbar-thumb {
  background: #384663;
}

/* Кнопка «К чату» — отделена от остальных пунктов меню */
.admin-nav-item--chat {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(90, 200, 255, 0.15);
  color: #5ac8ff !important;   /* акцентный цвет, чтобы отличалась */
}

.admin-nav-item--chat:hover {
  color: #a06cff !important;
  background: rgba(90, 200, 255, 0.1);
}

.admin-nav-item--chat i {
  color: inherit;   /* иконка того же цвета, что и текст */
}

/* ============================================================
   REASONING / THINKING БЛОК (спойлер под сообщением)
   ============================================================ */

.reasoning-block {
  margin: 0 0 12px;
  border: 1px solid var(--c-border, #e6e9f0);
  border-radius: 10px;
  background: var(--c-surface-2, #f8fafc);
  overflow: hidden;
  font-size: 13.5px;
}

.reasoning-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: var(--c-text, #1e293b);
  transition: background .12s;
  list-style: none;
}

.reasoning-summary::-webkit-details-marker {
  display: none;
}

.reasoning-summary:hover {
  background: var(--c-border, #e6e9f0);
}

.reasoning-summary i.bi-lightbulb {
  color: #f59e0b;
  font-size: 15px;
}

.reasoning-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-muted, #64748b);
  transition: transform .2s;
}

.reasoning-block[open] .reasoning-chevron {
  transform: rotate(180deg);
}

.reasoning-body {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--c-border, #e6e9f0);
  color: var(--c-muted, #64748b);
  font-style: italic;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.reasoning-body p {
  margin: 0 0 8px;
}

.reasoning-body p:last-child {
  margin-bottom: 0;
}

/* Тёмная тема */
body.theme-dark .reasoning-block {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--c-border, #28324a);
}

body.theme-dark .reasoning-summary {
  color: var(--c-text, #e2e8f0);
}

body.theme-dark .reasoning-summary:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .reasoning-body {
  border-top-color: var(--c-border, #28324a);
  color: var(--c-muted, #94a3b8);
}