:root {
           /* Основные цвета - чистая бирюзово-синяя гамма */
           --primary: #40E0D0;           /* Чистый бирюзовый из логотипа */
           --primary-rgb: 64, 224, 208;
           --primary-dark: #2BA5A0;      /* Темная бирюза (НЕ зеленая!) */
           --primary-dark-rgb: 43, 165, 160;
           
           /* Вторичные цвета для элементов UI */
           --secondary: #1A3A52;         /* Темно-синий с серым оттенком */
           --secondary-dark: #0F2435;    /* Очень темный синий */
           
           /* Фоновые цвета - почти черные с легким бирюзовым оттенком */
           --background: #0A0F14;        /* Почти черный с легким холодным оттенком */
           --background-light: #111922;   /* Чуть светлее, но все еще очень темный */
           --panel-dark: #060A0D;        /* Самый темный для панелей */
           
           /* Текстовые цвета */
           --text: #F0F4F8;              /* Почти белый с холодным оттенком */
           --text-dim: #7DD3C0;          /* Приглушенная бирюза */
           
           /* Функциональные цвета */
           --success: #5EEAD4;           /* Светлая бирюза для успеха */
           --error: #F87171;             /* Коралловый для ошибок */
           --link: #67E8F9;              /* Светло-голубой для ссылок */
           
           /* Дополнительные оттенки из логотипа */
           --turquoise-light: #40E0D0;   /* Яркий бирюзовый из логотипа */
           --turquoise: #2DD4BF;         /* Средняя бирюза */
           --turquoise-rgb: 45, 212, 191;
           --turquoise-dark: #1E7B7B;    /* Темная бирюза */
           --turquoise-darker: #0F4C4C;  /* Очень темная бирюза */

           /* Theme helpers */
           --ui-contrast-rgb: 255, 255, 255;
       }

       /* Light theme by system preference (default when no manual override set) */
       @media (prefers-color-scheme: light) {
           :root {
               --primary: #0F766E;
               --primary-rgb: 15, 118, 110;
               --primary-dark: #0B5B55;
               --primary-dark-rgb: 11, 91, 85;

               --secondary: #EAF7F5;
               --secondary-dark: #FFFFFF;

               --background: #F8FFFE;
               --background-light: #FFFFFF;
               --panel-dark: #EAF7F5;

               --text: #062E2B;
               --text-dim: #4B6B69;

               --success: #0F766E;
               --error: #EF4444;
               --link: #0F766E;

               --turquoise-light: #14B8A6;
               --turquoise: #0F766E;
               --turquoise-rgb: 15, 118, 110;
               --turquoise-dark: #0B5B55;
               --turquoise-darker: #064E4A;

               --ui-contrast-rgb: 6, 46, 43;
           }
       }

       /* Manual overrides via html[data-theme="light" | "dark"] */
       html[data-theme="dark"] {
           color-scheme: dark;

           --primary: #40E0D0;
           --primary-rgb: 64, 224, 208;
           --primary-dark: #2BA5A0;
           --primary-dark-rgb: 43, 165, 160;

           --secondary: #1A3A52;
           --secondary-dark: #0F2435;

           --background: #0A0F14;
           --background-light: #111922;
           --panel-dark: #060A0D;

           --text: #F0F4F8;
           --text-dim: #7DD3C0;

           --success: #5EEAD4;
           --error: #F87171;
           --link: #67E8F9;

           --turquoise-light: #40E0D0;
           --turquoise: #2DD4BF;
           --turquoise-rgb: 45, 212, 191;
           --turquoise-dark: #1E7B7B;
           --turquoise-darker: #0F4C4C;

           --ui-contrast-rgb: 255, 255, 255;
       }

       html[data-theme="light"] {
           color-scheme: light;

           --primary: #0F766E;
           --primary-rgb: 15, 118, 110;
           --primary-dark: #0B5B55;
           --primary-dark-rgb: 11, 91, 85;

           --secondary: #EAF7F5;
           --secondary-dark: #FFFFFF;

           --background: #F8FFFE;
           --background-light: #FFFFFF;
           --panel-dark: #EAF7F5;

           --text: #062E2B;
           --text-dim: #4B6B69;

           --success: #0F766E;
           --error: #EF4444;
           --link: #0F766E;

           --turquoise-light: #14B8A6;
           --turquoise: #0F766E;
           --turquoise-rgb: 15, 118, 110;
           --turquoise-dark: #0B5B55;
           --turquoise-darker: #064E4A;

           --ui-contrast-rgb: 6, 46, 43;
       }

       /* Глобальный сброс для предотвращения двойных скроллбаров */
       html {
           color-scheme: dark;
           height: 100%;
           overflow: hidden;  /* Предотвращаем скролл на html */
       }

       @media (prefers-color-scheme: light) {
           html {
               color-scheme: light;
           }
       }
       
       html, body {
           margin: 0;
           padding: 0;
           width: 100%;
       }

       /* Кастомные стили для скроллбаров - Webkit браузеры (Chrome, Safari, Edge) */
       ::-webkit-scrollbar {
           width: 12px;  /* Ширина вертикального скроллбара */
           height: 12px; /* Высота горизонтального скроллбара */
       }

       ::-webkit-scrollbar-track {
           background: var(--background);
           border-radius: 6px;
       }

       ::-webkit-scrollbar-thumb {
           background: linear-gradient(145deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-dark-rgb), 0.3));
           border-radius: 6px;
           border: 2px solid var(--background);
           transition: all 0.3s ease;
       }

       ::-webkit-scrollbar-thumb:hover {
           background: linear-gradient(145deg, var(--turquoise), var(--turquoise-light));
           border: 2px solid var(--background-light);
       }

       ::-webkit-scrollbar-thumb:active {
           background: var(--primary);
       }

       /* Для Firefox */
       * {
           scrollbar-width: thin;
           scrollbar-color: var(--secondary) var(--background);
       }

       /* Специальные стили для основных контейнеров */
       .container::-webkit-scrollbar,
       #chat::-webkit-scrollbar,
       .conversations-list::-webkit-scrollbar,
       .modal-content::-webkit-scrollbar {
           width: 10px;
       }
       
       /* Стили для плавных переходов между диалогами */
       #chat {
           position: relative;
           /* transition убран - будет только в одном месте */
       }
       
       /* Предотвращаем мерцание при загрузке */
       .chat-loading {
           pointer-events: none;
           user-select: none;
       }
       
       /* Анимация появления сообщений при первой загрузке */
       @keyframes fadeInUp {
           from {
               opacity: 0;
               transform: translateY(10px);
           }
           to {
               opacity: 1;
               transform: translateY(0);
           }
       }
       
       /* Стиль для оверлея перехода */
       #chat-transition-container {
           backdrop-filter: blur(5px);
           background: rgba(10, 15, 20, 0.95) !important;
       }

       .container::-webkit-scrollbar-thumb,
       #chat::-webkit-scrollbar-thumb,
       .conversations-list::-webkit-scrollbar-thumb,
       .modal-content::-webkit-scrollbar-thumb {
           background: rgba(var(--primary-rgb), 0.3);
           border: 1px solid var(--background);
       }

       .container::-webkit-scrollbar-thumb:hover,
       #chat::-webkit-scrollbar-thumb:hover,
       .conversations-list::-webkit-scrollbar-thumb:hover,
       .modal-content::-webkit-scrollbar-thumb:hover {
           background: rgba(var(--primary-rgb), 0.5);
       }

       /* Стили для текстовых полей и textarea */
       textarea::-webkit-scrollbar,
       input[type="text"]::-webkit-scrollbar {
           width: 8px;
           height: 8px;
       }

       textarea::-webkit-scrollbar-thumb,
       input[type="text"]::-webkit-scrollbar-thumb {
           background: rgba(148, 163, 184, 0.3);
           border-radius: 4px;
       }

       textarea::-webkit-scrollbar-track,
       input[type="text"]::-webkit-scrollbar-track {
           background: var(--secondary-dark);
           border-radius: 4px;
       }

       /* Для планшетов */
       @media (min-width: 769px) and (max-width: 1024px) {
           ::-webkit-scrollbar {
               width: 10px;
               height: 10px;
           }

           ::-webkit-scrollbar-thumb {
               background: rgba(var(--primary-rgb), 0.4);
           }
       }

       body {
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           line-height: 1.5;
           margin: 0;
           padding: 0;  /* Убираем padding с body */
           background: linear-gradient(135deg, var(--background), var(--background-light));
           color: var(--text);
           height: 100vh;  /* Фиксированная высота viewport */
           overflow: hidden;  /* Предотвращаем скролл на body */
           display: flex;
       }

       .container {
           width: 100%;
           height: 100vh;  /* Занимает полную высоту viewport */
           overflow: hidden;  /* Предотвращаем скролл на контейнере */
           display: flex;
           flex-direction: column;
           padding: 20px;  /* Перемещаем padding сюда */
           box-sizing: border-box;
       }

       #conversations-panel {
           position: fixed;
           top: 0;
           left: 0;
           bottom: 0;
           width: 230px; /* Оптимальная ширина 230px */
           background: linear-gradient(to right, var(--background), var(--background-light));
           border-right: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
           padding: 15px 10px 10px 10px; /* 15px сверху, 10px с остальных сторон */
           z-index: 2;
           display: flex;
           flex-direction: column;
           overflow: hidden;  /* Предотвращаем скролл на панели */
           transition: transform 0.3s ease, opacity 0.3s ease;
       }
       
       /* Состояние когда панель скрыта */
       #conversations-panel.collapsed {
           transform: translateX(-100%);
           opacity: 0;
       }
       
       /* Свернутая версия панели */
       #conversations-panel-collapsed {
           position: fixed;
           top: 0;
           left: 0;
           bottom: 0;
           width: 50px;
           background: linear-gradient(to right, var(--background), var(--background-light));
           border-right: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
           z-index: 2;
           display: flex;
           flex-direction: column;
           align-items: center;
           padding: 15px 0;
           transition: opacity 0.3s ease;
       }
       
       .collapsed-header {
           display: flex;
           flex-direction: column;
           gap: 10px;
           align-items: center;
       }
       
       .sidebar-expand-btn {
           background: transparent !important;
           border: none !important;
           color: var(--text-dim);
           cursor: pointer;
           padding: 6px;
           border-radius: 8px;
           transition: color 0.2s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
       }
       
       .sidebar-expand-btn:hover {
           background: transparent !important;
           color: var(--text);  /* Только меняем цвет */
           transform: none !important;
       }
       
       .sidebar-expand-btn:active,
       .sidebar-expand-btn:focus {
           background: transparent !important;
           transform: none !important;
           outline: none;
       }
       
       .new-chat-icon-btn-collapsed {
           background: linear-gradient(135deg, #1E7B7B, #2BA5A0);
           border: none;
           color: white;
           cursor: pointer;
           padding: 6px;
           border-radius: 8px;
           transition: all 0.2s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
       }
       
       .new-chat-icon-btn-collapsed:hover {
           background: linear-gradient(135deg, #0F4C4C, #1E7B7B);
       }
       
       .sidebar-expand-btn svg {
           width: 20px;
           height: 20px;
           flex-shrink: 0;
       }
       
       .new-chat-icon-btn-collapsed svg {
           width: 18px;  /* Размер иконки в свернутой панели */
           height: 18px;
           flex-shrink: 0;
       }

       .app-header {
           display: flex;
           align-items: center;
           gap: 10px;
           margin-bottom: 15px; /* Оптимальный отступ после хедера */
           position: relative;
       }

       .app-logo {
           width: 32px;
           height: 32px;
           object-fit: contain;
       }

       .app-title-wrapper {
           display: flex;
           flex-direction: column;
           line-height: 1.1;
           padding-right: 44px; /* Резервируем место под кнопку сворачивания (32px + небольшой запас) */
       }

       .app-title-line1 {
           color: var(--text);
           font-size: 16px;
           font-weight: 600;
       }

       .app-title-line2 {
           color: var(--text);
           font-size: 16px;
           font-weight: 600;
       }

       /* Кнопка сворачивания панели */
       .sidebar-toggle-btn {
           position: absolute;
           right: 0px;
           top: 50%;
           transform: translateY(-50%);
           background: transparent !important;
           border: none !important;
           color: var(--text-dim);
           cursor: pointer;
           padding: 0;  /* Переопределяем глобальный padding */
           font-size: inherit;  /* Переопределяем глобальный font-size */
           border-radius: 8px;
           transition: color 0.2s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 32px;
           height: 32px;
       }
       
       .sidebar-toggle-btn:hover {
           background: transparent !important;
           color: var(--text);  /* Только меняем цвет */
           transform: translateY(-50%) !important;  /* Сохраняем центрирование! */
       }
       
       .sidebar-toggle-btn:active,
       .sidebar-toggle-btn:focus {
           background: transparent !important;
           transform: translateY(-50%) !important;
           outline: none;
       }
       
       .sidebar-toggle-btn svg {
           width: 20px;
           height: 20px;
           flex-shrink: 0;
       }

       /* Новая кнопка с плюсиком в хедере */
       .new-chat-icon-btn {
           position: absolute;
           right: 40px;  /* Подвинули правее как просил пользователь */
           top: 50%;
           transform: translateY(-50%);
           width: 32px;
           height: 32px;
           aspect-ratio: 1;
           border-radius: 8px;
           background: linear-gradient(135deg, #1E7B7B, #2BA5A0);
           border: none;
           color: white;
           cursor: pointer;
           padding: 0;  /* Переопределяем глобальный padding */
           font-size: inherit;  /* Переопределяем глобальный font-size */
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.2s ease;
           flex-shrink: 0;
       }

       .new-chat-icon-btn:hover {
           background: linear-gradient(135deg, #0F4C4C, #1E7B7B);
           transform: translateY(-50%) !important;  /* Сохраняем центрирование! */
       }

       /* Убран эффект при клике */

       .new-chat-icon-btn svg {
           width: 18px;  /* Размер для иконки чата */
           height: 18px;
       }

       /* Тултип для кнопки */
       /* Убрал position: relative - он ломал абсолютное позиционирование! */

       .new-chat-icon-btn[data-tooltip]:hover::after {
           content: attr(data-tooltip);
           position: absolute;
           top: calc(100% + 8px);
           right: 0;
           background: var(--secondary-dark);
           color: var(--text);
           padding: 6px 12px;
           border-radius: 6px;
           font-size: 13px;
           white-space: nowrap;
           z-index: 10000;
           pointer-events: none;
           opacity: 0;
           animation: tooltipFadeIn 0.2s ease-in-out forwards;
       }

       .new-chat-icon-btn[data-tooltip]:hover::before {
           content: '';
           position: absolute;
           top: calc(100% + 3px);
           right: 14px;
           border: 5px solid transparent;
           border-bottom-color: var(--secondary-dark);
           z-index: 10000;
           opacity: 0;
           animation: tooltipFadeIn 0.2s ease-in-out forwards;
       }

       /* ====== Sidebar actions (New chat / Search) ====== */
       .sidebar-actions {
           display: flex;
           flex-direction: column;
           gap: 4px;
           margin: 0 0 10px;
       }

       .sidebar-action-btn {
           width: 100%;
           /* <button>-пункты получают border-box из глобального ресета, а <a>-пункты
              («Поддержка», а в публичном демо-кабинете — почти все пункты) без него
              оставались content-box: width:100% + padding вылезал на ~20px вправо за
              панель — та самая «полоска до края» на подсветке. Фиксируем box-sizing. */
           box-sizing: border-box;
           display: flex;
           align-items: center;
           gap: 8px;
           padding: 8px 10px;
           border-radius: 10px;
           border: none;
           background: rgba(var(--ui-contrast-rgb), 0.02);
           color: var(--text);
           cursor: pointer;
           transition: background 0.15s ease;
           text-align: left;
           /* Шрифт меню — как у кнопок-<button> (Arial): <a>-пункты («Поддержка»,
              «Мои документы», «Новости») иначе наследовали Inter и выбивались.
              Явный Arial для ВСЕХ пунктов сайдбара — единообразно (выбор заказчика). */
           font-family: Arial, Helvetica, sans-serif;
       }

       .sidebar-action-btn:hover {
           background: rgba(var(--ui-contrast-rgb), 0.06);
           transform: none;
       }

       .sidebar-action-btn:active {
           background: rgba(var(--ui-contrast-rgb), 0.08);
       }

       /* Активный встроенный раздел (Документы / Новости) — единственная
          достоверная подсветка «где я сейчас». Кольцо :focus от мыши гасим,
          чтобы последний кликнутый пункт не выглядел «активным» ошибочно;
          клавиатурную доступность (:focus-visible) сохраняем. */
       .sidebar-action-btn.is-section-active {
           background: rgba(var(--primary-rgb), 0.14);
           color: var(--primary);
       }
       .sidebar-action-btn:focus:not(:focus-visible) {
           outline: none;
       }

       .sidebar-action-btn svg {
           width: 18px;
           height: 18px;
           flex-shrink: 0;
           color: rgba(var(--primary-rgb), 0.85);
       }

       .sidebar-action-btn--primary {
           background: linear-gradient(
               135deg,
               rgba(var(--primary-rgb), 0.22),
               rgba(var(--primary-dark-rgb), 0.12)
           );
       }

       .sidebar-action-btn--primary svg {
           color: var(--text);
       }

       .sidebar-action-label {
           font-size: 13px;
           font-weight: 500;
           line-height: 1.25;
       }

       .sidebar-action-hint {
           margin-left: auto;
           color: rgba(var(--ui-contrast-rgb), 0.55);
           font-size: 12px;
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.14);
           background: rgba(var(--ui-contrast-rgb), 0.08);
           padding: 2px 7px;
           border-radius: 999px;
       }

       .collapsed-actions {
           display: flex;
           flex-direction: column;
           gap: 8px;
           align-items: center;
           margin-top: 10px;
       }

       .sidebar-icon-btn-collapsed {
           background: rgba(var(--ui-contrast-rgb), 0.02);
           border: none;
           color: var(--text-dim);
           cursor: pointer;
           padding: 6px;
           border-radius: 8px;
           transition: all 0.2s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
       }

       .sidebar-icon-btn-collapsed:hover {
           background: rgba(var(--ui-contrast-rgb), 0.06);
           color: var(--text);
       }

       .sidebar-icon-btn-collapsed svg {
           width: 18px;
           height: 18px;
           flex-shrink: 0;
       }

       /* Подсветка активного раздела в свёрнутой панели (как в развёрнутой). */
       .sidebar-icon-btn-collapsed.is-section-active {
           background: rgba(var(--primary-rgb), 0.14);
           color: var(--primary);
       }
       .sidebar-icon-btn-collapsed.is-section-active svg { color: var(--primary); }

       /* Тонкий разделитель между основными и второстепенными иконками (свёрнутая панель). */
       .collapsed-divider {
           width: 22px;
           height: 1px;
           background: rgba(var(--ui-contrast-rgb), 0.12);
           margin: 2px 0;
       }

       /* «Другие возможности» — сворачиваемая группа второстепенных пунктов
          (Поиск, Правила для ИИ, Поддержка), чтобы не перегружать список разделов. */
       .sidebar-more { display: flex; flex-direction: column; }
       /* Заголовок-переключатель выглядит как обычный пункт меню (без жирного),
          слева — шеврон-«галочка» вниз (как «More» в Claude Code), который
          разворачивается вверх при открытии группы. */
       .sidebar-more__header {
           width: 100%;
           display: flex;
           align-items: center;
           gap: 8px;
           padding: 8px 10px;
           border-radius: 10px;
           border: none;
           background: transparent;
           color: var(--text);
           cursor: pointer;
           transition: background 0.15s ease;
           text-align: left;
       }
       .sidebar-more__header:hover { background: rgba(var(--ui-contrast-rgb), 0.06); }
       .sidebar-more__chevron {
           width: 18px;
           height: 18px;
           flex-shrink: 0;
           transition: transform 0.18s ease;
           color: rgba(var(--ui-contrast-rgb), 0.55);
       }
       .sidebar-more.is-open .sidebar-more__chevron { transform: rotate(180deg); }
       .sidebar-more__body {
           display: none;
           flex-direction: column;
           gap: 4px;
           margin-top: 4px;
       }
       .sidebar-more.is-open .sidebar-more__body { display: flex; }
       /* Ссылка «Поддержка» внутри группы выглядит как обычный пункт-кнопка. */
       a.sidebar-action-btn { text-decoration: none; }

       /* Оверлей перетаскивания файлов (общий для личного и орг-шелла; раньше жил
          инлайном только в chat_2.html — из-за этого в орг-шелле он не прятался). */
       .file-drop-overlay { position: fixed; inset: 0; z-index: 100100; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); pointer-events: none; }
       .file-drop-overlay.is-active { display: flex; }
       .file-drop-overlay__box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 52px; border: 2px dashed rgba(var(--primary-rgb), .8); border-radius: 18px; background: var(--background); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); max-width: min(86vw, 460px); }
       .file-drop-overlay__box svg { color: var(--primary); }
       .file-drop-overlay__title { font-size: 17px; font-weight: 600; }
       .file-drop-overlay__hint { font-size: 13px; color: var(--text-dim); text-align: center; }

       /* ====== Chat search modal ====== */
       .chat-search-overlay {
           position: fixed;
           inset: 0;
           z-index: 100000;
           display: none;
           background: rgba(0, 0, 0, 0.55);
           backdrop-filter: blur(8px);
           padding: 16px;
           box-sizing: border-box;
       }

       .chat-search-modal {
           width: min(820px, 100%);
           max-height: min(720px, calc(100vh - 32px - 8vh));
           max-height: min(720px, calc(100svh - 32px - 8vh));
           margin: 8vh auto 0;
           background: var(--secondary-dark);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
           border-radius: 20px;
           box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
           overflow: hidden;
           display: flex;
           flex-direction: column;
       }

       .chat-search-header {
           padding: 12px 12px 10px;
           border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
       }

       .chat-search-input-row {
           display: flex;
           align-items: center;
           gap: 10px;
           padding: 8px 10px;
           border-radius: 12px;
           background: rgba(var(--ui-contrast-rgb), 0.06);
           border: none;
       }

       .chat-search-input-row svg {
           color: var(--text-dim);
           flex-shrink: 0;
       }

       .chat-search-input {
           flex: 1;
           min-width: 0;
           border: none;
           outline: none;
           background: transparent;
           color: var(--text);
           font-size: 14px;
       }

       .chat-search-input::placeholder {
           color: rgba(var(--ui-contrast-rgb), 0.40);
       }

       .chat-search-close {
           background: transparent;
           border: none;
           color: rgba(var(--ui-contrast-rgb), 0.7);
           cursor: pointer;
           padding: 6px;
           border-radius: 10px;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: background 0.15s ease, color 0.15s ease;
       }

       .chat-search-close:hover {
           background: rgba(var(--ui-contrast-rgb), 0.06);
           color: var(--text);
       }

       .chat-search-hints {
           margin-top: 10px;
           display: flex;
           justify-content: space-between;
           gap: 12px;
           font-size: 12px;
           color: rgba(var(--ui-contrast-rgb), 0.55);
       }

       .chat-search-hints__right {
           color: rgba(var(--ui-contrast-rgb), 0.45);
           white-space: nowrap;
       }

       .chat-search-results {
           flex: 1;
           min-height: 0;
           overflow: auto;
           padding: 6px;
           display: flex;
           flex-direction: column;
           gap: 4px;
           overscroll-behavior: contain;
           -webkit-overflow-scrolling: touch;
           scrollbar-gutter: stable;
       }

       .chat-search-result {
           width: 100%;
           display: flex;
           align-items: flex-start;
           gap: 10px;
           padding: 8px 10px;
           border-radius: 10px;
           border: 1px solid transparent;
           background: transparent;
           color: var(--text);
           cursor: pointer;
           text-align: left;
       }

       .chat-search-result:hover {
           background: rgba(var(--ui-contrast-rgb), 0.06);
           border-color: rgba(var(--ui-contrast-rgb), 0.08);
           transform: none;
       }

       .chat-search-result.is-active {
           background: rgba(var(--ui-contrast-rgb), 0.08);
           border-color: rgba(var(--ui-contrast-rgb), 0.12);
       }

       .chat-search-badges {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           flex-shrink: 0;
       }

       .chat-search-badge--expert {
           background: linear-gradient(135deg, #1E7B7B, #2BA5A0);
           color: white;
           padding: 1px 6px;
           border-radius: 6px;
           font-size: 10px;
           font-weight: 700;
           line-height: 1.6;
       }

       .chat-search-badge--favorite {
           color: rgba(var(--ui-contrast-rgb), 0.8);
           display: inline-flex;
           align-items: center;
           justify-content: center;
       }

       .chat-search-text {
           flex: 1;
           min-width: 0;
           display: flex;
           flex-direction: column;
           gap: 2px;
           padding-top: 1px;
       }

       .chat-search-result-title {
           min-width: 0;
           font-size: 14px;
           line-height: 1.25;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .chat-search-result-snippet {
           font-size: 12.5px;
           line-height: 1.35;
           color: rgba(var(--ui-contrast-rgb), 0.62);
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
       }

       .chat-search-result-role {
           color: rgba(var(--ui-contrast-rgb), 0.45);
       }

       .chat-search-highlight {
           background: rgba(var(--primary-rgb), 0.22);
           color: var(--text);
           padding: 0 2px;
           border-radius: 4px;
       }

       .chat-search-empty {
           padding: 12px 12px;
           color: rgba(var(--ui-contrast-rgb), 0.65);
           font-size: 14px;
       }

       .chat-search-footer {
           padding: 8px 12px;
           border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
           display: flex;
           justify-content: space-between;
           gap: 10px;
           font-size: 12px;
           color: rgba(var(--ui-contrast-rgb), 0.50);
       }

	       @media (max-width: 768px) {
	           .chat-search-modal {
	               margin: 10vh auto 0;
	               max-height: min(720px, calc(100vh - 32px - 10vh));
	               max-height: min(720px, calc(100svh - 32px - 10vh));
	           }

	           .chat-search-footer {
	               display: none;
	           }
	       }

	       /* ====== Notes modal ====== */
	       .chat-notes-overlay {
	           position: fixed;
	           inset: 0;
	           z-index: 100000;
	           display: none;
	           background: rgba(0, 0, 0, 0.55);
	           backdrop-filter: blur(8px);
	           padding: 12px;
	           box-sizing: border-box;
	       }

	       .chat-notes-modal {
	           width: min(1200px, 100%);
	           height: calc(100vh - 24px - 4vh);
	           max-height: 860px;
	           margin: 4vh auto 0;
	           background: var(--secondary-dark);
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           border-radius: 20px;
	           box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
	           overflow: hidden;
	           display: flex;
	           flex-direction: column;
	       }

	       .chat-notes-header {
	           padding: 14px 18px 12px 22px;
	           border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	       }

	       .chat-notes-title-row {
	           display: flex;
	           align-items: center;
	           justify-content: space-between;
	           gap: 12px;
	       }

	       .chat-notes-title {
	           font-size: 14px;
	           font-weight: 600;
	           color: var(--text);
	           letter-spacing: 0.1px;
	       }

	       .chat-notes-header-actions {
	           display: inline-flex;
	           align-items: center;
	           gap: 8px;
	       }

	       .chat-notes-new {
	           display: inline-flex;
	           align-items: center;
	           gap: 6px;
	           border: none;
	           cursor: pointer;
	           padding: 7px 10px;
	           border-radius: 10px;
	           color: #ffffff;
	           background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
	           box-shadow: 0 12px 26px rgba(var(--primary-dark-rgb), 0.18);
	           transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease,
	               background 0.2s ease;
	       }

	       .chat-notes-new:hover {
	           transform: translateY(-1px);
	           filter: brightness(1.04);
	           background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
	           box-shadow: 0 16px 34px rgba(var(--primary-dark-rgb), 0.22);
	       }

	       .chat-notes-new:active {
	           transform: translateY(0);
	       }

	       .chat-notes-new svg {
	           color: #ffffff;
	       }

	       .chat-notes-toggle-list {
	           display: none;
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           color: rgba(var(--ui-contrast-rgb), 0.75);
	           cursor: pointer;
	           padding: 7px;
	           border-radius: 10px;
	           align-items: center;
	           justify-content: center;
	           transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	       }

	       .chat-notes-toggle-list:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           color: var(--text);
	           border-color: rgba(var(--ui-contrast-rgb), 0.10);
	       }

	       .chat-notes-close {
	           background: transparent;
	           border: none;
	           color: rgba(var(--ui-contrast-rgb), 0.75);
	           cursor: pointer;
	           padding: 7px;
	           border-radius: 10px;
	           display: flex;
	           align-items: center;
	           justify-content: center;
	           transition: background 0.15s ease, color 0.15s ease;
	       }

	       .chat-notes-close:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           color: var(--text);
	       }

	       .chat-notes-body {
	           flex: 1;
	           min-height: 0;
	           display: grid;
	           grid-template-columns: 320px 1fr;
	       }

	       .chat-notes-sidebar {
	           border-right: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           padding: 12px;
	           display: flex;
	           flex-direction: column;
	           gap: 10px;
	           min-height: 0;
	       }

	       .chat-notes-filter-row {
	           display: flex;
	           align-items: center;
	           gap: 10px;
	           padding: 9px 12px;
	           border-radius: 12px;
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	       }

	       .chat-notes-filter-row svg {
	           color: var(--text-dim);
	           flex-shrink: 0;
	       }

	       .chat-notes-filter {
	           flex: 1;
	           min-width: 0;
	           border: none;
	           outline: none;
	           background: transparent;
	           color: var(--text);
	           font-size: 13px;
	           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	       }

	       .chat-notes-filter::placeholder {
	           color: rgba(var(--ui-contrast-rgb), 0.40);
	       }

	       .chat-notes-list {
	           flex: 1;
	           overflow: auto;
	           display: flex;
	           flex-direction: column;
	           gap: 6px;
	           padding-right: 4px;
	       }

	       .chat-notes-empty {
	           padding: 8px 4px;
	           color: rgba(var(--ui-contrast-rgb), 0.62);
	           font-size: 13px;
	       }

	       .chat-note-item {
	           display: flex;
	           flex-direction: column;
	           gap: 3px;
	           padding: 10px 12px;
	           border-radius: 12px;
	           border: 1px solid transparent;
	           background: transparent;
	           cursor: pointer;
	           transition: background 0.15s ease, border-color 0.15s ease;
	       }

	       .chat-note-item:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-color: rgba(var(--ui-contrast-rgb), 0.08);
	       }

	       .chat-note-item.is-active {
	           background: rgba(var(--ui-contrast-rgb), 0.09);
	           border-color: rgba(var(--ui-contrast-rgb), 0.12);
	       }

	       .chat-note-item-title-row {
	           display: flex;
	           align-items: baseline;
	           gap: 10px;
	       }

	       .chat-note-item-title {
	           flex: 1;
	           min-width: 0;
	           font-size: 13px;
	           font-weight: 600;
	           line-height: 1.25;
	           white-space: nowrap;
	           overflow: hidden;
	           text-overflow: ellipsis;
	           color: var(--text);
	       }

	       .chat-note-item-date {
	           flex-shrink: 0;
	           font-size: 11.5px;
	           color: rgba(var(--ui-contrast-rgb), 0.50);
	           white-space: nowrap;
	       }

	       .chat-note-item-preview {
	           font-size: 12.5px;
	           line-height: 1.35;
	           color: rgba(var(--ui-contrast-rgb), 0.62);
	           display: -webkit-box;
	           -webkit-box-orient: vertical;
	           -webkit-line-clamp: 2;
	           overflow: hidden;
	       }

	       .chat-note-editor {
	           padding: 14px 16px 12px;
	           display: flex;
	           flex-direction: column;
	           min-height: 0;
	           gap: 10px;
	       }

	       .chat-note-placeholder {
	           flex: 1;
	           display: flex;
	           align-items: center;
	           justify-content: center;
	           text-align: center;
	           padding: 18px;
	           color: rgba(var(--ui-contrast-rgb), 0.60);
	           font-size: 14px;
	       }

	       .chat-note-editor-inner {
	           flex: 1;
	           display: flex;
	           flex-direction: column;
	           min-height: 0;
	           gap: 10px;
	       }

	       .chat-note-title {
	           width: 100%;
	           border: none;
	           outline: none;
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-radius: 12px;
	           padding: 11px 14px;
	           color: var(--text);
	           font-size: 14px;
	           font-weight: 600;
	           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	       }

	       .chat-note-title::placeholder {
	           color: rgba(var(--ui-contrast-rgb), 0.40);
	       }

	       .chat-note-meta-row {
	           display: flex;
	           align-items: center;
	           justify-content: space-between;
	           gap: 10px;
	           padding: 0 2px;
	           font-size: 12px;
	           color: rgba(var(--ui-contrast-rgb), 0.55);
	       }

	       .chat-notes-status {
	           color: rgba(var(--ui-contrast-rgb), 0.45);
	           white-space: nowrap;
	       }

	       .chat-note-content {
	           flex: 1;
	           min-height: 0;
	           width: 100%;
	           resize: none;
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-radius: 14px;
	           padding: 14px;
	           color: var(--text);
	           font-size: 13.5px;
	           line-height: 1.45;
	           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	           outline: none;
	       }

	       .chat-note-content::placeholder {
	           color: rgba(var(--ui-contrast-rgb), 0.40);
	       }

	       .chat-note-editor-actions {
	           display: flex;
	           justify-content: flex-end;
	       }

	       .chat-note-delete {
	           display: inline-flex;
	           align-items: center;
	           gap: 6px;
	           background: rgba(239, 68, 68, 0.12);
	           border: 1px solid rgba(239, 68, 68, 0.24);
	           color: var(--text);
	           padding: 8px 10px;
	           border-radius: 12px;
	           cursor: pointer;
	           transition: background 0.15s ease, border-color 0.15s ease;
	       }

	       .chat-note-delete:hover {
	           background: rgba(239, 68, 68, 0.16);
	           border-color: rgba(239, 68, 68, 0.30);
	       }

	       .chat-notes-footer {
	           padding: 10px 18px 10px 22px;
	           border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           display: flex;
	           justify-content: space-between;
	           gap: 10px;
	           font-size: 12px;
	           color: rgba(var(--ui-contrast-rgb), 0.50);
	       }

	       @media (max-width: 768px) {
	           .chat-notes-modal {
	               height: calc(100vh - 24px);
	               margin: 0 auto;
	           }

	           .chat-notes-body {
	               grid-template-columns: 1fr;
	               grid-template-rows: minmax(152px, 26vh) 1fr;
	           }

	           .chat-notes-sidebar {
	               border-right: none;
	               border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           }

	           .chat-notes-toggle-list {
	               display: inline-flex;
	           }

	           .chat-note-item {
	               padding: 8px 10px;
	               border-radius: 10px;
	           }

	           .chat-note-item-title {
	               font-size: 12.5px;
	           }

	           .chat-note-item-date {
	               font-size: 11px;
	           }

	           .chat-note-item-preview {
	               -webkit-line-clamp: 1;
	           }

	           .chat-notes-modal.is-list-collapsed .chat-notes-sidebar {
	               display: none;
	           }

	           .chat-notes-modal.is-list-collapsed .chat-notes-body {
	               grid-template-rows: 1fr;
	           }
	       }

	       /* ====== AI rules modal ====== */
	       .chat-ai-rules-overlay {
	           position: fixed;
	           inset: 0;
	           z-index: 100000;
	           display: none;
	           background: rgba(0, 0, 0, 0.55);
	           backdrop-filter: blur(8px);
	           padding: 12px;
	           box-sizing: border-box;
	       }

	       .chat-ai-rules-modal {
	           width: min(1200px, 100%);
	           height: calc(100vh - 24px - 4vh);
	           max-height: 860px;
	           margin: 4vh auto 0;
	           background: var(--secondary-dark);
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           border-radius: 20px;
	           box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
	           overflow: hidden;
	           display: flex;
	           flex-direction: column;
	       }

	       .chat-ai-rules-header {
	           padding: 14px 18px 12px 22px;
	           border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	       }

	       .chat-ai-rules-title-row {
	           display: flex;
	           align-items: center;
	           justify-content: space-between;
	           gap: 12px;
	       }

	       .chat-ai-rules-title {
	           font-size: 14px;
	           font-weight: 600;
	           color: var(--text);
	           letter-spacing: 0.1px;
	       }

	       .chat-ai-rules-hint {
	           margin-top: 8px;
	           font-size: 12.5px;
	           color: rgba(var(--ui-contrast-rgb), 0.60);
	           line-height: 1.35;
	       }

	       .chat-ai-rules-hint strong {
	           color: rgba(var(--ui-contrast-rgb), 0.85);
	           font-weight: 600;
	       }

	       .chat-ai-rules-header-actions {
	           display: inline-flex;
	           align-items: center;
	           gap: 8px;
	       }

	       .chat-ai-rules-new {
	           display: inline-flex;
	           align-items: center;
	           gap: 6px;
	           border: none;
	           cursor: pointer;
	           padding: 7px 10px;
	           border-radius: 10px;
	           color: #ffffff;
	           background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
	           box-shadow: 0 12px 26px rgba(var(--primary-dark-rgb), 0.18);
	           transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease,
	               background 0.2s ease;
	       }

	       .chat-ai-rules-new:hover {
	           transform: translateY(-1px);
	           filter: brightness(1.04);
	           background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
	           box-shadow: 0 16px 34px rgba(var(--primary-dark-rgb), 0.22);
	       }

	       .chat-ai-rules-new:active {
	           transform: translateY(0);
	       }

	       .chat-ai-rules-new svg {
	           color: #ffffff;
	       }

	       .chat-ai-rules-toggle-list {
	           display: none;
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           color: rgba(var(--ui-contrast-rgb), 0.75);
	           cursor: pointer;
	           padding: 7px;
	           border-radius: 10px;
	           align-items: center;
	           justify-content: center;
	           transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	       }

	       .chat-ai-rules-toggle-list:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           color: var(--text);
	           border-color: rgba(var(--ui-contrast-rgb), 0.10);
	       }

	       .chat-ai-rules-close {
	           background: transparent;
	           border: none;
	           color: rgba(var(--ui-contrast-rgb), 0.75);
	           cursor: pointer;
	           padding: 7px;
	           border-radius: 10px;
	           display: flex;
	           align-items: center;
	           justify-content: center;
	           transition: background 0.15s ease, color 0.15s ease;
	       }

	       .chat-ai-rules-close:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           color: var(--text);
	       }

	       .chat-ai-rules-body {
	           flex: 1;
	           min-height: 0;
	           display: grid;
	           grid-template-columns: 320px 1fr;
	       }

	       .chat-ai-rules-sidebar {
	           border-right: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           padding: 12px;
	           display: flex;
	           flex-direction: column;
	           gap: 10px;
	           min-height: 0;
	       }

	       .chat-ai-rules-filter-row {
	           display: flex;
	           align-items: center;
	           gap: 10px;
	           padding: 9px 12px;
	           border-radius: 12px;
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	       }

	       .chat-ai-rules-filter-row svg {
	           color: var(--text-dim);
	           flex-shrink: 0;
	       }

	       .chat-ai-rules-filter {
	           flex: 1;
	           min-width: 0;
	           border: none;
	           outline: none;
	           background: transparent;
	           color: var(--text);
	           font-size: 13px;
	           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	       }

	       .chat-ai-rules-filter::placeholder {
	           color: rgba(var(--ui-contrast-rgb), 0.40);
	       }

	       .chat-ai-rules-list {
	           flex: 1;
	           min-height: 0;
	           overflow: auto;
	           display: flex;
	           flex-direction: column;
	           gap: 8px;
	           padding-right: 3px;
	       }

	       .chat-ai-rules-empty {
	           padding: 10px 6px;
	           color: rgba(var(--ui-contrast-rgb), 0.55);
	           font-size: 13px;
	       }

	       .chat-ai-rule-item {
	           padding: 10px 12px;
	           border-radius: 12px;
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           background: rgba(var(--ui-contrast-rgb), 0.04);
	           cursor: pointer;
	           transition: background 0.15s ease, border-color 0.15s ease;
	       }

	       .chat-ai-rule-item:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-color: rgba(var(--ui-contrast-rgb), 0.12);
	       }

	       .chat-ai-rule-item.is-active {
	           background: rgba(64, 224, 208, 0.12);
	           border-color: rgba(64, 224, 208, 0.28);
	       }

	       .chat-ai-rule-item-title-row {
	           display: flex;
	           align-items: center;
	           justify-content: space-between;
	           gap: 10px;
	           margin-bottom: 6px;
	       }

	       .chat-ai-rule-item-title {
	           font-size: 13px;
	           font-weight: 600;
	           color: var(--text);
	           overflow: hidden;
	           text-overflow: ellipsis;
	           white-space: nowrap;
	           min-width: 0;
	       }

	       .chat-ai-rule-item-right {
	           display: inline-flex;
	           align-items: center;
	           gap: 6px;
	           flex-shrink: 0;
	       }

	       .chat-ai-rule-badge {
	           font-size: 11px;
	           padding: 2px 6px;
	           border-radius: 999px;
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.12);
	           color: rgba(var(--ui-contrast-rgb), 0.78);
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           white-space: nowrap;
	       }

	       .chat-ai-rule-badge.is-on {
	           background: rgba(64, 224, 208, 0.14);
	           border-color: rgba(64, 224, 208, 0.28);
	           color: rgba(var(--ui-contrast-rgb), 0.88);
	       }

	       .chat-ai-rule-badge.is-off {
	           background: rgba(var(--ui-contrast-rgb), 0.04);
	           border-color: rgba(var(--ui-contrast-rgb), 0.10);
	           color: rgba(var(--ui-contrast-rgb), 0.62);
	       }

	       .chat-ai-rule-badge.is-base {
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-color: rgba(var(--ui-contrast-rgb), 0.14);
	           color: rgba(var(--ui-contrast-rgb), 0.72);
	       }

	       .chat-ai-rule-item-date {
	           font-size: 11.5px;
	           color: rgba(var(--ui-contrast-rgb), 0.55);
	           white-space: nowrap;
	       }

	       .chat-ai-rule-item-preview {
	           font-size: 12.5px;
	           color: rgba(var(--ui-contrast-rgb), 0.68);
	           line-height: 1.3;
	           display: -webkit-box;
	           -webkit-line-clamp: 2;
	           -webkit-box-orient: vertical;
	           overflow: hidden;
	           word-break: break-word;
	       }

	       .chat-ai-rule-editor {
	           padding: 14px 16px 12px;
	           display: flex;
	           flex-direction: column;
	           min-height: 0;
	           gap: 10px;
	       }

	       .chat-ai-rule-placeholder {
	           flex: 1;
	           display: flex;
	           align-items: flex-start;
	           justify-content: center;
	           text-align: left;
	           padding: 18px;
	           color: rgba(var(--ui-contrast-rgb), 0.60);
	           font-size: 14px;
	       }

	       .chat-ai-rules-intro {
	           max-width: 680px;
	           width: 100%;
	           display: flex;
	           flex-direction: column;
	           gap: 10px;
	       }

	       .chat-ai-rules-intro-title {
	           font-size: 14px;
	           font-weight: 600;
	           color: var(--text);
	       }

	       .chat-ai-rules-intro-text {
	           display: flex;
	           flex-direction: column;
	           gap: 8px;
	           font-size: 13px;
	           line-height: 1.45;
	           color: rgba(var(--ui-contrast-rgb), 0.68);
	       }

	       .chat-ai-rules-examples-title {
	           margin-top: 6px;
	           font-size: 12.5px;
	           color: rgba(var(--ui-contrast-rgb), 0.60);
	       }

	       .chat-ai-rules-examples {
	           display: flex;
	           flex-wrap: wrap;
	           gap: 8px;
	       }

	       .chat-ai-rules-example {
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.10);
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           color: var(--text);
	           cursor: pointer;
	           padding: 8px 10px;
	           border-radius: 12px;
	           font-size: 12.5px;
	           transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	       }

	       .chat-ai-rules-example:hover {
	           background: rgba(var(--ui-contrast-rgb), 0.08);
	           border-color: rgba(var(--ui-contrast-rgb), 0.14);
	           transform: translateY(-1px);
	       }

	       .chat-ai-rule-editor-inner {
	           flex: 1;
	           display: flex;
	           flex-direction: column;
	           min-height: 0;
	           gap: 10px;
	       }

	       .chat-ai-rule-title {
	           width: 100%;
	           border: none;
	           outline: none;
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-radius: 12px;
	           padding: 11px 14px;
	           color: var(--text);
	           font-size: 14px;
	           font-weight: 600;
	           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	       }

	       .chat-ai-rule-title::placeholder {
	           color: rgba(var(--ui-contrast-rgb), 0.40);
	       }

	       .chat-ai-rule-meta-row {
	           display: flex;
	           align-items: center;
	           justify-content: space-between;
	           gap: 10px;
	           padding: 0 2px;
	           font-size: 12px;
	           color: rgba(var(--ui-contrast-rgb), 0.55);
	       }

	       .chat-ai-rule-enabled {
	           display: inline-flex;
	           align-items: center;
	           gap: 6px;
	           cursor: pointer;
	           user-select: none;
	           color: rgba(var(--ui-contrast-rgb), 0.70);
	           flex-shrink: 0;
	       }

	       .chat-ai-rule-enabled input[type="checkbox"] {
	           width: 16px;
	           height: 16px;
	           cursor: pointer;
	           accent-color: #40e0d0;
	       }

	       .chat-ai-rule-meta {
	           flex: 1;
	           min-width: 0;
	           overflow: hidden;
	           text-overflow: ellipsis;
	           white-space: nowrap;
	       }

	       .chat-ai-rules-status {
	           color: rgba(var(--ui-contrast-rgb), 0.45);
	           white-space: nowrap;
	       }

	       .chat-ai-rule-content {
	           flex: 1;
	           min-height: 0;
	           width: 100%;
	           resize: none;
	           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           background: rgba(var(--ui-contrast-rgb), 0.06);
	           border-radius: 14px;
	           padding: 14px;
	           color: var(--text);
	           font-size: 13.5px;
	           line-height: 1.45;
	           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	           outline: none;
	       }

	       .chat-ai-rule-content::placeholder {
	           color: rgba(var(--ui-contrast-rgb), 0.40);
	       }

	       .chat-ai-rule-editor-actions {
	           display: flex;
	           justify-content: flex-end;
	       }

	       .chat-ai-rule-delete {
	           display: inline-flex;
	           align-items: center;
	           gap: 6px;
	           background: rgba(239, 68, 68, 0.12);
	           border: 1px solid rgba(239, 68, 68, 0.24);
	           color: var(--text);
	           padding: 8px 10px;
	           border-radius: 12px;
	           cursor: pointer;
	           transition: background 0.15s ease, border-color 0.15s ease;
	       }

	       .chat-ai-rule-delete:hover {
	           background: rgba(239, 68, 68, 0.16);
	           border-color: rgba(239, 68, 68, 0.30);
	       }

	       .chat-ai-rules-footer {
	           padding: 10px 18px 10px 22px;
	           border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           display: flex;
	           justify-content: space-between;
	           gap: 10px;
	           font-size: 12px;
	           color: rgba(var(--ui-contrast-rgb), 0.50);
	       }

	       @media (max-width: 768px) {
	           .chat-ai-rules-modal {
	               height: calc(100vh - 24px);
	               margin: 0 auto;
	           }

	           .chat-ai-rules-body {
	               grid-template-columns: 1fr;
	               grid-template-rows: minmax(152px, 26vh) 1fr;
	           }

	           .chat-ai-rules-sidebar {
	               border-right: none;
	               border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
	           }

	           .chat-ai-rules-toggle-list {
	               display: inline-flex;
	           }

	           .chat-ai-rule-item {
	               padding: 8px 10px;
	               border-radius: 10px;
	           }

	           .chat-ai-rule-item-title {
	               font-size: 12.5px;
	           }

	           .chat-ai-rule-item-date {
	               font-size: 11px;
	           }

	           .chat-ai-rule-item-preview {
	               -webkit-line-clamp: 1;
	           }

	           .chat-ai-rules-modal.is-list-collapsed .chat-ai-rules-sidebar {
	               display: none;
	           }

	           .chat-ai-rules-modal.is-list-collapsed .chat-ai-rules-body {
	               grid-template-rows: 1fr;
	           }
	       }

	       /* ============================================
          TARIFF ACCORDION (va-* classes)
          ============================================ */

       /* --- Pro-modal accordion layout --- */
       #pro-modal {
           width: 95%;
           max-width: 960px;
           max-height: 90vh;
           overflow-y: auto;
           padding: 0;
           display: flex;
           flex-direction: column;
           scrollbar-width: thin;
           scrollbar-color: rgba(255,255,255,.15) transparent;
       }

       #pro-modal::-webkit-scrollbar {
           width: 10px;
       }

       #pro-modal::-webkit-scrollbar-thumb {
           background: rgba(255,255,255,.12);
           border-radius: 6px;
           border: 2px solid transparent;
           background-clip: content-box;
       }

       #pro-modal .modal-hd {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 20px 24px 0;
           flex: 0 0 auto;
       }

       #pro-modal .modal-hd h3 {
           margin: 0;
           font-size: 20px;
           font-weight: 700;
           letter-spacing: -0.01em;
       }

       .modal-sub {
           color: var(--text-dim);
           font-size: 13px;
           margin-top: 3px;
       }

       .modal-close-btn {
           appearance: none;
           background: transparent;
           border: 0;
           /* padding:0 обязателен: глобальный селектор button{} ставит
              padding 12px 24px → крестик уезжал из центра (computed 48px,
              dx=7/dy=3). Как и у .chatgpt-send-button. (2026-06-14) */
           padding: 0;
           box-sizing: border-box;
           color: var(--primary);
           width: 36px;
           height: 36px;
           border-radius: 10px;
           font-size: 18px;
           line-height: 1;
           cursor: pointer;
           display: grid;
           place-items: center;
           transition: background 0.2s;
       }

       .modal-close-btn:hover {
           background: rgba(64, 224, 208, 0.10);
       }

       html[data-theme="light"] .modal-close-btn:hover {
           background: rgba(15, 118, 110, 0.10);
       }

       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]) .modal-close-btn:hover {
               background: rgba(15, 118, 110, 0.10);
           }
       }

       #pro-modal .modal-body {
           padding: 16px 24px 24px;
           overflow-y: auto;
           flex: 1 1 auto;
           min-height: 0;
           scrollbar-width: thin;
           scrollbar-color: rgba(255,255,255,.15) transparent;
       }

       #pro-modal .modal-body::-webkit-scrollbar {
           width: 10px;
       }

       #pro-modal .modal-body::-webkit-scrollbar-thumb {
           background: rgba(255,255,255,.12);
           border-radius: 6px;
           border: 2px solid transparent;
           background-clip: content-box;
       }

       /* --- Promo banner --- */
       .va-banner {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 8px;
           margin: 0 0 14px;
           padding: 10px 14px;
           background: linear-gradient(90deg, rgba(245,181,68,.10), rgba(245,181,68,.04));
           border: 1px solid rgba(245,181,68,.30);
           border-radius: 12px;
           color: #ffd47e;
           font-size: 13px;
           line-height: 1.3;
       }

       .va-banner-spark {
           color: #f5b544;
           font-size: 14px;
           flex: 0 0 auto;
       }

       .va-banner b {
           color: #f5b544;
           font-weight: 700;
       }

       html[data-theme="light"] .va-banner {
           background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(245,158,11,.05));
           border-color: rgba(245,158,11,.35);
           color: #92400e;
       }

       html[data-theme="light"] .va-banner b {
           color: #b45309;
       }

       html[data-theme="light"] .va-banner-spark {
           color: #d97706;
       }

       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]) .va-banner {
               background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(245,158,11,.05));
               border-color: rgba(245,158,11,.35);
               color: #92400e;
           }
           html:not([data-theme="dark"]) .va-banner b { color: #b45309; }
           html:not([data-theme="dark"]) .va-banner-spark { color: #d97706; }
       }

       /* --- Accordion list --- */
       .va-list {
           display: flex;
           flex-direction: column;
           gap: 8px;
       }

       .va-row {
           position: relative;
           background: var(--secondary-dark);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
           border-radius: 14px;
           overflow: hidden;
           transition: border-color 0.2s ease, background 0.2s ease;
       }

       .va-row.current {
           background: linear-gradient(180deg, rgba(64,224,208,.05) 0%, var(--secondary-dark) 100%);
           border-color: rgba(64,224,208,.30);
       }

       .va-row.open {
           background: var(--secondary);
       }

       html[data-theme="light"] .va-row {
           background: #ffffff;
           border-color: rgba(0,0,0,.08);
       }

       html[data-theme="light"] .va-row.current {
           background: linear-gradient(180deg, rgba(15,118,110,.04) 0%, #ffffff 100%);
           border-color: rgba(15,118,110,.30);
       }

       html[data-theme="light"] .va-row.open {
           background: #f8fffe;
       }

       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]) .va-row {
               background: #ffffff;
               border-color: rgba(0,0,0,.08);
           }
           html:not([data-theme="dark"]) .va-row.current {
               background: linear-gradient(180deg, rgba(15,118,110,.04) 0%, #ffffff 100%);
               border-color: rgba(15,118,110,.30);
           }
           html:not([data-theme="dark"]) .va-row.open {
               background: #f8fffe;
           }
       }

       /* --- Row header (clickable) --- */
       .va-head {
           display: grid;
           grid-template-columns: minmax(180px, 1.25fr) minmax(180px, 1.35fr) auto 24px;
           gap: 14px;
           align-items: center;
           width: 100%;
           padding: 11px 18px;
           background: transparent;
           border: 0;
           color: inherit;
           cursor: pointer;
           text-align: left;
           font: inherit;
           transition: background 0.15s;
       }

       .va-head:hover {
           background: rgba(var(--ui-contrast-rgb), 0.02);
       }

       /* --- Name column --- */
       .va-name-col {
           min-width: 0;
       }

       .va-name-col h4 {
           margin: 0;
           font-size: 16px;
           font-weight: 700;
           letter-spacing: -0.01em;
           white-space: nowrap;
       }

       .va-title-row {
           display: flex;
           align-items: center;
           gap: 6px;
           flex-wrap: nowrap;
           min-width: 0;
           overflow: hidden;
       }

       .va-title-row > *:not(h4) {
           flex: 0 0 auto;
       }

       .va-tagline {
           margin-top: 3px;
           color: var(--text-dim);
           font-size: 12px;
           line-height: 1.35;
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
       }

       .va-row.open .va-tagline {
           white-space: normal;
       }

       /* --- Badges --- */
       .badge-popular {
           display: inline-flex;
           align-items: center;
           gap: 4px;
           background: var(--primary);
           color: #052933;
           font-size: 9.5px;
           font-weight: 700;
           padding: 3px 7px;
           border-radius: 999px;
           line-height: 1;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           white-space: nowrap;
       }

       .badge-popular i {
           font-size: 8px;
       }

       .badge-current {
           display: inline-flex;
           align-items: center;
           gap: 4px;
           background: rgba(64,224,208,.10);
           border: 1px solid rgba(64,224,208,.4);
           color: var(--primary);
           font-size: 9.5px;
           font-weight: 600;
           padding: 3px 7px;
           border-radius: 999px;
           line-height: 1;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           white-space: nowrap;
       }

       html[data-theme="light"] .badge-current {
           background: rgba(15,118,110,.08);
           border-color: rgba(15,118,110,.3);
           color: #0F766E;
       }

       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]) .badge-current {
               background: rgba(15,118,110,.08);
               border-color: rgba(15,118,110,.3);
               color: #0F766E;
           }
       }

       .badge-biz {
           display: inline-flex;
           align-items: center;
           gap: 4px;
           background: #f08a2a;
           color: #1a1308;
           font-size: 9.5px;
           font-weight: 700;
           padding: 3px 7px;
           border-radius: 999px;
           line-height: 1;
           white-space: nowrap;
       }

       .badge-biz i {
           font-size: 8px;
       }

       html[data-theme="light"] .badge-popular {
           background: var(--primary);
           color: #ffffff;
       }

       html[data-theme="light"] .badge-biz {
           background: #e07b1a;
           color: #ffffff;
       }

       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]) .badge-popular {
               background: var(--primary);
               color: #ffffff;
           }
           html:not([data-theme="dark"]) .badge-biz {
               background: #e07b1a;
               color: #ffffff;
           }
       }

       /* --- Summary chips --- */
       .va-summary {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 4px 6px;
           align-items: center;
           justify-items: start;
       }

       .va-chip {
           background: rgba(var(--ui-contrast-rgb), 0.04);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.06);
           color: var(--text-dim);
           padding: 4px 9px;
           border-radius: 7px;
           font-size: 12px;
           line-height: 1.2;
           white-space: nowrap;
       }
       /* Пилюля лимита документов в хранилище — лёгкий primary-акцент: на дорогих
          тарифах большее число читается как доп. ценность (фидбек 2026-06-14). */
       .va-chip--docs {
           background: rgba(var(--primary-rgb), 0.10);
           border-color: rgba(var(--primary-rgb), 0.22);
           color: var(--text);
       }

       /* --- Price column --- */
       .va-price-col {
           display: flex;
           align-items: center;
           justify-content: flex-start;
           justify-self: start;
           min-width: 120px;
       }

       .va-price {
           color: var(--primary);
           font-size: 22px;
           font-weight: 700;
           letter-spacing: -0.01em;
           line-height: 1.1;
           white-space: nowrap;
       }

       .va-price small {
           font-size: 14px;
           font-weight: 600;
       }

       /* --- Chevron --- */
       .va-chev {
           display: grid;
           place-items: center;
           color: var(--text-dim);
           transition: transform 0.25s ease, color 0.2s ease;
       }

       .va-chev i {
           font-size: 12px;
       }

       .va-row.open .va-chev {
           transform: rotate(180deg);
           color: var(--primary);
       }

       /* --- Expandable body --- */
       .va-body {
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
       }

       .va-body-inner {
           padding: 0 18px 18px;
           display: grid;
           grid-template-columns: 1fr auto;
           gap: 22px;
           border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
           padding-top: 16px;
           margin: 0 18px;
           align-items: start;
       }

       .va-features ul {
           list-style: none;
           padding: 0;
           margin: 0;
           display: flex;
           flex-direction: column;
           gap: 9px;
       }

       .va-feat-title {
           font-size: 11px;
           letter-spacing: 0.14em;
           text-transform: uppercase;
           color: var(--primary);
           font-weight: 600;
           margin: 0 0 10px;
       }

       .va-body-inner .feature {
           display: flex;
           gap: 10px;
           align-items: flex-start;
           font-size: 14.5px;
           color: var(--text);
           line-height: 1.5;
           margin: 0;
       }

       .va-body-inner .feature .ic {
           flex: 0 0 auto;
           width: 14px;
           font-size: 11px;
           margin-top: 4px;
           color: var(--primary);
       }
       /* Строка лимита документов: значение — такой же чип .va-chip, как в
          свёрнутой карточке (единый стиль), идёт сразу после подписи в левой
          части, а не у правого края (фидбек 2026-06-14). */
       .va-body-inner .feature--docs { align-items: center; flex-wrap: wrap; }
       .va-body-inner .feature--docs .ic { margin-top: 0; }
       /* Фиксированная ширина подписи → чип-значение начинается ровно под
          колонкой чипов свёрнутой карточки («Без подписки» / «N запросов»,
          ≈548px при модалке 960px). Замерено в браузере (2026-06-14). */
       .va-body-inner .feature--docs > span:not(.feature-val) { flex: 0 0 293px; }
       .va-body-inner .feature--docs .feature-val { flex: 0 0 auto; }

       /* --- CTA button --- */
       .va-cta {
           align-self: end;
           min-width: 200px;
           padding-bottom: 0;
       }

       .cta-btn {
           appearance: none;
           border: 0;
           width: 100%;
           padding: 14px 16px;
           border-radius: 14px;
           background: var(--primary);
           color: #052933;
           font-weight: 700;
           font-size: 15px;
           cursor: pointer;
           letter-spacing: 0.01em;
           transition: transform 0.15s ease, box-shadow 0.2s ease;
           box-shadow: 0 12px 30px rgba(64,224,208,.18);
           text-decoration: none;
           text-align: center;
           display: block;
           box-sizing: border-box;
           font-family: inherit;
           line-height: 1.3;
       }

       .cta-btn:hover {
           transform: translateY(-1px);
           box-shadow: 0 16px 40px rgba(64,224,208,.28);
       }

       .cta-disabled {
           background: rgba(64,224,208,.10);
           color: var(--primary);
           cursor: default;
           box-shadow: none;
       }

       .cta-disabled:hover {
           transform: none;
           box-shadow: none;
       }

       html[data-theme="light"] .cta-btn {
           color: #ffffff;
           box-shadow: 0 8px 24px rgba(15,118,110,.15);
       }

       html[data-theme="light"] .cta-btn:hover {
           box-shadow: 0 12px 32px rgba(15,118,110,.22);
       }

       html[data-theme="light"] .cta-disabled {
           background: rgba(15,118,110,.08);
           color: var(--primary);
       }

       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]) .cta-btn {
               color: #ffffff;
               box-shadow: 0 8px 24px rgba(15,118,110,.15);
           }
           html:not([data-theme="dark"]) .cta-btn:hover {
               box-shadow: 0 12px 32px rgba(15,118,110,.22);
           }
           html:not([data-theme="dark"]) .cta-disabled {
               background: rgba(15,118,110,.08);
               color: var(--primary);
           }
       }

       /* --- Accordion responsive --- */
       @media (max-width: 880px) {
           .va-head {
               grid-template-columns: 1fr auto 24px;
               gap: 12px;
               padding: 14px 16px;
           }
           .va-summary {
               display: none;
           }
           .va-row.open .va-summary {
               display: grid;
               grid-column: 1 / -1;
               margin-top: 6px;
           }
           .va-tagline {
               white-space: normal;
           }
       }

       @media (max-width: 560px) {
           #pro-modal {
               width: calc(100vw - 16px);
               max-height: calc(100vh - 16px);
               border-radius: 16px;
           }
           #pro-modal .modal-hd {
               padding: 16px 16px 0;
           }
           #pro-modal .modal-body {
               padding: 14px 16px 16px;
           }
           .va-head {
               grid-template-columns: 1fr 24px;
               gap: 10px;
               padding: 12px 14px;
               align-items: start;
           }
           .va-name-col {
               grid-column: 1;
           }
           .va-price-col {
               grid-column: 1;
               justify-self: start;
               min-width: 0;
               margin-top: 4px;
           }
           .va-chev {
               grid-column: 2;
               align-self: center;
           }
           .va-name-col h4 {
               white-space: normal;
           }
           .va-title-row {
               flex-wrap: wrap;
           }
           .va-tagline {
               white-space: normal;
           }
           .va-price {
               font-size: 20px;
           }
           .va-body-inner {
               grid-template-columns: 1fr;
               gap: 14px;
               margin: 0 14px;
               padding: 14px 0 14px;
           }
           .va-cta {
               min-width: 0;
           }
       }

       .coming-soon {
           position: absolute;
           top: -10px;
           right: 10px;
           background: var(--primary);
           color: white;
           padding: 4px 12px;
           border-radius: 12px;
           font-size: 12px;
       }

       .modal-window {
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--background-light);
           padding: 25px;
           border-radius: 15px;
           z-index: 1000;
       }

       /* pro-modal and close-btn styles defined in accordion block above */

       #promo-modal {
           max-width: 400px;
           width: 90%;
       }

       /* ===== Личный кабинет — боковая навигация (адаптация дизайн-хэндоффа) ===== */
       /* Токены модалки выведены из тем приложения → светлая/тёмная работают сами */
       #profile-modal.pc-modal {
           --pc-ink: var(--text);
           --pc-ink-dim: rgba(var(--ui-contrast-rgb), 0.62);
           --pc-ink-faint: rgba(var(--ui-contrast-rgb), 0.45);
           --pc-teal: var(--primary);
           --pc-teal-dim: var(--text-dim);
           --pc-hair: rgba(var(--ui-contrast-rgb), 0.12);
           --pc-raised: rgba(var(--ui-contrast-rgb), 0.05);
           --pc-field: var(--secondary-dark);
           --pc-field-border: rgba(var(--ui-contrast-rgb), 0.18);
           --pc-sec: rgba(var(--ui-contrast-rgb), 0.06);
           --pc-sec-border: rgba(var(--ui-contrast-rgb), 0.18);
           --pc-accent: linear-gradient(180deg, var(--primary-dark), var(--turquoise-dark));
           --pc-accent-solid: var(--primary-dark);

           max-width: 920px;
           width: 95%;
           padding: 0;
           overflow: hidden;
           border-radius: 20px;
           background: linear-gradient(165deg, var(--background-light), var(--background));
       }
       #profile-modal button { margin: 0; }
       #profile-modal .modal-content {
           padding: 0;
           max-height: 88vh;
           /* При большом объёме данных низ обрезался (overflow:hidden) — даём
              вертикальную прокрутку с полосой справа. */
           overflow-y: auto;
           overflow-x: hidden;
       }
       #profile-modal .pc-wrap {
           display: grid;
           grid-template-columns: 248px 1fr;
           min-height: 540px;
       }

       /* левый рейл */
       #profile-modal .pc-rail {
           background: rgba(var(--ui-contrast-rgb), 0.025);
           border-right: 1px solid var(--pc-hair);
           padding: 24px 16px;
           display: flex;
           flex-direction: column;
       }
       #profile-modal .pc-rail-id {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 11px;
           margin-bottom: 24px;
           padding: 0 8px;
       }
       #profile-modal .pc-avatar {
           width: 50px;
           height: 50px;
           border-radius: 15px;
           background: linear-gradient(135deg, var(--primary-dark), var(--turquoise-dark));
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: 800;
           font-size: 20px;
           color: #fff;
           text-transform: uppercase;
           flex: none;
           overflow: hidden;
       }
       #profile-modal .pc-avatar img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           display: block;
       }
       #profile-modal .pc-avatar--lg {
           width: 72px;
           height: 72px;
           border-radius: 18px;
           font-size: 28px;
       }
       #profile-modal .pc-avatar-edit {
           display: flex;
           align-items: center;
           gap: 16px;
       }
       #profile-modal .pc-avatar-acts {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 7px;
       }
       #profile-modal .pc-btn--ghost {
           background: transparent;
           color: var(--text-dim);
       }
       #profile-modal .pc-btn--ghost:hover {
           color: #c0392b;
           background: rgba(192, 57, 43, .10);
       }
       /* Имя + Фамилия в одну строку */
       #profile-modal .pc-fld-row {
           display: flex;
           gap: 12px;
       }
       #profile-modal .pc-fld-row .pc-fld {
           flex: 1 1 0;
           min-width: 0;
       }
       /* Чекбокс «показывать дату рождения» */
       #profile-modal .pc-check {
           display: inline-flex;
           align-items: center;
           gap: 7px;
           margin-top: 7px;
           font-size: 13px;
           color: var(--text-dim);
           cursor: pointer;
       }
       #profile-modal .pc-check input {
           width: auto;
           margin: 0;
       }
       #profile-modal .pc-textarea {
           resize: vertical;
           min-height: 64px;
           font-family: inherit;
           line-height: 1.5;
       }
       @media (max-width: 600px) {
           #profile-modal .pc-fld-row { flex-direction: column; gap: 0; }
       }
       /* Плашка-стимул «заполни профиль → 150 ₽» */
       #profile-modal .pc-bonus-banner {
           display: flex;
           align-items: center;
           gap: 10px;
           background: rgba(var(--primary-rgb), 0.10);
           border: 1px solid rgba(var(--primary-rgb), 0.30);
           color: var(--text);
           border-radius: 12px;
           padding: 11px 14px;
           font-size: 13px;
           line-height: 1.4;
           margin-bottom: 6px;
       }
       #profile-modal .pc-bonus-banner i {
           color: var(--primary);
           font-size: 16px;
           flex: none;
       }
       #profile-modal .pc-rail-id .nm { font-size: 15px; font-weight: 700; color: var(--pc-ink); word-break: break-word; }
       #profile-modal .pc-rail-id .em { font-size: 12.5px; color: var(--pc-ink-dim); word-break: break-all; }
       #profile-modal .pc-nav { display: flex; flex-direction: column; gap: 4px; }
       #profile-modal .pc-nav-item {
           display: flex;
           align-items: center;
           gap: 11px;
           height: 44px;
           padding: 0 14px;
           border-radius: 11px;
           background: transparent;
           border: none;
           cursor: pointer;
           color: var(--pc-ink-dim);
           font: inherit;
           font-size: 14px;
           font-weight: 600;
           text-align: left;
           width: 100%;
           transition: background .14s ease, color .14s ease;
       }
       #profile-modal .pc-nav-item:hover { background: rgba(var(--ui-contrast-rgb), 0.06); color: var(--pc-ink); }
       #profile-modal .pc-nav-item.active { background: rgba(var(--primary-rgb), 0.14); color: var(--pc-teal); }
       #profile-modal .pc-nav-item .ico { width: 18px; display: flex; justify-content: center; opacity: .85; }
       #profile-modal .pc-rail-foot { margin-top: auto; }

       /* правая колонка */
       #profile-modal .pc-main { padding: 24px 28px; display: flex; flex-direction: column; min-width: 0; }
       #profile-modal .pc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
       #profile-modal .pc-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--pc-ink); white-space: nowrap; }
       #profile-modal .pc-pane { display: none; flex-direction: column; gap: 14px; }
       #profile-modal .pc-pane.show { display: flex; }
       #profile-modal .pc-foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
       #profile-modal .pc-foot .pc-btn { min-width: 132px; }
       #profile-modal .pc-foot .pc-foot-logout { display: none; }

       /* кнопки */
       #profile-modal .pc-btn {
           height: 44px;
           border-radius: 11px;
           border: none;
           cursor: pointer;
           font: inherit;
           font-size: 14px;
           font-weight: 700;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 8px;
           padding: 0 18px;
           white-space: nowrap;
           transition: .16s ease;
       }
       #profile-modal .pc-btn--primary { background: var(--pc-accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--primary-dark-rgb), 0.8); }
       #profile-modal .pc-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
       #profile-modal .pc-btn--sec { background: var(--pc-sec); border: 1px solid var(--pc-sec-border); color: var(--pc-ink); }
       #profile-modal .pc-btn--sec:hover { background: rgba(var(--ui-contrast-rgb), 0.10); }
       #profile-modal .pc-btn--ghost { background: transparent; border: 1px solid var(--pc-sec-border); color: var(--pc-ink-dim); }
       #profile-modal .pc-btn--ghost:hover { background: rgba(var(--ui-contrast-rgb), 0.06); color: var(--pc-ink); }
       #profile-modal .pc-btn--danger { background: transparent; border: 1px solid rgba(220, 90, 90, 0.30); color: #d98c8c; }
       #profile-modal .pc-btn--danger:hover { background: rgba(220, 90, 90, 0.12); color: #e8a3a3; }
       #profile-modal .pc-btn.full { width: 100%; }
       #profile-modal .pc-btn.sm { height: 38px; font-size: 13px; padding: 0 14px; }

       /* крестик */
       #profile-modal .pc-x {
           width: 38px;
           height: 38px;
           border-radius: 11px;
           background: var(--pc-sec);
           border: 1px solid var(--pc-sec-border);
           color: var(--pc-ink-dim);
           font-size: 15px;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: .16s ease;
           flex: none;
       }
       #profile-modal .pc-x:hover { background: rgba(var(--ui-contrast-rgb), 0.10); color: var(--pc-ink); }

       /* карточка подписки */
       #profile-modal .pc-sub {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 16px;
           background: var(--pc-raised);
           border: 1px solid var(--pc-hair);
           border-radius: 14px;
           padding: 15px 18px;
       }
       #profile-modal .pc-sub__label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-faint); font-weight: 700; margin-bottom: 6px; }
       #profile-modal .pc-sub__name { font-size: 18px; font-weight: 800; color: var(--pc-ink); }
       #profile-modal .pc-sub__meta { font-size: 12.5px; color: var(--pc-ink-dim); margin-top: 5px; }

       /* герой баланса / запросов + сегментная полоса */
       #profile-modal .pc-hero {
           padding: 20px 22px;
           border-radius: 16px;
           background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.03));
           border: 1px solid rgba(var(--primary-rgb), 0.22);
       }
       #profile-modal .pc-hero__ttl { font-size: 13px; color: var(--pc-teal-dim); font-weight: 600; }
       #profile-modal .pc-hero__sum { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 16px; color: var(--pc-ink); }
       #profile-modal .pc-seg { height: 8px; border-radius: 99px; background: rgba(var(--ui-contrast-rgb), 0.08); overflow: hidden; display: flex; }
       #profile-modal .pc-seg i { display: block; height: 100%; }
       #profile-modal .pc-seg i.real { background: rgba(var(--ui-contrast-rgb), 0.32); }
       #profile-modal .pc-seg i.bonus { background: linear-gradient(90deg, var(--primary-dark), var(--primary)); }
       #profile-modal .pc-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
       #profile-modal .pc-legend .st { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pc-ink-dim); white-space: nowrap; }
       #profile-modal .pc-legend .st b { color: var(--pc-ink); font-weight: 800; font-size: 14px; margin-left: 2px; }
       #profile-modal .pc-legend .pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
       #profile-modal .pc-legend .pt.real { background: rgba(var(--ui-contrast-rgb), 0.40); }
       #profile-modal .pc-legend .pt.bonus { background: var(--primary); }

       /* профиль: key/value + поля */
       #profile-modal .pc-kv { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pc-hair); }
       #profile-modal .pc-kv__k { color: var(--pc-ink-dim); font-size: 14px; }
       #profile-modal .pc-kv__v { color: var(--pc-ink); font-size: 15px; font-weight: 700; word-break: break-all; text-align: right; }
       #profile-modal .pc-fld { display: flex; flex-direction: column; gap: 6px; }
       #profile-modal .pc-fld label { font-size: 13px; color: var(--pc-ink-dim); }
       #profile-modal .pc-fld__hint { font-size: 11.5px; color: var(--pc-ink-dim); opacity: .8; line-height: 1.4; }
       #profile-modal .pc-input {
           width: 100%;
           height: 44px;
           border-radius: 11px;
           background: var(--pc-field);
           border: 1px solid var(--pc-field-border);
           color: var(--pc-ink);
           font: inherit;
           font-size: 14px;
           padding: 0 14px;
           transition: .16s ease;
           box-sizing: border-box;
       }
       #profile-modal .pc-input::placeholder { color: var(--pc-ink-faint); }
       #profile-modal .pc-input:focus { outline: none; border-color: var(--pc-accent-solid); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }

       /* дополнительно: строки настроек + переключатель + промокод */
       #profile-modal .pc-set { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--pc-hair); }
       #profile-modal .pc-set:first-child { padding-top: 2px; }
       #profile-modal .pc-set__main { flex: 1; min-width: 0; }
       #profile-modal .pc-set__t { font-size: 14px; font-weight: 600; color: var(--pc-ink); }
       #profile-modal .pc-set__s { font-size: 12.5px; color: var(--pc-ink-dim); margin-top: 3px; }
       #profile-modal .pc-switch {
           width: 46px;
           height: 26px;
           border-radius: 99px;
           border: none;
           cursor: pointer;
           background: rgba(var(--ui-contrast-rgb), 0.18);
           position: relative;
           transition: .18s ease;
           flex: none;
           padding: 0;
       }
       #profile-modal .pc-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--ui-contrast-rgb), 0.55); transition: .18s ease; }
       #profile-modal .pc-switch.on { background: var(--pc-accent-solid); }
       #profile-modal .pc-switch.on::after { left: 23px; background: #fff; }
       #profile-modal .pc-autopay-form { display: none; }
       #profile-modal .pc-promo-block { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
       #profile-modal .pc-promo-block > label { font-size: 13px; color: var(--pc-ink-dim); }
       #profile-modal .pc-promo-block .muted { color: var(--pc-ink-faint); }
       #profile-modal .pc-promo-row { display: flex; gap: 10px; }
       #profile-modal .pc-promo-row .pc-input { flex: 1; }
       #profile-modal .pc-set > .pc-btn,
       #profile-modal .pc-promo-row .pc-btn { min-width: 150px; }
       #profile-modal .pc-copy-ok { color: var(--pc-teal) !important; }

       /* мобильные: рейл превращается в верхнюю полосу с горизонтальными табами */
       @media (max-width: 680px) {
           #profile-modal.pc-modal { width: 96%; max-width: 460px; }
           #profile-modal .modal-content { max-height: 90vh; overflow-y: auto; }
           #profile-modal .pc-wrap { grid-template-columns: 1fr; min-height: 0; }
           #profile-modal .pc-rail {
               border-right: none;
               border-bottom: 1px solid var(--pc-hair);
               padding: 16px 16px 0;
           }
           #profile-modal .pc-rail-id { flex-direction: row; align-items: center; margin-bottom: 14px; }
           #profile-modal .pc-avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; }
           #profile-modal .pc-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 12px; scrollbar-width: none; }
           #profile-modal .pc-nav::-webkit-scrollbar { display: none; }
           #profile-modal .pc-nav-item { height: 38px; width: auto; flex: none; white-space: nowrap; }
           #profile-modal .pc-nav-item .ico { display: none; }
           #profile-modal .pc-rail-foot { display: none; }
           #profile-modal .pc-main { padding: 18px 18px 20px; }
           #profile-modal .pc-foot { flex-wrap: wrap; }
           #profile-modal .pc-foot .pc-foot-logout { display: inline-flex; }
       }

       .promo-input-container {
           margin-bottom: 20px;
       }

       .modal-error {
           color: var(--error);
           font-size: 14px;
           margin-top: 8px;
           padding: 8px 12px;
           background: rgba(239, 68, 68, 0.1);
           border-radius: 6px;
           display: none;
       }

       .modal-success {
           color: var(--success);
           font-size: 14px;
           margin-top: 8px;
           padding: 8px 12px;
           background: rgba(var(--primary-rgb), 0.1);
           border-radius: 6px;
           display: none;
       }

       .modal-input {
           width: 100%;
           padding: 12px;
           border: 1px solid var(--secondary);
           border-radius: 8px;
           background: var(--secondary-dark);
           color: var(--text);
           font-size: 14px;
           transition: all 0.3s ease;
           box-sizing: border-box;
       }

       .modal-input:focus {
           outline: none;
           border-color: var(--primary);
           box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
       }

       .modal-window {
           width: 90%;
           max-width: 900px;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--background-light);
           padding: 25px;
           border-radius: 15px;
           z-index: 1000;
       }

       /* ====== АНОНСЫ (in-app) ====== */
       .announcement-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.7);
           backdrop-filter: blur(4px);
           z-index: 2000;
       }

       .announcement-modal {
           display: none;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: min(92vw, 560px);
           max-height: 82vh;
           overflow: auto;
           background: var(--background-light);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
           border-radius: 16px;
           padding: 22px 22px 20px;
           z-index: 2001;
           box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
       }

       .announcement-title {
           margin: 0 36px 12px 0;
           font-size: 18px;
           line-height: 1.25;
           color: var(--text);
       }

       .announcement-body {
           color: var(--text-dim);
           font-size: 14px;
           line-height: 1.55;
           white-space: pre-wrap;
           margin-bottom: 18px;
       }

       .announcement-image {
           width: 100%;
           height: 76px;
           object-fit: cover;
           border-radius: 12px;
           margin: 6px 0 16px;
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.06);
       }

       .announcement-actions {
           display: flex;
           justify-content: flex-end;
           gap: 12px;
       }

       .announcement-primary-button {
           border: none;
           cursor: pointer;
           padding: 11px 16px;
           border-radius: 12px;
           font-size: 14px;
           font-weight: 600;
           color: white;
           background: linear-gradient(135deg, #1E7B7B, #2BA5A0);
           transition: transform 0.15s ease, filter 0.15s ease;
       }

       .announcement-primary-button:hover {
           transform: translateY(-1px);
           filter: brightness(1.05);
       }

       .announcement-close {
           position: absolute;
           top: 14px;
           right: 14px;
           width: 34px;
           height: 34px;
           display: grid;
           place-items: center;
           border: none;
           border-radius: 10px;
           padding: 0;
           background: rgba(var(--ui-contrast-rgb), 0.06);
           color: var(--text);
           cursor: pointer;
           line-height: 0;
           transition: background 0.15s ease, transform 0.15s ease;
       }

       .announcement-close svg {
           display: block;
       }

       .announcement-close:hover {
           background: rgba(var(--ui-contrast-rgb), 0.10);
           transform: translateY(-1px);
       }

       body.announcement-open {
           overflow: hidden;
       }

       .modal-content h3 {
           width: 100%;
           margin-bottom: 15px;
           font-size: 18px;
           color: var(--text);
       }

       .profile-info {
           background: var(--secondary-dark);
           padding: 15px;
           border-radius: 8px;
           margin-bottom: 20px;
       }

       .info-row {
           display: flex;
           justify-content: space-between;
           padding: 10px 0;
           border-bottom: 1px solid var(--secondary);
       }

       .info-row:last-child {
           border-bottom: none;
       }

       .info-row .label {
           color: var(--text-dim);
       }

       .info-row .value {
           color: var(--text);
           font-weight: 500;
       }

       .profile-fields .info-row {
           align-items: center;
           gap: 12px;
       }

       .profile-fields .label {
           flex: 0 0 120px;
       }

       .profile-fields .modal-input {
           flex: 1;
       }

       .profile-fields .primary-button {
           margin-left: auto;
       }

       @media (max-width: 600px) {
           .profile-fields .info-row {
               align-items: stretch;
               flex-direction: column;
           }

           .profile-fields .label {
               flex: none;
           }

           .profile-fields .primary-button {
               margin-left: 0;
               width: 100%;
           }
       }

       .modal-button {
           padding: 12px 40px;
           border-radius: 12px;
           font-size: 15px;
           cursor: pointer;
           transition: all 0.3s ease;
           width: auto;
       }

       .modal-buttons {
           display: flex;
           flex-wrap: wrap;
           gap: 16px;
           margin-top: 24px;
       }

       .modal-buttons button {
           flex: 1;
           min-width: 160px;
           padding: 12px 24px;
           border-radius: 12px;
           transition: all 0.3s ease;
       }

       .primary-button,
       .secondary-button {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 8px;
           padding: 12px 18px;
           border-radius: 12px;
           font-size: 14px;
           font-weight: 600;
           cursor: pointer;
           border: none;
           text-decoration: none;
           transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease,
               background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
               opacity 0.2s ease;
           box-sizing: border-box;
       }

       .primary-button {
           flex: 0 0 100%; /* Занимает всю ширину в .modal-buttons */
           color: #ffffff;
           background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
           box-shadow: 0 10px 22px rgba(var(--primary-dark-rgb), 0.22);
       }

       .primary-button:hover {
           transform: translateY(-1px);
           filter: brightness(1.04);
           box-shadow: 0 14px 30px rgba(var(--primary-dark-rgb), 0.26);
       }

       .secondary-button {
           flex: 0 0 calc(50% - 5px); /* Делит пространство пополам в .modal-buttons */
           color: var(--text);
           background: rgba(var(--ui-contrast-rgb), 0.06);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.18);
       }

       .secondary-button:hover {
           transform: translateY(-1px);
           background: rgba(var(--ui-contrast-rgb), 0.08);
           border-color: rgba(var(--ui-contrast-rgb), 0.26);
       }
       /* Убрал старые стили first-child и last-child - используем классы primary-button и secondary-button */

       /* Убираем специфичные hover для модальных кнопок - используем общий стиль */
       
       .modal-button.secondary {
           background: var(--secondary);
           /* Без явного цвета наследует глобальный button{color:white}; в светлой теме
              это белый текст на светлом var(--secondary) (#EAF7F5) — нечитаемо. */
           color: var(--text);
       }

       .modal-button.secondary:hover {
           background: var(--secondary-dark);
           transform: translateY(-2px);
       }

       .conversations-list {
           flex: 1;
           overflow-y: auto;
           overflow-x: hidden;  /* Предотвращаем горизонтальный скролл */
           padding-bottom: 10px;
           /* Убрал max-height - теперь flex сам растянет список */
       }

       .modal-buttons {
           display: flex;
           gap: 16px;
           margin-top: 24px;
       }

       .modal-buttons button {
           flex: 1;
           padding: 12px 24px;
           border-radius: 12px;
           font-size: 14px;
           cursor: pointer;
           transition: all 0.3s ease;
           border: none;
       }

       .modal-buttons .primary-button {
           background: linear-gradient(135deg, #1E7B7B, #2BA5A0);
           color: white;
       }

       .modal-buttons .secondary-button {
           background: var(--secondary);
           color: var(--text);
       }

       /* Hover перенесен в общий стиль button:hover */

       .conversation-item {
           padding: 10px 8px; /* Оптимизированы отступы для широких элементов */
           border-radius: 8px;
           margin-bottom: 4px;
           background: transparent; /* Убрали фон у всех элементов */
           background-color: transparent;
           cursor: pointer;
           transition: all 0.2s ease;
           border: none; /* Убрали обводки */
       }

       .conversation-item:hover {
           background: rgba(var(--ui-contrast-rgb), 0.05); /* Очень легкая подсветка при наведении */
           transform: translateX(2px); /* Меньше сдвиг */
       }

       .conversation-item.active {
           background: rgba(var(--ui-contrast-rgb), 0.08) !important; /* Очень легкая подсветка только для активного */
       }

       .conversation-time {
           display: none; /* Полностью скрываем даты */
       }

       .conversation-title {
           font-size: 14px;
           color: var(--text);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .control-buttons {
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           padding: 20px;
           background: var(--background);
           border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
       }

       .action-buttons {
           display: flex;
           justify-content: space-between;
           margin-bottom: 12px;
           width: 100%;
       }

       .action-button {
           width: 45px;
           height: 45px;
           border-radius: 10px;
           background: var(--secondary);
           border: none;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.3s ease;
           position: relative;
       }

       .action-button:hover {
           background: var(--secondary-dark);
           transform: translateY(-2px);
       }

       .action-button svg {
           width: 24px;
           height: 24px;
           color: var(--text);
       }
       /* Исправлен стиль для иконок */

       .action-button img {
           width: 24px;
           height: 24px;
           display: block;
           opacity: 0.9;
       }

       .tooltip {
           position: absolute;
           top: -40px;
           left: 50%;
           transform: translateX(-50%);
           background: var(--secondary-dark);
           color: var(--text);
           padding: 6px 10px;
           border-radius: 6px;
           font-size: 12px;
           white-space: nowrap;
           opacity: 0;
           visibility: hidden;
           transition: all 0.3s ease;
           pointer-events: none;
           z-index: 1000;
       }

       .tooltip:after {
           content: '';
           position: absolute;
           bottom: -4px;
           left: 50%;
           transform: translateX(-50%);
           border-left: 5px solid transparent;
           border-right: 5px solid transparent;
           border-top: 5px solid var(--secondary-dark);
       }

       .action-button:hover .tooltip {
           opacity: 1;
           visibility: visible;
           transform: translate(-50%, -5px);
       }

       /* Главный контейнер для области чата */
       .main-container {
           width: 100%;
           height: calc(100vh - 40px);  /* Учитываем padding контейнера */
           display: flex;
           position: relative;
           /* overflow убран для нормальной работы скролла */
       }

       /* Toast notifications */
       .pc-toast-container {
           position: fixed;
           inset: 0;
           z-index: 100000;
           pointer-events: none;
       }

       .pc-toast {
           position: fixed;
           pointer-events: auto;
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 12px;
           padding: 12px 14px;
           border-radius: 12px;
           background: rgba(17, 25, 34, 0.92);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.14);
           box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
           color: var(--text);
           font-size: 14px;
           line-height: 1.3;
           opacity: 0;
           width: min(520px, calc(100vw - 24px));
           box-sizing: border-box;
           transform: var(--pc-toast-transform, translateX(-50%) translateY(6px));
           transition: opacity 0.2s ease, transform 0.2s ease;
           backdrop-filter: blur(10px);
       }

       .pc-toast.pc-toast--show {
           opacity: 1;
           transform: var(--pc-toast-transform-show, translateX(-50%) translateY(0));
       }

       .pc-toast__action {
           background: rgba(var(--primary-rgb), 0.12);
           border: 1px solid rgba(var(--primary-rgb), 0.35);
           color: rgba(var(--primary-rgb), 0.95);
           padding: 6px 10px;
           border-radius: 10px;
           cursor: pointer;
           font-weight: 600;
           font-size: 13px;
       }

       .pc-toast__action:hover {
           border-color: rgba(var(--primary-rgb), 0.6);
       }

       @media (prefers-color-scheme: light) {
           .pc-toast {
               background: rgba(255, 255, 255, 0.95);
               box-shadow: 0 12px 40px rgba(6, 46, 43, 0.15);
               border-color: rgba(var(--ui-contrast-rgb), 0.12);
           }
           .pc-toast__action {
               background: rgba(var(--primary-rgb), 0.10);
               border-color: rgba(var(--primary-rgb), 0.40);
               color: rgb(var(--primary-rgb));
           }
           .pc-toast__action:hover {
               background: rgba(var(--primary-rgb), 0.18);
               border-color: rgba(var(--primary-rgb), 0.70);
               color: rgb(var(--primary-rgb));
           }
       }

       html[data-theme="light"] .pc-toast {
           background: rgba(255, 255, 255, 0.95);
           box-shadow: 0 12px 40px rgba(6, 46, 43, 0.15);
           border-color: rgba(var(--ui-contrast-rgb), 0.12);
       }

       html[data-theme="light"] .pc-toast__action {
           background: rgba(var(--primary-rgb), 0.10);
           border-color: rgba(var(--primary-rgb), 0.40);
           color: rgb(var(--primary-rgb));
       }

       html[data-theme="light"] .pc-toast__action:hover {
           background: rgba(var(--primary-rgb), 0.18);
           border-color: rgba(var(--primary-rgb), 0.70);
           color: rgb(var(--primary-rgb));
       }

       /* Десктопные действия (правый верхний угол области чата) */
       .chat-top-actions {
           position: absolute;
           top: 12px;
           right: 14px;
           z-index: 30;
           display: flex;
           gap: 6px;
           align-items: center;
       }

       @media (max-width: 768px) {
           .chat-top-actions {
               display: none;
           }
       }

       #chat {
           flex: 1;
           overflow-y: auto;  /* Только здесь разрешаем скролл */
           overscroll-behavior: contain;  /* Предотвращаем прокрутку родителя */
           overflow-x: hidden;  /* Предотвращаем горизонтальный скролл */
           padding: 20px 40px 130px 40px;  /* Отступ снизу под плавающую форму */
           scroll-padding-bottom: 160px;  /* Дополнительный запас для программного скролла */
           /* transition убран - переключение диалогов должно быть мгновенным */
           margin-left: 230px;  /* Отступ для боковой панели (230px ширина) */
           box-sizing: border-box;
           position: relative;
           height: calc(100vh - 105px);  /* Фиксированная высота чата с учетом формы ввода */
           transition: margin-left 0.3s ease;
           display: flex;
           flex-direction: column;
       }

       /* Внутренний контейнер для центрирования сообщений */
       #chat > * {
           max-width: 768px;
           width: 100%;
           margin-left: auto;
           margin-right: auto;
           padding: 0 20px; /* Добавляем padding как у формы ввода */
           box-sizing: border-box;
       }

       /* Когда панель свёрнута */
       body.sidebar-collapsed #chat {
           margin-left: 50px;  /* Только ширина свернутой панели */
           margin-bottom: 5px; /* Небольшой отступ снизу */
           scroll-behavior: auto;  /* Отключаем smooth scroll для программного управления */
       }

       .message {
           margin: 30px 0;
           display: flex;
           flex-direction: column;
           opacity: 1;
           transform: none;
       }

       /* Отключаем анимации при загрузке диалогов - они вызывают прыжки */
       .message.message-initial {
           opacity: 1;  /* Сразу видимо */
           transform: none;  /* Без трансформаций */
           animation: none;  /* Без анимаций */
       }

       .message.animated {
           /* Animation removed - only for initial load now */
       }

       .message.human {
           animation-delay: 0s;
       }

       .message.assistant {
           animation-delay: 0.1s;
       }

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

       @keyframes messageAppear {
           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .message .label {
           font-size: 14px;
           color: var(--text-dim);
           margin-bottom: 6px;
       }

       /* Label для пользователя - справа над облачком, ближе к облачку */
       .message.human .label {
           text-align: right;
           margin-right: 0px; /* Сдвигаем правее, к началу облачка */
       }

       /* Label для ассистента - слева, выровнен с текстом */
       .message.assistant .label {
           margin-left: 0px; /* Убираем отступ, чтобы был у самого края как текст */
       }

       .message-bubble {
           max-width: 100%; /* Увеличиваем до 100% чтобы использовать всю ширину контейнера */
           margin: 5px 0;
           /* white-space: pre-wrap; - убрано чтобы не было огромных пробелов */
           font-size: 16px; /* ChatGPT использует 16px для основного текста */
           line-height: 1.6; /* Улучшенная читаемость как в ChatGPT */
           font-weight: 400;
       }

       .message-bubble h1,
       .message-bubble h2,
       .message-bubble h3 {
           margin-top: 15px;
           margin-bottom: 8px;
           color: var(--text);
           font-weight: 600;
       }

       .message-bubble h1 {
           font-size: 20px;
       }

       .message-bubble h2 {
           font-size: 18px;
       }

       .message-bubble h3 {
           font-size: 16px;
       }

       .message-bubble p {
           margin: 8px 0;
           color: var(--text); /* Явно задаем цвет текста */
           letter-spacing: 0.01em; /* Небольшое расстояние между буквами как в ChatGPT */
       }

       .message-bubble ul,
       .message-bubble ol {
           margin: 8px 0;
           padding-left: 20px;
       }

       .message-bubble li {
           margin: 4px 0;
       }

       /* User messages - WITH bubble styling (серое как было у ассистента) */
       .human .message-bubble {
           background: linear-gradient(145deg, var(--secondary), var(--secondary-dark));
           margin-left: auto;
           margin-right: 0; /* Убираем правый отступ чтобы доходило до края */
           max-width: 70%; /* Ограничиваем ширину для сообщений пользователя */
           padding: 10px 20px;
           border-radius: 15px;
       }

       /* Assistant messages - WITHOUT bubble styling (plain text) */
       .assistant .message-bubble {
           background: none;
           padding: 0;  /* Убираем все отступы чтобы использовать полную ширину */
           margin-right: auto;
           border-radius: 0;
       }

       /* Assistant error/system messages - WITH bubble styling */
       .message.assistant.message-error .message-bubble {
           background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.1));
           border: 1px solid rgba(239, 68, 68, 0.2);
           padding: 15px 20px;
           border-radius: 12px;
           margin-top: 6px;
       }

       /* Align user message actions to the right (copy question) */
       .message.human .feedback-form {
           justify-content: flex-end;
           margin-top: 6px;
       }

       .message a,
       .message-bubble a {
           color: var(--link);
           text-decoration: none;
           font-size: 13px;
           transition: all 0.3s ease;
       }

       .message a:hover,
       .message-bubble a:hover {
           color: var(--primary);
           text-decoration: underline;
       }
       /* Очищены и упрощены стили для источников -
          наша кастомная реализация из JavaScript будет их заменять */

       .sources {
           margin-top: 10px;
           padding: 12px;
           color: var(--text-dim);
           background: rgba(var(--ui-contrast-rgb), 0.05);
           border-radius: 8px;
       }

       /* ====== НОВАЯ ФОРМА ВВОДА В СТИЛЕ ChatGPT ====== */

       /* Главный контейнер формы - фиксированный внизу */
       .chatgpt-input-container {
           position: fixed;
           bottom: -10px; /* Опускаем за нижний край на 10px */
           left: 250px;  /* 230px (ширина панели) + 20px дополнительный отступ */
           right: 0;
           background: transparent; /* Полностью прозрачный фон */
           padding: 20px 20px 24px;
           z-index: 100;
           transition: all 0.3s ease;
       }

       /* Когда панель свёрнута */
       body.sidebar-collapsed .chatgpt-input-container {
           left: 70px;  /* 50px (ширина свернутой панели) + 20px отступ */
       }

       /* Внутренний контейнер с максимальной шириной */
       .chatgpt-input-wrapper {
           max-width: 768px;
           margin: 0 auto;
           position: relative;
       }

       /* ====== Ряд уведомлений над полем ввода ======
          Общий flex-контейнер, в который попадают разные "чипы" над textarea:
          превью прикреплённого документа, индикатор активных правил ИИ,
          в будущем — любые другие короткие подсказки. Все элементы внутри
          выглядят стилистически одинаково, переносятся при нехватке места. */
       .input-notice-row {
           display: flex;
           flex-wrap: wrap;
           align-items: center;
           /* column-gap для соседних чипов, маленький row-gap чтобы при переносе
              «Анализ:» и панель выбора не расходились по вертикали (фидбек 2026-06-14). */
           column-gap: 8px;
           row-gap: 4px;
           margin-bottom: 12px;
           /* padding-right подобран так, чтобы центр кругового dial (32px wide)
              по горизонтали совпадал с центром send-кнопки (36×36, прижатой к
              правому краю формы с padding:12px 16px). Расчёт:
              send-центр: form_padding_right(16) + send_width/2 = 16 + 18 = 34px от правого края формы.
              dial-центр: dial_width/2 = 16px от правого края ряда.
              offset = 34 - 16 = 18px. */
           padding-right: 18px;
       }
       /* Логический порядок элементов в .input-notice-row (flex-order).
          Учитывая, что .input-notice-row — flex-wrap ряд, order управляет
          не только горизонтальным порядком, но и вертикальным (при переносе).
          Правила для ИИ — постоянные «статусные» чипы, должны идти первыми.
          Подсказка «Улучшить запрос» — ситуативная, появляется внизу
          (ближе к полю ввода), чтобы не отвлекать от главного.
          Круговой индикатор контекста — последним и прижимается вправо. */
       .input-notice-row > #ai-rules-indicator { order: 1; }
       .input-notice-row > .attached-file-preview { order: 2; }
       .input-notice-row > #prompt-improve-hint { order: 3; }
       .input-notice-row > #context-usage-dial { order: 4; margin-left: auto; }
       .input-notice-row:empty { display: none; }
       /* Когда внутри ряда живут старые блоки, у которых был свой margin-bottom,
          сбрасываем его — ряд сам управляет отступами. */
       .input-notice-row > .attached-file-preview { margin-bottom: 0; animation: none; }

       /* ====== Индикатор активных пользовательских правил для ИИ ======
          Стилистически — близнец .attached-file-item, чтобы в ряду с
          прикреплённым файлом это смотрелось как единая концепция чипов. */
       /* Базовый шаблон чипа в .input-notice-row — тот же, что у
          .attached-file-item: padding 8px 12px, gap 8px, radius 10px.
          Фон НЕПРОЗРАЧНЫЙ (--secondary) — в тёмной теме тёмно-синий,
          в светлой теме var(--secondary) = #EAF7F5 (бледно-мятный). */
       .ai-rules-indicator {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           padding: 8px 12px;
           background: var(--secondary);
           border: 1px solid rgba(var(--primary-rgb), 0.35);
           border-radius: 10px;
           font-size: 13px;
           line-height: 1.3;
           color: var(--text);
           cursor: pointer;
           transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
           user-select: none;
           animation: slideDown 0.2s ease-out;
       }

       .ai-rules-indicator:hover,
       .ai-rules-indicator:focus-visible {
           background: var(--secondary-dark);
           border-color: rgba(var(--primary-rgb), 0.5);
           outline: none;
       }

       .ai-rules-indicator:active { transform: translateY(1px); }

       .ai-rules-indicator__icon {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           color: var(--primary);
           stroke: var(--primary);
           flex-shrink: 0;
       }

       .ai-rules-indicator__text {
           color: var(--text);
           font-weight: 500;
           white-space: nowrap;
           max-width: 260px;
           overflow: hidden;
           text-overflow: ellipsis;
       }

       .ai-rules-indicator__count {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           min-width: 20px;
           height: 20px;
           padding: 0 6px;
           border-radius: 999px;
           background: rgba(var(--primary-rgb), 0.18);
           color: var(--primary);
           font-weight: 600;
           font-variant-numeric: tabular-nums;
           font-size: 11px;
           line-height: 1;
       }

       .ai-rules-indicator__dismiss {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 22px;
           height: 22px;
           padding: 0;
           background: transparent;
           border: none;
           border-radius: 6px;
           color: var(--text-dim);
           cursor: pointer;
           flex-shrink: 0;
           transition: background-color 0.15s ease, color 0.15s ease;
       }

       .ai-rules-indicator__dismiss:hover {
           background: rgba(var(--primary-rgb), 0.18);
           color: var(--text);
       }
       /* Важно: крестик получает фокус отдельно, подсветим его так же */
       .ai-rules-indicator__dismiss:focus-visible {
           outline: 2px solid rgba(var(--primary-rgb), 0.45);
           outline-offset: 1px;
       }

       @media (max-width: 520px) {
           .ai-rules-indicator { font-size: 12px; padding: 7px 10px; gap: 6px; }
           .ai-rules-indicator__text { max-width: 200px; }
       }

       /* ====== Индикатор заполненности контекста диалога ======
          Чип в том же ряду, что и правила для ИИ. Три порога:
          - warn (цвет primary, ≥50%): подсказка «Контекст заполнен на X%»
          - soft (amber, ≥75%): + кнопка «Продолжить в новом чате»
          - hard (red, ≥90%): тот же вид + явная рекомендация начать новый чат

          Цвета для soft/hard — через CSS-переменные, чтобы светлая и тёмная
          тема имели правильный контраст (на белом фоне нужен более насыщенный
          оттенок, на тёмном — более мягкий). Переменные объявляются здесь же,
          тёмная тема — по умолчанию, светлая переопределена через html[data-theme="light"]. */
       :root {
           --ctx-warn-bg: rgba(var(--primary-rgb), 0.08);
           --ctx-warn-border: rgba(var(--primary-rgb), 0.2);
           --ctx-warn-icon: var(--primary);
           --ctx-warn-fill: var(--primary);

           --ctx-soft-bg: rgba(245, 158, 11, 0.12);
           --ctx-soft-border: rgba(245, 158, 11, 0.35);
           --ctx-soft-icon: #fbbf24;
           --ctx-soft-fill: #f59e0b;
           --ctx-soft-text: #fcd34d;

           --ctx-hard-bg: rgba(248, 113, 113, 0.14);
           --ctx-hard-border: rgba(248, 113, 113, 0.4);
           --ctx-hard-icon: #f87171;
           --ctx-hard-fill: #ef4444;
           --ctx-hard-text: #fca5a5;
       }
       html[data-theme="light"] {
           --ctx-soft-bg: rgba(217, 119, 6, 0.10);
           --ctx-soft-border: rgba(217, 119, 6, 0.38);
           --ctx-soft-icon: #b45309;
           --ctx-soft-fill: #d97706;
           --ctx-soft-text: #92400e;

           --ctx-hard-bg: rgba(220, 38, 38, 0.10);
           --ctx-hard-border: rgba(220, 38, 38, 0.42);
           --ctx-hard-icon: #b91c1c;
           --ctx-hard-fill: #dc2626;
           --ctx-hard-text: #991b1b;
       }
       @media (prefers-color-scheme: light) {
           :root:not([data-theme="dark"]) {
               --ctx-soft-bg: rgba(217, 119, 6, 0.10);
               --ctx-soft-border: rgba(217, 119, 6, 0.38);
               --ctx-soft-icon: #b45309;
               --ctx-soft-fill: #d97706;
               --ctx-soft-text: #92400e;

               --ctx-hard-bg: rgba(220, 38, 38, 0.10);
               --ctx-hard-border: rgba(220, 38, 38, 0.42);
               --ctx-hard-icon: #b91c1c;
               --ctx-hard-fill: #dc2626;
               --ctx-hard-text: #991b1b;
           }
       }

       /* ====== Круговой индикатор контекста ======
          Маленький SVG-donut справа над полем ввода. Центральная надпись —
          текущий процент. На hover / focus — показывает тултип с деталями и
          кнопкой «Продолжить в новом чате» (на soft/hard). */
       .context-usage-dial {
           position: relative;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 32px;
           height: 32px;
           flex-shrink: 0;
           cursor: help;
           user-select: none;
           animation: slideDown 0.2s ease-out;
           color: var(--ctx-warn-fill);
           outline: none;
           /* Непрозрачный фон, чтобы dial не сливался с текстом чата,
              если пользователь проматывает сообщения под ним. */
           background: var(--secondary);
           border-radius: 50%;
       }
       .context-usage-dial:focus-visible::before {
           content: "";
           position: absolute;
           inset: -3px;
           border-radius: 50%;
           border: 2px solid rgba(var(--primary-rgb), 0.55);
       }
       .context-usage-dial__svg {
           position: absolute;
           inset: 0;
           width: 100%;
           height: 100%;
           transform: rotate(0deg);
       }
       .context-usage-dial__track {
           stroke: rgba(var(--primary-rgb), 0.18);
       }
       .context-usage-dial__progress {
           stroke: currentColor;
           transition: stroke-dasharray 0.35s ease, stroke 0.25s ease;
       }
       .context-usage-dial__label {
           position: relative;
           font-size: 10px;
           font-weight: 700;
           letter-spacing: -0.02em;
           color: var(--text);
           font-variant-numeric: tabular-nums;
           line-height: 1;
           z-index: 1;
       }

       /* Уровни — меняем только цвет кольца, чтобы dial оставался спокойным. */
       .context-usage-dial--warn { color: var(--ctx-warn-fill); }
       .context-usage-dial--soft { color: var(--ctx-soft-fill); }
       .context-usage-dial--hard { color: var(--ctx-hard-fill); }
       /* На hard-уровне добавим мягкую пульсацию, чтобы не пропустить. */
       .context-usage-dial--hard {
           animation: ctxDialHardPulse 2.2s ease-in-out infinite;
       }
       @keyframes ctxDialHardPulse {
           0%, 100% { filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0)); }
           50%      { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.55)); }
       }
       @media (prefers-reduced-motion: reduce) {
           .context-usage-dial--hard { animation: none; }
           .context-usage-dial__progress { transition: none; }
       }

       /* Tooltip — абсолютно позиционированный, ВВЕРХ от dial (dial находится
          в верхней полосе уведомлений, так что снизу обрезается контейнером;
          вверх — пространство свободнее). Прилегает правой границей к dial. */
       .context-usage-dial__tooltip {
           position: absolute;
           bottom: calc(100% + 10px);
           right: 0;
           min-width: 260px;
           max-width: 320px;
           padding: 12px 14px 14px;
           /* По умолчанию — тёмная тема. Берём secondary-dark как фон,
              т.к. это самый тёмный слой в палитре и даёт максимальный контраст
              с фоном страницы (который сам --background). */
           background: var(--secondary-dark);
           color: var(--text);
           border: 1px solid rgba(var(--primary-rgb), 0.35);
           border-radius: 12px;
           box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
           font-size: 12.5px;
           line-height: 1.45;
           opacity: 0;
           visibility: hidden;
           transform: translateY(4px);
           transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
           z-index: 100;
           pointer-events: none;
       }
       /* Стрелка-«хвост» у тултипа, указывает на dial снизу. */
       .context-usage-dial__tooltip::after {
           content: "";
           position: absolute;
           top: 100%;
           right: 10px;
           width: 0;
           height: 0;
           border-left: 7px solid transparent;
           border-right: 7px solid transparent;
           border-top: 7px solid var(--secondary-dark);
           filter: drop-shadow(0 1px 0 rgba(var(--primary-rgb), 0.35));
       }
       /* Светлая тема — только ЯВНО выставленная или prefers-color-scheme:light
          без явного data-theme="dark". Важно: запрещаем матчить дефолт без атрибута. */
       html[data-theme="light"] .context-usage-dial__tooltip {
           background: #FFFFFF;
           color: var(--text);
           border-color: rgba(15, 118, 110, 0.28);
           box-shadow: 0 -10px 24px rgba(15, 46, 43, 0.18);
       }
       html[data-theme="light"] .context-usage-dial__tooltip::after {
           border-top-color: #FFFFFF;
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .context-usage-dial__tooltip {
               background: #FFFFFF;
               color: var(--text);
               border-color: rgba(15, 118, 110, 0.28);
               box-shadow: 0 -10px 24px rgba(15, 46, 43, 0.18);
           }
           html:not([data-theme="dark"]):not([data-theme="light"]) .context-usage-dial__tooltip::after {
               border-top-color: #FFFFFF;
           }
       }
       .context-usage-dial:hover .context-usage-dial__tooltip,
       .context-usage-dial:focus-visible .context-usage-dial__tooltip,
       .context-usage-dial--open .context-usage-dial__tooltip {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
           pointer-events: auto;
       }
       .context-usage-dial__tt-title {
           font-size: 11px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
           color: var(--text-dim);
           margin-bottom: 4px;
       }
       .context-usage-dial__tt-percent {
           font-size: 20px;
           font-weight: 700;
           letter-spacing: -0.01em;
           color: currentColor;
           margin-bottom: 4px;
           font-variant-numeric: tabular-nums;
       }
       /* Подсказка/предупреждение — важная часть тултипа. На soft/hard
          добавляем цветной фон + иконку, чтобы пользователь не пропустил. */
       .context-usage-dial__tt-hint {
           color: var(--text);
           margin-bottom: 10px;
           padding: 8px 10px;
           background: rgba(var(--primary-rgb), 0.10);
           border-left: 3px solid var(--primary);
           border-radius: 6px;
           font-weight: 500;
       }
       .context-usage-dial--soft .context-usage-dial__tt-hint {
           background: rgba(245, 158, 11, 0.16);
           border-left-color: var(--ctx-soft-fill);
           color: var(--ctx-soft-text, #fcd34d);
       }
       html[data-theme="light"] .context-usage-dial--soft .context-usage-dial__tt-hint {
           color: #92400e;
       }
       .context-usage-dial--hard .context-usage-dial__tt-hint {
           background: rgba(239, 68, 68, 0.18);
           border-left-color: var(--ctx-hard-fill);
           color: var(--ctx-hard-text, #fca5a5);
           font-weight: 600;
       }
       html[data-theme="light"] .context-usage-dial--hard .context-usage-dial__tt-hint {
           color: #991b1b;
       }
       .context-usage-dial__tt-action {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 100%;
           padding: 7px 10px;
           background: currentColor;
           color: #fff;
           border: none;
           border-radius: 8px;
           font-size: 12px;
           font-weight: 600;
           cursor: pointer;
           transition: filter 0.15s ease, transform 0.12s ease;
       }
       html[data-theme="light"] .context-usage-dial__tt-action {
           color: #fff;
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .context-usage-dial__tt-action {
               color: #fff;
           }
       }
       .context-usage-dial--warn .context-usage-dial__tt-action { background: var(--primary-dark); color: #fff; }
       .context-usage-dial--soft .context-usage-dial__tt-action { background: var(--ctx-soft-fill); }
       .context-usage-dial--hard .context-usage-dial__tt-action { background: var(--ctx-hard-fill); }
       .context-usage-dial__tt-action:hover { filter: brightness(1.1); }
       .context-usage-dial__tt-action:active { transform: translateY(1px); }
       .context-usage-dial__tt-action:disabled { opacity: 0.7; cursor: progress; }

       /* Мобильные — dial компактнее, тултип не вылезает за экран. */
       @media (max-width: 520px) {
           .context-usage-dial { width: 30px; height: 30px; }
           .context-usage-dial__label { font-size: 9.5px; }
           .context-usage-dial__tooltip {
               right: 0;
               left: auto;
               max-width: calc(100vw - 24px);
               min-width: 220px;
               font-size: 12px;
               padding: 10px 12px 12px;
           }
           .context-usage-dial__tt-percent { font-size: 18px; }
           .context-usage-dial__tt-title { font-size: 10px; }
       }

       /* ====== Подсказка-счётчик размера одного сообщения ======
          Появляется под формой ввода, когда сообщение приближается к лимиту
          на одно обращение (текст + прикреплённый документ в токенах).
          Тонкая строка, не мешает вводу. На превышении лимита — красная. */
       :root {
           --msg-size-warn-bg: rgba(var(--primary-rgb), 0.08);
           --msg-size-warn-border: rgba(var(--primary-rgb), 0.2);
           --msg-size-warn-color: var(--text-dim);
           --msg-size-over-bg: rgba(248, 113, 113, 0.14);
           --msg-size-over-border: rgba(248, 113, 113, 0.4);
           --msg-size-over-color: #fca5a5;
       }
       html[data-theme="light"] {
           --msg-size-over-bg: rgba(220, 38, 38, 0.10);
           --msg-size-over-border: rgba(220, 38, 38, 0.42);
           --msg-size-over-color: #991b1b;
       }
       @media (prefers-color-scheme: light) {
           :root:not([data-theme="dark"]) {
               --msg-size-over-bg: rgba(220, 38, 38, 0.10);
               --msg-size-over-border: rgba(220, 38, 38, 0.42);
               --msg-size-over-color: #991b1b;
           }
       }
       .message-size-hint {
           margin-top: 6px;
           padding: 5px 10px;
           background: var(--msg-size-warn-bg);
           border: 1px solid var(--msg-size-warn-border);
           border-radius: 8px;
           font-size: 12px;
           line-height: 1.35;
           color: var(--msg-size-warn-color);
           font-variant-numeric: tabular-nums;
       }
       .message-size-hint--over {
           background: var(--msg-size-over-bg);
           border-color: var(--msg-size-over-border);
           color: var(--msg-size-over-color);
           font-weight: 600;
       }
       @media (max-width: 520px) {
           .message-size-hint { font-size: 11px; padding: 4px 8px; }
       }

       /* ====== Подсказка «улучшить запрос» ======
          Появляется под формой ввода по эвристике (короткий запрос, одно
          слово и т.п.). Не блокирует отправку — только предлагает помощь.
          Клик «Улучшить» → LLM переформулирует запрос, пользователь
          принимает или отклоняет изменения. */
       :root {
           --improve-hint-bg: rgba(var(--primary-rgb), 0.10);
           --improve-hint-border: rgba(var(--primary-rgb), 0.22);
           --improve-hint-color: var(--text);
           --improve-hint-icon: var(--primary);
           --improve-hint-dim: var(--text-dim);
       }
       /* Чип идёт в общем ряду .input-notice-row — тот же стандарт, что
          у .attached-file-item и .ai-rules-indicator. Фон НЕПРОЗРАЧНЫЙ. */
       .prompt-improve-hint {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           padding: 8px 12px;
           background: var(--secondary);
           border: 1px solid rgba(var(--primary-rgb), 0.35);
           border-radius: 10px;
           font-size: 13px;
           line-height: 1.3;
           color: var(--improve-hint-color);
           animation: slideDown 0.2s ease-out;
           max-width: 100%;
       }
       .prompt-improve-hint__icon {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           color: var(--improve-hint-icon);
           flex-shrink: 0;
       }
       .prompt-improve-hint__text {
           flex: 1 1 auto;
           min-width: 0;
       }
       .prompt-improve-hint__action {
           /* Компактный inline-chip: не выходит за вертикальный ритм
              чипа-родителя. padding подобран так, чтобы высота кнопки
              совпадала с высотой .ai-rules-indicator__count (≈20px),
              а весь чип имел тот же визуальный размер, что и правый
              «Правила для ИИ активны». */
           padding: 3px 10px;
           background: var(--primary-dark, #0F766E);
           color: #ffffff;
           border: none;
           border-radius: 6px;
           font-size: 12px;
           font-weight: 600;
           line-height: 1.3;
           cursor: pointer;
           transition: background-color 0.15s ease, transform 0.12s ease;
           flex-shrink: 0;
           white-space: nowrap;
       }
       .prompt-improve-hint__action:hover {
           background: var(--primary);
           color: #0A2626;
       }
       /* В светлой теме primary тёмная, hover всё равно должен остаться тёмным
          с белым текстом — чтобы не сливалось с белым фоном карточки. */
       html[data-theme="light"] .prompt-improve-hint__action:hover {
           background: var(--primary-dark);
           color: #ffffff;
           filter: brightness(1.1);
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .prompt-improve-hint__action:hover {
               background: var(--primary-dark);
               color: #ffffff;
               filter: brightness(1.1);
           }
       }
       .prompt-improve-hint__action:active { transform: translateY(1px); }
       .prompt-improve-hint__action:disabled { opacity: 0.7; cursor: progress; }
       .prompt-improve-hint__action:focus-visible {
           outline: 2px solid rgba(var(--primary-rgb), 0.5);
           outline-offset: 2px;
       }
       /* Loading-state: кнопка «ИИ думает…» со спиннером.
          Spinner — CSS-only, без SVG. Блокирует повторный клик + явно
          показывает, что запрос в работе. */
       .prompt-improve-hint__action--loading {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           cursor: progress;
           opacity: 0.92;
       }
       .prompt-improve-hint__action--loading:disabled { opacity: 0.92; }
       .prompt-improve-hint__spinner {
           display: inline-block;
           width: 12px;
           height: 12px;
           border-radius: 50%;
           border: 2px solid rgba(255, 255, 255, 0.35);
           border-top-color: #ffffff;
           animation: promptImproveSpin 0.75s linear infinite;
           flex-shrink: 0;
       }
       @keyframes promptImproveSpin {
           to { transform: rotate(360deg); }
       }
       @media (prefers-reduced-motion: reduce) {
           .prompt-improve-hint__spinner { animation-duration: 2s; }
       }
       .prompt-improve-hint__dismiss {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 22px;
           height: 22px;
           padding: 0;
           background: transparent;
           border: none;
           border-radius: 6px;
           color: var(--improve-hint-dim);
           cursor: pointer;
           flex-shrink: 0;
           transition: background-color 0.15s ease, color 0.15s ease;
       }
       .prompt-improve-hint__dismiss:hover {
           background: rgba(var(--primary-rgb), 0.14);
           color: var(--text);
       }
       @media (max-width: 520px) {
           .prompt-improve-hint {
               font-size: 12px;
               padding: 7px 10px;
               gap: 6px;
               flex-wrap: wrap;
           }
           .prompt-improve-hint__action { padding: 5px 10px; font-size: 11px; }
       }

       /* ====== Кнопка-лампочка в форме ввода ======
          Всегда видима (если юзер не отключил на 7 дней). Клик — показывает
          или скрывает чип .prompt-improve-hint в .input-notice-row.
          Когда эвристика считает текущий черновик сырым — лампочка пульсирует
          (мягкий ореол), намекая на возможное улучшение, но без всплывающих
          подсказок и прыгающего UI. */
       .improve-toggle-btn {
           position: relative;
           cursor: pointer;
           padding: 8px;
           border: none;
           border-radius: 8px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           color: var(--text-dim);
           background: transparent;
           transition: color 0.2s ease, background-color 0.2s ease, transform 0.12s ease;
           align-self: flex-end;
           flex-shrink: 0;
       }
       .improve-toggle-btn:hover {
           background: rgba(var(--primary-rgb), 0.1);
           color: var(--primary);
       }
       .improve-toggle-btn:active { transform: translateY(1px); }
       .improve-toggle-btn:focus-visible {
           outline: 2px solid rgba(var(--primary-rgb), 0.5);
           outline-offset: 2px;
       }
       /* Состояние «чип раскрыт» — кнопка подсвечивается как активная */
       .improve-toggle-btn[aria-expanded="true"] {
           background: rgba(var(--primary-rgb), 0.14);
           color: var(--primary);
       }
       .improve-toggle-btn svg { pointer-events: none; }

       /* Пульсация — мягкий ореол, запускается через .improve-toggle-btn--pulse.
          Работает через абсолютно позиционированный span::after, чтобы не
          влиять на layout и не мешать другим элементам. */
       .improve-toggle-btn__pulse {
           position: absolute;
           inset: -2px;
           border-radius: 10px;
           pointer-events: none;
           opacity: 0;
       }
       .improve-toggle-btn--pulse .improve-toggle-btn__pulse {
           opacity: 1;
           animation: improveTogglePulse 2.2s ease-in-out infinite;
           background: radial-gradient(
               circle,
               rgba(var(--primary-rgb), 0.35) 0%,
               rgba(var(--primary-rgb), 0.0) 70%
           );
       }
       .improve-toggle-btn--pulse { color: var(--primary); }
       @keyframes improveTogglePulse {
           0%   { transform: scale(0.9); opacity: 0; }
           50%  { transform: scale(1.15); opacity: 0.9; }
           100% { transform: scale(1.4); opacity: 0; }
       }
       @media (prefers-reduced-motion: reduce) {
           .improve-toggle-btn--pulse .improve-toggle-btn__pulse {
               animation: none;
               opacity: 0.5;
               transform: scale(1.1);
           }
       }

       /* ====== Модалка «исходный vs улучшенный» запрос ====== */
       .prompt-improve-modal {
           position: fixed;
           inset: 0;
           z-index: 10000;
           display: none;
           align-items: center;
           justify-content: center;
           padding: 20px;
       }
       .prompt-improve-modal[aria-hidden="false"] {
           display: flex;
           animation: hideRulesConfirmFadeIn 0.15s ease-out;
       }
       .prompt-improve-modal__backdrop {
           position: absolute;
           inset: 0;
           background: rgba(0, 0, 0, 0.55);
           backdrop-filter: blur(4px);
           -webkit-backdrop-filter: blur(4px);
       }
       html[data-theme="light"] .prompt-improve-modal__backdrop {
           background: rgba(15, 30, 45, 0.35);
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .prompt-improve-modal__backdrop {
               background: rgba(15, 30, 45, 0.35);
           }
       }
       .prompt-improve-modal__card {
           position: relative;
           width: 100%;
           /* Шире на ПК — чтобы side-by-side «ваш запрос» vs «предложение ИИ»
              действительно было читаемо. На мобильных панели падают в столбик. */
           max-width: 900px;
           max-height: calc(100vh - 40px);
           overflow-y: auto;
           background: var(--secondary);
           border: 1px solid rgba(var(--primary-rgb), 0.2);
           border-radius: 16px;
           padding: 24px 28px 20px;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
           color: var(--text);
           animation: hideRulesConfirmSlideUp 0.2s ease-out;
       }
       html[data-theme="light"] .prompt-improve-modal__card {
           background: var(--background-light, #FFFFFF);
           box-shadow: 0 18px 48px rgba(15, 46, 43, 0.18);
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .prompt-improve-modal__card {
               background: var(--background-light, #FFFFFF);
               box-shadow: 0 18px 48px rgba(15, 46, 43, 0.18);
           }
       }
       .prompt-improve-modal__header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 10px;
           margin-bottom: 6px;
       }
       .prompt-improve-modal__title {
           margin: 0;
           font-size: 17px;
           font-weight: 600;
           color: var(--text);
       }
       .prompt-improve-modal__confidence {
           display: inline-flex;
           align-items: center;
           padding: 3px 8px;
           border-radius: 999px;
           font-size: 11px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
           background: rgba(var(--primary-rgb), 0.14);
           color: var(--primary);
           white-space: nowrap;
       }
       .prompt-improve-modal__confidence--low {
           background: rgba(245, 158, 11, 0.18);
           color: #b45309;
       }
       html[data-theme="dark"] .prompt-improve-modal__confidence--low {
           color: #fbbf24;
       }
       .prompt-improve-modal__reason {
           margin: 0 0 16px;
           font-size: 13px;
           line-height: 1.45;
           color: var(--text-dim);
       }
       .prompt-improve-modal__panels {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 12px;
           margin-bottom: 18px;
       }
       .prompt-improve-modal__panel {
           display: flex;
           flex-direction: column;
           gap: 6px;
           min-width: 0;
       }
       .prompt-improve-modal__panel-label {
           font-size: 11px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
           color: var(--text-dim);
       }
       .prompt-improve-modal__panel-body {
           background: rgba(var(--primary-rgb), 0.06);
           border: 1px solid rgba(var(--primary-rgb), 0.15);
           border-radius: 10px;
           padding: 12px 14px;
           font-size: 14px;
           line-height: 1.5;
           color: var(--text);
           white-space: pre-wrap;
           word-break: break-word;
           min-height: 160px;
           max-height: 380px;
           overflow-y: auto;
       }
       .prompt-improve-modal__panel--new .prompt-improve-modal__panel-body {
           background: rgba(var(--primary-rgb), 0.12);
           border-color: rgba(var(--primary-rgb), 0.32);
       }
       .prompt-improve-modal__panel-textarea {
           resize: vertical;
           font-family: inherit;
       }
       .prompt-improve-modal__panel-textarea:focus {
           outline: 2px solid rgba(var(--primary-rgb), 0.5);
           outline-offset: 1px;
       }
       .prompt-improve-modal__actions {
           display: flex;
           gap: 10px;
           justify-content: flex-end;
           flex-wrap: wrap;
       }
       .prompt-improve-modal__btn {
           padding: 9px 16px;
           border-radius: 10px;
           font-size: 14px;
           font-weight: 600;
           cursor: pointer;
           transition: background-color 0.15s ease, border-color 0.15s ease,
                       transform 0.12s ease, filter 0.15s ease;
           border: 1px solid transparent;
           min-width: 120px;
       }
       .prompt-improve-modal__btn:active { transform: translateY(1px); }
       .prompt-improve-modal__btn:focus-visible {
           outline: 2px solid rgba(var(--primary-rgb), 0.5);
           outline-offset: 2px;
       }
       .prompt-improve-modal__btn--secondary {
           background: transparent;
           color: var(--text);
           border-color: rgba(var(--primary-rgb), 0.25);
       }
       .prompt-improve-modal__btn--secondary:hover {
           background: rgba(var(--primary-rgb), 0.08);
           border-color: rgba(var(--primary-rgb), 0.4);
       }
       /* Ghost — третичная кнопка «Не показывать 7 дней». Слева от остальных,
          визуально самая тихая, чтобы не конкурировать с основным действием. */
       .prompt-improve-modal__btn--ghost {
           background: transparent;
           color: var(--text-dim);
           border-color: transparent;
           min-width: 0;
           padding: 9px 10px;
           font-weight: 500;
           margin-right: auto;
       }
       .prompt-improve-modal__btn--ghost:hover {
           background: rgba(var(--primary-rgb), 0.06);
           color: var(--text);
       }
       @media (max-width: 640px) {
           .prompt-improve-modal__btn--ghost {
               order: 3;
               flex-basis: 100%;
               margin-right: 0;
               margin-top: 4px;
               padding: 8px 10px;
               font-size: 12.5px;
           }
       }
       .prompt-improve-modal__btn--primary {
           /* Всегда тёмный фон + белый текст = гарантированный контраст
              в обеих темах. primary-dark существует и в тёмной (#2BA5A0),
              и в светлой (#0B5B55) — обе достаточно тёмные для белого текста. */
           background: var(--primary-dark, #0F766E);
           color: #ffffff;
           border-color: var(--primary-dark, #0F766E);
       }
       .prompt-improve-modal__btn--primary:hover {
           background: var(--primary);
           color: #0A2626;
           border-color: var(--primary);
       }
       html[data-theme="light"] .prompt-improve-modal__btn--primary:hover {
           background: var(--primary-dark);
           color: #ffffff;
           filter: brightness(1.1);
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .prompt-improve-modal__btn--primary:hover {
               background: var(--primary-dark);
               color: #ffffff;
               filter: brightness(1.1);
           }
       }
       .prompt-improve-modal__btn--primary:disabled { opacity: 0.7; cursor: progress; }

       @media (max-width: 640px) {
           .prompt-improve-modal { padding: 12px; align-items: flex-end; }
           .prompt-improve-modal__card {
               max-width: 100%;
               padding: 18px 16px 14px;
               border-radius: 16px 16px 12px 12px;
           }
           .prompt-improve-modal__panels {
               grid-template-columns: 1fr;
               gap: 10px;
           }
           .prompt-improve-modal__panel-body { max-height: 180px; }
           .prompt-improve-modal__title { font-size: 16px; }
           .prompt-improve-modal__btn { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 13.5px; }
       }

       /* ====== Модалка подтверждения скрытия индикатора правил ИИ ======
          Показывается при клике на крестик чипа .ai-rules-indicator.
          Кнопки: «Скрыть на 24 часа» (primary) и «Отмена» (secondary).
          Overlay + карточка по центру, адаптивно под мобильный и обе темы. */
       .hide-rules-confirm {
           position: fixed;
           inset: 0;
           z-index: 10000;
           display: none;
           align-items: center;
           justify-content: center;
           padding: 20px;
       }
       .hide-rules-confirm[aria-hidden="false"] {
           display: flex;
           animation: hideRulesConfirmFadeIn 0.15s ease-out;
       }
       @keyframes hideRulesConfirmFadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
       }
       .hide-rules-confirm__backdrop {
           position: absolute;
           inset: 0;
           background: rgba(0, 0, 0, 0.55);
           backdrop-filter: blur(4px);
           -webkit-backdrop-filter: blur(4px);
       }
       html[data-theme="light"] .hide-rules-confirm__backdrop {
           background: rgba(15, 30, 45, 0.35);
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .hide-rules-confirm__backdrop {
               background: rgba(15, 30, 45, 0.35);
           }
       }
       .hide-rules-confirm__card {
           position: relative;
           width: 100%;
           max-width: 420px;
           background: var(--secondary);
           border: 1px solid rgba(var(--primary-rgb), 0.2);
           border-radius: 16px;
           padding: 24px 24px 20px;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
           color: var(--text);
           animation: hideRulesConfirmSlideUp 0.2s ease-out;
       }
       @keyframes hideRulesConfirmSlideUp {
           from { transform: translateY(12px); opacity: 0.4; }
           to { transform: translateY(0); opacity: 1; }
       }
       html[data-theme="light"] .hide-rules-confirm__card {
           background: var(--background-light, #FFFFFF);
           box-shadow: 0 18px 48px rgba(15, 46, 43, 0.18);
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .hide-rules-confirm__card {
               background: var(--background-light, #FFFFFF);
               box-shadow: 0 18px 48px rgba(15, 46, 43, 0.18);
           }
       }
       .hide-rules-confirm__icon {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 40px;
           height: 40px;
           border-radius: 12px;
           background: rgba(var(--primary-rgb), 0.12);
           color: var(--primary);
           margin-bottom: 12px;
       }
       .hide-rules-confirm__title {
           margin: 0 0 8px;
           font-size: 17px;
           font-weight: 600;
           color: var(--text);
           line-height: 1.3;
       }
       .hide-rules-confirm__desc {
           margin: 0 0 20px;
           font-size: 14px;
           line-height: 1.5;
           color: var(--text-dim);
       }
       .hide-rules-confirm__actions {
           display: flex;
           gap: 10px;
           justify-content: flex-end;
           flex-wrap: wrap;
       }
       .hide-rules-confirm__btn {
           padding: 9px 16px;
           border-radius: 10px;
           font-size: 14px;
           font-weight: 600;
           cursor: pointer;
           transition: background-color 0.15s ease, border-color 0.15s ease,
                       transform 0.12s ease, filter 0.15s ease;
           border: 1px solid transparent;
           min-width: 110px;
       }
       .hide-rules-confirm__btn:active { transform: translateY(1px); }
       .hide-rules-confirm__btn:focus-visible {
           outline: 2px solid rgba(var(--primary-rgb), 0.5);
           outline-offset: 2px;
       }
       .hide-rules-confirm__btn--secondary {
           background: transparent;
           color: var(--text);
           border-color: rgba(var(--primary-rgb), 0.25);
       }
       .hide-rules-confirm__btn--secondary:hover {
           background: rgba(var(--primary-rgb), 0.08);
           border-color: rgba(var(--primary-rgb), 0.4);
       }
       .hide-rules-confirm__btn--primary {
           background: var(--primary);
           color: #fff;
           border-color: var(--primary);
       }
       html[data-theme="light"] .hide-rules-confirm__btn--primary {
           color: #FFFFFF;
       }
       @media (prefers-color-scheme: light) {
           html:not([data-theme="dark"]):not([data-theme="light"]) .hide-rules-confirm__btn--primary {
               color: #FFFFFF;
           }
       }
       .hide-rules-confirm__btn--primary:hover { filter: brightness(1.08); }

       @media (max-width: 520px) {
           .hide-rules-confirm { padding: 16px; align-items: flex-end; }
           .hide-rules-confirm__card {
               max-width: 100%;
               padding: 20px 18px 18px;
               border-radius: 16px 16px 12px 12px;
           }
           .hide-rules-confirm__title { font-size: 16px; }
           .hide-rules-confirm__desc { font-size: 13.5px; margin-bottom: 16px; }
           .hide-rules-confirm__actions { gap: 8px; }
           .hide-rules-confirm__btn {
               flex: 1 1 auto;
               min-width: 0;
               padding: 10px 12px;
               font-size: 13.5px;
           }
       }

       /* Основная форма ввода с парящим эффектом */
	       .chatgpt-input-form {
	           background: var(--secondary);
	           border: 1px solid rgba(var(--primary-rgb), 0.15);
	           border-radius: 12px;
	           padding: 12px 16px;
	           display: flex;
	           align-items: center;
	           gap: 12px;
	           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3),
	                       0 3px 8px rgba(0, 0, 0, 0.15);
	           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	           position: relative;
	       }

       /* Эффект фокуса на форме */
       .chatgpt-input-form:focus-within {
           border-color: var(--primary);
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35),
                       0 0 0 1px var(--primary),
                       0 0 15px rgba(var(--primary-rgb), 0.15);
           transform: translateY(-3px);
       }

       /* Textarea с авто-ресайзом */
       .chatgpt-textarea {
           flex: 1;
           background: transparent;
           border: none;
           color: var(--text);
           font-size: 15px;
           line-height: 1.5;
           resize: none;
           outline: none;
           height: 24px; /* Фиксированная начальная высота */
           min-height: 24px;
           max-height: 200px;
           overflow-y: auto;
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           padding: 0;
           scrollbar-width: thin;
           scrollbar-color: var(--secondary) transparent;
       }

       .chatgpt-textarea::-webkit-scrollbar {
           width: 6px;
       }

       .chatgpt-textarea::-webkit-scrollbar-track {
           background: transparent;
       }

       .chatgpt-textarea::-webkit-scrollbar-thumb {
           background: var(--secondary);
           border-radius: 3px;
       }

       .chatgpt-textarea::-webkit-scrollbar-thumb:hover {
           background: var(--secondary-dark);
       }

       .chatgpt-textarea::placeholder {
           color: var(--text-dim);
           opacity: 0.8;
       }

       /* Кнопка отправки.
          Всегда яркая primary-dark с белой стрелкой — чтобы пользователь
          видел, что это кнопка и куда кликать. Без зависимости от .active
          (раньше после отправки кнопка теряла заливку и стрелка «пропадала»).
          На hover — светлеет до primary. */
	       .chatgpt-send-button {
	           width: 36px;
	           height: 36px;
	           /* ВАЖНО: явный padding:0 обязателен. Глобальный селектор `button {}`
	              ниже в этом же файле ставит padding 12px 24px — без сброса он
	              сдвигает SVG далеко за визуальные границы кнопки, из-за чего
	              стрелка «пропадает» (срезается overflow контейнера формы). */
	           padding: 0;
	           border-radius: 10px;
	           background: var(--primary-dark);
	           border: 1px solid var(--primary-dark);
	           color: #ffffff;
	           cursor: pointer;
	           display: flex;
	           align-items: center;
	           justify-content: center;
	           transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
	           flex-shrink: 0;
	           position: relative;
	           align-self: flex-end;
	           overflow: hidden;
	       }

       /* .active — просто усиление того же стиля при наличии текста (градиент). */
       .chatgpt-send-button.active {
           background: linear-gradient(135deg, var(--primary-dark), var(--primary));
           border-color: var(--primary);
       }

       .chatgpt-send-button:hover:not(:disabled) {
           background: var(--primary);
           border-color: var(--primary);
           transform: scale(1.05);
       }
       .chatgpt-send-button.active:hover:not(:disabled) {
           background: linear-gradient(135deg, var(--primary), var(--primary-dark));
       }

       .chatgpt-send-button:active:not(:disabled) {
           transform: scale(0.95);
       }

       .chatgpt-send-button:disabled {
           opacity: 0.55;
           cursor: not-allowed;
       }

       .chatgpt-send-button svg {
           width: 20px;
           height: 20px;
           stroke: currentColor;
           color: #ffffff;
           transition: transform 0.2s ease;
       }

       .chatgpt-send-button:hover:not(:disabled) svg {
           transform: translateY(-2px);
       }

       /* Для обратной совместимости со старым кодом */
       #message {
           /* Теперь это textarea с классом chatgpt-textarea */
       }

       button {
           background: linear-gradient(145deg, var(--primary-dark), var(--primary));
           color: white;
           border: none;
           border-radius: 12px;
           padding: 12px 24px;
           font-size: 15px;
           font-weight: 500;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       button:hover {
           background: linear-gradient(145deg, var(--turquoise-darker), var(--primary-dark));
           transform: translateY(-2px);
       }

       /* Replenish balance modal: amount pills (light/dark theme friendly) */
       .amount-buttons {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 10px;
           margin-top: 12px;
       }

       @media (max-width: 420px) {
           .amount-buttons {
               grid-template-columns: repeat(2, minmax(0, 1fr));
           }
       }

       button.amount-btn {
           padding: 10px 12px;
           border-radius: 12px;
           background: rgba(var(--ui-contrast-rgb), 0.06);
           border: 1px solid rgba(var(--ui-contrast-rgb), 0.14);
           color: var(--text);
           font-size: 14px;
           font-weight: 650;
           box-shadow: none;
           transform: none;
       }

       button.amount-btn:hover {
           background: rgba(var(--ui-contrast-rgb), 0.09);
           border-color: rgba(var(--ui-contrast-rgb), 0.22);
           transform: translateY(-1px);
       }

       button.amount-btn.selected {
           background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
           border-color: transparent;
           color: #ffffff;
           box-shadow: 0 10px 22px rgba(var(--primary-dark-rgb), 0.18);
       }

       button.amount-btn.selected:hover {
           filter: brightness(1.04);
       }

       #feedback-modal {
           display: none;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--background-light);
           padding: 25px;
           border-radius: 15px;
           z-index: 1000;
       }

       #feedback-modal h3 {
           font-size: 18px;
           margin-bottom: 15px;
           color: var(--text);
       }

       .modal-actions {
           display: flex;
           justify-content: center;
           margin-top: 0px;
       }

       #feedback-modal input,
       #feedback-modal textarea {
           width: 100%;
           margin: 8px 0;
           padding: 10px;
           border-radius: 8px;
           border: 1px solid var(--secondary);
           background: var(--secondary-dark);
           color: var(--text);
           font-size: 14px;
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
           box-sizing: border-box;
       }

       #feedback-modal textarea {
           height: 150px;
           resize: vertical;
       }

       @media (max-width: 768px) {
           #feedback-modal {
               width: calc(100vw - 24px);
               max-width: 520px;
               padding: 18px;
               box-sizing: border-box;
               max-height: calc(100vh - 24px);
               overflow: auto;
           }
       }

       .modal-overlay {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.7);
           z-index: 999;
           backdrop-filter: blur(4px);
       }

       .feedback-success {
           display: none;
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--success);
           color: white;
           padding: 15px 25px;
           border-radius: 8px;
           font-size: 15px;
           z-index: 1001;
       }

       .input-row {
           display: flex;
           align-items: center;
       }

       .logout-button:hover {
           background: var(--secondary-dark);
           transform: translateY(-2px);
       }

       .send-button {
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .send-icon {
           display: none;
           width: 24px;
           height: 24px;
       }

       .button-text {
           display: block;
       }

       .mobile-notice {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.8);
           z-index: 9999;
           backdrop-filter: blur(4px);
       }

       .mobile-notice-content {
           position: fixed;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: var(--background-light);
           padding: 20px;
           border-radius: 12px;
           width: 85%;
           max-width: 320px;
           text-align: center;
       }

       .notice-text {
           color: var(--text);
           font-size: 15px;
           line-height: 1.5;
           margin-bottom: 20px;
       }

       .notice-button {
           background: var(--primary);
           color: white;
           border: none;
           border-radius: 8px;
           padding: 12px 30px;
           font-size: 15px;
           cursor: pointer;
           width: 100%;
       }

       .notice-button:hover {
           background: var(--primary-dark);
       }

       /* Скрываем кнопки сворачивания на мобильных устройствах */
       @media (max-width: 768px) {
           .sidebar-toggle-btn,
           #conversations-panel-collapsed {
               display: none !important;
           }
       }

       @media (max-width: 768px) {
           /* Скроллбары для мобильных устройств */
           ::-webkit-scrollbar {
               width: 6px;  /* Тоньше для мобильных */
               height: 6px;
           }

           ::-webkit-scrollbar-track {
               background: transparent;
           }

           ::-webkit-scrollbar-thumb {
               background: rgba(var(--primary-rgb), 0.35);
               border-radius: 3px;
           }

           /* Форсируем фон из текущей темы */
           html {
               background: var(--background) !important;
               background-color: var(--background) !important;
           }

           body {
               padding: 0;
               display: flex;
               flex-direction: column;
               height: 100vh;
               position: fixed;  /* Фиксируем body для предотвращения bounce эффекта */
               width: 100%;
               background: linear-gradient(135deg, var(--background), var(--background-light)) !important;
               background-color: var(--background) !important;
               color: var(--text) !important;
           }

           /* Убираем белый фон у контейнера */
           .container {
               background: transparent !important;
               background-color: transparent !important;
           }

           #chat {
               margin: 0;
               padding: 10px;
               flex: 1;
               overflow-y: auto;  /* Явно указываем скролл */
               -webkit-overflow-scrolling: touch;  /* Smooth scrolling на iOS */
               overscroll-behavior: contain;  /* Предотвращаем прокрутку родителя */
               padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px));  /* Отступ больше высоты формы */
               scroll-padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px));
               background: transparent !important;  /* Прозрачный фон чата */
               background-color: transparent !important;
           }
           /* Мобильная версия формы ввода ChatGPT */
           .chatgpt-input-container {
               position: fixed;
               bottom: 5px; /* Красивый отступ от низа экрана */
               left: 0;
               right: 0;
               padding: 10px;
               background: transparent; /* Прозрачный фон и на мобилке */
               z-index: 100;
               /* Учитываем safe area для iPhone X+ */
               padding-bottom: env(safe-area-inset-bottom, 10px);
           }
           
           .chatgpt-input-wrapper {
               max-width: 100%;
           }
           
           .chatgpt-input-form {
               padding: 10px 12px;
               gap: 8px;
               box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
           }
           
           .chatgpt-textarea {
               font-size: 16px; /* Предотвращаем зум на iOS */
           }
           
           .chatgpt-send-button {
               width: 30px;
               height: 30px;
           }
           .button-text {
               display: none;
           }
           .send-icon {
               display: block;
           }
           .send-button {
               width: 45px;
               padding: 10px;
               min-width: 45px;
           }
           .message {
               margin: 10px 0;
           }
           .message-bubble {
               max-width: 95%;
               font-size: 16px;
               line-height: 1.4;
           }
           
           /* Mobile: User messages keep bubble styling */
           .human .message-bubble {
               padding: 12px;
           }
           
           /* Mobile: Assistant messages have no bubble */
           .assistant .message-bubble {
               padding: 0;
           }
           .message .label {
               font-size: 12px;
               margin-bottom: 4px;
               margin-left: 8px;
           }
           .sources {
               margin-top: 8px;
               padding: 8px;
               font-size: 12px;
           }

           .message-bubble h1 {
               font-size: 16px;
               margin-top: 12px;
               margin-bottom: 6px;
           }
           .message-bubble h2 {
               font-size: 15px;
               margin-top: 10px;
               margin-bottom: 6px;
           }
           .message-bubble h3 {
               font-size: 14px;
               margin-top: 8px;
               margin-bottom: 4px;
           }
           .message-bubble p {
               margin: 6px 0;
           }
           .message-bubble ul,
           .message-bubble ol {
               margin: 6px 0;
               padding-left: 16px;
           }
           .message-bubble li {
               margin: 3px 0;
           }
           .message-bubble a {
               color: var(--link);
               text-decoration: none;
               font-weight: 500;
               transition: all 0.2s;
           }
           .message-bubble a:hover {
               color: var(--primary);
               text-decoration: underline;
           }
           /* Стили для источников - мы их добавляем в JS */
           .custom-source-ref {
               color: var(--link) !important;
               text-decoration: none;
               font-weight: bold;
           }
           .custom-source-ref:hover {
               text-decoration: underline;
           }
       }


    .mobile-menu {
        display: none;
    }

    @media (max-width: 768px) {

        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;  /* Предотвращаем скролл на контейнере */
            gap: 0;
            background: transparent !important;  /* Еще раз форсируем прозрачность */
            padding: 0;
        }
        
        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .mobile-menu {
            display: flex;
        }

    }
    /* Стили для контейнера иконок */
    .mobile-icons {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: var(--background);
        padding: 10px 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
    }

    /* Стили для каждой иконки */
    .mobile-icons .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }

    .mobile-icons .icon img {
        width: 24px;
        height: 24px;
        opacity: 0.9;
    }

    .mobile-icons .icon span {
        font-size: 12px;
        color: var(--text-dim);
        text-align: center;
    }

    .mobile-icons .icon:hover span {
        color: var(--primary);
    }


    .btn-primary {
        background: linear-gradient(135deg, #40e0d0 0%, #5fffe8 100%);
        border: none;
        color: #05333e;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #38d2c4 0%, #55f5df 100%);
        color: #032027;
    }

.feedback-icon {
    cursor: pointer;
    opacity: 0.85;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    background: rgba(var(--ui-contrast-rgb), 0.02) !important;
    border: none !important;
    justify-content: center;
    margin: 0; /* Убираем все отступы */
    padding: 6px;
    border-radius: 6px;
    color: rgba(var(--ui-contrast-rgb), 0.6);
    position: relative;
    /* Важно для правильного выравнивания всех элементов */
    vertical-align: middle;
    line-height: 1;
    /* Убираем различия между button и span */
    font-size: inherit;
    font-family: inherit;
}

/* Красивые тултипы */
.feedback-icon[data-tooltip]:not(.sources-toggle):hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(17, 24, 39, 0.95);
    color: #e5e7eb;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 6px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.feedback-icon[data-tooltip]:not(.sources-toggle):hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(17, 24, 39, 0.95);
    margin-bottom: -4px;
    z-index: 1000;
    pointer-events: none;
}

