/* SRNR Chat custom styles */
/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
        .dark ::-webkit-scrollbar-thumb { background: #4B5563; }
        ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
        
        /* Animations */
        .post-card-enter { animation: fadeIn 0.4s ease-out forwards; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .msg-enter { animation: slideUpMsg 0.2s ease-out forwards; }
        @keyframes slideUpMsg {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .heart-pop { animation: popHeart 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        @keyframes popHeart {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        /* Floating Animation for Logo */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }
        .animate-float { animation: float 3.5s ease-in-out infinite; }

        .animation-delay-2000 { animation-delay: 2s; }
        .animation-delay-4000 { animation-delay: 4s; }
        
        .hide-scroll::-webkit-scrollbar { display: none; }
        .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Skeleton Pulse */
        .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeletonLoading 1.5s infinite; }
        .dark .skeleton { background: linear-gradient(90deg, #374151 25%, #4B5563 50%, #374151 75%); background-size: 200% 100%; }
        @keyframes skeletonLoading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

        /* Safe area for mobile notch */
        .pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* =========================================================
   Facebook-inspired dimensional theme
   ปรับธีมให้คล้าย Facebook: สีฟ้า, การ์ดมีมิติ, Dark Mode โทนมืด
   ========================================================= */
:root {
    --fb-blue: #1877f2;
    --fb-blue-hover: #166fe5;
    --fb-green: #42b72a;
    --fb-page: #f0f2f5;
    --fb-card: #ffffff;
    --fb-soft-card: #f7f8fa;
    --fb-border: #dadde1;
    --fb-line: #e4e6eb;
    --fb-text: #050505;
    --fb-muted: #65676b;
    --fb-dark-page: #18191a;
    --fb-dark-card: #242526;
    --fb-dark-soft-card: #3a3b3c;
    --fb-dark-border: #3e4042;
    --fb-dark-line: #303133;
    --fb-dark-text: #e4e6eb;
    --fb-dark-muted: #b0b3b8;
    --fb-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .08);
    --fb-shadow-hover: 0 2px 6px rgba(0, 0, 0, .16), 0 14px 36px rgba(0, 0, 0, .12);
    --fb-dark-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .35);
}

html {
    color-scheme: light;
}
html.dark {
    color-scheme: dark;
}

body {
    background: var(--fb-page) !important;
    color: var(--fb-text) !important;
}
.dark body {
    background: var(--fb-dark-page) !important;
    color: var(--fb-dark-text) !important;
}

/* Facebook blue utility replacements */
.text-primary,
.hover\:text-primary:hover,
.dark .dark\:text-indigo-400,
a.text-primary,
button.text-primary {
    color: var(--fb-blue) !important;
}
.bg-primary,
.hover\:bg-primaryHover:hover,
button.bg-primary {
    background-color: var(--fb-blue) !important;
}
.hover\:bg-primaryHover:hover,
button.bg-primary:hover {
    background-color: var(--fb-blue-hover) !important;
}
.border-primary,
.focus\:border-primary:focus {
    border-color: var(--fb-blue) !important;
}
.focus\:ring-primary:focus,
.focus\:ring-primary\/30:focus,
.focus\:ring-primary\/50:focus {
    --tw-ring-color: rgba(24, 119, 242, .28) !important;
}

/* Gradients: เปลี่ยนม่วงให้เป็นฟ้า Facebook */
.bg-gradient-to-r.from-primary.to-purple-600,
.bg-gradient-to-r.from-primary.to-purple-700,
.bg-gradient-to-br.from-primary.to-purple-600,
[class*="from-primary"][class*="to-purple"] {
    background-image: linear-gradient(135deg, #1877f2 0%, #0866ff 58%, #0a58ca 100%) !important;
}
.bg-clip-text.text-transparent.bg-gradient-to-r,
.bg-clip-text.text-transparent[class*="from-primary"] {
    background-image: linear-gradient(90deg, #1877f2, #0866ff) !important;
}

/* Auth screen */
#auth-screen {
    background:
        radial-gradient(circle at top left, rgba(24,119,242,.14), transparent 32%),
        radial-gradient(circle at bottom right, rgba(66,183,42,.12), transparent 28%),
        var(--fb-page) !important;
}
.dark #auth-screen {
    background:
        radial-gradient(circle at top left, rgba(24,119,242,.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(66,183,42,.10), transparent 30%),
        var(--fb-dark-page) !important;
}
#auth-screen > .relative,
#auth-screen .max-w-md {
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    box-shadow: 0 20px 65px rgba(24, 119, 242, .16), 0 3px 10px rgba(0,0,0,.10) !important;
}
.dark #auth-screen > .relative,
.dark #auth-screen .max-w-md {
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Navbar: sticky Facebook header */
nav.fixed.top-0 {
    height: 58px !important;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--fb-line) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
}
.dark nav.fixed.top-0 {
    background: rgba(36,37,38,.94) !important;
    border-bottom-color: var(--fb-dark-line) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}
nav img,
#nav-user-avatar,
#post-user-avatar,
#mobile-user-avatar {
    box-shadow: 0 1px 2px rgba(0,0,0,.15) !important;
}
#nav-friend-btn,
#nav-bell-btn,
#nav-msg-btn,
#nav-admin-btn,
#user-menu-dropdown button,
#btn-mobile-menu,
.mobile-nav-btn {
    border-radius: 999px !important;
}
#nav-friend-btn,
#nav-bell-btn,
#nav-msg-btn,
#nav-admin-btn {
    background: #e4e6eb !important;
    color: #050505 !important;
}
#nav-friend-btn:hover,
#nav-bell-btn:hover,
#nav-msg-btn:hover,
#nav-admin-btn:hover {
    background: #d8dadf !important;
    transform: translateY(-1px);
}
.dark #nav-friend-btn,
.dark #nav-bell-btn,
.dark #nav-msg-btn,
.dark #nav-admin-btn {
    background: var(--fb-dark-soft-card) !important;
    color: var(--fb-dark-text) !important;
}
.dark #nav-friend-btn:hover,
.dark #nav-bell-btn:hover,
.dark #nav-msg-btn:hover,
.dark #nav-admin-btn:hover {
    background: #4e4f50 !important;
}

