/**
 * SOLIUS Chat Component - Mobile Layout
 * Based on Figma Design Specifications (October 2025)
 * 
 * Features:
 * - TWO SCREENS: Contact list screen → Conversation screen
 * - Contact list: Search, tabs, contacts
 * - Conversation: Back arrow, header, messages, input
 * - Bottom nav ALWAYS visible
 */

@media (max-width: 768px) {
    /* ============================================
       🐛 FIX: FORCE VISIBILITY OF HEADER ELEMENTS
       ============================================ */
    
    /* CONTACTS PANEL: Ensure all header elements are visible */
    .contacts-search-bar,
    .mobile-chat-search {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .contacts-actions,
    .mobile-chat-action-buttons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .btn-invite-friends,
    .mobile-invite-friends-btn,
    .btn-new-chat,
    .mobile-new-chat-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .contacts-tabs,
    .mobile-chat-tabs {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .contacts-tabs .tab,
    .mobile-chat-tab {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* CONVERSATION HEADER: Search icon and buttons */
    .chat-conversation-header,
    .mobile-conversation-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .conversation-header-actions,
    .search-icon-btn,
    .mobile-conversation-search-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* ============================================
       Remove padding from chat content area
       ============================================ */
    .app-content-area[data-state="chat"],
    .app-content-area:has(.chat-three-panel) {
        padding: 0 !important;
    }
    
    /* Chat container mobile styles */
    #chat-container {
        margin-bottom: 0 !important;
    }
    
    /* Hide desktop 3-panel layout */
    .chat-container.desktop-layout {
        display: none !important;
    }
    
    /* Show mobile layout */
    .chat-container.mobile-layout {
        display: flex !important;
    }
    
    /* ============================================
       SCREEN 1: CONTACT LIST
       ============================================ */
    
    .mobile-chat-contact-list-screen {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* 🐛 FIX: stretch for full-width children */
        padding: 0px;
        gap: 16px;
        
        width: 100%;
        height: 100%; /* Full height */
        max-height: calc(100vh - 120px); /* 🔥 FIX: Don't exceed viewport (60px top header + 60px bottom nav) */
        overflow: hidden; /* 🔥 FIX: Parent doesn't scroll, children do */
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    /* Contact List Container */
    .mobile-contact-list-container {
        box-sizing: border-box;
        
        display: flex;
        flex-direction: column;
        align-items: stretch; /* 🐛 FIX: stretch for full-width children */
        padding: 0px 0px 24px;
        gap: 8px; /* 📱 POLISH: Tighter spacing */
        
        width: 100%;
        height: 100%; /* 🔥 FIX: Take full height from parent */
        max-height: 100%; /* 🔥 FIX: Don't exceed parent height */
        overflow: hidden; /* 🔥 FIX: Prevent overflow, let children scroll */
        
        background: #00091E;
        border-right: 2px solid #141626;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    /* Contact elements should auto-size on mobile */
    .contact-item,
    .contact-info,
    .contact-header,
    .contact-footer {
        width: auto !important;
    }
    
    /* Hide mobile conversation header back button (use PrivateChatComponent's built-in back) */
    .mobile-conversation-header {
        display: none !important;
    }
    
    /* Search + Actions Container */
    .mobile-search-actions-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 12px;
        
        width: 100%;
        height: auto;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    /* Search Bar */
    .mobile-chat-search {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* 🐛 FIX: stretch for full-width wrapper */
        padding: 12px 16px; /* 🐛 FIX: Reduced side padding from 20px to 16px */
        gap: 10px;
        
        width: 100%;
        height: auto; /* 🐛 FIX: auto height instead of fixed 64px */
        
        flex: none;
        order: 0; /* 🐛 FIX: First in visual order */
        align-self: stretch;
    }
    
    .mobile-chat-search-input-wrapper {
        display: flex;
        flex-direction: row; /* 🐛 FIX: row for icon + input side-by-side */
        justify-content: flex-start;
        align-items: center;
        padding: 12px 16px;
        gap: 8px; /* 🐛 FIX: 8px gap between icon and input */
        
        width: 100%; /* 🐛 FIX: Full width */
        height: 44px;
        
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);
        border-radius: 12px;
        border: none;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    /* Search icon (Font Awesome) */
    .mobile-chat-search-input-wrapper i {
        font-size: 16px;
        color: #536285;
        flex: none;
    }
    
    .mobile-chat-search-input {
        width: 100%;
        height: 20px;
        background: transparent;
        border: none;
        outline: none;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px; /* 🔥 BUG FIX (Agent #6 - Oct 26): Increased from 14px to prevent iOS zoom */
        line-height: 20px;
        color: #FFFFFF; /* 🐛 FIX: White text for visibility */
        text-align: left; /* 🐛 FIX: Left-aligned text */
        
        flex: 1; /* 🐛 FIX: flex 1 to fill available space */
    }
    
    .mobile-chat-search-input::placeholder {
        color: #536285;
        text-align: left; /* 🐛 FIX: Left-aligned placeholder */
    }
    
    /* Invite Friends + New Chat Buttons */
    .mobile-chat-action-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 16px; /* 🐛 FIX: Add horizontal padding to match search */
        gap: 8px;
        
        width: 100%; /* 🐛 FIX: Full width */
        height: auto; /* 🐛 FIX: Auto height instead of fixed 20px */
        
        flex: none;
        order: 1; /* 🐛 FIX: Second in visual order */
        align-self: stretch;
    }
    
    .mobile-invite-friends-btn,
    .mobile-new-chat-btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; /* 🐛 FIX: Center content within button */
        padding: 0px 12px; /* 🐛 FIX: Reduced padding for better fit */
        gap: 6px; /* 🐛 FIX: Smaller gap between icon and text */
        
        flex: 1; /* 🐛 FIX: Equal width distribution */
        min-height: 44px; /* Touch target minimum (iOS guidelines) */
        
        background: transparent;
        border: none;
        cursor: pointer;
        
        transition: all 0.2s;
    }
    
    .mobile-invite-friends-btn:active,
    .mobile-new-chat-btn:active {
        transform: scale(0.98);
        opacity: 0.7;
    }
    
    .mobile-invite-friends-btn svg,
    .mobile-new-chat-btn svg {
        width: 20px;
        height: 20px;
        flex: none;
        order: 0;
    }
    
    .mobile-invite-friends-btn svg path,
    .mobile-new-chat-btn svg path {
        stroke: #555DFF;
    }
    
    .mobile-invite-friends-btn span,
    .mobile-new-chat-btn span {
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500; /* 🐛 FIX: Medium weight for better readability */
        font-size: 14px;
        line-height: 20px;
        color: #555DFF;
        white-space: nowrap; /* 🐛 FIX: Prevent text wrapping */
        
        flex: none;
        order: 1;
    }
    
    /* ============================================
       TABS (Messages, Unwanted, Archive)
       ============================================ */
    
    .mobile-chat-tabs {
        box-sizing: border-box;
        
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* 📱 POLISH: Space between tabs */
        align-items: center;
        padding: 0px 16px; /* 🐛 FIX: Horizontal padding to match search */
        gap: 20px; /* 🐛 FIX: Increased gap between tabs */
        
        width: 100%; /* 🐛 FIX: Full width */
        height: auto; /* 🐛 FIX: Auto height */
        
        border-bottom: 1px solid rgba(83, 98, 133, 0.3); /* 🐛 FIX: Use rgba for consistency */
        
        flex: none;
        order: 2; /* 🐛 FIX: Third in visual order */
        align-self: stretch;
    }
    
    .mobile-chat-tab {
        box-sizing: border-box;
        
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 0px; /* 🐛 FIX: Vertical padding only, no horizontal */
        gap: 6px;
        
        min-height: 44px; /* Touch target minimum (iOS guidelines) */
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent; /* 🐛 FIX: Transparent border for inactive */
        cursor: pointer;
        
        flex: none;
        position: relative;
        transition: border-color 0.2s, color 0.2s;
    }
    
    .mobile-chat-tab span {
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500; /* 🐛 FIX: Medium weight for better readability */
        font-size: 14px; /* 🐛 FIX: Increased from 12px to 14px */
        line-height: 20px;
        color: #536285;
        white-space: nowrap;
        
        flex: none;
        order: 0;
    }
    
    .mobile-chat-tab.active {
        border-bottom-color: #555DFF; /* 🐛 FIX: Purple bottom border for active */
    }
    
    .mobile-chat-tab.active span {
        color: #555DFF; /* 🐛 FIX: Purple text for active */
        font-weight: 600; /* 🐛 FIX: Bold for active tab */
    }
    
    /* Tab Badge */
    .mobile-chat-tab .tab-badge {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1px 2px;
        gap: 8px;
        
        width: auto;
        min-width: 16px;
        height: 14px;
        
        background: #29344E;
        border-radius: 100px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 12px;
        color: #FFFFFF;
        
        flex: none;
        order: 1;
    }
    
    .mobile-chat-tab.active .tab-badge {
        background: #555DFF;
        color: #FFFFFF !important; /* 🔥 BUG FIX: Force white text on active tabs */
        font-weight: 700; /* Extra bold for active state */
    }
    
    /* ============================================
       CONTACT LIST
       ============================================ */
    
    .mobile-contact-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px 0px 80px 0px; /* 🔥 FIX: Extra bottom padding (80px) so last contact visible above bottom nav */
        gap: 0px;
        
        width: 100%;
        flex: 1; /* Grow to fill remaining space */
        order: 3; /* 🐛 FIX: Fourth/last in visual order - comes AFTER search, buttons, tabs */
        overflow-y: scroll !important; /* 🔥 FIX: Force scroll! */
        overflow-x: hidden; /* No horizontal scroll */
        min-height: 0; /* 🔥 FIX: Allow flex child to shrink below content size */
        max-height: calc(100vh - 380px); /* 🔥 FIX: Account for header(60) + title(60) + search(56) + buttons(64) + tabs(48) + nav(60) + padding(32) = ~380px */
        -webkit-overflow-scrolling: touch; /* 🔥 MOBILE: Smooth scrolling on iOS */
    }
    
    /* 🔥 Custom scrollbar for mobile contact list */
    .mobile-contact-list::-webkit-scrollbar {
        width: 4px;
    }
    
    .mobile-contact-list::-webkit-scrollbar-track {
        background: rgba(83, 98, 133, 0.05);
    }
    
    .mobile-contact-list::-webkit-scrollbar-thumb {
        background: rgba(85, 93, 255, 0.3);
        border-radius: 2px;
    }
    
    .mobile-contact-list::-webkit-scrollbar-thumb:hover {
        background: rgba(85, 93, 255, 0.5);
    }
    
    /* Contact Item */
    .mobile-contact-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 20px;
        gap: 12px;
        
        width: 100%;
        max-width: 360px;
        height: 48px;
        
        cursor: pointer;
        transition: background 0.2s;
        
        flex: none;
        align-self: stretch;
    }
    
    .mobile-contact-item:active {
        background: rgba(85, 93, 255, 0.1);
    }
    
    /* Contact Avatar - Agent #11 Fix (Oct 27, 2025) */
    /* 44px for iOS touch target compliance */
    .mobile-contact-avatar {
        width: 44px;
        height: 44px;
        border-radius: 100px;
        overflow: hidden;
        
        flex: none;
        order: 0;
    }
    
    .mobile-contact-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Avatar fallback with gradient */
    .mobile-contact-avatar.gradient-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 32px;
        color: #FFFFFF;
    }
    
    /* Contact Info */
    .mobile-contact-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 5px;
        
        width: 260px;
        height: 48px;
        
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 1;
    }
    
    /* Contact Name + Time Row */
    .mobile-contact-name-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        
        width: 260px;
        height: 20px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .mobile-contact-name {
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        color: #FFFFFF;
        
        flex: none;
        order: 0;
    }
    
    .mobile-contact-time {
        height: 16px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #536285;
        
        flex: none;
        order: 1;
    }
    
    /* Contact Preview + Badge Row */
    .mobile-contact-preview-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;
        
        width: 260px;
        height: 20px;
        
        flex: none;
        order: 1;
        align-self: stretch;
    }
    
    .mobile-contact-preview {
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #536285;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        flex: none;
        order: 0;
        flex-grow: 1;
    }
    
    /* Unread Badge */
    .mobile-contact-unread-badge {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2px 4px;
        gap: 8px;
        
        min-width: 23px;
        height: 20px;
        
        background: #555DFF;
        border-radius: 100px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #FFFFFF;
        
        flex: none;
        order: 1;
    }
    
    /* Read status indicator (check/check-check) */
    .mobile-contact-read-status {
        width: 16px;
        height: 16px;
        flex: none;
        order: 1;
    }
    
    .mobile-contact-read-status svg path {
        stroke: #555DFF;
        stroke-width: 1.2px;
    }
    
    /* ============================================
       SCREEN 2: CONVERSATION
       ============================================ */
    
    /* 🔥 BUG FIX: Force Montserrat font on all private chat header elements (mobile) */
    .private-chat-header,
    .private-chat-header *,
    .chat-conversation-header,
    .chat-conversation-header *,
    .recipient-info .chat-title,
    .recipient-info .chat-subtitle,
    .contact-name,
    .contact-wallet {
        font-family: 'Montserrat', sans-serif !important;
    }
    
    .mobile-chat-conversation-screen {
        display: none; /* Hidden by default */
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        
        width: 100%;
        height: 100%; /* Full height of parent */
        
        background: #141626;
        
        /* Use flex positioning within parent, not fixed */
        flex: 1;
        order: 1;
    }
    
    .mobile-chat-conversation-screen.active {
        display: flex;
    }
    
    /* 🐛 FIX: Shrink chat components so input area is visible */
    /* 🔥 MOBILE FIX: Make private chat cover "CHAT" title like group chat */
    .private-chat-component {
        position: fixed !important;
        top: 60px !important; /* Below mobile header - COVERS the page title! */
        left: 0 !important;
        right: 0 !important;
        bottom: 80px !important; /* 🔥 FIX: Account for bottom nav (64px + 16px padding = 80px total) */
        height: auto !important; /* Let top/bottom positioning handle height */
        max-height: none !important;
        overflow: hidden;
        z-index: 100 !important;
        background: rgba(10, 15, 35, 0.6) !important;
    }
    
    /* Community chat interface needs different height */
    .chat-interface-component,
    .chat-interface {
        height: calc(100vh - 140px) !important; /* 🔥 BUG FIX (Agent #9 - Oct 26): Fixed height artifacts */
        max-height: calc(100vh - 140px) !important;
        overflow: hidden;
    }
    
    /* 🔥 BUG FIX #4: Force visibility of community chat interface on mobile */
    .chat-interface,
    .chat-interface-component {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Messages area should fill available space minus input */
    #private-chat-messages-area,
    #chat-messages-area,
    .chat-messages-container,
    .community-messages-container,
    .messages-container {
        height: calc(100% - 140px) !important; /* Leave room for input area (~140px) */
        overflow-y: auto !important;
        padding-bottom: 60px !important; /* Allow scrolling to see last message */
        display: flex !important; /* 🔥 BUG FIX #4: Force display */
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Input area stays at bottom */
    .private-chat-input-area,
    .chat-interface-input-area {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
    }
    
    /* Conversation Header */
    .mobile-conversation-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        gap: 16px;
        
        width: 100%;
        max-width: 360px;
        height: 64px;
        
        background: #00091E;
        
        flex: none;
        order: 0;
    }
    
    /* Left Side (Back + Avatar + Name) */
    .mobile-conversation-header-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;
        
        width: auto;
        height: 44px;
        
        flex: none;
        order: 0;
    }
    
    /* Back Arrow */
    .mobile-back-arrow {
        min-width: 44px; /* 🐛 FIX: Touch target minimum (iOS guidelines) */
        min-height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px; /* Center the 24px icon */
        display: flex;
        align-items: center;
        justify-content: center;
        
        flex: none;
        order: 0;
        
        transition: transform 0.2s;
    }
    
    .mobile-back-arrow svg {
        width: 24px;
        height: 24px;
    }
    
    .mobile-back-arrow:active {
        transform: scale(0.9);
    }
    
    .mobile-back-arrow svg path {
        stroke: #FFFFFF;
        stroke-width: 2px;
    }
    
    /* Conversation Info (Avatar + Name/Status) */
    .mobile-conversation-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 16px;
        
        width: auto;
        height: 44px;
        
        flex: none;
        order: 1;
    }
    
    .mobile-conversation-avatar {
        width: 40px;
        height: 40px;
        border-radius: 100px;
        overflow: hidden;
        
        flex: none;
        order: 0;
    }
    
    .mobile-conversation-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .mobile-conversation-avatar.gradient-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: #FFFFFF;
    }
    
    .mobile-conversation-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        
        width: 80px;
        height: 44px;
        
        flex: none;
        order: 1;
    }
    
    .mobile-conversation-name {
        width: 80px;
        height: 24px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #FFFFFF;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .mobile-conversation-status {
        width: 80px;
        height: 20px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #536285;
        
        flex: none;
        order: 1;
        align-self: stretch;
    }
    
    /* Search Icon (Right) */
    .mobile-conversation-search-btn {
        min-width: 44px; /* 🐛 FIX: Touch target minimum (iOS guidelines) */
        min-height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px; /* Center the 24px icon */
        display: flex;
        align-items: center;
        justify-content: center;
        
        flex: none;
        order: 1;
        
        transition: transform 0.2s;
    }
    
    .mobile-conversation-search-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .mobile-conversation-search-btn:active {
        transform: scale(0.9);
    }
    
    .mobile-conversation-search-btn svg path {
        stroke: #536285;
        stroke-width: 2px;
    }
    
    /* ============================================
       MESSAGES AREA
       ============================================ */
    
    .mobile-messages-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        
        width: 100%;
        flex: 1;
        
        background: #141626;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
        flex: none;
        order: 1;
    }
    
    /* Date Divider */
    .mobile-date-divider {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px 0px;
        gap: 8px;
        
        width: 100%;
        max-width: 360px;
        height: 40px;
        
        flex: none;
        align-self: stretch;
    }
    
    .mobile-date-badge {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 8px;
        gap: 8px;
        
        width: auto;
        height: 24px;
        
        background: #1E273C;
        border-radius: 20px;
        
        flex: none;
        order: 0;
    }
    
    .mobile-date-badge span {
        width: auto;
        height: 16px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #EBEBEB;
        
        flex: none;
        order: 0;
    }
    
    /* ============================================
       MESSAGE BUBBLES
       ============================================ */
    
    /* Message Container (Sent - Right aligned) */
    .mobile-message-sent {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 8px 24px;
        
        width: 100%;
        max-width: 360px;
        min-height: 84px;
        
        flex: none;
        align-self: stretch;
    }
    
    /* Message Container (Received - Left aligned) */
    .mobile-message-received {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 24px;
        
        width: 100%;
        max-width: 360px;
        min-height: 84px;
        
        flex: none;
        align-self: stretch;
    }
    
    /* Message Bubble (Sent) */
    .mobile-message-bubble-sent {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
        gap: 10px;
        
        max-width: 240px;
        min-height: 44px;
        
        background: #313578;
        border-radius: 16px 16px 0px 16px;
        
        flex: none;
        order: 0;
    }
    
    /* Message Bubble (Received) */
    .mobile-message-bubble-received {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px 16px;
        gap: 10px;
        
        max-width: 240px;
        min-height: 44px;
        
        background: #38394F;
        border-radius: 0px 16px 16px 16px;
        
        flex: none;
        order: 0;
    }
    
    /* Message Text */
    .mobile-message-text {
        max-width: 240px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        word-wrap: break-word;
        
        flex: none;
        order: 0;
    }
    
    .mobile-message-bubble-received .mobile-message-text {
        color: #EBEBEB;
    }
    
    /* Message Image */
    .mobile-message-image {
        width: 283px;
        max-width: 283px;
        height: auto;
        border-radius: 12px;
        
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 1;
    }
    
    /* Time + Read Receipt */
    .mobile-message-time-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 4px 0px;
        gap: 2px;
        
        width: auto;
        height: 24px;
        
        flex: none;
        order: 1;
    }
    
    .mobile-message-time {
        height: 16px;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #536285;
        
        flex: none;
        order: 0;
    }
    
    .mobile-message-read-status {
        width: 16px;
        height: 16px;
        flex: none;
        order: 1;
    }
    
    .mobile-message-read-status svg path {
        stroke: #536285;
        stroke-width: 1.2px;
    }
    
    /* ============================================
       MESSAGE INPUT
       ============================================ */
    
    .mobile-message-input-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        
        position: fixed;
        width: 100%;
        max-width: 360px;
        height: 72px;
        left: 0px;
        bottom: 98px; /* Above bottom nav */
        
        background: #141626;
        z-index: 999;
    }
    
    .mobile-message-input-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 20px;
        gap: 8px;
        
        width: 100%;
        max-width: 360px;
        height: 56px;
        
        background: #00091E;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .mobile-message-input-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 12px;
        
        width: 320px;
        height: 44px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .mobile-message-input-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 12px;
        
        width: 248px;
        height: 44px;
        
        flex: none;
        order: 0;
        flex-grow: 1;
    }
    
    /* Paperclip Button */
    .mobile-paperclip-btn {
        width: 24px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        
        flex: none;
        order: 0;
        
        transition: transform 0.2s;
    }
    
    .mobile-paperclip-btn:active {
        transform: scale(0.9);
    }
    
    .mobile-paperclip-btn svg path {
        fill: #536285;
    }
    
    /* Input Field Container */
    .mobile-input-field-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 8px;
        
        width: 212px;
        height: 44px;
        
        background: #0D1529;
        border-radius: 16px;
        border: none;
        
        flex: none;
        order: 1;
        flex-grow: 1;
    }
    
    .mobile-input-field {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 2px;
        
        width: 180px;
        height: 20px;
        
        flex: none;
        order: 0;
        align-self: stretch;
    }
    
    .mobile-message-input {
        width: 100%;
        height: 20px;
        background: transparent;
        border: none;
        outline: none;
        
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #EBEBEB;
        
        flex: none;
        order: 0;
        flex-grow: 1;
    }
    
    .mobile-message-input::placeholder {
        color: #536285;
    }
    
    /* Emoji Button (inside input wrapper) */
    .mobile-emoji-btn {
        width: 24px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        
        flex: none;
        order: 1;
        
        transition: transform 0.2s;
    }
    
    .mobile-emoji-btn:active {
        transform: scale(0.9);
    }
    
    .mobile-emoji-btn svg path {
        stroke: #536285;
        stroke-width: 2px;
    }
    
    /* Send Button */
    .mobile-send-btn {
        width: 24px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        
        flex: none;
        order: 2;
        
        transition: transform 0.2s;
    }
    
    .mobile-send-btn:active {
        transform: scale(0.9);
    }
    
    .mobile-send-btn svg path {
        fill: #555DFF;
    }
    
    /* 🔥 BUG FIX (Agent #9 - Oct 26): Private chat input font size on mobile */
    .private-chat-message-input {
        font-size: 13px !important; /* Match community chat input size */
    }
    
    /* 🔥 BUG FIX (Agent #9 - Oct 26): Remove box-shadow from send button on mobile */
    .private-chat-send-btn {
        box-shadow: none !important; /* Clean mobile look */
    }
}

/* ============================================
   HIDE DESKTOP CHAT LAYOUT ON MOBILE
   ============================================ */

@media (min-width: 769px) {
    .mobile-chat-contact-list-screen,
    .mobile-chat-conversation-screen {
        display: none !important;
    }
}