/* ============================================================================
   ALLIMAL — PREMIUM GLASSMORPHISM & SPRING ANIMATION DESIGN SYSTEM
   ============================================================================ */

:root,
[data-theme="dark_indigo"] {
    --bg-deep: #060811;
    --bg-surface: #0d1222;
    --glass-bg: linear-gradient(160deg, rgba(34, 44, 76, 0.78) 0%, rgba(16, 22, 42, 0.82) 45%, rgba(9, 13, 26, 0.92) 100%);
    --glass-bg-elevated: linear-gradient(155deg, rgba(32, 42, 72, 0.96) 0%, rgba(14, 19, 36, 0.98) 100%);
    --nav-dock-bg: linear-gradient(180deg, rgba(38, 49, 84, 0.88) 0%, rgba(15, 20, 38, 0.92) 45%, rgba(9, 13, 26, 0.97) 100%);
    --surface-card-soft: linear-gradient(145deg, rgba(36, 46, 80, 0.68) 0%, rgba(14, 19, 36, 0.82) 100%);
    --surface-inset: rgba(10, 14, 28, 0.58);
    --surface-bubble-theirs: linear-gradient(155deg, rgba(30, 41, 68, 0.88) 0%, rgba(17, 24, 44, 0.94) 100%);
    --glass-border: rgba(255, 255, 255, 0.11);
    --glass-border-strong: rgba(255, 255, 255, 0.21);
    --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    --shadow-soft: 0 18px 42px -10px rgba(0, 0, 0, 0.52), var(--glass-specular);
    --text-primary: #f8fafc;
    --text-secondary: #a3aed0;
    --text-muted: #687494;
    --orb-1: #6366f1;
    --orb-2: #0ea5e9;
    --orb-3: #c084fc;
}

[data-theme="amoled_obsidian"] {
    --bg-deep: #000000;
    --bg-surface: #07070b;
    --glass-bg: linear-gradient(160deg, rgba(24, 24, 32, 0.88) 0%, rgba(10, 10, 15, 0.92) 50%, rgba(4, 4, 7, 0.97) 100%);
    --glass-bg-elevated: linear-gradient(155deg, rgba(28, 28, 38, 0.97) 0%, rgba(8, 8, 12, 0.99) 100%);
    --nav-dock-bg: linear-gradient(180deg, rgba(26, 26, 36, 0.92) 0%, rgba(10, 10, 15, 0.96) 50%, rgba(2, 2, 4, 0.99) 100%);
    --surface-card-soft: linear-gradient(145deg, rgba(26, 26, 34, 0.82) 0%, rgba(10, 10, 14, 0.92) 100%);
    --surface-inset: rgba(12, 12, 18, 0.76);
    --surface-bubble-theirs: linear-gradient(155deg, rgba(28, 28, 38, 0.92) 0%, rgba(14, 14, 20, 0.96) 100%);
    --glass-border: rgba(255, 255, 255, 0.13);
    --glass-border-strong: rgba(255, 255, 255, 0.24);
    --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    --shadow-soft: 0 18px 42px -10px rgba(0, 0, 0, 0.78), var(--glass-specular);
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --orb-1: #312e81;
    --orb-2: #0f172a;
    --orb-3: #581c87;
}

[data-theme="aurora_emerald"] {
    --bg-deep: #030d0b;
    --bg-surface: #071915;
    --glass-bg: linear-gradient(160deg, rgba(16, 54, 46, 0.82) 0%, rgba(8, 30, 25, 0.88) 50%, rgba(4, 18, 15, 0.94) 100%);
    --glass-bg-elevated: linear-gradient(155deg, rgba(18, 58, 49, 0.96) 0%, rgba(7, 26, 22, 0.98) 100%);
    --nav-dock-bg: linear-gradient(180deg, rgba(18, 58, 49, 0.9) 0%, rgba(8, 30, 25, 0.94) 50%, rgba(4, 18, 15, 0.98) 100%);
    --surface-card-soft: linear-gradient(145deg, rgba(16, 52, 44, 0.76) 0%, rgba(7, 26, 22, 0.88) 100%);
    --surface-inset: rgba(5, 22, 18, 0.65);
    --surface-bubble-theirs: linear-gradient(155deg, rgba(16, 56, 47, 0.9) 0%, rgba(8, 30, 25, 0.95) 100%);
    --glass-border: rgba(110, 231, 183, 0.16);
    --glass-border-strong: rgba(110, 231, 183, 0.3);
    --glass-specular: inset 0 1px 0 0 rgba(167, 243, 208, 0.22);
    --shadow-soft: 0 18px 42px -10px rgba(0, 0, 0, 0.58), var(--glass-specular);
    --text-primary: #ecfdf5;
    --text-secondary: #a7f3d0;
    --text-muted: #6ee7b7;
    --orb-1: #059669;
    --orb-2: #0284c7;
    --orb-3: #0d9488;
}

[data-theme="sunset_rose"] {
    --bg-deep: #11050b;
    --bg-surface: #1d0a13;
    --glass-bg: linear-gradient(160deg, rgba(58, 19, 39, 0.82) 0%, rgba(32, 11, 22, 0.88) 50%, rgba(19, 6, 13, 0.94) 100%);
    --glass-bg-elevated: linear-gradient(155deg, rgba(64, 21, 43, 0.96) 0%, rgba(28, 10, 19, 0.98) 100%);
    --nav-dock-bg: linear-gradient(180deg, rgba(64, 21, 43, 0.9) 0%, rgba(32, 11, 22, 0.94) 50%, rgba(18, 6, 12, 0.98) 100%);
    --surface-card-soft: linear-gradient(145deg, rgba(56, 18, 38, 0.76) 0%, rgba(26, 9, 18, 0.88) 100%);
    --surface-inset: rgba(22, 7, 15, 0.65);
    --surface-bubble-theirs: linear-gradient(155deg, rgba(62, 20, 41, 0.9) 0%, rgba(32, 11, 22, 0.95) 100%);
    --glass-border: rgba(253, 164, 175, 0.16);
    --glass-border-strong: rgba(253, 164, 175, 0.3);
    --glass-specular: inset 0 1px 0 0 rgba(254, 205, 211, 0.22);
    --shadow-soft: 0 18px 42px -10px rgba(0, 0, 0, 0.58), var(--glass-specular);
    --text-primary: #fff1f2;
    --text-secondary: #fecdd3;
    --text-muted: #fda4af;
    --orb-1: #e11d48;
    --orb-2: #9333ea;
    --orb-3: #ea580c;
}

[data-theme="crystal_light"] {
    --bg-deep: #eef2ff;
    --bg-surface: #ffffff;
    --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 245, 255, 0.9) 100%);
    --glass-bg-elevated: linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.99) 100%);
    --nav-dock-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 255, 0.97) 100%);
    --surface-card-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 242, 255, 0.9) 100%);
    --surface-inset: rgba(224, 231, 255, 0.65);
    --surface-bubble-theirs: linear-gradient(155deg, #ffffff 0%, #f1f5ff 100%);
    --glass-border: rgba(15, 23, 42, 0.1);
    --glass-border-strong: rgba(79, 70, 229, 0.22);
    --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
    --shadow-soft: 0 14px 32px -10px rgba(30, 41, 59, 0.12), var(--glass-specular);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --orb-1: #818cf8;
    --orb-2: #38bdf8;
    --orb-3: #c084fc;
}

:root {
    --accent: #6366f1;
    --accent-cyan: #0ea5e9;
    --accent-rose: #f43f5e;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --glass-blur: 24px;
    --font-scale: 1;
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 13px;
    --radius-sm: 9px;
    --spring: cubic-bezier(0.16, 1, 0.3, 1);
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: calc(16px * var(--font-scale));
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    background-color: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hidden {
    display: none !important;
}

/* ============================================================================
   KEYFRAME ANIMATIONS
   ============================================================================ */
@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(28px, -22px) scale(1.08); }
    100% { transform: translate(-18px, 24px) scale(0.96); }
}

@keyframes viewSpringIn {
    0% { opacity: 0; transform: translateY(14px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cardAppear {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes modalSpringUp {
    0% { opacity: 0; transform: translateY(28px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes likePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.32); }
    75% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes heartBurstAnim {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); }
    35% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(6deg); }
    65% { opacity: 1; transform: translate(-50%, -50%) scale(1.0) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -65%) scale(1.4); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}

@keyframes eqBar {
    0%, 100% { height: 4px; }
    50% { height: 13px; }
}

[data-reduce-motion="true"] * {
    animation: none !important;
    transition: none !important;
}

/* Ambient Aurora Mesh */
.ambient-mesh {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(115px);
    opacity: 0.25;
    animation: floatOrb 20s infinite alternate ease-in-out;
}

.orb-1 {
    width: 460px;
    height: 460px;
    background: var(--orb-1);
    top: -130px;
    left: -100px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--orb-2);
    bottom: -110px;
    right: -90px;
    animation-delay: -7s;
}

.orb-3 {
    width: 320px;
    height: 320px;
    background: var(--orb-3);
    top: 38%;
    left: 48%;
    opacity: 0.14;
    animation-delay: -13s;
}

/* Glass Surface */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

/* SVG Icons */
.ico,
.allimal-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.ico-fill {
    fill: currentColor;
}

.verified-svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.allimal-brand-svg {
    width: 38px;
    height: 38px;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 14px rgba(99, 102, 241, 0.42));
    transition: transform 0.28s var(--spring);
}

.top-brand-left:hover .allimal-brand-svg,
.side-brand:hover .allimal-brand-svg {
    transform: rotate(-6deg) scale(1.06);
}

/* ============================================================================
   IOS-STYLE ANIMATED SWITCHES (ZERO UGLY NATIVE CHECKBOXES!)
   ============================================================================ */
.ios-switch-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.ios-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ios-switch-slider {
    position: relative;
    width: 46px;
    height: 26px;
    background: rgba(128, 136, 168, 0.28);
    border: 1px solid var(--glass-border-strong);
    border-radius: 999px;
    transition: background 0.25s var(--spring), border-color 0.25s ease;
    flex-shrink: 0;
}

.ios-switch-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.26s var(--spring);
}

.ios-switch-input:checked + .ios-switch-slider {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    border-color: transparent;
}

.ios-switch-input:checked + .ios-switch-slider::after {
    transform: translateX(20px);
}

.ios-switch-text {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ============================================================================
   BUTTONS & INPUT CONTROLS
   ============================================================================ */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    transition: all 0.22s var(--spring);
}

button:active {
    transform: scale(0.96);
}

/* Custom Global Glass Scrollbars (Zero Default White Scrollbars) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(10, 14, 26, 0.25);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.48), rgba(14, 165, 233, 0.48));
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent), var(--accent-cyan));
}

input:not([type="checkbox"]):not([type="range"]),
textarea {
    font-family: inherit;
    font-size: 0.93rem;
    color: var(--text-primary);
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 12px 15px;
    width: 100%;
    outline: none;
    transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

input:not([type="checkbox"]):not([type="range"]):focus,
textarea:focus {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.09);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* ============================================================================
   100% CUSTOM ALLIMAL RANGE SLIDER (ZERO DEFAULT WHITE BROWSER TRACK!)
   ============================================================================ */
input[type="range"],
.allimal-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--accent-cyan) var(--slider-pct, 50%),
        rgba(128, 136, 168, 0.22) var(--slider-pct, 50%),
        rgba(128, 136, 168, 0.22) 100%
    );
    border: 1px solid var(--glass-border-strong);
    outline: none;
    cursor: pointer;
    margin: 8px 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb,
.allimal-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e0e7ff 65%, #c7d2fe 100%);
    border: 3px solid var(--accent);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.75), 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease, border-color 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover,
.allimal-slider::-webkit-slider-thumb:hover {
    transform: scale(1.16);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.85), 0 3px 8px rgba(0, 0, 0, 0.5);
}

input[type="range"]::-webkit-slider-thumb:active,
.allimal-slider::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

input[type="range"]::-moz-range-thumb,
.allimal-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e0e7ff 65%, #c7d2fe 100%);
    border: 3px solid var(--accent);
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.75), 0 2px 6px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.2s var(--spring), box-shadow 0.2s ease;
}

/* ============================================================================
   100% CUSTOM ALLIMAL GLASS SELECT DROPDOWN (ZERO OS NATIVE WHITE MENU!)
   ============================================================================ */
select.allimal-select-hidden {
    display: none !important;
}

.allimal-custom-select {
    position: relative;
    width: 100%;
    user-select: none;
}

.allimal-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 15px;
    border-radius: var(--radius-md);
    background: rgba(128, 136, 168, 0.12);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--glass-specular);
    transition: all 0.22s var(--spring);
}

.allimal-select-trigger:hover,
.allimal-custom-select.open .allimal-select-trigger {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.14);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.allimal-select-chevron {
    display: inline-flex;
    transition: transform 0.25s var(--spring);
    color: var(--text-secondary);
}

.allimal-custom-select.open .allimal-select-chevron {
    transform: rotate(180deg);
    color: var(--accent-cyan);
}

.allimal-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--glass-bg-elevated);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.65), var(--glass-specular);
    display: none;
    flex-direction: column;
    gap: 3px;
    animation: modalSpringUp 0.22s var(--spring);
}

.allimal-custom-select.open .allimal-select-menu {
    display: flex;
}

.allimal-select-option {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
}

.allimal-select-option:hover {
    background: rgba(128, 136, 168, 0.15);
    color: var(--text-primary);
}

.allimal-select-option.selected {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(14, 165, 233, 0.18));
    color: var(--text-primary);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 50%, var(--accent-cyan) 100%);
    background-size: 200% 200%;
    color: #fff;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(99, 102, 241, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-secondary {
    background: rgba(128, 136, 168, 0.13);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--glass-specular);
}

.btn-secondary:hover {
    background: rgba(128, 136, 168, 0.22);
    transform: translateY(-1px);
}

.btn-danger-outline {
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.38);
    color: #fb7185;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-danger-outline:hover {
    background: rgba(244, 63, 94, 0.2);
}

.chip-btn {
    background: rgba(128, 136, 168, 0.13);
    border: 1px solid var(--glass-border);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.81rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.chip-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 136, 168, 0.12);
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.icon-btn:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.45);
}

.full-width {
    width: 100%;
}

/* Avatars */
.avatar-xs {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 0.74rem;
}

.avatar-sm {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 0.88rem;
}

.avatar-md {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.avatar-lg {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 1.28rem;
    border: 2.5px solid var(--bg-deep);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
}

.avatar-xl {
    width: 96px;
    height: 96px;
    min-width: 96px;
    min-height: 96px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 2rem;
    border: 3.5px solid var(--bg-deep);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.avatar-fallback {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 52%, #06b6d4 100%);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(79, 70, 229, 0.32);
}

/* ============================================================================
   AUTHENTICATION SCREEN
   ============================================================================ */
.auth-gate {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    border-radius: var(--radius-xl);
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: modalSpringUp 0.45s var(--spring);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-primary) 15%, #818cf8 60%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-tagline {
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(128, 136, 168, 0.12);
    padding: 4px;
    border-radius: var(--radius-md);
}

.auth-tab {
    padding: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.auth-tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

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

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

.field-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.error-banner {
    background: rgba(244, 63, 94, 0.14);
    border: 1px solid rgba(244, 63, 94, 0.4);
    color: #fda4af;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

/* ============================================================================
   APPLICATION SHELL & STICKY TOP BRAND HEADER
   ============================================================================ */
.app-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 340px;
    gap: 18px;
    padding: 12px 14px;
    overflow-x: clip;
}

/* Sticky Top Brand Header — Always pinned at top when scrolling */
.top-brand-header {
    position: sticky !important;
    top: 10px;
    z-index: 95;
    border-radius: 20px;
    padding: 10px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--nav-dock-bg) !important;
    backdrop-filter: blur(28px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(210%) !important;
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-soft) !important;
}

[data-theme="crystal_light"] .top-brand-header {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 244, 255, 0.94) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.24) !important;
    box-shadow:
        0 12px 28px -8px rgba(30, 41, 59, 0.14),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.9) !important;
}

.top-brand-left {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.top-brand-titles {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.top-brand-name {
    font-family: var(--font-display);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-primary) 20%, #818cf8 65%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.top-brand-sub {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.28);
    padding: 2px 9px;
    border-radius: 999px;
}

.top-brand-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.live-lounge-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.13);
    border: 1px solid rgba(16, 185, 129, 0.34);
    color: var(--accent-emerald);
    font-size: 0.78rem;
    font-weight: 700;
}

.live-lounge-pill:hover {
    background: rgba(16, 185, 129, 0.22);
    transform: translateY(-1px);
}

.live-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-emerald);
    animation: pulseGlow 2s infinite;
}

.top-action-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(128, 136, 168, 0.1));
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-specular);
    color: var(--text-primary);
}

.top-action-btn:hover,
.top-action-btn.active {
    background: rgba(99, 102, 241, 0.24);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* Desktop Left Sidebar — Adapted with Refractive Liquid Glass & Animated Pill */
.side-nav {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    border-radius: 26px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--nav-dock-bg) !important;
    backdrop-filter: blur(30px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(210%) !important;
    border: 1px solid var(--glass-border-strong) !important;
    box-shadow: var(--shadow-soft) !important;
    overflow: hidden;
}

[data-theme="crystal_light"] .side-nav {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 242, 255, 0.96) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.24) !important;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.nav-links {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 4px;
    border-radius: 20px;
    background: rgba(128, 136, 168, 0.06);
    border: 1px solid var(--glass-border);
}

.side-liquid-pill {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 46px;
    border-radius: 15px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 100% at 25% 15%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 48%, transparent 100%),
        linear-gradient(135deg, rgba(99, 102, 241, 0.42) 0%, rgba(14, 165, 233, 0.28) 100%);
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow:
        0 10px 24px -6px rgba(99, 102, 241, 0.55),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.52),
        inset 0 -1px 2px rgba(14, 165, 233, 0.28);
    backdrop-filter: blur(16px) saturate(190%);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    transition:
        transform 0.46s cubic-bezier(0.22, 1.18, 0.36, 1),
        height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 15px;
    border-radius: 15px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.94rem;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    transition: color 0.22s ease, transform 0.22s var(--spring);
}

.nav-item:hover {
    background: rgba(128, 136, 168, 0.1);
    color: var(--text-primary);
    transform: translateX(3px);
}

.nav-item.active {
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(99, 102, 241, 0.35);
}

.nav-item.active .nav-icon {
    color: var(--text-primary);
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.55));
    transform: scale(1.08);
}

