/* ============================================================
   CHOOBIN - Main Stylesheet
   Complete Telegram-like Web Messenger UI
   ============================================================ */

@import url('theme.css');

/* === RESET & BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    direction: ltr;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
svg { width: 20px; height: 20px; vertical-align: middle; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* === GLASS EFFECT === */
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* === APP LAYOUT === */
#app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    position: relative;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 16px;
    height: var(--header-height);
    border-bottom: 1px solid var(--glass-border);
}

.sidebar-header .app-logo { margin-left: 4px; }

.app-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.logo-icon { width: 36px; height: 36px; }
.logo-icon.lg { width: 56px; height: 56px; }
.logo-img {
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.logo-text {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-actions {
    display: flex;
    gap: 8px;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    width: 36px;
    height: 36px;
}

.icon-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.icon-btn.active {
    color: var(--primary);
    background: rgba(59, 130, 246, 0.14);
}

/* === NOTIFICATIONS === */
.notif-bell {
    position: relative;
}
.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent, #f87171);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-primary), 0 2px 8px rgba(248, 113, 113, 0.6);
}
.notif-panel {
    position: absolute;
    top: var(--header-height);
    left: 12px;
    right: 12px;
    z-index: 40;
    max-height: min(60vh, 420px);
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(16, 16, 18, 0.96), rgba(8, 8, 10, 0.98));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--glass-border);
}
.notif-list {
    overflow-y: auto;
    scrollbar-width: thin;
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.notif-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.notif-item.unread {
    background: rgba(59, 130, 246, 0.09);
}
.notif-item.unread .notif-title {
    color: var(--text-primary);
    font-weight: 700;
}
.notif-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--bg-tertiary);
    border-radius: 10px;
}
.notif-body {
    min-width: 0;
    flex: 1;
}
.notif-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.notif-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* === SEARCH === */
.search-box {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    margin: 8px 12px;
    border-radius: var(--radius-md);
    position: relative;
}

.search-box-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    padding: 4px 0;
}

.search-box input::placeholder { color: var(--text-muted); }

.search-results {
    max-height: min(340px, 45vh);
    overflow-y: auto;
    border-top: 1px solid var(--glass-border);
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 8px 6px 2px;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}

.search-item:hover { background: var(--bg-tertiary); }

.search-item > img,
.search-item .search-item-avatar > img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.search-item-avatar { position: relative; flex-shrink: 0; }
.search-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--bg-tertiary);
}
.bot-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--bg-tertiary);
}

.search-item-text { min-width: 0; }
.search-item-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item-sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-type-tag {
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 1px 6px;
    vertical-align: 1px;
}
.search-online { color: #4caf50; }
.search-offline { color: var(--text-muted); }
.search-empty {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 14px 6px;
}

/* === STORIES BAR === */
.stories-bar {
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-border);
    overflow: hidden;
}

.stories-scroll {
    display: flex;
    gap: 12px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    min-width: 60px;
}

.story-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, var(--primary), var(--accent), var(--warning));
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-ring.plus-ring {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.story-ring.seen {
    background: linear-gradient(45deg, #3b82f6, #60a5fa, #22d3ee);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.story-view-count {
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.story-reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 10px 12px;
}

.story-reaction-btn {
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
    transition: transform .12s, background .12s;
}
.story-reaction-btn .cnt { font-size: 11px; color: var(--text-muted); margin-left: 2px; }
.story-reaction-btn:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.1); }
.story-reaction-btn.mine {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
}
.story-reaction-btn.mine .cnt { color: #93c5fd; }

.story-viewers-btn {
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
}
.story-viewers-btn:hover { background: rgba(255, 255, 255, 0.1); }

.story-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-secondary);
}

.story-name {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-story .story-ring svg {
    width: 22px;
    height: 22px;
}

/* === FAVORITES === */
.favorites-section {
    padding: 8px 12px;
    border-bottom: 1px solid var(--glass-border);
}

.section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 4px 0 8px;
}

.fav-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.fav-list::-webkit-scrollbar { display: none; }

.fav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.fav-item:hover {
    background: var(--primary);
    color: var(--text-inverse);
}

.bot-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    border-radius: 6px;
    background: rgba(59, 130, 246, .18);
    color: var(--primary);
    vertical-align: middle;
}
.bot-item:hover .bot-badge {
    background: rgba(255, 255, 255, .2);
    color: var(--text-inverse);
}

.avatar-sm img, .avatar-xs img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-xs img { width: 28px; height: 28px; }

/* === CHAT LIST === */
.chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

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

.chat-item:hover { background: var(--bg-tertiary); }

.chat-avatar {
    position: relative;
    flex-shrink: 0;
}

.chat-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-online-dot {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.bot-avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--bg-secondary);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.bot-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    vertical-align: 2px;
    color: #bfdbfe;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(147, 51, 234, 0.35));
    border: 1px solid rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.25);
}

.fav-item.bot-item {
    background: linear-gradient(180deg, rgba(37, 50, 90, 0.55), rgba(17, 24, 39, 0.6));
    border: 1px solid rgba(96, 165, 250, 0.18);
}
.fav-item.bot-item:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

.badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
}

.badge-inline {
    position: static;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 11px;
    min-width: 18px;
    padding: 2px 6px;
}

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

.chat-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-preview {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.chat-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* === BOTTOM NAV === */
.bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 6px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-xl);
    height: calc(var(--nav-height) - 10px);
    position: relative;
    z-index: 5;
    margin: 0 12px 12px;
    overflow: visible;
}

.nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: translate(0, 0);
    transition: transform var(--transition-slow);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 1px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 16px 14px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.35;
    transition: color var(--transition-fast);
    position: relative;
    border-radius: 999px;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.nav-item:hover { color: var(--text-primary); }
.nav-item:hover .nav-ico {
    background: var(--primary-glow);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.nav-item.active { color: var(--primary); }
.nav-item.active > span:last-child:not(.nav-ico) {
    font-weight: 800;
    transform: translateY(-2px);
    flex-shrink: 0;
}

.nav-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    color: currentColor;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}

.nav-item.active .nav-ico {
    background: var(--primary);
    color: var(--text-inverse);
    transform: translateY(-9px) scale(1.1);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 22px var(--primary-glow);
}
.nav-item.active .nav-ico svg { color: var(--text-inverse); }

.nav-item.active .nav-ico::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed var(--primary);
    animation: nav-orbit 3s linear infinite;
    pointer-events: none;
}

.nav-item svg { width: 24px; height: 24px; }

.nav-item.admin-nav svg {
    color: var(--admin-gold);
}
.nav-item.admin-nav:hover .nav-ico { background: var(--admin-glow); }
.nav-item.admin-nav.active { color: var(--admin-gold); }
.nav-item.admin-nav.active .nav-ico {
    background: var(--admin-gold);
    color: #0a0a0a;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 22px var(--admin-glow);
}
.nav-item.admin-nav.active .nav-ico::after {
    border-color: var(--admin-gold);
}
.nav-item.admin-nav.active .nav-ico svg { color: #0a0a0a; }

@keyframes nav-orbit {
    to { transform: rotate(360deg); }
}

/* === MAIN AREA === */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-chat);
    height: 100vh;
    overflow: hidden;
}

/* === WELCOME SCREEN === */
.welcome-screen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.welcome-content {
    text-align: center;
    max-width: 480px;
}

.welcome-logo svg,
.welcome-logo img { width: 80px; height: 80px; }
.welcome-logo img {
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.welcome-content h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 16px 0 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-sub {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 32px;
}

.welcome-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.wf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
}

.wf-item svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

.welcome-user {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 16px;
}

/* === CHAT VIEW === */
.chat-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    height: var(--header-height);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    z-index: 10;
}

.chat-header .chat-info { flex: 1; }
.chat-header .chat-name { font-size: 16px; }
.chat-header .chat-status { font-size: 12px; color: var(--success); }

/* --- Chat background picker (preset wallpapers) --- */
.bg-picker {
    position: absolute;
    top: calc(var(--header-height) + 8px);
    right: 12px;
    z-index: 1200;
    width: 248px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    padding: 12px;
    animation: menuPop 0.18s ease;
    transform-origin: top right;
}
.bg-picker-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.bg-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.bg-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
}
.bg-swatch.active {
    border-color: var(--primary);
}
.bg-swatch:hover {
    transform: scale(1.06);
}
.bg-picker-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
}

