/* static/style.css - FIXED & BEAUTIFIED */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* БАЗОВАЯ ТЁМНАЯ ТЕМА ДЛЯ ВСЕГО МИНИ-АПП */
    --bg-color: #000000; /* Fallback */
    --bg-gradient: linear-gradient(180deg, #1c1c1e 0%, #000000 100%);
    --secondary-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --hint-color: #98989d;
    --separator-color: #38383a;

    --blue: #0a84ff;
    --green: #34c759;
    --red: #ff3b30;

    --card-shadow: 0 4px 16px rgba(0,0,0,0.4);

    --chat-user-bg: #0a84ff;
    --chat-user-text: #ffffff;
    --chat-bot-bg: #2c2c2e;
    --chat-bot-text: #ffffff;

    --input-bg: #2c2c2e;
    --input-border: #38383a;
}

body.dark-mode {
    /* Тёмная тема с таким же градиентом, как у дашборда, для ВСЕХ экранов */
    --bg-color: #000000; /* Fallback */
    --bg-gradient:
        radial-gradient(circle at top, rgba(10,132,255,0.18), transparent 55%),
        linear-gradient(180deg, #1c1c1e 0%, #000000 100%);
    --secondary-bg-color: rgba(28,28,30,0.96);
    --text-color: #ffffff;
    --hint-color: #98989d;
    --separator-color: #38383a;
    --card-shadow: 0 4px 16px rgba(0,0,0,0.4);
    --chat-user-bg: #0a84ff;
    --chat-user-text: #ffffff;
    --chat-bot-bg: #2c2c2e;
    --chat-bot-text: #ffffff;
    --input-bg: #2c2c2e;
    --input-border: #38383a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color);
    background-image: var(--bg-gradient, none);
    background-attachment: fixed;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.5;
    overscroll-behavior-y: none;
    padding-bottom: 0;
}

#app, #loader { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* HEADER */
.header {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
    padding-top: 20px;
}
.logo-container {
    width: 90px;
    height: 90px;
    border-radius: 22px; /* Мягкий квадрат */
    overflow: hidden;
    background: var(--secondary-bg-color);
    box-shadow: var(--card-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--separator-color);
}
.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-info { text-align: center; }
.user-info h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.5px; }
.user-info p { font-size: 15px; color: var(--hint-color); margin: 0; }

/* MENU GRID */
.label {
    font-size: 13px; font-weight: 600; color: var(--hint-color);
    margin: 24px 0 10px; text-transform: uppercase; padding-left: 12px; letter-spacing: 0.5px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 12px 16px 12px;
}

/* Специальный стиль для главных кнопок "Библия" и "Дух пророчества",
   чтобы они выглядели как современные карточки-тайлы в духе дашборда */
[data-action="showBible"],
[data-action="showEgwWritings"] {
    background: var(--secondary-bg-color);
    border-radius: 18px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255,255,255,0.05);
}

.tool {
    background: var(--secondary-bg-color);
    border-radius: 18px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: transform 0.1s, opacity 0.1s;
    border: 1px solid rgba(255,255,255,0.05);
}
.tool:active { transform: scale(0.96); opacity: 0.8; }
.icon-box { font-size: 28px; margin-bottom: 4px; }
.tool span { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.1; }

/* READINGS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px; }
.card-sm {
    background: var(--secondary-bg-color);
    padding: 16px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.05);
}
.card-sm:active { opacity: 0.7; transform: scale(0.98); }
.card-sm span { font-size: 24px; }

/* NEWS - 7. Image Fix */
.news-list { display: flex; flex-direction: column; gap: 16px; padding: 0 12px; }
.news-item {
    background: var(--secondary-bg-color);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: var(--card-shadow);
    display: block;
    border: 1px solid rgba(255,255,255,0.05);
}
.news-img-container {
    width: 100%;
    height: 200px;
    background: var(--secondary-bg-color);
    overflow: hidden;
    position: relative;
}
.news-img { width: 100%; height: 100%; object-fit: cover; }
.news-content { padding: 16px; }
.news-title { font-weight: 700; font-size: 18px; margin-bottom: 8px; line-height: 1.3; }
.news-summary { font-size: 15px; color: var(--text-color); opacity: 0.8; line-height: 1.5; margin-bottom: 12px; }
.news-date { font-size: 13px; color: var(--hint-color); }