.badge {
    margin-left: auto;
    background: var(--accent-rose);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}

.create-cta {
    width: 100%;
    padding: 13px;
}

.side-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

.me-mini-card {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
}

.me-mini-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.me-mini-text strong {
    font-size: 0.87rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-mini-text span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================================================
   CENTER STAGE & SEGMENTED CONTROLS
   ============================================================================ */
.main-stage {
    min-width: 0;
    padding-bottom: 96px;
}

.stage-view {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.stage-view.active {
    display: flex;
    animation: viewSpringIn 0.38s var(--spring);
}

.hub-subview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: viewSpringIn 0.32s var(--spring);
}

.segmented-bar {
    border-radius: 16px;
    padding: 5px;
    display: flex;
    gap: 5px;
    background: rgba(128, 136, 168, 0.09);
    border: 1px solid var(--glass-border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.segmented-bar::-webkit-scrollbar {
    display: none;
}

.seg-btn {
    flex: 1 0 auto;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.seg-btn:hover {
    color: var(--text-primary);
}

.seg-btn.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(14, 165, 233, 0.18));
    color: var(--text-primary);
    border: 1px solid rgba(99, 102, 241, 0.42);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ============================================================================
   FLASH & NOTES STRIP + INLINE QUICK COMPOSER
   ============================================================================ */
.stories-notes-strip {
    border-radius: var(--radius-lg);
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strip-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.strip-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

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

.stories-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 6px 6px;
    scrollbar-width: none;
}

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

.story-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    cursor: pointer;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    flex: 0 0 96px;
    position: relative;
    transition: transform 0.22s var(--spring);
}

.story-pill:hover {
    transform: translateY(-3px);
}

.story-note-slot {
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.story-ring {
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, var(--accent), #ec4899, var(--accent-amber), var(--accent-cyan), var(--accent));
    box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.45);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.story-ring.no-story {
    background: var(--glass-border-strong);
    box-shadow: none;
}

.story-ring-inner {
    background: var(--bg-deep);
    padding: 2.5px;
    border-radius: 50%;
    display: flex;
}

.story-note-tag {
    pointer-events: auto;
    background: var(--glass-bg-elevated);
    border: 1px solid rgba(99, 102, 241, 0.45);
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 0.68rem;
    font-weight: 700;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: -8px;
    z-index: 3;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.22s var(--spring), border-color 0.22s ease;
}

.story-note-tag:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: var(--accent-cyan);
}

.story-note-text-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    text-align: center;
}

.story-note-music-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    max-width: 100%;
    font-size: 0.62rem;
    color: var(--accent-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-note-music-line svg,
.story-note-music-line .ico {
    flex-shrink: 0;
}

.story-note-music-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-user-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Realistic Inline Quick Composer Card */
.quick-composer-card {
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-composer-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-composer-trigger {
    flex: 1;
    text-align: left;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.quick-composer-trigger:hover {
    background: rgba(128, 136, 168, 0.16);
    border-color: var(--glass-border-strong);
    color: var(--text-primary);
}

.quick-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

.quick-tool-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.quick-tool-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    color: var(--text-primary);
}

/* ============================================================================
   REALISTIC POST CARDS & DOUBLE-TAP HEART BURST
   ============================================================================ */
.posts-stream {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-card {
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    animation: cardAppear 0.36s var(--spring);
    transition: transform 0.24s var(--spring), border-color 0.24s ease;
}

.post-card:hover {
    border-color: var(--glass-border-strong);
}

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

.post-author-name-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-author-meta strong {
    font-size: 0.95rem;
}

.post-author-meta span {
    font-size: 0.77rem;
    color: var(--text-secondary);
}

.post-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(128, 136, 168, 0.12);
    border: 1px solid var(--glass-border);
    padding: 4px 11px;
    border-radius: 999px;
    text-decoration: none;
}

/* Playable Music Pill with Equalizer Wave */
.music-playable-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.38);
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s var(--spring);
}

.music-playable-pill:hover {
    background: rgba(99, 102, 241, 0.26);
    transform: scale(1.02);
}

.music-playable-pill.playing {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.55);
}

.music-playable-pill img {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    object-fit: cover;
}

.eq-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 13px;
}

.eq-bars span {
    width: 2.5px;
    height: 4px;
    background: currentColor;
    border-radius: 2px;
}

.music-playable-pill.playing .eq-bars span:nth-child(1) {
    animation: eqBar 0.55s infinite ease-in-out;
}
.music-playable-pill.playing .eq-bars span:nth-child(2) {
    animation: eqBar 0.45s infinite ease-in-out 0.15s;
}
.music-playable-pill.playing .eq-bars span:nth-child(3) {
    animation: eqBar 0.6s infinite ease-in-out 0.3s;
}

.post-caption {
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.post-media-frame {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #04060c;
    max-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--glass-border);
}

.post-media-frame img,
.post-media-frame video {
    width: 100%;
    max-height: 540px;
    object-fit: cover;
    display: block;
}

.heart-burst-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 92px;
    color: #f43f5e;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(0 8px 24px rgba(244, 63, 94, 0.65));
    animation: heartBurstAnim 0.85s var(--spring) forwards;
}

.heart-burst-overlay svg {
    width: 100%;
    height: 100%;
}

.dual-pip-overlay {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 118px !important;
    height: 156px !important;
    border-radius: var(--radius-md);
    border: 2.5px solid #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
    object-fit: cover;
}

/* Voice Note Player */
.voice-wave-box {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.32);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Poll Component */
.poll-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.poll-option-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border-strong);
    background: rgba(128, 136, 168, 0.08);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 600;
}

.poll-option-btn.voted {
    border-color: var(--accent);
}

.poll-fill-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(14, 165, 233, 0.22));
    z-index: 0;
    transition: width 0.45s var(--spring);
}

.poll-option-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Post Action Bar */
.post-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
}

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

.action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(128, 136, 168, 0.09);
    border: 1px solid transparent;
}

.action-pill:hover {
    background: rgba(128, 136, 168, 0.17);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-pill.liked {
    color: var(--accent-rose);
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.32);
    animation: likePop 0.35s var(--spring);
}

.action-pill.reposted {
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.32);
    animation: likePop 0.35s var(--spring);
}

.action-pill.saved {
    color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.32);
    animation: likePop 0.35s var(--spring);
}

/* ============================================================================
   UNIFIED EXPLORE HUB (DISCOVER + RADAR + LOUNGE)
   ============================================================================ */
.hub-card {
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hub-card-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
}

.people-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

.person-discover-card {
    background: rgba(128, 136, 168, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.22s var(--spring), border-color 0.22s ease;
}

.person-discover-card:hover {
    transform: translateY(-2px);
    border-color: var(--glass-border-strong);
}

.search-bar-wrap {
    border-radius: var(--radius-lg);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-bar-wrap input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-chip {
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.34);
    color: var(--text-primary);
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.tag-chip:hover {
    background: rgba(99, 102, 241, 0.26);
    transform: translateY(-1px);
}

/* ============================================================================
   FLIX STREAM (TIKTOK-STYLE VERTICAL SNAP FEED & ANIMATED RIGHT ACTION RAIL)
   ============================================================================ */
.view-header {
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.view-header h2 {
    font-family: var(--font-display);
    font-size: 1.32rem;
}

.view-subtitle {
    font-size: 0.83rem;
    color: var(--text-secondary);
}

.flix-tiktok-shell {
    position: relative;
    width: 100%;
    height: calc(100dvh - 38px);
    min-height: 540px;
    max-height: 920px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #020308;
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
}

.flix-floating-top {
    position: absolute;
    top: 12px;
    left: 14px;
    right: 14px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.flix-top-tabs,
.flix-upload-pill {
    pointer-events: auto;
}

.flix-top-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    border-radius: 999px;
    background: rgba(6, 9, 18, 0.54);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.42);
}

.flix-top-tab {
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.68);
    background: transparent;
    transition: all 0.22s var(--spring);
    letter-spacing: 0.01em;
}

.flix-top-tab:hover {
    color: #fff;
}

.flix-top-tab.active {
    color: #ffffff;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.flix-top-divider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
}

.flix-upload-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #8b5cf6, var(--accent-cyan));
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.flix-upload-pill .ico {
    width: 15px;
    height: 15px;
}

.flix-upload-pill:hover {
    transform: translateY(-2px) scale(1.03);
}

.clips-vertical-stage {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.clips-vertical-stage::-webkit-scrollbar {
    display: none;
}

.flix-slide {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: radial-gradient(circle at center, #0e1326 0%, #03040a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.flix-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.flix-tap-state-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(8, 12, 24, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 18;
    transition: opacity 0.18s ease, transform 0.24s var(--spring);
}

.flix-tap-state-indicator.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.flix-tap-state-indicator .ico {
    width: 28px;
    height: 28px;
}

.btn-flix-mute {
    position: absolute;
    top: 54px;
    right: 14px;
    z-index: 22;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(8, 12, 24, 0.56);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* TikTok Right-Side Vertical Floating Action Rail */
.flix-action-rail {
    position: absolute;
    right: 12px;
    bottom: 24px;
    z-index: 22;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.flix-empty-state {
    width: 100%;
    height: 100%;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 36px 24px;
    background: radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.16) 0%, rgba(14, 165, 233, 0.08) 38%, #020308 80%);
}

.flix-empty-icon-ring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.48);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c7d2fe;
}

.flix-empty-icon-ring .ico {
    width: 32px;
    height: 32px;
}

.flix-empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 800;
    color: #ffffff;
}

.flix-empty-state p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.45;
}

.flix-dbltap-heart {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    color: #f43f5e;
    filter: drop-shadow(0 8px 24px rgba(244, 63, 94, 0.85));
    animation: flixHeartBurst 0.88s var(--spring) forwards;
}

.flix-dbltap-heart .ico {
    width: 92px;
    height: 92px;
}

@keyframes flixHeartBurst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    35% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); }
    100% { opacity: 0; transform: translate(-50%, -115%) scale(1.55); }
}

.flix-creator-avatar-box,
.flix-creator-avatar-wrap {
    position: relative;
    margin-bottom: 6px;
    cursor: pointer;
}

.flix-creator-avatar-box .avatar-md,
.flix-creator-avatar-wrap .avatar-md {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.flix-follow-plus-badge,
.flix-follow-plus-btn {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f43f5e, #ec4899);
    color: #fff;
    border: 2px solid #05070f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.55);
}

.flix-follow-plus-badge .ico,
.flix-follow-plus-btn .ico {
    width: 12px;
    height: 12px;
}

.flix-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.flix-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    color: #ffffff;
}

.flix-rail-icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(12, 16, 30, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.26s var(--spring), background 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.flix-rail-icon-circle .ico {
    width: 23px;
    height: 23px;
}

.flix-rail-btn:hover .flix-rail-icon-circle {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.18);
}

.flix-rail-btn:active .flix-rail-icon-circle {
    transform: scale(0.88);
}

.flix-rail-btn.liked .flix-rail-icon-circle {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    border-color: #fda4af;
    color: #fff;
    box-shadow: 0 0 24px rgba(244, 63, 94, 0.72);
    animation: flixActionBounce 0.45s var(--spring);
}

.flix-rail-btn.saved .flix-rail-icon-circle {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #fde68a;
    color: #fff;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.68);
    animation: flixActionBounce 0.45s var(--spring);
}

.flix-rail-btn.reposted .flix-rail-icon-circle {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #6ee7b7;
    color: #fff;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.68);
    animation: flixActionBounce 0.45s var(--spring);
}

.flix-rail-btn.btn-flix-share:hover .flix-rail-icon-circle {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 22px rgba(14, 165, 233, 0.6);
}

@keyframes flixActionBounce {
    0% { transform: scale(0.75); }
    50% { transform: scale(1.26) rotate(-6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.flix-rail-count {
    font-size: 0.74rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.flix-spinning-vinyl {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 6px;
    background: conic-gradient(from 0deg, #111827, #4f46e5, #0ea5e9, #111827);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinVinyl 5.5s linear infinite;
    cursor: pointer;
}

.flix-spinning-vinyl.paused {
    animation-play-state: paused;
}

.flix-spinning-vinyl img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* TikTok Bottom-Left Info Overlay */
.flix-bottom-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 50px 78px 22px 18px;
    background: linear-gradient(to top, rgba(2, 4, 10, 0.94) 0%, rgba(2, 4, 10, 0.52) 55%, transparent 100%);
    z-index: 16;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #fff;
    pointer-events: none;
}

.flix-bottom-overlay > * {
    pointer-events: auto;
}

.flix-author-row,
.flix-author-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: fit-content;
}

.flix-author-row strong,
.flix-author-line strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.flix-caption-text {
    font-size: 0.89rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.93);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
    max-width: 92%;
}

.flix-music-ticker,
.flix-sound-ticker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(12, 16, 30, 0.58);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
    width: fit-content;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.flix-progress-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 24;
}

.flix-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
    box-shadow: 0 0 10px var(--accent-cyan);
    transition: width 0.15s linear;
}

/* ============================================================================
   RADAR (INTERACTIVE LEAFLET MAP — CUSTOM DARK TILE FILTER & GLASS CONTROLS)
   ============================================================================ */
.header-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.map-board {
    border-radius: var(--radius-xl);
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 14px;
    min-height: 460px;
}

.leaflet-map-box {
    width: 100%;
    height: 440px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    z-index: 1;
    background: #070a14;
    border: 1px solid var(--glass-border-strong);
}

/* Cyber-Dark Filter on Free OpenStreetMap Tiles (Zero API Key Watermark!) */
.leaflet-map-box .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(92%) contrast(92%) saturate(115%);
}

[data-theme="crystal_light"] .leaflet-map-box .leaflet-tile-pane {
    filter: none;
}

/* Custom Glass Zoom Controls & Attribution (No Default White Boxes!) */
.leaflet-map-box .leaflet-bar {
    border: 1px solid var(--glass-border-strong) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.leaflet-map-box .leaflet-bar a {
    background: rgba(12, 16, 30, 0.85) !important;
    backdrop-filter: blur(12px);
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-weight: 800;
}

.leaflet-map-box .leaflet-bar a:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

.leaflet-map-box .leaflet-control-attribution {
    background: rgba(8, 12, 24, 0.72) !important;
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.65) !important;
    border-radius: 8px 0 0 0;
    padding: 2px 8px !important;
    font-size: 0.66rem !important;
}

.leaflet-map-box .leaflet-control-attribution a {
    color: var(--accent-cyan) !important;
}

.leaflet-map-box .leaflet-popup-content-wrapper,
.leaflet-map-box .leaflet-popup-tip {
    background: rgba(12, 16, 30, 0.92) !important;
    color: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.45);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6) !important;
}

.map-pins-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 440px;
    overflow-y: auto;
}

/* ============================================================================
   SOHBET (MESSAGES & CHANNELS)
   ============================================================================ */
.messages-hub {
    border-radius: var(--radius-xl);
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 560px;
    overflow: hidden;
}

.msg-Left-pane {
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
}

.msg-pane-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    gap: 6px;
    border-bottom: 1px solid var(--glass-border);
}

.msg-pane-tab {
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.msg-pane-tab.active {
    background: rgba(99, 102, 241, 0.22);
    color: var(--text-primary);
}

.pane-Action-bar {
    padding: 10px;
}

.peers-scroll-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.peer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s ease;
}

.peer-row:hover, .peer-row.active {
    background: rgba(99, 102, 241, 0.18);
}

.msg-Right-pane {
    display: flex;
    flex-direction: column;
    height: 560px;
}

.chat-top-bar {
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-messages-box {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msg-bubble {
    max-width: 74%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: cardAppear 0.24s var(--spring);
}

.msg-bubble.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--accent), #4f46e5);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.msg-bubble.theirs {
    align-self: flex-start;
    background: rgba(128, 136, 168, 0.14);
    border: 1px solid var(--glass-border);
    border-bottom-left-radius: 4px;
}

.msg-bubble.ephemeral {
    border: 1px dashed var(--accent-amber);
}

.msg-time {
    font-size: 0.68rem;
    opacity: 0.72;
    align-self: flex-end;
}

.chat-input-row {
    padding: 12px 14px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ============================================================================
   LOUNGE ROOMS & NOTIFICATIONS
   ============================================================================ */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.room-card {
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: cardAppear 0.34s var(--spring);
}

.room-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent-emerald);
    background: rgba(16, 185, 129, 0.14);
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-emerald);
    animation: pulseGlow 2s infinite;
}

