.mobile-chat-identity, .mobile-chat-tools { display: none; }
.mobile-chat-sheet { width: min(560px, 100%); max-height: 85dvh; padding: 0; border: 1px solid var(--line); border-radius: 22px 22px 0 0; margin: auto auto 0; color: var(--text); background: var(--panel); box-shadow: var(--shadow); }
.mobile-chat-sheet::backdrop { background: rgba(40, 30, 25, .35); }
.mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.mobile-sheet-head button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--blue); }
.mobile-sheet-content { padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow: auto; }
.mobile-sheet-content .agent-context { flex-wrap: wrap; }
.mobile-sheet-content .agent-picker { flex: 1 1 100%; }
.mobile-sheet-content .chat-agent-context { display: block; }
.mobile-sheet-content .chat-mode-switch { display: flex; flex-wrap: wrap; }
.mobile-sheet-content .view-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }
.mobile-sheet-content .view-tab { min-height: 56px; flex-direction: row; }
.mobile-sheet-content .view-tab span { display: inline; font-size: 12px; }
.mobile-sheet-content > #context-personal-chat { margin: 12px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--blue); }
.mobile-sheet-content .plan-artifact { position: relative; inset: auto; width: auto; height: 55dvh; margin: 12px; }
.mobile-sheet-content .plan-artifact.collapsed { width: auto; height: 62px; }
.mobile-chat-tools button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
@media (max-width: 600px) {
  .app > .view-tabs { display: flex; overflow-x: auto; gap: 6px; padding: 8px 12px; scrollbar-width: none; }
  .app > .view-tabs .view-tab { flex: 0 0 auto; flex-direction: row; min-height: 44px; padding: 0 12px; }
  .app > .view-tabs .view-tab span { display: inline; font-size: 12px; }
  .app:has(#history-view.active, #assignments-view.active) > .agent-context,
  .app:has(#history-view.active, #assignments-view.active) > .view-context { display: none; }
  .app:has(#history-view.active, #assignments-view.active) { height: 100dvh; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
  #history-view, #assignments-view { padding-bottom: max(20px, env(safe-area-inset-bottom)); overscroll-behavior-y: contain; }
  #history-view button, #assignments-view button { min-height: 44px; }
  #history-view .project-sections button { min-height: 44px; }
  #history-view .task-actions, #assignments-view .task-actions { gap: 8px; }
  #history-view .task-actions button, #assignments-view .task-actions button { flex: 1 1 auto; font-size: 11px; }
  #history-view .agent-card h3 { font-size: 14px; line-height: 1.5; text-transform: none; }
  #history-view .codex-sessions > p { font-size: 13px; }
  body:has(#history-view.active, #assignments-view.active) .mobile-chat-tools { display: none; }
  #history-view .session-help summary { min-height: 44px; display: flex; align-items: center; }
  #assignments-view input, #assignments-view select, #assignments-view textarea { min-width: 0; font-size: 16px; }
  #assignments-view .assignment-controls { grid-template-columns: minmax(0, 1fr); }
  #assignments-view .assignment-controls > * { width: 100%; }
  #assignments-view .run-option { align-items: flex-start; line-height: 1.5; }
  #assignments-view .run-option input { flex: 0 0 18px; margin-top: 2px; }
  body:has(#chat-view.active) { overflow: hidden; }
  .app:has(#chat-view.active) { height: var(--chat-viewport-height, 100dvh); min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .app:has(#chat-view.active) > .agent-context,
  .app:has(#chat-view.active) > .view-tabs,
  .app:has(#chat-view.active) > .view-context,
  #chat-view > .chat-agent-context,
  #chat-view > .chat-mode-switch,
  #chat-view > .planning-progress,
  #chat-view .plan-artifact { display: none; }
  .app:has(#chat-view.active) > header { min-height: 48px; padding: max(8px, env(safe-area-inset-top)) 14px 8px; }
  .app:has(#chat-view.active) > header h1 { display: none; }
  .app:has(#chat-view.active) .mobile-chat-identity { min-width: 0; display: flex; gap: 9px; align-items: baseline; }
  .mobile-chat-identity strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
  .mobile-chat-session { display: grid; gap: 2px; min-width: 0; }
  #mobile-chat-workspace { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
  .mobile-chat-identity span { font-size: 11px; color: var(--muted); }
  #chat-view.active { grid-template-rows: minmax(0, 1fr) auto; }
  #chat-view .chat-workspace { grid-row: 1; }
  #chat-view #composer { grid-row: 2; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  #composer textarea { flex: 1; min-width: 0; resize: none; max-height: 110px; font-size: 16px; }
  #composer .actions { margin: 0; }
  #composer #new-chat { display: none; }
  #composer #send { min-height: 44px; padding: 0 14px; }
  body:has(#chat-view.active) .mobile-chat-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: fixed; z-index: 15; right: 16px; bottom: calc(var(--composer-height, 64px) + 14px); }
  .mobile-chat-toggle { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; color: white; background: var(--blue); border: 0; border-radius: 50%; box-shadow: 0 6px 22px rgba(64, 35, 27, .25); }
  .mobile-chat-tools svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-chat-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .mobile-chat-actions[hidden] { display: none; }
  .mobile-chat-actions button { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 24px; color: var(--text); background: var(--panel); box-shadow: 0 4px 16px rgba(64, 35, 27, .12); font-size: 13px; }
  #chat-view .chat { padding-bottom: 78px; }
}