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

:root {
    --bg-base: #ffffff; 
    --bg-panel: #ffffff; 
    --bg-input: #f4f4f5; 
    --bg-hover: #f9fafb;
    --border: #e5e7eb; 
    --primary: #000000; 
    --text-main: #000000; 
    --text-muted: #6b7280; 
    --msg-sent: #000000; 
    --msg-sent-txt: #ffffff;
    --msg-recv: #f4f4f5; 
    --msg-recv-txt: #000000;
    --danger: #ef4444; 
    --success: #10b981;
    --shadow: 0 4px 20px rgba(0,0,0,0.08); 
    --radius: 24px; 
    --msg-size: 15px;
    --safe-top: env(safe-area-inset-top, 0px); 
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --chat-bg: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; font-family: 'Inter', sans-serif; }
body { 
    background: var(--bg-base); 
    color: var(--text-main); 
    height: 100dvh; 
    width: 100vw; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
}

button { cursor: pointer; border: none; background: transparent; color: inherit; }
input, textarea, select { font-family: inherit; }

.btn { padding: 14px 24px; border-radius: 20px; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 15px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); }
/* Force Install Overlay */
/* PWA Promo Overlay */
#pwa-promo-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--bg-base);
    display: none; /* Controlled by JS */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.promo-card {
    max-width: 400px;
    width: 100%;
    padding: 32px 24px;
    border-radius: 28px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.promo-icon {
    width: 80px; 
    height: 80px; 
    background: var(--primary); 
    color: var(--on-primary); 
    border-radius: 22px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 40px; 
    font-weight: 800; 
    margin: 0 auto 24px;
}

.promo-step {
    background: var(--bg-input);
    padding: 14px 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    text-align: left;
    font-size: 14px;
    border: 1px solid var(--border);
}
/* 1. Make avatars transparent natively */
.avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: transparent !important; flex-shrink: 0; }

/* 2. Add the exact glass border to wrappers */
.avatar-wrap, .profile-av-wrap {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    flex-shrink: 0;
}
.avatar-wrap::before, .profile-av-wrap::before {
    content: ''; position: absolute; inset: 0; z-index: 10;
    border-radius: inherit; pointer-events: none;
    padding: 1.5px; /* Border thickness */
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.1) 40%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Remove glass border for AI avatars */
.avatar-wrap.ai-wrap::before {
    display: none !important;
}
/* Add border: none !important to the AI avatar */
img.avatar.ai-avatar {
    background: transparent !important;
    border: none !important; 
    border-radius: 0 !important;
    object-fit: contain;
    transform: scale(1.1); 
}
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-main); transition: 0.2s; }
.icon-btn:active { background: var(--bg-hover); }
        
/* Panels & Layout */
.panel { position: absolute; inset: 0; background: var(--bg-panel); z-index: 10; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.35s; height: 100%; width: 100%; visibility: hidden; pointer-events: none; }
.panel.active { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s; }
.panel.root { transform: translateX(0); z-index: 5; visibility: visible; pointer-events: auto; transition: none; }

.panel-header { flex-shrink: 0; height: calc(60px + var(--safe-top)); padding-top: var(--safe-top); display: flex; align-items: center; padding: 0 20px; gap: 12px; background: var(--bg-panel); z-index: 20; }
.panel-title { font-size: 18px; font-weight: 600; flex: 1; text-align: center; }
.panel-body { flex: 1; overflow-y: auto; padding-bottom: var(--safe-bottom); }

/* Chat List Styles */
.root-header { padding: calc(20px + var(--safe-top)) 20px 10px 20px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-panel); z-index: 10; }
.root-header h1 { font-size: 28px; font-weight: 700; }

.search-wrap { padding: 10px 20px; }
.search-bar { display: flex; align-items: center; background: var(--bg-input); padding: 10px 16px; border-radius: 24px; gap: 10px; }
.search-bar input { flex: 1; border: none; background: transparent; outline: none; font-size: 15px; color: var(--text-main); }

.user-item { display: flex; align-items: center; gap: 16px; padding: 12px 20px; cursor: pointer; transition: background 0.2s; position: relative; }
.user-item:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent) !important; }
.user-info { flex: 1; overflow: hidden; }
.user-name { font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; margin-bottom: 4px; align-items: center; }
.user-last-msg { font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }

.badge { background: var(--primary); color: var(--on-primary); padding: 0; min-width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

/* Floating Action Button */
.fab { position: absolute; bottom: calc(30px + var(--safe-bottom)); right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); z-index: 100; transition: transform 0.2s; }
.fab:active { transform: scale(0.92); }
.fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

/* Chat Area */
.chat-area { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; background-color: var(--chat-bg); background-size: cover; background-position: center; }
.date-divider { text-align: center; margin: 16px 0; }
.date-divider span { background: var(--bg-input); color: var(--text-muted); padding: 6px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }

.messages { flex: 1; padding: 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--msgs-gap, 16px); }
.msg-row { display: flex; width: 100%; position: relative; margin-bottom: 12px; }
.msg-row.sent { justify-content: flex-end; }
.msg-row.received { justify-content: flex-start; }

.msg-bubble { max-width: 75%; padding: 12px 16px; font-size: var(--msg-size); position: relative; word-break: break-word; line-height: 1.4; border-radius: 20px; }
.msg-row.sent .msg-bubble { background: var(--msg-sent); color: var(--msg-sent-txt); border-bottom-right-radius: 4px; }
.msg-row.received .msg-bubble { background: var(--msg-recv); color: var(--msg-recv-txt); border-bottom-left-radius: 4px; }

/* Injecting timestamp outside via CSS trick */
.msg-bubble > .msg-timestamp { position: absolute; bottom: -20px; font-size: 11px !important; color: var(--text-muted) !important; opacity: 1 !important; width: max-content; }
.msg-row.sent .msg-bubble > div:last-child { right: 4px; text-align: right; }
.msg-row.received .msg-bubble > div:last-child { left: 4px; text-align: left; }
.msg-tick { font-size: 11px; margin-left: 4px; letter-spacing: -2px; }
.msg-tick.read { color: var(--success) !important; }

.msg-media { max-width: 100%; border-radius: 12px; margin-top: 4px; cursor: pointer; object-fit: cover; max-height: 250px; }

/* Input Bar */
.input-bar { flex-shrink: 0; background: transparent; padding: 12px 20px calc(12px + var(--safe-bottom)); display: flex; align-items: flex-end; gap: 12px; z-index: 10; }
.input-wrapper { flex: 1; background: var(--bg-input); border-radius: 24px; display: flex; align-items: center; padding: 4px 6px 4px 16px; min-height: 48px; }
.msg-input { flex: 1; resize: none; border: none; background: transparent; color: var(--text-main); font-size: 15px; outline: none; padding: 10px 0; max-height: 100px; will-change: transform; }
.msg-input::placeholder { color: var(--text-muted); }
.send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Settings Elements (Matching 2nd Image) */
.settings-card { background: var(--bg-panel); border-radius: 16px; margin-bottom: 24px; }
.settings-header { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 24px 20px 8px; letter-spacing: 0.5px; }
.settings-input { width: 100%; background: var(--bg-input); border: none; padding: 16px; border-radius: 12px; color: var(--text-main); font-size: 15px; outline: none; margin-bottom: 12px; transition: 0.2s; }
.settings-input:focus { box-shadow: 0 0 0 2px var(--primary); }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--bg-input); border-radius: 12px; margin-bottom: 12px; font-size: 15px; font-weight: 500; }

.profile-av-wrap { width: 100px; height: 100px; margin: 20px auto; position: relative; border-radius: 50%; overflow: hidden; background: var(--bg-input); }
.profile-av-wrap .avatar { width: 100%; height: 100%; border-radius: 0; }
.profile-av-edit { position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: rgba(0,0,0,0.6); color: white; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 600; cursor: pointer; }

.cropper-circle .cropper-view-box,
.cropper-circle .cropper-face {
    border-radius: 50% !important;
    outline: none !important;
}

.call-badge { background: var(--bg-input); color: var(--danger); padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.online-dot { width: 12px; height: 12px; background: var(--success); border-radius: 50%; border: 2px solid var(--bg-panel); position: absolute; bottom: 2px; right: 2px; }

.toast { position: fixed; top: calc(20px + var(--safe-top)); left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--primary); color: var(--on-primary); padding: 12px 24px; border-radius: 30px; z-index: 10000; font-weight: 600; font-size: 14px; transition: 0.4s; opacity: 0; box-shadow: var(--shadow); }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Custom UI fixes for original JS structures */
.reply-bar-active, .pinned-bar { background: var(--bg-input); padding: 12px 20px; font-size: 14px; border-radius: 12px; margin: 10px 20px 0; display: flex; align-items: center; justify-content: space-between; }
.reply-block { background: rgba(0,0,0,0.05); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; border-left: 3px solid var(--primary); opacity: 0.8; }
[data-theme="dark"] .reply-block { background: rgba(255,255,255,0.1); }

.skeleton {
    background: linear-gradient(110deg, color-mix(in srgb, var(--bg-input) 60%, transparent) 8%, color-mix(in srgb, var(--border) 40%, transparent) 18%, color-mix(in srgb, var(--bg-input) 60%, transparent) 33%);
    background-size: 200% 100%;
    animation: cute-shimmer 1.8s infinite linear, cute-pulse 2s infinite ease-in-out;
    border-radius: 16px; /* Cuter, rounder corners */
}
@keyframes cute-shimmer { to { background-position-x: -200%; } }
@keyframes cute-pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.98); } }

/* Fix the skeleton shapes in your chat list */
.skel-av { border-radius: 50% !important; }
.skel-text { margin-bottom: 8px; border-radius: 12px; height: 14px; width: 80%; }
.skel-text.short { width: 50%; opacity: 0.7; }

/* CALL UI OVERLAY */
#panel-call { z-index: 9999; background: var(--bg-base); color: var(--text-main); }
.call-bg { position: absolute; inset:0; background-size: cover; background-position: center; filter: blur(40px) brightness(0.8); z-index: 1; opacity: 0.5; }
.call-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; padding: calc(80px + var(--safe-top)) 20px 40px; }
.call-controls { margin-top: auto; display: flex; gap: 24px; align-items: center; background: var(--bg-panel); padding: 20px 32px; border-radius: 40px; box-shadow: var(--shadow); }
.call-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; border: none; background: var(--bg-input); color: var(--text-main); }
.call-btn.end { background: var(--danger); color: white; }
/* Add inside your <style> block */
.msg-bubble { 
    white-space: pre-wrap; /* This fixes the line spacing issue! */
}

/* AI Typing Animation */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; height: 20px; padding: 0 4px; }
.typing-dots span { width: 6px; height: 6px; background-color: currentColor; border-radius: 50%; animation: blink 1.4s infinite both; opacity: 0.4; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
/* AI Chat Special Styling */
.user-item.ai-chat {
    background: linear-gradient(90deg, rgba(0, 122, 255, 0.15) 0%, transparent 100%);
}
.user-item.ai-chat:hover {
    background: linear-gradient(90deg, rgba(0, 122, 255, 0.25) 0%, var(--bg-hover) 100%);
}
img.avatar.ai-avatar {
    background: transparent !important;
    border-radius: 0 !important;
    object-fit: contain;
    transform: scale(1.1); /* Makes the star pop a bit more */
}
/* 1. Theme-Aware Glass Glow Colors */


/* 2. Liquid glass (iOS 26 style), shared by .liquid-glass and .n-liquid.
   ::after  = the lens: refraction (--lg-filter, built per size by js/glass.js on Chromium), light blur, vivid saturation,
              theme tint and a soft inner glow. No outer box-shadow here: Chromium anchors the SVG filter space to the
              layer's visual bounds, so a shadow would shift the refraction map.
   ::before = the iOS rim: a hairline stroke lit at the top-left and bottom-right, dim along the middle. */
.liquid-glass, .n-liquid {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border: none !important;
    box-shadow: var(--lg-shadow);
    --lg-hi: rgba(255, 255, 255, 0.28);
    --lg-lo: rgba(255, 255, 255, 0.04);
    --lg-glow: rgba(255, 255, 255, 0.07);
    --lg-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .liquid-glass, [data-theme="light"] .n-liquid {
    --lg-hi: rgba(255, 255, 255, 0.75);
    --lg-lo: rgba(255, 255, 255, 0.2);
    --lg-glow: rgba(255, 255, 255, 0.3);
    --lg-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.liquid-glass::after, .n-liquid::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--bg-panel) var(--glass-tint, 8%), transparent);
    box-shadow: inset 0 0 16px -4px var(--lg-glow), inset 0 1px 10px -6px var(--lg-hi);
    backdrop-filter: var(--lg-filter,) blur(var(--glass-blur, 4px)) saturate(1.8) brightness(1.05);
    -webkit-backdrop-filter: blur(var(--glass-blur, 4px)) saturate(1.8) brightness(1.05);
}
.liquid-glass::before, .n-liquid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background: linear-gradient(135deg, var(--lg-hi) 0%, var(--lg-lo) 28%, var(--lg-lo) 72%, var(--lg-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
/* Full-width bars (chat list header) are plain frosted glass: no rim, no shadow, no lens edge */
.n-glass-header.liquid-glass, .n-glass-header.n-liquid { box-shadow: none; }
.n-glass-header.liquid-glass::before, .n-glass-header.n-liquid::before { padding: 0; background: none; -webkit-mask: none; mask: none; }
.n-glass-header.liquid-glass::after, .n-glass-header.n-liquid::after { box-shadow: none; }
/* Press: the glass swells a little, like iOS controls */
button.liquid-glass, button.n-liquid, .liquid-glass[onclick], .n-liquid[onclick] {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
button.liquid-glass:active, button.n-liquid:active, .n-liquid[onclick]:not(.mini-player-top):active {
    transform: scale(1.06);
    transition-duration: 0.12s;
}
button.liquid-glass:active::after, button.n-liquid:active::after { --lg-glow: rgba(255, 255, 255, 0.3); }
/* Buttons on glass use the rim instead of a flat border */
.liquid-glass.n-glass-border, .n-liquid.n-glass-border { border: none !important; }
@media (prefers-reduced-transparency: reduce) {
    .liquid-glass::after, .n-liquid::after { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-panel); }
}

/* 3. Base Bottom Nav Layout (Inherits the glass effect) */
.bottom-nav {
    position: fixed; 
    bottom: calc(24px + var(--safe-bottom)); 
    left: 50%; 
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 360px;
    height: 56px;
    border-radius: 28px;
    display: flex; justify-content: space-around; align-items: center; 
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}
[data-theme="light"] .bottom-nav {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Hides the island smoothly */
.bottom-nav.hidden {
    transform: translate(-50%, 150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Nav Items adapting to theme automatically */
.bottom-nav .nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-muted); /* Automatically changes color based on theme */
    font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.2s;
    flex: 1;
}

.bottom-nav .nav-item .icon-wrap {
    position: relative; display: flex; justify-content: center; align-items: center;
    width: 48px; height: 28px; border-radius: 14px; margin-bottom: 2px; transition: 0.2s;
}

.bottom-nav .nav-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Active State matches the theme's primary color */
.bottom-nav .nav-item.active { color: var(--text-main); }
.bottom-nav .nav-item.active .icon-wrap { background: transparent; }

/* Nav Badge */
.nav-badge {
    position: absolute; top: -4px; right: 4px;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 5px; border-radius: 10px;
    border: 2px solid transparent;
}

/* Inline Keyboards */
.inline-kb { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; width: 100%; }
.inline-row { display: flex; gap: 4px; width: 100%; }
.inline-btn { flex: 1; background: rgba(0,0,0,0.05); border: 1px solid var(--border); color: var(--primary); font-weight: 600; padding: 10px; border-radius: 12px; font-size: 13px; text-align: center; cursor: pointer; transition: 0.1s; display: flex; align-items: center; justify-content: center; }[data-theme="dark"] .inline-btn, [data-theme="oled"] .inline-btn { background: rgba(255,255,255,0.05); }
.inline-btn:active { transform: scale(0.97); background: var(--bg-hover); }

/* Sticker Panel */
.sticker-panel { position: absolute; bottom: 100%; left: 0; width: 100%; height: 250px; background: var(--bg-panel); border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0 -10px 30px rgba(0,0,0,0.1); z-index: 9; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); opacity: 0; pointer-events: none; display: flex; flex-direction: column; }
.sticker-panel.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; padding: 16px; overflow-y: auto; flex: 1; }
.sticker-item { width: 100%; aspect-ratio: 1; cursor: pointer; object-fit: contain; transition: 0.2s; }
.sticker-item:active { transform: scale(0.9); }
.msg-sticker { width: 150px; height: 150px; object-fit: contain; background: transparent; }

/* Fix Fab and Panel padding so nothing hides behind the island */
.fab { bottom: calc(110px + var(--safe-bottom)); }
#panel-root .panel-body, #panel-settings .panel-body { padding-bottom: calc(120px + var(--safe-bottom)) !important; }

.media-loading { position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; border-radius: 12px; z-index: 2; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.media-loading-circle { width: 44px; height: 44px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; }

@media (min-width: 768px) {
    /* REPLACE inside @media (min-width: 768px): */
    .bottom-nav { 
        display: flex !important; 
        flex-direction: column; 
        justify-content: flex-start;
        gap: 16px;
        top: 0; left: 0; bottom: 0; 
        width: 72px; height: 100vh; 
        transform: none !important; 
        border-radius: 0;
        padding-top: calc(20px + var(--safe-top));
        border-right: 1px solid var(--border);
        background: var(--bg-panel);
        box-shadow: none;
    }
    .bottom-nav .nav-item { flex: none; height: 56px; }
    
    /* Shift the root panel to make room for the new Left Rail */
    div.panel.root { left: 72px !important; width: 320px !important; }
    #panel-chat { left: 392px !important; width: calc(100vw - 392px) !important; }
    .fab { bottom: 30px; }
    #panel-root .panel-body, #panel-settings .panel-body { padding-bottom: var(--safe-bottom) !important; }
}
/* The 3-Column Layout (Chat list | Active Chat | Profile) */
@media (min-width: 1100px) {
    #panel-chat { display: flex !important; flex-direction: column !important; }
}

/* ADD TO THE BOTTOM OF YOUR STYLE BLOCK (Outside media queries): */

/* Drop Zone Overlay */
#drop-zone-overlay {
    position: absolute; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    border: 4px dashed var(--primary); border-radius: 20px; margin: 20px;
    color: #fff; font-size: 24px; font-weight: bold; pointer-events: none;
}

/* Compact Mode */
body.compact-mode { --msg-size: 13.5px; }
body.compact-mode .msg-bubble { padding: 6px 12px; }
body.compact-mode .avatar { width: 40px; height: 40px; }
body.compact-mode .user-item { padding: 8px 20px; }
body.compact-mode .msg-bubble > .msg-timestamp { position: static; text-align: right; margin-top: 2px !important; bottom: auto; display: inline-block; float: right; margin-left: 8px; font-size: 10px !important;}

/* Add these styles for the horizontal theme preview picker */
.theme-scroll-wrapper { display: flex; gap: 14px; overflow-x: auto; width: 100%; padding: 4px 4px 12px 4px; scroll-snap-type: x mandatory; }
.theme-scroll-wrapper::-webkit-scrollbar { height: 4px; }
.theme-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.theme-group-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 4px 4px 8px; }
.theme-preview { background: none; border: none; padding: 0; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; scroll-snap-align: start; }
.theme-preview-inner { width: 64px; height: 84px; border-radius: 12px; border: 2px solid transparent; padding: 6px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.theme-preview.active .theme-preview-inner { border-color: var(--primary); transform: scale(1.05); }
.theme-preview-inner .mini-bubble { height: 14px; border-radius: 6px; width: 80%; }
.theme-preview-inner .mini-bubble.right { align-self: flex-end; }
.theme-preview-inner .mini-bubble.left { align-self: flex-start; }
.theme-label { font-size: 12px; font-weight: 600; color: var(--text-muted); transition: 0.2s; }
.theme-preview.active .theme-label { color: var(--text-main); }

/* --- 2. GLASS BORDER FOR BUTTONS --- */
.n-glass-border {
    border: 1px solid color-mix(in srgb, var(--text-main) 20%, transparent) !important;
}

/* --- 2. LAYOUT FIXES (Forces content to scroll BEHIND the glass) --- */
.n-glass-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 50;
}

.n-chat-list-pad {
    /* FIX: Reduced from 130px to 105px to perfectly fit the header height */
    padding-top: calc(105px + var(--safe-top)) !important;
    height: 100%; 
    overflow-y: auto;
}

.n-messages-absolute {
    position: absolute !important; inset: 0 !important;
    /* FIX: Adjusted to perfectly fit the floating 3-island header */
    padding-top: calc(68px + var(--safe-top)) !important;
    padding-bottom: calc(100px + var(--safe-bottom)) !important;
    overflow-y: auto !important;
}

.n-chat-area-relative { 
    position: relative !important; display: flex !important; flex-direction: column !important; height: 100% !important;
}

/* Ensures the background of the panel itself doesn't block the glass */
.n-panel-fix { 
    background: var(--bg-base) !important; 
}

/* --- 3. INPUT BAR CONTAINER FLOATING --- */
.n-input-container {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 50;
}
.n-input-bar-reset {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding-bottom: calc(12px + var(--safe-bottom)) !important;
}

/* --- SEARCH BAR TRANSLUCENT BACKGROUND --- */
.n-search-bar {
    background: color-mix(in srgb, var(--bg-input) 70%, transparent) !important;
}