.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.messages-area::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* === MESSAGE BUBBLES === */
.message {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    margin-bottom: 6px;
    animation: messageIn 0.2s ease;
    position: relative;
}

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

.message.sent {
    align-self: flex-end;
    align-items: flex-end;
}

.message.received {
    align-self: flex-start;
    align-items: flex-start;
}

/* Round sender avatar on the last message of each group run */
.message.received.has-avatar {
    padding-left: 42px;
}
.msg-avatar {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
}
.message.has-avatar > .msg-avatar { display: block; }
.msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msg-avatar a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.message-content {
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    max-width: 100%;
}

.message.sent .message-content {
    background: var(--bubble-sent);
    color: var(--bubble-sent-text);
}

.message.received .message-content {
    background: var(--bubble-received);
    color: var(--bubble-received-text);
    border: 1px solid var(--glass-border);
}

.message-time {
    font-size: 10px;
    color: inherit;
    opacity: 0.6;
    display: block;
    margin-top: 4px;
    text-align: right;
}

.message.received .message-time {
    color: #ffffff;
}

.message.sent .message-time {
    color: rgba(0, 0, 0, 0.6);
}

.message-meta {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-size: 10px;
}
.message-meta .message-time {
    display: inline;
    margin-top: 0;
}
.message-sender {
    display: inline;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.85;
    margin-right: 6px;
    cursor: default;
    user-select: none;
}

.message .message-edited {
    font-size: 10px;
    opacity: 0.5;
    margin-right: 4px;
}

.message-pinned {
    font-size: 11px;
    margin-right: 6px;
}

.reply-preview {
    background: rgba(0, 0, 0, 0.14);
    border-left: 3px solid var(--reply-accent, var(--primary));
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.message.sent .reply-preview {
    background: rgba(0, 0, 0, 0.06);
    border-left-color: var(--reply-accent-dark, var(--primary-dark));
}

.reply-preview span {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: var(--reply-accent, var(--primary));
    margin-bottom: 2px;
}

.message.sent .reply-preview span { color: var(--reply-accent-dark, var(--primary-dark)); }

.reply-preview .reply-sender { display: block; }
.reply-preview .reply-media {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    font-size: 12px;
    color: inherit;
    opacity: 0.9;
    margin-bottom: 0;
}
.reply-preview .reply-media svg { flex: none; }
.message.sent .reply-preview .reply-media { color: inherit; }

.forward-preview {
    font-size: 12px;
    margin-bottom: 4px;
    opacity: 0.85;
}

.forward-preview strong { font-weight: 600; }

.flash-highlight {
    animation: flashHighlight 1.8s ease;
    border-radius: var(--radius-lg);
}

@keyframes flashHighlight {
    0%, 100% { background: transparent; }
    20%, 60% { background: rgba(255, 255, 255, 0.14); }
}

/* Pinned banner */
.pinned-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--glass-border);
    cursor: pointer;
    flex-shrink: 0;
}

.pinned-banner > svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

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

.pinned-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pinned-body {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bot start banner (glass intro card inside the messages area) */
.bot-start-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    margin: auto;
    width: min(100%, 560px);
    background:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.6px) 0 0/20px 20px,
        radial-gradient(ellipse 70% 60% at 10% -10%, rgba(255, 255, 255, 0.07), transparent 62%),
        radial-gradient(ellipse 65% 50% at 98% 118%, rgba(96, 165, 250, 0.09), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.bot-intro-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.bot-intro-text { flex: 1; min-width: 0; }
.bot-intro-title { font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: .2px; }
.bot-intro-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-top: 4px;
    white-space: pre-line;
}
.bot-start-btn {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 8px 20px;
}

/* Reply bar above input */
.reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--reply-accent, var(--primary));
}

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

.reply-bar-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--reply-accent, var(--primary));
}

.reply-bar-body {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-input-area {
    display: flex;
    flex-direction: column;
}

.message-input-area textarea {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    padding: 6px 4px;
    font-size: 14px;
    color: var(--text-primary);
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 120px;
}

.message-input-area textarea::placeholder { color: var(--text-muted); }

/* === MESSAGE INPUT === */
.message-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
}

.message-input-area input {
    flex: 1;
    background: var(--bg-tertiary);
    border: none;
    outline: none;
    padding: 10px 16px;
    border-radius: var(--radius-xl);
    font-size: 15px;
    color: var(--text-primary);
}

.message-input-area input::placeholder { color: var(--text-muted); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary {
    background: var(--primary);
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-block { width: 100%; }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover {
    background: #e05555;
    transform: translateY(-1px);
}

.btn-outline-danger {
    background: none;
    border: 1px solid var(--danger);
    color: var(--danger);
}
.btn-outline-danger:hover {
    background: rgba(220, 38, 38, 0.12);
}

/* === AUTH PAGES === */
body.auth-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: none;
}

.auth-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(1100px 750px at 15% 10%, var(--bg-tertiary), transparent 60%),
        radial-gradient(900px 650px at 85% 90%, var(--bg-tertiary), transparent 60%),
        linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 55%, var(--bg-primary) 100%);
}

.auth-page::before,
.auth-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.auth-page::before {
    top: -220px;
    left: -200px;
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 62%);
    opacity: .14;
}

.auth-page::after {
    bottom: -240px;
    right: -220px;
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
    opacity: .12;
}

.auth-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 16px;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    scrollbar-width: none;
}

.auth-container::-webkit-scrollbar { display: none; }

@media (max-height: 740px) {
    .auth-container { transform: scale(.92); }
    .auth-card { padding: 24px; }
}

@media (max-height: 650px) {
    .auth-container { transform: scale(.84); }
    .auth-card { padding: 18px; }
}

@media (max-width: 767px) {
    .auth-container { padding: 10px; }
    .auth-form .form-control { padding: 11px 16px; }
}

.auth-card {
    padding: 34px;
    border-radius: var(--radius-xl);
    background: linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 45%, rgba(255,255,255,.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 0 40px rgba(255,255,255,.03);
}

.auth-logo {
    text-align: center;
    margin-bottom: 24px;
}

.auth-logo h1 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 12px;
}

.auth-logo p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form .form-control {
    border-radius: 999px;
    padding: 13px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--glass-border);
}

.auth-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), 0 0 24px rgba(255, 255, 255, 0.06);
}

.auth-form .btn-primary {
    border-radius: 999px;
    padding: 14px 20px;
    font-size: 15px;
    letter-spacing: .3px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.auth-form .btn-primary:hover {
    box-shadow: 0 6px 22px var(--primary-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.phone-verify-row {
    display: flex;
    gap: 8px;
}

.phone-verify-row .form-control { flex: 1; min-width: 0; }

.auth-logo .logo-icon { filter: drop-shadow(0 6px 18px rgba(255, 255, 255, 0.18)); }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control {
    padding: 12px 14px;
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 15px;
    transition: all var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group { flex: 1; min-width: 0; }
.form-row .form-group .form-control { width: 100%; min-width: 0; }

@media (max-width: 420px) {
    .form-row { flex-direction: column; gap: 14px; }
    .auth-card { padding: 18px 20px; }
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--primary);
    font-weight: 600;
}

/* === AUTH PAGES — FANCY === */
.auth-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
    z-index: 0;
    pointer-events: none;
}

.auth-glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 58%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -42%);
    z-index: 0;
    pointer-events: none;
}

.auth-container { z-index: 1; }

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-badge {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
    backdrop-filter: blur(8px);
}

.auth-badge::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
}

.auth-badge .logo-icon { width: 50px; height: 50px; }
.auth-badge svg { width: 50px; height: 50px; }

.auth-brand h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0;
    background: linear-gradient(120deg, #ffffff 20%, #9a9a9a 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.auth-brand p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 6px;
    letter-spacing: .2px;
}

.auth-card { position: relative; overflow: hidden; }

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}

.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field .auth-ico {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color var(--transition-fast);
    z-index: 1;
}

