@media (max-width: 1024px) {
            .layout {
                grid-template-columns: 1fr;
            }

            .sidebar {
                display: flex;
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                width: min(84vw, 320px);
                max-width: 320px;
                transform: translateX(-110%);
                transition: transform 0.24s ease;
                z-index: 30;
                border-right: 1px solid var(--line);
            }

            body.sidebar-open .sidebar {
                transform: translateX(0);
            }

            .sidebar-close {
                display: inline-flex;
            }

            .sidebar-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(15, 23, 42, 0.35);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.22s ease;
                z-index: 20;
                border: 0;
                padding: 0;
            }

            body.sidebar-open .sidebar-backdrop {
                opacity: 1;
                pointer-events: auto;
            }

            .main {
                min-height: 100vh;
                min-height: 100dvh;
                min-width: 0;
            }

            .topbar {
                padding: 10px 12px;
                gap: 10px;
            }

            .topbar-main {
                flex: 1 1 auto;
                min-width: 0;
            }

            .topbar-actions {
                flex: 0 0 auto;
                min-width: 0;
            }

            .messages {
                padding: 16px 10px 24px;
            }

            .messages-wrap {
                min-width: 0;
                overflow-x: hidden;
            }

            .composer-wrap {
                padding: 9px 10px calc(10px + env(safe-area-inset-bottom));
                min-width: 0;
                overflow: visible;
            }

            .composer {
                gap: 8px;
                width: 100%;
                min-width: 0;
            }

            .topbar-subtitle {
                display: none;
            }

            .title {
                font-size: 13px;
            }

            .model-badge {
                font-size: 10px;
                padding: 5px 8px;
            }

            .mobile-new-chat {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .mobile-menu-btn {
                display: inline-flex;
            }
        }

        @media (max-width: 900px) {
            .composer-main {
                grid-template-columns: minmax(0, 1fr) 94px;
                gap: 10px;
                padding: 8px;
                border-radius: 16px;
                border: 1px solid #d8e3f3;
                background: linear-gradient(180deg, #ffffff, #f8fbff);
                box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
                width: 100%;
                min-width: 0;
                align-items: stretch;
            }

            .prompt-shell {
                border: 1px solid #dce6f4;
                border-radius: 13px;
                background: #ffffff;
                min-height: 48px;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }

            .prompt-shell:focus-within {
                border-color: #93c5fd;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
            }

            .send {
                align-self: stretch;
                width: 100%;
                min-width: 0;
                height: 100%;
                min-height: 48px;
                border-radius: 12px;
                font-size: 13px;
                box-shadow: 0 10px 20px rgba(30, 58, 138, 0.22);
            }

            .bubble {
                max-width: 94%;
                border-radius: 14px;
                padding: 11px 12px;
            }

            .input {
                min-height: 48px;
                padding: 11px 94px 11px 12px;
                font-size: 14px;
                line-height: 1.38;
                border: 0;
                background: transparent;
                box-shadow: none;
            }

            .input:focus {
                border: 0;
                background: transparent;
                box-shadow: none;
            }

            .composer-tools {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
                width: 100%;
                min-width: 0;
                padding: 0;
            }

            .composer-attachment-row {
                width: 100%;
            }

            .image-preview {
                width: 100%;
                max-width: none;
            }

            .document-preview {
                width: 100%;
                max-width: none;
            }

            .image-name {
                max-width: none;
            }

            .document-name {
                max-width: none;
            }

            .mode-select,
            .mode-toggle {
                width: 100%;
                min-width: 0;
                font-size: 11px;
                padding: 6px 8px;
                border-radius: 9px;
            }

            .composer-tools .mode-toggle {
                grid-column: 1 / -1;
                text-align: center;
                white-space: normal;
                line-height: 1.3;
            }

            .prompt-document-btn,
            .prompt-camera-btn {
                width: 34px;
                height: 34px;
                border-radius: 10px;
                top: 50%;
                bottom: auto;
                transform: translateY(-50%);
                box-shadow: none;
            }

            .prompt-camera-btn {
                right: 8px;
            }

            .prompt-document-btn {
                right: 48px;
                border-color: #d4e2f5;
                background: #f8fbff;
                color: #1e3a8a;
            }

            .prompt-document-btn:hover,
            .prompt-camera-btn:hover {
                transform: translateY(-50%);
            }

            .meta {
                font-size: 11px;
                margin-top: 6px;
            }

            .main.is-empty-chat .messages-wrap {
                overflow: auto;
            }

            .main.is-empty-chat .messages {
                min-height: 0;
                display: block;
                padding-top: 12px;
                padding-bottom: 12px;
            }

            .main.is-empty-chat .composer-wrap {
                position: static;
                left: auto;
                right: auto;
                top: auto;
                transform: none;
                border-top: 1px solid var(--line);
                padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
                background: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(8px);
                z-index: 2;
            }

            .main.is-empty-chat .composer {
                max-width: 980px;
            }

            .main.is-empty-chat .meta {
                text-align: left;
                margin-top: 6px;
            }

            .onboarding-panel {
                width: 100%;
                border-radius: 16px;
                padding: 12px;
            }

            .onboarding-subtitle {
                display: none;
            }

            .onboarding-chips {
                margin-top: 8px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .onboarding-chip {
                flex: 1 1 100%;
                font-size: 11px;
                padding: 8px 10px;
                border-radius: 12px;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .assistant-confidence-badge {
                font-size: 10px;
                padding: 4px 7px;
            }

            .assistant-citations {
                padding: 7px 8px;
            }

            .assistant-citation-link {
                font-size: 11px;
            }

            .assistant-citation-meta {
                font-size: 10px;
            }

            .assistant-quick-actions-label {
                font-size: 10px;
            }

            .assistant-quick-action-btn {
                font-size: 10px;
                padding: 5px 8px;
            }

            .assistant-followup-label {
                font-size: 10px;
            }

            .assistant-followup-chip {
                font-size: 10px;
                padding: 6px 9px;
            }
        }

        @media (max-width: 640px) {
            .topbar {
                padding: 8px 8px;
                gap: 8px;
            }

            .title {
                font-size: 12px;
            }

            .model-badge {
                max-width: 42vw;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mobile-new-chat {
                padding: 5px 8px;
                font-size: 10px;
            }

            .messages {
                padding: 12px 8px 18px;
            }

            .message-row {
                margin-bottom: 10px;
            }

            .bubble {
                max-width: 96%;
                border-radius: 12px;
                padding: 10px 10px;
                line-height: 1.54;
            }

            .code-pre {
                font-size: 12px;
                padding: 10px;
            }

            .composer-wrap {
                padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
            }

            .composer-main {
                grid-template-columns: minmax(0, 1fr) 86px;
                border-radius: 15px;
                padding: 7px;
                gap: 8px;
            }

            .send {
                width: 100%;
                min-width: 0;
                height: 100%;
                min-height: 46px;
                font-size: 12px;
                border-radius: 11px;
            }

            .input {
                min-height: 46px;
                font-size: 16px;
                padding: 10px 86px 10px 11px;
            }

            .prompt-shell {
                min-height: 46px;
                border-radius: 12px;
            }

            .mode-select,
            .mode-toggle {
                font-size: 10px;
                padding: 5px 7px;
                min-width: 0;
            }

            .prompt-document-btn,
            .prompt-camera-btn {
                width: 32px;
                height: 32px;
                border-radius: 9px;
                top: 50%;
                bottom: auto;
                transform: translateY(-50%);
            }

            .prompt-camera-btn {
                right: 6px;
            }

            .prompt-document-btn {
                right: 44px;
            }

            .prompt-document-btn:hover,
            .prompt-camera-btn:hover {
                transform: translateY(-50%);
            }

            .image-picker-menu {
                right: 6px;
                bottom: 46px;
                min-width: 164px;
            }

            .image-preview {
                width: 100%;
            }

            .image-name {
                max-width: none;
            }

            .main.is-empty-chat .composer {
                max-width: 100%;
            }

            .meta {
                font-size: 10px;
            }

            .message-row.user .user-inline-input {
                min-height: 58px;
                font-size: 12px;
            }

            .message-row.user .user-inline-cancel,
            .message-row.user .user-inline-submit {
                font-size: 10px;
                padding: 4px 8px;
            }

            .onboarding-panel {
                padding: 12px;
                border-radius: 14px;
            }

            .onboarding-chips {
                margin-top: 8px;
                gap: 6px;
            }

            .onboarding-chip {
                font-size: 10px;
                padding: 6px 9px;
                flex-basis: 100%;
                -webkit-line-clamp: 3;
            }

            .assistant-confidence-badge {
                font-size: 9px;
                padding: 3px 7px;
            }

            .assistant-citations-label {
                font-size: 9px;
            }

            .assistant-citation-link {
                font-size: 10px;
            }

            .assistant-citation-meta {
                font-size: 9px;
            }

            .assistant-quick-actions-chips {
                gap: 5px;
            }

            .assistant-quick-action-btn {
                font-size: 10px;
                padding: 5px 7px;
            }

            .assistant-followup-label {
                font-size: 10px;
            }

            .assistant-followup-chips {
                gap: 6px;
            }

            .assistant-followup-chip {
                font-size: 10px;
                padding: 5px 8px;
            }
        }

        @media (max-width: 560px) {
            .topbar-main {
                flex: 1 1 auto;
                min-width: 0;
            }

            .topbar-actions {
                flex: 0 0 auto;
                gap: 6px;
            }

            .model-badge {
                display: none;
            }

            .mobile-new-chat {
                padding: 5px 7px;
                font-size: 10px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .layout *,
            .layout *::before,
            .layout *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }

            .message-row.is-entering {
                animation: none !important;
            }
        }