@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
    --primary-color: #3b82f6;
    --background-color: #f8f9fa;
    --container-bg: #ffffff;
    --text-color: #333;
    --border-color: #dee2e6;
    --error-color: #dc3545;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    min-height: 100vh;
    font-size: 70%;
    -webkit-text-size-adjust: 100%;
}

#app-container {
    width: 100%;
    height: 100%;
    min-height: 0 !important; /* перекрываем tailwind min-h-screen */
    overflow: hidden; /* внешняя прокрутка не нужна */
}

/* ===== AI Writer — макет в стиле ChatGPT (desktop) ===== */
.aiw-app {
    display: flex;
    width: 100%;
    height: calc(100vh - 64px);
    /* 64px ≈ высота шапки; на странице уже есть header */
    overflow: hidden;
    background: #fff;
}

.aiw-sidebar {
    width: 280px;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    background: #eff6ff;
}

.aiw-sidebar-header {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #eff6ff;
}

.aiw-new-chat-btn {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d8dadd;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.aiw-new-chat-btn:hover { background:#f6f7f9; border-color:#cfd2d6; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

.aiw-chats {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 6px 8px 12px 8px;
}
.aiw-chat-item { display:block; width:100%; text-align:left; padding:8px 10px; border:1px solid transparent; border-radius:10px; background: transparent; margin:1px 0; cursor:pointer; color:#111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiw-chat-item:hover { background:#e9eef6; }
.aiw-chat-item.active { background:#dde7f6; border-color:transparent; }

/* Sidebar section title */
.aiw-sidebar-section-title { font-size: 12px; color:#9ca3af; padding: 8px 12px 6px 12px; text-transform: none; }

.aiw-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f8fafc;
}

.aiw-main-header { display: none; }
.aiw-title { font-weight: 600; max-width: 760px; margin: 0 auto; }

.aiw-banner { margin:12px 20px 0; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.aiw-banner-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.aiw-banner-title { font-weight:600; }
.aiw-banner-warning { background:#fff7ed; color:#7c2d12; border-color:#fde68a; }
.aiw-banner-success { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.aiw-banner-actions { display:flex; gap:8px; align-items:center; }

.aiw-btn { border-radius:8px; padding:10px 14px; cursor:pointer; border:1px solid #e5e7eb; background:#fff; }
.aiw-btn-primary { background:#7c3aed; color:#fff; border:none; }
.aiw-btn-primary:hover { background:#6d28d9; }
.aiw-btn-ghost { background:transparent; }

.aiw-messages {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 24px 0;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}
.aiw-row { display:none; }
/* ChatGPT-like centered message column */
.aiw-msg { padding: 0 16px; margin: 10px 0; }
.aiw-msg-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-start; gap: 12px; }
.aiw-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; background: #10a37f; flex-shrink: 0; }
.aiw-avatar-user { background: #9ca3af; }
.aiw-bubble { flex: 1; padding: 12px 14px; border-radius: 12px; white-space: pre-wrap; border: 1px solid #e5e7eb; }
.aiw-bubble-user { background:#ffffff; }
.aiw-bubble-bot { background:#f7f7f8; }

/* Typing indicator */
.aiw-typing { padding: 0 16px; margin: 6px 0; }
.aiw-typing .aiw-bubble { background: #f7f7f8; }
.aiw-typing-dots { display: inline-flex; gap: 4px; }
.aiw-typing-dots span { width: 6px; height: 6px; background: #9ca3af; border-radius: 50%; animation: aiw-bounce 1.2s infinite ease-in-out; }
.aiw-typing-dots span:nth-child(1) { animation-delay: -0.24s; }
.aiw-typing-dots span:nth-child(2) { animation-delay: -0.12s; }
@keyframes aiw-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: .6; } 40% { transform: scale(1); opacity: 1; } }

/* Welcome block for empty chat */
.aiw-welcome { padding: 24px 16px 8px; }
.aiw-welcome-inner { max-width: 920px; margin: 0 auto; text-align: center; color: #0f172a; }
.aiw-welcome-title { font-size: 28px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.aiw-welcome-subtitle { font-size: 16px; line-height: 26px; color: #475569; margin: 0 auto 20px; max-width: 820px; }
.aiw-welcome-examples { max-width: 820px; margin: 0 auto; }
.aiw-welcome-examples-title { font-size: 14px; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.aiw-welcome-examples-card { background: #ffffff; border: 1px dashed #e2e8f0; border-radius: 12px; padding: 16px; color: #334155; text-align: left; }

.aiw-composer {
    border-top: 1px solid #e5e7eb;
    background: #fff;
    padding: 12px 16px;
}
.aiw-composer-inner { display:flex; gap:8px; align-items:flex-end; max-width: 760px; margin: 0 auto; }
.aiw-textarea {
    flex:1; resize:none; padding:12px; border:1px solid #e5e7eb; border-radius:10px; max-height:200px; min-height:44px; outline:none; transition:border-color .15s; background:#fff;
}
.aiw-textarea:focus { border-color:#a78bfa; }
.aiw-send-btn {
    width:44px; height:44px; min-width:44px; min-height:44px; border:none; border-radius:10px; background:#a259f7; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;
}
.aiw-send-btn:hover { background:#7c3aed; }
.aiw-composer-hint { font-size:12px; color:#6b7280; margin-top:6px; }

@media (max-width: 1024px) {
  .aiw-sidebar { width: 240px; }
}

.container {
    width: 100%;
    max-width: 700px;
    padding: 2rem;
}

/* --- Auth View --- */
#auth-view {
    display: flex; /* Initially visible */
    justify-content: center;
    align-items: center;
}

.auth-box {
    position: relative;
    background-color: var(--container-bg);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
    z-index: 1;
}

.auth-box h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.auth-box input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

.auth-box button {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-box button:hover {
    background-color: #2563eb;
}

.auth-box p {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.auth-box a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

/* Глобальные стили для кнопки закрытия во всех модалках */
.close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: auto !important; /* переопределяет .auth-box button { width:100% } */
    background: transparent;
    border: none;
    padding: 12px;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.error-message {
    color: var(--error-color);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    min-height: 1.2em;
}

/* Не оставлять лишний зазор под заголовком, если нет ошибки */
#error-message-auth:empty {
    min-height: 0;
    margin: 0;
}

/* --- Auth Modal --- */
#auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
/* Уточнение для локального модального окна на ai-writer */
#auth-modal-overlay .auth-box input { width: calc(100% - 20px); margin-bottom: 12px; }
#auth-modal-overlay .auth-box button { width: 100%; }

#close-auth-modal-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: auto; /* чтобы не наследовать width:100% из .auth-box button */
    background: transparent;
    border: none;
    color: #333;
    font-size: 2.5rem;
    z-index: 9999;
    cursor: pointer;
    box-shadow: none;
    padding: 8px;
    line-height: 1;
    transition: color 0.18s;
}
#close-auth-modal-btn:hover {
    color: #a259f7;
    background: transparent;
}

/* --- Text Upload Modal --- */
#text-upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.text-upload-modal {
    position: relative;
    background-color: var(--container-bg);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-height: 90vh;
    overflow-y: auto;
}

#close-text-upload-modal-btn {
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.18s;
}

#close-text-upload-modal-btn:hover {
    color: #dc2626;
}

#text-upload-input {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.2s;
}

#text-upload-input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

#submit-text-upload-btn {
    min-width: 120px;
}

#submit-text-upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#text-upload-error {
    font-size: 14px;
    margin-bottom: 1rem;
}

/* --- Header Styles --- */
header {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* --- Main App Layout --- */

#main-app-view {
    display: flex;
    width: 100%;
    height: 100%; /* Ровно во всю доступную высоту под шапкой */
    overflow: hidden; /* Внешняя прокрутка отключена, скроллим только внутренние области */
    background-color: var(--container-bg);
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

#sidebar, #sidebar-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Десктоп: скрываем нижние кнопки в левом сайдбаре, они перенесены в шапку */
@media (min-width: 769px) {
    #sidebar .sidebar-footer { display: none !important; }
}

.sidebar-footer, .text-input-block {
    margin-top: auto;
}

#item-list, #chat-history {
    flex: 1 1 0;
    min-height: 0;
}

.sidebar-header {
    padding: 0 1rem 1rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-btn {
    width: 100%;
    padding: 10px 12px;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0.5rem;
    text-align: left;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
}

.sidebar-btn:hover {
    background-color: #e9ecef;
}

.sidebar-btn span {
    margin-right: 10px;
    font-size: 1.1rem;
}

.list-item {
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    max-width: 220px;
}

/* Для папок увеличиваем ширину чтобы поместилась кнопка toggle */
.list-item.folder-item {
    max-width: 240px;
}
.list-item:before {
    margin-right: 10px;
    font-size: 1.1rem;
}

.list-item:hover {
    background-color: #e9ecef;
}

.list-item.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 500;
}

.folder-item.drop-target {
    background-color: #dbeafe; /* Lighter blue */
    border: 2px dashed var(--primary-color);
}

.list-item.dragging {
    opacity: 0.5;
}

.folder-item > .list-item-content {
    font-weight: bold;
}
.folder-item {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible; /* Убираем overflow hidden для папок */
    white-space: nowrap; /* Переопределяем для правильного flex-layout */
}

.folder-item .folder-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Позволяет контенту сжиматься */
    overflow: hidden;
}

.folder-item .folder-content:before {
    content: '📁';
    margin-right: 10px;
    flex-shrink: 0;
}

.folder-item .folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Важно: позволяет flex-item сжиматься меньше своего содержимого */
}

.folder-item .folder-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    color: #666;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
    min-width: 20px; /* Гарантируем минимальную ширину для кнопки */
    width: 20px; /* Фиксированная ширина */
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-item .folder-toggle:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.folder-item .folder-toggle.expanded {
    transform: rotate(180deg);
}

.folder-item .folder-toggle::before {
    content: '▼';
}

.folder-item .folder-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    color: #b91c1c; /* красный оттенок */
    flex-shrink: 0;
    margin-left: 6px;
    min-width: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-item .folder-delete:hover {
    background-color: rgba(185, 28, 28, 0.08);
    border-radius: 3px;
}

.folder-item .folder-delete::before {
    content: '🗑️';
}

.file-item:before {
    content: '📄';
}

.file-item.nested {
    padding-left: 30px;
    border-top: 1px solid var(--border-color);
    max-width: 190px;
}

/* --- Mobile files section header --- */
.mobile-section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.mobile-create-folder-btn {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--text-color);
}

.mobile-create-folder-btn:active {
    background: #f3f4f6;
}

/* --- Mobile create folder modal --- */
.mobile-create-folder-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.mobile-create-folder-modal {
    width: calc(100% - 32px);
    max-width: 420px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    overflow: hidden;
}

.mobile-create-folder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-create-folder-title {
    font-weight: 600;
}

.mobile-create-folder-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.mobile-create-folder-body {
    padding: 14px;
}

.mobile-create-folder-label {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

.mobile-create-folder-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px; /* 16px to prevent iOS zoom on focus */
}

.mobile-create-folder-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 14px;
    border-top: 1px solid var(--border-color);
}

.mobile-create-folder-cancel,
.mobile-create-folder-create {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #fff;
}

.mobile-create-folder-create {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* --- Mobile files list rows --- */
.mobile-files-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Карточный стиль отключаем (оставляем только строки)
.mobile-folder-row,
.mobile-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
}
*/

/* Вариант для карточек не используем в мобиле
.mobile-file-item.nested {
    margin-left: 22px;
}
*/

/* Подсветка активной карточки отключена для строк
.mobile-folder-row.active {
    background: #eef2ff;
    border-color: #c7d2fe;
}
*/

/* Карточные маленькие иконки не используем, ниже есть вариант для строк */
/*.mobile-folder-icon,
.mobile-file-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

.mobile-folder-info,
.mobile-file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Для карточек уменьшенный шрифт не нужен, у строк — ниже своя типографика */
/*.mobile-folder-name,
.mobile-file-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

/* Метаданные карточки не используем */
/*.mobile-file-meta {
    font-size: 10px;
    color: #6b7280;
}*/

.mobile-folder-toggle {
    border: none;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
}

/* Drag feedback for mobile */
.mobile-folder-row.dragover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.sidebar-footer {
    padding: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
}

#logout-button {
    width: 100%;
    padding: 10px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#main-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    z-index: 1;
    overflow-y: auto;
    padding: 0.5rem 0.5rem;
    gap: 4px;
}

#welcome-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

.upload-box-main h1 {
    font-size: 2.5rem;
    margin-top: 0;
}

.upload-box-main p {
    color: #555;
    font-size: 1.1rem;
}

/* --- Upload View (OLD) --- */
.upload-box {
    text-align: center;
    background-color: var(--container-bg);
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.upload-box h1 {
    font-size: 2.5rem;
    margin-top: 0;
}

.upload-box p {
    max-width: 500px;
    margin: 1rem auto 2.5rem;
    line-height: 1.6;
    color: #555;
}

.file-label {
  display: block;
  border: 2px dashed #cbd5e1;
  padding: 1.2rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.8rem;
  background: #f8fafc;
  text-align: center;
  color: #64748b;
  font-weight: 500;
  font-size: 0.9rem;
}

.file-label:hover {
    background-color: #f1f3f5;
    border-color: var(--primary-color);
}

#file-input {
    display: none;
}

#upload-form button {
    width: auto;
    padding: 12px 24px;
    font-size: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#upload-form button:hover {
    background-color: #2563eb;
}

#upload-status {
    margin-top: 1rem;
    min-height: 1.2em;
    color: #495057;
}

/* --- Chat View --- */
#chat-view {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.chat-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.1rem;
}
.chat-header h3 {
    margin: 0;
}

.chat-container {
    background-color: var(--container-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    height: 70vh;
    max-height: 700px;
    width: 100%;
}

#chat-history {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    font-size: 0.97rem;
    line-height: 1.4;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    background: #fff !important;
}

.chat-message {
    padding: 7px 12px;
    border-radius: 14px;
    max-width: 95%;
    font-size: 0.97rem;
    line-height: 1.4;
}

.user-message {
    background-color: var(--primary-color);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    font-size: 0.97rem;
    line-height: 1.4;
}

.bot-message {
    background: transparent;
    color: var(--text-color);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    white-space: pre-wrap;
    font-size: 0.97rem;
    line-height: 1.4;
    position: relative;
}

#chat-form {
    display: flex;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

#question-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 20px;
    margin-right: 1rem;
    font-size: 1rem;
}

#question-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#chat-form button {
    padding: 12px 20px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.logout-button {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Spinner */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    align-self: center;
    margin: 1rem;
}

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

/* --- User Profile Section --- */
#user-profile-container {
    width: 100%;
    position: relative; /* For popover positioning */
}

#user-display {
    justify-content: space-between;
    cursor: pointer;
}

#user-display-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px; /* Space before arrow */
}

#user-profile-popover {
    position: absolute;
    bottom: calc(100% + 5px); /* Position above the footer button with a small gap */
    left: 0;
    width: 100%;
    box-sizing: border-box; /* Ensure padding is included in width */
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    padding: 1rem;
    z-index: 10;
}