.auth-field .auth-ico svg { width: 100%; height: 100%; display: block; }

.auth-field .form-control {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--glass-border);
}

.auth-field:focus-within .auth-ico { color: var(--primary); }

.auth-field:focus-within .form-control {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), 0 0 30px rgba(255,255,255,.07);
}

.auth-toggle-pass {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 1;
}

.auth-toggle-pass:hover { color: var(--text-primary); background: rgba(255,255,255,.07); }

.auth-toggle-pass svg { width: 18px; height: 18px; }

.auth-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-inverse);
    background: linear-gradient(135deg, #ffffff 0%, #d6d6d6 100%);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 3px var(--primary-glow);
}

.auth-submit:active { transform: translateY(0); }

.auth-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.9), transparent);
    transform: skewX(-20deg);
    animation: authShine 4.5s ease-in-out infinite;
}

@keyframes authShine {
    0%   { left: -80%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }

.auth-footer a.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.05);
    color: var(--text-primary);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.auth-footer a.pill:hover {
    border-color: var(--primary);
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.auth-features {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,.03);
}

.auth-chip b { color: var(--text-primary); }

.auth-fancy .auth-brand,
.auth-fancy .auth-card,
.auth-fancy .auth-features,
.auth-fancy .auth-footer {
    animation: authUp .7s cubic-bezier(.25,.46,.45,.94) both;
}

.auth-fancy .auth-card { animation-delay: .08s; }
.auth-fancy .auth-features { animation-delay: .18s; }
.auth-fancy .auth-footer { animation-delay: .26s; }

@keyframes authUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-height: 740px) {
    .auth-brand { margin-bottom: 14px; }
    .auth-badge { width: 64px; height: 64px; margin-bottom: 10px; }
    .auth-badge .logo-icon, .auth-badge svg { width: 38px; height: 38px; }
    .auth-brand h1 { font-size: 24px; }
    .auth-features { margin-top: 12px; }
}

@media (max-height: 680px) {
    .auth-badge { width: 52px; height: 52px; margin-bottom: 8px; }
    .auth-badge .logo-icon, .auth-badge svg { width: 30px; height: 30px; }
    .auth-brand h1 { font-size: 21px; }
    .auth-brand p { font-size: 13px; margin-top: 4px; }
    .auth-card { padding: 16px 20px; }
    .auth-form { gap: 11px; }
    .auth-form .form-control { padding: 10px 16px; }
    .auth-features { display: none; }
    .auth-divider { margin-top: 14px !important; }
    .auth-footer { margin-top: 12px; }
}

/* === SETTINGS CHAT BACKGROUND SWATCHES === */
.bg-swatch {
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bg-swatch:hover {
    transform: scale(1.12);
    border-color: var(--primary) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}
.bg-swatch.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px var(--primary);
}

/* === ALERTS === */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-danger {
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.alert-success {
    background: rgba(0, 184, 148, 0.1);
    color: var(--success);
    border: 1px solid rgba(0, 184, 148, 0.2);
}

/* === MODAL === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modalFade 0.22s ease;
}

.modal-overlay > div,
.modal-overlay > .auth-card {
    animation: modalPop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

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

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.86) translateY(16px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes menuPop {
    from { opacity: 0; transform: scale(0.92) translateY(-6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.story-viewer {
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* === PROFILE PAGE === */
.profile-body {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

.profile-page {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    background: var(--bg-primary);
}

.profile-scroll {
    overflow-y: auto;
    max-height: 100vh;
    max-height: 100dvh;
    padding-bottom: 96px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
    .profile-page {
        max-width: 100%;
        border-left: none;
        border-right: none;
    }
}

.profile-nav {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 496px;
    z-index: 50;
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    margin: 0;
}
.profile-nav .nav-ico {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.05);
}
.profile-nav .nav-item.active .nav-ico {
    background: var(--primary);
    color: var(--text-inverse);
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 16px var(--primary-glow);
    border-color: rgba(255,255,255,0.15);
}
.profile-nav .nav-item.active .nav-ico::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px dashed var(--primary);
    animation: nav-orbit 3s linear infinite;
    pointer-events: none;
}

@media (max-width: 520px) {
    .profile-nav {
        bottom: 8px;
        width: calc(100% - 16px);
        margin: 0;
        border-radius: 18px;
    }
}

.story-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.story-viewer-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-viewer-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.story-viewer-body {
    padding: 16px;
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.story-viewer-body img, .story-viewer-body video {
    max-height: 50vh;
    border-radius: var(--radius-md);
}

.story-viewer-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--glass-border);
}

.story-viewer-footer input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* === USER MENU === */
.user-menu {
    position: fixed;
    bottom: 60px;
    left: 8px;
    width: 260px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    z-index: 100;
    overflow: hidden;
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.user-menu-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.user-menu-name {
    font-weight: 600;
    font-size: 14px;
}

.user-menu-phone {
    font-size: 12px;
    color: var(--text-muted);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    transition: background var(--transition-fast);
}

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

.user-menu-item.logout-item {
    color: var(--danger);
    border-top: 1px solid var(--glass-border);
}

/* === EMPTY STATE === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 12px;
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--text-muted);
    opacity: 0.5;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* === RESPONSIVE === */
.mobile-back { display: none; }

@media (max-width: 768px) {
    body, #app, .sidebar {
        height: 100dvh;
    }
    .sidebar {
        width: 100%;
        min-width: 100%;
    }
    .welcome-screen { display: none; }
    .main-area { display: none; }
    .mobile-back { display: flex; }
    body.chat-open .sidebar { display: none; }
    body.chat-open .main-area {
        display: flex;
        width: 100%;
    }
    .chat-view { height: 100dvh; }
    .bottom-nav {
        padding-bottom: calc(2px + env(safe-area-inset-bottom));
        flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .sidebar { width: var(--sidebar-width); }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.fade-in { animation: fadeIn 0.3s ease; }
.slide-up { animation: slideUp 0.4s ease; }

/* === LOADING === */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === ADMIN STYLES === */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--admin-gold), #b8941a);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
}

.admin-badge svg { width: 12px; height: 12px; }

/* === TOGGLE SWITCH === */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-tertiary);
    border-radius: 24px;
    transition: var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text-inverse);
    border-radius: 50%;
    transition: var(--transition-fast);
}

.toggle input:checked + .toggle-slider {
    background: var(--primary);
}

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

/* === TABLE === */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
    font-size: 13px;
}

th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
}

tr:hover td {
    background: var(--bg-tertiary);
}

/* === BADGE STATUS === */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-active { background: rgba(0, 184, 148, 0.15); color: var(--success); }
.status-inactive { background: rgba(178, 190, 195, 0.15); color: var(--text-muted); }
.status-suspended { background: rgba(255, 107, 107, 0.15); color: var(--danger); }
.status-pending { background: rgba(253, 203, 110, 0.15); color: var(--warning-dark); }

/* === STAT CARDS === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--glass-shadow);
}

.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-card .stat-icon svg { width: 20px; height: 20px; }

.stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* === PAGE HEADER === */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--glass-border);
}

.page-header h1 {
    font-size: 20px;
    font-weight: 700;
}

/* === OUTLINE BUTTON === */
.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--glass-border);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* === MESSAGE AUTHOR === */
.message-author {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin: 0 14px 2px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-badge {
    display: inline-block;
    font-size: 0.95em;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1;
}

.message-sender .premium-badge,
.message-author .premium-badge {
    font-size: 11px;
}

#premiumIconPicker .premium-icon-opt {
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
#premiumIconPicker .premium-icon-opt:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.35);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
    transform: translateY(-2px);
}
#premiumIconPicker .premium-icon-opt.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--bg-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--primary);
    transform: translateY(-2px);
}

/* === PLATFORM STAFF BADGE (owner / admins) === */
.staff-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    margin-left: 3px;
}
.staff-badge .rxn-emoji {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
}
.message-sender .staff-badge .rxn-emoji,
.message-author .staff-badge .rxn-emoji {
    width: 13px;
    height: 13px;
}