.feedback-icon:hover {
    opacity: 1;
    color: var(--text);
    background: linear-gradient(135deg, rgba(var(--primary-dark-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.15) 100%) !important;
    border-radius: 6px !important;
}

.feedback-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.feedback-icon.thumbs-up:hover {
    color: var(--primary);
}

.feedback-icon.thumbs-down:hover {
    color: #ef4444;
}

.feedback-icon.copy-message:hover {
    color: var(--primary);
}

.feedback-icon.save-to-notes:hover {
    color: #a78bfa;
}

/* Стили для кнопки "Источники" */
.sources-button-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sources-button-group:hover .feedback-icon.sources-icon {
    opacity: 1;
    color: var(--success);
}

.sources-button-group:hover .sources-text {
    color: var(--success);
    opacity: 1;
}

.feedback-icon.sources-icon:hover {
    color: var(--success);
}

/* Специальный тултип для кнопки источников */
.feedback-icon.sources-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(17, 24, 39, 0.95);
    color: #e5e7eb;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-in-out forwards;
}

.feedback-icon.sources-icon[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(17, 24, 39, 0.95);
    z-index: 1000;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-in-out forwards;
}

@keyframes tooltipFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes highlightPulse {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(var(--primary-rgb), 0.2);
        box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
    }
    100% {
        background-color: transparent;
    }
}