/* --- INPUT BAR RESET --- */
.n-input-bar-reset {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- CUSTOM GRADIENT BORDER FOR ALL OTHER BUTTONS --- */
.btn:not(.n-liquid):not(.liquid-glass),
.icon-btn:not(.n-liquid):not(.liquid-glass),
.call-btn, .inline-btn, .n-btn-border {
    position: relative;
}
.btn:not(.n-liquid):not(.liquid-glass)::before,
.icon-btn:not(.n-liquid):not(.liquid-glass)::before,
.call-btn::before, .inline-btn::before, .n-btn-border::before {
    content: ''; position: absolute; inset: 0; z-index: 10;
    border-radius: inherit; pointer-events: none;
    padding: 1px; /* our liquid-glass rim (same as .liquid-glass::before) instead of the old white ring */
    background: linear-gradient(135deg, var(--lg-hi) 0%, var(--lg-lo) 28%, var(--lg-lo) 72%, var(--lg-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

.panel-body { overflow-x: hidden !important; } /* Prevents theme slider from breaking layout */

/* --- CONTEXT MENU BACKDROP (BUG 2) --- */
.n-ctx-backdrop {
    position: fixed; inset: 0; z-index: 8999; display: none; background: transparent;
}

/* Spinner Animation */
.loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

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

/* Disabled state for button during loading */
.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* --- Floating Context Menu --- */
#ctx-menu {
    position: fixed;
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    z-index: 9000;
    display: none;
    flex-direction: column;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 6px 0;
    transform: scale(0.95);
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#ctx-menu.show {
    transform: scale(1);
    opacity: 1;
}
.ctx-reactions {
    display: flex; gap: 6px; padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 24px; justify-content: space-between;
}
.ctx-item {
    padding: 12px 16px; font-size: 15px; font-weight: 500;
    display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.ctx-item:active, .ctx-item:hover { background: rgba(255,255,255,0.1); }
.ctx-item.danger { color: #ef4444; }

/* --- Chat List Selection & Pinning --- */
#chat-selection-bar {
    position: absolute; top: 0; left: 0; right: 0;
    height: calc(60px + var(--safe-top));
    padding-top: var(--safe-top);
    background: var(--bg-panel);
    z-index: 60; display: none; align-items: center; justify-content: space-between;
    padding-left: 20px; padding-right: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.selected-chat { background: color-mix(in srgb, var(--primary) 15%, transparent) !important; }
.pinned-chat { background: color-mix(in srgb, var(--bg-input) 60%, transparent); }
.pin-icon { width: 15px; height: 15px; opacity: 0.55; margin-right: 2px; vertical-align: text-bottom; transform: rotate(45deg); color: var(--text-muted); }

/* FIX DESKTOP LAYOUT SHIFTING & EMPTY STATE */
@media (min-width: 768px) {
    body { 
        flex-direction: row; 
    }
    
    /* 1. Reset ALL panels to default to sliding overlays on the right (Chat side) */
    .panel {
        position: absolute !important;
        width: calc(100vw - 360px) !important; 
        left: 360px !important; 
        z-index: 10;
    }

    /* 2. Sidebar (Root) is pinned left, in document flow */
    div.panel.root { 
        position: relative !important; 
        left: 0 !important;
        width: 360px !important; 
        flex-shrink: 0; 
        border-right: 1px solid var(--border); 
        z-index: 1; 
        transform: none !important; 
    }
    
    /* 3. Main Chat View is pinned next to it, in document flow */
    #panel-chat { 
        position: relative !important; 
        left: 0 !important;
        flex: 1 !important; 
        width: auto !important; 
        z-index: 0; 
        transform: none !important; 
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .link-preview { margin-top:8px; border-left:3px solid var(--primary); padding:8px; background:var(--bg-input); border-radius:8px; font-size:12px; display:none; } 
    .link-preview img { width:100%; border-radius:4px; margin-bottom:4px; } 
    /* Hide the back button in the desktop chat header */
    #panel-chat .panel-header .icon-btn[onclick="Router.pop()"] { 
        display: none; 
    }

    /* 4. "Select a Chat" Overlay when no chat is active */
    #panel-chat:not(.active)::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--bg-base); /* Hides the empty header and input bar */
        z-index: 100;
    }
    
    #panel-chat:not(.active)::after {
        content: 'Select a chat to start messaging';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--bg-input);
        color: var(--text-muted);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        z-index: 101;
        box-shadow: var(--shadow);
    }

    /* 5. Full screen overlays (Auth and Calls) */
    #panel-auth, #panel-call { 
        width: 100vw !important; 
        left: 0 !important; 
        z-index: 9999; 
    }
    
    /* Ensure active panels still slide into view properly */
    .panel.active { 
        transform: translateX(0) !important; 
    }


    /* 7. Fix FAB to stay inside the left sidebar */
    .fab { 
        bottom: 30px; 
        left: 280px !important; 
        right: auto !important; 
    }
    
    /* 8. Hide bottom nav and fix safe-area padding */
    .bottom-nav { display: none !important; }
    #panel-root .panel-body, #panel-settings .panel-body { padding-bottom: var(--safe-bottom) !important; }

    /* Constrain message width and center the input bar */
    .n-input-bar-reset {
        display: flex;
        justify-content: center;
    }
    .n-input-bar-reset > * {
        max-width: 800px; /* Limits the width of the typing area */
        margin: 0 auto;
    }
    .messages {
        align-items: center; /* Centers the bubbles in the massive void */
    }
    .msg-row {
        max-width: 1000px; /* Limits how far apart sent/received messages are */
        width: 100%;
    }
    /* Transform secondary panels into floating modals on PC */
    #panel-settings, #panel-profile, #panel-new, #panel-create-channel, #panel-sessions, #panel-folders, #panel-edit-folder, #panel-devtools, #panel-edit-group-channel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: 440px !important;
        height: 85vh !important;
        max-height: 800px;
        transform: translate(-50%, -40%) scale(0.95) !important;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        border: 1px solid var(--border);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        z-index: 9000 !important;
    }
    
    /* Active Modal State */
    #panel-settings.active, #panel-profile.active, #panel-new.active, #panel-create-channel.active, #panel-sessions.active, #panel-folders.active, #panel-edit-folder.active, #panel-devtools.active, #panel-edit-group-channel.active {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1;
        visibility: visible !important;
    }
    
    /* Add a dark blur backdrop behind modals */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(4px);
        z-index: 8999;
        opacity: 0;
        pointer-events: none;
        transition: 0.3s;
    }
    body:has(#panel-settings.active, #panel-profile.active, #panel-new.active)::after {
        opacity: 1;
        pointer-events: auto;
    }
    /* Sleek Custom Scrollbar for PC */
    ::-webkit-scrollbar {
        width: 6px; /* Super thin */
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: transparent; /* Removes the white background */
    }
    ::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-muted) 30%, transparent); 
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--text-muted) 60%, transparent); 
    }
    
    /* For Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--text-muted) 30%, transparent) transparent;
    }
}
@media (max-width: 767px) {
    #desktop-settings-btn { display: none !important; }
}
@media (hover: hover) {
    /* Replace var(--bg-hover) with the color-mix below */
    .icon-btn:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); transform: scale(1.05); }
    .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .user-item:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent) !important; padding-left: 24px; /* subtle slide effect */ }
    .bottom-nav .nav-item:hover { color: var(--text-main); transform: translateY(-2px); }
}
@keyframes bounce-spin {
    0% { transform: scale(0.8) rotate(0deg); border-radius: 20px; }
    50% { transform: scale(1.1) rotate(180deg); border-radius: 50%; }
    100% { transform: scale(0.8) rotate(360deg); border-radius: 20px; }
}
/* --- YUKICHAT FX CSS --- */
.fx-dom-el { position: absolute; pointer-events: none; will-change: transform, opacity; z-index: 100; }
@keyframes float-up { to { transform: translateY(-120vh) rotate(15deg); } }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-15px) rotate(-2deg);} 75%{transform:translateX(15px) rotate(2deg);} }
@keyframes sonar { to { width: 1000px; height: 1000px; opacity: 0; border-width: 20px; } }
@keyframes ufo-abduct { 0% { top: -100px; } 20% { top: 20%; } 80% { top: 20%; } 100% { top: -200px; } }
@keyframes bat-flight { 0% { transform: translate(0,0) scale(0.5); } 50% { transform: translate(-200px, -400px) scale(1.5); } 100% { transform: translate(300px, -100vh) scale(0.8); } }
@keyframes emp-flash { 0% { filter: invert(1) brightness(3); } 100% { filter: invert(0) brightness(1); } }
@keyframes glitch-anim { 0% { transform: translate(0); text-shadow: none; clip-path: inset(0 0 0 0); } 20% { transform: translate(-4px, 2px); text-shadow: 2px 0 red, -2px 0 cyan; clip-path: inset(20% 0 80% 0); } 40% { transform: translate(4px, -2px); text-shadow: -2px 0 red, 2px 0 cyan; clip-path: inset(80% 0 10% 0); } 60% { transform: translate(0, 0); } }

.fx-frost { box-shadow: inset 0 0 200px rgba(255,255,255,0.6); backdrop-filter: blur(10px) brightness(1.3); transition: 1s; }
.fx-heat .msg-bubble { filter: url(#heat-filter); }
.fx-water .msg-bubble { filter: url(#water-filter); }
.fx-glitch { animation: glitch-anim 0.3s cubic-bezier(.25,.46,.45,.94) both infinite; }
.fx-emp { animation: emp-flash 0.8s ease-out forwards; }
.bubble-neon { box-shadow: 0 0 15px #f0f, inset 0 0 15px #0ff !important; border: 1px solid #fff !important; }
.bubble-frozen { background: rgba(255,255,255,0.5) !important; color: #000 !important; border: 2px solid #a5f3fc !important; box-shadow: 0 0 20px #a5f3fc !important; }

/* Animated Weather Icons */
@keyframes weather-spin { to { transform: rotate(360deg); } }
@keyframes weather-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.w-anim-sun { display: inline-block; animation: weather-spin 12s linear infinite; }
.w-anim-cloud { display: inline-block; animation: weather-float 3s ease-in-out infinite; }

/* Rain & Frost Header Overlays (applied under the glass) */
.weather-grad-frost::before { 
    background: linear-gradient(180deg, rgba(200, 230, 255, 0.4), transparent) !important; 
}
.weather-grad-frost::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3"/></filter><rect width="100%" height="100%" filter="url(%23f)" opacity="0.15"/></svg>');
    mix-blend-mode: overlay;
}
.weather-grad-rain::before { 
    background: linear-gradient(180deg, rgba(100, 110, 120, 0.4), transparent) !important; 
}
.weather-grad-rain::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0.4;
    background: radial-gradient(circle at 15% 30%, rgba(255,255,255,0.6) 1px, transparent 2px), 
                radial-gradient(circle at 75% 60%, rgba(255,255,255,0.6) 1.5px, transparent 2px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.6) 1px, transparent 2px);
    background-size: 30px 40px;
}

/* Weather Popup */
#weather-popup {
    position: absolute; top: calc(60px + var(--safe-top)); right: 20px; 
    background: var(--bg-panel); border-radius: 16px; padding: 16px; 
    box-shadow: var(--shadow); z-index: 100; display: none; 
    border: 1px solid var(--border); min-width: 120px; text-align: center;
}

/* Weather Gradients (overrides the liquid glass before layer) */
.weather-grad-day::before { background: linear-gradient(180deg, rgba(135, 206, 250, 0.3), transparent) !important; }
.weather-grad-night::before { background: linear-gradient(180deg, rgba(48, 25, 52, 0.4), transparent) !important; }
.weather-grad-cloudy::before { background: linear-gradient(180deg, rgba(128, 128, 128, 0.3), transparent) !important; }

/* Pinned File Upload & AI Button */
.n-input-bar-reset div.liquid-glass { padding-right: 48px; } /* Space for pinned buttons */
#file-upload-btn-wrap { position: absolute; bottom: 6px; right: 6px; z-index: 10; }
#input-ai-btn {
    position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; border: none;
    display: none; align-items: center; justify-content: center; font-size: 14px; z-index: 10;
    box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}

/* AI Modal */
#ai-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999;
    display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.ai-card { background: var(--bg-panel); width: 90%; max-width: 400px; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.ai-tabs { display: flex; border-bottom: 1px solid var(--border); }
.ai-tab { flex: 1; padding: 14px; text-align: center; font-weight: 600; cursor: pointer; color: var(--text-muted); font-size: 14px; }
.ai-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.ai-content { padding: 20px; }
.ai-textarea { width: 100%; height: 100px; background: var(--bg-input); border: none; border-radius: 12px; padding: 12px; color: var(--text-main); resize: none; margin-bottom: 12px; font-family: inherit; font-size: 14px; }
    
/* Prevent blue text selection background */
.ctx-reactions span, .rx-pill {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* Scrollable Lottie Context Menu */
.ctx-reactions {
    display: flex; gap: 14px; padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-size: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
}
.ctx-reactions::-webkit-scrollbar { display: none; }
.ctx-reactions span { 
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0; 
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
    cursor: pointer;
}
.ctx-reactions span:hover {
    transform: scale(1.3) translateY(-4px) rotate(4deg);
    background: rgba(255, 255, 255, 0.18);
}
.ctx-reactions span:active { 
    transform: scale(0.9) translateY(0); 
}

/* Telegram-style Grouped Reaction Pills */

.rx-pill {
    display: flex; align-items: center; justify-content: center; background: var(--bg-base); 
    border-radius: 12px; padding: 2px 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
    font-size: 13px; border: 1px solid var(--border); font-weight: 600; transition: 0.2s;
}
.rx-pill:active { transform: scale(0.85); background: var(--bg-hover); }

/* The BIG Exciting Float Animation */
@keyframes exciting-lottie-float {
    0% { transform: translate(-50%, 0) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -40px) scale(3.5); opacity: 1; }
    70% { transform: translate(-50%, -80px) scale(3.5); opacity: 1; }
    100% { transform: translate(-50%, -150px) scale(1); opacity: 0; }
}
.floating-reaction {
    position: fixed; width: 120px; height: 120px;
    pointer-events: none; z-index: 99999;
    animation: exciting-lottie-float 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}/* FIX DESKTOP LAYOUT SHIFTING & EMPTY STATE */
@media (min-width: 768px) {
    :root { --sidebar-width: 360px; }
    body { flex-direction: row; }
    
    /* 1. Left Vertical Rail (Always visible) */
    body:has(#panel-auth.active) .bottom-nav { display: none !important; }
    .bottom-nav, .bottom-nav.hidden { 
        display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
        gap: 16px !important; top: 0 !important; left: 0 !important; bottom: 0 !important; 
        width: 72px !important; height: 100vh !important; 
        transform: none !important; opacity: 1 !important; visibility: visible !important;
        border-radius: 0 !important; padding-top: calc(20px + var(--safe-top)) !important;
        border-right: 1px solid var(--border) !important; background: var(--bg-panel) !important;
        box-shadow: none !important; pointer-events: auto !important; z-index: 99 !important;
    }
    .bottom-nav .nav-item { flex: none !important; height: 56px !important; }
    
    /* 2. Resizable Sidebar */
    .panel { position: absolute !important; width: calc(100vw - 72px - var(--sidebar-width)) !important; left: calc(72px + var(--sidebar-width)) !important; z-index: 10; }
    
    div.panel.root { 
        position: absolute !important; left: 72px !important; width: var(--sidebar-width) !important; 
        flex-shrink: 0; border-right: 1px solid var(--border); z-index: 1; transform: none !important;
        overflow: visible !important; /* Lets resizer hang outside */
    }
    
    /* 3. Main Chat View pinned next to it */
    #panel-chat { 
        position: absolute !important; left: calc(72px + var(--sidebar-width)) !important; 
        flex: 1 !important; width: calc(100vw - 72px - var(--sidebar-width)) !important; 
        z-index: 0; transform: none !important; visibility: visible !important; pointer-events: auto !important; 
    }
    .link-preview { margin-top:8px; border-left:3px solid var(--primary); padding:8px; background:var(--bg-input); border-radius:8px; font-size:12px; display:none; } 
    .link-preview img { width:100%; border-radius:4px; margin-bottom:4px; } 
    #panel-chat .panel-header .icon-btn[onclick="Router.pop()"] { display: none; }

    #panel-chat:not(.active)::before { content: ''; position: absolute; inset: 0; background: var(--bg-base); z-index: 100; }
    #panel-chat:not(.active)::after { content: 'Select a chat to start messaging'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-input); color: var(--text-muted); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; z-index: 101; box-shadow: var(--shadow); }

    /* 4. Full screen overlays & Context menu */
    #panel-auth, #panel-call { width: 100vw !important; left: 0 !important; z-index: 9999; }
    .panel.active { transform: translateX(0) !important; }

    /* 5. Desktop Modals */
    #panel-settings, #panel-profile, #panel-new, #panel-create-channel, #panel-sessions {
        position: fixed !important; top: 50% !important; left: 50% !important; width: 440px !important; height: 85vh !important; max-height: 800px; transform: translate(-50%, -40%) scale(0.95) !important; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); border: 1px solid var(--border); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important; z-index: 9000 !important;
    }
    #panel-settings.active, #panel-profile.active, #panel-new.active, #panel-create-channel.active, #panel-sessions.active { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; visibility: visible !important; }
    body::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 8999; opacity: 0; pointer-events: none; transition: 0.3s; }
    body:has(#panel-settings.active, #panel-profile.active, #panel-new.active)::after { opacity: 1; pointer-events: auto; }
    
    /* Fixed dynamic FAB to follow sidebar */
    .fab { bottom: 30px; left: auto !important; right: 24px !important; }
    #panel-root .panel-body, #panel-settings .panel-body { padding-bottom: var(--safe-bottom) !important; }

    /* Constraints */
    .n-input-bar-reset { display: flex; justify-content: center; }
    .n-input-bar-reset > * { max-width: 800px; margin: 0 auto; }
    .messages { align-items: center; }
    .msg-row { max-width: 1000px; width: 100%; }

    /* Scrollbars */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 30%, transparent); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 60%, transparent); }
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 30%, transparent) transparent; }

    /* 6. Drag Handle & Telegram-style Mini Mode */
    #sidebar-resizer {
        display: block !important; position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
        cursor: col-resize; z-index: 9999; transition: background 0.2s;
    }
    #sidebar-resizer:hover, #sidebar-resizer.active { background: var(--primary); }

    div.panel.root.mini-sidebar .user-info, 
    div.panel.root.mini-sidebar .call-badge,
    div.panel.root.mini-sidebar .search-wrap,
    div.panel.root.mini-sidebar #main-title { display: none !important; }
    
    div.panel.root.mini-sidebar .root-header { justify-content: center; padding-left: 0; padding-right: 0; }
    div.panel.root.mini-sidebar .user-item { justify-content: center; padding: 12px 0; }
    div.panel.root.mini-sidebar .fab { right: 50% !important; transform: translateX(50%); width: 48px; height: 48px; }
    div.panel.root.mini-sidebar .fab:active { transform: translateX(50%) scale(0.92); }
}

/* 3-Column Profile Layout on massive screens */
@media (min-width: 1100px) {
    #panel-chat { display: flex !important; flex-direction: column !important; }
}

#sidebar-resizer { display: none; } /* Hidden by default on mobile */
@media (max-width: 767px) { #desktop-settings-btn { display: none !important; } }
@media (hover: hover) {
    .icon-btn:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent); transform: scale(1.05); }
    .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .user-item:hover { background: color-mix(in srgb, var(--text-main) 8%, transparent) !important; padding-left: 24px; }
    .bottom-nav .nav-item:hover { color: var(--text-main); transform: translateY(-2px); }
}
@keyframes bounce-spin { 0% { transform: scale(0.8) rotate(0deg); border-radius: 20px; } 50% { transform: scale(1.1) rotate(180deg); border-radius: 50%; } 100% { transform: scale(0.8) rotate(360deg); border-radius: 20px; } }
/* --- UNIFIED SCROLLABLE FOLDERS --- */
/* --- UNIFIED SCROLLABLE FOLDERS --- */
.folders-container {
    display: none; /* Hide folders by default [1] */
    gap: 8px;
    padding: 10px 20px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
body.has-folders .folders-container {
    display: flex; /* Display only when folders are enabled [1] */
}
.folders-container::-webkit-scrollbar { display: none; }
.folder-pill {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-input) 60%, transparent);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--text-main) 6%, transparent);
}
.folder-pill:active {
    transform: scale(0.96);
}
.folder-pill.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* Adjust layout padding to seamlessly fit the folders container */
/* Dynamic Chat List Padding - Automatically adapts to folder visibility [1] */
/* Dynamic Chat List Padding - Restored heights to prevent overlaps [1] */
#chat-list { 
    padding-top: calc(130px + var(--safe-top)) !important; 
    transition: padding-top 0.2s ease;
}
body.has-folders #chat-list { 
    padding-top: calc(185px + var(--safe-top)) !important; 
}

/* Enforce absolute hiding for mobile folders tab bar */
#mobile-folders-nav {
    display: none;
}
body.has-folders #mobile-folders-nav {
    display: flex;
}
@media (min-width: 768px) {
    body.has-folders #desktop-folders-nav { display: none !important; }
    /* Find and replace this rule inside the @media (min-width: 768px) query: */
    body.has-folders #chat-list { padding-top: calc(180px + var(--safe-top)) !important; }
}
/* --- MEDIA PANEL TABS (STICKERS/GIFS/EMOJIS) --- */
.media-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.media-tab { flex: 1; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.media-tab.active { color: var(--text-main); border-bottom-color: var(--text-main); }
.gif-search { width: calc(100% - 32px); margin: 0 16px 8px; padding: 10px 16px; border-radius: 12px; border: none; background: var(--bg-input); color: var(--text-main); font-family: inherit; font-size: 13px; outline: none; }

/* --- INLINE PREMIUM EMOJIS --- */
.inline-lottie { display: inline-block; width: 22px; height: 22px; vertical-align: sub; margin: 0 2px; }

/* --- CONTEXT MENU UPDATES --- */
.ctx-reactions-wrapper { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 8px 16px; }
.ctx-reactions { flex: 1; border: none; padding: 0; display: flex; gap: 10px; overflow: hidden; }
.ctx-item { gap: 14px; color: #fff; }
.ctx-item svg { opacity: 0.8; }

/* --- FORWARD MODAL --- */
#forward-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(5px); }
#forward-content { background: var(--bg-panel); width: 100%; max-width: 400px; height: 70vh; border-top-left-radius: 24px; border-top-right-radius: 24px; display: flex; flex-direction: column; overflow: hidden; }

/* --- ADD MEMBER MODAL --- */
#add-member-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(5px); }
#add-member-content { background: var(--bg-panel); width: 100%; max-width: 400px; height: 70vh; border-top-left-radius: 24px; border-top-right-radius: 24px; display: flex; flex-direction: column; overflow: hidden; }
/* --- CHAT FOLDERS (TABS) --- */
#mobile-folders-nav { display: none; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--border); margin-top: 0; }
#mobile-folders-nav::-webkit-scrollbar { display: none; }
.folder-tab { padding: 12px 0 10px; border-radius: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); background: transparent; cursor: pointer; transition: 0.2s; white-space: nowrap; border-bottom: 3px solid transparent; }
.folder-tab.active { background: transparent; color: var(--primary); border-bottom: 3px solid var(--primary); }

.badge.muted-badge {
    background: var(--text-muted) !important;
    opacity: 0.6;
}

/* Desktop Folders in Side Rail */
#desktop-folders-nav { display: none; flex-direction: column; gap: 8px; width: 100%; align-items: center; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 16px; flex: 1; overflow-y: auto; overflow-x: hidden; }
#desktop-folders-nav::-webkit-scrollbar { display: none; }

/* Dynamic Chat List Padding */
#chat-list { padding-top: calc(125px + var(--safe-top)); }
body.has-folders #mobile-folders-nav { display: flex; }
body.has-folders #chat-list { padding-top: calc(165px + var(--safe-top)); }
@media (min-width: 768px) {
    /* Transform secondary panels into floating modals on PC */
    #panel-settings, #panel-profile, #panel-new, #panel-create-channel, #panel-sessions, #panel-folders, #panel-edit-folder, #panel-edit-group-channel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: 440px !important;
        height: 85vh !important;
        max-height: 800px;
        transform: translate(-50%, -40%) scale(0.95) !important;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        border: 1px solid var(--border);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        z-index: 9000 !important;
    }
    
    /* Active Modal State */
    #panel-settings.active, #panel-profile.active, #panel-new.active, #panel-create-channel.active, #panel-sessions.active, #panel-folders.active, #panel-edit-folder.active, #panel-edit-group-channel.active {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1;
        visibility: visible !important;
    }
    
    /* Add a dark blur backdrop behind modals */
    body:has(#panel-settings.active, #panel-profile.active, #panel-new.active, #panel-folders.active, #panel-edit-folder.active, #panel-edit-group-channel.active)::after {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (min-width: 768px) {
    body.has-folders #mobile-folders-nav { display: none !important; }
    body.has-folders #desktop-folders-nav { display: flex !important; }
    body.has-folders #chat-list { padding-top: calc(125px + var(--safe-top)) !important; } /* Reset padding on PC */
    
    .folder-icon-tab { width: 44px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-muted); cursor: pointer; transition: 0.2s; position: relative; flex-shrink: 0; }
    .folder-icon-tab:hover { background: var(--bg-hover); }
    .folder-icon-tab.active { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
}
/* --- VOICE MESSAGE STYLING --- */
.voice-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    min-width: 210px;
    user-select: none;
    -webkit-user-select: none;
}
.play-voice-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; border: none; outline: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--on-primary);
    transition: transform .15s;
}
.play-voice-btn:active { transform: scale(.92); }
.voice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.waveform-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    cursor: pointer;
}
.wave-bar {
    display: block;
    width: 3px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--text-main) 28%, transparent);
    border-radius: 2px;
    transition: background 0.15s;
}
.msg-row.sent .wave-bar {
    background: color-mix(in srgb, var(--msg-sent-txt) 35%, transparent);
}
.wave-bar.active {
    background: var(--primary) !important;
}
.msg-row.sent .wave-bar.active {
    background: var(--msg-sent-txt) !important;
}
.msg-row.sent .play-voice-btn {
    background: var(--msg-sent-txt) !important;
    color: var(--msg-sent) !important;
}
.voice-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.voice-rate {
    border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 10.5px;
    padding: 1px 6px; border-radius: 8px; color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
    visibility: hidden;
}
.voice-player.playing .voice-rate, .voice-rate:hover { visibility: visible; }