/* === ANIMATED PREMIUM BADGES === */
.premium-badge.premium-anim {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}
.premium-badge.premium-anim .rxn-emoji {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
}
.message-sender .premium-badge.premium-anim .rxn-emoji,
.message-author .premium-badge.premium-anim .rxn-emoji {
    width: 13px;
    height: 13px;
}
.premium-badge.premium-anim::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.55), transparent 70%);
    filter: blur(1px);
    z-index: 0;
    animation: premiumGlow 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes premiumGlow {
    0%, 100% { opacity: 0.45; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* === MESSAGE REACTIONS === */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0;
    max-width: 100%;
    width: fit-content;
}
.message.sent .message-reactions {
    align-self: flex-end;
    justify-content: flex-end;
}
.message.received .message-reactions {
    align-self: flex-start;
    justify-content: flex-start;
}

.message-reactions.has-new {
    position: relative;
}
.message-reactions.has-new .reaction-chip:first-child {
    border-color: var(--primary);
    animation: reactionNewPulse 1.4s ease infinite;
}
@keyframes reactionNewPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35), 0 0 6px rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 0 14px rgba(59, 130, 246, 0.7); }
}

/* === CALLS === */
.call-header-btn svg {
    width: 20px;
    height: 20px;
}
.call-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(4, 4, 6, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.call-overlay #callRemoteVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.call-overlay[data-mode="video"] #callRemoteVideo {
    object-fit: contain;
    box-shadow: inset 0 40px 90px rgba(0, 0, 0, 0.45), inset 0 -70px 90px rgba(0, 0, 0, 0.45);
}
.call-overlay.call-connected[data-mode="video"] .call-overlay-ui {
    height: 100%;
    justify-content: space-between;
    padding: 16px;
}
.call-overlay.call-connected[data-mode="video"] .call-avatar,
.call-overlay.call-connected[data-mode="video"] .call-state {
    display: none;
}
.call-overlay.call-connected[data-mode="video"] .call-name {
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.call-overlay.call-connected[data-mode="video"] .call-timer {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.call-overlay.call-connected[data-mode="video"] .call-actions {
    margin-top: 0;
    align-self: flex-end;
    justify-content: center;
    width: 100%;
    padding-bottom: 6px;
}
.call-overlay #callRemoteVideo[style*="display: none"] {
    display: none !important;
}
.call-overlay-ui {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}
.call-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.35);
    background: #1a1a1a;
}
.call-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}
.call-state {
    font-size: 13px;
    color: var(--text-secondary);
}
.call-timer {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.call-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 18px;
}
.call-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), background var(--transition-fast);
}
.call-btn svg {
    width: 24px;
    height: 24px;
}
.call-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.18);
}
.call-btn-end {
    width: 72px;
    height: 72px;
    background: var(--danger, #ef4444);
    color: #fff;
    box-shadow: 0 8px 26px rgba(239, 68, 68, 0.45);
}
.call-btn-end:hover {
    background: #dc2626;
}
.call-btn-answer {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 8px 26px rgba(34, 197, 94, 0.45);
}
.call-btn-answer:hover {
    background: #16a34a;
}
#callLocalVideo {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 101;
    width: 128px;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    background: #000;
}
.call-incoming {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(4, 4, 6, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: callSlideUp 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes callSlideUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.call-incoming .call-avatar {
    animation: callPulseRing 1.6s ease infinite;
}
@keyframes callPulseRing {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70% { box-shadow: 0 0 0 28px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-xl);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: reactionPop 0.3s ease;
}

.reaction-chip .rxn-emoji {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    animation: reactionEmojiPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-chip:hover {
    border-color: var(--primary);
    transform: scale(1.08);
}

.reaction-chip:hover .rxn-emoji {
    animation: reactionWiggle 0.5s ease;
}

.reaction-chip.mine {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

.reaction-chip.mine .rxn-emoji {
    animation-delay: 0.05s;
}

.reaction-chip.star-chip {
    border-color: var(--admin-gold);
    color: var(--admin-gold);
    background: rgba(212, 175, 55, 0.08);
}

@keyframes reactionPop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes reactionEmojiPop {
    0% { transform: scale(0.2) rotate(-15deg); opacity: 0; }
    70% { transform: scale(1.35) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes reactionWiggle {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(12deg) scale(1.25); }
    50% { transform: rotate(-12deg) scale(1.25); }
    75% { transform: rotate(6deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

/* === REACTION TRIGGER === */
.reaction-trigger {
    position: absolute;
    right: -30px;
    top: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    box-shadow: var(--glass-shadow);
    font-size: 14px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
}

.message:hover .reaction-trigger {
    display: flex;
    opacity: 1;
}

.message.received .reaction-trigger {
    left: -30px;
    right: auto;
}

/* === REACTION PICKER === */
.reaction-picker {
    position: fixed;
    z-index: 200;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    padding: 10px;
    animation: slideUp 0.2s ease;
    min-width: 220px;
    max-width: 340px;
    max-width: min(340px, calc(100vw - 16px));
}

@media (max-width: 480px) {
    .message-input-area .emoji-panel {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }
    .message-input-area .attach-menu {
        right: 8px;
        left: 8px;
    }
    .reaction-picker {
        min-width: 0;
    }
}

.reaction-picker-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.reaction-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rp-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    animation: reactionPop 0.3s ease;
}

.rp-btn .rxn-emoji {
    display: inline-block;
    line-height: 1;
    animation: reactionEmojiPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rp-btn:hover {
    transform: scale(1.25);
}

.rp-btn:hover .rxn-emoji {
    animation: reactionWiggle 0.5s ease;
}

.rp-btn.mine {
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--primary);
}

.rp-btn.star-rp {
    background: rgba(212, 175, 55, 0.15);
}

/* === ANIMATED EMOJI (LOTTIE) === */
.rxn-emoji {
    position: relative;
    overflow: hidden;
}
.rxn-emoji svg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
.rxn-emoji.lottie-ready {
    font-size: 0;
}
.reaction-chip .rxn-emoji {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.rp-btn .rxn-emoji {
    width: 38px;
    height: 38px;
}

/* === REACTION CONFIG CHIP === */
.rxn-config-chip {
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    border: 1.5px solid var(--glass-border);
    background: var(--bg-tertiary);
    font-size: 18px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rxn-config-chip.selected {
    border-color: var(--primary);
    background: var(--primary);
    transform: scale(1.05);
}

/* === MESSAGE INPUT (sticky, rounded, floating above the messages) === */
.message-input-area {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 8px;
    margin: auto auto 16px;
    width: min(100%, 1020px);
    background:
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.6px) 0 0/24px 24px,
        radial-gradient(ellipse 70% 55% at 12% -8%, rgba(255, 255, 255, 0.03), transparent 62%),
        radial-gradient(ellipse 60% 45% at 95% 115%, rgba(147, 197, 253, 0.025), transparent 62%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.7), rgba(3, 3, 3, 0.72));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.message-input-area:focus-within {
    border-color: rgba(100, 181, 246, 0.5);
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(100, 181, 246, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.message-input-area .reply-bar {
    margin-bottom: 4px;
    margin-top: 2px;
}

.message-input-area .msg-input-row {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-start;
}

.message-input-area .icon-btn.round {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.message-input-area .icon-btn.round:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.08);
}

.message-input-area textarea {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    padding: 9px 6px;
    font-size: 15px;
    color: var(--text-primary);
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 120px;
}

.message-input-area textarea::placeholder { color: var(--text-muted); }

.send-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: 0 6px 18px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.send-btn:hover {
    transform: scale(1.1) rotate(-6deg);
    filter: brightness(1.12);
    box-shadow: 0 8px 24px var(--primary-glow);
}

.send-btn svg {
    width: 20px;
    height: 20px;
}

/* === COMPOSER SEND / VOICE BUTTON SWAP === */
.composer-swap-slot {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
}
.composer-swap-slot .send-btn,
.composer-swap-slot .voice-rec-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.composer-swap-slot .voice-rec-btn {
    transform-origin: center;
}
.composer-swap-slot .send-btn {
    transform-origin: center;
}
@keyframes composerPopIn {
    from { transform: scale(0.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes composerPopOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.3); opacity: 0; }
}
.swap-in { animation: composerPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.swap-out { animation: composerPopOut 0.18s ease-in forwards; }

/* === VOICE RECORDING === */
.voice-rec-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--text-primary);
    font-size: 14px;
}
.voice-rec-bar .rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: recPulse 1.1s ease-in-out infinite;
}
.voice-rec-bar .voice-rec-label {
    font-weight: 600;
    color: #f87171;
}
.voice-rec-bar .voice-rec-timer {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    min-width: 40px;
}
.voice-rec-bar .voice-rec-spacer {
    flex: 1;
}
.voice-rec-bar .voice-rec-stop {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
    transition: transform var(--transition-fast);
}
.voice-rec-bar .voice-rec-stop:hover {
    transform: scale(1.08);
}
.voice-rec-bar .voice-rec-stop svg {
    width: 16px;
    height: 16px;
}
.voice-rec-btn.recording {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    color: #ef4444 !important;
    animation: recPulse 1.1s ease-in-out infinite;
}
@keyframes recPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Composer overlays: attach preview + record bar float above the pill,
   so the input area never grows taller while attaching/recording */
.message-input-area .attach-preview,
.message-input-area .voice-rec-bar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 10px);
    z-index: 30;
    margin-bottom: 0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.message-input-area .attach-preview {
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.97), rgba(10, 10, 14, 0.99));
    border-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.message-input-area .attach-preview .attach-preview-body {
    height: 76px;
}
.message-input-area .voice-rec-bar {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(34, 12, 12, 0.97), rgba(16, 8, 10, 0.99));
    border-color: rgba(239, 68, 68, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Live camera preview while recording a video note + flip control */
.voice-rec-bar #noteRecVideo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 14px;
    object-fit: cover;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
}
.voice-rec-bar .voice-rec-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.voice-rec-bar .vn-flip-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #fca5a5;
}
.voice-rec-bar .vn-flip-btn svg { width: 18px; height: 18px; }



/* === PREMIUM / VERIFIED BADGES === */
.blue-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 2px;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
    animation: starPulse 2s ease infinite;
}
.blue-star .rxn-emoji {
    display: inline-block;
    width: 15px;
    height: 15px;
}

.verified-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 2px;
}

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

.channel-broadcast {
    font-size: 12px;
    opacity: 0.8;
}

/* === CREATE BUTTON (in sidebar header) === */
.create-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px var(--primary-glow);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-right: 2px;
}

.create-btn:hover {
    transform: rotate(90deg) scale(1.08);
}

.create-btn svg {
    width: 22px;
    height: 22px;
}

/* === CHAT ITEM MENU === */
.chat-more-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
    width: 24px;
    height: 24px;
}

