/* === БАЗОВЫЕ НАСТРОЙКИ === */
 :root {
     --bg-color: #f4f6f8;
     --text-color: #2c3e50;
     --card-bg: white;
     --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     --primary-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

     /* 🔥 ДИНАМИЧЕСКИЙ РАЗМЕР ШРИФТА (По умолчанию 16px) */
     --feed-font-size: 16px;
 }

 body.dark-theme {
     --bg-color: #0f2027;
     --text-color: #ffffff;
     --card-bg: rgba(255, 255, 255, 0.1);
     --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 body {
     font-family: 'Segoe UI', Roboto, sans-serif;
     background: var(--bg-color);
     color: var(--text-color);
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
 }

 html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

 /* === ШАПКА === */
 header {
     width: 100%;
     padding: 10px 15px;
     background: var(--card-bg);
     box-shadow: var(--card-shadow);
     position: sticky;
     top: 0;
     z-index: 100;
     backdrop-filter: blur(10px);
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .header-title {
     font-size: 18px;
     font-weight: 700;
     margin: 0;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }

 .back-btn {
     text-decoration: none;
     font-size: 24px;
     color: var(--text-color);
     display: flex;
     align-items: center;
 }



 /* === КОНТЕЙНЕР ЛЕНТЫ === */
 .feed-container {
     width: 100%;
     max-width: 600px;
     padding: 15px;
     box-sizing: border-box;
     padding-bottom: 90px;
     /* Место под кнопку + */
 }

 /* === КАРТОЧКА ПОСТА === */
 .post-card {
     background: var(--card-bg);
     border-radius: 15px;
     margin-bottom: 20px;
     overflow: hidden;
     position: relative;
     box-shadow: var(--card-shadow);
     animation: fadeIn 0.5s ease;
     transition: transform 0.2s;
 }

 /* ШАПКА ПОСТА */
 .post-header {
     padding: 12px 15px;
     /* 🔥 ВАЖНО: Отступ справа теперь зависит от размера шрифта.
               Если шрифт растет, отступ тоже растет, освобождая место для кнопки. */
     padding-right: 3.5em;
     display: flex;
     align-items: center;
     gap: 10px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     /* Чтобы при огромном шрифте шапка не слипалась */
     min-height: 3em;
 }

 /* === 🔥 НОВЫЙ СТИЛЬ КНОПКИ УДАЛЕНИЯ (УГОЛОК) === */
 .delete-post-btn {
     position: absolute;
     /* Вырываем из потока */
     top: 0;
     /* Прижимаем к верху */
     right: 0;
     /* Прижимаем к правому краю */

     width: 40px;
     /* Фиксированный размер */
     height: 40px;

     background: #ffebee;
     /* Бледно-красный фон */
     color: #c0392b;
     /* Темно-красная корзина */

     border: none;
     border-bottom-left-radius: 15px;
     /* Закругляем один угол красиво */

     font-size: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     /* Чтобы была поверх всего */
     transition: 0.2s;
 }

 .delete-post-btn:hover {
     background: #e74c3c;
     color: white;
 }

 .author-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover;
 }

 /* 🔥 ТЕПЕРЬ ИМЯ РАСТЕТ ВМЕСТЕ С ТЕКСТОМ */
 .author-name {
     font-weight: bold;
     /* Размер равен основному тексту + 1px */
     font-size: calc(var(--feed-font-size) + 1px);
     line-height: 1.2;
     /* Чтобы строки не разъезжались */
 }


 /* ДАТА ПОСТА (Теперь стоит под именем) */
 .post-date {
     /* Размер шрифта: чуть меньше основного */
     font-size: calc(var(--feed-font-size) - 2px);

     color: var(--text-color);
     opacity: 0.6;

     /* Убрали margin-left: auto, чтобы она не улетала вправо */
     margin-top: 2px;
     /* Маленький отступ от имени */
     display: block;
     /* Занимает свою строку */
 }

 /* ТЕКСТ ПОСТА */
 .post-content {
     padding: 15px;
     font-size: var(--feed-font-size);
     line-height: 1.6;
     white-space: pre-wrap;
     word-wrap: break-word;
 }

 .post-link-preview {
     background: rgba(0, 0, 0, 0.03);
     padding: 10px;
     margin: 0 15px 15px 15px;
     border-radius: 8px;
     border-left: 3px solid #3498db;
     color: #3498db;
     text-decoration: none;
     display: block;
     font-size: 0.9em;
 }

 .post-actions {
     padding: 10px 15px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     display: flex;
     gap: 20px;
 }

 .action-btn {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--text-color);
     opacity: 0.7;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: 0.2s;
 }

 .action-btn.active {
     color: #e74c3c;
     opacity: 1;
     font-weight: bold;
 }

 /* === СТИЛИ ДЛЯ КНОПКИ ПЕРЕХОДА === */
 .announce-btn-wrapper {
     margin-top: 15px;
     margin-bottom: 5px;
     width: 100%;
 }

 .goto-announce-btn {
     display: inline-block;
     background-color: #fff8e1;
     color: #d35400;
     border: 1px solid #f39c12;
     border-radius: 50px;
     padding: 0.5em 1.2em;
     text-decoration: none;
     font-size: 0.9em;
     font-weight: bold;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     transition: 0.2s;
 }

 .goto-announce-btn:hover {
     background-color: #f39c12;
     color: white;
 }

 /* === КНОПКА "СОЗДАТЬ" (FAB) === */
 .fab-btn {
     position: fixed;
     bottom: 25px;
     right: 25px;
     width: 60px;
     height: 60px;
     background: var(--primary-gradient);
     border-radius: 50%;
     box-shadow: 0 5px 20px rgba(0, 198, 255, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 30px;
     border: none;
     cursor: pointer;
     z-index: 99;
     transition: 0.3s;
 }

 .fab-btn:hover {
     transform: rotate(90deg);
 }

 /* МОДАЛКА */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     align-items: center;
     justify-content: center;
 }

 .modal-content {
     background: var(--card-bg);
     width: 90%;
     max-width: 400px;
     padding: 20px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 textarea {
     width: 100%;
     height: 100px;
     padding: 10px;
     border-radius: 8px;
     border: 1px solid #ccc;
     font-family: inherit;
     font-size: 16px;
     box-sizing: border-box;
     resize: none;
     background: transparent;
     color: inherit;
 }

 .modal-btns {
     margin-top: 15px;
     display: flex;
     justify-content: flex-end;
     gap: 10px;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* === СТИЛИ КОММЕНТАРИЕВ (УМНЫЙ ШРИФТ) === */
 .comments-section {
     display: none;
     background: #f8f9fa;
     border-top: 1px solid #eee;
     padding: 10px 15px;
     animation: fadeIn 0.3s ease;
 }

 .comment-row {
     display: flex;
     gap: 10px;
     margin-bottom: 12px;
     align-items: flex-start;
 }

 .comment-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
     border: 1px solid #eee;
 }

 .comment-bubble {
     background: #fff;
     padding: 8px 12px;
     border-radius: 0 12px 12px 12px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     flex: 1;
 }

 body.dark-theme .comment-bubble {
     background: #2c3e50;
     color: #fff;
 }

 body.dark-theme .comments-section {
     background: rgba(0, 0, 0, 0.2);
     border-top: 1px solid #333;
 }

 .comment-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 4px;

     /* 🔥 ДИНАМИКА: Имя чуть меньше основного текста */
     font-size: calc(var(--feed-font-size) - 3px);
 }

 .comment-author {
     font-weight: bold;
     color: #2c3e50;
 }

 body.dark-theme .comment-author {
     color: #ecf0f1;
 }

 .comment-date {
     color: #95a5a6;
     font-size: 0.9em;
     /* Относительно заголовка */
 }

 .comment-text {
     /* 🔥 ДИНАМИКА: Текст комментария растет вместе с лентой */
     font-size: calc(var(--feed-font-size) - 1px);

     line-height: 1.4;
     color: #333;
     white-space: pre-wrap;
 }

 body.dark-theme .comment-text {
     color: #ddd;
 }

 /* Поле ввода */
 .comment-input-area {
     display: flex;
     gap: 10px;
     margin-top: 10px;
     align-items: flex-end;
 }

 .comment-input {
     flex: 1;
     border: 1px solid #ddd;
     border-radius: 20px;
     padding: 8px 15px;

     /* 🔥 ДИНАМИКА: Поле ввода тоже увеличивается! */
     font-size: calc(var(--feed-font-size) - 1px);

     min-height: 36px;
     font-family: inherit;
 }

 .comment-input:focus {
     outline: none;
     border-color: #3498db;
 }

 .comment-send-btn {
     background: none;
     border: none;
     color: #3498db;

     /* 🔥 ДИНАМИКА: Стрелка отправки тоже растет */
     font-size: calc(var(--feed-font-size) + 4px);

     cursor: pointer;
     padding: 5px;
 }

 /* === БАЛАНС: ВИДЕО + ТЕКСТ === */

 /* 1. Глобальный сброс */
 iframe {
     max-width: 100%;
 }

 /* 2. ЮТУБ (Оставляем 16:9) */
 iframe[src*="youtube"],
 iframe[src*="youtu.be"] {
     width: 100% !important;
     height: auto !important;
     aspect-ratio: 16 / 9;
 }

 /* 3. FACEBOOK (ПРЯМОЙ IFRAME) */
 .fb-widget-wrapper {
     background: #fff;
     border-radius: 12px;
     margin: 15px auto;
     overflow: hidden;
     /* Если контента мало — блок сожмется, если много — появится скролл внутри фрейма */
     display: block;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 /* === ФИКС ДЛЯ СОЦСЕТЕЙ (Instagram & TikTok) === */

 /* Заставляем их не вылезать за пределы экрана */
 .tiktok-embed,
 .instagram-media {
     max-width: 100% !important;
     width: 100% !important;
     /* Убираем минимальную ширину, чтобы не ломало узкие телефоны */
     min-width: auto !important;
     margin: 0 auto !important;
 }

 /* Контейнер для них, чтобы было аккуратно */
 .social-embed-wrapper {
     width: 100%;
     overflow: hidden;
     border-radius: 12px;
     margin-top: 10px;
     background: #fff;
     display: flex;
     justify-content: center;
 }

 /* === НОВЫЕ СТИЛИ ДЛЯ МЕНЮ (ТРИ ТОЧКИ) === */

 /* Сама кнопка меню */
 .icon-btn {
     background: transparent;
     border: none;
     color: var(--text-color);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     opacity: 0.8;
 }

 /* Красная точка (статус) */
 .status-dot {
     position: absolute;
     width: 8px;
     height: 8px;
     background-color: #e74c3c;
     border-radius: 50%;
     display: none;
     border: 1px solid var(--card-bg);
 }

/* Выпадающее меню */
 .dropdown-menu {
     display: none;
     position: absolute;
     right: 0;
     top: 100%;
     margin-top: 10px;
     background: var(--card-bg);
     /* Было 220px, делаем 260px, чтобы влезли длинные тексты */
     width: 260px; 
     border-radius: 12px;
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
     padding: 15px;
     border: 1px solid rgba(128, 128, 128, 0.1);
     z-index: 2000;
     text-align: left;
 }

 /* НОВЫЙ КЛАСС ДЛЯ ПОДПУНКТОВ УВЕДОМЛЕНИЙ */
 .dropdown-item.sub-item {
     font-size: 13.5px; /* Делаем шрифт чуть меньше для аккуратности */
     margin-bottom: 12px;
     opacity: 0.9;
 }

 .dropdown-menu.show {
     display: block;
     animation: fadeIn 0.2s;
 }

 /* Пункты меню */
 .dropdown-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     /* Отступ между настройками */
     font-size: 15px;
     font-weight: 500;
 }

 /* Мини-кнопки для шрифта внутри меню */
 .font-controls-mini {
     display: flex;
     gap: 5px;
 }

 .font-btn-mini {
     background: rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(0, 0, 0, 0.1);
     color: var(--text-color);
     border-radius: 6px;
     width: 30px;
     height: 30px;
     font-size: 13px;
     font-weight: bold;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .font-btn-mini:active {
     background: rgba(0, 0, 0, 0.1);
     transform: scale(0.95);
 }

 /* Переключатель (Switch) */
 .switch-small {
     position: relative;
     display: inline-block;
     width: 40px;
     height: 22px;
 }

 .switch-small input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .slider-small {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
     border-radius: 34px;
 }

 .slider-small:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }

 input:checked+.slider-small {
     background-color: #3498db;
 }

 input:checked+.slider-small:before {
     transform: translateX(18px);
 }

 /* Анимация */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes flashNew {
     0% {
         background-color: #e8f0fe;
         transform: scale(0.98);
     }

     100% {
         background-color: transparent;
         transform: scale(1);
     }
 }

 /* === СТИЛИ ДЛЯ ОБРЕЗКИ ДЛИННОГО ТЕКСТА === */
 .post-content-preview {
     max-height: 120px;
     /* Примерно 5-6 строк */
     overflow: hidden;
     position: relative;
     mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
 }

 .read-more-btn {
     display: block;
     width: 100%;
     background: transparent;
     border: none;
     color: #3498db;
     font-weight: bold;
     cursor: pointer;
     padding: 10px 0;
     text-align: left;
     font-size: 14px;
 }

 .read-more-btn:hover {
     text-decoration: underline;
 }

 /* === МОДАЛКА ПРОСМОТРА ПОСТА (FACEBOOK STYLE) === */
 .view-post-modal {
     display: none;
     /* Скрыто по умолчанию */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-color);
     /* Фон как у всей страницы */
     z-index: 5000;
     /* Поверх всего */
     flex-direction: column;
     overflow-y: auto;
     /* Скролл внутри */
 }

 /* Шапка модалки */
 .view-post-header {
     position: sticky;
     top: 0;
     background: var(--card-bg);
     backdrop-filter: blur(10px); /* <--- ВОТ ЭТА МАГИЯ РАЗМЫТИЯ */
    -webkit-backdrop-filter: blur(10px); /* <--- Для поддержки старых браузеров Safari/iPhone */
     padding: 15px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     z-index: 10;
 }

 .close-view-btn {
     background: none;
     border: none;
     font-size: 24px;
     margin-right: 15px;
     cursor: pointer;
     color: var(--text-color);
 }

 /* Контейнер внутри модалки */
 .view-post-body {
     padding: 20px;
     max-width: 800px;
     margin: 0 auto;
     width: 100%;
     box-sizing: border-box;
 }

 /* Увеличенный текст в режиме чтения */
 .view-post-text {
     font-size: calc(var(--feed-font-size) + 2px);
     line-height: 1.6;
     white-space: pre-wrap;
     color: var(--text-color);
 }

 /* Фикс: Плотное, непрозрачное меню настроек для Темной темы */
