/**
 * @version 2.0.0
 * @updated 2026-05-13
 *
 * CHANGELOG:
 * v2.0.0 (2026-05-13) - Добавлена верхняя плашка пользователя, остальное из v1.8.3
 * v1.8.3 (2026-05-13) - Рабочая схема скролла панели моделей
 * v1.8.0 (2026-05-13) - Дизайн-рефреш: lobe-icons, анимации, glow
 *
 * Файл: assets/style.css
 * Назначение: стили чата для авторизованного пользователя.
 *
 * ИНСТРУКЦИИ ДЛЯ CLAUDE:
 *   1. Палитру НЕ менять.
 *   2. Все анимации на transform/opacity (GPU).
 *   3. Иконки вендоров (lobe-icons) рендерятся через JS в .vendor-icon-wrap.
 */

:root {
    --bg-deep:    #14161b;
    --bg-card:    #1f2128;
    --bg-card-2:  #232630;
    --border:     #2a2d35;
    --border-h:   #44485a;
    --text:       #e6e6e6;
    --text-2:     #b9bfc9;
    --text-3:     #6c727d;
    --accent:     #0d6efd;
    --accent-h:   #6ea8fe;
    --success:    #6ec77d;
    --danger:     #ff7c7c;
    --warning:    #ffd95e;
}

/**
 * Добавление к assets/style.css — стиль бейджа "🔍 ищет в сети"
 *
 * Можно:
 *   А) Скопировать содержимое в КОНЕЦ файла assets/style.css
 *   Б) Сохранить отдельным файлом и подключить вторым тегом <link> в index.php
 */
 
/* Бейдж "ищет в сети" — синий с лёгким glow */
.badge-mini.b-tools {
    background: rgba(13, 110, 253, 0.18);
    color: #6ea8fe;
    border: 1px solid rgba(13, 110, 253, 0.4);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--bg-deep) !important;
    color: var(--text);
    overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ============================================ */
/* ВЕРХНЯЯ ПЛАШКА ПОЛЬЗОВАТЕЛЯ                  */
/* ============================================ */
.user-bar {
    background: linear-gradient(180deg, #1a1d23, #14161b);
    border-bottom: 1px solid var(--border);
    padding: 8px 18px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
    flex-wrap: wrap;
}
.user-bar-brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px; color: #fff;
}
.user-bar-brand .icon {
    background: linear-gradient(135deg, #ffd95e, #ff9b3d, #ff5e8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 16px;
}

.user-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-2);
    transition: all 0.2s;
}
.user-pill:hover {
    background: var(--bg-card-2);
    border-color: var(--border-h);
    transform: translateY(-1px);
}
.user-pill i { color: var(--accent-h); font-size: 12px; }
.user-pill .label { color: var(--text-3); }
.user-pill .value {
    color: var(--text); font-weight: 600;
    font-family: 'Consolas', 'Courier New', monospace;
}
.user-pill .value.good { color: var(--success); }
.user-pill .value.warn { color: var(--warning); }
.user-pill .value.bad  { color: var(--danger); }

.user-bar-spacer { flex-grow: 1; }

/* Пульсирующая точка для статуса онлайн */
.pulse-dot {
    width: 7px; height: 7px;
    background: var(--success);
    border-radius: 50%;
    position: relative;
    display: inline-block;
}
.pulse-dot::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; background: var(--success);
    animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}
.user-pill.offline .pulse-dot { background: var(--danger); }
.user-pill.offline .pulse-dot::after { background: var(--danger); animation: none; }

/* Меню пользователя справа */
.user-menu {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.15s;
}
.user-menu:hover {
    background: var(--bg-card-2);
    border-color: var(--accent);
}
.user-menu .avatar {
    width: 24px; height: 24px;
    background: linear-gradient(135deg, #6ea8fe, #0d6efd);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 11px;
}
.user-menu .name {
    font-size: 12px; color: var(--text); font-weight: 500;
}
.user-menu .chev {
    color: var(--text-3); font-size: 10px;
}

.user-dropdown {
    position: absolute; top: 46px; right: 18px;
    background: #1a1d23;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    padding: 4px;
    min-width: 220px;
    z-index: 200;
    display: none;
}
.user-dropdown.open { display: block; }
.user-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    color: var(--text);
    text-decoration: none;
    border-radius: 5px;
    font-size: 13px;
    transition: background 0.15s;
}
.user-dropdown a:hover { background: var(--bg-card-2); }
.user-dropdown a i { color: var(--accent-h); font-size: 14px; width: 18px; }
.user-dropdown a.danger { color: var(--danger); }
.user-dropdown a.danger:hover { background: #842029; color: #fff; }
.user-dropdown a.danger i { color: var(--danger); }
.user-dropdown hr { border-color: var(--border); margin: 4px 0; }

/* ============================================ */
/* ЛЭЙАУТ                                       */
/* ============================================ */
.app-shell {
    display: flex;
    height: calc(100vh - 41px);
    width: 100vw;
}
.sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-deep);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: width 0.2s, margin-left 0.2s, left 0.2s;
}
.sidebar.collapsed { margin-left: -280px; }
.main-area {
    flex-grow: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}
.sidebar-overlay.show { display: block; }

@media (max-width: 767px) {
    .sidebar {
        position: fixed; left: -300px;
        top: 41px; bottom: 0; z-index: 100;
        margin-left: 0 !important;
    }
    .sidebar.open { left: 0; }
}

