/* ================= МОЛИТВЕННЫЙ КРУГ - СТИЛИ ================= */

/* Оптимизация для мобильных устройств */
* {
    touch-action: manipulation; /* Предотвращение зума при двойном тапе */
}

/* Плавный скролл для чата */
.chat-messages {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

:root {
    --top-bar-height: calc(52px + env(safe-area-inset-top, 0px));
    --bg-color: #faf8f5;
    --text-color: #333;
    --bead-scheduled: #9ca3af;
    --bead-active: #3b82f6;
    --bead-praying: #f59e0b;
    --bead-completed: #10b981;
    --bead-size: 80px;

    /* 🔥 ЕДИНАЯ МАСШТАБИРУЕМАЯ КОНСТРУКЦИЯ - все размеры связаны */
    /* Тайм-слоты - внешний круг (диаметр центрирования слотов) */
    --hourly-ring-size: 520px;     /* Уменьшили с 600px */
    /* Небо проходит ПОД тайм-слотами: диаметр слотов - высота слота (60px) */
    --heavenly-ring-size: calc(var(--hourly-ring-size) - 60px);
    /* Бусины внутри неба: небо - половина бусины с каждой стороны */
    --beads-container-size: calc(var(--heavenly-ring-size) - var(--bead-size));
    
    --primary: #f59e0b;
    --secondary: #3b82f6;
    --panel-bg: #ffffff;
    --border-color: #d1d5db;
    --stat-bg: #f9fafb;
    --shadow: rgba(0,0,0,0.08);
    --bg-secondary: rgba(255, 255, 255, 0.98);
}

/* Ночная тема */
[data-theme="dark"] {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --bead-scheduled: #4a5568;
    --bead-active: #4299e1;
    --bead-praying: #ed8936;
    --bead-completed: #48bb78;
    --primary: #ed8936;
    --secondary: #4299e1;
    --panel-bg: #16213e;
    --border-color: #2d3748;
    --stat-bg: #1a202c;
    --shadow: rgba(0,0,0,0.3);
    --bg-secondary: rgba(22, 33, 62, 0.98);
}

[data-theme="dark"] .btn-secondary {
    background: #2d3748;
    color: #e0e0e0;
    border-color: #4a5568;
}

[data-theme="dark"] .btn-secondary:active {
    background: #4a5568;
}

/* Ночная тема: кнопка выбора длительности (30 мин) — белый фон, текст чёрный */
[data-theme="dark"] #freeModeContent > div.quick-time-btns > button.btn-primary {
    color: #000;
}

/* ================= ВКЛАДКИ ЧАТА (ОБЩИЙ / ЛИЧНЫЕ) ================= */
.chat-tabs {
    flex-shrink: 0;
    display: flex;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    z-index: 10;
    /* отступ под глобальный фиксированный .top-bar */
    margin-top: calc(var(--top-bar-height) + 2px);
}

.chat-tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    user-select: none;
}

.chat-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(245, 158, 11, 0.05);
}

.chat-tab:active {
    background: rgba(245, 158, 11, 0.1);
}

/* ================= СПИСОК ЛИЧНЫХ ЧАТОВ ================= */
.private-chats-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.private-chats-container.hidden {
    display: none;
}

.private-chats-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
}

.private-chats-loading,
.private-chats-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.private-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.private-chat-item:active {
    background: rgba(245, 158, 11, 0.08);
}

.private-chat-item.unread {
    background: rgba(245, 158, 11, 0.03);
}

.private-chat-item.unread .private-chat-item-name {
    font-weight: 700;
}

.private-chat-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.private-chat-item-info {
    flex: 1;
    min-width: 0;
}

.private-chat-item-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.private-chat-item-preview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.private-chat-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.private-chat-item-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.private-chat-item-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .private-chat-item.unread {
    background: rgba(245, 158, 11, 0.06);
}

/* Строка недавних личных сообщений в общем чате */
.chat-recent-pm {
    display: none;
    flex-shrink: 0;
    align-items: center;
    /* Плашка всегда absolute поверх ленты чата — одна и та же точка
       для развёрнутого и свёрнутого состояний, без скачков и мигания */
    position: absolute;
    top: 6px;
    left: 8px;
    right: 8px;
    padding: 6px 10px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 6;
    /* Подавляем нативный tap-highlight, иначе при тапе по чипу мигает вся строка */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Ручка сворачивания: двойная вертикальная черта на правом краю плашки */
.chat-recent-pm-handle {
    order: 2;
    flex-shrink: 0;
    align-self: stretch;
    width: 14px;
    margin-left: 8px;
    border-left: 3px solid var(--border-color);
    border-right: 3px solid var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    /* Поверхность drag (как touch-action:none у FAB): без этого браузер
       на таче отдаёт вертикальный жест под скролл — шлёт pointercancel
       и подвешивает pointermove, плашка «ползёт черепахой» */
    touch-action: none;
}

/* Гарантированная высота черты (равна аватарке), даже если строка пустая */
.chat-recent-pm-handle::before {
    content: '';
    display: block;
    height: 44px;
}

.chat-recent-pm-handle:active {
    border-color: var(--primary);
}

/* Режим перетаскивания: визуальный фидбек + запрет событий на чипах */
.chat-recent-pm.dragging {
    opacity: 0.92;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: opacity 0.15s, box-shadow 0.15s;
    cursor: grabbing;
}
.chat-recent-pm.dragging .chat-recent-pm-chips {
    pointer-events: none;
}

/* Свёрнутое состояние: узкая полоска поверх текста чата у правого края.
   position:absolute + фикс. высота, чтобы не занимать место в потоке —
   разворачивание снова «открывает» текст под ней. */
/* Свёрнутое состояние: сжимается к ручке у правого края, чипы скрыты.
   Точка (top/right) и правый padding те же, что у развёрнутой —
   ручка стоит ровно на месте, чат не мигает (пересчёта высоты нет). */
.chat-recent-pm.collapsed {
    left: auto;
    /* 14px черта + padding 16px + border 2px = 32px — черта встаёт ровно,
       без выталкивания из центра (box-sizing: border-box) */
    width: 32px;
    padding: 6px 10px 6px 6px;
    display: flex;
    justify-content: center;
}

.chat-recent-pm.collapsed .chat-recent-pm-chips {
    display: none;
}

.chat-recent-pm.collapsed .chat-recent-pm-handle {
    margin-left: 0;
}

.chat-recent-pm-chips {
    display: flex;
    order: 1;
    /* Растягиваем на всю ширину плашки, чтобы черта-ручка всегда стояла
       у правого края (а не сразу за последней иконкой) и не прыгала
       при сворачивании/разворачивании */
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chat-recent-pm-chip {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px;
    border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.chat-recent-pm-chip:active {
    background: rgba(245, 158, 11, 0.1);
    transform: scale(0.96);
}

.chat-recent-pm-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: visible;
}

.chat-recent-pm-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.chat-recent-pm-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* Темная тема для элементов счетчика */
[data-theme="dark"] .btn-counter-setting,
[data-theme="dark"] .btn-counter-reset {
    background: transparent;
    border: 2px solid #4a5568;
}

[data-theme="dark"] .btn-counter-setting:hover,
[data-theme="dark"] .btn-counter-reset:hover {
    background: var(--primary);
    border-color: var(--primary);
}

[data-theme="dark"] .prayer-counter-timers {
    background: transparent;
    border: 2px solid #4a5568;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
    overflow-x: hidden; /* Запрет горизонтальной прокрутки */
    max-width: 100vw; /* Ограничение по ширине */
    transition: background-color 0.3s, color 0.3s;
}

.background-pattern {
    display: none;
}

/* ================= ВЕРХНЯЯ ПАНЕЛЬ ================= */
.top-bar {
    background: transparent;
    /* 🔥 Одинаковые отступы с шапкой лобби (#screenLobby: 16px от краёв,
       calc(16px + safe-area) сверху), чтобы иконки комнаты/профиля не
       «прыгали» и не прижимались к краям при входе в комнату */
    padding-top: calc(18px + constant(safe-area-inset-top));
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    box-shadow: none;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color 0.3s;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Интерактивные элементы шапки снова ловят клики (см. pointer-events: none у .top-bar) */
.top-bar .profile-icon,
.top-bar .stats-left,
.top-bar .room-selector,
.top-bar .users-list-btn,
.top-bar .top-bar-right-cluster,
.top-bar .online-indicator,
.top-bar .notif-bell-btn,
.top-bar #onlineIndicator {
    pointer-events: auto;
}

.stats-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    flex-wrap: nowrap;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Счётчик зарегистрированных пользователей - без иконки */
#registeredCountItem,
#registeredCountItem2 {
    margin-left: 2px;
}

.stat-value {
    font-weight: 700;
    color: var(--primary);
}

.profile-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.profile-icon:active { transform: scale(0.95); }

.profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

/* Левый кластер верхней панели: иконка комнаты + название */
.top-bar .top-bar-left-cluster,
.top-bar .room-icon-btn {
    pointer-events: auto;
}

.top-bar-left-cluster {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.left-cluster-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Компактнее: иконка, цифры и название ближе друг к другу */
.top-bar-left-cluster .left-cluster-top { gap: 5px; }

.room-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    flex-shrink: 0;
    border: none;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.room-icon-btn:active { transform: scale(0.95); }

.room-icon-btn .ic-room { width: 36px; height: 36px; }

.room-icon-btn .ic-room-emoji {
    font-size: 1.85rem;
    line-height: 1;
}

.room-icon-btn .ic-room-mono { background: transparent; }
.room-icon-btn .ic-room-mono circle { fill: transparent; }
.room-icon-btn .ic-room-mono text { fill: #fff; }

.room-name-top {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Бейдж сообщений на иконке профиля */
.message-badge {
    position: absolute;
    bottom: -5px;
    left: -5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 12px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    border: 2px solid white;
    z-index: 10;
    animation: badgePulse 2s infinite;
}

.message-badge.hidden {
    display: none;
}

.message-badge.show {
    animation: badgeBounce 0.6s ease-in-out 3;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes badgePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 2px 10px rgba(239, 68, 68, 0.6);
    }
}

/* Кнопка списка пользователей */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 🔥 Единый индикатор онлайна/участников (кружок слева от профиля) */
.top-bar-right-cluster {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
    gap: 8px;
}

/* Индикатор онлайна: прозрачный, только цифры [5|10] (единая шапка 0/1/2).
   Клик по нему ничего не открывает — участники на долгом нажатии иконки. */
.online-indicator {
    position: relative;
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
    padding: 0;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-family: inherit;
    flex-shrink: 0;
    background: transparent;
    box-shadow: none;
    transition: transform 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.online-indicator.offline {
    border-color: transparent;
}
/* без рамки статус онлайна показываем цветом цифр */
.online-indicator.offline .online-indicator-count,
.online-indicator.offline .online-on,
.online-indicator.offline .online-total { color: #ef4444; }

.online-indicator-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.online-on { color: #22c55e; }
.online-total { color: #9ca3af; }
.online-sep { color: rgba(128,128,128,0.55); margin: 0 1px; font-weight: 400; }

/* День/ночь: днём фон светлый (солнце), ночью тёмный (луна) */
/* Тема дня/ночи — только оттенки цифр, без фона/рамки/свечения */
.online-indicator.is-day { color: #111827; }
.online-indicator.is-day .online-total { color: #4b5563; }
.online-indicator.is-day .online-sep { color: rgba(17, 24, 39, 0.45); }
.online-indicator.is-day .online-on { color: #16a34a; }

.online-indicator.is-night { color: #e5e7eb; }
.online-indicator.is-night .online-total { color: #c7d2fe; }
.online-indicator.is-night .online-sep { color: rgba(229, 231, 235, 0.5); }
.online-indicator.is-night .online-on { color: #4ade80; }

.users-list-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
    padding: 0;
    border: none;
    color: var(--text-primary);
}

.users-list-btn:hover {
    background: rgba(0,0,0,0.05);
    transform: scale(1.1);
}

.users-list-btn:active { transform: scale(0.95); }

/* Выпадающий список пользователей */
.users-list-dropdown {
    position: fixed;
    top: 60px;
    right: 10px;
    width: 280px;
    max-height: 400px;
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow: hidden;
    display: none;
}

.users-list-dropdown.active {
    display: block;
    animation: slideDown 0.2s ease-out;
}

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

.users-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: 600;
}

.users-list-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.users-list-close:hover {
    background: rgba(255,255,255,0.2);
}

.users-list-content {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}

.user-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.user-list-item:hover {
    background: var(--hover-bg);
}

.user-list-item:active {
    background: var(--active-bg);
}

.user-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.user-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-list-item.offline .user-list-avatar {
    background: #9ca3af;
    opacity: 0.7;
}

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

.user-list-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-list-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-nickname {
    font-size: 0.7rem;
    opacity: 0.45;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-list-status {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-list-status-online {
    font-size: 14px;
    line-height: 1;
}

.user-list-status-offline {
    font-size: 14px;
    line-height: 1;
    opacity: 0.6;
}

.user-list-last-seen {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 400;
}

[data-theme="dark"] .user-list-last-seen {
    color: #6b7280;
}

.user-list-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.user-list-icon {
    font-size: 14px;
    opacity: 0.8;
}

/* Значок администратора — строчная "а" в кружочке */
.user-list-icon.admin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 700;
    opacity: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .user-list-icon.admin-icon {
    background: rgba(66, 153, 225, 0.25);
    color: #60a5fa;
}

/* Значок сотрудника поддержки */
.user-list-icon.support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.2);
    font-size: 11px;
    opacity: 1;
    flex-shrink: 0;
}

.user-list-item.offline .user-list-status {
    color: #9ca3af;
}


/* Статус пользователя в строке */
.my-status-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--stat-bg);
    border-radius: 16px;
    white-space: nowrap;
}

.my-status-inline.hidden {
    display: none;
}

.my-bead-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bead-scheduled);
    box-shadow: 0 1px 4px var(--shadow);
    flex-shrink: 0;
}

.my-bead-preview.active { background: var(--bead-active); }
.my-bead-preview.praying { background: var(--bead-praying); }

.my-status-text {
    font-size: 0.8rem;
    color: var(--text-color);
    font-weight: 500;
}

/* ================= ЦЕНТРАЛЬНАЯ ОБЛАСТЬ ================= */
#screen1 .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* 🔥 Подняли вверх - касается верхней панели */

    padding-top: calc(110px + env(safe-area-inset-top, 0px));
    padding-bottom: 160px;
}
    /* padding-top: var(--top-bar-height);
    padding-bottom: 160px;
} */

/* Центрирование контейнера бусин */
.main-content .beads-container {
    /* Абсолютное позиционирование для точного центрирования */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--beads-container-size);
    height: var(--beads-container-size);
    /* Подавляем нативный long-press (бейдж/текст-выделение) при удержании ладони */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Жёсткое подавление нативного выделения текста во всём круге.
   Цифра канонического часа в #celestialHourBadge движется по кругу и
   при long-press попадает под палец — iOS/WebView выделяет её и «залипает». */
.main-content .beads-container,
.main-content .beads-container * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Кольцо слотов - центрируем относительно beads-container */
.hourly-ring-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--hourly-ring-size);
    height: var(--hourly-ring-size);
    pointer-events: none;
    z-index: 10; /* Самый верхний слой - над всем */
}

/* 🔥 НЕБЕСНЫЙ СВОД - кольцо между бусинами и слотами (как твердь) */
.heavenly-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--heavenly-ring-size);
    height: var(--heavenly-ring-size);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0; /* Один слой с бусинами - рисуется раньше в HTML */
    /* Тонкий обруч - 4% от размера */
    border: calc(var(--heavenly-ring-size) * 0.02) solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

/* 🔥 SVG прогресс-бар - бегущая лента по кругу */
.heavenly-ring-progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Начинаем сверху */
}

/* 🔥 Иконка Солнца/Луны на небе */
.celestial-body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s ease;
    z-index: 5;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.celestial-body:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
}

[data-theme="dark"] .celestial-body {
    background: rgba(30, 30, 30, 0.9);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .celestial-body:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

.celestial-icon {
    font-size: 18px;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

/* 🔥 Бейдж с номером часа на иконке солнца/луны */
.celestial-hour-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

[data-theme="dark"] .celestial-hour-badge {
    background: #d97706;
}

.heavenly-ring-bg {
    fill: none;
    stroke: transparent; /* Фоновое кольцо невидимое */
    stroke-width: 4; /* Толщина ленты */
}

.heavenly-ring-progress-circle {
    fill: none;
    stroke: #0ea5e9; /* Голубой цвет (sky-500) */
    stroke-width: 8px; /* Толщина ленты как у неба */
    stroke-linecap: round; /* Закругленные концы */
    /* 🔥 stroke-dasharray и stroke-dashoffset устанавливаются через JS */
    opacity: 0.6; /* Сделали чуть ярче */
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.6)); /* Усилили свечение */
    transition: none; /* Мгновенный сброс без плавности */
}

/* 🔥 Красная лента совместной молитвы */
.heavenly-ring-joint-progress {
    fill: none;
    stroke: #ef4444;
    stroke-width: 24px;
    stroke-linecap: round;
    opacity: 0.5;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.7));
    transition: none;
    display: none;
}

.heavenly-ring-canonical-progress {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 18px;
    stroke-linecap: round;
    opacity: 0.6;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
    transition: none;
    display: none;
}

/* 🔥 Кольцо канонических часов (сегменты дня/ночи) */
.canonical-hour-segments {
    pointer-events: none;
}

/* Хризма - центрируем относительно beads-container */

/* Хризма - центрируем относительно beads-container */
.chrisma-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.8;
    z-index: 0;
    animation: chrismaPulse 3.5s ease-in-out infinite;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

@keyframes chrismaPulse {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.025);
    }
}

/* ================= ПАСХАЛКА: РАДОСТНАЯ ВОЛНА ================= */

/* Вспышка хризмы */
.chrisma-celebrate {
    animation: chrismaCelebrate 1.6s ease-out !important;
    z-index: 5;
}

@keyframes chrismaCelebrate {
    0% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    20% {
        transform: translate(-50%, -50%) scale(1.2);
        filter: brightness(1.4) saturate(1.6);
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.7);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        filter: brightness(1.2) saturate(1.3);
        box-shadow: 0 0 70px rgba(255, 215, 0, 0.4);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* Прыжок бусины */
.bead-jump {
    animation: beadJump 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    animation-delay: var(--jump-delay) !important;
}

@keyframes beadJump {
    0% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-18px) scale(1.15); }
    45% { transform: translateY(-22px) scale(1.12); }
    65% { transform: translateY(-8px) scale(1.06); }
    85% { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

/* Искорки */
.chrisma-sparkle {
    position: absolute;
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
    animation: sparkleFly 1.4s ease-out forwards;
}

@keyframes sparkleFly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--sparkle-dx), var(--sparkle-dy)) scale(0.2);
        opacity: 0;
    }
}

/* 🔥 Скрываем бусины на неактивном экране, чтобы не мелькали */
.screen:not(.active) .beads-container .bead {
    opacity: 0;
    visibility: hidden;
}

.screen.active .beads-container .bead {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease-out 0.05s;
}

/* 🔥 Закреплённое сообщение */
.pinned-message-container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    border-top: 2px solid var(--border-color);
    border-radius: 0;
    padding: 12px 20px;
    max-width: 800px;
    width: 90%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-shadow: none;
    z-index: 100;
    pointer-events: auto;
    /* 🔥 Запрет выделения текста (для мобильных) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.pinned-message-container.hidden {
    display: none;
}

.pinned-message-content {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.5;
    overflow-y: auto;
    text-overflow: ellipsis;
    white-space: normal;
    max-width: 100%;
    height: 9em;  /* Увеличенная высота ~6 строк */
    max-height: 120px;
}

.pinned-message-hide-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.5;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.pinned-message-hide-btn:hover {
    opacity: 1;
}

/* 🔥 ЕДИНЫЙ СТЕК ПЛАШЕК (все уведомления друг под другом) */
.plaques-stack {
    position: fixed;
    left: 0;
    right: 0;
    /* Поднят на 3 высоты свёрнутой плашки (3×60px) от изначальных 72px — плашки ближе к кругу */
    bottom: calc(252px + env(safe-area-inset-bottom, 0px)); /* над нижней панелью; JS опускает ниже при перекрытии таймслотов */
    margin: 0 auto;
    width: calc(100% - 32px);
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 100;
    box-sizing: border-box;
    pointer-events: none; /* пустые зоны стека не перехватывают тапы */
}

.plaques-stack > * {
    pointer-events: auto;
}

/* 🔥 Запрет выделения текста во ВСЕХ плашках стека: в APK (WebView)
   длинное нажатие на текст уводит жест в нативное выделение/контекстное
   меню вместо JS-обработчика долгого тапа. Иконки не даём перетаскивать. */
.plaques-stack,
.plaques-stack * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.plaques-stack img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* 🔥 ЗАКРЕПЛЁННЫЕ СООБЩЕНИЯ - СЛАЙДЕР (светло-синий) */
.pinned-messages-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
    /* 🔥 Запрет выделения текста (для мобильных) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.pinned-messages-container.hidden {
    display: none;
}

/* 🔥 Ряд бейджей непрочитанных (канал слева, чат справа) */
.unread-badges-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 100;
}

/* Скрываем ряд целиком, если оба бейджа невидимы (чтобы не оставлять зазор в стеке) */
.unread-badges-row:has(.channel-unread-badge-wrapper.hidden):has(.general-chat-unread-badge-wrapper.hidden) {
    display: none;
}

/* 🔥 Обёртка бейджа непрочитанных общего чата */
.general-chat-unread-badge-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.general-chat-unread-badge-wrapper.hidden {
    display: none;
}

