/* Phone + tablet fixes (loaded last). The desktop layout is untouched: every rule
   here sits in a max-width or touch media query. Found by an audit of every page at
   390x844 (2026-10-29): the chat conversation was squeezed to ~230px under the
   thread list, list rows had the ⋯ button over their figures, the chart's Export /
   Full screen buttons covered the price axis, and the logs table hid its message
   column off to the right. */

@media (max-width:880px){
  /* the rail (profile / run lists) spans the screen; it used to shrink to its
     content (align-self:start from the desktop sticky rail) */
  .sidebar{align-self:stretch;width:auto}

  /* ---- Ask Claude: header, a compact thread bar, then the conversation ---- */
  #chatPanel.page-modal{grid-template-rows:auto auto minmax(0,1fr);padding:10px 12px 10px;gap:8px}
  #chatPanel .page-hd{margin:0}
  #chatPanel .page-hd h2{font-size:20px}
  #chatPanel .page-hd .crumb,#chatPanel .page-hd .page-desc{display:none}
  #chatPanel .chat-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;max-height:none}
  #chatPanel .chat-side > .btn{width:auto;height:34px}
  #chatPanel .chat-new{flex:1 1 auto}
  #chatPanel .chat-gear{flex:none;order:2}
  /* threads: one swipeable row of chips under the buttons */
  #chatPanel .chat-threads{order:3;flex:1 0 100%;flex-direction:row;gap:6px;max-height:none;overflow-x:auto;overflow-y:hidden;
    border-top:0;padding:0 0 2px;scrollbar-width:thin;overscroll-behavior-x:contain}
  #chatPanel .chat-threads li{flex:none;max-width:220px;padding:5px 6px 5px 11px;border:1px solid var(--line2);border-radius:999px;font-size:13px}
  #chatPanel .chat-threads li.active{background:var(--gold-bg);box-shadow:none;border-color:var(--gold)}
  #chatPanel .chat-threads:empty{display:none}
  #chatPanel .chat-threads .thr-del{opacity:.6;font-size:12px}
  #chatPanel .chat-head{padding:8px 10px;gap:8px}
  #chatPanel .chat-head #chatTitle{font-size:15px;min-width:0}
  #chatPanel .chat-model{max-width:42%;min-width:0;height:32px;flex:0 1 auto}
  #chatPanel .chat-log{padding:12px 10px;gap:10px}
  #chatPanel .msg{max-width:94%;font-size:14px;padding:9px 12px}
  #chatPanel .msg table{display:block;max-width:100%;overflow-x:auto}
  #chatPanel .msg pre{max-width:100%;white-space:pre;overflow-x:auto}
  #chatPanel .chat-form{padding:8px;gap:8px}
  /* 16px stops iOS Safari zooming the page when the box takes focus */
  #chatPanel .chat-form textarea{font-size:16px;min-height:42px}

  /* ---- Logs: one card per entry so the message is readable ---- */
  #logsTable,#logsTable thead,#logsTable tbody{display:block;width:100%}
  #logsTable thead tr{display:flex;align-items:center;border-bottom:1px solid var(--line2)}
  #logsTable thead th{display:none}
  #logsTable thead th.pick-col{display:flex;align-items:center;gap:8px;width:auto;padding:8px 12px;border:0;
    font:500 12.5px/1 var(--display);color:var(--ink2)}
  #logsTable thead th.pick-col::after{content:"Select all on this page"}
  #logsTable tbody tr{display:grid;grid-template-columns:28px auto auto minmax(0,1fr);gap:4px 8px;align-items:center;
    padding:9px 12px;border-bottom:1px solid var(--line)}
  #logsTable tbody tr:last-child{border-bottom:0}
  #logsTable tbody td{display:block;padding:0;border:0;min-width:0}
  #logsTable td.pick-col{width:auto;padding:0;text-align:left;grid-row:1 / span 3}
  #logsTable td:nth-child(5){grid-column:2 / -1;font-size:12.5px}
  #logsTable td:nth-child(5):empty{display:none}
  #logsTable td:last-child{grid-column:2 / -1;min-width:0}
  #logsTable td[colspan]{grid-column:1 / -1;padding:12px 0}
  #logsTable .log-row.error td:first-child,#logsTable .log-row.warn td:first-child{box-shadow:none}
  #logsTable .log-row.error{box-shadow:inset 3px 0 0 var(--down)}
  #logsTable .log-row.warn{box-shadow:inset 3px 0 0 var(--warn)}
}

/* touch screens have no hover: the ⋯ row button is always shown, so keep the
   row's figures clear of it */
@media (hover:none), (max-width:880px){
  .sidebar .list li{padding-right:36px}
  .sidebar .kebab{opacity:1}
}

@media (max-width:640px){
  /* Export PNG / Full screen sit on their own line above the chart instead of
     on top of the legend and the price axis */
  .stagewrap:not(.full) .stage-chart{padding-top:44px}
  .stagewrap:not(.full) .stage-chart::before{content:"";position:absolute;left:0;right:0;top:43px;border-top:1px solid var(--line)}
  .stagewrap:not(.full) .stage-tools{top:6px;left:8px}
  .stagewrap:not(.full) .stage-chart .chart-legend-overlay{top:8px !important}
  #mtMonitorModal .mon-stage:not(.full) #mon-d-price > .hint{padding:16px 12px 0}
  /* a narrow rail: let its empty-state text use the width it has */
  .ladder-rail .rail-empty{inset:24% 6px auto;font-size:11.5px}
  #mtMonitorModal .mon-stage .rail-empty{padding:8px 4px;font-size:11.5px}
}

/* no hover on touch: a message's copy buttons sit under its text instead */
@media (hover:none){
  #chatPanel .msg-tools{position:static;display:flex;justify-content:flex-end;gap:4px;margin:6px 0 -2px}
}

/* ---- User Management: roles editor ticks are one column; tabs scroll if tight ---- */
@media (max-width:640px){
  .role-perms{grid-template-columns:minmax(0,1fr)}
  #usersModal .mon-tabs{flex-wrap:nowrap;overflow-x:auto}
  #usersModal .mon-tab{white-space:nowrap}
  .role-actions .btn{flex:1 1 auto}
}