.chat-item:hover .chat-more-btn,
.chat-more-btn:focus {
    opacity: 1;
}

.chat-more-btn svg {
    width: 18px;
    height: 18px;
}

.chat-pin-badge {
    font-size: 11px;
    vertical-align: middle;
    margin-left: 2px;
}

.context-menu {
    display: none;
    position: fixed;
    z-index: 2000;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px);
    padding: 6px;
    overflow: hidden;
    animation: menuPop 0.18s ease;
    transform-origin: top right;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 11px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    transition: background var(--transition-fast);
}

.context-menu-item:hover {
    background: var(--bg-tertiary);
}

.context-menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.context-menu-item.danger { color: var(--danger); }
.context-menu-item.danger svg { color: var(--danger); }

/* === CHAT HEADER MENU (three-dot) === */
.chat-menu {
    display: none;
    position: absolute;
    top: 54px;
    right: 8px;
    z-index: 1500;
    min-width: 190px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px);
    padding: 6px;
    animation: menuPop 0.18s ease;
    transform-origin: top right;
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 11px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    transition: background var(--transition-fast);
}

.chat-menu-item:hover { background: var(--bg-tertiary); }

.chat-menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.chat-menu-item.danger { color: var(--danger); }
.chat-menu-item.danger svg { color: var(--danger); }

#reportReasonList input[type="radio"] { accent-color: var(--primary); }

/* === STAR RECEIVED CONGRATS POPUP === */
.star-congrats {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3000;
    width: 280px;
    max-width: calc(100vw - 36px);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 197, 24, 0.25);
    backdrop-filter: blur(18px);
    padding: 18px 18px 16px;
    text-align: center;
    transform: translateY(-24px) scale(0.92);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.28s ease;
    overflow: hidden;
}

.star-congrats.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.star-congrats-star {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 6px;
    animation: starCongratsPop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.4);
    display: inline-block;
}

@keyframes starCongratsPop {
    0% { transform: scale(0) rotate(-60deg); opacity: 0; }
    60% { transform: scale(1.35) rotate(8deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.star-congrats-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--admin-gold);
    margin-bottom: 8px;
}

.star-congrats-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.star-congrats-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--admin-gold);
}

.star-congrats-text {
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
    min-width: 0;
    line-height: 1.25;
}

.star-congrats-text strong { display: inline-flex; align-items: center; gap: 3px; }

.star-congrats-text .staff-badge,
.star-congrats-text .premium-badge { width: 14px; height: 14px; vertical-align: -2px; }

.star-congrats-amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--admin-gold);
}

.star-congrats-amount span { font-size: 12px; font-weight: 600; color: var(--text-muted); }

.star-congrats-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
}

.star-congrats-close svg { width: 14px; height: 14px; }

.star-congrats-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% -10%, rgba(245, 197, 24, 0.18), transparent 60%);
    animation: starBurstFade 1.6s ease-out;
}

@keyframes starBurstFade {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* === MULTI-SELECT === */
.message.selectable { cursor: pointer; }
.message.msg-selected {
    background: linear-gradient(135deg, rgba(100, 181, 246, 0.18), rgba(168, 85, 247, 0.16)) !important;
    box-shadow: inset 0 0 0 2px var(--accent);
    animation: selectPop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.message.msg-selected::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(100, 181, 246, 0.6);
    z-index: 5;
    animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes selectPop {
    from { transform: scale(0.96); }
    to { transform: scale(1); }
}
@keyframes checkPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.select-toolbar {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    max-width: 92vw;
    background:
        radial-gradient(ellipse 70% 60% at 15% -20%, rgba(100, 181, 246, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(18, 18, 24, 0.92), rgba(8, 8, 12, 0.95));
    border: 1px solid rgba(100, 181, 246, 0.25);
    border-radius: 999px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: toolbarIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes toolbarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.sel-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 0 10px;
    white-space: nowrap;
}
.sel-count b {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.sel-count-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: lowercase;
}
.sel-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.select-tool-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.select-tool-btn svg { width: 19px; height: 19px; }
.select-tool-btn:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 6px 18px rgba(100, 181, 246, 0.4);
}
.select-tool-btn .sel-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(10, 10, 14, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
}
.select-tool-btn:hover .sel-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.select-tool-danger:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}
.select-tool-close { background: transparent; }
.select-tool-close:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* === CREATE MODAL === */
.create-type-card {
    background: var(--bg-tertiary);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.create-type-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.create-type-icon {
    font-size: 34px;
    margin-bottom: 8px;
}

.avatar-uploader {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.avatar-uploader img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--glass-border);
}

.avatar-uploader-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* === MESSAGE MEDIA === */
.msg-media {
    margin: -8px -14px 8px;
    border-radius: 14px;
    overflow: hidden;
    max-width: 380px;
    position: relative;
}
.msg-media img,
.msg-media video {
    display: block;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    border-radius: 14px;
    cursor: zoom-in;
    transition: filter 0.2s;
}
.msg-media img:hover,
.msg-media video:hover {
    filter: brightness(1.05);
}

.msg-media audio {
    display: block;
    width: 280px;
    max-width: 100%;
    margin: 6px 0;
}

.msg-media.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    max-width: 320px;
    min-width: 230px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.voice-play-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-primary);
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.voice-play-btn:hover { transform: scale(1.07); box-shadow: 0 6px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.25); }
.voice-play-btn:active { transform: scale(0.94); }
.voice-play-btn svg { width: 18px; height: 18px; }
.voice-player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.voice-eq { display: flex; align-items: center; gap: 3px; height: 16px; }
.voice-eq span {
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-secondary);
    transition: height 0.2s ease, background 0.2s ease;
}
.voice-player.playing .voice-eq span { background: var(--primary); animation: voiceEq 0.9s ease-in-out infinite; }
.voice-player.playing .voice-eq span:nth-child(2) { animation-delay: 0.15s; }
.voice-player.playing .voice-eq span:nth-child(3) { animation-delay: 0.3s; }
.voice-player.playing .voice-eq span:nth-child(4) { animation-delay: 0.45s; }
@keyframes voiceEq {
    0%, 100% { height: 4px; }
    50% { height: 15px; }
}
.voice-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--glass-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.voice-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.1s linear;
}
.voice-times { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.voice-audio { display: none; }

.msg-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    max-width: 280px;
    word-break: break-all;
}

