@media(max-width:900px) {
      nav {
        flex-wrap:nowrap;
        overflow:visible;
      }
      .nav-links {
        flex:1 1 auto;
        min-width:0;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .nav-links::-webkit-scrollbar { display:none; }
      .nav-links > * { flex:0 0 auto; }
      .user-menu {
        position:relative;
        flex:0 0 auto;
        z-index:220;
      }
      .user-menu-panel {
        position:fixed;
        top:calc(var(--nav-h, 60px) + 6px);
        right:max(8px, env(safe-area-inset-right));
        left:auto;
        max-width:calc(100vw - 16px);
        z-index:260;
      }
      .schedule-layout { grid-template-columns:1fr; }
      .schedule-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .schedule-list-panel { position:static; min-height:0; }
      .schedule-list { max-height:460px; }
      .schedule-runs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }

    @media(max-width:768px) {
      nav { gap:8px; }
      .nav-btn { padding:7px 9px; font-size:0.82rem; }
      .user-avatar-name { max-width:80px; font-size:.78rem; }
      .user-avatar { width:28px; height:28px; font-size:.82rem; }
      .user-menu-panel { min-width:200px; }
      .release-version-btn { padding:5px 8px; }
      .release-version-btn small { display:none; }
    }

    @media(max-width:640px) {
      /* Show hamburger */
      .sidebar-toggle { display:flex; }

      /* Sidebar → slide-over overlay */
      .sidebar {
        position:fixed !important;
        top:var(--nav-h, 56px);
        bottom:0;
        left:-110vw;
        width:min(86vw, 340px) !important;
        display:flex !important;
        z-index:150;
        box-shadow:4px 0 32px rgba(0,0,0,.5);
        transition:left .25s cubic-bezier(.4,0,.2,1);
        border-right:1px solid rgba(35,49,73,.9);
      }
      .sidebar.open { left:0; }

      .conv-rename,
      .conv-move {
        opacity:1;
      }
      .conv-rename:hover,
      .conv-move:hover {
        opacity:1;
      }

      .logo { display:none; }
      .release-version-btn {
        min-height:34px;
        padding:5px 7px;
        border-radius:10px;
      }
      .release-version-btn span { font-size:.62rem; }
      .bubble { max-width:100%; }
      .chat-main { padding:10px; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
      #conv-view {
        gap:8px !important;
      }
      .chat-topbar {
        align-items:stretch;
        flex-direction:column;
        gap:8px;
      }
      .conversation-tools {
        width:100%;
        overflow-x:auto;
        padding-bottom:2px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .conversation-tools::-webkit-scrollbar { display:none; }
      .conversation-tools > * {
        flex:0 0 auto;
      }
      .messages {
        padding:12px 4px;
      }
      .msg {
        gap:0;
      }
      .msg.user {
        flex-direction:row;
      }
      .bubble {
        max-width:100%;
        padding:10px 12px 11px;
        font-size:.9rem;
        border-left:4px solid rgba(245,158,11,.78);
        border-radius:14px;
      }
      .msg.user .bubble {
        border-color:rgba(34,211,238,.35);
        border-left-color:rgba(34,211,238,.85);
        border-radius:14px;
      }
      .msg.assistant .bubble {
        border-color:rgba(245,158,11,.32);
        border-left-color:rgba(245,158,11,.85);
        border-radius:14px;
      }
      .msg.user .bubble::before,
      .msg.assistant .bubble::before {
        display:block;
        margin-bottom:5px;
        font-size:.66rem;
        line-height:1;
        font-weight:850;
        letter-spacing:.08em;
        white-space:normal;
      }
      .msg.user .bubble::before {
        content:"USER";
        color:#67e8f9;
      }
      .msg.assistant .bubble::before {
        content:"AI";
        color:#fbbf24;
      }
      .conv-files-head {
        align-items:stretch;
        flex-direction:column;
      }
      .conv-files-tools {
        display:grid;
        grid-template-columns:1fr 1fr auto;
        width:100%;
      }
      .file-upload-btn,
      .file-upload-refresh,
      .file-panel-toggle {
        min-height:34px;
      }
      .conv-file-list {
        grid-template-columns:1fr;
      }
      .ph {
        align-items:flex-start;
        flex-direction:column;
      }
      .files-toolbar,
      .files-search {
        width:100%;
      }
      .files-toolbar {
        justify-content:stretch;
      }
      .schedule-page-head,
      .schedule-form-actions {
        align-items:stretch;
        flex-direction:column;
      }
      #schedules-page { padding:12px; gap:12px; }
      .schedule-page-head { min-height:0; padding:18px; }
      .schedule-page-head::after { right:-80px; }
      .schedule-hero-copy h2 { font-size:1.4rem; }
      .schedule-head-actions,
      .schedule-action-buttons { width:100%; }
      .schedule-head-actions > *,
      .schedule-action-buttons > * { flex:1; }
      .schedule-form-grid,
      .schedule-runs { grid-template-columns:1fr; }
      .schedule-form-head,
      .schedule-form-section,
      .schedule-form-actions { padding-left:14px; padding-right:14px; }
      .schedule-form-head { align-items:flex-start; }
      .schedule-editor-badge { display:none; }
      .schedule-ai-row {
        align-items:stretch;
        flex-direction:column;
      }
      .schedule-verify-panel {
        align-items:stretch;
        flex-direction:column;
      }
      .schedule-inline-check { align-items:flex-start; flex-direction:column; }

      /* Nav: stay single-row, scroll horizontally if needed (DON'T wrap) */
      nav {
        height:56px;
        gap:6px;
        padding:0 10px;
        flex-wrap:nowrap;
        overflow:visible;
      }
      nav > * { flex-shrink:0; }
      .nav-links {
        gap:3px;
        flex:1 1 auto;
        min-width:0;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .nav-links::-webkit-scrollbar { display:none; }
      .nav-btn { padding:6px 9px; font-size:0.78rem; }
      .logo { display:none; }

      .logout-btn { padding:5px 9px; font-size:.74rem; }
      .user-avatar-btn { padding:4px 8px 4px 4px; font-size:.74rem; gap:6px; }
      .user-avatar { width:30px; height:30px; font-size:.82rem; }
      .user-avatar-name { display:none; }
      .user-avatar-caret { display:none; }

      /* Keep the avatar outside the scrolling nav links so its dropdown stays visible. */
      .user-menu {
        position:relative;
        right:auto;
        margin-left:0;
        padding-left:0;
        background:none;
        z-index:220;
      }

      /* Pin the panel to the viewport so it cannot be pushed off-screen. */
      .user-menu-panel {
        position:fixed;
        top:calc(var(--nav-h, 56px) + 6px);
        right:8px;
        left:auto;
        min-width:240px;
        max-width:calc(100vw - 16px);
      }

      .model-menu-panel {
        position:fixed;
        top:calc(var(--nav-h, 56px) + 54px);
        left:8px;
        right:8px;
        width:auto;
        max-width:none;
        max-height:calc(100dvh - var(--nav-h, 56px) - 66px);
        overflow-y:auto;
      }

      .send-key-panel {
        position:fixed;
        left:8px;
        right:8px;
        bottom:calc(env(safe-area-inset-bottom) + 132px);
        width:auto;
        max-width:none;
      }

      .suggestion-bar {
        flex-wrap:nowrap;
        overflow-x:auto;
        padding:0 1px 2px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .suggestion-bar::-webkit-scrollbar { display:none; }
      .sugg-pill {
        flex:0 0 auto;
        min-height:34px;
        display:inline-flex;
        align-items:center;
      }
      .input-area {
        display:flex;
        flex-wrap:wrap;
        align-items:stretch;
        gap:7px;
        padding:8px;
        border:1px solid rgba(35,49,73,.72);
        border-radius:18px;
        background:rgba(7,11,18,.72);
        box-shadow:0 -10px 34px rgba(0,0,0,.18);
      }
      .chat-input-toggle {
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }
      .input-area textarea {
        order:2;
        flex:1 0 100%;
        min-height:96px;
        max-height:34dvh;
        border-radius:14px;
        padding-top:44px;
        padding-right:62px;
      }
      .composer-tool-btn,
      .compose-expand-btn,
      .send-key-menu,
      .send-btn,
      .stop-btn {
        order:1;
      }
      .chat-input-toggle {
        order:0;
      }
      .compose-expand-btn {
        position:absolute;
        right:14px;
        top:58px;
        z-index:3;
      }
      .composer-tool-btn,
      .send-key-toggle,
      .send-btn,
      .stop-btn {
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:13px;
      }
      .compose-expand-btn {
        width:44px;
        height:36px;
        flex-basis:auto;
        border-radius:12px;
      }
      .send-btn,
      .stop-btn {
        margin-left:auto;
      }
      #conv-view.chat-input-collapsed .suggestion-bar {
        display:none;
      }
      #conv-view.chat-input-collapsed .input-area {
        width:auto;
        align-self:flex-end;
        padding:5px;
        border-radius:999px;
        background:rgba(7,11,18,.86);
      }
      #conv-view.chat-input-collapsed .input-area > :not(#chat-input-toggle) {
        display:none !important;
      }
      #conv-view.chat-input-collapsed .chat-input-toggle {
        width:46px;
        height:38px;
        flex-basis:46px;
        border-radius:999px;
      }

      /* Modals → bottom sheet */
      .user-create-form {
        grid-template-columns:1fr;
      }

      .editor-modal {
        padding:0;
        align-items:flex-end;
      }
      .editor-card {
        width:100%;
        border-radius:20px 20px 0 0;
        height:94dvh;
        max-height:94dvh;
      }
      .editor-head {
        align-items:stretch;
        flex-direction:column;
        gap:10px;
        padding:12px;
      }
      .editor-title h3 {
        font-size:.95rem;
      }
      .editor-title p {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .editor-actions {
        width:100%;
        display:grid;
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:7px;
      }
      .editor-actions .editor-btn {
        min-height:40px;
        padding:8px 9px;
        border-radius:12px;
      }
      .editor-actions .editor-icon-btn {
        width:auto;
      }
      .editor-body {
        padding:10px 12px 12px;
      }
      .editor-meta {
        gap:6px;
      }
      .editor-meta code {
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .editor-textarea {
        min-height:0;
        resize:none;
        border-radius:14px;
        padding:13px;
      }
      .editor-foot {
        display:none;
      }
      .compose-card {
        height:94dvh;
      }
      .release-card {
        height:92dvh;
      }
      .release-current {
        align-items:flex-start;
        flex-direction:column;
      }
      .release-current-meta {
        align-items:flex-start;
      }
      .compose-system-head {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
      }
      .compose-system-actions {
        width:100%;
        justify-content:space-between;
      }
      .compose-system-textarea {
        flex:0 0 112px;
        min-height:96px;
        max-height:140px;
        resize:none;
      }
      .compose-textarea {
        flex:1;
        min-height:0;
      }
      .template-card {
        height:92dvh;
      }
      .template-body {
        grid-template-columns:1fr;
      }
      .template-list {
        max-height:180px;
      }
      .template-editor-actions {
        align-items:stretch;
      }
      .template-editor-actions .editor-actions {
        width:100%;
        justify-content:flex-end;
      }
      .preview-modal {
        padding:calc(var(--nav-h, 56px) + 8px) 8px 8px;
        align-items:flex-end;
        justify-content:center;
      }
      .preview-card {
        position:relative;
        left:auto !important;
        top:auto !important;
        width:100%;
        min-width:0;
        height:min(64dvh, 620px);
        border-radius:16px;
      }
      .preview-head {
        cursor:default;
        touch-action:auto;
      }
      .preview-resize-handle {
        display:none;
      }
      .preview-frame iframe { min-height:420px; }
    }

    @media(max-width:480px) {
      /* Even tighter for very small phones */
      nav { height:52px; padding:0 8px; gap:5px; }
      .nav-btn { padding:5px 7px; font-size:0.74rem; }
      .logo { display:none; }
      nav select { max-width:78px; padding:4px 5px; font-size:.7rem; }
      .sidebar-toggle { width:34px; height:34px; font-size:1rem; }
      .user-avatar { width:28px; height:28px; font-size:.78rem; }
      .user-avatar-btn { padding:3px; border-radius:50%; }
      .user-menu-panel {
        top:calc(var(--nav-h, 52px) + 6px);
        left:8px;
        right:8px;
        min-width:0;
        max-width:none;
      }
      .schedule-stats { grid-template-columns:1fr; }
      .schedule-list-tools { grid-template-columns:1fr; }
      .schedule-list-tools select { width:100%; }
      .schedule-stat-card { padding:12px 14px; }

      /* Input area safe area */
      .input-area {
        padding-bottom:max(0px, env(safe-area-inset-bottom));
        gap:6px;
      }

      /* Prevent iOS/Chrome zoom on all inputs (min 16px) */
      input, select, textarea { font-size:1rem !important; }

      .composer-tool-btn,
      .compose-expand-btn,
      .send-key-toggle,
      .send-btn,
      .stop-btn {
        width:44px;
        height:44px;
        flex-basis:44px;
      }
      .send-btn { font-size:1.2rem; }
      .input-area textarea {
        flex-basis:100%;
        min-height:104px;
        padding:44px 62px 14px 13px;
        border-radius:18px;
      }
      .compose-expand-btn {
        width:44px;
        height:36px;
        flex-basis:auto;
      }
      .editor-actions {
        grid-template-columns:repeat(3, minmax(0, 1fr));
      }
      .empty-chat-shell { padding:4px 0 14px; }
      .empty-chat-head {
        align-items:stretch;
        flex-direction:column;
      }
      .empty-chat-head .new-btn { width:100%; min-height:42px; }
      .empty-chat-list {
        display:flex;
        flex-direction:column;
        gap:8px;
      }
      .empty-chat-item {
        padding:12px 13px;
      }
      .chat-main { padding:8px; }
    }