/* --- ROUND VIDEO NOTE STYLING --- */
.video-note-container {
    position: relative;
    width: 220px;
    height: 220px;
    max-width: 62vw;
    max-height: 62vw;
    border-radius: 50% !important;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow: var(--shadow);
    transition: width .25s ease, height .25s ease;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* keeps the circle while Safari plays video */
}
.video-note-container.playing { width: 280px; height: 280px; max-width: 76vw; max-height: 76vw; }
.video-note-player {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.vn-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.vn-ring-bar {
    fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round;
    stroke-dasharray: 304.7; stroke-dashoffset: 304.7; opacity: 0; transition: opacity .2s;
}
.video-note-container.playing .vn-ring-bar { opacity: .9; }
.video-note-overlay {
    position: absolute;
    left: 50%; top: 50%;
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s;
    border-radius: 50%;
    pointer-events: none;
}
.video-note-container.playing:not(.paused) .video-note-overlay { opacity: 0; }
.vn-time {
    position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%);
    padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: #fff;
    background: rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; pointer-events: none;
}
.vn-time:empty { display: none; }

/* --- RECORDING OVERLAY --- */
.rec-hud {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    align-items: center; justify-content: center; flex-direction: column; gap: 14px;
    color: #fff; padding: 24px;
}
.rec-circle { position: relative; width: min(260px, 70vw); height: min(260px, 70vw); border-radius: 50%; overflow: hidden; background: #000; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.rec-circle video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.rec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-ring-bar { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 304.7; stroke-dashoffset: 304.7; }
.rec-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; }
.rec-wave span { display: block; width: 4px; height: 4px; border-radius: 2px; background: var(--primary); transition: height .08s linear; }
.rec-timer { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4f; animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-lock { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); transition: background .2s, color .2s; }
.rec-lock.on { background: var(--primary); color: var(--on-primary); }
.rec-hint { font-size: 13px; color: rgba(255,255,255,.72); text-align: center; transition: opacity .1s; }
.rec-actions { display: flex; gap: 14px; margin-top: 6px; }
.rec-btn { border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: 14px; }
.rec-cancel { background: rgba(255,255,255,.1); color: #ff6b6b; }
.rec-send { background: var(--primary); color: var(--on-primary); }

/* --- ATTACHMENT POPOVER STYLING --- */
#attach-popover {
    display: none;
    position: absolute;
    bottom: 60px;
    right: 16px;
    width: 210px;
    border-radius: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    z-index: 1000;
    padding: 6px 0;
}
#attach-popover .ctx-item {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
#attach-popover .ctx-item:active {
    background: var(--bg-hover);
}

/* --- ACCESSIBILITY AND DRAG LOCK PREVENTS --- */
#recording-hud, #record-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
}

/* --- DYNAMIC MUSIC STATUS PROFILE BACKGROUND --- */
.profile-status-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    pointer-events: none;
    transition: background-image 0.5s ease;
}
.profile-status-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 65%);
    z-index: 2;
    pointer-events: none;
}
.profile-content-wrap {
    position: relative;
    z-index: 3;
}

/* --- RADIAL FREQUENCY VISUALIZER --- */
.visualizer-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    width: 130px;
    height: 130px;
}

/* --- APP-WIDE TOP MINI MUSIC PLAYER --- */
.mini-player-top {
    position: absolute;
    top: calc(68px + var(--safe-top));
    left: 16px;
    right: 16px;
    height: 44px;
    border-radius: 22px;
    z-index: 49;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    cursor: pointer;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow);
}
.icon-btn.n-clear::before, .icon-btn.n-clear::after {
    display: none !important;
}
.msg-bubble blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 8px;
    margin: 4px 0;
    color: var(--text-muted);
    font-style: italic;
}
.msg-bubble ul, .msg-bubble ol {
    padding-left: 20px;
    margin: 4px 0;
}
.msg-bubble li {
    margin: 2px 0;
}
.msg-bubble h2, .msg-bubble h3 {
    margin: 6px 0 2px 0;
    font-size: 1.1em;
    font-weight: 600;
}
.mini-player-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.mini-player-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--bg-input);
}
.mini-player-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- EXPANDED MUSIC PLAYER DIALOG/MODAL --- */
#panel-music-dashboard {
    z-index: 9005;
}
.dashboard-player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
}
.dashboard-album-art {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    background: var(--bg-input);
}
.dashboard-slider {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    margin: 16px 0;
    cursor: pointer;
}
.dashboard-progress {
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
    width: 0%;
}

/* --- INTERACTIVE CUSTOM VIDEO PLAYER --- */
.custom-video-player {
    position: relative;
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin-top: 4px;
}
.custom-video-element {
    width: 100%;
    display: block;
}
.video-controls-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}
.custom-video-player:hover .video-controls-overlay {
    opacity: 1;
}
.video-seek-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.video-seek-progress {
    height: 100%;
    background: var(--primary);
    border-radius: inherit;
    width: 0%;
}

/* --- STYLISH AUDIO AND DOCUMENT CARD ATTACHMENTS --- */
.audio-msg-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-input);
    padding: 12px;
    border-radius: 16px;
    min-width: 240px;
    max-width: 320px;
    margin-top: 4px;
}
.audio-card-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.doc-attachment-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-input);
    padding: 12px;
    border-radius: 16px;
    min-width: 240px;
    max-width: 320px;
    margin-top: 4px;
    text-decoration: none !important;
    color: inherit !important;
}




/* --- Telegram-style Grouped Reaction Pills --- */
.msg-reactions-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
    position: relative;
    z-index: 20;
    perspective: 1000px;
}
.rx-avatars-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    margin-right: 2px;
}
.rx-mini-avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border);
    object-fit: cover;
    margin-left: -5px;
}
.rx-mini-avatar:first-child {
    margin-left: 0;
}

.rx-chain-stack {
    position: relative;
    display: inline-flex;
    height: 30px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: rx-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.rx-chain-stack:hover {
    transform: scale(1.12) translateY(-3px);
    z-index: 25;
}

.rx-chain-stack:active {
    transform: scale(0.92);
}

@keyframes rx-pop-in {
    0% { transform: scale(0) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.rx-stack-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

[data-theme="light"] .rx-stack-pill {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* The active topmost pill determines the flow size of the stack container */
.rx-stack-pill[data-depth="0"] {
    position: relative;
    z-index: 10;
}

/* Background cascading cards sit behind the topmost pill */
.rx-stack-pill:not([data-depth="0"]) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.rx-stack-pill[data-depth] {
    transform: 
        scale(calc(1 - (var(--depth) * 0.08))) 
        translate(calc(var(--depth) * -6px), calc(var(--depth) * -3px));
    opacity: calc(1 - (var(--depth) * 0.22));
    z-index: calc(10 - var(--depth));
}

.rx-stack-pill.active-reaction {
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-panel)) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.15);
}
/* ========================================================
   YUKICHAT DESIGN OVERRIDES (.N- SERIES)
   ======================================================== */

/* Asymmetrical message bubble geometry */
.msg-row.sent .msg-bubble {
    border-radius: 18px 18px 4px 18px !important;
    background: var(--msg-sent) !important;
    box-shadow: 0 4px 15px -3px var(--primary-glow) !important;
}
.msg-row.received .msg-bubble {
    border-radius: 18px 18px 18px 4px !important;
    border: 1px solid var(--border) !important;
    background: var(--msg-recv) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

/* Redesigned clean tables */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 12px 0 !important;
    width: 100% !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
}
tr { border-bottom: 1px solid var(--border) !important; }
tr:last-child { border-bottom: none !important; }
th, td { 
    padding: 8px 12px !important; 
    border-right: 1px solid var(--border) !important; 
    border-bottom: 1px solid var(--border) !important; 
}
th:last-child, td:last-child { border-right: none !important; }
tr:last-child td { border-bottom: none !important; }
th { 
    font-weight: 600 !important; 
    background: rgba(150,150,150,0.06) !important; 
    color: var(--text-main) !important; 
}

/* Audio Player Layout: Play button on the left */
.audio-msg-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}

/* --- COMPACT & SLEEK CODE CONTAINERS --- */
.code-container {
    background: #181825 !important; /* Modern Catppuccin-inspired dark base */
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 8px 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    max-width: 100%;
}
.code-header {
    background: #11111b !important;
    padding: 6px 12px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.code-dots { display: flex; gap: 5px; align-items: center; }
.code-dot { width: 7px; height: 7px; border-radius: 50%; background: #45475a; }
.code-dot.red { background: #f38ba8; }
.code-dot.yellow { background: #f9e2af; }
.code-dot.green { background: #a6e3a1; }

.code-copy-btn {
    background: none !important; border: none !important; 
    color: #a6adc8 !important; font-size: 11px !important; 
    font-weight: 600 !important; cursor: pointer;
    display: flex; align-items: center; gap: 4px; 
    transition: color 0.15s, background-color 0.15s;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}
.code-copy-btn:hover { color: #cdd6f4 !important; background: rgba(255,255,255,0.06) !important; }

pre { 
    padding: 10px 14px !important; 
    overflow-x: auto !important; 
    overflow-y: auto !important; 
    max-height: 250px !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-size: 12px !important; /* Perfect modern compact size */
    line-height: 1.5 !important;
    white-space: pre-wrap; 
    text-align: left; 
    margin: 0; 
    border: none; 
    color: #cdd6f4 !important; 
}

/* --- TELEGRAM-STYLE MEDIA LOADERS --- */
.media-blur-wrapper {
    position: relative;
    width: 240px;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-blur-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(15px);
    transform: scale(1.1);
    opacity: 0.6;
}
.download-progress-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    z-index: 2;
}
.progress-circle-svg {
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}
.progress-circle-bg {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 4;
}
.progress-circle-bar {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    transition: stroke-dashoffset 0.1s;
}
.download-arrow-icon {
    position: absolute;
    color: #fff;
    font-size: 20px;
    pointer-events: none;
}

/* --- DYNAMIC SENDING MEDIA LAYOUTS --- */
.sending-media-wrapper {
    position: relative;
    width: 240px;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sending-media-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(15px);
    transform: scale(1.1);
    opacity: 0.5;
}
.sending-media-loader-container {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.sending-progress-circle {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}
.sending-circle-bg {
    fill: rgba(0, 0, 0, 0.4);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 4;
}
.sending-circle-bar {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    transition: stroke-dashoffset 0.1s;
}
.sending-progress-icon {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    pointer-events: none;
    z-index: 4;
}
code { 
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    background: rgba(148, 163, 184, 0.12) !important; 
    padding: 2px 5px !important; 
    border-radius: 6px !important; 
    font-size: 11px !important; 
    color: inherit !important;
}

/* ===== Media messages, uploads & attachment tray ===== */
.msg-bubble.ym-bubble-media, .msg-bubble.ym-bubble-bare { white-space: normal; }
.msg-bubble .ym-caption { white-space: pre-wrap; }
.msg-bubble.ym-bubble-media { padding: 3px !important; overflow: visible; }
.msg-bubble.ym-bubble-bare { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
.msg-bubble.ym-bubble-bare::before, .msg-bubble.ym-bubble-bare::after { display: none !important; }
.ym-media { position: relative; display: block; width: min(320px, 68vw); max-height: 420px; min-height: 90px; border-radius: 17px; overflow: hidden; background: color-mix(in srgb, var(--bg-input) 70%, #000 30%); cursor: pointer; isolation: isolate; }
.msg-row.sent .ym-bubble-bare .ym-media { border-bottom-right-radius: 6px; }
.msg-row.received .ym-bubble-bare .ym-media { border-bottom-left-radius: 6px; }
.ym-media > img, .ym-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.ym-media > img { opacity: 0; transition: opacity .25s ease; }
.ym-media > img.ym-loaded { opacity: 1; }
.ym-media.ym-error::after { content: 'Media unavailable'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; opacity: .7; }
.ym-badge { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; font-variant-numeric: tabular-nums; }
.ym-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease, background .15s ease; pointer-events: none; }
.ym-media:hover .ym-play { transform: scale(1.06); background: rgba(0,0,0,.6); }
.ym-media.ym-playing { cursor: default; }
.ym-media.ym-playing > video { object-fit: contain; background: #000; }
.ym-album { display: grid; gap: 2px; width: min(320px, 68vw); border-radius: 17px; overflow: hidden; }
.ym-album .ym-media { width: 100%; max-height: none; min-height: 0; border-radius: 0 !important; aspect-ratio: 1 / 1; }
.ym-album.n2 { grid-template-columns: 1fr 1fr; } .ym-album.n2 .ym-media { aspect-ratio: 3 / 4; }
.ym-album.n3 { grid-template-columns: 1fr 1fr; } .ym-album.n3 .ym-media:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.ym-album.n4 { grid-template-columns: 1fr 1fr; }
.ym-album.n5, .ym-album.n6, .ym-album.n7, .ym-album.n8, .ym-album.n9, .ym-album.n10 { grid-template-columns: repeat(6, 1fr); }
.ym-album.n5 .ym-media, .ym-album.n6 .ym-media, .ym-album.n7 .ym-media, .ym-album.n8 .ym-media, .ym-album.n9 .ym-media, .ym-album.n10 .ym-media { grid-column: span 2; }
.ym-album.n5 .ym-media:nth-child(-n+2), .ym-album.n7 .ym-media:nth-child(-n+2), .ym-album.n10 .ym-media:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 4 / 3; }
.ym-album.n8 .ym-media:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 4 / 3; }
.ym-caption { padding: 7px 10px 5px; }
.ym-bubble-media > .ym-file { margin: 0; }
/* Progress ring used for uploads */
.ym-progress { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.28); }
.ym-ring { position: relative; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: none; padding: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ym-ring svg.ym-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ym-ring .ym-ring-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.ym-ring .ym-ring-bar { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 131; transition: stroke-dashoffset .2s ease; }
.ym-ring.ym-indeterminate svg.ym-ring-svg { animation: ym-spin 1s linear infinite; }
.ym-ring.ym-indeterminate .ym-ring-bar { stroke-dashoffset: 100; }
.ym-ring.ym-failed { background: var(--danger); }
.ym-ring.ym-failed svg.ym-ring-svg { display: none; }
@keyframes ym-spin { to { transform: rotate(270deg); } }
.ym-progress-label { padding: 3px 9px; border-radius: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ym-media.ym-uploading > img, .ym-media.ym-uploading > video { filter: blur(2px) brightness(.85); opacity: 1; }
/* Documents */
.ym-file { display: flex; align-items: center; gap: 12px; min-width: 220px; max-width: min(320px, 68vw); padding: 9px 12px 9px 9px; border-radius: 16px; text-decoration: none; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); }
.ym-file-icon { position: relative; width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.ym-file-icon .ym-ring { position: absolute; inset: 0; width: 46px; height: 46px; background: rgba(0,0,0,.35); }
.ym-file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ym-file-name { font-size: 14px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ym-file-meta { font-size: 12px; opacity: .65; font-variant-numeric: tabular-nums; }
.ym-file-dl { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 12%, transparent); }
.ym-file-stack { display: flex; flex-direction: column; gap: 4px; }
/* Attachment tray (before sending) */
#media-preview.ym-tray { display: none; flex-direction: column; gap: 10px; margin: 0 16px 10px; padding: 12px; border-radius: 20px; border: 1px solid var(--border); }
.ym-tray-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-main); }
.ym-tray-head .ym-tray-sub { font-weight: 500; color: var(--text-muted); }
.ym-tray-head .ym-spacer { flex: 1; }
.ym-tray-btn { height: 30px; padding: 0 12px; border-radius: 15px; border: none; background: var(--bg-hover); color: var(--text-main); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ym-tray-btn.ym-icon { width: 30px; padding: 0; justify-content: center; }
.ym-tray-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ym-tray-strip::-webkit-scrollbar { display: none; }
.ym-tile { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--bg-input); display: flex; align-items: center; justify-content: center; }
.ym-tile img, .ym-tile video { width: 100%; height: 100%; object-fit: cover; }
.ym-tile .ym-tile-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 22px; text-align: center; cursor: pointer; padding: 0; }
.ym-tile .ym-badge { top: auto; bottom: 4px; left: 4px; padding: 2px 6px; font-size: 10px; }
.ym-tile.ym-tile-file { width: 150px; justify-content: flex-start; gap: 8px; padding: 0 30px 0 10px; }
.ym-tile.ym-tile-file .ym-file-icon { width: 38px; height: 38px; font-size: 10px; }
.ym-tile.ym-tile-file .ym-tile-name { font-size: 12px; font-weight: 600; color: var(--text-main); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ym-tile.ym-tile-file .ym-tile-size { font-size: 11px; color: var(--text-muted); }
.ym-failed-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--danger); font-weight: 600; padding: 6px 8px 4px; }
.ym-failed-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.ym-failed-actions button { height: 26px; padding: 0 12px; border-radius: 13px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ym-bubble-bare .ym-failed-note { background: var(--bg-panel); border-radius: 12px; margin-top: 4px; }

/* ===================== DIALOGS =====================
   One look for every popup: solid card on a dimmed backdrop, centered on desktop,
   a bottom sheet on phones. Overrides the old inline "liquid glass" styles. */
#why-best-modal, #change-password-modal, #recovery-modal, #interactive-modal, #forward-modal, #add-member-modal, #ai-modal {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important;
    align-items: center !important; justify-content: center !important;
    padding: 16px !important; z-index: 11000 !important;
}
#why-best-modal > div, #change-password-modal > div, #recovery-modal > div, #interactive-modal > div,
#forward-content, #add-member-content, #ai-modal .ai-card {
    background: var(--bg-panel) !important; color: var(--text-main) !important;
    border: 1px solid var(--border) !important; border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35) !important;
    padding: 22px !important; text-align: left !important;
    width: 100% !important; max-width: 420px !important; max-height: 85dvh; overflow-y: auto;
    animation: dlg-in 0.18s ease-out;
}
#forward-content, #add-member-content { padding: 0 !important; display: flex; flex-direction: column; height: 70dvh; }
#why-best-modal > div::before, #why-best-modal > div::after, #change-password-modal > div::before, #change-password-modal > div::after,
#recovery-modal > div::before, #recovery-modal > div::after, #interactive-modal > div::before, #interactive-modal > div::after { display: none !important; }
#interactive-modal-title, #change-password-modal h2, #recovery-modal h2, #why-best-modal h2 {
    font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; margin-bottom: 8px !important;
}
#interactive-modal-body { color: var(--text-muted) !important; font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
#interactive-modal-body:empty { display: none; }
#interactive-modal-custom { margin-bottom: 18px !important; }
/* Inputs inside dialogs: plain filled fields */
#change-password-modal .settings-input, #recovery-modal .settings-input, #interactive-modal .settings-input {
    background: var(--bg-input) !important; border: 1px solid var(--border) !important; border-radius: 12px !important;
    color: var(--text-main) !important; box-shadow: none !important;
}
#change-password-modal .settings-input:focus, #recovery-modal .settings-input:focus, #interactive-modal .settings-input:focus { border-color: var(--primary) !important; outline: none; }
/* Buttons */
#interactive-modal-buttons { display: flex !important; gap: 10px !important; justify-content: flex-end !important; }
#interactive-modal-buttons.stacked { flex-direction: column !important; }
.dlg-btn { flex: 1; padding: 12px 16px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 600 !important; border: 1px solid transparent !important; box-shadow: none !important; }
.dlg-btn::before, .dlg-btn::after { display: none !important; }
.dlg-primary { background: var(--primary) !important; color: var(--on-primary) !important; }
.dlg-danger { background: color-mix(in srgb, var(--danger) 14%, transparent) !important; color: var(--danger) !important; }
.dlg-secondary { background: var(--bg-input) !important; color: var(--text-main) !important; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dlg-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 600px) {
    #why-best-modal, #change-password-modal, #recovery-modal, #interactive-modal, #forward-modal, #add-member-modal, #ai-modal {
        align-items: flex-end !important; padding: 0 !important;
    }
    #why-best-modal > div, #change-password-modal > div, #recovery-modal > div, #interactive-modal > div,
    #forward-content, #add-member-content, #ai-modal .ai-card {
        max-width: 100% !important; border-radius: 20px 20px 0 0 !important; border-bottom: none !important;
        padding-bottom: calc(22px + var(--safe-bottom)) !important; animation: dlg-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #interactive-modal > div::before { content: ''; display: block !important; position: static !important; width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: -8px auto 14px; }
    #interactive-modal-buttons { flex-direction: column-reverse !important; }
    #interactive-modal-buttons.stacked { flex-direction: column !important; }
}
/* Chat theme grid inside the dialog */
.chat-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; max-height: 46dvh; overflow-y: auto; padding: 2px; }
.chat-theme-grid .theme-preview-inner { width: 100%; height: 64px; }
.chat-theme-grid .theme-default { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); }

/* ===================== SETTINGS HOME ===================== */
.set-profile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 8px 0 20px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 18px; cursor: pointer; }
.set-profile-av { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-input); }
.set-profile-text { flex: 1; min-width: 0; }
.set-profile-name { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-profile-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.set-group { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 16px; }
.set-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; }
.set-item + .set-item, .set-group > div + .set-item, .set-item + div > .set-item { border-top: 1px solid var(--border); }
.set-item:hover, .set-profile:hover { background: var(--bg-hover); }
.set-ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.set-label { flex: 1; font-size: 15px; font-weight: 500; }
.set-value { font-size: 14px; color: var(--text-muted); }
.set-chev { color: var(--text-muted); opacity: 0.6; flex-shrink: 0; }
.set-item.danger .set-label { color: var(--danger); }
.settings-page > .settings-header:first-child { margin-top: 12px; }