#user-profile-popover p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

#user-profile-popover hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

#user-profile-popover button {
    width: 100%;
    padding: 8px 12px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

#cancel-subscription-btn {
    background-color: #e63946;
    color: white;
    margin-top: 0.5rem;
}

#logout-button {
    background-color: #6c757d;
    color: white;
}

#sidebar-right {
    width: 320px;
    background: #fff !important;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    z-index: 2;
}

.system-messages {
    min-height: 48px;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: #f1f5f9;
    color: #333;
    font-size: 1.05rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
}

#status-message {
    font-size: 1.05rem;
    color: #2563eb;
    min-height: 1.2em;
}

#active-item-message {
    color: #6b7280;
    font-size: 0.85rem;
    margin-top: 0.2rem;
    text-align: center;
    font-weight: 500;
}

/* Стили для блока ввода текста */
#text-as-file-block {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.2rem;
  margin: 0 auto 12px auto;
  max-width: 95%;
  width: 95%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

#text-as-file-input {
  width: 100%;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 1.2rem 1rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  resize: vertical;
  transition: all 0.3s ease;
  background: #f8fafc;
  color: #374151;
  min-height: 60px;
  box-sizing: border-box;
}

#text-as-file-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: #f1f3f5;
}

#text-as-file-input::placeholder {
  color: #64748b;
  font-style: normal;
  font-weight: 500;
}

