/*app/static/style.css*/

/* [1. ПЕРЕМЕННЫЕ] */
:root {--bg-color:#1a1a1a;--sidebar-bg:#111;--accent-color:#388bfd;--text-main:#e1e1e1;--input-bg:#2a2a2a;--bot-accent:#4db6ac;}

/* [2. БАЗОВЫЕ СТИЛИ] */
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-main);margin:0;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;}
body.guest {overflow:hidden;}
@keyframes fadeIn {from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);}}

/* [3. ШАПКА И НАВИГАЦИЯ] */
header {position:fixed;top:0;width:100%;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;z-index:1000;box-sizing:border-box;background:none;}
.header-left {display:flex;align-items:center;gap:15px;}
.logo {font-size:1.4rem;font-weight:700;color:#fff;text-decoration:none;}
.sidebar-toggle-btn {background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;}
.model-select-modern {background:rgba(255,255,255,0.05);color:white;border:1px solid #444;border-radius:8px;padding:5px 10px;margin-right:10px;outline:none;cursor:pointer;font-size:0.85em;height:35px;transition:border-color 0.3s;}
.model-select-modern:focus {border-color:#007bff;}

/* Мобилки и PWA: тот самый "стеклянный" градиент */
@media (max-width: 768px) {
    header {background:linear-gradient(to bottom, var(--bg-color) 0%, rgba(26,26,26,0.8) 40%, rgba(26,26,26,0) 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
}

/* [4. ВЫПАДАЮЩЕЕ МЕНЮ] */
.dropdown {position:relative;}
.dropdown-toggle {background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;}
.user-icon {width:35px;height:35px;border-radius:50%;cursor:pointer;object-fit:cover;display:block;}
.dropdown-menu {display:none;position:absolute;right:0;top:50px;background:#222;border:1px solid #333;border-radius:10px;min-width:150px;z-index:3000;box-shadow:0 4px 12px rgba(0,0,0,0.5);}
.dropdown.show .dropdown-menu {display:block;}
.dropdown-menu a {display:block;padding:10px 15px;color:#ccc;text-decoration:none;font-size:0.9rem;transition:0.2s;}
.dropdown-menu a:hover {background:#333;color:var(--accent-color);}

/* [9. УВЕДОМЛЕНИЯ (FLASH)] */
.flash-messages {
    max-width: 800px;
    margin: 80px auto 20px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    z-index: 900;
}
.flash {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    animation: fadeIn 0.3s ease forwards;
    border: 1px solid transparent;
}
.flash.error, .flash.danger {background: rgba(255, 77, 77, 0.1); color: #ff4d4d; border-color: rgba(255, 77, 77, 0.2);}
.flash.success {background: rgba(77, 182, 172, 0.1); color: #4db6ac; border-color: rgba(77, 182, 172, 0.2);}
.flash.info {background: rgba(56, 139, 253, 0.1); color: var(--accent-color); border-color: rgba(56, 139, 253, 0.2);}

/* ПРОФИЛЬ АДАПТАЦИЯ */
.container_profile { margin-top: 80px !important; }
@media (max-width: 600px) {
    .profile-header { flex-direction: column !important; text-align: center !important; }
    .profile-header img { margin-right: 0 !important; margin-bottom: 15px !important; }
    .profile-sections { grid-template-columns: 1fr !important; }
    .container_profile { padding: 10px !important; }
}

/* ПЛЕЕР АНИМАЦИИ */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinning { animation: spin 2s linear infinite !important; }
.ticker-wrapper {display: flex; align-items: center;}
.ticker-text { display: inline-block; padding-left: 20px; animation: ticker 10s linear infinite; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@media (min-width: 800px) { .ticker-text { animation: none; padding-left: 5px; } }

/* ЧАТ ОПЦИИ */
.chat-options-container { position: relative; display: none; }
.chat-item:hover .chat-options-container { display: block; }
.options-btn { background: none; border: none; color: #888; cursor: pointer; padding: 5px 8px; border-radius: 50%; }
.options-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.options-dropdown { display: none; position: absolute; right: 0; top: 30px; background: #282828; border: 1px solid #444; border-radius: 8px; z-index: 1000; min-width: 150px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.options-dropdown button { width: 100%; text-align: left; background: none; border: none; color: #eee; padding: 10px 15px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.options-dropdown button:hover { background: #383838; }
.options-dropdown button.delete-action:hover { color: #ff4d4d; }
.options-dropdown.show { display: block; }

/* PWA ПУЛЬСАЦИЯ */
@keyframes pulse-animation {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(29, 185, 84, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29, 185, 84, 0); }
}
#install-pwa-btn img { animation: pulse-animation 2s infinite; cursor: pointer; }

/* СТИЛИ МОДАЛЬНОГО ОКНА УДАЛЕНИЯ */
.modal-confirm {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-confirm-content {
    background-color: #1e1e1e;
    border: 1px solid #333;
    padding: 25px;
    border-radius: 16px;
    width: 90%;
    max-width: 320px;
    text-align: center;
}

.modal-confirm-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-confirm-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn-cancel { background: #333; color: #eee; }
.btn-delete-confirm { background: #ff4d4d; color: #fff; }

/* Адаптация модалки под маленькие экраны */
@media (max-width: 480px) {
    .modal-confirm-content {
        width: 85%; /* Увеличиваем относительную ширину */
        padding: 20px;
        border-radius: 20px; /* Делаем чуть более скругленным для мобильного стиля */
    }

    .modal-confirm-content h4 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .modal-confirm-buttons {
        flex-direction: column; /* Кнопки друг под другом для удобства нажатия */
        gap: 8px;
    }

    .btn-cancel, .btn-delete-confirm {
        width: 100%;
        padding: 14px; /* Увеличиваем высоту кнопок под палец */
        font-size: 1rem;
        margin: 0; /* Убираем боковые отступы, так как теперь они в колонку */
    }

    /* Делаем кнопку отмены менее яркой, чтобы не отвлекала */
    .btn-cancel {
        order: 2; /* Опускаем "Отмену" вниз */
        background: transparent;
        color: #888;
    }
    
    .btn-delete-confirm {
        order: 1; /* Кнопка действия сверху */
    }
}

/* БЕТА - КАРТОЧКА (ЦЕНТР) */
.beta-card-container {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #1e1e1e; border: 1px solid #333; border-radius: 20px; padding: 24px;
    width: 90%; max-width: 420px; box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    z-index: 9999; animation: cardPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.beta-card-header { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.2rem; margin-bottom: 15px; color: #fff; }
.beta-card-content p { color: #aaa; font-size: 0.95rem; line-height: 1.5; margin-bottom: 25px; }
.beta-card-actions { display: flex; flex-direction: column; gap: 12px; }
.beta-btn-primary { background: #1db954; color: white; padding: 12px; border-radius: 10px; text-decoration: none; font-size: 1rem; font-weight: bold; text-align: center; transition: transform 0.2s; }
.beta-btn-secondary { background: transparent; border: none; color: #666; padding: 8px; cursor: pointer; font-size: 0.85rem; text-decoration: underline; }
@keyframes cardPop { from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* НОВОСТНОЙ БАННЕР (ВЕРХ) */
.news-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; width: auto; min-width: 300px; max-width: 90%; }
.news-content { background: rgba(30, 30, 30, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 15px; border-radius: 50px; display: flex; align-items: center; gap: 12px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.news-tag { background: #1db954; color: white; font-size: 0.7rem; font-weight: bold; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
#news-text { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#news-text a { color: #1db954; text-decoration: underline; font-weight: bold; } /* Добавил стиль для ссылки */
.news-close { background: none; border: none; color: #888; cursor: pointer; font-size: 1.2rem; margin-left: auto; }
/* Устранение белой микро-полоски под хедером 
header {
    /* Добавляем мизерную тень вниз, которая перекроет щель, если она появится
    box-shadow: 0 1px 0 0 var(--bg-color); 
} */

/* 1. ССЫЛКА И ДИСКЛЕЙМЕР (ПОД ИНПУТОМ) */
.help-link-container {
    text-align: center;
    margin-top: 10px;
    line-height: 1.6;
}

.help-text-link {
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
}

.help-text-link:hover {
    color: #00d4ff;
}

.disclaimer-text {
    font-size: 0.75rem;
    color: #444; /* Еще чуть приглушили */
    pointer-events: none;
}

/* 2. МОДАЛЬНОЕ ОКНО (ФОН) */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Чуть светлее фон */
    backdrop-filter: blur(8px); /* Больше размытия для чистого вида */
}

/* 3. КОНТЕЙНЕР ОКНА */
.modal-content-geek {
    background-color: #161616; /* Глубокий темный */
    color: #eee;
    margin: 15vh auto;
    padding: 24px;
    border: 1px solid #222; /* Очень тонкая граница */
    width: 90%;
    max-width: 360px;
    border-radius: 16px; /* Чуть менее скругленные углы для строгости */
    box-sizing: border-box;
}

/* 4. ШАПКА */
.modal-header-geek {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.modal-header-geek h2 {
    margin: 0;
    font-size: 1.1rem; /* Уменьшили размер для минимализма */
    font-weight: 500;
    color: #00d4ff;
}

.close-modal {
    color: #444;
    font-size: 24px;
    cursor: pointer;
}

.close-modal:hover { color: #eee; }

/* 5. СПИСОК КОМАНД */
.commands-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
}

/* Скрываем стандартный скроллбар, оставляем только тонкую линию */
.commands-list::-webkit-scrollbar { width: 2px; }
.commands-list::-webkit-scrollbar-thumb { background: #333; }

.commands-list li {
    padding: 14px 0;
    border-bottom: 1px solid #222; /* Едва заметная линия */
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ccc;
}

.commands-list li:last-child { border: none; }

.commands-list i {
    width: 20px;
    color: #00d4ff;
    opacity: 0.8; /* Иконки чуть спокойнее */
    text-align: center;
}

/* 6. МОБИЛКИ */
@media (max-width: 360px) {
    .modal-content-geek { margin: 10vh auto; width: 95%; padding: 20px; }
    .commands-list li { font-size: 0.85rem; }
}

/*"Neural Drift"*/
body {
    background-color: #0e0e0e; /* Глубокий черный основной фон */
    overflow-x: hidden;
}

/* Делаем wrapper чата и другие крупные блоки прозрачными */
.chat-wrapper, .eye-portal-container {
    background: transparent !important;
}

/* Если у сообщений слишком плотный фон, можно чуть снизить непрозрачность (по желанию) */
.message-inner {
    backdrop-filter: blur(4px); /* Эффект матового стекла для стиля */
}