/* Cards / panels */
.bg-white,
#profile-header-container,
#create-post-box,
#friend-panel,
#notification-panel,
#msg-panel,
#user-menu-dropdown,
#admin-layout .admin-section,
#mobile-menu-content,
#toast,
[id^="admin-sec-"],
#report-modal > div,
#admin-edit-modal > div,
#admin-event-modal > div,
#confirm-modal > div,
#edit-post-modal > div,
#profile-modal > div,
#edit-name-modal > div,
#chat-modal > div {
    background-color: var(--fb-card) !important;
    border-color: var(--fb-line) !important;
    box-shadow: var(--fb-shadow) !important;
}
.dark .dark\:bg-darkCard,
.dark #profile-header-container,
.dark #create-post-box,
.dark #friend-panel,
.dark #notification-panel,
.dark #msg-panel,
.dark #user-menu-dropdown,
.dark #admin-layout .admin-section,
.dark #mobile-menu-content,
.dark #toast,
.dark [id^="admin-sec-"],
.dark #report-modal > div,
.dark #admin-edit-modal > div,
.dark #admin-event-modal > div,
.dark #confirm-modal > div,
.dark #edit-post-modal > div,
.dark #profile-modal > div,
.dark #edit-name-modal > div,
.dark #chat-modal > div {
    background-color: var(--fb-dark-card) !important;
    border-color: var(--fb-dark-border) !important;
    box-shadow: var(--fb-dark-shadow) !important;
}