/* BIBLE & TEXT */
.reading-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-color);
    white-space: pre-wrap;
    padding-bottom: 40px;
}
.reading-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    margin-bottom: 16px;
    display: block;
    box-shadow: var(--card-shadow);
}
.reading-text pb, .reading-text t, .reading-text i_tag { display: none; }

.comment-marker {
    color: var(--blue);
    background: rgba(0, 122, 255, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: bold;
    vertical-align: super;
    margin: 0 2px;
    display: inline-block;
}

/* CHAPTER GRID */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding-bottom: 20px;
}
.chapter-item {
    background: var(--secondary-bg-color);
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.05);
}
.chapter-item:active { background: var(--blue); color: white; border-color: var(--blue); }

/* LISTS */
.list-group {
    background: var(--secondary-bg-color);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 20px;
    margin: 0 12px 20px 12px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255,255,255,0.05);
}
.list-item {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--separator-color);
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
    background: var(--secondary-bg-color);
}
.list-item:last-child { border-bottom: none; }
.list-item:active { background-color: rgba(128,128,128,0.1); }
.badge {
    background: rgba(142, 142, 147, 0.15);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-color);
    font-weight: 600;
}
.badge.green { color: #32d74b; background: rgba(50, 215, 75, 0.15); }

/* MODALS */
.view {
    display: none;
    padding-bottom: 0; /* убираем лишний отступ снизу у экранов */
    background: transparent; /* фон берём из body, чтобы всё было литым */
}
.view.active { display: block; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.view-content { padding: 16px 8px; }

.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color);
    background-image: var(--bg-gradient, none);
    background-attachment: fixed;
    z-index: 3000;
    display: flex; flex-direction: column;
    animation: slideUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.modal-head {
    padding: 0 12px;
    height: 60px;
    display: flex; align-items: center;
    background: var(--secondary-bg-color);
    border-bottom: 1px solid var(--separator-color);
    flex-shrink: 0;
    position: relative;
    z-index: 3001;
}
.modal-head button {
    background: none; border: none; padding: 12px;
    font-size: 22px; cursor: pointer; color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.modal-head h3 { flex: 1; text-align: center; margin: 0; font-size: 18px; font-weight: 600; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px 16px; -webkit-overflow-scrolling: touch; }

/* ========== CHAT (AI) - ИСПРАВЛЕНО ========== */
.chat-container { 
    display: flex; 
    flex-direction: column; 
    height: calc(100vh - 60px); /* Высота на весь экран минус шапка модалки */
    position: relative;
    padding-bottom: 0; /* Убираем лишние отступы */
}

.chat-history { 
    flex: 1; 
    overflow-y: auto; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px;
    padding-bottom: 80px; /* Отступ снизу, чтобы текст не прятался за полем ввода */
    -webkit-overflow-scrolling: touch;
}

.chat-input-area {
    position: absolute; /* Приклеиваем ко дну */
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: var(--secondary-bg-color);
    border-top: 1px solid var(--separator-color);
    display: flex; 
    gap: 12px;
    z-index: 100;
    margin-bottom: 0; /* Сбрасываем старые отступы */
}
.chat-msg {
    padding: 14px 18px;
    border-radius: 20px;
    max-width: 88%;
    font-size: 16px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.chat-msg.user {
    align-self: flex-end;
    background-color: var(--chat-user-bg);
    color: var(--chat-user-text);
    border-bottom-right-radius: 4px;
}
.chat-msg.bot {
    align-self: flex-start;
    background-color: var(--chat-bot-bg);
    color: var(--chat-bot-text);
    border-bottom-left-radius: 4px;
}

/* UTILS */
.btn-main, .btn-sec {
    width: 100%; padding: 16px; border-radius: 16px; border: none;
    font-size: 17px; font-weight: 600; margin-top: 16px; cursor: pointer;
    text-align: center; transition: transform 0.1s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-main { background: var(--blue); color: white; }
.btn-sec { background: var(--secondary-bg-color); color: var(--blue); }
.btn-main:active, .btn-sec:active { transform: scale(0.97); opacity: 0.9; }

.flex-center { display: flex; justify-content: center; align-items: center; height: 100%; min-height: 250px; flex-direction: column; gap: 20px; color: var(--hint-color); text-align: center; }

/* 6. INPUTS - FIXED VISIBILITY */
input[type="text"] {
    width: 100%; padding: 14px; border-radius: 14px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 16px; margin-bottom: 0;
    outline: none;
    transition: border-color 0.2s;
}
input[type="text"]:focus { border-color: var(--blue); }

/* PLAN & STATS */
.plan-card {
    background: linear-gradient(135deg, var(--blue), #5ac8fa);
    color: white; padding: 24px; border-radius: 22px; margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.35);
}
.progress-bar { width: 100%; height: 8px; background: rgba(0,0,0,0.2); border-radius: 4px; margin: 16px 0; }
.progress-fill { height: 100%; background: white; border-radius: 4px; transition: width 0.5s ease; box-shadow: 0 0 10px rgba(255,255,255,0.5); }

.stats-row { display: flex; gap: 12px; margin-bottom: 24px; padding: 0 8px; }
.stat-box {
    flex: 1; background: var(--secondary-bg-color);
    padding: 16px 8px; border-radius: 18px; text-align: center;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255,255,255,0.05);
}
.stat-box b { font-size: 24px; display: block; margin-bottom: 4px; }
.stat-box span { font-size: 11px; color: var(--hint-color); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }

/* DASHBOARD (HOME) */
.dashboard-view {
    padding: 16px 12px 14px 12px;
    background: radial-gradient(circle at top, rgba(0,122,255,0.12), transparent 55%);
}

.dashboard-header {
    margin-bottom: 14px;
}

.dashboard-title {
    font-size: 22px;
    font-weight: 800;
}

.dashboard-subtitle {
    font-size: 13px;
    color: var(--hint-color);
    margin-top: 4px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.dashboard-card {
    position: relative;
    border-radius: 20px;
    padding: 12px 10px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 88px;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(10,132,255,0.35), rgba(28,28,30,0.96));
}

/* Цветные «ауры» у карточек */
.dashboard-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: 0.28;
    background: radial-gradient(circle at top left, rgba(0,122,255,0.9), transparent 55%);
}

.dashboard-card:nth-child(2)::before {
    background: radial-gradient(circle at top, rgba(52,199,89,0.9), transparent 55%);
}

.dashboard-card:nth-child(3)::before {
    background: radial-gradient(circle at top right, rgba(255,204,0,0.9), transparent 55%);
}

.dashboard-card-label,
.dashboard-card-main,
.dashboard-card-caption {
    position: relative;
    z-index: 1;
}

.dashboard-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hint-color);
    margin-bottom: 4px;
}