#text-as-file-upload-btn {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  margin-top: 0.8rem;
}

#text-as-file-upload-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

#text-as-file-upload-btn:active {
  transform: translateY(0);
}

/* Кнопка загрузки аудио/видео — как у кнопки текста */
#audio-as-file-upload-pdf-btn {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  margin-top: 0.8rem;
}

#audio-as-file-upload-pdf-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

#audio-as-file-upload-pdf-btn:active {
  transform: translateY(0);
}

/* Кнопка загрузки ссылки — как у кнопки текста */
#url-as-file-upload-btn {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  margin-top: 0.8rem;
}

#url-as-file-upload-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

#url-as-file-upload-btn:active {
  transform: translateY(0);
}

/* Стили для блока загрузки файла */
#file-upload-block {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.2rem;
  margin: 0 auto 12px auto;
  max-width: 95%;
  width: 95%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Стили для блока загрузки аудио/видео — как у текста/файла */
#audio-as-file-block {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.2rem;
  margin: 0 auto 12px auto;
  max-width: 95%;
  width: 95%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Стили для блока загрузки ссылки — как у текста/файла */
#url-as-file-block {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.2rem;
  margin: 0 auto 12px auto;
  max-width: 95%;
  width: 95%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Поле ввода ссылки — стиль как у текстовой области */
#url-as-file-input {
  width: 100%;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  transition: all 0.3s ease;
  background: #f8fafc;
  color: #374151;
  box-sizing: border-box;
}

#url-as-file-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: #f1f3f5;
}

#url-as-file-input::placeholder {
  color: #64748b;
  font-weight: 500;
}

.text-input-block {
    margin-top: auto;
    position: static;
    box-shadow: 0 -2px 12px rgba(59,130,246,0.04);
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-top: 1px solid var(--border-color);
    background: #fff !important;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 3;
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
}

#text-input {
    resize: none;
    border-radius: 12px 0 0 12px !important;
    margin-right: 0;
    height: 44px;
    min-height: 44px;
    max-height: 120px;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow-y: auto;
    width: 100%;
    border: 1.5px solid var(--primary-color);
    padding-left: 14px;
    padding-right: 14px;
    font-size: 1rem;
    outline: none;
    transition: border 0.2s;
    box-sizing: border-box;
    background: #fff;
}

#text-input:focus {
    border-color: #7c3aed;
}

.send-btn {
    border-radius: 0 12px 12px 0 !important;
    margin-left: 0 !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: #a259f7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: background 0.18s;
    box-shadow: 0 2px 8px rgba(162,89,247,0.08);
}
.send-btn:hover {
    background: #7c3aed;
}

.send-btn svg {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 1px;
}

.sidebar-right-header {
    background: #fff !important;
    font-weight: 700;
    font-size: 1.5rem !important;
    color: var(--text-color);
    padding: 0.2rem 0.5rem 0.5rem 0.5rem;
    margin: 0 0 0.2rem 0;
    border: none;
    box-shadow: none;
}

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

.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-chat-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.export-chat-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
    transform: translateY(-1px);
}

.export-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    min-width: 120px;
    margin-top: 4px;
}

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

.export-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: #374151;
    font-size: 14px;
    transition: background-color 0.2s;
    width: 100%;
    text-align: left;
}

.export-dropdown-item:hover {
    background: #f3f4f6;
}

.export-dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.export-dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.export-dropdown-item svg {
    flex-shrink: 0;
}

.message-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    justify-content: flex-start;
    position: relative;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: #888;
    transition: all 0.2s;
    text-decoration: none;
}

.action-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #555;
    border-color: rgba(0, 0, 0, 0.05);
}

.action-btn.pdf-btn:hover {
    color: #dc2626;
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.05);
}

.action-btn.word-btn:hover {
    color: #2563eb;
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.05);
}

.action-btn.copy-btn:hover {
    color: #059669;
    border-color: #059669;
    background: rgba(5, 150, 105, 0.05);
}

.action-btn svg {
    flex-shrink: 0;
}
.copy-tooltip {
    display: none;
    position: absolute;
    left: 4px;
    bottom: 100%;
    margin-bottom: 4px;
    background: #222;
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    pointer-events: none;
}
.bot-message { position: relative; }

.resizer {
    width: 10px;
    background: linear-gradient(to right, #e5eaf3 60%, #c7d2fe 100%);
    cursor: col-resize;
    height: 100%;
    z-index: 10;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.resizer:hover, .resizer:active {
    background: linear-gradient(to right, #a5b4fc 60%, #6366f1 100%);
    box-shadow: 0 0 0 2px #a5b4fc33;
}
.resizer-grip {
    width: 4px;
    height: 36px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        to bottom,
        #b0b6c6 0 6px,
        #e5eaf3 6px 12px
    );
    display: block;
    opacity: 0.7;
}
.resizer:hover .resizer-grip, .resizer:active .resizer-grip {
    opacity: 1;
    background: repeating-linear-gradient(
        to bottom,
        #6366f1 0 6px,
        #e5eaf3 6px 12px
    );
}

#auth-button {
    margin-top: 0;
    margin-bottom: 16px;
}

#profile-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    max-width: 420px;
    width: 100%;
    position: relative;
    text-align: left;
}
#close-profile-modal-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2.2rem;
    z-index: 10;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    transition: color 0.18s;
}
#close-profile-modal-btn:hover {
    color: #a259f7;
}
.profile-limits {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.1rem 1rem 1rem 1rem;
    margin-bottom: 1.2rem;
}
#profile-messages-bar, #profile-chats-bar {
    background: #a259f7;
    transition: width 0.3s;
}
#profile-upgrade-btn {
    background: #a259f7;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
#profile-upgrade-btn:hover {
    background: #7c3aed;
}
#profile-logout-btn {
    background: #f3f4f6;
    color: #333;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}