/* Текст "Источники" */
.sources-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: rgba(var(--primary-rgb), 0.78);
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 1;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Hover эффект для группы источников */
.sources-button-group:hover .sources-text {
    color: var(--success);
    opacity: 0.95;
}

.sources-button-group:hover .feedback-icon.sources-icon {
    color: var(--success);
}

/* Стили для таблиц в сообщениях */
.message-bubble table {
    width: auto;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0;
    background: var(--background-light);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.10);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    font-size: 14px;
}

.message-bubble th {
    background: linear-gradient(
        135deg,
        rgba(var(--primary-rgb), 0.18),
        rgba(var(--primary-dark-rgb), 0.12)
    );
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.12);
    white-space: nowrap;
}

.message-bubble td {
    padding: 12px 16px;
    color: var(--text);
    border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.10);
    vertical-align: top;
}

.message-bubble th:not(:last-child),
.message-bubble td:not(:last-child) {
    border-right: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
}

.message-bubble tbody tr:nth-child(even) td {
    background: rgba(var(--primary-rgb), 0.04);
}

.message-bubble tr:last-child td {
    border-bottom: none;
}

.message-bubble tr:hover td {
    background: rgba(var(--primary-rgb), 0.07);
    transition: background 0.2s ease;
}

/* Контейнер для таблицы с кнопкой копирования */
/* Готовый юридический документ внутри ответа ИИ: преформатированный блок,
   сохраняющий plain-text вёрстку (шапка/выравнивание/переносы строк), как в
   .docx. Рендерится из ---ДОКУМЕНТ---...---КОНЕЦ ДОКУМЕНТА--- в
   markdown-renderer.js (_restoreDocumentBlocks). Цвет текста наследуется от
   бабла, поэтому блок корректен и в тёмной теме. */
