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

        /* ПЕРЕМЕННЫЕ ДЛЯ ТЕМ (ТЁМНАЯ ПО УМОЛЧАНИЮ) */
        :root {
            --bg-page: #f0f2f8;
            --bg-screen: #ffffff;
            --glass: rgba(0, 0, 0, 0.03);
            --glass-border: rgba(0, 0, 0, 0.08);
            --accent-purple: #6c00ff;
            --accent-pink: #ff006e;
            --accent-blue: #00b4d8;
            --text-main: #111827;
            --text-muted: #6b7280;
            --online: #22c55e;
            --input-bg: #f3f4f8;
            --msg-in-bg: #f0f2f8;
            --drawer-bg: #ffffff;
            --nav-bg: rgba(255, 255, 255, 0.97);
            --font: 'Inter', sans-serif;
            --chat-font-size: 0.9rem;
            --chat-bg-pattern: radial-gradient(circle at 50% 100%, rgba(108, 0, 255, 0.04), transparent 70%);
            --chat-wallpaper-img: url('/beliy.png');
        }

        /* ПЕРЕМЕННЫЕ ДЛЯ ТЁМНОЙ ТЕМЫ */
        body.dark-theme {
            --bg-page: #05020a;
            --bg-screen: #0c071e;
            --glass: rgba(255, 255, 255, 0.04);
            --glass-border: rgba(255, 255, 255, 0.08);
            --text-main: #ffffff;
            --text-muted: #8b8b9e;
            --input-bg: rgba(0,0,0,0.3);
            --msg-in-bg: rgba(255,255,255,0.07);
            --drawer-bg: rgba(18, 11, 42, 0.95);
            --nav-bg: rgba(12, 7, 30, 0.9);
            --chat-bg-pattern: radial-gradient(circle at 50% 100%, rgba(112, 0, 255, 0.08), transparent 70%);
            /* Обои чата (задание пользователя): chorniy.png — постоянные обои
               для тёмной темы у ВСЕХ пользователей, лежит в корне сайта. */
            --chat-wallpaper-img: url('/chorniy.png');
        }
        /* legacy alias */
        body.light-theme {
            --bg-page: #f0f2f8;
            --bg-screen: #ffffff;
            --glass: rgba(0, 0, 0, 0.03);
            --glass-border: rgba(0, 0, 0, 0.08);
            --text-main: #111827;
            --text-muted: #6b7280;
            --input-bg: #f3f4f8;
            --msg-in-bg: #f0f2f8;
            --drawer-bg: #ffffff;
            --nav-bg: rgba(255, 255, 255, 0.97);
            --chat-bg-pattern: radial-gradient(circle at 50% 100%, rgba(108, 0, 255, 0.04), transparent 70%);
            /* Обои чата: beliy.png — постоянные обои для светлой темы */
            --chat-wallpaper-img: url('/beliy.png');
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font);
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-screen);
            color: var(--text-main);
            min-height: 100vh;
            min-height: 100dvh;
            overflow: hidden;
            transition: background-color 0.3s;
        }
        .phone-wrapper {
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            max-width: 500px;
            margin: 0 auto;
            background: var(--bg-screen);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: background 0.3s;
        }

        /* СИСТЕМА ЭКРАНОВ И АНИМАЦИЯ СЛАЙДОВ */
        .app-screen {
            display: none;
            flex-direction: column;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
            opacity: 1;
            transform: translateX(0);
        }

        .app-screen.active-screen {
            display: flex;
            z-index: 10;
            opacity: 1;
            transform: translateX(0);
        }

        /* Скроллбары */
        .scrollable {
            overflow-y: auto;
            flex: 1;
        }
        .scrollable::-webkit-scrollbar { width: 3px; }
        .scrollable::-webkit-scrollbar-thumb { background: rgba(139, 139, 158, 0.3); border-radius: 10px; }

        /* Кнопки */
        .icon-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.1rem;
            cursor: pointer;
            transition: color 0.2s;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .icon-btn:hover { color: var(--text-main); background: var(--glass); }

        /* НИЖНЯЯ НАВИГАЦИЯ — ТЕЛЕГРАМ СТИЛЬ (ПЛАВАЮЩАЯ ПИЛЮЛЯ) */
        .phone-navbar {
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0,0,0,0.07);
            border-radius: 28px;
            padding: 6px 4px 8px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 14px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 28px);
            max-width: 468px;
            z-index: 99999;
            transition: background 0.3s, box-shadow 0.3s;
            box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 0 0 1px rgba(108,0,255,0.06);
        }
        body.dark-theme .phone-navbar {
            background: rgba(18,10,40,0.95);
            border-color: rgba(255,255,255,0.1);
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,0,255,0.15);
        }
        .nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #9ca3af;
            font-size: 0.63rem;
            gap: 3px;
            cursor: pointer;
            z-index: 2;
            padding: 5px 10px;
            border-radius: 16px;
            transition: background 0.2s, color 0.2s;
            flex: 1;
            min-width: 0;
            font-weight: 500;
        }
        .nav-tab.active {
            color: var(--accent-purple);
            font-weight: 700;
        }
        .nav-tab svg { width: 22px; height: 22px; display: block; }
        body.dark-theme .nav-tab { color: #8b8b9e; }
        body.dark-theme .nav-tab.active { color: var(--accent-purple); }
        .nav-tab .nav-profile-av { width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid transparent; }
        .nav-tab.active .nav-profile-av { border-color: var(--accent-purple); }

        /* SOCIAL MODE NAV ACTIVE = PINK */
        body.social-mode .nav-tab.active { color: #ff006e; }
        body.social-mode.dark-theme .phone-navbar {
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,0,110,0.2);
        }

        /* ЦЕНТРАЛЬНАЯ КНОПКА ПЛАНЕТА */
        .nav-center-orb {
            width: 58px;
            height: 58px;
            background: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 18px rgba(108,0,255,0.20), 0 0 0 1px rgba(108,0,255,0.10);
            border: none;
            transform: translateY(-12px);
            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
            z-index: 10;
            position: relative;
            flex-shrink: 0;
            perspective: 300px;
        }
        .nav-center-orb:active { transform: translateY(-12px) scale(0.93); }
        body.dark-theme .nav-center-orb {
            background: #1a0b36;
            box-shadow: 0 0 20px rgba(108,0,255,0.35);
        }

        /* SVG PLANET inside the orb */
        .orb-planet-svg {
            width: 38px;
            height: 38px;
            display: block;
        }

        /* ОКНО ОРБИТЫ НЕПРОЧИТАННЫХ ЧАТОВ */
        .orbit-menu-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(5, 2, 10, 0.75);
            backdrop-filter: blur(8px);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .orbit-menu-overlay.open { opacity: 1; pointer-events: auto; }
        .orbit-container {
            position: absolute;
            bottom: 110px;
            left: 50%;
            transform: translateX(-50%);
            width: 280px;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .orbit-line-bg {
            position: absolute;
            border: 1px dashed rgba(112, 0, 255, 0.3);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            animation: spinClockwise 25s linear infinite;
        }
        .orbit-chat-sphere {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
            color: white;
            box-shadow: 0 0 0 rgba(0,0,0,0);
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2), box-shadow 0.3s;
            transform: scale(0) translate(0, 0);
        }
        @keyframes floatSphere {
            0% { transform: translate(var(--tx), var(--ty)) translateY(0px); }
            50% { transform: translate(var(--tx), var(--ty)) translateY(-6px); }
            100% { transform: translate(var(--tx), var(--ty)) translateY(0px); }
        }
        .orbit-menu-overlay.open .orbit-chat-sphere {
            transform: scale(1) translate(var(--tx), var(--ty));
            animation: floatSphere 4s ease-in-out infinite alternate;
            animation-delay: var(--delay);
            box-shadow: 0 8px 25px var(--shadow-color), inset 0 2px 8px rgba(255,255,255,0.3);
        }
        .orbit-chat-sphere img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .orbit-chat-sphere .orbit-badge {
            position: absolute; top: -4px; right: -4px; background: #ff0055; color: white;
            font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; border: 1px solid var(--bg-screen);
            box-shadow: 0 2px 8px rgba(255, 0, 85, 0.5);
        }
        .orbit-chat-sphere .orbit-name-lbl {
            position: absolute; bottom: -20px; font-size: 0.65rem; white-space: nowrap;
            color: #ffffff; background: rgba(0,0,0,0.6); padding: 1px 6px; border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        @keyframes spinClockwise { 100% { transform: rotate(360deg); } }

        /* СПИСОК ЧАТОВ */
        .chats-header { display: flex; justify-content: space-between; align-items: center; padding: 25px 20px 15px; }
        .logo-area { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.2px; transition: opacity 0.3s ease; }
        @keyframes orbiRecBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
        /* Update (задание): "живые" стикеры — лёгкая непрерывная анимация,
           разная фаза на каждом (nth-child), чтобы не двигались синхронно как один. */
        #epicker-stickers-grid > div { animation: orbiStickerLive 2.4s ease-in-out infinite; }
        #epicker-stickers-grid > div:nth-child(2n) { animation-delay: 0.3s; animation-duration: 2.1s; }
        #epicker-stickers-grid > div:nth-child(3n) { animation-delay: 0.6s; animation-duration: 2.7s; }
        #epicker-stickers-grid > div:nth-child(5n) { animation-delay: 0.9s; }
        @keyframes orbiStickerLive {
            0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
            50% { transform: translateY(-4px) scale(1.05) rotate(-2deg); }
        }
        .logo-area .status-dots::after { content: ''; display: inline-block; width: 14px; text-align: left; animation: statusDotsCycle 1.4s steps(1) infinite; }
        @keyframes statusDotsCycle {
            0%   { content: ''; }
            25%  { content: '.'; }
            50%  { content: '..'; }
            75%  { content: '...'; }
            100% { content: ''; }
        }
        .logo-orb-custom {
            position: relative; width: 26px; height: 26px; border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #00f2fe, #5b00c4);
            box-shadow: 0 0 10px rgba(0, 242, 254, 0.5); display: flex; align-items: center; justify-content: center;
        }
        .logo-orb-custom::after {
            content: ''; position: absolute; width: 38px; height: 12px; border: 1.5px solid rgba(178, 36, 239, 0.8); border-radius: 50%; transform: rotate(-25deg);
        }
        .header-right { display: flex; gap: 10px; align-items: center; }
        .search-container {
            margin: 0 20px 15px; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 11px 15px; display: flex; align-items: center; gap: 10px; transition: background 0.3s;
        }
        .search-container input { background: none; border: none; color: var(--text-main); width: 100%; outline: none; font-size: 0.9rem; }
        .search-container input::placeholder { color: var(--text-muted); }
        
        .categories { display: flex; gap: 15px; padding: 5px 20px 15px; border-bottom: 1px solid var(--glass-border); font-size: 0.85rem; color: var(--text-muted); overflow-x: auto; white-space: nowrap; }
        .categories::-webkit-scrollbar { display: none; }
        .category-item { cursor: pointer; transition: color 0.2s; position: relative; }
        .category-item.active { color: var(--text-main); font-weight: 500; }
        .category-item.active::after { content: ''; position: absolute; bottom: -16px; left: 0; width: 100%; height: 2px; background: var(--accent-purple); }

        /* FILTER CHIPS like photo */
        .cat-chip {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 5px 14px; border-radius: 20px; font-size: 0.8rem;
            font-weight: 500; cursor: pointer; white-space: nowrap;
            background: var(--input-bg); color: var(--text-muted);
            border: 1.5px solid transparent; transition: all 0.2s; flex-shrink: 0;
        }
        .cat-chip.active {
            background: rgba(108,0,255,0.1); color: var(--accent-purple);
            border-color: rgba(108,0,255,0.25); font-weight: 600;
        }
        body.dark-theme .cat-chip { background: rgba(255,255,255,0.06); }
        body.dark-theme .cat-chip.active { background: rgba(108,0,255,0.18); }
        .cat-badge { background: var(--accent-purple); color: white; font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; margin-left: 4px; }

        .chat-row { display: flex; align-items: center; padding: 12px 16px; gap: 13px; cursor: pointer; border-bottom: 1px solid var(--glass-border); transition: background 0.15s; position: relative; }
        .contacts-letter-header { padding: 6px 18px; font-size: 0.78rem; font-weight: 700; color: var(--accent-purple); background: var(--glass); letter-spacing: 0.5px; }
        .chat-row:active { background: var(--glass); }
        .row-avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.15rem; position: relative; flex-shrink: 0; color: white; box-shadow: 0 3px 10px rgba(0,0,0,0.18); transition: box-shadow 0.2s; }
        .row-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .status-dot { width: 13px; height: 13px; background: var(--online); border: 2.5px solid var(--bg-screen); border-radius: 50%; display: none; position: absolute; bottom: -1px; right: -1px; transition: border-color 0.3s; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }
        .status-dot.is-online { display: block; }

        .row-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
        .row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
        .row-name { font-weight: 600; font-size: 0.96rem; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: -0.1px; }
        .row-time { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; font-weight: 500; }
        .row-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .row-msg { font-size: 0.84rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; line-height: 1.3; }
        .row-unread { background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); color: white; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; padding: 0 5px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 6px rgba(112,0,255,0.35); }

        .tag-online { font-size: 0.62rem; color: var(--online); background: rgba(0,200,120,0.12); padding: 2px 7px; border-radius: 8px; font-weight: 600; }
        .tag-premium { background: linear-gradient(90deg, #ff00cc, #3333ff); font-size: 0.58rem; padding: 2px 6px; border-radius: 5px; font-weight: bold; color: white; letter-spacing: 0.3px; }

        /* ── НОВЫЙ ДИЗАЙН АРХИВА ── */
        .archive-overlay { position: absolute; inset: 0; background: rgba(5,2,10,0.55); backdrop-filter: blur(4px); z-index: 600; display: flex; align-items: flex-end; animation: orbiFadeIn 0.2s ease; }
        .archive-panel-card { width: 100%; max-height: 78vh; background: var(--bg-screen); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; animation: sheetUp 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 -10px 40px rgba(0,0,0,0.35); }
        .archive-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--glass-border); }
        .archive-panel-title { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 9px; color: var(--text-main); }
        .archive-panel-title i { color: var(--accent-purple); }
        .archive-list-scroll { overflow-y: auto; flex: 1; padding-bottom: env(safe-area-inset-bottom, 8px); }
        .archive-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--glass-border); transition: background 0.15s; }
        .archive-row:active { background: var(--glass); }
        .archive-row-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#764ba2,#667eea); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; flex-shrink: 0; overflow: hidden; }
        .archive-row-body { flex: 1; overflow: hidden; cursor: pointer; }
        .archive-row-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .archive-row-preview { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
        .archive-unarchive-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-border); color: var(--accent-blue); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 0.85rem; transition: transform 0.15s; }
        .archive-unarchive-btn:active { transform: scale(0.9); }

        /* ОКНО ДИАЛОГА */
        .dialog-screen { padding-bottom: 0; }
        .dialog-header { display: flex; align-items: center; padding: 15px 15px; border-bottom: 1px solid var(--glass-border); background: var(--nav-bg); backdrop-filter: blur(10px); z-index: 100; }
        .dialog-user-info { flex: 1; margin-start: 10px; display: flex; flex-direction: column; overflow: hidden; }
        .dialog-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dialog-status { font-size: 0.75rem; color: var(--text-muted); }
        .dialog-status.online-txt { color: var(--online); }
        /* TYPING ANIMATION */
        .typing-dots { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; margin-left:3px; }
        .typing-dots span { width:4px; height:4px; border-radius:50%; background:var(--accent-blue); display:inline-block; animation:typingBounce 1.1s ease-in-out infinite; }
        .typing-dots span:nth-child(2){ animation-delay:0.18s; }
        .typing-dots span:nth-child(3){ animation-delay:0.36s; }
        @keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:0.5} 30%{transform:translateY(-5px);opacity:1} }
        /* CHAT ROW PREVIEW TYPING */
        .row-msg.is-typing { color:var(--accent-blue); font-style:italic; }
        /* OWNER / ADMIN BADGE in channel */
        .badge-owner { display:inline-flex;align-items:center;gap:3px;background:linear-gradient(90deg,#f59e0b,#f97316);color:white;font-size:0.55rem;font-weight:700;padding:2px 6px;border-radius:8px;letter-spacing:0.3px;text-transform:uppercase; }
        .badge-admin { display:inline-flex;align-items:center;gap:3px;background:linear-gradient(90deg,#7000ff,#b224ef);color:white;font-size:0.55rem;font-weight:700;padding:2px 6px;border-radius:8px;letter-spacing:0.3px;text-transform:uppercase; }
        .dialog-actions { display: flex; gap: 14px; color: var(--text-muted); font-size: 1.05rem; }
        .dialog-actions i { cursor: pointer; }
        .dialog-actions i:hover { color: var(--text-main); }

        .chat-messages-box { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 12px; background-image: var(--chat-bg-pattern), var(--chat-wallpaper-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; position: relative; }
        
        /* СООБЩЕНИЯ (АНИМАЦИЯ ПОЯВЛЕНИЯ) */
        .bubble { max-width: 75%; padding: 11px 15px; border-radius: 18px; font-size: var(--chat-font-size); line-height: 1.4; position: relative; word-wrap: break-word; display: flex; flex-direction: column; animation: slideInMsg 0.25s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; opacity: 0; transform: translateY(10px); }
        .swipe-reply-icon { position: absolute; top: 50%; transform: translateY(-50%) scale(0.5); opacity: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--glass); display: flex; align-items: center; justify-content: center; color: var(--accent-blue); font-size: 0.85rem; transition: opacity 0.15s, transform 0.15s; pointer-events: none; }
        @keyframes slideInMsg { to { opacity: 1; transform: translateY(0); } }
        
        .bubble-in { background: var(--msg-in-bg); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--text-main); }
        .bubble-out { background: linear-gradient(135deg, #5b00c4, #8616db); color: white; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px rgba(112,0,255,0.2); }
        
        .bubble-footer { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 0.65rem; opacity: 0.7; margin-top: 4px; align-self: flex-end; }
        .status-ticks { font-size: 0.75rem; display: flex; }
        .status-ticks.read { color: var(--accent-blue); }

        /* СПЕЦИАЛЬНЫЕ ТИПЫ СООБЩЕНИЙ */
        .msg-media img { max-width: 100%; border-radius: 10px; margin-top: 4px; }

        /* ── Тонкий пузырь для фото: без фиолетового фона/паддинга вокруг картинки ── */
        .bubble-media-thin { background: none !important; box-shadow: none !important; padding: 2px !important; max-width: 240px; }
        .msg-media-photo { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; line-height: 0; }
        .msg-media-photo img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-top: 0; transition: transform 0.15s; }
        .msg-media-photo:active img { transform: scale(0.98); }

        /* Иконка загрузки — в углу фото, во время отправки */
        .media-upload-spinner {
            position: absolute; top: 8px; right: 8px;
            width: 26px; height: 26px; border-radius: 50%;
            background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 0.8rem; z-index: 2;
        }

        /* Кнопка скачать — в углу фото, после успешной отправки/получения */
        .media-download-btn {
            position: absolute; top: 8px; right: 8px;
            width: 26px; height: 26px; border-radius: 50%;
            background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 0.75rem; z-index: 2;
            opacity: 0; transition: opacity 0.15s;
        }
        .msg-media-photo:hover .media-download-btn,
        .msg-media-photo:active .media-download-btn { opacity: 1; }
        @media (hover: none) {
            .media-download-btn { opacity: 0.85; } /* на тач-устройствах всегда видна слегка */
        }

        /* Время/галочки плавающей плашкой над фото (как в Telegram), не отдельной строкой */
        .bubble-footer-overlay {
            position: absolute; bottom: 6px; right: 8px;
            background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
            padding: 2px 7px; border-radius: 10px; z-index: 2;
            margin-top: 0 !important; align-self: auto !important;
            color: #fff;
        }

        .msg-voice { display: flex; align-items: center; gap: 10px; min-width: 160px; padding: 5px 0; }
        .voice-play-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .voice-wave { flex: 1; height: 15px; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0.3) 31%); background-size: 6px 100%; border-radius: 2px; }
        
        .msg-poll-title { font-weight: 600; margin-bottom: 8px; }
        .msg-poll-option { background: rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 8px; margin-bottom: 5px; cursor: pointer; display: flex; justify-content: space-between; position: relative; overflow: hidden; }
        .msg-poll-track { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 242, 254, 0.2); width: 0%; transition: width 0.3s ease; }
        .msg-poll-opt-txt { z-index: 1; }
        .msg-poll-opt-pct { z-index: 1; font-size: 0.75rem; font-weight: 600; }

        /* РЕАКЦИИ И ОТВЕТЫ */
        .bubble-quote { font-size: 0.75rem; background: rgba(0,0,0,0.15); border-left: 3px solid var(--accent-blue); padding: 4px 8px; border-radius: 4px; margin-bottom: 6px; color: rgba(255,255,255,0.9); }
        .bubble-reactions { display: flex; gap: 4px; position: absolute; bottom: -12px; left: 10px; background: var(--drawer-bg); border: 1px solid var(--glass-border); padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 5; }

        /* ВВОД СООБЩЕНИЯ И ПАНЕЛИ */
        .chat-bottom-section { background: var(--bg-screen); border-top: 1px solid var(--glass-border); display: flex; flex-direction: column; transition: background 0.3s; position: relative; }
        .reply-preview-bar { display: none; align-items: center; padding: 8px 15px; background: var(--glass); border-bottom: 1px solid var(--glass-border); justify-content: space-between; }
        .chat-input-row { padding: 10px 15px; display: flex; gap: 10px; align-items: center; position: relative; }
        .input-bar { flex: 1; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
        .input-bar input { background: none; border: none; color: var(--text-main); width: 100%; outline: none; font-size: 0.9rem; }
        .input-bar input::placeholder { color: var(--text-muted); }
        .send-msg-btn { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #5b00c4, #8616db); display: flex; align-items: center; justify-content: center; border: none; color: white; cursor: pointer; transition: transform 0.2s, background 0.2s; }
        .send-msg-btn:active { transform: scale(0.9); }
        .send-msg-btn.recording { background: #ff0055; animation: pulseRecord 1s infinite alternate; }
        @keyframes pulseRecord { from { box-shadow: 0 0 5px rgba(255,0,85,0.5); } to { box-shadow: 0 0 15px rgba(255,0,85,0.9); } }

        /* ТАЙМЕР ЗАПИСИ */
        .voice-record-overlay { position: absolute; left: 60px; right: 60px; background: var(--bg-screen); height: 100%; display: none; align-items: center; gap: 10px; color: #ff0055; font-size: 0.9rem; z-index: 5; }
        .voice-record-overlay i { animation: blink 0.5s infinite alternate; }
        @keyframes blink { from { opacity: 0; } to { opacity: 1; } }

        /* КНОПКА СКРОЛЛА ВНИЗ */
        .scroll-down-btn { position: absolute; bottom: 80px; right: 15px; width: 36px; height: 36px; border-radius: 50%; background: var(--drawer-bg); border: 1px solid var(--glass-border); display: none; align-items: center; justify-content: center; color: var(--text-main); cursor: pointer; z-index: 90; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

        /* ВЛОЖЕНИЯ DRAWER */
        .attachment-drawer { max-height: 0; overflow: hidden; background: var(--drawer-bg); transition: max-height 0.3s ease, padding 0.3s ease; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px 10px; padding: 0 20px; border-top: 0 solid var(--glass-border); }
        .attachment-drawer.open { max-height: 250px; padding: 20px; border-top: 1px solid var(--glass-border); }
        .attach-box { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
        .attach-round { width: 44px; height: 44px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--text-main); }
        .attach-box:hover .attach-round { background: rgba(112, 0, 255, 0.1); border-color: var(--accent-purple); }
        .attach-round.magenta { color: var(--accent-pink); }
        .attach-round.cyan { color: var(--accent-blue); }
        .attach-lbl { font-size: 0.7rem; color: var(--text-muted); }

        /* ЕМОДЗИ ПИКЕР */
        .emoji-picker-panel { position: absolute; bottom: 60px; left: 15px; right: 15px; background: var(--drawer-bg); border: 1px solid var(--glass-border); border-radius: 18px; height: 200px; display: none; flex-direction: column; z-index: 200; backdrop-filter: blur(15px); padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; overflow-y: auto; padding: 5px; text-align: center; font-size: 1.3rem; }
        .emoji-item { cursor: pointer; transition: transform 0.1s; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; }
        .emoji-item:hover { transform: scale(1.2); }

        /* КОНТЕКСТНОЕ МЕНЮ */
        .context-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 499; display: none; backdrop-filter: blur(2px); }
        .context-menu-backdrop.active { display: block; animation: orbiFadeIn 0.15s ease; }
        @keyframes orbiFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes orbiMenuPop { from { opacity: 0; transform: scale(0.92) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        .context-menu { position: fixed; background: var(--drawer-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 8px 0; width: 220px; max-height: 80vh; overflow-y: auto; z-index: 500; display: none; box-shadow: 0 16px 40px rgba(0,0,0,0.45); backdrop-filter: blur(16px); animation: orbiMenuPop 0.18s cubic-bezier(0.2,0.9,0.3,1.2); }
        .context-menu-item { padding: 11px 16px; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.15s; }
        .context-menu-item i { width: 18px; text-align: center; color: var(--text-muted); }
        .context-menu-item:active { background: var(--glass); }
        .reactions-stripe { display: flex; justify-content: space-around; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--glass-border); font-size: 1.35rem; }
        .react-btn { cursor: pointer; transition: transform 0.15s; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; }
        .react-btn:active { transform: scale(1.35); background: var(--glass); }
        .reactions-grid-full { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 10px 10px; border-bottom: 1px solid var(--glass-border); font-size: 1.2rem; }
        .reactions-grid-full .react-btn { width: 32px; height: 32px; margin: 0 auto; }

        /* МОДАЛЬНЫЕ ОКНА И ОПРОСЫ */
        .modal-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(5,2,10,0.8); backdrop-filter: blur(5px); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
        .modal-card { background: var(--drawer-bg); border: 1px solid var(--glass-border); border-radius: 20px; width: 100%; padding: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
        .modal-card h3 { margin-bottom: 15px; font-size: 1.1rem; }
        .modal-input { width: 100%; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px; color: white; outline: none; margin-bottom: 10px; font-size: 0.85rem; }
        .modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
        .modal-btn { padding: 8px 16px; border-radius: 8px; border: none; font-size: 0.85rem; cursor: pointer; font-weight: 500; }
        .modal-btn.cancel { background: var(--glass); color: var(--text-muted); }
        .modal-btn.confirm { background: linear-gradient(135deg, #5b00c4, #8616db); color: white; }

        /* ИНТЕРФЕЙС ЗВОНКА */
        .call-screen { position: absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at center, #1b0a3a, #05020a); z-index: 3000; display: none; flex-direction: column; align-items: center; justify-content: space-between; padding: 60px 30px; animation: fadeIn 0.3s; }
        .call-avatar { width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--accent-blue); padding: 4px; margin-bottom: 15px; box-shadow: 0 0 25px rgba(0, 242, 254, 0.4); }
        .call-avatar img { width:100%; height:100%; border-radius: 50%; object-fit: cover; }
        .call-name { font-size: 1.3rem; font-weight: 600; margin-bottom: 5px; }
        .call-status { font-size: 0.85rem; color: var(--accent-blue); letter-spacing: 1px; }
        .call-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; justify-items: center; margin-bottom: 20px; padding: 0 10px; }
        .call-btn { width: 65px; height: 65px; border-radius: 22px; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.4rem; cursor: pointer; transition: background 0.2s, transform 0.1s; backdrop-filter: blur(10px); }
        .call-btn:active { transform: scale(0.93); }
        .call-btn.active-tool { background: rgba(255,255,255,0.88); color: #150040; }
        .call-btn.hangup { background: linear-gradient(135deg,#ff0055,#e00040); border: none; width: 72px; height: 72px; border-radius: 50%; font-size: 1.7rem; box-shadow: 0 3px 10px rgba(255,0,85,0.35); flex-shrink: 0; }
        .call-btn-label { font-size: 0.68rem; color: rgba(255,255,255,0.65); margin-top: 7px; text-align: center; }
        .call-btn-wrap { display: flex; flex-direction: column; align-items: center; }
        .call-btn.mic-speaking { background: rgba(112,0,255,0.5) !important; box-shadow: 0 0 20px rgba(112,0,255,0.8); animation: micPulse 0.5s ease-in-out infinite; }
        @keyframes micPulse { 0%,100%{box-shadow:0 0 10px rgba(112,0,255,0.5)} 50%{box-shadow:0 0 25px rgba(0,242,254,0.9),0 0 40px rgba(112,0,255,0.6)} }
        /* VIDEO CALL OVERLAY CONTROLS */
        #video-call-controls { position:absolute; bottom:0; left:0; right:0; padding: 0 24px 48px; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); z-index:100; transition: opacity 0.35s ease; display:flex; flex-direction:column; align-items:center; gap:20px; }
        #video-call-controls.hidden { opacity:0; pointer-events:none; }
        #video-call-top-bar { position:absolute; top:0; left:0; right:0; padding: 52px 20px 16px; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%); z-index:100; text-align:center; transition: opacity 0.35s ease; }
        #video-call-top-bar.hidden { opacity:0; pointer-events:none; }
        /* AUDIO CALL — big avatar centered style like screenshot */
        #screen-call.audio-active { justify-content:center; }
        .call-avatar-big { position:relative; width:140px; height:140px; margin:0 auto 18px; }
        .call-avatar-big-ring { position:absolute; inset:-18px; border-radius:50%; border:2.5px solid rgba(112,0,255,0.35); animation:callRingPulse 2s ease-out infinite; }
        .call-avatar-big-ring2 { position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(0,242,254,0.3); animation:callRingPulse 2s ease-out infinite; animation-delay:0.8s; }
        .call-avatar-big-inner { width:140px; height:140px; border-radius:50%; overflow:hidden; border:3.5px solid; border-image: linear-gradient(135deg,#7000ff,#00f2fe) 1; box-shadow: 0 0 40px rgba(112,0,255,0.4), 0 0 80px rgba(0,242,254,0.15); display:flex; align-items:center; justify-content:center; font-size:3rem; color:white; background:linear-gradient(135deg,#764ba2,#667eea); }
        .call-avatar-big-inner img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
        /* The audio call bottom row: 4 buttons centered */
        .audio-call-btns-row { display:flex; gap:22px; justify-content:center; align-items:flex-end; }
        /* TOAST — WhatsApp/Telegram style */
        .toast-notification { position:absolute; top:12px; left:10px; right:10px; background:rgba(22,14,46,0.97); border:1px solid rgba(112,0,255,0.35); border-radius:18px; padding:11px 14px; display:flex; gap:11px; align-items:center; z-index:10000; box-shadow:0 8px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05); transform:translateY(-120px) scale(0.95); opacity:0; transition:transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s; pointer-events:none; }
        .toast-notification.show { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
        .toast-app-icon { width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,#7000ff,#00f2fe); display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:900; color:white; flex-shrink:0; letter-spacing:-0.5px; }
        .toast-inner { display:flex; gap:10px; flex:1; align-items:center; overflow:hidden; }
        .toast-body { flex:1; overflow:hidden; }
        .toast-title { font-weight:700; font-size:0.83rem; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .toast-text { font-size:0.74rem; color:rgba(255,255,255,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
        .toast-time { font-size:0.65rem; color:rgba(255,255,255,0.35); align-self:flex-start; flex-shrink:0; padding-top:2px; }

        /* ТОСТ УВЕДОМЛЕНИЯ */
        .toast-notification { position: absolute; bottom: 90px; top: auto; left: 20px; right: 20px; background: rgba(0,0,0,0.82); border: none; border-radius: 14px; padding: 13px 18px; display: flex; gap: 10px; align-items: center; justify-content: center; z-index: 10000; box-shadow: 0 10px 25px rgba(0,0,0,0.4); transform: translateY(30px); opacity: 0; transition: transform 0.3s, opacity 0.3s; pointer-events: none; text-align: center; }
        .toast-notification.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
        .toast-body { flex: 1; overflow: hidden; }
        .toast-title { font-weight: 600; font-size: 0.85rem; }
        .toast-text { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* ПУСТЫЕ СОСТОЯНИЯ */
        .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 40px; color: var(--text-muted); gap: 12px; }
        .empty-state i { font-size: 2.5rem; background: linear-gradient(135deg, var(--accent-blue), var(--accent-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* ДАТА РАЗДЕЛИТЕЛЬ */
        .date-divider { text-align: center; margin: 15px 0 5px; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

        /* ОСТАЛЬНЫЕ СТИЛИ СТАРЫХ СТРАНИЦ */
        .premium-bar-top { padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
        .premium-graphic { height: 160px; display: flex; align-items: center; justify-content: center; position: relative; }
        .prem-orbit-1 { position: absolute; width: 210px; height: 55px; border: 1px solid rgba(0, 242, 254, 0.4); border-radius: 50%; transform: rotate(-12deg); }
        .prem-orbit-2 { position: absolute; width: 190px; height: 75px; border: 1px solid rgba(178, 36, 239, 0.3); border-radius: 50%; transform: rotate(18deg); }
        .prem-gem-logo { font-size: 4.5rem; background: linear-gradient(180deg, #fff, var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(0, 242, 254, 0.6)); }
        .premium-text-block { text-align: center; margin-bottom: 20px; padding: 0 20px; }
        .premium-text-block h2 { font-size: 1.25rem; margin-bottom: 4px; }
        .premium-text-block p { font-size: 0.85rem; color: var(--text-muted); }
        .features-grid { padding: 0 15px; }
        .feat-row { display: flex; align-items: center; padding: 12px; margin-bottom: 8px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); }
        .feat-circle { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-right: 12px; }
        .feat-content h4 { font-size: 0.88rem; font-weight: 500; margin-bottom: 2px; }
        .feat-content p { font-size: 0.75rem; color: var(--text-muted); }
        .buy-premium-container { padding: 15px 20px; }
        .buy-premium-btn { width: 100%; padding: 14px; border-radius: 14px; background: linear-gradient(90deg, #5b00c4, #00f2fe); border: none; color: white; font-weight: 600; font-size: 0.95rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 8px 20px rgba(91, 0, 196, 0.3); }
        .mute-icon { opacity: 0.7; }
        /* Settings rows */
        .sett-row { display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;transition:background 0.15s;border-bottom:1px solid var(--glass-border); }
        .sett-row:last-child { border-bottom:none; }
        .sett-row:active { background:rgba(255,255,255,0.05); }
        .sett-icon-wrap { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.95rem; }
        .sett-row-body { flex:1;display:flex;flex-direction:column;gap:1px; }
        .sett-row-title { font-size:0.88rem;font-weight:500;color:var(--text-main); }
        .sett-row-sub { font-size:0.72rem;color:var(--text-muted); }
        .sett-arrow { color:var(--text-muted);font-size:0.7rem;flex-shrink:0; }

        .profile-bar-top { padding: 15px 20px; display: flex; justify-content: space-between; }
        .profile-info-block { display: flex; flex-direction: column; align-items: center; text-align: center; }
        .avatar-ring { position: relative; margin-bottom: 12px; }
        .avatar-ring img { width: 85px; height: 85px; border-radius: 50%; border: 2px solid var(--accent-pink); padding: 3px; object-fit: cover; background: var(--bg-screen); }
        .avatar-ring .online-indicator { position: absolute; bottom: 6px; right: 6px; width: 14px; height: 14px; background: var(--online); border: 2px solid var(--bg-screen); border-radius: 50%; }
        .profile-info-block h2 { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
        .profile-username { font-size: 0.85rem; color: var(--text-muted); margin-top: 3px; }
        .profile-online-lbl { font-size: 0.8rem; color: var(--online); margin-top: 6px; }
        .profile-counters { display: flex; justify-content: space-between; padding: 15px 25px; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); margin-top: 15px; }
        .counter-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
        .counter-item strong { font-size: 1.1rem; }
        .counter-item span { font-size: 0.7rem; color: var(--text-muted); }
        .premium-status-banner { margin: 15px 20px; background: linear-gradient(90deg, rgba(112,0,255,0.1), rgba(0,242,254,0.05)); border: 1px solid rgba(112,0,255,0.2); border-radius: 14px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .banner-icon-gem { font-size: 1.3rem; color: var(--accent-blue); }
        .options-list { padding: 0 20px 20px; }
        .option-row { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--glass-border); cursor: pointer; justify-content: space-between; }
        .option-left { display: flex; align-items: center; gap: 10px; }
        .option-icon { width: 20px; color: var(--text-muted); font-size: 1.05rem; }
        .option-title { font-size: 0.88rem; }
        .option-control { display: flex; align-items: center; gap: 5px; }
        
        /* ПЕРЕКЛЮЧАТЕЛЬ */
        .toggle-switch { position: relative; width: 36px; height: 20px; -webkit-appearance: none; background: rgba(255,255,255,0.1); outline: none; border-radius: 20px; cursor: pointer; transition: background 0.3s; border: 1px solid var(--glass-border); }
        .toggle-switch:checked { background: var(--accent-purple); }
        .toggle-switch::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; top: 2px; left: 2px; background: white; transition: transform 0.3s; }
        .toggle-switch:checked::before { transform: translateX(16px); }

        .select-custom { background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text-main); font-size: 0.75rem; padding: 3px 8px; border-radius: 6px; outline: none; }

        /* ── ПРОФИЛЬ В СТИЛЕ TELEGRAM ── */
        .profile-hero {
            position: relative;
            height: 260px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .profile-hero-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, #1a0b36 0%, #0c071e 50%, #050210 100%);
        }
        .profile-hero-gradient {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 30% 0%, rgba(112,0,255,0.4) 0%, transparent 60%),
                        radial-gradient(ellipse at 70% 100%, rgba(0,242,254,0.2) 0%, transparent 50%);
        }
        .profile-hero-av {
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.3);
            overflow: hidden;
            box-shadow: 0 0 24px rgba(112,0,255,0.5);
        }
        .profile-hero-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
        .profile-hero-name {
            position: absolute;
            bottom: 22px;
            left: 116px;
            right: 60px;
        }
        .profile-hero-name h2 { font-size: 1.2rem; font-weight: 700; display:flex; align-items:center; gap:6px; }
        .verified-badge { color: #00f2fe; font-size: 1rem; }
        .profile-hero-name .online-pill { display:inline-flex; align-items:center; gap:4px; font-size:0.72rem; color:rgba(255,255,255,0.7); margin-top:3px; }
        .profile-hero-actions {
            position: absolute;
            bottom: 18px;
            right: 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .profile-actions-row {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            background: var(--glass);
            border-bottom: 1px solid var(--glass-border);
        }
        .profile-action-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            padding: 10px 8px;
            color: var(--text-main);
            cursor: pointer;
            font-size: 0.72rem;
            transition: background 0.2s;
        }
        .profile-action-btn:active { background: rgba(112,0,255,0.15); }
        .profile-action-btn i { font-size: 1.1rem; color: var(--accent-purple); }
        .profile-info-rows { padding: 0 16px; }
        .profile-info-row {
            padding: 13px 0;
            border-bottom: 1px solid var(--glass-border);
        }
        .profile-info-row:last-child { border:none; }
        .profile-info-val { font-size: 0.93rem; font-weight: 500; margin-bottom: 2px; }
        .profile-info-lbl { font-size: 0.72rem; color: var(--text-muted); }
        .profile-tabs-row {
            display: flex;
            border-bottom: 1px solid var(--glass-border);
            background: var(--bg-screen);
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .profile-tab {
            flex: 1;
            padding: 12px 8px;
            text-align: center;
            font-size: 0.83rem;
            color: var(--text-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .profile-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); font-weight: 600; }

        /* ── ЗВОНОК (УЛУЧШЕННЫЙ) ── */
        .call-screen {
            background: radial-gradient(ellipse at 50% 0%, #2d0b5a 0%, #0c0520 40%, #05020a 100%) !important;
        }
        .call-ring-anim {
            position: relative;
            width: 130px;
            height: 130px;
            margin: 0 auto 20px;
        }
        .call-ring-anim::before, .call-ring-anim::after {
            content: '';
            position: absolute;
            inset: -12px;
            border-radius: 50%;
            border: 2px solid rgba(112,0,255,0.4);
            animation: callRingPulse 2s ease-out infinite;
        }
        .call-ring-anim::after { animation-delay: 1s; }
        @keyframes callRingPulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.4); opacity: 0; }
        }
        @keyframes callAnswerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

        /* ── NEW iPhone-style call screen animations ── */
        @keyframes waveBar {
            0%, 100% { transform: scaleY(0.4); }
            50% { transform: scaleY(1); }
        }
        @keyframes incCallAnswerPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 6px 24px rgba(52,199,89,0.55); }
            50% { transform: scale(1.08); box-shadow: 0 6px 32px rgba(52,199,89,0.8); }
        }
        .call-avatar-inner {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            border: 3px solid rgba(0,242,254,0.5);
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0,242,254,0.3);
        }
        .call-avatar-inner img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
        .call-wave {
            display: flex;
            gap: 3px;
            align-items: flex-end;
            height: 30px;
            margin: 12px auto;
            justify-content: center;
        }
        .call-wave span {
            width: 4px;
            border-radius: 2px;
            background: linear-gradient(to top, var(--accent-purple), var(--accent-blue));
            animation: callWave 1.2s ease-in-out infinite;
        }
        .call-wave span:nth-child(1){height:40%;animation-delay:0s}
        .call-wave span:nth-child(2){height:70%;animation-delay:0.1s}
        .call-wave span:nth-child(3){height:100%;animation-delay:0.2s}
        .call-wave span:nth-child(4){height:70%;animation-delay:0.3s}
        .call-wave span:nth-child(5){height:40%;animation-delay:0.4s}
        @keyframes callWave {
            0%,100%{transform:scaleY(0.4)}
            50%{transform:scaleY(1)}
        }
        .call-wave.ringing span { animation: none; height: 50% !important; opacity: 0.3; }

        /* ── LONG PRESS SELECTION ── */
        .chat-row.selected {
            background: rgba(112,0,255,0.15) !important;
        }
        .selection-toolbar {
            position: absolute;
            top: 0; left: 0; right: 0;
            background: rgba(18,7,42,0.97);
            backdrop-filter: blur(20px);
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 200;
            border-bottom: 1px solid var(--glass-border);
            transform: translateY(-100%);
            transition: transform 0.3s;
        }
        .selection-toolbar.visible { transform: translateY(0); }
        .sel-count { font-weight: 600; font-size: 0.9rem; flex: 1; }
        .sel-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 8px;
            transition: background 0.2s;
            font-size: 0.65rem;
            color: var(--text-muted);
        }
        .sel-btn:hover { background: var(--glass); }
        .sel-btn i { font-size: 1rem; }
        .sel-btn.danger { color: #ff0055; }

        /* ── FEED TAB BUTTONS (Для вас / Подписки / Популярное) ── */
        .feed-tab-btn {
            flex: 1; padding: 11px 8px; text-align: center;
            font-size: 0.85rem; font-weight: 500; cursor: pointer;
            color: var(--text-muted); border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .feed-tab-btn.active { color: var(--text-main); font-weight: 700; border-bottom-color: var(--text-main); }

        /* ── SOCIAL STORIES (gradient ring like photo) ── */
        .social-story-item {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            cursor: pointer; flex-shrink: 0;
        }
        .social-story-ring {
            width: 64px; height: 64px; border-radius: 50%;
            padding: 2.5px;
            background: linear-gradient(135deg, #ff006e, #ff8c00, #ffde03);
            flex-shrink: 0;
        }
        .social-story-ring.unseen {
            background: linear-gradient(135deg, #ff006e, #c800ff, #ff8c00);
        }
        .social-story-ring.seen {
            background: #d1d5db;
        }
        .social-story-ring.add-story {
            background: linear-gradient(135deg, var(--accent-purple), #c800ff);
        }
        .social-story-inner {
            width: 100%; height: 100%; border-radius: 50%;
            border: 2.5px solid var(--bg-screen);
            background: var(--input-bg); overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        .social-story-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .social-story-name { font-size: 0.67rem; color: var(--text-muted); max-width: 64px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* ── FEED POSTS (photo-accurate) ── */
        .feed-post {
            border-bottom: 1px solid var(--glass-border);
            padding: 14px 0 10px;
            transition: background 0.15s;
        }
        .feed-post-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:0 14px; }
        .feed-post-av { width:38px; height:38px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; font-weight:700; color:white; flex-shrink:0; background:var(--accent-purple); }
        .feed-post-av img { width:100%; height:100%; object-fit:cover; }
        .feed-post-body { flex:1; }
        .feed-post-name { font-weight:700; font-size:0.9rem; color:var(--text-main); }
        .feed-post-meta { font-size:0.72rem; color:var(--text-muted); margin-top:1px; }
        .feed-post-more { color:var(--text-muted); background:none;border:none;cursor:pointer;padding:4px 6px;font-size:1.1rem; }
        .feed-post-img-wrap { position:relative; margin-bottom:0; }
        .feed-post-img { width:100%; max-height:300px; object-fit:cover; display:block; }
        .feed-img-counter { position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.55);color:white;font-size:0.72rem;font-weight:600;padding:3px 8px;border-radius:10px; }
        .feed-post-actions {
            display:flex; align-items:center; padding:10px 14px 4px; gap:0;
        }
        .feed-act-left { display:flex;align-items:center;gap:14px;flex:1; }
        .feed-act-btn {
            display:flex;align-items:center;gap:5px;background:none;border:none;
            color:var(--text-muted);cursor:pointer;font-size:0.83rem;font-weight:500;
            padding:4px 0;transition:color 0.15s;font-family:inherit;
        }
        .feed-act-btn.liked { color:#ff006e; }
        .feed-act-btn.saved { color:var(--accent-purple); }
        .feed-post-caption { padding:6px 14px 4px;font-size:0.88rem;line-height:1.5;color:var(--text-main); }
        .feed-post-tag { color:var(--accent-purple);font-weight:500; }
        .feed-act-share { margin-left: auto; }

        /* MOMENTS GRID */
        .moments-thumb {
            aspect-ratio:9/16;overflow:hidden;cursor:pointer;position:relative;background:var(--input-bg);
        }
        .moments-thumb img { width:100%;height:100%;object-fit:cover; }
        .moments-thumb-overlay { position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,0.6));color:white;font-size:0.7rem;display:flex;align-items:center;gap:4px; }

        /* NOTIFS LIST */
        .notif-item { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--glass-border); }
        .notif-av { width:42px;height:42px;border-radius:50%;background:var(--input-bg);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;color:white; }
        .notif-av img { width:100%;height:100%;object-fit:cover; }
        .notif-text { flex:1;font-size:0.85rem;line-height:1.45;color:var(--text-main); }
        .notif-text span { font-weight:700; }
        .notif-time { font-size:0.72rem;color:var(--text-muted);white-space:nowrap;align-self:flex-start;margin-top:2px; }
        .notif-thumb { width:42px;height:42px;border-radius:8px;object-fit:cover;flex-shrink:0; }

        /* ── BOTTOM SHEET ── */
        .bottom-sheet-overlay {
            position: absolute;
            inset: 0;
            background: rgba(5,2,10,0.7);
            backdrop-filter: blur(6px);
            z-index: 1500;
            display: none;
            align-items: flex-end;
        }
        .bottom-sheet-overlay.open { display: flex; }
        .bottom-sheet-card {
            background: var(--drawer-bg);
            border-radius: 20px 20px 0 0;
            width: 100%;
            padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
            animation: sheetUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
            max-height: 85vh;
            overflow-y: auto;
        }
        @keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
        .sheet-handle { width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,0.2); margin:10px auto 16px; }
        .sheet-title { font-weight:700; font-size:0.95rem; padding:0 20px 12px; border-bottom:1px solid var(--glass-border); }
        .sheet-item {
            display:flex; align-items:center; gap:14px;
            padding:14px 20px; cursor:pointer; transition:background 0.15s;
        }
        .sheet-item:active { background:var(--glass); }
        .sheet-item-ico { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:white; font-size:1.1rem; flex-shrink:0; }
        .sheet-item-info h4 { font-size:0.9rem; font-weight:600; margin-bottom:2px; }
        .sheet-item-info p { font-size:0.73rem; color:var(--text-muted); }

        .sheet-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px 4px; }
        .sheet-grid-item { background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:14px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; cursor:pointer; transition:transform 0.15s, border-color 0.15s; }
        .sheet-grid-item:active { transform:scale(0.96); border-color:var(--accent-purple); }
        .sheet-grid-item .sheet-item-ico { width:38px; height:38px; border-radius:11px; font-size:1rem; }
        .sheet-grid-item h4 { font-size:0.85rem; font-weight:600; margin:0; }
        .sheet-grid-item p { font-size:0.7rem; color:var(--text-muted); margin:0; line-height:1.3; }

        /* ── Горизонтальные быстрые действия на экране Контакты ── */
        .contacts-quick-actions { display:flex; gap:10px; padding:4px 16px 12px; overflow-x:auto; }
        .cqa-item { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; cursor:pointer; padding:10px 6px; border-radius:14px; transition:background 0.15s; }
        .cqa-item:active { background:var(--glass); transform:scale(0.96); }
        .cqa-ico { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; color:white; font-size:1.05rem; }
        .cqa-item span { font-size:0.72rem; color:var(--text-muted); font-weight:500; }

        /* ── ЭКРАН СОЗДАНИЯ ГРУППЫ/КАНАЛА ── */
        .wizard-step { display:none; flex-direction:column; height:100%; }
        .wizard-step.active { display:flex; }

        /* ── ПРОФИЛЬ ЧАТА/КАНАЛА/ГРУППЫ ── */
        .chat-profile-screen { padding-bottom:0; }


        /* ══════════════════════════════════════════════════════════════
           STORIES
        ══════════════════════════════════════════════════════════════ */
        .stories-bar {
            display: flex;
            gap: 14px;
            padding: 10px 16px 14px;
            overflow-x: auto;
            border-bottom: 1px solid var(--glass-border);
            flex-shrink: 0;
        }
        .stories-bar::-webkit-scrollbar { display: none; }
        .story-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            flex-shrink: 0;
        }
        .story-ring {
            width: 58px; height: 58px;
            border-radius: 50%;
            padding: 2.5px;
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            position: relative;
        }
        .story-ring.seen {
            background: rgba(139,139,158,0.4);
        }
        .story-ring-inner {
            width: 100%; height: 100%;
            border-radius: 50%;
            background: var(--bg-screen);
            padding: 2px;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .story-ring-inner img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
        .story-ring-inner .story-letter { font-size:1.3rem; font-weight:700; color:white; }
        .story-add-btn {
            position: absolute; bottom: 0; right: 0;
            width: 20px; height: 20px; border-radius: 50%;
            background: var(--accent-purple);
            border: 2px solid var(--bg-screen);
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 0.7rem;
        }
        .story-name { font-size: 0.68rem; color: var(--text-muted); max-width: 58px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* STORY VIEWER */
        .story-viewer {
            position: absolute; inset: 0; z-index: 2000;
            background: #000;
            display: none; flex-direction: column;
        }
        .story-viewer.open { display: flex; }
        .story-progress-bar {
            display: flex; gap: 3px;
            padding: 12px 14px 8px;
            position: absolute; top: 0; left: 0; right: 0; z-index: 10;
        }
        .story-prog-seg {
            flex: 1; height: 2.5px; border-radius: 2px;
            background: rgba(255,255,255,0.3); overflow: hidden;
        }
        .story-prog-fill {
            height: 100%; width: 0%;
            background: white;
            transition: width linear;
        }
        .story-viewer-content {
            flex: 1; position: relative;
            display: flex; align-items: center; justify-content: center;
        }
        .story-viewer-img {
            width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
        }
        .story-viewer-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.7) 100%);
        }
        .story-viewer-top {
            position: absolute; top: 44px; left: 14px; right: 14px;
            display: flex; align-items: center; gap: 10px; z-index: 5;
        }
        .story-viewer-av { width:36px; height:36px; border-radius:50%; overflow:hidden; border:2px solid white; }
        .story-viewer-av img { width:100%; height:100%; object-fit:cover; }
        .story-viewer-name { color:white; font-weight:600; font-size:0.9rem; flex:1; }
        .story-viewer-time { color:rgba(255,255,255,0.7); font-size:0.72rem; }
        .story-viewer-close { color:white; font-size:1.2rem; cursor:pointer; }
        .story-viewer-bottom {
            position: absolute; bottom: 20px; left: 14px; right: 14px; z-index: 5;
        }
        .story-reply-inp {
            width: 100%; background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.3); border-radius: 24px;
            padding: 10px 16px; color: white; font-size: 0.88rem;
            outline: none; font-family: inherit;
        }
        .story-reply-inp::placeholder { color: rgba(255,255,255,0.6); }

        /* ══════════════════════════════════════════════════════════════
           AI АССИСТЕНТ
        ══════════════════════════════════════════════════════════════ */
        .ai-fab {
            position: fixed; bottom: 160px; right: 16px;
            width: 48px; height: 48px; border-radius: 16px;
            background: linear-gradient(135deg, #00f2fe, #7000ff);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 800;
            box-shadow: 0 6px 20px rgba(0,242,254,0.4);
            font-size: 1.3rem;
            transition: transform 0.2s;
        }
        .ai-fab:active { transform: scale(0.92); }

        .ai-chat-screen { padding-bottom: 0; }
        .ai-messages { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
        .ai-messages::-webkit-scrollbar { width:2px; }
        .ai-bubble {
            max-width: 80%;
            padding: 10px 14px;
            border-radius: 18px;
            font-size: 0.88rem;
            line-height: 1.5;
        }
        .ai-bubble.user {
            align-self: flex-end;
            background: linear-gradient(135deg, var(--accent-purple), #5b00c4);
            color: white;
            border-radius: 18px 18px 4px 18px;
        }
        .ai-bubble.bot {
            align-self: flex-start;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            color: var(--text-main);
            border-radius: 18px 18px 18px 4px;
        }
        .ai-bubble.bot.typing {
            display: flex; gap: 5px; align-items: center; padding: 12px 16px;
        }
        .ai-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted); animation: aiDot 1.4s infinite ease-in-out; }
        .ai-dot:nth-child(2){animation-delay:0.2s}
        .ai-dot:nth-child(3){animation-delay:0.4s}
        @keyframes aiDot{0%,80%,100%{transform:scale(0.6);opacity:0.4}40%{transform:scale(1);opacity:1}}
        .ai-suggestions { display:flex; gap:8px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--glass-border); }
        .ai-suggest-btn {
            padding:6px 12px; border-radius:16px; border:1px solid var(--glass-border);
            background:var(--glass); color:var(--text-muted); font-size:0.78rem; cursor:pointer;
            transition:all 0.2s; white-space:nowrap;
        }
        .ai-suggest-btn:active { background:rgba(112,0,255,0.15); color:var(--text-main); }

        /* ══════════════════════════════════════════════════════════════
           ПАПКИ ЧАТОВ
        ══════════════════════════════════════════════════════════════ */
        .folders-bar {
            display: flex; gap: 0;
            border-bottom: 1px solid var(--glass-border);
            overflow-x: auto; flex-shrink: 0;
        }
        .folders-bar::-webkit-scrollbar { display:none; }
        .folder-tab {
            padding: 9px 16px; font-size: 0.83rem; cursor: pointer;
            color: var(--text-muted); border-bottom: 2px solid transparent;
            white-space: nowrap; transition: all 0.2s; display:flex; align-items:center; gap:5px;
        }
        .folder-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); font-weight: 600; }

        /* ══════════════════════════════════════════════════════════════
           ПОИСК ПО СООБЩЕНИЯМ
        ══════════════════════════════════════════════════════════════ */
        .msg-search-bar {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 14px; background: var(--bg-screen);
            border-bottom: 1px solid var(--glass-border);
            animation: fadeInDown 0.2s ease;
        }
        @keyframes fadeInDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
        .msg-search-bar input {
            flex:1; background:var(--input-bg); border:1px solid var(--glass-border);
            border-radius:10px; padding:8px 12px; color:var(--text-main);
            font-size:0.85rem; outline:none; font-family:inherit;
        }
        .msg-search-bar input::placeholder { color:var(--text-muted); }
        .msg-search-nav { display:flex; gap:4px; }
        .msg-search-nav button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem; padding:4px; }

        /* ══════════════════════════════════════════════════════════════
           ЗАКРЕПЛЁННЫЕ СООБЩЕНИЯ
        ══════════════════════════════════════════════════════════════ */
        .pinned-msg-bar {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 14px; background: rgba(112,0,255,0.08);
            border-bottom: 1px solid rgba(112,0,255,0.2);
            cursor: pointer; flex-shrink: 0;
        }
        .pinned-icon { color: var(--accent-purple); font-size: 0.85rem; }
        .pinned-text { flex:1; font-size: 0.8rem; }
        .pinned-label { font-size: 0.68rem; color: var(--accent-purple); font-weight: 600; }
        .pinned-content { font-size: 0.8rem; color: var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

        /* ══════════════════════════════════════════════════════════════
           САМОУНИЧТОЖАЮЩИЕСЯ СООБЩЕНИЯ
        ══════════════════════════════════════════════════════════════ */
        .burn-badge {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.65rem; color: #ff6b6b;
            margin-left: 6px;
        }

        /* ══════════════════════════════════════════════════════════════
           КАСТОМНЫЕ ТЕМЫ
        ══════════════════════════════════════════════════════════════ */
        .themes-grid {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 12px; padding: 16px;
        }
        .theme-card {
            border-radius: 16px; overflow: hidden; cursor: pointer;
            border: 2px solid transparent; transition: border 0.2s, transform 0.15s;
            aspect-ratio: 0.6;
        }
        .theme-card.active { border-color: var(--accent-purple); transform: scale(1.04); }
        .theme-card:active { transform: scale(0.96); }
        .theme-preview { width:100%; height:100%; display:flex; flex-direction:column; }
        .theme-preview-top { flex:1; display:flex; align-items:flex-end; padding:8px; }
        .theme-bubble-out { height:20px; border-radius:10px 10px 2px 10px; width:70%; align-self:flex-end; }
        .theme-bubble-in { height:20px; border-radius:10px 10px 10px 2px; width:60%; margin-top:4px; }
        .theme-preview-bottom { padding:6px 8px; display:flex; align-items:center; gap:4px; }
        .theme-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.5); }
        .theme-name { font-size: 0.72rem; text-align: center; padding: 6px 4px 0; color: var(--text-muted); }

        /* ══════════════════════════════════════════════════════════════
           АНАЛИТИКА КАНАЛА
        ══════════════════════════════════════════════════════════════ */
        .analytics-card {
            background: var(--glass); border: 1px solid var(--glass-border);
            border-radius: 16px; padding: 16px; margin: 0 16px 12px;
        }
        .analytics-card h4 { font-size: 0.83rem; color: var(--text-muted); margin-bottom: 10px; }
        .analytics-big { font-size: 2.2rem; font-weight: 800; }
        .analytics-change { font-size: 0.75rem; color: var(--online); display: flex; align-items: center; gap: 4px; margin-top: 3px; }
        .analytics-chart { display: flex; gap: 4px; align-items: flex-end; height: 48px; margin-top: 12px; }
        .chart-bar {
            flex: 1; border-radius: 3px 3px 0 0;
            background: linear-gradient(to top, var(--accent-purple), var(--accent-blue));
            opacity: 0.7; transition: opacity 0.2s;
            min-height: 4px;
        }
        .chart-bar:hover { opacity: 1; }
        .analytics-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--glass-border); }
        .analytics-row:last-child { border: none; }

        /* ══════════════════════════════════════════════════════════════
           ПЕРЕВОДЫ
        ══════════════════════════════════════════════════════════════ */
        .translate-btn {
            font-size: 0.68rem; color: var(--accent-blue);
            cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
            margin-top: 4px; opacity: 0.8;
        }
        .translated-text {
            font-size: 0.83rem; color: var(--text-muted);
            font-style: italic; margin-top: 4px; padding-top: 4px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        /* ══════════════════════════════════════════════════════════════
           АНИМИРОВАННЫЕ ПЕРЕХОДЫ
        ══════════════════════════════════════════════════════════════ */
        .app-screen {
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .app-screen.screen-exit {
            opacity: 0; transform: translateX(-20px); pointer-events: none;
        }
        .app-screen.screen-enter {
            opacity: 0; transform: translateX(20px);
        }
        .app-screen.active-screen {
            opacity: 1; transform: translateX(0);
        }

        /* ══════════════════════════════════════════════════════════════
           MISC IMPROVEMENTS
        ══════════════════════════════════════════════════════════════ */
        .dialog-header-actions {
            display: flex; gap: 6px;
        }
        .msg-highlight { background: rgba(112,0,255,0.2) !important; transition: background 0.5s; }


        /* ══════════════════════════════════════════════════════════════
           ГЕОЛОКАЦИЯ
        ══════════════════════════════════════════════════════════════ */
        .geo-map-preview {
            width: 100%; height: 160px; border-radius: 16px; overflow: hidden;
            background: linear-gradient(135deg, #0d1b2a, #1b2838);
            position: relative; cursor: pointer; margin-bottom: 4px;
            border: 1px solid var(--glass-border);
            display: flex; align-items: center; justify-content: center;
        }
        .geo-map-grid {
            position: absolute; inset: 0; opacity: 0.15;
            background-image: linear-gradient(rgba(0,242,254,0.5) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(0,242,254,0.5) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        .geo-pin { font-size: 2.5rem; position: relative; z-index: 2; animation: geoPing 2s ease-in-out infinite; }
        @keyframes geoPing { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
        .geo-ping-ring {
            position: absolute; width: 60px; height: 60px; border-radius: 50%;
            border: 2px solid rgba(0,242,254,0.4); z-index: 1;
            animation: geoRipple 2s ease-out infinite;
        }
        @keyframes geoRipple { 0%{transform:scale(0.5);opacity:1} 100%{transform:scale(2);opacity:0} }
        .geo-address { font-size: 0.82rem; color: var(--text-muted); padding: 6px 12px; }

        /* ══════════════════════════════════════════════════════════════
           ГОЛОСОВЫЕ СООБЩЕНИЯ
        ══════════════════════════════════════════════════════════════ */
        .voice-bubble {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; min-width: 200px;
        }
        .voice-play-btn {
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.15); border: none;
            color: white; cursor: pointer; display: flex;
            align-items: center; justify-content: center; font-size: 0.9rem;
            transition: background 0.2s; flex-shrink: 0;
        }
        .voice-play-btn:active { background: rgba(255,255,255,0.3); }
        .voice-waveform {
            flex: 1; display: flex; gap: 2px; align-items: center; height: 28px;
        }
        .voice-bar {
            width: 3px; border-radius: 2px; background: rgba(255,255,255,0.5);
            transition: background 0.1s;
        }
        .voice-bar.active { background: white; }
        .voice-duration { font-size: 0.72rem; opacity: 0.8; white-space: nowrap; }

        /* ══════════════════════════════════════════════════════════════
           ПРЯМАЯ ТРАНСЛЯЦИЯ
        ══════════════════════════════════════════════════════════════ */
        .live-screen {
            background: #000 !important;
        }
        .live-badge {
            display: inline-flex; align-items: center; gap: 5px;
            background: #ff0000; color: white; font-size: 0.72rem;
            font-weight: 700; padding: 3px 8px; border-radius: 4px;
            letter-spacing: 0.5px;
        }
        .live-dot { width: 6px; height: 6px; border-radius: 50%; background: white; animation: liveBlink 1s infinite; }
        @keyframes liveBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }
        .live-viewers { font-size: 0.78rem; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 4px; }
        .live-comments-box {
            flex: 1; overflow-y: auto; padding: 10px 14px;
            display: flex; flex-direction: column; gap: 6px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
        }
        .live-comments-box::-webkit-scrollbar { display: none; }
        .live-comment { display: flex; align-items: center; gap: 8px; animation: liveCommentIn 0.3s ease; }
        @keyframes liveCommentIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
        .live-comment-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: white; flex-shrink: 0; }
        .live-comment-text { font-size: 0.82rem; color: white; }
        .live-comment-name { font-weight: 600; margin-right: 4px; }
        .live-reactions-bar {
            display: flex; gap: 8px; padding: 8px 14px;
        }
        .live-react-btn {
            width: 42px; height: 42px; border-radius: 50%; border: none;
            background: rgba(255,255,255,0.1); font-size: 1.3rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.15s;
        }
        .live-react-btn:active { transform: scale(1.3); }
        .floating-emoji {
            position: absolute; bottom: 120px; pointer-events: none; z-index: 100;
            font-size: 1.8rem; animation: floatUp 2s ease forwards;
        }
        @keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-200px) scale(0.5)} }

        /* ══════════════════════════════════════════════════════════════
           АНИМИРОВАННЫЕ АВАТАРКИ (PREMIUM)
        ══════════════════════════════════════════════════════════════ */
        .anim-av-ring {
            background: conic-gradient(#7000ff, #00f2fe, #b224ef, #7000ff) !important;
            animation: animAvSpin 3s linear infinite;
        }
        @keyframes animAvSpin { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)} }

        /* ══════════════════════════════════════════════════════════════
           КАСТОМНЫЕ ЭМОДЗИ РЕАКЦИИ
        ══════════════════════════════════════════════════════════════ */
        .reactions-bar {
            display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
        }
        .reaction-chip {
            display: inline-flex; align-items: center; gap: 3px;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
            border-radius: 20px; padding: 3px 8px; cursor: pointer;
            font-size: 0.8rem; transition: all 0.2s;
        }
        .reaction-chip.mine { background: rgba(112,0,255,0.2); border-color: rgba(112,0,255,0.4); }
        .reaction-chip:active { transform: scale(0.9); }
        .reaction-picker {
            position: absolute; background: var(--drawer-bg);
            border: 1px solid var(--glass-border); border-radius: 16px;
            padding: 10px; display: flex; gap: 8px; z-index: 500;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            animation: reactionPickerIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes reactionPickerIn { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }
        .reaction-pick-btn { font-size: 1.5rem; cursor: pointer; transition: transform 0.15s; }
        .reaction-pick-btn:hover { transform: scale(1.3); }

        /* ══════════════════════════════════════════════════════════════
           СЕКРЕТНЫЙ ЧАТ
        ══════════════════════════════════════════════════════════════ */
        .secret-chat-indicator {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 6px 14px; background: rgba(16,185,129,0.1);
            border-bottom: 1px solid rgba(16,185,129,0.2); font-size: 0.75rem;
            color: var(--online); flex-shrink: 0;
        }
        .secret-timer-sel {
            display: flex; gap: 6px; padding: 10px 14px; flex-wrap: wrap;
            border-bottom: 1px solid var(--glass-border);
        }
        .sec-btn {
            padding: 5px 12px; border-radius: 16px; border: 1px solid var(--glass-border);
            background: var(--glass); color: var(--text-muted); font-size: 0.78rem;
            cursor: pointer; transition: all 0.2s;
        }
        .sec-btn.active { background: rgba(16,185,129,0.2); color: var(--online); border-color: var(--online); }

        /* ══════════════════════════════════════════════════════════════
           ГОЛОСОВОЙ СТАТУС
        ══════════════════════════════════════════════════════════════ */
        .voice-status-ring {
            position: absolute; inset: -3px; border-radius: 50%;
            border: 2px solid var(--online);
            animation: voiceStatusPulse 1.5s ease-in-out infinite;
        }
        @keyframes voiceStatusPulse { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
        .voice-status-player {
            display: flex; align-items: center; gap: 8px;
            background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
            border-radius: 12px; padding: 8px 12px; margin: 6px 16px;
        }


        /* ══ ОБОИ ЧАТА — ORBIGRAM СТИЛЬ ══ */
        .chat-wallpaper-orbi {
            position: absolute; inset: 0; z-index: 0; pointer-events: none;
            overflow: hidden;
        }
        .chat-wallpaper-orbi svg { width: 100%; height: 100%; }
        .chat-messages-box > *:not(.chat-wallpaper-orbi) { position: relative; z-index: 1; }

        /* ══ ПРОФИЛЬ ДРУГОГО ПОЛЬЗОВАТЕЛЯ ══ */
        .other-profile-screen {
            position: absolute; top:0; left:0; width:100%; height:100%;
            background: var(--bg-screen); z-index: 4600;
            display: none; flex-direction: column;
        }
        .other-profile-screen.open { display: flex; }
        .other-prof-hero {
            position: relative; height: 240px; overflow: hidden; flex-shrink: 0;
        }
        .other-prof-hero-bg {
            position: absolute; inset: 0;
            background: linear-gradient(160deg, #1a0b36 0%, #0c071e 50%, #050210 100%);
        }
        .other-prof-hero-glow {
            position: absolute; inset: 0;
            background: radial-gradient(ellipse at 30% 0%, rgba(112,0,255,0.4) 0%, transparent 60%),
                        radial-gradient(ellipse at 70% 100%, rgba(0,242,254,0.2) 0%, transparent 50%);
        }
        .other-prof-av {
            position: absolute; bottom: 16px; left: 16px;
            width: 78px; height: 78px; border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.3);
            overflow: hidden; box-shadow: 0 0 24px rgba(112,0,255,0.5);
            cursor: pointer;
        }
        .other-prof-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
        .other-prof-av-letter { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:white; background:linear-gradient(135deg,#764ba2,#667eea); border-radius:50%; }
        .other-prof-name-block {
            position: absolute; bottom: 18px; left: 110px; right: 50px;
        }
        .other-prof-name { font-size: 1.1rem; font-weight: 700; color: white; display:flex; align-items:center; gap:6px; }
        .other-prof-status { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
        .other-prof-actions {
            display: flex; gap: 8px; padding: 12px 16px;
            border-bottom: 1px solid var(--glass-border);
        }
        .other-prof-act-btn {
            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
            background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
            border-radius: 12px; padding: 10px 6px; color: var(--text-main);
            cursor: pointer; font-size: 0.72rem; font-weight: 600;
            transition: background 0.2s; font-family: inherit;
        }
        .other-prof-act-btn:active { background: rgba(112,0,255,0.2); }
        .other-prof-act-btn svg { color: var(--accent-purple); }
        .other-prof-stats {
            display: flex; justify-content: center; gap: 28px;
            padding: 14px 20px 10px; border-bottom: 1px solid var(--glass-border);
        }
        .other-prof-stat { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; }
        .other-prof-stat-n { font-size:1.2rem; font-weight:800; }
        .other-prof-stat-l { font-size:0.67rem; color:var(--text-muted); }
        .other-prof-grid {
            padding: 2px; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
        }
        .other-prof-grid-cell { aspect-ratio:1; overflow:hidden; cursor:pointer; }
        .other-prof-grid-cell img { width:100%; height:100%; object-fit:cover; }

        /* ══ МЕНЮ 3 ТОЧКИ В ЧУЖОМ ПРОФИЛЕ ══ */
        .profile-3dot-menu {
            position: absolute; top: 54px; right: 12px; z-index: 999;
            background: var(--drawer-bg); border: 1px solid var(--glass-border);
            border-radius: 16px; min-width: 230px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.5);
            overflow: hidden;
            animation: menuIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
            display: none;
        }
        @keyframes menuIn { from{opacity:0;transform:scale(0.85) translateY(-10px)} to{opacity:1;transform:scale(1) translateY(0)} }
        .profile-3dot-menu.open { display: block; }
        .p3m-item {
            display: flex; align-items: center; gap: 14px;
            padding: 13px 18px; cursor: pointer; transition: background 0.15s;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .p3m-item:last-child { border: none; }
        .p3m-item:active { background: var(--glass); }
        .p3m-icon { width: 34px; height: 34px; border-radius: 10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .p3m-label { font-size: 0.9rem; font-weight: 500; }
        .p3m-item.danger .p3m-label { color: #ff4757; }
        .p3m-item.danger .p3m-icon { background: rgba(255,71,87,0.15); }

        /* ══ ПОИСК В ЛЕНТЕ ══ */
        .feed-search-screen {
            position: absolute; top:0; left:0; width:100%; height:100%;
            background: var(--bg-screen); z-index: 4700;
            display: none; flex-direction: column;
        }
        .feed-search-screen.open { display: flex; }
        .feed-search-top {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 16px; border-bottom: 1px solid var(--glass-border);
        }
        .feed-search-inp {
            flex: 1; background: var(--input-bg); border: 1px solid var(--glass-border);
            border-radius: 20px; padding: 10px 16px; color: var(--text-main);
            font-size: 0.9rem; outline: none; font-family: inherit;
        }
        .feed-search-inp::placeholder { color: var(--text-muted); }
        .hashtag-chip {
            display: inline-flex; align-items: center; gap: 5px;
            background: rgba(112,0,255,0.12); border: 1px solid rgba(112,0,255,0.25);
            border-radius: 20px; padding: 5px 12px; cursor: pointer;
            font-size: 0.82rem; color: var(--accent-blue); margin: 4px;
            transition: background 0.2s;
        }
        .hashtag-chip:active { background: rgba(112,0,255,0.25); }
        .feed-search-result-user {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--glass-border);
            transition: background 0.15s;
        }
        .feed-search-result-user:active { background: var(--glass); }

        /* ══ МЕНЮ 3 ТОЧКИ В ДИАЛОГЕ ══ */
        .dialog-3dot-menu {
            position: absolute; top: 58px; right: 10px; z-index: 999;
            background: var(--drawer-bg); border: 1px solid var(--glass-border);
            border-radius: 16px; min-width: 220px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.5);
            overflow: hidden; display: none;
            animation: menuIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
        }
        .dialog-3dot-menu.open { display: block; }
        .d3m-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; cursor: pointer; transition: background 0.15s;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .d3m-item:last-child { border: none; }
        .d3m-item:active { background: var(--glass); }
        .d3m-item.danger { color: #ff4757; }
        .d3m-ico { width: 30px; height: 30px; border-radius: 8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.95rem; }
        .d3m-lbl { font-size: 0.88rem; font-weight: 500; }

        /* ══ ПОИСК ЛЮДЕЙ (ГЛАВНАЯ) ══ */
        .people-search-screen {
            position: absolute; top:0; left:0; width:100%; height:100%;
            background: var(--bg-screen); z-index: 4800;
            display: none; flex-direction: column;
        }
        .people-search-screen.open { display: flex; }
        .people-search-top {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 16px; border-bottom: 1px solid var(--glass-border);
        }
        .people-search-inp {
            flex: 1; background: var(--input-bg); border: 1px solid var(--glass-border);
            border-radius: 20px; padding: 10px 16px; color: var(--text-main);
            font-size: 0.9rem; outline: none; font-family: inherit;
        }
        .people-search-inp::placeholder { color: var(--text-muted); }

        /* ══ ВИДЕО КРУЖОК (VIDEO NOTE) ══ */
        .video-note-bubble {
            width: 180px; height: 180px; border-radius: 50%; overflow: hidden;
            border: 3px solid var(--accent-purple);
            box-shadow: 0 4px 16px rgba(112,0,255,0.4);
            position: relative; cursor: pointer;
            background: linear-gradient(135deg,#1a0b36,#0a1628);
            display: flex; align-items: center; justify-content: center;
        }
        .video-note-play {
            position: absolute; width: 50px; height: 50px; border-radius: 50%;
            background: rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;
            font-size: 1.3rem; color: white;
        }

        /* ══ КНОПКИ ОТПРАВКИ МЕДИА ══ */
        .media-send-tray {
            position: absolute; bottom: 60px; left: 10px; right: 10px;
            background: var(--drawer-bg); border: 1px solid var(--glass-border);
            border-radius: 20px; padding: 12px; z-index: 300;
            display: none; flex-wrap: wrap; gap: 8px;
            animation: sheetUp 0.25s ease;
        }
        .media-send-tray.open { display: flex; }

        /* ══ MODE SWITCH & PREMIUM UPSELL ══ */
        @keyframes btnShine { 0%{left:-100%} 100%{left:200%} }
        @keyframes starTwinkle { 0%,100%{opacity:0.2;transform:scale(0.8)} 50%{opacity:0.8;transform:scale(1)} }
        @keyframes orbGlowPulse { 0%,100%{box-shadow:0 4px 18px rgba(108,0,255,0.2),0 0 0 1px rgba(108,0,255,0.08)} 50%{box-shadow:0 4px 30px rgba(108,0,255,0.45),0 0 0 1px rgba(108,0,255,0.15)} }
        @keyframes orbTap { 0%{transform:translateY(-12px) scale(1)} 50%{transform:translateY(-16px) scale(1.1)} 100%{transform:translateY(-12px) scale(1)} }

        .upsell-feat-item {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 10px 12px;
            font-size: 0.78rem; color: rgba(255,255,255,0.72);
            display: flex; align-items: center; gap: 8px; font-weight: 500;
        }

        body.social-mode .phone-navbar {
            box-shadow: 0 4px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,0,110,0.12);
        }
        body.social-mode.dark-theme .phone-navbar {
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,0,110,0.2);
        }
        body.social-mode .nav-center-orb {
            animation: orbGlowPulse 2.5s ease-in-out infinite;
        }
        .mode-indicator {
            position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg,#6c00ff,#b224ef);
            color: white; font-size: 0.7rem; font-weight: 700;
            padding: 5px 14px; border-radius: 20px;
            z-index: 50000; letter-spacing: 0.4px; opacity: 0; transition: opacity 0.3s;
            pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(108,0,255,0.3);
        }
        .mode-indicator.visible { opacity: 1; }
        body.social-mode .mode-indicator { background: linear-gradient(135deg,#ff006e,#9b5fff); }

        /* Profile hero is always dark for white text readability */
        .profile-hero-section {
            background: radial-gradient(ellipse at 50% 0%,#2a0860 0%,#0e0430 50%,#08031a 100%) !important;
        }

        .media-type-btn {
            flex: 1; min-width: calc(25% - 6px);
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 12px 6px; background: var(--glass); border: 1px solid var(--glass-border);
            border-radius: 14px; cursor: pointer; transition: background 0.2s;
            font-size: 0.72rem; color: var(--text-muted); font-family: inherit;
        }
        .media-type-btn:active { background: rgba(112,0,255,0.2); }
        .media-type-icon {
            width: 38px; height: 38px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem;
        }

        /* ══════════════════════════════════════════════════════════════
           ORBIGRAM v16 — PREMIUM PROFILE REDESIGN
        ══════════════════════════════════════════════════════════════ */

        /* ── PREMIUM BADGE ANIMATED ── */
        @keyframes premGold { 0%,100%{filter:drop-shadow(0 0 6px #ffd700) brightness(1)} 50%{filter:drop-shadow(0 0 14px #b224ef) brightness(1.2)} }
        @keyframes premRing { 0%{box-shadow:0 0 0 0 rgba(255,215,0,0.6)} 70%{box-shadow:0 0 0 10px rgba(255,215,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,215,0,0)} }
        @keyframes cosmosRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
        @keyframes avatarGlow { 0%,100%{box-shadow:0 0 24px rgba(112,0,255,0.5),0 0 48px rgba(0,242,254,0.15)} 50%{box-shadow:0 0 36px rgba(112,0,255,0.8),0 0 70px rgba(0,242,254,0.3)} }
        @keyframes onlineRipple { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2.5);opacity:0} }
        @keyframes storyReveal { from{opacity:0;transform:scale(0.8) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
        @keyframes pubGridIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
        @keyframes statsCountUp { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
        @keyframes glassShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
        @keyframes lockFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }

        /* ── ENHANCED AVATAR WITH COSMOS RING ── */
        .premium-avatar-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .premium-avatar-cosmos-ring {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            background: conic-gradient(#FFD700 0%, #FFA500 25%, #FFEC8B 50%, #FFD700 75%, #FFA500 100%);
            animation: cosmosRotate 4s linear infinite;
            z-index: 0;
        }
        .premium-avatar-cosmos-ring::before {
            content: '';
            position: absolute;
            inset: 3px;
            border-radius: 50%;
            background: var(--bg-screen);
            z-index: 1;
        }
        .premium-avatar-img {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
        .premium-avatar-glow {
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(112,0,255,0.35) 0%, transparent 70%);
            animation: avatarGlow 3s ease-in-out infinite;
            z-index: -1;
        }
        .online-indicator-modern {
            position: absolute;
            bottom: 4px;
            right: 4px;
            width: 16px;
            height: 16px;
            background: #22c55e;
            border: 2.5px solid var(--bg-screen);
            border-radius: 50%;
            z-index: 10;
        }
        .online-indicator-modern::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 2px solid rgba(34,197,94,0.5);
            animation: onlineRipple 2s ease-out infinite;
        }

        /* ── PREMIUM BADGE ── */
        .premium-badge-animated {
            display: inline-flex; align-items: center; gap: 4px;
            background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(178,36,239,0.15));
            border: 1px solid rgba(255,215,0,0.4);
            border-radius: 20px; padding: 4px 10px;
            font-size: 0.72rem; font-weight: 700;
            color: #ffd700;
            animation: premGold 2.5s ease-in-out infinite;
            cursor: pointer;
        }
        .premium-star-icon {
            font-size: 0.8rem;
            animation: premRing 2.5s ease-in-out infinite;
        }
        .verified-check-blue {
            width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
            background: #1d9bf0; border-radius: 50%; flex-shrink: 0;
        }

        /* ── PROFILE STORIES BLOCK ── */
        .profile-stories-block {
            padding: 14px 16px 0;
        }
        .profile-stories-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 12px;
        }
        .profile-stories-title {
            font-size: 0.88rem; font-weight: 700; color: var(--text-main);
        }
        .profile-stories-archive-btn {
            display: flex; align-items: center; gap: 5px;
            font-size: 0.75rem; color: var(--accent-blue); cursor: pointer;
            background: rgba(0,180,216,0.1); border: 1px solid rgba(0,180,216,0.2);
            border-radius: 12px; padding: 4px 10px; transition: background 0.2s;
        }
        .profile-stories-archive-btn:active { background: rgba(0,180,216,0.2); }
        .profile-stories-row {
            display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 14px;
        }
        .profile-stories-row::-webkit-scrollbar { display: none; }
        .profile-story-item {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            flex-shrink: 0; cursor: pointer;
            animation: storyReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        .profile-story-ring-new {
            width: 68px; height: 68px; border-radius: 50%;
            padding: 2.5px;
            background: linear-gradient(135deg, #7000ff, #00f2fe, #b224ef);
            position: relative;
        }
        .profile-story-ring-seen {
            width: 68px; height: 68px; border-radius: 50%;
            padding: 2.5px;
            background: rgba(139,139,158,0.35);
        }
        .profile-story-ring-add {
            width: 68px; height: 68px; border-radius: 50%; padding: 2.5px;
            background: linear-gradient(135deg, rgba(112,0,255,0.4), rgba(0,242,254,0.4));
            border: 2px dashed rgba(112,0,255,0.5);
        }
        .profile-story-inner {
            width: 100%; height: 100%; border-radius: 50%;
            border: 2.5px solid var(--bg-screen);
            background: var(--input-bg); overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        .profile-story-inner img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
        .profile-story-new-dot {
            position: absolute; bottom: 1px; right: 1px;
            width: 12px; height: 12px; background: #7000ff;
            border: 2px solid var(--bg-screen); border-radius: 50%;
        }
        .profile-story-label {
            font-size: 0.67rem; color: var(--text-muted);
            max-width: 68px; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        /* ── ORBIGRAM PUBLICATIONS BLOCK ── */
        .orbigram-pubs-block {
            padding: 0 16px;
        }
        .orbigram-pubs-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 0 12px;
            border-top: 1px solid var(--glass-border);
        }
        .orbigram-pubs-title {
            display: flex; align-items: center; gap: 6px;
            font-size: 0.9rem; font-weight: 700; color: var(--text-main);
        }
        .orbigram-check {
            width: 18px; height: 18px; background: linear-gradient(135deg, #00b4d8, #7000ff);
            border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .orbigram-pubs-count {
            font-size: 0.78rem; color: var(--text-muted);
        }
        .orbigram-pubs-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
            border-radius: 16px; overflow: hidden;
        }
        .orbigram-pub-cell {
            aspect-ratio: 1; overflow: hidden; cursor: pointer; position: relative;
            background: var(--input-bg);
            animation: pubGridIn 0.5s ease both;
        }
        .orbigram-pub-cell:active { opacity: 0.85; }
        .orbigram-pub-cell img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s; }
        .orbigram-pub-cell:hover img { transform: scale(1.05); }
        .orbigram-pub-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
            opacity: 0; transition: opacity 0.2s;
            display: flex; align-items: flex-end; padding: 6px;
        }
        .orbigram-pub-cell:hover .orbigram-pub-overlay { opacity: 1; }
        .orbigram-pub-likes {
            display: flex; align-items: center; gap: 3px;
            font-size: 0.68rem; color: white; font-weight: 600;
        }

        /* ── PREMIUM LOCK CARD ── */
        .premium-lock-card {
            margin: 0 0 16px;
            background: linear-gradient(135deg, rgba(112,0,255,0.08), rgba(0,242,254,0.05));
            border: 1px solid rgba(112,0,255,0.25);
            border-radius: 20px; padding: 28px 20px;
            display: flex; flex-direction: column; align-items: center;
            text-align: center; gap: 12px;
            position: relative; overflow: hidden;
        }
        .premium-lock-card::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
            background-size: 200% 100%;
            animation: glassShimmer 3s ease-in-out infinite;
        }
        .premium-lock-icon {
            width: 64px; height: 64px;
            background: linear-gradient(135deg, rgba(112,0,255,0.2), rgba(178,36,239,0.2));
            border: 1.5px solid rgba(112,0,255,0.3);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            animation: lockFloat 3s ease-in-out infinite;
        }
        .premium-lock-text {
            font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; max-width: 240px;
        }
        .premium-get-btn {
            background: linear-gradient(135deg, #7000ff, #b224ef);
            border: none; color: white; padding: 12px 28px;
            border-radius: 22px; font-size: 0.9rem; font-weight: 700;
            cursor: pointer; font-family: inherit;
            box-shadow: 0 6px 20px rgba(112,0,255,0.4);
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .premium-get-btn:active { transform: scale(0.96); box-shadow: 0 3px 10px rgba(112,0,255,0.3); }

        /* ── OWNER PROFILE ACTION BUTTONS ── */
        .owner-actions-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 8px; padding: 12px 16px;
            border-bottom: 1px solid var(--glass-border);
        }
        .owner-action-btn {
            display: flex; align-items: center; gap: 8px;
            background: var(--glass); border: 1px solid var(--glass-border);
            border-radius: 14px; padding: 12px 14px;
            color: var(--text-main); cursor: pointer;
            font-size: 0.82rem; font-weight: 600; font-family: inherit;
            transition: background 0.2s, transform 0.15s;
        }
        .owner-action-btn:active { background: rgba(112,0,255,0.15); transform: scale(0.97); }
        .owner-action-btn.primary {
            background: linear-gradient(135deg, rgba(112,0,255,0.15), rgba(0,242,254,0.08));
            border-color: rgba(112,0,255,0.3);
            color: var(--accent-purple);
        }
        .owner-action-btn svg { flex-shrink: 0; opacity: 0.8; }

        /* ── PROFILE STATS CARD (OWNER) ── */
        .owner-stats-grid {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 8px; padding: 12px 16px 0;
        }
        .owner-stat-card {
            background: var(--glass); border: 1px solid var(--glass-border);
            border-radius: 14px; padding: 12px 10px; text-align: center;
            animation: statsCountUp 0.6s ease both;
        }
        .owner-stat-card:nth-child(2) { animation-delay: 0.1s; }
        .owner-stat-card:nth-child(3) { animation-delay: 0.2s; }
        .owner-stat-num { font-size: 1.15rem; font-weight: 800; color: var(--text-main); }
        .owner-stat-label { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }

        /* ── OWNER PUBLICATIONS SECTION ── */
        .owner-pubs-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px 12px;
            border-top: 1px solid var(--glass-border);
        }
        .owner-pubs-actions {
            display: flex; gap: 8px;
        }
        .owner-pubs-btn {
            font-size: 0.75rem; font-weight: 600; padding: 6px 14px;
            border-radius: 14px; border: none; cursor: pointer;
            font-family: inherit; transition: all 0.15s;
        }
        .owner-pubs-btn.create {
            background: linear-gradient(135deg, #7000ff, #00f2fe);
            color: white;
            box-shadow: 0 4px 14px rgba(112,0,255,0.35);
        }
        .owner-pubs-btn.manage {
            background: var(--glass); border: 1px solid var(--glass-border);
            color: var(--text-muted);
        }
        .owner-pubs-btn:active { transform: scale(0.95); }

        /* ── STATUS PILL ── */
        .profile-status-pill {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px; padding: 6px 14px;
            font-size: 0.8rem; color: rgba(255,255,255,0.85);
            max-width: 280px; text-align: center; justify-content: center;
            cursor: default;
        }
        body.light-theme .profile-status-pill {
            background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1);
            color: var(--text-main);
        }

        /* ── ENHANCED HERO FOR PROFILES ── */
        .op-hero-enhanced {
            position: relative; min-height: 270px; overflow: hidden; flex-shrink: 0;
        }
        .op-hero-stars {
            position: absolute; inset: 0; overflow: hidden; pointer-events: none;
        }
        .op-hero-star {
            position: absolute; border-radius: 50%; background: white;
            animation: starTwinkle 3s infinite;
        }
        .op-hero-av-wrap {
            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: 10px;
        }
        .op-hero-av-size {
            width: 96px; height: 96px;
        }

        /* ── OWNER PROFILE - CENTERED HERO ── */
        .owner-hero-center {
            position: absolute; bottom: 16px; left: 0; right: 0;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
        }
        .owner-hero-name {
            font-size: 1.35rem; font-weight: 800; color: white;
            display: flex; align-items: center; gap: 8px;
        }
        .owner-hero-username {
            font-size: 0.85rem; color: rgba(255,255,255,0.65);
        }
        .owner-hero-badges {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
        }

        /* ── PUBLICATIONS MANAGE ROW ── */
        .pubs-manage-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 16px 12px;
        }

/* ═══════════════ STYLE BLOCK 2 ═══════════════ */
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
        .v9-sett-section-label {
            padding: 12px 20px 4px;
            font-size: 0.72rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            font-weight: 600;
        }
        .v9-sett-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 13px 20px;
            cursor: default;
            transition: background 0.15s;
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .v9-sett-row:active { background: var(--glass); }
        .v9-sett-row[onclick] { cursor: pointer; }
        .v9-sett-row-ico {
            width: 38px; height: 38px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 0.95rem; flex-shrink: 0;
        }
        .v9-sett-row-info { flex: 1; }
        .v9-sett-row-info h4 { font-size: 0.9rem; font-weight: 500; margin-bottom: 1px; }
        .v9-sett-row-info p { font-size: 0.73rem; color: var(--text-muted); }
        .v9-toggle { position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0; }
        .v9-toggle input { opacity:0;width:0;height:0; }
        .v9-toggle-slider {
            position:absolute;inset:0;background:rgba(255,255,255,0.12);
            border-radius:26px;transition:background 0.3s;cursor:pointer;
        }
        .v9-toggle-slider:before {
            content:'';position:absolute;height:20px;width:20px;
            left:3px;bottom:3px;background:white;border-radius:50%;transition:transform 0.3s;
        }
        .v9-toggle input:checked + .v9-toggle-slider { background: var(--accent-purple); }
        .v9-toggle input:checked + .v9-toggle-slider:before { transform: translateX(20px); }
        .accent-color-dot {
            width:38px;height:38px;border-radius:50%;cursor:pointer;
            transition:transform 0.2s,box-shadow 0.2s;border:3px solid transparent;
        }
        .accent-color-dot:active { transform:scale(0.9); }
        .accent-color-dot.selected { border-color:white;box-shadow:0 0 12px rgba(255,255,255,0.4); }
        .theme-preview-card {
            flex:1;padding:4px;cursor:pointer;border-radius:12px;
            border:2px solid transparent;transition:border-color 0.2s;
        }
        .theme-preview-card.active { border-color:var(--accent-purple); }
        .bubble-style-preview {
            flex:1;padding:8px;cursor:pointer;border-radius:12px;
            border:2px solid var(--glass-border);transition:border-color 0.2s;
            display:flex;flex-direction:column;align-items:center;
        }
        .bubble-style-preview.active { border-color:var(--accent-purple); }
        .emoji-reaction-overlay {
            position:absolute;background:var(--drawer-bg);border:1px solid var(--glass-border);
            border-radius:50px;padding:8px 12px;display:flex;gap:10px;z-index:600;
            box-shadow:0 8px 24px rgba(0,0,0,0.5);bottom:calc(100% + 8px);left:0;
        }


@keyframes orbCallGlow {
    0%   { opacity:0.5; transform:scale(0.96); }
    100% { opacity:1;   transform:scale(1.04); }
}
@keyframes orbAnswerPulse {
    0%,100% { transform:scale(1); }
    50%     { transform:scale(1.1); }
}