/* 🔥 Бейдж непрочитанных общего чата */
.general-chat-unread-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 20px;
    padding: 6px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    max-width: fit-content;
}

.general-chat-unread-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.general-chat-unread-badge:active {
    transform: scale(0.95);
}

.general-chat-unread-badge.hidden {
    display: none;
}

.general-chat-unread-badge:active {
    transform: scale(0.95);
}

.badge-arrow {
    font-size: 18px;
    font-weight: bold;
}

.badge-count {
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 2px 8px;
    min-width: 24px;
    text-align: center;
}

/* 🔥 Обёртка бейджа непрочитанных канала */
.channel-unread-badge-wrapper {
    display: flex;
    justify-content: flex-start;
}

.channel-unread-badge-wrapper.hidden {
    display: none;
}

/* 🔥 Бейдж непрочитанных канала */
.channel-unread-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 20px;
    padding: 6px 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    max-width: fit-content;
}

.channel-unread-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.channel-unread-badge:active {
    transform: scale(0.95);
}

.channel-unread-badge.hidden {
    display: none;
}

.pinned-slider-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.pinned-slider-track {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

/* Карточка закреплённого сообщения (единый вид плашки) */
.pinned-message-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
    min-height: 60px;
    overflow: hidden;
    box-sizing: border-box;
    /* 🔥 Запрет выделения текста */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.pinned-message-card.active {
    flex: 1 1 0;
    min-width: 0; /* ширина не зависит от длины текста */
    width: auto;
    position: relative;
}

/* Следующая карточка - квадрат по высоте плашки (как свёрнутая, повёрнутая набок) */
.pinned-message-card.next {
    width: 60px;
    max-height: 60px; /* высота свёрнутой плашки — текст-образ обрезается */
    background: rgba(59, 130, 246, 0.1);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
}

.pinned-message-card.next .pinned-message-header {
    display: none;
}

.pinned-message-card.next .pinned-message-text {
    font-size: 0.65rem;
    line-height: 1.2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    color: var(--text-color);
}

.pinned-message-card.other {
    width: 8px;
    background: rgba(59, 130, 246, 0.3); /* темнее .next — явная полоска */
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}

.pinned-message-card.other .pinned-message-header,
.pinned-message-card.other .pinned-message-text {
    display: none;
}

.pinned-message-card:hover {
    transform: scale(1.02);
}

.pinned-message-card.next:hover {
    transform: scale(1.05);
}

.pinned-message-card.other:hover {
    transform: scale(1.1);
    width: 10px;
}

.pinned-plaque-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pinned-plaque-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.pinned-message-body {
    flex: 1;
    min-width: 0;
}

.pinned-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pinned-message-author {
    font-weight: 600;
    flex: 1;
}

.pinned-message-time {
    font-size: 0.7rem;
    opacity: 0.7;
}

.pinned-message-text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Тёмная тема для закреплённых */
[data-theme="dark"] .pinned-message-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.08));
    border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .pinned-message-card.next {
    background: rgba(59, 130, 246, 0.18);
}

[data-theme="dark"] .pinned-message-card.other {
    background: rgba(59, 130, 246, 0.1);
}

/* Тёмная тема для молитвенных просьб */
[data-theme="dark"] .prayer-request-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08));
    border-color: rgba(34, 197, 94, 0.35);
}

[data-theme="dark"] .prayer-request-card.next {
    background: rgba(34, 197, 94, 0.18);
}

[data-theme="dark"] .prayer-request-card.other {
    background: rgba(34, 197, 94, 0.1);
}

/* 🔥 Молитвенные просьбы - СЛАЙДЕР */
.prayer-requests-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.prayer-requests-container.hidden {
    display: none;
}

.prayer-slider-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.prayer-slider-track {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

/* Активная карточка - широкая (единый вид плашки) */
.prayer-request-card {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
    min-height: 60px;
    overflow: hidden;
    box-sizing: border-box;
    /* 🔥 Запрет выделения текста (для мобильных) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.prayer-request-card.active {
    flex: 1 1 0;
    min-width: 0; /* ширина не зависит от длины текста */
    width: auto;
    position: relative;
}

/* Следующая карточка - узкая, со сжатым текстом */
/* Следующая карточка - квадрат по высоте плашки (как свёрнутая, повёрнутая набок) */
.prayer-request-card.next {
    width: 60px;
    max-height: 60px; /* высота свёрнутой плашки — текст-образ обрезается */
    background: rgba(34, 197, 94, 0.1);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
}

.prayer-request-card.next .prayer-request-header {
    display: none;
}

.prayer-request-card.next .prayer-request-text {
    font-size: 0.65rem;
    line-height: 1.2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

/* Остальные карточки - черточки (жирные) */
.prayer-request-card.other {
    width: 8px;
    background: rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}

.prayer-request-card.other .prayer-request-header,
.prayer-request-card.other .prayer-request-text {
    display: none;
}

.prayer-request-card:hover {
    background: rgba(34, 197, 94, 0.2);
}

.prayer-request-card.next:hover {
    background: rgba(34, 197, 94, 0.3);
}

.prayer-request-card.other:hover {
    background: rgba(34, 197, 94, 0.5);
    width: 10px;
}

.prayer-plaque-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.prayer-plaque-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.prayer-request-body {
    flex: 1;
    min-width: 0;
}

.prayer-request-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.prayer-request-author {
    font-weight: 600;
    color: var(--primary);
    flex: 1;
}

.prayer-request-time {
    opacity: 0.7;
    margin-left: auto;
    font-size: 0.75rem;
}

.prayer-request-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Индикатор долгого нажатия - прогресс-бар */
.long-press-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(245, 158, 11, 0.8);
    width: 0%;
    transition: width 0s;
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

[data-theme="dark"] .pinned-message-container {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Бусины - абсолютное позиционирование (JS вычисляет left/top с учётом размера) */
.bead {
    position: absolute;
    z-index: 1;
    width: var(--bead-size);
    height: var(--bead-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    border: 3px solid transparent;
}

.bead img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

/* 🔥 Бейдж непрочитанного приветствия на бусине */
.bead-greeting-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    pointer-events: auto;
}

/* ✕ Отмена записи на своей ч/б бусине («записан») — как ✕ на ФАБ.
   См. modules/circle.js (renderBeads) → window.cancelMyPrayerBooking */
.bead-cancel-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 6;
    transition: transform 0.15s ease;
    pointer-events: auto;
}
.bead-cancel-badge:active { transform: scale(0.88); }

/* 🖐 Ладонь на бусине — как прижатая к «стеклу» изнутри */
.bead .bead-palm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 6;
    pointer-events: none;
    color: #fff;
    opacity: 0.88;
    filter: blur(1.5px) saturate(0.9) brightness(1.08);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
    animation: palmAppear 0.25s ease-out both, palmGlassBreath 1.6s ease-in-out infinite;
}

.bead .bead-palm svg {
    width: 95%;
    height: 95%;
    display: block;
}

.bead .bead-palm.pressed {
    filter: blur(0.6px) saturate(1.15) brightness(1.12);
    opacity: 1;
    transform: scale(1.06);
    transition: filter 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

@keyframes palmAppear {
    0% { opacity: 0; transform: scale(0.6) translateY(-8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes palmGlassBreath {
    0%, 100% { opacity: 0.82; filter: blur(1.1px) saturate(1.1) brightness(1.05); }
    50% { opacity: 0.95; filter: blur(0.9px) saturate(1.2) brightness(1.1); }
}

/* 🔥 Тост приветствия */
.greeting-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 12000;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

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

/* 🔥 Стиль для буквы имени (когда нет аватарки) */
.bead:not(:has(img)) {
    background: var(--bead-active);  /* цвет по умолчанию */
}

/* 🔥 Буква для scheduled/completed - серая */
.bead.scheduled:not(:has(img)),
.bead.completed:not(:has(img)) {
    background: var(--bead-scheduled);
    color: white;
}

/* 🔥 Буква для active - синяя */
.bead.active:not(:has(img)) {
    background: var(--bead-active);
    color: white;
}

/* 🔥 Буква для praying - жёлтая */
.bead.praying:not(:has(img)) {
    background: var(--bead-praying);
    color: white;
}

/* 🔥 Оффлайн пользователи - черно-белая иконка */
.bead.completed img,
.bead.scheduled img {
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.8;
}

/* Активные пользователи - цветные иконки */
.bead.praying img,
.bead.active img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.bead.my-bead {
    z-index: 2;
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
}

/* Выделенная бусина на 12 часов */
.bead.selected {
    border: 3px solid #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    z-index: 3;
}

.bead.scheduled { background: var(--bead-scheduled); }
.bead.scheduled.selected { background: var(--bead-scheduled); }

.bead.active {
    background: var(--bead-active);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}
.bead.active.selected { background: var(--bead-active); }

.bead.praying {
    background: var(--bead-praying);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
    animation: pulse 2s infinite;
}
.bead.praying.selected { background: var(--bead-praying); }

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

/* ================= ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЕ (12 ЧАСОВ) ================= */
.userinfo-panel {
    display: none;
    position: fixed;
    top: 320px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-bg);
    padding: 12px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--shadow);
    z-index: 50;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 180px;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
}

.userinfo-panel.visible {
    opacity: 1;
}

.userinfo-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
}

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

.userinfo-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
}

.userinfo-status-deviz {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    text-align: center;
    margin: 2px 0;
}

.userinfo-badge {
    font-size: 0.7rem;
    background: var(--primary);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.userinfo-write-btn {
    margin-top: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.userinfo-write-btn:active {
    transform: scale(0.95);
}

.userinfo-panel:hover {
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
    transform: translateX(-50%) scale(1.02);
}

/* Подсказка о вращении */
.rotate-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: 50%;
    animation: rotateHint 3s infinite linear;
    opacity: 0.2;
    pointer-events: none;
}

@keyframes rotateHint {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ================= НИЖНЯЯ ПАНЕЛЬ ================= */
.bottom-bar {
    background: var(--panel-bg);
    padding: 4px 12px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    border-radius: 32px;
    box-shadow: 0 -2px 10px var(--shadow);
    z-index: 100;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.bottom-bar-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bottom-bar-left {
    display: flex;
    align-items: center;
}

.bottom-bar-center {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bottom-bar-right {
    position: relative;
    display: flex;
    align-items: center;
}

/* ================= МЕНЮ «ЕЩЁ» ================= */
.more-menu-container {
    display: flex;
    align-items: center;
}

.btn-more {
    background: var(--panel-bg);
    color: var(--text-color);
    width: 56px;
    height: 56px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px var(--shadow);
}

.btn-more:active { transform: scale(0.92); }
.btn-more.active { background: var(--primary); color: white; border-color: var(--primary); }

/* Inline-SVG иконки в нижней панели */
.bottom-bar .btn svg { width: 74%; height: 74%; display: block; }

.more-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    padding: 4px;
}

.more-menu .btn {
    animation: moreMenuAppear 0.2s ease-out both;
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
}

.more-menu .btn:nth-child(1) { animation-delay: 0s; }
.more-menu .btn:nth-child(2) { animation-delay: 0.05s; }
.more-menu .btn:nth-child(3) { animation-delay: 0.1s; }
.more-menu .btn:nth-child(4) { animation-delay: 0.15s; }
.more-menu .btn:nth-child(5) { animation-delay: 0.2s; }
.more-menu .btn:nth-child(6) { animation-delay: 0.25s; }

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

.btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px var(--shadow);
}

.btn:active { transform: scale(0.92); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Полноразмерная кнопка-строка формы (шиты записи/совместной молитвы).
   .btn сам по себе — круглый 56×56; растянутый в ширину он даёт «овал».
   .btn-block превращает его в обычную кнопку с аккуратным скруглением. */
.btn-block {
    width: 100%;
    height: auto;
    min-height: 44px;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
    gap: 6px;
}
.btn-block:active { transform: scale(0.98); }

.btn-primary {
    background: #ffffff;
    color: var(--text-color);
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
    border: 2px solid var(--primary);
}

/* Кнопка "Молюсь" активна - жёлтая */
.btn-pray-active {
    background: var(--primary) !important;
    color: white !important;
    border: 2px solid var(--primary) !important;
}

.btn-secondary { background: #f3f4f6; color: var(--text-color); border: 2px solid #d1d5db; }
.btn-secondary:active { background: #e5e7eb; }
.btn-room { background: var(--secondary); color: white; }
.btn-help {
    background: #6b7280;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}
.btn-help.hidden { display: none !important; }
.btn-diary {
    background: #6b7280;
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
}
.btn-diary.hidden { display: none !important; }
.btn-danger { background: #ef4444; color: white; }

/* 🖐 Кнопка-«ладонь»: бледная в покое, ярче + фокус при удержании */
.btn-palm {
    background: rgba(245, 158, 11, 0.18);
    color: rgba(120, 85, 20, 0.55);
    border: 2px solid rgba(245, 158, 11, 0.35);
    filter: grayscale(35%);
    transition: all 0.18s ease;
}
.btn-palm svg {
    width: 70%;
    height: 70%;
    display: block;
}
.btn-palm.held {
    background: var(--primary, #f59e0b);
    color: #fff;
    border-color: var(--primary, #f59e0b);
    filter: grayscale(0%);
    transform: scale(1.18);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.8);
}
.btn-palm.held svg {
    animation: palmPressPulse 0.5s ease-in-out infinite;
}
.btn-palm.hidden { display: none !important; }

@keyframes palmPressPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.92); }
}

/* ================= МЕНЮ БУДИЛЬНИКА ================= */
/* Принудительно выравниваем размер будильника с остальными кнопками */
#btnAlarm {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.3rem !important;
    line-height: 56px;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-alarm-menu {
    position: absolute;
    bottom: 100%;
    right: 120px;
    background: var(--panel-bg);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 160px;
    margin-bottom: 8px;
}

.alarm-menu-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color);
    font-weight: 500;
}

.alarm-menu-item:hover {
    background: rgba(245, 158, 11, 0.1);
}

.alarm-menu-item:active {
    background: rgba(245, 158, 11, 0.2);
}

/* ================= ТАЙМЕР СЕССИИ В НИЖНЕЙ ПАНЕЛИ ================= */
.session-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    border: 2px solid var(--primary);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    margin: 0 4px;
    flex: 0 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Пульсация на последних секундах */
@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

@keyframes timerPulseRed {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.session-timer.pulsing {
    animation: timerPulse 1s ease-in-out infinite;
}

.session-timer.pulsing-urgent {
    animation: timerPulseRed 0.5s ease-in-out infinite;
}

.session-timer-display {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Courier New', monospace;
    transition: color 0.3s ease;
}

.session-timer.pulsing .session-timer-display,
.session-timer.pulsing-urgent .session-timer-display {
    color: #ef4444;
}

.session-timer.hidden {
    display: none;
}

/* ================= ПАНЕЛЬ СЧЁТЧИКА МОЛИТВ ================= */
.prayer-counter-panel {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 90;
    pointer-events: none;
}

.prayer-counter-panel.hidden {
    display: none;
}

.prayer-counter-wrapper {
    background: transparent;
    border-radius: 16px;
    padding: 15px 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    max-width: 320px;
    width: 90%;
}

/* Круг прогресса */
.prayer-progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.prayer-progress-ring:active {
    transform: scale(0.95);
    outline: none;
}

.progress-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.progress-ring-bg {
    fill: none;
    stroke: var(--stat-bg);
    stroke-width: 8;
}

.progress-ring-circle {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.prayer-counter-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.prayer-count-display {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Courier New', monospace;
    line-height: 1;
}

.prayer-count-total {
    font-size: 0.85rem;
    color: #999;
    margin-top: 2px;
}

/* Настройки */
.prayer-counter-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-counter-setting {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    box-shadow: none;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-counter-setting::-moz-focus-inner {
    border: 0;
}

.btn-counter-setting:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-counter-setting:active {
    transform: scale(0.95);
    box-shadow: none;
    outline: none;
    background-clip: padding-box;
}

.btn-counter-reset {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    box-shadow: none;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-counter-reset::-moz-focus-inner {
    border: 0;
}

.btn-counter-reset:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

.btn-counter-reset:active {
    transform: scale(0.95);
    box-shadow: none;
    outline: none;
    background-clip: padding-box;
}

/* Таймер счётчика */
.prayer-counter-timers {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    border: 2px solid var(--border-color);
}

.timer-label {
    font-size: 0.75rem;
    color: #999;
}

.timer-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    font-family: 'Courier New', monospace;
}

/* ================= МОДАЛЬНОЕ ОКНО ================= */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active { display: flex; }

.modal-content {
    background: var(--panel-bg);
    border-radius: 16px;
    padding: 25px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s;
}

.modal-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 600;
}

.modal-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 5px; }
.modal-subtitle { color: #666; margin-bottom: 20px; }

.profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
    padding: 15px;
    background: var(--stat-bg);
    border-radius: 12px;
    transition: background-color 0.3s;
}

.profile-stat { text-align: center; }
.profile-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.profile-stat-label { font-size: 0.75rem; color: #666; }
.modal-close { margin-top: 15px; width: 100%; }
.hidden { display: none !important; }

/* ================= КОМПАКТНЫЙ ПРОФИЛЬ ================= */
/* Контент верхнего шита #profileModal/#authFormModal/#linkByCredentialsModal */
.profile-modal-compact {
    position: relative;
}

/* Профиль всегда поверх полноэкранных оверлеев (ЛС и др., z-index 2000) */
#profileModal {
    z-index: 4000;
}

.profile-compact-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

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

.profile-quick-actions {
    background: var(--stat-bg);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.quick-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.9rem;
}

/* ================= АККОРДЕОН-ГРУППЫ ПРОФИЛЯ ================= */
/* Группы без обрамления: просто заголовки-строки, тап раскрывает список */
.pa-group {
    border: none;
    margin-bottom: 2px;
    background: transparent;
}

.pa-group summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 4px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
}

.pa-group summary:active {
    background: rgba(128, 128, 128, 0.12);
}

.pa-group summary::-webkit-details-marker {
    display: none;
}

.pa-group .pa-arrow {
    font-size: 0.8rem;
    opacity: 0.6;
    transition: transform 0.2s;
}

.pa-group[open] .pa-arrow {
    transform: rotate(180deg);
}

.pa-group .pa-group-body {
    padding: 2px 12px 10px;
}

.quick-action-label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.quick-action-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    text-decoration: none;
}

.quick-action-link:hover {
    text-decoration: underline;
}

.quick-action-link-danger {
    color: var(--danger, #ef4444);
}

.quick-action-row-divider {
    border-top: 1px solid var(--border-color, #444);
    margin-top: 8px;
    padding-top: 10px;
}

.quick-action-divider {
    color: var(--border-color);
    font-weight: 300;
}

.profile-compact-stats {
    background: var(--stat-bg);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.compact-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.compact-stat-label {
    color: var(--text-secondary);
}

.compact-stat-value {
    font-weight: 600;
    color: var(--text-color);
}

.compact-stat-divider {
    color: var(--border-color);
    font-weight: 300;
}

.profile-last-prayer {
    background: var(--stat-bg);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.profile-last-prayer-label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.profile-last-prayer-value {
    color: var(--text-color);
    font-weight: 600;
    flex: 1;
}

/* Компактная кнопка закрытия профиля (в строке) */
.profile-close-btn-inline {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.2s;
    opacity: 0.5;
    flex-shrink: 0;
}

.profile-close-btn-inline:hover {
    color: #ef4444;
    opacity: 1;
    transform: rotate(90deg);
}

/* Кнопка "Написать сообщение" (компактная) */
.profile-write-message-compact {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    -webkit-tap-highlight-color: transparent;
}

.profile-write-message-compact:active {
    background: rgba(128, 128, 128, 0.12);
}

.profile-write-message-compact .write-message-icon {
    font-size: 1rem;
}

.profile-write-message-compact .write-message-text {
    font-weight: 500;
    font-size: 0.85rem;
}

/* Админ-действия в профиле */
.profile-admin-actions {
    margin-bottom: 12px;
}

.admin-actions-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0 0 10px 0;
}

.admin-actions-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-action-row {
    display: flex;
    gap: 8px;
}

.admin-action-btn {
    flex: 1;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
}

.admin-action-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--danger, #ef4444);
}

.admin-action-btn-remove {
    background: rgba(239, 68, 68, 0.15);
}

.admin-action-btn-remove:hover {
    background: rgba(239, 68, 68, 0.3);
}

.admin-action-btn-ban {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.5);
}
.admin-action-btn-ban:hover {
    background: rgba(220, 38, 38, 0.35);
}
.admin-action-btn-unban {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success, #22c55e);
}
.admin-action-btn-unban:hover {
    background: rgba(34, 197, 94, 0.3);
}

.profile-ban-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(220, 38, 38, 0.15);
    color: #ef4444;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 8px;
}

.user-list-icon.banned-icon {
    color: #ef4444;
    font-size: 0.75rem;
}

/* ================= ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ (расширенный) ================= */
.profile-modal-content {
    max-width: 400px;
    padding: 25px 20px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.profile-avatar-large {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-large {
    cursor: pointer;
}

.avatar-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lbFade 0.15s ease;
}

.avatar-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.avatar-lightbox-content img {
    width: 100%;
    height: 100%;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.avatar-lightbox-close {
    position: absolute;
    top: -42px;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    cursor: pointer;
}

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

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

.profile-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 2px;
}

.profile-login {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 5px;
}

.profile-status {
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🔥 Кнопка "Написать сообщение" - без рамки */
.profile-write-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    margin: 15px 0;
    background: transparent;
    border: 2px solid var(--primary);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
}

.profile-write-message:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.write-message-icon {
    font-size: 1.2rem;
}

.write-message-text {
    font-weight: 600;
}

/* 🔥 Секция непрочитанных сообщений */
.profile-unread-messages {
    background: var(--stat-bg);
    border-radius: 12px;
    padding: 12px;
    margin: 15px 0;
}

.unread-messages-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-color);
    font-weight: 600;
}

.unread-messages-icon {
    font-size: 1.2rem;
}

.unread-messages-title {
    font-size: 0.95rem;
}

.unread-messages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unread-message-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--panel-bg);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
}