#profile-logout-btn:hover {
    background: #e5e7eb;
}
.profile-email-row {
    margin-bottom: 1.5rem;
}
#profile-logout-btn {
    min-width: 90px;
    padding: 0.5rem 1.2rem;
    margin-left: 1rem;
    width: auto;
    display: inline-block;
}

#sidebar-upgrade-btn {
    margin-top: 0.5rem;
    width: 100%;
    background: #f3f4fd;
    color: #7c3aed;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}
#sidebar-upgrade-btn:hover {
    background: #e0e7ff;
}
#sidebar-plan-info {
    margin-top: 0.5rem;
    width: 100%;
}
#sidebar-plan-name {
    font-size: 1rem;
    font-weight: 600;
    color: #7c3aed;
}
#sidebar-manage-sub-btn {
    margin-top: 0.5rem;
    width: 100%;
    background: #f3f4f6;
    color: #333;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}
#sidebar-manage-sub-btn:hover {
    background: #e5e7eb;
}
#manage-sub-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.manage-sub-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    max-width: 400px;
    width: 100%;
    position: relative;
    text-align: left;
}
#close-manage-sub-modal-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2.2rem;
    z-index: 10;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    transition: color 0.18s;
}
#close-manage-sub-modal-btn:hover {
    color: #a259f7;
}
#cancel-sub-btn {
    background: #e63946;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s;
}
#cancel-sub-btn:hover {
    background: #b91c1c;
}

#sidebar {
    background: #eff6ff !important; /* Tailwind bg-blue-50 */
    color: #23272f !important;
    width: 250px;
}
#sidebar .sidebar-header,
#sidebar .sidebar-footer {
    background: #eff6ff !important; /* Tailwind bg-blue-50 */
    border-color: #d1d5db !important;
}
#sidebar .sidebar-btn,
#sidebar .list-item {
    background: transparent;
    color: #23272f;
    border-color: #d1d5db;
}
#sidebar .sidebar-btn:hover,
#sidebar .list-item:hover {
    background: #d1d5db;
}

/* Десктоп: сделать кнопки покупки/апгрейда фиолетовыми как в мобилке */
#sidebar #buy-subscription-btn,
#sidebar #sidebar-upgrade-btn {
    background: #7c3aed !important; /* bg-purple-600 */
    color: #fff !important;
}
#sidebar #buy-subscription-btn:hover,
#sidebar #sidebar-upgrade-btn:hover {
    background: #6d28d9 !important; /* hover:bg-purple-700 */
}
#sidebar .list-item.active {
    background: #3b82f6;
    color: #fff;
}
#sidebar .file-item:before, #sidebar .folder-item:before {
    color: #23272f;
}

#mode-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8fafc;
  border-radius: 12px;
  padding: 3px;
  margin: 8px auto 12px auto;
  width: fit-content;
  gap: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid #e2e8f0;
}

.mode-btn {
  background: transparent;
  color: #64748b;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  justify-content: center;
}

.mode-btn::before {
  content: '';
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.mode-btn[data-mode="file"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>');
}

.mode-btn[data-mode="text"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>');
}

.mode-btn[data-mode="audio"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a3 3 0 016 0v7a3 3 0 11-6 0"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13v-1a7 7 0 0014 0v1"/></svg>');
}

.mode-btn[data-mode="url"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 010 5.656l-3 3a4 4 0 11-5.656-5.656l1.5-1.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.172 13.828a4 4 0 010-5.656l3-3a4 4 0 115.656 5.656l-1.5 1.5"/></svg>');
}

.mode-btn.active {
  background: #3b82f6;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.mode-btn.active::before {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.mode-btn:not(.active):hover {
  background: #e2e8f0;
  color: #3b82f6;
  transform: translateY(-1px);
}

.mode-btn:not(.active):hover::before {
  opacity: 1;
}

#welcome-block {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  margin: 0.5rem auto 2rem auto;
  max-width: 95%;
  width: 95%;
  text-align: center;
  pointer-events: none;
}

.welcome-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.3rem;
  pointer-events: auto;
}

.welcome-desc {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 400;
  pointer-events: auto;
  line-height: 1.4;
}

/* Блок "Вы общаетесь с..." */
#active-item-block {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  margin: 0 auto 6px auto;
  max-width: 95%;
  width: 95%;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: none; /* По умолчанию скрыт */
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  color: #047857;
}

#active-item-block.show {
  display: block;
}

#active-item-message {
  display: block;
}

/* Блок системных сообщений */
#system-message-block {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  margin: 0 auto 3px auto;
  max-width: 95%;
  width: 95%;
  text-align: center;
  font-size: 0.72rem;
  transition: all 0.2s ease;
  display: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.1;
}

#system-message-block:not(:empty) {
  display: block;
}

#status-message.info {
  color: #2563eb;
}
#status-message.success {
  color: #059669;
}
#status-message.error {
  color: #e11d48;
} 

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  #main-app-view {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  
  #sidebar {
    width: 100%;
    height: auto;
    order: 2;
  }
  
  #main-content {
    order: 1;
    height: auto;
    min-height: 60vh;
  }
  
  #sidebar-right {
    width: 100%;
    height: auto;
    order: 3;
  }
  
  .resizer {
    display: none;
  }
  
  #mode-switcher {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 300px;
  }
  
  .mode-btn {
    width: 100%;
    justify-content: center;
  }
  
  #text-as-file-block,
  #file-upload-block,
  #welcome-block {
    max-width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Улучшенная анимация для загрузки */
.loading-animation {
  position: relative;
  overflow: hidden;
}

.loading-animation::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
} 

#upload-form-main button {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  width: auto;
}

#upload-form-main button:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Delete button */
.delete-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

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

.delete-btn.hidden {
  display: none;
} 

/* Стили для области загрузки файлов */
.upload-area {
    display: block;
    width: 100%;
    max-width: 600px;
    padding: 3rem 2rem;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.upload-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.upload-area:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
}

.upload-area:hover::before {
    opacity: 1;
}

.upload-area:active {
    transform: translateY(0px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.upload-area:hover .upload-area-text {
    color: #3b82f6;
}

.upload-area .upload-area-text {
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

/* Анимация для drag & drop */
.upload-area.drag-over {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.2);
}

.upload-area.drag-over::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    opacity: 1;
}

.upload-area.drag-over .upload-area-text {
    color: #10b981;
} 

/* --- Subscription Plans Modal --- */
#subscription-plans-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.subscription-plans-modal .close-btn,
.aiw-textpack-modal .close-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
}

.subscription-plans-modal {
    position: relative;
    background-color: var(--container-bg);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;
    overflow-y: auto;
    margin: 1rem;
}

#close-subscription-plans-modal-btn {
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    transition: color 0.18s;
    color: #888;
}

#close-subscription-plans-modal-btn:hover {
    color: #dc2626;
}

/* Plan selection styling */
.subscription-plans-modal .space-y-4 > * + * {
    margin-top: 1rem;
}

.subscription-plans-modal .space-y-3 > * + * {
    margin-top: 0.75rem;
}

.subscription-plans-modal input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    color: #9333ea;
    accent-color: #9333ea;
    cursor: pointer;
}

.subscription-plans-modal input[type="radio"]:checked {
    background-color: #9333ea;
    border-color: #9333ea;
}

.subscription-plans-modal .border-gray-200 {
    border: 1px solid #e5e7eb;
}

.subscription-plans-modal .rounded-lg {
    border-radius: 0.5rem;
}

/* Yearly plan selected styling */
.subscription-plans-modal input[type="radio"]:checked + div,
.subscription-plans-modal input[type="radio"]:checked ~ * {
    color: #9333ea;
}

