/* Load after feature styles so phone sizing stays consistent across panels. */
@media (max-width: 600px) {
  .app { height: 100dvh; min-height: 0; grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .app > header { min-height: 44px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; }
  .app > header h1 { font-size: 13px; }
  .app > .agent-context { gap: 8px; padding: 8px 12px; }
  .app > .view-context { gap: 8px; padding: 8px 12px; }
  .app > .view-context strong { font-size: 14px; }
  .app > .view-tabs { gap: 3px; padding: 4px 8px; }
  .app > .view-tabs .view-tab { gap: 5px; padding: 0 9px; }
  .app > .view-tabs .view-tab span { font-size: 11px; }
  .view, .tool-view.active { min-height: 0; }
  .section-heading, .collection-heading { padding: 12px; }
  .collection-heading h2 { font-size: 20px; margin-bottom: 4px; }
  .section-heading span, .collection-heading p { font-size: 12px; line-height: 1.4; }
  .task-card, .agent-card, .workspace-row { padding: 12px; margin-bottom: 8px; border-radius: 12px; }
  #codex-sessions-list { gap: 8px; }
  #history-view .collection-heading { margin-bottom: 8px; padding-block: 12px; }
  #history-view .section-heading { padding-block: 10px; }
  .project-create summary { padding: 12px; }
  .tool-toolbar { padding: 8px 12px; gap: 6px; }
  .tool-toolbar input, .tool-toolbar select { min-width: 0; flex: 1 1 140px; max-width: 100%; min-height: 44px; padding: 8px; }
  .tool-toolbar button { min-height: 44px; padding: 8px 10px; }
  .terminal-output, .preview-surface { min-height: 0; }
  .terminal-output { padding: 12px; font-size: 12px; }
  #chat-view .chat { gap: 10px; padding: 10px 10px 68px; }
  .bubble { max-width: 96%; padding: 10px 12px; border-radius: 13px; font-size: 14px; }
  .bubble pre { max-width: 100%; overflow-x: auto; }
  .app:has(#chat-view.active) > header { min-height: 44px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; }
  .mobile-chat-identity strong, #mobile-chat-workspace { max-width: min(65vw, 260px); }
  #chat-view #composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 6px 10px max(6px, env(safe-area-inset-bottom)); }
  #composer #message { grid-column: 1 / -1; width: 100%; min-height: 44px; max-height: 100px; padding: 10px 12px; }
  #composer .chat-delivery { grid-column: 1; min-width: 0; gap: 0; }
  #composer .chat-delivery > span { display: none; }
  #composer #chat-delivery { width: 100%; max-width: 160px; min-width: 0; min-height: 44px; padding: 6px; font-size: 13px; }
  #composer .actions { grid-column: 2; margin: 0; gap: 4px; }
  #composer .actions button { min-height: 44px; }
  #composer #chat-view-workspace { width: 44px; }
  body:has(#chat-view.active) .mobile-chat-tools { right: 10px; bottom: calc(var(--composer-height, 110px) + 10px); }
  .mobile-chat-toggle { width: 44px; height: 44px; }
  .mobile-chat-actions { gap: 6px; padding: 6px; }
  .mobile-chat-actions button { padding: 8px 10px; }
  .mobile-chat-sheet { max-height: 90dvh; border-radius: 16px 16px 0 0; }
  .mobile-sheet-head { padding: 10px 12px; }
  .mobile-sheet-content .view-tabs { gap: 6px; padding: 10px; }
  .mobile-sheet-content .view-tab { min-height: 44px; }
  #todos-view .todo-workspace { padding: 14px 12px calc(88px + env(safe-area-inset-bottom, 0px)); }
  #todos-view h2 { font-size: 23px; }
  .todo-heading { margin-bottom: 14px; }
  #todo-form { grid-template-columns: minmax(0, 1fr) auto; padding: 6px; gap: 6px; align-items: end; }
  #todo-message { min-height: 44px; height: 44px; padding: 10px 4px; }
  #todo-form button { padding-inline: 10px; }
  .todo-list-heading { margin-top: 16px; }
  .todo-card { padding-block: 12px; }
  .todo-content > p { font-size: 14px; line-height: 1.5; }
}

/* Keep history controls and insights within the phone's content column. */
@media (max-width: 600px) {
  #history-view .history-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
  #history-view .history-filters label { min-width: 0; grid-column: 1 / -1; }
  #history-view .history-filters input,
  #history-view .history-filters select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--text); font-size: 16px; }
  #history-view .history-filters input[type="date"] { appearance: none; -webkit-appearance: none; }
  #history-view .history-filters button { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 13px; }
  #history-view .project-sections { padding-inline: 0; gap: 8px; }
  #history-view .project-sections button { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  #history-view .history-insights { min-width: 0; padding: 14px; }
  #history-view .history-insights h3 { font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
  #history-view .history-summary { font-size: 14px; line-height: 1.7; }
  #history-view .history-hours { gap: 2px; }
  #history-view .history-hours > div { min-width: 0; }
  #history-view .history-hours small { font-size: 9px; }
  #history-view .history-workspaces { display: grid; gap: 8px; }
  #history-view .history-workspaces p { min-width: 0; margin: 0; line-height: 1.5; }
  #history-view #codex-sessions-list { grid-template-columns: minmax(0, 1fr); }
  #history-view .session-approval { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  .app:has(#todos-view.active) { grid-template-rows: auto auto minmax(0, 1fr); }
  .app:has(#todos-view.active) > .agent-context,
  .app:has(#todos-view.active) > .view-context { display: none; }
  #todos-view .todo-workspace { padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  #todos-view .todo-heading { padding-bottom: 10px; margin-bottom: 0; gap: 8px; }
  #todos-view .todo-heading h2 { font-size: 20px; margin: 0; }
  #todos-view .todo-heading p { display: none; }
  #todos-view .todo-filters { padding: 10px 0; margin-bottom: 8px; }
  #todos-view .todo-column h3 { margin: 6px 0 10px; }
  #todos-view #todo-list { padding-bottom: 64px; }
  #todos-view .todo-card { padding: 12px; margin-bottom: 10px; }
  #todos-view #todo-compose-dialog { padding: 16px; }
}