.unread-message-item:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateX(4px);
}

.unread-message-sender {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.unread-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.unread-message-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.unread-message-count {
    background: #ef4444;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

.unread-message-item:hover .unread-message-count {
    background: white;
    color: #ef4444;
}

.unread-messages-count {
    margin-left: auto;
    background: #ef4444;
    color: white;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* ✉️ Постоянная кнопка входа в ЛС (видна всегда, вне блока оповещений).
   Форма — как у «Поддержать проект»: флекс, скругление 10px, та же типографика */
.profile-pm-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 4px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    -webkit-tap-highlight-color: transparent;
}

.profile-pm-button:active {
    background: rgba(128, 128, 128, 0.12);
}

.profile-pm-button-icon {
    font-size: 1rem;
}

/* Бейдж непрочитанных ЛС на кнопке (бывший блок «🔔 Новые сообщения») */
.profile-pm-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: 2px;
    border-radius: 11px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-sizing: border-box;
}

.profile-pm-badge.hidden {
    display: none;
}

/* Кнопка ЛС с непрочитанными — лёгкий акцент, как у активной точки входа */
.profile-pm-button.has-unread {
    border-color: #e74c3c;
    color: var(--text-primary);
}

.profile-stats {
    grid-template-columns: 1fr 1fr 1fr;
}

.profile-last-prayer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 15px 0;
    padding: 12px;
    background: var(--stat-bg);
    border-radius: 10px;
    font-size: 0.9rem;
}

.profile-last-prayer-label {
    color: #666;
    font-size: 0.85rem;
}

.profile-last-prayer-value {
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
}

/* 🔥 Круглая кнопка закрытия профиля */
.profile-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 20px auto 0;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.profile-close-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.close-btn-icon {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* 🔥 Плашка поддержки проекта в профиле */
.profile-support-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 4px;
    padding: 8px 14px;
    /* Ещё бледнее: еле заметный намёк на янтарную гамму сообщений */
    background: linear-gradient(135deg, #fefaf3, #fdf6e9);
    border: 1px solid rgba(180, 83, 9, 0.12);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    color: #a9825c;
    font-weight: 500;
    font-size: 0.85rem;
}
.profile-support-link:hover {
    background: linear-gradient(135deg, #fdf3e4, #fbeccb);
    border-color: rgba(180, 83, 9, 0.25);
    color: #92600c;
}

/* Ночная тема: почти сливается с фоном, лёгкий тёплый намёк */
[data-theme="dark"] .profile-support-link {
    background: linear-gradient(135deg, #2a2318, #251e14);
    border-color: rgba(245, 158, 11, 0.16);
    color: #a9884e;
}

[data-theme="dark"] .profile-support-link:hover {
    background: linear-gradient(135deg, #352b19, #2e2413);
    border-color: rgba(245, 158, 11, 0.3);
    color: #c9a45e;
}

/* ================= ЛИЧНЫЙ ЧАТ ================= */
.chat-modal-inner {
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.chat-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: var(--stat-bg);
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    flex-shrink: 0;
}

.chat-modal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: 700;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

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

.chat-modal-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.chat-modal-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: var(--panel-bg);
}

.chat-messages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 🔥 Форма ввода в личном чате */
.chat-modal-inner #privateChatForm {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--stat-bg);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    box-sizing: border-box;
}

.chat-modal-inner #privateChatForm .chat-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg-color);
    color: var(--text-color);
    resize: none;
    outline: none;
    line-height: 1.4;
    max-height: 100px;
}

.chat-modal-inner #privateChatForm .chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================= ГОЛОСОВЫЕ СООБЩЕНИЯ ================= */
/* Кнопка-трансформер 🎤/➤: в режиме записи подсвечивается красным */
.chat-send-btn.recording {
    background: #ef4444 !important;
    animation: voicePulse 1.2s infinite;
}

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

/* Плашка-индикатор записи над кнопкой */
.voice-recording-bar {
    position: fixed;
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-size: 0.85rem;
    color: var(--text-color);
}

.voice-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: voicePulse 1.2s infinite;
}

.voice-rec-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.voice-rec-hint {
    opacity: 0.6;
    font-size: 0.75rem;
}

/* Плеер голосового сообщения */
.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(128, 128, 128, 0.08);
    border-radius: 12px;
    min-width: 200px;
    max-width: 280px;
}

.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.voice-progress {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(128, 128, 128, 0.25);
    overflow: hidden;
}

.voice-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.15s linear;
}

.voice-dur {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.chat-no-messages {
    text-align: center;
    color: #999;
    padding: 30px;
    font-size: 0.95rem;
}

.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    word-wrap: break-word;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    touch-action: manipulation;
}

/* Аватарки в общем чате */
.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

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

.chat-message.incoming {
    align-self: flex-start;
    background: var(--stat-bg);
    color: #333;  /* 🔥 Явный цвет для дневной темы */
}

.chat-message.own {
    align-self: flex-end;
    background: linear-gradient(135deg, #fde9cf, #fbd9a8);  /* 🔥 Бледный янтарный фон (день) */
    color: #1a1a1a;  /* 🔥 Чёрный текст для дневной темы */
    margin-left: auto;
    flex-direction: row-reverse;
}

.chat-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 🔥 Подсветка сообщения при переходе из молитвенной просьбы */
.chat-message.highlighted-message {
    animation: messageHighlight 2s ease-in-out;
    border: 2px solid var(--primary);
}

@keyframes messageHighlight {
    0%, 100% {
        background-color: transparent;
        transform: scale(1);
    }
    50% {
        background-color: rgba(245, 158, 11, 0.3);
        transform: scale(1.02);
    }
}

[data-theme="dark"] .chat-message.own {
    background: linear-gradient(135deg, #b45309, #92400e);  /* 🔥 Тёмно-янтарный фон (ночь) */
    color: #ffffff;  /* 🔥 Белый текст для ночной темы */
}

[data-theme="dark"] .chat-message.incoming {
    color: #e0e0e0;  /* 🔥 Явный цвет для ночной темы */
}

.chat-message-content {
    font-size: 0.95rem;
    line-height: 1.4;
}

.chat-message-time {
    font-size: 0.75rem;
    opacity: 0.7;
    text-align: right;
    margin-top: 4px;
}

.chat-input-form {
    display: flex;
    gap: 10px;
    padding: 15px 10px;
    background: var(--stat-bg);
    border-top: 2px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#screen2 .chat-input-form .chat-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border-radius: 20px;
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    max-height: 120px;
    min-height: 44px;
    box-sizing: border-box;
    display: block;
}

.chat-input-form .chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Адаптив для профиля */
@media (max-width: 480px) {
    .profile-stats {
        grid-template-columns: 1fr 1fr;
    }

    .profile-stats .profile-stat:nth-child(3) {
        grid-column: span 2;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-status {
        white-space: normal;
    }

    /* Уменьшаем контейнер для мобильных */
    .main-content .beads-container,
    .hourly-ring-container {
        width: 400px;  /* Оптимальный размер для мобильных */
        height: 400px;  /* Оптимальный размер для мобильных */
    }
}

/* ================= УВЕДОМЛЕНИЕ О НОВОМ СООБЩЕНИИ ================= */
.message-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--panel-bg);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 12px 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 350px;
    cursor: pointer;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.message-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.message-notification:hover {
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
}

/* Свёрнутое состояние */
.message-notification.minimized {
    min-width: 50px;
    max-width: 50px;
    padding: 10px;
    cursor: pointer;
}

.message-notification.minimized .notification-content,
.message-notification.minimized .notification-actions {
    display: none;
}

.message-notification.minimized .notification-avatar {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    margin: 0;
}

.message-notification.minimized .notification-count {
    display: flex !important;
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

/* Постоянная плашка «У вас N непрочитанных…» — во всю ширину, по центру снизу */
#persistentUnreadNotification {
    top: auto;
    bottom: 20px;
    left: 12px;
    right: 12px;
    min-width: 0;
    max-width: none;
    width: auto;
    transform: none;
}

#persistentUnreadNotification.minimized {
    min-width: 50px;
    max-width: 50px;
    left: auto;
    right: 20px;
    transform: none;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-from {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 3px;
}

.notification-text {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-count {
    background: #ef4444;
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
}

.notification-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.notification-minimize,
.notification-close {
    background: var(--stat-bg);
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.notification-minimize:hover,
.notification-close:hover {
    background: var(--primary);
    color: white;
}

.notification-close:hover {
    background: #ef4444;
}

@media (max-width: 480px) {
    .message-notification {
        top: auto;
        bottom: 100px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .message-notification.minimized {
        min-width: 44px;
        max-width: 44px;
        position: fixed;
        bottom: 100px;
        right: 10px;
        left: auto;
    }
}

/* ================= ПЛАШКА-ПЛИТКА УВЕДОМЛЕНИЙ (по аналогии с ЛС) ================= */
.notif-notification-tile {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--panel-bg);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 12px 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 350px;
    cursor: pointer;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.notif-notification-tile.show {
    opacity: 1;
    transform: translateX(0);
}

.notif-notification-tile:hover {
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
}

.notif-tile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-tile-content {
    flex: 1;
    min-width: 0;
}

.notif-tile-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 3px;
}

.notif-tile-text {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-tile-close {
    background: var(--stat-bg);
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.notif-tile-close:hover {
    background: #ef4444;
    color: white;
}

@media (max-width: 480px) {
    .notif-notification-tile {
        top: auto;
        bottom: 100px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}

/* ================= MODAL: ПОМОЩЬ ================= */
.help-modal-content {
    max-width: 400px;
    padding: 20px;
    text-align: left;
}

.help-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
}
.help-item-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.help-item-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 2px;
}
.help-item-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color);
}
.help-item-text strong {
    font-size: 0.95rem;
}
.help-contacts {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.help-contacts a {
    color: var(--primary);
    text-decoration: none;
}
.help-contacts a:hover {
    text-decoration: underline;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modal-header .modal-title {
    margin-bottom: 0;
    text-align: left;
    flex: 1;
}

.modal-close-btn {
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0 8px;
    line-height: 1;
}

.modal-close-btn:hover {
    color: var(--text-color);
}

.welcome-modal-content {
    max-width: 400px;
    padding: 30px 24px;
    text-align: center;
}
.welcome-quote {
    font-style: italic;
    font-size: 1rem;
    color: var(--text-color);
    margin: 20px 0 8px;
    line-height: 1.6;
}
.welcome-quote-ref {
    font-size: 0.85rem;
    opacity: 0.7;
}
.welcome-text {
    font-size: 1rem;
    color: var(--text-color);
    margin: 20px 0;
    line-height: 1.5;
}
.welcome-description {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 24px;
}
.welcome-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

/* CSS-схема интерфейса */
.help-ui-mockup {
    position: relative;
    background: var(--stat-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    border: 2px solid var(--border-color);
}

.mockup-top-bar {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.mockup-stat {
    font-size: 0.85rem;
    background: var(--panel-bg);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.mockup-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    margin-bottom: 15px;
}

.mockup-circle {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px dashed var(--border-color);
    border-radius: 50%;
}

.mockup-bead {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transform: translate(-50%, -50%);
}

.mockup-bead-1 {
    top: 0;
    left: 50%;
    background: var(--bead-active);
}

.mockup-bead-2 {
    top: 50%;
    right: 0;
    background: var(--bead-praying);
}

.mockup-bead-3 {
    bottom: 0;
    left: 50%;
    background: var(--bead-praying);
}

.mockup-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.mockup-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.mockup-btn-secondary {
    background: var(--secondary);
    color: white;
}

.mockup-btn-primary {
    background: var(--primary);
    color: white;
}

/* Номера-указатели на схеме */
.help-callout {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.help-callout:hover {
    transform: scale(1.1);
}

/* Пояснения */
.help-explanations {
    text-align: left;
    margin: 20px 0;
}

.help-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.help-number {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.help-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-color);
}

.help-text strong {
    color: var(--primary);
}

.help-text em {
    font-style: normal;
    font-weight: 500;
}

.btn-full {
    width: 100%;
    padding: 12px;
}

/* Кнопка установки PWA */
.install-pwa-btn {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: none;
}
.install-pwa-btn.visible { display: block; }

/* Быстрое изменение времени */
.quick-time-btns {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 10px;
}
.quick-time-btn {
    padding: 6px 12px;
    background: var(--stat-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-time-btn:active { transform: scale(0.95); }
.quick-time-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ПАНЕЛЬ СЧЁТЧИКА МОЛИТВ (над нижней панелью) */
.prayer-counter-bar {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 150;
    transition: all 0.3s;
    pointer-events: none;
}

.prayer-counter-inline {
    pointer-events: auto;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-bg);
    padding: 5px 16px;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 8px var(--shadow);
}

.prayer-counter-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prayer-counter-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.prayer-counter-inline .timer-display {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    font-family: monospace;
    min-width: 55px;
    text-align: center;
}

.prayer-count-display {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    min-width: 25px;
    text-align: center;
}

.btn-reset {
    background: #ef4444;
    color: white;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-reset:active {
    transform: scale(0.9);
    background: #dc2626;
}

/* КРУГЛАЯ КНОПКА-СЧЁТЧИК (как бусина) */
.prayer-counter-btn {
    position: fixed;
    bottom: 180px;
    right: 15px;
    width: var(--bead-size);
    height: var(--bead-size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    z-index: 150;
    cursor: pointer;
    transition: all 0.2s;
    border: 3px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: white;
    font-weight: bold;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.prayer-counter-btn::after {
    content: '📿';
    font-size: 1.5rem;
}

.prayer-counter-btn:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Меню выбора позиции кнопки */
.position-picker {
    display: none;
    position: fixed;
    bottom: 280px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-bg);
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 200;
}

.position-picker.active {
    display: block;
}

.position-picker-title {
    font-size: 0.85rem;
    color: var(--text-color);
    text-align: center;
    margin-bottom: 10px;
}

.position-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.position-option {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: var(--stat-bg);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.2s;
}

.position-option:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.position-option.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Режим перемещения кнопки */
.prayer-counter-btn.moving {
    animation: shake 0.5s infinite;
    background: linear-gradient(135deg, #3b82f6, #10b981);
}

@keyframes shake {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* Стрелки навигации для десктопа */
.screen-arrow {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    z-index: 95;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px var(--shadow);
    transition: all 0.2s;
    user-select: none;
}

.screen-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.screen-arrow.left {
    left: 10px;
}

.screen-arrow.right {
    right: 10px;
}

.screen-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Кнопка переключения темы */
.theme-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    right: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow);
    cursor: pointer;
    z-index: 101;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
    transition: all 0.3s;
}
.theme-toggle:active { transform: scale(0.9); }
/* 🔥 theme-toggle перенесён в левый верх, чтобы не перекрывать индикатор
   онлайна справа; на экране чата (слева своя статистика) прячем. */
body.screen-chat .theme-toggle { display: none; }

/* ================= НАВИГАЦИЯ ================= */
.screen-nav {
    position: fixed;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 90;
    background: var(--panel-bg);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 10px var(--shadow);
    transition: all 0.3s;
}

/* 🔥 Кнопки переключения экранов для десктопа */
.desktop-screen-buttons {
    position: fixed;
    top: 70px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 95;
}

.desktop-screen-btn {
    padding: 10px 16px;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    box-shadow: 0 2px 8px var(--shadow);
    transition: all 0.2s;
    white-space: nowrap;
}

.desktop-screen-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: scale(1.05);
}

.desktop-screen-btn:active {
    transform: scale(0.95);
}

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.nav-dot.active {
    background: var(--primary);
    transform: scale(1.2);
}

.nav-dot:hover {
    background: var(--secondary);
}

.swipe-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    pointer-events: none;
}

.nav-dot.active .swipe-hint {
    animation: hintSwipe 2s infinite;
}

@keyframes hintSwipe {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.2); }
}

/* ================= ЭКРАНЫ ================= */
.screens-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-out;
    overflow-x: hidden; /* Запрет горизонтальной прокрутки */
}

.screen {
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    width: 100%; /* Фикс для маленьких экранов */
    display: none;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

/* ================= ЭКРАН 2: ЛЕНТА ================= */
.feed-screen {
    background: var(--bg-color);
    padding: 70px 15px 90px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    box-sizing: border-box;
}

.feed-header {
    text-align: center;
    margin-bottom: 20px;
}

.feed-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 5px;
}

.feed-subtitle {
    font-size: 0.9rem;
    color: #666;
}

.feed-list {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feed-post {
    background: var(--panel-bg);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px var(--shadow);
    transition: all 0.3s;
}

.feed-post:active {
    transform: scale(0.98);
}

.feed-post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.feed-post-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.feed-post-date {
    font-size: 0.75rem;
    color: #999;
}

.feed-post-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 10px;
    white-space: pre-wrap;
}

.feed-post-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--stat-bg);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.feed-post-source:hover {
    background: var(--secondary);
    color: white;
}

.feed-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.feed-empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.add-post-fab {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.add-post-fab:active {
    transform: scale(0.9);
}

/* ================= FEED TOOLBAR ================= */
.feed-header-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    max-width: 600px;
    margin: -10px auto 10px;
    padding: 0 5px;
}

.feed-toolbar-btn {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--text-color);
}

.feed-toolbar-btn:active {
    transform: scale(0.9);
}

.feed-post-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.feed-post-delete {
    background: none;
    border: none;
    color: #e74c3c;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.feed-post-delete:hover {
    opacity: 1;
}

.feed-post-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.5;
}

/* ================= ДНЕВНИК ПОЛНОЭКРАННЫЙ ================= */
.diary-fullscreen-modal {
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 100vh;
    overflow-y: auto;
    padding: 16px 20px 100px;
    box-sizing: border-box;
}

.diary-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.diary-fullscreen-header .diary-title {
    font-size: 1.4rem;
    font-weight: 700;
}

/* ================= ПОЛНОЭКРАННЫЕ ПАНЕЛИ (комнаты, пользователи) ================= */
.modal-fullscreen {
    background: var(--bg-color);
    width: 100%;
    max-width: 600px;
    align-self: stretch;
    height: 100%;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    pointer-events: none;
}

#usersListFullscreen .modal-fullscreen-header,
#roomMenuFullscreen .modal-fullscreen-header,
#pmFullscreenOverlay .modal-fullscreen-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.modal-fullscreen-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.modal-fullscreen-actions {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    padding: 0 20px 16px;
    justify-content: center;
}

.fullscreen-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-action-btn:hover {
    background: var(--hover-bg);
}

.modal-fullscreen-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
}

#usersListFullscreenContent,
#roomMenuList {
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.modal-fullscreen-list .room-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color);
    border: none;
    background: transparent;
    font-size: 1rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    touch-action: manipulation;
}

.modal-fullscreen-list .room-menu-item:hover {
    background: var(--hover-bg);
}

.modal-fullscreen-list .room-menu-item:active {
    background: var(--active-bg);
}

.modal-fullscreen-list .room-menu-item .room-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.modal-fullscreen-list .room-menu-item .room-name {
    flex: 1;
    font-weight: 500;
}

.modal-fullscreen-list .room-menu-item .room-role-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
}

.modal-fullscreen-list .room-menu-item .room-menu-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 8px;
}

.modal-fullscreen-list .room-menu-item .room-menu-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    opacity: 0.6;
}

.modal-fullscreen-list .room-menu-item .room-menu-action-btn:hover {
    background: var(--hover-bg);
    opacity: 1;
}

.modal-fullscreen-list .user-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color);
    border: none;
    background: transparent;
    font-size: 1rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.modal-fullscreen-list .user-list-item:hover {
    background: var(--hover-bg);
}

.modal-fullscreen-list .user-list-item:active {
    background: var(--active-bg);
}

.modal-fullscreen-list .user-list-item .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.modal-fullscreen-list .user-list-item .user-name {
    flex: 1;
    font-weight: 500;
}

.modal-fullscreen-list .user-list-item .user-status {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Скрываем небо и круг при открытых полноэкранных панелях */
body.room-menu-open .heavenly-ring,
body.room-menu-open .hourly-ring-container,
body.room-menu-open .chrisma-image,
body.room-menu-open .room-label,
body.room-menu-open .plaques-stack,
body.room-menu-open .bottom-bar,
body.users-list-open .heavenly-ring,
body.users-list-open .hourly-ring-container,
body.users-list-open .chrisma-image,
body.users-list-open .room-label,
body.users-list-open .plaques-stack,
body.users-list-open .bottom-bar {
    display: none;
}

.modal-fullscreen > * {
    pointer-events: auto;
}

#pmFullscreenOverlay .modal-fullscreen {
    background: var(--bg-color);
}

#pmFullscreenOverlay .modal-fullscreen .private-chats-container {
    min-height: 0;
}