.legal-document {
    margin: 16px 0;
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.16);
    border-radius: 12px;
    background: rgba(var(--ui-contrast-rgb), 0.03);
    overflow: hidden;
}

.legal-document__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: rgba(var(--primary-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.10);
}

.legal-document__label::before {
    content: "📄";
}

.legal-document__body {
    padding: 20px 24px;
    font-family: "PT Serif", "Times New Roman", Georgia, serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: inherit;
    background: transparent;
}

/* Строки документа повторяют раскладку .docx (см. _renderLegalDocumentHtml):
   шапка справа, заголовок по центру, тело по ширине, подпись справа. */
.legal-document__body > div {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.legal-document__body .ld-header { text-align: right; }
.legal-document__body .ld-title { text-align: center; font-weight: 700; margin: 14px 0 6px; }
.legal-document__body .ld-section { font-weight: 700; margin-top: 10px; }
.legal-document__body .ld-li { padding-left: 1.6em; }
.legal-document__body .ld-sign { text-align: right; }
.legal-document__body .ld-p { text-align: justify; text-indent: 1.6em; }
.legal-document__body .ld-empty { height: 0.7em; }

/* Таблицы внутри документа (markdown-таблица → <table>, см. _renderDocTableHtml) */
.legal-document__body .ld-table-wrap { overflow-x: auto; margin: 8px 0; }
.legal-document__body .ld-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.4;
}
.legal-document__body .ld-table th,
.legal-document__body .ld-table td {
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.45);
    padding: 5px 9px;
    vertical-align: top;
    text-align: left;
}
.legal-document__body .ld-table th {
    font-weight: 700;
    text-align: center;
    background: rgba(var(--ui-contrast-rgb), 0.05);
}