/* Feed cards created by JS */
#posts-container > div,
#leaderboard-container > div,
#events-widget-container > div,
#mobile-feed-music-widget,
#mobile-category-list > button,
#category-nav a,
#mobile-leaderboard-container > div,
#music-widget-container li {
    box-shadow: var(--fb-shadow) !important;
    border-color: var(--fb-line) !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease !important;
}
#posts-container > div:hover,
#category-nav a:hover,
#leaderboard-container > div:hover,
#events-widget-container > div:hover {
    transform: translateY(-2px);
    box-shadow: var(--fb-shadow-hover) !important;
}
.dark #posts-container > div,
.dark #leaderboard-container > div,
.dark #events-widget-container > div,
.dark #mobile-feed-music-widget,
.dark #mobile-category-list > button,
.dark #category-nav a,
.dark #mobile-leaderboard-container > div,
.dark #music-widget-container li {
    box-shadow: var(--fb-dark-shadow) !important;
    border-color: var(--fb-dark-border) !important;
}

/* Soft surfaces and inputs */
.bg-gray-50,
.bg-gray-100,
input,
textarea,
select,
#search-input,
[id^="comment-input-"],
#post-input {
    background-color: var(--fb-soft-card) !important;
    border-color: var(--fb-line) !important;
    color: var(--fb-text) !important;
}
.dark .dark\:bg-gray-700,
.dark .dark\:bg-gray-800,
.dark input,
.dark textarea,
.dark select,
.dark #search-input,
.dark [id^="comment-input-"],
.dark #post-input {
    background-color: var(--fb-dark-soft-card) !important;
    border-color: var(--fb-dark-border) !important;
    color: var(--fb-dark-text) !important;
}
input:focus,
textarea:focus,
select:focus,
#search-input:focus,
#post-input:focus {
    background-color: #ffffff !important;
    border-color: rgba(24,119,242,.45) !important;
    box-shadow: 0 0 0 4px rgba(24,119,242,.14) !important;
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus,
.dark #search-input:focus,
.dark #post-input:focus {
    background-color: #4e4f50 !important;
    border-color: rgba(24,119,242,.65) !important;
    box-shadow: 0 0 0 4px rgba(24,119,242,.20) !important;
}
::placeholder {
    color: var(--fb-muted) !important;
}
.dark ::placeholder {
    color: var(--fb-dark-muted) !important;
}

/* Buttons */
button {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease !important;
}
button:active {
    transform: scale(.97) !important;
}
button[class*="bg-gradient"],
button.bg-primary,
#post-input + div button,
#create-post-box button[onclick="createNewPost()"],
button[onclick="handleLogin()"],
button[onclick="verifyForgotInfo()"] {
    box-shadow: 0 6px 14px rgba(24,119,242,.26) !important;
}
button[class*="bg-gradient"]:hover,
button.bg-primary:hover,
#create-post-box button[onclick="createNewPost()"]:hover {
    box-shadow: 0 10px 22px rgba(24,119,242,.34) !important;
}

/* Sidebar category like Facebook left rail */
#category-nav a {
    border-radius: 14px !important;
    box-shadow: none !important;
}
#category-nav a[class*="font-bold"] {
    background: rgba(24,119,242,.10) !important;
    border-color: rgba(24,119,242,.16) !important;
    color: var(--fb-blue) !important;
}
.dark #category-nav a[class*="font-bold"] {
    background: rgba(24,119,242,.18) !important;
    border-color: rgba(24,119,242,.30) !important;
}

/* Create post box Facebook feel */
#create-post-box {
    border-radius: 18px !important;
    overflow: hidden;
}
#create-post-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #1877f2, #0866ff, #42b72a);
    z-index: 1;
}
#create-post-box hr,
hr {
    border-color: var(--fb-line) !important;
}
.dark #create-post-box hr,
.dark hr {
    border-color: var(--fb-dark-line) !important;
}

