:root {
            --blue: #0077cc;
            --mint: #83c5be;
            --teal-dark: #004d4d;
            --dark: #333;
            --light: #f9f9ff;
            --border-radius: 12px;
            --chat-bg: #e6f2f2;
            --input-bg: #fff;
        }

        * {
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f0f0;
        }

        .chat-container {
            display: flex;
            flex-direction: row;
            height: 100dvh;
            overflow: hidden;
        }

        .sidebar {
            width: 280px;
            background-color: var(--teal-dark);
            color: white;
            display: flex;
            flex-direction: column;
            padding: 1rem;
            flex-shrink: 0;
            overflow-y: auto;
        }

        .sidebar h2 {
            margin: 0 0 1rem 0;
            font-weight: 700;
            font-size: 1.4rem;
            border-bottom: 1px solid rgba(255,255,255,0.3);
            padding-bottom: 0.5rem;
        }

        .contact {
            background: var(--mint);
            color: var(--teal-dark);
            padding: 0.6rem 0.8rem;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border: 2px solid transparent;
            transition: background 0.3s;
            margin-bottom: 1rem;
        }

        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--chat-bg);
            height: 100%;
            position: relative; /* Ensure chat-area is a positioning context */
            padding: 1rem;
        }

        .chat-header {
            font-weight: 700;
            font-size: 1.3rem;
            color: var(--teal-dark);
            padding: 1rem;
            border-bottom: 1px solid #ccc;
            flex-shrink: 0;
        }
        
        .swap-icon-img {
            width: 24px;
            height: 24px;
            cursor: pointer;
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 100;
            
        }

        /* --- Video Layout for Desktop --- */
        .video-grid {
            display: flex; /* Use flexbox for horizontal arrangement */
            flex: 1; /* Allow it to grow and fill available space */
            gap: 0.5rem; /* Space between video windows */
            margin-top: 1rem;
            overflow: hidden; /* Prevent content from spilling out */
            position: relative; /* Make it a positioning context for absolute children on desktop as well, if needed */
        }

        /* Base style for both video containers */
        #remote, #local {
            position: relative; /* For brand logo positioning */
            flex: 1; /* Each takes equal width */
            height: 100%; /* Fill the height of video-grid */
            background: #000; /* Black background while loading/no video */
            overflow: hidden;
            border-radius: var(--border-radius);
            display: flex; /* Ensure video elements fill their container */
            justify-content: center;
            align-items: center;
        }

        /* Style for the actual video elements that Agora SDK renders */
        #remote video, #local video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cover the container without distortion */
        }

        .brand-logo {
            position: absolute;
            top: 8px;
            left: 10px;
            background: rgba(0,0,0,0.5);
            color: #fff;
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 14px;
            z-index: 15;
        }

        #loadingGif {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 35px;
            height: 35px;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .chat-box {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1rem;
            overflow-y: auto;
            background: rgba(230, 242, 242, 0.8);
            border-radius: var(--border-radius);
            margin-top: 1rem; /* Adjust as needed with video height */
            height: 100%; /* Allow chatbox to fill remaining space */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        #chat-box::-webkit-scrollbar {
            display: none;
        }

        .message {
            max-width: 70%;
            padding: 0.6rem 1rem;
            border-radius: 18px;
            word-wrap: break-word;
            line-height: 1.4;
            font-size: 14px;
        }

        .message.you {
            align-self: flex-end;
            background-color: var(--blue);
            color: white;
            border-bottom-right-radius: 0;
        }

        .message.stranger {
            align-self: flex-start;
            background-color: #ddd;
            color: #000;
            border-bottom-left-radius: 0;
        }

        .messages {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px;
            display: flex;
            flex-direction: column;
        }

        .input-area {
            position: fixed;
            bottom: 0;
            left: 280px;
            right: 0;
            display: flex;
            gap: 0.5rem;
            background: var(--input-bg);
            border-top: 1px solid #ccc;
            padding: 0.75rem;
            flex-shrink: 0;
            z-index: 100;
        }

        .input-area textarea {
            flex: 1;
            padding: 0.6rem 1rem;
            border-radius: var(--border-radius);
            border: 1px solid #ccc;
            resize: none;
            font-size: 1rem;
            height: 45px;
            font-family: inherit;
        }

        .input-area textarea:focus {
            outline: none;
            border-color: var(--blue);
            box-shadow: 0 0 5px var(--blue);
        }

        .input-area button {
            background-color: var(--blue);
            border: none;
            color: white;
            padding: 0 1.2rem;
            border-radius: var(--border-radius);
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 1.1rem;
        }

        .input-area button:hover {
            background-color: #005fa3;
        }

        /* DESKTOP (default) */
        #chatBoxMobileContainer {
            display: none;
        }

        /* --- Mobile Specific Styles --- */
        @media (max-width: 768px) {
            .chat-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                position: sticky;
                top: 0;
                z-index: 10;
                padding: 0.75rem 1rem; /* Adjust padding for mobile sidebar */
            }

            .sidebar h2 {
                margin: 0;
                padding-bottom: 0;
                border-bottom: none;
            }

            .chat-area {
                padding: 0.5rem;
            }

            .input-area {
                left: 0;
                padding: 0.5rem;
            }

            /* Hide chat in sidebar on mobile */
            .sidebar #chatBox {
                display: none;
            }

            /* Show container below video on mobile */
            #chatBoxMobileContainer {
                padding-left: 6px;
                padding-right: 6px;
                display: block;
                margin-top: 0.5rem;
                height: 180px; /* Give it a fixed height or min-height */
                overflow-y: auto;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            #chatBoxMobileContainer::-webkit-scrollbar {
                display: none;
            }

            /* Make chat box inside container full height */
            #chatBox {
                display: flex;
                height: 100%; /* Fill the mobile container */
                margin-top: 0;
            }

            /* Adjust video layout for mobile */
            .video-grid {
                flex-direction: column; /* Stack videos vertically on mobile */
                height: 250px; /* Fixed height for the video area on mobile */
                margin-top: 0; /* Remove top margin */
                gap: 0; /* Remove gap between stacked videos */
                position: relative; /* THIS IS CRUCIAL: Makes video-grid the positioning context */
                width: 100%; /* Ensure it takes full width */
            }

            /* Remote video takes full width on mobile */
            #remote {
                width: 100%;
                margin-top: 1rem;
                height: 100%; /* Fill the video-grid height */
                margin-bottom: 0; /* No space between remote and local if overlay */
            }

            /* Local video becomes an overlay on mobile */
            #local {
                position: absolute;
                width: 120px; /* Small size for local overlay */
                height: 90px;
                top: 30px; /* Position from top */
                right: 15px; /* Position from right */
                z-index: 20; /* Ensure it's above remote video */
                border: 2px solid var(--blue); /* Highlight local video */
                box-shadow: 0 4px 8px rgba(0,0,0,0.4);
            }

            /* Brand logo on remote video only for mobile */
            #remote .brand-logo {
                display: block; /* Ensure it's visible on remote mobile */
            }
            #local .brand-logo {
                display: none; /* Hide brand logo on small local mobile overlay */
            }
        }