/* Панель «Поиск судебной практики» в модалке правил ИИ — отдельный неудаляемый
   пункт списка слева (под базовым правилом); справа выбор Авто/Отключить.
   Цвета через theme-переменные → корректен в светлой и тёмной теме; адаптив. */
.chat-ai-rule-judge-panel {
    flex-direction: column;
    gap: 12px;
    padding: 4px 2px;
}
.chat-ai-rule-judge-panel__title {
    font-size: 18px;
    font-weight: 700;
    color: inherit;
}
.chat-ai-rule-judge-panel__desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(var(--ui-contrast-rgb), 0.7);
}
.chat-ai-rule-judge-panel__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.judge-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(var(--ui-contrast-rgb), 0.16);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.judge-opt:hover {
    border-color: rgba(var(--primary-rgb), 0.45);
    background: rgba(var(--primary-rgb), 0.04);
}
.judge-opt.is-selected {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.10);
}
.judge-opt__title {
    font-weight: 600;
    font-size: 14px;
}
.judge-opt.is-selected .judge-opt__title {
    color: var(--primary-dark);
}
.judge-opt__sub {
    font-size: 12px;
    color: rgba(var(--ui-contrast-rgb), 0.6);
}
@media (max-width: 600px) {
    .chat-ai-rule-judge-panel__title { font-size: 16px; }
}

