@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(280px, 86vw);
        height: 100dvh;
        flex-basis: auto;
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%) !important;
        margin-left: 0 !important;
    }

    .sidebar:not(.collapsed) { transform: translateX(0) !important; }
    .sidebar.collapsed { transform: translateX(-100%) !important; }
    .close-sidebar-btn { display: inline-flex; margin-left: auto; }

    .top-header { height: 52px; padding: 0 10px; }
    .header-left,
    .header-right { gap: 3px; }
    .model-select { max-width: 170px; font-size: 13px; }
    .model-quant { display: none; }
    .metric-pill { padding: 5px; }
    .metric-label { display: none; }

    .chat-scroll-inner { gap: 22px; padding: 24px 14px 130px; }
    .welcome-screen { justify-content: flex-start; padding: 60px 0 20px; }
    .welcome-screen h1 { font-size: 25px; }
    .quick-prompts-grid { grid-template-columns: 1fr; margin-top: 27px; }
    .prompt-chip { min-height: 86px; }

    .message-row { gap: 9px; }
    .avatar { width: 25px; height: 25px; }
    .bubble-wrapper { max-width: calc(100% - 34px); }
    .user .bubble-wrapper { max-width: 88%; }
    .bubble { font-size: 14px; }

    .input-area-container { padding: 20px 10px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .input-wrapper { padding: 9px 9px 9px 14px; }
    .input-wrapper textarea { max-height: 140px; font-size: 14px; }
    .input-footer { padding-top: 6px; font-size: 9px; }
}

@media (max-width: 450px) {
    .metrics-bar { display: none; }
    .model-select { max-width: 175px; }
    .settings-modal { padding: 12px; }
    .settings-dialog-header,
    .settings-dialog-footer,
    .settings-dialog-body { padding-right: 15px; padding-left: 15px; }
    .message-metrics-badge { display: none; }
}