/* Buttons */
#pay-subscription-btn {
    width: 100%;
    background-color: #9333ea;
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

#pay-subscription-btn:hover {
    background-color: #7c3aed;
}

#login-link-from-subscription {
    color: #9333ea;
    text-decoration: none;
    font-weight: 500;
}

#login-link-from-subscription:hover {
    color: #7c3aed;
}

/* Discount badge styling */
.subscription-plans-modal .absolute {
    position: absolute;
}

.subscription-plans-modal .bg-purple-600 {
    background-color: #9333ea;
}

.subscription-plans-modal .text-white {
    color: white;
}

.subscription-plans-modal .text-xs {
    font-size: 0.75rem;
}

.subscription-plans-modal .rounded-full {
    border-radius: 9999px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .subscription-plans-modal {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .subscription-plans-modal .text-lg {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .subscription-plans-modal .text-xl {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .subscription-plans-modal .p-4 {
        padding: 0.75rem;
    }
}

/* Payment Success Modal */
#payment-success-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-success-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    position: relative;
    text-align: center;
    margin: 1rem;
}

#close-payment-success-modal-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2rem;
    z-index: 10;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    transition: color 0.18s;
}

#close-payment-success-modal-btn:hover {
    color: #059669;
}

#payment-success-ok-btn {
    transition: all 0.2s ease;
}

#payment-success-ok-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

/* Payment Error Modal */
#payment-error-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-error-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    position: relative;
    text-align: center;
    margin: 1rem;
}

#close-payment-error-modal-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2rem;
    z-index: 10;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    transition: color 0.18s;
}

#close-payment-error-modal-btn:hover {
    color: #dc2626;
}

#payment-error-retry-btn {
    transition: all 0.2s ease;
}

#payment-error-retry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

#payment-error-support-btn {
    transition: all 0.2s ease;
}

#payment-error-support-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Subscription Success Modal */
#subscription-success-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-success-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    position: relative;
    text-align: center;
    margin: 1rem;
}

#close-subscription-success-modal-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: #888;
    font-size: 2rem;
    z-index: 10;
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    transition: color 0.18s;
}

#close-subscription-success-modal-btn:hover {
    color: #8b5cf6;
}

#subscription-success-start-btn {
    transition: all 0.2s ease;
}

#subscription-success-start-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

#subscription-success-profile-btn {
    transition: all 0.2s ease;
}

#subscription-success-profile-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} 

/* AI Writer Textpack Paywall Modal */
#aiw-textpack-paywall-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.35);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.aiw-textpack-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    position: relative;
    text-align: center;
    margin: 1rem;
}

/* =======================================
   МОБИЛЬНЫЕ СТИЛИ
   ======================================= */

