/* What a finger and a phone need (task #185), on touch screens only, linked last in both shells.
   A computer's mouse keeps every size as it was. */

@media (pointer: coarse) {
  /* Safari on iOS zooms the page into a field whose text is under 16 px when it takes the
     focus, and stays zoomed: every field is 16 px. */
  /* (`!important`: the pages' own field rules are more specific, and none of them may win here.) */
  input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select, textarea, [contenteditable=true] { font-size: 16px !important; }
  input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select { min-height: 44px; }
  label:has(> input[type=checkbox], > input[type=radio]) { display: flex; align-items: center; min-height: 44px; }

  /* A thumb's target is 44×44 px (Apple; Android's 48 dp): what is pressed grows to it, the
     icon inside keeps its size. */
  .icon-button { width: 44px; height: 44px; }
  .attach-button, .chat-view .send-button, .chat-view .stop-button, .sa-composer .send-button { width: 44px; height: 44px; }
  .history-more { width: 44px; height: 44px; right: 0; }
  .change-note-close { width: 44px; height: 44px; }
  .btn, .chat-suggestion, .activity-trigger, .share-button { min-height: 44px; }
  .btn.small { min-height: 44px; padding: 5px 12px; }
  .copy-button, .thread-action { height: 44px; line-height: 44px; padding: 0 10px; }
  .more-info > summary { display: flex; align-items: center; min-height: 44px; }
  .workspace .breadcrumbs :is(a, button, .current) { display: inline-flex; align-items: center; min-height: 44px; }
  .wk .wk-tabs a, .wk-back, .wk details > summary, .wk h2 > a, .wk-feature > a, .wk-breadcrumb > a, .wk-article-tabs > a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .wk-mobile-toc a { display: flex; align-items: center; min-height: 44px; }
}

/* What stays visible above a phone's keyboard (`viewport.js`: `--seen-height`, `html.keyboard`)
   and clear of the phone's edges (the shells' `viewport-fit=cover`). */
.app-shell { height: var(--seen-height, 100dvh); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
html.keyboard .app-shell { min-height: 0; padding-bottom: 0; }
html.keyboard .chat-view .composer { min-height: 0; }
html.keyboard .chat-view .composer textarea { min-height: 44px; }
@media (max-width: 760px) {
  .navigation { padding-top: calc(15px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); padding-left: calc(14px + env(safe-area-inset-left)); }
  /* The shell keeps the home indicator clear already. */
  .composer-wrap { padding-bottom: 12px; }
}

/* A phone on its side: the box and the header leave room for the answer. */
@media (pointer: coarse) and (max-height: 500px) {
  .chat-view .composer { min-height: 0; }
  .chat-view .composer textarea { min-height: 44px; }
  .chat-view .welcome { display: none; }
}