.dashboard-card-main {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
}

/* Субботнее поздравление в карточке: компактно, чтобы не обрезалось */
#dash-sabbath-timer.dash-sabbath-greeting{
    font-size: 16px;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
}

/* Таймер до субботы: всегда в одну строку (кроме greeting) */
#dash-sabbath-timer:not(.dash-sabbath-greeting) {
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

.dashboard-card-caption {
    font-size: 11px;
    color: var(--hint-color);
    margin-top: 4px;
}

/* Карточка мысли дня как открытка */
.dashboard-quote-card {
    position: relative;
    border-radius: 22px;
    padding: 16px 14px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255,255,255,0.14);
    margin-top: 4px;
    overflow: hidden;
    background: radial-gradient(circle at top right, rgba(94,92,255,0.5), rgba(0,0,0,0.96));
}

.dashboard-quote-card::before {
    content: "❝";
    position: absolute;
    top: 6px;
    right: 16px;
    font-size: 40px;
    opacity: 0.16;
}

.dashboard-quote-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(248,250,252,0.8);
    margin-bottom: 6px;
}

.dashboard-quote-text {
    font-size: 15px;
    line-height: 1.6;
}

.dashboard-quote-main {
    margin-bottom: 6px;
}

.dashboard-quote-source {
    font-size: 12px;
    color: rgba(226,232,240,0.9);
}