.room-participants-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.notifs-list {
    border-radius: var(--radius-lg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border-bottom: 1px solid var(--glass-border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.notif-row:hover {
    background: rgba(128, 136, 168, 0.1);
}

.notif-row.unread {
    background: rgba(99, 102, 241, 0.14);
}

/* ============================================================================
   RICH PROFILE SCREEN (BALANCED HEADER, LOGOUT PILL & 4-COLUMN TABS)
   ============================================================================ */
.profile-hero {
    border-radius: var(--radius-xl);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

.profile-banner {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 50%, var(--accent-cyan) 100%);
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.profile-banner-logout-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(12, 16, 30, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(244, 63, 94, 0.48);
    color: #fda4af;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.profile-banner-logout-btn:hover {
    background: rgba(244, 63, 94, 0.28);
    color: #ffffff;
    border-color: #fb7185;
    transform: translateY(-1px);
}

.profile-hero-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 4px;
}

.profile-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.profile-avatar-wrap {
    position: relative;
    margin-top: -50px;
    z-index: 2;
    flex-shrink: 0;
}

.profile-note-bubble {
    position: absolute;
    top: -12px;
    left: 62px;
    background: var(--glass-bg-elevated);
    border: 1px solid rgba(99, 102, 241, 0.55);
    color: var(--text-primary);
    font-size: 0.71rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 15px;
    max-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    cursor: pointer;
    z-index: 5;
    overflow: hidden;
}

.profile-note-bubble .story-note-text-line,
.profile-note-bubble .story-note-music-line {
    max-width: 148px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-note-bubble:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: var(--accent-cyan);
}

.profile-actions-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
    max-width: 100%;
    min-width: 0;
}

.profile-actions-area > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-main-info {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.profile-title-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.profile-name-row h2 {
    font-family: var(--font-display);
    font-size: 1.36rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#profileVerifiedBadge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.handle-text {
    color: var(--text-secondary);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.bio-paragraph {
    margin-top: 2px;
    font-size: 0.91rem;
    word-break: break-word;
}

.profile-meta-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
    max-width: 100%;
}

.profile-meta-chips .meta-chip {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile 4-Tab Bar — Fits 100% Inside Card Without Clipping */
.profile-tabs-bar {
    display: flex;
    width: 100%;
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    flex-wrap: nowrap;
}

.profile-tabs-bar .seg-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.stat-box {
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    background: rgba(128, 136, 168, 0.06);
    border: 1px solid var(--glass-border);
    transition: transform 0.2s var(--spring), background 0.2s ease;
}

.stat-box:hover {
    background: rgba(99, 102, 241, 0.14);
    transform: translateY(-2px);
}

.stat-box strong {
    display: block;
    font-size: 1.2rem;
    font-family: var(--font-display);
}

.stat-box span {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.profile-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.profile-media-cell {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #060810;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: transform 0.22s var(--spring);
}

.profile-media-cell:hover {
    transform: scale(1.02);
}

.profile-media-cell img,
.profile-media-cell video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================================
   RIGHT SIDEBAR & MINI LISTS
   ============================================================================ */
.right-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rail-card {
    border-radius: var(--radius-xl);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rail-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
}

.mini-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mini-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.mini-item-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mini-item-text strong {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-item-text span {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.muted-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ============================================================================
   MUSIC API PICKER, INTERACTIVE NOTE MUSIC DECK & CUSTOM AUDIO PLAYER
   ============================================================================ */
.music-picker-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(128, 136, 168, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 10px;
}

.music-search-row {
    display: flex;
    gap: 8px;
}

.music-results-list {
    max-height: 195px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.music-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.music-track-row:hover {
    border-color: var(--accent);
}

.music-track-cover {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
}

.music-track-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.music-track-meta strong {
    font-size: 0.83rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-track-meta span {
    font-size: 0.73rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-music-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(99, 102, 241, 0.45);
}

.selected-music-card img {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    object-fit: cover;
}

/* Custom Voice Audio Player (Replaces Default White Browser <audio>) */
.custom-voice-player {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.36);
}

.custom-voice-time {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 68px;
    text-align: right;
}

/* Interactive Note & Music Viewer Modal */
@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.note-viewer-author {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.note-viewer-thought {
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.16), rgba(14, 165, 233, 0.09));
    border: 1px solid rgba(99, 102, 241, 0.38);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--glass-specular);
}

.note-music-deck {
    padding: 18px;
    border-radius: var(--radius-lg);
    background: rgba(10, 14, 26, 0.55);
    border: 1px solid var(--glass-border-strong);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.note-deck-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.note-deck-disc-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from 0deg, #1e1b4b, #6366f1, #0ea5e9, #1e1b4b);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

.note-deck-disc-wrap.playing {
    animation: spinVinyl 7s linear infinite;
}

.note-deck-cover {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.note-deck-center-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--bg-deep);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.note-deck-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.note-deck-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.note-deck-meta strong {
    font-size: 1.02rem;
    font-family: var(--font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-deck-meta span {
    font-size: 0.83rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-deck-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.note-deck-time-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.note-deck-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.note-deck-play-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8b5cf6, var(--accent-cyan));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.note-deck-play-fab:hover {
    transform: scale(1.07);
}

.note-deck-volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    color: var(--text-secondary);
}

/* Settings Sections */
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--glass-border);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-cyan);
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 8px;
}

.theme-swatch-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: rgba(128, 136, 168, 0.1);
    font-size: 0.8rem;
    font-weight: 600;
}

.theme-swatch-btn.active {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.22);
}

.theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Fixed Accent Color Dots Row (Zero Clipping on Any Edge!) */
.accent-dots-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 10px;
}

.accent-dot-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: transform 0.22s var(--spring), box-shadow 0.22s ease;
}

.accent-dot-btn:hover {
    transform: scale(1.1);
}

.accent-dot-btn.active {
    border-color: #ffffff;
    transform: scale(1.12);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28), 0 6px 16px rgba(0, 0, 0, 0.5);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.settings-row-info {
    display: flex;
    flex-direction: column;
}

.settings-row-info strong {
    font-size: 0.88rem;
}

.settings-row-info small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================================================
   NATIVE MODALS WITH SPRING ANIMATION
   ============================================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(4, 6, 12, 0.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-window {
    width: 100%;
    max-width: 540px;
    background: var(--glass-bg-elevated);
    border-radius: var(--radius-xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSpringUp 0.34s var(--spring);
}

.modal-window.modal-sm {
    max-width: 420px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-shrink: 0;
}

.modal-footer.split {
    justify-content: space-between;
}

.composer-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    flex-shrink: 0;
    min-height: 44px;
}

.composer-tab {
    padding: 8px 13px;
    min-height: 36px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(128, 136, 168, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.composer-tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
}

.file-drop-zone {
    border: 1.5px dashed var(--glass-border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.86rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.file-drop-zone:hover {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.08);
}

.media-preview-box img,
.media-preview-box video {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.live-cam-preview {
    width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
    background: #000;
}

.poll-inputs-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.composer-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Flash Player Modal */
.story-player-window {
    width: 100%;
    max-width: 400px;
    height: 82vh;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: #05070e;
    animation: modalSpringUp 0.35s var(--spring);
}

.story-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    margin: 10px 14px 0;
    border-radius: 99px;
    overflow: hidden;
}

.story-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
}

.story-player-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    z-index: 2;
}

.story-author-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-stage-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.story-stage-media img,
.story-stage-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-player-bottom {
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
}

.story-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* Comments Scroll Box */
.comments-scroll-box {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-border);
}

.comment-bubble {
    flex: 1;
    font-size: 0.88rem;
}

.comment-input-bar {
    display: flex;
    gap: 8px;
}

/* Toast Notifications */
.toast-stack {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast-msg {
    background: var(--glass-bg-elevated);
    border: 1px solid var(--glass-border-strong);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--shadow-soft);
    animation: modalSpringUp 0.28s var(--spring);
}

/* ============================================================================
   TOP FLOATING MINI MUSIC PLAYER BAR (DYNAMIC ISLAND / PERSISTENT BAR)
   ============================================================================ */
.top-mini-music-bar {
    position: sticky;
    top: 76px;
    z-index: 48;
    border-radius: 18px;
    padding: 8px 12px 11px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--glass-bg-elevated);
    border: 1px solid rgba(99, 102, 241, 0.48);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    overflow: hidden;
    animation: viewSpringIn 0.32s var(--spring);
}

.mini-music-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.mini-music-disc {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(from 0deg, var(--accent), var(--accent-cyan), #ec4899, var(--accent));
    flex-shrink: 0;
}

.mini-music-disc.playing {
    animation: spinVinyl 6s linear infinite;
}

.mini-music-cover {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.mini-music-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mini-music-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.mini-music-title-row strong {
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-music-info > span {
    font-size: 0.72rem;
    color: var(--accent-cyan);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-music-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mini-music-btn {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
    border: none;
}

.mini-music-close-btn {
    width: 32px;
    height: 32px;
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.35);
    color: #fda4af;
}

.mini-music-close-btn:hover {
    background: rgba(244, 63, 94, 0.28);
    color: #fff;
}

.mini-music-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
}

.mini-music-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
    transition: width 0.18s linear;
}

/* ============================================================================
   3-STEP PROGRESSIVE REGISTRATION WIZARD
   ============================================================================ */
.reg-wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 2px 8px;
}

.reg-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    transition: all 0.25s var(--spring);
}

.reg-step-pill.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(14, 165, 233, 0.2));
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
}

.reg-step-pill.done {
    border-color: var(--accent-emerald);
    color: var(--accent-emerald);
}

.reg-step-num {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.69rem;
    font-weight: 800;
}

.reg-step-pill.active .reg-step-num {
    background: var(--accent);
    color: #fff;
}

.reg-step-line {
    flex: 1;
    height: 2px;
    background: var(--glass-border-strong);
    border-radius: 99px;
}

.reg-wizard-pane {
    display: flex;
    flex-direction: column;
    gap: 13px;
    animation: viewSpringIn 0.28s var(--spring);
}

.reg-live-card,
.reg-live-profile-preview {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border-strong);
    background: rgba(8, 12, 24, 0.58);
}

.reg-live-banner {
    width: 100%;
    aspect-ratio: 10 / 3;
    min-height: 92px;
    background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 50%, var(--accent-cyan) 100%);
    background-size: cover;
    background-position: center;
}

.reg-live-row,
.reg-live-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px 12px;
}

.reg-live-avatar-wrap {
    margin-top: -28px;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--bg-deep);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reg-live-meta,
.reg-live-name-info {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    min-width: 0;
}

.reg-live-meta strong,
.reg-live-name-info strong {
    font-size: 0.94rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reg-live-meta span,
.reg-live-name-info span {
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.reg-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.file-drop-zone.compact {
    padding: 11px 10px;
    font-size: 0.78rem;
}

.theme-grid.compact {
    grid-template-columns: repeat(2, 1fr);
}

/* ============================================================================
   SHARE POST / FLIX IN CHATS MODAL & RICH SHARED POST CARD IN CHAT BUBBLES
   ============================================================================ */
.share-post-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.38);
}

.share-post-preview-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #05070f;
    flex-shrink: 0;
}

.share-targets-list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.share-target-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(128, 136, 168, 0.08);
    border: 1px solid var(--glass-border);
}

.chat-shared-post-card {
    margin-bottom: 6px;
    border-radius: 13px;
    overflow: hidden;
    background: rgba(6, 9, 18, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: transform 0.2s var(--spring), border-color 0.2s ease;
    max-width: 250px;
}

.chat-shared-post-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
}

.chat-shared-post-top,
.chat-shared-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.06);
}

.chat-shared-post-media img,
.chat-shared-post-media video {
    width: 100%;
    max-height: 185px;
    object-fit: cover;
    display: block;
}

.chat-shared-post-caption,
.chat-shared-post-body {
    padding: 8px 10px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   CLEAN 5-ITEM MOBILE BOTTOM NAVIGATION BAR & COMPACT MOBILE HEADERS
   ============================================================================ */
.bottom-nav {
    display: none;
}

.top-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-rose);
    color: #fff;
    font-size: 0.67rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.55);
}

@media (max-width: 1120px) {
    .app-shell {
        grid-template-columns: 230px minmax(0, 1fr);
    }
    .right-rail {
        display: none;
    }
}

@media (max-width: 760px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100vw;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 82px;
        overflow-x: clip;
    }
    .side-nav {
        display: none;
    }
    .stage-view,
    .hub-subview,
    .posts-stream {
        gap: 9px;
    }
    /* Ultra-Compact Mobile Top Brand Header */
    .top-brand-header {
        display: flex;
        position: sticky !important;
        top: calc(6px + env(safe-area-inset-top, 0px));
        z-index: 95;
        padding: 7px 12px;
        margin-bottom: 8px;
        border-radius: 16px;
        width: 100%;
    }
    .top-brand-header .allimal-brand-svg {
        width: 28px;
        height: 28px;
    }
    .top-brand-name {
        font-size: 1.12rem;
    }
    .top-action-btn {
        width: 33px;
        height: 33px;
    }
    .top-mini-music-bar {
        top: 56px;
        padding: 6px 10px 9px;
        margin-bottom: 8px;
        border-radius: 14px;
    }
    /* Compact Flash & Notes Strip on Mobile */
    .stories-notes-strip {
        padding: 9px 11px;
        gap: 7px;
        border-radius: 16px;
    }
    .strip-Header {
        gap: 6px;
    }
    .strip-title {
        font-size: 0.7rem;
        white-space: nowrap;
    }
    .strip-actions {
        gap: 5px;
    }
    .strip-actions .chip-btn {
        padding: 5px 9px;
        font-size: 0.71rem;
        gap: 4px;
    }
    .strip-actions .chip-btn .ico {
        width: 14px;
        height: 14px;
    }
    .stories-row {
        gap: 8px;
        padding: 6px 4px 4px;
    }
    .story-pill {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
        flex: 0 0 84px;
        gap: 4px;
    }
    .story-note-slot {
        height: 38px;
        min-height: 38px;
    }
    .story-pill .avatar-md {
        width: 46px;
        height: 46px;
        font-size: 0.92rem;
    }
    .story-note-tag {
        padding: 3px 6px;
        font-size: 0.61rem;
        border-radius: 11px;
        margin-bottom: -6px;
        max-width: 100%;
    }
    .story-note-text-line {
        max-width: 100%;
    }
    .story-note-music-line {
        font-size: 0.58rem;
        max-width: 100%;
    }
    .story-user-label {
        font-size: 0.68rem;
        max-width: 100%;
    }
    /* Compact Inline Quick Composer Card on Mobile */
    .quick-composer-card {
        padding: 9px 11px;
        gap: 7px;
        border-radius: 16px;
    }
    .quick-composer-top {
        gap: 8px;
    }
    .quick-composer-top .avatar-sm {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }
    .quick-composer-trigger {
        padding: 7px 12px;
        font-size: 0.78rem;
    }
    .quick-composer-actions {
        padding-top: 6px;
        gap: 4px;
    }
    .quick-tool-btn {
        padding: 5px 6px;
        font-size: 0.72rem;
        gap: 4px;
    }
    .quick-tool-btn .ico {
        width: 15px;
        height: 15px;
    }
    /* Compact Segmented Bars & View Headers on Mobile */
    .segmented-bar {
        padding: 3.5px;
        border-radius: 13px;
        gap: 3px;
    }
    .seg-btn {
        padding: 6px 8px;
        font-size: 0.73rem;
        border-radius: 10px;
    }
    .view-header {
        padding: 10px 13px;
        border-radius: 16px;
        gap: 8px;
    }
    .view-header h2 {
        font-size: 1.06rem;
    }
    .view-subtitle {
        font-size: 0.74rem;
    }
    .hub-card {
        padding: 12px;
        border-radius: 16px;
        gap: 9px;
    }
    .post-card {
        padding: 13px;
        gap: 10px;
        border-radius: 16px;
    }
    /* Fullscreen Flix Shell & Strict Circular Action Icons on Mobile */
    body[data-active-view="view-flix"] .top-brand-header {
        display: none;
    }
    body[data-active-view="view-flix"] .app-shell {
        padding-top: 4px;
    }
    .flix-tiktok-shell {
        height: calc(100dvh - 80px);
        min-height: 460px;
        max-height: none;
        border-radius: 20px;
    }
    .flix-rail-btn {
        width: auto;
        height: auto;
    }
    .flix-rail-icon-circle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .profile-hero {
        padding: 12px;
        gap: 11px;
        border-radius: 18px;
    }
    .profile-banner {
        height: 110px;
    }
    .profile-tabs-bar .seg-btn {
        padding: 7px 4px;
        font-size: 0.71rem;
    }
    .profile-actions-area .btn-secondary,
    .profile-actions-area .btn-primary {
        padding: 7px 11px;
        font-size: 0.77rem;
    }
    .map-board {
        grid-template-columns: 1fr;
    }
    .messages-hub {
        grid-template-columns: 1fr;
        height: auto;
    }
    .msg-Left-pane {
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        max-height: 195px;
    }
    .msg-Right-pane {
        height: 390px;
    }
    .composer-meta-row {
        grid-template-columns: 1fr;
    }

    /* ========================================================================
       LIQUID GLASS BOTTOM DOCK WITH SLIDING REFRACTIVE PILL
       ======================================================================== */
    .bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        position: fixed;
        bottom: 10px;
        left: 10px;
        right: 10px;
        z-index: 60;
        border-radius: 26px;
        padding: 6px 6px;
        background: var(--nav-dock-bg);
        backdrop-filter: blur(28px) saturate(210%);
        -webkit-backdrop-filter: blur(28px) saturate(210%);
        border: 1px solid var(--glass-border-strong);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }

    [data-theme="crystal_light"] .bottom-nav {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 242, 255, 0.88) 100%);
        border-color: rgba(99, 102, 241, 0.28);
        box-shadow:
            0 16px 36px rgba(15, 23, 42, 0.16),
            inset 0 1.5px 1px rgba(255, 255, 255, 0.95);
    }

    .dock-liquid-pill {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 0;
        width: 64px;
        border-radius: 20px;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.45), transparent 62%),
            linear-gradient(135deg, rgba(99, 102, 241, 0.34), rgba(14, 165, 233, 0.24));
        border: 1px solid rgba(255, 255, 255, 0.36);
        box-shadow:
            0 8px 22px rgba(99, 102, 241, 0.38),
            inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
            inset 0 -1.5px 3px rgba(14, 165, 233, 0.35);
        backdrop-filter: blur(16px) brightness(1.15);
        -webkit-backdrop-filter: blur(16px) brightness(1.15);
        transition:
            transform 0.46s cubic-bezier(0.22, 1.28, 0.36, 1),
            width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.24s ease;
    }

    .bnav-btn {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-secondary);
        font-size: 0.66rem;
        font-weight: 700;
        padding: 5px 2px;
        border-radius: 18px;
        background: transparent;
        transition: color 0.24s ease, transform 0.28s var(--spring);
    }

    .bnav-btn .ico {
        transition: transform 0.28s var(--spring), filter 0.28s ease;
    }

    .bnav-btn.active {
        color: var(--text-primary);
        transform: translateY(-1px);
    }

    .bnav-btn.active .ico {
        transform: scale(1.12);
        filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.65));
    }

    .bnav-fab {
        position: relative;
        z-index: 2;
        justify-self: center;
        width: 44px;
        height: 44px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--accent), #8b5cf6, var(--accent-cyan));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 22px rgba(99, 102, 241, 0.55), inset 0 1.5px 1px rgba(255, 255, 255, 0.45);
    }
}

/* Hide dock pill on desktop */
@media (min-width: 761px) {
    .dock-liquid-pill {
        display: none;
    }
}

/* ============================================================================
   CAPTIVATING WELCOME SHOWCASE & HERO LANDING SCREEN (.auth-hero-showcase)
   ============================================================================ */
.auth-showcase-wrapper {
    width: 100%;
    max-width: 1140px;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 24px;
    align-items: stretch;
    animation: modalSpringUp 0.5s var(--spring);
}

.auth-hero-showcase,
.auth-hero-pane {
    border-radius: var(--radius-xl);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.26), transparent 48%),
        radial-gradient(circle at 90% 85%, rgba(14, 165, 233, 0.2), transparent 52%),
        var(--glass-bg-elevated);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
}

.auth-hero-glow-orb {
    position: absolute;
    width: 240px;
    height: 240px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.42), rgba(14, 165, 233, 0.05) 70%);
    filter: blur(32px);
    pointer-events: none;
}