/* ================= МОБИЛЬНАЯ АДАПТАЦИЯ ================= */
@media (max-width: 480px) {
    /* Обновляем переменные для мобильных - уменьшенные размеры */
    :root {
        --bead-size: 55px;
        /* 🔥 ЕДИНАЯ КОНСТРУКЦИЯ - размеры связаны от внешнего к внутреннему */
        --hourly-ring-size: 360px;     /* Уменьшили с 400px для ширины экрана */
        --heavenly-ring-size: calc(var(--hourly-ring-size) - 50px);  /* Небо под слотами */
        --beads-container-size: calc(var(--heavenly-ring-size) - var(--bead-size));  /* Бусины внутри */
    }

    .main-content {
        /* 🔥 Подняли вверх для мобильных */
        padding-top: calc(100px + env(safe-area-inset-top, 0px));
        padding-bottom: 140px;
    }

    /* Адаптируем для мобильных - отменяем абсолютное позиционирование */
    .main-content .beads-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: auto;
        width: var(--beads-container-size);
        height: var(--beads-container-size);
    }

    /* 🔥 Небо и слоты - абсолютное позиционирование внутри beads-container */
    .main-content .beads-container .heavenly-ring,
    .main-content .beads-container .hourly-ring-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .main-content .beads-container .heavenly-ring {
        width: var(--heavenly-ring-size);
        height: var(--heavenly-ring-size);
    }

    .main-content .beads-container .hourly-ring-container {
        width: var(--hourly-ring-size);
        height: var(--hourly-ring-size);
    }

    .chrisma-image {
        width: 90px;
        height: 90px;
    }

    .bead {
        width: 55px;
        height: 55px;
        font-size: 0.75rem;
    }

    .btn {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .btn-primary {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }

    .session-timer {
        width: 48px;
        height: 48px;
    }

    .session-timer-display {
        font-size: 0.75rem;
    }

    .prayer-counter-panel {
        bottom: 70px;
    }

    .prayer-progress-ring {
        width: 100px;
        height: 100px;
    }

    .prayer-count-display {
        font-size: 1.5rem;
    }

    .btn-counter-setting,
    .btn-counter-reset {
        width: 40px;
        height: 40px;
        font-size: 0.7rem;
    }

    .stats-left {
        gap: 6px;
        font-size: 0.75rem;
    }

    .profile-icon {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    /* Иконка комнаты — той же величины, что профиль (иначе низы расходятся,
       плашка ЛС это подчёркивает) */
    .top-bar .room-icon-btn {
        width: 40px;
        height: 40px;
    }

    .top-bar .room-icon-btn .ic-room {
        width: 32px;
        height: 32px;
    }

    .my-status-inline {
        padding: 3px 8px;
        gap: 4px;
    }

    .my-bead-preview {
        width: 14px;
        height: 14px;
    }

    .my-status-text {
        font-size: 0.75rem;
    }

    .screen-nav {
        bottom: 125px;
        padding: 6px 12px;
    }

    .nav-dot {
        width: 8px;
        height: 8px;
    }

    .prayer-counter-bar {
        bottom: 60px;
    }

    .bottom-bar {
        padding: 3px 10px;
        gap: 8px;
        bottom: 12px;
    }

    .more-menu .btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

.max-debug-badge {
    position: fixed;
    bottom: 62px;
    left: 6px;
    z-index: 9999;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-family: monospace;
    line-height: 1.4;
    white-space: nowrap;
}
.max-debug-badge.hidden { display: none !important; }

    .prayer-counter-inline {
        padding: 4px 12px;
    }

    .prayer-counter-inline .timer-display {
        font-size: 0.95rem;
        min-width: 45px;
    }

    .prayer-count-display {
        font-size: 0.85rem;
        min-width: 25px;
    }

    .btn-reset {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    .prayer-counter-btn {
        bottom: 140px;
        right: 12px;
        width: 55px;
        height: 55px;
    }

    .prayer-counter-btn::after {
        font-size: 1.2rem;
    }

    .position-picker {
        bottom: 220px;
        padding: 12px;
    }

    .position-option {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .btn-reset {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    .theme-toggle {
        top: 10px;
        right: 50px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .screen-arrow {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .screen-nav {
        bottom: 115px;
        padding: 6px 12px;
    }

    .nav-dot {
        width: 8px;
        height: 8px;
    }

    .prayer-counter-bar {
        bottom: 65px;
    }

    .feed-screen {
        padding: 70px 12px 90px;
    }

    .add-post-fab {
        bottom: 90px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
}

/* Очень маленькие экраны (Samsung A11 и подобные) */
@media (max-height: 600px) {
    /* Обновляем переменные для маленьких экранов - увеличенные размеры */
    :root {
        --bead-size: 50px;
    }

    .main-content {
        padding-top: 90px;
        padding-bottom: 130px;
    }

    /* Адаптируем для маленьких экранов - отменяем абсолютное позиционирование */
    .main-content .beads-container {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: auto;
    }

    .beads-container {
        width: 300px;
        height: 300px;
    }

    .chrisma-image {
        width: 80px;
        height: 80px;
    }

    .bead {
        width: 50px;
        height: 50px;
        font-size: 0.7rem;
    }

    /* Отступы .top-bar не переопределяем: единые с лобби (18px/16px) */

    .stats-left {
        gap: 4px;
        font-size: 0.7rem;
    }

    .stat-item {
        gap: 2px;
    }

    .profile-icon {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .top-bar .room-icon-btn {
        width: 38px;
        height: 38px;
    }

    .top-bar .room-icon-btn .ic-room {
        width: 30px;
        height: 30px;
    }

    .my-bead-preview {
        width: 12px;
        height: 12px;
    }

    .my-status-text {
        font-size: 0.7rem;
    }

    .bottom-bar {
        padding: 3px 8px;
        gap: 6px;
        bottom: 10px;
    }

    .btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .btn-primary {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .btn-more {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .more-menu .btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .session-timer {
        width: 44px;
        height: 44px;
    }

    .session-timer-display {
        font-size: 0.7rem;
    }

    .prayer-counter-panel {
        bottom: 65px;
    }

    .prayer-progress-ring {
        width: 90px;
        height: 90px;
    }

    .prayer-count-display {
        font-size: 1.3rem;
    }

    .btn-counter-setting,
    .btn-counter-reset {
        width: 38px;
        height: 38px;
        font-size: 0.65rem;
    }

    .screen-nav {
        bottom: 120px;
    }

    .nav-dot {
        width: 7px;
        height: 7px;
    }

    .prayer-counter-inline {
        padding: 4px 10px;
    }

    .prayer-counter-inline .timer-display {
        font-size: 0.9rem;
        min-width: 40px;
    }

    .prayer-count-display {
        font-size: 0.8rem;
    }

    .btn-reset {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }

    .prayer-counter-btn {
        bottom: 120px;
        right: 10px;
        width: 50px;
        height: 50px;
    }

    .prayer-counter-btn::after {
        font-size: 1.1rem;
    }

    .position-picker {
        bottom: 180px;
        padding: 10px;
    }

    .position-option {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .prayer-counter-bar {
        bottom: 70px;
    }

    .theme-toggle {
        top: 8px;
        right: 45px;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .feed-screen {
        padding: 55px 10px 90px;
    }

    .feed-title {
        font-size: 1.2rem;
    }

    .feed-subtitle {
        font-size: 0.8rem;
    }

    .add-post-fab {
        bottom: 85px;
        right: 12px;
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}

/* Показываем стрелки только на десктопе */
@media (min-width: 769px) {
    .screen-arrow {
        display: flex;
    }

    #screen1 .main-content {
        height: 100%;
        overflow: visible;
    }
}

/* ================= ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (Samsung A11, 320px) ================= */
@media (max-width: 360px) {
    /* Уменьшаем контейнер */
    :root {
        --bead-size: 50px;
        /* 🔥 ЕДИНАЯ КОНСТРУКЦИЯ - размеры связаны от внешнего к внутреннему */
        --hourly-ring-size: 320px;     /* Уменьшили для ширины экрана */
        --heavenly-ring-size: calc(var(--hourly-ring-size) - 45px);  /* Небо под слотами */
        --beads-container-size: calc(var(--heavenly-ring-size) - var(--bead-size));  /* Бусины внутри */
    }

    .main-content {
        /* 🔥 Подняли вверх для очень маленьких экранов */
        padding-top: 90px;
        padding-bottom: 130px;
    }

    /* 🔥 Небо и слоты - абсолютное позиционирование внутри beads-container */
    .main-content .beads-container .heavenly-ring,
    .main-content .beads-container .hourly-ring-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .main-content .beads-container .heavenly-ring {
        width: var(--heavenly-ring-size);
        height: var(--heavenly-ring-size);
    }

    .main-content .beads-container .hourly-ring-container {
        width: var(--hourly-ring-size);
        height: var(--hourly-ring-size);
    }

    /* Отступы .top-bar не переопределяем: единые с лобби (18px/16px) */

    .stats-left {
        gap: 6px;
    }

    .stat-item {
        gap: 2px;
        font-size: 0.75rem;
    }

    .profile-icon {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .top-bar .room-icon-btn {
        width: 40px;
        height: 40px;
    }

    .top-bar .room-icon-btn .ic-room {
        width: 32px;
        height: 32px;
    }

    .my-status-inline {
        padding: 3px 8px;
        gap: 4px;
    }

    .my-bead-preview {
        width: 12px;
        height: 12px;
    }

    .my-status-text {
        font-size: 0.7rem;
    }

    /* Уменьшаем нижнюю панель */
    .bottom-bar {
        padding: 3px 8px;
        gap: 6px;
        bottom: 8px;
    }

    .btn {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }

    .btn-primary {
        width: 54px;
        height: 54px;
        font-size: 1.3rem;
    }

    .btn-more {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }

    .more-menu .btn {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .session-timer {
        width: 46px;
        height: 46px;
    }

    .session-timer-display {
        font-size: 0.75rem;
    }

    .prayer-counter-panel {
        bottom: 70px;
    }

    .prayer-progress-ring {
        width: 100px;
        height: 100px;
    }

    .prayer-count-display {
        font-size: 1.5rem;
    }

    .btn-counter-setting,
    .btn-counter-reset {
        width: 40px;
        height: 40px;
        font-size: 0.7rem;
    }

    /* Уменьшаем кнопку-счётчик */
    .prayer-counter-btn {
        width: 50px;
        height: 50px;
        bottom: 140px;
        right: 8px;
    }

    .prayer-counter-btn::after {
        font-size: 1.2rem;
    }

    /* Уменьшаем панель счётчика */
    .prayer-counter-bar {
        bottom: 70px;
    }

    .prayer-counter-inline {
        padding: 4px 10px;
    }

    .prayer-counter-inline .timer-display {
        font-size: 0.95rem;
        min-width: 45px;
    }

    .prayer-count-display {
        font-size: 0.85rem;
        min-width: 20px;
    }

    .btn-reset {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }

    /* Уменьшаем навигацию */
    .screen-nav {
        bottom: 100px;
        padding: 6px 12px;
    }

    .nav-dot {
        width: 8px;
        height: 8px;
    }

    /* Уменьшаем иконку темы */
    .theme-toggle {
        top: 8px;
        right: 45px;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    /* Уменьшаем модальные окна */
    .modal {
        padding: 10px;
    }

    .modal-content {
        padding: 15px;
        max-width: 280px;
    }

    .chat-modal-inner {
        max-width: 100%;
    }

    .chat-modal-header {
        padding: 10px 14px;
    }

    .chat-modal-inner #privateChatForm {
        padding: 8px 10px;
    }

    .chat-modal-inner #privateChatForm .chat-input {
        font-size: 0.9rem;
        padding: 8px 14px;
    }

    .modal-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .modal-subtitle {
        font-size: 0.8rem;
    }

    .profile-stats {
        padding: 10px;
        gap: 10px;
    }

    .profile-stat-value {
        font-size: 1.2rem;
    }

    .profile-stat-label {
        font-size: 0.65rem;
    }

    /* Уменьшаем помощь */
    .help-ui-mockup {
        padding: 10px;
    }

    .mockup-circle-container {
        height: 100px;
    }

    .mockup-circle {
        width: 80px;
        height: 80px;
    }

    .mockup-bead {
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
    }

    .help-callout {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    .help-number {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    .help-text {
        font-size: 0.75rem;
    }

    /* Уменьшаем ленту */
    .feed-screen {
        padding: 50px 8px 85px;
    }

    .feed-title {
        font-size: 1.1rem;
    }

    .feed-subtitle {
        font-size: 0.75rem;
    }

    .feed-post {
        padding: 10px;
    }

    .feed-post-title {
        font-size: 0.95rem;
    }

    .feed-post-content {
        font-size: 0.85rem;
    }

    .add-post-fab {
        bottom: 80px;
        right: 8px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Центрирование контента */
    .main-content {
        padding-top: 60px;
        padding-bottom: 140px;
    }
}

.extra-names-container {
    position: absolute;
    left: 16px;
    bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 2px 0;
    z-index: 5;
    pointer-events: auto;
}

.extra-name {
    font-size: 0.9rem;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.extra-name:hover,
.extra-name:active {
    color: var(--text-primary, #e2e8f0);
    background: rgba(255,255,255,0.08);
}

@media (max-width: 480px) {
    .extra-names-container {
        left: 12px;
        bottom: 40px;
    }
    .extra-name {
        font-size: 0.8rem;
    }
}

/* 🔥 НАКОПИТЕЛЬНАЯ БУСИНА (9+ участников) — одна из позиций кольца,
   круглая как остальные, неподвижная; внутри статичная иконка «группы» + счётчик */
#groupAccumulatorBead {
    position: absolute;
    z-index: 2;
    width: var(--bead-size);
    height: var(--bead-size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid rgba(255,255,255,0.28);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

#groupAccumulatorBead:hover,
#groupAccumulatorBead:active {
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.bead-group-icon {
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.95;
    pointer-events: none;
}

.bead-group-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bead-group-count {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #1f2937;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    box-sizing: border-box;
}

/* 🔥 Список участников накопительной бусины */
.group-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.group-list-row:hover,
.group-list-row:active {
    background: rgba(128,128,128,0.14);
}

.group-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    overflow: hidden;
}

.group-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-list-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Мелкие правки для очень маленьких экранов (Samsung A11 и т.п.) */
@media (max-width: 360px) {
    .room-label {
        top: 5px;
        font-size: 0.8rem;
    }

    /* Уменьшаем изображение в центре */
    .chrisma-image {
        width: 70px;
        height: 70px;
    }

    /* Позиционер кнопки */
    .position-picker {
        bottom: 220px;
        padding: 10px;
    }

    .position-option {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Экстремально маленькие экраны (менее 320px) */
@media (max-width: 320px) {
    :root {
        --bead-size: 45px;
        /* 🔥 ЕДИНАЯ КОНСТРУКЦИЯ - размеры связаны от внешнего к внутреннему */
        --hourly-ring-size: 280px;     /* Уменьшили для ширины экрана */
        --heavenly-ring-size: calc(var(--hourly-ring-size) - 40px);  /* Небо под слотами */
        --beads-container-size: calc(var(--heavenly-ring-size) - var(--bead-size));  /* Бусины внутри */
    }

    .main-content {
        /* 🔥 Подняли вверх для экстремально маленьких экранов */
        padding-top: 80px;
        padding-bottom: 120px;
    }

    /* 🔥 Небо и слоты - абсолютное позиционирование внутри beads-container */
    .main-content .beads-container .heavenly-ring,
    .main-content .beads-container .hourly-ring-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .main-content .beads-container .heavenly-ring {
        width: var(--heavenly-ring-size);
        height: var(--heavenly-ring-size);
    }

    .main-content .beads-container .hourly-ring-container {
        width: var(--hourly-ring-size);
        height: var(--hourly-ring-size);
    }

    .btn {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .btn-primary {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .session-timer {
        width: 42px;
        height: 42px;
    }

    .session-timer-display {
        font-size: 0.65rem;
    }

    .prayer-counter-panel {
        bottom: 65px;
    }

    .prayer-progress-ring {
        width: 80px;
        height: 80px;
    }

    .prayer-count-display {
        font-size: 1.2rem;
    }

    .btn-counter-setting,
    .btn-counter-reset {
        width: 36px;
        height: 36px;
        font-size: 0.6rem;
    }

    .prayer-counter-btn {
        width: 45px;
        height: 45px;
        bottom: 130px;
    }
}

/* ================= ЧАТ - МОБИЛЬНАЯ ВЕРСИЯ ================= */
.screen {
    display: none;
    height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    overflow: hidden;
    /* NB: 100dvh сознательно НЕ используем — dvh меняется при
       сворачивании адресной строки, экран «дышит» при скролле */
}

.screen.active,
#screen1.active {
    display: block;
}

#screen0.active {
    display: flex;
    flex-direction: column;
}

#screen2 {
    z-index: 2;
    position: relative;
    overflow: hidden;
    display: none;
    flex-direction: column;
    /* Используем динамическую высоту через JS */
    height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    height: -webkit-fill-available;
    height: fill-available;
    /* NB: без 100dvh — dvh «дышит» при сворачивании адресной строки */
}

#screen2.active {
    display: flex;
}

#screen2 .chat-container,
#screen2 .private-chats-container,
#pmFullscreenOverlay .private-chats-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#screen2 .chat-container {
    /* Отступ под глобальный фиксированный .top-bar (ранее — у .chat-tabs) */
    margin-top: calc(var(--top-bar-height) + 2px);
}

#screen2 .private-chats-container {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

#screen2 .top-bar {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    box-shadow: 0 2px 10px var(--shadow);
}

#screen2 .chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Высота будет задана через JS */
    height: auto;
    min-height: 0;
    color: #333;  /* 🔥 Явный цвет для дневной темы */
}

[data-theme="dark"] #screen2 .chat-messages {
    color: #e0e0e0;  /* 🔥 Явный цвет для ночной темы */
}

#screen2 .chat-input-form {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 8px var(--shadow);
    /* Убираем fixed позиционирование */
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    /* 🔥 Поле ввода на всю ширину экрана */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 🔥 Контейнер для textarea с индикатором */
#screen2 .chat-input-form > div {
    flex: 1;
    display: flex;
    position: relative;
    min-width: 0;
}

/* Убираем старые фиксы, которые мешают */
.chat-messages {
    /* Убираем padding-bottom с calc */
    padding-bottom: 16px;
}

.chat-input-form {
    /* Убираем fixed */
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
}

.chat-header {
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top));
    background: var(--primary);
    color: white;
    text-align: center;
    box-shadow: 0 2px 8px var(--shadow);
    flex-shrink: 0;
}

.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    word-wrap: break-word;
    animation: messageSlideIn 0.3s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

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

.chat-message.own {
    align-self: flex-end;
    background: linear-gradient(135deg, #fde9cf, #fbd9a8);  /* 🔥 Бледный янтарный фон (день) */
    color: #1a1a1a;  /* 🔥 Чёрный текст для дневной темы */
    border-bottom-right-radius: 4px;
}

.chat-message.other {
    align-self: flex-start;
    background: var(--stat-bg);
    color: var(--text-color);
    border-bottom-left-radius: 4px;
}

/* 🔥 Закреплённое сообщение - янтарный фон */
.chat-message.pinned-message {
    background: rgba(245, 158, 11, 0.15);  /* Светло-оранжевый/янтарный */
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.chat-message.deleted {
    opacity: 0.6;
    font-style: italic;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.75rem;
}

.message-author {
    font-weight: 600;
    opacity: 0.9;
}

.message-time {
    opacity: 0.7;
    margin-left: 8px;
}

/* 🔥 Индикатор закреплённого сообщения */
.pinned-indicator {
    margin-left: 8px;
    font-size: 0.9rem;
    animation: pinPulse 2s ease-in-out infinite;
}

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

.message-content {
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

/* Форматирование текста */
.message-content strong {
    font-weight: 700;
}

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

.message-content a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.8;
}

.message-content blockquote {
    margin: 8px 0;
    padding-left: 10px;
    border-left: 3px solid rgba(255,255,255,0.3);
    font-style: italic;
    opacity: 0.9;
}

[data-theme="dark"] .message-content blockquote {
    border-left-color: rgba(255,255,255,0.2);
}

/* Кнопка удаления сообщения */
.delete-message-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-message-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.delete-message-btn:active {
    transform: scale(0.9);
}

/* Кнопка редактирования сообщения */
.edit-message-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-message-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.edit-message-btn:active {
    transform: scale(0.9);
}

/* Кнопка ответа на сообщение */
.reply-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reply-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.reply-btn:active {
    transform: scale(0.9);
}

/* 🔥 Кнопка "Молитвенная просьба" */
.prayer-request-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prayer-request-btn.active {
    opacity: 1;
    transform: scale(1.15);
}

.prayer-request-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.prayer-request-btn:active {
    transform: scale(0.9);
}

/* 🔥 Индикатор молитвенной просьбы */
.prayer-indicator {
    margin-left: 8px;
    font-size: 0.9rem;
    animation: prayerPulse 2s ease-in-out infinite;
}

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

/* 🔥 Сообщение с молитвенной просьбой - светло-зелёный фон */
.chat-message.prayer-request {
    background: rgba(34, 197, 94, 0.15);  /* Светло-зелёный */
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #333;  /* 🔥 Тёмный цвет для дневной темы */
}

[data-theme="dark"] .chat-message.prayer-request {
    color: #e0e0e0;  /* 🔥 Белый цвет для ночной темы */
}

/* Кнопка закрепления сообщения */
.pin-message-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-message-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.pin-message-btn:active {
    transform: scale(0.9);
}

.pin-message-btn.pinned {
    opacity: 1;
    animation: pin-pulse 0.3s ease-in-out;
}

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

/* Реакции - компактно */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    max-width: 100%;
}

.reaction {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    user-select: none;
}

.reaction small {
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 1px;
}

.reaction:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.reaction.has-reacted {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    font-weight: 600;
}

.own .reaction {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

.own .reaction:hover {
    background: rgba(0, 0, 0, 0.15);
}

.own .reaction.has-reacted {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.5);
    color: #1a1a1a;
}

/* Кнопка реакции - скрыта по умолчанию, показываем при долгом тапе */
.message-actions {
    display: none; /* Скрываем кнопку 😊 */
}

/* Пикер реакций - компактный */
.reaction-picker {
    display: flex;
    gap: 3px;
    padding: 5px;
    background: var(--panel-bg);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 5000;
    animation: pickerFadeIn 0.2s ease;
}

@keyframes pickerFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reaction-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
}

.reaction-option:hover {
    background: var(--stat-bg);
    transform: scale(1.2);
}

.reaction-option:active {
    transform: scale(0.9);
}

/* Попап «кто среагировал» — список имён под реакцией (как в Telegram) */
.reaction-users-popup {
    position: fixed;
    min-width: 180px;
    max-width: 260px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    z-index: 5100;
    padding: 10px 6px;
    animation: popupFadeIn 0.15s ease;
    overflow: hidden;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.reaction-users-popup .ru-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}

.reaction-users-popup .ru-popup-emoji {
    font-size: 1.3rem;
    line-height: 1;
}

.reaction-users-popup .ru-popup-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #888);
}

.reaction-users-popup .ru-popup-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reaction-users-popup .ru-popup-item {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.92rem;
    color: var(--text-color);
    transition: background 0.15s;
}

.reaction-users-popup .ru-popup-item:hover {
    background: var(--stat-bg);
}

.reaction-users-popup .ru-popup-empty {
    padding: 10px;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    text-align: center;
}

/* ================= ЕДИНЫЕ ШИТЫ (sheet) — базовый слой модалок ================= */
/* Единый компонент модалок: full-width панель, прижатая к низу (--bottom,
   действия/меню, как контекст сообщения в Telegram) или к верху (--top,
   формы с вводом — клавиатура не перекрывает поля).
   Лестница z-index: панели 2000 → профиль 4000 → lightbox 5000 →
   шиты 6000 (низ) / 6100 (верх) → диалоги dialogs.js 11000 → тосты 12000. */
.sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 6000;
    display: flex;
    justify-content: center;
    animation: sheetFadeIn 0.15s ease;
}

.sheet-overlay--bottom { align-items: flex-end; }
.sheet-overlay--top { align-items: flex-start; }
.sheet-overlay--center { align-items: center; }

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

.sheet {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--panel-bg);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.35);
    -webkit-overflow-scrolling: touch;
}

.sheet-overlay--bottom .sheet {
    border-radius: 18px 18px 0 0;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
    animation: sheetSlideUp 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.sheet-overlay--top .sheet {
    border-radius: 0 0 18px 18px;
    padding: calc(10px + env(safe-area-inset-top)) 10px 14px;
    animation: sheetSlideDown 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes sheetSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Центральный вариант: компактная карточка (меню ФАБ) */
.sheet-overlay--center .sheet {
    width: auto;
    max-width: min(94vw, 420px);
    border-radius: 18px;
    /* Тень всенаправленная (у прижатых шитов она направлена вверх) */
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    animation: sheetPopIn 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes sheetPopIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sheet-overlay--center.sheet-overlay--closing .sheet {
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.15s ease-in, opacity 0.15s ease-in;
}

/* Фаза закрытия (класс ставит sheet.js перед удалением) */
.sheet-overlay--closing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.sheet-overlay--closing .sheet {
    transition: transform 0.18s ease-in;
}

.sheet-overlay--bottom.sheet-overlay--closing .sheet { transform: translateY(100%); }
.sheet-overlay--top.sheet-overlay--closing .sheet { transform: translateY(-100%); }

/* Контент шитов (этап 1: выбор длительности) */
.sheet.duration-sheet {
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    text-align: center;
}

.ma-handle {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

.ma-handle span {
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-color);
}

.ma-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 8px;
}

.ma-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    overflow: hidden;
    flex-shrink: 0;
}

.ma-meta {
    min-width: 0;
}

.ma-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-time {
    font-size: 0.78rem;
    color: var(--text-muted, #888);
    margin-top: 2px;
}

.ma-preview {
    padding: 8px 6px 10px;
    font-size: 0.95rem;
    color: var(--text-color);
    background: var(--stat-bg);
    border-radius: 12px;
    margin: 0 2px 10px;
    line-height: 1.4;
    word-break: break-word;
    max-height: 88px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ma-preview a {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
}

.ma-react-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 4px 6px;
}

.ma-react-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    padding: 6px 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    background: var(--stat-bg);
}

.ma-react-opt:hover {
    background: var(--primary);
    transform: scale(1.08);
}

.ma-react-opt:active {
    transform: scale(0.92);
}

.ma-existing-reactions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 6px 8px;
}

.ma-reaction-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--stat-bg);
}

.ma-reaction-emoji {
    font-size: 1.35rem;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.ma-reaction-names {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ma-reaction-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    flex-shrink: 0;
}

.ma-divider {
    border-top: 1px solid var(--border-color);
    margin: 6px 0 4px;
}

.ma-actions {
    display: flex;
    flex-direction: column;
}

.ma-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.ma-item:hover {
    background: var(--stat-bg);
}

.ma-item-emoji {
    font-size: 1.15rem;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.ma-item-label {
    font-size: 1rem;
    color: var(--text-color);
}

.ma-item-danger .ma-item-label {
    color: #e5484d;
}

.ma-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 4px 8px;
    z-index: 1;
}

.ma-close:hover {
    color: var(--text-color);
}

.chat-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.95rem;
    background: var(--bg-color);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s;
    resize: none;
    max-height: 120px;
    min-height: 44px;
    line-height: 1.4;
    overflow-y: auto;
    box-sizing: border-box;
}

.chat-input:focus {
    border-color: var(--primary);
}

.chat-input:focus::placeholder {
    opacity: 0;
}

/* 🔥 Mension dropdown */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--shadow);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    min-width: 200px;
    padding: 4px;
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: background 0.15s;
}

.mention-item:hover,
.mention-item.selected {
    background: var(--primary);
    color: white;
}

/* 🔥 @упоминания в сообщениях */
.mention {
    color: #2563eb;
    font-weight: 700;
    cursor: pointer;
}

.chat-message.own .mention {
    color: #93c5fd;
}

.mention:hover {
    text-decoration: underline;
    opacity: 0.8;
}

[data-theme="dark"] .mention {
    color: #60a5fa;
}

[data-theme="dark"] .chat-message.own .mention {
    color: #93c5fd;
}

/* @support — упоминание поддержки (фан-аут на всех с ролью support) */
.mention[data-mention="support"] {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 4px;
    padding: 0 2px;
}

[data-theme="dark"] .mention[data-mention="support"] {
    color: #34d399;
}

.chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
}

.chat-send-btn:active {
    transform: scale(0.9);
}

.chat-send-btn .ic-send-toggle {
    width: 24px;
    height: 24px;
    color: currentColor;
}

.chat-send-btn:disabled {
    background: var(--border-color);
    cursor: not-allowed;
}

/* Reply preview bar */
.reply-preview-bar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--stat-bg);
    border-top: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    gap: 8px;
    flex-shrink: 0;
}