/* Адаптив под узкие экраны */
@media (max-width: 380px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* 8. TAB BAR - FIXED Z-INDEX & INTERACTION */
.tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 85px; background: var(--secondary-bg-color);
    display: flex; justify-content: space-around; align-items: flex-start;
    padding-top: 10px;
    border-top: 1px solid var(--separator-color);
    z-index: 5000; /* Очень высокий Z-Index */
    padding-bottom: env(safe-area-inset-bottom, 20px);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.tab-item {
    display: flex; flex-direction: column; align-items: center;
    font-size: 10px; color: var(--hint-color); gap: 6px; width: 64px;
    cursor: pointer;
    font-weight: 500;
}
.tab-item.active { color: var(--blue); }
.tab-item i { font-size: 26px; transition: transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1); }
.tab-item:active i { transform: scale(0.85); }

/* static/style.css - ДОПОЛНЕНИЯ К СУЩЕСТВУЮЩИМ СТИЛЯМ */
/* ========== QUIZ STYLES (NEW!) ========== */
.quiz-btn {
    width: 100%;
    padding: 18px 20px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: 2px solid var(--separator-color);
    background: var(--secondary-bg-color);
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 🔁 Big "Пересдача ошибок" button */
.quiz-review-wrap{
    margin-top: 12px;
    padding: 0 2px;
}
.quiz-review-btn{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    min-height: 104px;          /* “на 2 ряда” */
    border-radius: 20px;
    border: 2px solid var(--separator-color);
    background: var(--secondary-bg-color);
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform .12s ease, opacity .12s ease;
}
.quiz-review-btn:active{
    transform: scale(0.985);
    opacity: 0.9;
}
.quiz-review-icon{
    font-size: 34px;
    width: 42px;
    text-align: center;
}
.quiz-review-title{
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}
.quiz-review-sub{
    margin-top: 4px;
    font-size: 13px;
    color: var(--hint-color);
    line-height: 1.2;
}

.quiz-btn:hover {
    border-color: var(--blue);
    background: rgba(0, 122, 255, 0.05);
}

.quiz-btn:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ========== BIBLE SEARCH STYLES (ENHANCED) ========== */
.search-bar {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--bg-color);
    border-radius: 16px;
    margin-bottom: 12px;
    align-items: center;
}

.search-bar i {
    color: var(--hint-color);
    font-size: 18px;
    margin-left: 4px;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: none;
}