/* ===================== SEARCH RESULTS ===================== */
.sr-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 14px 20px 6px; }
.sr-item { padding: 9px 20px !important; gap: 12px !important; }
.sr-av { width: 46px !important; height: 46px !important; flex-shrink: 0; }
.sr-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sr-who { color: var(--text-main); font-weight: 500; }
.sr-date { font-size: 12px; color: var(--text-muted); align-self: flex-start; margin-top: 3px; flex-shrink: 0; }
.sr-hl { background: color-mix(in srgb, var(--primary) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sr-empty { padding: 48px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.sr-empty-ico { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
.sr-progress { height: 2px; margin: 0 20px; border-radius: 2px; background: transparent; overflow: hidden; position: relative; }
.sr-progress.on::after { content: ''; position: absolute; inset: 0; width: 30%; background: var(--primary); animation: sr-bar 0.9s ease-in-out infinite; }
@keyframes sr-bar { from { transform: translateX(-100%); } to { transform: translateX(400%); } }

/* ===================== GROUP / CHANNEL MANAGEMENT ===================== */
.mg-body { padding: 0 16px 40px !important; }
.mg-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 10px 0 18px; }
.mg-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 6px; }
.mg-av-wrap { position: relative; cursor: pointer; }
.mg-av-wrap.ro { cursor: default; }
.mg-av { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--bg-input); }
.mg-av-edit { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; }
.mg-input { width: 100%; margin: 0 !important; background: var(--bg-input) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; color: var(--text-main) !important; resize: none; }
.mg-input:disabled { opacity: 0.7; }
.mg-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; min-height: 48px; }
.mg-row + .mg-row { border-top: 1px solid var(--border); }
.mg-row:hover { background: var(--bg-hover); }
.mg-label { flex: 1; font-size: 15px; }
.mg-value { color: var(--text-muted); font-size: 14px; }
.mg-accent .mg-label { color: var(--primary); font-weight: 600; }
.mg-hint { font-size: 12.5px; color: var(--text-muted); padding: 8px 16px 12px; line-height: 1.45; }
.mg-seg { display: flex; margin: 14px 16px 6px; background: var(--bg-input); border-radius: 12px; padding: 3px; }
.mg-seg button { flex: 1; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--text-muted); background: transparent; }
.mg-seg button.on { background: var(--bg-panel); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.mg-seg.disabled { pointer-events: none; opacity: 0.7; }
.mg-handle { display: flex; align-items: center; margin: 8px 16px 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
.mg-handle span { color: var(--text-muted); font-size: 14px; }
.mg-handle input { flex: 1; border: none; background: transparent; outline: none; color: var(--text-main); font-size: 15px; padding: 11px 2px; min-width: 0; }
.mg-link { margin: 6px 16px 0; padding: 10px 12px; background: var(--bg-input); border-radius: 12px; font-size: 13px; word-break: break-all; color: var(--primary); }
.mg-btns { display: flex; gap: 8px; padding: 10px 16px 14px; }
.mg-save { color: var(--primary); font-weight: 700; font-size: 15px; background: none; padding: 8px 4px; }
.mg-toggle { cursor: pointer; }
.mg-toggle input { display: none; }
.mg-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--border); position: relative; transition: background 0.2s; flex-shrink: 0; }
.mg-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.mg-toggle input:checked + .mg-switch { background: var(--primary); }
.mg-toggle input:checked + .mg-switch::after { transform: translateX(18px); background: var(--on-primary); }
.mg-toggle.disabled { opacity: 0.45; cursor: default; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 4px; }
.mg-chip { padding: 7px 14px; border-radius: 16px; background: var(--bg-input); color: var(--text-main); font-weight: 600; font-size: 13px; }
.mg-chip.on { background: var(--primary); color: var(--on-primary); }
.mg-search { margin: 12px 0 0; }
.mg-member { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.mg-member + .mg-member { border-top: 1px solid var(--border); }
.mg-member:hover { background: var(--bg-hover); }
.mg-member .avatar { width: 42px; height: 42px; flex-shrink: 0; }
.mg-member-big { padding: 18px 4px 4px; cursor: default; }
.mg-member-big .avatar { width: 56px; height: 56px; }
.mg-member-text { flex: 1; min-width: 0; }
.mg-member-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-member-sub { font-size: 13px; color: var(--text-muted); }
.mg-you { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.mg-role { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mg-role.owner, .mg-role.admin { color: var(--primary); }
.mg-unban { color: var(--primary); font-weight: 600; font-size: 14px; background: none; padding: 6px; }
#prof-subs-list .mg-member { padding: 8px 4px; }
/* Plain monochrome icons in the settings menu */
.set-ico { background: none !important; color: var(--text-muted) !important; width: 24px !important; }
.set-item.danger .set-ico { color: var(--danger) !important; }

/* ---- Auth form (2026-10-10) ---- */
#auth-slide-credentials { position: relative; }
.auth-back { position: absolute; top: -12px; left: -6px; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--text-main); font-size: 22px; cursor: pointer; }
.auth-back:hover { background: var(--bg-input); }
.auth-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 0 0 6px 4px; text-transform: uppercase; letter-spacing: .5px; }
.auth-field { background: transparent !important; margin-bottom: 14px !important; width: 100%; box-sizing: border-box; }
.auth-field:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.auth-pass-wrap { position: relative; }
.auth-pass-wrap .auth-field { padding-right: 48px !important; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(calc(-50% - 7px)); width: 38px; height: 38px; border: none; background: transparent; cursor: pointer; font-size: 18px; border-radius: 50%; color: var(--text-muted); }
.auth-hint { font-size: 12px; color: var(--text-muted); margin: -6px 4px 6px; line-height: 1.4; }
.auth-hint:empty { display: none; }
.auth-error { display: none; font-size: 13px; color: #ff5a5f; background: color-mix(in srgb, #ff5a5f 12%, transparent); border-radius: 12px; padding: 10px 12px; margin: 4px 0 6px; font-weight: 600; }
#btn-auth-main:disabled { opacity: .7; cursor: progress; }

/* ---- Chat customization prefs ---- */
.cz-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
.cz-row input[type=range] { width: 45%; accent-color: var(--primary); }
.cz-row input[type=checkbox] { width:20px; height:20px; accent-color: var(--primary); }
.msg-bubble { border-radius: var(--cz-radius, 20px) !important; max-width: var(--cz-width, 75%) !important; }
body.cz-compact .msg-bubble { padding: 7px 12px !important; }
body.cz-compact .msg-row, body.cz-compact .msg { margin-bottom: 2px !important; }
body.cz-roomy .msg-bubble { padding: 15px 20px !important; }
body.cz-roomy .msg-row, body.cz-roomy .msg { margin-bottom: 12px !important; }
body.cz-reduce-motion *, body.cz-reduce-motion *::before, body.cz-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
body.cz-no-previews .link-preview, body.cz-no-previews .link-preview-card { display: none !important; }

/* --- DEFAULT CHAT WALLPAPER --- */
/* Theme-tinted pattern chosen in Settings (built in js/wallpapers.js) whenever the chat has no custom wallpaper.
   !important beats the inline background-image:none that the wallpaper code sets. */
.chat-area:not([style*="url("]) {
    background-image: var(--chat-pattern) !important;
    background-size: var(--chat-pattern-size) !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-position: 0 0, center, center !important;
}

/* --- SETTINGS → APPEARANCE --- */
.ap-page { padding: 0 16px calc(32px + var(--safe-bottom)) !important; min-width: 0; overflow-x: hidden; }
.ap-preview { margin: 8px 0 0; border-radius: 18px; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border);
    background-color: var(--chat-bg); background-image: var(--chat-pattern); background-size: var(--chat-pattern-size); background-repeat: repeat, no-repeat, no-repeat; background-position: center; }
.ap-b { max-width: var(--cz-width, 75%); padding: 8px 12px; border-radius: var(--cz-radius, 20px); font-size: 14px; line-height: 1.35; transition: border-radius .15s, max-width .15s; }
.ap-b i { font-style: normal; font-size: 10.5px; opacity: .6; float: right; margin: 5px 0 0 8px; }
.ap-b.in { align-self: flex-start; background: var(--msg-recv); color: var(--msg-recv-txt); }
.ap-b.out { align-self: flex-end; background: var(--msg-sent); color: var(--msg-sent-txt); }
body.cz-compact .ap-preview { gap: 2px; } body.cz-compact .ap-b { padding: 6px 11px; }
body.cz-roomy .ap-preview { gap: 12px; } body.cz-roomy .ap-b { padding: 12px 16px; }
/* glass sample: a header pill and an input bar float over the first and last bubbles, so tint/blur changes show live */
.ap-preview { position: relative; overflow: hidden; padding: 38px 12px 34px; }
.ap-gl-top { position: absolute; top: 10px; left: 10px; right: 10px; height: 44px; border-radius: 22px; display: flex; align-items: center; gap: 10px; padding: 0 8px; z-index: 2; color: var(--text-main); }
.ap-gl-av { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary, #fff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.ap-gl-name { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; } .ap-gl-name small { font-size: 11.5px; color: var(--text-muted); }
.ap-gl-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; z-index: 2; }
.ap-gl-input { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; padding: 0 16px; font-size: 14px; color: var(--text-muted); }
.ap-gl-send { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-main); }

.ap-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 22px 6px 8px; }
.ap-card { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 16px; padding: 0 14px; min-width: 0; overflow: hidden; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 52px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 500; cursor: pointer; margin: 0; }
.ap-card > .ap-row:last-child { border-bottom: none; }
.ap-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-row-text small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.ap-col { flex-direction: column; align-items: stretch; gap: 10px; cursor: default; }
.ap-row-head { display: flex; justify-content: space-between; align-items: center; }
.ap-val { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ap-range { width: 100%; margin: 0; height: 24px; accent-color: var(--primary); cursor: pointer; }

.ap-switch { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: rgba(120,120,128,.36); position: relative; cursor: pointer; transition: background .2s; }
.ap-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.ap-switch:checked { background: var(--primary); }
.ap-switch:checked::after { transform: translateX(18px); background: var(--on-primary); }

.ap-seg { display: flex; gap: 3px; padding: 3px; margin: 12px 0 2px; background: var(--bg-input); border-radius: 12px; }
.ap-seg button { flex: 1; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: background .15s, color .15s; }
.ap-seg button.active { background: var(--primary); color: var(--on-primary); }
.ap-seg-full { margin: 0; }
.ap-strip { position: relative; display: flex; gap: 12px; overflow-x: auto; padding: 12px 4px 14px; scrollbar-width: none; }
.ap-strip::-webkit-scrollbar { display: none; }

.ap-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 14px 10px; padding: 14px 0; }
.ap-wall { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0; margin: 0; background: none; border: none; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.ap-wall-tile { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .15s; }
.ap-wall:active .ap-wall-tile { transform: scale(.95); }
.ap-wall-tile.active { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.ap-wall-tile.active::after { content: '✓'; position: absolute; right: 5px; bottom: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ap-wall:has(.active) span { color: var(--text-main); font-weight: 600; }

.ap-emoji { display: flex; gap: 8px; }
.ap-emoji button { flex: 1; height: 44px; border-radius: 12px; background: var(--bg-input); border: 2px solid transparent; font-size: 22px; }
.ap-emoji button.active { border-color: var(--primary); }
.ap-reset { width: 100%; height: 48px; margin: 24px 0 8px; border-radius: 14px; background: var(--bg-hover); border: 1px solid var(--border); color: var(--danger); font-size: 15px; font-weight: 600; }

/* Context menu opens from the point that was touched */
#ctx-menu { transform-origin: var(--ctx-ox, 0) var(--ctx-oy, 0); }

/* --- MUSIC: message card, mini player, full player --- */
.ym-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.ym-eq i { width: 3px; height: 3px; border-radius: 1px; background: currentColor; animation: ym-eq .9s ease-in-out infinite; }
.ym-eq i:nth-child(2) { animation-delay: -.3s; } .ym-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes ym-eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }

.ym-track { display: flex; align-items: center; gap: 12px; width: min(290px, 68vw); padding: 2px 0; text-align: left; }
.ym-track-play { position: relative; flex-shrink: 0; width: 54px; height: 54px; border-radius: 14px; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6d5dfc, #e2558f); background-size: cover; background-position: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.ym-track-ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s; }
.ym-track-play:active .ym-track-ico { transform: scale(.9); }
.ym-track .i-play { margin-left: 2px; }
.ym-track .i-pause, .ym-track.playing .i-play { display: none; }
.ym-track.playing .i-pause { display: block; }
.ym-track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ym-track-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-track-artist { font-size: 12.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-track-bar { position: relative; height: 4px; margin-top: 7px; border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); cursor: pointer; }
.ym-track-bar::before { content: ''; position: absolute; inset: -8px 0; }
.ym-track-fill { height: 100%; width: 0; border-radius: 2px; background: currentColor; transition: width .2s linear; }
.ym-track:not(.active) .ym-track-bar { opacity: .6; }
.ym-track-time { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; min-height: 13px; }
.ym-track .ym-eq { display: none; } .ym-track.playing .ym-eq { display: inline-flex; }

#music-mini-player.mini-player-top { height: 54px; border-radius: 18px; padding: 0 6px; gap: 6px; justify-content: flex-start; overflow: hidden; }
#music-mini-player .mini-player-thumb { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; object-fit: cover; }
#music-mini-player .mini-player-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; margin-left: 4px; }
#music-mini-player .mini-player-text b, #music-mini-player .mini-player-text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#music-mini-player .mini-player-text b { font-size: 13.5px; font-weight: 600; }
#music-mini-player .mini-player-text span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.mini-player-btn { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); }
.mini-player-btn:active { background: var(--bg-hover); }
.mini-player-btn .i-pause, #music-mini-player.playing .i-play { display: none; }
#music-mini-player.playing .i-pause { display: block; }
.mini-player-progress { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2.5px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--text-main) 12%, transparent); }
#mini-player-progress-fill { height: 100%; width: 0; background: var(--primary); }

#panel-music-dashboard { z-index: 9005; background: var(--bg-base); overflow: hidden; }
.mp-backdrop { position: absolute; inset: -60px; pointer-events: none; background-size: cover; background-position: center; opacity: .6; filter: blur(60px) saturate(1.5); transform: scale(1.15);
    background-image: radial-gradient(circle at 30% 20%, var(--primary), transparent 60%); }
.mp-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 10%, var(--bg-base) 80%); }
#panel-music-dashboard .mp-header { position: relative; z-index: 2; background: transparent !important; border: none !important; box-shadow: none !important; justify-content: space-between; }
.mp-header-title { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.mp-header-title span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.mp-header-title small { font-size: 12px; color: var(--text-muted); }
.mp-chip { min-width: 44px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--bg-hover); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-main); }
.mp-body { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 480px; margin: 0 auto; padding: 4px 28px calc(28px + var(--safe-bottom)) !important; overflow-y: auto; }
.mp-art-wrap { width: 100%; max-width: min(340px, 40vh); aspect-ratio: 1; margin: 8px auto 26px; flex-shrink: 0; }
.mp-art { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); transform: scale(.88); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
#panel-music-dashboard.playing .mp-art { transform: scale(1); }
.mp-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mp-meta-text { flex: 1; min-width: 0; }
.mp-meta-text h3 { font-size: 22px; font-weight: 700; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meta-text p { font-size: 15px; color: var(--text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-like { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-hover); }
.mp-like.on { color: #ff4d6d; } .mp-like.on svg { fill: currentColor; }
.mp-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer; outline: none;
    background: linear-gradient(to right, var(--text-main) var(--p, 0%), color-mix(in srgb, var(--text-main) 18%, transparent) var(--p, 0%)); }
.mp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text-main); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.mp-seek::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--text-main); }
.mp-times { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mp-controls { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.mp-play { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--text-main); color: var(--bg-base); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .15s; }
.mp-play:active { transform: scale(.93); }
.mp-play .i-play { margin-left: 3px; }
.mp-play .i-pause, #panel-music-dashboard.playing .mp-play .i-play { display: none; }
#panel-music-dashboard.playing .mp-play .i-pause { display: block; }
.mp-skip { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); }
.mp-skip:active, .mp-mode:active { background: var(--bg-hover); }
.mp-mode { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.mp-mode.on { color: var(--text-main); }
.mp-mode.on::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.mp-mode b { display: none; position: absolute; top: 9px; right: 7px; font-size: 9px; font-weight: 800; }
.mp-mode.one b { display: block; }
.mp-queue { margin-top: 18px; }
.mp-queue-head { margin: 6px 4px 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.mp-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 14px; text-align: left; color: var(--text-main); }
.mp-q:active, .mp-q.cur { background: var(--bg-hover); }
.mp-q img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.mp-q-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-q-text b, .mp-q-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-q-text b { font-size: 14px; font-weight: 600; } .mp-q-text small { font-size: 12px; color: var(--text-muted); }
.mp-q .ym-eq { color: var(--primary); }
#panel-music-dashboard:not(.playing) .ym-eq i { animation-play-state: paused; }
#music-mini-player.mini-player-top { position: absolute !important; top: calc(70px + var(--safe-top)) !important; left: 12px !important; right: 12px !important; width: auto !important;
    background: transparent !important; overflow: visible !important; }
/* Same liquid glass as the header islands (the ::before/::after layers come from .n-liquid) */
#music-mini-player .mini-player-progress { left: 18px; right: 18px; bottom: 3px; }
.msg-row.ym-pending { opacity: .6; }

/* --- LINKS & LINK PREVIEWS (colors follow the bubble, so they work on sent and received) --- */
.msg-bubble a.msg-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.msg-row.sent .msg-bubble a.msg-link { color: inherit; }
.msg-bubble .link-preview { display: none; }
.msg-bubble .link-preview.has-data { display: block; position: relative; margin: 8px 0 2px; padding: 6px 10px 8px 12px; border: none; border-radius: 10px; cursor: pointer; overflow: hidden;
    font-size: 13px; line-height: 1.35; max-width: 320px;
    background: color-mix(in srgb, var(--primary) 10%, transparent); }
.msg-row.sent .msg-bubble .link-preview.has-data { background: color-mix(in srgb, currentColor 12%, transparent); }
.link-preview.has-data::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.msg-row.sent .link-preview.has-data::before { background: currentColor; opacity: .8; }
.lp-site { font-weight: 700; font-size: 12.5px; color: var(--primary); }
.msg-row.sent .lp-site { color: inherit; }
.lp-title { font-weight: 600; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-desc { opacity: .8; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-img { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-top: 7px; background: rgba(127,127,127,.15); }

/* --- SETTINGS PAGES (shared kit, extends the Appearance .ap-* classes) --- */
.ap-page .settings-header { display: none; }
button.ap-row, a.ap-row { width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text-main); text-align: left; font: inherit; font-size: 15px; font-weight: 500; }
.ap-card > button.ap-row:last-child, .ap-card > div:last-child > button.ap-row:last-child { border-bottom: none; }
.ap-row:active, .ap-nav:hover { background: transparent; }
.ap-nav:active { opacity: .7; }
.ap-ico { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ap-row > .ap-row-text { flex: 1; }
.ap-chev { flex-shrink: 0; color: var(--text-muted); opacity: .6; }
.ap-danger, .ap-danger .ap-ico { color: var(--danger) !important; }
.ap-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 8px 6px 0; }
.ap-mini-btn { flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; font-weight: 600; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border); }
.ap-mini-btn.primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.ap-primary { width: 100%; height: 48px; margin: 16px 0 8px; border-radius: 14px; background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 600; }
.ap-loading { display: flex; justify-content: center; padding: 48px 0; }
.ap-loading .loader { border-top-color: var(--primary); }

/* option lists (sounds, ringtones, language, auto-lock) */
.ap-opt { gap: 12px; }
.ap-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--border); position: relative; transition: all .15s; }
.ap-opt.active .ap-check { border-color: var(--primary); background: var(--primary); }
.ap-opt.active .ap-check::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid var(--on-primary); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.ap-play { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-input); }
.ap-opt.active .ap-play { color: var(--primary); }
.ap-flag { font-size: 24px; line-height: 1; }
.ap-time { flex-shrink: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font: inherit; font-size: 14px; color-scheme: inherit; }

/* status hero (notifications) */
.ap-hero { margin: 8px 0 4px; }
.np-state { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-hover); }
.np-state .ap-row-text b { font-size: 15px; } .np-state .ap-row-text small { line-height: 1.35; }
.np-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 20%, transparent); }
.np-state.on .np-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.np-state.warn .np-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.np-state.off .np-dot { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }

/* storage */
.ap-hero-storage { padding: 18px 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-hover); margin-bottom: 16px; }
.st-total { display: flex; align-items: baseline; gap: 8px; } .st-total b { font-size: 28px; font-weight: 800; } .st-total span { color: var(--text-muted); font-size: 14px; }
.st-bar { display: flex; gap: 3px; height: 10px; margin: 14px 0 12px; border-radius: 5px; overflow: hidden; background: var(--bg-input); }
.st-bar i { display: block; min-width: 0; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); }
.st-legend span { display: flex; align-items: center; gap: 6px; } .st-legend i { width: 9px; height: 9px; border-radius: 3px; } .st-legend b { color: var(--text-main); font-weight: 600; }

/* app */
.ap-hero-app { display: flex; flex-direction: column; align-items: center; padding: 18px 0 8px; }
.app-hero-icon { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.app-hero-name { font-size: 22px; font-weight: 800; margin-top: 12px; } .app-hero-ver { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
a.ap-getapp { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; color: var(--text-main); font-weight: 500; }
.wn-list { display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: 14px; line-height: 1.4; } .wn-list b { display: block; }
.kb-list { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14px; }
.kb-list div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.kb-list kbd { font-family: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); white-space: nowrap; }

/* edit profile */
.pf-head { display: flex; flex-direction: column; align-items: center; padding: 10px 0 4px; }
.pf-av { position: relative; width: 104px; height: 104px; cursor: pointer; }
.pf-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-input); }
.pf-av-edit { position: absolute; right: 0; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); border: 3px solid var(--bg-base); }
.pf-name { font-size: 22px; font-weight: 800; margin-top: 12px; } .pf-handle { font-size: 14px; color: var(--text-muted); }
.ap-field { display: flex; align-items: center; gap: 4px; padding: 12px 0; position: relative; }
.ap-field input, .ap-field textarea, .ap-input-row input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text-main); font: inherit; font-size: 15px; resize: none; }
.ap-field-pre { color: var(--text-muted); font-weight: 600; }
.ap-field-area { align-items: flex-start; padding-bottom: 22px; }
.ap-count { position: absolute; right: 0; bottom: 6px; font-size: 11.5px; color: var(--text-muted); }
.ap-input-row { cursor: text; } .ap-input-row .ap-row-text { flex: 0 0 96px; color: var(--text-muted); font-size: 14px; }
.ap-input-row input { text-align: right; color-scheme: inherit; }
#set-song-title:empty::before { content: 'No profile song'; color: var(--text-muted); }

/* devices */
.ss-row { gap: 12px; }
.ss-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); color: var(--text-main); }
.ss-current .ss-ico { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.ss-row .ap-row-text b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-online { color: #22c55e !important; font-weight: 600; }
.ss-revoke { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ss-revoke:hover, .ss-revoke:active { background: var(--bg-input); color: var(--danger); }
.ss-kill { justify-content: center; color: var(--danger) !important; font-weight: 600 !important; border-top: 1px solid var(--border) !important; }
.ss-empty { padding: 18px 14px; text-align: center; color: var(--text-muted); font-size: 14px; }
.ss-leaving { opacity: .35; pointer-events: none; transition: opacity .2s; }

/* folders */
.ap-hero-folders { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-hover); }
.fo-emoji { font-size: 34px; } .fo-text { display: flex; flex-direction: column; gap: 2px; } .fo-text span { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.fo-row { gap: 12px; cursor: pointer; }
.fo-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--bg-input); }
.fo-list:empty { display: none; }

/* --- IN-APP MESSAGE BANNER --- */
#ym-banner-wrap { position: fixed; top: calc(8px + var(--safe-top)); left: 0; right: 0; z-index: 12000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 10px; }
.ym-banner { pointer-events: auto; width: 100%; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; cursor: pointer;
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: translateY(-120%); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.25,1.1), opacity .25s; }
.ym-banner.show { transform: none; opacity: 1; }
.ym-banner img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-input); }
.ym-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ym-banner-text b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ym-banner-text span { font-size: 13.5px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- PASSCODE LOCK --- */
#pc-lock { display: none; position: fixed; inset: 0; z-index: 99990; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-base) 70%, transparent); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
#pc-lock.show { display: flex; }
#pc-lock.pc-full { background: var(--bg-base); }
.pc-box { display: flex; flex-direction: column; align-items: center; padding: calc(20px + var(--safe-top)) 24px calc(20px + var(--safe-bottom)); width: 100%; max-width: 360px; }
.pc-logo { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 18px; }
.pc-title { font-size: 19px; font-weight: 700; }
.pc-dots { display: flex; gap: 18px; margin: 24px 0 10px; }
.pc-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-muted); transition: all .12s; }
.pc-dots i.on { background: var(--text-main); border-color: var(--text-main); transform: scale(1.1); }
.pc-dots.shake { animation: pc-shake .4s; }
@keyframes pc-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.pc-msg { min-height: 20px; font-size: 13px; color: var(--danger); margin-bottom: 18px; }
.pc-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 26px; }
.pc-keys button { width: 76px; height: 76px; border-radius: 50%; font-size: 28px; font-weight: 500; color: var(--text-main); background: var(--bg-hover); border: 1px solid var(--border); transition: background .1s; }
.pc-keys button:active { background: var(--bg-input); }
.pc-keys .pc-fn { background: none; border: none; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.pc-keys .pc-fn[data-k="del"] { font-size: 24px; }

/* --- REACTIONS (js/reactions.js). Colors come from the bubble, so they suit sent and received alike --- */
.rx-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; max-width: 100%; }
.rx-pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 7px; border-radius: 14px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    font-size: 13px; font-weight: 600; border: none; box-shadow: none; position: relative;
    background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--text-main); transition: transform .15s, background .15s; }