/* Text colors tuned for Facebook */
.text-gray-800,
.text-gray-900 {
    color: var(--fb-text) !important;
}
.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--fb-muted) !important;
}
.dark .dark\:text-white,
.dark .dark\:text-gray-200,
.dark .dark\:text-gray-300 {
    color: var(--fb-dark-text) !important;
}
.dark .dark\:text-gray-400,
.dark .dark\:text-gray-500 {
    color: var(--fb-dark-muted) !important;
}

/* Borders */
.border-gray-100,
.border-gray-200,
.border-gray-300 {
    border-color: var(--fb-line) !important;
}
.dark .dark\:border-gray-600,
.dark .dark\:border-gray-700,
.dark .dark\:border-gray-800 {
    border-color: var(--fb-dark-border) !important;
}

/* Dropdown panels */
#friend-panel,
#notification-panel,
#msg-panel,
#user-menu-dropdown {
    border-radius: 14px !important;
    overflow: hidden;
}
#friend-panel > div:first-child,
#notification-panel > div:first-child,
#msg-panel > div:first-child {
    background-color: var(--fb-soft-card) !important;
}
.dark #friend-panel > div:first-child,
.dark #notification-panel > div:first-child,
.dark #msg-panel > div:first-child {
    background-color: var(--fb-dark-soft-card) !important;
}

/* Tables in admin */
thead tr {
    background-color: var(--fb-soft-card) !important;
}
.dark thead tr {
    background-color: var(--fb-dark-soft-card) !important;
}
tbody,
tbody tr {
    background-color: var(--fb-card) !important;
}
.dark tbody,
.dark tbody tr {
    background-color: var(--fb-dark-card) !important;
}

/* Mobile bottom navigation like Facebook app bar */
nav.fixed.bottom-0 {
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid var(--fb-line) !important;
    box-shadow: 0 -2px 14px rgba(0,0,0,.08) !important;
}
.dark nav.fixed.bottom-0 {
    background: rgba(36,37,38,.96) !important;
    border-top-color: var(--fb-dark-line) !important;
    box-shadow: 0 -2px 14px rgba(0,0,0,.45) !important;
}
.mobile-nav-btn.text-primary,
#btn-mobile-chat.text-primary,
#btn-mobile-menu.text-primary {
    color: var(--fb-blue) !important;
}

/* Scrollbar Facebook-like */
::-webkit-scrollbar-thumb {
    background: #bcc0c4 !important;
}
.dark ::-webkit-scrollbar-thumb {
    background: #5b5c5f !important;
}

/* Small polish */
.rounded-2xl,
.rounded-3xl,
.rounded-xl {
    -webkit-font-smoothing: antialiased;
}
#lightbox-modal {
    background: rgba(0,0,0,.88) !important;
}


/* =========================================================
   SRNR Mobile + Desktop dimensional polish v2
   ปรับ UI มือถือให้ปุ่มเพิ่มโพสต์เป็นวงกลมลอยเด่นแบบ Facebook
   เพิ่มมิติ สีฟ้า Facebook + ม่วงอ่อน โดยไม่เปลี่ยนระบบ/ฟังก์ชัน
   ========================================================= */
:root {
    --srnr-purple: #7c3aed;
    --srnr-purple-soft: #a855f7;
    --srnr-pink-soft: #f0abfc;
    --srnr-glow-blue: rgba(24, 119, 242, .30);
    --srnr-glow-purple: rgba(124, 58, 237, .28);
    --srnr-card-shadow-3d: 0 1px 1px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .10), 0 26px 60px rgba(79, 70, 229, .08);
    --srnr-card-shadow-3d-hover: 0 3px 10px rgba(15, 23, 42, .10), 0 18px 42px rgba(15, 23, 42, .14), 0 32px 70px rgba(124, 58, 237, .12);
    --srnr-dark-shadow-3d: 0 1px 2px rgba(0, 0, 0, .56), 0 18px 46px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255,255,255,.035);
}