.msg-file:hover { text-decoration: underline; }

/* === MEDIA ALBUMS (Instagram-style multi-photo bubble) === */
.media-album-grid {
    display: grid;
    gap: 3px;
    border-radius: 14px;
    overflow: hidden;
    margin: -8px -14px 8px;
    max-width: 380px;
}
.media-album-grid:only-child {
    margin: -8px -14px -8px;
}
.media-album-grid:has(+ .album-caption) {
    margin-bottom: 8px;
}
.media-album-grid .album-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: rgba(0, 0, 0, 0.35);
}
.media-album-grid .album-item img,
.media-album-grid .album-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: filter 0.2s;
}
.media-album-grid .album-item:hover img,
.media-album-grid .album-item:hover video {
    filter: brightness(1.08);
}
.media-album-grid .album-item-audio,
.media-album-grid .album-item-file {
    grid-column: 1 / -1;
    padding: 8px 12px;
}
.media-album-grid .album-item-audio audio {
    width: 100%;
    max-width: 280px;
}
.media-album-grid:has(.album-item:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
}
.media-album-grid:has(.album-item:nth-child(2)) .album-item {
    aspect-ratio: 1;
}
.media-album-grid:has(.album-item:nth-child(5)) .album-item {
    aspect-ratio: 1;
}
.media-album-grid:has(.album-item:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
}
.media-album-grid .album-item:first-child:last-child {
    aspect-ratio: auto;
}
.media-album-grid .album-item:first-child:last-child img {
    max-height: 360px;
    object-fit: contain;
}
.album-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}
.album-caption {
    display: block;
    padding: 2px 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}

/* Per-photo selection inside album bubbles (shown while selection mode is active) */
.media-album-grid .album-select-check {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, border-color 0.15s;
}
.media-album-grid .album-select-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 0.15s; }
.message.selectable .media-album-grid .album-item { cursor: pointer; }
.message.selectable .media-album-grid .album-select-check {
    opacity: 1;
    transform: scale(1);
}
.message.selectable .media-album-grid .album-item:hover .album-select-check {
    background: rgba(100, 181, 246, 0.9);
}
.media-album-grid .album-item.item-selected {
    box-shadow: inset 0 0 0 2px var(--accent);
    animation: selectPop 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-album-grid .album-item.item-selected .album-select-check {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
}
.media-album-grid .album-item.item-selected .album-select-check svg { opacity: 1; }


/* === MENTIONS === */
.mention-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.mention-link:hover { text-decoration: underline; }

/* === CHAT HEADER MAIN (clickable) === */
.chat-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 4px 0;
}

.chat-header-main:hover .chat-name { color: var(--primary); }

.header-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* === INFO DRAWER === */
.info-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 100vw);
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
    z-index: 1400;
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.info-drawer.open { transform: translateX(0); }

.info-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
}

.idrawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.idrawer-profile {
    text-align: center;
    padding: 0 16px 12px;
}

.idrawer-banner {
    position: relative;
    height: 110px;
    margin: 0 -16px;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.idrawer-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.idrawer-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-primary);
    margin-top: -42px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 2;
}

.idrawer-profile h3 {
    font-size: 18px;
    margin: 0 0 2px;
}

.idrawer-username {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.idrawer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--success);
}

.idrawer-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px 14px;
    flex-wrap: wrap;
}

.idrawer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    padding: 10px 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.idrawer-btn:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.idrawer-btn span { font-size: 20px; line-height: 0; display: inline-flex; }
.idrawer-btn span svg { width: 22px; height: 22px; }

.idrawer-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.idrawer-box {
    margin: 0 14px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.idrawer-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    font-size: 13px;
    border-top: 1px solid var(--glass-border);
}

.idrawer-row:first-child { border-top: none; }

.idrawer-row.col { flex-direction: column; align-items: flex-start; gap: 4px; }

.idrawer-row > span:first-child { color: var(--text-muted); flex-shrink: 0; }

.idrawer-row > span:last-child { text-align: right; word-break: break-word; }

.idrawer-add-members {
    margin: 4px 14px 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.idrawer-add-members:hover { border-color: var(--primary); }

.idrawer-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 14px 12px;
    width: calc(100% - 28px);
    padding: 11px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-inverse);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.idrawer-edit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.idrawer-edit-btn svg { width: 16px; height: 16px; }

.idrawer-nav {
    display: flex;
    gap: 6px;
    padding: 4px 14px 10px;
    overflow-x: auto;
    flex-shrink: 0;
}

.inav {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.inav:hover { color: var(--primary); border-color: var(--primary); }

.inav.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

.isection {
    display: none;
    padding: 0 14px;
}

.isection.active { display: block; }

.isec-empty {
    padding: 24px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.isec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.isec-item:hover { background: var(--bg-tertiary); }

.isec-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-primary);
}

.isec-icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.isec-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.isec-body {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isec-time {
    font-size: 11px;
    color: var(--text-muted);
}

.isec-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
}

.isec-member:hover { background: var(--bg-tertiary); }

.isec-member img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.isec-m-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.isec-m-role {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.isec-gift {
    text-align: center;
    padding: 10px 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isec-gift span { font-size: 22px; display: block; margin-bottom: 4px; }

.member-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-primary);
}

.member-search-row:hover { background: var(--bg-tertiary); }

.member-search-row img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.member-search-row input { accent-color: var(--primary); }

.member-search-row .m-name {
    flex: 1;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .info-drawer { width: 100vw; }
}

/* ============================================================
   MESSAGE UX POLISH (2026-08)
   ============================================================ */

/* --- Pretty checkboxes --- */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--text-muted);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    vertical-align: middle;
}
input[type="checkbox"]:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--text-inverse);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- Attractive chat area background --- */
.messages-area {
    background:
        radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.6px) 0 0/24px 24px,
        radial-gradient(ellipse 70% 55% at 12% -8%, rgba(255, 255, 255, 0.055), transparent 62%),
        radial-gradient(ellipse 60% 45% at 95% 115%, rgba(147, 197, 253, 0.05), transparent 62%),
        radial-gradient(ellipse 40% 35% at 85% 12%, rgba(167, 139, 250, 0.035), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.006) 0 2px, transparent 2px 28px),
        linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
}

/* --- Floating / transparent message input (narrow, raised, contents flush to edges) --- */
.message-input-area {
    position: sticky;
}
.message-input-area .emoji-panel {
    bottom: calc(100% + 10px);
    right: 56px;
}
.message-input-area .attach-menu {
    bottom: 46px;
    left: 0;
}

/* --- Denied composer panel (channel admins only / blocked) --- */
.chat-denied-panel {
    margin: 10px;
    padding: 20px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.chat-denied-panel .chat-denied-icon {
    font-size: 26px;
}
.chat-denied-panel .chat-denied-title {
    font-size: 14px;
    font-weight: 700;
}
.chat-denied-panel .chat-denied-text {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 300px;
}
.chat-denied-panel .chat-denied-btn {
    margin-top: 6px;
}

/* --- Background swatches (settings) --- */
.bg-swatch {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.bg-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    border-color: var(--primary) !important;
}
.bg-swatch.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.25);
}

/* --- Reply theme swatches (settings) --- */
.reply-theme-opt {
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.reply-theme-opt:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--accent);
    z-index: 1;
}
.reply-theme-opt.active {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--primary), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.reply-theme-opt.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* --- Edit bar (inline message editing) --- */
.message-input-area .edit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}
.message-input-area .edit-bar-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.message-input-area .edit-bar-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
}
.message-input-area .edit-bar-input {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    resize: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    max-height: 100px;
}
.message-input-area .edit-bar-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}
.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* --- 3-dot + react trigger inside the bubble --- */
.msg-more-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.75;
    transition: all var(--transition-fast);
}
.msg-more-btn:hover {
    opacity: 1;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}