.search-bar button {
    background: var(--blue);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.chips {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chip {
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--secondary-bg-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.chip.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

.result-area {
    padding: 16px;
}

/* ========== STICKY HEADER (NEW!) ========== */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    padding: 16px 12px 0 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sticky-header h2 {
    margin: 0 0 12px 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ========== COMMENT MARKER (ENHANCED) ========== */
.comment-marker {
    color: var(--blue);
    background: rgba(0, 122, 255, 0.15);
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: 700;
    vertical-align: super;
    margin: 0 3px;
    display: inline-block;
    transition: all 0.2s;
    border: 1px solid rgba(0, 122, 255, 0.3);
}

.comment-marker:hover {
    background: rgba(0, 122, 255, 0.25);
    transform: scale(1.1);
}

.comment-marker:active {
    transform: scale(0.95);
}

/* ========== FAVORITE STAR (NEW!) ========== */
.fav-star {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.fav-star:active {
    transform: scale(1.2);
    background: rgba(255, 204, 0, 0.3);
}

/* ========== SPACER (UTILITY) ========== */
.spacer {
    height: 100px;
}

/* ========== LOADING ANIMATION (NEW!) ========== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ========== ENHANCED CARDS ========== */
.card-sm:hover {
    opacity: 0.9;
}

/* === ГЛОБАЛЬНЫЙ "ДАШБОРДОВЫЙ" СТИЛЬ ДЛЯ КАРТОЧЕК И МЕНЮ === */
.tool,
.card-sm,
.news-item,
.stat-box,
.list-group,
.chapter-item,
.video-card,
.dashboard-card,
.dashboard-quote-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;

    /* Тот же визуальный характер, что и у дашборда */
    background: radial-gradient(circle at top, rgba(10,132,255,0.22), rgba(28,28,30,0.98));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 28px rgba(0,0,0,0.60);
}

/* Чтобы строки внутри списков не перекрывали градиент */
.list-item {
    background: transparent;
}

.list-item:active {
    background-color: rgba(255,255,255,0.08);
}

/* ========== IMPROVED SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* ========== RESPONSIVE FIXES ========== */
@media (max-width: 360px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tool span {
        font-size: 11px;
    }
    
    .icon-box {
        font-size: 24px;
    }
}

/* ========== DARK MODE ENHANCEMENTS ========== */
body.dark-mode .search-bar {
    background: var(--secondary-bg-color);
}

body.dark-mode .chip {
    background: var(--secondary-bg-color);
    border-color: var(--separator-color);
}

body.dark-mode .quiz-btn {
    background: var(--secondary-bg-color);
    border-color: var(--separator-color);
}

body.dark-mode .quiz-btn:hover {
    background: rgba(10, 132, 255, 0.15);
}

/* ========== SAFE AREA INSETS ========== */
@supports (padding: max(0px)) {
    body {
        padding-bottom: max(95px, env(safe-area-inset-bottom, 0px));
    }
    
    .tab-bar {
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }
}

/* FIX: Modal z-index */
.modal {
    z-index: 6000; /* Выше таб-бара */
}

/* Когда модальное окно открыто, скрываем нижние табы */
.modal:not(.hidden) ~ .tab-bar {
    display: none !important;
}
body.modal-open .tab-bar {
  display: none !important;
}
/* ============================================================ */
/* ОБЕТОВАНИЯ (НОВЫЕ СТИЛИ) — НЕ ВЛИЯЮТ НА СУЩЕСТВУЮЩИЕ */
/* ============================================================ */

#promise-result .reading-text {
    background: var(--secondary-bg-color);
    padding: 16px;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

#promise-result .reading-text b {
    color: var(--link-color);
}

#promise-result .reading-text i {
    color: var(--hint-color);
    font-style: italic;
}

/* Кнопка обетований с градиентом */
button[data-action="showPromiseSearchModal"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Анимация загрузки */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spinner.fa-spin {
    animation: spin 1s linear infinite;
}
/* ============================================================ */
/* ФИНАЛЬНЫЕ ИСПРАВЛЕНИЯ (ВЫРАВНИВАНИЕ И КНОПКА) */
/* ============================================================ */

/* 1. ЖЕСТКОЕ выравнивание результатов поиска влево */
#promise-result,
#promise-result .reading-text,
#promise-result div,
#promise-result p,
#promise-result h1,
#promise-result h2,
#promise-result h3 {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    display: block !important;
}

/* 2. Красивая кнопка "Обетование" (Белый текст + Жирность) */
button[data-action="showPromiseSearchModal"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important; /* Белый цвет текста */
    font-weight: 600 !important; /* Полужирный шрифт */
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4) !important; /* Фиолетовая тень */
    border: none !important;
}

/* Видеоплеер */
.player-wrapper {
    width: 100%;
    background: #000;
    margin-bottom: 15px;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.plyr--video { --plyr-color-main: #34c759; }

/* Карточки видео */
.video-card {
    background: var(--secondary-bg-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    position: relative;
}
.video-card.active { border-color: #34c759; background: rgba(52, 199, 89, 0.1); }
.vc-thumb { width: 100%; height: 100px; object-fit: cover; display: block; }
.vc-meta { padding: 8px; }
.vc-title { 
    font-size: 12px; 
    font-weight: 600; 
    line-height: 1.3; 
    
    /* Стандартный способ обрезки текста */
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    line-clamp: 2; /* <-- ДОБАВЛЕНО ДЛЯ СОВМЕСТИМОСТИ */
    -webkit-box-orient: vertical; 
    
    overflow: hidden;
    color: var(--text-color);
}

/* === СТИЛИ ДЛЯ ВИДЕО ПЛЕЕРА (Adventech Style) === */

/* Контейнер на странице видео */
#view-video .video-container {
    /* Отступ снизу, чтобы плеер не перекрывался менюшкой внизу */
    padding-bottom: 120px; 
    position: relative;
    z-index: 1;
}

/* Обертка самого плеера (черный квадрат) */
.player-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    margin-bottom: 15px;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    position: relative;
    z-index: 100; /* Чтобы был выше всего */
}

/* Настройка цветов плеера */
.plyr--video {
    --plyr-color-main: #34c759; /* Зеленый цвет прогресс-бара */
    height: 100%;
    font-family: 'Inter', sans-serif;
}

/* Кнопки плеера (Play, громкость) должны быть поверх видео */
.plyr__controls {
    z-index: 101 !important;
}

/* Карточки с видео внизу */
.video-card {
    background: var(--secondary-bg-color);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent; /* Рамка для активного состояния */
    transition: all 0.2s;
    height: 100%;
    position: relative;
    z-index: 10;
    box-shadow: var(--card-shadow);
}

/* Эффект нажатия на карточку */
.video-card:active {
    transform: scale(0.96);
}

/* Активная карточка (которую сейчас смотрим) */
.video-card.active {
    border-color: #34c759;
    background: rgba(52, 199, 89, 0.1);
}

/* Заголовок страницы (чтобы не перекрывал плеер при прокрутке) */
.sticky-header {
    z-index: 50; 
}

/* ИСПРАВЛЕНИЕ: Разрешаем fullscreen для видео, но сохраняем скролл для текста */

/* Только для контейнеров видео убираем overflow */
#tv-player-container,
#podcast-player,
#player-wrapper {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
    isolation: auto !important;
}

/* А для модальных окон с текстом возвращаем прокрутку */
.modal-body {
    overflow-y: auto !important; /* Вернули скролл! */
    -webkit-overflow-scrolling: touch;
}

/* Разрешаем fullscreen для iframe */
iframe[allowfullscreen] {
    pointer-events: auto !important;
    touch-action: auto !important;
}
/* ===== PSEUDO FULLSCREEN (workaround для Telegram WebView + iframe) ===== */
body.pseudo-fs {
  overflow: hidden !important;
}

/* на время псевдо-фулскрина прячем то, что чаще всего мешает */
body.pseudo-fs .tab-bar,
body.pseudo-fs .sticky-header,
body.pseudo-fs .modal-head {
  display: none !important;
}

.pseudo-fs-target {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10000 !important;
  background: #000 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.pseudo-fs-target iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.pseudo-fs-enter {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 10px;
  z-index: 10001;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.pseudo-fs-close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  z-index: 10002;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 14px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  -webkit-tap-highlight-color: transparent;
}

body.pseudo-fs .pseudo-fs-close {
  display: flex;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Планшет (600-1024px) */
@media (min-width: 600px) {
  #app, #loader {
    max-width: 768px;
    margin: 0 auto;
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 768px;
  }
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .modal {
    max-width: 768px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none !important;
  }
  .tab-bar {
    max-width: 768px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Десктоп (1024px+) */
@media (min-width: 1024px) {
  body {
    background: #000 !important;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(10,132,255,0.06), transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(94,92,255,0.05), transparent 50%);
    pointer-events: none;
    z-index: -1;
  }
  #app, #loader {
    max-width: 900px;
    margin: 0 auto;
    border-left: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 0 80px rgba(10,132,255,0.08);
  }
  .modal {
    max-width: 900px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none !important;
  }
  .tab-bar {
    max-width: 900px;
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .chapter-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .reading-text {
    font-size: 19px;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
  }
  .chat-msg {
    max-width: 70%;
  }
  .news-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .header {
    padding: 30px 24px;
  }
  .user-info h1 {
    font-size: 28px;
  }
}

/* Большой десктоп (1400px+) */
@media (min-width: 1400px) {
  #app, #loader {
    max-width: 1100px;
  }
  .modal {
    max-width: 1100px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none !important;
  }
  .tab-bar {
    max-width: 1100px;
  }
  .news-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .chapter-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}


/* Центрирование меню на всех экранах */
.grid-2, .grid-3 {
  justify-items: center;
}
.grid-2 > *, .grid-3 > * {
  width: 100%;
}
@media (min-width: 600px) {
  .grid-2 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .grid-3 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  #home-main-menu {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}