.auth-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(14, 165, 233, 0.16));
    border: 1px solid rgba(129, 140, 248, 0.48);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.auth-hero-brand-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.auth-hero-logo {
    flex-shrink: 0;
    margin-top: 2px;
}

.auth-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.7vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--text-primary) 15%, #818cf8 55%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-hero-desc {
    font-size: 0.9rem;
    line-height: 1.56;
    color: var(--text-secondary);
}

/* Live Preview Strip inside Welcome Showcase */
.auth-live-preview-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-preview-pill {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 16px;
    background: var(--surface-inset);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-specular);
}

.auth-preview-pill div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-preview-pill strong {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-primary);
}

.auth-preview-pill small {
    font-size: 0.7rem;
    color: var(--accent-cyan);
    font-weight: 600;
}

.auth-preview-spark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(14, 165, 233, 0.24));
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 2x2 Bento Grid in Welcome Showcase */
.auth-feature-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-feature-tile {
    padding: 14px 15px;
    border-radius: 18px;
    background: var(--surface-card-soft);
    border: 1px solid var(--glass-border-strong);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.28s var(--spring), border-color 0.25s ease, box-shadow 0.25s ease;
}

.auth-feature-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.52);
    box-shadow: 0 14px 30px rgba(99, 102, 241, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.auth-feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.26), rgba(14, 165, 233, 0.2));
    border: 1px solid rgba(129, 140, 248, 0.4);
    color: #a5b4fc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-feature-tile div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.auth-feature-tile strong {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--text-primary);
}

.auth-feature-tile span {
    font-size: 0.75rem;
    line-height: 1.42;
    color: var(--text-secondary);
}

.auth-showcase-wrapper .auth-card {
    max-width: 100%;
    justify-content: center;
}

/* Fixed-Color Brand Emblem Styling */
.allimal-fixed-logo {
    filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.45));
    flex-shrink: 0;
}

/* Exact 10:3 Banner Aspect Ratio on Profile Hero */
.profile-banner {
    width: 100%;
    aspect-ratio: 10 / 3;
    height: auto;
    min-height: 125px;
    max-height: 195px;
}

/* ============================================================================
   INTERACTIVE LIVE LOUNGE STAGE (SPEAKERS, MIC METER, HAND RAISE, REACTIONS & CHAT)
   ============================================================================ */
.lounge-stage-card {
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.48);
    background:
        radial-gradient(circle at 15% 10%, rgba(99, 102, 241, 0.2), transparent 50%),
        radial-gradient(circle at 85% 90%, rgba(16, 185, 129, 0.14), transparent 50%),
        var(--glass-bg-elevated);
    animation: viewSpringIn 0.34s var(--spring);
}

.lounge-stage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.lounge-stage-title {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 800;
}

.lounge-stage-section-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 6px;
}

.lounge-stage-speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 12px;
}

.lounge-stage-listeners-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lounge-speaker-tile {
    padding: 14px 10px;
    border-radius: var(--radius-lg);
    background: rgba(10, 14, 28, 0.55);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
    transition: transform 0.22s var(--spring), border-color 0.22s ease, box-shadow 0.22s ease;
}

.lounge-speaker-tile.speaking {
    border-color: var(--accent-emerald);
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.28);
}

.lounge-speaker-avatar-ring {
    position: relative;
    padding: 3px;
    border-radius: 50%;
    background: rgba(128, 136, 168, 0.25);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.lounge-speaker-tile.speaking .lounge-speaker-avatar-ring {
    background: conic-gradient(from 0deg, #10b981, #06b6d4, #6366f1, #10b981);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.55);
}

.lounge-mic-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #10b981;
    color: #fff;
    border: 2px solid var(--bg-deep);
}

.lounge-mic-badge.muted {
    background: #f43f5e;
}

.lounge-mic-badge .ico {
    width: 13px;
    height: 13px;
}

.lounge-hand-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.55);
    animation: pulseGlow 1.5s infinite;
}

.lounge-speaker-name {
    font-size: 0.81rem;
    font-weight: 700;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lounge-speaker-role {
    font-size: 0.69rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.lounge-listener-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(128, 136, 168, 0.12);
    border: 1px solid var(--glass-border);
    font-size: 0.78rem;
    font-weight: 600;
}

.lounge-floating-reactions {
    position: absolute;
    right: 22px;
    bottom: 140px;
    width: 60px;
    height: 180px;
    pointer-events: none;
    overflow: visible;
    z-index: 15;
}

.lounge-float-emoji {
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 1.65rem;
    animation: floatUpEmoji 2.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

@keyframes floatUpEmoji {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translateY(-165px) translateX(-18px) scale(0.9);
    }
}

.lounge-controls-dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(8, 12, 24, 0.62);
    border: 1px solid var(--glass-border-strong);
}

.lounge-main-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lounge-ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(128, 136, 168, 0.15);
    border: 1px solid var(--glass-border-strong);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lounge-ctrl-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}

.lounge-ctrl-btn.hand-active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    color: #fff;
}

.lounge-reaction-bar {
    display: flex;
    align-items: center;
    gap: 5px;
}

.lounge-react-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--glass-border);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lounge-react-btn:hover {
    transform: translateY(-3px) scale(1.14);
    background: rgba(99, 102, 241, 0.24);
}

.lounge-live-chat-box {
    border-radius: var(--radius-lg);
    background: rgba(8, 12, 24, 0.48);
    border: 1px solid var(--glass-border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lounge-chat-messages {
    max-height: 165px;
    min-height: 75px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.lounge-chat-msg {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.82rem;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.lounge-chat-msg strong {
    color: var(--accent-cyan);
    font-weight: 700;
    flex-shrink: 0;
}

.lounge-chat-form {
    display: flex;
    gap: 8px;
}

/* ============================================================================
   DRILL-DOWN MENU SETTINGS MODAL (ANA MENÜ -> ALT KATEGORİLER)
   ============================================================================ */
.settings-modal-window {
    max-width: 580px;
}

.settings-drill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.settings-header-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(129, 140, 248, 0.4);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-header-sub {
    display: block;
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.42);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: all 0.22s var(--spring);
}

.settings-back-btn:hover {
    background: rgba(99, 102, 241, 0.28);
    transform: translateX(-2px);
}

.settings-back-btn .ico {
    width: 16px;
    height: 16px;
}

.settings-main-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: viewSpringIn 0.24s var(--spring);
}

.settings-menu-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(10, 14, 28, 0.48) 100%);
    border: 1px solid var(--glass-border-strong);
    text-align: left;
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.24s var(--spring), border-color 0.24s ease, background 0.24s ease;
}

.settings-menu-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(14, 165, 233, 0.1) 100%);
}

.settings-menu-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
}

.settings-menu-card-icon .ico {
    width: 21px;
    height: 21px;
}

.settings-menu-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.settings-menu-card-text strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
}

.settings-menu-card-text span {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.settings-menu-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.22s var(--spring), color 0.22s ease;
}

.settings-menu-card:hover .settings-menu-chevron {
    transform: translateX(3px);
    color: var(--accent-cyan);
}

.settings-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
}

.settings-tab-pane {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: viewSpringIn 0.24s var(--spring);
}

/* ============================================================================
   CUSTOM ALLIMAL GLASS VIDEO PLAYER FOR FEED VIDEOS (.allimal-video-player)
   ============================================================================ */
.allimal-video-player {
    position: relative;
    width: 100%;
    min-height: 220px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #03050c;
    border: 1px solid var(--glass-border-strong);
    user-select: none;
}

.allimal-feed-video,
.allimal-video-player .avp-video-el {
    width: 100%;
    max-height: 540px;
    display: block;
    object-fit: contain;
    background: #03050c;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.avp-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(8, 12, 24, 0.68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 6;
    transition: opacity 0.2s ease, transform 0.24s var(--spring);
}

.allimal-video-player.playing .avp-center-play,
.avp-center-play.is-playing {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(0.72);
}

.avp-center-play .ico {
    width: 26px;
    height: 26px;
}

.avp-music-sync-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.38);
    color: #e0f2fe;
    font-size: 0.72rem;
    font-weight: 700;
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.28s ease;
}

.avp-controls-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 14px;
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.allimal-video-player.playing.controls-idle .avp-controls-bar {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px);
}

.allimal-video-player.playing.controls-idle .avp-music-sync-pill {
    opacity: 0.22;
}

.avp-ctrl-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

.avp-ctrl-btn:hover {
    background: var(--accent);
}

.avp-ctrl-btn .ico {
    width: 15px;
    height: 15px;
}

.avp-seek-slider {
    flex: 1;
    height: 5px;
    min-width: 60px;
}

.avp-time-label {
    font-size: 0.71rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================================
   COMPOSER AUDIO MIXER (SONG VOLUME & VIDEO VOLUME SLIDERS)
   ============================================================================ */
.post-audio-mix-box {
    margin: 8px 0 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audio-mix-slider-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.audio-mix-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.audio-mix-label-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.audio-mix-label-row .ico {
    width: 15px;
    height: 15px;
    color: var(--accent-cyan);
}

.audio-mix-label-row strong {
    color: var(--accent-cyan);
    font-size: 0.76rem;
}

.audio-mix-hint {
    font-size: 0.71rem;
    color: var(--text-secondary);
    line-height: 1.38;
}

/* Compact Feed Density Option */
body[data-feed-density="compact"] .post-card {
    padding: 12px 15px;
    gap: 8px;
}

body[data-feed-density="compact"] .posts-stream {
    gap: 10px;
}

/* Voice Recording Live Pulse Badge */
.voice-rec-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(244, 63, 94, 0.16);
    border: 1px solid rgba(244, 63, 94, 0.48);
    color: #fda4af;
    font-size: 0.82rem;
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
}

.rec-dot-red {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f43f5e;
    animation: pulseGlow 1s infinite;
}

/* Desktop defaults for mobile-only auth hero elements */
.auth-card-glow-orb,
.auth-mobile-welcome-pill,
.auth-mobile-hero-slogan,
.auth-mobile-feature-strip {
    display: none;
}

@media (max-width: 920px) {
    .auth-gate {
        min-height: 100dvh;
        align-items: flex-start;
        justify-content: center;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .auth-showcase-wrapper {
        display: flex;
        flex-direction: column;
        max-width: 450px;
        width: 100%;
        gap: 12px;
    }

    /* 1. AUTH CARD FIRST AT THE VERY TOP ON MOBILE (ZERO SCROLL TO LOGIN/REGISTER!) */
    .auth-showcase-wrapper .auth-card {
        order: 1;
        position: relative;
        overflow: hidden;
        padding: 20px 18px 20px;
        gap: 13px;
        border-radius: 26px;
        background:
            radial-gradient(circle at 50% -12%, rgba(99, 102, 241, 0.28), transparent 56%),
            radial-gradient(circle at 92% 96%, rgba(14, 165, 233, 0.16), transparent 52%),
            var(--glass-bg-elevated) !important;
        border: 1px solid var(--glass-border-strong) !important;
        box-shadow: var(--shadow-soft) !important;
    }

    .auth-card-glow-orb {
        display: block;
        position: absolute;
        width: 180px;
        height: 180px;
        top: -70px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.45), rgba(14, 165, 233, 0.05) 70%);
        filter: blur(26px);
        pointer-events: none;
    }

    .auth-mobile-welcome-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        align-self: center;
        padding: 4px 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(14, 165, 233, 0.15));
        border: 1px solid rgba(129, 140, 248, 0.48);
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        color: var(--text-primary);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.26);
        position: relative;
        z-index: 1;
    }

    .auth-card .auth-brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        position: relative;
        z-index: 1;
    }

    .auth-main-logo-wrap .allimal-brand-svg {
        width: 56px;
        height: 56px;
        filter: drop-shadow(0 8px 22px rgba(99, 102, 241, 0.62));
    }

    .auth-brand-Titles {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .auth-card .brand-name {
        font-size: 1.85rem;
        line-height: 1.08;
    }

    .auth-card .brand-tagline {
        font-size: 0.77rem;
        font-weight: 700;
        color: var(--accent-cyan);
    }

    .auth-mobile-hero-slogan {
        display: block;
        font-size: 0.78rem;
        line-height: 1.36;
        color: var(--text-secondary);
        max-width: 315px;
        margin-top: 2px;
    }

    .auth-mobile-feature-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        position: relative;
        z-index: 1;
    }

    .auth-mobile-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 9px;
        border-radius: 12px;
        background: var(--surface-inset);
        border: 1px solid var(--glass-border-strong);
        box-shadow: var(--glass-specular);
        font-size: 0.71rem;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
    }

    .auth-mobile-chip .ico {
        width: 14px;
        height: 14px;
        color: var(--accent-cyan);
    }

    .auth-card .auth-tabs {
        padding: 5px;
        border-radius: 15px;
        background: var(--surface-inset);
        border: 1px solid var(--glass-border-strong);
        box-shadow: var(--glass-specular);
        position: relative;
        z-index: 1;
    }

    .auth-card .auth-tab {
        padding: 10px 12px;
        font-size: 0.9rem;
        font-weight: 800;
        border-radius: 11px;
    }

    /* 2. COMPACT SECONDARY SHOWCASE BELOW AUTH CARD ON MOBILE */
    .auth-hero-showcase,
    .auth-hero-pane {
        order: 2;
        padding: 12px;
        gap: 8px;
        border-radius: 22px;
    }

    .auth-hero-showcase .auth-hero-badge,
    .auth-hero-showcase .auth-hero-brand-row,
    .auth-hero-showcase .auth-live-preview-strip {
        display: none !important;
    }

    .auth-feature-bento {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .auth-feature-tile {
        padding: 10px 11px;
        border-radius: 15px;
        flex-direction: column;
        gap: 6px;
    }

    .auth-feature-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        border-radius: 10px;
    }

    .auth-feature-icon .ico {
        width: 16px;
        height: 16px;
    }

    .auth-feature-tile strong {
        font-size: 0.76rem;
        line-height: 1.22;
    }

    .auth-feature-tile span {
        font-size: 0.67rem;
        line-height: 1.3;
    }
}

/* Lounge Stage HTML Class Aliases */
.lounge-reactions-layer {
    position: absolute;
    right: 22px;
    bottom: 140px;
    width: 60px;
    height: 180px;
    pointer-events: none;
    overflow: visible;
    z-index: 15;
}

.lounge-stage-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.lounge-stage-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.lounge-stage-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lounge-section-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-cyan);
    margin-bottom: 10px;
}

.lounge-participants-stage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 12px;
}

.lounge-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(8, 12, 24, 0.62);
    border: 1px solid var(--glass-border-strong);
}

.lounge-primary-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lounge-emoji-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lounge-emoji-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lounge-emoji-btn:hover {
    transform: translateY(-3px) scale(1.14);
    background: rgba(99, 102, 241, 0.25);
}

.lounge-chat-box {
    border-radius: var(--radius-lg);
    background: rgba(8, 12, 24, 0.48);
    border: 1px solid var(--glass-border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lounge-chat-stream {
    max-height: 165px;
    min-height: 75px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.lounge-mic-meter {
    width: 24px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.lounge-mic-meter::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--mic-level, 0%);
    background: #ffffff;
    border-radius: 99px;
    transition: width 0.08s linear;
}

/* ============================================================================
   ZERO AUTH-SCREEN FLASH WHEN LOGGED IN (html.is-authenticated)
   ============================================================================ */
html.is-authenticated #authGate {
    display: none !important;
}

html.is-authenticated #appShell.hidden {
    display: grid !important;
}

/* ============================================================================
   REGISTRATION STEP 3: IMPORTANT SETTINGS & "CAN CHANGE LATER" NOTICE BANNER
   ============================================================================ */
.reg-settings-notice-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(14, 165, 233, 0.14));
    border: 1px solid rgba(129, 140, 248, 0.42);
    color: var(--text-primary);
    font-size: 0.76rem;
    line-height: 1.36;
}

.reg-settings-notice-banner .ico {
    width: 18px;
    height: 18px;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.reg-step3-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* ============================================================================
   NEXT-GEN SOHBET (CHAT BUBBLES, PER-CHAT THEMES, REACTIONS, REPLIES, PINS)
   ============================================================================ */
.chat-peer-search-box {
    margin: 8px 10px 4px;
    padding: 6px 11px;
    border-radius: 12px;
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-peer-search-box .ico {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
}

.chat-peer-search-box input {
    border: none !important;
    background: transparent !important;
    padding: 2px 0 !important;
    font-size: 0.82rem !important;
    box-shadow: none !important;
}

.peer-row {
    position: relative;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: all 0.2s var(--spring);
}

.peer-row.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(14, 165, 233, 0.12));
    border-color: rgba(99, 102, 241, 0.42);
}

.peer-row-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.peer-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.peer-row-top strong {
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peer-row-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peer-online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.75);
    flex-shrink: 0;
}

.chat-top-bar {
    padding: 10px 14px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(8, 12, 24, 0.35);
}

.chat-top-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.chat-mobile-back-btn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-peer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-peer-title-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-peer-title-col strong {
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-peer-status-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71rem;
    color: var(--text-secondary);
}

.chat-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.chat-hdr-btn {
    width: 33px;
    height: 33px;
}

.chat-vanish-pill {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid var(--glass-border);
    gap: 6px;
}

.chat-vanish-pill .ios-switch-slider {
    width: 36px;
    height: 20px;
}

.chat-vanish-pill .ios-switch-slider::after {
    width: 14px;
    height: 14px;
}

.chat-vanish-pill .ios-switch-input:checked + .ios-switch-slider::after {
    transform: translateX(16px);
}

.chat-vanish-pill .ios-switch-text {
    font-size: 0.72rem;
}

.chat-settings-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(14, 165, 233, 0.16));
    border: 1px solid rgba(129, 140, 248, 0.45);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chat-settings-trigger-btn .ico {
    width: 15px;
    height: 15px;
    color: var(--accent-cyan);
}

.chat-settings-trigger-btn:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}

/* In-Chat Search Drawer & Pinned Banner */
.chat-search-drawer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface-inset);
    border-bottom: 1px solid var(--glass-border);
}

.chat-search-drawer input {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
}

.chat-pinned-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(99, 102, 241, 0.12));
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 0.76rem;
}

.chat-pinned-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.chat-pinned-ico {
    color: #fbbf24;
    display: inline-flex;
}

.chat-pinned-ico .ico {
    width: 15px;
    height: 15px;
}

.chat-pinned-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-pinned-text strong {
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fbbf24;
}

.chat-pinned-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

/* Rich Chat Stream & Per-Chat Theme Variables */
.msg-Right-pane {
    --chat-bubble-mine: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #0ea5e9 100%);
    --chat-bubble-accent: #818cf8;
    --chat-bubble-glow: rgba(99, 102, 241, 0.32);
    height: 600px;
}