.msg-more-btn svg { width: 16px; height: 16px; }

/* --- New message arrival --- */
@keyframes messageIn {
    0% { opacity: 0; transform: translateY(16px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.message.msg-in {
    animation: messageIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reaction-trigger {
    position: static;
    left: auto;
    right: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.55;
    transition: all var(--transition-fast);
}
.reaction-trigger:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.15);
}
.message:hover .reaction-trigger {
    display: inline-flex;
    opacity: 0.9;
}
.message.received .reaction-trigger { left: auto; right: auto; }

/* --- Attach menu --- */
.attach-wrap { position: relative; flex-shrink: 0; }
.attach-menu {
    display: none;
    position: absolute;
    bottom: 44px;
    left: 0;
    z-index: 300;
    min-width: 150px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    padding: 6px;
    backdrop-filter: blur(16px);
    animation: slideUp 0.2s ease;
}
.attach-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 9px 10px;
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    transition: background var(--transition-fast);
}
.attach-menu button:hover { background: var(--bg-tertiary); }
.attach-menu button svg { width: 16px; height: 16px; }

/* --- Attach preview --- */
.attach-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    animation: attachSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes attachSlideUp {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.attach-preview-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 72px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: 2px 0;
}
.attach-tile {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: attachTileIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.attach-tile:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
@keyframes attachTileIn {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}
.attach-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s;
}
.attach-tile:hover img { transform: scale(1.08); }
.attach-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.attach-tile .attach-file-icon { font-size: 24px; }
.attach-tile .attach-file-name {
    font-size: 9px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
    max-width: 100%;
}
.attach-tile-btn {
    position: absolute;
    top: 3px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    transform: scale(0.8);
}
.attach-tile:hover .attach-tile-btn {
    opacity: 1;
    transform: scale(1);
}
.attach-tile-del { right: 3px; background: rgba(231, 76, 60, 0.92); }
.attach-tile-edit { left: 3px; background: rgba(0, 0, 0, 0.6); }
.attach-file-icon { font-size: 22px; }
.attach-file-name {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-remove-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}
.attach-remove-btn:hover { color: var(--danger); background: rgba(231, 76, 60, 0.15); }
.attach-remove-btn svg { width: 14px; height: 14px; }

/* --- Emoji panel --- */
.emoji-panel {
    display: none;
    position: absolute;
    bottom: 52px;
    right: 56px;
    z-index: 300;
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 340px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px);
    animation: slideUp 0.2s ease;
    overflow: hidden;
    flex-direction: column;
}
.emoji-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}
.emoji-tabs {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.emoji-tab:hover { background: var(--bg-tertiary); }
.emoji-tab.active { background: var(--bg-tertiary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.emoji-kitchen-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.emoji-kitchen-toggle:hover { background: var(--bg-tertiary); }
.emoji-kitchen-toggle.active {
    background: var(--primary);
    box-shadow: 0 2px 10px var(--primary-glow);
}
.emoji-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}
.emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.emoji-btn {
    background: none;
    border: none;
    font-size: 22px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.emoji-btn:hover { background: var(--bg-tertiary); transform: scale(1.12); }

/* === PREMIUM EMOJI TAB === */
.emoji-tab.premium-tab {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(184, 148, 26, 0.28));
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.4);
}
.emoji-tab.premium-tab.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(184, 148, 26, 0.45));
    box-shadow: inset 0 0 0 1.5px var(--admin-gold, #d4af37), 0 0 12px rgba(212, 175, 55, 0.4);
}
.premium-emoji-grid .premium-emoji-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 75%);
}
.premium-emoji-grid .premium-emoji-btn .rxn-emoji {
    display: inline-block;
    width: 28px;
    height: 28px;
    position: relative;
}
.premium-emoji-grid .premium-emoji-btn.locked {
    opacity: 0.45;
    filter: grayscale(0.7);
}
.premium-emoji-grid .premium-emoji-btn.locked::after {
    content: '🔒';
    position: absolute;
    font-size: 11px;
    top: -2px;
    right: -2px;
    filter: none;
}
.premium-lock-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--admin-gold, #d4af37);
    font-size: 12px;
    text-align: center;
}

/* --- Emoji Kitchen bar --- */
.emoji-kitchen-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.k-slot {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px dashed var(--glass-border);
    background: var(--bg-tertiary);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--text-muted);
}
.k-slot.filled { border-style: solid; border-color: var(--primary); color: var(--text-primary); }
.k-slot:hover { transform: scale(1.08); }
.k-plus { color: var(--text-muted); font-size: 16px; }
.k-preview {
    flex: 1;
    min-width: 60px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    overflow: hidden;
}
.k-preview img { height: 48px; width: 48px; object-fit: contain; }
.k-send { flex-shrink: 0; }
.k-hint {
    width: 100%;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}