/* ============================================ */
/* САЙДБАР                                       */
/* ============================================ */
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.sidebar-projects {
    padding: 10px 12px;
    border-bottom: 1px solid #1f2128;
}
.sidebar-search {
    padding: 10px 12px;
    border-bottom: 1px solid #1f2128;
}

.chat-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.chat-group-label {
    font-size: 10px; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 8px 12px 4px;
    font-weight: 600;
}
.chat-item {
    display: flex; align-items: flex-start; gap: 4px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 2px;
}
.chat-item:hover {
    background: var(--bg-card);
    padding-left: 14px;
}
.chat-item.active {
    background: var(--bg-card-2);
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}
.chat-item-body { flex-grow: 1; min-width: 0; }
.chat-item-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-item-meta {
    color: var(--text-3); font-size: 11px;
    margin-top: 2px;
}
.chat-item-model {
    color: var(--accent-h); font-size: 11px; margin-top: 3px;
    font-family: 'Consolas', monospace;
    display: flex; align-items: center; gap: 5px;
}

.chat-item-menu {
    background: none; border: none;
    color: var(--text-3);
    padding: 4px 6px; border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.15s, color 0.15s;
}
.chat-item:hover .chat-item-menu { opacity: 1; }
.chat-item-menu:hover { background: var(--bg-card-2); color: #fff; }

/* Контекст-меню */
.context-menu {
    position: fixed;
    z-index: 200;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    padding: 4px;
    min-width: 200px;
}
.ctx-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    background: none; border: none;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer; font-size: 13px;
    text-align: left;
    transition: background 0.15s;
}
.ctx-item:hover { background: #2e3240; }
.ctx-item i { color: var(--accent-h); font-size: 14px; }
.ctx-item.ctx-danger { color: var(--danger); }
.ctx-item.ctx-danger:hover { background: #842029; color: #fff; }
.context-menu hr { border-color: var(--border); margin: 4px 0; }

/* Модалка переноса */
.move-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 300;
    display: flex;
    align-items: center; justify-content: center;
}
.move-modal-content {
    background: #1a1d23;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
}

/* Топ моделей в сайдбаре */
.sidebar-stats {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-deep);
}
.stats-title {
    font-size: 10px; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px; font-weight: 600;
}
.model-stats { display: flex; flex-direction: column; gap: 4px; }
.model-stat-row {
    display: grid;
    grid-template-columns: auto 1fr 50px 25px;
    align-items: center; gap: 6px; font-size: 11px;
}
.model-stat-name {
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'Consolas', monospace;
}
.model-stat-bar {
    height: 4px; background: var(--bg-card-2);
    border-radius: 2px; overflow: hidden;
}
.model-stat-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-h));
}
.model-stat-count {
    color: var(--text-3);
    font-family: 'Consolas', monospace;
    text-align: right;
}

/* ============================================ */
/* ИКОНКИ ВЕНДОРОВ (LOBE-ICONS)                 */
/* ============================================ */
.vendor-icon-wrap {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    padding: 6px;
    flex-shrink: 0;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.vendor-icon-wrap:hover {
    border-color: var(--border-h);
    transform: scale(1.05);
}
.vendor-icon-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.vendor-icon-wrap.mono img {
    filter: brightness(0) invert(1);
}
.vendor-icon-wrap.color {
    background: #fff;
    border-color: rgba(255,255,255,0.2);
}
.vendor-icon-wrap.color:hover { background: #f5f5f5; }
.vendor-icon-wrap.fallback::before {
    content: attr(data-letter);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
}
.vendor-icon-wrap.sm { width: 18px; height: 18px; padding: 2px; border-radius: 4px; }
.vendor-icon-wrap.xs { width: 14px; height: 14px; padding: 1px; border-radius: 3px; }
.vendor-icon-wrap.sm.fallback::before { font-size: 10px; }
.vendor-icon-wrap.xs.fallback::before { font-size: 8px; }

/* ============================================ */
/* ШАПКА ЧАТА                                    */
/* ============================================ */
.header-block {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.chat-title-icon {
    background: linear-gradient(135deg, #ffd95e, #ff9b3d, #ff5e8c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s ease-in-out infinite;
    display: inline-block;
}
@keyframes shimmer {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}

/* Триггер выбора модели */
.model-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    min-width: 260px;
    max-width: 340px;
    transition: all 0.2s;
}
.model-trigger:hover {
    border-color: var(--accent);
    background: var(--bg-card-2);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
}
.trigger-text { flex-grow: 1; min-width: 0; }
.trigger-text > #trigger-name {
    display: block; font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #fff;
}
.trigger-text .sub {
    display: block; font-size: 10px; color: var(--text-3); font-weight: 400; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chevron {
    color: var(--text-3); font-size: 14px;
    transition: all 0.2s;
}
/* ============================================ */
/* ПАНЕЛЬ ВЫБОРА МОДЕЛИ                          */
/* ============================================ */
.model-panel {
    position: fixed;
    z-index: 150;
    background: #1a1d23;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    width: 760px;
    max-width: calc(100vw - 28px);
    animation: panel-in 0.18s ease-out;
}
@keyframes panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel-top {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.panel-search { position: relative; margin-bottom: 10px; }
.panel-search input {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 10px 6px 30px;
    width: 100%; font-size: 13px;
}
.panel-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}
.panel-search .bi-search {
    position: absolute; left: 10px; top: 8px;
    color: var(--text-3); font-size: 12px;
}

.panel-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.panel-tab {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-2); border-radius: 14px;
    padding: 3px 10px; font-size: 12px;
    cursor: pointer; transition: all 0.15s;
}
.panel-tab:hover { background: var(--bg-card-2); }
.panel-tab.active {
    background: rgba(13, 110, 253, 0.2);
    border-color: var(--accent); color: #fff;
}
.panel-tab .count { color: var(--text-3); font-size: 10px; margin-left: 3px; }

.panel-tab-auto {
    background: rgba(170, 130, 255, 0.1);
    border-color: rgba(170, 130, 255, 0.3);
    color: #c4a8ff;
    font-weight: 600;
}
.panel-tab-auto.active {
    background: rgba(170, 130, 255, 0.3);
    border-color: rgba(170, 130, 255, 0.7);
    color: #fff;
}
.panel-tab-sep {
    display: inline-block;
    width: 1px; height: 18px;
    background: var(--border);
    margin: 0 4px;
}

.panel-body {
    max-height: 480px;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-h) transparent;
}
.panel-body::-webkit-scrollbar { width: 10px; }
.panel-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.panel-body::-webkit-scrollbar-thumb {
    background: var(--border-h);
    border-radius: 5px;
    border: 2px solid #1a1d23;
}

.vendor-section { margin-bottom: 6px; }
.vendor-section-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-3); font-weight: 600;
    padding: 8px 8px 4px;
}
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
@media (max-width: 850px) { .vendor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .vendor-grid { grid-template-columns: 1fr; } }