.msg-Right-pane[data-chat-theme="emerald"] {
    --chat-bubble-mine: linear-gradient(135deg, #10b981 0%, #059669 60%, #0d9488 100%);
    --chat-bubble-accent: #34d399;
    --chat-bubble-glow: rgba(16, 185, 129, 0.32);
}

.msg-Right-pane[data-chat-theme="rose"] {
    --chat-bubble-mine: linear-gradient(135deg, #f43f5e 0%, #e11d48 55%, #9333ea 100%);
    --chat-bubble-accent: #fb7185;
    --chat-bubble-glow: rgba(244, 63, 94, 0.34);
}

.msg-Right-pane[data-chat-theme="cyber_cyan"] {
    --chat-bubble-mine: linear-gradient(135deg, #06b6d4 0%, #0284c7 55%, #3b82f6 100%);
    --chat-bubble-accent: #38bdf8;
    --chat-bubble-glow: rgba(6, 182, 212, 0.34);
}

.msg-Right-pane[data-chat-theme="gold"] {
    --chat-bubble-mine: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #ea580c 100%);
    --chat-bubble-accent: #fbbf24;
    --chat-bubble-glow: rgba(245, 158, 11, 0.32);
}

.msg-Right-pane[data-chat-theme="amoled"] {
    --chat-bubble-mine: linear-gradient(135deg, #27272a 0%, #18181b 65%, #3f3f46 100%);
    --chat-bubble-accent: #a1a1aa;
    --chat-bubble-glow: rgba(255, 255, 255, 0.14);
}

.chat-messages-box {
    padding: 14px 14px;
    gap: 10px;
    background:
        radial-gradient(circle at 85% 15%, var(--chat-bubble-glow), transparent 48%),
        transparent;
}

.msg-date-divider {
    align-self: center;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(128, 136, 168, 0.14);
    border: 1px solid var(--glass-border);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 4px 0;
}

.msg-row-wrap {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    position: relative;
    gap: 3px;
}

.msg-row-wrap.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.msg-row-wrap.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.msg-bubble {
    max-width: 100%;
    padding: 9px 13px;
    border-radius: 18px;
    font-size: 0.87rem;
    line-height: 1.42;
    position: relative;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    word-break: break-word;
}

.msg-bubble.mine {
    background: var(--chat-bubble-mine);
    color: #ffffff;
    border-bottom-right-radius: 5px;
    box-shadow: 0 8px 22px -4px var(--chat-bubble-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.msg-bubble.theirs {
    background: var(--surface-bubble-theirs);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    border-bottom-left-radius: 5px;
}

[data-theme="crystal_light"] .msg-bubble.theirs {
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
}

.msg-bubble.pinned-highlight {
    border: 1px solid rgba(251, 191, 36, 0.65);
}

/* Privacy Shield Blur Mode */
.msg-Right-pane[data-privacy-blur="true"] .msg-bubble-body-text {
    filter: blur(6px);
    transition: filter 0.2s ease;
    cursor: pointer;
}

.msg-Right-pane[data-privacy-blur="true"] .msg-bubble:hover .msg-bubble-body-text,
.msg-Right-pane[data-privacy-blur="true"] .msg-bubble.unblurred .msg-bubble-body-text {
    filter: none;
}

/* Reply Quote Block Inside Chat Bubble */
.msg-reply-quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 9px;
    margin-bottom: 5px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid rgba(255, 255, 255, 0.75);
    font-size: 0.74rem;
    cursor: pointer;
}

.msg-reply-quote strong {
    font-size: 0.7rem;
    color: var(--accent-cyan);
}

.msg-reply-quote span {
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.msg-media-attachment {
    margin: 4px 0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 260px;
}

.msg-media-attachment img,
.msg-media-attachment video {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.msg-footer-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    align-self: flex-end;
    margin-top: 2px;
}

.msg-read-ticks {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: -1px;
    opacity: 0.75;
}

.msg-read-ticks.seen {
    color: #7dd3fc;
    opacity: 1;
}

/* Message Quick Action Bar (Reply, React, Pin, Delete) */
.msg-actions-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--glass-bg-elevated);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s var(--spring);
    z-index: 8;
}

.msg-row-wrap:hover .msg-actions-toolbar,
.msg-row-wrap.actions-open .msg-actions-toolbar {
    opacity: 1;
    pointer-events: auto;
}

.msg-act-emoji-btn,
.msg-act-tool-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.msg-act-emoji-btn:hover,
.msg-act-tool-btn:hover {
    background: rgba(99, 102, 241, 0.16);
    transform: scale(1.16);
}

.msg-act-tool-btn .ico {
    width: 13px;
    height: 13px;
}

/* Reaction Pills Under Bubble */
.msg-reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.msg-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-inset);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.msg-reaction-chip.reacted {
    background: rgba(99, 102, 241, 0.28);
    border-color: var(--accent);
}

/* Reply Preview Bar & Quick Emoji Drawer Above Input */
.chat-reply-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(99, 102, 241, 0.14);
    border-top: 1px solid rgba(99, 102, 241, 0.35);
    font-size: 0.76rem;
}

.chat-reply-preview-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.chat-reply-preview-left .ico {
    width: 15px;
    height: 15px;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.chat-reply-preview-left div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-reply-preview-left strong {
    font-size: 0.72rem;
    color: var(--accent-cyan);
}

.chat-reply-preview-left span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}

.chat-emoji-drawer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 6px 10px;
    background: var(--surface-inset);
    border-top: 1px solid var(--glass-border);
    overflow-x: auto;
}

.chat-quick-emoji-btn {
    font-size: 1.15rem;
    padding: 4px 6px;
    border-radius: 8px;
}

.chat-quick-emoji-btn:hover {
    background: rgba(99, 102, 241, 0.14);
    transform: scale(1.18);
}

.chat-input-row {
    padding: 9px 11px;
    gap: 7px;
    background: var(--surface-card-soft);
}

.chat-compose-tool {
    width: 35px;
    height: 35px;
}

.chat-compose-tool.recording {
    background: rgba(244, 63, 94, 0.28);
    border-color: #f43f5e;
    color: #fda4af;
    animation: pulseGlow 1.2s infinite;
}

.chat-input-field-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.chat-input-field-wrap input {
    padding: 9px 13px !important;
    font-size: 0.86rem !important;
    border-radius: 999px !important;
}

.chat-voice-rec-badge {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(244, 63, 94, 0.22);
    border: 1px solid rgba(244, 63, 94, 0.5);
    color: #fda4af;
    font-size: 0.72rem;
}

/* ============================================================================
   PER-CHAT DEDICATED SETTINGS MODAL (#modalChatSettings)
   ============================================================================ */
.chat-settings-peer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(129, 140, 248, 0.36);
}

.chat-setting-explain {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.38;
}

.chat-theme-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.chat-theme-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(128, 136, 168, 0.1);
    border: 1px solid var(--glass-border);
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chat-theme-pill.active {
    background: rgba(99, 102, 241, 0.24);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

/* ============================================================================
   MOBILE COMPACT UI, FLUSH-TO-BOTTOM LIQUID GLASS DOCK & MOBILE CHAT SWITCHING
   ============================================================================ */
@media (max-width: 760px) {
    .app-shell {
        padding: calc(6px + env(safe-area-inset-top, 0px)) 6px 76px;
    }

    .main-stage {
        padding-bottom: 78px;
    }

    /* Flush-to-Bottom Extended Liquid Glass Dock ("dock tam alta uzat alttan çıksın") */
    .bottom-nav {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 22px 22px 0 0 !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--nav-dock-bg) !important;
        backdrop-filter: blur(30px) saturate(215%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(215%) !important;
        border-top: 1px solid var(--glass-border-strong) !important;
        box-shadow: var(--shadow-soft) !important;
    }

    [data-theme="crystal_light"] .bottom-nav {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 255, 0.98) 100%) !important;
        border-top: 1px solid rgba(99, 102, 241, 0.28) !important;
    }

    .dock-liquid-pill {
        top: 5px !important;
        bottom: auto !important;
        height: 46px !important;
        border-radius: 16px !important;
    }

    .bnav-btn {
        height: 46px;
        padding: 3px 2px;
        font-size: 0.63rem;
        gap: 1px;
    }

    .bnav-btn .ico {
        width: 19px;
        height: 19px;
    }

    .bnav-fab {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    /* Compact Wide Modals & Settings Menu on Mobile ("ayarlar menüsü dar duruyor biraz kompakt yap") */
    .modal-backdrop {
        padding: 8px;
        align-items: flex-end;
    }

    .modal-window,
    .settings-modal-window {
        width: 100%;
        max-width: 100%;
        padding: 14px 13px;
        border-radius: 22px 22px 16px 16px;
        gap: 11px;
        max-height: 88dvh;
    }

    .settings-main-menu-grid {
        gap: 7px;
    }

    .settings-menu-card {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 14px;
    }

    .settings-menu-card-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-radius: 10px;
    }

    .settings-menu-card-icon .ico {
        width: 18px;
        height: 18px;
    }

    .settings-menu-card-text {
        gap: 1px;
    }

    .settings-menu-card-text strong {
        font-size: 0.84rem;
    }

    .settings-menu-card-text span {
        font-size: 0.71rem;
        line-height: 1.25;
    }

    .settings-row {
        padding: 4px 0;
        gap: 8px;
    }

    .settings-row-info strong {
        font-size: 0.81rem;
    }

    .settings-row-info small {
        font-size: 0.69rem;
        line-height: 1.28;
    }

    .chat-theme-swatches {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Mobile Full-Height Chat Switching (List <-> Active Conversation) */
    .messages-hub {
        min-height: calc(100dvh - 134px);
        border-radius: 18px;
    }

    .messages-hub[data-mobile-chat-open="false"] .msg-Left-pane {
        display: flex;
        max-height: none;
        height: calc(100dvh - 134px);
        border-bottom: none;
    }

    .messages-hub[data-mobile-chat-open="false"] .msg-Right-pane {
        display: none;
    }

    .messages-hub[data-mobile-chat-open="true"] .msg-Left-pane {
        display: none;
    }

    .messages-hub[data-mobile-chat-open="true"] .msg-Right-pane {
        display: flex;
        height: calc(100dvh - 134px);
    }

    .chat-mobile-back-btn {
        display: inline-flex !important;
    }

    .chat-settings-trigger-btn span:last-child {
        display: none;
    }

    .chat-settings-trigger-btn {
        padding: 7px 9px;
    }

    .msg-row-wrap {
        max-width: 88%;
    }
}

/* ============================================================================
   UI-WIDE SUBTLE LIQUID GLASS HARMONY & SETTINGS MENU CLIPPING FIX
   ============================================================================ */
.glass-panel,
.post-card,
.stories-notes-strip,
.quick-composer-card,
.rail-card,
.messages-hub {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur, 26px)) saturate(195%);
    -webkit-backdrop-filter: blur(var(--glass-blur, 26px)) saturate(195%);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
}

.modal-window,
.modal-dialog {
    background: var(--glass-bg-elevated);
    backdrop-filter: blur(var(--glass-blur, 26px)) saturate(195%);
    -webkit-backdrop-filter: blur(var(--glass-blur, 26px)) saturate(195%);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
}

[data-theme="crystal_light"] .glass-panel,
[data-theme="crystal_light"] .post-card,
[data-theme="crystal_light"] .stories-notes-strip,
[data-theme="crystal_light"] .quick-composer-card,
[data-theme="crystal_light"] .rail-card,
[data-theme="crystal_light"] .messages-hub,
[data-theme="crystal_light"] .modal-window,
[data-theme="crystal_light"] .modal-dialog {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 245, 255, 0.91) 100%);
    border: 1px solid rgba(99, 102, 241, 0.22);
    box-shadow:
        0 14px 32px -10px rgba(30, 41, 59, 0.12),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95);
}

.segmented-bar {
    background: var(--surface-card-soft);
    backdrop-filter: blur(22px) saturate(190%);
    -webkit-backdrop-filter: blur(22px) saturate(190%);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
}

.seg-btn.active {
    background:
        radial-gradient(120% 100% at 30% 15%, rgba(255, 255, 255, 0.28) 0%, transparent 65%),
        linear-gradient(135deg, rgba(99, 102, 241, 0.38) 0%, rgba(14, 165, 233, 0.24) 100%);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
        0 6px 16px -4px rgba(99, 102, 241, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.44);
}

/* Fix Settings Main Menu Top/Side Border Clipping ("ayarlar menüsünde kesik oluyor böyle") */
.settings-modal-body {
    padding: 6px 4px 10px 4px !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.settings-main-menu-grid {
    padding: 6px 4px 12px 4px !important;
    margin: 0 !important;
}

.settings-menu-card {
    position: relative;
    background: var(--surface-card-soft);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
    margin: 0;
}

.settings-menu-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
}

/* ============================================================================
   CHANNELS EXPLAINER, FILTER TABS, JOIN/HIDE BUTTONS & RELEVANT PEERS SECTIONS
   ============================================================================ */
.channels-info-card {
    margin: 8px 10px 4px;
    padding: 10px 12px;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(99, 102, 241, 0.16) 0%, rgba(14, 165, 233, 0.09) 100%);
    border: 1px solid rgba(129, 140, 248, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.channels-info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-primary);
}

.btn-xs {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
    gap: 4px !important;
}

.channels-info-desc {
    font-size: 0.72rem;
    line-height: 1.36;
    color: var(--text-secondary);
    margin: 0;
}

.channels-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 3px;
    border-radius: 11px;
    background: var(--surface-inset);
    border: 1px solid var(--glass-border);
}

.channel-filter-pill {
    padding: 5px 6px;
    border-radius: 8px;
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    transition: all 0.2s var(--spring);
}

.channel-filter-pill.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.42), rgba(14, 165, 233, 0.28));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.32);
}

.peer-section-divider {
    padding: 8px 10px 4px;
    font-size: 0.69rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.peer-rel-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.18);
    border: 1px solid rgba(129, 140, 248, 0.32);
    color: var(--text-primary);
    flex-shrink: 0;
}

.channel-row-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 11px;
    border-radius: 15px;
    background: rgba(128, 136, 168, 0.07);
    border: 1px solid var(--glass-border);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s var(--spring);
}

.channel-row-card:hover {
    background: rgba(128, 136, 168, 0.14);
    border-color: rgba(129, 140, 248, 0.35);
}

.channel-row-card.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(14, 165, 233, 0.14));
    border-color: rgba(129, 140, 248, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.channel-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.channel-row-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--glass-border);
}

.channel-pill-btn {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(128, 136, 168, 0.16);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
}

.channel-pill-btn.join-cta {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.38), rgba(14, 165, 233, 0.28));
    border-color: rgba(129, 140, 248, 0.5);
    color: #fff;
}

.channel-pill-btn.joined-state {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.4);
    color: var(--accent-emerald);
}

/* ============================================================================
   LOCK OUTER PAGE SCROLL IN CHAT VIEW ("chatte scroll yapılmasın")
   ============================================================================ */
body[data-active-view="view-messages"] {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body[data-active-view="view-messages"] .app-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

body[data-active-view="view-messages"] .main-stage {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

body[data-active-view="view-messages"] #view-messages.stage-view.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body[data-active-view="view-messages"] .messages-hub {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100dvh - 88px) !important;
    max-height: calc(100dvh - 88px) !important;
    overflow: hidden !important;
}

/* PC Full-Screen Edge-to-Edge Layout & Polished Chat */
@media (min-width: 761px) {
    .app-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        grid-template-columns: 270px minmax(0, 1fr) 340px !important;
        gap: 18px !important;
    }

    body[data-active-view="view-messages"] .app-shell {
        grid-template-columns: 270px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-active-view="view-messages"] .right-rail {
        display: none !important;
    }

    body[data-active-view="view-messages"] .main-stage {
        grid-column: 2 / -1 !important;
        width: 100% !important;
    }

    body[data-active-view="view-messages"] .messages-hub {
        grid-template-columns: 340px minmax(0, 1fr) !important;
        height: calc(100dvh - 96px) !important;
        max-height: calc(100dvh - 96px) !important;
        border-radius: 24px !important;
        box-shadow: var(--shadow-soft) !important;
    }

    .chat-mobile-back-btn {
        display: none !important;
    }
}

@media (min-width: 761px) and (max-width: 1120px) {
    .app-shell {
        grid-template-columns: 230px minmax(0, 1fr) !important;
    }
}

.msg-Left-pane,
.msg-Right-pane,
.msg-list-section {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.msg-Left-pane {
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface-card-soft);
}

.msg-Right-pane {
    display: flex !important;
    flex-direction: column !important;
    background:
        radial-gradient(circle at 82% 14%, var(--chat-bubble-glow, rgba(99, 102, 241, 0.18)), transparent 46%),
        radial-gradient(circle at 18% 86%, rgba(14, 165, 233, 0.09), transparent 45%),
        var(--surface-inset);
}

.msg-list-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.msg-list-section.hidden {
    display: none !important;
}

#dmUsersList,
#channelsScrollList,
#chatMessagesStream {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

#chatMessagesStream {
    padding: 18px 20px !important;
    gap: 12px !important;
}

.chat-top-bar {
    padding: 12px 18px !important;
    background: var(--surface-card-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-border-strong);
}

.chat-input-bar {
    padding: 12px 16px !important;
    background: var(--surface-card-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--glass-border-strong);
}

.channels-info-card {
    padding: 8px 10px !important;
    margin: 6px 8px 2px !important;
    border-radius: 14px !important;
}

.channels-info-title {
    margin-bottom: 6px !important;
    font-size: 0.78rem !important;
}

@media (max-width: 760px) {
    body[data-active-view="view-messages"] .messages-hub,
    body[data-active-view="view-messages"] .messages-hub[data-mobile-chat-open="false"] .msg-Left-pane,
    body[data-active-view="view-messages"] .messages-hub[data-mobile-chat-open="true"] .msg-Right-pane {
        height: calc(100dvh - 126px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 126px - env(safe-area-inset-bottom, 0px)) !important;
        min-height: 0 !important;
    }
}

/* ============================================================================
   LOCK OUTER PAGE SCROLL ON FLIX VIEW (ONLY VIDEOS SCROLL)
   ============================================================================ */
