/* Responsive: mobile topbar + off-canvas sidebar */
  html, body { max-width: 100%; overflow-x: hidden; }
  #mobile-topbar {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; height: 48px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 4px;
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    z-index: 120;
  }
  #mobile-topbar button {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #mobile-topbar button:hover { background: var(--panel-2); }
  #mobile-topbar .brand { height: 26px; width: auto; display: block; }
  #sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
  }
  #sidebar-backdrop.visible { display: block; }

  @media (max-width: 860px) {
    #mobile-topbar { display: flex; }
    /* The collapse rail is a desktop-width affordance; the off-canvas
       drawer already has its own open/close control (the topbar hamburger). */
    #sidebar-collapse-btn { display: none; }
    #app {
      height: calc(100vh - 48px);
      height: calc(100dvh - 48px);
      margin-top: 48px;
    }
    #sidebar {
      position: fixed;
      top: 0; bottom: 0; left: 0;
      width: 84vw;
      max-width: 320px;
      /* Above #toast-container's z-index (200, overlays.css) so a toast that
         fires while the drawer is open appears over the dimmed backdrop but
         never paints over the open drawer's own content. */
      z-index: 210;
      transform: translateX(-100%);
      transition: transform 0.18s ease;
      box-shadow: 8px 0 24px rgba(0,0,0,0.4);
      padding-left: env(safe-area-inset-left);
      padding-bottom: env(safe-area-inset-bottom);
    }
    #sidebar.open { transform: translateX(0); }
    .stat-tiles { grid-template-columns: 1fr 1fr; }
    /* #main-toolbar already scrolls horizontally at any width (see
       workspace.css) — on touch this is a swipeable single-row strip, so hide
       the scrollbar mobile browsers would otherwise draw across it. Wider
       windows keep the app's normal themed scrollbar as the visible
       affordance for mouse users. */
    #main-toolbar { scrollbar-width: none; }
    #main-toolbar::-webkit-scrollbar { display: none; }
    #main-toolbar .spacer { display: none; }
    .project-cards { grid-template-columns: 1fr; }

    /* iOS Safari zooms the whole page in when a focused field's computed
       font-size is under 16px — every text input/select/contenteditable
       here is sized smaller than that for density on desktop, so pin them
       to 16px under the mobile breakpoint to stop the focus-zoom jump. */
    input, textarea, select, #prompt-input, .rich-editor-input {
      font-size: 16px !important;
    }
    #work-item-search, #goals-search { width: auto; flex: 1; min-width: 140px; }

    /* Hit areas the desktop layout sizes tight (icon buttons, checkboxes,
       row action glyphs) — under ~40px, touch accuracy drops sharply. */
    #composer #composer-toolbar button, .rich-editor-toolbar button { width: 40px; height: 40px; }
    #composer #composer-toolbar button[data-cmd="ul"], .rich-editor-toolbar button[data-cmd="ul"],
    #composer #composer-toolbar button[data-cmd="ol"], .rich-editor-toolbar button[data-cmd="ol"],
    #composer #composer-toolbar button[data-cmd="task"], .rich-editor-toolbar button[data-cmd="task"] { width: auto; padding: 0 10px; }

    /* The editor toolbar carries ~17 buttons (more in the workspace composer,
       which also has attach/image) — wrapping them at mobile width burns
       several rows of vertical space right above a small input. Collapse
       to one swipeable row instead, the same pattern #main-toolbar already
       uses above. */
    #composer-toolbar, .rich-editor-toolbar {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    #composer-toolbar::-webkit-scrollbar, .rich-editor-toolbar::-webkit-scrollbar { display: none; }
    #composer-toolbar button, .rich-editor-toolbar button,
    #composer-toolbar .sep, .rich-editor-toolbar .sep { flex-shrink: 0; }
    .task-row .check {
      width: 24px; height: 24px;
    }
    .workspace-row .del, .file-row .del, .file-row .dl, .status-update-row .del,
    .goal-row .view-workspace, .goal-row .edit, .goal-row .del, .goal-row .cancel,
    .task-row .del, .project-item .del, .project-item .pin,
    .note-row .edit, .note-row .del {
      padding: 8px;
      margin: -6px;
    }

    /* Work Items actions are real labeled buttons (see work-items.css) — on
       touch, grow them into an evenly-split full-width row instead of
       small side-by-side chips, so each stays an easy target and the
       group doesn't crowd against the status select above it. */
    .work-item-row-actions { flex-wrap: wrap; width: 100%; }
    .work-item-row-actions button {
      flex: 1 1 calc(50% - 6px);
      justify-content: center;
      padding: 9px 8px;
      font-size: 12px;
    }
    /* Bumped again over the already-enlarged base size (work-items.css) so
       they stay a clear touch/visual target on small screens. */
    .work-item-row-actions .icon-svg { width: 19px; height: 19px; }
    .msg-bubble-copy, .actions-toggle { padding-top: 5px; padding-bottom: 5px; }

    /* Thread header meta row (agent label, start time, status select,
       export format, export/archive buttons) packs 6 unshrinkable controls
       onto one line — on mobile that overflows well past the viewport
       edge with no scroll affordance (page is overflow-x: hidden), making
       Export/Archive completely unreachable. Let it wrap instead. */
    .thread-meta-row { flex-wrap: wrap; row-gap: 8px; }
    /* Tighter than the desktop cap (workspace.css/tasks.css) — a short mobile
       viewport has much less headroom to spare above the composer. */
    #workspace-tasks-list, #pinned-list { max-height: 33vh; }

    /* Workspace rows pack up to 8 flex siblings (agent badge, title, tag icons,
       status select, date, 2 action icons) onto one line — fine on desktop,
       but well under mobile width that squeezes the title down to a sliver
       before anything else even competes for space. Let the row wrap and
       force the title onto its own full-width line so it stays readable;
       the badges/select/meta/actions flow onto a line below it. */
    .workspace-row { flex-wrap: wrap; row-gap: 6px; }
    .workspace-row .title {
      order: -1;
      flex: 1 1 100%;
      white-space: normal;
      word-break: break-word;
    }

    /* Work Items rows put the status select + up to 4 action icons to the
       right of the body column — on a narrow viewport that leaves the
       title/description squeezed into a thin strip. Force the body onto
       its own full-width line so the title/description get the space,
       with the select + actions flowing onto a line beneath. */
    .work-item-row { flex-wrap: wrap; row-gap: 8px; }
    .work-item-row .body { order: -1; flex: 1 1 100%; }

    /* Filenames are single-line-ellipsis on desktop for density; let them
       wrap on mobile instead of chopping most of the name off. */
    .file-row .fname { white-space: normal; word-break: break-word; }

    #settings-body { flex-direction: column; gap: 16px; }
    #settings-nav-col { flex-basis: auto; flex-direction: row; flex-wrap: wrap; gap: 14px 18px; }
    .settings-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
    .settings-nav-group-label { display: none; }

    .breakdown-row .name, .plan-limit-row .name { width: 96px; }
    .breakdown-row .figures, .plan-limit-row .figures { width: 110px; }
    .usage-agent-projects { overflow-x: auto; }
    .usage-agent-columns { flex-direction: column; }

    #composer, #toast-container, #restart-banner {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* Elements whose desktop affordance depends on :hover (copy/delete
     buttons that fade in) are unreachable on touch, where nothing ever
     hovers — keep them visible whenever the pointer can't hover at all. */
  @media (hover: none) {
    .msg-bubble-copy { opacity: 1; }
    .project-item .del, .project-item .pin { opacity: 1; }
  }

  @media (max-width: 520px) {
    .stat-tiles { grid-template-columns: 1fr; }
    #main-header, #main-toolbar, #thread-header, #composer, #jobs, #messages, #workspace-list, #workspace-list-toolbar,
    #dashboard, #settings-view, #project-list,
    #work-item-toolbar, #work-item-list, #work-item-stats, #goals-toolbar, #goals-list, #goals-stats,
    #files-view, #status-view, #gallery-view, #changelog-view {
      padding-left: 14px;
      padding-right: 14px;
    }
    .msg-user, .msg-assistant { max-width: 92%; }
    .modal-card { width: min(92vw, 480px); padding: 20px 18px; }
    #toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    #scroll-bottom-btn { right: 18px; }
  }