* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #00a884;
            --primary-dark: #008069;
            --bg-dark: #111b21;
            --bg-panel: #202c33;
            --bg-chat: #0b141a;
            --bg-message-out: #005c4b;
            --bg-message-in: #202c33;
            --text-primary: #e9edef;
            --text-secondary: #8696a0;
            --border-color: #2a3942;
            --star-color: #f5c400;
            --note-color: #53bdeb;
            --danger: #ea4335;
        }
        body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-dark); min-height: 100vh; overflow: hidden; color: var(--text-primary); }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
        * { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
        
        .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-dark), var(--bg-panel)); }
        .login-box { background: var(--bg-panel); padding: 40px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); width: 100%; max-width: 400px; border: 1px solid var(--border-color); }
        .login-box h1 { color: var(--primary); margin-bottom: 8px; font-size: 24px; display: flex; align-items: center; gap: 12px; }
        .login-box > p { color: var(--text-secondary); margin-bottom: 30px; font-size: 14px; }
        
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text-secondary); font-size: 14px; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 15px; background: var(--bg-dark); color: var(--text-primary); font-family: inherit; }
        .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
        
        .btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-secondary { background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border-color); }
        .btn-secondary:hover { background: var(--border-color); }
        .btn-danger { background: var(--danger); color: white; }
        .btn-icon { padding: 8px 12px; background: transparent; color: var(--text-secondary); border: none; }
        .btn-icon:hover { color: var(--text-primary); background: var(--border-color); }
        .btn-full { width: 100%; justify-content: center; }
        .btn-sm { padding: 6px 12px; font-size: 12px; }
        
        .error-msg { background: rgba(234,67,53,0.2); color: #f87171; padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; border: 1px solid rgba(234,67,53,0.3); }
        .app-container { display: flex; height: 100vh; overflow: hidden; }
        
        .sidebar { width: 380px; background: var(--bg-panel); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
        .sidebar-header { padding: 16px 20px; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .sidebar-header h2 { font-size: 20px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; flex: 1; }
        
        .sidebar-tabs { display: flex; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); }
        .sidebar-tab { flex: 1; padding: 12px 8px; text-align: center; cursor: pointer; color: var(--text-secondary); font-size: 12px; font-weight: 500; border-bottom: 2px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .sidebar-tab i { font-size: 18px; }
        .sidebar-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
        .sidebar-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        
        .sidebar-content { flex: 1; overflow-y: auto; }
        
        .chat-item { padding: 14px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; gap: 14px; }
        .chat-item:hover { background: rgba(255,255,255,0.05); }
        .chat-item.active { background: var(--bg-dark); }
        .chat-item-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--primary-dark); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 18px; flex-shrink: 0; }
        .chat-item-content { flex: 1; min-width: 0; }
        .chat-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .chat-item-name { font-weight: 600; color: var(--text-primary); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chat-item-date { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
        .chat-item-info { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
        .chat-item-badge { background: var(--primary); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
        
        .empty-state { padding: 60px 40px; text-align: center; color: var(--text-secondary); position: relative; }
        .empty-state i { font-size: 64px; margin-bottom: 20px; opacity: 0.3; display: block; }
        
        .item-list-item { padding: 14px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
        .item-list-item:hover { background: rgba(255,255,255,0.05); }
        .item-list-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
        .item-list-chat { font-size: 11px; color: var(--primary); background: rgba(0,168,132,0.15); padding: 2px 8px; border-radius: 10px; }
        .item-list-sender { font-size: 13px; font-weight: 600; color: var(--primary); }
        .item-list-content { font-size: 13px; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
        .item-list-content.rtl { direction: rtl; text-align: right; }
        .item-list-note { font-size: 12px; color: var(--note-color); background: rgba(83,189,235,0.1); padding: 6px 10px; border-radius: 6px; margin-top: 6px; }
        .item-list-meta { font-size: 11px; color: var(--text-secondary); }
        
        /* Media Gallery */
        .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; }
        .media-grid-item { aspect-ratio: 1; position: relative; cursor: pointer; overflow: hidden; background: var(--bg-dark); }
        .media-grid-item img, .media-grid-item video { width: 100%; height: 100%; object-fit: cover; }
        .media-grid-item .media-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
        .media-grid-item:hover .media-overlay { opacity: 1; }
        .media-grid-item .media-type-icon { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .media-filter { padding: 12px 16px; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); display: flex; gap: 8px; flex-wrap: wrap; }
        .media-filter-btn { padding: 6px 12px; border-radius: 16px; font-size: 12px; cursor: pointer; background: var(--bg-panel); color: var(--text-secondary); border: 1px solid var(--border-color); }
        .media-filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
        .load-more { padding: 16px; text-align: center; }
        
        .chat-view { flex: 1; display: flex; flex-direction: column; background: var(--bg-chat); height: 100vh; overflow: hidden; }
        .chat-header { padding: 10px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 14px; }
        .chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-dark); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; }
        .chat-title { flex: 1; }
        .chat-title h3 { font-size: 16px; color: var(--text-primary); font-weight: 600; }
        .chat-title p { font-size: 12px; color: var(--text-secondary); }
        .chat-header-actions { display: flex; gap: 4px; }
        
        .chat-toolbar { padding: 10px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .search-input-wrapper { flex: 1; position: relative; min-width: 200px; }
        .search-input-wrapper i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
        .search-input-wrapper input { width: 100%; padding: 10px 16px 10px 42px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; background: var(--bg-dark); color: var(--text-primary); }
        .search-input-wrapper input:focus { outline: none; border-color: var(--primary); }
        
        .date-picker-btn { position: relative; }
        .date-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; z-index: 100; box-shadow: 0 10px 40px rgba(0,0,0,0.5); min-width: 280px; }
        .date-dropdown-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .date-dropdown-header h4 { font-size: 14px; color: var(--text-primary); }
        .date-input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-dark); color: var(--text-primary); font-size: 14px; }
        .date-range-info { font-size: 11px; color: var(--text-secondary); margin-top: 8px; text-align: center; }
        
        #chatContent { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
        .chat-content-wrapper { display: flex; flex: 1; overflow: hidden; min-height: 0; }
        
        .messages-container { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px; min-height: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
        .messages-inner { display: flex; flex-direction: column; min-height: 100%; }
        
        .load-more-messages { text-align: center; padding: 16px; }
        .date-separator { text-align: center; margin: 20px 0; }
        .date-separator span { background: var(--bg-panel); padding: 8px 16px; border-radius: 8px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
        
        .message { margin-bottom: 2px; display: flex; position: relative; padding: 0 12px; }
        .message.sent { justify-content: flex-end; }
        .message.received { justify-content: flex-start; }
        .message.system { justify-content: center; }
        
        .message-wrapper { max-width: 65%; position: relative; }
        .message-bubble { padding: 6px 12px 6px 12px; border-radius: 8px; position: relative; }
        .message.sent .message-bubble { background: var(--bg-message-out); border-top-right-radius: 0; }
        .message.received .message-bubble { background: var(--bg-message-in); border-top-left-radius: 0; }
        .message.system .message-bubble { background: rgba(255,235,150,0.1); font-size: 12px; color: #ffeeba; max-width: 85%; text-align: center; padding: 8px 16px; }
        
        .message-sender { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
        .message-content { font-size: 14px; color: var(--text-primary); word-wrap: break-word; white-space: pre-wrap; line-height: 1.4; }
        .message-content.rtl { direction: rtl; text-align: right; }
        .message-content.media-placeholder { color: var(--text-secondary); font-style: italic; display: flex; align-items: center; gap: 8px; }
        
        .message-footer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; }
        .message-time { font-size: 11px; color: rgba(255,255,255,0.6); }
        .message-indicators { display: flex; gap: 4px; }
        .message-indicators i { font-size: 10px; }
        .message-indicators .fa-star { color: var(--star-color); }
        .message-indicators .fa-sticky-note { color: var(--note-color); }
        
        /* Message Actions - Now appears on top right corner of bubble */
        .message-actions { position: absolute; top: -8px; display: none; gap: 2px; background: var(--bg-panel); padding: 4px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.4); z-index: 10; border: 1px solid var(--border-color); }
        .message.sent .message-actions { left: -8px; }
        .message.received .message-actions { right: -8px; }
        .message-wrapper:hover .message-actions { display: flex; }
        .message-action-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px 8px; border-radius: 4px; font-size: 13px; }
        .message-action-btn:hover { background: var(--border-color); color: var(--text-primary); }
        .message-action-btn.starred { color: var(--star-color); }
        .message-action-btn.has-note { color: var(--note-color); }
        
        .message-note-preview { background: rgba(83,189,235,0.15); padding: 6px 10px; border-radius: 6px; margin-top: 6px; font-size: 12px; color: var(--note-color); }
        .message.highlighted .message-bubble { box-shadow: 0 0 0 2px var(--star-color); }
        .message.current-highlight .message-bubble { box-shadow: 0 0 0 3px var(--primary); }
        mark { background: var(--star-color); color: var(--bg-dark); padding: 1px 3px; border-radius: 3px; }
        
        .message-media { margin: 6px 0; max-width: 300px; border-radius: 8px; overflow: hidden; }
        .message-media img { width: 100%; max-height: 300px; object-fit: cover; cursor: pointer; display: block; }
        .message-media video { width: 100%; max-height: 300px; display: block; }
        .message-media audio { width: 100%; min-width: 200px; }
        .message-media-doc { display: flex; align-items: center; gap: 10px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px; text-decoration: none; color: var(--text-primary); }
        .message-media-doc:hover { background: rgba(255,255,255,0.1); }
        .message-media-doc i { font-size: 24px; color: var(--primary); }
        
        .search-sidebar { width: 340px; background: var(--bg-panel); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
        .search-sidebar.hidden { display: none; }
        .search-sidebar-header { padding: 16px; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
        .search-sidebar-header h3 { font-size: 14px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
        .search-results { flex: 1; overflow-y: auto; }
        .search-result-item { padding: 14px 16px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
        .search-result-item:hover { background: rgba(255,255,255,0.05); }
        .search-result-item.active { background: rgba(0,168,132,0.15); }
        .search-result-sender { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 4px; }
        .search-result-content { font-size: 13px; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
        .search-result-content.rtl { direction: rtl; text-align: right; }
        .search-result-meta { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
        .search-empty { padding: 60px 20px; text-align: center; color: var(--text-secondary); }
        .search-empty i { font-size: 48px; margin-bottom: 16px; opacity: 0.3; display: block; }
        .search-loading { padding: 60px 20px; text-align: center; }
        
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .modal { background: var(--bg-panel); border-radius: 16px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-color); }
        .modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { font-size: 18px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
        .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-secondary); }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; }
        
        .note-textarea { min-height: 120px; resize: vertical; }
        .note-message-preview { background: var(--bg-dark); padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); max-height: 120px; overflow-y: auto; }
        .note-message-preview .sender { color: var(--primary); font-weight: 600; margin-bottom: 4px; }
        
        .drop-zone { border: 2px dashed var(--border-color); border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; margin-bottom: 20px; }
        .drop-zone:hover, .drop-zone.dragover { border-color: var(--primary); background: rgba(0,168,132,0.1); }
        .drop-zone i { font-size: 48px; margin-bottom: 16px; color: var(--text-secondary); display: block; }
        .drop-zone p { color: var(--text-secondary); margin-bottom: 4px; }
        
        .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 2000; }
        .lightbox-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 32px; cursor: pointer; z-index: 2001; }
        .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: white; font-size: 24px; padding: 20px 16px; cursor: pointer; }
        .lightbox-nav:hover { background: rgba(255,255,255,0.2); }
        .lightbox-nav.prev { left: 20px; }
        .lightbox-nav.next { right: 20px; }
        .lightbox-content { max-width: 90vw; max-height: 85vh; }
        .lightbox-content img, .lightbox-content video { max-width: 100%; max-height: 85vh; object-fit: contain; }
        .lightbox-info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 8px; color: white; font-size: 13px; text-align: center; }
        
        .user-menu { padding: 14px 20px; background: var(--bg-dark); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
        .user-info { font-size: 13px; color: var(--text-secondary); }
        .user-info strong { color: var(--text-primary); }
        .user-actions { display: flex; gap: 8px; }
        
        .loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
        .spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        .confirm-delete { text-align: center; }
        .confirm-delete p { margin-bottom: 20px; color: var(--text-secondary); }
        
        /* Sender Colors for Groups */
        .sender-color-0 { color: #ff6b6b; }
        .sender-color-1 { color: #4ecdc4; }
        .sender-color-2 { color: #ffe66d; }
        .sender-color-3 { color: #95e1d3; }
        .sender-color-4 { color: #f38181; }
        .sender-color-5 { color: #aa96da; }
        .sender-color-6 { color: #fcbad3; }
        .sender-color-7 { color: #a8d8ea; }
        .sender-color-8 { color: #ffd3b6; }
        .sender-color-9 { color: #c9e4de; }
        
        /* Mobile Back Button - Hidden on desktop */
        .mobile-back-btn { display: none !important; }
        .sidebar-overlay { display: none; }
        
        /* Tablet - 900px */
        @media (max-width: 900px) {
            .sidebar { width: 320px; }
            .search-sidebar { width: 300px; }
            .message-wrapper { max-width: 75%; }
        }
        
        /* Mobile - 768px */
        @media (max-width: 768px) {
            body { overflow: auto; }
            
            .app-container { flex-direction: column; height: 100vh; position: relative; }
            
            /* Sidebar - Main view on mobile */
            .sidebar { 
                position: fixed; 
                top: 0; left: 0; right: 0; bottom: 0;
                width: 100%; 
                z-index: 100; 
                transform: translateX(0);
                transition: transform 0.3s ease;
            }
            .sidebar.hidden { transform: translateX(-100%); }
            
            /* Hide empty state on mobile - sidebar is main view */
            #noChatSelected { display: none !important; }
            
            /* Chat view - slides in from right */
            .chat-view { 
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                width: 100%;
                z-index: 200;
                transform: translateX(100%);
                transition: transform 0.3s ease;
            }
            .chat-view.active { transform: translateX(0); }
            
            /* Sidebar overlay - not needed anymore */
            .sidebar-overlay { display: none !important; }
            
            /* Back button in chat header */
            .mobile-back-btn {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                background: none;
                border: none;
                color: var(--text-primary);
                font-size: 18px;
                cursor: pointer;
                flex-shrink: 0;
            }
            
            /* Sidebar header adjustments */
            .sidebar-header { padding: 12px 16px; gap: 10px; }
            .sidebar-header h2 { font-size: 18px; flex: 1; }
            
            /* Chat header on mobile */
            .chat-header { 
                padding: 8px 10px; 
                gap: 8px;
                flex-wrap: nowrap;
            }
            .chat-avatar { width: 36px; height: 36px; font-size: 14px; flex-shrink: 0; }
            .chat-title { 
                flex: 1; 
                min-width: 0; 
                overflow: hidden;
            }
            .chat-title h3 { 
                font-size: 14px; 
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .chat-title p { font-size: 11px; }
            
            /* Chat header actions - smaller on mobile */
            .chat-header-actions { 
                display: flex;
                gap: 0;
                flex-shrink: 0;
            }
            .chat-header-actions .btn-icon { 
                padding: 8px; 
                font-size: 15px;
                min-width: 36px;
                min-height: 36px;
            }
            
            /* Sidebar tabs - icon only on small screens */
            .sidebar-tab { padding: 14px 8px; gap: 0; }
            .sidebar-tab span { display: none; }
            .sidebar-tab i { font-size: 22px; }
            
            /* Chat items - larger touch targets */
            .chat-item { padding: 16px; }
            .chat-item-avatar { width: 52px; height: 52px; }
            
            /* Chat header */
            .chat-header { padding: 8px 12px; gap: 10px; }
            .chat-avatar { width: 38px; height: 38px; font-size: 14px; }
            .chat-title h3 { font-size: 15px; }
            .chat-title p { font-size: 11px; }
            .chat-header-actions .btn-icon { padding: 10px; }
            
            /* Chat toolbar */
            .chat-toolbar { padding: 10px 12px; gap: 8px; }
            .search-input-wrapper { min-width: 0; flex: 1; }
            .search-input-wrapper input { padding: 12px 16px 12px 42px; }
            
            /* Messages */
            .messages-container { padding: 12px 8px; }
            .message { padding: 0 8px; }
            .message-wrapper { max-width: 85%; }
            .message-bubble { padding: 8px 12px; }
            .message-content { font-size: 15px; }
            
            /* Message actions - always visible on mobile */
            .message-actions { 
                position: relative;
                top: 0;
                display: flex !important;
                margin-top: 4px;
                background: transparent;
                box-shadow: none;
                border: none;
                padding: 0;
                justify-content: flex-end;
            }
            .message.sent .message-actions { left: 0; }
            .message.received .message-actions { right: 0; justify-content: flex-start; }
            .message-action-btn { padding: 8px 10px; font-size: 14px; }
            
            /* Search sidebar - full screen */
            .search-sidebar {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                width: 100%;
                max-width: none;
                z-index: 1100;
            }
            .search-sidebar-header { padding: 12px 16px; }
            .search-result-item { padding: 16px; }
            
            /* Media grid */
            .media-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
            .media-filter { padding: 10px 12px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
            .media-filter-btn { white-space: nowrap; padding: 8px 14px; }
            
            /* Modals */
            .modal-overlay { padding: 0; align-items: flex-end; }
            .modal { 
                max-width: 100%; 
                max-height: 90vh;
                border-radius: 20px 20px 0 0;
                margin: 0;
            }
            .modal-header { padding: 16px; }
            .modal-header h3 { font-size: 16px; }
            .modal-body { padding: 16px; }
            .modal-footer { padding: 12px 16px; }
            
            /* Lightbox */
            .lightbox-close { top: 12px; right: 12px; font-size: 28px; padding: 10px; }
            .lightbox-nav { padding: 16px 12px; font-size: 20px; }
            .lightbox-nav.prev { left: 8px; }
            .lightbox-nav.next { right: 8px; }
            .lightbox-info { 
                bottom: 12px; 
                left: 12px; right: 12px;
                transform: none;
                padding: 12px;
            }
            
            /* User menu at bottom of sidebar */
            .user-menu { padding: 12px 16px; }
            .user-info { font-size: 12px; }
            
            /* Date picker dropdown */
            .date-dropdown { 
                position: fixed;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0;
                border-radius: 20px 20px 0 0;
                min-width: auto;
            }
            
            /* Forms */
            .form-group input, .form-group textarea, .form-group select {
                padding: 14px 16px;
                font-size: 16px; /* Prevents zoom on iOS */
            }
            
            /* Buttons - larger touch targets */
            .btn { padding: 12px 20px; min-height: 44px; }
            .btn-icon { padding: 12px; min-width: 44px; min-height: 44px; }
            .btn-sm { padding: 10px 14px; }
            
            /* Drop zone */
            .drop-zone { padding: 30px 20px; }
            .drop-zone i { font-size: 40px; }
            
            /* Login */
            .login-box { 
                margin: 16px; 
                padding: 24px; 
                border-radius: 12px;
                max-width: none;
            }
            .login-box h1 { font-size: 20px; }
            
            /* Empty states */
            .empty-state { padding: 40px 24px; }
            .empty-state i { font-size: 48px; }
            
            /* Tabs - Import modal tabs */
            .modal .sidebar-tabs { overflow-x: auto; }
            .modal .sidebar-tab { flex-direction: row; gap: 8px; }
            .modal .sidebar-tab span { display: inline; }
        }
        
        /* Small phones - 480px */
        @media (max-width: 480px) {
            .sidebar-header h2 { font-size: 16px; }
            .sidebar-header h2 i { font-size: 20px; }
            
            .chat-item { padding: 14px 12px; gap: 12px; }
            .chat-item-avatar { width: 48px; height: 48px; font-size: 16px; }
            .chat-item-name { font-size: 14px; }
            .chat-item-info { font-size: 12px; }
            
            /* More compact chat header on small phones */
            .chat-header { padding: 6px 8px; gap: 6px; }
            .chat-avatar { width: 32px; height: 32px; font-size: 12px; }
            .chat-title h3 { font-size: 13px; }
            .chat-title p { font-size: 10px; }
            .mobile-back-btn { width: 34px; height: 34px; font-size: 16px; }
            
            .chat-header-actions .btn-icon { 
                padding: 6px; 
                font-size: 14px;
                min-width: 32px;
                min-height: 32px;
            }
            
            /* Hide less important buttons on very small screens */
            .hide-on-small { display: none !important; }
            
            .message-wrapper { max-width: 88%; }
            .message-media { max-width: 100%; }
            .message-media img { max-height: 250px; }
            
            .media-grid { grid-template-columns: repeat(3, 1fr); }
            
            .modal-header h3 { font-size: 15px; }
            .modal-body { padding: 14px; }
            
            .form-group { margin-bottom: 16px; }
            
            .login-box { padding: 20px; margin: 12px; }
            .login-box h1 { font-size: 18px; gap: 8px; }
            .login-box > p { font-size: 13px; margin-bottom: 24px; }
        }
        
        /* Landscape phone */
        @media (max-width: 768px) and (max-height: 500px) {
            .modal { max-height: 100vh; border-radius: 0; }
            .lightbox-content { max-height: 80vh; }
        }
        
        /* Safe area for notched phones */
        @supports (padding-top: env(safe-area-inset-top)) {
            @media (max-width: 768px) {
                .sidebar-header { padding-top: calc(12px + env(safe-area-inset-top)); }
                .chat-header { padding-top: calc(8px + env(safe-area-inset-top)); }
                .user-menu { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
                .modal { padding-bottom: env(safe-area-inset-bottom); }
            }
        }
        
        /* Dark mode scrollbar for mobile */
        @media (max-width: 768px) {
            ::-webkit-scrollbar { width: 4px; height: 4px; }
            ::-webkit-scrollbar-track { background: transparent; }
            ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
        }
        
        /* Touch feedback */
        @media (hover: none) and (pointer: coarse) {
            .chat-item:active { background: rgba(255,255,255,0.1); }
            .btn:active { transform: scale(0.97); }
            .message-action-btn:active { background: var(--border-color); }
            .sidebar-tab:active { background: rgba(255,255,255,0.1); }
        }
        
        /* Prevent text selection on buttons */
        .btn, .toggle-btn, .sidebar-tab, .chat-item {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }