/* 🔥 ЗАЩИТА от моргания модалок */
.meeting-limit-modal {
    visibility: hidden;
}

.meeting-limit-modal.initialized {
    visibility: visible;
}

/* Скрываем header.php */
.header {
    display: none !important;
}

/* 🔥 Фон #212121 для корректного цвета safe-area на iPhone */
body {
    background: #212121 !important;
}


/* 🔥 НОВЫЕ стили для мини-лоадера */
.meeting-mini-loader {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    border-top: 1px solid #f3f4f6;
    margin-top: 1rem;
}

.meeting-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f4f6;
    border-top-color: #222222;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Улучшенная прокрутка для модалки совещания */
.meeting-content {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 0.75rem 1.5rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Плавное появление новых карточек */
.meeting-assistant-card {
    animation: fadeInCard 0.3s ease-out;
}

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

/* === СТИЛИ ДЛЯ ПОМЕТКИ О ПРЕРЫВАНИИ === */
.generation-interrupted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: normal;
    margin-top: 8px;
    opacity: 0.8;
}

.dark .generation-interrupted {
    color: #6b7280;
}

/* === СТИЛИ ДЛЯ ПОТОКОВОГО ВЫВОДА === */
.streaming-cursor {
    color: #3b82f6;
    animation: blink 1s infinite;
    font-weight: bold;
    margin-left: 2px;
}

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

.streaming-content {
    transition: none; /* Убираем transitions для плавности */
    min-height: 1.5rem;
    line-height: 1.6;
}

.streaming-content * {
    transition: none !important; /* Убираем все transition эффекты */
}

/* Плавное появление блоков кода */
.streaming-content pre {
    opacity: 1;
    transform: none;
    background: #171717;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
}

/* Заголовки появляются сразу отформатированными */
.streaming-content h1,
.streaming-content h2,
.streaming-content h3,
.streaming-content h4 {
    margin: 0.5rem 0 0.25rem 0;
    opacity: 1;
}

/* Списки появляются отформатированными */
.streaming-content ul,
.streaming-content ol {
    margin: 0.25rem 0;
    padding-left: 1.5rem;
}

/* Жирный и курсивный текст */
.streaming-content strong {
    font-weight: 600;
    color: #fff;
}

.streaming-content em {
    font-style: italic;
}

/* Блок цитат */
.streaming-content blockquote {
    border-left: 4px solid #444;
    padding-left: 1rem;
    margin: 0.5rem 0;
    font-style: italic;
    color: #b4b4b4;
}

/* Инлайн код */
.streaming-content code:not(pre code) {
    background: rgba(255,255,255,0.1);
    color: #e8b4b4;
    padding: 0.125rem 0.35rem;
    border-radius: 0.35rem;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.85em;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Ссылки */
.streaming-content a {
    color: #7ec8e3;
    text-decoration: underline;
    text-decoration-color: rgba(126,200,227,0.3);
    text-underline-offset: 2px;
}

.streaming-content a:hover {
    text-decoration-color: #7ec8e3;
}

/* Курсор более заметный во время форматированного текста */
.streaming-cursor {
    color: #ececec;
    animation: blink 1s infinite;
    font-weight: bold;
    margin-left: 1px;
    display: inline-block;
}

.thinking-indicator {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
}

.thinking-text {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
    font-size: 0.875rem;
}

/* Яркий белый блик на бледном тексте */
.thinking-text::after {
    content: attr(data-content);
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 1) 40%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 1) 60%,
        transparent 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-text 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer-text {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* 🖼️ Стили для анализа изображений */
.thinking-indicator.analyzing-image .thinking-text {
    color: #d1d1d1;
}

.thinking-indicator.analyzing-image .thinking-text::before {
    content: "🖼️ ";
}

.thinking-indicator.analyzing-image .thinking-text::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 45%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 55%,
        transparent 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer-text 1.8s ease-in-out infinite;
}

/* Ring loader пропорциональный тексту */
.typing-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.typing-dots img {
    width: 100%;
    height: 100%;
    opacity: 0.35;
    filter: brightness(3) saturate(0);
}

/* 🔥 УБРАНО: Старые стили точек */
.typing-dot {
    display: none !important; /* 🔥 Скрываем старые точки */
}

/* Кнопка прокрутки вниз */
.scroll-down-btn {
    position: absolute;
    top: -50px; /* Над контентом floating-bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
}

.scroll-down-btn:hover {
    background: #303030;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
}

.scroll-down-btn i {
    font-size: 20px;
    color: #1f2937;
}

.scroll-down-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

@media (max-width: 768px) {
    .scroll-down-btn {
        top: -50px;
        width: 40px;
        height: 40px;
    }
    
    .scroll-down-btn i {
        font-size: 18px;
    }
}

/* Добавляем относительное позиционирование для floating-bottom */
.floating-bottom {
    position: relative;
}

/* 🔥 Уменьшаем отступы на мобилке для экономии места */
@media (max-width: 768px) {
    #messagesContainer {
        padding-top: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .floating-bottom .p-3 {
        padding: 0.5rem 0.75rem !important;
    }
}

/* Десктопный хедер */
.desktop-header {
    display: none;
    position: relative;
}

.desktop-header::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, #212121 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

@media (min-width: 768px) {
    .desktop-header {
        display: flex !important;
    }
}

/* ИСПРАВЛЕНИЕ: Убираем scroll для body на мобильных устройствах */
@media (max-width: 768px) {
    html {
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
        position: fixed;
        width: 100%;
    }
    body {
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
        background: #212121;
    }
}

/* Стили для математических формул */
.katex {
    font-size: 1.1em !important;
}

.katex-display {
    margin: 1rem 0 !important;
    text-align: center !important;
}

.prose .katex-display {
    margin: 1.5rem 0 !important;
}

.prose .katex {
    color: #1f2937 !important;
}

/* Inline формулы */
.prose .katex:not(.katex-display) {
    background: rgba(59, 130, 246, 0.05);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    margin: 0 0.125rem;
}

/* Block формулы */
.prose .katex-display {
    background: rgba(59, 130, 246, 0.02);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

/* Темная тема для формул */
.dark .prose .katex {
    color: #f3f4f6 !important;
}

.dark .prose .katex:not(.katex-display) {
    background: rgba(96, 165, 250, 0.1);
}

.dark .prose .katex-display {
    background: rgba(30, 58, 138, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
}

/* Основные стили для чата */
.chat-sidebar-item:hover {
    background-color: rgba(255,255,255,0.06);
}

.message-bubble {
    max-width: 80%;
    box-shadow:none !important;
}

/* ИСПРАВЛЕНИЕ 1: Оптимальный padding-bottom для контейнера чата */
.chat-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 160px;
}

.chat-sidebar {
    width: 260px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 260px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

/* === COLLAPSIBLE SIDEBAR (desktop) === */
.chat-sidebar.collapsed {
    width: 60px !important;
    min-width: 60px !important;
}

/* Content fades out when collapsed */
.chat-sidebar .sidebar-nav-section,
.chat-sidebar #chatsListContainer,
.chat-sidebar .sidebar-user-footer,
.chat-sidebar .sidebar-skeleton,
.chat-sidebar .sidebar-upgrade-info,
.chat-sidebar .flex-1.overflow-y-auto,
.chat-sidebar .p-3.sidebar-full-header {
    transition: opacity 0.2s ease 0.15s, visibility 0.2s ease 0.15s;
    opacity: 1;
    visibility: visible;
    min-width: 240px;
}

.chat-sidebar.collapsed .sidebar-nav-section,
.chat-sidebar.collapsed #chatsListContainer,
.chat-sidebar.collapsed .sidebar-user-footer,
.chat-sidebar.collapsed .sidebar-skeleton,
.chat-sidebar.collapsed .sidebar-upgrade-info,
.chat-sidebar.collapsed .flex-1.overflow-y-auto {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

.chat-sidebar.collapsed .p-3.sidebar-full-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
}

.chat-sidebar.collapsed .sidebar-collapse-logo {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.2s ease 0.15s, visibility 0.2s ease 0.15s !important;
}

.sidebar-collapse-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 0.5rem;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 2;
}

.sidebar-collapse-logo .sidebar-logo-link img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.sidebar-collapse-logo .sidebar-collapsed-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.sidebar-collapse-logo .sidebar-collapsed-nav a,
.sidebar-collapse-logo .sidebar-collapsed-nav button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #b4b4b4;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 18px;
}

.sidebar-collapse-logo .sidebar-collapsed-nav a:hover,
.sidebar-collapse-logo .sidebar-collapsed-nav button:hover {
    background: rgba(255,255,255,0.06);
    color: #ececec;
}

.sidebar-collapse-logo .sidebar-collapsed-nav .collapsed-nav-icon-img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(0.75);
}

.sidebar-collapse-logo .sidebar-collapsed-nav a:hover .collapsed-nav-icon-img {
    filter: brightness(0) invert(1);
}

.sidebar-toggle-btn {
    width: 32px;
    height: 32px;
    display: none; /* hidden by default (mobile) */
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #767676;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

/* Show toggle button only on desktop */
@media (min-width: 768px) {
    .sidebar-toggle-btn {
        display: flex !important;
    }
}

.sidebar-toggle-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #ececec;
}

.sidebar-toggle-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(0.5);
    transition: filter 0.15s ease;
}

.sidebar-toggle-btn:hover img {
    filter: brightness(0) invert(0.9);
}

/* sidebar mobile classes handled via @media query now */

.floating-input {
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    min-width: 160px;
    padding: 4px;
}

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

.dropdown-item-dark {
    color: #b4b4b4 !important;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-size: 0.8rem;
    gap: 8px;
}

.dropdown-item-dark:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ececec !important;
}

.dropdown-item-dark i {
    font-size: 0.85rem;
    color: #777;
}

.dropdown-item-dark:hover i {
    color: #b4b4b4;
}

/* 🔥 МОБИЛЬНЫЕ СТИЛИ ДЛЯ DROPDOWN */
@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 160px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .dropdown-menu button {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    .dropdown-menu i {
        font-size: 0.875rem;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal.show {
    display: flex !important;
}

/* ИСПРАВЛЕНИЕ: Специальные стили для модалки совещания */
#meetingModeModal {
    display: none;
}

#meetingModeModal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Адаптивное центрирование - МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    #meetingModeModal {
        padding: 0 !important;
    }
    
    #meetingModeModal.show {
        align-items: flex-end !important;
        justify-content: center !important;
    }
    
    #meetingModeModal > div {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 85vh !important;
        margin: 0 !important;
    }
}

@media (min-width: 769px) {
    #meetingModeModal > div {
        width: 90%;
        max-width: 1100px;
        height: auto;
        max-height: 700px;
    }
}

/* ИСПРАВЛЕНИЕ: Фиксированный хедер для мобильной версии с правильным z-index */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #212121;
    border-bottom: none;
    height: 52px;
}

/* Gradient fade under mobile header */
.mobile-header::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, #212121 0%, transparent 100%);
    pointer-events: none;
    z-index: 39;
}