.model-card {
    display: flex; gap: 8px; align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.model-card:hover {
    background: var(--bg-card-2);
    border-color: var(--accent-h);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.model-card.selected {
    background: rgba(13, 110, 253, 0.12);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}
.model-card.selected::after {
    content: "✓";
    position: absolute; top: 6px; right: 10px;
    color: var(--accent-h); font-weight: 700; font-size: 14px;
}
.model-card .body { flex-grow: 1; min-width: 0; }
.model-card .title {
    font-size: 12px; font-weight: 600; color: #fff;
    margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-card .desc {
    font-size: 11px; color: var(--text-2);
    line-height: 1.35; margin-bottom: 4px;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.model-card .badges { display: flex; flex-wrap: wrap; gap: 3px; }
.badge-mini {
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px;
    padding: 1px 5px; border-radius: 8px; font-weight: 600;
}
.b-thinking { background: rgba(170,130,255,0.15); color: #c4a8ff; border: 1px solid rgba(170,130,255,0.3); }
.b-code     { background: rgba(76,175,80,0.15);  color: #8fdc94; border: 1px solid rgba(76,175,80,0.3); }
.b-fast     { background: rgba(255,193,7,0.15);  color: #ffd95e; border: 1px solid rgba(255,193,7,0.3); }
.b-new      { background: rgba(255,87,87,0.15);  color: #ff9494; border: 1px solid rgba(255,87,87,0.3); }
.b-vision   { background: rgba(0,200,255,0.15);  color: #7ed7ff; border: 1px solid rgba(0,200,255,0.3); }
.b-top      { background: rgba(255,165,0,0.15);  color: #ffc77a; border: 1px solid rgba(255,165,0,0.3); }

/* ============================================ */
/* СООБЩЕНИЯ                                     */
/* ============================================ */
#messages {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
#messages::-webkit-scrollbar { width: 8px; }
#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.msg {
    display: flex; flex-direction: column;
    margin-bottom: 16px;
    animation: msg-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msg-user { align-items: flex-end; }
.msg-bot  { align-items: flex-start; }

.msg-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}
.msg-user .msg-bubble {
    background: linear-gradient(135deg, #0d6efd, #0950c4);
    color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(13,110,253,0.2);
}
.msg-bot .msg-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 4px;
}
.msg-bot.error .msg-bubble {
    background: #842029;
    color: #fff;
    border-color: #a82a32;
}
.msg-image {
    max-width: 100%; max-height: 240px;
    border-radius: 8px; margin: 4px 0;
}

/* Markdown */
.msg-bot .msg-bubble p { margin: 0 0 8px 0; }
.msg-bot .msg-bubble p:last-child { margin-bottom: 0; }
.msg-bot .msg-bubble ul, .msg-bot .msg-bubble ol { margin: 4px 0 8px; padding-left: 20px; }
.msg-bot .msg-bubble li { margin-bottom: 4px; }
.msg-bot .msg-bubble h1, .msg-bot .msg-bubble h2, .msg-bot .msg-bubble h3 { margin: 12px 0 8px; color: #fff; }
.msg-bot .msg-bubble h1 { font-size: 1.4em; }
.msg-bot .msg-bubble h2 { font-size: 1.2em; }
.msg-bot .msg-bubble h3 { font-size: 1.1em; }
.msg-bot .msg-bubble strong { color: #fff; }
.msg-bot .msg-bubble a { color: var(--accent-h); }
.msg-bot .msg-bubble code:not(pre code) {
    background: rgba(255,255,255,0.08);
    padding: 1px 6px; border-radius: 4px;
    font-size: 0.9em; color: #f0a4a4;
}
.msg-bot .msg-bubble pre {
    background: #1a1d23 !important;
    border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px; margin: 8px 0;
    overflow-x: auto; position: relative;
}
.msg-bot .msg-bubble pre code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    background: transparent !important;
    padding: 0;
}

.code-copy-btn {
    position: absolute; top: 6px; right: 6px;
    background: rgba(255,255,255,0.08);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px; font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.code-copy-btn:hover {
    background: rgba(13,110,253,0.3);
    color: #fff;
    border-color: var(--accent);
}

.msg-tools { margin-bottom: 4px; }
.tool-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(13,110,253,0.2);
    color: var(--accent-h);
    margin-right: 4px;
    border: 1px solid rgba(13,110,253,0.4);
}

.msg-footer {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: 10px;
    margin-top: 6px;
}
.btn-copy-all {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-copy-all:hover {
    background: rgba(13,110,253,0.15);
    color: #fff;
    border-color: var(--accent);
}
.btn-copy-all.copied {
    background: rgba(110,199,125,0.15);
    border-color: var(--success);
    color: var(--success);
}
.msg-meta-inline {
    font-size: 11px; color: #888;
    font-family: 'Consolas', monospace;
    display: inline-flex; align-items: center; gap: 5px;
}

/* Спиннер */
.typing-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 12px 16px;
    max-width: 75%;
    margin-bottom: 14px;
    animation: msg-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.typing-dots {
    display: inline-flex; gap: 4px; align-items: center;
}
.typing-dots span {
    width: 7px; height: 7px;
    background: var(--accent-h);
    border-radius: 50%;
    animation: dot-bounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
    30%           { transform: translateY(-6px); opacity: 1; }
}
.typing-title { color: var(--text); font-size: 14px; font-weight: 500; }
.typing-sub { font-size: 11px; margin-top: 2px; color: var(--text-3); }
#typing-seconds { font-family: 'Consolas', monospace; color: var(--accent-h); }

/* ============================================ */
/* ПОЛЕ ВВОДА                                    */
/* ============================================ */
.input-block { padding: 12px 14px; border-top: 1px solid var(--border); }

#input {
    resize: none;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    color: var(--text);
    transition: all 0.15s;
}
#input:focus {
    background: var(--bg-card);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}

.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    transition: all 0.2s !important;
}
.btn-primary:hover:not(:disabled) {
    background: #1a7afd !important;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.25), 0 4px 12px rgba(13,110,253,0.4) !important;
    transform: translateY(-1px);
}

.attachments {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px dashed var(--border);
}
.attachment-thumb {
    position: relative; width: 60px; height: 60px;
    border-radius: 6px; overflow: hidden;
    background: var(--bg-deep);
}
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; }
.attach-remove {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,0.7);
    color: #fff; border: none; border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 10px;
}

.legend {
    font-size: 11px;
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 14px;
}
.legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
.legend-item i { color: var(--accent-h); }

kbd {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border-h);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: 'Consolas', monospace;
    font-size: 0.85em;
}

/* === Toggle для верхней плашки (мобилка) === */
.user-bar-toggle {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 50%;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: all 0.15s;
}
.user-bar-toggle:hover {
    background: var(--bg-card-2);
    color: #fff; border-color: var(--accent);
}
.user-bar-toggle i { font-size: 14px; }

/* На мобиле — кнопка видна, пилюли скрываются если collapsed */
@media (max-width: 767px) {
    .user-bar-toggle { display: inline-flex; }
    .user-bar.collapsed .user-pill { display: none; }
    .user-bar.collapsed { padding: 6px 14px; }
    .user-bar { flex-wrap: nowrap; overflow-x: auto; }
    .user-bar::-webkit-scrollbar { display: none; }
}
/* === Компактная шапка чата на мобиле === */
@media (max-width: 767px) {
    .header-block { padding: 8px 10px; }

    /* Триггер модели — только иконка + название, без описания */
    .model-trigger {
        min-width: 0;
        max-width: 130px;
        padding: 4px 6px 4px 4px;
        gap: 5px;
    }
    .model-trigger .trigger-text > #trigger-name {
        font-size: 12px;
    }
    .model-trigger .trigger-text .sub {
        display: none;
    }
    .vendor-icon-wrap { width: 26px; height: 26px; padding: 4px; }

    /* Заголовок чата — мельче */
    #current-chat-name { font-size: 14px; }
    .header-block small { font-size: 10px; }
    .chat-title-icon { font-size: 18px !important; }

    /* Кнопки справа — только иконки, меньше */
    #btn-refresh-stats, #btn-toggle-sidebar {
        padding: 3px 8px;
        font-size: 12px;
    }
}

/* === Очень узкая мобилка (телефоны в портретной) === */
@media (max-width: 480px) {
    .model-trigger { max-width: 100px; }
    .model-trigger .trigger-text > #trigger-name { font-size: 11px; }

    /* Прячем заголовок чата если совсем тесно — оставляем только иконку */
    .header-block h5#current-chat-name {
        max-width: 100px;
        font-size: 13px;
    }
    .header-block small { display: none; }

    /* Легенда снизу — прячем на узких экранах */
    .legend { display: none; }
}

/* === Скрываем toggle на десктопе (по умолчанию) === */
.user-bar-toggle { display: none; }

/* === Панель моделей — ограничиваем по высоте видимой области === */
/* Базовый .panel-body уже имеет max-height: 480px и overflow-y: auto.
   Просто делаем чтобы вся панель не уходила за низ экрана. */
.model-panel {
    max-height: calc(100vh - 70px);
}
/* Если высота экрана маленькая — уменьшаем panel-body */
@media (max-height: 700px) {
    .panel-body { max-height: calc(100vh - 200px) !important; }
}
@media (max-height: 500px) {
    .panel-body { max-height: 280px !important; }
}

/* На мобиле — кнопка toggle видна, ширина панели на весь экран */
@media (max-width: 767px) {
    .user-bar-toggle { display: inline-flex !important; }
    .model-panel {
        width: calc(100vw - 16px) !important;
        left: 8px !important;
    }
    .panel-body { max-height: calc(100vh - 220px) !important; }
}
/* === КОМПАКТНАЯ ПАНЕЛЬ МОДЕЛЕЙ НА МОБИЛЕ === */
@media (max-width: 767px) {
    /* Панель открывается на весь экран снизу. ВАЖНО: display управляется JS-ом! */
    .model-panel {
        position: fixed !important;
        top: 50px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        max-height: none !important;
        max-width: none !important;
        flex-direction: column;
    }
    /* Когда панель открыта (style.display=block из JS) — показываем как flex-колонку */
    .model-panel[style*="display: block"] { display: flex !important; }

    /* Шапка панели — компактнее */
    .panel-top { padding: 8px 10px; flex-shrink: 0; }
    .panel-search { margin-bottom: 6px; }
    .panel-search input { padding: 5px 10px 5px 28px; font-size: 12px; }
    .panel-search .bi-search { top: 7px; font-size: 11px; }

    /* Табы — мельче */
    .panel-tab {
        padding: 2px 8px;
        font-size: 11px;
    }
    .panel-tab .count { font-size: 9px; }
    .panel-tab-sep { height: 14px; }

    /* Тело панели — занимает всё доступное место со скроллом */
    .panel-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
    }

    /* Карточки — 1 колонка, компактные */
    .vendor-grid {
        grid-template-columns: 1fr !important;
        gap: 4px;
    }
    .vendor-section { margin-bottom: 4px; }
    .vendor-section-label { padding: 6px 6px 2px; font-size: 9px; }

    .model-card {
        padding: 7px 8px;
        gap: 6px;
    }
    .model-card .vendor-icon-wrap { width: 28px; height: 28px; padding: 4px; }
    .model-card .title { font-size: 11px; margin-bottom: 1px; }
    .model-card .desc {
        font-size: 10px;
        margin-bottom: 3px;
        -webkit-line-clamp: 1; /* 1 строка вместо 2 */
        line-height: 1.25;
    }
    .badge-mini { font-size: 8px; padding: 0 5px; }
    .model-card.selected::after { top: 4px; right: 6px; font-size: 12px; }
}
* === КАРТОЧКА АРТЕФАКТА === */
.artifact-card {
    margin: 14px 0;
    background: var(--bg-deep, #14161b);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
 
/* === ШАПКА === */
.artifact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    flex-wrap: wrap;
}
 
.artifact-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
 
.artifact-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
 
.artifact-name {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.artifact-meta {
    color: var(--text-3, #8a8e95);
    font-size: 11px;
    font-family: Consolas, monospace;
    margin-top: 2px;
}
 
.artifact-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
 
.art-btn {
    background: rgba(255,255,255,0.05);
    color: var(--text, #d4d4d4);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
 
.art-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}
 
.art-btn.active {
    background: rgba(13,110,253,0.18);
    border-color: rgba(13,110,253,0.4);
    color: #6ea8fe;
}
 
.art-btn.copied {
    background: rgba(110,199,125,0.2);
    color: #6ec77d;
    border-color: rgba(110,199,125,0.4);
}
 
.art-btn.art-download {
    background: rgba(13,110,253,0.15);
    color: #6ea8fe;
    border-color: rgba(13,110,253,0.35);
}
 
.art-btn.art-download:hover {
    background: rgba(13,110,253,0.25);
}
 
/* === ТЕЛО === */
.artifact-body {
    background: var(--bg-deep, #14161b);
}
 
/* HTML превью в iframe */
.artifact-preview {
    width: 100%;
    height: 420px;
    border: none;
    display: block;
    background: #fff;  /* белый фон для HTML страниц */
}
 
/* SVG превью */
.artifact-preview-svg {
    padding: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
 
.artifact-preview-svg svg {
    max-width: 100%;
    max-height: 400px;
}
 
/* Код */
.artifact-code {
    margin: 0;
    padding: 14px 16px;
    max-height: 500px;
    overflow: auto;
    background: var(--bg-deep, #14161b);
    border-radius: 0;
    font-family: Consolas, "SF Mono", Monaco, monospace;
    font-size: 12.5px;
    line-height: 1.5;
}
 
.artifact-code code {
    background: transparent !important;
    padding: 0 !important;
    color: #d4d4d4;
}
 
/* === МОБИЛЬНАЯ АДАПТАЦИЯ === */
@media (max-width: 640px) {
    .artifact-header {
        padding: 10px 12px;
    }
    .artifact-actions {
        width: 100%;
        justify-content: stretch;
    }
    .art-btn {
        flex: 1;
        justify-content: center;
    }
    .artifact-preview {
        height: 280px;
    }
    .artifact-code {
        font-size: 11.5px;
        max-height: 350px;
    }
}
/* === Чип файла в инпуте (под текстовым полем) === */
.attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 8px 10px 8px 12px;
    min-width: 200px;
    max-width: 280px;
    position: relative;
    transition: background 0.15s ease;
}
 
.attachment-file:hover {
    background: rgba(255,255,255,0.08);
}
 
.attachment-file.uploading {
    opacity: 0.7;
    border-color: rgba(13,110,253,0.4);
    background: rgba(13,110,253,0.08);
}
 
.attachment-file .file-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}
 
.attachment-file .file-info {
    min-width: 0;
    flex: 1;
}
 
.attachment-file .file-name {
    color: var(--text, #fff);
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.attachment-file .file-meta {
    color: var(--text-3, #8a8e95);
    font-size: 11px;
    margin-top: 2px;
}
 
.attachment-file .file-truncated {
    color: #e0b347;
}
 
.attachment-file .file-spinner i {
    display: inline-block;
    animation: filespin 1s linear infinite;
}
 
@keyframes filespin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
 
.attachment-file .attach-remove {
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text-2, #a0a4ab);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
 
.attachment-file .attach-remove:hover {
    background: rgba(255,124,124,0.2);
    color: #ff7c7c;
}
 
/* === Плашка файла в истории сообщений (под сообщением юзера) === */
.msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    justify-content: flex-end;
}
 
.msg-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-2, #d4d4d4);
}
 
.msg-file-chip .msg-file-size {
    color: var(--text-3, #8a8e95);
    font-size: 11px;
    font-family: Consolas, monospace;
}
 
/* === Мобильная адаптация === */
@media (max-width: 640px) {
    .attachment-file {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}
/**
 * Стили для инфо-кнопки о файлах и auto-grow textarea.
 * Добавьте в КОНЕЦ файла assets/style.css
 */

/* === AUTO-GROW TEXTAREA === */
#input {
    /* Минимальная высота как у одной строки. Растёт через JS. */
    min-height: 44px;
    max-height: 220px;
    resize: none;       /* убираем ручной resize в углу — у нас auto */
    overflow-y: hidden; /* JS включит auto когда нужно */
    transition: height 0.08s ease;
}

/* === ИНФО-КНОПКА РЯДОМ СО СКРЕПКОЙ === */
.btn-file-info {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-2, #a0a4ab);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s ease;
    margin-left: 4px;
}

.btn-file-info:hover {
    background: rgba(13,110,253,0.12);
    border-color: rgba(13,110,253,0.4);
    color: #6ea8fe;
}

/* === ПОПАП С ИНФОРМАЦИЕЙ === */
.file-info-popup {
    position: fixed;
    z-index: 9999;
    background: var(--bg-card, #14161b);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 12px;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4),
        0 0 20px rgba(13,110,253,0.1);
    padding: 0;
    color: var(--text, #d4d4d4);
    font-size: 13px;
    line-height: 1.5;
    animation: fipFadeIn 0.15s ease;
}

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

/* Маленькая стрелочка снизу попапа (указывает на кнопку) */
.fip-arrow {
    position: absolute;
    bottom: -7px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: var(--bg-card, #14161b);
    border-right: 1px solid var(--border, rgba(255,255,255,0.12));
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.12));
    transform: rotate(45deg);
}

.fip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px 12px 0 0;
    color: #fff;
    font-weight: 600;
}

.fip-header i {
    color: #6ea8fe;
    font-size: 16px;
}

.fip-body {
    padding: 14px 16px;
}

.fip-section {
    margin-bottom: 10px;
}

.fip-section:last-child { margin-bottom: 0; }

.fip-section-title {
    color: var(--text, #fff);
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
}

.fip-formats {
    color: var(--text-2, #a0a4ab);
    font-size: 12px;
    font-family: Consolas, monospace;
    line-height: 1.5;
}

.fip-divider {
    height: 1px;
    background: var(--border, rgba(255,255,255,0.08));
    margin: 12px 0;
}

.fip-limits-list {
    margin: 6px 0 0;
    padding-left: 18px;
    list-style: none;
}

.fip-limits-list li {
    color: var(--text-2, #c4c8d0);
    font-size: 12.5px;
    margin-bottom: 4px;
    position: relative;
}

.fip-limits-list li::before {
    content: "•";
    color: #6ea8fe;
    position: absolute;
    left: -14px;
    font-weight: bold;
}

.fip-limits-list b {
    color: #fff;
}

.fip-hint {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(13,110,253,0.08);
    border: 1px solid rgba(13,110,253,0.2);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--text-2, #c4c8d0);
    line-height: 1.5;
}

.fip-hint i {
    color: #e0b347;
    margin-right: 4px;
}

.fip-loading,
.fip-error {
    color: var(--text-3, #8a8e95);
    font-size: 12px;
    padding: 8px 0;
    text-align: center;
}

.fip-error {
    color: #ff7c7c;
}

/* === Мобильная адаптация === */
@media (max-width: 640px) {
    .file-info-popup {
        max-width: calc(100vw - 28px);
    }
    .btn-file-info {
        width: 34px;
        height: 34px;
    }
} 
/**
 * Стили для стриминга — тогглер и мигающий курсор.
 * Добавьте в КОНЕЦ файла assets/style.css
 */

/* === ТОГГЛЕР В ШАПКЕ === */
.stream-toggle {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-2, #a0a4ab);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.stream-toggle:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text, #d4d4d4);
    border-color: rgba(255,255,255,0.2);
}

.stream-toggle.active {
    background: rgba(13,110,253,0.15);
    border-color: rgba(13,110,253,0.4);
    color: #6ea8fe;
}

.stream-toggle.active:hover {
    background: rgba(13,110,253,0.22);
}

.stream-toggle .stream-icon {
    font-size: 14px;
}

.stream-toggle b {
    font-weight: 700;
    margin-left: 2px;
}

/* === МИГАЮЩИЙ КУРСОР ВО ВРЕМЯ СТРИМА === */
.msg.msg-streaming .msg-bubble {
    position: relative;
}

.streaming-cursor {
    display: inline-block;
    color: #6ea8fe;
    font-weight: bold;
    margin-left: 2px;
    animation: streamBlink 1s infinite;
    vertical-align: baseline;
    line-height: 1;
}

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

/* === Мобильная адаптация === */
@media (max-width: 640px) {
    .stream-toggle .stream-label {
        display: none;  /* на мобиле только иконка */
    }
    .stream-toggle {
        padding: 6px 8px;
    }
}
/**
 * Стили для AI-помощника уточнения запросов.
 * Добавьте в КОНЕЦ файла assets/style.css
 */

/* === КНОПКА "УТОЧНИТЬ" === */
.btn-assist {
    background: linear-gradient(135deg, rgba(170,130,255,0.15), rgba(110,168,254,0.15));
    border: 1px solid rgba(170,130,255,0.35);
    color: #c4a8ff;
    border-radius: 8px;
    padding: 6px 12px;
    height: 38px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    white-space: nowrap;
}

.btn-assist:hover {
    background: linear-gradient(135deg, rgba(170,130,255,0.25), rgba(110,168,254,0.25));
    border-color: rgba(170,130,255,0.55);
    color: #d4baff;
}

.btn-assist .assist-icon {
    font-size: 16px;
}

@media (max-width: 640px) {
    .btn-assist .assist-label { display: none; }
    .btn-assist { padding: 6px 10px; }
}

/* === МОДАЛКА === */
.assist-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: assistFadeIn 0.15s ease;
}

@keyframes assistFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.assist-modal {
    background: var(--bg-card, #14161b);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(170,130,255,0.1);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: assistModalIn 0.18s ease;
}

.assist-modal.wide {
    max-width: 680px;
}

@keyframes assistModalIn {
    from { transform: translateY(20px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.assist-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.02);
}

.assist-modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.assist-modal-close {
    background: none;
    border: none;
    color: var(--text-2, #a0a4ab);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}

.assist-modal-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.assist-modal-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
    color: var(--text, #d4d4d4);
    font-size: 13.5px;
    line-height: 1.5;
}

.assist-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    background: rgba(255,255,255,0.02);
}

.assist-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    color: var(--text, #d4d4d4);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.assist-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.3);
}

.assist-btn-primary {
    background: linear-gradient(135deg, #6ea8fe, #c4a8ff);
    border-color: transparent;
    color: #fff;
}

.assist-btn-primary:hover {
    background: linear-gradient(135deg, #5b9aef, #b696ee);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(110,168,254,0.3);
}

/* === СПИННЕР ЗАГРУЗКИ === */
.assist-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(170,130,255,0.2);
    border-top-color: #c4a8ff;
    border-radius: 50%;
    animation: assistSpin 0.8s linear infinite;
}

@keyframes assistSpin {
    to { transform: rotate(360deg); }
}

/* === БЛОК "ВАШ ЧЕРНОВИК" === */
.assist-draft {
    background: rgba(13,110,253,0.08);
    border: 1px solid rgba(13,110,253,0.2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.assist-draft-label {
    color: var(--text-3, #8a8e95);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.assist-draft-text {
    color: var(--text, #fff);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

/* === ВОПРОСЫ === */
.assist-questions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 14px;
}

.assist-q {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 12px 14px;
}

.assist-q-text {
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 10px;
}

.assist-q-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assist-opt {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-2, #c4c8d0);
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.assist-opt:hover {
    background: rgba(170,130,255,0.12);
    border-color: rgba(170,130,255,0.4);
    color: #fff;
}

.assist-opt.selected {
    background: linear-gradient(135deg, rgba(110,168,254,0.25), rgba(170,130,255,0.25));
    border-color: rgba(170,130,255,0.6);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(170,130,255,0.3);
}

.assist-q-custom {
    width: 100%;
    background: var(--bg-deep, #0f1115);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text, #d4d4d4);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 8px;
    font-family: inherit;
}

.assist-q-custom:focus {
    outline: none;
    border-color: rgba(170,130,255,0.5);
    box-shadow: 0 0 0 3px rgba(170,130,255,0.15);
}

/* === ПОДСКАЗКА === */
.assist-hint {
    background: rgba(170,130,255,0.08);
    border: 1px solid rgba(170,130,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-2, #c4c8d0);
    line-height: 1.5;
}

.assist-hint i {
    color: #e0b347;
    margin-right: 4px;
}
/* Бейдж "большой контекст" в карточке модели */
.badge-mini.b-longctx {
    background: rgba(80, 200, 180, 0.15);
    color: #5ed4c0;
    border: 1px solid rgba(80, 200, 180, 0.35);
}
/* Бейдж "гигантский контекст" 1M — золотой/оранжевый */
.badge-mini.b-megactx {
    background: linear-gradient(135deg, rgba(255,165,0,0.18), rgba(255,100,50,0.18));
    color: #ffb454;
    border: 1px solid rgba(255,165,0,0.4);
    font-weight: 600;
}
/* Кнопка "Картинка" — ведёт на art.gptru.pro */
.btn-image-gen {
    background: linear-gradient(135deg, rgba(255,120,180,0.15), rgba(255,180,80,0.15));
    border: 1px solid rgba(255,120,180,0.35);
    color: #ff9ec4;
    border-radius: 8px;
    padding: 6px 12px;
    height: 38px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    white-space: nowrap;
}
.btn-image-gen:hover {
    background: linear-gradient(135deg, rgba(255,120,180,0.25), rgba(255,180,80,0.25));
    border-color: rgba(255,120,180,0.55);
    color: #ffb3d4;
}
.btn-image-gen .img-icon { font-size: 16px; }
@media (max-width: 640px) {
    .btn-image-gen .img-label { display: none; }
    .btn-image-gen { padding: 6px 10px; }
}
/* Бейдж "3 free" на кнопке генерации изображений */
.btn-image-gen .img-badge {
    background: rgba(110,199,125,0.25);
    color: #6ec77d;
    border: 1px solid rgba(110,199,125,0.45);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
    line-height: 1.5;
}
/* На мобиле бейдж тоже скрываем вместе с подписью */
@media (max-width: 640px) {
    .btn-image-gen .img-badge { display: none; }
}
/* === ПРИВЕТСТВЕННОЕ СООБЩЕНИЕ === */
.welcome-bubble {
    font-size: 13px;
    line-height: 1.55;
}
.welcome-bubble p { margin: 0 0 10px; }

/* Блок-рамка (общее) */
.welcome-box {
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px 0;
}
.welcome-box-title {
    font-weight: 700;
    margin: 0 0 8px !important;
    font-size: 13.5px;
}
.welcome-list {
    margin: 0;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.5;
}
.welcome-list li { margin-bottom: 5px; }

/* "Что я умею" — бледная серая рамка */
.welcome-box-can {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
}

/* "Что нового" — выделенная рамка (синий акцент) */
.welcome-box-new {
    background: rgba(13,110,253,0.07);
    border: 1px solid rgba(13,110,253,0.3);
}

.welcome-cta {
    font-size: 12.5px;
    color: var(--text-2);
}
/* === КНОПКА "ПЕРЕПИСАТЬ" === */
.btn-regen {
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-2, #a0a4ab);
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
}
.btn-regen:hover {
    background: rgba(170,130,255,0.12);
    border-color: rgba(170,130,255,0.4);
    color: #c4a8ff;
}

/* === МЕНЮ ВЫБОРА МОДЕЛИ ДЛЯ ПЕРЕГЕНЕРАЦИИ === */
.regen-menu {
    position: fixed;
    z-index: 9999;
    background: var(--bg-card, #14161b);
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    padding: 6px;
    min-width: 220px;
    animation: regenFadeIn 0.12s ease;
}
@keyframes regenFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.regen-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text, #d4d4d4);
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s;
}
.regen-menu-item:hover {
    background: rgba(170,130,255,0.15);
    color: #fff;
}
/**
 * Стили для шаблонов запросов.
 * Добавьте в КОНЕЦ файла assets/style.css
 */

/* === ЧИПЫ ПОД ПРИВЕТСТВИЕМ === */
.tpl-chips-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.tpl-chips-title {
    font-size: 12px;
    color: var(--text-3, #8a8e95);
    margin-bottom: 8px;
    font-weight: 600;
}
.tpl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.tpl-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-2, #c4c8d0);
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.tpl-chip:hover {
    background: rgba(13,110,253,0.14);
    border-color: rgba(13,110,253,0.4);
    color: #6ea8fe;
    transform: translateY(-1px);
}

/* === КНОПКА "ШАБЛОНЫ" === */
.btn-templates {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text-2, #a0a4ab);
    border-radius: 8px;
    padding: 6px 12px;
    height: 38px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    white-space: nowrap;
}
.btn-templates:hover {
    background: rgba(13,110,253,0.12);
    border-color: rgba(13,110,253,0.4);
    color: #6ea8fe;
}
.btn-templates .tpl-icon { font-size: 15px; }
@media (max-width: 640px) {
    .btn-templates .tpl-label { display: none; }
    .btn-templates { padding: 6px 10px; }
}

/* === ПОПАП ШАБЛОНОВ === */
.tpl-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: tplFade 0.15s ease;
}
@keyframes tplFade { from { opacity: 0; } to { opacity: 1; } }

.tpl-popup {
    background: var(--bg-card, #14161b);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tpl-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.tpl-popup-header h3 { margin: 0; color: #fff; font-size: 16px; font-weight: 600; }
.tpl-popup-close {
    background: none; border: none; color: var(--text-2, #a0a4ab);
    font-size: 26px; line-height: 1; cursor: pointer;
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.tpl-popup-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

.tpl-popup-body {
    padding: 16px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.tpl-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.tpl-card:hover {
    background: rgba(13,110,253,0.1);
    border-color: rgba(13,110,253,0.4);
    transform: translateY(-2px);
}
.tpl-card-icon { font-size: 26px; }
.tpl-card-title { color: var(--text, #d4d4d4); font-size: 13px; font-weight: 500; }

@media (max-width: 480px) {
    .tpl-popup-body { grid-template-columns: 1fr; }
}