body.dark-theme .dropdown-menu {
    background: #1a252f !important;
    border: 1px solid #34495e !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

/* =========================================
   ФИКС КНОПОК ШРИФТА (А- / А+) В МЕНЮ
   ========================================= */
.font-btn-mini {
    border: 1px solid #bdc3c7 !important; /* Четкий серый контур */
    background: #f8f9fa !important;       /* Светлый фон */
    color: #333 !important;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.font-btn-mini:active {
    background: #e2e6ea !important;
}

/* Для Темной темы контур и фон другие */
body.dark-theme .font-btn-mini {
    border: 1px solid #555 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* =========================================
   СТОРИС (ЗАКРЕПЛЕННЫЕ ОБЪЯВЛЕНИЯ)
========================================= */

.stories-wrapper {
    background: var(--bg-color, #fff); 
    padding: 15px 0 10px 0; /* 🔥 Убрали отступ слева, чтобы скролл был от края до края экрана */
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    margin-bottom: 10px;
    
    position: sticky;
    top: 50px; 
    z-index: 90; 

    width: 100%; 
    max-width: 100vw; 
    box-sizing: border-box; 
    overflow: hidden; 
}

.stories-scroll {
    display: flex;
    gap: 20px; /* 🔥 Чуть увеличили шаг между кружками для эстетики */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    padding: 0 20px; /* Даем симметричные отступы по краям экрана */
    
    /* 🔥 ГЛАВНАЯ МАГИЯ: Включаем жесткую привязку (магнит) */
    scroll-snap-type: x mandatory; 
}

.stories-scroll::-webkit-scrollbar {
    display: none; 
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    flex-shrink: 0; 
    scroll-snap-stop: always;
    /* 🔥 Кружок всегда магнитится ровно по центру экрана */
    scroll-snap-align: center; 
    cursor: pointer;
}

.story-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    padding: 3px;
    /* Инстаграм-градиент для обычных закрепов */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    margin-bottom: 5px;
}

/* Красный градиент для срочных объявлений (Молния) */
.story-ring.urgent {
    background: linear-gradient(45deg, #ff0000 0%, #ff5e00 100%); 
}

.story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-color, #fff); /* Отступ между градиентом и фото */
    background-color: #f0f0f0;
}

.story-title {
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    color: var(--text-color, #333);
}

/* Поддержка темной темы */
body.dark-theme .stories-wrapper {
    background: #1e1e1e;
    border-bottom: 1px solid #333;
}
body.dark-theme .story-avatar {
    border-color: #1e1e1e;
}
body.dark-theme .story-title {
    color: #ccc;
}

/* 🔥 ТЕКСТОВЫЕ АВАТАРКИ (БУКВЫ) 🔥 */
.text-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase;
    
    /* 🔥 БРОНЯ ОТ СПЛЮЩИВАНИЯ 🔥 */
    flex-shrink: 0; /* Строгий запрет на сжатие соседями */
    aspect-ratio: 1 / 1; /* Жесткий квадрат 1:1 */
    border-radius: 50%; /* Скругляем квадрат в идеальный круг */
    
    /* Базовые размеры (если не переданы из JS) */
    width: 45px; 
    height: 45px;
}