html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
            /* Force fixed to prevent outer scroll */
            overscroll-behavior: none;
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            /* Use fixed positioning to snap to viewport edges */
            position: fixed;
            inset: 0;
            height: auto;
            /* Let inset define height */
            width: 100%;
            display: flex;
            flex-direction: column;
            z-index: 10;
        }

        .header {
            background-color: #1976D2;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .status-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #FFCDD2;
            margin-right: 8px;
        }

        .status-text {
            font-size: 14px;
            font-weight: bold;
        }

        .content {
            flex: 1;
            overflow-y: auto;
            padding: 10px 10px 10px 10px;
            /* Reduced right padding to 5px */
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 200px;
            /* Ensure container has size even if empty */
            border: 2px solid #E0E0E0;
            /* Add framing border */
            border-radius: 8px;
            /* Smooth corners */
            margin: 0 20px;
            /* Add margin so border doesn't touch screen edges */
        }

        .message {
            padding: 10px 10px;
            border-radius: 12px;
            max-width: 85%;
            line-height: 1.5;
            font-size: 15px;
        }

        .message.user {
            align-self: flex-end;
            background-color: #E3F2FD;
            color: #0D47A1;
            border: 1px solid #E0E0E0;
        }

        .message.ai {
            align-self: flex-start;
            background-color: #F3E5F5;
            color: #4A148C;
            border: 1px solid #E0E0E0;
            max-width: 100%;
            /* Allow full width */
            width: 100%;
            /* Adaptive to container */
            box-sizing: border-box;
            /* Include padding/border in width */
        }

        .footer {
            background-color: white;
            padding: 15px;
            border-top: 1px solid #E0E0E0;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 15px;
        }

        .btn {
            border: none;
            padding: 10px 24px;
            border-radius: 22px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            color: white;
            transition: background-color 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-width: 80px;
        }

        /* Hide Pocket Mode Button by default (Desktop) */
        /* Hide Pocket Mode Button by default (Desktop) */
        #btn-pocket {
            display: none;
            background: rgba(255, 255, 255, 0.2);
            /* Semi-transparent for header */
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 20px;
            color: white;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin-left: 5px;
        }

        .btn-start {
            background-color: #4CAF50;
        }

        .btn-start:hover {
            background-color: #388E3C;
        }

        .btn-stop {
            background-color: #F44336;
        }

        .btn-stop:hover {
            background-color: #D32F2F;
        }

        .btn:disabled {
            background-color: #BDBDBD;
            cursor: not-allowed;
        }

        .input-area {
            display: flex;
            gap: 10px;
        }

        .text-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #E0E0E0;
            border-radius: 20px;
            outline: none;
            font-family: 'Microsoft YaHei';
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-body textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #E0E0E0;
            border-radius: 8px;
            resize: vertical;
            font-family: 'Microsoft YaHei';
            box-sizing: border-box;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .select-voice {
            padding: 8px 15px;
            /* Increase padding slightly for touch targets */
            border-radius: 15px;
            border: none;
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            font-family: 'Microsoft YaHei';
            cursor: pointer;
            outline: none;
            font-size: 16px;
            /* Match button text size */
        }

        .select-voice option {
            color: black;
        }

        /* Audio Visualizer Styles */
        .visualizer-container {
            background-color: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .visualizer-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .visualizer-bar-bg {
            height: 8px;
            background-color: #E0E0E0;
            border-radius: 4px;
            overflow: hidden;
        }

        .visualizer-bar-fill {
            height: 100%;
            width: 0%;
            background-color: #2196F3;
            transition: width 0.05s ease;
        }

        /* Pocket Mode Overlay (Global) */
        #pocket-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            color: #555;
            z-index: 9999;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        /* Mobile Adjustments */
        @media (max-width: 600px) {
            .container {
                height: 100vh;
                /* Fallback */
                height: var(--app-height, 100vh);
            }

            .header {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }

            .header-title {
                order: -1;
                /* Move title to top */
                width: 100%;
                justify-content: center;
                margin-bottom: 5px;
            }

            .header-controls {
                width: 100%;
                justify-content: center;
            }

            /* Increase spacing between Start/Stop buttons on mobile */
            .controls {
                gap: 40px !important;
                /* Larger gap */
            }

            /* Move status to visualizer line */
            .header-status {
                display: none !important;
            }

            .mobile-status-container {
                display: flex !important;
                align-items: center;
                gap: 5px;
                margin-left: auto;
            }

            /* Buttons */
            .btn-desktop-only {
                display: none !important;
            }

            .btn-mobile-half {
                flex: 0 0 35% !important;
                /* Reduce width (was 50% via flex:1) */
                width: 35%;
                /* Take remaining space (50% each if 2 buttons) */
            }



            /* Show Pocket Button on Mobile */
            #btn-pocket {
                display: flex !important;
                /* Override default display:none */
            }

            /* Mobile Button Layout: Horizontal (Icon + Text side-by-side) */
            .btn {
                flex-direction: row !important;
                /* Force row layout */
                gap: 8px;
                /* Space between icon and text */
                padding: 10px 15px;
                /* Adjust padding for flatter look */
                min-height: 44px;
                /* Ensure touch target size but compact */
            }

            /* Adjust Icon size inside button if using spans */
            .btn span:first-child {
                font-size: 20px !important;
                /* Slightly smaller icon */
            }

            .btn span:last-child {
                font-size: 16px;
                /* Text size */
            }

            /* BUT: We should ensure "Start" text is used consistently */
        }