:root {
            /* Default Dark Theme Variables */
            --body-bg: #1a1a2e;
            --chat-container-bg: transparent;
            --ai-response-area-bg: transparent;
            --ai-response-text-color: #e0e0e0;
            --user-message-display-text-color: #9090aa;
            --input-area-bg: #24243e;
            --input-field-bg: #303050;
            --input-text-color: #e0e0e0;
            --input-placeholder-color: #9090aa;
            --button-bg: #4a4a70;
            --button-text-color: #ffffff;
            --button-hover-bg: #5a5a80;
            --options-container-bg: transparent;
            --option-bubble-bg: #303050;
            --option-bubble-text: #c0c0e0;
            --option-bubble-hover-bg: #4a4a70;
            --option-bubble-border: #4a4a70; /* Used for footer elements too */
            --border-color: #303050; /* General border, footer top border removed */
            --scrollbar-track: #24243e;
            --scrollbar-thumb: #4a4a70;
            --scrollbar-thumb-border: #24243e;
            --theme-toggle-button-bg: #4a4a70;
            --theme-toggle-button-text: #e0e0e0;
            --theme-toggle-button-hover-bg: #5a5a80;
            --box-shadow-color: rgba(0, 0, 0, 0.3);
            --cursor-color: #e0e0e0;
            --footer-text-color: #9090aa;
        }

        body.light-mode {
            --body-bg: #f0f2f5;
            --ai-response-area-bg: transparent;
            --ai-response-text-color: #1c1e21;
            --user-message-display-text-color: #606770;
            --input-area-bg: #f0f2f5;
            --input-field-bg: #ffffff;
            --input-text-color: #1c1e21;
            --input-placeholder-color: #606770;
            --button-bg: #0056b3;
            --button-text-color: #ffffff;
            --button-hover-bg: #004494;
            --option-bubble-bg: #e9e9eb;
            --option-bubble-text: #333333;
            --option-bubble-hover-bg: #d0d0d9;
            --option-bubble-border: #ced0d4; /* Used for footer elements too */
            --border-color: #ced0d4; /* General border, footer top border removed */
            --scrollbar-track: #f0f2f5;
            --scrollbar-thumb: #c1c1c1;
            --scrollbar-thumb-border: #f0f2f5;
            --theme-toggle-button-bg: #e0e0e0;
            --theme-toggle-button-text: #1c1e21;
            --theme-toggle-button-hover-bg: #d0d0d0;
            --box-shadow-color: rgba(0, 0, 0, 0.1);
            --cursor-color: #1c1e21;
            --footer-text-color: #606770;
        }

        body {
            font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: var(--body-bg);
            color: var(--ai-response-text-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 16px;
            /* Adjusted padding-bottom in media query for mobile */
            box-sizing: border-box;
            overflow: hidden; /* Prevents body scroll, internal elements handle their scroll */
            transition: background-color 0.3s, color 0.3s;
        }

        .ai-response-container {
            position: fixed;
            left: 10vw;
            top: 35%;
            transform: translateY(-50%);
            width: 70vw;
            max-width: 1100px;
            padding: 25px;
            background-color: var(--ai-response-area-bg);
            border-radius: 0; /* Keep as per original design */
            box-shadow: none; /* Keep as per original design */
            transition: background-color 0.3s, left 0.3s, width 0.3s, top 0.3s, padding 0.3s;
            min-height: 100px;
            max-height: calc(100vh - 230px); /* Initial max height */
            overflow-y: auto;
        }

        .ai-response-container::-webkit-scrollbar {
            width: 8px;
        }
        .ai-response-container::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 10px;
            transition: background-color 0.3s;
        }
        .ai-response-container::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb);
            border-radius: 10px;
            border: 2px solid var(--scrollbar-thumb-border);
            transition: background-color 0.3s, border-color 0.3s;
        }

        .ai-message-content {
            font-size: 2.2rem;
            line-height: 1.8;
            color: var(--ai-response-text-color);
            white-space: pre-wrap;
            word-wrap: break-word;
            transition: font-size 0.3s, line-height 0.3s;
        }

        .typing-cursor {
            display: inline-block;
            width: 3px; /* Width of cursor */
            height: 2.6rem; /* Height relative to font size */
            background-color: var(--cursor-color);
            animation: blink 1s step-end infinite;
            margin-left: 2px;
            vertical-align: text-bottom;
            transition: height 0.3s;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .current-user-message-container {
            position: fixed;
            bottom: 95px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 600px;
            padding: 0px 15px;
            text-align: right;
            z-index: 15;
            height: 25px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            transition: bottom 0.3s, width 0.3s, padding 0.3s;
        }

        .current-user-message {
            font-size: 0.9rem;
            color: var(--user-message-display-text-color);
            font-style: italic;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            transition: font-size 0.3s;
        }

        .input-area-wrapper {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 600px;
            z-index: 30;
            transition: bottom 0.3s, width 0.3s;
        }
        .input-area {
            display: flex;
            padding: 10px;
            border-radius: 25px;
            background-color: var(--input-area-bg);
            box-shadow: 0 5px 15px var(--box-shadow-color);
            border: 1px solid var(--border-color);
            transition: padding 0.3s, border-radius 0.3s;
        }
        .input-area input[type="text"] {
            flex-grow: 1;
            padding: 12px 15px;
            border: none;
            border-radius: 20px 0 0 20px;
            background-color: var(--input-field-bg);
            color: var(--input-text-color);
            outline: none;
            font-size: 0.95rem;
            transition: padding 0.3s, font-size 0.3s, border-radius 0.3s;
        }
        .input-area input[type="text"]::placeholder {
            color: var(--input-placeholder-color);
        }
        .input-area button {
            padding: 12px 20px;
            background-color: var(--button-bg);
            color: var(--button-text-color);
            border: none;
            border-radius: 0 20px 20px 0;
            cursor: pointer;
            font-size: 0.95rem;
            transition: padding 0.3s, font-size 0.3s, background-color 0.3s, border-radius 0.3s;
        }
        .input-area button:hover {
            background-color: var(--button-hover-bg);
        }

        .options-container-wrapper {
            position: fixed;
            bottom: 130px; /* Initial position */
            right: 20px; /* Initial position */
            width: auto;
            max-width: 250px; /* Initial max-width */
            z-index: 20;
            transition: bottom 0.3s, right 0.3s, left 0.3s, width 0.3s, max-width 0.3s, transform 0.3s;
        }
        .options-container {
            padding: 10px;
            background-color: var(--options-container-bg);
            border-radius: 12px;
            display: flex;
            flex-direction: column; /* Stacks options vertically by default */
            align-items: flex-end; /* Aligns bubbles to the right by default */
            gap: 8px;
            transition: padding 0.3s;
        }
        .option-bubble {
            background-color: var(--option-bubble-bg);
            color: var(--option-bubble-text);
            padding: 8px 15px;
            border-radius: 18px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s, transform 0.2s, padding 0.3s, font-size 0.3s;
            font-size: 0.85rem;
            border: 1px solid var(--option-bubble-border);
            text-align: right;
            width: fit-content;
        }
        .option-bubble:hover {
            background-color: var(--option-bubble-hover-bg);
            transform: translateX(-2px); /* Original hover effect */
        }

        .theme-toggle-container {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 100;
            transition: top 0.3s, right 0.3s;
        }
        #themeToggleButton {
            background-color: var(--theme-toggle-button-bg);
            color: var(--theme-toggle-button-text);
            border: 1px solid var(--border-color);
            padding: 6px 10px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: padding 0.3s, font-size 0.3s, background-color 0.3s;
        }
        #themeToggleButton:hover {
            background-color: var(--theme-toggle-button-hover-bg);
        }

        .footer-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 8px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 25;
            box-sizing: border-box;
            pointer-events: none;
            transition: padding 0.3s;
        }

        .footer-copyright-text,
        .footer-button {
            background-color: var(--option-bubble-bg);
            color: var(--footer-text-color);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.75rem;
            border: 1px solid var(--option-bubble-border);
            transition: background-color 0.3s, color 0.3s, border-color 0.3s, padding 0.3s, font-size 0.3s;
            pointer-events: auto;
        }

        .footer-button {
            color: var(--option-bubble-text);
            text-decoration: none;
        }
        .footer-copyright-text:hover,
        .footer-button:hover {
            background-color: var(--option-bubble-hover-bg);
        }
        .footer-container p {
             margin:0;
        }

        /* Mobile specific styles */
        @media (max-width: 768px) {
            body {
                padding: 10px; /* Reduce overall padding */
                /* padding-bottom is not strictly necessary due to fixed elements and body overflow:hidden,
                   but can be set if there was scrollable content directly in body.
                   For this app structure, fixed elements manage their own space. */
            }

            .ai-response-container {
                left: 5%; /* More centered */
                width: 90%; /* Use more width */
                top: 60px; /* Lowered to give space for theme toggle */
                transform: none; /* Remove Y transform for simpler positioning */
                padding: 15px;
                max-height: calc(100vh - 210px); /* Adjusted: 60px top, ~150px for bottom elements */
            }

            .ai-message-content {
                font-size: 1.2rem; /* Smaller font for mobile */
                line-height: 1.5;
            }

            .typing-cursor {
                height: 1.4rem; /* Adjust cursor to new font size */
            }

            .current-user-message-container {
                bottom: 90px; /* Position above input area */
                width: 90%;
                max-width: none; /* Allow full specified width */
                padding: 0 10px;
                height: 20px;
            }

            .current-user-message {
                font-size: 0.75rem; /* Smaller text */
            }

            .input-area-wrapper {
                bottom: 45px; /* Position above footer */
                width: 90%;
                max-width: none;
            }

            .input-area {
                padding: 8px;
                border-radius: 20px; /* Slightly smaller radius */
            }

            .input-area input[type="text"] {
                padding: 10px 12px;
                font-size: 0.9rem;
                border-radius: 15px 0 0 15px;
            }

            .input-area button {
                padding: 10px 15px;
                font-size: 0.9rem;
                border-radius: 0 15px 15px 0;
            }

            .options-container-wrapper {
                bottom: 115px; /* Position above current user message */
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                max-width: none; /* Allow full specified width */
                right: auto; /* Override desktop right positioning */
                max-height: 70px; /* Limit height, make scrollable if many options */
                overflow-y: auto; /* Enable vertical scroll for options */
                overflow-x: hidden; /* Prevent horizontal scroll */
            }

            .options-container {
                flex-direction: row; /* Options side-by-side */
                flex-wrap: wrap; /* Allow options to wrap to next line */
                justify-content: center; /* Center the row of options */
                align-items: center; /* Align items in center of cross axis */
                padding: 5px; /* Smaller padding */
                gap: 6px; /* Space between bubbles */
            }

            .option-bubble {
                padding: 6px 10px;
                font-size: 0.7rem; /* Smaller font for option bubbles */
                flex-grow: 0; /* Don't let bubbles grow excessively */
                flex-shrink: 1;
                text-align: center; /* Center text in bubble */
                /* width: auto; implicit */
            }
            .option-bubble:hover {
                transform: none; /* Remove hover transform on mobile if it causes issues */
            }


            .theme-toggle-container {
                top: 10px;
                right: 10px;
            }

            #themeToggleButton {
                padding: 5px 8px;
                font-size: 0.7rem;
            }

            .footer-container {
                padding: 5px 10px; /* Reduced padding */
                bottom: 0;
            }

            .footer-copyright-text,
            .footer-button {
                padding: 6px 10px;
                font-size: 0.65rem; /* Smaller footer text */
                margin: 2px; /* Add small margin for spacing if they get too close */
            }
        }

        /* Further adjustments for very small screens if needed */
        @media (max-width: 360px) {
            .ai-message-content {
                font-size: 1rem;
                line-height: 1.4;
            }
            .typing-cursor {
                height: 1.2rem;
            }
            .input-area input[type="text"], .input-area button {
                font-size: 0.8rem;
            }
            .option-bubble {
                font-size: 0.65rem;
                padding: 5px 8px;
            }
            .footer-container {
                flex-direction: column; /* Stack footer items */
                align-items: center;
                padding-bottom: 8px; /* Add some padding at bottom when stacked */
            }
            .footer-copyright-text {
                margin-bottom: 5px; /* Space between stacked items */
            }
             .ai-response-container {
                max-height: calc(100vh - 200px); /* Further adjust for very small screens */
            }
        }