html:has(body[data-active-view="view-flix"]),
body[data-active-view="view-flix"] {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body[data-active-view="view-flix"] .app-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

body[data-active-view="view-flix"] .main-stage {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

body[data-active-view="view-flix"] #view-flix.stage-view.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body[data-active-view="view-flix"] .flix-vertical-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100dvh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
}

@media (max-width: 760px) {
    body[data-active-view="view-flix"] .flix-vertical-shell {
        height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================================================
   RIGHT-CLICK FLOATING POPUP ON CHAT BUBBLES (NO HOVER POPUP)
   ============================================================================ */
.msg-bubble {
    position: relative;
    cursor: default;
    border-radius: 18px;
    padding: 10px 14px;
    max-width: min(74%, 540px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msg-bubble.mine {
    border-bottom-right-radius: 6px;
    box-shadow: 0 10px 26px var(--chat-bubble-glow, rgba(99, 102, 241, 0.26)), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.msg-bubble.theirs {
    border-bottom-left-radius: 6px;
    background: var(--surface-bubble-theirs);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
}

.msg-bubble.actions-open {
    z-index: 40;
    box-shadow: 0 0 0 2px var(--chat-bubble-accent, #818cf8), 0 14px 32px rgba(0, 0, 0, 0.35);
}

.msg-quick-actions {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--glass-bg-elevated);
    backdrop-filter: blur(20px) saturate(190%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    border: 1px solid var(--glass-border-strong);
    box-shadow: var(--shadow-soft);
    width: max-content;
    max-width: 92vw;
    white-space: nowrap;
    z-index: 60;
    animation: chatPopupIn 0.16s var(--spring);
}

.msg-bubble.mine .msg-quick-actions {
    left: auto;
    right: 0;
}

/* First message near top of container opens popup below if needed */
.msg-bubble:first-child .msg-quick-actions {
    bottom: auto;
    top: calc(100% + 7px);
}

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

.msg-bubble.actions-open .msg-quick-actions {
    display: inline-flex;
}

.msg-quick-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    color: var(--text-primary);
    background: transparent;
    transition: transform 0.16s var(--spring), background 0.16s ease;
}

.msg-quick-btn:hover {
    background: rgba(99, 102, 241, 0.18);
    transform: scale(1.18);
}

.msg-quick-btn .ico {
    width: 14px;
    height: 14px;
}

.msg-body-text {
    font-size: 0.88rem;
    line-height: 1.42;
    word-break: break-word;
}

.msg-Right-pane[data-privacy-blur="true"] .msg-body-text {
    filter: blur(6px);
    transition: filter 0.2s ease;
}

.msg-Right-pane[data-privacy-blur="true"] .msg-bubble:hover .msg-body-text,
.msg-Right-pane[data-privacy-blur="true"] .msg-bubble.actions-open .msg-body-text {
    filter: none;
}

.msg-reactions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.msg-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-inset);
    border: 1px solid var(--glass-border-strong);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.msg-reaction-pill.reacted-by-me {
    background: rgba(99, 102, 241, 0.32);
    border-color: var(--accent);
}

.msg-meta-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    align-self: flex-end;
    margin-top: 2px;
    font-size: 0.68rem;
    opacity: 0.86;
}

.msg-meta-row .ico {
    width: 11px;
    height: 11px;
}

.msg-read-receipt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.67rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.82);
}

.msg-read-receipt.is-read {
    color: #7dd3fc;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

/* ============================================================================
   TYPING INDICATOR, ONLINE STATUS BADGE & FLASH/NOTE HOLDER BUBBLE
   ============================================================================ */
.chat-typing-floating-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--surface-inset);
    border-top: 1px solid rgba(56, 189, 248, 0.28);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38bdf8;
    animation: pulseGlow 1s infinite ease-in-out;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.story-note-tag.story-note-placeholder {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(14, 165, 233, 0.18));
    border: 1px dashed rgba(129, 140, 248, 0.65);
    color: var(--text-primary);
    padding: 4px 9px;
}

.story-ring-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.story-my-add-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #ffffff;
    border: 2px solid var(--bg-deep);
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    z-index: 4;
}

/* ============================================================================
   INTERACTIVE AVATAR & BANNER CROPPER MODAL + NOTE MUSIC CLIP SELECTOR
   ============================================================================ */
.cropper-modal-dialog {
    max-width: 480px !important;
    width: 94vw !important;
}

.cropper-hint-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 10px;
    text-align: center;
}

.cropper-stage-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 320px;
    background: #050811;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.cropper-stage-wrap:active {
    cursor: grabbing;
}

.cropper-stage-wrap[data-crop-kind="banner"] {
    aspect-ratio: 10 / 3;
    max-height: 190px;
}

#cropperCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.cropper-frame-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid rgba(56, 189, 248, 0.85);
    border-radius: 18px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.cropper-stage-wrap[data-crop-kind="avatar"] .cropper-frame-overlay {
    border-radius: 50%;
    margin: 8%;
    box-shadow: 0 0 0 999px rgba(4, 7, 16, 0.58);
}

.cropper-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.cropper-zoom-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.note-clip-picker {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    background: var(--surface-inset);
    border: 1px solid rgba(99, 102, 241, 0.28);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.note-clip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-primary);
}

.note-clip-dur-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.note-clip-dur-btn {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.note-clip-dur-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

/* ============================================================================
   LOSSLESS GPU COMPOSITOR ACCELERATION (100% VISUAL QUALITY, SHADOWS & BLURS)
   ============================================================================ */
.feed-card,
.post-card {
    content-visibility: visible;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ambient-mesh,
.ambient-mesh .orb {
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
}

/* ============================================================================
   RED CIRCLE UNREAD MESSAGE BADGES, IN-APP TOP CHAT POPUP & ADMIN BLUE TICK
   ============================================================================ */
#msgUnreadBadge,
#chatTabUnreadBadge,
.peer-unread-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

#msgUnreadBadge.hidden,
#mobileMsgBadge.hidden,
#chatTabUnreadBadge.hidden,
.peer-unread-badge.hidden {
    display: none !important;
}

#mobileMsgBadge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.65);
}

.msg-pane-tab[data-msg-tab="direct"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.peer-unread-badge {
    margin-left: auto;
}

/* Top-of-Site Slide-Down Chat Message Popup Banner */
.top-chat-popup-banner {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 9999;
    width: min(94vw, 440px);
    padding: 11px 14px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(22, 30, 56, 0.96) 0%, rgba(11, 16, 32, 0.98) 100%);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(99, 102, 241, 0.48);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    animation: topChatSlideIn 0.34s cubic-bezier(0.22, 1.18, 0.36, 1);
}

.top-chat-popup-banner.hidden {
    display: none !important;
}

@keyframes topChatSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-28px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.top-chat-popup-inner {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.top-chat-popup-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(99, 102, 241, 0.65);
    flex-shrink: 0;
    background: #1e293b;
}

.top-chat-popup-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.top-chat-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.top-chat-popup-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-chat-popup-verified {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.top-chat-popup-verified .ico {
    width: 15px;
    height: 15px;
}

.top-chat-popup-tag {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.top-chat-popup-preview {
    margin: 0;
    font-size: 0.8rem;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-chat-popup-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.top-chat-popup-close:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ffffff;
}

/* Admin Blue Tick Toggle Button */
#btnAdminToggleVerified {
    border-color: rgba(56, 189, 248, 0.45);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(99, 102, 241, 0.18));
    color: #e0f2fe;
}

#btnAdminToggleVerified.is-verified-active {
    border-color: rgba(244, 63, 94, 0.48);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(159, 18, 57, 0.18));
    color: #fecdd3;
}

/* ============================================================================
   PC ORIGINAL MEDIA DIMENSIONS WITH BLACK LETTERBOX / PILLARBOX PADDING
   ============================================================================ */
.allimal-video-player,
.avp-video-el {
    background: #000000 !important;
    object-fit: contain !important;
}

@media (min-width: 761px) {
    .post-media-frame,
    .allimal-video-player {
        background: #000000 !important;
        max-height: 76vh !important;
        min-height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .post-media-frame img:not(.dual-pip-overlay),
    .post-media-frame video,
    .avp-video-el,
    .allimal-feed-video {
        width: 100% !important;
        height: auto !important;
        max-height: 76vh !important;
        object-fit: contain !important;
        background: #000000 !important;
        margin: 0 auto;
    }

    .flix-tiktok-shell,
    .clips-vertical-stage,
    .flix-slide {
        background: #000000 !important;
    }

    .flix-video-el {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        background: #000000 !important;
    }
}

/* ============================================================================
   CHAT OLDER MESSAGES PAGINATION BANNER & VIDEO PREVIEW COMPOSITING
   ============================================================================ */
.chat-older-loader {
    align-self: center;
    margin: 4px auto 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.34);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.2s ease, background 0.2s ease;
    user-select: none;
}

.chat-older-loader.hidden {
    display: none !important;
}

/* ============================================================================
   MULTI-THEME SURFACE HARMONY & CRYSTAL LIGHT HIGH-CONTRAST POLISH
   ============================================================================ */
.note-music-deck,
.reg-live-card,
.reg-live-profile-preview,
.lounge-speaker-tile,
.lounge-controls-dock,
.lounge-controls-bar,
.lounge-live-chat-box,
.lounge-chat-box {
    background: var(--surface-inset);
    border-color: var(--glass-border-strong);
}

.chat-shared-post-card {
    background: var(--surface-card-soft);
    border-color: var(--glass-border-strong);
}

.chat-shared-post-caption,
.chat-shared-post-body {
    color: var(--text-primary);
}

[data-theme="crystal_light"] input:not([type="checkbox"]):not([type="range"]),
[data-theme="crystal_light"] textarea,
[data-theme="crystal_light"] .allimal-select-trigger {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(79, 70, 229, 0.24);
    color: #0f172a;
}

[data-theme="crystal_light"] input::placeholder,
[data-theme="crystal_light"] textarea::placeholder {
    color: #64748b;
}

[data-theme="crystal_light"] .btn-secondary,
[data-theme="crystal_light"] .chip-btn,
[data-theme="crystal_light"] .icon-btn,
[data-theme="crystal_light"] .top-action-btn,
[data-theme="crystal_light"] .theme-swatch-btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(79, 70, 229, 0.22);
    color: #0f172a;
}

[data-theme="crystal_light"] .accent-dot-btn.active {
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28), 0 4px 12px rgba(15, 23, 42, 0.2);
}

[data-theme="crystal_light"] .seg-btn.active {
    color: #1e1b4b;
    font-weight: 800;
}

[data-theme="crystal_light"] .top-chat-popup-banner {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 242, 255, 0.98) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

[data-theme="crystal_light"] .top-chat-popup-name {
    color: #0f172a;
}

[data-theme="crystal_light"] .top-chat-popup-preview {
    color: #475569;
}

[data-theme="crystal_light"] #btnAdminToggleVerified {
    color: #0369a1;
}

[data-theme="crystal_light"] .leaflet-map-box .leaflet-bar a,
[data-theme="crystal_light"] .leaflet-map-box .leaflet-popup-content-wrapper,
[data-theme="crystal_light"] .leaflet-map-box .leaflet-popup-tip {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0f172a !important;
}

/* ============================================================================
   LOSSLESS HARDWARE COMPOSITOR & BEAUTIFIED SPRING ANIMATIONS + UI POLISH
   (100% SHADOWS, LIQUID GLASS BLURS & AMBIENT ORBS PRESERVED)
   ============================================================================ */
:root {
    --spring: cubic-bezier(0.22, 1.16, 0.36, 1);
    --spring-bouncy: cubic-bezier(0.18, 1.28, 0.32, 1);
}

.top-brand-header,
.mobile-bottom-nav,
.post-media-frame,
.allimal-video-player,
.flix-slide,
.modal-window,
.modal-dialog,
.dock-liquid-pill,
.side-liquid-pill {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Smooth Spring Entry & Micro-Interaction Polish */
.stage-view.active {
    animation: viewSpringIn 0.36s var(--spring) both;
}

@keyframes viewSpringIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.992);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.post-card,
.hub-card,
.room-card,
.person-discover-card,
.stories-notes-strip,
.quick-composer-card {
    transition:
        transform 0.32s var(--spring),
        box-shadow 0.32s ease,
        border-color 0.28s ease,
        background-color 0.28s ease;
}

.post-card:hover,
.room-card:hover,
.person-discover-card:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow:
        0 18px 42px -10px rgba(0, 0, 0, 0.48),
        0 0 24px -6px rgba(99, 102, 241, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

[data-theme="crystal_light"] .post-card:hover,
[data-theme="crystal_light"] .room-card:hover,
[data-theme="crystal_light"] .person-discover-card:hover {
    box-shadow:
        0 16px 36px -10px rgba(30, 41, 59, 0.16),
        0 0 20px -6px rgba(99, 102, 241, 0.18),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.96);
}

.btn-primary,
.btn-secondary,
.chip-btn,
.action-pill,
.icon-btn,
.story-pill,
.bnav-btn,
.nav-item {
    transition:
        transform 0.24s var(--spring),
        box-shadow 0.24s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.2s ease;
}

.btn-primary:active,
.btn-secondary:active,
.chip-btn:active,
.action-pill:active,
.icon-btn:active,
.story-pill:active {
    transform: scale(0.95);
}

.action-pill.liked {
    color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.16) !important;
    border-color: rgba(244, 63, 94, 0.42) !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.26);
    animation: heartPopBounce 0.38s var(--spring-bouncy);
}

@keyframes heartPopBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    75% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.msg-bubble {
    animation: msgBubblePopIn 0.26s var(--spring) both;
}

@keyframes msgBubblePopIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ============================================================================
   DEDICATED CHAT SHARE PREVIEW UI CARDS FOR EVERY NON-TEXT SHARE TYPE
   (Notes, Flash Stories, Flix Clips, DuoCam, Polls, Voice Posts, Standard Posts & Media)
   ============================================================================ */
.chat-share-preview-card {
    position: relative;
    margin: 2px 0 8px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(15, 22, 42, 0.88) 0%, rgba(8, 12, 26, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    width: min(100%, 285px);
    min-width: 225px;
    cursor: pointer;
    transition: transform 0.26s var(--spring), border-color 0.24s ease, box-shadow 0.24s ease;
    color: #f8fafc;
}

[data-theme="crystal_light"] .chat-share-preview-card {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(238, 242, 255, 0.94) 100%);
    border-color: rgba(99, 102, 241, 0.28);
    color: #0f172a;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12), inset 0 1px 0 #ffffff;
}

.chat-share-preview-card:hover {
    transform: translate3d(0, -2px, 0) scale(1.01);
    border-color: rgba(56, 189, 248, 0.65);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.44), 0 0 18px rgba(56, 189, 248, 0.22);
}

.chat-share-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="crystal_light"] .chat-share-card-header {
    background: rgba(99, 102, 241, 0.07);
    border-bottom-color: rgba(99, 102, 241, 0.14);
}

.chat-share-author {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 0.77rem;
    font-weight: 800;
}

.chat-share-author-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-share-author-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-share-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.26);
    border: 1px solid rgba(129, 140, 248, 0.48);
    color: #e0e7ff;
    flex-shrink: 0;
}

[data-theme="crystal_light"] .chat-share-type-badge {
    background: rgba(99, 102, 241, 0.14);
    color: #3730a3;
}

.chat-share-type-badge .ico {
    width: 11px;
    height: 11px;
}

/* 1. SHARED NOTE / NOTE REPLY PREVIEW CARD (.chat-shared-note-card) */
.chat-shared-note-card {
    background:
        radial-gradient(circle at 88% 14%, rgba(168, 85, 247, 0.28), transparent 55%),
        radial-gradient(circle at 12% 88%, rgba(56, 189, 248, 0.22), transparent 55%),
        linear-gradient(155deg, rgba(17, 24, 48, 0.92) 0%, rgba(10, 14, 30, 0.96) 100%);
    border-color: rgba(168, 85, 247, 0.46);
}

.chat-shared-note-card .chat-share-type-badge {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.34), rgba(56, 189, 248, 0.28));
    border-color: rgba(192, 132, 252, 0.55);
    color: #f3e8ff;
}

.chat-note-thought-box {
    margin: 10px 11px 8px;
    padding: 10px 12px;
    border-radius: 14px 14px 14px 4px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.38;
    color: #ffffff;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-theme="crystal_light"] .chat-note-thought-box {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
    color: #1e1b4b;
}

.chat-note-music-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 6px 11px 9px;
    padding: 7px 9px;
    border-radius: 12px;
    background: rgba(6, 10, 22, 0.62);
    border: 1px solid rgba(56, 189, 248, 0.34);
}

[data-theme="crystal_light"] .chat-note-music-row {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(14, 165, 233, 0.35);
}