.table-container {
    position: relative;
    margin: 16px 0;
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    padding-bottom: 45px; /* Отступ для кнопки копирования */
    border-radius: 12px;
}

/* Кастомный скроллбар для таблиц */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(var(--ui-contrast-rgb), 0.04);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.28);
    border-radius: 4px;
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.42);
}

.table-copy-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(var(--primary-rgb), 0.10);
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    opacity: 1;
    backdrop-filter: blur(8px);
}

.table-copy-button:hover {
    transform: translateY(-1px);
    background: rgba(var(--primary-rgb), 0.16);
    border-color: rgba(var(--primary-rgb), 0.40);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    color: var(--primary);
}

.table-copy-button:active {
    transform: translateY(0);
}

.table-copy-button:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}

.table-copy-button svg {
    width: 14px;
    height: 14px;
}

.table-copy-button.copied {
    background: rgba(var(--primary-rgb), 0.16);
    border-color: rgba(var(--primary-rgb), 0.50);
    color: var(--primary);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .message-bubble table {
        font-size: 12px;
    }
    
    .message-bubble th,
    .message-bubble td {
        padding: 8px 12px;
    }
    
    .table-copy-button {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* Убираем дефолтные стили button */
button.feedback-icon {
    border: none !important;
    background: transparent !important;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 6px; /* Явно указываем padding как у span элементов */
    text-align: center;
    vertical-align: middle;
    /* Сбрасываем стили button до базовых */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Убеждаемся что button ведет себя как inline-flex элемент */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Focus стили для доступности */
button.feedback-icon:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Hover состояние button */
button.feedback-icon:hover {
    background: linear-gradient(135deg, rgba(var(--primary-dark-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.15) 100%) !important;
    border: none !important;
    border-radius: 6px !important;
}

/* Активное состояние кнопки */
button.feedback-icon:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(var(--primary-dark-rgb), 0.2) 0%, rgba(var(--primary-rgb), 0.2) 100%) !important;
}


.feedback-form {
    margin-top: 10px;
    display: flex;
    gap: 8px; /* Увеличиваем отступ между элементами для лучшей читаемости */
    align-items: center;
    flex-wrap: wrap; /* Позволяем переносить элементы на новую строку на маленьких экранах */
    /* Важно: убеждаемся что все дочерние элементы выравниваются по базовой линии */
    line-height: 0;
}

/* Мобильные устройства */
@media (max-width: 768px) {
    .feedback-form {
        gap: 6px;
    }
    
    /* Адаптация кнопки источников для мобильных */
    .sources-text {
        font-size: 12px;
        font-weight: 300;
    }
}

.feedback-form textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(var(--ui-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.14);
    max-width: 100%;
    margin-top: 10px;
}

.feedback-form textarea:focus {
    outline: none !important;
    border-color: rgba(var(--primary-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

.feedback-form > div {
    flex-direction: column;
    width: 100%;
}

.feedback-form button {
    max-width: 200px;
    margin-top: 10px;
}

/* Comment form under AI messages (thumbs-down) */
.feedback-comment-form {
    margin-top: 10px;
    width: 100%;
}

.feedback-comment-input {
    width: 100%;
    min-height: 54px;
    resize: vertical;
}

.feedback-comment-input::placeholder {
    color: rgba(var(--ui-contrast-rgb), 0.55);
}

.feedback-comment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    color: #ffffff;
    font-weight: 600;
    background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
    box-shadow: 0 10px 22px rgba(var(--primary-dark-rgb), 0.18);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
}

.feedback-comment-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 14px 30px rgba(var(--primary-dark-rgb), 0.22);
}

.custom-show-more {
    margin-top: 10px;
    margin-bottom: 10px;
}


.message .assistant {
    margin-bottom: 30px;
}

.modal-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90vh; /* Высота модального окна */
    scrollbar-gutter: stable; /* Предотвращаем прыжки при появлении скролла */
    position: relative;  /* Обеспечиваем правильный контекст позиционирования */
    padding-top: 25px; /* Пространство для плашки "Ваш тариф" */
}

.my-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--background), var(--background-light));
  color: var(--text);
  height: 100vh;
  overflow: hidden;  /* Предотвращаем скролл */
  display: flex;
}

