/* Bottom Navigation - Mobile fixed footer (thin) */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            max-width: 100%;
            background-color: #fff;
            border-radius: 0;
            z-index: 1000;
            box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
            border-top: 1px solid #e8e8e8;
            padding: 4px 0 calc(6px + env(safe-area-inset-bottom, 0));
        }

        .bottom-nav-content {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            position: relative;
            gap: 0;
            width: 100%;
            padding: 0 4px;
        }

        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            text-decoration: none;
            color: #9ca3af;
            padding: 4px 2px;
            flex: 1;
            border-radius: 0;
            transition: color 0.2s;
            position: relative;
        }

        .bottom-nav-item:active {
            opacity: 0.9;
        }

        /* Active: underline above icon + orange-red icon (like shared image) */
        .bottom-nav-item.active {
            color: #1f2937;
            background: transparent;
        }

        .bottom-nav-item.active::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background: #C41E3A;
            border-radius: 2px;
        }

        .bottom-nav-item.bottom-nav-ai.active::before {
            display: none;
        }

        .bottom-nav-item.active .icon-wrapper i {
            color: #C41E3A !important;
        }

        /* AI - outer section (no border) */
        .bottom-nav-item.bottom-nav-ai {
            padding: 4px 2px;
        }

        /* AI icon - animated border moving around all sides (inside remains same) */
        @property --border-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        /* Icon - no round, top border removed via gradient gap (left/right/bottom only) */
        .bottom-nav-item.bottom-nav-ai .icon-wrapper.ai-icon-badge {
            width: 28px;
            height: 28px;
            min-width: 28px;
            border: 2px solid transparent;
            border-radius: 0;
            background: linear-gradient(#fff, #fff) padding-box,
                        conic-gradient(from var(--border-angle), transparent 0deg, transparent 50deg, #f3e8ea 50deg, #e8d4d8 180deg, #f3e8ea 310deg, transparent 310deg) border-box;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: aiBorderRotate 4s linear infinite;
        }

        .bottom-nav-item.bottom-nav-ai.active .icon-wrapper.ai-icon-badge {
            background: linear-gradient(#fff, #fff) padding-box,
                        conic-gradient(from var(--border-angle), transparent 0deg, transparent 50deg, #C41E3A 50deg, #e8b4bc 180deg, #C41E3A 310deg, transparent 310deg) border-box;
            animation: aiBorderRotate 3s linear infinite;
        }

        @keyframes aiBorderRotate {
            to { --border-angle: 360deg; }
        }

        .ai-icon-badge .ai-text {
            font-size: 11px;
            font-weight: 700;
            color: #9ca3af;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .bottom-nav-item.bottom-nav-ai.active .ai-icon-badge .ai-text {
            color: #C41E3A;
        }

        .ai-icon-badge .ai-sparkle {
            position: absolute;
            bottom: 2px;
            right: 2px;
            font-size: 8px;
            color: #9ca3af;
        }

        .bottom-nav-item.bottom-nav-ai.active .ai-icon-badge .ai-sparkle {
            color: #C41E3A;
        }

        .bottom-nav-item .icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
        }

        .bottom-nav-item i {
            font-size: 20px;
            color: inherit;
        }

        .bottom-nav-item span {
            font-size: 10px;
            font-weight: 500;
            line-height: 1.2;
        }

        /* Download App - right side of fixed footer (mobile) */
        .bottom-nav-item.bottom-nav-download-app {
            flex: 0 0 auto;
            margin-left: auto;
            padding: 4px 6px;
        }
        .bottom-nav-item.bottom-nav-download-app .icon-wrapper {
            color: #C41E3A;
            overflow: visible;
        }
        .bottom-nav-item.bottom-nav-download-app .bottom-nav-download-icon {
            font-size: 20px;
            color: #C41E3A;
            display: inline-block;
            animation: bottomNavDownloadGif 4s ease-in-out infinite;
        }
        .bottom-nav-item.bottom-nav-download-app span {
            font-size: 9px;
        }
        @keyframes bottomNavDownloadGif {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
                filter: drop-shadow(0 0 2px rgba(196, 30, 58, 0.4));
            }
            50% {
                opacity: 0.95;
                transform: scale(1.15);
                filter: drop-shadow(0 0 8px rgba(196, 30, 58, 0.7));
            }
        }

        /* Center Post Property - elevated red circle with plus icon + highlight lines */
        .bottom-nav-item.bottom-nav-radar {
            flex: 0 0 auto;
            margin-top: 0;
            padding: 0;
            background: transparent;
            color: #1f2937;
            position: relative;
        }

        .bottom-nav-item.bottom-nav-radar .radar-circle-wrap {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            margin-top: -73px;
        }

        .bottom-nav-item.bottom-nav-radar .radar-ring {
            position: absolute;
            inset: 0;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: 4px solid transparent;
            border-top-color: rgba(255,255,255,0.95);
            border-right-color: rgba(255,255,255,0.9);
            border-bottom-color: rgba(255,255,255,0.85);
            border-left-color: rgba(255,255,255,0.5);
            box-shadow: 0 0 16px rgba(255,255,255,0.3);
            -webkit-animation: radarRingMove 2s linear infinite;
            animation: radarRingMove 2s linear infinite;
            pointer-events: none;
            -webkit-tap-highlight-color: transparent;
        }

        @-webkit-keyframes radarRingMove {
            0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
            50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
            100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
        }
        @keyframes radarRingMove {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
            100% { transform: rotate(360deg); }
        }

        .bottom-nav-item.bottom-nav-radar .icon-wrapper.radar-circle {
            position: relative;
            z-index: 1;
            width: 54px;
            height: 54px;
            min-width: 54px;
            background: linear-gradient(145deg, #9B1A3A 0%, #C41E3A 50%, #8B1538 100%);
            border-radius: 50%;
            box-shadow: 0 6px 24px rgba(196, 30, 58, 0.5), 0 0 0 1px rgba(255,255,255,0.2) inset, 0 -2px 8px rgba(0,0,0,0.15);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .bottom-nav-item.bottom-nav-radar .icon-wrapper.radar-circle:hover {
            box-shadow: 0 8px 28px rgba(196, 30, 58, 0.55), 0 0 0 1px rgba(255,255,255,0.25) inset;
        }

        .bottom-nav-item.bottom-nav-radar .icon-wrapper.radar-circle::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.2) 40deg, rgba(255,255,255,0.6) 70deg, rgba(255,255,255,0.2) 100deg, transparent 130deg);
            border-radius: 50%;
            pointer-events: none;
            animation: radarShineRotate 3.5s linear infinite;
        }

        .bottom-nav-item.bottom-nav-radar .icon-wrapper.radar-circle::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.12) 100%);
            border-radius: 50%;
            pointer-events: none;
            animation: radarShimmer 2.5s ease-in-out infinite;
        }

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

        @keyframes radarShimmer {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        .bottom-nav-item.bottom-nav-radar .radar-icon {
            color: #fff !important;
            font-size: 26px;
            font-weight: 300;
            position: relative;
            z-index: 1;
        }

        .bottom-nav-item.bottom-nav-radar span {
            display: block;
            margin-top: 0;
            font-size: 10px;
            font-weight: 500;
            color: #1f2937;
        }

        .bottom-nav-item.bottom-nav-radar:active .radar-circle {
            transform: scale(0.96);
        }
        
        
          /* Floating Chat Stack - right side, above footer (AI + Chatbox, premium design) */
        .float-chat-stack {
            position: fixed;
            bottom: 100px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            z-index: 999;
        }

        .float-chat-btn {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            text-decoration: none;
            transition: all 0.25s ease;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }

        .float-chat-ai {
            background: linear-gradient(135deg, #8B1538 0%, #C41E3A 100%);
            color: #fff;
            box-shadow: 0 4px 20px rgba(196, 30, 58, 0.45), 0 2px 8px rgba(0,0,0,0.08);
        }

        .float-chat-ai:hover {
            background: linear-gradient(135deg, #6B0F28 0%, #8B1538 100%);
            transform: scale(1.08);
            box-shadow: 0 6px 28px rgba(196, 30, 58, 0.5), 0 4px 12px rgba(0,0,0,0.1);
        }

        .float-chat-box {
            background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
            color: #fff;
            box-shadow: 0 4px 20px rgba(45, 90, 135, 0.4), 0 2px 8px rgba(0,0,0,0.08);
        }

        .float-chat-box:hover {
            background: linear-gradient(135deg, #152a45 0%, #1e3a5f 100%);
            transform: scale(1.08);
            box-shadow: 0 6px 28px rgba(45, 90, 135, 0.5), 0 4px 12px rgba(0,0,0,0.1);
        }

        .float-chat-btn:active {
            transform: scale(0.96);
        }

        .chat-popup-body .chat-placeholder {
            text-align: center;
            padding: 32px 24px;
        }

        .chat-placeholder-icon {
            font-size: 48px;
            color: #C41E3A;
            margin-bottom: 16px;
        }

        .chat-placeholder p {
            color: #4b5563;
            margin-bottom: 8px;
        }

        .chat-placeholder-hint {
            font-size: 14px;
            color: #9ca3af;
        }


            .bottom-nav-item.bottom-nav-radar:active .radar-circle {
                transform: scale(0.96);
            }
            .bottom-nav-item.bottom-nav-radar span {
                margin-top: 0;
                font-size: 9px;
            }   /* Mobile/Tablet - float chat stack above bottom nav */
            
            
        @media (max-width: 1200px) {
            .float-chat-stack {
                bottom: 110px;
                right: 16px;
                gap: 10px;
            }

            .float-chat-btn {
                width: 48px;
                height: 48px;
                font-size: 22px;
            }
        }

        /* Bottom nav - responsive tweaks */
        @media (max-width: 380px) {
            .bottom-nav-item .icon-wrapper {
                width: 22px;
                height: 22px;
            }
            .bottom-nav-item i {
                font-size: 18px;
            }
            .bottom-nav-item.active::before {
                width: 20px;
                height: 2.5px;
            }
            .bottom-nav-item.bottom-nav-ai .icon-wrapper.ai-icon-badge {
                width: 24px;
                height: 24px;
                min-width: 24px;
            }
            .ai-icon-badge .ai-text {
                font-size: 9px;
            }
            .ai-icon-badge .ai-sparkle {
                font-size: 5px;
            }
            .bottom-nav-item.bottom-nav-radar .radar-circle-wrap {
                width: 56px;
                height: 56px;
                margin-top: -38px;
            }
            .bottom-nav-item.bottom-nav-radar .radar-ring {
                width: 56px;
                height: 56px;
                border-width: 3px;
            }
            .bottom-nav-item.bottom-nav-radar .icon-wrapper.radar-circle {
                width: 48px;
                height: 48px;
                min-width: 48px;
            }
            .bottom-nav-item.bottom-nav-rad
            .bottom-nav-item span {
                font-size: 10px;
            }
        }

        /* Desktop - hide bottom nav (show only on mobile & tablet) */
        @media (min-width: 1025px) {
            .bottom-nav {
                display: none !important;
            }

            .float-chat-stack {
                bottom: 40px;
                right: 24px;
            }

           /* body {
                padding-bottom: 0;
            }*/
        }