.msg-row.sent .rx-pill { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.rx-pill.mine { background: var(--primary); color: var(--on-primary); }
.msg-row.sent .rx-pill.mine { background: var(--msg-sent-txt); color: var(--msg-sent); }
.rx-pill:active { transform: scale(.9); }
.rx-pill.rx-pop { animation: rx-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes rx-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.rx-e { font-size: 16px; line-height: 1; }
.rx-n { font-variant-numeric: tabular-nums; }
.rx-avs { display: inline-flex; }
.rx-avs img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1.5px solid transparent; background: var(--bg-input); }
.rx-avs img + img { margin-left: -7px; }
.rx-pill.mine .rx-avs img { border-color: var(--primary); }
.rx-ons { display: inline-flex; gap: 2px; margin-left: 2px; padding-left: 5px; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.rx-on { display: inline-flex; align-items: center; gap: 1px; height: 20px; padding: 0 4px; border-radius: 10px; font-size: 12px; background: color-mix(in srgb, currentColor 12%, transparent); }
.rx-on b { font-size: 10.5px; font-weight: 700; }
.rx-on.mine { outline: 1.5px solid currentColor; }
.rx-burst { position: fixed; z-index: 99999; pointer-events: none; width: 90px; height: 90px; margin: -45px 0 0 -45px; font-size: 44px; display: flex; align-items: center; justify-content: center; animation: rx-burst 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rx-burst { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.25) translateY(-20px); opacity: 1; } 75% { transform: scale(1.1) translateY(-46px); opacity: 1; } 100% { transform: scale(.7) translateY(-70px); opacity: 0; } }
.msg-reactions-wrap { display: none; }   /* old markup in cached chats */

/* menu bar */
.ctx-reactions-wrapper { padding: 6px 8px 6px 10px !important; gap: 4px; }
#ctx-reactions-bar { display: flex; gap: 2px; padding: 0; border: none; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
#ctx-reactions-bar.expanded { flex-wrap: wrap; max-width: 264px; }
#ctx-reactions-bar::-webkit-scrollbar { display: none; }
.rxm { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; font-size: 25px; line-height: 1; display: flex; align-items: center; justify-content: center; background: none;
    animation: rxm-in .3s cubic-bezier(.34,1.56,.64,1) both; transition: transform .15s, background .15s; }
.rxm:hover { transform: scale(1.2); } .rxm:active { transform: scale(.9); }
.rxm.mine { background: rgba(255,255,255,.22); }
@keyframes rxm-in { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
#ctx-react-expand { align-items: center; justify-content: center; width: 32px !important; height: 32px !important; border-radius: 50%; background: rgba(255,255,255,.12) !important; margin-left: 2px !important; flex-shrink: 0; }

/* who reacted / react to a reaction */
#rx-sheet { position: fixed; inset: 0; z-index: 9500; }
.rxs-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
#rx-sheet.show .rxs-backdrop { opacity: 1; }
.rxs-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 70dvh; overflow-y: auto; padding: 10px 16px calc(18px + var(--safe-bottom)); border-radius: 22px 22px 0 0;
    background: var(--bg-panel); border: 1px solid var(--border); box-shadow: 0 -10px 40px rgba(0,0,0,.3); transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.9,.25,1); }
.rxs-card::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 12px; }
#rx-sheet.show .rxs-card { transform: none; }
.rxs-card.rxs-pop { right: auto; bottom: auto; width: 300px; border-radius: 18px; padding: 12px 14px 14px; transform: scale(.92); opacity: 0; transition: transform .18s, opacity .18s; }
.rxs-card.rxs-pop::before { display: none; }
#rx-sheet.show .rxs-card.rxs-pop { transform: none; opacity: 1; }
.rxs-head { display: flex; align-items: center; gap: 12px; }
.rxs-big { font-size: 36px; line-height: 1; }
.rxs-head b { display: block; font-size: 16px; } .rxs-head small { font-size: 12.5px; color: var(--text-muted); }
.rxs-label { margin: 14px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.rxs-quick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.rxs-quick button { width: 100%; aspect-ratio: 1; max-height: 46px; border-radius: 12px; font-size: 24px; background: var(--bg-input); border: 2px solid transparent; transition: transform .12s; }
.rxs-quick button:active { transform: scale(.9); }
.rxs-quick button.mine { border-color: var(--primary); }
.rxs-list { margin-top: 12px; display: flex; flex-direction: column; }
.rxs-person { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 14.5px; font-weight: 500; }
.rxs-person img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bg-input); }
.rxs-sub { margin: 10px 2px 2px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

/* --- RELEASE NOTES (update popup, What's new) --- */
.rn { text-align: left; }
.rn-summary { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--text-main); }
.rn-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.rn-head { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.rn-head span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rn-list { display: flex; flex-direction: column; gap: 6px; max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; }
.rn-sec { border-radius: 14px; background: var(--bg-hover); border: 1px solid var(--border); overflow: hidden; }
.rn-sec summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; user-select: none; }
.rn-sec summary::-webkit-details-marker { display: none; }
.rn-emoji { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--bg-input); flex-shrink: 0; }
.rn-title { flex: 1; font-weight: 600; font-size: 14.5px; }
.rn-count { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-input); border-radius: 10px; padding: 2px 8px; }
.rn-chev { color: var(--text-muted); transition: transform .2s; }
.rn-sec[open] .rn-chev { transform: rotate(180deg); }
.rn-sec ul { margin: 0; padding: 0 14px 12px 52px; display: flex; flex-direction: column; gap: 7px; }
.rn-sec li { font-size: 13.5px; line-height: 1.4; color: var(--text-main); list-style: none; position: relative; }
.rn-sec li::before { content: ''; position: absolute; left: -14px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.rn-sec[open] ul { animation: rn-in .22s ease; }
@keyframes rn-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.unread-divider { display: flex; justify-content: center; margin: 10px -12px; padding: 5px 0; background: color-mix(in srgb, var(--bg-panel) 75%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .6s; }
.unread-divider span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.unread-divider.fade { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; transition: opacity .6s, height .3s .6s, margin .3s .6s, padding .3s .6s; }
.rn-sec { flex-shrink: 0; }
.rn-sec ul { list-style: none !important; margin: 0 !important; padding: 0 14px 12px 52px !important; }
.rn-sec li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.wx-results { display: flex; flex-direction: column; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.wx-city { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border-radius: 12px; text-align: left; color: var(--text-main); }
.wx-city:hover, .wx-city:active { background: var(--bg-hover); }
.wx-city span, .wx-none { font-size: 12.5px; color: var(--text-muted); }
.wx-none { padding: 10px 12px; }

/* --- LIVE CHAT ACTIONS ("typing…", "sending a photo…") --- */
.live-status { color: var(--primary); display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.live-status .typing-dots { height: 12px; padding: 0 3px 0 0; gap: 2px; }
.live-status .typing-dots span { width: 4px; height: 4px; }
.user-item.has-live .user-last-msg { display: none; }
.user-live { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* --- MESSAGE RUNS (same sender, < 5 min apart) --- */
/* the list has a flex gap between rows: pull a run's bubbles together to ~3px */
#msgs .msg-row.grp-more { margin-bottom: calc(3px - var(--msgs-gap, 16px)) !important; }
.msg-row.grp-more .msg-bubble > .msg-timestamp { display: none !important; }
.msg-row.grp-more .msg-bubble { padding-bottom: 10px; }
.msg-row.grp-cont .msg-sender { display: none !important; }
.msg-row.sent.grp-more .msg-bubble { border-bottom-right-radius: 6px !important; }
.msg-row.sent.grp-cont .msg-bubble { border-top-right-radius: 6px !important; }
.msg-row.received.grp-more .msg-bubble { border-bottom-left-radius: 6px !important; }
.msg-row.received.grp-cont .msg-bubble { border-top-left-radius: 6px !important; }
.msg-row.grp-more .msg-bubble { box-shadow: none !important; }

/* --- PINNED MESSAGES BAR (floating glass island under the header) --- */
#pinned-msg.pinned-bar {
    position: absolute !important; top: calc(70px + var(--safe-top)); left: 12px; right: 12px; z-index: 45;
    margin: 0; padding: 0 6px 0 12px; height: 50px; border-radius: 16px; gap: 10px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-main) 20%, transparent) !important;
    background: transparent !important; justify-content: flex-start;
}
body.has-player #pinned-msg.pinned-bar { top: calc(132px + var(--safe-top)); }
.pin-segs { display: flex; flex-direction: column; gap: 2px; height: 34px; width: 3px; flex-shrink: 0; }
.pin-segs i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--primary) 30%, transparent); }
.pin-segs i.on { background: var(--primary); }
.pin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pin-body b { font-size: 13px; font-weight: 600; color: var(--primary); }
.pin-body span { font-size: 13px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-list-btn { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: transparent; border: none; cursor: pointer; }
.pin-list-btn:active { background: var(--bg-hover); }
.pin-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; text-align: left; }
.pin-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); cursor: pointer; }
.pin-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pin-row-text b { font-size: 12px; color: var(--primary); }
.pin-row-text span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main); }
.pin-row-x { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; }
/* keep the first messages clear of the pinned bar / music player islands */
body.has-pins .n-messages-absolute { padding-top: calc(128px + var(--safe-top)) !important; }
body.has-player .n-messages-absolute { padding-top: calc(130px + var(--safe-top)) !important; }
body.has-pins.has-player .n-messages-absolute { padding-top: calc(190px + var(--safe-top)) !important; }

/* --- EDIT HISTORY --- */
.msg-edited { font-size: 10px; opacity: .65; margin-right: 4px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.edit-history { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; text-align: left; }
.eh-row { padding: 10px 12px; border-radius: 12px; background: var(--bg-input); }
.eh-row.current { border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent); }
.eh-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.eh-head b { color: var(--primary); }
.eh-text { font-size: 14px; color: var(--text-main); white-space: pre-wrap; word-break: break-word; }