.custom-source-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    margin: 0;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.custom-source-item:hover {
    background: rgba(var(--ui-contrast-rgb), 0.04);
}

.custom-source-number {
    font-size: 12px;
    margin-right: 0;
    color: rgba(var(--ui-contrast-rgb), 0.6);
}

.custom-show-more-btn {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  padding: 8px 15px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.custom-show-more-btn:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--turquoise-light));
  border-color: var(--primary);
  transform: translateY(-1px);
}

.custom-sources-container {
    margin-top: 8px;
    padding: 12px;
    background: rgba(var(--primary-rgb), 0.03);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 8px;
    color: var(--text);
}

.custom-sources-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--ui-contrast-rgb), 0.85);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.custom-sources-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--primary);
    flex-shrink: 0;
}

.custom-sources-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.custom-sources-container a.custom-source-link {
    color: rgba(var(--ui-contrast-rgb), 0.85);
    text-decoration: none;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.custom-sources-container a.custom-source-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Judge Practice Wrapper (button + collapsible container, goes after message bubble) */
.judge-practice-wrapper {
    margin-top: 12px;
    margin-bottom: 8px;
}

.judge-practice-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.judge-practice-toggle-btn:hover .judge-tooltip {
    opacity: 1;
    visibility: visible;
}

.judge-tooltip {
    left: 0;
    transform: none;
    text-align: left;
}

.judge-tooltip::after {
    left: 18px;
    transform: none;
}

.judge-tooltip-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-dim);
}

.judge-tooltip-list li {
    margin: 4px 0;
    line-height: 1.35;
}

.judge-practice-toggle-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-1px);
}

.judge-practice-toggle-btn svg {
    flex-shrink: 0;
}

.judge-practice-text-container {
    margin-top: 10px;
    padding: 12px;
    background: rgba(var(--primary-rgb), 0.03);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 8px;
}

.judge-practice-content {
    margin: 12px 0;
    padding: 0;
    line-height: 1.6;
}

/* Judge Practice Specific Styles (sources/citations) */
.custom-judge-sources {
    background: rgba(var(--primary-rgb), 0.03);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.judge-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 12px;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 6px;
    font-size: 11px;
    color: rgba(var(--primary-rgb), 0.85);
    line-height: 1.4;
}

.judge-disclaimer svg {
    margin-top: 1px;
    color: rgba(var(--primary-rgb), 0.85);
}

.judge-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px dashed rgba(var(--primary-rgb), 0.22);
    border-radius: 6px;
    background: rgba(var(--primary-rgb), 0.04);
    color: rgba(var(--ui-contrast-rgb), 0.65);
    font-size: 12px;
    line-height: 1.4;
}

.judge-loading-text {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.judge-loading-phrase {
    transition: opacity 0.6s ease;
    opacity: 1;
}

.judge-loading-timer {
    color: rgba(var(--ui-contrast-rgb), 0.5);
    font-size: 12px;
    white-space: nowrap;
}

.judge-loading-spinner {
    border: 2px solid rgba(var(--primary-rgb), 0.18);
    border-top: 2px solid rgba(var(--primary-rgb), 0.9);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    animation: judgeSpin 1s linear infinite;
    flex-shrink: 0;
}

.judge-loading-spinner--small {
    width: 12px;
    height: 12px;
}

.judge-progress-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px dashed rgba(var(--primary-rgb), 0.18);
    border-radius: 6px;
    background: rgba(var(--primary-rgb), 0.04);
    color: rgba(var(--ui-contrast-rgb), 0.65);
    font-size: 12px;
    line-height: 1.4;
}

.judge-case-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.08);
    vertical-align: middle;
}

.judge-case-badge--match {
    background: rgba(var(--primary-rgb), 0.12);
    color: rgba(var(--primary-rgb), 0.95);
    border-color: rgba(var(--primary-rgb), 0.24);
}

.judge-case-badge--diff {
    background: rgba(239, 68, 68, 0.10);
    color: rgba(239, 68, 68, 0.9);
    border-color: rgba(239, 68, 68, 0.22);
}

.judge-case-badge--meta {
    background: rgba(var(--ui-contrast-rgb), 0.06);
    color: rgba(var(--ui-contrast-rgb), 0.92);
    border-color: rgba(var(--ui-contrast-rgb), 0.12);
    font-weight: 500;
}

.judge-case-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.judge-case-text {
    display: block;
    margin-top: 14px;
    margin-bottom: 8px;
}

.judge-case-paragraph {
    margin: 0;
}

.judge-case-paragraph + .judge-case-paragraph {
    margin-top: 10px;
}

.judge-case-paragraph--secondary {
    color: inherit;
}

.judge-case-link {
    display: block;
    margin-top: 10px;
    margin-bottom: 18px;
}

.judge-external-link::after {
    content: "↗";
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.9;
}

.judge-cases-list {
    list-style: decimal;
    padding-left: 24px;
    margin: 0;
}

.judge-practice-text-container ol > li {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .judge-practice-toggle-btn {
        width: 100%;
        justify-content: flex-start;
    }
    .judge-tooltip {
        max-width: 90vw;
        min-width: 0;
    }
    .judge-practice-text-container {
        padding: 10px;
    }
}

@keyframes judgeSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.judge-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.05);
    flex-wrap: wrap;
}

.judge-controls .custom-show-more-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.judge-controls .custom-show-more-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-1px);
}

.judge-auto-open-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.judge-auto-open-label:hover {
    color: var(--text);
}

.judge-auto-open-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}
#new-expert-chat-form {
    margin-top: 10px;
}

/* ====== SPINNER STYLES ====== */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    border: 3px solid rgba(var(--primary-rgb), 0.1);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

.loading-spinner {
    border-color: rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
}

/* ====== Main chat typing indicator ======
   Стили шарят обычный спиннер ответа (#typing) и OCR-спиннер (id вида
   ocr-typing-<stubId>, см. showOcrSpinner в app.js) — у обоих одинаковый вид. */
#typing .typing-row,
[id^="ocr-typing-"] .typing-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

#typing .typing-spinner,
[id^="ocr-typing-"] .typing-spinner {
    border: 2px solid rgba(var(--primary-rgb), 0.2);
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

#typing .loading-text,
[id^="ocr-typing-"] .loading-text {
    color: var(--text);
    font-size: 15px;
    line-height: 1.4;
    transition: opacity 1s ease;
}

#typing .timer,
[id^="ocr-typing-"] .timer {
    color: rgba(var(--ui-contrast-rgb), 0.55);
    font-size: 14px;
    margin-left: 8px;
    white-space: nowrap;
}

#typing .typing-subtext,
[id^="ocr-typing-"] .typing-subtext {
    color: rgba(var(--ui-contrast-rgb), 0.55);
    font-size: 13px;
    margin-top: 12px;
}

/* Для любых других спиннеров или индикаторов загрузки */
.loading::after,
.spinner::after,
[class*="loading"]::after {
    border-top-color: var(--primary) !important;
}

/* ====== USER MENU (ChatGPT/Claude Style) ====== */

.user-menu-container {
    position: relative;
    margin-top: auto; /* Прижимаем к низу */
    margin-bottom: -10px; /* Опускаем за нижний край на 10px */
    padding: 12px;
    border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
    flex-shrink: 0; /* Не сжимаем меню */
}

/* Главная кнопка меню */
.user-menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
    font-family: inherit;
    text-align: left;
}

.user-menu-button:hover {
    background: rgba(var(--ui-contrast-rgb), 0.05);
    border-color: rgba(var(--ui-contrast-rgb), 0.1);
    transform: translateY(0);
}

.user-menu-button.active {
    background: rgba(var(--ui-contrast-rgb), 0.08);
    border-color: rgba(var(--ui-contrast-rgb), 0.15);
}