@media (max-width: 768px) {
    /* Общие мобильные стили */
    body {
        font-size: 14px !important;
        overflow: hidden !important;
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    html {
        overflow: hidden !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Скрыть десктопную версию на мобильных */
    #app-container {
        display: none !important;
    }
    
    /* Показать мобильную версию */
    .mobile-interface {
        display: block !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Для современных браузеров */
        background: #f8fafc !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        overflow: hidden !important;
    }
    
    /* Стили для мобильных экранов */
    .mobile-screen {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Для современных браузеров */
        display: flex !important;
        flex-direction: column !important;
        background: #f8fafc !important;
        overflow: hidden !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 200 !important;
    }
    
    .mobile-screen.hidden {
        display: none !important;
    }
    
    .mobile-interface.hidden {
        display: none !important;
    }
    
    /* Основные экраны */
    .mobile-screen {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        background: white;
    }
    
    /* =======================================
       ГЛАВНЫЙ ЭКРАН
       ======================================= */
    
    /* Заголовок главного экрана */
    .mobile-main-screen .mobile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem 1rem;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .mobile-main-screen .mobile-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
    }
    
    /* Заголовки с кнопкой "Назад" для других экранов */
    .mobile-header {
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
        background: white !important;
        border-bottom: 1px solid #e5e7eb !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        min-height: 56px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-title {
        margin: 0 !important;
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        flex: 1 !important;
        text-align: left !important;
        margin-left: 0.75rem !important;
    }
    
    /* Кнопки загрузки */
    .mobile-upload-buttons {
        padding: 1.5rem 1rem;
        display: flex;
        gap: 1rem;
        background: white;
    }
    
    .mobile-upload-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 0.75rem;
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        background: #f8fafc;
        color: #475569;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
        min-height: 84px;
        position: relative;
        z-index: 1;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .mobile-upload-btn:hover,
    .mobile-upload-btn:active {
        border-color: #667eea;
        background: #f1f5f9;
        color: #667eea;
    }
    
    .mobile-upload-btn.file-btn {
        border-color: #10b981;
        color: #059669;
    }
    
    .mobile-upload-btn.file-btn:hover,
    .mobile-upload-btn.file-btn:active {
        border-color: #059669;
        background: #ecfdf5;
        color: #047857;
    }
    
    .mobile-upload-btn.text-btn {
        border-color: #f59e0b;
        color: #d97706;
    }
    
    .mobile-upload-btn.text-btn:hover,
    .mobile-upload-btn.text-btn:active {
        border-color: #d97706;
        background: #fffbeb;
        color: #b45309;
    }
    
    .mobile-upload-icon {
        width: 24px;
        height: 24px;
        stroke-width: 2;
    }
    
    /* Список файлов */
    .mobile-files-section {
        flex: 1;
        padding: 0 1rem;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .mobile-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #374151;
        margin: 1rem 0 0.75rem 0;
        padding-left: 0.5rem;
    }
    
    .mobile-files-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        border-radius: 8px;
        background: #f8fafc;
    }
    
    .mobile-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: #9ca3af;
        text-align: center;
        padding: 2rem;
    }
    
    .mobile-empty-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
        opacity: 0.6;
    }
    
    .mobile-empty-state p {
        margin: 0;
        font-size: 0.9rem;
    }
    
    /* Лоадер загрузки файлов */
    .mobile-file-loader {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        border: 1px solid #e5e7eb !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    .mobile-loader-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    
    .mobile-loader-spinner {
        width: 20px !important;
        height: 20px !important;
        border: 2px solid #f3f4f6 !important;
        border-top: 2px solid #059669 !important;
        border-radius: 50% !important;
        animation: mobile-spin 1s linear infinite !important;
    }
    
    .mobile-loader-text {
        font-size: 0.875rem !important;
        color: #374151 !important;
        font-weight: 500 !important;
    }
    
    @keyframes mobile-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Элементы файлов */
    .mobile-file-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: white;
        border-bottom: 1px solid #e5e7eb;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .mobile-file-item:hover,
    .mobile-file-item:active {
        background: #f3f4f6;
    }
    
    .mobile-file-item:last-child {
        border-bottom: none;
    }
    
    .mobile-file-icon {
        width: 40px;
        height: 40px;
        background: #667eea;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
    
    .mobile-file-icon svg {
        width: 20px;
        height: 20px;
        color: white;
    }
    
    .mobile-file-info {
        flex: 1;
        min-width: 0;
    }
    
    .mobile-file-name {
        font-weight: 600;
        color: #374151;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-file-meta {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    /* === Override to keep rows like before (not cards) === */
    .mobile-file-item {
        border: none !important;
        border-radius: 0 !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    /* Indent nested files to show hierarchy under the folder */
    .mobile-file-item.nested {
        padding-left: 2.5rem !important; /* base 1rem + extra indent */
    }
    .mobile-folder-row {
        display: flex !important;
        align-items: center !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding: 1rem !important;
        gap: 0.75rem !important;
        cursor: pointer !important;
    }
    .mobile-folder-icon {
        width: 40px !important;
        height: 40px !important;
        background: #f59e0b !important; /* folder color */
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        flex-shrink: 0 !important;
    }
    .mobile-folder-name {
        font-weight: 600 !important;
        color: #374151 !important;
        font-size: 0.9rem !important;
    }
    .mobile-folder-toggle {
        margin-left: auto !important;
        padding: 4px !important;
        color: #666 !important;
        background: none !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        transition: transform 0.2s ease !important;
    }
    .mobile-folder-toggle:hover {
        color: #333 !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
        border-radius: 3px !important;
    }
    .mobile-folder-toggle.expanded {
        transform: rotate(180deg) !important;
    }
    .mobile-folder-toggle::before {
        content: '▼' !important;
    }
    
    /* Нижние кнопки */
    .mobile-bottom-actions {
        display: flex !important;
        padding: 0.75rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
        gap: 0.5rem !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        margin-top: auto !important;
    }
    /* Добавляем отступ под фиксированную нижнюю панель действий (автоподстройка через CSS-переменную) */
    .mobile-files-list {
        padding-bottom: calc(var(--bottom-actions-h, 100px) + env(safe-area-inset-bottom)) !important;
    }
    
    .mobile-action-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.7rem 0.6rem;
        border: none;
        border-radius: 8px;
        background: #f8fafc;
        color: #64748b;
        font-size: 0.76rem;
        line-height: 1; /* нормализуем высоту строки, чтобы текст не смещал центр */
        text-align: center; /* безопасно центрируем текст */
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
        z-index: 1;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        min-height: 64px;
    }

    /* Гарантируем одинаковое позиционирование иконок во всех кнопках */
    .mobile-action-btn .mobile-action-icon {
        display: block;
        margin: 0 auto;
        width: 20px;
        height: 20px;
        margin-top: 0; /* фикс: исключаем прыжок текста после загрузки шрифтов */
    }
    
    .mobile-action-btn.upgrade-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .mobile-action-btn.upgrade-btn:hover,
    .mobile-action-btn.upgrade-btn:active {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    }
    
    .mobile-action-btn.login-btn:hover,
    .mobile-action-btn.login-btn:active {
        background: #e2e8f0;
        color: #475569;
    }
    
    .mobile-action-btn.support-btn:hover,
    .mobile-action-btn.support-btn:active {
        background: #e2e8f0;
        color: #475569;
    }
    
    .mobile-action-btn.cancel-subscription {
        background: #e63946;
        color: white;
    }
    
    .mobile-action-btn.cancel-subscription:hover,
    .mobile-action-btn.cancel-subscription:active {
        background: #d62d3a;
    }
    
    /* Инлайн-кнопка отмены в блоке подписки (на всю ширину) */
    #mobile-cancel-subscription-btn-inline {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0.75rem;
        min-height: 40px;
        line-height: 1.2;
        white-space: nowrap;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.875rem;
    }
    
    #mobile-cancel-subscription-btn-inline .mobile-btn-icon {
        display: none;
    }
    /* Страховка: скрываем любые svg-иконки у кнопки отмены подписки на мобиле */
    .mobile-action-btn.cancel-subscription .mobile-action-icon {
        display: none !important;
    }
    #mobile-cancel-subscription-btn-inline svg {
        display: none !important;
    }
    
    /* Стили для лоадера мобильного чата */
    .mobile-chat-loader {
        padding: 1rem;
        display: flex;
        justify-content: flex-start;
    }
    
    .mobile-chat-loader.hidden {
        display: none !important;
    }
    
    .mobile-chat-loader-message {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        max-width: 85%;
        background: #f1f5f9;
        border-radius: 1rem 1rem 1rem 0.25rem;
        padding: 0.75rem 1rem;
        animation: slideInLeft 0.3s ease;
    }
    
    .mobile-loader-avatar {
        width: 32px;
        height: 32px;
        background: #e2e8f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        animation: pulse 1.5s ease-in-out infinite;
    }
    
    .mobile-loader-avatar svg {
        width: 16px;
        height: 16px;
        color: #64748b;
        animation: spin 2s linear infinite;
    }
    
    .mobile-loader-text {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .mobile-loader-dots {
        display: flex;
        gap: 0.25rem;
        align-items: center;
    }
    
    .mobile-loader-dots span {
        width: 6px;
        height: 6px;
        background: #64748b;
        border-radius: 50%;
        animation: bounce 1.4s ease-in-out infinite both;
    }
    
    .mobile-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
    .mobile-loader-dots span:nth-child(2) { animation-delay: -0.16s; }
    .mobile-loader-dots span:nth-child(3) { animation-delay: 0s; }
    
    .mobile-loader-caption {
        font-size: 0.75rem;
        color: #64748b;
        opacity: 0.8;
    }
    
    @keyframes bounce {
        0%, 80%, 100% {
            transform: scale(0);
        }
        40% {
            transform: scale(1);
        }
    }
    
    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Стили для мобильных сообщений чата */
    .mobile-chat-message {
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        animation: slideInLeft 0.3s ease;
    }
    
    .mobile-user-message {
        justify-content: flex-end;
        margin-left: 2rem;
    }
    
    .mobile-user-message .mobile-message-content {
        background: #4f46e5;
        color: white;
        border-radius: 1rem 1rem 0.25rem 1rem;
        padding: 0.75rem 1rem;
        max-width: 85%;
    }
    
    .mobile-bot-message {
        justify-content: flex-start;
        margin-right: 2rem;
    }
    
    .mobile-bot-message .mobile-message-content {
        background: #f1f5f9;
        color: #1e293b;
        border-radius: 1rem 1rem 1rem 0.25rem;
        padding: 0.75rem 1rem;
        max-width: 85%;
    }
    
    .mobile-message-avatar {
        width: 32px;
        height: 32px;
        background: #e2e8f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .mobile-message-avatar svg {
        width: 16px;
        height: 16px;
        color: #64748b;
    }
    
    .mobile-message-text {
        line-height: 1.5;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    .mobile-message-actions {
        margin-top: 0.5rem;
        display: flex;
        gap: 0.5rem;
    }
    
    .mobile-copy-btn {
        background: #e2e8f0;
        border: none;
        border-radius: 0.375rem;
        padding: 0.375rem;
        cursor: pointer;
        transition: background-color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-copy-btn:hover {
        background: #cbd5e1;
    }
    
    .mobile-copy-btn:active {
        background: #94a3b8;
    }
    
    .mobile-chat-empty {
        text-align: center;
        color: #64748b;
        font-style: italic;
        padding: 2rem 1rem;
    }
    
    .mobile-action-icon {
        display: block;
        width: 20px;
        height: 20px;
        stroke-width: 2;
        flex-shrink: 0;
    }

    /* Отображаем иконку у кнопки Подписка и выравниваем размер с другими */
    .mobile-action-btn.upgrade-btn .mobile-action-icon {
        width: 20px;
        height: 20px;
        margin-top: 0; /* выравниваем с другими кнопками, убираем оптический сдвиг */
    }
    
    /* =======================================
       ЭКРАН ЧАТА
       ======================================= */
    
    .mobile-chat-header {
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
        background: white !important;
        border-bottom: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        min-height: 56px !important;
    }
    
    .mobile-back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        background: transparent !important;
        border-radius: 8px !important;
        color: #4b5563 !important;
        cursor: pointer !important;
        margin-right: 0 !important;
        transition: all 0.2s !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-back-btn:hover,
    .mobile-back-btn:active {
        background: #f3f4f6 !important;
        color: #1f2937 !important;
        transform: scale(0.95) !important;
    }
    
    .mobile-back-btn svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.5 !important;
    }
    
    .mobile-chat-title-container {
        flex: 1 !important;
        min-width: 0 !important;
        margin-left: 0.75rem !important;
    }
    
    .mobile-chat-title {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin: 0 0 0.25rem 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .mobile-chat-subtitle {
        font-size: 0.75rem !important;
        color: #6b7280 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .mobile-chat-actions {
        margin-left: 0.75rem;
    }
    
    .mobile-chat-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: #f8fafc;
        border-radius: 8px;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-chat-menu-btn:hover,
    .mobile-chat-menu-btn:active {
        background: #e2e8f0;
        color: #475569;
    }
    
    .mobile-chat-menu-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* Область чата */
    .mobile-chat-area {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .mobile-chat-messages {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }
    
    /* Поле ввода */
    .mobile-chat-input-container {
        padding: 1rem;
        background: white;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
    }
    
    .mobile-input-wrapper {
        display: flex;
        align-items: flex-end;
        gap: 0.75rem;
        background: #f8fafc;
        border-radius: 20px;
        padding: 0.5rem;
        border: 1px solid #e2e8f0;
    }
    
    .mobile-text-input {
        flex: 1;
        border: none;
        background: transparent;
        resize: none;
        outline: none;
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.5;
        padding: 0.5rem 0.75rem;
        max-height: 120px;
        min-height: 40px;
    }
    
    .mobile-send-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: #667eea;
        border-radius: 50%;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        flex-shrink: 0;
    }
    
    .mobile-send-btn:hover,
    .mobile-send-btn:active {
        background: #5a6fd8;
    }
    
    .mobile-send-btn svg {
        width: 18px;
        height: 18px;
        stroke-width: 2;
    }
    
    /* =======================================
       МОБИЛЬНЫЕ МОДАЛЬНЫЕ ОКНА
       ======================================= */
    
    /* Модальное окно авторизации */
    #auth-modal-overlay {
        z-index: 2000 !important;
    }
    
    .auth-box {
        width: 90% !important;
        max-width: 400px !important;
        margin: 1rem !important;
        padding: 2rem 1.5rem !important;
        border-radius: 16px !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    #close-auth-modal-btn {
        font-size: 2rem !important;
        padding: 12px !important;
        color: #64748b !important;
    }
    
    /* Модальное окно тарифов */
    #subscription-plans-modal-overlay {
        z-index: 2000 !important;
    }
    
    .subscription-plans-modal {
        width: 95% !important;
        max-width: 500px !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        max-height: 95vh;
        overflow-y: auto;
    }
    
    #close-subscription-plans-modal-btn {
        font-size: 2rem !important;
        padding: 12px !important;
        color: #64748b !important;
    }
    
    /* Адаптация тарифных планов для мобильных */
    .subscription-plans-modal .space-y-4 {
        margin-top: 1rem !important;
    }
    
    .subscription-plans-modal .space-y-3 {
        margin-top: 1rem !important;
    }
    
    .subscription-plans-modal .space-y-3 > div {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Кнопка оплаты */
    #pay-subscription-btn {
        font-size: 1rem !important;
        padding: 1rem !important;
        margin-top: 1.5rem !important;
    }
    
    /* Блок согласия */
    .subscription-plans-modal .mt-6.p-4 {
        padding: 1rem !important;
        margin-top: 1rem !important;
    }
    
    .subscription-plans-modal .mt-6.p-4 label {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    /* Модальное окно профиля */
    #profile-modal-overlay {
        z-index: 2000 !important;
    }
    
    .profile-modal {
        width: 95% !important;
        max-width: 500px !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        max-height: 95vh;
        overflow-y: auto;
    }
    
    #close-profile-modal-btn {
        font-size: 2rem !important;
        padding: 12px !important;
        color: #64748b !important;
    }
    
    /* Модальное окно загрузки текста */
    #text-upload-modal-overlay {
        z-index: 2000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0,0,0,0.7) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .text-upload-modal {
        width: 95% !important;
        max-width: 600px !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        background: white !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
        position: relative !important;
    }
    
    #close-text-upload-modal-btn {
        font-size: 2rem !important;
        padding: 12px !important;
        color: #64748b !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }
    
    .text-upload-modal h2 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
        padding-right: 2rem !important;
    }
    
    #text-upload-input {
        min-height: 250px !important;
        max-height: 350px !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding: 1rem !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        resize: vertical !important;
    }
    
    #text-upload-input:focus {
        border-color: #10b981 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    }
    
    .text-upload-modal .flex.gap-2.justify-end {
        margin-top: 1.5rem !important;
        gap: 1rem !important;
    }
    
    .text-upload-modal button {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    
    #submit-text-upload-btn {
        background: #10b981 !important;
        color: white !important;
        border: none !important;
    }
    
    #submit-text-upload-btn:hover {
        background: #059669 !important;
    }
    
    #cancel-text-upload-btn {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    #cancel-text-upload-btn:hover {
        background: #e2e8f0 !important;
    }
    
    /* Дополнительные стили для мобильных кнопок */
    .mobile-upload-btn,
    .mobile-action-btn,
    .mobile-file-item,
    .mobile-back-btn,
    .mobile-send-btn,
    .mobile-chat-menu-btn {
        cursor: pointer !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Активные состояния для мобильных кнопок */
    .mobile-upload-btn:active {
        transform: scale(0.98) !important;
        opacity: 0.8 !important;
    }
    
    .mobile-action-btn:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
    }
    
    .mobile-file-item:active {
        transform: scale(0.98) !important;
        background: #e5e7eb !important;
    }
    
    /* Модальные окна успеха платежа */
    #payment-success-modal-overlay,
    #payment-error-modal-overlay,
    #subscription-success-modal-overlay {
        z-index: 2000 !important;
    }
    
    .payment-success-modal,
    .payment-error-modal,
    .subscription-success-modal {
        width: 90% !important;
        max-width: 400px !important;
        margin: 1rem !important;
        padding: 2rem 1.5rem !important;
        border-radius: 16px !important;
    }
    
    /* Общие стили для кнопок закрытия в мобильных модалях */
    .mobile-interface:not(.hidden) ~ * .close-btn,
    .mobile-interface:not(.hidden) ~ * [id*="close-"][id*="modal"] {
        color: #64748b !important;
        font-size: 1.8rem !important;
        padding: 12px !important;
        transition: color 0.2s;
    }
    
    .mobile-interface:not(.hidden) ~ * .close-btn:hover,
    .mobile-interface:not(.hidden) ~ * [id*="close-"][id*="modal"]:hover {
        color: #475569 !important;
    }

    /* === СТИЛИ ДЛЯ НОВЫХ МОБИЛЬНЫХ ЭКРАНОВ === */
    
    /* Дополнительные интерактивные элементы */
    .mobile-submit-btn,
    .mobile-plan-btn,
    .mobile-tab-btn,
    .mobile-support-btn {
        cursor: pointer !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    .mobile-submit-btn:active,
    .mobile-plan-btn:active,
    .mobile-tab-btn:active,
    .mobile-support-btn:active {
        transform: scale(0.98) !important;
        opacity: 0.8 !important;
    }
    
    /* Общий контент экранов */
    .mobile-content {
        flex: 1 !important;
        padding: 1rem !important;
        overflow-y: auto !important;
        background: #f8fafc !important;
    }
    /* Доп. отступ под фиксированную нижнюю панель действий */
    .mobile-content {
        padding-bottom: calc(1rem + 100px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Стили для экрана загрузки текста */
    .mobile-input-section {
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-label {
        display: block !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        color: #374151 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-input {
        width: 100% !important;
        padding: 0.75rem !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        background: white !important;
        box-sizing: border-box !important;
    }
    
    .mobile-input:focus {
        outline: none !important;
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
    }
    
    .mobile-textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        background: white !important;
        resize: vertical !important;
        min-height: 120px !important;
        box-sizing: border-box !important;
    }
    
    .mobile-textarea:focus {
        outline: none !important;
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
    }
    
    .mobile-submit-btn {
        width: 100% !important;
        padding: 1rem !important;
        background: #8b5cf6 !important;
        color: white !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }
    
    .mobile-submit-btn.auth {
        background: #059669 !important;
        transition: all 0.2s !important;
    }
    
    .mobile-submit-btn.auth:disabled {
        background: #6b7280 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
    
    .mobile-btn-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Стили для экрана тарифов */
    .mobile-limit-message {
        background: linear-gradient(135deg, #fef3c7, #fbbf24) !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        border-left: 4px solid #f59e0b !important;
    }
    
    .mobile-limit-icon {
        font-size: 2rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-limit-text h3 {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: #92400e !important;
        margin: 0 0 0.5rem 0 !important;
    }
    
    .mobile-limit-text p {
        font-size: 0.875rem !important;
        color: #92400e !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .mobile-plans-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .mobile-plan-card {
        background: white !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        border: 2px solid #e5e7eb !important;
        position: relative !important;
    }
    
    .mobile-plan-card.premium {
        border-color: #8b5cf6 !important;
    }
    
    .mobile-plan-card.premium::before {
        content: "Популярный" !important;
        position: absolute !important;
        top: -10px !important;
        left: 1rem !important;
        background: #8b5cf6 !important;
        color: white !important;
        padding: 0.25rem 0.75rem !important;
        border-radius: 12px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }
    
    .mobile-plan-title {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-plan-price {
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        color: #8b5cf6 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-plan-discount {
        font-size: 0.875rem !important;
        color: #059669 !important;
        font-weight: 600 !important;
        margin-bottom: 1rem !important;
        background: rgba(5, 150, 105, 0.1) !important;
        padding: 0.5rem !important;
        border-radius: 6px !important;
        text-align: center !important;
    }
    
    .mobile-plan-features {
        list-style: none !important;
        padding: 0 !important;
        margin: 1rem 0 !important;
    }
    
    .mobile-plan-features li {
        padding: 0.5rem 0 !important;
        color: #6b7280 !important;
        position: relative !important;
        padding-left: 1.5rem !important;
    }
    
    .mobile-plan-features li::before {
        content: "✓" !important;
        position: absolute !important;
        left: 0 !important;
        color: #059669 !important;
        font-weight: bold !important;
    }
    
    .mobile-plan-btn {
        width: 100% !important;
        padding: 0.75rem !important;
        border: 2px solid #e5e7eb !important;
        border-radius: 8px !important;
        background: white !important;
        color: #6b7280 !important;
        font-weight: 600 !important;
        margin-top: 1rem !important;
    }
    
    .mobile-plan-btn.current {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
        cursor: not-allowed !important;
    }
    
    .mobile-plan-btn.current:active {
        transform: none !important;
        opacity: 1 !important;
    }
    
    .mobile-plan-btn.premium {
        background: #8b5cf6 !important;
        color: white !important;
        border-color: #8b5cf6 !important;
        transition: all 0.2s !important;
    }
    
    .mobile-plan-btn.premium:disabled {
        background: #6b7280 !important;
        border-color: #6b7280 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
    
    /* Блок согласия для мобильных тарифов */
    .mobile-consent-block {
        background: #f9fafb !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-top: 1.5rem !important;
    }
    
    .mobile-consent-content {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .mobile-consent-checkbox {
        width: 18px !important;
        height: 18px !important;
        accent-color: #8b5cf6 !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-consent-label {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        color: #374151 !important;
        cursor: pointer !important;
    }
    
    .mobile-consent-link {
        color: #8b5cf6 !important;
        text-decoration: underline !important;
    }
    
    .mobile-consent-link:hover {
        color: #7c3aed !important;
    }
    
    .mobile-consent-error {
        color: #dc2626 !important;
        font-size: 0.875rem !important;
        margin-top: 0.75rem !important;
        font-weight: 500 !important;
    }
    
    .mobile-consent-error.hidden {
        display: none !important;
    }
    
    /* Скрытие сообщения о лимитах на экране мобильных тарифов */
    .mobile-limit-message.hidden {
        display: none !important;
    }
    
    /* Стили для экрана авторизации */
    .mobile-auth-tabs {
        display: flex !important;
        background: #f3f4f6 !important;
        border-radius: 8px !important;
        padding: 0.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-tab-btn {
        flex: 1 !important;
        padding: 0.75rem !important;
        border: none !important;
        background: transparent !important;
        color: #6b7280 !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        transition: all 0.2s !important;
    }
    
    .mobile-tab-btn.active {
        background: white !important;
        color: #8b5cf6 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    .mobile-auth-form {
        display: block !important;
    }
    
    .mobile-auth-form.hidden {
        display: none !important;
    }
    
    /* Стили для экрана профиля */
    .mobile-profile-info {
        text-align: center !important;
        background: white !important;
        border-radius: 12px !important;
        padding: 2rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-profile-avatar {
        width: 80px !important;
        height: 80px !important;
        background: #8b5cf6 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 1rem !important;
    }
    
    .mobile-profile-avatar svg {
        width: 40px !important;
        height: 40px !important;
        color: white !important;
    }
    
    .mobile-profile-email {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-profile-plan {
        color: #6b7280 !important;
        font-size: 0.9rem !important;
    }
    
    .mobile-profile-stats {
        background: white !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .mobile-stat-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .mobile-stat-item:last-child {
        border-bottom: none !important;
    }
    
    .mobile-stat-label {
        color: #6b7280 !important;
        font-size: 0.9rem !important;
    }
    
    .mobile-stat-value {
        font-weight: 600 !important;
        color: #1f2937 !important;
    }
    
    .mobile-profile-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Стили для экрана поддержки */
    .mobile-support-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .mobile-support-card {
        background: white !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
        text-align: center !important;
    }
    
    .mobile-support-icon {
        width: 60px !important;
        height: 60px !important;
        background: #8b5cf6 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 1rem !important;
    }
    
    .mobile-support-icon svg {
        width: 30px !important;
        height: 30px !important;
        color: white !important;
    }
    
    .mobile-support-title {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-support-description {
        color: #6b7280 !important;
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    .mobile-support-btn {
        width: 100% !important;
        padding: 0.75rem !important;
        background: #8b5cf6 !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }
}

/* Скрыть мобильный интерфейс на десктопе */
@media (min-width: 769px) {
    .mobile-interface {
        display: none !important;
    }
    /* На десктопе: если мобильная панель рендерится, скрываем её на всякий случай */
    .mobile-bottom-actions { display: none !important; }
    /* Организуем раскладку: шапка + остальная часть без внешнего скролла */
    html { height: 100%; overflow: hidden; }
    body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
    header { flex: 0 0 auto; }
    #app-container { flex: 1 1 auto; height: auto; }
}