body {
    background:
        radial-gradient(circle at 14% 8%, rgba(24,119,242,.11), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(168,85,247,.13), transparent 28%),
        linear-gradient(180deg, #f7f8ff 0%, #f0f2f5 34%, #eef0f7 100%) !important;
}
.dark body {
    background:
        radial-gradient(circle at 16% 6%, rgba(24,119,242,.18), transparent 32%),
        radial-gradient(circle at 84% 14%, rgba(124,58,237,.20), transparent 30%),
        linear-gradient(180deg, #15161d 0%, #18191a 42%, #111217 100%) !important;
}

/* คืนโทนม่วงอ่อนในปุ่ม/หัวข้อสำคัญตามที่ต้องการ */
.bg-gradient-to-r.from-primary.to-purple-600,
.bg-gradient-to-r.from-primary.to-purple-700,
.bg-gradient-to-br.from-primary.to-purple-600,
[class*="from-primary"][class*="to-purple"] {
    background-image: linear-gradient(135deg, #1877f2 0%, #5b7cfa 46%, #8b5cf6 78%, #a855f7 100%) !important;
}
.bg-clip-text.text-transparent.bg-gradient-to-r,
.bg-clip-text.text-transparent[class*="from-primary"] {
    background-image: linear-gradient(90deg, #1877f2 0%, #5b7cfa 48%, #8b5cf6 100%) !important;
}

/* Desktop: เพิ่มมิติให้โครงหลัก การ์ด และ sidebar */
@media (min-width: 768px) {
    #feed-layout {
        position: relative;
        isolation: isolate;
    }
    #feed-layout::before {
        content: "";
        position: fixed;
        inset: 58px 0 auto 0;
        height: 190px;
        pointer-events: none;
        background:
            radial-gradient(circle at 50% 0%, rgba(24,119,242,.12), transparent 42%),
            radial-gradient(circle at 68% 12%, rgba(168,85,247,.13), transparent 34%);
        z-index: -1;
    }
    aside #category-nav {
        padding: 10px;
        border-radius: 24px;
        background: rgba(255,255,255,.54);
        border: 1px solid rgba(255,255,255,.72);
        box-shadow: 0 18px 50px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.65);
        backdrop-filter: blur(16px);
    }
    .dark aside #category-nav {
        background: rgba(36,37,38,.58);
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 18px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.045);
    }
    #category-nav a {
        min-height: 48px;
        margin-bottom: 4px;
        transform: translateZ(0);
    }
    #category-nav a:hover {
        transform: translateX(3px) translateY(-1px);
        box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
    }
    #category-nav a[class*="font-bold"] {
        background: linear-gradient(135deg, rgba(24,119,242,.13), rgba(168,85,247,.14)) !important;
        border-color: rgba(124,58,237,.18) !important;
        box-shadow: inset 3px 0 0 rgba(24,119,242,.85), 0 10px 26px rgba(79,70,229,.12) !important;
    }
}

nav.fixed.top-0 {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.70) inset, 0 6px 22px rgba(15,23,42,.10) !important;
}
.dark nav.fixed.top-0 {
    background:
        linear-gradient(180deg, rgba(36,37,38,.96), rgba(32,33,36,.92)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.46) !important;
}

#create-post-box,
#profile-header-container,
#posts-container > div,
#leaderboard-container > div,
#events-widget-container > div,
#music-widget-container,
#mobile-feed-music-widget,
#mobile-feed-leaderboard-widget,
#friend-panel,
#notification-panel,
#msg-panel,
#user-menu-dropdown {
    box-shadow: var(--srnr-card-shadow-3d) !important;
    border: 1px solid rgba(226,232,240,.88) !important;
}
.dark #create-post-box,
.dark #profile-header-container,
.dark #posts-container > div,
.dark #leaderboard-container > div,
.dark #events-widget-container > div,
.dark #music-widget-container,
.dark #mobile-feed-music-widget,
.dark #mobile-feed-leaderboard-widget,
.dark #friend-panel,
.dark #notification-panel,
.dark #msg-panel,
.dark #user-menu-dropdown {
    box-shadow: var(--srnr-dark-shadow-3d) !important;
    border-color: rgba(255,255,255,.07) !important;
}

