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

:root {
    --primary-font: 'Inter', sans-serif;
    --primary-color: #1877F2; /* Premium Social Blue from native app */
    --primary-color-hover: #166FE5;
    --secondary-color: #4B5563; /* Slate grey */
    --accent-emerald: #10B981; /* Emerald accent */
    --light-bg: #F3F4F6; /* Clean light gray matches Android native containerColor */
    --dark-text: #111827; /* Tall dark steel text */
    --card-bg: #FFFFFF;
}

body {
    font-family: var(--primary-font);
    background-color: var(--light-bg);
    color: var(--dark-text);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 700;
}

/* Redefined Design Utilities to Match Native Android App Exactly */
.brutal-border {
    border: 1px solid #E5E7EB; /* Clean light grey borders */
}

.brutal-shadow {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.brutal-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.08);
}

.brutal-shadow:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.04);
}

.brutal-shadow-pink {
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.12);
}

.brutal-shadow-blue {
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.15);
}

.brutal-card {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Custom Scrollbar, nice and clean */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F3F4F6;
}
::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Smooth active state transitions */
.transition-all-custom {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Left Sidebar & Navigation Tabs exactly matching Android look */
.active-nav-tab {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
    font-weight: 700;
}

.nav-trigger {
    transition: all 0.15s ease-in-out;
}

.nav-trigger:hover:not(.active-nav-tab) {
    background-color: #E5E7EB;
}

/* Live Badge Ping pulse */
.live-glow {
    box-shadow: 0 0 0 0 rgba(19, 194, 255, 0.7);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(19, 194, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(19, 194, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(19, 194, 255, 0);
    }
}

/* Sliding Left Drawer Transition styles */
.drawer-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.drawer-active #drawer-menu {
    left: 0 !important;
}

/* Custom Text gradient cards matching post design */
.post-gradient-idx-0 {
    background: linear-gradient(135deg, #FF7E5F, #FEB47B);
    color: #FFFFFF !important;
}
.post-gradient-idx-0 h3, .post-gradient-idx-0 p {
    color: #FFFFFF !important;
}

.post-gradient-idx-1 {
    background: linear-gradient(135deg, #2C3E50, #3498DB);
    color: #FFFFFF !important;
}
.post-gradient-idx-1 h3, .post-gradient-idx-1 p {
    color: #FFFFFF !important;
}

.post-gradient-idx-2 {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: #FFFFFF !important;
}
.post-gradient-idx-2 h3, .post-gradient-idx-2 p {
    color: #FFFFFF !important;
}

/* Gold Member badge star glow */
.gold-badge-pulsing {
    border: 2px solid #FDE047;
    animation: gold-glow 2s infinite alternate;
}

@keyframes gold-glow {
    0% {
        box-shadow: 0 0 5px rgba(253, 224, 71, 0.4);
    }
    100% {
        box-shadow: 0 0 15px rgba(253, 224, 71, 0.9);
    }
}

/* Bulletproof Auth Screen overlay styling */
#auth-screen-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; /* extremely high stacking order */
    background: #f3f4f6 !important; /* fallback opaque primary bg */
    background: linear-gradient(to top right, #E1F5FE, #FEE2E2, #FFFD92) !important; /* gorgeous, solid, non-transparent pastel */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#auth-screen-overlay.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}