/* Информация пользователя */
.user-menu-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.user-email {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-account {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-plan {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Бейджи тарифов */
.plan-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-badge.premium {
    background: linear-gradient(135deg, #0F4C4C 0%, #1E7B7B 100%);
    color: white;
    position: relative;
}

.plan-badge.free {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-dim);
}

/* Иконка chevron */
.menu-chevron {
    color: var(--text-dim);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.user-menu-button.active .menu-chevron {
    transform: rotate(180deg);
}

/* Dropdown меню */
.user-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 12px;
    right: 12px;
    background: var(--secondary-dark);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.user-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Секции в dropdown */
.dropdown-section {
    padding: 4px 0;
}

/* Пункты меню */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text);
    font-size: 14px;
    position: relative;
}

.dropdown-item:hover {
    background: rgba(var(--ui-contrast-rgb), 0.08);
}

.dropdown-item:active {
    background: rgba(var(--ui-contrast-rgb), 0.05);
    transform: scale(0.98);
}

.dropdown-item svg {
    width: 18px;
    height: 18px;
    color: rgba(var(--primary-rgb), 0.85);
    flex-shrink: 0;
}

.dropdown-item:hover svg {
    color: var(--text);
}

.dropdown-item span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item[data-theme-toggle]:active {
    transform: none;
}

/* Workspace switcher in the user menu */
.workspace-switcher {
    padding: 4px 0;
}

.workspace-switcher-title {
    padding: 4px 10px 6px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 500;
}

.workspace-option {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    text-align: left;
}

.workspace-option.active {
    background: rgba(var(--primary-rgb), 0.12);
}

.workspace-option.active:hover {
    background: rgba(var(--primary-rgb), 0.16);
}

.workspace-option .workspace-option-icon {
    color: rgba(var(--primary-rgb), 0.85);
}

.workspace-option:not(.active) .workspace-option-icon {
    color: var(--text-dim);
}

.workspace-option-text {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-option-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: var(--primary);
    flex: 0 0 auto;
}

/* Dropdown links + icons */
a.dropdown-item,
a.mobile-dropdown-item {
    text-decoration: none;
}

.menu-item-icon {
    font-size: 0.875rem;
    color: rgba(var(--primary-rgb), 0.85);
    flex-shrink: 0;
}

.dropdown-item:hover .menu-item-icon,
.mobile-dropdown-item:hover .menu-item-icon {
    color: var(--text);
}

/* Theme picker in user menus */
.theme-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.theme-current {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    color: rgba(var(--primary-rgb), 0.85);
}

.theme-submenu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px 10px 6px;
}

.theme-option {
    height: 32px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.10);
    background: rgba(var(--ui-contrast-rgb), 0.03);
    color: rgba(var(--ui-contrast-rgb), 0.70);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.theme-option:hover {
    background: rgba(var(--ui-contrast-rgb), 0.06);
    border-color: rgba(var(--ui-contrast-rgb), 0.14);
    color: var(--text);
    transform: none;
}

.theme-option:active {
    transform: scale(0.98);
}

.theme-option i {
    font-size: 14px;
    line-height: 1;
}

.theme-option.is-active {
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.35);
    color: var(--primary);
}

/* Бейдж для апгрейда */
.upgrade-badge {
    background: linear-gradient(135deg, #0F4C4C, #1E7B7B);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

/* Разделитель */
.dropdown-divider {
    height: 1px;
    background: rgba(var(--ui-contrast-rgb), 0.1);
    margin: 8px 0;
}

/* Анимация при открытии */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Скроллбар для dropdown */
.user-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.user-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.user-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(var(--ui-contrast-rgb), 0.2);
    border-radius: 3px;
}

.user-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ui-contrast-rgb), 0.3);
}

/* Затемнение фона при открытом меню */
.user-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
}

.user-menu-backdrop.show {
    display: block;
}

/* Conversation item with menu trigger */
.conversation-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.conversation-item:hover {
    background-color: rgba(var(--ui-contrast-rgb), 0.05);
}

.conversation-item .conversation-content {
    flex: 1;
    overflow: hidden;
}

.conversation-item .conversation-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Three dots menu trigger */
.conversation-menu-trigger {
    display: none;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    color: rgba(var(--ui-contrast-rgb), 0.55);
}

.conversation-item:hover .conversation-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversation-menu-trigger:hover {
    background-color: rgba(var(--ui-contrast-rgb), 0.1);
    color: var(--text);
}

/* Context menu for conversations - styled exactly like user dropdown */
.conversation-context-menu {
    position: fixed;
    background: var(--secondary-dark);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: none;
    min-width: 200px;
    max-width: 280px;
}

.conversation-context-menu.visible {
    display: block;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    user-select: none;
    position: relative;
}

.context-menu-item:hover {
    background: rgba(var(--ui-contrast-rgb), 0.08);
}

.context-menu-item:hover svg {
    color: var(--text);
}

.context-menu-item:active {
    background: rgba(var(--ui-contrast-rgb), 0.05);
    transform: scale(0.98);
}

.context-menu-item.delete {
    color: var(--text);
}

.context-menu-item.delete:hover {
    background: rgba(var(--ui-contrast-rgb), 0.08);
}

.context-menu-item svg {
    width: 18px;
    height: 18px;
    color: rgba(var(--primary-rgb), 0.85);
    flex-shrink: 0;
}

.context-menu-item span {
    flex: 1;
}

/* Sections for favorite and recent chats */
.conversations-section {
    margin-bottom: 10px;
}

.conversations-loader {
    padding: 10px;
    font-size: 12px;
    text-align: center;
    color: rgba(var(--ui-contrast-rgb), 0.7);
}

#recent-conversations-sentinel {
    height: 1px;
}

.section-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--primary-rgb), 0.85);
    padding: 4px 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.05);
}


/* Highlight favorite items slightly */
.conversation-item.favorite {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 0%, transparent 100%);
}

.conversation-item.favorite:hover {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--ui-contrast-rgb), 0.02) 100%);
}

/* ================================= */
/* НОВЫЙ МОБИЛЬНЫЙ ХЕДЕР В СТИЛЕ CHATGPT */
/* ================================= */

/* Базовые стили для мобильного хедера */
.mobile-header {
    display: none; /* Скрыт по умолчанию, показывается только на мобильных */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    background: var(--background);
    border-bottom: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
    z-index: 1000;
    padding: 0 12px;
    align-items: center;
    justify-content: space-between;
}

/* Кнопка меню слева */
.mobile-menu-btn {
    background: none;
    border: none;
    color: var(--text);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:active {
    background: rgba(var(--ui-contrast-rgb), 0.1);
}

/* Название приложения по центру */
.mobile-app-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

/* Контейнер для кнопок справа */
.mobile-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Кнопки действий */
.mobile-action-btn {
    background: none;
    border: none;
    color: var(--text);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
    position: relative;
}

.mobile-action-btn:hover,
.mobile-action-btn:active {
    background: rgba(var(--ui-contrast-rgb), 0.1);
}

/* Выпадающее меню для мобильной версии */
.mobile-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    background: var(--background-light);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    min-width: 240px;
    max-width: calc(100vw - 24px);
    padding: 4px;
    z-index: 1001;
}

.mobile-dropdown-menu.show {
    display: block;
}

/* Элементы выпадающего меню */
.mobile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
    font-size: 15px;
}

.mobile-dropdown-item span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-dropdown-item:hover,
.mobile-dropdown-item:active {
    background: rgba(var(--ui-contrast-rgb), 0.08);
}

.mobile-dropdown-item svg {
    width: 20px;
    height: 20px;
    color: rgba(var(--primary-rgb), 0.85);
    flex-shrink: 0;
}

/* Разделитель в меню */
.mobile-dropdown-divider {
    height: 1px;
    background: rgba(var(--ui-contrast-rgb), 0.1);
    margin: 4px 8px;
}

/* Кнопка закрытия панели для мобильных */
.mobile-panel-close {
    display: none; /* Скрыта по умолчанию на десктопе */
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(var(--ui-contrast-rgb), 0.1);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.15);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    display: none;
    align-items: center;
    justify-content: center;
}

.mobile-panel-close:hover,
.mobile-panel-close:active {
    background: rgba(var(--ui-contrast-rgb), 0.15);
    transform: scale(1.05);
}

.mobile-panel-close svg {
    width: 20px;
    height: 20px;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    /* Показываем новый мобильный хедер */
    .mobile-header {
        display: flex;
    }
    
    /* Показываем кнопку закрытия панели */
    .mobile-panel-close {
        display: flex !important;
    }
    
    /* Скрываем старое мобильное меню */
    .mobile-menu {
        display: none !important;
    }
    
    /* Адаптируем основной контейнер под новый хедер */
    .main-container {
        padding-top: 54px; /* Отступ для хедера */
    }
    
    /* Адаптируем панель чатов */
    #conversations-panel {
        top: 54px; /* Начинается под хедером */
        height: calc(100vh - 54px);
        padding-top: 50px; /* Отступ для кнопки закрытия */
    }
    
    /* Адаптируем область чата */
    #chat {
        margin-top: 0; /* Убираем лишний отступ */
    }
    
    /* Скрываем десктопные элементы в мобильной версии */
    #conversations-panel .app-header,
    #conversations-panel .user-menu-container,
    #conversations-panel-collapsed {
        display: none !important;
    }

    /* На мобильных показываем кнопку 3 точки всегда (нет hover) */
    .conversation-menu-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Увеличиваем зону нажатия для мобильных */
    .conversation-menu-trigger {
        padding: 8px;
        min-width: 32px;
        min-height: 32px;
    }

    /* Улучшаем отзывчивость кликов на мобильных (убирает 300мс задержку) */
    .conversation-item {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    /* Контекстное меню на мобильных - ограничиваем ширину и позицию */
    .conversation-context-menu {
        max-width: calc(100vw - 20px);
        right: 10px !important;
        left: auto !important;
    }
}
/* ============================================
   NEW Attachments UI - Clean & Compact Design
   ============================================ */

/* Attached File Preview (над полем ввода) */
.attached-file-preview {
    margin-bottom: 8px;
    animation: slideDown 0.2s ease-out;
}

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

.attached-file-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    /* Непрозрачный фон — чтобы текст чата не просвечивал. */
    background: var(--secondary);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    transition: all 0.2s ease;
}

.attached-file-item:hover {
    background: var(--secondary-dark);
    border-color: rgba(var(--primary-rgb), 0.5);
}

.attached-file-item .file-icon {
    flex-shrink: 0;
    color: var(--primary);
    stroke: var(--primary);
}

.attached-file-item .file-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}

.file-remove-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-dim);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.file-remove-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ----- Multi-file attachments (этап 0 концепта загрузки, 2026-04-23) -----
   Контейнер #attached-files-list и чипы файлов стилистически повторяют
   .attached-file-item, но собраны flex-строкой с переносом. */
.attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Чип вложения — та же пилюльная стилистика, что у чипа «Анализ:»
   (.doc-scope-chip в chat_2.html): нейтральная поверхность + тонкий бордер,
   слева мини-«листик» с цветом и подписью типа файла (визуальный язык
   карточек «Моих документов»). */
.attached-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 7px 4px 8px;
    background: var(--background);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.18);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    transition: border-color 0.12s ease;
}

.attached-file-chip:hover {
    border-color: rgba(var(--ui-contrast-rgb), 0.32);
}

/* «Лист бумаги» с загнутым уголком; цвет типа — через --af-c из JS. */
.attached-file-chip__icon {
    position: relative;
    width: 17px;
    height: 21px;
    border-radius: 3px;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--af-c, #8a96a3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.attached-file-chip__icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 0 3px 0 4px;
}

.attached-file-chip__ext {
    color: #fff;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding-bottom: 2px;
    user-select: none;
}

.attached-file-chip__name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}

.attached-file-chip__remove {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.attached-file-chip__remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.upload-error {
    margin-top: 6px;
    color: #ef4444;
    font-size: 12px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Attach Button with Tooltip */
.attach-btn-new {
    position: relative;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: all 0.2s ease;
    background: transparent;
    align-self: flex-end;
}

.attach-btn-new:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.attach-btn-new svg {
    pointer-events: none;
}

/* Tooltip */
.attach-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary-dark);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
    padding: 12px;
    min-width: 260px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
}

.attach-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--secondary-dark);
}

.attach-btn-new:hover .attach-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-item {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.tooltip-item:last-child {
    margin-bottom: 0;
}

.tooltip-item strong {
    color: var(--text);
    font-weight: 600;
}

/* Удаляем старые стили (для совместимости) */
.attachments-bar {
    display: none !important;
}

.document-badges {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================
   Document Badge in Chat Messages
   ============================================ */

.message-document-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-dim);
    transition: all 0.2s ease;
}

/* Если к сообщению прикреплены 2+ файла, бейджи идут в ряд. Отступ между
   ними делаем обычным margin-left — не ломает inline-flex-поведение,
   переносится на новую строку при нехватке ширины (см. этап 0
   концепта загрузки, Docs/DOCUMENTS_UPLOAD_CONCEPT.md). */
.message-document-badge + .message-document-badge {
    margin-left: 6px;
}

/* Бейдж документа, из которого не удалось извлечь текст (скан-PDF без OCR,
   битый файл). Подчёркивает, что файл прикреплён для хранения, но в
   анализе не учитывается. Янтарная палитра, иконка-треугольник справа. */
.message-document-badge--unreadable {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    cursor: help;
    position: relative; /* нужно для кастомного tooltip через ::after */
}
.message-document-badge--unreadable:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.6);
}
.message-document-badge--unreadable .file-icon {
    color: #f59e0b;
    stroke: #f59e0b;
}
.message-document-badge--unreadable .document-name {
    text-decoration: line-through;
    text-decoration-color: rgba(245, 158, 11, 0.5);
    text-decoration-thickness: 1px;
    opacity: 0.85;
}
.message-document-badge .badge-warning-icon {
    margin-left: 2px;
    color: #f59e0b;
    flex-shrink: 0;
}

/* Кастомный tooltip для warning-бейджа. Нативный title ненадёжен
   (не всегда показывается на hover, зависит от pointer-events у детей,
   не виден на мобильных). Делаем через data-tooltip-text — JS записывает
   туда то же сообщение, что и в title (для a11y остаётся). */
.message-document-badge--unreadable[data-tooltip-text]:hover::after {
    content: attr(data-tooltip-text);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    max-width: 320px;
    min-width: 220px;
    padding: 8px 12px;
    background: var(--secondary-dark, #1f2937);
    color: var(--text, #e5e7eb);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    pointer-events: none;
    animation: tooltipFadeIn 0.15s ease-out forwards;
}
.message-document-badge--unreadable[data-tooltip-text]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 16px;
    border: 5px solid transparent;
    border-top-color: rgba(245, 158, 11, 0.4);
    z-index: 10000;
    pointer-events: none;
}

/* На мобильных tap и держи — тоже покажет тултип через :active. */
@media (hover: none) {
    .message-document-badge--unreadable[data-tooltip-text]:active::after {
        content: attr(data-tooltip-text);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        max-width: min(320px, calc(100vw - 40px));
        min-width: 220px;
        padding: 8px 12px;
        background: var(--secondary-dark, #1f2937);
        color: var(--text, #e5e7eb);
        border: 1px solid rgba(245, 158, 11, 0.4);
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.45;
        white-space: normal;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 10000;
        pointer-events: none;
    }
}

/* Баннер «под ответом» со списком нечитаемых файлов (видно ВСЕГДА, не
   только на первой загрузке тоста) — рендерится над блоком ответа
   ассистента, чтобы юзер даже при скролле вниз видел контекст. */
.pc-unreadable-docs-banner {
    margin: 8px 0 12px 0;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.pc-unreadable-docs-banner__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 4px;
}
.pc-unreadable-docs-banner__title svg {
    flex-shrink: 0;
}
.pc-unreadable-docs-banner ul {
    margin: 4px 0 0 0;
    padding-left: 20px;
}
.pc-unreadable-docs-banner li {
    margin: 2px 0;
    color: var(--text-dim);
}
.pc-unreadable-docs-banner li strong {
    color: var(--text);
    font-weight: 600;
}
.pc-unreadable-docs-banner__hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
}

/* Phase 5: информационный вариант баннера (большой документ → RAG).
   Файл прочитан и учтён — спокойный бирюзовый вместо тревожного янтаря. */
.pc-unreadable-docs-banner--info {
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.3);
    border-left: 3px solid #5eead4;
}
.pc-unreadable-docs-banner--info .pc-unreadable-docs-banner__title {
    color: #5eead4;
}
html[data-theme="light"] .pc-unreadable-docs-banner--info {
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.35);
    border-left-color: #0d9488;
}
html[data-theme="light"] .pc-unreadable-docs-banner--info .pc-unreadable-docs-banner__title {
    color: #0f766e;
}

/* Светлая тема: янтарный фон делаем чуть ярче, рамку темнее, чтобы
   бейдж и баннер оставались читаемыми на белом. */
html[data-theme="light"] .message-document-badge--unreadable {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(217, 119, 6, 0.55);
}
html[data-theme="light"] .message-document-badge--unreadable:hover {
    background: rgba(245, 158, 11, 0.28);
    border-color: rgba(217, 119, 6, 0.75);
}
html[data-theme="light"] .message-document-badge--unreadable .file-icon,
html[data-theme="light"] .message-document-badge .badge-warning-icon {
    color: #d97706; /* amber-600 — лучше контраст на светлом */
    stroke: #d97706;
}
html[data-theme="light"] .message-document-badge--unreadable .document-name {
    text-decoration-color: rgba(217, 119, 6, 0.6);
}
html[data-theme="light"] .message-document-badge--unreadable[data-tooltip-text]:hover::after {
    background: #FFFFFF;
    color: #062E2B;
    border-color: rgba(217, 119, 6, 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .message-document-badge--unreadable[data-tooltip-text]:hover::before {
    border-top-color: rgba(217, 119, 6, 0.55);
}
html[data-theme="light"] .pc-unreadable-docs-banner {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(217, 119, 6, 0.45);
    border-left-color: #d97706;
}
html[data-theme="light"] .pc-unreadable-docs-banner__title {
    color: #b45309; /* amber-700 */
}

/* Мобильные: баннер и бейджи уменьшаются, tooltip становится уже */
@media (max-width: 768px) {
    .pc-unreadable-docs-banner {
        font-size: 12px;
        padding: 8px 10px;
    }
    .pc-unreadable-docs-banner__title {
        font-size: 12px;
    }
    .pc-unreadable-docs-banner__hint {
        font-size: 11px;
    }
    .pc-unreadable-docs-banner ul {
        padding-left: 16px;
    }
    .message-document-badge--unreadable[data-tooltip-text]:hover::after,
    .message-document-badge--unreadable[data-tooltip-text]:active::after {
        max-width: calc(100vw - 40px);
        min-width: 180px;
        font-size: 11px;
    }
}

.message-document-badge:hover {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.message-document-badge .file-icon {
    flex-shrink: 0;
    color: var(--primary);
    stroke: var(--primary);
}

.message-document-badge .document-name {
    color: var(--text);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .message-document-badge {
        font-size: 11px;
        padding: 5px 8px;
    }

    .message-document-badge .document-name {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .message-document-badge .document-name {
        max-width: 120px;
    }
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */

@media (max-width: 768px) {
    .attach-tooltip {
        min-width: 240px;
        left: auto;
        right: 0;
        transform: none;
        bottom: calc(100% + 8px);
    }

    .attach-tooltip::after {
        left: auto;
        right: 12px;
        transform: none;
    }

    .attached-file-item .file-name {
        max-width: 150px;
    }

    .attached-file-preview {
        margin-bottom: 6px;
    }

    .attached-file-item {
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .attach-tooltip {
        min-width: 200px;
        font-size: 11px;
        padding: 10px;
    }

    .tooltip-item {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .attached-file-item .file-name {
        max-width: 120px;
    }
}

/* =============================================
   DOCUMENT GENERATION: кнопка скачивания
   ============================================= */

/* Wrapper для кнопок под сообщением — judge practice и doc download рядом */
.message-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 8px;
    align-items: flex-start;
}

/* Обратная совместимость: judge-practice-wrapper внутри message-actions-row */
.message-actions-row .judge-practice-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.document-download-wrapper {
    /* standalone — если нет judge-practice рядом */
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Кнопка документа в том же стиле что judge-practice-toggle-btn */
.document-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.document-download-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-1px);
}

.document-download-btn:active {
    transform: translateY(0);
}

.document-download-btn svg {
    flex-shrink: 0;
}

.document-download-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Pending: в стиле judge-practice-toggle-btn, чуть приглушённый */
.document-pending-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
}

.document-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(198, 40, 40, 0.06);
    border: 1px solid rgba(198, 40, 40, 0.2);
    border-radius: 8px;
    color: #c62828;
    font-size: 14px;
}

/* Кнопка повторной генерации документа */
.document-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    white-space: nowrap;
}

.document-retry-btn:hover {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-1px);
}

.document-retry-btn:active {
    transform: translateY(0);
}

.document-retry-btn svg {
    flex-shrink: 0;
}

.document-download-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.document-expiry-notice {
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.7;
    text-align: center;
}

@media (max-width: 768px) {
    .message-actions-row {
        flex-direction: column;
        gap: 6px;
    }

    .document-download-btn,
    .document-pending-btn,
    .document-retry-btn,
    .document-error-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 8px 12px;
        font-size: 13px;
    }

    .document-download-label {
        max-width: none;
        min-width: 0;
    }
}

/* ------------------------------------------------------------
   Conversation continuation UI (summary + buttons)
------------------------------------------------------------ */

.limit-actions-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--ui-contrast-rgb), 0.12);
}

.limit-actions-title {
    font-weight: 700;
    margin-top: 12px;
    color: var(--text);
}

.limit-actions-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.limit-actions-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-dim);
}

.limit-actions-timer {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-dim);
    opacity: 0.95;
}

.limit-actions-error {
    margin-top: 8px;
    font-size: 13px;
    color: var(--error);
}

.limit-action-btn {
    flex: 1;
    min-width: 180px;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
        border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.limit-action-btn:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}

.limit-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.limit-action-btn--primary {
    border: none;
    color: #ffffff;
    background: linear-gradient(135deg, var(--turquoise-dark), var(--primary-dark));
    box-shadow: 0 6px 14px rgba(var(--primary-dark-rgb), 0.22);
}

.limit-action-btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(var(--primary-dark-rgb), 0.26);
}

.limit-action-btn--secondary {
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.18);
    background: rgba(var(--ui-contrast-rgb), 0.06);
    color: var(--text);
}

.limit-action-btn--secondary:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(var(--ui-contrast-rgb), 0.26);
    background: rgba(var(--ui-contrast-rgb), 0.08);
}

/* Inherited summary spoiler block */
.inherited-summary-block {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(var(--ui-contrast-rgb), 0.06);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.14);
}

.inherited-summary-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.inherited-summary-toggle:hover {
    color: var(--link);
}

.inherited-summary-toggle:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}

.inherited-summary-toggle-indicator {
    font-weight: 800;
    font-size: 15px;
}

.inherited-summary-toggle-label {
    flex: 1;
}

.inherited-summary-content {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(var(--ui-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--ui-contrast-rgb), 0.12);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.inherited-summary-content pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}

/* === Инлайн-редактирование своего сообщения (2026-06-14) ===
   Карандашик в .feedback-form у вопроса (стиль .feedback-icon уже есть),
   по клику — textarea + кнопки на месте пузыря. */
.edit-box { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 640px; margin-left: auto; }
.edit-box__ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 46px; max-height: 320px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(var(--primary-rgb), .4); background: var(--background-light); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.45; outline: none; }
.edit-box__ta:focus { border-color: var(--primary); }
.edit-box__actions { display: flex; gap: 8px; justify-content: flex-end; }
.edit-box__btn { border: none; border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, filter .15s; }
.edit-box__cancel { background: rgba(var(--ui-contrast-rgb), .08); color: var(--text-dim); }
.edit-box__cancel:hover { background: rgba(var(--ui-contrast-rgb), .14); }
/* --primary-dark + белый текст — как у кнопки отправки: контраст в обеих темах
   (на светлом #0F766E и на тёмном бирюзовом текст читается). */
.edit-box__save { background: var(--primary-dark); color: #ffffff; }
.edit-box__save:hover { filter: brightness(1.06); }