#posts-container > div,
#create-post-box,
#profile-header-container {
    border-radius: 24px !important;
    overflow: hidden;
    position: relative;
}
#posts-container > div::before,
#create-post-box::before,
#profile-header-container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(24,119,242,.35), rgba(168,85,247,.35), rgba(255,255,255,.12));
    pointer-events: none;
    z-index: 1;
}
#posts-container > div:hover,
#create-post-box:hover,
#profile-header-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--srnr-card-shadow-3d-hover) !important;
}
.dark #posts-container > div:hover,
.dark #create-post-box:hover,
.dark #profile-header-container:hover {
    box-shadow: 0 22px 52px rgba(0,0,0,.56), 0 0 0 1px rgba(124,58,237,.12) !important;
}

#create-post-box::before {
    height: 4px;
    background: linear-gradient(90deg, #1877f2 0%, #7c3aed 55%, #f0abfc 100%);
}
#post-input,
#search-input,
[id^="comment-input-"] {
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06) !important;
}
#post-input:focus,
#search-input:focus,
[id^="comment-input-"]:focus {
    border-color: rgba(124,58,237,.42) !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,.13), inset 0 1px 2px rgba(15,23,42,.05) !important;
}

/* Mobile: แถบนำทางแบบลอย มีมิติ และปุ่ม + ตรงกลางเป็นวงกลมใหญ่ */
@media (max-width: 767px) {
    main {
        padding-bottom: 110px !important;
    }
    #feed-layout {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 74px !important;
    }
    #create-post-box,
    #profile-header-container,
    #posts-container > div {
        border-radius: 22px !important;
    }
    #mobile-nav {
        left: 10px !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: calc(100% - 20px) !important;
        height: 72px !important;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
        border-radius: 28px !important;
        border: 1px solid rgba(255,255,255,.78) !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80)) !important;
        box-shadow:
            0 18px 44px rgba(15,23,42,.18),
            0 2px 8px rgba(15,23,42,.08),
            inset 0 1px 0 rgba(255,255,255,.78) !important;
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        overflow: visible !important;
    }
    .dark #mobile-nav {
        border-color: rgba(255,255,255,.10) !important;
        background:
            linear-gradient(180deg, rgba(36,37,38,.88), rgba(24,25,26,.82)) !important;
        box-shadow:
            0 18px 48px rgba(0,0,0,.58),
            inset 0 1px 0 rgba(255,255,255,.06) !important;
    }
    #mobile-nav .mobile-nav-btn,
    #mobile-nav #mobile-btn-chat,
    #mobile-nav #btn-mobile-menu {
        border-radius: 20px !important;
        margin: 0 2px;
        position: relative;
        overflow: hidden;
    }
    #mobile-nav .mobile-nav-btn:hover,
    #mobile-nav #mobile-btn-chat:hover,
    #mobile-nav #btn-mobile-menu:hover {
        background: rgba(24,119,242,.08) !important;
        transform: translateY(-1px);
    }
    .dark #mobile-nav .mobile-nav-btn:hover,
    .dark #mobile-nav #mobile-btn-chat:hover,
    .dark #mobile-nav #btn-mobile-menu:hover {
        background: rgba(124,58,237,.16) !important;
    }
    #mobile-nav .mobile-nav-btn.text-primary,
    #mobile-nav .mobile-nav-btn.dark\:text-indigo-400,
    #mobile-nav #btn-mobile-menu.text-primary,
    #mobile-nav #mobile-btn-chat.text-primary {
        background: linear-gradient(180deg, rgba(24,119,242,.11), rgba(124,58,237,.08)) !important;
        color: #1877f2 !important;
    }
    .mobile-create-post-wrap {
        overflow: visible !important;
        align-items: flex-start !important;
        margin-top: -24px !important;
        isolation: isolate;
    }
    .mobile-create-post-wrap::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        width: 78px;
        height: 78px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: radial-gradient(circle, rgba(168,85,247,.24) 0%, rgba(24,119,242,.18) 44%, transparent 72%);
        filter: blur(2px);
        z-index: -1;
    }
    #mobile-create-post-btn {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
        border-radius: 999px !important;
        border: 6px solid rgba(255,255,255,.96) !important;
        background:
            radial-gradient(circle at 30% 24%, rgba(255,255,255,.42), transparent 25%),
            linear-gradient(135deg, #1877f2 0%, #5b7cfa 38%, #7c3aed 74%, #a855f7 100%) !important;
        box-shadow:
            0 18px 34px rgba(24,119,242,.36),
            0 10px 26px rgba(124,58,237,.30),
            inset 0 1px 1px rgba(255,255,255,.36),
            inset 0 -4px 10px rgba(34,38,65,.22) !important;
        transform: translateY(-14px) translateZ(0);
        position: relative;
        overflow: visible !important;
    }
    .dark #mobile-create-post-btn {
        border-color: #18191a !important;
        box-shadow:
            0 18px 38px rgba(0,0,0,.58),
            0 10px 30px rgba(124,58,237,.35),
            inset 0 1px 1px rgba(255,255,255,.20),
            inset 0 -4px 10px rgba(0,0,0,.28) !important;
    }
    #mobile-create-post-btn::before {
        content: "";
        position: absolute;
        inset: -12px;
        border-radius: inherit;
        border: 2px solid rgba(168,85,247,.32);
        box-shadow: 0 0 0 7px rgba(24,119,242,.08);
        pointer-events: none;
        animation: srnrPlusHalo 2.6s ease-in-out infinite;
    }
    #mobile-create-post-btn::after {
        content: "โพสต์";
        position: absolute;
        left: 50%;
        bottom: -24px;
        transform: translateX(-50%);
        color: #6b7280;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .01em;
        text-shadow: 0 1px 0 rgba(255,255,255,.8);
        white-space: nowrap;
    }
    .dark #mobile-create-post-btn::after {
        color: #d8d5ff;
        text-shadow: none;
    }
    #mobile-create-post-btn i {
        font-size: 30px !important;
        line-height: 1;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.24));
    }
    #mobile-create-post-btn:hover {
        transform: translateY(-17px) scale(1.04) !important;
        box-shadow:
            0 22px 42px rgba(24,119,242,.42),
            0 14px 30px rgba(124,58,237,.36),
            inset 0 1px 1px rgba(255,255,255,.40),
            inset 0 -4px 10px rgba(34,38,65,.22) !important;
    }
    #mobile-create-post-btn:active {
        transform: translateY(-12px) scale(.96) !important;
    }
    #mobile-msg-badge {
        box-shadow: 0 0 0 4px rgba(255,255,255,.95) !important;
    }
    .dark #mobile-msg-badge {
        box-shadow: 0 0 0 4px #242526 !important;
    }
    #mobile-menu-content {
        border-radius: 32px 32px 0 0 !important;
        box-shadow: 0 -28px 70px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.7) !important;
    }
    .dark #mobile-menu-content {
        box-shadow: 0 -30px 72px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }
}

@keyframes srnrPlusHalo {
    0%, 100% {
        opacity: .68;
        transform: scale(.96);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ลด animation สำหรับผู้ใช้ที่ตั้งค่า reduce motion */
@media (prefers-reduced-motion: reduce) {
    #mobile-create-post-btn::before,
    .animate-float,
    .post-card-enter,
    .msg-enter,
    .heart-pop {
        animation: none !important;
    }
    #posts-container > div,
    #create-post-box,
    #profile-header-container,
    #category-nav a,
    #mobile-create-post-btn {
        transition: none !important;
    }
}