.reply-preview-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.reply-preview-label {
    font-size: 0.7rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reply-preview-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-preview-text {
    font-size: 0.8rem;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-cancel-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.5;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--text-color);
}

.reply-cancel-btn:hover {
    opacity: 1;
    background: var(--hover-bg);
}

/* Reply block внутри сообщения */
.message-reply-block {
    padding: 6px 10px;
    margin-bottom: 6px;
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    background: rgba(128, 128, 128, 0.08);
    font-size: 0.8rem;
    cursor: pointer;
}

.message-reply-block .reply-author {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--primary);
    margin-bottom: 2px;
}

.message-reply-block .reply-text {
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🔥 Индикатор печати (три точки) */
.typing-indicator {
    padding: 6px 14px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--stat-bg);
    border-top: 1px solid var(--border-color);
}

.typing-dots span {
    animation: typingDot 1.4s infinite;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    opacity: 0.3;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* Кнопка ответа в личном чате */
.chat-message .reply-btn,
.chat-message .edit-message-btn,
.chat-message .delete-message-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 6px;
    opacity: 0.4;
    transition: opacity 0.2s, background 0.2s;
    color: var(--text-color);
}

.chat-message:hover .reply-btn,
.chat-message:hover .edit-message-btn,
.chat-message:hover .delete-message-btn {
    opacity: 0.8;
}

.chat-message .reply-btn:hover,
.chat-message .edit-message-btn:hover,
.chat-message .delete-message-btn:hover {
    opacity: 1;
    background: rgba(128,128,128,0.15);
}

.chat-message.own .reply-btn,
.chat-message.own .edit-message-btn,
.chat-message.own .delete-message-btn {
    color: #1a1a1a;
}

/* 🔥 Модал: Молитва по именам */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

#roomMenuFullscreen {
    align-items: stretch;
    background: transparent;
    backdrop-filter: none;
    z-index: 2000;
    pointer-events: auto;
}

.prayer-names-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
}

.prayer-names-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.celestial-info-modal {
    background: var(--panel-bg);
    border-radius: 20px;
    padding: 18px 20px 20px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

.celestial-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.celestial-info-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color);
}

.celestial-info-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.celestial-info-close {
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--stat-bg);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.5;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--text-color);
}

.modal-close-btn:hover {
    opacity: 1;
    background: var(--hover-bg, rgba(128,128,128,0.1));
}

.chrisma-modal {
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    background: transparent;
    backdrop-filter: none;
}

.chrisma-modal-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chrisma-modal-header {
    position: absolute;
    top: -44px;
    right: 0;
    z-index: 10;
}

.chrisma-modal-header .modal-close-btn {
    background: rgba(0,0,0,0.4);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0.8;
}

.chrisma-modal-header .modal-close-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.6);
}

.chrisma-modal-image {
    display: block;
    width: min(70vw, 70vh);
    height: min(70vw, 70vh);
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 4px 40px rgba(0,0,0,0.3);
}

.prayer-names-type {
    display: flex;
    gap: 8px;
}

.prayer-type-btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.prayer-type-btn.active {
    border-color: var(--primary);
    background: rgba(245, 158, 11, 0.1);
}

.prayer-type-btn#prayerTypeHealth.active {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.prayer-type-btn#prayerTypeRepose.active {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
}

.prayer-names-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prayer-name-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg, var(--stat-bg));
    color: var(--text-color);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.prayer-name-input:focus {
    border-color: var(--primary);
}

.prayer-name-input::placeholder {
    opacity: 0.5;
}

.prayer-names-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.prayer-names-submit:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.prayer-names-submit:active {
    transform: scale(0.98);
}

/* Иконка на primary-фоне пилюли: fill по умолчанию var(--primary)
   сливается с фоном — перекрашиваем в белый (#btnCreateJointPrayer) */
#btnCreateJointPrayer .ic-beads use {
    fill: #ffffff;
}

/* 🔥 Модал: Участие в совместной молитве */
#jointPrayerParticipationOverlay .prayer-names-modal {
    gap: 12px;
}

#jointPrayerParticipationOverlay input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Навигация (точки) */
.screen-nav {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 90;
    background: var(--panel-bg);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--shadow);
}

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.nav-dot.active {
    background: var(--primary);
    transform: scale(1.2);
}

.nav-dot:active {
    transform: scale(0.9);
}

/* Навигация (точки): единый bottom для лобби и круга */
.circle-screen-nav,
.lobby-screen-nav {
    bottom: 32px !important;
}

.lobby-screen-nav {
    z-index: 410;
}

/* Анимация для новых сообщений */
@keyframes newMessagePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.chat-message.new {
    animation: newMessagePulse 0.3s ease;
}

/* Темная тема для чата */
[data-theme="dark"] .chat-header {
    background: var(--secondary);
}

[data-theme="dark"] .chat-message.other {
    background: #2d3748;
}

[data-theme="dark"] .chat-input-form {
    border-top-color: #2d3748;
}

[data-theme="dark"] .prayer-name-input {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .prayer-names-modal {
    background: #1a202c;
}

[data-theme="dark"] .prayer-type-btn {
    border-color: #4a5568;
}

[data-theme="dark"] .prayer-type-btn.active {
    border-color: var(--primary);
}

/* ================= МОДАЛЬНОЕ ОКНО ЗАПИСИ - СЕТКА СЛОТОВ ================= */

/* Переключатель режима - текстовые закладки */
.schedule-mode-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 15px 0;
    padding: 10px 0;
    border-bottom: 2px solid var(--border-color);
}

.schedule-mode-tab {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 20px;
    transition: all 0.2s;
    opacity: 0.6;
    white-space: nowrap;
}

.schedule-mode-tab.active {
    opacity: 1;
    color: var(--primary);
    background: rgba(245, 158, 11, 0.1);
}

.schedule-mode-tab:hover:not(.active) {
    opacity: 0.8;
    background: var(--stat-bg);
}

.schedule-mode-divider {
    color: var(--border-color);
    font-size: 0.9rem;
    opacity: 0.4;
}

/* Сетка почасовых слотов - КРУЖОЧКИ */
.hourly-slots-circle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    background: var(--stat-bg);
    border-radius: 15px;
    margin: 15px 0;
}

.hourly-slot-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;  /* Размер бусины */
    height: 60px;  /* Размер бусины */
    border-radius: 50%;  /* КРУЖОЧЕК! */
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hourly-slot-circle:hover {
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.hourly-slot-circle.selected {
    border-color: var(--primary);
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.hourly-slot-circle.occupied {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af;  /* серый */
    border-color: #6b7280;
}

.hourly-slot-circle.occupied .hourly-slot-circle-time,
.hourly-slot-circle.occupied .hourly-slot-circle-status {
    color: #374151;  /* тёмно-серый текст */
}

.hourly-slot-circle.active {
    border-color: var(--bead-praying);
    background: rgba(245, 158, 11, 0.2);
}

.hourly-slot-circle-time {
    font-size: 0.7rem;  /* Чуть меньше чтобы влезло */
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}

.hourly-slot-circle-status {
    font-size: 0.5rem;  /* Очень маленький */
    margin-top: 2px;
    color: var(--text-color);
    opacity: 0.7;
    text-transform: uppercase;
}

/* Темная тема для слотов-кружочков */
[data-theme="dark"] .hourly-slots-circle-grid {
    background: #1a202c;
}

[data-theme="dark"] .hourly-slot-circle {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .hourly-slot-circle.occupied {
    background: #4a5568;
    border-color: #2d3748;
}

[data-theme="dark"] .hourly-slot-circle.occupied .hourly-slot-circle-time,
[data-theme="dark"] .hourly-slot-circle.occupied .hourly-slot-circle-status {
    color: #a0aec0;  /* светло-серый текст для темной темы */
}

/* ================= ВНЕШНЕЕ КОЛЬЦО С ЧАСОВЫМИ СЛОТАМИ ================= */

.hourly-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(209, 213, 219, 0.3);
    box-sizing: border-box;
    pointer-events: none;
}

/* Увеличиваем радиус кольца слотов */
.hourly-slot-marker {
    position: absolute;
    width: 45px;  /* Чуть увеличили с 40px */
    height: 45px;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: all 0.3s;
    pointer-events: auto;
    cursor: pointer;
    overflow: hidden;
}

.hourly-slot-marker img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Цветная аватарка для будущих записей (scheduled/occupied) — как у active */
.hourly-slot-marker.occupied img,
.hourly-slot-marker.scheduled img,
.hourly-slot-marker.active img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* Ч/Б аватарка для completed — прошедшие слоты (история дня на кольце) */
.hourly-slot-marker.completed img {
    filter: grayscale(100%) brightness(0.9);
    opacity: 0.9;
}

/* Стиль для буквы имени (когда нет аватарки) */
.hourly-slot-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 1.2rem;
}

/* 🔥 Буква для occupied/scheduled - серая (как бусина scheduled) */
.hourly-slot-marker.occupied span,
.hourly-slot-marker.scheduled span,
.hourly-slot-marker.completed span {
    color: #9ca3af;  /* серый как var(--bead-scheduled) */
    opacity: 0.8;
}

/* 🔥 Буква для active - жёлтая/оранжевая (как бусина praying) */
.hourly-slot-marker.active span {
    color: #f59e0b;  /* как var(--bead-praying) */
    opacity: 1;
}

/* 🔥 Цифра часа в пустых слотах */
.hourly-slot-hour-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.hourly-slot-marker:hover .hourly-slot-hour-number {
    opacity: 1;
    color: var(--primary);
}

/* 🔥 Буква для current-hour - с подсветкой */
.hourly-slot-marker.current-hour span {
    text-shadow: 0 0 5px rgba(245, 158, 11, 0.5);
}


/* Текущий час — приглушённая золотая обводка (день) */
.hourly-slot-marker.current-hour {
    border: 3px solid #d9a441 !important;  /* 🔥 Мягкое золото вместо яркого #ffd700 */
    filter: grayscale(0) !important;
    background: rgba(245, 158, 11, 0.12) !important;
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 1 !important;
    z-index: 15;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2) !important;
}

/* Для тёмной темы — ещё приглушённее, чтобы не слепило */
[data-theme="dark"] .hourly-slot-marker.current-hour {
    border: 3px solid #9c6f2e !important;  /* 🔥 Приглушённый охристо-янтарный в ночи */
    filter: grayscale(0) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 1 !important;
    z-index: 15;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.18) !important;
}
[data-theme="dark"] .hourly-slot-marker.current-hour span {
    text-shadow: 0 0 4px rgba(245, 158, 11, 0.3);  /* 🔥 Мягче свечение буквы */
}


/* Подсветка текущего часа */
/* .hourly-slot-marker.current-hour {
    border-color: var(--bead-praying);
    border-width: 3px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    opacity: 1;
} */

.hourly-slot-marker:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.hourly-slot-marker.active {
    border-color: var(--bead-praying);
    background: rgba(245, 158, 11, 0.2);
    opacity: 1;
}

.hourly-slot-marker.occupied {
    border-color: var(--bead-scheduled);
    background: rgba(156, 163, 175, 0.3);
}

/* Прошедший слот (история дня): ч/б аватарка, серая обводка, не кликается */
.hourly-slot-marker.completed {
    border-color: #9ca3af;
    background: rgba(156, 163, 175, 0.15);
    opacity: 0.6;
    cursor: default;
}

/* 🔥 Пустые маркеры (нет записи на час) */
.hourly-slot-marker.empty {
    background: rgba(128, 128, 128, 0.15);
    border-color: rgba(128, 128, 128, 0.3);
    opacity: 0.7;
    cursor: pointer;
}

.hourly-slot-marker.empty:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--primary);
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

.hourly-slot-marker.empty .hourly-slot-hour-number {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.6;
}

.hourly-slot-marker.empty:hover .hourly-slot-hour-number {
    opacity: 1;
    color: var(--primary);
}

/* Прошлый ПУСТОЙ час (в половине суток наступил и не был занят) — цифра
   приглушена, но клик доступен: запись на «второй круг» (+12 часов, как у
   следа completed). Стиль совмещается с .history-bookable ниже. */
.hourly-slot-marker.past-empty {
    background: rgba(128, 128, 128, 0.08);
    border-color: rgba(128, 128, 128, 0.2);
    opacity: 0.5;
    cursor: pointer;
}

.hourly-slot-marker.past-empty:hover {
    background: rgba(128, 128, 128, 0.08);
    border-color: rgba(128, 128, 128, 0.2);
    transform: none;
    opacity: 0.5;
}

.hourly-slot-marker.past-empty .hourly-slot-hour-number {
    color: var(--text-color);
    opacity: 0.45;
}

/* «Второй круг» — след любого прошлого часа (пустого или completed), по
   нему можно записаться на +12 часов; для дневных позиций результат
   уходит в утро следующего дня. Показываем, что клик доступен. */
.hourly-slot-marker.history-bookable {
    cursor: pointer;
}

.hourly-slot-marker.history-bookable:hover {
    border-color: #9ca3af;
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.85;
}

/* Темная тема для кольца */
[data-theme="dark"] .hourly-ring {
    border-color: rgba(75, 85, 99, 0.3);
}

[data-theme="dark"] .hourly-slot-marker {
    background: #1f2937;
    border-color: #374151;
}

/* ================= МОЛИТВЕННАЯ ПАМЯТЬ ================= */
/* Бусина круга: вторая форма молитвы («Молитвенная память») — зелёный
   ободок + бейдж с круглыми часами (внимание к Богу в течение дня). */
.bead.memory {
    border: 3px solid #22c55e !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 14px rgba(34, 197, 94, 0.5) !important;
}
.bead .bead-memory-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 30%;
    height: 30%;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: none;
}
.bead .bead-memory-badge svg {
    width: 72%;
    height: 72%;
}
[data-theme="dark"] .bead.memory {
    border-color: #16a34a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(22, 163, 74, 0.45) !important;
}
[data-theme="dark"] .bead .bead-memory-badge {
    border-color: #1f2937;
}

/* FAB в режиме молитвенной памяти: зелёный ободок с РЕДКИМ миганием
   (×3 медленнее «внимательного» индикатора — память не мельтешит). */
.fab.memory {
    border-color: #22c55e;
    animation: fabMemory 6s ease-in-out infinite;
}
[data-theme="dark"] .fab.memory { border-color: #16a34a; }
@keyframes fabMemory {
    0%, 100% { box-shadow: 0 6px 18px var(--shadow), 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 6px 18px var(--shadow), 0 0 0 9px rgba(34, 197, 94, 0); }
}
/* Предпросмотр удержания кнопки длительности (до старта ×3) */
.fab-menu-item.dur.memory-prep {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

/* Бейдж ×3 на кнопках длительности FAB-меню: подсказка «удержи —
   молитвенная память ×3» */
.fab-menu-item.dur {
    position: relative;
}
.fab-menu-item.dur .dur-x3 {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #16a34a;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    padding: 1px 4px;
    line-height: 1.2;
}
[data-theme="dark"] .fab-menu-item.dur .dur-x3 {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(74, 222, 128, 0.4);
}

/* ================= МОЛИТВЕННЫЙ ДНЕВНИК ================= */
.diary-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px 20px;
    min-height: 100vh;
    gap: 12px;
    overflow-y: auto;
}

/* Заголовок с навигацией по датам */
.diary-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.diary-date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    min-width: 160px;
}

