body {
            min-height: 100vh;
            background-color: #f0f2f5; /* User's preferred background color */
            font-family: 'Pretendard', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Pretendard font */
        }
        #login-container {
            max-width: 400px;
            display: none; /* Hidden by default until authentication status is determined */
        }
        #main-container {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #sidebar {
            background-color: #fff;
            border-right: 1px solid #dee2e6;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
        }
        #chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative; /* For overlay positioning */
        }
        #messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 1.5rem;
            background-color: #fff;
            scroll-padding-bottom: 150px; /* Ensure last messages are visible above input form */
        }
        #message-form {
            padding: 1rem;
            background-color: #f8f9fa;
            border-top: 1px solid #dee2e6;
            flex-shrink: 0;
        }
        .room-item {
            cursor: pointer;
        }
         #online-users-list > li {
            color: green;
            font-weight: bold;
        }
        .message-bubble {
            padding: 5px 15px;
            border-radius: 7px;
            margin-bottom: 5px;
            display: inline-block;
            max-width: 80%;
            word-wrap: break-word;
            position: relative; /* Added for positioning of action buttons */
        }
        .message-sender {
            display: flex;
            align-items: flex-end; /* Align items to the bottom of the container */
            justify-content: flex-end; /* Align content to the right */
            margin-bottom: 5px;
            position: relative; /* Added for positioning of action buttons */
        }
        .message-receiver {
            /* display: flex; */
            /* align-items: flex-end; */ /* This is now handled by a wrapper */
            /* justify-content: flex-start; */
            margin-bottom: 5px;
        }
        .message-bubble-sender {
            background-color: #DCF8C6; /* A light green, similar to WhatsApp */
        }
        .message-bubble-receiver {
            background-color: #FFFFFF; /* White */
            border: 1px solid #E5E5EA;
        }

        .message-actions {
            display: flex;
            align-items: center;
            /* Removed margin-left as it's now absolutely positioned */
        }

        .edited-tag {
            font-size: 0.75em;
            margin-left: 5px;
            color: #888;
        }

        .hidden {
            display: none !important;
        }

        .action-icon i {
            font-size: 0.8em; /* Make icons smaller */
        }

        /* Image Group Styling */
        .message-bubble .image-group-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            /* 2 images (100px) + 1 gap (5px) = 205px. This will create a 2-column layout for more than 2 images */
            max-width: 205px;
        }
        .image-group-container a {
            display: block;
        }
        .image-group-container img {
            width: 100px;
            height: 75px;
            object-fit: cover; /* Prevents image distortion */
            border-radius: 8px;
            cursor: pointer;
            vertical-align: top; /* Align images to the top */
        }

        /* Image Modal Styling */
        #image-modal {
            display: none;
            position: fixed;
            z-index: 1050;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.9);
        }
        #image-modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #image-modal .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }
        #image-modal .prev, #image-modal .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
        }
        #image-modal .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        #image-modal .prev:hover, #image-modal .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Mobile-specific styles */
        @media (max-width: 767.98px) { /* Bootstrap's 'md' breakpoint is 768px */
            body {
                padding: 0; /* Remove default body padding on small screens */
            }
            #sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 250px; /* Adjust as needed */
                z-index: 1040; /* Above chat content, below modal */
                transform: translateX(-100%);
                transition: transform 0.3s ease-in-out;
                box-shadow: 0 0 10px rgba(0,0,0,0.2);
            }
            #sidebar.show {
                transform: translateX(0);
            }
            /* Adjust main content to take full width when sidebar is hidden */
            .col-md-8.col-lg-9 {
                width: 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
            /* Hide the default column behavior for sidebar on small screens */
            .col-md-4.col-lg-3 {
                display: none;
            }
        }
        .highlight {
            background-color: yellow;
            transition: background-color 0.5s ease;
        }
        .typing-dots {
            display: flex;
            align-items: center;
            padding: 8px 12px;
        }
        .typing-dots span {
            height: 8px;
            width: 8px;
            background-color: #8E8E93;
            border-radius: 50%;
            display: inline-block;
            margin: 0 2px;
            animation: typing-bounce 1.4s infinite;
        }
        .typing-dots span:nth-child(2) {
            animation-delay: -1.1s;
        }
        .typing-dots span:nth-child(3) {
            animation-delay: -0.9s;
        }
        @keyframes typing-bounce {
            0%, 80%, 100% {
                transform: scale(0);
            }
            40% {
                transform: scale(1.0);
            }
        }

        /* Initially hide the main app container */
        .app {
            display: none;
        }