/* =========================================
           1. APP STYLES
           ========================================= */
        :root {
            --page-bg: #0b1113;
            --panel-bg: #0b1418;
            --header-bg: #202628;
            --incoming-bg: #202c33;
            --outgoing-bg: #005c4b;
            --system-bg: #182229;
            --system-text: #d1d7db;
            --muted: #8696a0;
            --text: #e9edef;
            --name-sent: #19E6CA;
            --name-received: #25d366;
            --encryption-text: #ffc966;
            --deleted-incoming-bg: #2b2f31;
            --deleted-text: #a4a7aa;
            --deleted-icon-bg: rgba(255,255,255,0.06);
            --business-encryption-bg: #0f2b2a;
            --business-encryption-text: #8fd7c4;
        }

        * { margin:0; padding:0; box-sizing:border-box; }
        
        html {
            /* Fix for print sizing */
            height: 100%;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: var(--page-bg);
            color: var(--text);
            /* Mobile Viewport Fix */
            height: 100vh;
            height: 100dvh;
            width: 100%;
            overflow: hidden; /* Lock scroll on body */
            display: flex;
            flex-direction: column;
        }

        /* Helper class to hide elements */
        .hidden {
            display: none !important;
        }

        /* --- WRAPPER TO CONTROL FLEXBOX --- */
        #app-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        /* --- APP HEADER --- */
        .header {
            background: var(--header-bg);
            padding: 10px 16px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
            z-index:100;
            flex-shrink: 0;
        }

        .header-left { display:flex; align-items:center; gap:12px; }
        .header-icon {
            width:40px; height:40px; background:#19E6CA; border-radius:50%;
            display:flex; align-items:center; justify-content:center; font-size:20px;
        }
        .header-title h1 { font-size:19px; font-weight:500; color:var(--text); }
        .header-title p { font-size:12px; color:var(--muted); margin-top:2px; }

        .header-buttons { display:flex; gap:8px; }
        .btn {
            padding:8px 16px; border-radius:8px; border:none; font-size:14px; font-weight:500; cursor:pointer;
            display:flex; align-items:center; gap:6px; transition:all .2s;
        }
        .btn-primary { background:#19E6CA; color:black; }
        .btn-primary:hover { background:#06cf9c; color:white; }
        .btn-secondary { background:#2a3942; color:var(--text); border:1px solid #3b4a54; }
        .btn-secondary:hover { background:#374248; }
        .btn:disabled { opacity:0.5; cursor:not-allowed; }

        /* --- CHAT CONTAINER --- */
        .chat-container {
            flex: 1; /* Take remaining space */
            overflow-y: auto; /* Scroll happens here */
            background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(24,34,41,0.03) 10px, rgba(24,34,41,0.03) 20px);
            background-color: var(--panel-bg);
            padding: 20px 6%;
            -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
        }

        .chat-content { max-width:1100px; margin:0 auto; padding-bottom: 20px; }

        .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); text-align:center; padding:40px; }
        .empty-icon { font-size:64px; margin-bottom:16px; opacity:0.5; }
        .empty-state h2 { font-size:20px; margin-bottom:8px; font-weight:400; }
        .empty-state p { font-size:14px; opacity:0.7; }

        .date-separator { text-align:center; margin:20px 0 12px 0; }
        .date-badge { display:inline-block; background:var(--system-bg); color:var(--muted); padding:5px 12px; border-radius:7.5px; font-size:12.5px; box-shadow:0 1px 2px rgba(0,0,0,0.2); }

        .message { display:flex; margin-bottom:0; animation:fadeIn .3s ease-in; clear:both; }
        @keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

        .message.sent { justify-content:flex-end; }
        .message.received { justify-content:flex-start; }

        .bubble {
            position:relative;
            max-width:65%;
            padding:6px 7px 8px 9px;
            box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
            word-wrap:break-word;
            margin-bottom:2px;
            overflow:visible;
            border-radius:7.5px 7.5px 7.5px 7.5px;
        }
        
        .bubble.first-in-block { margin-top: 8px; }
        .bubble.last-in-block { margin-bottom: 12px; }

        .bubble.sent { background:var(--outgoing-bg); color:var(--text); }
        .bubble.received { background:var(--incoming-bg); color:var(--text); }

        .bubble.first-in-block::after {
            content: '';
            position: absolute;
            top: 0;
            width: 12px;
            height: 12px;
        }

        .bubble.sent.first-in-block::after {
            right: -6px;
            background: var(--outgoing-bg);
            clip-path: polygon(0 0, 100% 0, 0 100%);
        }

        .bubble.received.first-in-block::after {
            left: -6px;
            background: var(--incoming-bg);
            clip-path: polygon(100% 0, 100% 100%, 0 0);
        }

        .sender-name { font-weight:500; font-size:13px; margin-bottom:3px; }
        .bubble.sent .sender-name { color:var(--name-sent); }
        .bubble.received .sender-name { color:var(--name-received); }

        .message-text { font-size:14.2px; line-height:19px; white-space:pre-wrap; word-break:break-word; display:flex; align-items:center; gap:8px; }

        .message-footer { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:6px; font-size:11px; }
        .bubble.sent .message-footer { color: rgba(209, 215, 219, 0.7); }
        .bubble.received .message-footer { color: rgba(139, 149, 158, 0.8); }

        .edited-label { font-size:11px; color: rgba(209,215,219,0.75); margin-right:6px; font-weight:500; }

        .bubble.deleted { padding-left: 12px; }
        .bubble.deleted .message-text { font-style: italic; color: var(--deleted-text); }
        .bubble.deleted.received { background: var(--deleted-incoming-bg); color: var(--deleted-text); }
        .bubble.deleted.sent { background: var(--outgoing-bg); }

        .delete-icon {
            display:inline-flex; align-items:center; justify-content:center;
            width:18px; height:18px; border-radius:50%;
            background: var(--deleted-icon-bg); color: var(--deleted-text);
            font-size:12px; flex:0 0 18px; margin-right:8px;
            box-shadow: 0 1px 0 rgba(0,0,0,0.15) inset;
        }

        .bubble.deleted .message-footer { color: var(--muted); }

        .file-attachment { display:flex; align-items:center; gap:6px; padding:8px 10px; background:rgba(11,20,26,0.3); border-radius:7.5px; margin-bottom:4px; font-size:13px; }

        .system-message { text-align:center; margin:12px auto; font-size:12.5px; color:var(--muted); background:var(--system-bg); padding:6px 12px; border-radius:7.5px; display:inline-block; max-width:85%; box-shadow:0 1px 2px rgba(0,0,0,0.2); line-height:1.4; }
        span.system-message.encryption { color: var(--encryption-text); }
        .system-message.encryption::before { content: '🔒 '; font-size:14px; }

        .system-message.business { background: var(--business-encryption-bg); color: var(--business-encryption-text); }
        .system-message.business.encryption::before { content: '🔒 '; font-size:14px; }

        .chat-container::-webkit-scrollbar { width:6px; }
        .chat-container::-webkit-scrollbar-track { background:transparent; }
        .chat-container::-webkit-scrollbar-thumb { background:#374248; border-radius:3px; }

        .loading { text-align:center; padding:20px; color:var(--muted); }

        /* --- FOOTER STYLES --- */
        .footer {
            background: var(--header-bg);
            padding: 16px;
            text-align: center;
            border-top: 1px solid #374248;
            box-shadow: 0 -1px 2px rgba(0,0,0,0.3);
            flex-shrink: 0;
            position: relative;
            z-index: 101;
        }

        .footer p { margin: 4px 0; font-size: 13px; color: var(--muted); }
        .footer p:first-child { font-weight: 500; }

        @media (max-width:768px) {
            .chat-container { padding:12px 4%; }
            .bubble { max-width:80%; }
            .header-buttons { flex-direction:column; }
            .btn { padding:6px 12px; font-size:12px; }
        }

        #fileInput { display:none; }
        
        /* =========================================
           PRINT STYLES (FIXED)
           ========================================= */
        @media print {
            @page { margin: 0.5cm; background-color: var(--panel-bg); }
            
            /* RESET the mobile layout locks */
            html, body, #app-wrapper {
                height: auto !important;
                overflow: visible !important;
                display: block !important;
                position: static !important;
            }

            .header, .footer { display: none !important; }
            
            .chat-container { 
                background: var(--panel-bg) !important; 
                background-image: none !important; 
                overflow: visible !important; 
                height: auto !important;
                padding: 0;
                display: block !important;
            }

            .chat-content { 
                max-width: 100%; 
                width: 100%;
            }

            /* Ensure colors print */
            * {
                -webkit-print-color-adjust: exact !important; 
                print-color-adjust: exact !important;
            }
            
            .message { page-break-inside: avoid; }
            .bubble { box-shadow: none; }
            .bubble.sent { background: var(--outgoing-bg) !important; }
            .bubble.received { background: var(--incoming-bg) !important; }
            .date-badge, .system-message { background: var(--system-bg) !important; }
            .bubble.sent.first-in-block::after { background: var(--outgoing-bg) !important; }
            .bubble.received.first-in-block::after { background: var(--incoming-bg) !important; }
        }

        /* =========================================
           2. SPLASH SCREEN STYLES
           ========================================= */
        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0A0F13;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            color: white;
            z-index: 9999;
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
        }

        .logo-container {
            margin-top: 26vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .logo {
            width: 150px;
            height: auto;
            user-select: none;
        }

        .bottom-container {
            position: absolute;
            bottom: 6vh;
            text-align: center;
            opacity: 0.70;
        }

        .bottom-text-top {
            font-size: 15px;
            font-weight: 300;
            color: #B0B0B0;
            margin-bottom: 3px;
        }

        .bottom-text-bottom {
            font-size: 18px;
            font-weight: 500;
            color: #E0E0E0;
        }
        
        .splash-fade-out {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }