/* ───────────────────────── touch ───────────────────────── */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px; }
  .icon, .vtab, .pick, .round, .key, .sel, .frun { min-height: var(--tap); }
  .icon { min-width: var(--tap); }
  .key { min-width: var(--tap); }
  .round { width: var(--tap); height: var(--tap); }
  #cinput { min-height: var(--tap); }
  .run-head { padding: 10px 16px; }
  .opt { padding: 15px 14px; }
  .proj { padding: 13px 12px; }
  .conv { padding: 12px 12px; }
  /* Hover on touch applies on tap and sticks, reading as a stuck selection. */
  .opt:hover, .proj:hover, .tcard:hover, .pick:hover, .icon:hover,
  .key:hover, .pcard:hover, .run-head:hover, .conv:hover { background: none; }
  .frun:hover { background: var(--wash-2); color: var(--dim); }
  .fcard.open { background: var(--surface); }
  .fhead { padding: 14px; }
  .conv.on { background: var(--wash-2); }
  .proj.on { background: var(--wash-2); }
  .opt.on { background: var(--wash-2); }
  .pcard.on { background: var(--surface); }
  .run-head { background: var(--wash); }
  .key { background: var(--wash); }
}

/* ───────────────────────── phones ───────────────────────── */
@media (max-width: 860px) {
  #burger { display: block; }
  #side {
    position: fixed; z-index: 25; top: 0; bottom: 0; left: 0;
    flex-basis: auto; width: min(var(--side-w), 84vw);
    padding-left: var(--safe-l);
    transform: translateX(-100%); transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  #side.open { transform: none; }
  @media (prefers-reduced-motion: reduce) { #side { transition: none; } }
  /* No room for a second column, so the rail slides over the conversation. */
  #convo {
    position: absolute; z-index: 22; top: 0; bottom: 0; left: 0;
    flex-basis: auto; width: min(var(--convo-w), 78vw);
    padding-left: var(--safe-l); display: flex;
    background: var(--surface);
    transform: translateX(-101%); transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  #convo.open { transform: none; }
  @media (prefers-reduced-motion: reduce) { #convo { transition: none; } }
  #phdr-git { display: none; }
  #phdr { height: 48px; gap: 6px; }
  /* Four views do not fit beside a project name at phone widths. The name
     gives first — it is also the title of the drawer and the sidebar row —
     and the control itself tightens; past that it scrolls, with the tab you
     just chose brought into view. */
  /* The name gives first, and gives nearly all of it — the high shrink
     factor is what stops flex from taking the difference out of both in
     proportion to their widths, which would clip a tab while the project
     name still had room to spare. */
  #phdr-name { flex: 0 20 auto; min-width: 0; }
  #views { flex: 0 1 auto; min-width: 5rem; padding: 2px; gap: 0;
           overflow-x: auto; scrollbar-width: none; }
  #views::-webkit-scrollbar { display: none; }
  .vtab { padding: 6px 10px; font-size: 12.5px; }
  #feed { padding-left: max(16px, var(--safe-l));
          padding-right: max(16px, var(--safe-r)); }
  .msg { margin-bottom: 22px; }
  .msg.user .body { max-width: 88%; }
  #composer { padding-left: max(12px, var(--safe-l));
              padding-right: max(12px, var(--safe-r)); }
  #stack { max-height: 30vh; padding: 4px 12px 12px;
           scroll-snap-type: x proximity; }
  .col { width: 138px; scroll-snap-align: start; }
  #termwrap, #video, #logs { margin-left: max(12px, var(--safe-l));
                             margin-right: max(12px, var(--safe-r)); }
  #keys, #devkeys, #devbar, #devtype {
    padding-left: max(12px, var(--safe-l));
    padding-right: max(12px, var(--safe-r));
  }
  #logs { flex: 0 0 36%; }

  /* Sheets come up from the bottom, where a thumb is. */
  .sheet { top: auto; bottom: 0; left: 0; right: 0; width: auto;
           transform: none; border-radius: var(--r-lg) var(--r-lg) 0 0;
           max-height: 82dvh; padding-bottom: var(--safe-b); }
  .sheet::before {
    content: ""; flex: 0 0 auto; width: 38px; height: 4px; border-radius: 999px;
    background: var(--wash-2); margin: 10px auto 0;
  }
  #menu { width: auto; }
  #todos { max-height: 88dvh; }
  #todo-cols { flex-direction: column; padding-bottom: calc(20px + var(--safe-b)); }
}

@media (max-width: 950px) and (orientation: landscape) {
  #stack { max-height: 26vh; }
  #logs { flex: 0 0 42%; }
  #cinput { max-height: 26vh; }
  #feed { padding-top: 4px; }
  .msg { margin-bottom: 18px; }
}