body {
            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background: #121212; /* Default Dark Mode */
            color: #fff;
            transition: background 0.3s, color 0.3s;
        }
    .chat-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
        background: transparent;
        border: none;
        height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            display: flex;
            align-items: center;
            gap: 15px;
        padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(10, 10, 10, 0.8);
        backdrop-filter: blur(10px);
        margin-bottom: 0;
            position: relative;
            z-index: 100;
        }
        .chat-header .profile-pic {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #87ceeb;
            cursor: pointer;
        }
        .chat-header h2 {
            margin: 0;
            font-size: 1.2rem;
            color: #87ceeb;
        }
        .chat-header .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0;
        }
        .chat-messages {
            flex-grow: 1;
            overflow-y: auto;
        padding: 15px 20px;
        }
        .message-item {
            display: flex;
            margin-bottom: 10px;
            align-items: center; /* Align button and message bubble */
            position: relative; /* For picker positioning */
        }
        .message-text {
            padding: 10px 15px;
            border-radius: 18px;
            max-width: 70%;
            word-wrap: break-word;
            font-size: 0.95rem;
        }
        .message-text img {
            max-width: 100%;
            border-radius: 10px;
            cursor: pointer;
        }
        .message-text .youtube-embed {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            border-radius: 10px;
        }
        .message-text .youtube-embed iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .message-sent {
            justify-content: flex-end;
        }
        .message-sent .message-text {
            background-color: #6366f1; /* Modern Indigo for sent messages */
            color: white;
            border-bottom-right-radius: 2px;
        }
        .message-received {
            justify-content: flex-start;
        }
        .message-received .message-text {
            background-color: rgba(255, 255, 255, 0.15); /* Lighter grey for received */
            color: white;
            border-bottom-left-radius: 2px;
        }
        .message-time {
            display: inline-block;
            font-size: 0.65rem;
            color: rgba(255, 255, 255, 0.6);
            float: right;
            margin-top: 8px;
            margin-left: 12px;
            line-height: 1;
        }
        body.light-mode .message-time {
            color: rgba(0, 0, 0, 0.5);
        }
        .message-date-separator {
            text-align: center;
            margin: 15px 0;
            font-size: 0.8rem;
            color: #aaa;
        }
        .message-date-separator span {
            background: rgba(255, 255, 255, 0.1);
            padding: 4px 10px;
            border-radius: 12px;
        }
        body.light-mode .message-date-separator span {
            background: rgba(0, 0, 0, 0.05);
            color: #555;
        }
        .edit-msg-btn, .delete-msg-btn, .forward-msg-btn {
            background: none;
            border: none;
            color: #aaa;
            font-size: 0.9rem;
            cursor: pointer;
            padding: 4px;
            margin: 0;
            opacity: 0;
            transition: opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .message-item:hover .edit-msg-btn,
        .message-item:hover .delete-msg-btn,
        .message-item:hover .forward-msg-btn {
            opacity: 1;
        }
        .edited-indicator {
            font-size: 0.7rem;
            color: #bbb;
        }
        .message-input-area {
            display: flex;
        background: rgba(10, 10, 10, 0.5);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding: 15px 20px;
            color: white;
            font-size: 1rem;
        }
        .message-input-area #send-message-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            transition: transform 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .message-input-area #send-message-btn:hover {
            transform: scale(1.1);
        }
        /* Light Mode */
        body.light-mode { background: #f4f7f6; color: #333; }
    body.light-mode .chat-container { background: transparent; border: none; }
    
    body.light-mode [style*="color: white"],
    body.light-mode [style*="color: #fff"],
    body.light-mode [style*="color:#fff"],
    body.light-mode [style*="color:white"],
    body.light-mode [style*="color: #ffffff"],
    body.light-mode [style*="color:#ffffff"],
    body.light-mode [style*="color: #eee"],
    body.light-mode [style*="color:#eee"],
    body.light-mode [style*="color: #ddd"],
    body.light-mode [style*="color:#ddd"],
    body.light-mode [style*="rgb(255, 255, 255)"],
    body.light-mode [style*="rgb(238, 238, 238)"],
    body.light-mode [style*="rgb(221, 221, 221)"] { color: #333 !important; }
    
    body.light-mode .link-preview-title, body.light-mode .link-preview-desc { color: #333 !important; }
    body.light-mode .chat-header [style*="color"],
    body.light-mode .message-sent .message-text,
    body.light-mode .message-sent .message-text [style*="color"],
    body.light-mode .btn,
    body.light-mode .btn[style*="color"] { color: #fff !important; }
    
    body.light-mode .chat-header h2 { color: #0d6efd !important; }
    body.light-mode .chat-header .back-btn { color: #fff !important; }
        body.light-mode .chat-messages { border-color: #eee; }
        body.light-mode .message-received .message-text { background-color: #e9ecef; color: #333; }
    body.light-mode .message-input-area { background: #fff !important; border-top-color: #ddd !important; }
    body.light-mode .message-input-area input { background: #f8f9fa !important; color: #333 !important; border: 1px solid #ccc !important; }
        body.light-mode .message-input-area #attach-btn { color: #555; }
        body.light-mode .message-input-area #send-message-btn { color: #333; }
        body.light-mode .edit-msg-btn {
            color: #888;
        }
        body.light-mode .delete-msg-btn {
            color: #888;
        }
        body.light-mode .edited-indicator { color: #666; }
        body.light-mode .forward-msg-btn { color: #888; }
        body.light-mode .btn-transparent { color: #333 !important; }
    
    body.light-mode .theme-dropdown { background: rgba(255, 255, 255, 0.95) !important; border-color: #ddd !important; color: #333 !important; }
    body.light-mode .theme-option { border-color: #eee !important; color: #333 !important; }
    body.light-mode .theme-option:hover { background: rgba(0,0,0,0.05) !important; }

    body.light-mode #forward-modal > div,
    body.light-mode #delete-message-modal > div,
    body.light-mode #edit-message-modal > div,
    body.light-mode #user-list-modal > div { background: #fff !important; border-color: #ddd !important; color: #333 !important; }
    body.light-mode .modal-content h3,
    body.light-mode #forward-modal-title,
    body.light-mode #user-list-title { color: #0d6efd !important; }
    body.light-mode #forward-user-list > div { border-bottom-color: #eee !important; }
    body.light-mode #forward-user-list strong { color: #333 !important; }
        body.light-mode #edit-message-input { background: #f4f7f6 !important; color: #333 !important; border-color: #ccc !important; }
        /* Reaction Styles */
        .reaction-picker {
            position: absolute;
            top: -20px;
            background: #3a3a3a;
            border-radius: 15px;
            padding: 2px 4px;
            display: none;
            gap: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }
        .message-sent .reaction-picker { right: 10px; }
        .message-received .reaction-picker { left: 10px; }
        .message-item:hover .reaction-picker { display: flex; }
        .reaction-picker span {
            cursor: pointer;
            font-size: 1.1rem;
            padding: 0 3px;
            transition: transform 0.1s;
        }
        .reaction-picker span:hover { transform: scale(1.3); }

        .reactions-display { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
        .reaction-pill { background: rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 2px 8px; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; }
        .reaction-pill.user-reacted { background: #6366f1; border: 1px solid #a855f7; }
        
        /* Light mode reactions */
        body.light-mode .reaction-picker { background: #fff; border: 1px solid #ccc; }
        body.light-mode .reaction-pill { background: #e9ecef; }
        body.light-mode .reaction-pill.user-reacted { background: #0d6efd; color: white; border-color: #0d6efd; }
        body.light-mode .edited-indicator { color: #666; }
        /* Rich Link Preview Styles */
        .link-preview { border-left: 3px solid #555; padding-left: 10px; margin-top: 8px; }
        .link-preview a { text-decoration: none; color: inherit; display: block; }
        .link-preview-image { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px 8px 0 0; }
        .link-preview-content { padding: 8px; background: rgba(0,0,0,0.2); border-radius: 0 0 8px 8px; }
        .link-preview-title { font-weight: bold; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .link-preview-desc { font-size: 0.8rem; color: #ccc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0; }
        .link-preview-sitename { font-size: 0.75rem; color: #aaa; text-transform: uppercase; }
        body.light-mode .link-preview { border-left-color: #ccc; }
        body.light-mode .link-preview-content { background: rgba(0,0,0,0.05); }

        /* Story Reply Preview Styles */
        .story-reply-preview {
            display: flex;
            align-items: center;
            background: rgba(0,0,0,0.2);
            padding: 5px;
            border-radius: 8px;
            margin-bottom: 8px;
            cursor: pointer;
            border-left: 3px solid #ff69b4; /* Instagram like pink/purple border */
        }
        .story-reply-preview.text-only { display: block; padding: 5px 10px; cursor: default; }
        body.light-mode .story-reply-preview { background: rgba(0,0,0,0.05); }
        .story-reply-preview img {
            width: 35px; height: 35px; object-fit: cover; border-radius: 4px; margin-right: 10px; border: none !important;
        }

        /* Lightbox styles copied from index.html */
        .lightbox-modal { display: none; position: fixed; z-index: 2000; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center; }
        .lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 90vh; object-fit: contain; }
        .close-lightbox { position: absolute; top: 20px; right: 30px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 2001; }
        .close-lightbox:hover { color: #bbb; }
        .read-receipt {
            font-size: 0.7rem;
        }
        body.light-mode .read-receipt {
            color: rgba(0,0,0,0.5) !important;
        }

        /* Theme Dropdown Styles */
        .theme-dropdown-container { position: relative; display: inline-block; }
        .theme-dropdown { position: absolute; top: 100%; right: 0; background: rgba(20, 20, 20, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px; display: none; flex-direction: column; gap: 8px; z-index: 1000; min-width: 160px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-top: 10px; max-height: 75vh; overflow-y: auto; overflow-x: hidden; }
        .theme-dropdown.show { display: flex; animation: slideUp 0.2s ease; }
        .theme-dropdown::-webkit-scrollbar { width: 4px; }
        .theme-dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .theme-option { padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; font-weight: bold; text-align: left; display: flex; align-items: center; gap: 10px; transition: transform 0.2s, box-shadow 0.2s; font-family: inherit; font-size: 0.9rem; }
        .theme-option:hover { transform: scale(1.05); }
        .theme-option.active { border: 2px solid #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); transform: scale(1.02); }

        .btn-transparent { position: relative; z-index: 1; border: none !important; background: transparent !important; color: #fff !important; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .theme-btn { position: relative; z-index: 1; border: none !important; background: transparent !important; color: #fff !important; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .btn-transparent::before, .theme-btn::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 30px; padding: 1.5px; background: linear-gradient(45deg, #00f3ff, #b5179e); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none; }
        .btn-transparent:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(0, 243, 255, 0.3); }

        /* 5 New Futuristic Themes */
        body.cyberpunk-mode { background: radial-gradient(circle at top right, #3a0ca3, #050505); color: #ff007c; }
        body.cyberpunk-mode .container { border-color: rgba(255, 0, 124, 0.2); }
        body.cyberpunk-mode .message-sent .message-text { background-color: #f72585; }
        body.cyberpunk-mode .chat-header h2 { color: #ff007c; }
        
        body.matrix-mode { background: radial-gradient(circle at top, #003300, #050505); color: #00ff41; }
        body.matrix-mode .container { border-color: rgba(0, 255, 65, 0.2); }
        body.matrix-mode .message-sent .message-text { background-color: #008f11; color: #00ff41; }
        body.matrix-mode .chat-header h2 { color: #00ff41; }
        
        body.ocean-mode { background: radial-gradient(circle at top left, #0077b6, #050505); color: #90e0ef; }
        body.ocean-mode .message-sent .message-text { background-color: #0077b6; }
        body.ocean-mode .chat-header h2 { color: #00e5ff; }
        
        body.dracula-mode { background: #282a36; color: #f8f8f2; }
        body.dracula-mode .message-sent .message-text { background-color: #bd93f9; }
        body.dracula-mode .chat-header h2 { color: #ff79c6; }
        
        body.solar-mode { background: radial-gradient(circle at center, #370617, #03071e); color: #ffba08; }
        body.solar-mode .message-sent .message-text { background-color: #dc2f02; }
        body.solar-mode .chat-header h2 { color: #ffb703; }