.chat-note-vinyl-disc {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, #1e1b4b 28%, #090d1a 68%);
    border: 2px solid rgba(56, 189, 248, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    animation: spinVinyl 6s linear infinite;
}

.chat-note-vinyl-disc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-note-music-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat-note-music-info strong {
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-note-music-info span {
    font-size: 0.66rem;
    color: #38bdf8;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chat-note-play-mini-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.45);
}

.chat-note-play-mini-btn .ico {
    width: 13px;
    height: 13px;
}

/* 2. SHARED FLASH STORY / FLASH REPLY PREVIEW CARD (.chat-shared-flash-card) */
.chat-shared-flash-card {
    background:
        radial-gradient(circle at 85% 15%, rgba(244, 63, 94, 0.28), transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(245, 158, 11, 0.22), transparent 55%),
        linear-gradient(155deg, rgba(24, 14, 34, 0.94) 0%, rgba(11, 10, 24, 0.96) 100%);
    border-color: rgba(244, 63, 94, 0.48);
}

.chat-shared-flash-card .chat-share-type-badge {
    background: linear-gradient(135deg, #f59e0b, #f43f5e, #8b5cf6);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.chat-flash-preview-body {
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-flash-ring-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(244, 63, 94, 0.28));
    border: 1px solid rgba(251, 113, 133, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* 3. SHARED POST / FLIX / DUOCAM / POLL / VOICE CARDS (.chat-shared-post-card) */
.chat-shared-post-card {
    max-width: 285px;
    width: 100%;
    border-radius: 16px;
}

.chat-shared-post-card.kind-clip {
    border-color: rgba(244, 63, 94, 0.46);
    background:
        radial-gradient(circle at 85% 12%, rgba(244, 63, 94, 0.24), transparent 52%),
        linear-gradient(160deg, rgba(14, 16, 34, 0.95), rgba(7, 9, 20, 0.98));
}

.chat-shared-post-card.kind-clip .chat-share-type-badge {
    background: linear-gradient(135deg, #f43f5e, #a855f7);
    border-color: rgba(253, 164, 175, 0.5);
    color: #fff;
}

.chat-shared-post-card.kind-dual .chat-share-type-badge {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
}

.chat-shared-post-card.kind-poll .chat-share-type-badge {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    color: #fff;
}

.chat-shared-post-card.kind-voice .chat-share-type-badge {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: #fff;
}

.chat-shared-post-media {
    position: relative;
    width: 100%;
    background: #040711;
    overflow: hidden;
    max-height: 215px;
}

.chat-shared-post-card.kind-clip .chat-shared-post-media {
    aspect-ratio: 9 / 12;
    max-height: 235px;
}

.chat-shared-post-media img,
.chat-shared-post-media video {
    width: 100%;
    height: 100%;
    max-height: 215px;
    object-fit: cover;
    display: block;
}

.chat-shared-post-card.kind-clip .chat-shared-post-media video {
    max-height: 235px;
}

.chat-shared-play-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.chat-shared-play-overlay .ico {
    width: 18px;
    height: 18px;
}

.chat-shared-pip-thumb {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 58px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #38bdf8;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    z-index: 3;
}

.chat-shared-music-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(56, 189, 248, 0.14);
    border-top: 1px solid rgba(56, 189, 248, 0.24);
    font-size: 0.69rem;
    font-weight: 700;
    color: #bae6fd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="crystal_light"] .chat-shared-music-strip {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}

.chat-shared-poll-preview {
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chat-shared-poll-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.73rem;
    font-weight: 700;
}

.chat-shared-voice-preview {
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-shared-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    flex: 1;
}

.chat-shared-waveform span {
    flex: 1;
    border-radius: 99px;
    background: linear-gradient(180deg, #38bdf8, #818cf8);
    min-width: 3px;
}

.chat-shared-post-body {
    padding: 8px 11px 7px;
    font-size: 0.79rem;
    line-height: 1.38;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}

.chat-share-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 11px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.69rem;
    font-weight: 800;
    color: #38bdf8;
}

[data-theme="crystal_light"] .chat-share-card-footer {
    border-top-color: rgba(99, 102, 241, 0.14);
    color: #4f46e5;
}

/* 4. FRAMED DIRECT MEDIA ATTACHMENTS IN CHAT (.chat-media-frame) */
.chat-media-frame {
    position: relative;
    margin: 2px 0 6px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(5, 8, 18, 0.65);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    max-width: 270px;
}

.chat-media-frame .msg-media-img,
.chat-media-frame .msg-media-video {
    width: 100%;
    max-height: 230px;
    object-fit: cover;
    display: block;
}

.chat-media-badge {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #f8fafc;
    font-size: 0.63rem;
    font-weight: 800;
    pointer-events: none;
    z-index: 2;
}

/* ============================================================================
   UPGRADED FLASH VIEWER MODAL (MULTI-SEGMENT, HEART BURST, LIKE PILL & REPLY)
   ============================================================================ */
#modalStoryViewer .story-player-window {
    width: min(435px, 95vw);
    max-height: min(880px, 93dvh);
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12, 16, 32, 0.98) 0%, rgba(7, 10, 22, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(99, 102, 241, 0.18);
    position: relative;
}

.story-segments-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px 6px;
    width: 100%;
    z-index: 6;
}

.story-seg-track,
.story-segments-bar .story-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
    position: relative;
}

.story-seg-fill,
.story-segments-bar .story-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #818cf8, #38bdf8, #f43f5e);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
    transform-origin: left center;
}

.story-seg-track.completed .story-seg-fill {
    width: 100% !important;
    transition: none !important;
}

.story-player-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 10px;
    z-index: 6;
}

.story-author-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.story-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.story-slide-counter-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
    letter-spacing: 0.03em;
}

.story-ctrl-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.story-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.story-ctrl-btn.story-del-btn {
    color: #fda4af;
    background: rgba(244, 63, 94, 0.18);
    border-color: rgba(244, 63, 94, 0.38);
}

.story-stage-wrap {
    position: relative;
    width: 100%;
    height: min(56vh, 520px);
    min-height: 310px;
    background: radial-gradient(circle at center, #11182d 0%, #05070f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

#modalStoryViewer .story-stage-media {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

#modalStoryViewer .story-stage-media img,
#modalStoryViewer .story-stage-media video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.story-nav-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24%;
    background: transparent;
    border: none;
    z-index: 4;
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.story-nav-prev {
    left: 0;
    justify-content: flex-start;
}

.story-nav-next {
    right: 0;
    justify-content: flex-end;
}

.story-stage-wrap:hover .story-nav-zone,
.story-nav-zone:active {
    opacity: 1;
}

.story-nav-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(10, 14, 28, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.story-floating-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.story-stage-heart-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 108px;
    height: 108px;
    transform: translate(-50%, -50%) scale(0);
    color: #f43f5e;
    filter: drop-shadow(0 10px 28px rgba(244, 63, 94, 0.78));
    animation: storyStageHeartPop 0.88s cubic-bezier(0.175, 0.885, 0.32, 1.35) forwards;
}

.story-stage-heart-burst svg {
    width: 100%;
    height: 100%;
    fill: #f43f5e;
    stroke: #fff;
    stroke-width: 1.2;
}

@keyframes storyStageHeartPop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-12deg);
        opacity: 0;
    }
    28% {
        transform: translate(-50%, -50%) scale(1.22) rotate(6deg);
        opacity: 1;
    }
    52% {
        transform: translate(-50%, -50%) scale(0.96) rotate(-3deg);
        opacity: 1;
    }
    75% {
        transform: translate(-50%, -54%) scale(1.06) rotate(0deg);
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -72%) scale(1.3) rotate(0deg);
        opacity: 0;
    }
}

.story-rising-particle {
    position: absolute;
    bottom: 18px;
    font-size: 1.65rem;
    pointer-events: none;
    animation: storyFloatUp 1.35s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

@keyframes storyFloatUp {
    0% {
        transform: translate3d(0, 0, 0) scale(0.5);
        opacity: 0;
    }
    20% {
        transform: translate3d(var(--drift-x, 8px), -28px, 0) scale(1.18);
        opacity: 1;
    }
    100% {
        transform: translate3d(calc(var(--drift-x, 8px) * -1.4), -210px, 0) scale(0.85);
        opacity: 0;
    }
}

#modalStoryViewer .story-player-bottom {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, rgba(11, 15, 30, 0.96) 0%, rgba(6, 9, 20, 0.99) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 6;
}

.story-viewer-caption {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #f8fafc;
    text-align: center;
    word-break: break-word;
}

.story-viewer-caption:empty {
    display: none;
}

.story-interactive-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

#modalStoryViewer .story-stats-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* UNMISTAKABLE FLASH LIKE PILL BUTTON */
.story-like-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.story-like-pill:hover {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.45);
}

.story-like-pill .story-like-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.story-like-pill .story-like-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.76rem;
    font-weight: 800;
}

.story-like-pill.liked {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 55%, #be123c 100%) !important;
    border-color: #fda4af !important;
    color: #ffffff !important;
    box-shadow: 0 0 22px rgba(244, 63, 94, 0.65), 0 6px 18px rgba(225, 29, 72, 0.45) !important;
    animation: storyLikePillPop 0.44s cubic-bezier(0.175, 0.885, 0.32, 1.35);
}

.story-like-pill.liked .story-like-icon {
    color: #ffffff !important;
    transform: scale(1.12);
}

.story-like-pill.liked .story-like-icon svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.story-like-pill.liked .story-like-count {
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

@keyframes storyLikePillPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.story-views-counter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.story-quick-reactions {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px 6px;
    border-radius: 999px;
}

.story-react-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.story-react-btn:hover,
.story-react-btn:active {
    transform: scale(1.26) translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
}

.story-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.story-reply-bar input {
    flex: 1;
    height: 40px;
    border-radius: 999px;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.84rem;
}

.story-reply-bar input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.story-reply-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================================
   PROFILE SCROLL UNLOCK, ADMIN ACTION BUTTONS FIT & SINGLE-LINE UI POLISH
   ============================================================================ */
html:has(body:not([data-active-view="view-messages"]):not([data-active-view="view-flix"])) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

body:not([data-active-view="view-messages"]):not([data-active-view="view-flix"]) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: clip !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
}

body:not([data-active-view="view-messages"]):not([data-active-view="view-flix"]) .app-shell,
body:not([data-active-view="view-messages"]):not([data-active-view="view-flix"]) .main-stage,
#view-profile.stage-view.active,
#profilePostsList,
#profileMediaGrid {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    touch-action: pan-y !important;
}

/* Desktop Sticky Left Navigation & Right Panel (Stays fixed in viewport while scrolling) */
@media (min-width: 761px) {
    body:not([data-active-view="view-flix"]) .app-shell {
        align-items: start !important;
    }

    body:not([data-active-view="view-flix"]) .side-nav {
        position: sticky !important;
        top: 14px !important;
        align-self: start !important;
        height: calc(100dvh - 28px) !important;
        max-height: calc(100dvh - 28px) !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        z-index: 90 !important;
    }

    body:not([data-active-view="view-flix"]) .side-nav::-webkit-scrollbar {
        display: none;
    }

    body:not([data-active-view="view-messages"]):not([data-active-view="view-flix"]) .right-rail {
        position: sticky !important;
        top: 14px !important;
        align-self: start !important;
        height: fit-content !important;
        max-height: calc(100dvh - 28px) !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        z-index: 88 !important;
    }

    body:not([data-active-view="view-messages"]):not([data-active-view="view-flix"]) .right-rail::-webkit-scrollbar {
        display: none;
    }
}

#view-profile.stage-view.active {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Prevent awkward line wrapping on buttons, headers, tabs, stats, and chips */
.profile-banner-logout-btn,
.profile-actions-area > button,
.segmented-bar .seg-btn,
.strip-actions .chip-btn,
.quick-tool-btn,
.action-btn,
.live-lounge-pill,
.stat-box strong,
.stat-box span {
    white-space: nowrap !important;
}

.segmented-bar,
.strip-Header,
.quick-composer-actions,
.post-actions-bar,
.post-actions-left,
.top-brand-header,
.top-brand-left,
.top-brand-titles {
    flex-wrap: nowrap !important;
}

.top-brand-left,
.top-brand-titles,
.post-author,
.post-author-meta,
.post-author-name-line {
    min-width: 0;
}

.top-brand-sub,
.post-author-name-line strong,
.post-author-meta > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.quick-composer-actions {
    overflow-x: auto;
    scrollbar-width: none;
}

.quick-composer-actions::-webkit-scrollbar {
    display: none;
}

#btnAdminDeleteUser {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 11px;
    font-size: 0.78rem;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .profile-header-bar {
        gap: 8px;
    }

    .profile-actions-area {
        gap: 6px;
        justify-content: flex-end;
        max-width: 100%;
    }

    .profile-actions-area .btn-secondary,
    .profile-actions-area .btn-primary,
    .profile-actions-area .btn-danger-outline,
    #btnAdminToggleVerified,
    #btnAdminDeleteUser {
        padding: 6px 10px !important;
        font-size: 0.74rem !important;
        border-radius: 11px !important;
        gap: 4px !important;
    }

    .profile-actions-area svg,
    .profile-actions-area .ico {
        width: 14px !important;
        height: 14px !important;
    }

    .profile-name-row h2 {
        font-size: 1.18rem;
    }

    .handle-text {
        font-size: 0.82rem;
    }

    .stat-box {
        padding: 7px 4px;
    }

    .stat-box strong {
        font-size: 1.05rem;
    }

    .stat-box span {
        font-size: 0.72rem;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================================
   THEME-AWARE TAG CHIPS (GLOBAL + FLIX OVERLAY) & NOTE DURATION PICKER
   ============================================================================ */
.tag-chip {
    background: rgba(99, 102, 241, 0.16);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid rgba(99, 102, 241, 0.42);
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
    color: var(--text-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 14%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.tag-chip:hover {
    background: rgba(99, 102, 241, 0.28);
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-color: var(--accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
    transform: translateY(-1px);
}

/* Flix Tags & Category Chips: Always adapt to active theme (--accent / --accent-cyan) */
.flix-slide .tag-chip,
.flix-bottom-overlay .tag-chip,
.flix-caption-text .tag-chip,
.flix-tags-row .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 38%, rgba(8, 12, 24, 0.72)),
        color-mix(in srgb, var(--accent-cyan) 28%, rgba(8, 12, 24, 0.72))
    ) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 68%, rgba(255, 255, 255, 0.28)) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 700;
}

.flix-slide .tag-chip:hover,
.flix-bottom-overlay .tag-chip:hover,
.flix-caption-text .tag-chip:hover,
.flix-tags-row .tag-chip:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan)) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.03);
}

.flix-author-line .meta-chip,
.flix-bottom-overlay .meta-chip {
    background: color-mix(in srgb, var(--accent) 32%, rgba(10, 14, 28, 0.75)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 62%, rgba(255, 255, 255, 0.24)) !important;
    color: #ffffff !important;
    font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.flix-top-tab.active {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 65%, rgba(255, 255, 255, 0.18)),
        color-mix(in srgb, var(--accent-cyan) 50%, rgba(255, 255, 255, 0.14))
    );
    border: 1px solid color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, 0.35));
    color: #ffffff !important;
}

.flix-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    max-width: 92%;
}

/* Active Hashtag Filter Banner in Feed */
.feed-active-tag-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 20%, var(--bg-glass-strong)),
        color-mix(in srgb, var(--accent-cyan) 12%, var(--bg-glass))
    );
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--glass-border));
    box-shadow: var(--shadow-soft);
}

.feed-active-tag-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.feed-active-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #ffffff;
    font-weight: 800;
    font-size: 0.86rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.feed-active-tag-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Note Duration Picker */
.note-duration-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 4px;
}

.note-duration-pill {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(128, 136, 168, 0.08);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.18s var(--spring);
    text-align: center;
    white-space: nowrap;
}

.note-duration-pill:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.note-duration-pill.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    border-color: transparent;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 36%, transparent);
}

.note-remaining-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 18%, rgba(15, 23, 42, 0.45));
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--text-primary);
    white-space: nowrap;
}

[data-profile-uid] {
    cursor: pointer;
}

/* ============================================================================
   VIDEO PREVIEW COVER (THUMBNAIL), LOUD VIDEO WARNING OVERLAY & VOLUME FADE-IN
   ============================================================================ */
.custom-video-container {
    position: relative;
    overflow: hidden;
    background: #070a14;
    min-height: 220px;
}

.avp-poster-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.24s ease, visibility 0.24s ease;
    pointer-events: none;
}

.allimal-video-player.has-rendered-frame:not(.is-ram-unloaded) .avp-poster-cover,
.allimal-video-player.playing:not(.is-ram-unloaded) .avp-poster-cover,
.custom-video-container.has-rendered-frame:not(.is-ram-unloaded) .avp-poster-cover,
.flix-slide.has-rendered-frame:not(.is-ram-unloaded) .avp-poster-cover,
.flix-slide.playing:not(.is-ram-unloaded) .avp-poster-cover {
    opacity: 0 !important;
    visibility: hidden !important;
}

.allimal-video-player.is-ram-unloaded .avp-poster-cover,
.custom-video-container.is-ram-unloaded .avp-poster-cover,
.flix-slide.is-ram-unloaded .avp-poster-cover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Loud Video Safety Warning Overlay */
.avp-loud-warning-overlay {
    position: absolute;
    inset: 0;
    z-index: 16;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 20px;
    background: radial-gradient(circle at center, rgba(15, 18, 34, 0.84) 0%, rgba(6, 8, 16, 0.94) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    gap: 10px;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.avp-loud-warning-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.avp-loud-warning-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.26), rgba(244, 63, 94, 0.28));
    border: 1px solid rgba(251, 191, 36, 0.65);
    color: #fbbf24;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.35);
    animation: loudPulseGlow 1.9s infinite ease-in-out;
}

@keyframes loudPulseGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(245, 158, 11, 0.32); }
    50% { transform: scale(1.06); box-shadow: 0 0 28px rgba(244, 63, 94, 0.52); }
}

.avp-loud-warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.55);
    color: #fde68a;
}

.avp-loud-warning-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.avp-loud-warning-desc {
    font-size: 0.8rem;
    line-height: 1.42;
    color: rgba(226, 232, 240, 0.88);
    max-width: 320px;
    margin: 0;
}

.avp-loud-accept-btn {
    margin-top: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.7);
    background: linear-gradient(135deg, #f59e0b, #e11d48);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.38);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.avp-loud-accept-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.52);
}

/* Smooth Volume Ramp-Up Indicator Pill */
.avp-volume-ramp-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fde68a;
    background: rgba(10, 14, 28, 0.84);
    border: 1px solid rgba(251, 191, 36, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.flix-slide .avp-volume-ramp-pill {
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 32;
    white-space: nowrap;
}

.avp-volume-ramp-pill.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ============================================================================
   COMPOSER VIDEO CONTENT ANALYSIS CARD & UPLOAD PROGRESS BAR
   ============================================================================ */
.composer-upload-progress-box {
    margin-top: 10px;
    padding: 13px 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 24, 48, 0.94), rgba(8, 12, 24, 0.96));
    border: 1px solid rgba(56, 189, 248, 0.38);
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    transition: all 0.28s ease;
}
.composer-upload-progress-box.is-complete {
    border-color: rgba(34, 197, 94, 0.48);
    background: linear-gradient(135deg, rgba(16, 38, 28, 0.94), rgba(8, 20, 14, 0.96));
}
.composer-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 700;
    color: #e0f2fe;
}
.composer-progress-bar-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    position: relative;
}
.composer-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #a855f7);
    transition: width 0.18s ease-out;
}
.composer-upload-progress-box.is-complete .composer-progress-bar-fill {
    background: linear-gradient(90deg, #22c55e, #10b981);
}
.composer-upload-notice {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #fde047;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.32);
    padding: 8px 11px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.composer-upload-progress-box.is-complete .composer-upload-notice {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.36);
}

.composer-video-analysis-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 14%, rgba(15, 23, 42, 0.75)),
        rgba(15, 23, 42, 0.85)
    );
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--glass-border));
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.composer-va-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.composer-va-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    background: #090d1a;
}

.composer-va-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.composer-va-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.composer-va-sub {
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.composer-va-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.composer-va-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
}

.composer-va-chip.loud-warn {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(251, 191, 36, 0.6);
    color: #fde68a;
}

/* Feed Infinite Scroll Sentinel */
.feed-infinite-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    margin: 8px 0 24px;
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.feed-load-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.4px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-top-color: var(--accent);
    animation: feedSpin 0.75s linear infinite;
}

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

/* ============================================================================
   STARTUP UNREAD SUMMARY POPUP & INTERACTIVE FIRST-TIME ONBOARDING TUTORIAL
   ============================================================================ */
.top-chat-popup-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.top-chat-popup-action-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, 0.25));
    background: color-mix(in srgb, var(--accent) 28%, rgba(15, 23, 42, 0.75));
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.top-chat-popup-action-pill:hover {
    background: var(--accent);
    transform: translateY(-1px);
}

/* First-Time Registration Interactive Guided Tutorial */
.onboarding-tutorial-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9920;
    background: rgba(5, 8, 18, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition: opacity 0.25s ease;
}

.onboarding-tutorial-backdrop.hidden {
    display: none !important;
}

.onboarding-target-spotlight {
    position: relative !important;
    z-index: 9925 !important;
    box-shadow: 0 0 0 3px var(--accent), 0 0 28px color-mix(in srgb, var(--accent) 75%, #38bdf8) !important;
    border-radius: 16px !important;
    transition: box-shadow 0.28s ease, transform 0.28s ease !important;
}

.onboarding-tutorial-card {
    position: relative;
    z-index: 9930;
    width: 100%;
    max-width: 430px;
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(16, 22, 42, 0.96), rgba(9, 12, 24, 0.98));
    border: 1px solid color-mix(in srgb, var(--accent) 58%, rgba(255, 255, 255, 0.22));
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65), 0 0 32px color-mix(in srgb, var(--accent) 26%, transparent);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.onboarding-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.onboarding-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #ffffff;
}

.onboarding-skip-btn {
    background: transparent;
    border: none;
    color: rgba(203, 213, 225, 0.8);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.onboarding-skip-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.onboarding-feature-hero {
    display: flex;
    align-items: center;
    gap: 14px;
}

.onboarding-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.06));
    border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, 0.2));
    color: #ffffff;
    flex-shrink: 0;
}

.onboarding-feature-title {
    font-size: 1.12rem;
    font-weight: 800;
    margin: 0 0 3px;
    color: #ffffff;
}

.onboarding-feature-where {
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    display: block;
}

.onboarding-feature-desc {
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.92);
    margin: 0;
}

.onboarding-dots-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
}

.onboarding-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    transition: all 0.2s ease;
}

.onboarding-dot.active {
    width: 22px;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
}

.onboarding-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

/* ============================================================================
   PRISMATIC CHAT REDESIGN, GROUP CHATS & 0ms INSTANT CHAT THEME ENGINE
   ============================================================================ */

/* 1. Zero-Flash Instant Theme Switching */
.msg-Right-pane.chat-theme-instant,
.msg-Right-pane.chat-theme-instant *,
.msg-Right-pane.chat-theme-instant *::before,
.msg-Right-pane.chat-theme-instant *::after {
    transition: none !important;
}

.msg-Right-pane {
    --chat-bubble-mine: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #0ea5e9 100%);
    --chat-bubble-accent: #818cf8;
    --chat-bubble-glow: rgba(99, 102, 241, 0.34);
    --chat-surface-tint: rgba(99, 102, 241, 0.08);
    --chat-border-tint: rgba(129, 140, 248, 0.36);
}

.msg-Right-pane[data-chat-theme="indigo"] {
    --chat-bubble-mine: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #0ea5e9 100%);
    --chat-bubble-accent: #818cf8;
    --chat-bubble-glow: rgba(99, 102, 241, 0.34);
    --chat-surface-tint: rgba(99, 102, 241, 0.09);
    --chat-border-tint: rgba(129, 140, 248, 0.38);
}

.msg-Right-pane[data-chat-theme="emerald"] {
    --chat-bubble-mine: linear-gradient(135deg, #10b981 0%, #059669 60%, #0d9488 100%);
    --chat-bubble-accent: #34d399;
    --chat-bubble-glow: rgba(16, 185, 129, 0.35);
    --chat-surface-tint: rgba(16, 185, 129, 0.1);
    --chat-border-tint: rgba(52, 211, 153, 0.42);
}

.msg-Right-pane[data-chat-theme="rose"] {
    --chat-bubble-mine: linear-gradient(135deg, #f43f5e 0%, #e11d48 55%, #9333ea 100%);
    --chat-bubble-accent: #fb7185;
    --chat-bubble-glow: rgba(244, 63, 94, 0.36);
    --chat-surface-tint: rgba(244, 63, 94, 0.1);
    --chat-border-tint: rgba(251, 113, 133, 0.42);
}

.msg-Right-pane[data-chat-theme="cyber_cyan"] {
    --chat-bubble-mine: linear-gradient(135deg, #06b6d4 0%, #0284c7 55%, #2563eb 100%);
    --chat-bubble-accent: #38bdf8;
    --chat-bubble-glow: rgba(6, 182, 212, 0.36);
    --chat-surface-tint: rgba(6, 182, 212, 0.1);
    --chat-border-tint: rgba(56, 189, 248, 0.42);
}

.msg-Right-pane[data-chat-theme="gold"] {
    --chat-bubble-mine: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #ea580c 100%);
    --chat-bubble-accent: #fbbf24;
    --chat-bubble-glow: rgba(245, 158, 11, 0.35);
    --chat-surface-tint: rgba(245, 158, 11, 0.1);
    --chat-border-tint: rgba(251, 191, 36, 0.42);
}

.msg-Right-pane[data-chat-theme="amoled"] {
    --chat-bubble-mine: linear-gradient(135deg, #27272a 0%, #18181b 65%, #3f3f46 100%);
    --chat-bubble-accent: #d4d4d8;
    --chat-bubble-glow: rgba(255, 255, 255, 0.16);
    --chat-surface-tint: rgba(39, 39, 42, 0.32);
    --chat-border-tint: rgba(161, 161, 170, 0.32);
}

.msg-Right-pane .chat-top-bar {
    background: linear-gradient(180deg, var(--chat-surface-tint), transparent), var(--surface-card-soft) !important;
    border-bottom: 1px solid var(--chat-border-tint) !important;
}

.msg-Right-pane .chat-input-row .send-btn {
    background: var(--chat-bubble-mine) !important;
    box-shadow: 0 6px 18px -3px var(--chat-bubble-glow), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 14px !important;
    min-width: 42px;
    height: 38px;
}

.msg-Right-pane .chat-settings-trigger-btn {
    background: linear-gradient(135deg, var(--chat-surface-tint), rgba(15, 23, 42, 0.45)) !important;
    border-color: var(--chat-border-tint) !important;
}

.msg-Right-pane .chat-settings-trigger-btn .ico {
    color: var(--chat-bubble-accent) !important;
}

/* 2. Left Pane Tabs, Subfilters & "Grup Kur" CTA */
.msg-pane-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 9px 10px;
    gap: 7px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(8, 12, 24, 0.25);
}

.msg-pane-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 13px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: all 0.2s var(--spring);
}

.msg-pane-tab .ico {
    width: 15px;
    height: 15px;
}

.msg-pane-tab.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(14, 165, 233, 0.18));
    border-color: rgba(129, 140, 248, 0.44);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.chat-left-Quickbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px 4px;
}

.dm-subfilter-pills {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--surface-inset);
    border: 1px solid var(--glass-border);
    flex: 1 1 170px;
    min-width: 0;
}

.dm-subfilter-pill {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 5px;
    border-radius: 9px;
    font-size: 0.69rem;
    font-weight: 800;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.18s var(--spring);
}

.dm-subfilter-pill.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #ffffff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 34%, transparent);
}

.dm-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    flex-shrink: 0;
}

.btn-create-group-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 11px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #0ea5e9 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    font-size: 0.71rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 5px 14px rgba(99, 102, 241, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.18s var(--spring), box-shadow 0.18s ease;
}

.btn-create-group-cta .ico,
.btn-create-group-cta svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.btn-create-group-cta:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
}

/* 3. Enriched Conversation & Group Cards in Left Pane */
.peer-row,
.group-row-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    border-radius: 16px;
    background: rgba(128, 136, 168, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: transform 0.18s var(--spring), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.peer-row:hover,
.group-row-card:hover {
    background: rgba(128, 136, 168, 0.12);
    border-color: rgba(129, 140, 248, 0.28);
    transform: translateX(2px);
}

.peer-row.active,
.group-row-card.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(14, 165, 233, 0.14));
    border-color: rgba(129, 140, 248, 0.55);
    box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.peer-row.has-unread,
.group-row-card.has-unread {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(14, 165, 233, 0.08));
    border-color: rgba(99, 102, 241, 0.36);
}

.peer-row.is-peer-typing,
.group-row-card.is-peer-typing {
    border-color: rgba(56, 189, 248, 0.55);
    box-shadow: 0 0 16px -4px rgba(56, 189, 248, 0.32);
}

.peer-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #f43f5e, #ec4899);
    box-shadow: 0 3px 10px rgba(244, 63, 94, 0.55);
    flex-shrink: 0;
}

.peer-theme-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.peer-time-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}

.peer-last-msg {
    font-size: 0.74rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
}

.peer-last-msg.typing-live-text {
    color: #38bdf8 !important;
    font-weight: 800;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}

/* Group Avatar & Stacked Member Avatars */
.group-avatar-box {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #0ea5e9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 5px 14px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

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

.group-avatar-box .ico,
.group-avatar-box svg {
    width: 20px;
    height: 20px;
}

.group-member-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 800;
    background: rgba(14, 165, 233, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #7dd3fc;
    flex-shrink: 0;
}

.chat-header-group-stack {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.chat-header-group-stack .mini-stack-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bg-deep);
    margin-left: -7px;
    object-fit: cover;
    background: #312e81;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-header-group-stack .mini-stack-av:first-child {
    margin-left: 0;
}

/* 4. Welcome Stage in Right Pane */
.chat-welcome-stage {
    margin: auto;
    max-width: 390px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.06));
    border: 1px solid var(--glass-border);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

.chat-welcome-orb {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(14, 165, 233, 0.25));
    border: 1px solid rgba(129, 140, 248, 0.55);
    color: #a5b4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.chat-welcome-orb .ico,
.chat-welcome-orb svg,
.chat-welcome-orb .ui-icon {
    width: 30px !important;
    height: 30px !important;
    display: block;
}

.chat-welcome-stage h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.chat-welcome-stage p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.48;
    margin: 0;
}

.chat-welcome-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

/* 5. Group & Channel Sender Header Inside Message Bubbles */
.msg-sender-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    cursor: pointer;
    width: fit-content;
}

.msg-sender-mini-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.msg-sender-mini-fb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-sender-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--chat-bubble-accent, #38bdf8);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.msg-sender-role-pill {
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #fde68a;
}

/* 6. Create Group Modal & Group Settings Member Management */
.create-group-hero-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.08));
    border: 1px solid rgba(129, 140, 248, 0.3);
}

.create-group-avatar-picker {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #0ea5e9);
    border: 2px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.38);
    overflow: visible;
}

.create-group-avatar-picker img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    display: block;
}

.create-group-avatar-fallback {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-group-avatar-fallback .ico,
.create-group-avatar-fallback svg {
    width: 28px;
    height: 28px;
}

.create-group-avatar-cam-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-deep);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.create-group-inputs-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-selected-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    max-height: 92px;
    overflow-y: auto;
}

.group-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.26), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(129, 140, 248, 0.48);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
}

.group-selected-chip button {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.group-selected-chip button:hover {
    background: #f43f5e;
}

.group-member-picker-list {
    max-height: 215px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 2px;
}

.group-member-pick-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 13px;
    background: rgba(128, 136, 168, 0.07);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.16s ease;
}

.group-member-pick-row:hover {
    background: rgba(128, 136, 168, 0.14);
}

.group-member-pick-row.selected {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(16, 185, 129, 0.14));
    border-color: rgba(99, 102, 241, 0.55);
}

.group-member-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--glass-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: transparent;
    transition: all 0.16s var(--spring);
    flex-shrink: 0;
}

.group-member-pick-row.selected .group-member-check {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #6ee7b7;
    color: #ffffff;
}

.group-add-member-box {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid var(--glass-border);
}

.group-add-candidates-list {
    max-height: 145px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.group-settings-members-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.group-member-manage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 13px;
    background: rgba(128, 136, 168, 0.08);
    border: 1px solid var(--glass-border);
}

.group-role-badge {
    font-size: 0.63rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}

.group-role-badge.role-owner {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fde68a;
}

.group-role-badge.role-admin {
    background: rgba(14, 165, 233, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
}

.group-role-badge.role-member {
    background: rgba(128, 136, 168, 0.16);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

/* ============================================================================
   7. COMPACT & REFINED "İLGİLİ KİŞİLER" (SUGGESTED PEOPLE) CARDS & RIGHT RAIL
   ============================================================================ */
.people-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 8px !important;
}

.person-discover-card {
    background: linear-gradient(145deg, rgba(128, 136, 168, 0.08), rgba(15, 23, 42, 0.25)) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 9px !important;
    min-width: 0;
}

.person-discover-card .person-card-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.person-discover-card .avatar-md,
.person-discover-card .avatar-sm {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    flex-shrink: 0;
}

.person-discover-card .person-card-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.person-discover-card .person-card-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.person-discover-card .person-card-name {
    font-size: 0.81rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person-discover-card .person-card-handle {
    font-size: 0.69rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person-discover-card .person-card-reason-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.13);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #7dd3fc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.person-discover-card .btn-follow-user {
    padding: 5px 11px !important;
    font-size: 0.71rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    flex-shrink: 0;
}

#railSuggestedUsers .mini-item {
    padding: 7px 9px !important;
    border-radius: 13px !important;
    gap: 8px !important;
    background: rgba(128, 136, 168, 0.06);
    border: 1px solid var(--glass-border);
}

#railSuggestedUsers .mini-item .avatar-sm {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.76rem !important;
}

/* ============================================================================
   8. IN-CHAT STREAM BEAUTIFICATION, GLASS BUBBLES & ANIMATED READ RECEIPTS
   ============================================================================ */
.msg-Right-pane .chat-stream {
    background:
        radial-gradient(circle at 82% 14%, var(--chat-surface-tint, rgba(99, 102, 241, 0.09)) 0%, transparent 48%),
        radial-gradient(circle at 16% 86%, var(--chat-surface-tint, rgba(14, 165, 233, 0.07)) 0%, transparent 52%);
    padding: 16px 16px 18px !important;
    gap: 10px !important;
}

.msg-Right-pane .msg-bubble {
    position: relative;
    border-radius: 20px;
    padding: 10px 14px 8px;
    max-width: min(74%, 520px);
    transition:
        transform 0.22s var(--spring),
        box-shadow 0.22s ease,
        border-color 0.2s ease;
}

.msg-Right-pane .msg-bubble:hover {
    transform: translateY(-1px);
}

.msg-Right-pane .msg-bubble.mine {
    background: var(--chat-bubble-mine) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-bottom-right-radius: 6px !important;
    box-shadow:
        0 10px 26px -6px var(--chat-bubble-glow, rgba(99, 102, 241, 0.36)),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.msg-Right-pane .msg-bubble.theirs {
    background: linear-gradient(155deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.92)) !important;
    border: 1px solid var(--chat-border-tint, rgba(129, 140, 248, 0.28)) !important;
    border-bottom-left-radius: 6px !important;
    color: var(--text-primary) !important;
    box-shadow:
        0 8px 22px -6px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="crystal_light"] .msg-Right-pane .msg-bubble.theirs {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.96)) !important;
    color: #0f172a !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.1) !important;
}

/* Animated Read & Delivered Receipt Pill */
.msg-read-receipt {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.86);
    transition: all 0.28s var(--spring);
}

.msg-read-receipt .receipt-check-svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
}

.msg-read-receipt.is-delivered {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    animation: receiptDeliveredFade 0.28s ease both;
}

.msg-read-receipt.is-read {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(6, 182, 212, 0.32));
    border-color: rgba(110, 231, 183, 0.65);
    color: #ecfdf5;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: receiptReadPop 0.42s var(--spring-bouncy) both;
}

.msg-read-receipt.is-read .receipt-check-svg {
    color: #6ee7b7;
    filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.7));
    animation: receiptCheckDraw 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes receiptDeliveredFade {
    0% { opacity: 0; transform: translateY(2px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes receiptReadPop {
    0% { transform: scale(0.84); opacity: 0.5; }
    55% { transform: scale(1.09); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes receiptCheckDraw {
    0% { stroke-dashoffset: 24; transform: scale(0.8); }
    100% { stroke-dashoffset: 0; transform: scale(1); }
}

/* In-Stream Animated Typing Indicator Bubble */
.chat-stream-typing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 2px;
    animation: msgBubblePopIn 0.24s var(--spring) both;
}

.chat-stream-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 18px;
    border-bottom-left-radius: 5px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 8px 22px -6px rgba(6, 182, 212, 0.28);
    color: #7dd3fc;
    font-size: 0.76rem;
    font-weight: 700;
}

.chat-stream-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-stream-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.75);
    animation: chatTypingBounce 1.2s infinite ease-in-out;
}

.chat-stream-typing-dots span:nth-child(2) {
    animation-delay: 0.18s;
}

.chat-stream-typing-dots span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes chatTypingBounce {
    0%, 60%, 100% {
        transform: translateY(0) scale(0.88);
        opacity: 0.55;
    }
    30% {
        transform: translateY(-4px) scale(1.15);
        opacity: 1;
    }
}

/* ============================================================================
   9. PROFANITY WARNING OVERLAY, NAME TRUNCATION & FORCE UPDATE GATE
   ============================================================================ */
.post-audio-cat-chip {
    display: none !important;
}

.name-truncate-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit;
}

.verified-inline-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0 !important;
}

.me-mini-text strong {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.avp-loud-warning-overlay.is-profanity-warning {
    background: radial-gradient(circle at center, rgba(127, 29, 29, 0.92) 0%, rgba(9, 12, 24, 0.96) 100%);
    border: 1px solid rgba(244, 63, 94, 0.45);
}

.avp-loud-warning-overlay.is-profanity-warning .avp-loud-accept-btn {
    background: linear-gradient(135deg, #f43f5e, #e11d48, #9333ea);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.45);
}

.force-update-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.98) 0%, rgba(6, 8, 17, 0.99) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.force-update-gate-card {
    max-width: 390px;
    width: 100%;
    padding: 28px 22px;
    border-radius: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(99, 102, 241, 0.42);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.72);
}

.force-update-gate-icon {
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 4px;
}

.force-update-gate-card h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
}

.force-update-gate-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.88);
}