/* --- APPEARANCE: STYLE OPTIONS --- */
.cz-accents { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.cz-sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--text-main); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-main) 15%, transparent); }
.cz-sw.active { outline: 2px solid var(--text-main); outline-offset: 2px; }
.cz-sw-auto { background: conic-gradient(#3b82f6, #8b5cf6, #ec4899, #f97316, #22c55e, #3b82f6); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.cz-sw-custom { background: var(--bg-input); overflow: hidden; }
.cz-sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cz-fonts { flex-wrap: wrap; }
.cz-fonts button { flex: 1 1 auto; }

body.cz-font, body.cz-font input, body.cz-font textarea, body.cz-font button { font-family: var(--cz-font) !important; }

/* glass and outline bubbles */
body.cz-bubble-glass .msg-row .msg-bubble:not(.ym-bubble-bare):not(.msg-jumbo) {
    background: color-mix(in srgb, var(--msg-recv) 45%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--text-main) 14%, transparent) !important;
}
body.cz-bubble-glass .msg-row.sent .msg-bubble:not(.ym-bubble-bare):not(.msg-jumbo) { background: color-mix(in srgb, var(--msg-sent) 55%, transparent) !important; }
body.cz-bubble-outline .msg-row .msg-bubble:not(.ym-bubble-bare):not(.msg-jumbo) { background: transparent !important; box-shadow: none !important; border: 1.5px solid color-mix(in srgb, var(--text-main) 30%, transparent) !important; color: var(--text-main) !important; }
body.cz-bubble-outline .msg-row.sent .msg-bubble:not(.ym-bubble-bare):not(.msg-jumbo) { border-color: var(--primary) !important; }
body.cz-gradient:not(.cz-bubble-outline) .msg-row.sent .msg-bubble:not(.ym-bubble-bare):not(.msg-jumbo) {
    background: linear-gradient(135deg, var(--msg-sent), color-mix(in srgb, var(--msg-sent) 55%, #c026d3)) !important;
}

/* avatar shapes */
body.cz-av-squircle .avatar, body.cz-av-squircle .avatar-wrap, body.cz-av-squircle .user-item .avatar { border-radius: 30% !important; }
body.cz-av-square .avatar, body.cz-av-square .avatar-wrap, body.cz-av-square .user-item .avatar { border-radius: 12% !important; }


/* wallpaper dimming */
#chat-area-bg { box-shadow: inset 0 0 0 200vmax rgba(0, 0, 0, var(--wall-dim, 0)); } /* drawn over the wallpaper, under the messages */

/* big emoji */
.msg-bubble.msg-jumbo { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 4px !important; backdrop-filter: none !important; }
.msg-bubble.msg-jumbo.jumbo-1 { font-size: 56px; line-height: 1.1; }
.msg-bubble.msg-jumbo.jumbo-2 { font-size: 44px; line-height: 1.15; }
.msg-bubble.msg-jumbo.jumbo-3 { font-size: 36px; line-height: 1.2; }
.msg-bubble.msg-jumbo > .msg-timestamp { color: var(--text-muted); }
body.cz-no-jumbo .msg-bubble.msg-jumbo { font-size: var(--msg-size) !important; padding: 12px 16px !important; background: var(--msg-recv) !important; }
body.cz-no-jumbo .msg-row.sent .msg-bubble.msg-jumbo { background: var(--msg-sent) !important; }

/* --- CALLS v2: grid of people, quality, controls --- */
#panel-call .call-active { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(10px + var(--safe-top)) 12px calc(16px + var(--safe-bottom)); gap: 10px; color: #fff; }
.call-top { display: flex; align-items: center; gap: 10px; z-index: 5; }
.call-top-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.call-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.call-title b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-title > span { font-size: 13px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.call-quality { display: flex; align-items: flex-end; gap: 2px; height: 16px; padding: 0 6px; flex-shrink: 0; }
.call-quality i { width: 4px; border-radius: 1px; background: rgba(255,255,255,.25); }
.call-quality i:nth-child(1) { height: 6px; } .call-quality i:nth-child(2) { height: 11px; } .call-quality i:nth-child(3) { height: 16px; }
.call-quality[data-level="3"] i { background: #4ade80; }
.call-quality[data-level="2"] i:nth-child(-n+2) { background: #facc15; }
.call-quality[data-level="1"] i:nth-child(1) { background: #f87171; }
.call-quality-warn { display: none; align-self: center; font-size: 12px; padding: 4px 12px; border-radius: 12px; background: rgba(248,113,113,.2); color: #fecaca; z-index: 5; }

.call-grid { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: 1fr; grid-auto-rows: 1fr; position: relative; z-index: 4; }
.call-grid.n2:not(.dm), .call-grid.n3, .call-grid.n4 { grid-template-columns: 1fr 1fr; }
.call-grid.n5, .call-grid.n6, .call-grid.n7, .call-grid.n8, .call-grid.n9 { grid-template-columns: 1fr 1fr 1fr; }
.call-tile { position: relative; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; min-height: 0; transition: box-shadow .15s; }
.call-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.call-tile.screen video { object-fit: contain; }
.call-tile.mirror video { transform: scaleX(-1); }
.call-tile.has-video video { display: block; }
.call-tile.has-video .call-tile-av { display: none; }
.call-tile-av { width: min(38%, 120px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px transparent; transition: box-shadow .15s; }
.call-tile.speaking .call-tile-av { box-shadow: 0 0 0 4px #4ade80; }
.call-tile.speaking.has-video { box-shadow: inset 0 0 0 3px #4ade80; }
.call-tile.pending .call-tile-av { animation: call-pulse 1.6s ease-in-out infinite; }
@keyframes call-pulse { 50% { box-shadow: 0 0 0 14px rgba(255,255,255,.08); } }
.call-tile-name { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 10px; background: rgba(0,0,0,.45); max-width: calc(100% - 20px); }
.call-tile-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-tile-mic { display: none; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23M12 19v4'/%3E%3C/svg%3E"); }
.call-tile.muted .call-tile-mic { display: inline-block; }
/* DM: the other person fills the screen, you are a small picture-in-picture */
.call-grid.dm .call-tile.me { position: absolute; right: 10px; top: 10px; width: 28%; max-width: 140px; aspect-ratio: 3/4; z-index: 2; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.call-grid.dm .call-tile.me:not(.has-video) { display: none; }
.call-grid.dm .call-tile.me .call-tile-name { display: none; }

.call-controls-v2 { display: flex; justify-content: center; gap: 10px; padding: 10px; border-radius: 26px; background: rgba(20,20,20,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 5; margin: 0 auto; }
.call-btn2 { width: 58px; height: 58px; border-radius: 18px; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(255,255,255,.12); color: #fff; font: inherit; }
.call-btn2 span { font-size: 10px; opacity: .8; }
.call-btn2.on { background: #fff; color: #111; }
#btn-mute.on { background: #ef4444; color: #fff; }
.call-btn2.end { background: #ef4444; }
.call-end-all { align-self: center; border: none; background: transparent; color: #fca5a5; font: inherit; font-size: 13px; cursor: pointer; z-index: 5; display: none; }

/* minimized call */
#call-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--safe-bottom)); z-index: 9000; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 22px; background: #16a34a; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.call-pill-main { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border: none; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; max-width: 60vw; }
.call-pill-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-pill-main span:last-child { font-variant-numeric: tabular-nums; opacity: .9; }
.call-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: rec-blink 1.2s infinite; flex-shrink: 0; }
.call-pill-end { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(0,0,0,.25); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* voice chat banner in a group */
#vc-banner { position: absolute !important; top: calc(70px + var(--safe-top)); left: 12px; right: 12px; z-index: 46; height: 50px; border-radius: 16px; display: none; align-items: center; gap: 10px; padding: 0 6px 0 12px; cursor: pointer; border: 1px solid color-mix(in srgb, #22c55e 45%, transparent) !important; background: transparent !important; }
.vc-banner-ico { width: 32px; height: 32px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vc-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vc-banner-text b { font-size: 13px; color: #22c55e; }
.vc-banner-text span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-banner-faces { display: flex; }
.vc-banner-faces img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg-panel); margin-left: -8px; object-fit: cover; }
.vc-join { border: none; border-radius: 14px; padding: 8px 16px; background: #22c55e; color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
body.has-vc #pinned-msg.pinned-bar { top: calc(126px + var(--safe-top)); }
body.has-vc.has-player #vc-banner { top: calc(132px + var(--safe-top)); }
body.has-vc.has-player #pinned-msg.pinned-bar { top: calc(188px + var(--safe-top)); }
body.has-vc .n-messages-absolute { padding-top: calc(128px + var(--safe-top)) !important; }
body.has-vc.has-pins .n-messages-absolute { padding-top: calc(186px + var(--safe-top)) !important; }

/* call history */
.calls-list { display: flex; flex-direction: column; }
.call-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.call-row:active { background: var(--bg-hover); }
.call-row img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.call-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.call-row-text b { font-size: 15px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-row-text b.missed { color: #ef4444; }
.call-row-text span { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.call-row-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.calls-empty { padding: 60px 20px; text-align: center; color: var(--text-muted); }
#panel-call .call-active { align-items: stretch; }

/* --- SHARED MEDIA PAGE --- */
.gal-tabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.gal-tabs button { border: none; padding: 8px 14px; border-radius: 16px; background: var(--bg-input); color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gal-tabs button.active { background: var(--primary); color: var(--on-primary); }
.gal-tabs small { font-weight: 500; opacity: .75; }
.gal-body { padding: 0 !important; overflow-y: auto; }
.gal-grid, #prof-media-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.gal-cell { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-input); cursor: pointer; -webkit-touch-callout: none; user-select: none; }
.gal-cell img, .gal-cell video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#prof-media-grid .gal-cell { border-radius: 8px; }
.gal-dur { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 1px 6px; border-radius: 8px; }
.gal-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--text-main); text-decoration: none; }
.gal-row:active, .gal-row.playing { background: var(--bg-hover); }
.gal-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); font-size: 20px; flex-shrink: 0; }
.gal-ico.gal-link { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.gal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gal-text b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-text span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-goto { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.gal-empty { padding: 60px 20px; text-align: center; color: var(--text-muted); }
.gal-open { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 4px; margin-bottom: 8px; border: none; background: transparent; color: var(--text-main); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* peek: hold a photo */
#peek { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .15s; }
#peek.show { opacity: 1; }
#peek img { max-width: 100%; max-height: 80vh; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform: scale(.92); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
#peek.show img { transform: scale(1); }
.ym-media[data-kind="photo"] { -webkit-touch-callout: none; }

/* --- BIRTHDAYS --- */
#bday-card { display: flex; align-items: center; gap: 12px; margin: 8px 12px; padding: 12px; border-radius: 18px; cursor: pointer;
    background: linear-gradient(135deg, color-mix(in srgb, #f472b6 22%, var(--bg-panel)), color-mix(in srgb, #facc15 18%, var(--bg-panel)));
    border: 1px solid color-mix(in srgb, #f472b6 35%, transparent); }
.bday-faces { display: flex; padding-left: 8px; }
.bday-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; margin-left: -10px; border: 2px solid var(--bg-panel); }
.bday-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bday-text b { font-size: 14px; color: var(--text-main); }
.bday-text span { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bday-send { border: none; border-radius: 14px; padding: 8px 12px; background: #ec4899; color: #fff; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.bday-x { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; }
.bday-cake { font-size: .9em; }

/* --- STATISTICS --- */
#stats-body { padding: 12px !important; display: flex; flex-direction: column; gap: 12px; }
.cs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--bg-input); }
.cs-tile span { font-size: 12px; color: var(--text-muted); }
.cs-tile b { font-size: 24px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.cs-tile small { font-size: 12px; color: var(--text-muted); }
.cs-card { padding: 12px 14px; border-radius: 16px; background: var(--bg-input); }
.cs-card-h { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.cs-chart { position: relative; touch-action: pan-y; }
.cs-chart svg { width: 100%; height: 150px; display: block; overflow: visible; }
.cs-grid { stroke: color-mix(in srgb, var(--text-main) 10%, transparent); stroke-width: 1; }
.cs-axis { fill: var(--text-muted); font-size: 9px; }
.cs-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cs-bar { fill: var(--primary); }
.cs-cross { stroke: color-mix(in srgb, var(--text-main) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cs-dot { fill: var(--primary); stroke: var(--bg-input); stroke-width: 2; }
.cs-tip { position: absolute; top: -6px; width: 110px; padding: 6px 8px; border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); font-size: 12px; color: var(--text-main); pointer-events: none; box-shadow: var(--shadow); }
.cs-tip span { color: var(--text-muted); }
.cs-jl { display: flex; gap: 24px; font-size: 14px; color: var(--text-muted); }
.cs-jl b { font-size: 20px; margin-right: 4px; color: var(--text-main); }
.cs-post { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; }
.cs-post:first-of-type { border-top: none; }
.cs-post-text { font-size: 14px; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-post-meta { font-size: 12px; color: var(--text-muted); }
.cs-note { font-size: 12px; color: var(--text-muted); text-align: center; margin: 4px 0 20px; }

/* --- GIF picker --- */
#sticker-grid.gif-grid { display: block !important; column-count: 2; column-gap: 6px; }
.gif-item { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: none; border-radius: 10px; overflow: hidden; background: var(--bg-input); cursor: pointer; break-inside: avoid; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-msg { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; column-span: all; }

/* --- PHOTO & VIDEO EDITOR --- */
.ed-overlay { position: fixed; inset: 0; z-index: 99990; background: #000; color: #fff; display: flex; flex-direction: column; padding: var(--safe-top) 0 var(--safe-bottom); opacity: 0; transition: opacity .15s; }
.ed-overlay.show { opacity: 1; }
.ed-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; }
.ed-txt-btn { border: none; background: transparent; color: #fff; font: inherit; font-size: 16px; padding: 8px 6px; cursor: pointer; }
.ed-done { color: #fff; font-weight: 700; background: var(--primary); color: var(--on-primary); border-radius: 14px; padding: 8px 16px; }
.ed-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ed-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ed-frame { position: relative; touch-action: none; }
.ed-frame canvas { position: absolute; inset: 0; }
#ed-draw { touch-action: none; cursor: crosshair; }
.ed-objs { position: absolute; inset: 0; pointer-events: none; }
.ed-obj { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: move; white-space: pre; line-height: 1.25; padding: .15em .35em; border-radius: .35em; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; }
.ed-obj.emoji { padding: 0; font-weight: 400; }
.ed-obj.sel { outline: 1.5px dashed rgba(255,255,255,.8); outline-offset: 4px; }
.ed-obj-x, .ed-obj-r { display: none; position: absolute; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-style: normal; line-height: 22px; text-align: center; background: #fff; color: #111; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ed-obj.sel .ed-obj-x, .ed-obj.sel .ed-obj-r { display: block; }
.ed-obj-x { top: -16px; left: -16px; cursor: pointer; }
.ed-obj-r { bottom: -16px; right: -16px; cursor: nwse-resize; background: var(--primary); }
.ed-opts { padding: 8px 14px; min-height: 56px; display: flex; flex-direction: column; gap: 8px; }
.ed-tools { display: flex; justify-content: space-around; padding: 6px 8px 10px; border-top: 1px solid rgba(255,255,255,.08); }
.ed-tool { border: none; background: transparent; color: rgba(255,255,255,.65); font: inherit; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.ed-tool.active { color: #fff; background: rgba(255,255,255,.12); }
.ed-slider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255,255,255,.8); }
.ed-slider span { width: 84px; flex-shrink: 0; }
.ed-slider input { flex: 1; accent-color: var(--primary); }
.ed-presets { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ed-presets button { border: none; background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; }
.ed-presets span { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: block; }
.ed-presets img { width: 100%; height: 100%; object-fit: cover; }
.ed-colors { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ed-colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); cursor: pointer; }
.ed-colors button.on { border-color: #fff; transform: scale(1.15); }
.ed-hint { font-size: 12px; color: rgba(255,255,255,.6); text-align: center; }
.ed-emoji { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ed-emoji button { border: none; background: rgba(255,255,255,.08); border-radius: 12px; font-size: 26px; padding: 6px 8px; cursor: pointer; flex-shrink: 0; }
.ed-crop { position: absolute; inset: 12px; }
.ed-crop img { display: block; max-width: 100%; }
.ed-crop-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ed-crop-bar button, .ed-chip { border: none; border-radius: 12px; padding: 8px 12px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ed-crop-ok { background: var(--primary) !important; color: var(--on-primary) !important; font-weight: 700; margin-left: auto; }
.ed-chip.on { background: #fff; color: #111; }
/* video */
#ed-v { position: absolute; inset: 12px; width: calc(100% - 24px) !important; height: calc(100% - 24px) !important; max-width: none; object-fit: contain; border-radius: 12px; background: #000; }
.ed-vinfo { font-size: 13px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.ed-trim { position: relative; height: 56px; margin: 12px 16px 6px; border-radius: 10px; overflow: hidden; touch-action: none; cursor: pointer; background: #222; }
.ed-strip { position: absolute; inset: 0; display: flex; }
.ed-strip canvas { flex: 1; height: 100%; min-width: 0; object-fit: cover; }
.ed-shade { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.6); pointer-events: none; }
.ed-shade.l { left: 0; } .ed-shade.r { right: 0; }
.ed-sel { position: absolute; top: 0; bottom: 0; border: 3px solid #facc15; border-left-width: 14px; border-right-width: 14px; border-radius: 10px; pointer-events: none; }
.ed-h { position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: auto; cursor: ew-resize; }
.ed-h.l { left: -22px; } .ed-h.r { right: -22px; }
.ed-play { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.ed-vopts { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 16px 14px; flex-wrap: wrap; }
.ed-seg { display: flex; gap: 4px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 3px; }
.ed-seg button { border: none; background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; cursor: pointer; }
.ed-seg button.on { background: #fff; color: #111; font-weight: 600; }
.ym-tile { cursor: pointer; }
.ym-tile-edit { position: absolute; left: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* sticker maker */
.sm-board { width: min(78vw, 46vh); aspect-ratio: 1; border-radius: 16px; background: repeating-conic-gradient(#2a2a2a 0 25%, #1c1c1c 0 50%) 0 0 / 24px 24px; }
#sm-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.sm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sm-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 14px; }
.sm-emoji { flex: 0 0 64px; text-align: center; font-size: 20px; }
select.sm-input option { color: #111; }
.sm-shape button.on { background: #fff; color: #111; font-weight: 600; }
.sticker-create { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--primary); border: 2px dashed color-mix(in srgb, var(--primary) 50%, transparent); border-radius: 14px; background: transparent; cursor: pointer; aspect-ratio: 1; }

/* --- CHANNEL COMMENTS --- */
.cm-bar { display: flex; align-items: center; gap: 8px; width: calc(100% + 32px); margin: 8px -16px -12px; padding: 9px 16px; border: none; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); background: transparent; color: var(--primary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 0 0 18px 18px; }
.cm-bar span { flex: 1; text-align: left; }
.ym-bubble-bare .cm-bar, .ym-bubble-media .cm-bar { width: 100%; margin: 6px 0 0; }
.cm-scroll { padding: 12px !important; overflow-y: auto; }
.cm-post { margin-bottom: 12px; }
.cm-post-inner { padding: 12px 14px; border-radius: 16px; background: var(--bg-input); font-size: var(--msg-size); max-height: 40vh; overflow: hidden; }
.cm-post-inner img, .cm-post-inner video { max-width: 100%; border-radius: 10px; }
.cm-list { display: flex; flex-direction: column; gap: 8px; }
.cm-row { display: flex; gap: 8px; align-items: flex-end; }
.cm-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cm-bubble { max-width: 80%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--msg-recv); color: var(--msg-recv-txt); }
.cm-row.mine { flex-direction: row-reverse; }
.cm-row.mine .cm-bubble { background: var(--msg-sent); color: var(--msg-sent-txt); border-radius: 16px 16px 4px 16px; }
.cm-bubble b { font-size: 12px; color: var(--primary); display: block; }
.cm-row.mine .cm-bubble b { color: inherit; opacity: .8; }
.cm-text { font-size: 14.5px; word-break: break-word; }
.cm-time { font-size: 11px; opacity: .6; }
.cm-time a { color: inherit; }
.cm-input-bar { display: flex; gap: 8px; padding: 8px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--border); background: var(--bg-panel); }
.cm-input-bar textarea { flex: 1; resize: none; border: none; outline: none; border-radius: 20px; padding: 10px 14px; background: var(--bg-input); color: var(--text-main); font: inherit; font-size: 15px; max-height: 120px; }
.cm-input-bar button { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.cm-join { padding: 14px; text-align: center; color: var(--text-muted); border-top: 1px solid var(--border); }
.msg-imported { font-size: 10px; opacity: .6; }

/* --- PROFILE COLOR --- */

/* The chat list scrolls under the frosted header; its scrollbar track would be blurred into a glow strip at the header's right edge */
#chat-list { scrollbar-width: none; }
#chat-list::-webkit-scrollbar { display: none; }

/* --- PHONE TAB BAR: Chats · Calls · Profile + a separate round search button (iOS 26 style) --- */
#header-calls-btn { display: none !important; } /* calls live in the tab bar now */
#panel-calls .panel-body { padding-bottom: calc(120px + var(--safe-bottom)) !important; }
.nav-search { display: none; }
/* search lives in the glass pill (#nav-search) on every screen size now, not in the chat list header */
#root-header-glass .search-wrap { display: none !important; }
#panel-root #chat-list { padding-top: var(--root-hdr-h, calc(130px + var(--safe-top))) !important; }
@media (max-width: 767px) {
    #panel-calls .panel-header > .icon-btn:first-child { visibility: hidden; } /* Calls is a tab here, not a page to go back from */
    #panel-root #chat-list { padding-top: var(--root-hdr-h, calc(130px + var(--safe-top))) !important; }
    .bottom-nav { left: 20px; right: 88px; width: auto; max-width: none; transform: none;
        bottom: calc(24px + var(--safe-bottom)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
    .bottom-nav.hidden { transform: translateY(150%) !important; }
    .nav-search {
        display: flex; align-items: center; position: fixed; z-index: 100;
        right: 20px; bottom: calc(24px + var(--safe-bottom) + var(--kb, 0px));
        width: 56px; height: 56px; border-radius: 28px; color: var(--text-main);
        transition: width 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
    }
    .bottom-nav.hidden + .nav-search, .bottom-nav[style*="display: none"] + .nav-search { transform: translateY(150%); opacity: 0; pointer-events: none; }
    .nav-search-btn { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: inherit; padding: 0; cursor: pointer; }
    .nav-search input { flex: 1; min-width: 0; width: 0; border: none; background: none; outline: none; color: var(--text-main); font-size: 16px; padding: 0; opacity: 0; transition: opacity 0.2s; -webkit-appearance: none; appearance: none; }
    .nav-search input::-webkit-search-cancel-button { display: none; }
    .nav-search-close { width: 0; height: 36px; margin-right: 10px; flex-shrink: 0; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0;
        background: color-mix(in srgb, var(--text-main) 12%, transparent); color: var(--text-main); opacity: 0; cursor: pointer; transition: opacity 0.2s, width 0.2s; }
    body.nav-searching .nav-search { width: calc(100% - 40px); }
    body.nav-searching .nav-search-btn { width: 48px; pointer-events: none; color: var(--text-muted); }
    body.nav-searching .nav-search input { opacity: 1; transition-delay: 0.15s; }
    body.nav-searching .nav-search-close { width: 36px; opacity: 1; }
    body.nav-searching .bottom-nav { opacity: 0; transform: scale(0.92); pointer-events: none; }
    body.nav-searching .fab { opacity: 0; pointer-events: none; }
}

/* --- CHAT LIST HEADER: avatar · small title · actions, large title below that shrinks into the bar on scroll --- */
#root-header-glass .root-header { position: relative; padding: calc(10px + var(--safe-top)) 16px 2px; min-height: calc(56px + var(--safe-top)); }
.rh-av { width: 38px; height: 38px; border-radius: 50%; padding: 0; border: none; background: var(--bg-input); overflow: hidden; flex-shrink: 0; cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text-main) 14%, transparent); }
.rh-av:active { transform: scale(0.9); }
.rh-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-av img:not([src]), .rh-av img[src=""] { visibility: hidden; }
.rh-title-sm { position: absolute; left: 50%; bottom: 13px; transform: translate(-50%, 8px); max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 17px; font-weight: 700; color: var(--text-main); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rh-title { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin: 0; padding: 2px 20px 10px; max-height: 60px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 20px 50%;
    transition: color 0.3s, max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
#root-header-glass.rh-compact .rh-title { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: scale(0.85); }
#root-header-glass.rh-compact .rh-title-sm { opacity: 1; transform: translate(-50%, 0); }
#root-header-glass.rh-compact .rh-av { transform: scale(0.88); }
div.panel.root.mini-sidebar .rh-av, div.panel.root.mini-sidebar .rh-title-sm { display: none !important; }

/* --- PROFILE: things about me + detail badges --- */
.prof-facts { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; background: var(--bg-input); border-radius: 16px; padding: 6px; text-align: left; }
.prof-facts:empty { display: none; }
.prof-fact { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-size: 15px; line-height: 1.35; }
.prof-fact + .prof-fact { border-top: 1px solid color-mix(in srgb, var(--text-main) 7%, transparent); }
.prof-fact-e { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: color-mix(in srgb, var(--primary) 14%, transparent); }
.profile-attributes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.profile-attributes:empty { display: none; }
.profile-attr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
    background: var(--bg-input); color: var(--text-main); border: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); }
.prof-preview-note { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }

/* Settings → Profile: things about me rows */
.pf-fact { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pf-fact:last-child { border-bottom: none; }
.pf-fact input { border: none; outline: none; background: transparent; color: var(--text-main); font-size: 15px; min-width: 0; font-family: inherit; }
.pf-fact-e { width: 40px; height: 40px; flex-shrink: 0; text-align: center; font-size: 19px !important; border-radius: 12px; background: var(--bg-input) !important; }
.pf-fact-t { flex: 1; padding: 8px 0; }

/* Chat list header: iOS scroll-edge effect. Strong blur under the bar, a tint that is solid at the very top
   (Chrome leaves the top ~15px of a backdrop unblurred) and a tint-only strip below the bar that fades into the list.
   No mask here: a mask on the backdrop layer switches the blur off in Chrome. */
.n-glass-header.liquid-glass::after {
    backdrop-filter: blur(max(16px, var(--glass-blur, 4px))) saturate(1.6);
    -webkit-backdrop-filter: blur(max(16px, var(--glass-blur, 4px))) saturate(1.6);
    background: linear-gradient(to bottom,
        var(--bg-panel) 0%,
        color-mix(in srgb, var(--bg-panel) 92%, transparent) calc(var(--safe-top) + 22px),
        color-mix(in srgb, var(--bg-panel) 78%, transparent) 100%);
}
.n-glass-header.liquid-glass:not([class*="weather-grad"])::before {
    inset: 100% 0 auto 0; height: 24px; border-radius: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-panel) 78%, transparent), transparent);
}

/* Round icon buttons in panel headers and the chat list header use the liquid glass (js/glass.js adds .liquid-glass) */
.panel-header .icon-btn.liquid-glass, .root-header .icon-btn.liquid-glass { width: 40px; height: 40px; flex-shrink: 0; color: var(--text-main); }
.panel-header .icon-btn.liquid-glass:active, .root-header .icon-btn.liquid-glass:active { background: transparent; }
.icon-btn.n-clear.liquid-glass::before, .icon-btn.n-clear.liquid-glass::after { display: block !important; }
/* At the top of the list the large-title header is fully clear (iOS); the blur and tint fade in once rows scroll under it */
#root-header-glass.liquid-glass::after, #root-header-glass.liquid-glass:not([class*="weather-grad"])::before { transition: opacity 0.25s ease; }
#root-header-glass.liquid-glass:not(.rh-scrolled)::after,
#root-header-glass.liquid-glass:not(.rh-scrolled):not([class*="weather-grad"])::before { opacity: 0; }

/* ===================== PROFILE (contact card) =====================
   Three styles: .pv-classic (blurred avatar glow on the app background), .pv-color (the page takes the profile
   colors + emoji pattern, white text), .pv-photo (the avatar is a full-width poster, name on its lower edge).
   Page tokens: --pv-text / --pv-muted / --pv-label / --pv-card / --pv-hair / --pv-glow / --pv-barbg. */
#panel-profile.pv {
    background: var(--bg-base);
    --pv-text: var(--text-main); --pv-muted: var(--text-muted); --pv-label: var(--text-muted);
    --pv-card: color-mix(in srgb, var(--text-main) 6%, transparent); --pv-hair: color-mix(in srgb, var(--text-main) 9%, transparent);
    --pv-link: var(--primary); --pv-glow: var(--primary); --pv-barbg: var(--bg-base); --pv-photo-bg: #0f1013;
}
#panel-profile.pv-color {
    --pv-text: #fff; --pv-muted: rgba(255, 255, 255, 0.74); --pv-label: color-mix(in srgb, var(--pv-c1) 28%, #fff);
    --pv-card: rgba(0, 0, 0, 0.17); --pv-hair: rgba(255, 255, 255, 0.13); --pv-link: #fff;
    --pv-glow: color-mix(in srgb, var(--pv-c1) 60%, #fff); --pv-barbg: color-mix(in srgb, var(--pv-c1) 78%, #000);
}
#panel-profile.pv-photo {
    --pv-text: #fff; --pv-muted: rgba(255, 255, 255, 0.7); --pv-label: rgba(255, 255, 255, 0.6);
    --pv-card: rgba(255, 255, 255, 0.07); --pv-hair: rgba(255, 255, 255, 0.1); --pv-link: #fff; --pv-barbg: var(--pv-photo-bg);
    background: var(--pv-photo-bg);
}
.pv-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pv-color .pv-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--pv-c1) 92%, #000) 0%, color-mix(in srgb, var(--pv-c2) 78%, #000) 55%, color-mix(in srgb, var(--pv-c2) 52%, #000) 100%); }
.pv-scroll { position: absolute !important; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 calc(24px + var(--safe-bottom)) !important; scrollbar-width: none; }
.pv-scroll::-webkit-scrollbar { display: none; }

/* hero */
.pv-hero { position: absolute; top: 0; left: 0; right: 0; height: calc(340px + var(--safe-top)); overflow: hidden; z-index: 0; pointer-events: none; }
.pv-hero > * { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.pv-classic .pv-hero-av { display: block; left: -25%; top: -25%; width: 150%; height: 150%; object-fit: cover; filter: blur(50px) saturate(1.9); opacity: 0.75; }
.pv-classic .pv-hero-fade, .pv-has-banner .pv-hero-fade { display: block; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0%, transparent 28%, color-mix(in srgb, var(--bg-base) 55%, transparent) 62%, var(--bg-base) 100%); }
.pv-color .pv-hero-pattern { display: block; background-size: 120px 120px; background-repeat: repeat; opacity: 0.9;
    -webkit-mask-image: linear-gradient(#000 35%, transparent 95%); mask-image: linear-gradient(#000 35%, transparent 95%); }
.pv-has-banner .pv-hero-img { display: block !important; object-fit: cover; }
.pv-has-banner.pv-color .pv-hero-fade { background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--pv-c1) 92%, #000) 100%); }

/* identity */
.pv-top { position: relative; z-index: 1; padding: calc(62px + var(--safe-top)) 16px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pv-av-wrap { width: 128px; height: 128px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pv-av { width: 112px !important; height: 112px !important; border-radius: 50% !important; position: relative; z-index: 2; margin: 0; will-change: transform;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26); }
body.cz-av-squircle .pv-av { border-radius: 30% !important; } body.cz-av-square .pv-av { border-radius: 14% !important; }
.pv-halo { position: absolute; inset: -6px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, var(--pv-glow) 0%, color-mix(in srgb, var(--pv-glow) 40%, transparent) 45%, transparent 70%);
    filter: blur(12px); transition: opacity 0.6s ease; }
.pv-name { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%;
    font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--pv-text); }
.pv-name #prof-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-verified { display: inline-flex; flex-shrink: 0; }
.pv-status { margin-top: 5px; font-size: 15.5px; color: var(--pv-muted); }
.pv-online { color: var(--success, #22c55e); font-weight: 600; }
.pv-color .pv-online, .pv-photo .pv-online { color: inherit; }

/* round glass actions (icon only, like the concept) */
.pv-actions { display: flex; justify-content: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.pv-act { width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--pv-text); }
.pv-act svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pv-color .liquid-glass::after, .pv-photo .liquid-glass::after { background-color: rgba(255, 255, 255, 0.1); }
.pv-is-preview .pv-act, .pv-is-preview .pv-row[role="button"] { pointer-events: none; }

/* profile song pill + equalizer */
.pv-song { margin-top: 18px; max-width: min(92%, 400px); height: 36px; border-radius: 18px; padding: 0 12px 0 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; color: var(--pv-text); font: 600 14.5px/1 inherit; font-family: inherit; }
.pv-song-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv-song-chev { opacity: 0.55; flex-shrink: 0; }
.pv-song-ico { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pv-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.pv-eq i { display: block; width: 3px; border-radius: 2px; background: currentColor; height: calc(3px + var(--pv-b1, 0) * 11px); }
.pv-eq i:nth-child(2) { height: calc(3px + var(--pv-b2, 0) * 11px); }
.pv-eq i:nth-child(3) { height: calc(3px + var(--pv-b3, 0) * 11px); }
.pv-eq i:nth-child(4) { height: calc(3px + var(--pv-b4, 0) * 11px); }
.pv-playing .pv-note { display: none; } .pv-playing .pv-eq { display: flex; }
/* while the profile's song plays: the avatar breathes with the bass, a soft glow in the profile color pulses behind it */
.pv-playing .pv-halo { opacity: calc(0.35 + var(--pv-lvl, 0) * 0.65); transform: scale(calc(1.02 + var(--pv-lvl, 0) * 0.32)); }
.pv-playing .pv-av { transform: scale(calc(1 + var(--pv-lvl, 0) * 0.045)); }
@keyframes pv-breathe { 0%, 100% { transform: scale(1.04); opacity: 0.45; } 50% { transform: scale(1.22); opacity: 0.85; } }
@keyframes pv-eqbar { 0%, 100% { height: 4px; } 50% { height: 13px; } }
.pv-synth .pv-halo { animation: pv-breathe 1.6s ease-in-out infinite; }
.pv-synth .pv-eq i { animation: pv-eqbar 0.9s ease-in-out infinite; }
.pv-synth .pv-eq i:nth-child(2) { animation-delay: -0.3s; } .pv-synth .pv-eq i:nth-child(3) { animation-delay: -0.6s; } .pv-synth .pv-eq i:nth-child(4) { animation-delay: -0.15s; }
@media (prefers-reduced-motion: reduce) { .pv-playing .pv-av, .pv-playing .pv-halo { transform: none; } .pv-synth .pv-halo, .pv-synth .pv-eq i { animation: none; } }

/* things about me: glass chips */
.pv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; max-width: 440px; }
.pv-chips:empty { display: none; }
.pv-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 14px 8px 11px; border-radius: 999px;
    font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--pv-text); text-align: left;
    background: var(--pv-card); box-shadow: inset 0 0 0 1px var(--pv-hair); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pv-chip b { font-size: 16px; font-weight: 400; line-height: 1; }

/* info card + sections */
.pv-sections { position: relative; z-index: 1; max-width: 472px; margin: 0 auto; padding: 22px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.pv-card { border-radius: 24px; padding: 2px 18px; text-align: left; background: var(--pv-card); box-shadow: inset 0 0 0 1px var(--pv-hair);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.pv-row { padding: 12px 0; }
.pv-row + .pv-row { border-top: 1px solid var(--pv-hair); }
.pv-label { font-size: 14px; color: var(--pv-label); margin-bottom: 2px; }
.pv-val { font-size: 16.5px; color: var(--pv-text); line-height: 1.38; word-break: break-word; }
.pv-link { color: var(--pv-link); }
.pv-bio { white-space: pre-wrap; }
.pv-row[role="button"] { cursor: pointer; }
.pv-row[role="button"]:active { opacity: 0.6; }
#prof-subs-section { padding: 12px 18px; }
.pv-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pv-mini-btn { border: none; cursor: pointer; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; font-family: inherit;
    background: color-mix(in srgb, var(--pv-text) 12%, transparent); color: var(--pv-text); }
.pv-members { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.pv-members, .pv-members * { color: var(--pv-text); }

/* tabs + full-bleed grid */
.pv-tabs { display: flex; height: 46px; border-radius: 23px; padding: 4px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; }
.pv-tabs::-webkit-scrollbar { display: none; }
.pv-tabs button { flex: 1 0 auto; border: none; background: none; cursor: pointer; border-radius: 19px; padding: 0 14px; color: var(--pv-text); font: 600 15px/1 inherit; font-family: inherit; }
.pv-tabs button.on { background: color-mix(in srgb, var(--pv-text) 14%, transparent); }
#prof-media-grid.pv-grid { position: relative; z-index: 1; margin-top: 14px; gap: 2px; border-radius: 0; }
#prof-media-grid.pv-grid .gal-cell { border-radius: 0; }
#prof-media-grid.pv-grid:empty { display: none !important; }
.pv-grid-empty { grid-column: 1 / -1; text-align: center; padding: 18px 0 8px; font-size: 14px; color: var(--pv-muted); }
.pv-edit-btn { width: 100%; height: 52px; border-radius: 18px !important; color: var(--pv-text) !important; font-size: 16px; font-weight: 700; }

/* floating bar */
.pv-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: calc(10px + var(--safe-top)) 14px 10px; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.pv-bar > * { pointer-events: auto; }
.pv-bar .pv-bar-btn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; color: var(--pv-text); }
.pv-bar-edit { height: 44px; padding: 0 18px; border-radius: 22px; border: none; cursor: pointer; color: var(--pv-text); font: 600 16px/1 inherit; font-family: inherit; flex-shrink: 0; }
.pv-bar-title { height: 34px; padding: 0 14px; border-radius: 17px; display: flex; align-items: center; min-width: 0;
    font-size: 14px; font-weight: 600; color: var(--pv-text); white-space: nowrap; overflow: hidden; }
.pv-bar-title:empty { visibility: hidden; }
.pv-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -14px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.25s;
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    background: linear-gradient(to bottom, var(--pv-barbg) 0%, color-mix(in srgb, var(--pv-barbg) 94%, transparent) calc(var(--safe-top) + 34px), color-mix(in srgb, var(--pv-barbg) 78%, transparent) 100%); }
.pv-scrolled .pv-bar::before { opacity: 1; }

/* Settings → Profile style: a small version of the real profile page */
.pt-preview { position: relative; height: 168px; margin: 12px 0 4px; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--bg-base); isolation: isolate; }
.pt-preview > * { position: absolute; inset: 0; }
.pt-m-color .pt-p-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--pv-c1) 92%, #000), color-mix(in srgb, var(--pv-c2) 70%, #000)); }
.pt-p-pat { background-size: 80px 80px; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.pt-m-photo .pt-p-bg { background-size: cover; background-position: center 30%; }
.pt-m-photo .pt-p-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(15, 16, 19, 0.92)); }
.pt-p-glow { width: 150%; height: 150%; left: -25%; top: -25%; object-fit: cover; filter: blur(30px) saturate(1.8); opacity: 0.6; }
.pt-p-body { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px; gap: 1px; color: var(--text-main); }
.pt-m-color .pt-p-body, .pt-m-photo .pt-p-body { color: #fff; }
.pt-p-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.pt-p-body b { font-size: 16px; } .pt-p-body small { font-size: 11.5px; opacity: 0.75; }
.pt-p-dots { display: flex; gap: 7px; margin-top: 8px; }
.pt-p-dots i { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, currentColor 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.pt-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 12px 0 8px; }
.pt-sw { aspect-ratio: 1; width: 100%; border-radius: 50%; border: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.pt-sw.on { outline: 2.5px solid var(--text-main); outline-offset: 2px; }
.pt-custom { display: flex; gap: 8px; }
.pt-custom input[type="color"] { width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.pt-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pt-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.pt-custom input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
/* playing: a light bloom (brightens any background) + a thin ring that ripples out with the beat */
.pv-halo { inset: -22px; filter: blur(16px); mix-blend-mode: screen;
    background: radial-gradient(circle, color-mix(in srgb, var(--pv-glow) 45%, #fff) 0%, color-mix(in srgb, var(--pv-glow) 55%, transparent) 42%, transparent 70%); }
[data-theme="light"] .pv-classic .pv-halo { mix-blend-mode: normal; background: radial-gradient(circle, color-mix(in srgb, var(--pv-glow) 55%, transparent) 0%, transparent 70%); }
.pv-av-wrap::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: 0;
    border: 2px solid color-mix(in srgb, var(--pv-glow) 40%, #fff); transition: opacity 0.5s; }
body.cz-av-squircle .pv-av-wrap::after { border-radius: 30%; } body.cz-av-square .pv-av-wrap::after { border-radius: 14%; }


@keyframes pv-ripple { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pv-playing .pv-av-wrap::after { transform: none; } .pv-synth .pv-av-wrap::after { animation: none; } }

/* ---- pull-to-expand avatar (PvExpand in app-profile.js drives the transform per frame) ---- */
.pv-xp { position: absolute; left: 0; top: 0; z-index: 0; transform-origin: 0 0; overflow: hidden; pointer-events: none; visibility: hidden;
    will-change: transform, border-radius; background: #000; }
.pv-xp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-playing .pv-xp img { transform: scale(calc(1.01 + var(--pv-lvl, 0) * 0.03)); }
.pv-xp-shade { position: absolute; inset: 0; opacity: var(--xp, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 20%, transparent 42%, rgba(0, 0, 0, 0.32) 62%, rgba(0, 0, 0, 0.22) 80%, transparent 100%); }
.pv-xp-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.pv-av-wrap { cursor: pointer; }
.pv-xp-on .pv-av { opacity: 0; }
.pv-xp-on .pv-halo, .pv-xp-on .pv-av-wrap::after { display: none; }
.pv-xp-full .pv-name, .pv-xp-full .pv-status { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.pv-xp-full .pv-status .pv-online { color: #fff; }
.pv-xp-full .pv-bar { --pv-text: #fff; }
.pv-xp-full .pv-xp { pointer-events: auto; cursor: pointer; }
.pv-name, .pv-status { transition: color 0.2s, text-shadow 0.2s; }
/* shared items inline on the profile */
.pv-tabs button.active { background: color-mix(in srgb, var(--pv-text) 14%, transparent); }
.pv-tabs button small { font-weight: 500; opacity: 0.6; font-size: 12px; }
.pv-shared { position: relative; z-index: 1; margin-top: 12px; min-height: 120px; }
.pv-shared:empty { display: none; }
.pv-shared .gal-grid { gap: 2px; }
.pv-shared .gal-cell { border-radius: 0; }
.pv-shared .gal-row { max-width: 472px; margin: 0 auto; padding: 10px 20px; color: var(--pv-text); }
.pv-shared .gal-row:active, .pv-shared .gal-row.playing { background: var(--pv-card); }
.pv-shared .gal-ico { background: var(--pv-card); box-shadow: inset 0 0 0 1px var(--pv-hair); color: var(--pv-text); }
.pv-shared .gal-text span, .pv-shared .gal-goto { color: var(--pv-muted); }
.pv-shared .gal-empty { padding: 36px 20px; color: var(--pv-muted); }

/* Desktop: the profile is a floating card over the dimmed app (the old 320px third column was too cramped) */
@media (min-width: 768px) {
    #panel-profile.pv {
        position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
        width: min(440px, calc(100vw - 48px)) !important; height: min(880px, calc(100vh - 40px)) !important; max-height: none;
        border-radius: 28px !important; overflow: hidden; border: none !important;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
        z-index: 9000 !important;
    }
    #panel-profile.pv.active { transform: translate(-50%, -50%) scale(1) !important; }
    #panel-profile.pv .pv-bar { padding-top: 14px; }
    #panel-profile.pv .pv-top { padding-top: 66px; }
    body:has(#panel-profile.active)::after { opacity: 1; pointer-events: auto; cursor: pointer; }
}

/* Desktop: every secondary page is a floating card over the dimmed app, stacked in the order it was opened
   (Router.push sets --stack). Before, only a few were cards, so e.g. Settings → Appearance opened behind the
   backdrop and couldn't be clicked. */
@media (min-width: 768px) {
    #panel-settings, #panel-set-profile, #panel-set-appearance, #panel-set-notifications, #panel-set-privacy, #panel-set-storage, #panel-set-language, #panel-set-app, #panel-sessions, #panel-calls, #panel-gallery, #panel-stats, #panel-comments, #panel-new, #panel-create-group, #panel-create-channel, #panel-edit-group-channel, #panel-folders, #panel-edit-folder, #panel-devtools, #panel-stickerpack, #panel-manage, #panel-manage-list, #panel-manage-detail {
        position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
        width: min(460px, calc(100vw - 48px)) !important; height: min(860px, calc(100vh - 40px)) !important; max-height: none !important;
        transform: translate(-50%, -47%) scale(0.97) !important; border-radius: 24px; overflow: hidden;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07); border: none !important;
        opacity: 0; visibility: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s, visibility 0s linear 0.3s !important;
        z-index: calc(9000 + var(--stack, 0)) !important;
    }
    #panel-settings.active, #panel-set-profile.active, #panel-set-appearance.active, #panel-set-notifications.active, #panel-set-privacy.active, #panel-set-storage.active, #panel-set-language.active, #panel-set-app.active, #panel-sessions.active, #panel-calls.active, #panel-gallery.active, #panel-stats.active, #panel-comments.active, #panel-new.active, #panel-create-group.active, #panel-create-channel.active, #panel-edit-group-channel.active, #panel-folders.active, #panel-edit-folder.active, #panel-devtools.active, #panel-stickerpack.active, #panel-manage.active, #panel-manage-list.active, #panel-manage-detail.active {
        transform: translate(-50%, -50%) scale(1) !important; opacity: 1; visibility: visible !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s, visibility 0s !important;
    }
    #panel-profile.pv { z-index: calc(9000 + var(--stack, 0)) !important; }
    body:has(#panel-settings.active, #panel-set-profile.active, #panel-set-appearance.active, #panel-set-notifications.active, #panel-set-privacy.active, #panel-set-storage.active, #panel-set-language.active, #panel-set-app.active, #panel-sessions.active, #panel-calls.active, #panel-gallery.active, #panel-stats.active, #panel-comments.active, #panel-new.active, #panel-create-group.active, #panel-create-channel.active, #panel-edit-group-channel.active, #panel-folders.active, #panel-edit-folder.active, #panel-devtools.active, #panel-stickerpack.active, #panel-manage.active, #panel-manage-list.active, #panel-manage-detail.active, #panel-profile.active)::after { opacity: 1; pointer-events: auto; cursor: pointer; }
}
/* search fields are type=search now (no browser autofill); hide the built-in clear "x", we have our own */
#search-input-root::-webkit-search-cancel-button, #search-input-new::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
#search-input-root, #search-input-new { -webkit-appearance: none; appearance: none; }
/* Classic = page colors taken from the avatar (.pv-auto is added once they're known; the page fades into them) */
.pv-bg { transition: opacity 0.45s ease; }
.pv-classic:not(.pv-auto) .pv-bg { opacity: 0; }
.pv-auto .pv-hero-av { display: block; left: -25%; top: -25%; width: 150%; height: 150%; object-fit: cover; filter: blur(60px) saturate(1.5); opacity: 0.32;
    -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.3) 55%, transparent 80%); mask-image: linear-gradient(#000 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,.3) 55%, transparent 80%); }
.pv-auto .pv-hero-fade { display: none; }
.pv-auto.pv-has-banner .pv-hero-fade { display: block; }
.pv-color .pv-name, .pv-color .pv-status, .pv-color .pv-card, .pv-color .pv-chip { transition: color 0.3s, background-color 0.3s; }
/* living background (js/livingbg.js): fades in over the static gradient once the first frame is drawn */
.pv-living { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.7s ease; }
.pv-living.on { opacity: 1; }
#panel-profile:not(.pv-color) .pv-living { display: none; }
/* Settings → Profile style: the preview card runs the real living background */
.pt-living { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.5s; }
.pt-living.on { opacity: 1; }
.pt-preview.pt-live .pt-p-glow { opacity: 0.28; }
.pt-preview { height: 190px; }

/* PC: the search pill sits at the bottom of the chat list column, always open; the + button floats above it */
@media (min-width: 768px) {
    .nav-search { display: flex; align-items: center; position: fixed; z-index: 98; color: var(--text-main);
        left: calc(72px + 14px); width: calc(var(--sidebar-width, 360px) - 28px); bottom: 16px; height: 48px; border-radius: 24px; }
    .nav-search-btn { width: 46px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); padding: 0; cursor: text; }
    .nav-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-main); font-size: 15px; padding: 0; -webkit-appearance: none; appearance: none; }
    .nav-search input::-webkit-search-cancel-button { display: none; }
    .nav-search-close { width: 30px; height: 30px; margin-right: 9px; flex-shrink: 0; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
        background: color-mix(in srgb, var(--text-main) 12%, transparent); color: var(--text-main); }
    .nav-search input:placeholder-shown ~ .nav-search-close { display: none; }
    body:has(#panel-auth.active) .nav-search, body:has(.panel.root.mini-sidebar) .nav-search { display: none; }
    div.panel.root .fab { bottom: 80px !important; }
    #panel-root .panel-body { padding-bottom: 84px !important; }
}

/* rim colors available everywhere (buttons outside .liquid-glass use them too) */
:root { --lg-hi: rgba(255, 255, 255, 0.28); --lg-lo: rgba(255, 255, 255, 0.04); }
[data-theme="light"] { --lg-hi: rgba(255, 255, 255, 0.75); --lg-lo: rgba(255, 255, 255, 0.2); }
/* round buttons that now wear the liquid glass: keep their meaning as tinted glass */
.fab.liquid-glass { color: var(--text-main); }
.fab.liquid-glass::after { background-color: color-mix(in srgb, var(--primary) 50%, transparent) !important; }
.fab.liquid-glass svg { stroke: var(--on-primary, #fff); }
.call-btn.end.liquid-glass::after, .call-btn2.end.liquid-glass::after { background-color: rgba(239, 68, 68, 0.78) !important; }
#call-view-incoming .call-btn:not(.end).liquid-glass::after { background-color: color-mix(in srgb, var(--success, #22c55e) 78%, transparent) !important; }
.call-btn2.on.liquid-glass::after { background-color: rgba(255, 255, 255, 0.9) !important; }
.call-btn2.liquid-glass { border-radius: 18px; color: #fff; }
.call-btn2.on.liquid-glass { color: #111; }
.call-btn.liquid-glass, .call-btn2.liquid-glass, .call-btn.liquid-glass * { color: #fff; }
#media-viewer .icon-btn.liquid-glass { color: #fff; }
.inline-btn.liquid-glass { border-radius: 12px; color: var(--primary); }
.fab.liquid-glass { position: absolute; } /* .liquid-glass sets position: relative */
/* photo viewer: counter + previous/next */
.mv-count { color: #fff; font-size: 15px; font-weight: 600; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
#media-viewer > div:first-child { z-index: 3; }
.mv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px !important; height: 48px !important; color: #fff !important; visibility: hidden; }
.mv-prev { left: 18px; } .mv-next { right: 18px; }
.mv-nav.liquid-glass:active { transform: translateY(-50%) scale(1.06); }
@media (hover: none) and (pointer: coarse) { .mv-nav { display: none; } } /* phones swipe instead */
#media-viewer-img, #media-viewer-video { will-change: transform; }

/* ===== channel bottom bar: one floating glass pill ===== */
#channel-bar { justify-content: center; align-items: center; padding: 6px 16px calc(14px + var(--safe-bottom)); background: none !important; }
.cb-pill { height: 50px; min-width: 168px; padding: 0 24px; border-radius: 25px; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-main); font: 600 16px/1 inherit; font-family: inherit; }
.cb-join { color: var(--on-primary, #fff); }
.cb-join.liquid-glass::after { background-color: color-mix(in srgb, var(--primary) 62%, transparent) !important; }
#channel-bar span.cb-pill { cursor: default; height: 40px; font-size: 14px; font-weight: 500; color: var(--text-muted); }

/* ===== comments: looks like a chat (wallpaper, bubbles, floating glass header + input) ===== */
.cm-panel { background-color: var(--chat-bg, var(--bg-base)); background-image: var(--chat-pattern); background-size: var(--chat-pattern-size); }
.cm-panel .cm-scroll { position: absolute !important; inset: 0; overflow-y: auto; padding: calc(72px + var(--safe-top)) 12px calc(88px + var(--safe-bottom)) !important; }
.cm-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: calc(10px + var(--safe-top)) 14px 10px; pointer-events: none; }
.cm-head > * { pointer-events: auto; }
.cm-head .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
.cm-title { height: 44px; padding: 0 20px; border-radius: 22px; max-width: 62%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; color: var(--text-main); }
.cm-title b { font-size: 15px; } .cm-title small { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cm-title small:empty { display: none; }
.cm-post { max-width: 560px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--msg-recv); color: var(--msg-recv-txt); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1); }
.cm-post:empty { display: none; }
.cm-post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 2px; }
.cm-post-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cm-post-head b { font-size: 15px; } .cm-post-head span { margin-left: auto; font-size: 12px; opacity: .6; }
.cm-panel .cm-post-inner { padding: 6px 14px 14px; background: none; border-radius: 0; max-height: 45vh; overflow: auto; }
.cm-divider { display: flex; justify-content: center; margin: 16px 0 12px; }
.cm-divider span { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-main);
    background: color-mix(in srgb, var(--bg-panel) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cm-panel .cm-list { max-width: 560px; margin: 0 auto; gap: 6px; }
.cm-panel .cm-row { gap: 8px; align-items: flex-end; transition: opacity .2s, transform .2s; }
.cm-panel .cm-row.cm-leaving { opacity: 0; transform: scale(.94); }
.cm-panel .cm-row.mine img { display: none; }
.cm-panel .cm-bubble { padding: 7px 12px 8px; border-radius: 18px 18px 18px 6px; max-width: 78%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cm-panel .cm-row.mine .cm-bubble { border-radius: 18px 18px 6px 18px; }
.cm-panel .cm-bubble[onclick] { cursor: pointer; }
.cm-panel .cm-text { font-size: 15px; line-height: 1.38; }
.cm-panel .cm-time { float: right; margin: 7px 0 -3px 10px; font-size: 11px; opacity: .6; }
.cm-del { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0; align-self: center; display: none; align-items: center; justify-content: center; color: #ef4444; }
.cm-row.act .cm-del { display: flex; }
@media (hover: hover) { .cm-row:hover .cm-del { display: flex; } }
.cm-panel .cm-empty { text-align: center; padding: 26px 0; color: var(--text-muted); font-size: 14px; }
.cm-panel .cm-input-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 8px; align-items: flex-end;
    padding: 8px 14px calc(12px + var(--safe-bottom)); border-top: none; background: none; }
.cm-field { flex: 1; min-width: 0; min-height: 46px; border-radius: 23px; display: flex; align-items: center; padding: 0 16px; }
.cm-panel .cm-input-bar textarea { flex: 1; border: none; outline: none; resize: none; padding: 12px 0; max-height: 120px; background: transparent !important; border-radius: 0;
    color: var(--text-main); font: inherit; font-size: 15.5px; line-height: 1.35; }
.cm-send { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--on-primary, #fff); }
.cm-send.liquid-glass::after { background-color: color-mix(in srgb, var(--primary) 70%, transparent) !important; }
.cm-join-wrap { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-bottom)); z-index: 5; display: flex; justify-content: center; }
/* the "N comments" row under channel posts */
.cm-bar { border-top-color: color-mix(in srgb, currentColor 10%, transparent); padding: 10px 16px; }
.cm-bar svg:last-child { opacity: .55; }

/* Bot url buttons are links styled as inline buttons */
a.inline-btn.inline-url { text-decoration: none; }
a.inline-btn.inline-url::after { content: '↗'; margin-left: 6px; font-size: 11px; opacity: .7; }

/* tab bar lens (js/nav.js NavLens): the selected tab sits in a liquid-glass capsule that springs between tabs */
.nav-lens { display: none; }
@media (max-width: 767px) {
    .nav-lens { display: block; position: absolute !important; top: 5px; bottom: 5px; left: 0; z-index: 0; border-radius: 23px; pointer-events: none;
        transform-origin: 50% 50%; will-change: transform; box-shadow: none !important; transition: filter .25s; }
    .nav-lens.liquid-glass::after { background-color: color-mix(in srgb, var(--text-main) 11%, transparent) !important; }
    .nav-lens.moving { filter: brightness(1.18) saturate(1.3); }
    .nav-lens.moving.liquid-glass::after { background-color: color-mix(in srgb, var(--text-main) 16%, transparent) !important; }
    .bottom-nav .nav-item { position: relative; z-index: 1; transition: color .25s; }
    .bottom-nav .nav-item.active { color: var(--primary); }
    .bottom-nav .nav-item.active svg { stroke: var(--primary); }
    .bottom-nav .nav-item:active .icon-wrap { transform: scale(0.9); transition: transform .12s; }
    .bottom-nav .nav-item .icon-wrap { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
}

/* PC side rail: a floating liquid-glass pill with round icon tabs and the vertical lens */
@media (min-width: 768px) {
    .bottom-nav, .bottom-nav.hidden {
        top: 12px !important; bottom: 12px !important; left: 8px !important; width: 58px !important; height: auto !important;
        border-radius: 29px !important; border-right: none !important; background: transparent !important;
        padding: 12px 0 !important; gap: 8px !important; align-items: center !important; justify-content: flex-start !important;
        box-shadow: var(--lg-shadow) !important;
    }
    .bottom-nav .nav-item { width: 46px !important; height: 46px !important; flex: none !important; border-radius: 23px; position: relative; z-index: 1;
        display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color .2s, background .2s; }
    .bottom-nav .nav-item span { display: none; }
    .bottom-nav .nav-item .icon-wrap { margin: 0; width: 46px; height: 46px; border-radius: 23px; }
    .bottom-nav .nav-item svg { width: 21px; height: 21px; }
    .bottom-nav .nav-item #nav-av { width: 30px !important; height: 30px !important; }
    .bottom-nav .nav-item:hover { transform: none !important; color: var(--text-main); background: color-mix(in srgb, var(--text-main) 7%, transparent); }
    .bottom-nav .nav-item.active { color: var(--primary); background: none; }
    .bottom-nav .nav-item.active svg { stroke: var(--primary); }
    .bottom-nav .nav-badge { top: 2px; right: 0; }
    .nav-lens { display: block; position: absolute !important; left: 6px; top: 0; width: 46px; height: 46px; border-radius: 23px; z-index: 0;
        pointer-events: none; box-shadow: none !important; will-change: transform; transition: filter .25s; }
    .nav-lens.liquid-glass::after { background-color: color-mix(in srgb, var(--text-main) 11%, transparent) !important; }
    .nav-lens.moving { filter: brightness(1.18) saturate(1.3); }
    #desktop-folders-nav { width: 100%; align-items: center; border-top: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent); padding-top: 8px; margin-top: 2px; }
}

/* profile song: a liquid colour ring that spins and thickens with the bass + ripples that leave on each beat */
.pv-ring { position: absolute; inset: 3px; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s ease;
    background: conic-gradient(from var(--pv-rot, 0deg), var(--pv-glow) 0deg, #fff 40deg, var(--pv-glow) 85deg, var(--pv-c2, var(--pv-glow)) 180deg, color-mix(in srgb, var(--pv-glow) 50%, #fff) 260deg, var(--pv-glow) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--pv-th, 3px)), #000 calc(100% - var(--pv-th, 3px) + 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--pv-th, 3px)), #000 calc(100% - var(--pv-th, 3px) + 1px));
    filter: saturate(1.6) brightness(1.15) drop-shadow(0 0 8px color-mix(in srgb, var(--pv-glow) 80%, transparent)); }
.pv-playing .pv-ring { opacity: 1; }
.pv-echo { position: absolute; inset: 4px; z-index: 1; border-radius: 50%; pointer-events: none;
    border: 3px solid color-mix(in srgb, var(--pv-glow) 35%, #fff);
    box-shadow: 0 0 14px color-mix(in srgb, var(--pv-glow) 70%, transparent), inset 0 0 10px color-mix(in srgb, var(--pv-glow) 50%, transparent);
    animation: pv-echo 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes pv-echo { from { transform: scale(1.02); opacity: .95; } to { transform: scale(1.55); opacity: 0; border-width: 1px; } }
body.cz-av-squircle .pv-ring, body.cz-av-squircle .pv-echo { border-radius: 30%; }
body.cz-av-square .pv-ring, body.cz-av-square .pv-echo { border-radius: 14%; }
.pv-xp-on .pv-ring, .pv-xp-on .pv-echo { display: none; }
/* no readable audio: a calm built-in version */
@keyframes pv-spin { to { --pv-rot: 360deg; } }
@property --pv-rot { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.pv-synth .pv-ring { animation: pv-spin 5s linear infinite; }
.pv-synth .pv-av-wrap::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pv-glow) 45%, #fff);
    animation: pv-echo 1.6s cubic-bezier(.2,.7,.3,1) infinite; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pv-echo { display: none; } .pv-synth .pv-ring { animation: none; } .pv-synth .pv-av-wrap::after { animation: none; opacity: 0; } }

/* YukiMusic now playing (header + profile status) */
.np-status { color: var(--primary); font-weight: 600; }
.np-link { color: inherit; text-decoration: none; }
.code-lang { margin-left: auto; margin-right: 6px; font: 600 11px ui-monospace, Menlo, Consolas, monospace; color: #7f849c; text-transform: lowercase; }

/* Inline keyboard under the bubble (2026-10-21): bubble + .inline-kb stacked in .msg-stack, buttons are liquid glass over the wallpaper */
.msg-stack { display: flex; flex-direction: column; align-items: stretch; gap: 5px; max-width: var(--cz-width, 75%); min-width: 0; }
.msg-stack > .msg-bubble { max-width: 100% !important; }
/* the time goes under the buttons (they sit where it normally hangs below the bubble) */
.msg-stack { position: relative; }
.msg-stack > .msg-bubble { position: static; }
.msg-row.sent .msg-stack .msg-bubble > .msg-timestamp { right: 4px; }
.msg-stack > .inline-kb { margin-top: 0; gap: 5px; min-width: min(240px, 100%); align-self: stretch; }
.msg-stack .inline-row { gap: 5px; }
.msg-stack .inline-btn { min-height: 40px; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--bg-panel) 45%, transparent); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; transition: transform .18s cubic-bezier(.3,1.6,.5,1), filter .15s; }
.msg-stack .inline-btn.liquid-glass { color: var(--text); border-radius: 14px; --glass-tint: 34%; --glass-blur: 10px; }
.msg-stack .inline-btn:hover { filter: brightness(1.06); }
.msg-stack .inline-btn:active { transform: scale(0.95); }
.msg-stack .inline-row:last-child .inline-btn:first-child { border-bottom-left-radius: 18px; }
.msg-stack .inline-row:last-child .inline-btn:last-child { border-bottom-right-radius: 18px; }
.msg-stack .inline-btn:disabled { opacity: .75; }

/* ===== Bot platform (2026-10-21): bots.js ===== */
/* styled inline buttons: any colour / gradient / animation */
.inline-btn.ib-styled { background: var(--ib-bg) !important; color: var(--ib-fg, #fff) !important; border: 1px solid var(--ib-bd, transparent) !important; box-shadow: 0 6px 18px -8px var(--ib-glow, rgba(0,0,0,.4)); overflow: hidden; }
.inline-btn.ib-styled::before { display: none; }
.inline-btn.ib-primary { --ib-bg: var(--primary); --ib-fg: var(--on-primary, #fff); --ib-glow: var(--primary); }
.inline-btn.ib-danger { --ib-bg: #ff3b30; --ib-glow: #ff3b30; }
.inline-btn.ib-success { --ib-bg: #30c85e; --ib-glow: #30c85e; }
.inline-btn.ib-warning { --ib-bg: #ff9f0a; --ib-fg: #1a1100; --ib-glow: #ff9f0a; }
.inline-btn.ib-dark { --ib-bg: #16161a; --ib-glow: #000; }
.inline-btn.ib-light { --ib-bg: #f4f4f7; --ib-fg: #111; --ib-glow: #fff; }
.inline-btn.ib-a-shimmer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); background-size: 250% 100%; animation: ib-shimmer 2.4s linear infinite; pointer-events: none; border-radius: inherit; }
@keyframes ib-shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.inline-btn.ib-a-pulse { animation: ib-pulse 1.8s ease-in-out infinite; }
@keyframes ib-pulse { 50% { transform: scale(1.035); } }
.inline-btn.ib-a-glow { animation: ib-glow 2s ease-in-out infinite; }
@keyframes ib-glow { 50% { box-shadow: 0 0 22px 2px var(--ib-glow, var(--primary)); } }
.inline-btn.ib-a-rainbow { background: linear-gradient(90deg,#ff004c,#ff9a00,#ffe600,#2bff88,#00c2ff,#a349ff,#ff004c) !important; background-size: 300% 100% !important; animation: ib-rainbow 4s linear infinite; color: #fff !important; }
@keyframes ib-rainbow { to { background-position: 300% 0; } }
.inline-btn .ib-ico { width: 14px; height: 14px; margin-left: 6px; flex-shrink: 0; opacity: .85; }

/* sandboxed bot frames */
iframe.yk-frame { display: block; width: 100%; border: 0; background: transparent; }
.ym-bubble-html { padding: 6px !important; min-width: min(280px, 72vw); }
.html-msg { position: relative; border-radius: 14px; overflow: hidden; }
.html-msg iframe.yk-frame { border-radius: 14px; }
.html-msg-full { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .2s; backdrop-filter: blur(6px); }
.html-msg:hover .html-msg-full { opacity: 1; }
@media (hover: none) { .html-msg-full { opacity: .7; } }
.bot-takeover { position: fixed; inset: 0; z-index: 99990; background: #000; opacity: 0; transform: scale(1.04); transition: opacity .25s, transform .25s; }
.bot-takeover.on { opacity: 1; transform: none; }
.bot-takeover iframe.yk-frame { width: 100%; height: 100% !important; }
.bot-takeover .bt-close { position: absolute; top: calc(12px + var(--safe-top, 0px)); right: 14px; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 16px; border: 0; cursor: pointer; z-index: 2; }
.bot-splash { position: fixed; inset: 0; z-index: 99995; background: var(--bg-base); display: flex; align-items: center; justify-content: center; transition: opacity .45s; }
.bot-splash.out { opacity: 0; pointer-events: none; }
.bot-splash img { max-width: 60vw; max-height: 50vh; object-fit: contain; animation: bs-pop .6s cubic-bezier(.3,1.5,.5,1); }
.bot-splash iframe { position: absolute; inset: 0; height: 100% !important; }
@keyframes bs-pop { from { transform: scale(.7); opacity: 0; } }

/* effects + wallpapers */
canvas.bot-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; }
canvas.bot-fx.fixed { position: fixed; z-index: 9980; }
.bot-wp { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; }
.bot-wp::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--wp-dim, 0)); }
.bot-wp .wp-frame { position: absolute; inset: 0; height: 100% !important; }
.bot-wp.wp-pan { animation: wp-pan 18s ease-in-out infinite alternate; }
@keyframes wp-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.bot-wp.wp-hue { animation: wp-hue 20s linear infinite; }
@keyframes wp-hue { to { filter: hue-rotate(360deg); } }
.bot-wp.wp-breathe { animation: wp-breathe 9s ease-in-out infinite; }
@keyframes wp-breathe { 50% { transform: scale(1.06); } }

/* bot chat: menu button, commands, header/composer frames, permission pill */
.bot-menu-btn { flex-shrink: 0; height: 44px; min-width: 44px; padding: 0 13px; border-radius: 22px; border: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; cursor: pointer; background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 6px 18px -6px var(--primary); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.bot-menu-btn:active { transform: scale(.93); }
.bot-menu-btn span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .bot-menu-btn:not(.is-app) span { display: none; } .bot-menu-btn:not(.is-app) { padding: 0; width: 44px; justify-content: center; } }
.bot-cmd-pop { position: relative; margin: 0 12px 8px; max-height: 46vh; overflow-y: auto; border-radius: 20px; padding: 6px; z-index: 20; animation: bcp-in .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes bcp-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.bcp-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; color: var(--text-main); border-radius: 14px; cursor: pointer; text-align: left; font-size: 14px; }
.bcp-item:hover, .bcp-item:active { background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.bcp-item img, .bcp-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bcp-av { background: var(--primary); color: var(--on-primary, #fff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.bcp-cmd { font-weight: 700; color: var(--primary); flex-shrink: 0; }
.bcp-desc { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bot-chat-frame iframe.yk-frame { border-radius: 18px; }
.bot-header-below { position: absolute; top: calc(66px + var(--safe-top, 0px)); left: 16px; right: 16px; z-index: 49; }
.bot-header-replace { position: absolute; top: calc(12px + var(--safe-top, 0px)); left: 68px; right: 16px; z-index: 51; }
.bot-composer-above, .bot-composer-replace { margin: 0 12px 8px; position: relative; z-index: 12; }
.bot-grant-pill { position: absolute; left: 50%; transform: translateX(-50%); top: calc(70px + var(--safe-top, 0px) + var(--bot-hdr-only, 0px)); z-index: 48; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 22px; font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; max-width: calc(100% - 32px); animation: bcp-in .3s; }
.bot-grant-pill > span { overflow: hidden; text-overflow: ellipsis; }
.bot-grant-pill button { border: 0; border-radius: 16px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 12.5px; }
.bgp-yes { background: var(--primary); color: var(--on-primary, #fff); }
.bgp-no { background: transparent; color: var(--text-muted); padding: 6px 8px !important; }
body.bot-chat #pinned-msg[style*="flex"] ~ .bot-grant-pill { top: calc(120px + var(--safe-top, 0px)); }
.bot-grants .bg-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.bot-grants .bg-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.bot-grants .bg-row span { flex: 1; font-weight: 600; }
.bot-grants .bg-row .btn { width: auto; padding: 8px 14px; }
.bot-grants .bg-empty { color: var(--text-muted); text-align: center; padding: 10px 0; }

/* chat list: ticker + widgets (space reserved by #chat-list::before) */
#chat-list::before { content: ''; display: block; height: var(--bot-top-h, 0px); }
#bot-top { position: absolute; left: 10px; right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; will-change: transform; }
.bot-ticker { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 18px; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--text-main); }
.bot-ticker::after { background: var(--tk-bg, color-mix(in srgb, var(--bg-panel) 30%, transparent)) !important; }
.tk-icon { flex-shrink: 0; }
.tk-track { flex: 1; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tk-run { display: inline-block; white-space: nowrap; animation: tk-run 20s linear infinite; }
.tk-sep { opacity: .45; margin: 0 14px; }
@keyframes tk-run { to { transform: translateX(-50%); } }
.bot-widget { border-radius: 20px; overflow: hidden; padding: 0 0 4px; }
.bw-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 14px 2px; }

/* companion */
.bot-companion { position: fixed; z-index: 9985; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); transition: transform .2s; }
.bot-companion.pos-br { right: 14px; bottom: calc(96px + var(--safe-bottom, 0px)); }
.bot-companion.pos-bl { left: 14px; bottom: calc(96px + var(--safe-bottom, 0px)); }
.bot-companion.pos-tr { right: 14px; top: calc(80px + var(--safe-top, 0px)); }
.bot-companion.pos-tl { left: 14px; top: calc(80px + var(--safe-top, 0px)); }
.bot-companion.moved { right: auto; bottom: auto; }
.bot-companion iframe.yk-frame { width: 100%; height: 100% !important; border-radius: 22px; }
.bc-grip { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 34px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.35); backdrop-filter: blur(6px); cursor: grab; z-index: 2; touch-action: none; opacity: 0; transition: opacity .2s; }
.bot-companion:hover .bc-grip, .bot-companion.dragging .bc-grip { opacity: 1; }
@media (hover: none) { .bc-grip { opacity: .3; width: 26px; height: 8px; top: -4px; } }

/* profile decorations */
.pv-av-wrap.bot-frame { position: relative; }
.pv-av-wrap.bot-frame::before { content: ''; position: absolute; inset: calc(-1 * var(--bf-w, 3px) - 3px); border-radius: 50%; background: var(--bf-grad); z-index: 0; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--bf-w, 3px)), #000 calc(100% - var(--bf-w, 3px) + .5px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--bf-w, 3px)), #000 calc(100% - var(--bf-w, 3px) + .5px)); pointer-events: none; }
.pv-av-wrap.bot-frame-anim::before { animation: bf-spin 4s linear infinite; }
.pv-xp-on .pv-av-wrap.bot-frame::before { opacity: 0; }
@keyframes bf-spin { to { transform: rotate(360deg); } }
#prof-name.bot-name { background: var(--bn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; }
#prof-name.bot-name-anim { animation: bn-flow 3s linear infinite; }
@keyframes bn-flow { to { background-position: 200% 0; } }
.pv-bot-badge { margin-left: 6px; font-size: .85em; cursor: default; display: inline-block; animation: bs-pop .5s; }

/* mini apps: compact / full / fullscreen sheet */
.wa-sheet { position: fixed; inset: 0; z-index: 99980; }
.wa-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .28s; }
.wa-sheet.on .wa-backdrop { opacity: 1; }
.wa-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 62vh; display: flex; flex-direction: column; background: var(--bg-panel); border-radius: 24px 24px 0 0; overflow: hidden; transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.9,.25,1), height .32s cubic-bezier(.2,.9,.25,1), border-radius .32s; box-shadow: 0 -20px 60px rgba(0,0,0,.35); }
.wa-sheet.on .wa-panel { transform: none; }
.wa-sheet.mode-full .wa-panel { height: calc(100% - 28px - var(--safe-top, 0px)); }
.wa-sheet.mode-fullscreen .wa-panel { height: 100%; border-radius: 0; }
@media (min-width: 768px) {
    .wa-panel { left: 50%; right: auto; width: 440px; margin-left: -220px; bottom: 24px; border-radius: 24px; height: min(640px, 80vh); }
    .wa-sheet.mode-full .wa-panel { height: calc(100% - 48px); }
    .wa-sheet.mode-fullscreen .wa-panel { left: 0; margin: 0; width: 100%; bottom: 0; }
}
.wa-grabber { height: 18px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; cursor: grab; touch-action: none; }
.wa-grabber::before { content: ''; width: 38px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text-main) 25%, transparent); }
.wa-head { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; flex-shrink: 0; }
.wa-title { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text-main); min-width: 0; touch-action: none; cursor: grab; }
.wa-title img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.wa-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-ver { color: #2f8cff; font-size: 13px; }
.wa-hbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main); cursor: pointer; flex-shrink: 0; }
.wa-body { flex: 1; position: relative; min-height: 0; }
.wa-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.wa-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.wa-main { margin: 8px 12px calc(10px + var(--safe-bottom, 0px)); height: 50px; border-radius: 16px; border: 0; background: var(--primary); color: var(--on-primary, #fff); font-weight: 700; font-size: 15.5px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wa-main:disabled { opacity: .5; }
.wa-fs-ctl { display: none; position: absolute; top: calc(10px + var(--safe-top, 0px)); right: 10px; gap: 2px; padding: 3px; border-radius: 22px; background: rgba(0,0,0,.4); backdrop-filter: blur(12px); z-index: 3; }
.wa-fs-ctl .wa-hbtn { background: transparent; color: #fff; width: 34px; height: 34px; }
.wa-sheet.mode-fullscreen .wa-fs-ctl { display: flex; }
.wa-sheet.mode-fullscreen .wa-grabber, .wa-sheet.mode-fullscreen .wa-head { display: none; }

/* bot frames take room in the message list (set by BotUI.frameRoom) */
body.bot-chat #msgs.n-messages-absolute { padding-top: calc(68px + var(--safe-top) + var(--bot-hdr-h, 0px)) !important; padding-bottom: calc(100px + var(--safe-bottom) + var(--bot-cmp-h, 0px)) !important; }
body.bot-chat.has-pins #msgs.n-messages-absolute { padding-top: calc(128px + var(--safe-top) + var(--bot-hdr-h, 0px)) !important; }
body.bot-chat #msg-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phones: in bot chats the menu button takes the emoji button's place, so the field keeps its width */
@media (max-width: 480px) { body.bot-has-menu #input-bar > button.icon-btn[onclick*="toggleStickers"] { display: none; } }
/* bot frames on app-drawn liquid glass; single-line placeholder; menu button shrinks while typing */
.bot-frame-glass { border-radius: 20px; overflow: hidden; }
.bot-frame-glass iframe.yk-frame { border-radius: 0 !important; }
body.bot-chat #msg-input:placeholder-shown { white-space: nowrap; overflow: hidden; }
.bot-menu-btn { transition: padding .25s cubic-bezier(.2,.8,.2,1), min-width .25s, transform .18s cubic-bezier(.3,1.6,.5,1); }
.bot-menu-btn span { transition: max-width .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }
body.bot-typing .bot-menu-btn { padding: 0; width: 44px; justify-content: center; gap: 0; }
body.bot-typing .bot-menu-btn span { max-width: 0; opacity: 0; overflow: hidden; }
/* header: close/back on the left, minimize + ⋯ pill on the right (Telegram layout) */
.wa-side { width: 84px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wa-side.wa-right { justify-content: flex-end; }
.wa-pill { display: flex; align-items: center; height: 36px; border-radius: 18px; background: color-mix(in srgb, var(--text-main) 8%, transparent); }
.wa-pill .wa-hbtn { background: transparent; width: 38px; }
.wa-hbtn { transition: background .15s, transform .15s; }
.wa-hbtn:active { transform: scale(.9); }
.wa-min svg { transition: transform .3s cubic-bezier(.2,.9,.25,1); }
.wa-fs-close { display: none; position: absolute; top: calc(10px + var(--safe-top, 0px)); left: 10px; padding: 3px; border-radius: 22px; background: rgba(0,0,0,.4); backdrop-filter: blur(12px); z-index: 3; }
.wa-fs-close .wa-hbtn { background: transparent; color: #fff; width: 34px; height: 34px; }
.wa-sheet.mode-fullscreen .wa-fs-close { display: flex; }
/* minimized: the app keeps running, squeezed into a bar at the bottom (BotUI.minimizeApp) */
.wa-sheet.min { pointer-events: none; }
.wa-sheet.min .wa-backdrop { opacity: 0; }
.wa-sheet.min .wa-panel { pointer-events: auto; height: calc(60px + var(--safe-bottom, 0px)) !important; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.22); border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); }
.wa-sheet.min .wa-grabber, .wa-sheet.min .wa-fs-close, .wa-sheet.min .wa-fs-ctl { display: none; }
.wa-sheet.min .wa-head { height: 60px; padding: 0 12px; cursor: pointer; }
.wa-sheet.min .wa-body, .wa-sheet.min .wa-main, .wa-sheet.min .wa-back, .wa-sheet.min .wa-more { visibility: hidden; position: absolute; pointer-events: none; }
.wa-sheet.min .wa-body { inset: 0; }
.wa-sheet.min .wa-x { display: flex !important; }
.wa-sheet.min .wa-min svg { transform: rotate(180deg); }
.wa-sheet.min .wa-title { font-size: 15.5px; }
.wa-sheet.min .wa-title img { width: 30px; height: 30px; }
@media (min-width: 768px) { .wa-sheet.min .wa-panel { bottom: 16px; border-radius: 20px; height: 60px !important; border: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); } }
body.wa-min .bottom-nav { bottom: calc(84px + var(--safe-bottom)); }
body.wa-min .input-bar { padding-bottom: calc(72px + var(--safe-bottom)); }
body.wa-min .fab { bottom: calc(90px + var(--safe-bottom)); }
/* mini app: dialogs above the sheet, QR scanner, share picker */
body.wa-open #interactive-modal { z-index: 99992 !important; }
.wa-qr { position: fixed; inset: 0; z-index: 99994; background: #000; }
.wa-qr video { width: 100%; height: 100%; object-fit: cover; }
.wa-qr-frame { position: absolute; left: 50%; top: 45%; width: min(64vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 28px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.85); }
.wa-qr-text { position: absolute; left: 0; right: 0; top: calc(45% + min(32vw, 140px) + 24px); text-align: center; color: #fff; font-weight: 600; font-size: 15px; padding: 0 24px; }
.wa-qr-x { position: absolute; top: calc(14px + var(--safe-top, 0px)); right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; font-size: 17px; cursor: pointer; }
.wa-share-img { display: block; max-width: 100%; max-height: 34vh; margin: 0 auto 10px; border-radius: 14px; }
.wa-share-q { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); outline: none; margin-bottom: 6px; }
.wa-share-list { max-height: 40vh; overflow-y: auto; }
.wa-share-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: transparent; color: var(--text-main); border-radius: 12px; cursor: pointer; font-size: 14.5px; text-align: left; }
.wa-share-row:hover { background: var(--bg-hover); }
.wa-share-row img, .wa-share-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wa-share-av { display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary, #fff); font-weight: 700; }
.wa-share-empty { color: var(--text-muted); text-align: center; padding: 12px; }

/* YukiMusic track card (type 'music', sent from YukiMusic share) */
.msg-music-card { position: relative; overflow: hidden; width: 260px; max-width: 100%; border-radius: 14px; padding: 12px; background: #1c1c22; color: #fff; isolation: isolate; }
.msg-music-card .mmc-bg { position: absolute; inset: -20px; z-index: -1; background-size: cover; background-position: center; filter: blur(22px) saturate(160%) brightness(0.55); }
.msg-music-card .mmc-row { display: flex; gap: 12px; align-items: center; }
.msg-music-card .mmc-cover { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.msg-music-card .mmc-ph { display: flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(255,255,255,.12); }
.msg-music-card .mmc-meta { min-width: 0; }
.msg-music-card .mmc-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-music-card .mmc-artist { font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-music-card .mmc-brand { font-size: 11px; opacity: .55; margin-top: 4px; letter-spacing: .02em; }
.msg-music-card .mmc-listen { display: block; margin-top: 12px; padding: 9px 0; text-align: center; border-radius: 999px; background: #fff; color: #111 !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.msg-music-card .mmc-listen:active { transform: scale(.97); }