.diary-date-nav {
    background: none;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.diary-date-nav:active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Статистика за день */
.diary-stats {
    width: 100%;
}

.diary-stat-row {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.diary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 16px;
    min-width: 100px;
}

.diary-stat-icon {
    font-size: 1.3rem;
}

.diary-stat-label {
    font-size: 0.7rem;
    color: #666;
    margin: 2px 0;
}

.diary-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

/* Среднее время чтения 100 молитв */
.diary-avg-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.diary-avg-time-icon {
    font-size: 1.2rem;
}

.diary-avg-time-text {
    font-size: 0.85rem;
    color: #ccc;
    font-style: italic;
    line-height: 1.4;
}

/* Пакетный ввод */
.diary-batch-section {
    width: 100%;
    max-width: 350px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
}

.batch-label {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    margin-bottom: 6px;
}

.batch-buttons-row {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.batch-btn {
    flex: 1;
    padding: 10px 4px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.batch-btn:active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(0.95);
}

/* Круглый счётчик-кнопка + панель управления */
.prayer-counter-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Левая панель: цели, сброс, таймер — в столбик */
.counter-controls-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
    min-width: 120px;
}

/* Правая панель: круглая кнопка по центру */
.counter-button-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.counter-tap-btn.counter-ring-btn {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    background: var(--panel-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.1s ease;
    touch-action: manipulation;
    overflow: hidden;
}

.counter-tap-btn.counter-ring-btn:active {
    background: rgba(245, 158, 11, 0.18);
}

.counter-tap-btn.counter-ring-btn:focus {
    outline: none;
    box-shadow: none;
}

/* SVG внутри кнопки */
.counter-tap-btn.counter-ring-btn .counter-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.counter-ring-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
    opacity: 0.3;
}

.counter-ring-progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 0.3s ease;
}

.counter-value {
    position: relative;
    z-index: 2;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: -15px;
}

.counter-goal {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    color: #666;
    margin-top: -10px;
}

.counter-goal-selector {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.counter-goal-selector .goal-btn {
    text-align: center;
}

.goal-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.goal-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.goal-btn:active {
    transform: scale(0.95);
}

/* Кнопка сброса */
.counter-reset-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #10b981;
    background: #10b981;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.counter-reset-btn:active {
    transform: scale(0.9);
    background: #059669;
}

/* Секундомер */
.counter-timer {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    text-align: center;
}

/* Скрыть нижнюю панель на экране дневника */
body.diary-screen .bottom-bar {
    display: none !important;
}

/* Скрыть небо и слоты на экране дневника */
body.diary-screen .heavenly-ring {
    display: none !important;
}

body.diary-screen .hourly-ring-container {
    display: none !important;
}

body.diary-screen .chrisma-image {
    display: none !important;
}

body.diary-screen .room-label {
    display: none !important;
}

body.diary-screen .general-chat-unread-badge-wrapper {
    display: none !important;
}

body.diary-screen .plaques-stack {
    display: none !important;
}

/* Темная тема для дневника */
[data-theme="dark"] .diary-stat {
    background: #16213e;
    border-color: #2d3748;
}

[data-theme="dark"] .diary-stat-label {
    color: #a0aec0;
}

[data-theme="dark"] .counter-goal {
    color: #a0aec0;
}

[data-theme="dark"] .batch-btn {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .goal-btn {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .counter-tap-btn.counter-ring-btn {
    background: #16213e;
}

/* ==================== СОВМЕСТНАЯ МОЛИТВА ==================== */

/* Кнопки длительности совместной молитвы */
.joint-duration-btn {
    transition: all 0.2s;
}

.joint-duration-btn.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* Скрытие плашек совместной молитвой (византийская/каноническая;
   у закреплённых/просьб — свои правила .hidden) */
.byzantine-hour-plaque.hidden,
.canonical-hour-plaque.hidden {
    display: none;
}

/* Объявление о совместной молитве — первая строка стека плашек.
   «Предстоящая» — в потоке (стек растёт, позицию считает plaques-layout.js).
   «Идёт» (.active) — фиксировано под кругом, остальные плашки скрыты. */
.joint-prayer-announcement {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-color);
    /* Контент слева — эмодзи не «ездит» между свёрнутым/развёрнутым видами
       (единообразно с остальными плашками) */
    text-align: left;
    animation: joint-prayer-pulse 2s ease-in-out infinite;
    box-sizing: border-box;
}

/* Свёрнутая (единый механизм плашек): одна строка — заголовок.
   Горизонтальные отступы и колонка иконки — как в развёрнутом виде,
   чтобы текст не «гулял» влево при сворачивании. */
.joint-prayer-announcement.plaque-collapsed {
    padding: 5px 16px;
}
.joint-prayer-announcement.plaque-collapsed .joint-prayer-countdown,
.joint-prayer-announcement.plaque-collapsed .joint-prayer-disclaimer { display: none; }

/* Единообразие с остальными плашками: иконка в фикс-колонке, текст справа */
.joint-prayer-announcement .jp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}
.joint-prayer-announcement .jp-ico {
    flex: 0 0 auto;
    width: 34px;
    text-align: center;
    font-size: 24px;
    line-height: 1;
    margin-top: 1px;
}
.joint-prayer-announcement .jp-body {
    flex: 1 1 auto;
    min-width: 0;
}
.joint-prayer-announcement .jp-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 26px;      /* вертикальный центр относительно иконки */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.joint-prayer-announcement.plaque-collapsed .jp-ico { font-size: 20px; width: 34px; }
.joint-prayer-announcement.plaque-collapsed .jp-title { line-height: 22px; }

/* ===== Единый формат СВЁРНУТОЙ плашки (образец — плашка совместной молитвы) =====
   Во всех плашках в свёрнутом виде: иконка в фикс-колонке БЕЗ кружка + заголовок
   в одну строку с многоточием, компактные отступы, тема — только в фоне карточки.
   Правила завязаны на .plaque-collapsed / .collapsed, поэтому развёрнутый вид
   (кружок-иконка, полная карточка) не меняется. */
.byzantine-hour-plaque.plaque-collapsed,
.canonical-hour-plaque.plaque-collapsed,
.pinned-message-card.active.collapsed,
.prayer-request-card.active.collapsed {
    padding: 5px 16px;
}

.byzantine-hour-plaque.plaque-collapsed .byzantine-plaque-narrow,
.canonical-hour-plaque.plaque-collapsed .canonical-plaque-narrow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

/* Иконка: убираем кружок, фикс-колонка как у плашки совм. молитвы (.jp-ico) */
.byzantine-hour-plaque.plaque-collapsed .byzantine-plaque-icon,
.canonical-hour-plaque.plaque-collapsed .canonical-plaque-icon,
.pinned-message-card.active.collapsed .pinned-plaque-icon,
.prayer-request-card.active.collapsed .prayer-plaque-icon {
    width: 34px;
    height: auto;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
    text-align: center;
    font-size: 22px;
    line-height: 1;
    margin-top: 1px;
}

/* canonical: <img> вместо эмодзи — держим аккуратным в колонке */
.canonical-hour-plaque.plaque-collapsed .canonical-plaque-icon img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* Заголовок: одна строка, многоточие, компактный размер (.jp-title) */
.byzantine-hour-plaque.plaque-collapsed .byzantine-plaque-header,
.canonical-hour-plaque.plaque-collapsed .canonical-plaque-header,
.pinned-message-card.active.collapsed .pinned-plaque-title,
.prayer-request-card.active.collapsed .prayer-plaque-title {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Цвет заголовка = тема плашки (кружок-иконку убрали, цвет несёт тему) */
.byzantine-hour-plaque.byzantine-day.plaque-collapsed .byzantine-plaque-header { color: #fb923c; }
.byzantine-hour-plaque.byzantine-night.plaque-collapsed .byzantine-plaque-header { color: #a78bfa; }
.canonical-hour-plaque.plaque-collapsed .canonical-plaque-header { color: #f59e0b; }

/* Закреплённые / просьбы: снимаем «блочную» высоту (было min-height:60px),
   выравниваем по верху, как у плашки совм. молитвы */
.pinned-message-card.active.collapsed,
.prayer-request-card.active.collapsed {
    min-height: 0;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .joint-prayer-announcement.active {
        position: fixed;
        bottom: auto;
        top: calc(50% + 270px);
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 800px;
        z-index: 96;
    }
}

@keyframes joint-prayer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.joint-prayer-text {
    font-weight: 600;
    margin-bottom: 4px;
}

.joint-prayer-countdown {
    font-size: 0.85rem;
    opacity: 0.8;
}

.joint-prayer-disclaimer {
    font-size: 0.75rem;
    opacity: 0.6;
    font-style: italic;
    margin-top: 4px;
}

/* Красное небо при совместной молитве */
.heavenly-ring.joint-active {
    --heavenly-color: #ef4444;
}

.heavenly-ring.joint-active .neon-circle {
    stroke: #ef4444 !important;
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6)) drop-shadow(0 0 30px rgba(239, 68, 68, 0.3)) !important;
}

/* Красная обводка для бусин при совместной молитве */
.bead.joint-session {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.6), 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

.canonical-hour-plaque {
    display: none;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
}

.canonical-plaque {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.canonical-plaque-toggle-icon {
    font-size: 0.65rem;
    opacity: 0.5;
    margin-left: 4px;
    transition: transform 0.2s;
}

.canonical-plaque-text {
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.85;
    margin-top: 8px;
}

.canonical-plaque-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.canonical-plaque-body {
    flex: 1;
    min-width: 0;
}

.canonical-plaque-header {
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.canonical-plaque-brief {
    font-style: italic;
    opacity: 0.9;
    font-size: 0.85rem;
}

.canonical-plaque-psalms {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 2px;
}

.canonical-plaque-timer {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 4px;
    color: #f59e0b;
}

/* ================= ВИЗАНТИЙСКИЙ ЧАС (плашка) ================= */
.byzantine-hour-plaque {
    display: none;
    padding: 12px 14px;
    border-radius: 12px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-color);
    width: 100%;
    box-sizing: border-box;
}

.byzantine-hour-plaque.byzantine-day {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(251, 146, 60, 0.05));
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.byzantine-hour-plaque.byzantine-night {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.05));
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.byzantine-plaque {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.byzantine-plaque-narrow {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.byzantine-plaque-narrow .byzantine-plaque-header {
    margin-bottom: 0;
}

.byzantine-plaque-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.byzantine-plaque-icon.byzantine-day {
    background: rgba(251, 146, 60, 0.15);
}

.byzantine-plaque-icon.byzantine-night {
    background: rgba(167, 139, 250, 0.15);
}

.byzantine-plaque-body {
    flex: 1;
    min-width: 0;
}

.byzantine-plaque-header {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.byzantine-plaque-header.byzantine-day {
    color: #fb923c;
}

.byzantine-plaque-header.byzantine-night {
    color: #a78bfa;
}

.byzantine-plaque-prayer {
    font-style: italic;
    opacity: 0.9;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ================= КАНОНИЧЕСКИЙ ЧАС (свёрнутая плашка) ================= */
.canonical-plaque-narrow {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.canonical-plaque-narrow .canonical-plaque-header {
    white-space: nowrap;
    margin-bottom: 0;
}

/* ================= УДАЛЕНИЕ OUTLINE И TAP HIGHLIGHT ================= */
/* Убираем outline для элементов при фокусе */
.hourly-slot-marker:focus,
.bead:focus,
button:focus,
.btn:focus,
.hourly-slot-circle:focus,
.general-chat-unread-badge:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Убираем подсветку при тапе и запрет выделения */
.hourly-slot-marker,
.bead,
button,
.btn,
.hourly-slot-circle,
.general-chat-unread-badge {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Убираем эффекты при нажатии (active) */
.hourly-slot-marker:active,
.bead:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Анимация пульсации счётчика онлайн */
.online-pulse {
    animation: onlinePulse 0.5s ease;
}

@keyframes onlinePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #ffaa00; }
    100% { transform: scale(1); }
}

/* ================= ДЕСКТОП: стек плашек слева от круга ================= */
@media (min-width: 769px) {
    .plaques-stack {
        left: 20px;
        right: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: min(300px, calc(50vw - 300px));
        gap: 6px;
    }
    .joint-prayer-announcement {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
    }
}

/* ================= КОМНАТЫ ================= */
.room-selector {
    position: relative;
    flex-shrink: 0;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    padding-left: 4px;
}

.room-selector-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: background 0.2s;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
}

.room-selector-btn:hover {
    background: var(--hover-bg);
}

.room-selector-btn:hover {
    background: var(--hover-bg);
}

.room-selector-arrow {
    font-size: 0.6rem;
    opacity: 0.6;
}

.room-menu {
    position: fixed;
    top: 60px;
    right: 10px;
    width: 280px;
    max-height: 400px;
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow: hidden;
    display: none;
}

.room-menu.active {
    display: block;
    animation: slideDown 0.2s ease-out;
}

.room-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.room-menu-actions {
    display: flex;
    gap: 4px;
}

.room-menu-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.room-menu-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Лупа и ключ смотрят в одну сторону: 🔍 дефолтно «носится» влево-вниз,
   ключ смотрит влево — зеркалим лупу, чтобы пара смотрела одинаково. */
.flip-x { transform: scaleX(-1); }

.room-join-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.room-join-btn:hover {
    transform: scale(1.15);
}

.public-rooms-list {
    max-height: 350px;
    overflow-y: auto;
}

#publicRoomsSearch {
    margin-bottom: 8px;
}

.public-rooms-list .room-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.public-rooms-list .room-list-item:hover {
    background: var(--hover-bg);
}

.public-rooms-list .room-list-item.active {
    background: var(--primary-light);
    font-weight: 600;
}

.room-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}

.room-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
}

.room-list-item:hover {
    background: var(--hover-bg);
}

.room-list-item.active {
    background: var(--primary-light);
    font-weight: 600;
}

.room-list-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.room-list-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-list-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 10px;
}

.room-item-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.room-action-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.room-action-btn:hover {
    background: var(--hover-bg);
}

#editRoomModal textarea.prayer-name-input {
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

#editRoomModal select.prayer-name-input {
    cursor: pointer;
    appearance: auto;
}

#editRoomDeleteBtn {
    margin-top: 8px;
}

#editRoomDeleteBtn:hover {
    background: #e74c3c !important;
    color: white !important;
}

/* Создание комнаты */
.room-type-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.radio-label:hover {
    background: var(--hover-bg);
}

.radio-label input[type="radio"] {
    accent-color: var(--primary);
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: var(--primary);
}

textarea.form-input {
    resize: vertical;
    min-height: 40px;
    font-family: inherit;
}

/* Адаптация для мобильных */
@media (max-width: 480px) {
    .room-selector-btn {
        max-width: 110px;
        font-size: 0.8rem;
        padding: 6px 6px;
    }
    .room-menu {
        width: 280px;
        right: 10px;
        left: auto;
    }
}

@media (max-width: 380px) {
    .room-selector-btn {
        max-width: 90px;
        font-size: 0.75rem;
    }
}

/* ================= МОЛИТВОСЛОВ (PRAYER READER) ================= */

.prayer-reader-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s;
    /* Запрет выделения текста: при листании страниц нативный селектор
       подсвечивает весь блок синим и мешает свайпам (особенно в WebView). */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.prayer-reader-overlay.hidden {
    display: none;
}

/* Тёмная (по умолчанию) */
.prayer-reader-overlay,
.prayer-reader-overlay.pr-theme-auto {
    --bg-color: #1a1a2e;
    --panel-bg: rgba(255,255,255,0.05);
    --border-color: rgba(255,255,255,0.1);
    --text-color: #e0e0e0;
    --text-secondary: #888;
    --secondary: rgba(255,255,255,0.1);
    --primary: #f59e0b;
    background: var(--bg-color);
    color: var(--text-color);
}

/* Светлая */
.prayer-reader-overlay.pr-theme-light {
    --bg-color: #f5f0e8;
    --panel-bg: rgba(0,0,0,0.03);
    --border-color: rgba(0,0,0,0.1);
    --text-color: #1a1a2e;
    --text-secondary: #888;
    --secondary: rgba(0,0,0,0.05);
    --primary: #f59e0b;
    background: var(--bg-color);
    color: var(--text-color);
}

/* Сепия */
.prayer-reader-overlay.pr-theme-sepia {
    --bg-color: #e8dcc8;
    --panel-bg: rgba(0,0,0,0.06);
    --border-color: rgba(0,0,0,0.15);
    --text-color: #2c2215;
    --text-secondary: #6b5d4e;
    --secondary: rgba(0,0,0,0.08);
    --primary: #8b6914;
    background: var(--bg-color);
    color: var(--text-color);
}

.prayer-reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 4px;
}

.prayer-reader-header-left,
.prayer-reader-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.prayer-reader-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.prayer-reader-back-btn,
.prayer-reader-close-btn,
.prayer-reader-theme-btn,
.prayer-reader-font-btn {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
}

.prayer-reader-font-btn {
    font-size: 0.85rem;
    font-weight: 700;
}

.prayer-reader-font-size {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 20px;
    text-align: center;
}

#prayerReaderBack,
.prayer-reader-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.2s, background 0.2s;
}

#prayerReaderBack:hover,
.prayer-reader-close-btn:hover {
    background: rgba(245, 158, 11, 0.12);
}

#prayerReaderBack:active,
.prayer-reader-close-btn:active {
    transform: scale(0.9);
}

.prayer-reader-back-btn:hover,
.prayer-reader-close-btn:hover,
.prayer-reader-theme-btn:hover,
.prayer-reader-font-btn:hover {
    background: rgba(128,128,128,0.15);
}

.prayer-reader-content {
    flex: 1;
    overflow: hidden;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    user-select: none;
}

.prayer-reader-page {
    line-height: 1.6;
    color: var(--text-color);
    max-height: 100%;
    overflow: hidden;
    text-align: left;
}