/* --- Lightbox --- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
    animation: lightboxIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
@keyframes lightboxIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(12px); }
}
.lightbox-content {
    max-width: 100%;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxZoom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lightboxZoom {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
.lightbox img,
.lightbox video {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
    object-fit: contain;
    background: rgba(20,20,22,0.9);
}
.lightbox-actions {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox-download {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}
.lightbox-download:hover { background: rgba(29,155,240,0.85); transform: scale(1.1); }
.lightbox-download svg { width: 18px; height: 18px; }
.lightbox-close:hover { background: rgba(239,68,68,0.85); transform: rotate(90deg) scale(1.1); }
.lightbox-close svg { width: 18px; height: 18px; }

/* --- Photo gallery (multiple profile photos) --- */
.photo-gallery {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3100;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.photo-gallery.open {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.photo-gallery .pg-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.photo-gallery .pg-stage img {
    max-width: calc(100% - 120px);
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    object-fit: contain;
    animation: lightboxZoom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.photo-gallery .pg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.photo-gallery .pg-nav:hover { background: var(--primary); transform: translateY(-50%) scale(1.08); }
.photo-gallery .pg-nav svg { width: 24px; height: 24px; }
.photo-gallery .pg-prev { left: 16px; }
.photo-gallery .pg-next { right: 16px; }
.photo-gallery .pg-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.photo-gallery .pg-close:hover { background: rgba(239,68,68,0.85); transform: rotate(90deg) scale(1.1); }
.photo-gallery .pg-close svg { width: 18px; height: 18px; }
.photo-gallery .pg-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.idrawer-avatar-wrap { position: relative; display: inline-block; }
.idrawer-photo-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

/* --- Outline pin above chat 3-dot --- */
.chat-pin-outline {
    display: inline-flex;
    color: var(--text-muted);
    line-height: 0;
}
.chat-pin-outline svg { width: 14px; height: 14px; }

/* === 3-TAB EMOJI PANEL (Emoji / Sticker / GIF) === */
.ep-tabbar {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
}
.ep-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.ep-tab:hover { background: var(--bg-tertiary); }
.ep-tab.active { background: var(--primary); color: var(--text-inverse); }
.ep-pane { display: none; flex-direction: column; flex: 1; min-height: 0; }
.ep-pane.active { display: flex; }
.ep-loading { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* GIF pane */
.gif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}
.gif-cell {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-tertiary);
    cursor: pointer;
    border: none;
    padding: 0;
}
.gif-cell img { width: 100%; height: 100%; object-fit: cover; }
.gif-cell:hover img { transform: scale(1.04); }
.gif-cell img { transition: transform var(--transition-fast); }

/* Sticker pane */
.sticker-head { padding: 8px 8px 2px; flex-shrink: 0; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.sticker-packs {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.sticker-packs::-webkit-scrollbar { display: none; }
.sticker-pack-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 12px;
    transition: all var(--transition-fast);
}
.sticker-pack-chip:hover { border-color: var(--primary); }
.sticker-pack-chip.active { border-color: var(--primary); background: rgba(59, 130, 246, 0.14); }
.sticker-pack-chip .sp-emoji { font-size: 18px; }
.sticker-pack-chip .sp-title { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.sticker-add-btn {
    border: none;
    background: var(--primary);
    color: var(--text-inverse);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.sticker-add-btn:hover { filter: brightness(1.15); }
.sticker-add-btn.added { background: transparent; color: var(--success); font-size: 13px; cursor: default; }
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}
.sticker-cell {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-tertiary);
    cursor: pointer;
    border: none;
    padding: 0;
}
.sticker-cell img { width: 100%; height: 100%; object-fit: contain; }
.sticker-cell:hover { outline: 1.5px solid var(--primary); }
.sticker-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.sticker-newpack-btn {
    flex-shrink: 0;
    border: 1px dashed var(--primary);
    background: none;
    color: var(--primary);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.sticker-newpack-btn:hover { background: rgba(59, 130, 246, 0.12); }

.sticker-tabs {
    display: flex;
    gap: 6px;
    padding: 4px 8px 0;
    flex-shrink: 0;
}
.sticker-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.sticker-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.sticker-pack-chip .sticker-add-btn { margin-left: auto; flex-shrink: 0; }

/* Sticker pack popup (click a sent sticker) */
.sticker-pack-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    animation: fadeIn var(--transition-fast);
}
.sticker-pack-popup {
    width: min(420px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: slideUp var(--transition-fast);
}
.sp-popup-loading { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.sp-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.sp-popup-title { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.sp-popup-emoji { font-size: 22px; }
.sp-popup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 12px;
    overflow-y: auto;
}
.sp-popup-grid .sticker-cell { background: var(--bg-tertiary); cursor: default; }
.sp-popup-grid .sticker-cell img { object-fit: contain; }
.sp-popup-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.sp-added-label { color: var(--success); font-size: 13px; font-weight: 600; margin-right: auto; }

/* === BIG SINGLE-EMOJI MESSAGE (animated, transparent) === */
.msg-big-emoji {
    width: 96px;
    height: 96px;
    margin: -2px 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.msg-big-emoji-static {
    font-size: 64px;
    line-height: 1.2;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.message-content:has(.msg-big-emoji),
.message-content:has(.msg-big-emoji-static) {
    background: none !important;
    padding: 2px 6px;
    border: none !important;
    box-shadow: none !important;
}

/* === SINGLE-EMOJI CAPTION ON MEDIA: WHITE CHIP === */
.msg-emoji-caption {
    display: inline-block;
    background: #fff;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 40px;
    line-height: 1.2;
    margin: 2px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* === MEDIA WITHOUT CAPTION: NO BUBBLE === */
.message.no-caption .message-content {
    padding: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.message.no-caption .msg-media {
    margin: 0;
    border-radius: 14px;
    background: none;
}
.message.no-caption .msg-media img,
.message.no-caption .msg-media video {
    background: none;
    border-radius: 14px;
}
.message.no-caption .message-time {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* === ADD STORY POPUP === */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.story-create-media {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    transition: border-color 0.2s, color 0.2s;
}
.story-create-media:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.story-create-preview {
    max-height: 210px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}
.story-create-preview img,
.story-create-preview video {
    width: 100%;
    max-height: 210px;
    object-fit: contain;
    display: block;
}
.expiry-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.expiry-chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.expiry-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.expiry-chip.active {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

/* === VIDEO NOTES (Telegram-style round video player) === */
.video-note {
    position: relative;
    width: 230px;
    height: 230px;
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
@media (max-width: 480px) {
    .video-note { width: 210px; height: 210px; }
}
.video-note.round-video {
    width: 200px;
    height: 200px;
}
@media (max-width: 480px) {
    .video-note.round-video { width: 185px; height: 185px; }
}
.video-note .video-note-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
}
/* The round bubble must never be clipped by the message bubble container
   (its 14px rounded corners + overflow:hidden would cut the top-right mute
   button). The circle clips its own content, so the wrapper needs no clip. */
.message .msg-media.video-note {
    border-radius: 0;
    overflow: visible;
}
/* Thin progress ring hugging the circle edge (kept small so the bubble
   still reads as a clean round profile-picture style circle). */
.video-note-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.video-note-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 2;
}
.video-note-ring-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.18s linear;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}
/* The .message.no-caption rules (specificity 0,3,0 / 0,3,1) force a rounded
   square on the bubble; re-assert a clean circle like a profile picture. */
.message.no-caption .video-note,
.message.no-caption .video-note .video-note-video {
    border-radius: 50%;
}
.message.no-caption .video-note {
    margin: 0;
    background: #000;
}
.video-note-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, opacity 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}
.video-note-play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-note-play:hover { background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%) scale(1.06); }
.video-note.playing .video-note-play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events: none;
}
.video-note-mute {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
    transition: background 0.2s;
}
.video-note-mute:hover { background: rgba(0, 0, 0, 0.75); }
.video-note-mute svg { width: 18px; height: 18px; }
.video-note-mute .vn-mute-x { display: none; }
.video-note.unmuted .video-note-mute svg:first-child { display: none; }
.video-note.unmuted .video-note-mute .vn-mute-x { display: block; }

/* Recording lock state */
.voice-rec-bar.locked {
    background: linear-gradient(180deg, rgba(16, 42, 67, 0.97), rgba(10, 24, 40, 0.99));
    border-color: rgba(100, 181, 246, 0.55);
}
.voice-rec-bar.locked .rec-dot { background: #60a5fa; }
.voice-rec-bar.locked .voice-rec-label { color: #93c5fd; }
#recLockHint {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.voice-rec-bar.locked #recLockHint { color: #93c5fd; }
.voice-rec-btn.locked {
    background: rgba(96, 165, 250, 0.25) !important;
    border-color: rgba(96, 165, 250, 0.7) !important;
    color: #93c5fd !important;
}

/* Reply + edit bars float above the input pill (overlay), so the composer
   height never grows when replying/editing — same as attach/record overlays */
.message-input-area .reply-bar,
.message-input-area .edit-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 10px);
    z-index: 30;
    margin-bottom: 0 !important;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.97), rgba(10, 10, 14, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--primary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: composerBarIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes composerBarIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.message-input-area .edit-bar {
    border-left-color: var(--accent);
}

/* Message bubble swipe-left: snap back to rest with a smooth animation */
.message.swipe-snap-back {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* === MENTION AUTOCOMPLETE POPUP === */
.message-input-area {
    position: relative;
}
.mention-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 12px;
    right: 12px;
    max-height: 230px;
    overflow-y: auto;
    padding: 6px;
    background: var(--glass-bg, rgba(20, 20, 20, 0.92));
    backdrop-filter: var(--glass-blur, blur(14px));
    -webkit-backdrop-filter: var(--glass-blur, blur(14px));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    box-shadow: var(--glass-shadow, 0 10px 32px rgba(0, 0, 0, 0.45));
    z-index: 60;
    display: none;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
.mention-item.active,
.mention-item:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.08));
}
.mention-item img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.mention-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mention-item-name {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}
.mention-item-sub {
    font-size: 11.5px;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prevent the browser from stealing the vertical pan while slide-up-locking a recording */
#voiceRecBtn,
.voice-rec-bar,
.voice-rec-stop {
    touch-action: none;
}

/* === DATE SEPARATORS & SYSTEM ("glass") MESSAGES === */
.date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px auto 6px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    background: var(--glass-bg, rgba(20, 20, 20, 0.6));
    backdrop-filter: var(--glass-blur, blur(10px));
    -webkit-backdrop-filter: var(--glass-blur, blur(10px));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 999px;
    width: fit-content;
    max-width: 90%;
    letter-spacing: 0.02em;
}

.msg-system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 10px auto;
    padding: 6px 14px;
    max-width: 82%;
    text-align: center;
    background: var(--glass-bg, rgba(20, 20, 20, 0.65));
    backdrop-filter: var(--glass-blur, blur(12px));
    -webkit-backdrop-filter: var(--glass-blur, blur(12px));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 14px;
    box-shadow: var(--glass-shadow, 0 4px 18px rgba(0, 0, 0, 0.3));
}
.msg-system-text {
    font-size: 12px;
    color: var(--text-primary, #e5e5e5);
    opacity: 0.92;
    line-height: 1.4;
}
.msg-system-time {
    font-size: 10px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}