body.light-theme .mobile-header::after {
    background: linear-gradient(to bottom, #ffffff 0%, transparent 100%) !important;
}

/* Fix ALL remaining hardcoded dark gradients for light theme */
body.light-theme .desktop-header::after {
    background: linear-gradient(to bottom, #ffffff 0%, transparent 100%) !important;
}
body.light-theme .file-preview {
    background: #f7f7f8 !important;
    border: 2px solid #e5e5e5 !important;
}

.meeting-toggle-container {
    display: none !important;
}

.meeting-mode-btn {
    padding: 0rem 0.4rem 0.1rem 0.4rem;
    border-radius: 0.6rem;
}

.meeting-mode-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgb(147 51 234/var(--tw-text-opacity)) !important;
}

/* ИСПРАВЛЕНИЕ: Мобильная версия с фиксированным хедером */
@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ: Аватар ассистента НЕ сжимается */
    .mobile-header .w-8 {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-header .h-8 {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
    
    .mobile-header img.rounded-lg {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    
    /* ИСПРАВЛЕНИЕ: Заголовок - обрезка текста */
    .mobile-header .assistant-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    
    .mobile-header .assistant-company {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ: Логотип в сайдбаре на мобильных */
    .chat-sidebar img[src*="sb-logo"] {
        height: 24px !important;
        max-height: 24px !important;
        width: auto !important;
    }
    

  .chat-container{
      height:calc(100vh - 52px);
      height:calc(100dvh - 52px);
      padding-top:52px;
      margin-top:0;
      overflow-y:auto;
      overflow-x:hidden;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      /* 🔥 ИСПРАВЛЕНО: Увеличен отступ для маленьких экранов + safe-area */
      padding-bottom:var(--chat-bottom-pad,180px);
      padding-bottom:calc(var(--chat-bottom-pad,180px) + env(safe-area-inset-bottom, 0px));
  }

    
    /* ИСПРАВЛЕНИЕ: Парящее поле ввода с уменьшенной подложкой */
    .floating-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: linear-gradient(to top, #212121 85%, rgba(33,33,33,0.6) 95%, transparent);
        backdrop-filter: blur(8px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    .floating-bottom .floating-input,
    .floating-bottom .quick-actions,
    .floating-bottom .scroll-down-btn {
        pointer-events: all;
    }
}

@media (min-width: 769px) {
    .mobile-header {
        display: none;
    }
    
    .chat-container {
        height: calc(100vh - 60px);
        padding-top: 0;
    }
    
    .floating-bottom {
        position: fixed;
        bottom: 0;
        left: 260px;
        right: 0;
        z-index: 30;
        background: linear-gradient(to top, rgba(33,33,33,0.95) 85%, transparent);
        backdrop-filter: blur(8px);
        pointer-events: none;
        transition: left 0.3s ease;
    }
    
    /* When sidebar is collapsed, shift input to match */
    .chat-sidebar.collapsed ~ .flex-1 .floating-bottom,
    body:has(.chat-sidebar.collapsed) .floating-bottom {
        left: 60px !important;
    }
    
    .floating-bottom .floating-input,
    .floating-bottom .quick-actions,
    .floating-bottom .scroll-down-btn {
        pointer-events: all;
    }
}

/* 🔥 НОВОЕ: Дополнительные стили для очень маленьких экранов */
@media (max-width: 380px) {
    .chat-container {
        /* Ещё больше отступ для очень маленьких экранов */
        padding-bottom: calc(var(--chat-bottom-pad, 200px) + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .floating-bottom {
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px;
    }
    
    .floating-input {
        border-radius: 20px !important;
    }
    
    .quick-button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    /* Уведомления о контексте */
    .context-exhausted-banner {
        margin: 8px 4px !important;
        padding: 8px 10px !important;
    }
    
    .context-banner-content {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .context-banner-button {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }
}

.sidebar-nav-item img {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0) invert(0.75);
}

.sidebar-nav-item:hover img {
    filter: brightness(0) invert(1);
}

.search-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    font-size: 11px;
    color: #e0e0e0;
    margin-right: 6px;
    margin-bottom: 3px;
}

.like-animation {
    animation: likeScale 0.3s ease-in-out;
}

.dislike-animation {
    animation: dislikeShake 0.3s ease-in-out;
}

.quick-button {
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 20px;
    transition: background-color 0.2s ease;
}

.quick-actions-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.quick-actions-container:active {
    cursor: grabbing;
}

.quick-actions-container::-webkit-scrollbar {
    display: none;
}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 300px;
}

.toast.show {
    transform: translateX(0);
}

.welcome-avatar {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    background: linear-gradient(135deg, #444 0%, #2a2a2a 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.welcome-avatar img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* 🔥 МОБИЛЬНЫЕ СТИЛИ ДЛЯ WELCOME ЭКРАНА */
@media (max-width: 768px) {
    #welcomeScreen > div {
        padding: 0 1rem;
    }
    
    .welcome-avatar {
        width: 72px;
        height: 72px;
        min-width: 72px;
        min-height: 72px;
        max-width: 72px;
        max-height: 72px;
        border-radius: 16px;
        margin-bottom: 16px;
    }
    
    .welcome-avatar img {
        border-radius: 16px;
    }
    
    #welcomeScreen h2 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    .description-wrapper {
        padding: 0;
    }
}

/* ИСПРАВЛЕНИЕ 6: Минималистичный призыв к действию */
.cta-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    text-align: center;
}

.cta-section h3 {
    color: #ececec;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cta-section p {
    color: #b4b4b4;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #212121;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cta-button:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* === ИНСТРУКЦИЯ ДЛЯ IMAGE GEN АССИСТЕНТОВ (Велком скрин) === */
.imagegen-welcome-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 250px);
    width: 100%;
}

.imagegen-welcome-cta {
    margin: 0 auto;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    text-align: center;
    max-width: 560px;
    width: 100%;
}

.imagegen-welcome-cta h3 {
    color: #ececec;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.imagegen-welcome-cta p {
    color: #767676;
    font-size: 0.8rem;
    margin-bottom: 0.85rem;
    line-height: 1.4;
}

.imagegen-instruction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background: #ececec;
    color: #1e1e1e;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: inherit;
}

.imagegen-instruction-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.imagegen-instruction-btn i {
    font-size: 0.9rem;
}

/* === МОДАЛКА ИНСТРУКЦИИ (Desktop) === */
.instruction-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.instruction-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.instruction-modal-container {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.instruction-modal-overlay.show .instruction-modal-container {
    transform: scale(1) translateY(0);
}

.instruction-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0ee;
    flex-shrink: 0;
}

.instruction-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instruction-modal-header h3 i {
    font-size: 1rem;
    color: #767676;
}

.instruction-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f5f5f3;
    color: #767676;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
}

.instruction-close-btn:hover {
    background: #eee;
    color: #222;
}

.instruction-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.instruction-modal-body img {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}

.instruction-modal-body iframe {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}

.instruction-modal-body h1 { font-size: 1.4rem; font-weight: 700; margin: 16px 0 8px; color: #222; }
.instruction-modal-body h2 { font-size: 1.2rem; font-weight: 600; margin: 14px 0 6px; color: #222; }
.instruction-modal-body h3 { font-size: 1.05rem; font-weight: 600; margin: 12px 0 4px; color: #333; }
.instruction-modal-body p { margin: 6px 0; line-height: 1.65; color: #444; font-size: 0.92rem; }
.instruction-modal-body ul, .instruction-modal-body ol { padding-left: 1.5rem; margin: 8px 0; }
.instruction-modal-body li { margin: 4px 0; line-height: 1.6; color: #444; font-size: 0.92rem; }
.instruction-modal-body a { color: #2563eb; text-decoration: underline; }
.instruction-modal-body strong { font-weight: 600; color: #222; }
.instruction-modal-body em { font-style: italic; }
.instruction-modal-body u { text-decoration: underline; }

/* iframe mode — полная изоляция HTML */
.instruction-modal-body.iframe-mode {
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.instruction-modal-body.iframe-mode iframe {
    width: 100%;
    border: none;
    margin: 0;
    border-radius: 0;
    height: 300vh;
    min-height: 300vh;
}

.instruction-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0ee;
    text-align: center;
    flex-shrink: 0;
}

.instruction-modal-footer button {
    padding: 0.55rem 2rem;
    background: #303030;
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.instruction-modal-footer button:hover {
    background: #333;
}

/* === MOBILE: Bottom Sheet === */
@media (max-width: 768px) {
    .instruction-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .instruction-modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        height: 85vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .instruction-modal-overlay.show .instruction-modal-container {
        transform: translateY(0);
    }

    .instruction-modal-header {
        position: relative;
        padding: 1rem 1rem 0.75rem;
        cursor: grab;
        touch-action: pan-y;
    }

    .instruction-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: #d1d5db;
        border-radius: 3px;
    }

    .instruction-modal-header h3 {
        font-size: 1rem;
        padding-top: 8px;
    }

    .instruction-modal-body {
        padding: 1rem 1.25rem 1.5rem;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-height: 0;
    }
    
    .instruction-modal-body.iframe-mode {
        padding: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .instruction-modal-body.iframe-mode iframe {
        width: 100%;
        height: 300vh;
        min-height: 300vh;
        border: none;
    }

    .instruction-modal-container.closing {
        animation: instructionSlideDown 0.25s ease-in forwards;
    }

    @keyframes instructionSlideDown {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }
    
    .imagegen-welcome-cta {
        padding: 1rem;
    }
    
    .imagegen-welcome-cta h3 {
        font-size: 0.875rem;
    }
}

@keyframes likeScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes dislikeShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@media (max-width: 768px) {
    .chat-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        z-index: 60;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .chat-sidebar.open {
        transform: translateX(0);
    }
    .floating-bottom {
        left: 0;
        z-index: 20;
    }
    .message-bubble {
        max-width: 95%;
    }
    .toast {
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-150%);
    }
    .toast.show {
        transform: translateY(0);
    }
}

/* ИСПРАВЛЕНИЕ 2: Стили для ответов ассистента на всю ширину */
.assistant-response {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    max-width: 100%; /* Добавлено */
}

.assistant-message {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* ИСПРАВЛЕНИЕ 2: Убираем ограничения для prose */
.prose {
    max-width: none !important;
    width: 100% !important;
}

/* Кнопки лайк/дизлайк */
.message-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.25rem;
}

.action-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #767676;
    transition: all 0.2s;
}

.action-btn:hover {
    background-color: rgba(255,255,255,0.06);
    color: #ececec;
}

.action-btn.liked {
    color: #10b981;
    background-color: rgba(16,185,129,0.1);
}

.action-btn.disliked {
    color: #ef4444;
    background-color: rgba(239,68,68,0.1);
}

/* ИСПРАВЛЕНИЕ: Улучшенные стили для предпросмотра файлов */
.file-preview {
    background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 1rem;
    margin-bottom: 0.75rem;
    max-width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.file-preview:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.file-preview.uploading {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.file-icon-container {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.file-icon-container i {
    color: white;
    font-size: 1.25rem;
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.file-meta {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.file-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loader div {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #3b82f6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.checkmark i {
    font-size: 1.5rem;
    color: #10b981;
}

.remove-file {
    padding: 0.375rem;
    border-radius: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-file:hover {
    background: rgba(239, 68, 68, 0.2);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ИСПРАВЛЕНИЕ: Hover эффект для кнопки загрузки файла */
.file-upload-wrapper {
    position: relative;
    display: inline-block;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.file-upload-btn {
    position: relative;
    z-index: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.file-upload-wrapper:hover .file-upload-btn {
    background-color: rgba(255,255,255,0.08) !important;
    color: #c0c0c0 !important;
}

.file-upload-wrapper:active .file-upload-btn {
    transform: translateY(0);
}

/* Стили копирования */
.copy-button {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.375rem;
    padding: 0.375rem;
    border: none;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.copy-button:hover {
    background: rgba(255, 255, 255, 1);
}

/* Стили для веб-поиска */
/* ПОСЛЕ */
.web-search-results {
    border-radius: 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.05);
    padding: 1rem;
    margin-top: 1rem;
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
}

.web-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    max-width: 100%;
}

.web-source {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.web-source .font-medium,
.web-source .text-gray-500 {
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}

.web-source:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Адаптивность */
@media (max-width: 640px) {
    .web-sources {
        grid-template-columns: 1fr;
    }
}

/* Результаты поиска по изображениям */
.image-container {
    position: relative;
    margin-top: 1rem;
    border-radius: 0.75rem;
    overflow: hidden;
}

.generated-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.image-controls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
    opacity: 1;
}

.image-button {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    border: none;
    cursor: pointer;
}

/* ИСПРАВЛЕНИЕ: Улучшенные стили для кода */
.prose pre {
    background: #171717;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
    overflow: hidden;
    position: relative;
    max-width: 100%;
}

.prose pre code {
    background: transparent !important;
    color: #abb2bf !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1.5rem;
    display: block;
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
    max-width: 100%;
    box-sizing: border-box;
}

/* 🔥 Контейнер блока кода — единый визуальный блок */
.code-block-container {
    max-width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    margin: 1rem 0;
    background: #171717;
}

.code-block-container pre {
    margin: 0 !important;
    overflow-x: auto;
    max-width: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Заголовок блока кода — объединён с телом кода */
.code-header {
    background: #282c34;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #abb2bf;
}

.code-language {
    font-weight: 600;
    color: #9da5b4;
}

/* ИСПРАВЛЕНИЕ: Аккуратная кнопка копирования кода */
.code-copy-btn {
    background: transparent;
    border: none;
    color: #5c6370;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    overflow: hidden;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #abb2bf;
}

.code-copy-btn:active {
    opacity: 0.7;
}

/* Стили для состояния "скопировано" */
.code-copy-btn.copied {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

.code-copy-btn.copied i {
    animation: checkmark-bounce 0.5s ease;
}

@keyframes checkmark-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Улучшенный заголовок блока кода */
.code-header {
    background: #282c34;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #9da5b4;
    position: relative;
}

.code-header::before {
    display: none;
}

.code-language {
    font-weight: 600;
    color: #9da5b4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-language::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #5c6370;
    border-radius: 50%;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Мобильная адаптация для кнопки */
@media (max-width: 768px) {
    .code-copy-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
        gap: 0.25rem;
    }
    
    .code-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
        gap: 0.5rem;
    }
}

/* 🔥 УЛУЧШЕННЫЙ Инлайн код */
.prose code:not(pre code) {
    background: rgba(255,255,255,0.1) !important;
    color: #e8b4b4 !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 0.375rem !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
    font-size: 0.85em !important;
    font-weight: 500 !important;
    white-space: pre-wrap !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Темная тема для инлайн кода */
.dark .prose code:not(pre code) {
    background: rgba(255,255,255,0.1) !important;
    color: #e8b4b4 !important;
}

/* Дополнительные стили для предотвращения overflow на мобильных */
@media (max-width: 768px) {
    /* 🔥 КРИТИЧНО: Глобальные ограничения для мобильных */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* 🔥 Контейнер чата */
    .chat-container,
    #messagesContainer,
    .messagesContainer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* 🔥 Сообщения */
    .message-bubble,
    .assistant-response,
    .assistant-message,
    .user-message {
        max-width: calc(100vw - 1rem) !important;
        overflow-x: hidden !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        box-sizing: border-box !important;
    }
    
    /* Веб-поиск на мобильных */
    .web-sources {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .web-source {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .web-source .truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* 🔥 Блоки кода на мобильных — ПОЛНЫЙ ФИКС */
    .prose pre,
    pre,
    .code-block-container {
        margin: 0.75rem 0 !important;
        border-radius: 0.5rem !important;
        max-width: calc(100vw - 32px) !important;
        width: 100% !important;
        overflow: hidden !important; /* 🔥 Контейнер скрывает overflow */
        box-sizing: border-box !important;
    }
    
    /* 🔥 PRE элемент со скроллом */
    .prose pre,
    pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        margin: 0 !important;
        box-shadow: none !important;
    }
    
    /* Pre внутри контейнера — без скруглений и бордера */
    .code-block-container pre {
        border-radius: 0 !important;
        border: none !important;
    }
    
    /* Текст внутри кода */
    .prose pre code,
    pre code {
        display: block !important;
        white-space: pre !important; /* 🔥 Сохраняем форматирование кода */
        overflow-wrap: normal !important;
        word-break: normal !important;
        font-size: 0.75rem !important;
        padding: 0.875rem !important;
        max-width: none !important; /* 🔥 Позволяем скролл */
        line-height: 1.5 !important;
    }
    
    /* Заголовки кода на мобильных */
    .code-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
        gap: 0.5rem;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ: Цитаты и блоки */
    .prose blockquote {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 🔥 Все текстовые элементы */
    .prose p,
    .prose div,
    .prose span,
    .prose li,
    .prose blockquote,
    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: normal !important;
        max-width: 100% !important;
        hyphens: none !important;
    }
    
    /* 🔥 Защита контейнера сообщений */
    .assistant-response,
    .assistant-message {
        max-width: 100% !important;
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }
    
    /* 🔥 Длинные ссылки */
    .prose a,
    .text-blue-600,
    a {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
    }
    
    /* 🔥 Инлайн код на мобильных */
    .prose code:not(pre code),
    code:not(pre code) {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        font-size: 0.8rem !important;
    }
    
    /* 🔥 ТАБЛИЦЫ - простой подход со скроллом */
    .prose table,
    table {
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
        border-collapse: collapse !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 8px !important;
        margin: 1rem 0 !important;
        font-size: 0.8rem !important;
        background: #1e1e1e !important;
    }
    
    /* Обёртка со скроллом */
    .message-bubble,
    .assistant-message {
        overflow-x: auto !important;
    }
    
    /* Структура таблицы - стандартная */
    .prose thead, thead { display: table-header-group !important; }
    .prose tbody, tbody { display: table-row-group !important; }
    .prose tr, tr { display: table-row !important; }
    
    /* Ячейки с переносом */
    .prose th,
    .prose td,
    th, td {
        display: table-cell !important;
        min-width: 80px !important;
        max-width: 180px !important;
        padding: 0.5rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
        color: #d4d4d4 !important;
    }
    
    .prose th, th {
        background: rgba(255,255,255,0.07) !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }
    
    /* 🔥 KaTeX формулы на мобильных */
    .katex-display,
    .katex {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        font-size: 0.9em !important;
    }
    
    /* 🔥 Изображения */
    .prose img,
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 🔥 КРИТИЧЕСКИ ВАЖНЫЕ ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ПРЕДОТВРАЩЕНИЯ OVERFLOW */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* 🔥 ГЛОБАЛЬНОЕ ОТКЛЮЧЕНИЕ ДЕФИСНЫХ ПЕРЕНОСОВ */
* {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
}

.assistant-response,
.assistant-message {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}

.messagesContainer {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 🔥 ChatGPT-стиль для prose контента */
.prose {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.75 !important;
    color: #374151 !important;
}

.prose > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Параграфы в стиле ChatGPT */
.prose p {
    margin: 0.75em 0 !important;
    line-height: 1.75 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Списки в стиле ChatGPT */
.prose ul, .prose ol {
    margin: 0.75em 0 !important;
    padding-left: 1.5em !important;
}

.prose ul {
    list-style-type: disc !important;
}

.prose ol {
    list-style-type: decimal !important;
}

.prose li {
    margin: 0.35em 0 !important;
    line-height: 1.7 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    padding-left: 0.25em !important;
}

.prose li::marker {
    color: #b4b4b4 !important;
}

/* Вложенные списки */
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul {
    margin: 0.25em 0 !important;
    padding-left: 1.25em !important;
}

.prose ul ul {
    list-style-type: circle !important;
}

.prose ul ul ul {
    list-style-type: square !important;
}

/* Блок-цитаты */
.prose blockquote {
    border-left: 4px solid #e5e7eb !important;
    padding: 0.5em 1em !important;
    margin: 1em 0 !important;
    background: #f9fafb !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    color: #4b5563 !important;
    font-style: italic !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Горизонтальная линия */
.prose hr {
    border: none !important;
    border-top: 1px solid #e5e7eb !important;
    margin: 1.5em 0 !important;
}

/* Жирный текст */
.prose strong {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* 🔥 ChatGPT-стиль заголовков */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}

.prose h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    color: #111827 !important;
}

.prose h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.625rem !important;
    color: #111827 !important;
}

.prose h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
    color: #1f2937 !important;
}

.prose h4, .prose h5, .prose h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.375rem !important;
    color: #374151 !important;
}

/* Ссылки */
.prose a {
    color: #2563eb !important;
    text-decoration: none !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

.prose a:hover {
    text-decoration: underline !important;
}

/* ИСПРАВЛЕНИЕ: Подсветка синтаксиса для разных языков */
.hljs-keyword { color: #c678dd !important; }
.hljs-string { color: #98c379 !important; }
.hljs-comment { color: #5c6370 !important; font-style: italic; }
.hljs-number { color: #d19a66 !important; }
.hljs-function { color: #61dafb !important; }
.hljs-variable { color: #e06c75 !important; }
.hljs-tag { color: #e06c75 !important; }
.hljs-attr { color: #d19a66 !important; }
.hljs-built_in { color: #56b6c2 !important; }

/* Стили для различных языков программирования */
.language-javascript .code-language::before { content: "JavaScript"; }
.language-python .code-language::before { content: "Python"; }
.language-html .code-language::before { content: "HTML"; }
.language-css .code-language::before { content: "CSS"; }
.language-php .code-language::before { content: "PHP"; }
.language-sql .code-language::before { content: "SQL"; }
.language-json .code-language::before { content: "JSON"; }
.language-xml .code-language::before { content: "XML"; }

/* 🔥 ChatGPT-стиль таблиц */
.prose table,
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 0.9rem;
}

.prose th,
th {
    background: rgba(255,255,255,0.07);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 2px solid rgba(255,255,255,0.12);
    font-size: 0.85rem;
    letter-spacing: 0.025em;
}

.prose td,
td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #d4d4d4;
    vertical-align: top;
    background: transparent;
}

.prose tr:hover,
tr:hover {
    background: transparent;
}

.prose tr:last-child td,
tr:last-child td {
    border-bottom: none;
}

.prose tr:nth-child(even) td {
    background: rgba(255,255,255,0.025);
}



/* Адаптация для мобильных устройств */
/* 🔥 МОБИЛЬНАЯ АДАПТАЦИЯ ТАБЛИЦ - ПРОСТОЙ ПОДХОД */
@media (max-width: 768px) {
    /* 🔥 Таблица - НЕ меняем display, только добавляем скролл */
    .prose table {
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
        border-collapse: collapse !important;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        margin: 1rem 0;
        font-size: 0.8rem !important;
        background: #1e1e1e !important;
    }
    
    /* 🔥 Обёртка для скролла */
    .table-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: calc(100vw - 32px) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Структура остаётся стандартной */
    .prose thead { display: table-header-group !important; }
    .prose tbody { display: table-row-group !important; }
    .prose tr { display: table-row !important; }
    
    /* 🔥 ЯЧЕЙКИ - с переносом текста */
    .prose th,
    .prose td {
        display: table-cell !important;
        min-width: 80px !important;
        max-width: 200px !important;
        padding: 0.5rem 0.625rem !important;
        
        /* 🔥 ПЕРЕНОС ТЕКСТА */
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        
        border: 1px solid rgba(255,255,255,0.08) !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
    }
    
    /* Заголовки */
    .prose th {
        background: rgba(255,255,255,0.07) !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        font-size: 0.75rem !important;
    }
    
    /* Ячейки */
    .prose td {
        color: #d4d4d4 !important;
    }
}

/* 🔥 DESKTOP: Ширина колонок с переносом */
@media (min-width: 769px) {
    .prose table {
        table-layout: auto !important; /* 🔥 Авто-ширина на десктопе */
    }
    
    .prose th,
    .prose td {
        min-width: 100px !important;
        max-width: 400px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important; /* 🔥 НОВОЕ: Переносит даже длинные слова */
        word-break: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -moz-hyphens: none !important;
    }
}

/* ============================================ */
/* ДОПОЛНИТЕЛЬНО: Стили для эмодзи в заголовках */
/* ============================================ */
.prose th {
    line-height: 1.4 !important;
}

.prose td {
    line-height: 1.6 !important;
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message {
    animation: fadeIn 0.3s ease-out;
}

/* Темная тема */
.dark .assistant-response {
    color: #f3f4f6;
}

.dark .web-search-results {
    background: rgba(30, 58, 138, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
}

.dark .web-source {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

.dark .prose th {
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    border-color: rgba(255,255,255,0.1);
}

.dark .prose td {
    border-color: rgba(255,255,255,0.06);
    color: #d4d4d4;
}

.dark .prose tr:hover {
    background-color: transparent;
}

.dark .prose table {
    background: #1e1e1e;
}

/* ИСПРАВЛЕНИЕ 8: Премиальные бейджи тарифов */
.user-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.user-badge.бесплатный,
.user-badge.базовый {
    background-color: #f3f4f6;
    color: #6b7280;
}

.user-badge.про,
.user-badge.pro {
    background-color: #f3f4f6;
    color: #374151;
}

.user-badge.премиум,
.user-badge.premium {
    background-color: #ede9fe;
    color: #6d28d9;
}

.user-badge.партнер {
    background-color: #fef3c7;
    color: #92400e;
}

/* Большая кнопка поделиться для десктопа */
@media (min-width: 769px) {
    #shareBtn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    #shareBtn i {
        font-size: 1rem;
    }
}

/* Кнопка сохранения в избранное */
.save-btn {
    background: transparent;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-btn:hover {
    background: #f3f4f6;
}

.save-btn i {
    font-size: 1.1rem;
    color: #374151;
    transition: all 0.2s ease;
}

.save-btn.active i {
    color: #000;
}

/* Десктопная кнопка сохранения */
.save-btn-desktop {
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-btn-desktop:hover {
    background: #f3f4f6;
}

.save-btn-desktop i {
    font-size: 1.25rem;
    color: #374151;
    transition: all 0.2s ease;
}

.save-btn-desktop.active i {
    color: #000;
}

/* Мобильная кнопка сохранения - показываем ПЕРЕД кнопкой поделиться */
@media (max-width: 768px) {
    #saveBtnMobile {
        order: -1;
    }
    #saveBtnDesktop {
        display: none !important;
    }
}

/* Десктоп - показываем ПОСЛЕ кнопки поделиться */
@media (min-width: 769px) {
    #saveBtnMobile {
        display: none !important;
    }
    #saveBtnDesktop {
        display: flex !important;
    }
}

/* ИСПРАВЛЕНИЕ: Правильная обрезка текста на мобильных */
@media (max-width: 768px) {
    .assistant-info {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    
    .assistant-name {
        font-size: 14px !important;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
        margin: 0;
    }
    
    .assistant-company {
        font-size: 11px !important;
        line-height: 1.2;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
        color: #6b7280;
        margin: 0;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ: Кнопка меню чата всегда видна на мобильных */
    .sidebar-item .chat-menu-btn,
    .chat-menu-btn.opacity-0 {
        opacity: 1 !important;
        visibility: visible !important;
        width: 32px;
        height: 32px;
        min-width: 32px;
        background-color: transparent;
    }
    
    .sidebar-item .chat-menu-btn:active {
        background-color: rgba(0, 0, 0, 0.12) !important;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ: Sidebar item кликабелен с одного нажатия */
    .sidebar-item {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ: Стили sidebar-item для мобильных */
    .sidebar-item {
        padding: 0.5rem 0.5rem;
    }
    
    .sidebar-item .chat-name {
        font-size: 0.8125rem;
    }
    
    /* 🔥 Мобильные стили для секции закреплённых чатов */
    .pinned-chats-section {
        padding: 0 0.25rem;
    }
}

/* ИСПРАВЛЕНИЕ: Стили для информации о тарифах в сайдбаре */
.sidebar-upgrade-info {
    background: linear-gradient(135deg, #303030 0%, #252525 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1rem;
    padding: 1rem;
    margin: 0.25rem 0.25rem 0.5rem 0.25rem;
    text-align: center;
    color: white;
    box-sizing: border-box;
}

.sidebar-upgrade-info h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.sidebar-upgrade-info p {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.sidebar-upgrade-btn {
    background: white;
    color: #212121;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.sidebar-upgrade-btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ИСПРАВЛЕНИЕ 3: Лоадер для модалок */
.modal-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    z-index: 10;
}

.modal-loading.show{display:flex;}

.modal-loading .spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: #b4b4b4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ИЗМЕНЕНИЕ 1: Хорошие ховеры для названий чатов */
.sidebar-item:hover {
    background-color: rgba(255,255,255,0.06);
}

/* ИЗМЕНЕНИЕ 2: Более узкие элементы чатов и больше отступы для заголовков */
.chat-group-header {
    font-size: 0.8125rem;
    color: #767676;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    letter-spacing: 0.05em;
    font-weight: 500 !important;
}

/* Первая группа (закреплённые или Сегодня) - минимальный отступ сверху */
.chat-group:first-child .chat-group-header {
    margin-top: 0.25rem;
}

.sidebar-item {
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.125rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 🔥 СТИЛИ ДЛЯ КНОПКИ "ТРИ ТОЧКИ" - более пропорциональный фон */
.sidebar-item .chat-menu-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s ease;
    padding: 0;
    margin-left: 4px;
    flex-shrink: 0;
    background: transparent;
}

/* Фон только у кнопки при наведении на неё */
.sidebar-item .chat-menu-btn:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* При наведении на чат - НЕ меняем фон кнопки */
.sidebar-item:hover .chat-menu-btn {
    background-color: transparent;
}

/* Но если навели на саму кнопку - показываем её фон поверх */
.sidebar-item:hover .chat-menu-btn:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

.sidebar-item .chat-menu-btn i {
    font-size: 14px;
    line-height: 1;
}

/* Анимация для закрепления/открепления */
@keyframes pinPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.pin-animation {
    animation: pinPulse 0.3s ease;
}

/* ИЗМЕНЕНИЕ 5: Новые стили для кнопок в сайдбаре */
.sidebar-nav-section {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0.5rem;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    margin-bottom: 0.125rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #b4b4b4;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.sidebar-nav-item:hover {
    background-color: rgba(255,255,255,0.06);
    color: #ececec;
}

.sidebar-nav-item i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-nav-item span {
    flex: 1;
}

/* 🔥 Стили для infinite scroll в сайдбаре */
.loading-spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #b4b4b4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

#chatsLoadingIndicator {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#chatsLoadingIndicator.visible {
    opacity: 1;
}

/* 🔥 TOAST УВЕДОМЛЕНИЯ (iOS-style - тёмный фон сверху) */
.spellbook-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: #2B2A28;
    border-radius: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: "Exo 2", sans-serif;
    z-index: 99999;
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.4s ease;
    white-space: nowrap;
    max-width: calc(100vw - 40px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

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

.spellbook-toast.hide {
    transform: translateX(-50%) translateY(-150%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 1, 1), 
                opacity 0.3s ease;
}

.spellbook-toast-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.spellbook-toast-text {
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Мобильная адаптация toast */
@media (max-width: 768px) {
    .spellbook-toast {
        top: 60px;
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(-150%);
        width: auto;
        max-width: none;
        padding: 14px 20px;
        font-size: 14px;
        white-space: normal;
        justify-content: center;
        cursor: pointer;
        touch-action: pan-y;
    }
    
    .spellbook-toast.show {
        transform: translateX(0) translateY(0);
    }
    
    .spellbook-toast.hide {
        transform: translateX(0) translateY(-150%);
    }
    
    .spellbook-toast-icon {
        width: 22px;
        height: 22px;
    }
}

/* Safe area для устройств с вырезом (iPhone X+) */
@supports (padding-top: env(safe-area-inset-top)) {
    .spellbook-toast {
        top: calc(20px + env(safe-area-inset-top));
    }
    
    @media (max-width: 768px) {
        .spellbook-toast {
            top: calc(60px + env(safe-area-inset-top));
        }
    }
}

/* ИСПРАВЛЕНИЕ 7: Стили для обрезки описания */
.description-wrapper {
    position: relative;
    text-align: center;
    padding: 0 1rem;
}

.description-text {
    display: inline;
}

.description-text.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show-more-btn {
    color: #3b82f6;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    margin-left: 0.25rem;
    transition: all 0.2s ease;
}

.show-more-btn:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* ИСПРАВЛЕНИЕ 9: Новый typing эффект - черный текст с бликом */
.thinking-indicator {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0;
}

.thinking-text{
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 500;
  font-size: 0.875rem;
}

/* Яркий белый блик */
.thinking-text::after{
  content: attr(data-content);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 1) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 1) 60%,
      transparent 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer-text{
  from{background-position:200% 0}
  to  {background-position:-200% 0}
}

/* Ring loader пропорциональный тексту */
.typing-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.typing-dots img {
    width: 100%;
    height: 100%;
    opacity: 0.35;
    filter: brightness(3) saturate(0);
}

/* 🔥 УБРАНО: Старые стили точек */
.typing-dot {
    display: none !important; /* 🔥 Скрываем старые точки */
}

@keyframes typing-wave {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateY(-0.75rem) scale(1.2);
        opacity: 0.7;
    }
}

/* Утилитарный класс для скрытия элементов */
.hidden {
    display: none !important;
}

/* 🎨 МИНИМАЛИСТИЧНЫЕ СТИЛИ МОДАЛКИ СОВЕЩАНИЯ */
.meeting-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.meeting-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.meeting-modal-container {
    background: #1e1e1e;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    width: 100%;
    max-width: 900px;
    height: 75vh !important;
    min-height: 500px !important;
    max-height: 85vh !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

.meeting-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.meeting-modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meeting-modal-title h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ececec;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Инлайновый счётчик выбранных */
.meeting-counter-inline {
    background: rgba(255,255,255,0.08);
    color: #b4b4b4;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.meeting-modal-title p {
    font-size: 0.875rem;
    color: #9a9a9a;
    margin: 0.25rem 0 0 0;
}

.meeting-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #9a9a9a;
    font-size: 0.85rem;
}

.meeting-close-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #ececec;
}

/* Убран meeting-selected-section - теперь используется инлайновый счётчик */

.meeting-tabs-container {
    flex-shrink: 0;
    padding: 0.5rem 1.5rem 0;
    border-bottom: none;
}

.meeting-tabs {
    display: inline-flex;
    padding: 3px;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
}

.meeting-tab {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    border: none;
    background: transparent;
    color: #777;
    font-weight: 500;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.meeting-tab i {
    font-size: 0.78rem;
}

.meeting-tab:hover {
    color: #b4b4b4;
}

.meeting-tab.active {
    color: #ececec;
    background: rgba(255,255,255,0.08);
}

.meeting-content {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.meeting-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 0;
    gap: 1rem;
    color: #777;
}

/* Пустое состояние - когда ассистенты не найдены */
.meeting-empty-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 0;
    gap: 0.75rem;
    color: #666;
    text-align: center;
    padding: 2rem;
}

.meeting-empty-results i {
    font-size: 2rem;
    opacity: 0.4;
}

.meeting-empty-results p {
    margin: 0;
    font-size: 0.8rem;
}

.meeting-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.06);
    border-top-color: #ececec;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.meeting-assistants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    padding: 0.25rem;
    flex: 1 1 0;
    align-content: start;
}

.meeting-assistant-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 0.75rem;
    padding-right: 2.5rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.meeting-assistant-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

.meeting-assistant-card.selected {
    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.meeting-assistant-card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.meeting-assistant-card.disabled-imagegen {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.meeting-assistant-card.disabled-imagegen::after {
    content: '🎨 Генерация изображений';
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.6rem;
    color: #b4b4b4;
    background: rgba(0,0,0,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
}

.dark .meeting-assistant-card.disabled-imagegen::after {
    background: rgba(255,255,255,0.08);
    color: #767676;
}

.meeting-assistant-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.meeting-assistant-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.meeting-assistant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meeting-assistant-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Контейнер для названия */
.meeting-assistant-name-wrapper {
    overflow: hidden;
    position: relative;
}

.meeting-assistant-name {
    font-weight: 600;
    color: #ececec;
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Анимация бегущей строки при hover */
.meeting-assistant-card:hover .meeting-assistant-name.is-overflow {
    animation: marquee 4s linear infinite;
    overflow: visible;
    text-overflow: clip;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    10% { transform: translateX(0); }
    45% { transform: translateX(calc(-100% + 80px)); }
    55% { transform: translateX(calc(-100% + 80px)); }
    90% { transform: translateX(0); }
    100% { transform: translateX(0); }
}

.meeting-assistant-company {
    font-size: 0.75rem;
    color: #9a9a9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meeting-assistant-description {
    font-size: 0.75rem;
    color: #9a9a9a;
    line-height: 1.4;
    margin-top: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meeting-assistant-checkbox {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
    z-index: 2;
}

.meeting-assistant-card.selected .meeting-assistant-checkbox {
    background: #ececec;
    border-color: #ececec;
    color: #1e1e1e;
}

/* Бейдж порядка выбора */
.meeting-assistant-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #ececec;
    color: #1e1e1e;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 3;
    border: 2px solid #1e1e1e;
}

.meeting-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.meeting-footer-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #666;
}

.meeting-footer-actions {
    display: flex;
    gap: 0.75rem;
}

.meeting-btn-secondary {
    padding: 0.6rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #b4b4b4;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.meeting-btn-secondary:hover {
    background: rgba(255,255,255,0.06);
    color: #ececec;
    border-color: rgba(255,255,255,0.15);
}

.meeting-btn-primary {
    padding: 0.6rem 1.25rem;
    background: #ececec;
    color: #1e1e1e;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meeting-btn-primary:hover:not(:disabled) {
    background: #ffffff;
}

.meeting-btn-primary:disabled {
    background: rgba(255,255,255,0.08);
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
}

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

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

/* ========== МОБИЛЬНАЯ ВЕРСИЯ - BOTTOM SHEET ========== */
@media (max-width: 768px) {
    /* Overlay прикреплён к низу */
    .meeting-modal-overlay {
        align-items: flex-end !important;
        justify-content: flex-end !important;
        padding: 0 !important;
    }
    
    .meeting-modal-overlay.show {
        animation: fadeInOverlay 0.2s ease-out;
    }
    
    @keyframes fadeInOverlay {
        from { background: rgba(0,0,0,0); }
        to { background: rgba(0,0,0,0.5); }
    }
    
    /* Контейнер прикреплён к низу экрана - фиксированная высота */
    .meeting-modal-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 80vh !important;
        min-height: 80vh !important;
        max-height: 80vh !important;
        border-radius: 20px 20px 0 0;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        animation: slideUpSheet 0.3s ease-out;
        display: flex;
        flex-direction: column;
        margin: 0;
        touch-action: none;
        overflow: hidden;
    }
    
    @keyframes slideUpSheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    /* Закрытие с анимацией вниз */
    .meeting-modal-container.closing {
        animation: slideDownSheet 0.25s ease-in forwards;
    }
    
    @keyframes slideDownSheet {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }
    
    /* Ручка для свайпа */
    .meeting-modal-header {
        position: relative;
        padding: 1rem 1rem 0.5rem 1rem;
        cursor: grab;
        touch-action: pan-y;
    }
    
    .meeting-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.15);
        border-radius: 2px;
    }
    
    .meeting-modal-header:active {
        cursor: grabbing;
    }
    
    .meeting-modal-title h3 {
        font-size: 1rem;
        margin-top: 4px;
    }
    
    .meeting-modal-title p {
        font-size: 0.7rem;
        margin-top: 2px;
    }
    
    .meeting-close-btn {
        width: 30px;
        height: 30px;
    }
    
    /* Табы */
    .meeting-tabs-container {
        flex-shrink: 0;
        padding: 0.5rem 1rem 0;
    }
    
    .meeting-tabs {
        padding: 3px;
    }
    
    .meeting-tab {
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }
    
    .meeting-tab i {
        font-size: 0.7rem;
    }
    
    /* Поиск */
    .meeting-search-container {
        padding: 0.5rem 1rem;
        flex-shrink: 0;
    }
    
    .meeting-search-input {
        padding: 8px 36px 8px 32px;
        font-size: 0.8rem;
    }
    
    /* Контент со скроллом */
    .meeting-content {
        flex: 1 1 0 !important;
        padding: 0.5rem 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Сетка карточек */
    .meeting-assistants-grid {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.25rem 0;
    }
    
    /* Компактные карточки */
    .meeting-assistant-card {
        padding: 0.625rem 0.75rem;
        padding-right: 2.75rem;
        border-radius: 10px;
    }
    
    .meeting-assistant-header {
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
        margin-bottom: 0;
    }
    
    .meeting-assistant-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    
    .meeting-assistant-info {
        flex: 1;
        min-width: 0;
    }
    
    .meeting-assistant-name {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 1px;
    }
    
    .meeting-assistant-company {
        font-size: 0.7rem;
    }
    
    .meeting-assistant-description {
        display: none !important;
    }
    
    .meeting-assistant-checkbox {
        width: 20px;
        height: 20px;
        top: 50%;
        transform: translateY(-50%);
        right: 0.75rem;
    }
    
    .meeting-assistant-badge {
        top: -3px;
        left: -3px;
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
        border-width: 1.5px;
    }
    
    /* Footer */
    .meeting-modal-footer {
        padding: 0.75rem 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        border-top: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
    }
    
    .meeting-footer-info {
        font-size: 0.65rem;
        justify-content: center;
        color: #666;
        padding: 0;
    }
    
    .meeting-footer-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .meeting-btn-secondary {
        flex: 1;
        justify-content: center;
        padding: 0.65rem;
        font-size: 0.8rem;
        border-radius: 10px;
    }
    
    .meeting-btn-primary {
        flex: 1.5;
        justify-content: center;
        padding: 0.65rem;
        font-size: 0.8rem;
        border-radius: 10px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 380px) {
    .meeting-modal-container {
        height: 85vh !important;
        min-height: 85vh !important;
        max-height: 85vh !important;
    }
    
    .meeting-assistant-avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    
    .meeting-assistant-name {
        font-size: 0.78rem;
    }
    
    .meeting-assistant-company {
        font-size: 0.65rem;
    }
    
    .meeting-tab {
        font-size: 0.7rem;
        padding: 0.35rem 0.6rem;
    }
    
    .meeting-tab i {
        display: none;
    }
}

.order-badge {
    background: #ececec;
    color: #1e1e1e;
    font-weight: bold;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    position: absolute;
    top: -8px;
    right: -8px;
    border: 2px solid #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.assistant-item {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
}

.assistant-item:hover {
    border-color: #d1d5db;
}

.assistant-item.selected {
    border-color: #374151;
    background: #f9fafb;
}

.assistant-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.assistant-item.disabled:hover {
    border-color: #e5e7eb;
}

.selected-assistant {
    background: #374151;
    color: white;
    border-radius: 8px;
    padding: 8px;
    position: relative;
}

.selected-assistant .remove-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.selected-assistant .remove-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.order-badge {
    background: white;
    color: #374151;
    font-weight: bold;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    position: absolute;
    top: -6px;
    right: -6px;
    border: 1px solid #e5e7eb;
}

.modal {
    backdrop-filter: blur(4px);
}

/* Гарантированный фон для shareModal и deleteModal */
#shareModal > div,
#deleteModal > div {
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ========== 🔥 МОДАЛКА ОЦЕНКИ АССИСТЕНТА ========== */
.rating-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.rating-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.rating-modal-container {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 415px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
    position: relative;
}

.rating-modal-overlay.show .rating-modal-container {
    transform: scale(1) translateY(0);
}

.rating-modal-content {
    padding: 3rem 1.5rem;
    text-align: center;
}

.rating-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
    font-size: 1rem;
}

.rating-modal-close:hover {
    background: #e5e7eb;
    color: #222222;
}

.rating-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #222222;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Ручка свайпа - скрыта на десктопе */
.rating-modal-handle {
    display: none;
}

.rating-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 2rem;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 120px;
}

.rating-btn:hover {
    border-color: #d1d5db;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

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

.rating-btn.like-btn:hover {
    border-color: #22c55e;
    background: #f0fdf4;
}

.rating-btn.dislike-btn:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.rating-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.rating-btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.rating-btn.like-btn .rating-btn-icon {
    color: #22c55e;
}

.rating-btn.dislike-btn .rating-btn-icon {
    color: #ef4444;
}

.rating-btn-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

/* Успешное состояние после голосования */
.rating-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.rating-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f0fdf4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    font-size: 1.75rem;
}

.rating-success-text {
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
}

/* ========== МОБИЛЬНАЯ ВЕРСИЯ - BOTTOM SHEET ========== */
@media (max-width: 768px) {
    .rating-modal-overlay {
        align-items: flex-end !important;
        justify-content: flex-end !important;
        padding: 0 !important;
    }
    
    .rating-modal-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        max-height: 50vh;
        touch-action: none;
        will-change: transform;
    }
    
    .rating-modal-overlay.show .rating-modal-container {
        transform: translateY(0);
    }
    
    .rating-modal-container.closing {
        transform: translateY(100%);
    }
    
    /* Ручка для свайпа */
    .rating-modal-handle {
        width: 100%;
        padding: 12px 0 8px;
        display: flex;
        justify-content: center;
        cursor: grab;
        touch-action: pan-y;
    }
    
    .rating-modal-handle::before {
        content: '';
        width: 40px;
        height: 5px;
        background: #d1d5db;
        border-radius: 3px;
    }
    
    .rating-modal-handle:active {
        cursor: grabbing;
    }
    
    .rating-modal-content {
        padding: 0.5rem 1.5rem 2rem;
    }
    
    .rating-modal-close {
        display: none;
    }
    
    .rating-modal-title {
        font-size: 1.125rem;
        margin-bottom: 1.25rem;
    }
    
    .rating-btn {
        padding: 1rem 1.5rem;
        min-width: 100px;
    }
    
    .rating-btn-icon {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }
}


.modal.show .bg-white {
    animation: modalSlideIn 0.3s ease-out;
}

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

.meeting-header-simple {
    border-left: 3px solid #555;
    padding-left: 0.75rem;
}

/* ===== МИНИМАЛИСТИЧНЫЙ ЛОАДЕР СОВЕЩАНИЯ ===== */
.meeting-initial-loader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    animation: fadeIn 0.3s ease;
}

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

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

.meeting-loader-icon-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b4b4b4;
    font-size: 0.7rem;
    flex-shrink: 0;
    animation: meeting-pulse 1.8s ease-in-out infinite;
}

@keyframes meeting-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(180,180,180,0.3); }
    70%  { box-shadow: 0 0 0 8px rgba(180,180,180,0); }
    100% { box-shadow: 0 0 0 0 rgba(180,180,180,0); }
}

.meeting-loader-text {
    flex: 1;
    min-width: 0;
}

.meeting-loader-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #b4b4b4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meeting-loader-subtitle {
    font-size: 0.7rem;
    color: #777;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meeting-loader-dots {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
}

.meeting-loader-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #777;
    animation: meeting-dot-bounce 1.2s ease-in-out infinite;
}
.meeting-loader-dot:nth-child(2) { animation-delay: 0.15s; }
.meeting-loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes meeting-dot-bounce {
    0%,60%,100% { transform: translateY(0); opacity: 0.35; }
    30%          { transform: translateY(-4px); opacity: 1; }
}

/* ===== ЕДИНЫЙ СТИЛЬ АККОРДЕОНОВ (стриминг = перезагрузка) ===== */
.meeting-process-simple {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meeting-stage {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    transition: border-color 0.2s;
    animation: fadeInSlide 0.25s ease;
}

.meeting-stage:hover {
    border-color: rgba(255,255,255,0.12);
}

.meeting-stage.thinking {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}

.meeting-stage.complete {
    border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
}

/* Шапка аккордеона — кликабельная */
.meeting-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    gap: 10px;
}

.meeting-stage-header:hover {
    background: rgba(255,255,255,0.04);
}

/* Левая часть шапки: аватар + имя */
.meeting-stage-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Аватар ассистента */
.meeting-stage-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b4b4b4;
    font-size: 0.6rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.meeting-stage.complete .meeting-stage-avatar {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
}

.meeting-stage-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Имя ассистента */
.meeting-stage-name {
    font-size: 13px;
    font-weight: 600;
    color: #ececec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Статус (thinking dots) */
.meeting-stage-status {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.meeting-stage-status-text {
    font-size: 11px;
    color: #777;
}

/* Иконка раскрытия */
.meeting-stage-toggle {
    color: #777;
    flex-shrink: 0;
    font-size: 12px;
    transition: transform 0.25s ease;
}

.meeting-stage-toggle.expanded {
    transform: rotate(180deg);
}

/* Контент аккордеона */
.meeting-stage-content {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 10px 12px 12px;
}

.meeting-stage.thinking .meeting-stage-content {
    border-top-color: rgba(255,255,255,0.08);
    padding: 10px 12px 12px;
}

/* Контент стриминга */
.streaming-content-meeting {
    font-size: 13px;
    line-height: 1.6;
    color: #d1d5db;
}

/* Плавное появление курсора */
.streaming-cursor {
    display: inline-block;
    color: #b4b4b4;
    animation: blink-cursor 0.9s step-end infinite;
    margin-left: 1px;
}

@keyframes blink-cursor {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Мини-индикатор думания внутри шапки */
.thinking-dots-mini {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.thinking-dot-mini {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #777;
    animation: meeting-dot-bounce 1.1s ease-in-out infinite;
}
.thinking-dot-mini:nth-child(2) { animation-delay: 0.12s; }
.thinking-dot-mini:nth-child(3) { animation-delay: 0.24s; }

/* Summary loader */
#summaryThinking {
    animation: fadeInSlide 0.25s ease;
}

/* Протокол совещания */
.meeting-summary {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.meeting-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);
    margin: 16px 0;
}

.meeting-final-header {
    border-left: 3px solid #555;
    padding-left: 0.75rem;
    margin-bottom: 10px;
}

/* Dark mode — now matching main styles */
.dark .meeting-stage-name { color: #ececec; }
.dark .meeting-stage-content { border-top-color: rgba(255,255,255,0.06); }
.dark .streaming-content-meeting { color: #d1d5db; }
.dark .meeting-summary { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.dark .meeting-initial-loader { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.dark .meeting-loader-title { color: #b4b4b4; }

/* Мобильная */
@media (max-width: 768px) {
    .meeting-stage-header { padding: 9px 10px; }
    .meeting-stage-avatar { width: 24px; height: 24px; }
    .meeting-stage-name { font-size: 12px; }
    .meeting-stage-content { padding: 10px 12px; }
}

#meetingModeIndicator {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
}

#meetingModeIndicator i {
    margin-right: 0.25rem;
    font-size: 0.6rem;
}

.meeting-active #meetingModeIndicator {
    background: #1f2937;
    color: #ffffff;
    animation: none;
}

/* НОВЫЕ СТИЛИ ДЛЯ АККОРДИОНА СОВЕЩАНИЯ */
.meeting-container {
    background: #f9fafb00;
    padding: 0;
    margin: 1rem 0;
}



.meeting-header-text {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
}


.meeting-process.expanded {
    display: block;
}

/* 🔥 НОВОЕ: Стили для восстановленных аккордеонов */
.meeting-container .meeting-header {
    cursor: pointer;
}

.meeting-container .meeting-header:hover {
    background: #f9fafb;
}

.meeting-stage.complete .assistant-badge {
    background: rgba(255,255,255,0.06);
    color: #b4b4b4;
    border-color: rgba(255,255,255,0.1);
}

.meeting-stage {
    padding: 0;
    margin: 0.5rem 0;
}



.assistant-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: rgba(255,255,255,0.06);
    color: #777;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 0.5rem;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

.assistant-badge.thinking {
    background: rgba(255,255,255,0.06);
    color: #777;
}

.assistant-badge.complete {
    background: rgba(255,255,255,0.06);
    color: #b4b4b4;
    border-color: rgba(255,255,255,0.1);
}

.assistant-thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 0.5rem;
}

.thinking-dot {
    width: 4px;
    height: 4px;
    background: #6b7280;
    border-radius: 50%;
    animation: thinking-bounce 1.4s ease-in-out infinite;
}

.thinking-dot:nth-child(1) { animation-delay: 0s; }
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    30% {
        transform: translateY(-6px);
        opacity: 0.7;
    }
}


/* Стили для транскрибации */
.voice-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.voice-btn.idle {
    background: #f3f4f6;
    color: #6b7280;
}

.voice-btn.idle:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Кнопки записи */
.voice-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-timer {
    font-size: 13px;
    color: #6b7280;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
}

.voice-btn-cancel {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.voice-btn-cancel:hover {
    background: #d1d5db;
    color: #1f2937;
}

.voice-btn-confirm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.voice-btn-confirm:hover {
    background: #d1d5db;
    color: #1f2937;
}

.voice-btn.processing {
    background: #f3f4f6;
    cursor: not-allowed;
}

/* Черный лоадер для состояния обработки */
.voice-btn .processing-spinner-dark {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #374151;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes recording-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Эквалайзер - стиль ChatGPT (бегущая лента) */
.voice-equalizer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    height: 100%;
    padding: 0 12px;
    background: transparent;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    right: 140px; /* Оставляем место для кнопок справа */
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
}

.equalizer-bar {
    width: 2.5px;
    min-width: 2.5px;
    height: 3px;
    min-height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 1.5px;
    flex-shrink: 0;
    flex-grow: 0;
    transition: none;
}

.equalizer-bar.active-bar {
    background: rgba(255, 255, 255, 0.7);
}

.equalizer-bar.loud {
    background: rgba(255, 255, 255, 0.95);
}

/* Замороженное состояние эквалайзера при обработке */
.voice-equalizer.frozen {
    opacity: 0.6;
    right: 50px; /* При обработке только кнопка лоадера */
}

/* Анимация для состояния обработки */
.processing-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Мобильная адаптация */
@media (max-width: 768px) {
    .voice-btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
    }
    
    .voice-equalizer {
        gap: 1px;
        padding: 0 8px;
        right: 120px; /* Меньше места на мобильном */
    }
    
    .voice-equalizer.frozen {
        right: 45px;
    }
    
    .equalizer-bar {
        width: 2px;
        height: 2px;
        min-height: 2px;
    }
    
    .voice-btn-cancel,
    .voice-btn-confirm {
        width: 2rem;
        height: 2rem;
    }
    
    .voice-timer {
        font-size: 12px;
        min-width: 30px;
    }
}


/* =================== Лимиты Стили =================== */

/* 🔥 ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ ЛИМИТОВ СОВЕЩАНИЙ */
.meeting-limit-modal {
    backdrop-filter: blur(4px);
    z-index: 9999 !important;
    /* 🔥 НАЧАЛЬНОЕ СОСТОЯНИЕ - полностью невидимо */
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
    transition: all 0.3s ease;
}

.meeting-limit-modal.show {
    /* 🔥 КОНЕЧНОЕ СОСТОЯНИЕ - полностью видимо */
    opacity: 1;
    transform: scale(1) translateY(0);
}

.meeting-limit-toast {
    max-width: 320px;
}

.meeting-limit-toast.show {
    transform: translateX(0) !important;
}

/* 🔥 НОВЫЕ СТИЛИ ДЛЯ СИСТЕМЫ ЛИМИТОВ v2.0 */

/* Оверлей кулдауна на инпуте - красивый светлый дизайн */
.input-cooldown-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: not-allowed;
    animation: cooldownFadeIn 0.4s ease-out;
}

@keyframes cooldownFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

.input-cooldown-content {
    text-align: center;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.input-cooldown-timer-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.06);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.input-cooldown-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f97316;
    flex-shrink: 0;
}

.input-cooldown-icon svg {
    width: 20px;
    height: 20px;
}

.input-cooldown-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.input-cooldown-timer {
    font-family: 'SF Mono', 'Roboto Mono', 'Consolas', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ea580c;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.input-cooldown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.input-cooldown-btn:hover {
    background: #333;
}

/* === Dark theme overrides === */
body:not(.light-theme) .input-cooldown-overlay {
    background: rgba(33, 33, 33, 0.92);
}

body:not(.light-theme) .input-cooldown-timer-wrapper {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

body:not(.light-theme) .input-cooldown-label {
    color: #999;
}

body:not(.light-theme) .input-cooldown-timer {
    color: #fb923c;
}

body:not(.light-theme) .input-cooldown-btn {
    background: #fff;
    color: #1a1a1a !important;
}

body:not(.light-theme) .input-cooldown-btn:hover {
    background: #e5e5e5;
}

/* === Light theme overrides === */
body.light-theme .input-cooldown-overlay {
    background: rgba(255, 255, 255, 0.92);
}

body.light-theme .input-cooldown-timer-wrapper {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .input-cooldown-label {
    color: #6b7280;
}

body.light-theme .input-cooldown-timer {
    color: #ea580c;
}

body.light-theme .input-cooldown-btn {
    background: #1a1a1a;
    color: #fff !important;
}

body.light-theme .input-cooldown-btn:hover {
    background: #333;
}

/* Анимации для модалок */
.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* Плавные переходы */
.transform.transition-all.duration-300 {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Мобильная адаптация для оверлея кулдауна */
@media (max-width: 640px) {
    .input-cooldown-content {
        flex-direction: column;
        gap: 8px;
        padding: 0.5rem 1rem;
    }
    
    .input-cooldown-timer-wrapper {
        padding: 8px 16px;
        gap: 8px;
    }
    
    .input-cooldown-timer {
        font-size: 1rem;
    }
    
    .input-cooldown-icon {
        width: 18px;
        height: 18px;
    }
    
    .input-cooldown-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .input-cooldown-label {
        font-size: 0.7rem;
    }
    
    .input-cooldown-btn {
        font-size: 0.75rem;
        padding: 8px 16px;
    }
}

/* 🔥 Компактные стили модалки лимитов для мобильных */
@media (max-width: 480px) {
    #freeLimitModalContent {
        margin: 0.5rem !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    #freeLimitModalContent > div {
        padding: 1.25rem !important;
    }
    
    /* Компактная иконка */
    #freeLimitModalContent .w-20 {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #freeLimitModalContent .w-20 svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    /* Компактный заголовок */
    #freeLimitModalContent h2 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Компактный текст */
    #freeLimitModalContent p {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }
    
    /* Компактный таймер */
    #freeLimitModalContent .bg-gray-900 {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 1rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 .text-4xl {
        font-size: 1.75rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 .text-3xl {
        font-size: 1.25rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 .text-xs {
        font-size: 0.65rem !important;
        margin-top: 0.125rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 .gap-4 {
        gap: 0.5rem !important;
    }
    
    /* Компактные кнопки */
    #freeLimitModalContent .space-y-3 {
        gap: 0.5rem !important;
    }
    
    #freeLimitModalContent .space-y-3 > * {
        margin-top: 0.5rem !important;
    }
    
    #freeLimitModalContent .space-y-3 > *:first-child {
        margin-top: 0 !important;
    }
    
    #freeLimitModalContent button[type="submit"],
    #freeLimitModalContent .space-y-3 button {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        border-radius: 1rem !important;
    }
    
    #freeLimitModalContent button svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* Ещё более компактный вариант для очень маленьких экранов */
@media (max-height: 600px) {
    #freeLimitModalContent > div {
        padding: 1rem !important;
    }
    
    #freeLimitModalContent .w-20 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #freeLimitModalContent .w-20 svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    #freeLimitModalContent h2 {
        font-size: 1rem !important;
    }
    
    #freeLimitModalContent p {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 .text-4xl {
        font-size: 1.5rem !important;
    }
    
    #freeLimitModalContent .bg-gray-900 .text-3xl {
        font-size: 1rem !important;
    }
    
    #freeLimitModalContent button[type="submit"],
    #freeLimitModalContent .space-y-3 button {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.8rem !important;
    }
}


/* 🔥 ИСПРАВЛЕННЫЕ стили для бейджа лимитов */
.meeting-mode-container {
    position: relative !important;
    display: inline-block;
}

#meetingLimitIndicator {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    z-index: 25 !important;
    pointer-events: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1;
    padding: 0 !important;
    border: 2px solid #212121;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Цвета для разных состояний бейджа */
#meetingLimitIndicator.available {
    background: #ececec;
    color: #1e1e1e;
}

#meetingLimitIndicator.warning {
    background: #f59e0b;
    color: #1e1e1e;
}

#meetingLimitIndicator.exceeded {
    background: #ef4444;
    color: white;
}

#meetingLimitIndicator.disabled {
    background: #555;
    color: #999;
}

/* 🧠 Кнопка "Размышления" */
.think-mode-btn {
    position: relative;
    z-index: 20;
    padding: 2px 10px 3px 10px;
    border-radius: 2rem;
    color: #1a1a1a;
    border: 1px solid transparent;
    display: none; /* Скрыта по умолчанию, показывается при активации */
    align-items: center;
    gap: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    margin-left: 8px;
}

.think-mode-btn.visible {
    display: flex;
}

.think-mode-btn:hover {
    background: #EFEFED;
}

.think-mode-btn.active {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: transparent;
}

.think-mode-btn.active:hover {
    background: rgba(245, 158, 11, 0.15);
}

.think-mode-btn .think-btn-icon {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.think-mode-btn.active .think-btn-icon {
    transform: scale(1.1);
}

/* 📱 Адаптивность для кнопки "Размышления" */
@media (max-width: 768px) {
    .think-mode-btn {
        padding: 2px 8px 3px 8px;
        margin-left: 6px;
    }
    
    .think-mode-btn .think-btn-icon {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .think-mode-btn {
        padding: 4px 8px;
        margin-left: 6px;
    }
    
    .think-mode-btn .think-btn-text {
        display: none;
    }
}

/* 🔍 Кнопка "Поиск" рядом с "Подумать" */
.web-search-mode-btn {
    position: relative;
    z-index: 20;
    padding: 2px 10px 3px 10px;
    border-radius: 10px;
    color: #1a1a1a;
    border: 1px solid transparent;
    display: none; /* Скрыта по умолчанию, показывается через PHP */
    align-items: center;
    gap: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    margin-left: 8px;
}

.web-search-mode-btn.visible {
    display: flex;
}

.web-search-mode-btn:hover {
    background: #EFEFED;
}

.web-search-mode-btn.active {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-color: transparent;
}

.web-search-mode-btn.active:hover {
    background: rgba(59, 130, 246, 0.15);
}

.web-search-mode-btn .search-btn-icon {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.web-search-mode-btn.active .search-btn-icon {
    transform: scale(1.1);
}

/* 📱 Адаптивность для кнопки "Поиск" */
@media (max-width: 768px) {
    .web-search-mode-btn {
        padding: 2px 8px 3px 8px;
        margin-left: 6px;
    }
    
    .web-search-mode-btn .search-btn-icon {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .web-search-mode-btn {
        padding: 4px 8px;
        margin-left: 6px;
    }
    
    .web-search-mode-btn .search-btn-text {
        display: none;
    }
}

/* 🔥 ИСПРАВЛЯЕМ hover эффект кнопки режима совещания */

/* 🔗 CRM active mode indicator button (near think/search buttons) */
.crm-mode-btn {
    position: relative;
    z-index: 20;
    padding: 2px 10px 3px 10px;
    border-radius: 10px;
    color: #ccc;
    border: 1px solid transparent;
    display: none;
    align-items: center;
    gap: 5px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.82rem;
    margin-left: 8px;
}
.crm-mode-btn.visible {
    display: flex;
}
.crm-mode-btn:hover {
    background: rgba(255,255,255,0.06);
}
.crm-mode-btn.active {
    background: rgba(255,255,255,0.06);
    color: #e0e0e0;
}
.crm-mode-btn.active:hover {
    background: rgba(255,255,255,0.1);
}
.crm-mode-btn .crm-btn-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-mode-btn .crm-btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.crm-mode-btn .crm-btn-text {
    font-size: 0.8rem;
    white-space: nowrap;
}
/* Amo icon in bottom indicator — white svg needs no filter in dark */
.crm-mode-btn .crm-btn-icon.amo img {
    filter: brightness(0.8);
}
body.light-theme .crm-mode-btn .crm-btn-icon.amo img {
    filter: brightness(0) invert(0.2);
}
body.light-theme .crm-mode-btn {
    color: #555;
}
body.light-theme .crm-mode-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}
body.light-theme .crm-mode-btn.active {
    background: rgba(0,0,0,0.06);
    color: #1a1a1a;
}
body.light-theme .crm-mode-btn.active:hover {
    background: rgba(0,0,0,0.09);
}
@media (max-width: 768px) {
    .crm-mode-btn {
        padding: 2px 8px 3px 8px;
        margin-left: 6px;
    }
}
@media (max-width: 480px) {
    .crm-mode-btn {
        padding: 4px 8px;
        margin-left: 6px;
    }
    .crm-mode-btn .crm-btn-text {
        display: none;
    }
}

.meeting-mode-btn {
    position: relative;
    z-index: 20;
    padding: 2px 10px 3px 10px;
    border-radius: 10px;
    color: #b4b4b4;
    border: 1px solid #3b82f600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meeting-mode-btn:hover {
    color: #d0d0d0;
}

/* Hover для неактивного wrapper - серый фон на весь блок */
.meeting-btn-wrapper:not(.has-participants):hover {
    background: rgba(255,255,255,0.08);
    border-radius: 2rem;
}

/* 🔥 НОВЫЕ стили для аватаров участников в кнопке совещания */

/* Обертка для аватаров + кнопки */
.meeting-btn-wrapper {
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 2rem;
    transition: all 0.2s ease;
}

.meeting-btn-wrapper.has-participants {
    background: rgba(255,255,255,0.08);
    border: none;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
}

.meeting-btn-wrapper.has-participants:hover {
    background: rgba(255,255,255,0.12);
}

.meeting-btn-wrapper.has-participants .meeting-mode-btn {
    background: transparent !important;
    border: none !important;
    padding-right: 12px;
}

.meeting-btn-wrapper.has-participants .meeting-btn-text {
    font-size: 0.875rem;
}

/* Убираем hover эффект с кнопки когда она в активном wrapper */
.meeting-btn-wrapper.has-participants .meeting-mode-btn:hover {
    background: transparent !important;
}

.meeting-btn-wrapper.has-participants .meeting-btn-icon {
    display: none !important;
}

.meeting-btn-avatars {
    display: none;
    flex-direction: row;
    align-items: center;
}

.meeting-btn-avatars.active {
    display: flex !important;
}

.meeting-btn-avatar-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.meeting-btn-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: -10px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.meeting-btn-avatar:first-child {
    margin-left: 0;
}

.meeting-btn-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.meeting-btn-avatar i {
    font-size: 11px;
    color: #fff;
}

/* Текст "Совещания" в кнопке */
.meeting-btn-text {
    font-size: 0.75rem;
    color: inherit;
}

/* Убираем лишние стили которые могли конфликтовать */
.limit-indicator {
    /* Удаляем старые стили для общего класса */
}

/* =================== ИСПРАВЛЕННАЯ МОБИЛЬНАЯ АДАПТАЦИЯ =================== */

@media (max-width: 768px) {
    /* 1. УБИРАЕМ ГЛОБАЛЬНОЕ ПРАВИЛО И ДЕЛАЕМ ТОЧЕЧНО */
    
    /* Основные контейнеры сообщений - БЕЗ лишних отступов */
    .assistant-response,
    .assistant-message {
        width: 100% !important;
        max-width: none !important; /* Убираем ограничения */
        overflow-x: hidden !important;
    }
    
    /* Контейнер сообщений - оставляем как есть */
    #messagesContainer {
        /* НЕ трогаем max-width, оставляем как было */
        overflow-x: hidden;
    }
    
    /* 2. ТАБЛИЦЫ - стили в другом месте, здесь не дублируем */
    
    /* 3. БЛОКИ КОДА - стили в другом месте, здесь не дублируем */
    
    /* 4. ДЛИННЫЕ ССЫЛКИ */
    .prose a[href*="://"] {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }
    
    /* 5. ВЕБ-ПОИСК РЕЗУЛЬТАТЫ */
    .web-search-results {
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    .web-sources {
        grid-template-columns: 1fr !important;
    }
    
    .web-source {
        min-width: 0;
        overflow: hidden;
    }
    
    .web-source .font-medium,
    .web-source .text-gray-500 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 6. ИЗОБРАЖЕНИЯ */
    .prose img,
    .generated-image {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }
    
    /* 7. ИНЛАЙН КОД */
    .prose code:not(pre code) {
        word-break: break-all;
        white-space: pre-wrap;
    }
    
    /* 8. ТОЛЬКО САМОЕ НЕОБХОДИМОЕ ДЛЯ ПЕРЕНОСА ТЕКСТА */
    .prose p,
    .prose div,
    .prose span {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }
    
    /* 9. ИСПРАВЛЯЕМ КНОПКИ - НЕ ТРОГАЕМ ИХ СОСТОЯНИЯ */
    .voice-btn,
    .quick-button,
    .file-upload-btn,
    button {
        /* НЕ применяем max-width к кнопкам */
        max-width: none !important;
    }
    
    /* 10. НЕ ТРОГАЕМ ЭЛЕМЕНТЫ УПРАВЛЕНИЯ */
    .floating-bottom,
    .floating-input,
    .quick-actions,
    .voice-equalizer,
    #webSearchButton,
    #voiceButton,
    .message-actions {
        max-width: none !important;
    }
    
    /* 11. ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА СТРАНИЦЫ */
    body {
        overflow-x: hidden;
    }
    
    /* 12. ТОЛЬКО ДЛЯ КРИТИЧЕСКИХ ЭЛЕМЕНТОВ */
    .prose table,
    .prose pre {
        /* Только эти элементы могут вызывать проблемы */
        max-width: calc(100vw - 2rem);
    }
}

/* =================== БАЗОВАЯ ЗАЩИТА ДЛЯ ВСЕХ УСТРОЙСТВ =================== */

/* Только основные правила переноса текста */
.prose {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Защита от очень длинных URL */
.prose a[href*="http"] {
    word-break: break-all;
}


/* Стили поиска для модалки совещания */
.meeting-search-container {
    padding: 0.75rem 1.5rem;
    border-bottom: none;
    flex-shrink: 0;
}

.meeting-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.meeting-search-icon {
    position: absolute;
    left: 12px;
    color: #666;
    font-size: 0.8rem;
    z-index: 1;
}

.meeting-search-input {
    width: 100%;
    padding: 9px 36px 9px 34px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: rgba(255,255,255,0.04);
    color: #ececec;
}

.meeting-search-input:focus {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
}

.meeting-search-input::placeholder {
    color: #666;
}

.meeting-clear-search {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #9a9a9a;
    font-size: 0.75rem;
}

.meeting-clear-search:hover {
    background: rgba(255,255,255,0.15);
    color: #ececec;
}

.meeting-clear-search.hidden {
    display: none;
}

/* Обновляем размеры карточек выбранных ассистентов */
.meeting-selected-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
}

.meeting-selected-avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #303030;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.meeting-selected-name {
    font-weight: 600;
    color: #222222;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.meeting-selected-company {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.meeting-position-badge {
    background: #303030;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.meeting-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}


/* ============================= */
/* 🔥 КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ    */
/* ============================= */

/* 🔧 ИСПРАВЛЕНИЕ 1: Цитаты - МИНИМАЛИСТИЧНЫЙ СТИЛЬ */
.prose blockquote {
    margin: 1rem 0 !important;
    padding: 0 0 0 1rem !important;
    border-left: 3px solid #d1d5db !important;
    background: none !important; /* 🔥 УБРАНО: Фон */
    border-radius: 0 !important; /* 🔥 УБРАНО: Скругление */
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
    font-style: italic !important; /* 🔥 НОВОЕ: Курсив */
    color: #6b7280 !important; /* 🔥 НОВОЕ: Серый цвет */
}

/* 🔥 НОВОЕ: Исправление выравнивания маркеров списков */
.prose ul,
.prose ol {
    padding-left: 1.5em !important; /* 🔥 ИЗМЕНЕНО: em вместо rem */
    margin: 0.75em 0 !important;
    list-style-position: outside !important;
}

.prose li {
    margin: 0.375em 0 !important; /* 🔥 УМЕНЬШЕНО: Компактнее */
    line-height: 1.625 !important; /* 🔥 ИЗМЕНЕНО: Как в ChatGPT */
    display: list-item !important;
    padding-left: 0.25em !important; /* 🔥 НОВОЕ: Небольшой отступ */
}

/* 🔥 КРИТИЧНО: Убираем чекбоксы и task lists */
.prose li input[type="checkbox"],
.prose li[data-task-list-item],
.prose .task-list-item {
    display: none !important; /* 🔥 УБИРАЕМ чекбоксы */
}

/* Убираем все стили task-list */
.prose ul.contains-task-list,
.prose ul[data-task-list] {
    list-style-type: disc !important;
}

/* Исправление для маркеров - выравнивание по центру текста */
.prose ul > li {
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.prose ul ul > li {
    list-style-type: circle !important;
}

.prose ul ul ul > li {
    list-style-type: square !important;
}

.prose ol > li {
    list-style-type: decimal !important;
    list-style-position: outside !important;
}

.prose ol ol > li {
    list-style-type: lower-alpha !important;
}

.prose ol ol ol > li {
    list-style-type: lower-roman !important;
}

/* 🔥 КРИТИЧНО: Выравнивание маркера и текста */
.prose ul > li::marker,
.prose ol > li::marker {
    color: #b4b4b4 !important; /* 🔥 Светлый для тёмной темы */
    font-size: 0.875em !important;
}

/* 🔥 НОВОЕ: Вложенные списки с правильными отступами */
.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
    margin: 0.25em 0 !important;
    padding-left: 1.5em !important;
}

/* 🔧 ИСПРАВЛЕНИЕ 2: Общая защита контента */
.prose,
.assistant-response,
.streaming-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
    color: #374151; /* 🔥 Гарантируем нормальный цвет текста */
}

/* 🔥 ЗАЩИТА: Если markdown не отрендерился - текст всё равно читаемый */
.streaming-content:not(:has(p)):not(:has(h1)):not(:has(h2)):not(:has(ul)):not(:has(ol)) {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.75;
    color: #374151 !important;
}

.prose p,
.prose div {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

/* 🔧 ИСПРАВЛЕНИЕ 3: Ссылки и инлайн-код */
.prose a {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

.prose code:not(pre code) {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* 🔧 ИСПРАВЛЕНИЕ 4: Таблицы на десктопе - контейнер со скроллом */
@media (min-width: 769px) {
    .prose table {
        display: table !important; /* Возвращаем обычную таблицу */
        width: 100% !important;
        table-layout: fixed !important; /* ← КЛЮЧЕВОЕ СВОЙСТВО! */
        border-collapse: collapse !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #1e1e1e !important;
        margin: 1.5rem 0 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    }
    
    .prose thead {
        display: table-header-group !important;
    }
    
    .prose tbody {
        display: table-row-group !important;
    }
    
    .prose tr {
        display: table-row !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    
    .prose th {
        display: table-cell !important;
        padding: 0.75rem 1rem !important;
        background: rgba(255,255,255,0.07) !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        border-bottom: 2px solid rgba(255,255,255,0.12) !important;
        border-right: 1px solid rgba(255,255,255,0.06) !important;
        text-align: left !important;
        font-size: 0.875rem !important;
        vertical-align: top !important;
        /* 🔥 ГЛАВНОЕ ИСПРАВЛЕНИЕ */
        white-space: normal !important; /* Разрешаем перенос */
        word-wrap: break-word !important;
        word-break: normal !important;
        hyphens: none !important;
    }
    
    .prose td {
        display: table-cell !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        border-right: 1px solid rgba(255,255,255,0.06) !important;
        color: #d4d4d4 !important;
        font-size: 0.875rem !important;
        vertical-align: top !important;
        /* 🔥 ГЛАВНОЕ ИСПРАВЛЕНИЕ */
        white-space: normal !important; /* Разрешаем перенос */
        word-wrap: break-word !important;
        word-break: normal !important;
        hyphens: none !important;
    }
    
    .prose th:last-child,
    .prose td:last-child {
        border-right: none !important;
    }
    
    .prose tr:hover {
        background: transparent !important;
    }
    
    .prose tr:last-child td {
        border-bottom: none !important;
    }
}

/* 🔧 ИСПРАВЛЕНИЕ 5: Блоки кода - защита от overflow */
.prose pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.prose pre code {
    display: block;
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
}

/* 🔧 ИСПРАВЛЕНИЕ 6: Защита от горизонтального скролла страницы */
body {
    overflow-x: hidden;
}

.messagesContainer {
    overflow-x: hidden;
}

/* Конец критических исправлений */


/* ═══════════════════════════════════════════════════════════════ */
/* ИСПРАВЛЕНИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ */
/* ═══════════════════════════════════════════════════════════════ */

/* Исправление курсора на iOS/iPhone */
#messageInput {
    -webkit-appearance: none !important;
    appearance: none !important;
    caret-color: #3b82f6 !important; /* Цвет курсора */
    -webkit-text-fill-color: #1f2937; /* Цвет текста на iOS */
}

#messageInput:focus {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
}

/* Разрешаем выделение текста в ответах ассистента на мобильных */
.assistant-message .prose,
.assistant-message .assistant-response,
.assistant-message .prose *,
.assistant-message .prose p,
.assistant-message .prose li,
.assistant-message .prose td,
.assistant-message .prose th,
.assistant-message .prose code,
.assistant-message .prose pre,
.assistant-message .prose blockquote,
.assistant-message .prose span,
.assistant-message .prose div,
.meeting-stage-content .prose,
.meeting-stage-content .prose *,
.meeting-summary .prose,
.meeting-summary .prose * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Убираем user-select: none для контента */
.prose {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Для поля ввода разрешаем выделение текста */
#messageInput {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Исправление для мобильного Safari */
@supports (-webkit-touch-callout: none) {
    #messageInput {
        -webkit-user-select: text !important;
        -webkit-touch-callout: default !important;
    }
    
    .assistant-message * {
        -webkit-user-select: text !important;
        -webkit-touch-callout: default !important;
    }
}

/* Дополнительные исправления для textarea */
textarea#messageInput {
    -webkit-appearance: none;
    appearance: none;
}

/* Убираем проблемы с выделением на iOS */
.assistant-message {
    -webkit-user-select: text;
    user-select: text;
}

/* 🔥 Выпадающее меню для кнопки прикрепления */
.attach-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #2a2a2a;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 220px;
    padding: 6px;
    z-index: 1100;
    animation: dropdownFadeIn 0.15s ease-out;
    border: 1px solid rgba(255,255,255,0.08);
}

.attach-dropdown.hidden {
    display: none;
}

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

.attach-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 10px;
    gap: 10px;
    font-size: 13px;
    color: #e0e0e0;
    white-space: nowrap;
}

.attach-dropdown-item:hover {
    background: rgba(255,255,255,0.08);
}

.attach-dropdown-item:active {
    background: rgba(255,255,255,0.12);
}

.attach-dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #b4b4b4;
}

.attach-dropdown-item span {
    font-weight: 500;
}

/* 🎬 Hint для видео (до 60 сек) */
.attach-dropdown-hint {
    font-size: 10px;
    color: #777;
    font-weight: 400;
    margin-left: auto;
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

/* 🔥 Стили для индикаторов лимитов */
.attach-dropdown-hint.limit-hint {
    background: rgba(255,255,255,0.08);
    color: #b8b8b8;
    font-weight: 500;
}
body.light-theme .attach-dropdown-hint.limit-hint {
    background: rgba(0,0,0,0.06) !important;
    color: #555 !important;
}

.attach-dropdown-item.disabled,
.attach-dropdown-toggle.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.attach-toggle-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attach-limit-counter {
    font-size: 10px;
    color: #777;
    font-weight: 400;
}

.web-search-toggle.disabled,
.think-mode-toggle.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 📚 Подключение пользовательской Базы Знаний - подменю */
.attach-dropdown-submenu {
    position: relative;
}
.attach-dropdown-submenu-trigger {
    display: flex !important;
    align-items: center;
}
.attach-dropdown-submenu-list {
    position: absolute;
    left: calc(100% + 4px);
    bottom: 0;
    width: 260px;
    max-height: 280px;
    overflow-y: auto;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 1001;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.attach-dropdown-submenu-list::-webkit-scrollbar { width: 4px; }
.attach-dropdown-submenu-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.attach-dropdown-submenu-list .user-kb-item {
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    overflow: hidden;
}
.attach-dropdown-submenu-list .user-kb-item span:first-of-type {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: none;
}
/* Бегущая строка при наведении на длинное имя */
.attach-dropdown-submenu-list .user-kb-item:hover span:first-of-type {
    overflow: visible;
    text-overflow: unset;
    animation: kbMarquee 4s linear infinite;
    display: inline-block;
    width: max-content;
    max-width: none;
}
@keyframes kbMarquee {
    0%   { transform: translateX(0); }
    10%  { transform: translateX(0); }
    90%  { transform: translateX(calc(-100% + 120px)); }
    100% { transform: translateX(calc(-100% + 120px)); }
}

.attach-dropdown-submenu-list .user-kb-item .attach-dropdown-hint {
    flex-shrink: 0;
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: #888;
}
.attach-dropdown-submenu-list .user-kb-item.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.attach-dropdown-submenu-list .user-kb-item.active i:first-child {
    color: #e0e0e0;
}
.attach-dropdown-submenu-list .user-kb-item.active .attach-dropdown-hint {
    background: rgba(255,255,255,0.1);
    color: #ccc;
}

/* 📚 Индикатор подключённой KB в нижней панели */
.user-kb-indicator-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.18);
    color: rgba(165,200,255,0.85);
    border-radius: 8px;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    max-width: 200px;
    line-height: 1.3;
}
.user-kb-indicator-btn:hover {
    background: rgba(96,165,250,0.16);
    border-color: rgba(96,165,250,0.3);
}
.user-kb-indicator-btn .user-kb-icon {
    font-size: 13px;
    flex-shrink: 0;
}
.user-kb-indicator-btn .user-kb-indicator-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.user-kb-indicator-btn .user-kb-remove {
    font-size: 11px;
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
    margin-left: 2px;
    flex-shrink: 0;
}
.user-kb-indicator-btn .user-kb-remove:hover {
    opacity: 1;
    color: #f87171;
}
.user-kb-indicator-btn.hidden {
    display: none !important;
}

/* ═══ Мобильная адаптация ═══ */
@media (max-width: 768px) {
    .attach-dropdown-submenu-list {
        position: static;
        width: 100%;
        border: none;
        box-shadow: none;
        background: rgba(255,255,255,0.03);
        border-radius: 8px;
        margin: 4px 0;
        padding: 4px;
        max-height: 200px;
    }
    .attach-dropdown-submenu-list .user-kb-item {
        padding: 10px 10px;
        font-size: 13px;
    }
    .user-kb-indicator-btn {
        max-width: 150px;
        padding: 3px 8px 3px 6px;
        font-size: 11px;
        border-radius: 6px;
    }
    .user-kb-indicator-btn .user-kb-indicator-name {
        max-width: 80px;
    }
    .user-kb-indicator-btn .user-kb-icon {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════
   📱 МОБИЛЬНАЯ ВЕРСИЯ — Подключения как полноэкранный
   submenu внутри attach-dropdown с кнопкой "Назад"
   ═══════════════════════════════════════════════════ */

/* Кнопка "Назад к меню" — ВСЕГДА скрыта по умолчанию.
   Показывается только когда attach-dropdown в режиме submenu-open
   И только на мобильных (≤ 768px). */
.attach-dropdown-back-btn {
    display: none !important;
}

@media (max-width: 768px) {
    /* Базовый attach-dropdown на мобильном — фиксированная ширина:
       одинаковая для обычного меню и для submenu-open режима, чтобы
       при переключении не было визуального скачка. */
    .attach-dropdown {
        min-width: 280px;
        width: max-content;
        max-width: calc(100vw - 24px);
    }

    /* Когда внутри dropdown открыт CRM submenu — скрываем все остальные элементы.
       Габариты dropdown остаются такими же (фикс ширины + плавный transition высоты). */
    .attach-dropdown.submenu-open > *:not(.crm-integration-submenu):not(.attach-dropdown-back-btn) {
        display: none !important;
    }
    .attach-dropdown.submenu-open .crm-integration-submenu .attach-dropdown-submenu-trigger {
        display: none !important;
    }

    /* Submenu list (.crmList) растягивается прямо внутри dropdown */
    .attach-dropdown.submenu-open .crm-integration-submenu .attach-dropdown-submenu-list {
        position: static !important;
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-height: min(60vh, 480px) !important;
        overflow-y: auto;
        margin: 0 !important;
        padding: 4px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        gap: 2px;
    }
    .attach-dropdown.submenu-open .crm-integration-submenu .attach-dropdown-submenu-list.hidden {
        display: flex !important;
    }
    .attach-dropdown.submenu-open .crm-toggle-row {
        padding: 12px 12px;
        min-height: 52px;
        border-radius: 10px;
    }

    /* Плавная crossfade-анимация при переключении в режим submenu-open:
       новый контент (back-btn + crm-list) появляется с лёгким fade + slide. */
    .attach-dropdown.submenu-open .attach-dropdown-back-btn,
    .attach-dropdown.submenu-open .crm-integration-submenu {
        animation: dropdownContentSwap 0.2s cubic-bezier(.22,.61,.36,1);
    }
    /* Симметричная анимация для возврата — при удалении класса submenu-open
       обычное содержимое (все кроме crm-submenu/back-btn) тоже плавно появляется. */
    .attach-dropdown:not(.submenu-open) > .attach-dropdown-item,
    .attach-dropdown:not(.submenu-open) > .attach-dropdown-divider,
    .attach-dropdown:not(.submenu-open) > .attach-dropdown-submenu,
    .attach-dropdown:not(.submenu-open) > .attach-dropdown-toggle {
        animation: dropdownContentSwap 0.2s cubic-bezier(.22,.61,.36,1);
    }

    /* Показываем кнопку "Назад" — переопределяем !important */
    .attach-dropdown.submenu-open .attach-dropdown-back-btn {
        display: flex !important;
    }

    /* Стили самой кнопки (применятся при показе) */
    .attach-dropdown-back-btn {
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        margin: 0 0 4px 0;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: #e0e0e0;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        border-radius: 0;
    }
    .attach-dropdown-back-btn i {
        font-size: 14px;
        color: #b4b4b4;
    }
    .attach-dropdown-back-btn:active {
        background: rgba(255,255,255,0.04);
    }
    body.light-theme .attach-dropdown-back-btn {
        color: #1a1a1a;
        border-bottom-color: rgba(0,0,0,0.06);
    }
    body.light-theme .attach-dropdown-back-btn i { color: #555; }
    body.light-theme .attach-dropdown-back-btn:active { background: rgba(0,0,0,0.04); }
}

/* Crossfade-анимация для смены содержимого dropdown */
@keyframes dropdownContentSwap {
    from {
        opacity: 0;
        transform: translateX(6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (max-width: 400px) {
    .user-kb-indicator-btn .user-kb-indicator-name {
        max-width: 55px;
    }
}

/* 📚 Bottom Sheet для мобильного выбора KB */
.user-kb-sheet-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: flex-end;
    justify-content: flex-end;
}
.user-kb-sheet-overlay.show {
    display: flex;
    animation: kbSheetFadeIn 0.2s ease-out;
}
@keyframes kbSheetFadeIn {
    from { background: rgba(0,0,0,0); }
    to { background: rgba(0,0,0,0.5); }
}

.user-kb-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1e1e1e;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    animation: kbSheetSlideUp 0.3s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes kbSheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.user-kb-sheet.closing {
    animation: kbSheetSlideDown 0.25s ease-in forwards;
}
@keyframes kbSheetSlideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

.user-kb-sheet-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
}

.user-kb-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 12px;
    flex-shrink: 0;
}
.user-kb-sheet-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
}
.user-kb-sheet-close {
    background: rgba(255,255,255,0.06);
    border: none;
    color: #999;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}
.user-kb-sheet-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.user-kb-sheet-list {
    overflow-y: auto;
    padding: 0 12px 16px;
    flex: 1;
}

.user-kb-sheet-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 12px;
    border: none;
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}
.user-kb-sheet-item:hover,
.user-kb-sheet-item:active {
    background: rgba(255,255,255,0.05);
}

.user-kb-sheet-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-kb-sheet-item-icon i {
    font-size: 18px;
    color: #b0b0b0;
}

.user-kb-sheet-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-kb-sheet-item-name {
    font-size: 15px;
    font-weight: 500;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-kb-sheet-item-meta {
    font-size: 12px;
    color: #777;
}

.user-kb-sheet-item-check {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.user-kb-sheet-item-check i {
    font-size: 20px;
    color: #fff;
}
.user-kb-sheet-item.active .user-kb-sheet-item-check {
    opacity: 1;
}
.user-kb-sheet-item.active {
    background: rgba(255,255,255,0.06);
}
.user-kb-sheet-item.active .user-kb-sheet-item-name {
    color: #fff;
}
.user-kb-sheet-item.active .user-kb-sheet-item-icon {
    background: rgba(255,255,255,0.08);
}

/* 📚 Light theme bottom sheet */
body.light-theme .user-kb-sheet {
    background: #fff !important;
    border-top-color: #e5e5e5 !important;
}
body.light-theme .user-kb-sheet-handle {
    background: rgba(0,0,0,0.12) !important;
}
body.light-theme .user-kb-sheet-header h3 {
    color: #1a1a1a !important;
}
body.light-theme .user-kb-sheet-close {
    background: rgba(0,0,0,0.05) !important;
    color: #666 !important;
}
body.light-theme .user-kb-sheet-item:hover,
body.light-theme .user-kb-sheet-item:active {
    background: rgba(0,0,0,0.04) !important;
}
body.light-theme .user-kb-sheet-item-name {
    color: #1a1a1a !important;
}
body.light-theme .user-kb-sheet-item-meta {
    color: #999 !important;
}
body.light-theme .user-kb-sheet-item.active {
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .user-kb-sheet-item.active .user-kb-sheet-item-name {
    color: #1a1a1a !important;
    font-weight: 600;
}
body.light-theme .user-kb-sheet-item.active .user-kb-sheet-item-check i {
    color: #1a1a1a !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🔍 WEB SEARCH - EXA API INTEGRATION STYLES */
/* ═══════════════════════════════════════════════════════════════ */

/* Разделитель в выпадающем меню */
.attach-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 6px 4px;
}

/* Контейнер для toggle-item */
.attach-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    gap: 10px;
    font-size: 13px;
    color: #e0e0e0;
    white-space: nowrap;
}

.attach-dropdown-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attach-dropdown-toggle i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #b4b4b4;
}

.attach-dropdown-toggle span {
    font-weight: 500;
}

/* 🔥 Минималистичный Toggle Switch */
.web-search-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.web-search-toggle.active {
    background: #ececec;
}

.web-search-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.web-search-toggle.active::after {
    transform: translateX(16px);
}

/* 🧠 Toggle для режима размышлений */
.think-mode-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.think-mode-toggle.active {
    background: #f59e0b;
}

.think-mode-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.think-mode-toggle.active::after {
    transform: translateX(16px);
}

/* 🔵 Индикатор на кнопке + когда активирован */
.file-upload-btn {
    position: relative;
}

.attach-active-indicator {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    border: 2px solid white;
    animation: pulseIndicator 2s infinite;
    display: none;
}

.attach-active-indicator.visible {
    display: block;
}

@keyframes pulseIndicator {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 📦 БЛОК РЕЗУЛЬТАТОВ ПОИСКА - СВЕТЛЫЙ МИНИМАЛИСТИЧНЫЙ СТИЛЬ */
/* ═══════════════════════════════════════════════════════════════ */

.web-search-sources-container {
    margin-top: 16px;
}

.web-search-sources-container.fade-in {
    animation: fadeInUp 0.4s ease-out;
}

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

.web-search-results-block {
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 8px 0 8px;
    position: relative;
    box-shadow: none;
    isolation: isolate;
    overflow: visible;
}

/* Предотвращаем конфликты стилей с header */
.web-search-results-block * {
    box-sizing: border-box;
}

.web-search-results-block a {
    color: inherit;
}

.web-search-results-block a:hover {
    text-decoration: none;
}

/* Заголовок блока */
.web-search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.web-search-icon {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b4b4b4;
    font-size: 13px;
    flex-shrink: 0;
}

.web-search-title {
    flex: 1;
    min-width: 0;
}

.web-search-title-text {
    font-size: 14px;
    font-weight: 600;
    color: #ececec;
}

.web-search-count {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #b4b4b4;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    flex-shrink: 0;
}

/* 🎴 КАРУСЕЛЬ ИСТОЧНИКОВ */
.web-search-carousel {
    position: relative;
    margin: 0;
    overflow: visible;
}

.web-search-sources {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 4px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.web-search-sources::-webkit-scrollbar {
    display: none;
}

/* Кнопки навигации слайдера - ТЁМНЫЙ ДИЗАЙН */
.web-search-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.web-search-nav:hover {
    background: #2a2a2a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transform: translateY(-50%);
}

.web-search-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.web-search-nav-prev {
    left: -18px;
}

.web-search-nav-next {
    right: -18px;
}

.web-search-nav i {
    font-size: 14px;
}

.web-search-nav.hidden {
    display: none;
}

/* Карточка источника - LiquidGlass стиль */
.web-search-source {
    flex: 0 0 auto;
    width: 240px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    scroll-snap-align: start;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cardFadeIn 0.3s ease-out backwards;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.web-search-source:nth-child(1) { animation-delay: 0.05s; }
.web-search-source:nth-child(2) { animation-delay: 0.1s; }
.web-search-source:nth-child(3) { animation-delay: 0.15s; }
.web-search-source:nth-child(4) { animation-delay: 0.2s; }
.web-search-source:nth-child(5) { animation-delay: 0.25s; }
.web-search-source:nth-child(6) { animation-delay: 0.3s; }

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

.web-search-source:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Превью изображение */
.web-search-source-preview {
    width: 100%;
    height: 140px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.web-search-source-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.web-search-source-preview-placeholder {
    font-size: 28px;
    font-weight: 600;
}

/* Контент карточки */
.web-search-source-body {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: inherit;
}

.web-search-source-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.web-search-source-favicon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.web-search-source-domain {
    font-size: 12px;
    color: #9a9a9a;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.web-search-source-date {
    font-size: 11px;
    color: #777;
    white-space: nowrap;
    margin-left: auto;
}

.web-search-source-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🔄 СКЕЛЕТОН ЗАГРУЗКИ - СВЕТЛЫЙ */
/* ═══════════════════════════════════════════════════════════════ */

.web-search-skeleton {
    animation: fadeInUp 0.3s ease-out;
}

.web-search-skeleton .web-search-sources {
    display: flex;
    gap: 12px;
}

.web-search-skeleton-card {
    flex: 0 0 auto;
    width: 180px;
    background: #3a3a3a;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    animation: skeletonCardSlide 0.4s ease-out backwards;
}

/* Stagger эффект для скелетонных карточек */
.web-search-skeleton-card:nth-child(1) { animation-delay: 0s; }
.web-search-skeleton-card:nth-child(2) { animation-delay: 0.1s; }
.web-search-skeleton-card:nth-child(3) { animation-delay: 0.2s; }
.web-search-skeleton-card:nth-child(4) { animation-delay: 0.3s; }

@keyframes skeletonCardSlide {
    from {
        opacity: 0;
        transform: translateX(15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.skeleton-preview {
    width: 100%;
    height: 100px;
}

.skeleton-body {
    padding: 10px 12px 12px;
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

.skeleton-favicon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.skeleton-domain {
    height: 11px;
    width: 70px;
}

.skeleton-title {
    height: 12px;
    width: 100%;
    margin-bottom: 6px;
}

.skeleton-title-2 {
    height: 12px;
    width: 70%;
}

/* Индикатор загрузки */
.web-search-loading-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.web-search-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #b4b4b4;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.web-search-loading-text {
    font-size: 13px;
    color: #a0a0a0;
}

/* 📱 Мобильные адаптации */
@media (max-width: 768px) {
    .web-search-results-block {
        padding: 8px 12px;
        border-radius: 12px;
    }
    
    .web-search-source {
        width: 200px;
    }
    
    .web-search-source-preview {
        height: 110px;
    }
    
    .web-search-nav {
        width: 32px;
        height: 32px;
    }
    
    .web-search-nav-prev {
        left: -6px;
    }
    
    .web-search-nav-next {
        right: -6px;
    }
    
    .web-search-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    .web-search-sources-container {
        margin: 0 -12px;
        padding: 0 12px;
    }
}

@media (max-width: 480px) {
    .web-search-source {
        width: 180px;
    }
    
    .web-search-source-preview {
        height: 95px;
    }
    
    .web-search-source-body {
        padding: 8px 10px 10px;
    }
    
    .web-search-source-title {
        font-size: 12px;
    }
    
    .web-search-nav {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🎯 FADE-IN АНИМАЦИЯ ДЛЯ КАРТОЧЕК */
/* ═══════════════════════════════════════════════════════════════ */

.web-search-sources-container {
    transition: opacity 0.4s ease-out;
    margin-top: 16px;
}

/* Источники отображаются ПЕРЕД ответом */
.assistant-response {
    display: flex;
    flex-direction: column;
}

.assistant-response .web-search-sources-container {
    order: -1;
    margin-top: 0;
    margin-bottom: 16px;
}

.assistant-response .prose {
    order: 0;
}

.assistant-response .message-actions {
    order: 1;
}

.assistant-response .reasoning-accordion {
    order: -2;
}

.web-search-sources-container.fade-in {
    animation: fadeInUp 0.5s ease-out forwards;
}

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

/* Анимация появления карточек с задержкой (stagger effect) */
.web-search-source {
    animation: cardSlideIn 0.4s ease-out backwards;
}

.web-search-source:nth-child(1) { animation-delay: 0.05s; }
.web-search-source:nth-child(2) { animation-delay: 0.1s; }
.web-search-source:nth-child(3) { animation-delay: 0.15s; }
.web-search-source:nth-child(4) { animation-delay: 0.2s; }
.web-search-source:nth-child(5) { animation-delay: 0.25s; }
.web-search-source:nth-child(6) { animation-delay: 0.3s; }
.web-search-source:nth-child(7) { animation-delay: 0.35s; }
.web-search-source:nth-child(8) { animation-delay: 0.4s; }

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🏷️ БЕЙДЖИ ИСТОЧНИКОВ В ТЕКСТЕ */
/* ═══════════════════════════════════════════════════════════════ */

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #e0e0e0;
    text-decoration: none;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin: 0 2px;
    white-space: nowrap;
    max-width: 150px;
}

.source-badge:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.22);
    color: #ffffff;
    text-decoration: none;
}

.source-badge i {
    font-size: 9px;
    opacity: 0.7;
}

.source-badge .source-domain {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Мобильная адаптация бейджей */
@media (max-width: 480px) {
    .source-badge {
        font-size: 10px;
        padding: 1px 6px;
        max-width: 120px;
    }
    
    .source-badge .source-domain {
        max-width: 90px;
    }
}

/* 🎬 Превью видео */
.video-preview-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    transition: background 0.2s;
}
.video-preview-container:hover {
    background: rgba(255,255,255,0.09);
}

.video-preview-thumbnail {
    width: 72px;
    height: 54px;
    border-radius: 8px;
    object-fit: cover;
    background: #000;
    flex-shrink: 0;
    position: relative;
}

.video-preview-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    pointer-events: none;
}

.video-preview-info {
    flex: 1;
    min-width: 0;
}

.video-preview-name {
    font-size: 13px;
    font-weight: 500;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-preview-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}
.video-preview-badge.size-ok { background: rgba(16,185,129,0.15); color: #34d399; }
.video-preview-badge.size-warn { background: rgba(251,191,36,0.15); color: #fbbf24; }
.video-preview-badge.size-large { background: rgba(239,68,68,0.15); color: #f87171; }

.video-preview-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #9ca3af;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    font-size: 14px;
}

.video-preview-remove:hover {
    background: rgba(239,68,68,0.2);
    color: #f87171;
}

/* 🎬 Video warning banner */
.video-warning-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}
.video-warning-banner.warn {
    background: rgba(251,191,36,0.1);
    border: 1px solid rgba(251,191,36,0.2);
    color: #fbbf24;
}
.video-warning-banner.info {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    color: #60a5fa;
}

/* 🎬 Прогресс-бар обработки видео */
.video-progress-container {
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px 18px;
    margin: 12px 0;
    color: #e5e7eb;
}

.video-progress-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.video-progress-icon {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.06);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #b4b4b4;
    animation: video-pulse 2s ease-in-out infinite;
}

@keyframes video-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.video-progress-title {
    flex: 1;
    min-width: 0;
}

.video-progress-title-text {
    font-size: 13px;
    font-weight: 600;
    color: #ececec;
}

.video-progress-status {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-progress-percent {
    font-size: 15px;
    font-weight: 700;
    color: #ececec;
    font-variant-numeric: tabular-nums;
}

.video-progress-bar-wrapper {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.video-progress-bar-fill {
    height: 100%;
    background: #b4b4b4;
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0%;
}

.video-progress-stages {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,0.25);
}

.video-progress-stage {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s;
}

.video-progress-stage.active {
    color: #b4b4b4;
    font-weight: 600;
}

.video-progress-stage.completed {
    color: #ececec;
}

.video-progress-stage i {
    font-size: 10px;
}

/* 🎬 Ошибка видео */
.video-error-container {
    background: rgba(127,29,29,0.15);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 12px;
    padding: 14px;
    margin: 12px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.video-error-icon {
    width: 32px;
    height: 32px;
    background: rgba(239,68,68,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    font-size: 16px;
    flex-shrink: 0;
}

.video-error-content {
    flex: 1;
}

.video-error-title {
    font-size: 13px;
    font-weight: 600;
    color: #fca5a5;
}

.video-error-message {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

/* Мобильные адаптации */
@media (max-width: 768px) {
    .attach-dropdown {
        min-width: 170px;
    }
    
    .attach-dropdown-item {
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .video-preview-container {
        padding: 10px;
    }
    
    .video-preview-thumbnail {
        width: 56px;
        height: 42px;
    }
    
    .video-progress-container {
        padding: 12px;
    }
    
    .video-progress-stages {
        font-size: 9px;
        gap: 2px;
    }
    
    .video-warning-banner {
        font-size: 11px;
    }
}

/* 🔥 НОВОЕ: Стили для кнопки остановки стрима */
#sendButton.stop-mode {
    background: #ef4444 !important;
    animation: pulse-stop 1.5s infinite;
}

#sendButton.stop-mode:hover {
    background: #dc2626 !important;
}

#sendButton.stopping {
    background: #9ca3af !important;
    cursor: wait;
}

@keyframes pulse-stop {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.stop-loader {
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* 🔥 НОВОЕ: Стили для редактирования сообщений пользователя */
.user-message-container {
    position: relative;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 28px;
}

/* Контейнер для кнопок под баблом пользователя */
.user-message-actions {
    display: flex;
    position: absolute;
    bottom: -32px;
    right: 0;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    padding-top: 8px; /* Увеличиваем область наведения сверху */
}

/* Показываем кнопки при наведении на контейнер сообщения */
.user-message-container:hover .user-message-actions {
    opacity: 1;
    visibility: visible;
}

/* Кнопки остаются видимыми когда мышь на них */
.user-message-actions:hover {
    opacity: 1;
    visibility: visible;
}

/* Базовые стили для кнопок действий пользователя */
.user-action-btn {
    background: transparent;
    border: none;
    color: #767676;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    font-size: 13px;
}

.user-action-btn:hover {
    color: #ececec;
    background: rgba(255,255,255,0.06);
}

/* Кнопка копирования - видна всегда при наведении */
.user-copy-btn {
    display: block;
}

/* Кнопка редактирования - справа под баблом */
.user-edit-btn {
    display: none;
}

/* Показываем кнопку редактирования только для последнего сообщения пользователя */
.user-message-container.last-user-message .user-edit-btn {
    display: block;
}

/* Режим редактирования */
.user-message-container.editing .message-bubble {
    width: 100%;
    max-width: 600px;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 0 !important;
}

.user-message-container.editing .user-edit-btn {
    display: none !important;
}

/* Скрываем все кнопки действий при редактировании */
.user-message-container.editing .user-message-actions {
    display: none !important;
}

.message-edit-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 200px;
    padding: 12px 16px;
    border: none;
    border-radius: 22px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    font-family: inherit;
    background: transparent;
}

.message-edit-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #e5e7eb;
}

.edit-cancel-btn,
.edit-save-btn {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.edit-cancel-btn {
    background: #f3f4f6;
    color: #374151;
}

.edit-cancel-btn:hover {
    background: #e5e7eb;
}

.edit-save-btn {
    background: #000;
    color: #fff;
}

.edit-save-btn:hover {
    background: #1f2937;
}

.edit-save-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Анимация для редактирования - применяется к контейнеру */
.user-message-container.editing {
    animation: edit-fade 0.2s ease;
}

@keyframes edit-fade {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* 🔥 НОВОЕ: Мобильные стили для редактирования */
@media (max-width: 768px) {
    .user-message-actions {
        opacity: 0;
        visibility: hidden;
    }
    
    .user-message-container:active .user-message-actions {
        opacity: 1;
        visibility: visible;
    }
    
    .message-edit-textarea {
        font-size: 16px; /* Предотвращаем зум на iOS */
        padding: 10px 14px;
    }
    
    .message-edit-buttons {
        padding: 6px 10px;
    }
    
    .edit-cancel-btn,
    .edit-save-btn {
        padding: 8px 14px;
        font-size: 14px;
    }
    
    #sendButton.stop-mode {
        animation: none; /* Отключаем анимацию на мобильных для производительности */
    }
    
    .user-message-container.editing .message-bubble {
        max-width: 100%;
    }
}

/* 🔥 НОВОЕ: Показываем кнопки действий на touch устройствах */
@media (hover: none) and (pointer: coarse) {
    .user-message-container .user-message-actions {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================
   🧠 REASONING ACCORDION - Минималистичный стиль (светлая тема)
   ============================================ */

.reasoning-accordion {
    margin-bottom: 12px;
    /* 2026-04-23: убран фон/бордер — плоский вид с timeline-фазами */
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.reasoning-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: color 0.15s ease;
    gap: 12px;
}

.reasoning-accordion-header:hover {
    background: transparent;
}

/* При hover — только лёгкая подсветка текста и иконки, без фона */
.reasoning-accordion-header:hover .reasoning-accordion-title,
.reasoning-accordion-header:hover .reasoning-accordion-title i,
.reasoning-accordion-header:hover .reasoning-accordion-toggle i,
.reasoning-accordion-header:hover .reasoning-running-phrase {
    color: #e8e8e8;
}

.reasoning-accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #b4b4b4;
    line-height: 1;
    transition: color 0.15s ease;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Иконка: у Bootstrap Icons внутренний глиф смещён от центра bounding box — компенсируем через translateY */
.reasoning-accordion-title > i {
    font-size: 14px;
    line-height: 1;
    color: #b4b4b4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
    /* Коррекция под Bootstrap Icons (их глифы имеют собственный padding сверху) */
    transform: translateY(1px);
}

.reasoning-accordion-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 13px;
    line-height: 1;
}

.reasoning-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.reasoning-accordion-toggle i {
    font-size: 12px;
    color: #767676;
}

.reasoning-accordion.open .reasoning-accordion-toggle {
    transform: rotate(180deg);
}

.reasoning-accordion-content {
    display: none;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0 10px 0;
    /* 2026-04-23: убран фон и бордер */
    background: transparent;
    border-top: none;
    font-size: 13px;
    line-height: 1.6;
    color: #b4b4b4;
}

.reasoning-accordion.open .reasoning-accordion-content {
    display: block;
}

/* Форматирование внутри reasoning */
.reasoning-accordion-content pre {
    background: #171717;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
    margin: 8px 0;
}

.reasoning-accordion-content code {
    background: #f3f4f6;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}

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

.reasoning-accordion-content ul,
.reasoning-accordion-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.reasoning-accordion-content li {
    margin: 4px 0;
}

/* Скроллбар для reasoning content */
.reasoning-accordion-content::-webkit-scrollbar {
    width: 6px;
}

.reasoning-accordion-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.reasoning-accordion-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.reasoning-accordion-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Индикатор "думает" во время стриминга */
.reasoning-streaming-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 12px;
    padding: 4px 0;
}

.reasoning-streaming-indicator .dots {
    display: flex;
    gap: 3px;
}

.reasoning-streaming-indicator .dot {
    width: 4px;
    height: 4px;
    background: #9ca3af;
    border-radius: 50%;
    animation: reasoning-pulse 1.2s infinite ease-in-out;
}

.reasoning-streaming-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.reasoning-streaming-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes reasoning-pulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   🧠 REASONING PHASES — стиль "как в Claude":
   бегущая фраза в заголовке + timeline-фазы в развёрнутом виде
   Добавлено 2026-04-23 (Этап 3-D)
   ============================================ */

/* Заголовок аккордеона: не растягиваем — single line + ellipsis */
.reasoning-accordion-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.reasoning-accordion-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Бегущая фраза — плавная, без агрессивного мерцания */
.reasoning-running-phrase {
    display: inline-block;
    color: #b4b4b4;
    font-weight: 500;
    transition: opacity 0.25s ease;
    /* Лёгкий shimmer — только пока идёт стриминг (через JS-класс) */
}

/* Shimmer подключается классом .is-streaming (добавляется в JS) */
.reasoning-running-phrase.is-streaming {
    background: linear-gradient(90deg, #8a8a8a 0%, #e8e8e8 40%, #8a8a8a 80%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: reasoning-shimmer 3.2s linear infinite;
}

@keyframes reasoning-phrase-in {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes reasoning-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Когда аккордеон открыт — фраза перестаёт мерцать (показываем фазы ниже) */
.reasoning-accordion.open .reasoning-running-phrase,
.reasoning-accordion.open .reasoning-running-phrase.is-streaming {
    animation: none;
    background: none;
    -webkit-text-fill-color: #b4b4b4;
    color: #b4b4b4;
}

/* Контейнер фазы в развёрнутом виде */
.reasoning-phase {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    position: relative;
    animation: reasoning-phrase-in 0.3s ease-out;
}

.reasoning-phase + .reasoning-phase {
    border-top: 1px dashed rgba(255,255,255,0.06);
}

/* Вертикальная timeline-линия + точка слева */
.reasoning-phase-marker {
    position: relative;
    flex: 0 0 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.reasoning-phase-marker::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: -8px;
    left: 50%;
    width: 1px;
    background: rgba(255,255,255,0.1);
    transform: translateX(-50%);
}

.reasoning-phase:last-child .reasoning-phase-marker::before {
    display: none;
}

.reasoning-phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    z-index: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.reasoning-phase-active .reasoning-phase-dot {
    background: #10a37f;
    box-shadow: 0 0 0 0 rgba(16,163,127,0.45);
    animation: reasoning-dot-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.reasoning-phase-pulse {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10a37f;
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
    animation: reasoning-dot-pulse 1.6s ease-out infinite;
    pointer-events: none;
}

@keyframes reasoning-dot-ping {
    0%   { box-shadow: 0 0 0 0 rgba(16,163,127,0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(16,163,127,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,163,127,0); }
}

@keyframes reasoning-dot-pulse {
    0%   { transform: translateX(-50%) scale(1);   opacity: 0.6; }
    100% { transform: translateX(-50%) scale(2.4); opacity: 0;   }
}

/* Контент фазы */
.reasoning-phase-content {
    flex: 1 1 auto;
    min-width: 0;
}

.reasoning-phase-title {
    font-size: 13px;
    line-height: 1.4;
    color: #d4d4d4;
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.reasoning-phase-active .reasoning-phase-title {
    color: #e8e8e8;
}

.reasoning-phase-body {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.reasoning-phase-body:empty {
    display: none;
}

.reasoning-phase-body code {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-family: "SF Mono", Consolas, monospace;
}

.reasoning-phase-body strong {
    color: #d4d4d4;
}

/* Адаптив — на узких экранах подтягиваем отступы */
@media (max-width: 540px) {
    .reasoning-phase { gap: 8px; padding: 6px 0; }
    .reasoning-phase-marker { flex-basis: 10px; }
    .reasoning-phase-title { font-size: 12.5px; }
    .reasoning-phase-body { font-size: 11.5px; }
    .reasoning-accordion-title { font-size: 12px; }
}

/* Светлая тема — переопределяем цвета */
body.light-theme .reasoning-phase-dot {
    background: #9ca3af;
}
body.light-theme .reasoning-phase-active .reasoning-phase-dot {
    background: #059669;
}
body.light-theme .reasoning-phase-title {
    color: #374151;
}
body.light-theme .reasoning-phase-active .reasoning-phase-title {
    color: #111827;
}
body.light-theme .reasoning-phase-body {
    color: #6b7280;
}
body.light-theme .reasoning-phase-marker::before {
    background: rgba(0,0,0,0.1);
}
body.light-theme .reasoning-running-phrase {
    background: linear-gradient(90deg, #6b7280 0%, #111827 40%, #6b7280 80%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-theme .reasoning-phase-body code {
    background: rgba(0,0,0,0.05);
}
body.light-theme .reasoning-phase-body strong {
    color: #111827;
}

/* ============================================
   🔍 KB SEARCH ACCORDION — визуализация поиска по базе знаний
   ============================================ */

.kb-search-accordion {
    margin-bottom: 8px;
    overflow: hidden;
}

.kb-search-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}

.kb-search-accordion-header:hover .kb-search-accordion-toggle {
    opacity: 1;
}

.kb-search-accordion-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #b4b4b4;
    min-width: 0;
    overflow: hidden;
}

.kb-search-accordion-title i {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
}

/* 📚 Пользовательская KB — акцентный цвет иконки */
.user-kb-accordion .kb-search-accordion-title i {
    color: #b0b0b0;
}
.user-kb-accordion .kb-search-accordion-title {
    color: #d0d0d0;
}

/* 🔍 RAG TOOL CALLING — аккордеоны follow-up поисков (динамически создаются JS-ом). */
.kb-tool-calls-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kb-tool-call-accordion .kb-search-accordion-title i {
    color: #9ca3af;
}
.kb-tool-call-accordion .kb-search-accordion-title {
    color: #d0d0d0;
}
.kb-tool-call-accordion[data-scope="user"] .kb-search-accordion-title i {
    color: #b0b0b0;
}
body.light-theme .kb-tool-call-accordion .kb-search-accordion-title i {
    color: #6b7280;
}
body.light-theme .kb-tool-call-accordion .kb-search-accordion-title {
    color: #4b5563;
}

.kb-search-accordion-title .kb-search-title-text {
    white-space: nowrap;
}

.kb-search-accordion-title .kb-search-status {
    font-weight: 400;
    font-size: 12px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-search-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease, opacity 0.15s;
    opacity: 0.5;
}

.kb-search-accordion-toggle i {
    font-size: 11px;
    color: #767676;
}

.kb-search-accordion.open .kb-search-accordion-toggle {
    transform: rotate(180deg);
    opacity: 0.7;
}

.kb-search-accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #b4b4b4;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

/* Открытое состояние:
   - До 10 шагов помещается без скролла (~32px на шаг = 320px)
   - При большем количестве — фиксируется на 380px и появляется внутренний скролл
   - На мобильных — до 280px, чтобы не съедать весь экран */
.kb-search-accordion.open .kb-search-accordion-content {
    max-height: 380px;
    padding: 4px 0 4px 22px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Кастомный скроллбар - тонкий и в цвет фона */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.kb-search-accordion.open .kb-search-accordion-content::-webkit-scrollbar {
    width: 6px;
}

.kb-search-accordion.open .kb-search-accordion-content::-webkit-scrollbar-track {
    background: transparent;
}

.kb-search-accordion.open .kb-search-accordion-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.kb-search-accordion.open .kb-search-accordion-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Активный шаг (последний добавленный) — без фоновой плашки,
   только мягкая пульсация иконки для live-эффекта */
.kb-search-step.is-active .kb-search-step-icon {
    animation: kb-step-pulse 1.6s ease-in-out infinite;
}

@keyframes kb-step-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.kb-search-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.kb-search-step + .kb-search-step {
    border: none;
}

.kb-search-step-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #666;
}

.kb-search-step-icon.step-done {
    color: #4ade80;
}

.kb-search-step-icon.step-error {
    color: #f87171;
}

.kb-search-step-icon.step-warning {
    color: #fbbf24;
}

.kb-search-step-text {
    flex: 1;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
}

/* Спиннер поиска */
.kb-search-spinner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 12px;
}

.kb-search-spinner .spinner-icon {
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255,255,255,0.1);
    border-top-color: #888;
    border-radius: 50%;
    animation: kb-spin 0.8s linear infinite;
}

/* 🕐 Live-таймер в заголовке аккордеона.
   font-variant-numeric: tabular-nums — все цифры одной ширины,
   чтобы при «1с» → «10с» → «100с» не дёргалось всё содержимое заголовка. */
.kb-search-live-timer {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    transition: color 0.5s ease;
    min-width: 28px;
    display: inline-block;
    text-align: right;
}

@keyframes kb-spin {
    to { transform: rotate(360deg); }
}

/* Адаптивность */
@media (max-width: 768px) {
    .kb-search-accordion-title {
        font-size: 12px;
    }
    .kb-search-step-text {
        font-size: 12px;
    }
    .kb-search-accordion.open .kb-search-accordion-content {
        padding: 4px 0 6px 20px;
        max-height: 320px;
    }
}

@media (max-width: 480px) {
    .kb-search-accordion-title {
        font-size: 11.5px;
        gap: 6px;
    }
    .kb-search-step-text {
        font-size: 11px;
        word-break: break-word;
    }
    .kb-search-accordion.open .kb-search-accordion-content {
        padding: 4px 0 4px 18px;
        max-height: 260px;  /* На мобилках меньше — чтобы не съедать половину экрана */
    }
}

/* ============================================
   🔗 CRM INTEGRATION STYLES
   ============================================ */

/* CRM аккордеон — наследует стиль KB Search */
.crm-search-accordion .kb-search-accordion-title i {
    color: #60a5fa;
}
.crm-search-accordion .kb-search-accordion-title {
    color: #93c5fd;
}
.crm-search-accordion.bitrix24 .kb-search-accordion-title i {
    color: #38bdf8;
}
.crm-search-accordion.amocrm .kb-search-accordion-title i {
    color: #fbbf24;
}
.crm-search-accordion.yougile .kb-search-accordion-title i {
    color: #a29bfe;
}
.crm-search-accordion.yougile .kb-search-accordion-title {
    color: #c4b5fd;
}

/* ============================================
   🤖 AGENT ACTIONS ACCORDION — мультиагентная система
   ============================================ */

.agent-action-accordion .kb-search-accordion-title i {
    color: #a78bfa;
}
.agent-action-accordion .kb-search-accordion-title {
    color: #c4b5fd;
}
.agent-action-accordion.executing .kb-search-accordion-title i {
    color: #f59e0b;
}
.agent-action-accordion.completed .kb-search-accordion-title i {
    color: #4ade80;
}
.agent-action-accordion.error .kb-search-accordion-title i {
    color: #f87171;
}

/* Пульсирующий индикатор при выполнении */
.agent-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: agent-pulse-anim 1.2s ease-in-out infinite;
    margin-left: 6px;
    vertical-align: middle;
}
.agent-pulse.success {
    background: #4ade80;
    animation: none;
}
.agent-pulse.error {
    background: #f87171;
    animation: none;
}

@keyframes agent-pulse-anim {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Шаги агента — расширенные стили */
.agent-step-action {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.agent-step-duration {
    font-size: 10px;
    color: #666;
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
}

.agent-step-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Light theme */
body.light-theme .agent-action-accordion .kb-search-accordion-title {
    color: #6d28d9;
}
body.light-theme .agent-action-accordion .kb-search-accordion-title i {
    color: #7c3aed;
}
body.light-theme .agent-step-action {
    color: #6d28d9;
    background: rgba(109, 40, 217, 0.08);
}
body.light-theme .agent-pulse {
    background: #d97706;
}
body.light-theme .agent-pulse.success {
    background: #16a34a;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* 🎯 CLAUDE-STYLE AGENT CHAIN — минималистично, как reasoning-accordion   */
/* ═══════════════════════════════════════════════════════════════════════ */
.agent-chain {
    display: flex;
    flex-direction: column;
    margin: 4px 0;
}

/* Блоки — плоские, без обводок и фона */
.agent-chain-reasoning-block,
.agent-chain-actions-block {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Заголовок — такой же как reasoning-accordion-header */
.agent-chain-reasoning-header,
.agent-chain-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: color 0.15s ease;
    gap: 12px;
}
.agent-chain-reasoning-header:hover,
.agent-chain-actions-header:hover {
    background: transparent;
}
.agent-chain-reasoning-header:hover .agent-chain-reasoning-title,
.agent-chain-reasoning-header:hover .agent-chain-reasoning-title i,
.agent-chain-actions-header:hover .agent-chain-actions-title,
.agent-chain-actions-header:hover .agent-chain-actions-title i,
.agent-chain-reasoning-header:hover .agent-chain-chevron,
.agent-chain-actions-header:hover .agent-chain-chevron,
.agent-chain-reasoning-header:hover .agent-chain-reasoning-meta,
.agent-chain-actions-header:hover .agent-chain-actions-meta {
    color: #e8e8e8;
}

/* Title + icon */
.agent-chain-reasoning-title,
.agent-chain-actions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #b4b4b4;
    line-height: 1;
    transition: color 0.15s ease;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Основная иконка слева от заголовка (lightbulb / lightning) */
.agent-chain-reasoning-title-icon,
.agent-chain-actions-title-icon {
    font-size: 14px;
    line-height: 1;
    color: #b4b4b4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
    transform: translateY(1px);
}
/* Зелёный акцент для полностью успешной итерации */
.agent-chain-actions-block.all-success .agent-chain-actions-title-icon {
    color: #22c55e;
}
.agent-chain-actions-block.has-errors .agent-chain-actions-title-icon {
    color: #ef4444;
}

/* Meta (счётчик справа) */
.agent-chain-reasoning-meta,
.agent-chain-actions-meta {
    font-size: 12px;
    color: #767676;
    transition: color 0.15s ease;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Chevron справа (как у reasoning-accordion-toggle) */
.agent-chain-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
    font-size: 12px !important;
    color: #767676;
    flex-shrink: 0;
}
.agent-chain-reasoning-block.open .agent-chain-chevron,
.agent-chain-actions-block.open .agent-chain-chevron {
    transform: rotate(180deg);
}

/* Body (раскрытое содержимое) — timeline-tree, как в reasoning */
.agent-chain-reasoning-body,
.agent-chain-actions-body {
    display: none;
    padding: 4px 0 10px 0;
    background: transparent;
    border: none;
    font-size: 13px;
    line-height: 1.55;
    color: #b4b4b4;
    max-width: 820px;
}
.agent-chain-reasoning-block.open .agent-chain-reasoning-body,
.agent-chain-actions-block.open .agent-chain-actions-body {
    display: block;
}

.agent-chain-reasoning-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 320px;
    overflow-y: auto;
    padding-left: 22px;
}

/* ── TIMELINE TREE для действий (как reasoning-phase, только для tool_calls) ── */
.agent-chain-actions-body {
    padding: 6px 0 10px 0;
}
.agent-chain-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0 5px 22px;
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 20px;
}
/* Вертикальная линия slева — идёт через ВСЕ step, кроме последнего */
.agent-chain-step::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #3a3a3a;
}
.agent-chain-step.step-last::before {
    bottom: 50%; /* линия обрезается у последнего, чтобы не «повисала» */
}
/* Кружок-маркер на таймлайне */
.agent-chain-step-icon {
    position: absolute;
    left: 2px;
    top: 6px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: #1a1a1a; /* перекрывает вертикальную линию, чтобы точка «парила» */
    border-radius: 50%;
    flex-shrink: 0;
}
.agent-chain-step.step-success .agent-chain-step-icon {
    color: #22c55e;
}
.agent-chain-step.step-error .agent-chain-step-icon {
    color: #ef4444;
}
.agent-chain-step.step-unknown .agent-chain-step-icon {
    color: #767676;
    animation: stepPulse 1.4s ease-in-out infinite;
}
@keyframes stepPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}
.agent-chain-step-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    overflow: hidden;
}
.agent-chain-step-name {
    font-family: "SF Mono", ui-monospace, "Cascadia Code", monospace;
    font-size: 12px;
    color: #c4c4c4;
    flex-shrink: 0;
}
.agent-chain-step-args {
    font-size: 12.5px;
    color: #8a8a8a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.agent-chain-step-duration {
    flex-shrink: 0;
    font-size: 11.5px;
    color: #5a5a5a;
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

/* Промежуточный текст ассистента между итерациями */
.agent-chain-preamble {
    padding: 8px 0;
    font-size: 14px;
    color: #e8e8e8;
    line-height: 1.55;
    max-width: 820px;
}

/* LIVE mode — едва заметное пульсирование иконки молнии */
.agent-chain-actions-block.live .agent-chain-actions-title-icon {
    color: #f59e0b;
    animation: agentChainPulse 1.4s ease-in-out infinite;
}
@keyframes agentChainPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* 🎬 LIVE body — ограниченная высота ~3 шага, плавный скролл к активному */
.agent-chain-actions-block.live .agent-chain-actions-body {
    max-height: 110px; /* примерно 3 шага × 30px + padding */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: max-height 0.35s ease;
    /* Маска: сверху и снизу контент плавно растворяется — ощущение «ленты» */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
/* Убираем собственный скроллбар у лайв-блока — он выглядит шумно */
.agent-chain-actions-block.live .agent-chain-actions-body::-webkit-scrollbar {
    width: 0;
    display: none;
}
.agent-chain-actions-block.live .agent-chain-actions-body {
    scrollbar-width: none;
}
/* После завершения итерации (снимаем .live) — блок сам свернётся через .open класс */
.agent-chain-actions-block:not(.live) .agent-chain-actions-body {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Плавное появление каждого нового step (не только в live но и в БД) */
.agent-chain-step {
    animation: agentStepAppear 0.35s ease-out;
}
@keyframes agentStepAppear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Light theme */
body.light-theme .agent-chain-reasoning-title,
body.light-theme .agent-chain-actions-title { color: #4a4a4a; }
body.light-theme .agent-chain-reasoning-title-icon,
body.light-theme .agent-chain-actions-title-icon { color: #6a6a6a; }
body.light-theme .agent-chain-actions-block.all-success .agent-chain-actions-title-icon { color: #16a34a; }
body.light-theme .agent-chain-actions-block.has-errors .agent-chain-actions-title-icon { color: #dc2626; }
body.light-theme .agent-chain-reasoning-header:hover .agent-chain-reasoning-title,
body.light-theme .agent-chain-reasoning-header:hover .agent-chain-reasoning-title i,
body.light-theme .agent-chain-actions-header:hover .agent-chain-actions-title,
body.light-theme .agent-chain-actions-header:hover .agent-chain-actions-title i,
body.light-theme .agent-chain-reasoning-header:hover .agent-chain-chevron,
body.light-theme .agent-chain-actions-header:hover .agent-chain-chevron,
body.light-theme .agent-chain-reasoning-header:hover .agent-chain-reasoning-meta,
body.light-theme .agent-chain-actions-header:hover .agent-chain-actions-meta {
    color: #1a1a1a;
}
body.light-theme .agent-chain-chevron,
body.light-theme .agent-chain-reasoning-meta,
body.light-theme .agent-chain-actions-meta { color: #8a8a8a; }
body.light-theme .agent-chain-reasoning-body,
body.light-theme .agent-chain-actions-body { color: #4a4a4a; }
body.light-theme .agent-chain-step::before { background: #d4d4d4; }
body.light-theme .agent-chain-step-icon { background: #ffffff; }
body.light-theme .agent-chain-step.step-success .agent-chain-step-icon { color: #16a34a; }
body.light-theme .agent-chain-step.step-error .agent-chain-step-icon { color: #dc2626; }
body.light-theme .agent-chain-step.step-unknown .agent-chain-step-icon { color: #a8a8a8; }
body.light-theme .agent-chain-step-name { color: #2a2a2a; }
body.light-theme .agent-chain-step-args { color: #6a6a6a; }
body.light-theme .agent-chain-step-duration { color: #a8a8a8; }
body.light-theme .agent-chain-preamble { color: #1a1a1a; }

/* CRM Toggle в dropdown */
.crm-integration-submenu {
    position: relative;
}
.crm-integration-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 2px 0;
}
.crm-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    gap: 8px;
    min-height: 40px;
}
.crm-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.crm-toggle-icon {
    width: 26px;
    height: 26px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
    background: transparent !important;
}
.crm-toggle-icon.bitrix,
.crm-toggle-icon.amo,
.crm-toggle-icon.yougile,
.crm-toggle-icon.yandex-metrika,
.crm-toggle-icon.telegram-profile {
    background: transparent !important;
}
.crm-toggle-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}
/* Amo SVG — keep neutral in dark, slightly darker in light */
.crm-toggle-icon.amo img {
    filter: brightness(0.92);
}
body.light-theme .crm-toggle-icon.amo img {
    filter: brightness(0) invert(0.15);
}
/* Bitrix — original colors */
.crm-toggle-icon.bitrix img {
    filter: none;
}
body.light-theme .crm-toggle-icon.bitrix img {
    filter: none;
}
.crm-toggle-icon svg, .crm-toggle-icon i {
    font-size: 14px;
    color: #cfcfcf;
}
.crm-toggle-name {
    font-size: 0.82rem;
    color: #e0e0e0;
    white-space: nowrap;
}
.crm-toggle-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.crm-settings-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 2px;
    font-size: 14px;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}
.crm-settings-btn:hover {
    color: #aaa;
}
.crm-mini-toggle {
    width: 34px;
    height: 20px;
    border-radius: 11px;
    background: rgba(255,255,255,0.14);
    position: relative;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    border: none;
}
.crm-mini-toggle.active {
    background: #ececec;
}
.crm-mini-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.crm-mini-toggle.active::after {
    transform: translateX(14px);
    background: #1a1a1a;
}

/* Header с информацией о лимите в дропдауне интеграций */
.crm-list-usage-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    font-size: 0.74rem;
    color: #a8a8a8;
    line-height: 1.45;
    border-radius: 6px 6px 0 0;
}
.crm-list-usage-info i {
    color: #888;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.crm-list-usage-info strong {
    color: #e8e8e8;
    font-weight: 600;
}
body.light-theme .crm-list-usage-info {
    background: rgba(0,0,0,0.025);
    color: #5a5a5a;
    border-bottom-color: rgba(0,0,0,0.06);
}
body.light-theme .crm-list-usage-info i {
    color: #777;
}
body.light-theme .crm-list-usage-info strong {
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🔒 ЗАМОК ДЛЯ НЕДОСТУПНЫХ ИНТЕГРАЦИЙ (стиль Perplexity)          */
/* ═══════════════════════════════════════════════════════════════ */

/* Состояние локнутой строки — приглушаем */
.crm-toggle-row.crm-locked {
    cursor: pointer;
    transition: background 0.15s ease;
}
.crm-toggle-row.crm-locked:hover {
    background: rgba(255,255,255,0.04);
}
.crm-toggle-row.crm-locked .crm-toggle-icon {
    opacity: 0.55;
}
.crm-toggle-row.crm-locked .crm-toggle-name {
    opacity: 0.65;
}

/* Замок справа — заменяет toggle */
.crm-toggle-lock {
    width: 28px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    transition: color 0.15s ease;
}
.crm-toggle-lock:hover {
    color: rgba(255,255,255,0.85);
}
.crm-toggle-lock svg {
    width: 14px;
    height: 14px;
}
body.light-theme .crm-toggle-lock {
    color: rgba(0,0,0,0.45);
}
body.light-theme .crm-toggle-lock:hover {
    color: rgba(0,0,0,0.75);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 💎 PERPLEXITY-СТИЛЬ TOOLTIP — Floating UI singleton в <body>     */
/* JS управляет show/hide и позиционированием через position:fixed.  */
/* ═══════════════════════════════════════════════════════════════ */

.pplx-tooltip {
    position: fixed;
    /* top/left ставятся JS через style attribute */
    z-index: 10500;
    width: 280px;
    max-width: calc(100vw - 24px);
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
    color: #ececec;
    font-size: 0.84rem;
    line-height: 1.45;
    font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;

    /* Скрыт по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.pplx-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Стрелка — слева к row (для arrow-left) */
.pplx-tooltip::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.08);
    transform: rotate(45deg);
    top: 18px;
}
.pplx-tooltip.arrow-left::before {
    left: -6px;
    border-right: none;
    border-top: none;
}
.pplx-tooltip.arrow-right::before {
    right: -6px;
    left: auto;
    border-left: none;
    border-bottom: none;
}

/* Содержимое */
.pplx-tooltip-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(120, 188, 224, 0.15);
    color: #78bce0;
    border: 1px solid rgba(120, 188, 224, 0.3);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
.pplx-tooltip-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.92rem;
    line-height: 1.3;
}
.pplx-tooltip-text {
    color: #b4b4b4;
    margin: 0;
}
.pplx-tooltip-text .pplx-link {
    color: #78bce0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}
.pplx-tooltip-text .pplx-link:hover {
    color: #95d4f3;
}

.pplx-tooltip-mobile-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: none;
    color: #b4b4b4;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* Light-theme */
body.light-theme .pplx-tooltip {
    background: #ffffff;
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 28px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
}
body.light-theme .pplx-tooltip::before {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
body.light-theme .pplx-tooltip-title {
    color: #1a1a1a;
}
body.light-theme .pplx-tooltip-text {
    color: #555;
}
body.light-theme .pplx-tooltip-badge {
    background: rgba(33, 92, 122, 0.08);
    color: #1f6f93;
    border-color: rgba(33, 92, 122, 0.2);
}
body.light-theme .pplx-tooltip-text .pplx-link {
    color: #1f6f93;
}
body.light-theme .pplx-tooltip-text .pplx-link:hover {
    color: #0f5b7a;
}

/* Mobile: tooltip превращается в bottom sheet */
@media (max-width: 768px) {
    .pplx-tooltip {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        padding: 18px 20px 20px !important;
        border-radius: 16px !important;
        font-size: 0.92rem !important;
        transform: translateY(120%) !important;
        transition: transform 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease, visibility 0.18s ease !important;
    }
    .pplx-tooltip.show {
        transform: translateY(0) !important;
    }
    .pplx-tooltip::before {
        display: none !important;
    }
    .pplx-tooltip-title {
        font-size: 1.02rem;
        padding-right: 32px;
    }
    .pplx-tooltip-mobile-close {
        display: inline-flex !important;
    }
}

/* 🔗 Telegram Profile styles */
.crm-toggle-icon.telegram-profile {
    background: transparent;
}
.crm-toggle-icon.telegram-profile svg {
    width: 22px;
    height: 22px;
}
.crm-btn-icon.telegram-profile svg {
    width: 16px;
    height: 16px;
}
.tg-profile-chats-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #2AABEE;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════
   Telegram Profile Modal — Dark theme (default)
   ═══════════════════════════════════════════════ */
.tgp-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tgp-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.tgp-modal {
    background: rgba(28,28,32,0.97);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    width: 94%;
    max-width: 580px;
    height: min(620px, 85vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
    position: relative;
}
.tgp-modal-overlay.active .tgp-modal {
    transform: scale(1) translateY(0);
}
/* Drag handle for mobile bottom sheet */
.tgp-drag-handle {
    display: none;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    margin: 10px auto 0;
    flex-shrink: 0;
}
.tgp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.tgp-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e5e5e5;
}
.tgp-modal-title svg {
    width: 24px;
    height: 24px;
}
.tgp-modal-close {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 6px;
    font-size: 16px;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    border-radius: 8px;
}
.tgp-modal-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}
.tgp-modal-body {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.tgp-modal-body .crm-instruction {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.78rem;
    color: #999;
    line-height: 1.6;
}
.tgp-modal-body .crm-instruction p { margin: 0 0 6px; }
.tgp-modal-body .crm-instruction ol { margin: 6px 0; padding-left: 18px; }
.tgp-modal-body .crm-instruction li { margin: 4px 0; }
.tgp-modal-body .crm-instruction strong { color: #ccc; }
.tgp-modal-body .crm-instruction a { color: #2AABEE; text-decoration: none; }
.tgp-modal-body .crm-instruction a:hover { text-decoration: underline; }
.tgp-modal-body .crm-instruction code {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.76rem;
    color: #bbb;
}
.tgp-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.tgp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
    flex-shrink: 0;
}
.tgp-tab {
    flex: 1;
    padding: 11px 8px;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    font-weight: 500;
}
.tgp-tab:hover { color: #aaa; }
.tgp-tab.active {
    color: #2AABEE;
    border-bottom-color: #2AABEE;
}
.tgp-tab-content { display: none; }
.tgp-tab-content.active { display: block; }
.tgp-chat-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}
.tgp-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    -webkit-user-select: none;
}
.tgp-chat-item:hover { background: rgba(255,255,255,0.04); }
.tgp-chat-item:active { background: rgba(255,255,255,0.07); }
.tgp-chat-item:last-child { border-bottom: none; }
.tgp-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.tgp-chat-avatar.av-private { background: linear-gradient(135deg, #2AABEE, #1a8dd6); }
.tgp-chat-avatar.av-group { background: linear-gradient(135deg, #34c759, #28a745); }
.tgp-chat-avatar.av-channel { background: linear-gradient(135deg, #ff9500, #e68900); }
.tgp-chat-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
    position: absolute;
    top: 0; left: 0;
}
.tgp-chat-avatar img.loaded { opacity: 1; }
.tgp-chat-avatar {
    position: relative;
    overflow: hidden;
}
.tgp-chat-info {
    flex: 1;
    min-width: 0;
}
.tgp-chat-name {
    font-size: 0.82rem;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tgp-chat-username {
    font-size: 0.7rem;
    color: #2AABEE;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    opacity: 0.8;
}
.tgp-chat-last-msg {
    font-size: 0.72rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.tgp-chat-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #2AABEE;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tgp-chat-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(.22,.61,.36,1);
}
.tgp-chat-check.checked {
    background: #2AABEE;
    border-color: #2AABEE;
    transform: scale(1.05);
}
.tgp-chat-check.checked::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.tgp-auto-reply-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tgp-auto-reply-row:last-child { border-bottom: none; }
.tgp-auto-reply-name {
    font-size: 0.82rem;
    color: #e0e0e0;
}
.tgp-limit-note {
    font-size: 0.72rem;
    color: #888;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.tgp-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-size: 0.82rem;
}
.tgp-verification-step {
    display: none;
}
.tgp-verification-step.active {
    display: block;
}
/* Loading spinner */
.tgp-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2.5px solid rgba(255,255,255,0.12);
    border-top-color: #2AABEE;
    border-radius: 50%;
    animation: tgpSpin 0.7s linear infinite;
}
@keyframes tgpSpin { to { transform: rotate(360deg); } }
.tgp-loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.tgp-loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}
/* Success overlay */
.tgp-success-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.tgp-success-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.tgp-success-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #34c759;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    animation: tgpSuccessPop 0.5s cubic-bezier(.22,.61,.36,1) forwards;
    box-shadow: 0 4px 24px rgba(52,199,89,0.4);
}
.tgp-success-circle svg {
    width: 32px; height: 32px;
    stroke: #fff;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: tgpCheckDraw 0.4s 0.3s ease forwards;
}
.tgp-success-text {
    margin-top: 14px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    animation: tgpFadeIn 0.3s 0.5s ease forwards;
}
@keyframes tgpSuccessPop {
    0% { transform: scale(0) rotate(-45deg); }
    70% { transform: scale(1.1) rotate(0); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes tgpCheckDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes tgpFadeIn {
    to { opacity: 1; }
}
/* Chat loading skeleton */
.tgp-skeleton-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tgp-skeleton-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    animation: tgpPulse 1.4s ease infinite;
}
.tgp-skeleton-lines {
    flex: 1;
}
.tgp-skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    animation: tgpPulse 1.4s ease infinite;
    margin-bottom: 6px;
}
.tgp-skeleton-line:last-child { margin-bottom: 0; width: 60%; }
@keyframes tgpPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ═══════════════════════════════════════════════
   Telegram Profile Modal — Light theme
   ═══════════════════════════════════════════════ */
body.light-theme .tgp-modal-overlay { background: rgba(0,0,0,0.25); backdrop-filter: blur(10px); }
body.light-theme .tgp-modal { 
    background: #ffffff; 
    border-color: rgba(0,0,0,0.08); 
    box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05); 
}
body.light-theme .tgp-drag-handle { background: rgba(0,0,0,0.2); }
body.light-theme .tgp-modal-header { border-bottom-color: rgba(0,0,0,0.06); }
body.light-theme .tgp-modal-title { color: #1a1a2e; }
body.light-theme .tgp-modal-close { color: #aaa; }
body.light-theme .tgp-modal-close:hover { color: #333; background: rgba(0,0,0,0.04); }
body.light-theme .tgp-modal-body .crm-instruction { 
    background: #f8f9fa; 
    border-color: #e8eaed; 
    color: #555; 
}
body.light-theme .tgp-modal-body .crm-instruction strong { color: #1a1a2e; }
body.light-theme .tgp-modal-body .crm-instruction a { color: #1a8dd6; }
body.light-theme .tgp-modal-body .crm-instruction code { background: #eef0f2; color: #444; }
body.light-theme .tgp-modal-footer { border-top-color: rgba(0,0,0,0.06); }
body.light-theme .tgp-tab { color: #999; }
body.light-theme .tgp-tab:hover { color: #555; }
body.light-theme .tgp-tab.active { color: #1a8dd6; border-bottom-color: #1a8dd6; }
body.light-theme .tgp-chat-list { border-color: #e8eaed; }
body.light-theme .tgp-chat-item { border-bottom-color: #f0f1f3; }
body.light-theme .tgp-chat-item:hover { background: #f8f9fa; }
body.light-theme .tgp-chat-item:active { background: #f0f1f3; }
body.light-theme .tgp-chat-name { color: #1a1a2e; }
body.light-theme .tgp-chat-username { color: #1a8dd6; }
body.light-theme .tgp-chat-last-msg { color: #999; }
body.light-theme .tgp-chat-avatar.av-private { background: linear-gradient(135deg, #2AABEE, #1a8dd6); }
body.light-theme .tgp-chat-avatar.av-group { background: linear-gradient(135deg, #34c759, #28a745); }
body.light-theme .tgp-chat-avatar.av-channel { background: linear-gradient(135deg, #ff9500, #e68900); }
body.light-theme .tgp-chat-check { border-color: #ccc; }
body.light-theme .tgp-chat-check.checked { background: #2AABEE; border-color: #2AABEE; }
body.light-theme .tgp-auto-reply-name { color: #1a1a2e; }
body.light-theme .tgp-auto-reply-row { border-bottom-color: #f0f1f3; }
body.light-theme .tgp-limit-note { background: #f8f9fa; color: #666; }
body.light-theme .tgp-empty-state { color: #999; }
body.light-theme { --tgp-title-color: #1a1a2e; --tgp-subtitle-color: #666; }
body.light-theme .crm-toggle-name { color: #333; }
body.light-theme .tgp-type-filter { background: #f5f6f7; color: #888; border-color: #e8eaed; }
body.light-theme .tgp-type-filter:hover { background: #eef0f2; color: #555; }
body.light-theme .tgp-type-filter.active { background: rgba(42,171,238,0.08); color: #1a8dd6; }
body.light-theme #tgpSearchInput { 
    background: #f5f6f7; 
    border-color: #e0e2e5; 
    color: #1a1a2e; 
}
body.light-theme #tgpSearchInput::placeholder { color: #aaa; }
body.light-theme .tgp-verification-step .crm-field-input {
    background: #f5f6f7;
    border-color: #e0e2e5;
    color: #1a1a2e;
}
body.light-theme .tgp-verification-step .crm-field-label { color: #444; }
body.light-theme .crm-btn-test { 
    background: #f0f1f3; 
    color: #555; 
    border-color: #ddd; 
}
body.light-theme .crm-btn-test:hover { background: #e8eaed; }
body.light-theme .crm-btn-primary { 
    background: linear-gradient(135deg, #2AABEE, #1a8dd6); 
    color: #fff; 
}
body.light-theme .crm-btn-danger { color: #e74c3c; border-color: rgba(231,76,60,0.2); }
body.light-theme .crm-test-result.success { background: rgba(46,204,113,0.08); color: #27ae60; border-color: rgba(46,204,113,0.15); }
body.light-theme .crm-test-result.error { background: rgba(231,76,60,0.06); color: #c0392b; border-color: rgba(231,76,60,0.12); }
body.light-theme .tgp-spinner { border-color: rgba(0,0,0,0.08); border-top-color: #1a8dd6; }
body.light-theme .tgp-loading-overlay { background: rgba(255,255,255,0.5); }
body.light-theme .tgp-success-overlay { background: rgba(255,255,255,0.55); }
body.light-theme .tgp-success-text { color: #1a1a2e; }
body.light-theme .tgp-skeleton-avatar,
body.light-theme .tgp-skeleton-line { background: rgba(0,0,0,0.06); }

body.light-theme #tgpHowToGuide { border-top-color: rgba(0,0,0,0.06); }
body.light-theme #tgpHowToGuide p { color: #666; }
body.light-theme #tgpHowToGuide strong { color: #333; }
body.light-theme #tgpHowToGuide div[style*="background:rgba(255"] { background: #f5f6f7 !important; }
body.light-theme #tgpHowToGuide div[style*="background:rgba(42"] { background: rgba(42,171,238,0.05) !important; }
body.light-theme #tgpHowToGuide code { background: #eef0f2 !important; color: #444 !important; }
body.light-theme #tgpHowToGuide span[style*="color:#666"] { color: #999 !important; }
body.light-theme #tgpHowToGuide span[style*="color:#bbb"], body.light-theme #tgpHowToGuide span[style*="color:#ccc"] { color: #444 !important; }
body.light-theme #tgpHowToGuide p[style*="color:#ccc"] { color: #222 !important; }

/* Mini toggle — minimalist neutral (both themes) */
.crm-mini-toggle.active { background: #ececec; }
body.light-theme .crm-mini-toggle { background: #d8d8d8; }
body.light-theme .crm-mini-toggle.active { background: #1a1a1a; }
body.light-theme .crm-mini-toggle::after { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
body.light-theme .crm-mini-toggle.active::after { background: #ffffff; }

/* ═══════════════════════════════════════════════
   Mobile bottom sheet — responsive breakpoints
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .tgp-modal-overlay { 
        align-items: flex-end; 
        padding: 0;
    }
    .tgp-modal { 
        max-width: 100%; 
        width: 100%;
        border-radius: 20px 20px 0 0; 
        height: 90vh;
        max-height: 90vh;
        min-height: 90vh;
        margin-top: auto;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
    }
    .tgp-modal-overlay.active .tgp-modal {
        transform: translateY(0);
    }
    .tgp-drag-handle {
        display: block;
    }
    .tgp-modal-header {
        padding: 10px 20px 12px;
    }
    .tgp-modal-body {
        padding: 14px 20px;
        flex: 1;
        min-height: 0;
    }
    .tgp-modal-footer {
        padding: 12px 20px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .tgp-chat-list {
        max-height: none;
        flex: 1;
        max-height: calc(90vh - 280px);
    }
}
@media (max-width: 380px) {
    .tgp-modal-body { padding: 12px 16px; }
    .tgp-modal-header { padding: 8px 16px 10px; }
    .tgp-modal-footer { 
        padding: 10px 16px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .tgp-modal-title { font-size: 0.88rem; }
    .tgp-tab { font-size: 0.75rem; padding: 9px 6px; }
    .tgp-chat-list {
        max-height: calc(90vh - 260px);
    }
}

/* Telegram Profile chat type filters */
.tgp-type-filter {
    flex: 1;
    padding: 7px 4px;
    background: rgba(255,255,255,0.03);
    border: none;
    color: #888;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tgp-type-filter:hover { background: rgba(255,255,255,0.06); color: #ccc; }
.tgp-type-filter.active { background: rgba(42,171,238,0.15); color: #2AABEE; }
.tgp-type-count { font-size: 0.65rem; opacity: 0.7; margin-left: 2px; }
body.light-theme .tgp-type-filter { background: rgba(0,0,0,0.02); color: #999; }
body.light-theme .tgp-type-filter:hover { background: rgba(0,0,0,0.05); color: #555; }
body.light-theme .tgp-type-filter.active { background: rgba(42,171,238,0.1); color: #1a8dd6; }
body.light-theme #tgpSearchInput { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #333; }
/* ═══════════════════════════════════════════════
   CRM Modal — minimalist & elegant (refined)
   • Wider desktop layout (max-width 720px)
   • Bottom-sheet on mobile (like tgp-modal)
   • Serif title font (elegant, Times-like)
   • Light/Dark theme adapted
   ═══════════════════════════════════════════════ */
.crm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.crm-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.crm-modal {
    background: #212121;
    border: none;
    border-radius: 18px;
    max-width: 720px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55);
    transform: scale(0.96) translateY(12px);
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
    position: relative;
}
.crm-modal-overlay.active .crm-modal {
    transform: scale(1) translateY(0);
}
/* Drag handle for mobile bottom sheet */
.crm-modal .crm-drag-handle {
    display: none;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.22);
    margin: 10px auto 0;
    flex-shrink: 0;
}
.crm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
    gap: 12px;
}
.crm-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.18rem;
    font-weight: 500;
    color: #f0f0f0;
    letter-spacing: 0.01em;
    /* Elegant serif font for premium feel */
    font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    min-width: 0;
}
.crm-modal-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Modal icon — fully transparent, no background */
.crm-modal-title .crm-toggle-icon {
    background: transparent !important;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.crm-modal-title .crm-toggle-icon img,
.crm-modal-title .crm-toggle-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.crm-modal-close {
    background: none;
    border: none;
    color: #777;
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-modal-close:hover {
    background: rgba(255,255,255,0.06);
    color: #ddd;
}
.crm-modal-body {
    padding: 22px 28px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
/* Subtle scrollbar inside modal body */
.crm-modal-body::-webkit-scrollbar { width: 6px; }
.crm-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.crm-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
.crm-instruction {
    font-size: 0.85rem;
    color: #a8a8a8;
    line-height: 1.65;
    margin-bottom: 18px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: 12px;
}
.crm-instruction p { margin: 0 0 8px; }
.crm-instruction p:last-child { margin-bottom: 0; }
.crm-instruction ol {
    padding-left: 20px;
    margin: 8px 0;
}
.crm-instruction li {
    margin-bottom: 6px;
}
.crm-instruction strong { color: #d8d8d8; font-weight: 600; }
.crm-instruction code {
    background: rgba(255,255,255,0.05);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.78rem;
    color: #d0d0d0;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.crm-instruction a {
    color: #8ab4f0;
    text-decoration: none;
    transition: color 0.15s;
}
.crm-instruction a:hover {
    color: #aac6f5;
    text-decoration: underline;
}

/* Permission/info card — minimalist, no colored backgrounds */
.crm-info-card {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.045);
    border: none;
    border-radius: 10px;
}
.crm-info-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #d0d0d0;
    margin: 0 0 8px 0;
}
.crm-info-card-title i { font-size: 0.95rem; color: #999; }
.crm-info-card-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.76rem;
    color: #999;
}
.crm-info-card-list > div { line-height: 1.5; }
.crm-info-card-list strong {
    color: #c8c8c8;
    font-weight: 600;
}
.crm-info-card.note {
    background: rgba(255,255,255,0.03);
    border: none;
}
.crm-info-card.note p {
    margin: 0;
    font-size: 0.74rem;
    color: #8c8c8c;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.crm-info-card.note p i {
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
    color: #888;
}
.crm-info-card.note p strong { color: #b0b0b0; }
.crm-info-card.note a { color: #8ab4f0; text-decoration: none; }
.crm-info-card.note a:hover { text-decoration: underline; }

/* Form fields grid — two columns on wide modals, one on narrow */
.crm-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.crm-fields-grid .crm-field-group.full {
    grid-column: 1 / -1;
}
@media (max-width: 640px) {
    .crm-fields-grid { grid-template-columns: 1fr; }
}

.crm-field-group {
    margin-bottom: 14px;
}
.crm-field-group:last-child { margin-bottom: 0; }
.crm-field-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #c0c0c0;
    margin-bottom: 7px;
    display: block;
    letter-spacing: 0.01em;
}
.crm-field-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.88rem;
    color: #e8e8e8;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}
.crm-field-input:hover {
    background: rgba(255,255,255,0.07);
}
.crm-field-input:focus {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
}
.crm-field-input::placeholder {
    color: #5a5a5a;
}
.crm-field-hint {
    font-size: 0.74rem;
    color: #777;
    margin-top: 6px;
    line-height: 1.4;
}
.crm-modal-footer {
    padding: 16px 28px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.crm-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: 0.01em;
}
.crm-btn-secondary {
    background: rgba(255,255,255,0.06);
    color: #c0c0c0;
}
.crm-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}
.crm-btn-test {
    background: rgba(255,255,255,0.05);
    color: #b0b0b0;
}
.crm-btn-test:hover {
    background: rgba(255,255,255,0.09);
    color: #d8d8d8;
}
.crm-btn-primary {
    background: rgba(255,255,255,0.92);
    color: #1a1a1a;
    font-weight: 600;
}
.crm-btn-primary:hover {
    background: #ffffff;
}
.crm-btn-primary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(255,255,255,0.12);
    color: #888;
}
.crm-btn-danger {
    background: rgba(255,255,255,0.04);
    color: #d88;
}
.crm-btn-danger:hover {
    background: rgba(220,80,80,0.12);
    color: #f99;
}
.crm-test-result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    display: none;
}
.crm-test-result.success {
    background: rgba(134,239,172,0.08);
    border: none;
    color: #86efac;
    display: block;
}
.crm-test-result.error {
    background: rgba(252,165,165,0.08);
    border: none;
    color: #fca5a5;
    display: block;
}
.crm-test-result.loading {
    background: rgba(255,255,255,0.04);
    border: none;
    color: #a0a0a0;
    display: block;
}

/* ═══════════════════════════════════════════════
   Yandex Metrika — OAuth button + counters list
   Minimalist neutral design (no yellow brand bg)
   ═══════════════════════════════════════════════ */
.metrika-step {
    margin-top: 18px;
}
.metrika-oauth-hint {
    text-align: center;
    margin-top: 10px;
}
.metrika-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: #f0f0f0;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
    line-height: 1.2;
}
.metrika-oauth-btn:hover {
    background: rgba(255,255,255,0.1);
}
.metrika-oauth-btn:active {
    transform: scale(0.99);
}
.metrika-oauth-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.metrika-oauth-btn img {
    flex-shrink: 0;
    background: transparent;
}
body.light-theme .metrika-oauth-btn {
    background: rgba(0,0,0,0.05);
    border: none;
    color: #1a1a1a;
}
body.light-theme .metrika-oauth-btn:hover {
    background: rgba(0,0,0,0.08);
}

.metrika-counters-loading {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.metrika-counters-loading i {
    animation: spin 1s linear infinite;
    font-size: 1rem;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
body.light-theme .metrika-counters-loading { color: #777; }

.metrika-counters-list {
    max-height: 320px;
    overflow-y: auto;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
}
.metrika-counters-list::-webkit-scrollbar { width: 6px; }
.metrika-counters-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
body.light-theme .metrika-counters-list {
    border: none;
    background: rgba(0,0,0,0.04);
}
body.light-theme .metrika-counters-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

.metrika-counter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.metrika-counter-item:last-child { border-bottom: none; }
.metrika-counter-item:hover { background: rgba(255,255,255,0.04); }
.metrika-counter-item.active { background: rgba(255,255,255,0.07); }
.metrika-counter-item input[type="radio"] {
    accent-color: #ffffff;
    flex-shrink: 0;
    cursor: pointer;
}
.metrika-counter-item-info {
    flex: 1;
    min-width: 0;
}
.metrika-counter-item-name {
    font-size: 0.88rem;
    color: #e8e8e8;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.metrika-counter-item-name .metrika-fav { color: #d4af37; font-size: 0.85rem; }
.metrika-counter-item-meta {
    font-size: 0.74rem;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
body.light-theme .metrika-counter-item { border-bottom-color: rgba(0,0,0,0.05); }
body.light-theme .metrika-counter-item:hover { background: rgba(0,0,0,0.03); }
body.light-theme .metrika-counter-item.active { background: rgba(0,0,0,0.06); }
body.light-theme .metrika-counter-item input[type="radio"] { accent-color: #1a1a1a; }
body.light-theme .metrika-counter-item-name { color: #1a1a1a; }
body.light-theme .metrika-counter-item-meta { color: #888; }

.metrika-counter-empty,
.metrika-counter-error {
    padding: 18px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #999;
}
.metrika-counter-error { color: #f08585; }
.metrika-counter-error b { display: block; margin-bottom: 6px; color: #f8a5a5; }
.metrika-counter-empty a {
    color: #8ab4f0;
    text-decoration: none;
}
.metrika-counter-empty a:hover { text-decoration: underline; }
.metrika-counter-error .metrika-retry-btn {
    margin-top: 10px;
    background: rgba(255,255,255,0.06);
    border: none;
    color: #e0e0e0;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
    font-family: inherit;
}
.metrika-counter-error .metrika-retry-btn:hover {
    background: rgba(255,255,255,0.12);
}
body.light-theme .metrika-counter-error .metrika-retry-btn {
    background: rgba(0,0,0,0.05);
    border: none;
    color: #1a1a1a;
}
body.light-theme .metrika-counter-error .metrika-retry-btn:hover {
    background: rgba(0,0,0,0.08);
}

/* ───────── Light theme ───────── */
body.light-theme .crm-modal-overlay {
    background: rgba(15,15,20,0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
body.light-theme .crm-modal {
    background: #ffffff;
    border: none;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18);
}
body.light-theme .crm-modal .crm-drag-handle { background: rgba(0,0,0,0.14); }
body.light-theme .crm-modal-header {
    border-bottom-color: rgba(0,0,0,0.06);
}
body.light-theme .crm-modal-title {
    color: #1a1a1a;
}
body.light-theme .crm-modal-close {
    color: #888;
}
body.light-theme .crm-modal-close:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}
body.light-theme .crm-modal-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); }
body.light-theme .crm-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

body.light-theme .crm-toggle-name {
    color: #1f1f1f;
}
body.light-theme .crm-instruction {
    background: rgba(0,0,0,0.04);
    border: none;
    color: #5a5a5a;
}
body.light-theme .crm-instruction strong { color: #1a1a1a; }
body.light-theme .crm-instruction code {
    background: rgba(0,0,0,0.05);
    color: #2a2a2a;
}
body.light-theme .crm-info-card {
    background: rgba(0,0,0,0.04);
    border: none;
}
body.light-theme .crm-info-card-title { color: #1a1a1a; }
body.light-theme .crm-info-card-title i { color: #777; }
body.light-theme .crm-info-card-list { color: #5a5a5a; }
body.light-theme .crm-info-card-list strong { color: #2a2a2a; }
body.light-theme .crm-info-card.note { background: rgba(0,0,0,0.025); border: none; }
body.light-theme .crm-info-card.note p { color: #6a6a6a; }
body.light-theme .crm-info-card.note p i { color: #888; }
body.light-theme .crm-info-card.note p strong { color: #2a2a2a; }
body.light-theme .crm-info-card.note a { color: #2563eb; }

body.light-theme .crm-field-input {
    background: rgba(0,0,0,0.04);
    border: 1px solid transparent;
    color: #1a1a1a;
}
body.light-theme .crm-field-input:hover { background: rgba(0,0,0,0.06); }
body.light-theme .crm-field-input:focus {
    border-color: rgba(0,0,0,0.22);
    background: rgba(0,0,0,0.05);
}
body.light-theme .crm-field-input::placeholder { color: #b0b0b0; }
body.light-theme .crm-field-label { color: #3a3a3a; }
body.light-theme .crm-field-hint { color: #888; }
body.light-theme .crm-modal-footer {
    border-top-color: rgba(0,0,0,0.06);
}
body.light-theme .crm-btn-secondary {
    background: rgba(0,0,0,0.05);
    color: #444;
}
body.light-theme .crm-btn-secondary:hover {
    background: rgba(0,0,0,0.08);
}
body.light-theme .crm-btn-test {
    background: rgba(0,0,0,0.04);
    color: #555;
}
body.light-theme .crm-btn-test:hover {
    background: rgba(0,0,0,0.07);
    color: #1a1a1a;
}
body.light-theme .crm-btn-primary {
    background: #1a1a1a;
    color: #ffffff;
}
body.light-theme .crm-btn-primary:hover {
    background: #000000;
}
body.light-theme .crm-btn-primary:disabled {
    background: rgba(0,0,0,0.08);
    color: #999;
}
body.light-theme .crm-btn-danger {
    background: rgba(0,0,0,0.03);
    color: #c44;
}
body.light-theme .crm-btn-danger:hover {
    background: rgba(220,80,80,0.1);
    color: #b22;
}
body.light-theme .crm-test-result.success {
    background: rgba(22,163,74,0.08);
    border: none;
    color: #16a34a;
}
body.light-theme .crm-test-result.error {
    background: rgba(220,38,38,0.07);
    border: none;
    color: #dc2626;
}
body.light-theme .crm-test-result.loading {
    background: rgba(0,0,0,0.04);
    border: none;
    color: #555;
}
body.light-theme .crm-mini-toggle {
    background: #d8d8d8;
}
body.light-theme .crm-search-accordion .kb-search-accordion-title {
    color: #2563eb;
}
body.light-theme .crm-search-accordion .kb-search-accordion-title i {
    color: #2563eb;
}

/* ───────── Mobile bottom sheet (≤ 640px) ───────── */
@media (max-width: 640px) {
    .crm-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .crm-modal {
        max-width: 100%;
        width: 100%;
        height: 92vh;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        margin-top: auto;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
    }
    .crm-modal-overlay.active .crm-modal {
        transform: translateY(0);
    }
    .crm-modal .crm-drag-handle {
        display: block;
    }
    .crm-modal-header {
        padding: 12px 22px 14px;
    }
    .crm-modal-title { font-size: 1.05rem; }
    .crm-modal-body {
        padding: 18px 22px;
    }
    .crm-modal-footer {
        padding: 14px 22px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
}
@media (max-width: 480px) {
    .crm-modal-header { padding: 10px 18px 12px; }
    .crm-modal-body   { padding: 16px 18px; }
    .crm-modal-footer {
        padding: 12px 18px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        flex-wrap: wrap;
    }
    .crm-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: 11px 14px;
    }
    .crm-btn-danger {
        flex-basis: 100%;
        order: 99;
    }
}

/* ============================================
   📱 АДАПТИВНОСТЬ ДЛЯ REASONING ACCORDION
   ============================================ */

/* Планшеты */
@media (max-width: 1024px) {
    .reasoning-accordion {
        margin-bottom: 10px;
    }
    .reasoning-accordion-header {
        padding: 6px 0;
    }
    .reasoning-accordion-content {
        max-height: 280px;
        padding: 4px 0 8px 0;
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    .reasoning-accordion {
        margin-bottom: 8px;
    }
    .reasoning-accordion-header {
        padding: 6px 0;
        gap: 10px;
    }
    .reasoning-accordion-title {
        font-size: 12.5px;
        gap: 7px;
    }
    .reasoning-accordion-title > i {
        font-size: 13px;
    }
    .reasoning-accordion-title > span {
        font-size: 12.5px;
    }
    .reasoning-accordion-content {
        max-height: 240px;
        padding: 4px 0 8px 0;
        font-size: 12.5px;
        line-height: 1.55;
    }
    .reasoning-phase {
        gap: 10px;
        padding: 7px 0;
    }
    .reasoning-phase-marker { flex: 0 0 10px; }
    .reasoning-phase-dot { width: 7px; height: 7px; }
    .reasoning-phase-pulse { width: 7px; height: 7px; }
    .reasoning-phase-title { font-size: 12.5px; line-height: 1.4; }
    .reasoning-phase-body { font-size: 12px; line-height: 1.5; }
    .reasoning-accordion-content pre {
        font-size: 11px;
        padding: 8px;
    }
}

/* Маленькие мобильные (iPhone SE, узкие Android) */
@media (max-width: 480px) {
    .reasoning-accordion-header {
        padding: 5px 0;
        gap: 8px;
    }
    .reasoning-accordion-title {
        font-size: 12px;
        gap: 6px;
    }
    .reasoning-accordion-title > i {
        font-size: 12px;
    }
    .reasoning-accordion-title > span {
        font-size: 12px;
    }
    .reasoning-accordion-toggle {
        width: 18px;
        height: 18px;
    }
    .reasoning-accordion-toggle i { font-size: 11px; }
    .reasoning-accordion-content {
        max-height: 220px;
        padding: 2px 0 6px 0;
        font-size: 12px;
    }
    .reasoning-phase {
        gap: 8px;
        padding: 6px 0;
    }
    .reasoning-phase-title { font-size: 12px; }
    .reasoning-phase-body { font-size: 11.5px; line-height: 1.5; }
    .reasoning-phase-marker { flex: 0 0 8px; }
    .reasoning-phase-dot { width: 6px; height: 6px; }
    .reasoning-phase-pulse { width: 6px; height: 6px; }
}

/* Ультра-маленькие устройства (старые iPhone SE 1-го поколения, 320px-ные экраны) */
@media (max-width: 360px) {
    .reasoning-accordion-header {
        padding: 4px 0;
        gap: 6px;
    }
    .reasoning-accordion-title {
        font-size: 11.5px;
        gap: 5px;
    }
    .reasoning-accordion-title > i {
        font-size: 11px;
    }
    .reasoning-accordion-title > span {
        font-size: 11.5px;
    }
    .reasoning-phase {
        gap: 7px;
        padding: 5px 0;
    }
    .reasoning-phase-title { font-size: 11.5px; line-height: 1.4; }
    .reasoning-phase-body { font-size: 11px; line-height: 1.45; }
    .reasoning-phase-marker { flex: 0 0 7px; padding-top: 5px; }
    .reasoning-phase-dot { width: 5px; height: 5px; }
    .reasoning-phase-pulse { width: 5px; height: 5px; }
}


/* ========== SIDEBAR USER FOOTER ========== */
.sidebar-user-footer {
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.sidebar-user-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sidebar-user-block:hover {
    background-color: rgba(255,255,255,0.06);
}

.sidebar-user-block.active {
    background-color: rgba(255,255,255,0.08);
}

.sidebar-user-avatar {
    width: 2rem;
    height: 2rem;
    background: #444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-user-avatar span {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.sidebar-guest-avatar {
    background: #444;
}

.sidebar-guest-avatar i {
    color: #b4b4b4;
    font-size: 0.875rem;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #ececec;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-plan {
    font-size: 0.6875rem;
    color: #767676;
    margin-top: 0.125rem;
}

.sidebar-user-chevron {
    color: #767676;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.sidebar-user-block.active .sidebar-user-chevron {
    transform: rotate(180deg);
}

/* Dropdown */
.sidebar-user-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0.75rem;
    right: 0.75rem;
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 0.375rem;
    margin-bottom: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

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

.sidebar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #b4b4b4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sidebar-dropdown-item:hover {
    background-color: rgba(255,255,255,0.06);
    color: #ececec;
}

.sidebar-dropdown-item i {
    font-size: 1rem;
    color: #767676;
}

.sidebar-dropdown-logout {
    color: #ef4444;
}

.sidebar-dropdown-logout i {
    color: #ef4444;
}

.sidebar-dropdown-logout:hover {
    background-color: rgba(239,68,68,0.1);
}

/* ========== UPGRADE MODAL - Full Screen Style ========== */
.upgrade-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #212121;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.upgrade-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.upgrade-modal-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #b4b4b4;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 10000;
    font-size: 1.25rem;
}

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

.upgrade-modal {
    width: 100%;
    max-width: 1100px;
    margin: auto;
    padding: 2rem 1.5rem 3rem;
}

.upgrade-modal-header {
    text-align: center;
    margin-bottom: 2rem;
}

.upgrade-modal-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #ececec;
    margin-bottom: 0;
}

.upgrade-modal-body {
    width: 100%;
}

.upgrade-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

.upgrade-plan-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    background: #171717;
    transition: border-color 0.2s ease;
}

.upgrade-plan-card:hover {
    border-color: rgba(255,255,255,0.15);
}

.upgrade-plan-card.recommended {
    border-color: rgba(255,255,255,0.3);
    border-width: 1.5px;
    position: relative;
}

.upgrade-plan-badge {
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.upgrade-plan-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ececec;
    margin-bottom: 0.5rem;
}

.upgrade-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.upgrade-plan-price-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}

.upgrade-plan-price-currency {
    font-size: 1rem;
    color: #b4b4b4;
}

.upgrade-plan-price-period {
    font-size: 0.8125rem;
    color: #767676;
    margin-bottom: 1rem;
}

.upgrade-plan-description {
    font-size: 0.875rem;
    color: #b4b4b4;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.upgrade-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex: 1;
}

.upgrade-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #ccc;
    padding: 0.375rem 0;
}

.upgrade-plan-features li i {
    color: #10b981;
    font-size: 0.875rem;
    margin-top: 0.125rem;
}

/* === Аккордеон фичей в модалке тарифов === */
.upgrade-features-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    will-change: max-height, opacity;
}

.upgrade-features-accordion.expanded {
    opacity: 1;
}

.upgrade-features-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0 2px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #ececec;
    font-family: "Chakra Petch", sans-serif;
    transition: color 0.2s ease;
    margin-bottom: 0.75rem;
}

.upgrade-features-toggle:hover {
    color: #b4b4b4;
}

.upgrade-toggle-icon {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.upgrade-features-toggle.active .upgrade-toggle-icon {
    transform: rotate(180deg);
}

.upgrade-plan-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
}

.upgrade-plan-btn-primary {
    background: #fff;
    color: #212121;
}

.upgrade-plan-btn-primary:hover {
    background: #e5e5e5;
}

.upgrade-plan-btn-secondary {
    background: rgba(255,255,255,0.06);
    color: #ececec;
}

.upgrade-plan-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🔌 БЛОК ИНТЕГРАЦИЙ В КАРТОЧКЕ ТАРИФА (Perplexity-style)        */
/* ═══════════════════════════════════════════════════════════════ */
.upgrade-integrations {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible; /* чтобы tooltip не обрезался */
}

.upgrade-integrations-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #909090;
    font-weight: 600;
    margin-bottom: 4px;
}

.upgrade-integrations-title .upgrade-integrations-status {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.75rem;
    color: #b4b4b4;
}

.upgrade-integrations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.upgrade-integration-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: #ccc;
    position: relative;
    cursor: default;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.upgrade-integration-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}

.upgrade-integration-chip img,
.upgrade-integration-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Иконка статуса (галочка/крестик) */
.upgrade-integration-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 10px;
}

.upgrade-integration-status.ok {
    background: rgba(16, 185, 129, 0.22);
    color: #10b981;
}
.upgrade-integration-status.locked {
    background: rgba(239, 68, 68, 0.18);
    color: #ef6464;
}

.upgrade-integration-chip.locked {
    opacity: 0.65;
}

/* Tooltip над chip'ом — теперь контрастный, со стрелкой и плавной анимацией */
.upgrade-integration-chip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 10px;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
/* Стрелка */
.upgrade-integration-chip[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}
.upgrade-integration-chip[data-tip]:hover::after,
.upgrade-integration-chip[data-tip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Light-theme */
body.light-theme .upgrade-integrations {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.08);
}
body.light-theme .upgrade-integration-chip {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
    color: #2a2a2a;
}
body.light-theme .upgrade-integration-chip:hover {
    background: #f7f7f7;
    border-color: rgba(0,0,0,0.18);
}
body.light-theme .upgrade-integrations-title {
    color: #555;
}
body.light-theme .upgrade-integrations-title .upgrade-integrations-status {
    color: #444;
}
body.light-theme .upgrade-integration-chip[data-tip]::after {
    background: #1a1a1a;
    color: #ffffff;
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
body.light-theme .upgrade-integration-chip[data-tip]::before {
    border-top-color: #1a1a1a;
}
body.light-theme .upgrade-integration-status.ok {
    background: rgba(16, 185, 129, 0.16);
    color: #059669;
}
body.light-theme .upgrade-integration-status.locked {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
}

/* Mobile: tooltip может обрезаться по бокам — используем normal wrap */
@media (max-width: 768px) {
    .upgrade-integrations {
        padding: 8px 10px;
    }
    .upgrade-integration-chip {
        font-size: 0.74rem;
        padding: 4px 8px;
    }
    .upgrade-integration-chip[data-tip]::after {
        max-width: min(220px, calc(100vw - 60px));
        white-space: normal;
        text-align: center;
    }
}

/* Совсем маленькие экраны (320px iPhone SE 1) */
@media (max-width: 380px) {
    .upgrade-integrations-title {
        flex-wrap: wrap;
        gap: 4px;
    }
    .upgrade-integrations-title .upgrade-integrations-status {
        margin-left: 0;
        flex: 0 0 100%;
        font-size: 0.72rem;
    }
    .upgrade-integration-chip {
        font-size: 0.72rem;
        padding: 4px 7px;
    }
    .upgrade-integration-chip[data-tip]::after {
        font-size: 0.7rem;
        padding: 5px 8px;
    }
}

.upgrade-plan-btn .spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Tablet Styles for Upgrade Modal */
@media (max-width: 1024px) and (min-width: 769px) {
    .upgrade-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
    
    .upgrade-plan-card.recommended {
        grid-column: 1 / -1;
        max-width: 340px;
        margin: 0 auto;
    }
}

/* Mobile Styles for Upgrade Modal */
@media (max-width: 768px) {
    .upgrade-modal-overlay {
        align-items: flex-start;
    }
    
    .upgrade-modal {
        padding: 3.5rem 1rem 2rem;
        margin: 0;
    }
    
    .upgrade-modal-close {
        top: 0.75rem;
        right: 0.75rem;
    }
    
    .upgrade-plans-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .upgrade-plan-card {
        padding: 1.25rem;
    }
    
    .upgrade-plan-price-value {
        font-size: 2rem;
    }
    
    .sidebar-user-footer {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 20px));
    }
}

@media (max-width: 480px) {
    .upgrade-modal {
        padding: 3rem 0.75rem 1.5rem;
    }
    
    .upgrade-modal-title {
        font-size: 1.375rem;
    }
    
    .upgrade-plan-card {
        padding: 1rem;
    }
    
    .upgrade-plan-name {
        font-size: 1.125rem;
    }
    
    .upgrade-plan-price-value {
        font-size: 1.75rem;
    }
    
    .upgrade-plan-features li {
        font-size: 0.75rem;
    }
}

/* ========================================
   🎨 IMAGE GENERATION MODE STYLES
   ======================================== */

/* Скелетон для генерации изображения */
@keyframes imagegen-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes imagegen-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes imagegen-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.02); }
    50% { box-shadow: 0 0 40px rgba(255,255,255,0.04); }
}

.imagegen-skeleton {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 280px;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    animation: imagegen-glow 3s ease-in-out infinite;
}

.imagegen-skeleton::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: imagegen-shimmer 3s ease-in-out infinite;
}

.imagegen-skeleton.ratio-1-1 { aspect-ratio: 1/1; width: 320px; }
.imagegen-skeleton.ratio-16-9 { aspect-ratio: 16/9; width: 400px; }
.imagegen-skeleton.ratio-9-16 { aspect-ratio: 9/16; width: 220px; }
.imagegen-skeleton.ratio-4-3 { aspect-ratio: 4/3; width: 380px; }
.imagegen-skeleton.ratio-3-4 { aspect-ratio: 3/4; width: 260px; }

.imagegen-skeleton-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.imagegen-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255,255,255,0.06);
    border-top-color: rgba(255,255,255,0.4);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.imagegen-skeleton-text {
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    animation: imagegen-pulse 2.5s ease-in-out infinite;
}

.imagegen-skeleton-progress {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    font-variant-numeric: tabular-nums;
}

.imagegen-progress-bar {
    width: 160px;
    height: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.imagegen-progress-bar-fill {
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    width: 0%;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Скелетон при загрузке изображения (после перезагрузки страницы) */
.imagegen-img-loading {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    aspect-ratio: 1 / 1;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}
.imagegen-img-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: imagegen-shimmer 2s ease-in-out infinite;
    border-radius: 16px;
    z-index: 1;
}
.imagegen-img-loading img {
    opacity: 0;
    transition: opacity 0.4s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.imagegen-img-loading.loaded {
    background: none;
    aspect-ratio: auto;
    max-width: 320px;
}
.imagegen-img-loading.loaded::before {
    display: none;
}
.imagegen-img-loading.loaded img {
    opacity: 1;
}

/* Сгенерированное изображение в чате */
.imagegen-result {
    max-width: 320px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin-top: 8px;
    aspect-ratio: 1 / 1;
}

.imagegen-result img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 16px;
    object-fit: cover;
}

.imagegen-result-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 1;
}

.imagegen-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    backdrop-filter: blur(8px);
}

/* Карточка ошибки генерации */
.imagegen-error-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    max-width: 400px;
    margin-top: 8px;
}
.imagegen-error-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 16px;
}
.imagegen-error-body {
    flex: 1;
    min-width: 0;
}
.imagegen-error-title {
    font-size: 14px;
    font-weight: 600;
    color: #d1d1d1;
    line-height: 1.4;
}
.imagegen-error-details {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
    line-height: 1.4;
    opacity: 0.85;
}
.dark .imagegen-error-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.dark .imagegen-error-icon {
    background: rgba(255,255,255,0.06);
    color: #999;
}
.dark .imagegen-error-title { color: #d1d1d1; }
.dark .imagegen-error-details { color: #999; opacity: 0.7; }

/* Панель настроек генерации */
.imagegen-controls {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.imagegen-controls::-webkit-scrollbar { display: none; }

.imagegen-control-group {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 2px;
    flex-shrink: 0;
}

.imagegen-control-btn {
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 11px;
    color: #777;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.imagegen-control-btn i {
    font-size: 11px;
    opacity: 0.7;
}

.imagegen-control-btn.active {
    background: rgba(255,255,255,0.1);
    color: #ececec;
}

.imagegen-control-btn.active i {
    opacity: 1;
}

.imagegen-control-btn:hover:not(.active) {
    color: #b4b4b4;
    background: rgba(255,255,255,0.04);
}

.imagegen-control-label {
    font-size: 11px;
    color: #666;
    padding: 0 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 🎨 Кнопка загрузки с плюсиком */
.imagegen-upload-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.imagegen-upload-plus {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    color: #6c7280;
    font-size: 12px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    pointer-events: none;
}

/* 🎨 Upload-only mode: big upload area filling the entire input row */
.imagegen-upload-area-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 16px;
    background: rgba(0,0,0,0.02);
    border: 2px dashed rgba(0,0,0,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
    min-height: 38px;
    color: #b4b4b4;
    font-size: 0.8rem;
}

.imagegen-upload-area-btn i {
    font-size: 1rem;
    opacity: 0.5;
}

.imagegen-upload-area-btn span {
    font-size: 0.8rem;
    color: #b4b4b4;
}

.imagegen-upload-area-btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.2);
    color: #767676;
}

.imagegen-upload-area-btn:hover i,
.imagegen-upload-area-btn:hover span {
    opacity: 1;
    color: #767676;
}

/* Upload-only: placeholder */
.upload-only-placeholder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}

.upload-only-placeholder i {
    font-size: 1rem;
    opacity: 0.5;
}

.upload-only-placeholder span {
    font-size: 0.8rem;
    color: #b4b4b4;
}

/* Upload-only: stacked image previews */
.upload-only-previews {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 42px;
    gap: 0;
}

.upload-only-previews.hidden {
    display: none;
}

.upload-only-img-wrapper {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Первое изображение — легкий поворот влево */
.upload-only-img-wrapper:nth-child(1) {
    transform: rotate(-4deg);
    z-index: 2;
}

/* Второе изображение — легкий поворот вправо, наложение */
.upload-only-img-wrapper:nth-child(2) {
    transform: rotate(5deg);
    margin-left: -12px;
    z-index: 3;
}

.upload-only-img-wrapper:hover {
    z-index: 10;
}

.upload-only-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.upload-only-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    border: 2px solid #212121;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    z-index: 15;
    opacity: 1;
    transition: background 0.15s ease;
    line-height: 1;
    padding: 0;
}

.upload-only-remove:hover {
    background: #dc2626;
}

/* When images are loaded, change area style */
.imagegen-upload-area-btn.has-uploads {
    border-style: solid;
    border-color: rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.01);
    cursor: pointer;
}

/* Plus button to add more */
.upload-only-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px dashed rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #b4b4b4;
    font-size: 1rem;
    transition: all 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
    background: transparent;
}

.upload-only-add-btn:hover {
    border-color: rgba(0,0,0,0.25);
    color: #767676;
    background: rgba(0,0,0,0.03);
}

/* 🎨 Счётчик генераций */
.imagegen-limit-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
    margin-left: auto;
}

.imagegen-limit-badge .limit-icon {
    font-size: 12px;
}

.imagegen-limit-badge.limit-ok {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.imagegen-limit-badge.limit-low {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    animation: limitPulse 2s infinite;
}

.imagegen-limit-badge.limit-zero {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

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

/* 🎨 Модальное окно лимитов */
.imagegen-limit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.imagegen-limit-modal.show {
    opacity: 1;
    visibility: visible;
}

.imagegen-limit-modal-content {
    background: white;
    border-radius: 20px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.imagegen-limit-modal.show .imagegen-limit-modal-content {
    transform: scale(1) translateY(0);
}

.imagegen-limit-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
}

.imagegen-limit-modal-icon.icon-register {
    background: linear-gradient(135deg, #6366f1, #ececec);
    color: white;
}

.imagegen-limit-modal-icon.icon-subscribe {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
}

.imagegen-limit-modal-icon.icon-upgrade {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.imagegen-limit-modal-icon.icon-wait {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

.imagegen-limit-modal h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.imagegen-limit-modal p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 24px;
}

.imagegen-limit-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.imagegen-limit-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.imagegen-limit-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.imagegen-limit-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.imagegen-limit-btn-secondary:hover {
    background: #e5e7eb;
}

/* Overlay для просмотра изображения */
.imagegen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.imagegen-overlay.active {
    opacity: 1;
    visibility: visible;
}

.imagegen-overlay img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
}

.imagegen-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.imagegen-overlay-download {
    position: absolute;
    bottom: 30px;
    right: 30px;
    padding: 10px 20px;
    border-radius: 12px;
    background: white;
    color: #1f2937;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Блокировка ввода при генерации */
.imagegen-input-locked {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.imagegen-input-locked textarea {
    cursor: not-allowed !important;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .imagegen-skeleton { max-width: 100%; width: 100% !important; }
    .imagegen-skeleton.ratio-9-16 { width: 70% !important; }
    .imagegen-skeleton.ratio-3-4 { width: 75% !important; }
    .imagegen-result { max-width: 260px; }
    .imagegen-img-loading { max-width: 260px; }
    .imagegen-img-loading.loaded { max-width: 260px; }
    .imagegen-controls { 
        gap: 0;
    }
    .imagegen-control-label { 
        display: none;
    }
    .imagegen-control-btn { 
        padding: 3px 6px; 
        font-size: 10px; 
    }
    .imagegen-control-group {
        gap: 1px;
        padding: 2px;
        border-radius: 6px;
    }
    .imagegen-limit-badge {
        padding: 2px 7px;
        font-size: 10px;
        gap: 3px;
    }
    .imagegen-limit-badge .limit-icon { font-size: 10px; }
    .imagegen-limit-modal-content {
        padding: 24px 20px;
        max-width: 340px;
    }
}
@media (max-width: 380px) {
    .imagegen-controls {
        gap: 0;
    }
    .imagegen-control-btn { 
        padding: 2px 5px; 
        font-size: 9px; 
    }
    .imagegen-control-btn i {
        display: none;
    }
    .imagegen-limit-badge {
        padding: 2px 5px;
        font-size: 9px;
    }
}

/* =============================================
   🌑 DARK THEME REDESIGN — ChatGPT/Claude Style
   ============================================= */

/* --- CSS Custom Properties --- */
:root {
    --dark-bg: #212121;
    --dark-surface: #171717;
    --dark-surface-2: #2f2f2f;
    --dark-surface-3: #303030;
    --dark-border: rgba(255,255,255,0.08);
    --dark-border-hover: rgba(255,255,255,0.15);
    --dark-text: #ececec;
    --dark-text-secondary: #b4b4b4;
    --dark-text-muted: #767676;
    --dark-accent: #b4b4b4;
    --dark-accent-hover: #ececec;
    --dark-user-bubble: #303030;
    --dark-input-bg: #2f2f2f;
    --dark-sidebar-bg: #171717;
    --dark-sidebar-hover: rgba(255,255,255,0.06);
    --dark-sidebar-active: rgba(255,255,255,0.1);
    --dark-scrollbar: rgba(255,255,255,0.1);
    --dark-scrollbar-hover: rgba(255,255,255,0.2);
    --dark-glow: none;
}

/* --- Global resets --- */
body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
    font-size: 14px !important;
}

/* Global smaller font */
.prose { font-size: 0.9rem !important; }
.prose p, .prose li, .prose td { font-size: 0.9rem !important; }
.prose h1 { font-size: 1.5rem !important; }
.prose h2 { font-size: 1.25rem !important; }
.prose h3 { font-size: 1.1rem !important; }
.prose h4 { font-size: 1rem !important; }
.text-sm { font-size: 0.8125rem !important; }
.text-xs { font-size: 0.6875rem !important; }
.text-base { font-size: 0.9rem !important; }

/* --- Skeleton dark override --- */
.skeleton {
    background: linear-gradient(90deg, #2f2f2f 25%, #3a3a3a 50%, #2f2f2f 75%) !important;
    background-size: 200% 100% !important;
}

.skeleton-dark {
    background: linear-gradient(90deg, #353535 25%, #404040 50%, #353535 75%) !important;
    background-size: 200% 100% !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dark-scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dark-scrollbar-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--dark-scrollbar) transparent; }

/* --- Main layout wrapper --- */
.flex.h-screen {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* --- Sidebar --- */
.chat-sidebar {
    background: var(--dark-sidebar-bg) !important;
    border-right: 1px solid var(--dark-border) !important;
}

.chat-sidebar .p-3 { border-color: var(--dark-border) !important; }

.chat-sidebar img[src*="sb-logo"] {
    filter: brightness(10) !important;
}

.sidebar-nav-section {
    border-bottom-color: var(--dark-border) !important;
}

.sidebar-nav-item {
    color: var(--dark-text-secondary) !important;
    border-radius: 0.5rem;
    transition: all 0.15s ease !important;
}

.sidebar-nav-item:hover {
    background: var(--dark-sidebar-hover) !important;
    color: var(--dark-text) !important;
}

.sidebar-item {
    color: var(--dark-text-secondary) !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
}

.sidebar-item:hover {
    background: var(--dark-sidebar-hover) !important;
    color: var(--dark-text) !important;
}

.sidebar-item.bg-gray-200,
.sidebar-item[class*="bg-gray-200"] {
    background: var(--dark-sidebar-active) !important;
    color: #fff !important;
}

.sidebar-item .chat-menu-btn {
    color: var(--dark-text-muted) !important;
}

.sidebar-item .chat-menu-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--dark-text) !important;
}

.sidebar-item:hover .chat-menu-btn:hover {
    background-color: rgba(255,255,255,0.12) !important;
}

.chat-group-header {
    color: var(--dark-text-muted) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Sidebar upgrade info */
.sidebar-upgrade-info {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

.sidebar-upgrade-info h3 { color: var(--dark-text) !important; }
.sidebar-upgrade-info p { color: var(--dark-text-muted) !important; }

.sidebar-upgrade-btn {
    background: var(--dark-accent) !important;
    color: #fff !important;
    border-color: var(--dark-accent) !important;
}

.sidebar-upgrade-btn:hover {
    background: var(--dark-accent-hover) !important;
}

/* Sidebar user footer */
.sidebar-user-footer {
    border-top-color: var(--dark-border) !important;
    background: var(--dark-sidebar-bg) !important;
}

.sidebar-user-block {
    color: var(--dark-text) !important;
}

.sidebar-user-block:hover {
    background: var(--dark-sidebar-hover) !important;
}

.sidebar-user-avatar {
    background: var(--dark-accent) !important;
    color: #fff !important;
}

.sidebar-user-avatar span { color: #fff !important; }

.sidebar-user-name { color: var(--dark-text) !important; }
.sidebar-user-plan { color: var(--dark-text-muted) !important; }
.sidebar-user-chevron { color: var(--dark-text-muted) !important; }

.sidebar-user-dropdown {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.sidebar-dropdown-item {
    color: var(--dark-text-secondary) !important;
}

.sidebar-dropdown-item:hover {
    background: var(--dark-sidebar-hover) !important;
    color: var(--dark-text) !important;
}

.sidebar-dropdown-logout { color: #ef4444 !important; }
.sidebar-dropdown-logout:hover { background: rgba(239,68,68,0.1) !important; }

.sidebar-guest-avatar {
    background: var(--dark-surface-3) !important;
    color: var(--dark-text-muted) !important;
}

/* --- Dropdown menus --- */
.dropdown-menu {
    background: #2a2a2a !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    border-radius: 12px !important;
    padding: 4px !important;
}

.dropdown-menu button,
.dropdown-menu a {
    color: #b4b4b4 !important;
    border-radius: 8px !important;
}

.dropdown-menu button:hover,
.dropdown-menu a:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ececec !important;
}

/* Override Tailwind hover:bg-gray-50 inside dropdowns */
.dropdown-menu .hover\:bg-gray-50:hover {
    background: rgba(255,255,255,0.06) !important;
}

.dropdown-menu .text-red-600 {
    color: #ef4444 !important;
}

/* --- Desktop header --- */
.desktop-header {
    background: var(--dark-bg) !important;
    border-bottom: none !important;
    color: var(--dark-text) !important;
    position: relative;
}

.desktop-header::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, #212121 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

.desktop-header h1,
.desktop-header .text-base {
    color: var(--dark-text) !important;
    font-size: 0.85rem !important;
}

.desktop-header .text-xs,
.desktop-header .text-gray-500 {
    color: var(--dark-text-muted) !important;
    font-size: 0.65rem !important;
}

.desktop-header .bg-gray-100 {
    background: var(--dark-surface-2) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
    font-size: 0.75rem !important;
    padding: 0.3rem 0.75rem !important;
}

.desktop-header .bg-gray-100:hover {
    background: var(--dark-surface-3) !important;
    color: var(--dark-text) !important;
}

.desktop-header .text-gray-500:hover,
.desktop-header .hover\:text-gray-700:hover {
    color: var(--dark-text) !important;
}

/* Share button hover */
#shareBtnDesktop:hover,
#shareBtn:hover {
    background: #3a3a3a !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #ececec !important;
}

/* Header menu button */
#headerMenuBtnDesktop {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #777 !important;
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

#headerMenuBtnDesktop:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ececec !important;
}

/* --- Mobile header --- */
.mobile-header {
    background: var(--dark-bg) !important;
    border-bottom: none !important;
    color: var(--dark-text) !important;
}

.mobile-header .text-gray-500 { color: var(--dark-text-muted) !important; }
.mobile-header .text-gray-500:hover { color: var(--dark-text) !important; }
.mobile-header .assistant-name { color: var(--dark-text) !important; }
.mobile-header .assistant-company { color: var(--dark-text-muted) !important; }

.mobile-header .bg-gray-100 {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

/* --- Chat container (main area) --- */
.chat-container {
    background: var(--dark-bg) !important;
}

/* --- Messages --- */
.message-bubble {
    color: var(--dark-text) !important;
}

/* User messages */
.message-bubble.bg-gray-100,
.message-bubble[class*="bg-gray-1"],
div[class*="user-message"] .message-bubble,
.flex.justify-end .message-bubble {
    background: var(--dark-user-bubble) !important;
    color: var(--dark-text) !important;
    border-radius: 1.5rem !important;
}

/* Assistant messages */
.assistant-message,
.assistant-response {
    color: var(--dark-text) !important;
    background: transparent !important;
}

/* Prose styling in dark mode */
.prose {
    color: var(--dark-text) !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #fff !important;
}

.prose p, .prose li, .prose td, .prose th {
    color: var(--dark-text) !important;
}

.prose strong, .prose b {
    color: #fff !important;
}

.prose a {
    color: #7ec8e3 !important;
}

.prose a:hover {
    color: #a5d8ed !important;
}

.prose blockquote {
    border-left-color: #444 !important;
    color: var(--dark-text-secondary) !important;
    background: rgba(255,255,255,0.03) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

.prose code {
    background: rgba(255,255,255,0.1) !important;
    color: #e8b4b4 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 5px !important;
    padding: 0.15em 0.45em !important;
    font-size: 0.85em !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
}

.prose pre {
    background: #171717 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.prose pre code {
    background: transparent !important;
    color: #e6edf3 !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
    display: block !important;
    overflow-x: auto !important;
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
}

.prose table {
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: #1e1e1e !important;
    box-shadow: none !important;
}

.prose thead { border-bottom: 2px solid rgba(255,255,255,0.15) !important; }
.prose th { 
    color: #fff !important; 
    background: rgba(255,255,255,0.07) !important; 
    border: 1px solid rgba(255,255,255,0.08) !important; 
    padding: 0.6rem 0.85rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-align: left !important;
}
.prose td { 
    border: 1px solid rgba(255,255,255,0.06) !important; 
    color: #d4d4d4 !important; 
    padding: 0.55rem 0.85rem !important;
    font-size: 0.85rem !important;
    background: transparent !important;
}
.prose tr:nth-child(even) td { background: rgba(255,255,255,0.025) !important; }
.prose tr:nth-child(odd) td { background: transparent !important; }
.prose tr:hover td { background: transparent !important; }

.prose hr { border-color: var(--dark-border) !important; }

/* === Контрастные списки (тёмная тема) === */
.prose ul {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    margin: 0.75rem 0 !important;
}

.prose ul li {
    position: relative !important;
    padding-left: 0.25rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.65 !important;
}

.prose ul li::before {
    content: none !important;
    display: none !important;
}

.prose ul li::marker {
    color: #b4b4b4 !important;
}

.prose ul li ul li::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
}

.prose ul li ul li::marker {
    color: #888 !important;
}

.prose ul li ul li ul li::before {
    content: none !important;
    display: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

.prose ol {
    padding-left: 1.5rem !important;
    margin: 0.75rem 0 !important;
    counter-reset: none !important;
    list-style: decimal !important;
}

.prose ol li {
    position: relative !important;
    padding-left: 0.25rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.65 !important;
    counter-increment: none !important;
}

.prose ol li::before {
    content: none !important;
    display: none !important;
}

.prose ol li::marker {
    color: #b4b4b4 !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
}

/* Nested ordered lists */
.prose ol li ol {
    counter-reset: none !important;
    list-style: decimal !important;
}

.prose ol li ol li {
    counter-increment: none !important;
}

.prose ol li ol li::before {
    content: none !important;
    display: none !important;
}

/* Task / check lists */
.prose ul li input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px !important;
    background: transparent !important;
    margin-right: 0.5rem !important;
    position: relative !important;
    top: 2px !important;
}

.prose ul li input[type="checkbox"]:checked {
    background: #ececec !important;
    border-color: #ececec !important;
}

.prose img { border-radius: 0.75rem !important; }

/* Code blocks */
pre[class*="language-"], .hljs {
    background: #171717 !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
}

/* Copy code button */
.code-header, [class*="copy-code"] {
    background: #1e1e1e !important;
    color: #8b949e !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 0.78rem !important;
}

.code-copy-btn {
    background: transparent !important;
    color: #5c6370 !important;
    border: none !important;
}

.code-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0 !important;
}

.code-copy-btn:hover, [class*="copy-code"]:hover {
    color: #e6edf3 !important;
    background: rgba(255,255,255,0.06) !important;
}

/* Контейнер — единый блок со скруглением */
.code-block-container {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    background: #171717 !important;
}

/* Syntax highlighting (GitHub Dark) */
.hljs-keyword, .hljs-selector-tag { color: #ff7b72 !important; }
.hljs-string, .hljs-attr { color: #a5d6ff !important; }
.hljs-number, .hljs-literal { color: #79c0ff !important; }
.hljs-comment { color: #8b949e !important; font-style: italic !important; }
.hljs-function, .hljs-title { color: #d2a8ff !important; }
.hljs-built_in { color: #ffa657 !important; }
.hljs-variable, .hljs-template-variable { color: #ffa657 !important; }
.hljs-type, .hljs-class .hljs-title { color: #7ee787 !important; }
.hljs-symbol, .hljs-bullet { color: #f2cc60 !important; }
.hljs-meta { color: #8b949e !important; }
.hljs-addition { color: #aff5b4 !important; background: rgba(46,160,67,0.15) !important; }
.hljs-deletion { color: #ffdcd7 !important; background: rgba(248,81,73,0.15) !important; }

/* --- Message actions (like/dislike/copy) --- */
.message-actions .action-btn {
    color: var(--dark-text-muted) !important;
    background: transparent !important;
}

.message-actions .action-btn:hover {
    color: var(--dark-text) !important;
    background: var(--dark-sidebar-hover) !important;
}

.action-btn.active,
.action-btn.liked,
.action-btn.disliked {
    color: var(--dark-accent) !important;
}

/* --- Welcome screen --- */
#welcomeScreen,
#welcomeScreen * {
    color: var(--dark-text) !important;
}

/* Кнопка внутри welcomeScreen должна иметь свой цвет */
#welcomeScreen .imagegen-instruction-btn {
    color: #1e1e1e !important;
    background: #ececec !important;
}

#welcomeScreen .imagegen-instruction-btn:hover {
    background: #ffffff !important;
    color: #1e1e1e !important;
}

#welcomeScreen h2 {
    color: #fff !important;
}

#welcomeScreen .text-gray-600,
#welcomeScreen .text-gray-500 {
    color: var(--dark-text-secondary) !important;
}

.welcome-avatar {
    background: linear-gradient(135deg, var(--dark-accent), #888) !important;
    box-shadow: 0 8px 32px var(--dark-glow) !important;
}

.description-wrapper {
    color: var(--dark-text-secondary) !important;
}

.show-more-btn {
    color: var(--dark-accent-hover) !important;
}

/* CTA section */
.cta-section {
    background: var(--dark-surface-2) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 1rem !important;
}

.cta-section h3 { color: var(--dark-text) !important; }
.cta-section p { color: var(--dark-text-muted) !important; }

.cta-button {
    background: #fff !important;
    color: #212121 !important;
}

.cta-button:hover {
    background: #f0f0f0 !important;
}

/* Image generation welcome CTA */
.imagegen-welcome-cta {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.imagegen-welcome-cta h3 { color: var(--dark-text) !important; }
.imagegen-welcome-cta p { color: var(--dark-text-muted) !important; }

.imagegen-instruction-btn {
    background: #ececec !important;
    color: #1e1e1e !important;
}

.imagegen-instruction-btn:hover {
    background: #ffffff !important;
}

/* --- Floating bottom input area --- */
.floating-bottom {
    background: linear-gradient(to top, var(--dark-bg) 80%, rgba(33,33,33,0.8) 90%, transparent) !important;
}

@media (min-width: 769px) {
    .floating-bottom {
        background: linear-gradient(to top, var(--dark-bg) 85%, rgba(33,33,33,0.95) 92%, transparent) !important;
    }
}

.floating-input {
    background: var(--dark-input-bg) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
    transition: border-color 0.2s ease !important;
}

.floating-input:focus-within {
    border: none !important;
    box-shadow: none !important;
}

/* Textarea */
#messageInput,
textarea#messageInput,
.floating-input textarea {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    font-size: 0.9rem !important;
}

#messageInput::placeholder,
textarea#messageInput::placeholder {
    color: #ffffff80 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff80 !important;
}

/* Send button */
#sendButton {
    background: #e0e0e0 !important;
    color: #212121 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#sendButton:hover:not(:disabled) {
    background: #c0c0c0 !important;
}

#sendButton:disabled {
    background: #555 !important;
    color: #999 !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

/* Quick action buttons */
.quick-button {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
    transition: all 0.15s ease !important;
}

.quick-button:hover {
    background: #404040 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #e0e0e0 !important;
}

/* Bottom controls */
.file-upload-btn,
.text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.file-upload-btn {
    background: transparent !important;
}

.file-upload-btn:hover {
    color: #c0c0c0 !important;
    background: rgba(255,255,255,0.08) !important;
}

/* Voice button */
.voice-btn {
    color: var(--dark-text-muted) !important;
    background: transparent !important;
}

.voice-btn:hover {
    color: #c0c0c0 !important;
    background: rgba(255,255,255,0.08) !important;
}

/* --- Web search toggle --- */
.web-search-toggle,
#webSearchToggle {
    color: var(--dark-text-muted) !important;
    background: rgba(255,255,255,0.12) !important;
    border-color: var(--dark-border) !important;
}

.web-search-toggle.active,
#webSearchToggle.active {
    background: #ececec !important;
}

.web-search-toggle:hover,
#webSearchToggle:hover {
    background: rgba(255,255,255,0.18) !important;
}

/* --- Web search results cards --- */
.web-search-results-block {
    background: transparent !important;
    border: none !important;
    border-radius: 1rem !important;
}

.web-search-header {
    color: var(--dark-text) !important;
}

.web-search-title-text { color: var(--dark-text) !important; }
.web-search-count { color: var(--dark-text-muted) !important; }
.web-search-icon { color: var(--dark-accent) !important; }

.web-search-source {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--dark-text) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.web-search-source:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.web-search-source-title { color: #ffffff !important; }
.web-search-source-domain { color: var(--dark-text-muted) !important; }
.web-search-source-date { color: var(--dark-text-muted) !important; }

.web-search-source-preview {
    background: #1e1e1e !important;
}

.web-search-source-body {
    background: inherit !important;
}
.web-search-nav {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

.web-search-nav:hover {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

/* Web search streaming animation */
.web-search-streaming,
.web-search-results {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
}

/* --- Reasoning accordion --- */
/* 🔥 2026-04-23: ПЛОСКИЙ ВИД — без фона и бордера.
   Раньше тут был background: var(--dark-surface-2) + border: 1px solid var(--dark-border).
   Теперь аккордеон визуально часть сообщения: только иконка + текст + timeline-фазы. */
.reasoning-accordion {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.reasoning-accordion-header {
    color: var(--dark-text-secondary) !important;
    background: transparent !important;
}

.reasoning-accordion-header:hover {
    /* Без фона — только подсветка текста (см. правила ниже) */
    background: transparent !important;
}

.reasoning-accordion-header:hover .reasoning-accordion-title,
.reasoning-accordion-header:hover .reasoning-accordion-title i,
.reasoning-accordion-header:hover .reasoning-accordion-toggle i,
.reasoning-accordion-header:hover .reasoning-running-phrase {
    color: #e8e8e8 !important;
}

.reasoning-accordion-title { color: var(--dark-text-secondary) !important; }
.reasoning-accordion-title i { color: var(--dark-accent) !important; }

.reasoning-accordion-content {
    border-top: none !important;
    background: transparent !important;
    color: var(--dark-text-secondary) !important;
}

.reasoning-text { color: var(--dark-text-secondary) !important; }

/* 🔍 KB Search Accordion - Dark theme */
.kb-search-accordion-title { color: var(--dark-text-secondary) !important; }
.kb-search-accordion-title i { color: var(--dark-text-secondary) !important; }
.kb-search-step-text { color: var(--dark-text-secondary) !important; }

/* --- Meeting mode --- */
.meeting-toggle-container {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
}

.meeting-mode-btn {
    color: #9a9a9a !important;
}

.meeting-mode-btn:hover,
.meeting-mode-btn.active {
    color: #c0c0c0 !important;
    background: rgba(255,255,255,0.08) !important;
}

.meeting-stage {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: var(--dark-text) !important;
}

.meeting-message-container {
    background: transparent !important;
    color: var(--dark-text) !important;
}

.meeting-assistant-card {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: var(--dark-text) !important;
}

.meeting-limit-modal {
    background: #2a2a2a !important;
    border: none !important;
    color: var(--dark-text) !important;
}

/* --- Image generation --- */
.imagegen-controls {
    color: var(--dark-text-muted) !important;
}

.imagegen-control-label { color: #666 !important; }

.imagegen-control-btn {
    background: transparent !important;
    color: #777 !important;
}

.imagegen-control-btn:hover {
    background: rgba(255,255,255,0.04) !important;
    color: #b4b4b4 !important;
}

.imagegen-control-btn.active {
    background: rgba(255,255,255,0.1) !important;
    color: #ececec !important;
}

.imagegen-limit-badge {
    background: var(--dark-surface-3) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
}

.imagegen-limit-badge.limit-ok { color: #22c55e !important; }
.imagegen-limit-badge.limit-low { color: #f59e0b !important; }
.imagegen-limit-badge.limit-zero { color: #ef4444 !important; }

.imagegen-result {
    border-radius: 1rem !important;
    overflow: hidden !important;
    border: 1px solid var(--dark-border) !important;
}

.imagegen-result-actions button {
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

.imagegen-error-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--dark-text) !important;
}

.imagegen-upload-area-btn {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
}

.imagegen-upload-area-btn:hover {
    border-color: var(--dark-accent) !important;
    background: rgba(255,255,255,0.06) !important;
}

/* --- Save/Bookmark button --- */
.save-btn,
.save-btn-desktop {
    color: var(--dark-text-muted) !important;
    background: transparent !important;
}

.save-btn:hover,
.save-btn-desktop:hover {
    color: var(--dark-text) !important;
    background: rgba(255,255,255,0.06) !important;
}

.save-btn.active i,
.save-btn-desktop.active i {
    color: var(--dark-accent) !important;
}

/* --- Toast notification --- */
.toast {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* --- Modals --- */
.modal {
    background-color: rgba(0,0,0,0.7) !important;
}

.upgrade-modal-overlay {
    background: #212121 !important;
}

.modal > div,
.upgrade-modal-overlay > div,
.upgrade-modal {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--dark-text) !important;
}

/* Fix: shareModal и deleteModal должны иметь собственный фон */
#shareModal > div,
#deleteModal > div {
    background: var(--dark-surface, #1e1e1e) !important;
    border: 1px solid var(--dark-border, rgba(255,255,255,0.1)) !important;
    color: var(--dark-text, #e0e0e0) !important;
}

#shareModal > div h3,
#deleteModal > div h3 {
    color: var(--dark-text, #e0e0e0) !important;
}

#shareModal > div p,
#shareModal > div .text-gray-600 {
    color: var(--dark-text-muted, #999) !important;
}

#shareModal > div input {
    background: var(--dark-surface-2, #2a2a2a) !important;
    border-color: var(--dark-border, rgba(255,255,255,0.1)) !important;
    color: var(--dark-text, #e0e0e0) !important;
}

#shareModal > div button.text-gray-600,
#shareModal > div #cancelShare {
    color: var(--dark-text-muted, #999) !important;
}

#shareModal > div button.text-gray-600:hover,
#shareModal > div #cancelShare:hover {
    background: var(--dark-surface-2, #2a2a2a) !important;
}

[class*="modal-content"],
[class*="modal-dialog"] {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Upgrade modal cards */
.upgrade-plan-card,
[class*="plan-card"] {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.upgrade-plan-card:hover,
[class*="plan-card"]:hover {
    border-color: var(--dark-accent) !important;
}

/* --- Scroll down button --- */
.scroll-down-btn {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

.scroll-down-btn:hover {
    background: var(--dark-surface-3) !important;
}

.scroll-down-btn i { color: var(--dark-text) !important; }

/* --- File preview --- */
.file-preview-item,
#filePreviewContainer {
    background: var(--dark-surface-3) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

.file-item-name { color: var(--dark-text) !important; }
.file-item-meta { color: var(--dark-text-muted) !important; }

/* --- Image preview --- */
.image-preview-item {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(255,255,255,0.04) !important;
}

/* --- Message edit textarea --- */
.message-edit-textarea {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* --- Chat loading/thinking indicators --- */
.thinking-indicator,
.typing-indicator,
[class*="loading-indicator"] {
    color: var(--dark-text-muted) !important;
}

.thinking-indicator .dot,
.typing-indicator .dot {
    background: var(--dark-accent) !important;
}

/* --- Delete/Rename modals --- */
.delete-modal-content,
.rename-modal-content,
.share-modal-content {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.delete-modal-content input,
.rename-modal-content input {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* --- Message limit reached --- */
.message-limit-banner,
.context-exhausted-banner {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

.context-banner-button {
    background: var(--dark-accent) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   🔢 CONTEXT USAGE INDICATOR — плашка над floating-bottom
   ═══════════════════════════════════════════════════════ */
.context-usage-indicator {
    position: relative;
    z-index: 1040;
    max-width: 48rem;
    margin: 0 auto;
    padding: 8px 12px 0;
    display: none;
    pointer-events: auto;
}

.context-usage-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 40px 12px 16px;
    border-radius: 12px;
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: ctxSlideUp 0.35s ease-out;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    pointer-events: auto;
    cursor: default;
    position: relative;
}

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

.ctx-progress-wrap {
    flex: 1 1 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
    min-width: 60px;
}

.ctx-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease, background 0.4s ease;
    width: 0%;
}

/* Цвета прогресс-бара по уровням */
.ctx-progress-fill.ctx-ok       { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ctx-progress-fill.ctx-caution  { background: linear-gradient(90deg, #eab308, #facc15); }
.ctx-progress-fill.ctx-warning  { background: linear-gradient(90deg, #f97316, #fb923c); }
.ctx-progress-fill.ctx-critical { background: linear-gradient(90deg, #ef4444, #f87171); }

.ctx-text {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    white-space: normal;
    line-height: 1.3;
    min-width: 0;
}

.ctx-text-main {
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.ctx-percent {
    font-size: 11px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    white-space: nowrap;
}

.ctx-percent.ctx-ok       { color: #4ade80; }
.ctx-percent.ctx-caution  { color: #facc15; }
.ctx-percent.ctx-warning  { color: #fb923c; }
.ctx-percent.ctx-critical { color: #f87171; }

.ctx-close-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
    pointer-events: auto;
    z-index: 1051;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.ctx-close-btn:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.1);
}

/* Tooltip info trigger */
.ctx-info-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: rgba(255,255,255,0.35);
    margin-left: 4px;
    font-size: 12px;
    transition: color 0.2s;
}
.ctx-info-trigger:hover {
    color: rgba(255,255,255,0.7);
}
.ctx-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 12px 14px;
    background: rgba(20, 20, 20, 0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 1060;
    pointer-events: none;
    white-space: normal;
}
.ctx-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(20, 20, 20, 0.97);
}
.ctx-info-trigger:hover .ctx-tooltip {
    display: block;
}
body.light-theme .ctx-info-trigger {
    color: rgba(0,0,0,0.3) !important;
}
body.light-theme .ctx-info-trigger:hover {
    color: rgba(0,0,0,0.6) !important;
}
body.light-theme .ctx-tooltip {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.75) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
}
body.light-theme .ctx-tooltip::after {
    border-top-color: rgba(255,255,255,0.98) !important;
}
@media (max-width: 640px) {
    .ctx-tooltip {
        width: 240px;
        left: 0;
        transform: translateX(-20px);
        font-size: 11px;
        padding: 10px 12px;
    }
    .ctx-tooltip::after {
        left: 28px;
        transform: none;
    }
}

.ctx-new-chat-btn {
    display: none; /* показывается при critical */
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    text-decoration: none;
    flex-shrink: 0;
    pointer-events: auto;
    position: relative;
    z-index: 1051;
}

.ctx-new-chat-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    text-decoration: none;
}

.ctx-new-chat-btn.visible {
    display: inline-flex;
}

/* Подсветка для критического состояния (без пульсации) */
.context-usage-bar.ctx-bar-critical {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15);
}

@keyframes ctxPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15); }
    50%      { box-shadow: 0 2px 16px rgba(239, 68, 68, 0.25); }
}

/* Мобильная адаптация */
@media (max-width: 640px) {
    .context-usage-indicator { padding: 0 8px; }
    .context-usage-bar {
        flex-wrap: wrap;
        padding: 12px 36px 10px 12px;
        gap: 8px;
        border-radius: 10px;
    }
    .ctx-progress-wrap {
        order: 1;
        flex: 0 0 100%;
    }
    .ctx-text {
        order: 2;
        font-size: 11px;
        white-space: normal;
        flex: 1;
        min-width: 0;
    }
    .ctx-percent {
        order: 3;
        font-size: 10px;
        min-width: auto;
    }
    .ctx-new-chat-btn {
        order: 4;
        font-size: 10px;
        padding: 3px 8px;
    }
    .ctx-close-btn {
        top: 4px;
        right: 6px;
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .context-usage-indicator { padding: 0 4px; }
    .context-usage-bar {
        padding: 10px 32px 8px 10px;
        gap: 6px;
        border-radius: 8px;
    }
    .ctx-text {
        font-size: 10px;
    }
    .ctx-percent {
        font-size: 9px;
    }
    .ctx-close-btn {
        top: 3px;
        right: 4px;
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
}

/* --- Mobile overlay --- */
#mobileOverlay {
    background: rgba(0,0,0,0.7) !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

#mobileOverlay.hidden {
    display: block !important;
    opacity: 0;
    pointer-events: none;
}

/* --- Loading spinner --- */
.loading-spinner-small {
    border-color: var(--dark-border) !important;
    border-top-color: var(--dark-text-muted) !important;
}

/* --- Chats list loading --- */
#chatsLoadingIndicator .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

/* --- Empty state --- */
.text-center.py-8.text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.text-center.py-8.text-gray-500 i {
    color: var(--dark-text-muted) !important;
}

/* --- Math formulas dark mode --- */
.prose .katex { color: var(--dark-text) !important; }

.prose .katex:not(.katex-display) {
    background: rgba(255,255,255,0.06) !important;
}

.prose .katex-display {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* --- Magic Blocks --- */
#magic-blocks-container {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* --- Misc overrides for Tailwind utility classes --- */
.bg-white { background: var(--dark-bg) !important; }
.bg-gray-50 { background: var(--dark-surface) !important; }
.bg-gray-100 { background: var(--dark-surface-2) !important; }
.bg-gray-200 { background: var(--dark-surface-3) !important; }
.border-gray-200, .border-gray-100, .border-gray-300 { border-color: var(--dark-border) !important; }
.text-gray-900 { color: var(--dark-text) !important; }
.text-gray-800 { color: var(--dark-text) !important; }
.text-gray-700 { color: var(--dark-text-secondary) !important; }
.text-gray-600 { color: var(--dark-text-secondary) !important; }
.text-gray-500 { color: var(--dark-text-muted) !important; }
.text-gray-400 { color: var(--dark-text-muted) !important; }

.hover\:bg-gray-50:hover { background: rgba(255,255,255,0.06) !important; }
.hover\:bg-gray-100:hover { background: rgba(255,255,255,0.08) !important; }
.hover\:bg-gray-200:hover { background: rgba(255,255,255,0.1) !important; }
.hover\:text-gray-700:hover { color: #c0c0c0 !important; }

/* Inline code blocks (bg-gray-100 font-mono) — стильные серые */
.bg-gray-100.font-mono,
code.bg-gray-100,
.prose .bg-gray-100.font-mono {
    background: rgba(255,255,255,0.1) !important;
    color: #e8b4b4 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 5px !important;
    padding: 0.15em 0.45em !important;
    font-size: 0.85em !important;
}

.shadow-lg {
    box-shadow: none !important;
}

/* Ensure .chat-sidebar close button is visible */
#closeChatSidebar {
    color: var(--dark-text-muted) !important;
}

#closeChatSidebar:hover {
    color: var(--dark-text) !important;
}

/* --- Voice equalizer --- */
.voice-equalizer {
    background: transparent !important;
}

.voice-equalizer .equalizer-bar {
    background: rgba(255, 255, 255, 0.2) !important;
}

.voice-equalizer .equalizer-bar.active-bar {
    background: rgba(255, 255, 255, 0.65) !important;
}

.voice-equalizer .equalizer-bar.loud {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* --- Animated gradient for thinking text --- */
.animated-gradient-text {
    background: linear-gradient(90deg, var(--dark-accent), #888, #f59e0b, var(--dark-accent)) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* --- Selection --- */
::selection {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

/* --- Image overlay (lightbox) --- */
.image-overlay,
[class*="image-overlay"] {
    background: rgba(0,0,0,0.9) !important;
}

/* --- Share modal --- */
.share-modal-overlay {
    background: rgba(0,0,0,0.7) !important;
}

/* --- Bottom info text (message limit etc) --- */
.floating-bottom p {
    color: var(--dark-text-muted) !important;
}

.floating-bottom a {
    color: var(--dark-accent-hover) !important;
}

/* --- Instruction modal --- */
.instruction-modal-overlay {
    background: rgba(0,0,0,0.7) !important;
}

/* Force instruction modal to be WHITE */
.instruction-modal-container {
    background: #ffffff !important;
    color: #222 !important;
    border: none !important;
}

.instruction-modal-header {
    background: #ffffff !important;
    border-bottom-color: #f0f0ee !important;
}

.instruction-modal-header h3 {
    color: #222 !important;
}

.instruction-modal-header h3 i {
    color: #767676 !important;
}

.instruction-modal-body {
    background: #ffffff !important;
    color: #444 !important;
}

.instruction-modal-body h1,
.instruction-modal-body h2,
.instruction-modal-body h3,
.instruction-modal-body strong {
    color: #222 !important;
}

.instruction-modal-body p,
.instruction-modal-body li {
    color: #444 !important;
}

.instruction-close-btn {
    background: #f5f5f3 !important;
    color: #767676 !important;
}

.instruction-close-btn:hover {
    background: #eee !important;
    color: #222 !important;
}

.instruction-modal-footer {
    background: #ffffff !important;
    border-top-color: #f0f0ee !important;
}

.instruction-modal-footer button {
    background: #222 !important;
    color: #fff !important;
}

.instruction-modal-footer button:hover {
    background: #444 !important;
}

.instruction-modal-content,
[class*="instruction-content"] {
    background: #ffffff !important;
    color: #222 !important;
}

/* --- Rating modal --- */
[class*="rating-modal"] {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* --- Document generation buttons --- */
[class*="doc-gen"],
[class*="document-gen"] {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* --- Drop zone overlay --- */
.drop-zone-overlay {
    background: rgba(33,33,33,0.9) !important;
    border-color: var(--dark-accent) !important;
}

.drop-zone-content {
    color: var(--dark-text) !important;
}

.drop-zone-content i {
    color: var(--dark-accent) !important;
}

/* --- Custom highlighting for inline code in messages --- */
.prose :not(pre) > code {
    background: rgba(255,255,255,0.1) !important;
    color: #e8b4b4 !important;
    padding: 0.15em 0.45em !important;
    border-radius: 0.35em !important;
    font-size: 0.85em !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* --- Smooth transitions for interactive elements --- */
.sidebar-item,
.sidebar-nav-item,
.quick-button,
.action-btn,
.web-search-source,
.imagegen-control-btn,
.file-upload-btn,
.save-btn,
.save-btn-desktop {
    transition: all 0.15s ease !important;
}

/* --- Focus states --- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(255,255,255,0.2) !important;
    outline-offset: 2px !important;
}

/* Sidebar bottom border fix */
.chat-sidebar .border-b {
    border-color: var(--dark-border) !important;
}

/* Ensure all input borders are dark */
input, textarea, select {
    border-color: var(--dark-border) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: rgba(255,255,255,0.2) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Fix white gaps */
.flex-1.flex.flex-col {
    background: var(--dark-bg) !important;
}

/* --- END DARK THEME --- */

/* ========================================
   🌞 LIGHT THEME — applied via body.light-theme
   ======================================== */
body.light-theme {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

body.light-theme .flex.h-screen {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* --- Skeleton light --- */
body.light-theme .skeleton {
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
}
body.light-theme .skeleton-dark {
    background: linear-gradient(90deg, #ddd 25%, #eee 50%, #ddd 75%) !important;
    background-size: 200% 100% !important;
}
body.light-theme .message-skeleton-user .message-skeleton-bubble {
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
}
body.light-theme .message-skeleton-user .message-skeleton-line {
    background: rgba(0,0,0,0.06) !important;
}

/* --- Scrollbar light --- */
body.light-theme ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
body.light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
body.light-theme * { scrollbar-color: rgba(0,0,0,0.15) transparent; }

/* --- Sidebar light --- */
body.light-theme .chat-sidebar {
    background: #f7f7f8 !important;
    border-right: 1px solid #e5e5e5 !important;
}
body.light-theme .chat-sidebar .p-3 { border-color: #e5e5e5 !important; }

body.light-theme .chat-sidebar img[src*="sb-logo"] {
    filter: none !important;
}

body.light-theme .sidebar-nav-section {
    border-bottom-color: #e5e5e5 !important;
}
body.light-theme .sidebar-nav-item {
    color: #555 !important;
}
body.light-theme .sidebar-nav-item:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .sidebar-item {
    color: #555 !important;
}
body.light-theme .sidebar-item:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .sidebar-item.bg-gray-200,
body.light-theme .sidebar-item[class*="bg-gray-200"] {
    background: rgba(0,0,0,0.08) !important;
    color: #1a1a1a !important;
}
body.light-theme .sidebar-item .chat-menu-btn {
    color: #999 !important;
}
body.light-theme .sidebar-item .chat-menu-btn:hover {
    background: rgba(0,0,0,0.08) !important;
    color: #1a1a1a !important;
}
body.light-theme .sidebar-item:hover .chat-menu-btn:hover {
    background-color: rgba(0,0,0,0.1) !important;
}
body.light-theme .chat-group-header {
    color: #999 !important;
}

/* Sidebar upgrade info */
body.light-theme .sidebar-upgrade-info {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .sidebar-upgrade-info h3 { color: #1a1a1a !important; }
body.light-theme .sidebar-upgrade-info p { color: #777 !important; }
body.light-theme .sidebar-upgrade-btn {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}
body.light-theme .sidebar-upgrade-btn:hover {
    background: #333 !important;
}

/* Sidebar user footer */
body.light-theme .sidebar-user-footer {
    border-top-color: #e5e5e5 !important;
    background: #f7f7f8 !important;
}
body.light-theme .sidebar-user-block {
    color: #1a1a1a !important;
}
body.light-theme .sidebar-user-block:hover {
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .sidebar-user-avatar {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .sidebar-user-avatar span { color: #fff !important; }
body.light-theme .sidebar-user-name { color: #1a1a1a !important; }
body.light-theme .sidebar-user-plan { color: #999 !important; }
body.light-theme .sidebar-user-chevron { color: #999 !important; }
body.light-theme .sidebar-user-dropdown {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
body.light-theme .sidebar-dropdown-item {
    color: #555 !important;
}
body.light-theme .sidebar-dropdown-item:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .sidebar-dropdown-logout { color: #ef4444 !important; }
body.light-theme .sidebar-dropdown-logout:hover { background: rgba(239,68,68,0.08) !important; }
body.light-theme .sidebar-guest-avatar {
    background: #e8e8e8 !important;
    color: #999 !important;
}

/* Sidebar toggle & collapsed */
body.light-theme .sidebar-collapse-logo img[src*="sb-logosvg"] {
    filter: none !important;
}
body.light-theme .sidebar-toggle-btn img {
    filter: brightness(0) invert(0.3) !important;
}
body.light-theme .sidebar-toggle-btn:hover img {
    filter: brightness(0) invert(0.1) !important;
}
body.light-theme .sidebar-collapsed-nav a,
body.light-theme .sidebar-collapsed-nav button {
    color: #777 !important;
}
body.light-theme .sidebar-collapsed-nav a:hover,
body.light-theme .sidebar-collapsed-nav button:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .sidebar-collapsed-nav img {
    filter: brightness(0) invert(0.3) !important;
}

/* --- Dropdown menus light --- */
body.light-theme .dropdown-menu {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
body.light-theme .dropdown-menu button,
body.light-theme .dropdown-menu a {
    color: #555 !important;
}
body.light-theme .dropdown-menu button:hover,
body.light-theme .dropdown-menu a:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .dropdown-menu .hover\:bg-gray-50:hover {
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .dropdown-menu .text-red-600 {
    color: #ef4444 !important;
}

/* --- Desktop header light --- */
body.light-theme .desktop-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .desktop-header::after {
    background: linear-gradient(to bottom, #ffffff 0%, transparent 100%) !important;
}
body.light-theme .desktop-header h1,
body.light-theme .desktop-header .text-base {
    color: #1a1a1a !important;
}
body.light-theme .desktop-header .text-xs,
body.light-theme .desktop-header .text-gray-500 {
    color: #999 !important;
}
body.light-theme .desktop-header .bg-gray-100 {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .desktop-header .bg-gray-100:hover {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .desktop-header .text-gray-500:hover,
body.light-theme .desktop-header .hover\:text-gray-700:hover {
    color: #1a1a1a !important;
}

/* Share button light */
body.light-theme #shareBtnDesktop,
body.light-theme #shareBtn {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme #shareBtnDesktop:hover,
body.light-theme #shareBtn:hover {
    background: #e5e5e5 !important;
    border-color: #ddd !important;
    color: #1a1a1a !important;
}

/* Header menu button light */
body.light-theme #headerMenuBtnDesktop {
    color: #999 !important;
}
body.light-theme #headerMenuBtnDesktop:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}

/* --- Mobile header light --- */
body.light-theme .mobile-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .mobile-header .text-gray-500 { color: #999 !important; }
body.light-theme .mobile-header .text-gray-500:hover { color: #1a1a1a !important; }
body.light-theme .mobile-header .assistant-name { color: #1a1a1a !important; }
body.light-theme .mobile-header .assistant-company { color: #999 !important; }
body.light-theme .mobile-header .bg-gray-100 {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}

/* --- Chat container light --- */
body.light-theme .chat-container {
    background: #ffffff !important;
}

/* --- Messages light --- */
body.light-theme .message-bubble {
    color: #1a1a1a !important;
}
body.light-theme .message-bubble.bg-gray-100,
body.light-theme .message-bubble[class*="bg-gray-1"],
body.light-theme div[class*="user-message"] .message-bubble,
body.light-theme .flex.justify-end .message-bubble {
    background: #f0f0f0 !important;
    color: #1a1a1a !important;
}

/* Assistant messages light */
body.light-theme .assistant-message,
body.light-theme .assistant-response {
    color: #1a1a1a !important;
    background: transparent !important;
}

/* Prose light */
body.light-theme .prose {
    color: #1a1a1a !important;
}
body.light-theme .prose h1, body.light-theme .prose h2, body.light-theme .prose h3,
body.light-theme .prose h4, body.light-theme .prose h5, body.light-theme .prose h6 {
    color: #111 !important;
}
body.light-theme .prose p, body.light-theme .prose li, body.light-theme .prose td, body.light-theme .prose th {
    color: #1a1a1a !important;
}
body.light-theme .prose strong, body.light-theme .prose b {
    color: #111 !important;
}
body.light-theme .prose a {
    color: #2563eb !important;
}
body.light-theme .prose a:hover {
    color: #1d4ed8 !important;
}
body.light-theme .prose blockquote {
    border-left-color: #ddd !important;
    color: #555 !important;
    background: #f7f7f8 !important;
}
body.light-theme .prose code {
    background: #f0f0f0 !important;
    color: #c7254e !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .prose pre {
    background: #f7f7f8 !important;
}
body.light-theme .prose pre code {
    background: transparent !important;
    color: #1a1a1a !important;
    border: none !important;
}
body.light-theme .prose table {
    border: 1px solid #e5e5e5 !important;
    background: #fff !important;
}
body.light-theme .prose thead { border-bottom: 2px solid #ddd !important; }
body.light-theme .prose th {
    color: #111 !important;
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .prose td {
    border: 1px solid #e5e5e5 !important;
    color: #333 !important;
    background: transparent !important;
}
body.light-theme .prose tr:nth-child(even) td { background: #fafafa !important; }
body.light-theme .prose tr:nth-child(odd) td { background: transparent !important; }
body.light-theme .prose tr:hover td { background: transparent !important; }
body.light-theme .prose hr { border-color: #e5e5e5 !important; }
body.light-theme .prose ul li::marker { color: #999 !important; }
body.light-theme .prose ul li ul li::marker { color: #bbb !important; }
body.light-theme .prose ol li::marker { color: #999 !important; }

body.light-theme .prose ul li input[type="checkbox"] {
    border: 2px solid #ccc !important;
    background: transparent !important;
}
body.light-theme .prose ul li input[type="checkbox"]:checked {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* Code blocks light */
body.light-theme pre[class*="language-"], body.light-theme .hljs {
    background: #f7f7f8 !important;
}
body.light-theme .code-header, body.light-theme [class*="copy-code"] {
    background: #f0f0f0 !important;
    color: #777 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}
body.light-theme .code-copy-btn {
    color: #999 !important;
}
body.light-theme .code-copy-btn:hover, body.light-theme [class*="copy-code"]:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .code-block-container {
    border: 1px solid #e5e5e5 !important;
    background: #f7f7f8 !important;
}

/* Syntax highlighting (light) */
body.light-theme .hljs-keyword, body.light-theme .hljs-selector-tag { color: #d73a49 !important; }
body.light-theme .hljs-string, body.light-theme .hljs-attr { color: #032f62 !important; }
body.light-theme .hljs-number, body.light-theme .hljs-literal { color: #005cc5 !important; }
body.light-theme .hljs-comment { color: #6a737d !important; }
body.light-theme .hljs-function, body.light-theme .hljs-title { color: #6f42c1 !important; }
body.light-theme .hljs-built_in { color: #e36209 !important; }
body.light-theme .hljs-variable, body.light-theme .hljs-template-variable { color: #e36209 !important; }
body.light-theme .hljs-type, body.light-theme .hljs-class .hljs-title { color: #22863a !important; }

/* --- Message actions light --- */
body.light-theme .message-actions .action-btn {
    color: #bbb !important;
    background: transparent !important;
}
body.light-theme .message-actions .action-btn:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .action-btn.active,
body.light-theme .action-btn.liked,
body.light-theme .action-btn.disliked {
    color: #1a1a1a !important;
}

/* --- Welcome screen light --- */
body.light-theme #welcomeScreen,
body.light-theme #welcomeScreen * {
    color: #1a1a1a !important;
}
body.light-theme #welcomeScreen .imagegen-instruction-btn {
    color: #fff !important;
    background: #1a1a1a !important;
}
body.light-theme #welcomeScreen .imagegen-instruction-btn:hover {
    background: #333 !important;
    color: #fff !important;
}
body.light-theme #welcomeScreen h2 {
    color: #111 !important;
}
body.light-theme #welcomeScreen .text-gray-600,
body.light-theme #welcomeScreen .text-gray-500 {
    color: #777 !important;
}
body.light-theme .welcome-avatar {
    background: linear-gradient(135deg, #1a1a1a, #555) !important;
    box-shadow: none !important;
}
body.light-theme .description-wrapper {
    color: #777 !important;
}
body.light-theme .show-more-btn {
    color: #555 !important;
}

/* CTA section light */
body.light-theme .cta-section {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .cta-section h3 { color: #1a1a1a !important; }
body.light-theme .cta-section p { color: #777 !important; }
body.light-theme .cta-button {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .cta-button:hover {
    background: #333 !important;
}

/* Image generation welcome CTA light */
body.light-theme .imagegen-welcome-cta {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
}
body.light-theme .imagegen-welcome-cta h3 { color: #1a1a1a !important; }
body.light-theme .imagegen-welcome-cta p { color: #777 !important; }
body.light-theme .imagegen-instruction-btn {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .imagegen-instruction-btn:hover {
    background: #333 !important;
}

/* --- Floating bottom input light --- */
body.light-theme .floating-bottom {
    background: linear-gradient(to top, #ffffff 80%, rgba(255,255,255,0.8) 90%, transparent) !important;
}
body.light-theme .floating-input {
    background: #f0f0f0 !important;
    border: none !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
}
body.light-theme .floating-input:focus-within {
    border: none !important;
    box-shadow: none !important;
}

/* Textarea light */
body.light-theme #messageInput,
body.light-theme textarea#messageInput,
body.light-theme .floating-input textarea {
    background: transparent !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
    caret-color: #1a1a1a !important;
}
body.light-theme #messageInput::placeholder,
body.light-theme textarea#messageInput::placeholder {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
}

/* Send button light */
body.light-theme #sendButton {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme #sendButton:hover:not(:disabled) {
    background: #333 !important;
}
body.light-theme #sendButton:disabled {
    background: #ccc !important;
    color: #999 !important;
}

/* Quick action buttons light */
body.light-theme .quick-button {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .quick-button:hover {
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    color: #1a1a1a !important;
}

/* Bottom controls light */
body.light-theme .file-upload-btn {
    color: #999 !important;
    background: transparent !important;
}
body.light-theme .file-upload-btn:hover {
    color: #555 !important;
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .voice-btn {
    color: #999 !important;
    background: transparent !important;
}
body.light-theme .voice-btn:hover {
    color: #555 !important;
    background: rgba(0,0,0,0.05) !important;
}

/* --- Web search toggle light --- */
body.light-theme .web-search-toggle,
body.light-theme #webSearchToggle {
    color: #777 !important;
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
}
body.light-theme .web-search-toggle.active,
body.light-theme #webSearchToggle.active {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .web-search-toggle:hover,
body.light-theme #webSearchToggle:hover {
    background: #e5e5e5 !important;
}

/* --- Web search results light --- */
body.light-theme .web-search-results-block {
    background: transparent !important;
}
body.light-theme .web-search-header { color: #1a1a1a !important; }
body.light-theme .web-search-title-text { color: #1a1a1a !important; }
body.light-theme .web-search-count { color: #999 !important; }
body.light-theme .web-search-icon { color: #555 !important; }
body.light-theme .web-search-source {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
}
body.light-theme .web-search-source:hover {
    background: #f0f0f0 !important;
    border-color: #ddd !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}
body.light-theme .web-search-source-title { color: #1a1a1a !important; }
body.light-theme .web-search-source-domain { color: #999 !important; }
body.light-theme .web-search-source-date { color: #999 !important; }
body.light-theme .web-search-source-preview { background: #f0f0f0 !important; }
body.light-theme .web-search-nav {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .web-search-nav:hover {
    background: #f0f0f0 !important;
}
body.light-theme .web-search-streaming,
body.light-theme .web-search-results {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
}

/* --- Meeting mode light --- */
body.light-theme .meeting-toggle-container {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
}
body.light-theme .meeting-mode-btn { color: #999 !important; }
body.light-theme .meeting-mode-btn:hover,
body.light-theme .meeting-mode-btn.active {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .meeting-stage {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-stage:hover {
    border-color: #ccc !important;
}
body.light-theme .meeting-stage.thinking {
    border-color: #ddd !important;
    background: #f0f0f0 !important;
}
body.light-theme .meeting-stage.complete {
    border-color: #e5e5e5 !important;
    background: #f7f7f8 !important;
}
body.light-theme .meeting-stage-header:hover {
    background: rgba(0,0,0,0.03) !important;
}
body.light-theme .meeting-stage-name {
    color: #1a1a1a !important;
}
body.light-theme .meeting-stage-avatar {
    background: #e5e5e5 !important;
    border: 1px solid #ddd !important;
    color: #555 !important;
}
body.light-theme .meeting-stage.complete .meeting-stage-avatar {
    border-color: #ccc !important;
    background: #e5e5e5 !important;
}
body.light-theme .meeting-stage-status-text {
    color: #999 !important;
}
body.light-theme .meeting-stage-toggle {
    color: #999 !important;
}
body.light-theme .meeting-stage-content {
    border-top: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .streaming-content-meeting {
    color: #333 !important;
}
body.light-theme .meeting-stage-content .prose,
body.light-theme .meeting-stage-content .prose * {
    color: #1a1a1a !important;
}
body.light-theme .meeting-stage-content .prose h1,
body.light-theme .meeting-stage-content .prose h2,
body.light-theme .meeting-stage-content .prose h3,
body.light-theme .meeting-stage-content .prose strong {
    color: #111 !important;
}
body.light-theme .meeting-stage-content .prose p,
body.light-theme .meeting-stage-content .prose li {
    color: #333 !important;
}
body.light-theme .meeting-stage.complete .assistant-badge {
    background: #e5e5e5 !important;
    color: #555 !important;
    border-color: #ddd !important;
}

/* Meeting summary / protocol light */
body.light-theme .meeting-summary {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-summary .prose,
body.light-theme .meeting-summary .prose * {
    color: #1a1a1a !important;
}
body.light-theme .meeting-summary .prose h1,
body.light-theme .meeting-summary .prose h2,
body.light-theme .meeting-summary .prose h3,
body.light-theme .meeting-summary .prose strong {
    color: #111 !important;
}
body.light-theme .meeting-divider {
    background: linear-gradient(to right, transparent, #e5e5e5 30%, #e5e5e5 70%, transparent) !important;
}
body.light-theme .meeting-final-header {
    border-left-color: #999 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-header-simple {
    border-left-color: #999 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-header-text {
    color: #555 !important;
}

/* Meeting loader light */
body.light-theme .meeting-initial-loader {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .meeting-loader-icon-mini {
    background: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .meeting-loader-title {
    color: #555 !important;
}
body.light-theme .meeting-loader-subtitle {
    color: #999 !important;
}
body.light-theme .meeting-loader-dot {
    background: #999 !important;
}

/* Reasoning accordion FULL light theme */
body.light-theme .reasoning-accordion {
    /* 2026-04-23: убран фон/бордер */
    background: transparent !important;
    border: none !important;
}
body.light-theme .reasoning-accordion-header {
    color: #555 !important;
    background: transparent !important;
}
body.light-theme .reasoning-accordion-header:hover {
    background: transparent !important;
}

body.light-theme .reasoning-accordion-header:hover .reasoning-accordion-title,
body.light-theme .reasoning-accordion-header:hover .reasoning-accordion-title i,
body.light-theme .reasoning-accordion-header:hover .reasoning-accordion-toggle i,
body.light-theme .reasoning-accordion-header:hover .reasoning-running-phrase {
    color: #111827 !important;
}

body.light-theme .reasoning-accordion-title {
    color: #555 !important;
}
body.light-theme .reasoning-accordion-title i {
    color: #555 !important;
}
body.light-theme .reasoning-accordion-content {
    /* 2026-04-23: убран фон и бордер */
    border-top: none !important;
    color: #333 !important;
    background: transparent !important;
}
body.light-theme .reasoning-accordion-content pre {
    background: #eee !important;
}
body.light-theme .reasoning-accordion-content code {
    background: #e5e5e5 !important;
    color: #c7254e !important;
}
body.light-theme .reasoning-text {
    color: #333 !important;
}
body.light-theme .reasoning-accordion-content .prose,
body.light-theme .reasoning-accordion-content .prose * {
    color: #333 !important;
}

/* 🔍 KB Search Accordion - Light theme */
body.light-theme .kb-search-accordion-title {
    color: #555 !important;
}
body.light-theme .kb-search-accordion-title i {
    color: #888 !important;
}
body.light-theme .kb-search-accordion-title .kb-search-status {
    color: #999 !important;
}
body.light-theme .kb-search-accordion-toggle i {
    color: #999 !important;
}
body.light-theme .kb-search-step-text {
    color: #666 !important;
}
body.light-theme .kb-search-step-icon {
    color: #999 !important;
}
body.light-theme .kb-search-step-icon.step-done {
    color: #16a34a !important;
}
body.light-theme .kb-search-spinner .spinner-icon {
    border-color: rgba(0,0,0,0.1) !important;
    border-top-color: #888 !important;
}

/* 📚 Light theme — user KB accordion */
body.light-theme .user-kb-accordion .kb-search-accordion-title {
    color: #555 !important;
}
body.light-theme .user-kb-accordion .kb-search-accordion-title i {
    color: #666 !important;
}

/* Meeting message container light */
body.light-theme .meeting-message-container {
    background: transparent !important;
    color: #1a1a1a !important;
}

/* --- Dropdown item dark class light override --- */
body.light-theme .dropdown-item-dark {
    color: #555 !important;
}
body.light-theme .dropdown-item-dark:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .dropdown-item-dark i {
    color: #777 !important;
}
body.light-theme .dropdown-item-dark:hover i {
    color: #555 !important;
}

/* --- Search badge light --- */
body.light-theme .search-badge {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #555 !important;
}

/* --- Chat menu dropdown (right-click on chat items) light --- */
body.light-theme .chat-menu-dropdown {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
body.light-theme .chat-menu-dropdown button {
    color: #555 !important;
}
body.light-theme .chat-menu-dropdown button:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .chat-menu-dropdown .text-red-500,
body.light-theme .chat-menu-dropdown .text-red-600 {
    color: #ef4444 !important;
}

/* --- Rename/Delete modal inner content light (bg-white already covered but ensure) --- */
body.light-theme #renameModal > div,
body.light-theme #deleteModal > div,
body.light-theme #shareModal > div {
    background: #fff !important;
    color: #1a1a1a !important;
}
body.light-theme #renameModal h3,
body.light-theme #deleteModal h3,
body.light-theme #shareModal h3 {
    color: #1a1a1a !important;
}
body.light-theme #renameModal input,
body.light-theme #renameInput {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme #deleteModal .bg-red-100 {
    background: #fef2f2 !important;
}
body.light-theme #deleteModal p {
    color: #555 !important;
}

/* --- Like/dislike animation light --- */
body.light-theme .like-animation i,
body.light-theme .dislike-animation i {
    color: #1a1a1a !important;
}

/* --- Spinner light --- */
body.light-theme .spinner {
    border-color: #e5e5e5 !important;
    border-top-color: #1a1a1a !important;
}
body.light-theme .modal-loading {
    background: rgba(255,255,255,0.8) !important;
}

/* --- Desktop header gradient overlay fix for light theme --- */
body.light-theme .desktop-header::after {
    background: linear-gradient(to bottom, #ffffff 0%, transparent 100%) !important;
}

/* --- Message counter text light --- */
body.light-theme #messageCounter {
    color: #999 !important;
}

/* --- Floating bottom controls area light --- */
body.light-theme .floating-bottom .text-xs {
    color: #999 !important;
}

/* --- Copy notification bubble light --- */
body.light-theme .copy-notification,
body.light-theme [class*="copy-notification"] {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* --- Image preview overlay light --- */
body.light-theme .imagegen-overlay,
body.light-theme #imagegenOverlay {
    background: rgba(0,0,0,0.85) !important;
}

/* --- Pinned chat indicator light --- */
body.light-theme .sidebar-item .bi-pin-angle-fill {
    color: #999 !important;
}

/* =============================================
   🔥 CRITICAL LIGHT THEME FIXES — v2
   ============================================= */

/* --- Thinking text shimmer (INVISIBLE on white without this!) --- */
body.light-theme .thinking-text {
    color: rgba(0, 0, 0, 0.15) !important;
}
body.light-theme .thinking-text::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.8) 40%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.8) 60%,
        transparent 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- Typing dots (spinner image) light --- */
body.light-theme .typing-dots img {
    filter: brightness(0) saturate(0) !important;
    opacity: 0.3 !important;
}

/* --- Web search skeleton cards light --- */
body.light-theme .web-search-skeleton-card {
    background: #e8e8e8 !important;
    border: 1px solid #ddd !important;
}
body.light-theme .skeleton-shimmer {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
    background-size: 200% 100% !important;
}
body.light-theme .skeleton-preview {
    background: #ddd !important;
}

/* --- Web search loading spinner light --- */
body.light-theme .web-search-loading-spinner {
    border: 2px solid #e5e5e5 !important;
    border-top-color: #555 !important;
}
body.light-theme .web-search-loading-text {
    color: #555 !important;
}

/* --- Spellbook toast — stays dark in ALL themes (by design) --- */

/* --- Meeting limit toast light theme (inline styles override) --- */
body.light-theme .meeting-limit-toast .rounded-xl[style] {
    background: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
body.light-theme .meeting-limit-toast h4[style] {
    color: #1a1a1a !important;
}
body.light-theme .meeting-limit-toast p[style] {
    color: #555 !important;
}
body.light-theme .meeting-limit-toast .w-8[style] {
    background: #f0f0f0 !important;
}
body.light-theme .meeting-limit-toast button[style] {
    color: #999 !important;
}

/* --- Mobile header inline style override (CRITICAL) --- */
body.light-theme .mobile-header,
body.light-theme .mobile-header[style],
body.light-theme div.mobile-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Desktop header inline style override --- */
body.light-theme .desktop-header,
body.light-theme .desktop-header[style] {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Streaming cursor light theme --- */
body.light-theme .streaming-cursor {
    background: #1a1a1a !important;
}

/* --- Animated gradient text light (reasoning thinking) --- */
body.light-theme .animated-gradient-text {
    background: linear-gradient(90deg, #555, #999, #b8860b, #555) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* --- Reasoning streaming indicator dots light --- */
body.light-theme .reasoning-streaming-indicator {
    color: #555 !important;
}
body.light-theme .reasoning-dot {
    background: #555 !important;
}

/* --- Thinking dots mini (meeting) light --- */
body.light-theme .thinking-dots-mini {
    color: #555 !important;
}
body.light-theme .thinking-dot-mini {
    background: #999 !important;
}

/* --- Offline/Online toast light --- */
body.light-theme .fixed[style*="background:rgba(40,40,40"] {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Limit indicator popup (meeting) light --- */
body.light-theme .limit-info-popup {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* --- Quick actions container text light --- */
body.light-theme .quick-actions .text-xs {
    color: #999 !important;
}

/* --- Sidebar chat section border light --- */
body.light-theme .sidebar-chat-section {
    border-color: #e5e5e5 !important;
}

/* --- Share button styled (removed inline styles) --- */
.share-btn-styled {
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,0.08);
    color: #b4b4b4;
}
.share-btn-styled:hover {
    background: #3a3a3a;
    border-color: rgba(255,255,255,0.12);
    color: #ececec;
}
body.light-theme .share-btn-styled {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .share-btn-styled:hover {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Toast base styles (removed inline styles from HTML) --- */
#toast.toast {
    background: var(--dark-surface-2, #2f2f2f);
    border: 1px solid var(--dark-border, rgba(255,255,255,0.08));
    color: var(--dark-text, #ececec);
    border-radius: 0.75rem;
}
body.light-theme #toast.toast {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* --- Streaming cursor fix (both themes) — small block cursor --- */
.streaming-cursor {
    display: inline-block !important;
    font-size: 0.85em !important;
    line-height: 1 !important;
    vertical-align: text-bottom !important;
}
body.light-theme .streaming-cursor {
    color: #212121 !important;
}

/* --- Quick-action skeleton buttons (light theme — invisible without this) --- */
body.light-theme .quick-button-skeleton {
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
}
body.light-theme .quick-buttons-skeleton .skeleton {
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%) !important;
    background-size: 200% 100% !important;
}

/* --- Dynamic quick actions during streaming (skeleton placeholder) --- */
body.light-theme .quick-actions-container .quick-button {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}

/* --- Meeting limit toast fix (wider, rounded, proper styling) --- */
.meeting-limit-toast {
    max-width: 380px !important;
    min-width: 300px !important;
}
.meeting-limit-toast .rounded-xl {
    border-radius: 16px !important;
    border: none !important;
}
body.light-theme .meeting-limit-toast .rounded-xl {
    background: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    border-radius: 16px !important;
}

/* --- File processing overlay (fix overlapping on both themes) --- */
.file-processing-overlay,
.file-upload-progress {
    background: var(--dark-surface-2, #2f2f2f) !important;
    border: 1px solid var(--dark-border, rgba(255,255,255,0.08)) !important;
    border-radius: 12px !important;
    z-index: 50 !important;
}
body.light-theme .file-processing-overlay,
body.light-theme .file-upload-progress {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}

/* --- File preview container (loading state) fix --- */
body.light-theme #filePreviewContainer .file-preview-item {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .file-upload-progress-bar {
    background: #e5e5e5 !important;
}
body.light-theme .file-upload-progress-fill {
    background: #1a1a1a !important;
}

/* --- Mobile header dark theme CSS (since inline style removed) --- */
.mobile-header {
    background: var(--dark-bg, #212121);
    border-bottom: none;
}

/* --- Desktop header dark theme CSS (since inline style removed) --- */
.desktop-header {
    background: var(--dark-bg, #212121);
    border-bottom: none;
}

/* --- Main flex container dark theme (since inline style removed) --- */
.flex.h-screen {
    background: var(--dark-bg, #212121);
    color: var(--dark-text, #ececec);
}

/* --- Chat sidebar dark theme (since inline style removed) --- */
.chat-sidebar {
    background: var(--dark-sidebar-bg, #171717);
    border-right: 1px solid var(--dark-border, rgba(255,255,255,0.06));
}

/* --- Floating input dark theme (since inline style removed) --- */
#messageForm.floating-input {
    background: var(--dark-input-bg, #303030);
    border: none;
    position: relative;
    z-index: 1060;
}

/* --- Quick button dark theme (since inline style removed) --- */
.quick-button {
    background: var(--dark-surface-2, #2f2f2f);
    border-color: var(--dark-border, rgba(255,255,255,0.08));
    color: var(--dark-text-secondary, #b4b4b4);
}

/* --- Image generation light --- */
body.light-theme .imagegen-controls { color: #999 !important; }
body.light-theme .imagegen-control-label { color: #999 !important; }
body.light-theme .imagegen-control-btn {
    background: transparent !important;
    color: #999 !important;
}
body.light-theme .imagegen-control-btn:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
}
body.light-theme .imagegen-control-btn.active {
    background: rgba(0,0,0,0.08) !important;
    color: #1a1a1a !important;
}
body.light-theme .imagegen-limit-badge {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #999 !important;
}
body.light-theme .imagegen-result {
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .imagegen-error-card {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .imagegen-upload-area-btn {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #999 !important;
}
body.light-theme .imagegen-upload-area-btn:hover {
    border-color: #999 !important;
    background: #f0f0f0 !important;
}

/* --- Save/Bookmark button light --- */
body.light-theme .save-btn,
body.light-theme .save-btn-desktop {
    color: #999 !important;
    background: transparent !important;
}
body.light-theme .save-btn:hover,
body.light-theme .save-btn-desktop:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .save-btn.active i,
body.light-theme .save-btn-desktop.active i {
    color: #1a1a1a !important;
}

/* --- Toast light --- */
body.light-theme .toast {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* --- Modals light --- */
body.light-theme .modal {
    background-color: rgba(0,0,0,0.4) !important;
}
body.light-theme .upgrade-modal-overlay {
    background: #ffffff !important;
}
body.light-theme .modal > div,
body.light-theme .upgrade-modal-overlay > div,
body.light-theme .upgrade-modal {
    background: transparent !important;
    color: #1a1a1a !important;
}
body.light-theme #shareModal > div,
body.light-theme #deleteModal > div {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme #shareModal > div h3,
body.light-theme #deleteModal > div h3 {
    color: #1a1a1a !important;
}
body.light-theme #shareModal > div p,
body.light-theme #shareModal > div .text-gray-600 {
    color: #777 !important;
}
body.light-theme #shareModal > div input {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme #shareModal > div button.text-gray-600,
body.light-theme #shareModal > div #cancelShare {
    color: #777 !important;
}
body.light-theme #shareModal > div button.text-gray-600:hover,
body.light-theme #shareModal > div #cancelShare:hover {
    background: #f7f7f8 !important;
}
body.light-theme [class*="modal-content"],
body.light-theme [class*="modal-dialog"] {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* Upgrade modal cards light */
body.light-theme .upgrade-plan-card,
body.light-theme [class*="plan-card"] {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .upgrade-plan-card:hover,
body.light-theme [class*="plan-card"]:hover {
    border-color: #999 !important;
}

/* --- Scroll down button light --- */
body.light-theme .scroll-down-btn {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}
body.light-theme .scroll-down-btn:hover {
    background: #f7f7f8 !important;
}
body.light-theme .scroll-down-btn i { color: #1a1a1a !important; }

/* --- File preview light --- */
body.light-theme .file-preview-item,
body.light-theme #filePreviewContainer {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .file-item-name { color: #1a1a1a !important; }
body.light-theme .file-item-meta { color: #999 !important; }

/* --- Image preview light --- */
body.light-theme .image-preview-item {
    border-color: #e5e5e5 !important;
    background: #f7f7f8 !important;
}

/* --- Message edit textarea light --- */
body.light-theme .message-edit-textarea {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Loading indicators light --- */
body.light-theme .thinking-indicator,
body.light-theme .typing-indicator,
body.light-theme [class*="loading-indicator"] {
    color: #999 !important;
}
body.light-theme .thinking-indicator .dot,
body.light-theme .typing-indicator .dot {
    background: #555 !important;
}

/* --- Delete/Rename modals light --- */
body.light-theme .delete-modal-content,
body.light-theme .rename-modal-content,
body.light-theme .share-modal-content {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .delete-modal-content input,
body.light-theme .rename-modal-content input {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Message limit / context exhausted light --- */
body.light-theme .message-limit-banner,
body.light-theme .context-exhausted-banner {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .context-banner-button {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* 🔢 Context usage indicator — light theme */
body.light-theme .context-usage-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
body.light-theme .ctx-progress-wrap {
    background: rgba(0, 0, 0, 0.08) !important;
}
body.light-theme .ctx-text {
    color: rgba(0, 0, 0, 0.5) !important;
}
body.light-theme .ctx-text-main {
    color: rgba(0, 0, 0, 0.75) !important;
}
body.light-theme .ctx-percent.ctx-ok       { color: #16a34a !important; }
body.light-theme .ctx-percent.ctx-caution  { color: #ca8a04 !important; }
body.light-theme .ctx-percent.ctx-warning  { color: #ea580c !important; }
body.light-theme .ctx-percent.ctx-critical { color: #dc2626 !important; }
body.light-theme .ctx-close-btn {
    color: rgba(0, 0, 0, 0.35) !important;
}
body.light-theme .ctx-close-btn:hover {
    color: rgba(0, 0, 0, 0.6) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .context-usage-bar.ctx-bar-critical {
    border-color: rgba(239, 68, 68, 0.25) !important;
    box-shadow: 0 2px 16px rgba(239, 68, 68, 0.1) !important;
}
body.light-theme .ctx-new-chat-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
body.light-theme .ctx-new-chat-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.45);
}

/* --- Mobile overlay light --- */
body.light-theme #mobileOverlay {
    background: rgba(0,0,0,0.3) !important;
}

/* --- Loading spinner light --- */
body.light-theme .loading-spinner-small {
    border-color: #e5e5e5 !important;
    border-top-color: #999 !important;
}

/* --- Math formulas light --- */
body.light-theme .prose .katex { color: #1a1a1a !important; }
body.light-theme .prose .katex:not(.katex-display) {
    background: #f0f0f0 !important;
}
body.light-theme .prose .katex-display {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
}

/* --- Magic Blocks light --- */
body.light-theme #magic-blocks-container {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Tailwind utility overrides for light --- */
body.light-theme .bg-white { background: #fff !important; }
body.light-theme .bg-gray-50 { background: #fafafa !important; }
body.light-theme .bg-gray-100 { background: #f0f0f0 !important; }
body.light-theme .bg-gray-200 { background: #e5e5e5 !important; }
body.light-theme .border-gray-200, body.light-theme .border-gray-100, body.light-theme .border-gray-300 { border-color: #e5e5e5 !important; }
body.light-theme .text-gray-900 { color: #1a1a1a !important; }
body.light-theme .text-gray-800 { color: #1a1a1a !important; }
body.light-theme .text-gray-700 { color: #333 !important; }
body.light-theme .text-gray-600 { color: #555 !important; }
body.light-theme .text-gray-500 { color: #777 !important; }
body.light-theme .text-gray-400 { color: #999 !important; }
body.light-theme .hover\:bg-gray-50:hover { background: rgba(0,0,0,0.04) !important; }
body.light-theme .hover\:bg-gray-100:hover { background: rgba(0,0,0,0.06) !important; }
body.light-theme .hover\:bg-gray-200:hover { background: rgba(0,0,0,0.08) !important; }
body.light-theme .hover\:text-gray-700:hover { color: #333 !important; }

/* Inline code light */
body.light-theme .bg-gray-100.font-mono,
body.light-theme code.bg-gray-100,
body.light-theme .prose .bg-gray-100.font-mono {
    background: #f0f0f0 !important;
    color: #c7254e !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .prose :not(pre) > code {
    background: #f0f0f0 !important;
    color: #c7254e !important;
    border: 1px solid #e5e5e5 !important;
}

body.light-theme .shadow-lg {
    box-shadow: none !important;
}

body.light-theme #closeChatSidebar {
    color: #999 !important;
}
body.light-theme #closeChatSidebar:hover {
    color: #1a1a1a !important;
}

/* --- Voice equalizer light --- */
body.light-theme .voice-equalizer .equalizer-bar { background: rgba(0,0,0,0.1) !important; }
body.light-theme .voice-equalizer .equalizer-bar.active-bar { background: rgba(0,0,0,0.35) !important; }
body.light-theme .voice-equalizer .equalizer-bar.loud { background: rgba(0,0,0,0.6) !important; }

/* --- Animated gradient text light --- */
body.light-theme .animated-gradient-text {
    background: linear-gradient(90deg, #555, #999, #b8860b, #555) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* --- Selection light --- */
body.light-theme ::selection {
    background: rgba(0,0,0,0.15) !important;
    color: #000 !important;
}

/* --- Bottom info text light --- */
body.light-theme .floating-bottom p { color: #999 !important; }
body.light-theme .floating-bottom a { color: #555 !important; }

/* --- Rating modal light --- */
body.light-theme [class*="rating-modal"] {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Document generation buttons light --- */
body.light-theme [class*="doc-gen"],
body.light-theme [class*="document-gen"] {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Drop zone overlay light --- */
body.light-theme .drop-zone-overlay {
    background: rgba(255,255,255,0.9) !important;
    border-color: #555 !important;
}
body.light-theme .drop-zone-content { color: #1a1a1a !important; }
body.light-theme .drop-zone-content i { color: #555 !important; }

/* --- Focus states light --- */
body.light-theme button:focus-visible,
body.light-theme a:focus-visible,
body.light-theme input:focus-visible,
body.light-theme textarea:focus-visible {
    outline: 2px solid rgba(0,0,0,0.2) !important;
}

/* --- Chat sidebar border fix light --- */
body.light-theme .chat-sidebar .border-b {
    border-color: #e5e5e5 !important;
}
body.light-theme input, body.light-theme textarea, body.light-theme select {
    border-color: #e5e5e5 !important;
}
body.light-theme input:focus, body.light-theme textarea:focus, body.light-theme select:focus {
    border-color: #999 !important;
}

/* Fix white gaps light */
body.light-theme .flex-1.flex.flex-col {
    background: #ffffff !important;
}

/* --- Inline styles override for light theme (main container) --- */
body.light-theme .flex.h-screen[style] {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
body.light-theme .chat-sidebar[style] {
    background: #f7f7f8 !important;
    border-right: 1px solid #e5e5e5 !important;
}

/* --- Light theme toggle button in menu --- */
.theme-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.75rem;
    white-space: nowrap;
    gap: 12px;
}
.theme-toggle-item:hover {
    background: rgba(128,128,128,0.1);
}
.theme-toggle-item .flex {
    gap: 8px;
    white-space: nowrap;
}
.theme-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: #555;
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}
body.light-theme .theme-toggle-switch {
    background: #1a1a1a;
}
.theme-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.theme-toggle-switch.active::after {
    transform: translateX(16px);
}

/* Dropdown menu min-width fix for theme toggle */
#headerMenuDesktop,
#headerMenu {
    min-width: 190px !important;
}

/* --- END LIGHT THEME --- */

/* Light theme @media overrides */
@media (max-width: 768px) {
    body.light-theme .floating-bottom {
        background: linear-gradient(to top, #ffffff 85%, rgba(255,255,255,0.6) 95%, transparent) !important;
    }
}
@media (min-width: 769px) {
    body.light-theme .floating-bottom {
        background: linear-gradient(to top, rgba(255,255,255,0.95) 85%, transparent) !important;
    }
    body.light-theme .desktop-header::after {
        background: linear-gradient(to bottom, #ffffff 0%, transparent 100%) !important;
    }
}

/* --- Inline style overrides (these elements have style="" attributes) --- */
body.light-theme #toast {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme #shareBtn[style],
body.light-theme #shareBtnDesktop[style] {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme #messageForm[style] {
    background: #f0f0f0 !important;
}
body.light-theme .quick-button[style] {
    background: #fff !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .description-wrapper[style] {
    color: #777 !important;
}
body.light-theme [style*="color:#b4b4b4"] {
    color: #777 !important;
}
body.light-theme [style*="color:#ececec"] {
    color: #1a1a1a !important;
}

/* --- Upgrade modal light theme --- */
body.light-theme .upgrade-modal-overlay {
    background: #ffffff !important;
}
body.light-theme .upgrade-modal-close {
    color: #999 !important;
}
body.light-theme .upgrade-modal-close:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}
body.light-theme .upgrade-modal-title {
    color: #1a1a1a !important;
}
body.light-theme .upgrade-plan-card {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
}
body.light-theme .upgrade-plan-card:hover {
    border-color: #ccc !important;
}
body.light-theme .upgrade-plan-card.recommended {
    border-color: #999 !important;
}
body.light-theme .upgrade-plan-badge {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .upgrade-plan-name {
    color: #1a1a1a !important;
}
body.light-theme .upgrade-plan-price-value {
    color: #111 !important;
}
body.light-theme .upgrade-plan-price-currency {
    color: #777 !important;
}
body.light-theme .upgrade-plan-price-period {
    color: #999 !important;
}
body.light-theme .upgrade-plan-description {
    color: #555 !important;
}
body.light-theme .upgrade-plan-features li {
    color: #333 !important;
}
body.light-theme .upgrade-plan-select {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}
body.light-theme .upgrade-plan-select:hover {
    background: #333 !important;
}
body.light-theme .upgrade-features-accordion {
    border-color: #e5e5e5 !important;
}
body.light-theme .upgrade-features-accordion summary {
    color: #555 !important;
}
body.light-theme .upgrade-features-accordion li {
    color: #555 !important;
}

/* --- Upgrade plan BUTTONS light theme (CRITICAL — invisible without this) --- */
body.light-theme .upgrade-plan-btn-primary {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .upgrade-plan-btn-primary:hover {
    background: #333 !important;
}
body.light-theme .upgrade-plan-btn-secondary {
    background: #f0f0f0 !important;
    color: #555 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .upgrade-plan-btn-secondary:hover {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .upgrade-plan-btn .spinner {
    border: 2px solid #e5e5e5 !important;
    border-top-color: #1a1a1a !important;
}

/* --- Upgrade features toggle ("Подробнее") light --- */
body.light-theme .upgrade-features-toggle {
    color: #999 !important;
}
body.light-theme .upgrade-features-toggle:hover {
    color: #555 !important;
}
body.light-theme .upgrade-toggle-icon {
    color: inherit !important;
}

/* --- Upgrade modal close button light --- */
body.light-theme .upgrade-modal-close {
    color: #999 !important;
}
body.light-theme .upgrade-modal-close:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #1a1a1a !important;
}

/* --- User message action buttons (copy/edit) light theme --- */
body.light-theme .user-action-btn {
    color: #bbb !important;
}
body.light-theme .user-action-btn:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .user-message-container.editing .message-bubble {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
}

/* --- Assistant message action buttons (like/dislike/copy) more visible light --- */
body.light-theme .message-actions .action-btn {
    color: #ccc !important;
}
body.light-theme .message-actions .action-btn:hover {
    color: #555 !important;
    background: rgba(0,0,0,0.05) !important;
}

/* --- Prose links more visible in light --- */
body.light-theme .prose a {
    color: #2563eb !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(37,99,235,0.3) !important;
    text-underline-offset: 2px !important;
}
body.light-theme .prose a:hover {
    color: #1d4ed8 !important;
    text-decoration-color: rgba(37,99,235,0.6) !important;
}

/* --- Meeting modal light theme --- */
body.light-theme .meeting-modal-overlay {
    background: rgba(0,0,0,0.35) !important;
}
body.light-theme .meeting-modal-container {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.15) !important;
}
body.light-theme .meeting-modal-header {
    border-bottom: 1px solid #e5e5e5 !important;
}
body.light-theme .meeting-modal-title h3 {
    color: #1a1a1a !important;
}
body.light-theme .meeting-modal-title p {
    color: #777 !important;
}
body.light-theme .meeting-counter-inline {
    background: #f0f0f0 !important;
    color: #555 !important;
}
body.light-theme .meeting-close-btn {
    background: #f0f0f0 !important;
    color: #999 !important;
}
body.light-theme .meeting-close-btn:hover {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-tabs {
    background: #f0f0f0 !important;
}
body.light-theme .meeting-tab {
    color: #777 !important;
}
body.light-theme .meeting-tab:hover {
    color: #1a1a1a !important;
}
body.light-theme .meeting-tab.active {
    color: #1a1a1a !important;
    background: #fff !important;
}
body.light-theme .meeting-content {
    background: #fff !important;
}
body.light-theme .meeting-assistant-card {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .meeting-assistant-card:hover {
    background: #f0f0f0 !important;
    border-color: #ccc !important;
}
body.light-theme .meeting-assistant-card.selected {
    border-color: #999 !important;
    background: #f0f0f0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
body.light-theme .meeting-assistant-name {
    color: #1a1a1a !important;
}
body.light-theme .meeting-assistant-company {
    color: #777 !important;
}
body.light-theme .meeting-assistant-description {
    color: #777 !important;
}
body.light-theme .meeting-assistant-avatar {
    background: #e5e5e5 !important;
}
body.light-theme .meeting-assistant-checkbox {
    border: 1.5px solid #ccc !important;
}
body.light-theme .meeting-assistant-card.selected .meeting-assistant-checkbox {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .meeting-assistant-badge {
    background: #1a1a1a !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
body.light-theme .meeting-modal-footer {
    border-top: 1px solid #e5e5e5 !important;
}
body.light-theme .meeting-footer-info {
    color: #999 !important;
}
body.light-theme .meeting-btn-secondary {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .meeting-btn-secondary:hover {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-btn-primary {
    background: #1a1a1a !important;
    color: #fff !important;
}
body.light-theme .meeting-btn-primary:hover:not(:disabled) {
    background: #333 !important;
}
body.light-theme .meeting-btn-primary:disabled {
    background: #ccc !important;
    color: #999 !important;
}
body.light-theme .meeting-search-wrapper input,
body.light-theme .meeting-search input {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-loading {
    color: #999 !important;
}
body.light-theme .meeting-spinner {
    border: 2px solid #e5e5e5 !important;
    border-top-color: #1a1a1a !important;
}
body.light-theme .meeting-empty-results {
    color: #999 !important;
}

/* --- Attach dropdown (plus button) light theme --- */
body.light-theme .attach-dropdown {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
body.light-theme .attach-dropdown-item {
    color: #1a1a1a !important;
}
body.light-theme .attach-dropdown-item:hover {
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .attach-dropdown-item:active {
    background: rgba(0,0,0,0.08) !important;
}
body.light-theme .attach-dropdown-item i {
    color: #555 !important;
}
body.light-theme .attach-dropdown-hint {
    color: #999 !important;
    background: #f0f0f0 !important;
}
body.light-theme .attach-dropdown-hint.limit-hint {
    background: rgba(0,0,0,0.06) !important;
    color: #555 !important;
}
body.light-theme .attach-dropdown-divider {
    background: #e5e5e5 !important;
}
body.light-theme .attach-dropdown-toggle {
    color: #1a1a1a !important;
}
body.light-theme .attach-dropdown-toggle i {
    color: #555 !important;
}
body.light-theme .attach-limit-counter {
    color: #999 !important;
}

/* 📚 Light theme — KB submenu */
body.light-theme .attach-dropdown-submenu-list {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    scrollbar-color: rgba(0,0,0,0.1) transparent;
}
body.light-theme .attach-dropdown-submenu-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item {
    color: #1a1a1a !important;
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item:hover {
    background: rgba(0,0,0,0.05) !important;
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item i {
    color: #555 !important;
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item .attach-dropdown-hint {
    background: #f0f0f0 !important;
    color: #777 !important;
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item.active {
    background: rgba(0,0,0,0.06) !important;
    color: #1a1a1a !important;
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item.active i {
    color: #333 !important;
}
body.light-theme .attach-dropdown-submenu-list .user-kb-item.active .attach-dropdown-hint {
    background: rgba(0,0,0,0.06) !important;
    color: #555 !important;
}

/* 📚 Light theme — KB indicator */
body.light-theme .user-kb-indicator-btn {
    background: rgba(59,130,246,0.07) !important;
    border-color: rgba(59,130,246,0.14) !important;
    color: rgba(37,99,195,0.75) !important;
}
body.light-theme .user-kb-indicator-btn:hover {
    background: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.25) !important;
}
body.light-theme .user-kb-indicator-btn .user-kb-remove:hover {
    color: #dc2626 !important;
}

/* 📚 Light theme mobile — KB submenu inline */
@media (max-width: 768px) {
    body.light-theme .attach-dropdown-submenu-list {
        background: rgba(0,0,0,0.03) !important;
        border: none !important;
        box-shadow: none !important;
    }
}
body.light-theme .web-search-toggle {
    background: #e5e5e5 !important;
}
body.light-theme .web-search-toggle.active {
    background: #1a1a1a !important;
}
body.light-theme .think-mode-toggle {
    background: #e5e5e5 !important;
}
body.light-theme .think-mode-toggle.active {
    background: #1a1a1a !important;
}

/* --- Input focus border fix (BOTH themes) --- */
.floating-input,
.floating-input:focus-within,
#messageForm,
#messageForm:focus-within {
    outline: none !important;
}
#messageInput:focus,
textarea#messageInput:focus,
.floating-input textarea:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
body.light-theme .floating-input,
body.light-theme .floating-input:focus-within,
body.light-theme #messageForm,
body.light-theme #messageForm:focus-within {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- Error message card light theme (inline styles override) --- */
body.light-theme [style*="rgba(255,255,255,0.04)"] {
    background: #f7f7f8 !important;
}
body.light-theme [style*="rgba(255,255,255,0.08)"][style*="border"] {
    border-color: #e5e5e5 !important;
}
body.light-theme .assistant-response [style*="background:rgba(255,255,255,0.04)"] {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .assistant-response [style*="color:#d1d1d1"] {
    color: #1a1a1a !important;
}
body.light-theme .assistant-response [style*="color:#999"] {
    color: #555 !important;
}
body.light-theme .assistant-response [style*="background:rgba(255,255,255,0.08)"][style*="border"] {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
/* Also fix the error card on dark theme - proper sizing */
.assistant-response [style*="background:rgba(255,255,255,0.04)"] {
    max-width: 100%;
    word-break: break-word;
}

/* --- Sidebar nav icons light theme (SVG images) --- */
body.light-theme .sidebar-nav-item img {
    filter: brightness(0) invert(0.25) !important;
}
body.light-theme .sidebar-nav-item:hover img {
    filter: brightness(0) invert(0) !important;
}
body.light-theme .sidebar-nav-item img[src*="chat-con"] {
    filter: brightness(0) invert(0.25) !important;
}
body.light-theme .sidebar-nav-item:hover img[src*="chat-con"] {
    filter: brightness(0) invert(0) !important;
}

/* --- Meeting limit indicator badge light theme --- */
body.light-theme #meetingLimitIndicator {
    border: 2px solid #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}
body.light-theme #meetingLimitIndicator.available {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* --- Meeting mode button light theme --- */
body.light-theme .meeting-mode-btn {
    color: #555 !important;
}
body.light-theme .meeting-mode-btn:hover {
    color: #1a1a1a !important;
}
body.light-theme .meeting-btn-wrapper:not(.has-participants):hover {
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .meeting-btn-wrapper.has-participants {
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .meeting-btn-wrapper.has-participants:hover {
    background: rgba(0,0,0,0.1) !important;
}
body.light-theme .meeting-btn-avatar {
    border: 2px solid #fff !important;
}

/* --- Think mode button light theme --- */
body.light-theme .think-mode-btn {
    color: #555 !important;
}
body.light-theme .think-mode-btn:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .think-mode-btn.active {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.08) !important;
}

/* --- Web search mode button light theme --- */
body.light-theme .web-search-mode-btn {
    color: #555 !important;
}
body.light-theme .web-search-mode-btn:hover {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.06) !important;
}
body.light-theme .web-search-mode-btn.active {
    color: #1a1a1a !important;
    background: rgba(0,0,0,0.08) !important;
}

/* --- Toast inline style override --- */
body.light-theme .toast[style] {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* --- Meeting limit modal light theme --- */
body.light-theme .meeting-limit-modal {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Image generation overlay and result light theme --- */
body.light-theme .imagegen-overlay {
    background: rgba(0,0,0,0.85) !important;
}
body.light-theme .imagegen-skeleton-progress {
    background: #f0f0f0 !important;
}
body.light-theme .imagegen-skeleton-bar {
    background: #1a1a1a !important;
}
body.light-theme .imagegen-skeleton-text {
    color: #777 !important;
}

/* --- Notification toast "Можно загрузить максимум" --- */
body.light-theme #toast {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
/* spellbook-toast stays DARK always */
body.light-theme .spellbook-toast {
    background: #2B2A28 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
body.light-theme .spellbook-toast-text {
    color: #fff !important;
}

/* --- PHP error messages at top of page (deprecated) --- */
body.light-theme > br,
body.light-theme > b {
    color: #ef4444 !important;
}

/* --- Meeting mode container light theme --- */
body.light-theme .meeting-toggle-container {
    background: transparent !important;
    border-color: transparent !important;
}

/* --- Attach active indicator light theme --- */
body.light-theme .attach-active-indicator {
    background: #1a1a1a !important;
}

/* --- Meeting search in modal --- */
body.light-theme .meeting-search-container input {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-search-container input::placeholder {
    color: #999 !important;
}
body.light-theme .meeting-search-container i {
    color: #999 !important;
}
body.light-theme .meeting-search-input {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .meeting-search-input:focus {
    border-color: #ccc !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04) !important;
}
body.light-theme .meeting-search-input::placeholder {
    color: #999 !important;
}
body.light-theme .meeting-search-icon {
    color: #999 !important;
}
body.light-theme .meeting-clear-search {
    color: #999 !important;
}
body.light-theme .meeting-clear-search:hover {
    color: #555 !important;
    background: #e5e5e5 !important;
}

/* --- Error card message (both themes) --- */
.error-card-message {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    max-width: 100%;
    word-break: break-word;
}
.error-card-icon {
    color: #999;
    font-size: 1rem;
    flex-shrink: 0;
}
.error-card-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #d1d1d1;
    margin: 0 0 4px 0;
}
.error-card-text {
    font-size: 0.8rem;
    color: #999;
    margin: 0 0 10px 0;
}
.error-card-btn {
    padding: 5px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #d1d1d1;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.error-card-btn:hover {
    background: rgba(255,255,255,0.14);
}

body.light-theme .error-card-message {
    background: #f7f7f8 !important;
    border: 1px solid #e5e5e5 !important;
}
body.light-theme .error-card-icon {
    color: #999 !important;
}
body.light-theme .error-card-title {
    color: #1a1a1a !important;
}
body.light-theme .error-card-text {
    color: #555 !important;
}
body.light-theme .error-card-btn {
    background: #f0f0f0 !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .error-card-btn:hover {
    background: #e5e5e5 !important;
}

/* --- Collapsed sidebar nav icons light theme --- */
body.light-theme .sidebar-collapse-logo .sidebar-collapsed-nav .collapsed-nav-icon-img {
    filter: brightness(0) invert(0.25) !important;
}
body.light-theme .sidebar-collapse-logo .sidebar-collapsed-nav a:hover .collapsed-nav-icon-img,
body.light-theme .sidebar-collapse-logo .sidebar-collapsed-nav button:hover .collapsed-nav-icon-img {
    filter: brightness(0) invert(0) !important;
}

/* --- Image generation mode light theme additions --- */
body.light-theme .imagegen-skeleton {
    background: #f0f0f0 !important;
}
body.light-theme .imagegen-progress-bar {
    background: #e5e5e5 !important;
}
body.light-theme .imagegen-progress-fill {
    background: #1a1a1a !important;
}
body.light-theme .imagegen-timer {
    color: #777 !important;
}
body.light-theme .imagegen-stage {
    color: #555 !important;
}
body.light-theme .imagegen-input-locked {
    opacity: 0.6 !important;
}

/* --- Notification toast (static #toast element) --- */
body.light-theme #toast {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #1a1a1a !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* --- Context exhausted banner light --- */
body.light-theme .context-exhausted-container,
body.light-theme [class*="context-exhausted"] {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- File message attachment cards in chat --- */
body.light-theme .file-message-card {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
body.light-theme .file-message-icon {
    color: #555 !important;
}
body.light-theme .file-message-name {
    color: #1a1a1a !important;
}
body.light-theme .file-message-size {
    color: #999 !important;
}

/* --- Video processing styles light --- */
body.light-theme .video-preview-container {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}
body.light-theme .video-preview-container:hover {
    background: #e5e7eb !important;
}
body.light-theme .video-preview-name {
    color: #1f2937 !important;
}
body.light-theme .video-preview-meta {
    color: #6b7280 !important;
}
body.light-theme .video-preview-remove {
    background: rgba(0,0,0,0.05) !important;
    color: #6b7280 !important;
}
body.light-theme .video-preview-remove:hover {
    background: rgba(239,68,68,0.1) !important;
    color: #ef4444 !important;
}
body.light-theme .video-progress-container {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.light-theme .video-progress-title-text {
    color: #1f2937 !important;
}
body.light-theme .video-progress-status {
    color: #6b7280 !important;
}
body.light-theme .video-progress-percent {
    color: #1f2937 !important;
}
body.light-theme .video-progress-bar-wrapper {
    background: #e5e7eb !important;
}
body.light-theme .video-progress-bar-fill {
    background: #374151 !important;
}
body.light-theme .video-progress-stages {
    color: #9ca3af !important;
}
body.light-theme .video-progress-stage.active {
    color: #374151 !important;
}
body.light-theme .video-progress-stage.completed {
    color: #1f2937 !important;
}
body.light-theme .video-progress-icon {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}
body.light-theme .video-error-container {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}
body.light-theme .video-error-icon {
    background: rgba(239,68,68,0.1) !important;
    color: #ef4444 !important;
}
body.light-theme .video-error-title {
    color: #991b1b !important;
}
body.light-theme .video-error-message {
    color: #6b7280 !important;
}
body.light-theme .video-warning-banner.warn {
    background: rgba(251,191,36,0.08) !important;
    border-color: rgba(251,191,36,0.2) !important;
    color: #b45309 !important;
}
body.light-theme .video-warning-banner.info {
    background: rgba(59,130,246,0.06) !important;
    border-color: rgba(59,130,246,0.15) !important;
    color: #2563eb !important;
}
body.light-theme .video-processing-card {
    background: #f7f7f8 !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}

/* --- Document generator light theme --- */
body.light-theme .doc-gen-btn,
body.light-theme [class*="doc-gen-button"],
body.light-theme .document-gen-btn {
    background: #f0f0f0 !important;
    border-color: #e5e5e5 !important;
    color: #555 !important;
}
body.light-theme .doc-gen-btn:hover,
body.light-theme [class*="doc-gen-button"]:hover,
body.light-theme .document-gen-btn:hover {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
}