.pr-section-title {
    font-weight: 700;
    color: var(--primary, #f59e0b);
    font-size: 1.1em;
    display: block;
}

.pr-mode-toggle {
    display: inline-block;
    font-size: 0.8em;
    color: var(--text-secondary, #999);
    text-decoration: none;
    border-bottom: 1px dashed var(--text-secondary, #999);
    /* Ссылка живёт инлайн в строке первого ##-заголовка (pr-section-title):
       без вертикального отступа, чтобы не расти́ть строку и не ломать пагинацию. */
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.pr-mode-toggle:hover {
    color: var(--primary, #f59e0b);
    border-color: var(--primary, #f59e0b);
}

.prayer-reader-page br {
    content: '';
    display: block;
    margin: 2px 0;
}

.prayer-reader-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.prayer-reader-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.prayer-reader-nav-btn {
    background: var(--secondary);
    border: 1px solid var(--border-color);
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 6px 18px;
    border-radius: 10px;
    line-height: 1;
    transition: background 0.15s;
}

.prayer-reader-nav-btn:active {
    background: var(--primary);
    color: #fff;
    transform: scale(0.95);
}

.prayer-reader-page-num {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Каталог — единый вид со списками пользователей/комнат:
   простые строки, названия разделов без отдельного выделенного поля */
.prayer-reader-category {
    margin-bottom: 4px;
}

.prayer-reader-category-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 12px 16px 4px;
}

.prayer-reader-catalog-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: background 0.2s;
}

.prayer-reader-catalog-item .pr-item-name {
    flex: 1;
    min-width: 0;
}

.prayer-reader-catalog-item .prayer-reader-item-time {
    flex: none;
    margin-left: 8px;
}

.prayer-reader-catalog-item:hover {
    background: var(--secondary);
}

.prayer-reader-catalog-item:active {
    background: var(--primary);
    color: #fff;
}

.prayer-reader-item-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-left: auto;
}

/* ================= ЛОББИ (ГЛАВНОЕ ОКНО) ================= */
#screenLobby {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    /* 🔥 Фон лобби: тёплая текстура (background.jpg) + орнамент крестиков сверху
       (крупные редкие + мелкие частые). Чистый CSS-слой адаптивен к темам. */
    background-image:
        url('background.jpg?v=20260812-14'),
        radial-gradient(ellipse 90% 45% at 50% 0%,
            color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
        repeating-linear-gradient(90deg,
            transparent 0 44px, color-mix(in srgb, var(--primary) 4%, transparent) 44px 46px, transparent 46px 90px),
        repeating-linear-gradient(0deg,
            transparent 0 44px, color-mix(in srgb, var(--primary) 4%, transparent) 44px 46px, transparent 46px 90px),
        repeating-linear-gradient(90deg,
            transparent 0 14px, color-mix(in srgb, var(--primary) 7%, transparent) 14px 15px, transparent 15px 30px),
        repeating-linear-gradient(0deg,
            transparent 0 14px, color-mix(in srgb, var(--primary) 7%, transparent) 14px 15px, transparent 15px 30px);
    background-size: cover, auto, auto, auto, auto, auto;
    background-position: center top, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
    color: var(--text-color);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 24px;
    /* pan-y: вертикальный скролл остаётся, горизонтальные свайпы не
       перехватываются браузером (листание лобби <-> экран дня) */
    touch-action: pan-y;
}
#screenLobby.hidden { display: none; }

/* Pull-to-refresh: спиннер сверху лобби. position: fixed — держится у верха
   вьюпорта независимо от скролла, двигается вниз через transform по мере
   потягивания. Работает даже когда контента не хватает для скролла. */
.lobby-ptr {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 30;
    transform: translateY(-60px);
    opacity: 0;
}
.lobby-ptr-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid color-mix(in srgb, var(--text-secondary, #888) 30%, transparent);
    border-top-color: var(--primary, #4a90d9);
    border-radius: 50%;
}
.lobby-ptr-armed .lobby-ptr-spinner,
.lobby-ptr-loading .lobby-ptr-spinner {
    animation: lobbyPtrSpin 0.8s linear infinite;
}
.lobby-ptr-loading {
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.lobby-ptr-returning {
    transition: transform 0.25s ease, opacity 0.25s ease;
}
@keyframes lobbyPtrSpin {
    to { transform: rotate(360deg); }
}


/* Ночная тема: ночная текстура (background1.jpg) + орнамент */
[data-theme="dark"] #screenLobby {
    background-image:
        url('background1.jpg?v=20260812-14'),
        radial-gradient(ellipse 90% 45% at 50% 0%,
            color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
        repeating-linear-gradient(90deg,
            transparent 0 44px, color-mix(in srgb, var(--primary) 4%, transparent) 44px 46px, transparent 46px 90px),
        repeating-linear-gradient(0deg,
            transparent 0 44px, color-mix(in srgb, var(--primary) 4%, transparent) 44px 46px, transparent 46px 90px),
        repeating-linear-gradient(90deg,
            transparent 0 14px, color-mix(in srgb, var(--primary) 7%, transparent) 14px 15px, transparent 15px 30px),
        repeating-linear-gradient(0deg,
            transparent 0 14px, color-mix(in srgb, var(--primary) 7%, transparent) 14px 15px, transparent 15px 30px);
    background-size: cover, auto, auto, auto, auto, auto;
    background-position: center top, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
}
body.lobby-mode .top-bar,
body.lobby-mode .screens-container,
body.lobby-mode .screen-nav:not(.lobby-screen-nav),
body.lobby-mode .room-label,
body.lobby-mode #desktopScreenButtons { display: none !important; }
/* Нижняя панель в лобби не нужна: вход на плашке «Общего круга»,
   дневник и молитвослов — на плашках шапки */
body.lobby-mode .bottom-bar { display: none !important; }
body.lobby-mode #screenLobby { padding-bottom: 24px; }

.lobby-header {
    text-align: center;
    padding: 0 0 14px;
    border-bottom: 1px solid transparent;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    /* 🔥 Шапка прозрачная — фон лобби просвечивает сквозь неё */
    background: transparent;
}
/* 🔥 Топбар: логотип слева, профиль справа */
.lobby-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0 12px;
}
/* 🔥 Правая группа топбара: переключатель темы + профиль */
.lobby-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theme-toggle-lobby {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
    transition: transform 0.2s;
}
.theme-toggle-lobby:active { transform: scale(0.9); }
/* SVG-иконки переключателя темы: иконка крупная внутри исходного кружка */
.theme-ic { width: 34px; height: 34px; display: block; color: #b45309; }
[data-theme="dark"] .theme-ic { color: #fbbf24; }
.thetheme-toggle-lobby .theme-ic { width: 28px; height: 28px; }
.lobby-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.lobby-logo-img {
    width: 42px;
    height: 42px;
    padding: 3px;  /* 🔥 Кольцо-«круг» в тон аватарам (иконка не меняется) */
    background: linear-gradient(135deg, #d97706, var(--primary));  /* 🔥 Оттенок адаптируется к теме */
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);  /* 🔥 Тёплое янтарное свечение */
    flex-shrink: 0;
    transition: transform 0.2s ease;
    animation: lobbyLogoGlow 3.6s ease-in-out infinite;  /* 🔥 «Дышащее» свечение — живость без искажения */
}
.lobby-logo:active .lobby-logo-img {
    transform: scale(0.93);
}
@keyframes lobbyLogoGlow {
    0%, 100% { box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3); }
    50%      { box-shadow: 0 2px 16px rgba(245, 158, 11, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .lobby-logo-img { animation: none; }
}
[data-theme="dark"] .lobby-logo-img {
    filter: brightness(1.05);  /* 🔥 Лёгкая подсветка иконки в тёмной теме */
}
.lobby-logo-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
    text-align: left;
}
.lobby-logo-text {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text-color);
}
/* Двухцветный вордмарк: «М» — акцентная, «Круг» — цвет текста */
.lobby-logo-m {
    color: var(--primary);
}
/* Микроподпись под названием — в тон капшенам плашек лобби
   (см. .lobby-plaque-caption «Дневник») */
.lobby-logo-sub {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    opacity: 0.85;
    white-space: nowrap;
}
/* 🔥 Общие стили плашек лобби (шапка: индикаторы + календарь).
   Залиты тёплым градиентом от primary — «матовая геро-зона»,
   в отличие от нейтральных карточек комнат с рамкой ниже. */
.lobby-plaque {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 14%, var(--panel-bg)) 0%, var(--panel-bg) 85%);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 12px 14px;
    margin-bottom: 10px;
}
/* Кнопки-значки в плашках лобби (шестерёнка, дневник, молитвослов) */
.lobby-icon-btn {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    padding: 4px 2px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}
.lobby-icon-btn:active { opacity: 0.5; transform: rotate(20deg); }
/* Плашка индикаторов: горизонтальная лента + кнопка справа снизу */
.lobby-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.lobby-stat-cell {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    flex-shrink: 1;
}
.lobby-stat-icon {
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lobby-stat-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Переиспользуемая иконка «чётки» (бусины + крест) */
.ic-beads {
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
.ic-beads use { fill: var(--primary); }

/* Иконки-индикаторы лобби (дом/часы/люди) */
.ic-stat {
    width: 20px;
    height: 20px;
    display: block;
}

/* Иконки комнат (пресет-SVG / эмодзи / монограмма) */
.ic-room {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
.ic-room-emoji {
    font-size: 1.1rem;
    line-height: 1;
}

/* Пикер иконок комнаты в модалке редактирования */
.room-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    max-width: 336px;
}
.room-icon-picker-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.room-icon-picker-btn:hover { border-color: var(--primary); }
.room-icon-picker-btn.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.room-icon-picker-btn .ic-room { width: 22px; height: 22px; }
.room-icon-emoji-input {
    width: 64px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}

/* ================= ФОН КОМНАТЫ (экраны канал/круг/чат) ================= */
/* Слой фона трёх экранов комнаты: #screen0 > .feed-screen (канал), #screen1
   (круг), #screen2 (чат). Цвет и фактуру (паттерн + его шаг) JS ставит
   inline-стилями (см. _applyBgTo в modules/rooms.js). Пустые значения =
   тема по умолчанию (фон не накладывается). */

/* Строка размера фактуры: слайдер масштаба паттерна */
.room-bg-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
}
.room-bg-size-row label { flex: 1 1 auto; }
.room-bg-size-input { flex: 1 1 auto; min-width: 0; }
.room-bg-size-val {
    flex: 0 0 auto;
    min-width: 38px;
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Превью смеси в модалке настройки: цвет + паттерн задаются JS-инлайн */
.room-bg-preview {
    width: 100%;
    height: 64px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    background-repeat: repeat;
    transition: background 0.15s;
}
.room-bg-btn { font-size: 0.8rem; }
.room-bg-btn.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}
/* Строка выбора цвета: нативный пикер + сброс к теме по умолчанию */
.room-bg-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}
.room-bg-clear {
    flex: 0 0 auto;
    padding: 6px 10px;
    color: var(--text-secondary);
}
.room-bg-color-input {
    flex: 0 0 auto;
    width: 44px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.room-bg-color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.room-bg-color-input::-webkit-color-swatch {
    border-radius: 6px;
    border: none;
}
.room-bg-color-input::-moz-color-swatch {
    border-radius: 6px;
    border: none;
}
/* Мини-паттерн знака внутри кнопки-фактуры */
.room-bg-texture-demo {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-repeat: repeat;
    margin: 0 auto;
}
.room-bg-texture-demo[data-texture="dot"] {
    background-image: radial-gradient(circle, rgba(128, 118, 100, 0.35) 20%, transparent 20%);
    background-size: 14px 14px;
}
.room-bg-texture-demo[data-texture="line"] {
    background-image: linear-gradient(to bottom, rgba(128, 118, 100, 0.3) 0px, rgba(128, 118, 100, 0.3) 3px, transparent 3px);
    background-size: 14px 14px;
}
.room-bg-texture-demo[data-texture="wave"] {
    background-image: radial-gradient(circle, transparent 26%, rgba(128, 118, 100, 0.3) 30%, transparent 36%);
    background-size: 18px 18px;
}
.room-bg-texture-demo[data-texture="star"] {
    background-image:
        linear-gradient(45deg, transparent 42%, rgba(128, 118, 100, 0.32) 42% 50%, transparent 50%),
        linear-gradient(-45deg, transparent 42%, rgba(128, 118, 100, 0.32) 42% 50%, transparent 50%);
    background-size: 18px 18px, 18px 18px;
}
.room-bg-texture-demo[data-texture="snow"] {
    background-image:
        linear-gradient(0deg, transparent 48%, rgba(128, 118, 100, 0.3) 48% 52%, transparent 52%),
        linear-gradient(60deg, transparent 48%, rgba(128, 118, 100, 0.3) 48% 52%, transparent 52%),
        linear-gradient(120deg, transparent 48%, rgba(128, 118, 100, 0.3) 48% 52%, transparent 52%);
    background-size: 18px 18px, 18px 18px, 18px 18px;
}
.room-bg-texture-demo[data-texture="cross"] {
    background-image:
        linear-gradient(to bottom, transparent 46%, rgba(128, 118, 100, 0.35) 46% 54%, transparent 54%),
        linear-gradient(to right, transparent 46%, rgba(128, 118, 100, 0.35) 46% 54%, transparent 54%);
    background-size: 18px 18px, 18px 18px;
}
.room-bg-texture-demo[data-texture="floral"] {
    background-image:
        radial-gradient(circle at 33% 33%, rgba(128, 118, 100, 0.3) 12%, transparent 12%),
        radial-gradient(circle at 66% 66%, rgba(128, 118, 100, 0.3) 12%, transparent 12%);
    background-size: 18px 18px, 18px 18px;
}
/* Плашка комнаты в лобби: цветная строка-заголовок с названием комнаты.
   Название выведено первой строкой карточки (JS); заливка — фоновым
   градиентом от края до края, отрицательный margin компенсирует padding.
   Иконка, участники и остальное — ниже, на фоне темы. */
.lobby-card.room-bg-tinted {
    --room-accent: transparent;
    --room-band-h: 34px;   /* строка названия + нижний зазор */
    background-image: linear-gradient(to bottom,
        var(--room-accent) 0, var(--room-accent) var(--room-band-h),
        transparent var(--room-band-h));
}
.lobby-card.room-bg-tinted .lobby-card-name {
    margin: -10px -12px 0;   /* растянуть строку на всю ширину плашки */
    padding: 8px 12px 6px;
    background: var(--room-accent);
}
.lobby-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    transition: transform 0.15s ease;
}
.lobby-stat-value.lobby-stat-pop { animation: lobbyStatPop 0.35s ease; }
@keyframes lobbyStatPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); }
    100% { transform: scale(1); }
}
.lobby-stat-cell[data-stat="praying"] .lobby-stat-value { color: #22c55e; }
.lobby-stat-cell[data-stat="rooms"] .lobby-stat-value { color: #3b82f6; }
.lobby-stat-cell[data-stat="minutes"] .lobby-stat-value { color: var(--primary); }
.lobby-stat-cell[data-stat="users"] .lobby-stat-value { color: #9ca3af; }
.lobby-plaque-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
}
/* Подпись действия у шеврона (серый курсив, как счётчик ввода в чате) */
.lobby-plaque-caption {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.85;
}
/* Шеврон — маркер «плашка кликабельна» */
.lobby-plaque-chevron {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Плашка «Идёт: ММ:СС [Комната]» удалена — дублировала сквозной таймер FAB */

.lobby-content {
    flex-shrink: 0;
    padding-top: 14px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
.lobby-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 8px;
}
.lobby-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lobby-section-row .lobby-section-title { margin-bottom: 8px; }
.lobby-actions {
    display: flex;
    gap: 4px;
}
.lobby-section-row-rooms {
    /* Инструменты комнат (➕ создать / 🔍 найти / 🔑 по коду) прижаты к
       заголовку «Мои комнаты», а не к подвалу — их видно при любом
       количестве комнат. Оба выровнены по верхнему краю: базовый
       align-items: center прижимал текст (14px верхний margin) к низу. */
    align-items: flex-start;
}
.lobby-section-row-rooms .lobby-section-title { margin: 0 0 8px; }
/* Кнопки (20px) чуть выше текста заголовка — нижний зазор компенсируем,
   чтобы отступ до списка совпадал с «Публичные комнаты» (там 8px от текста). */
.lobby-section-row-rooms .lobby-actions { margin-bottom: 12px; }

/* ================= ЛОББИ: ИНДИКАТОР ЗАГРУЗКИ PRESENCE ================= */
/* Показывается рядом с «Мои комнаты», пока не придёт первый живой снимок
   присутствия (кто онлайн/молится). Гаснет по событию, не по таймеру. */
.lobby-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lobby-card {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px var(--shadow);
}
.lobby-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lobby-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;          /* эмодзи-иконки комнат */
    line-height: 1;
    flex-shrink: 0;
}
/* SVG/эмодзи внутри плашки — крупно и по центру вертикали */
.lobby-card-icon .ic-room { width: 32px; height: 32px; }
.lobby-card-icon .ic-room-emoji { font-size: 2rem; }
.lobby-card-title {
    flex: 1;
    min-width: 0;
}
.lobby-card-name {
    font-weight: 600;
    font-size: 0.98rem;
}
.lobby-card-info {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lobby-card-desc {
    width: 100%;
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.lobby-card-praying {
    color: var(--bead-praying);
    font-weight: 600;
}
.lobby-card-enter {
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.lobby-card-enter:active { opacity: 0.8; }
.lobby-card-beads { margin-top: 8px; }

/* Знак совместной молитвы на плашке комнаты в лобби */
.lobby-card-jp {
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    width: fit-content;
    max-width: 100%;
}
.lobby-card-jp-upcoming {
    background: rgba(212, 165, 116, 0.18);
    color: #d4a574;
    border: 1px solid rgba(212, 165, 116, 0.4);
}
.lobby-card-jp-active {
    background: rgba(220, 53, 69, 0.16);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.45);
}

/* Своя комната: вся карточка — вход (без отдельной кнопки) */
.lobby-card-clickable {
    cursor: pointer;
    transition: border-color 0.2s, transform 0.1s;
}
.lobby-card-clickable:active {
    border-color: var(--primary);
    transform: scale(0.985);
}
/* CTA-карточка входа для гостей */
.lobby-card-cta {
    border: 1px dashed var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--panel-bg));
}
.lobby-card-cta .lobby-card-icon {
    font-size: 1.6rem;
}
.lobby-card-cta .lobby-card-icon .ic-room-emoji { font-size: 1.6rem; }

.lobby-mini-beads {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.lobby-mini-bead,
.lobby-mini-more {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bead-praying);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}
.lobby-mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}
.lobby-mini-more {
    background: var(--text-secondary);
    font-size: 0.68rem;
}
/* «Молитвенная память» на плашке комнаты: тонкий зелёный ободок
   (бейдж часов не влезает в 28px мини-бусины) */
.lobby-mini-avatar.memory,
.lobby-mini-bead.memory {
    border: 2px solid #22c55e;
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.45);
}
[data-theme="dark"] .lobby-mini-avatar.memory,
[data-theme="dark"] .lobby-mini-bead.memory {
    border-color: #4ade80;
}
/* Накопительная бусина на плашке комнаты (как на круге): 9+ молящихся —
   первые 8 аватаров + бусина-«группа» с иконкой и счётчиком. */
.lobby-mini-group {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.lobby-mini-group:hover,
.lobby-mini-group:active {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lobby-mini-group-icon {
    width: 65%;
    height: 65%;
    color: #fff;
    opacity: 0.95;
    pointer-events: none;
}
.lobby-mini-group-count {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #1f2937;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.lobby-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}

/* ================= ЭКРАН ДНЯ (КАЛЕНДАРЬ) =================
   Полноэкранный православный календарь: дата, седмица/глас/пост,
   святые дня, песнопения, чтения. Сосед лобби: горизонтальный
   свайп листает лобби <-> экран дня (зациклено), вертикальный —
   смена дня. */
#screenDay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    background-image:
        url('background.jpg?v=20260812-14'),
        radial-gradient(ellipse 90% 45% at 50% 0%,
            color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
    background-size: cover, auto;
    background-position: center top, 0 0;
    background-repeat: no-repeat, repeat;
    color: var(--text-color);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 24px;
    touch-action: pan-y;
}
#screenDay.hidden { display: none; }
[data-theme="dark"] #screenDay {
    background-image:
        url('background1.jpg?v=20260812-14'),
        radial-gradient(ellipse 90% 45% at 50% 0%,
            color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
    background-size: cover, auto;
    background-position: center top, 0 0;
    background-repeat: no-repeat, repeat;
}
body.day-mode .top-bar,
body.day-mode .screens-container,
body.day-mode .screen-nav,
body.day-mode .room-label,
body.day-mode .bottom-bar,
body.day-mode #desktopScreenButtons { display: none !important; }

.day-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    /* 🔥 Шапка прозрачная, как на лобби — фон экрана просвечивает сквозь неё */
    background: transparent;
}
/* Плашка даты закреплена в шапке (как плашка статистики лобби) */
.day-date-sticky {
    padding-bottom: 12px;
}
.day-date-sticky .day-date-plaque {
    margin-bottom: 0;
}
.day-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    padding-bottom: 2px;
    color: var(--primary);
    transition: transform 0.2s;
}
.day-back-btn:active { transform: scale(0.9); }
.day-title {
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.5px;
    color: var(--primary);
    line-height: 1;
}

.day-scroll { flex: 1; padding-top: 2px; }
.day-anim { animation: dayIn 0.28s ease-out; }
@keyframes dayIn {
    from { opacity: 0.35; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Плашка даты с навигацией ◀ ▶ */
.day-date-plaque {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 14%, var(--panel-bg)) 0%, var(--panel-bg) 85%);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 14px;
    margin-bottom: 12px;
}
/* Подпись «Молитвослов ›» — на новой строке, как на плашке лобби */
.day-date-plaque > .lobby-plaque-actions {
    flex-basis: 100%;
    cursor: pointer;
}
.day-nav-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--primary);
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
    box-shadow: 0 2px 8px var(--shadow);
    transition: transform 0.15s;
}
.day-nav-btn:active { transform: scale(0.88); }
.day-date-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}
.day-date-main {
    font-size: 1.12rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.3px;
    color: var(--secondary);
    line-height: 1.3;
}
.day-date-old {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.day-church-line {
    font-size: 0.78rem;
    color: var(--primary);
    line-height: 1.4;
    margin-top: 3px;
    font-weight: 600;
}

/* Секции: святые, песнопения, чтения */
.day-section {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.day-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    opacity: 0.9;
    margin-bottom: 10px;
}
.day-saint-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    line-height: 1.4;
}
.day-saint-dot {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 0.9rem;
}
.day-saint-name {
    font-size: 0.92rem;
    color: var(--text-color);
}

/* Аккордеоны (тропари, чтения) */
.day-collapse {
    border-top: 1px solid var(--border-color);
    padding: 4px 0;
}
.day-collapse:first-of-type { border-top: none; }
.day-collapse-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: none;
    padding: 8px 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-color);
}
.day-collapse-title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}
.day-collapse-chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s;
}
.day-collapse.open .day-collapse-chevron { transform: rotate(180deg); }
.day-collapse-body {
    display: none;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-color);
    padding: 2px 0 10px;
    white-space: pre-wrap;
    font-style: italic;
}
.day-collapse.open .day-collapse-body { display: block; }
.day-readings-summary {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.day-readings-ref {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
    font-style: normal;
}

/* ================= GLOBAL FAB ================= */
#globalFabRoot {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 64px;
    height: 64px;
    z-index: 3500;   /* выше оверлеев дневника (2000) и молитвослова (3000): таймер виден всегда */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    display: none;   /* показывает только JS (updateFab) — чтобы не мелькало при загрузке */
}

/* Скрытые legacy-элементы (для совместимости с session.js / auth.js) */
#fabLegacy.hidden { display: none !important; }

.fab {
    position: absolute;
    inset: 0;
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--panel-bg);
    color: var(--primary);
    box-shadow: 0 6px 18px var(--shadow), 0 2px 6px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.25s ease, border-color 0.25s ease;
    padding: 0;
    z-index: 4;
}
.fab:active { transform: scale(0.92); }
.fab.dragging {
    transform: scale(1.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    opacity: 0.95;
}
.fab.menu-open { transform: scale(0.94); }

.fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80%;
}
.fab-icon .ic-beads { width: 100%; height: 100%; display: block; }
/* бусины уже залиты var(--primary) внутри символа; обводка крестика — янтарная */
.fab-icon { color: var(--primary); }

.fab-timer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-color);
}
.fab-timer.seconds { font-size: 1.7rem; }

/* Активная молитва: почти прозрачный фон, видны цифры и обводка.
   Оттенок — оранжевый, свой для дневной/ночной темы. */
.fab.active {
    --fab-accent: #d9a441;                       /* 🔥 Мягкое золото (как current-hour), день */
    background: rgba(217, 164, 65, 0.12);
    border: 2px solid var(--fab-accent);
}
.fab.active .fab-icon { display: none; }
.fab.active .fab-timer {
    display: flex;
    color: #b45309;                              /* тёмно-оранжевые цифры на светлом */
}
[data-theme="dark"] .fab.active {
    --fab-accent: #9c6f2e;                       /* 🔥 Приглушённый охристо-янтарный в ночи */
    background: rgba(156, 111, 46, 0.16);
}
[data-theme="dark"] .fab.active .fab-timer {
    color: #d9a441;                              /* 🔥 Мягче янтарные цифры на тёмном */
}
.fab.urgent {
    animation: fabUrgent 1s ease-in-out infinite;
}
@keyframes fabUrgent {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 0 rgba(239,68,68,0.6); }
    50% { box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 10px rgba(239,68,68,0); }
}

/* Кнопка быстрого завершения сессии */
.fab-stop {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #ef4444;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    z-index: 5;
    transition: transform 0.15s ease;
}
.fab-stop:active { transform: scale(0.88); }

/* Меню действий ФАБ — шит (sheet.js). Внутри — прежняя сетка:
   верхний ряд иконок + нижний ряд длительностей; в APK сверху строка будильника.
   Поддерживаем оба варианта размещения (центр / низ) — переключение классом. */
.sheet-overlay--center .sheet.fab-sheet,
.sheet-overlay--bottom .sheet.fab-sheet {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 12px;
    justify-content: center;
    padding: 16px;
    overflow-y: hidden;
}

.sheet-overlay--bottom .sheet.fab-sheet {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.fab-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 70px;
    min-height: 72px;
    padding: 10px 6px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--text-color, #222);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.fab-menu-item:hover { background: rgba(127, 127, 127, 0.1); }
.fab-menu-item:active { transform: scale(0.94); background: rgba(127, 127, 127, 0.16); }
.fab-menu-ico {
    font-size: 1.7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fab-menu-item .fmi-svg {
    width: 32px;
    height: 32px;
    display: block;
}
/* «Фирменные» янтарные оттенки иконок меню (как у переключателя темы):
   день — глубже, ночь — ярче, для читаемости в обеих темах */
.fab-sheet .fmi-svg { color: #b45309; }
[data-theme="dark"] .fab-sheet .fmi-svg { color: #fbbf24; }
.fab-menu-lbl {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.01em;
}
/* Кнопки длительности — цифра + «мин» на отдельных строках */
.fab-menu-item.dur { min-height: 72px; }
.fab-menu-item.dur .dur-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--primary);
}
.fab-menu-item.dur .dur-unit {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0.82;
}

/* Будильник — только в APK; отдельная строка над сеткой */
.fab-menu-extra {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.fab-alarm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.12);
    color: var(--text-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.fab-alarm-btn:active { transform: scale(0.96); }
.fab-alarm-btn .fmi-svg { width: 20px; height: 20px; }
.fab-menu-item.dur .fab-menu-ico { color: var(--primary, #4f46e5); }
.fab-menu-item.primary {
    background: var(--primary, #4f46e5);
    color: #fff;
}

/* Меню будильника — рядом с FAB (перепозиционируем относительно корня FAB) */
#globalFabRoot > .schedule-alarm-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 72px;
    z-index: 3;
}

/* ================= ЕДИНАЯ ШАПКА (экраны 0/1/2) ================= */
/* Глобальный .top-bar — единственная шапка. Канал: без профиля, справа ✏️. */
.feed-header {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-bottom: 6px;
    text-align: right;
}
body.screen-feed #profileIcon { display: none !important; }

/* Таб «Личные» НЕ меняет шапку: цифры и название комнаты видны всегда
   (пустого места в шапке достаточно, а мелькание при переключении лишнее). */

/* Скрытая legacy-строка статистики чата (для совместимости JS) */
#chatHeaderLegacy.hidden { display: none !important; }

/* Таймер session.js внутри скрытого legacy-блока — не должен влиять на FAB */
#fabLegacy .session-timer { display: none !important; }

/* Сетка всегда 4×2 — места в окне достаточно, ничего не сжимаем */

/* ================= МОЛИТВЕННЫЕ ПРАВИЛА (ПРЕСЕТЫ) ================= */
/* Визуал совпадает с плашками Круга (градиент, иконка-круг, матрёшка-вложенность) */
.prayer-rules-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}
.prayer-rules-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.prayer-rules-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #fff);
}
.prayer-rules-add-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.prayer-rules-list { display: flex; flex-direction: column; gap: 10px; }
/* Примечание под заголовком правил — в стиле подписи .lobby-plaque-caption */
.prayer-rules-hint {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.85;
    margin: -6px 0 8px;
}
.prayer-rules-empty {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 8px 0;
}

/* Верхний уровень — обычная прижатая влево надпись (НЕ плашка) */
.preset-row { margin-bottom: 10px; }
.preset-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-tap-highlight-color: transparent;
}
.preset-row-title { flex: 1; font-size: 1rem; font-weight: 600; color: var(--text-color, #fff); }
.preset-row-count {
    font-size: 0.78rem;
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.preset-row-chevron { opacity: 0.6; font-size: 0.8rem; flex-shrink: 0; }
.preset-row-del {
    border: none;
    background: transparent;
    color: #000;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
[data-theme="dark"] .preset-row-del { color: #fff; }
.preset-row-done .preset-row-title { color: #34d399; }
.preset-row-done .preset-row-title::after { content: ' ✓'; }
/* стрелка «начать заново» — только на выполненном родительском пресете */
.preset-row-reload {
    border: none;
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
.preset-row-done .preset-row-reload { display: inline-flex; }

/* Плашка-итог по завершении правила (висит до сброса ↻) */
.preset-done-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-sizing: border-box;
}
.preset-done-banner-icon { font-size: 1.5rem; flex-shrink: 0; }
.preset-done-banner-body { flex: 1; min-width: 0; }
.preset-done-banner-title { font-weight: 700; font-size: 0.98rem; color: #10b981; }
.preset-done-banner-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 0.85rem;
    opacity: 0.92;
}
.preset-done-banner-stats b { font-weight: 700; }

/* Дочерняя карточка — плашка (как на Круге) */
.preset-sub-card {
    border-radius: 12px;
    border: 1px solid;
    padding: 12px 14px;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s, margin 0.2s, padding 0.2s;
}
/* раскрытая плашка — чуть шире (симметрично, без сдвига влево),
   внутри сверху счётчик, ниже строка прогресса */
.preset-sub-card.open {
    margin: 0 -8px;
    padding-left: 22px;
    padding-right: 22px;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Дочерние плашки выровнены по тому же левому краю, что и названия,
   отступ не нужен (они уже выделяются цветом) */
.preset-cards {
    margin-top: 8px;
    padding-left: 0;
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ссылка «Источник: молитвослов» под заголовком раскрытого пресета */
.preset-source-link {
    display: inline-block;
    margin: 2px 0 8px;
    font-size: 0.82rem;
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.preset-source-link:active { opacity: 0.7; }

/* Уровень вложенности — сотница / этап: компактный заголовок текстом */
.preset-group { margin-top: 6px; }.preset-group:first-child { margin-top: 0; }
.preset-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px 4px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.preset-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary, #888);
}
.preset-group-chevron { opacity: 0.6; font-size: 0.75rem; flex-shrink: 0; }
.preset-group-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plaque-head {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.plaque-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.preset-sub-card .plaque-icon { width: 32px; height: 32px; font-size: 1rem; }
.plaque-body { flex: 1; min-width: 0; }
.plaque-title { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
/* мелкая подпись в плашке — напр. тип поклонов */
.plaque-note {
    font-size: 0.78rem;
    line-height: 1.2;
    margin-top: 2px;
    opacity: 0.7;
    font-style: italic;
}
/* пояснительный текст правила — в раскрытой плашке */
.plaque-info {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.82rem;
    line-height: 1.35;
    opacity: 0.92;
}
.plaque-sub { font-size: 0.8rem; opacity: 0.8; margin-top: 2px; }
.plaque-chevron { opacity: 0.6; font-size: 0.8rem; flex-shrink: 0; }
.plaque-count {
    font-size: 0.78rem;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.plaque-check { width: 22px; height: 22px; cursor: pointer; flex-shrink: 0; }
/* стрелка «начать заново» рядом с чекбоксом */
.plaque-reload {
    border: none;
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preset-sub-card:not(.preset-sub-done) .plaque-reload { display: none; }
/* цель-бейдж виден только в свёрнутой плашке (одна строка) */
.plaque-goal {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.preset-sub-card.open .plaque-goal { display: none; }
/* строка «счёт / цель» в раскрытой плашке — обычный текст (как plaque-note),
   цифры обновляются наравне с кольцом-счётчиком */
.preset-progress-note { margin-top: 4px; }
.plaque-del {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
.preset-card-done .plaque-title::after { content: ' ✓'; }
/* у выполненной плашки название остаётся обычным — достаточно чека */
.preset-card-done { border-color: rgba(16, 185, 129, 0.5) !important; }
.preset-sub-done { border-color: rgba(16, 185, 129, 0.45) !important; }

.preset-sub-counter { padding: 2px 0 6px; display: flex; justify-content: center; }

/* Темы окраски (как на Круге) */
.theme-orange {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.12), rgba(251, 146, 60, 0.05));
    border-color: rgba(251, 146, 60, 0.3);
}
.theme-orange .plaque-icon { background: rgba(251, 146, 60, 0.2); }
.theme-orange .plaque-title { color: #fb923c; }

.theme-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.3);
}
.theme-blue .plaque-icon { background: rgba(59, 130, 246, 0.2); }
.theme-blue .plaque-title { color: #60a5fa; }

.theme-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.05));
    border-color: rgba(16, 185, 129, 0.3);
}
.theme-green .plaque-icon { background: rgba(16, 185, 129, 0.2); }
.theme-green .plaque-title { color: #34d399; }

.theme-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.05));
    border-color: rgba(139, 92, 246, 0.3);
}
.theme-purple .plaque-icon { background: rgba(139, 92, 246, 0.2); }
.theme-purple .plaque-title { color: #a78bfa; }

.theme-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.05));
    border-color: rgba(245, 158, 11, 0.3);
}
.theme-amber .plaque-icon { background: rgba(245, 158, 11, 0.2); }
.theme-amber .plaque-title { color: #f59e0b; }

.theme-teal {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.05));
    border-color: rgba(20, 184, 166, 0.3);
}
.theme-teal .plaque-icon { background: rgba(20, 184, 166, 0.2); }
.theme-teal .plaque-title { color: #2dd4bf; }

.theme-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.3);
}
.theme-red .plaque-icon { background: rgba(239, 68, 68, 0.2); }
.theme-red .plaque-title { color: #f87171; }

/* Редактор карточек в модалке создания */
.preset-draft-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 34vh; overflow-y: auto; }
.preset-draft-empty { font-size: 13px; color: var(--text-secondary, #888); }
/* Плашка черновика — тот же вид, что в готовых пресетах; крестик справа */
.preset-draft-card { display: flex; flex-direction: column; }
.preset-draft-card .plaque-head { cursor: default; }
.preset-draft-card .plaque-goal {
    margin-left: auto;
    color: var(--text-color, #333);
    background: rgba(127, 127, 127, 0.15);
}
.preset-draft-del {
    border: none;
    background: rgba(127, 127, 127, 0.18);
    color: var(--text-color, #333);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}
.preset-draft-del:active { background: rgba(239, 68, 68, 0.3); color: #fff; }

/* Билдер: две колонки — слева молитвы, справа количество */
.preset-builder { margin-top: 6px; }
.builder-cols {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.builder-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.builder-cap { font-size: 0.8rem; opacity: 0.75; margin: 10px 0 4px; color: var(--text-color, #333); }
.builder-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 30vh;
    overflow-y: auto;
}
.builder-chip {
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--stat-bg, #f9fafb);
    color: var(--text-color, #333);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
.builder-ico { flex-shrink: 0; font-size: 1rem; }
.builder-name { flex: 1; min-width: 0; }
.builder-chip.qty { justify-content: center; text-align: center; font-weight: 600; }
.builder-chip.sel { background: #3b82f6; border-color: #3b82f6; color: #fff; }
#builderQtyInput { margin-top: 8px; }

/* Счётчик внутри плашки переиспользует .counter-* классы */
.preset-card-counter .counter-controls-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2px;
}
.preset-card-counter .counter-timer {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}
.preset-card-counter .counter-reset-btn {
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
}

/* 🔥 Индикатор длины сообщения чата (лимит 700) */
.message-length-indicator {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 2;
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted, #999);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.message-length-indicator.visible { opacity: 1; }
.message-length-indicator.warning { color: #e0a800; }
.message-length-indicator.danger { color: #e5484d; }

/* ================= PWA ONBOARDING (чек-лист + install-баннер) ================= */
.pwa-onboard-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 14%, var(--panel-bg)) 0%, var(--panel-bg) 85%);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.pwa-onboard-card .po-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--primary, #f59e0b);
}

.pwa-onboard-card .po-close {
    background: none;
    border: none;
    color: var(--text-secondary, #999);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 2px 6px;
}

.pwa-onboard-card .po-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.pwa-onboard-card .po-state {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.pwa-onboard-card .po-state.ok   { background: color-mix(in srgb, #4caf50 25%, transparent); color: #4caf50; }
.pwa-onboard-card .po-state.wait { background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--primary, #f59e0b); }
.pwa-onboard-card .po-state.warn { background: color-mix(in srgb, #e67e22 25%, transparent); color: #e67e22; }
.pwa-onboard-card .po-state.off  { background: color-mix(in srgb, var(--text-secondary) 20%, transparent); color: var(--text-secondary, #999); }

.pwa-onboard-card .po-btn {
    margin-left: auto;
    background: var(--primary, #f59e0b);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.pwa-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.pwa-install-banner .po-install-txt { flex: 1; }

.pwa-install-banner .po-install-yes {
    margin-left: 0;
}

/* ============================================================
   🔔 ЦЕНТР УВЕДОМЛЕНИЙ (modules/notifications-center.js)
   ============================================================ */

/* Кнопка-колокольчик: рядом с профилем во всех шапках */
.notif-bell-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s;
    flex-shrink: 0;
    position: relative;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    color: inherit;
}

.notif-bell-btn:active { transform: scale(0.95); }

.notif-bell-btn.has-unread {
    animation: notif-bell-pulse 2s ease-in-out infinite;
}

@keyframes notif-bell-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    50% { box-shadow: 0 2px 12px rgba(255,170,0,0.55); }
}

/* Бейдж числа непрочитанных (как .message-badge у профиля) */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Модалка списка */
.sheet.notifications-modal-inner {
    background: var(--bg-color, #fff);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.notifications-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
    flex-shrink: 0;
}

.notifications-modal-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color);
}

.notifications-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-mark-all-btn {
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
}

.notif-mark-all-btn:active { background: rgba(0,0,0,0.06); }

.notifications-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
    flex: 1;
}

.notif-empty {
    text-align: center;
    padding: 32px 16px;
    opacity: 0.6;
    font-size: 0.9rem;
    color: var(--text-color);
}

.notif-item {
    padding: 10px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}

.notif-item:active { background: rgba(0,0,0,0.05); }

.notif-item.unread {
    background: rgba(42, 119, 255, 0.07);
    border-left-color: var(--primary, #2a7);
}

.notif-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.notif-item-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-color);
}

.notif-item-time {
    font-size: 0.7rem;
    opacity: 0.6;
    white-space: nowrap;
    color: var(--text-color);
}

.notif-item-body {
    font-size: 0.8rem;
    opacity: 0.85;
    color: var(--text-color);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item.unread .notif-item-body { opacity: 1; }

/* Тост in-app уведомления (безопасный textContent, без innerHTML) */
.notif-toast {
    position: fixed;
    top: calc(var(--top-bar-height, 54px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.35;
    z-index: 3000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    word-break: break-word;
}

.notif-toast.visible { opacity: 1; }

/* Десктоп: компактнее */
@media (min-width: 768px) {
    .notif-bell-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* ================= DIALOGS (модуль dialogs.js — замена alert/confirm/prompt) ================= */
.dialog-card {
    background: var(--panel-bg);
    border-radius: 20px;
    padding: 22px;
    width: 90%;
    max-width: 380px;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: inherit;
}

.dialog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dialog-title-text {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
}

.dialog-message {
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-line;
    opacity: 0.92;
    word-break: break-word;
}

.dialog-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #444);
    background: var(--bg-secondary, #222);
    color: var(--text-color);
    font-size: 15px;
    font-family: inherit;
}

.dialog-input:focus {
    outline: none;
    border-color: var(--primary, #f59e0b);
}

.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.dialog-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.2s;
}

.dialog-btn:active { transform: scale(0.97); }

.dialog-btn-cancel {
    background: rgba(128,128,128,0.18);
    color: var(--text-color);
}

.dialog-btn-ok {
    /* Аутентичный янтарный акцент программы (--primary #f59e0b / #ed8936),
       а не зелёный фолбэк несуществующей --accent-color. */
    background: var(--primary, #f59e0b);
    color: #fff;
}

.dialog-btn-ok.dialog-danger {
    background: #d9534f;
    color: #fff;
}

/* Тост notify() (success/ошибка) */
.app-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 12000;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

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

.app-toast.success { border: 1px solid rgba(76,217,100,0.55); }
.app-toast.error { border: 1px solid rgba(255,107,107,0.6); }

/* ================= ШИТЫ-ФОРМЫ (этап 2: профиль, вход, комнаты) ================= */
/* Селектор (0,3,0) — перекрывает паддинги вариантов .sheet-overlay--top/--bottom */
.sheet-overlay--top .sheet.sheet--form {
    padding: calc(14px + env(safe-area-inset-top)) 16px 18px;
    text-align: center;
}

/* Кнопка «＋» в лобби — янтарная (var(--primary)), размер строки заголовка
   «Мои комнаты» (0.95rem ≈ 20px), чтобы не бросалась в глаза */
.rooms-add-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Единая форма «Комнаты» */
.rooms-sheet-header,
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rooms-sheet-title,
.sheet-title {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: left;
}

.rooms-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.rooms-toolbar .form-input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.rooms-tool-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-color);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.rooms-tool-btn:hover { background: var(--hover-bg); }
.rooms-tool-btn.active { background: var(--primary); border-color: transparent; color: #fff; }

.rooms-panel-hint {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 10px;
    text-align: left;
}

.rooms-back-link {
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

#roomsPanelCode .prayer-name-input { margin-bottom: 10px; }
.rooms-sheet .public-rooms-list { text-align: left; }

/* ================= ЭТАП 3: шиты чтения (справка, welcome) ================= */
.sheet-overlay--bottom .sheet.help-modal-content,
.sheet-overlay--bottom .sheet.welcome-modal-content {
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
}

/* ================= ЭТАП 3+: правки по фидбеку ================= */
/* Нижний вариант формы-шита (запись на молитву) */
.sheet-overlay--bottom .sheet.sheet--form {
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
}

/* Пользователи комнаты — верхний шит (бывший fullscreen-панель) */
.sheet-overlay--top .sheet.users-sheet {
    padding: calc(14px + env(safe-area-inset-top)) 16px 18px;
}

#usersListFullscreenContent {
    height: auto;
    max-height: calc(86vh - 90px);
}

/* Подсказка при первом создании комнаты («вы станете админом») */
.rooms-create-hint {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--primary, #f59e0b);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-color);
    text-align: left;
    margin-bottom: 12px;
}

.rooms-create-hint-title {
    font-weight: 700;
    margin-bottom: 4px;
}

/* ============ ОК (Одноклассники): плавающий овал в правом верхнем углу ============ */
/* У ОК нет верхней панели как у VK (с крестиком/меню) — вместо неё поверх
   правого верхнего угла приложения висит плавающий овал. Он перекрывает
   иконку профиля и крестики закрытия прижатых к верху/полноэкранных окон.
   Класс platform-ok ставится детектом в index.html/app.js на <html>. */
.platform-ok {
    /* Ширина овала по замеру (~компактная кнопка темы + иконка профиля) */
    --ok-right-reserve: 96px;
}

/* Единая шапка 0/1/2: правая группа (профиль, индикатор онлайна) — влево от овала */
.platform-ok .top-bar-right-cluster {
    margin-right: var(--ok-right-reserve);
}

/* Лобби и день: правая группа (переключатель темы + профиль) — влево от овала */
.platform-ok .lobby-topbar-right {
    margin-right: var(--ok-right-reserve);
}

/* Выпадающий список пользователей — отодвигаем от правого края */
.platform-ok .users-list-dropdown {
    right: calc(10px + var(--ok-right-reserve));
}

/* Кнопка ✏️ нового поста на канале — тоже правый верхний угол */
.platform-ok .feed-header-toolbar {
    padding-right: var(--ok-right-reserve);
}

/* Крестики закрытия: прижатые к верху шиты (профиль, формы) и полноэкранные окна.
   Для полноэкранных панелей с базовыми ID-правилами нужны ID-селекторы —
   класс .platform-ok сам по себе не перебьёт их специфичность. */
.platform-ok .sheet-overlay--top .sheet .modal-header,
.platform-ok .sheet-overlay--top .sheet .sheet-header,
.platform-ok #pmFullscreenOverlay .modal-fullscreen-header,
.platform-ok #roomMenuFullscreen .modal-fullscreen-header,
.platform-ok #usersListFullscreen .modal-fullscreen-header,
.platform-ok #chatModal .chat-modal-header,
.platform-ok #diaryFullscreenOverlay .diary-fullscreen-header {
    padding-right: var(--ok-right-reserve);
}