/* === Patient chart below 1200px: tablet drawers, phone views, keyboard bar ===
   Loaded after chart-layout.css and insert-panel.css. Nothing here applies at
   1200px and wider. Logic: features/chart-mobile.js (sets data-mview on
   #view-patient-detail, --chm-* variables and html.chm-kb-open / .chm-kbar-on).
   One colour channel per element, as in the rest of the chart. */

/* ── Tablet and phone: the chart fills the content area, panes scroll inside ── */
@media (max-width: 1199px) {
  .content:has(> #view-patient-detail.active) { overflow: hidden; }
  #view-patient-detail.chart-view.active { height: 100%; min-height: 0; padding-bottom: 0; }
  #view-patient-detail .ch-strip { flex: none; }
  .ch-work { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; position: relative; }
  .ch-centre { flex: 1 1 auto; min-width: 0; }
  .ch-note-scroll, .ch-rec-scroll { overscroll-behavior: contain; }

  /* No iOS zoom on focus: 16px text in every field the doctor types into. */
  #view-patient-detail .ch-note textarea,
  #view-patient-detail .ch-note .visit-free-notes,
  #view-patient-detail .ch-note .vf-list-notes { font-size: 16px; line-height: 1.65; }
  #view-patient-detail .ch-note :is(.linerow-input, .medrow-name, .medrow-dose),
  #view-patient-detail .ch-note .vf-facts input,
  #view-patient-detail .ch-note .vital-field :is(input, select),
  #view-patient-detail .ch-input, #view-patient-detail .ch-rpt-body-edit,
  .ip-ai-composer textarea, .ip-term-input, #chart-insert input, #chart-insert textarea { font-size: 16px; }

  /* Keyboard open: the chart ends where the keyboard (and the bar above it) starts. */
  html.chm-kb-open #view-patient-detail.chart-view.active { height: calc(100% - var(--chm-kb, 0px)); }
  html.chm-kbar-on #view-patient-detail.chart-view.active { padding-bottom: 44px; box-sizing: border-box; }
  html.chm-kb-open #view-patient-detail .ch-note-scroll { padding-bottom: 30vh; }
  html.chm-kb-open #view-patient-detail #chart-draft-pane .ch-draft-foot,
  html.chm-kb-open #view-patient-detail .ch-rpt-foot { display: none; }

  /* The bar above the keyboard: "/", "@", next blank, Dictate, Done. */
  html.chm-kbar-on .chm-kbar:not([hidden]) {
    display: flex; align-items: center; gap: 2px; position: fixed; z-index: 48; inset-inline: 0;
    bottom: var(--chm-kb, 0px); height: 44px; padding: 0 6px; box-sizing: border-box;
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
    background: var(--surface); border-top: 1px solid var(--border-light); color: var(--ink-2);
  }
  .chm-kb-btn {
    flex: none; min-width: 44px; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: 0; border-radius: 6px; color: var(--ink-2); font: 500 14px var(--font); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .chm-kb-btn:active { background: var(--hover-neutral); }
  .chm-kb-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
  .chm-kb-glyph { font: 500 19px/1 'IBM Plex Mono', var(--mono); color: var(--text); }
  .chm-kb-btn.chm-rec { color: var(--danger); font-weight: 600; }
  .chm-kb-gap { flex: 1 1 auto; }
  .chm-kb-done { color: var(--primary); font-weight: 600; }

  /* "/" and "@" popups: placed in the visible band by chart-mobile.js; big rows. */
  .ch-slash-menu { overscroll-behavior: contain; }
  .ch-slash-menu .ch-menu-item { min-height: 44px; font-size: 15px; }
  .ch-slash-menu .ch-slash-group { padding-top: 10px; }
  .at-toast { bottom: calc(var(--chm-bottom, 0px) + 12px); }
}

/* ── Touch: 44px targets on tablets and phones ─────────────────────────────── */
@media (max-width: 1199px) and (pointer: coarse) {
  #view-patient-detail :is(.ch-iconbtn, .ch-tb) { min-width: 44px; height: 44px; }
  #view-patient-detail .ch-btn { height: 44px; }
  #view-patient-detail :is(.ch-btn-sm, .ch-btn-xs) { height: 40px; }
  #view-patient-detail .ch-tab, .ip-tab { height: 48px; }
  #view-patient-detail .ch-chip { height: 40px; padding: 0 10px; }
  #view-patient-detail .ch-menu-item { min-height: 44px; }
  #view-patient-detail .ch-vtype-slot .visit-type-btn { height: 36px; }
  #chart-insert .ip-textbtn { height: 36px; padding: 0 8px; }
}

/* ── Tablet (768-1199): note full width, Records as a left drawer ──────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .ch-strip { gap: 10px 20px; padding: 10px 16px; }
  .chm-rail-toggle { display: inline-flex; flex: none; margin-inline-start: auto; }
  .ch-strip-more { display: contents; }
  .ch-facts { margin-inline-start: 0; }
  .ch-rail {
    display: none; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 31;
    width: min(360px, 80vw); flex: none; border-inline-end: 1px solid var(--ch-line);
    box-shadow: var(--shadow-pop, 0 12px 32px rgba(12,31,59,.22));
  }
  .ch-work.chm-rail-open .ch-rail { display: flex; }
  .ch-centre { flex: 1 1 auto; }
  .ch-rec-head { padding-inline: 24px; }
  .ch-rec-body { padding-inline: 24px; }
}

/* ── Phone (< 768): one view at a time, bottom navigation ───────────────────── */
@media (max-width: 767px) {
  /* The strip is the only top bar on the chart: the app bar hides and its menu button
     moves into the strip (features/chart-mobile.js re-measures --chrome-h). */
  body:has(#view-patient-detail.active) .topbar { display: none; }
  /* The app bar is hidden on the chart: keep the impersonation signal as a 2px line. */
  html.is-impersonating body:has(#view-patient-detail.active)::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--imp-ink); z-index: 400; pointer-events: none; }
  .chm-menu { display: inline-flex; flex: none; }
  /* Patient strip: one compact sticky row, 56px; details in a tap-to-open sheet. */
  #view-patient-detail .ch-strip {
    position: relative; z-index: 45; flex-wrap: nowrap; align-items: center; gap: 4px;
    height: 56px; box-sizing: border-box; padding: 6px 4px;
    padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
  }
  .ch-who { flex: 1 1 auto; min-width: 0; gap: 4px; position: relative; }
  .ch-back, .chm-menu { margin: 0; position: relative; z-index: 1; }
  .ch-avatar { margin-inline-end: 4px; }
  .ch-avatar { width: 32px; height: 32px; font-size: 12px; }
  .ch-who-text { flex: 1 1 auto; min-width: 0; }
  .ch-name { font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-who-text .ch-meta { display: none; }
  .chm-meta { display: block; font-size: 12px; line-height: 1.3; color: var(--text-secondary); white-space: nowrap; }
  .chm-who-btn { display: inline-flex; flex: none; color: var(--text-tertiary); }
  .chm-who-btn::after { content: ""; position: absolute; inset: 0; }
  .chm-who-btn svg { transition: transform .15s; }
  .ch-strip.chm-open .chm-who-btn svg { transform: rotate(180deg); }
  .ch-strip .ch-menu-wrap { position: static; flex: none; margin: 0; }
  .ch-strip .ch-menu { top: calc(100% - 2px); inset-inline-end: 6px; max-width: calc(100vw - 12px); }
  .ch-strip-more {
    display: none; position: absolute; top: 100%; inset-inline: 0; padding: 12px 16px 16px;
    background: var(--surface); border-bottom: 1px solid var(--ch-line); box-shadow: 0 12px 24px rgba(12,31,59,.14);
  }
  .ch-strip.chm-open .ch-strip-more { display: flex; flex-direction: column; gap: 12px; }
  .chm-more-meta { display: block; font-size: 13px; color: var(--text-secondary); }
  .ch-strip-more .ch-alerts { flex-wrap: wrap; }
  .ch-strip-more .ch-problems { white-space: normal; font-size: 13px; }
  .ch-strip-more .ch-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; font-size: 13px; }

  /* Views: show one area, hide the others (the draft stays mounted). */
  .ch-work { flex-direction: column; background: var(--surface); }
  .ch-rail, .ch-centre, .ch-insert, .ch-ins-rail { display: none; }
  .ch-rail { flex: 1 1 auto; width: 100%; min-height: 0; }
  #view-patient-detail:is([data-mview="records"], [data-mview="bookings"], [data-mview="summary"], :not([data-mview])) .ch-rail { display: flex; }
  #view-patient-detail:is([data-mview="note"], [data-mview="record"], [data-mview="insert"]) .ch-centre { display: flex; flex: 1 1 auto; min-height: 0; }
  #view-patient-detail[data-mview="ai"] .ch-insert:not([hidden]) { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; }
  /* The front desk switches Summary / Bookings from the navigation bar. */
  #view-patient-detail:is([data-mview="bookings"], [data-mview="summary"]) .ch-tabs { display: none; }

  /* Records view: list full screen, filters on one scrolling row. */
  .ch-draft-slot { padding: 10px 12px 2px; }
  .ch-tabs { padding: 0 4px; }
  .ch-tabs .ch-tab { padding: 0 12px; font-size: 14px; }
  .ch-filters-row { padding: 6px 8px; }
  .ch-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .ch-filters::-webkit-scrollbar { display: none; }
  .ch-filters .ch-chip { flex: none; font-size: 13px; padding: 0 10px; }
  .ch-rec-row { padding: 12px 16px 13px; }
  .ch-rec-title { font-size: 15px; }
  .ch-rec-sum, .ch-rec-date { font-size: 13px; }
  .ch-summary { padding: 16px 16px 24px; }
  .ch-bk-row { padding-block: 11px; }

  /* Record view: full screen; back arrow to the list, "Back to note" when a visit is open. */
  .chm-back { display: inline-flex; flex: none; }
  .ch-rec-bar { padding: 4px 6px; gap: 4px; }
  #view-patient-detail .ch-rec-bar .ch-back-btn { order: 9; margin-inline-start: 4px; padding: 0 12px; height: 40px; border: 1px solid var(--border); background: var(--surface); }
  .ch-rec-bar .ch-back-btn svg { display: none; }
  .ch-rec-bar .ch-vsep, .ch-rec-bar .ch-rec-close { display: none; }
  .ch-rec-bar .ch-bar-end { margin-inline-start: auto; }
  .ch-d-only { display: none; }
  .ch-m-only { display: inline-flex; }
  .ch-rec-head { padding: 14px 16px 12px; }
  .ch-rec-body { padding: 4px 16px 24px; }
  .ch-rec-actions { gap: 8px; }
  .ch-sec-text, .ch-rec-doc .timeline-section-content { font-size: 15px; }
  .chm-cbar { display: flex; flex: none; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--ch-line); }
  .chm-cbar .ch-btn { padding: 0 10px 0 4px; gap: 4px; }
  #view-patient-detail:not([data-mview="record"]) .chm-cbar,
  .ch-centre:has(> .ch-panes #chart-record-pane:not([hidden])) .chm-cbar,
  .ch-centre:has(> .ch-panes #chart-draft-pane:not([hidden])) .chm-cbar { display: none; }

  /* Note view: sticky header (title, saved status, visit type), one-line details. */
  /* Header: row 1 is 44px (title, type dropdown, mode dropdown at the end), the details
     line (13px, muted) under it. Dropdown buttons are 44px tap targets. */
  .ch-draft-head { padding: 0 16px 6px; gap: 0 6px; align-items: center; }
  .ch-draft-title { flex: none; }
  .ch-when-full { display: none; }
  .ch-when-short { display: inline; }
  .ch-draft-meta { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ch-draft-meta .ch-meta-edit { display: none; }
  .ch-draft-title { line-height: 44px; }
  #view-patient-detail .ch-draft-head .ch-dd-btn { height: 44px; }
  .ch-vtype-slot { flex: 0 1 auto; }
  .ch-vtype-slot .ch-dd-btn { max-width: 40vw; }
  .ch-mode-slot .ch-dd-btn { max-width: 30vw; }
  .ch-draft-meta { flex-wrap: nowrap; white-space: nowrap; margin-top: -6px; }
  .ch-draft-meta .ch-meta-text { flex: none; }
  .ch-draft-meta .ch-meta-ref { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .ch-meta-edit { flex: none; position: relative; }
  .ch-meta-edit::after, button.ch-meta-fee::after { content: ""; position: absolute; inset: -12px -6px; }
  button.ch-meta-fee { position: relative; }
  #view-patient-detail .ch-draft.ch-meta-open .ch-note .vf-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0 22px; }
  #view-patient-detail .ch-note .vf-facts .form-group { width: auto !important; grid-column: 1 / -1; }
  #view-patient-detail .ch-note .vf-facts .form-group:has(#visit-date) { grid-column: 1; }
  #view-patient-detail .ch-note .vf-facts .form-group:has(#visit-time) { grid-column: 2; }
  #view-patient-detail .ch-note .vf-facts .vf-fee { width: auto; }
  #view-patient-detail .ch-note .vf-facts .form-group > label { font-size: 12px; height: auto; margin-bottom: 4px; }
  #view-patient-detail .ch-note .vf-facts :is(.dp-field, .tp-field, input, .vf-fee-field) { height: 44px; font-size: 16px; }

  /* Toolbar: one horizontally scrolling row, most used first, B / I / U after the lists. */
  #chart-toolbar, .ch-rpt .ch-toolbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 6px; gap: 2px; height: 44px; box-sizing: content-box; }
  #view-patient-detail #chart-toolbar .ch-tb { height: 44px; }
  /* Templates sits behind "⋯" at the end of the row. */
  #chart-toolbar > .ch-menu-wrap:has(#ch-tpl-menu-btn) { order: 9; }
  #chart-toolbar #ch-tpl-menu-btn { padding: 0; }
  /* Scrolled note: a hairline shadow under the toolbar, so cut-off lines read as scrolled. */
  .ch-draft.chm-scrolled #chart-toolbar { box-shadow: 0 6px 8px -6px rgba(12,31,59,.18); position: relative; z-index: 2; }
  #chart-toolbar::-webkit-scrollbar, .ch-rpt .ch-toolbar::-webkit-scrollbar { display: none; }
  #chart-toolbar .ch-tb-sep { display: none; }
  #chart-toolbar :is(.ch-tb-b, .ch-tb-i, .ch-tb-u) { order: 0; } /* real formatting now (features/rich-editor.js) */
  #chart-toolbar > .ch-menu-wrap { order: -1; }
  #chart-toolbar > .ch-voice-wrap { order: -2; }
  #chart-toolbar .ch-tb-text { padding: 0 10px; font-size: 14px; }
  .ch-rpt .ch-rpt-insert { flex: none; flex-wrap: nowrap; white-space: nowrap; }
  .ch-rpt .ch-toolbar > * { flex: none; }
  /* Toolbar menus escape the scrolling row: full width under the toolbar. */
  #chart-toolbar .ch-menu { position: fixed; top: calc(var(--chm-tb-bottom, 160px) + 4px); inset-inline: 8px; min-width: 0; max-height: 50vh; overflow-y: auto; z-index: 70; }
  .ch-voice-menu { min-width: 0; }

  /* Note text: full width, generous line height. */
  #view-patient-detail .ch-note .visit-form-sections { padding: 8px 16px 32px; line-height: 1.7; }
  #view-patient-detail .ch-note .visit-free-notes { min-height: 200px; }
  #view-patient-detail .ch-note :is(.linerow-del, .medrow-del, .linerow-resolve, .medrow-move-btn) { min-width: 40px; height: 40px; }
  #view-patient-detail .ch-note .vf-section-header { min-height: 44px; padding: 12px 0 4px; }
  /* Photos & videos: no long hint box, the add button as a plain row in the note flow. */
  #view-patient-detail .ch-note #vf-section-media .vf-section-body > div:first-child { display: none; }
  #view-patient-detail .ch-note #vf-section-media .vf-section-body .btn-secondary { min-height: 40px; }
  /* AI Assist: one scrolling row of text-style chips (neutral fill, no borders, 36px). */
  #view-patient-detail .ch-note .ai-plan-quick-btns {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin-inline: -16px; padding: 2px 16px 4px;
  }
  #view-patient-detail .ch-note .ai-plan-quick-btns::-webkit-scrollbar { display: none; }
  #view-patient-detail .ch-note .btn-ai-quick {
    flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--hover-neutral);
    color: var(--text); font-size: 14px; font-weight: 500;
  }
  #view-patient-detail .ch-note .btn-ai-quick.ai-plan-edit { margin: 0; border: 0; color: var(--text-secondary); }

  /* Action bar above the navigation: blanks · discard · Save draft · Sign visit. */
  #chart-draft-pane .ch-draft-foot { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); background: var(--surface); }
  #chart-draft-pane .ch-blanks { flex: 1 1 auto; margin: 0; min-height: 44px; display: flex; align-items: center; padding: 0 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
  #chart-draft-pane .ch-blanks.nb-counter { color: var(--text); text-decoration: underline; text-decoration-color: var(--ch-blank-bg); text-decoration-thickness: 3px; text-underline-offset: 4px; }
  #chart-draft-pane .ch-draft-foot .ch-btn { flex: none; height: 44px; padding: 0 14px; font-size: 14px; }
  #chart-draft-pane .ch-draft-foot .ch-discard { width: 44px; padding: 0; color: var(--text-secondary); }
  .ch-rpt-head { padding: 12px 16px 6px; }
  .ch-rpt-form { padding: 12px 16px 24px; }
  .ch-rpt-body-edit { min-height: 240px; line-height: 1.7; }

  /* Bottom navigation: fixed to the bottom of the chart, safe-area aware. The labels may sit
     partly inside the home-indicator zone (like native tab bars), so only part of the inset is added. */
  #view-patient-detail { --chm-sb: max(6px, calc(env(safe-area-inset-bottom, 0px) - 14px)); --chm-nav-h: calc(52px + var(--chm-sb)); }
  .chm-nav {
    display: flex; flex: none; align-items: stretch; height: var(--chm-nav-h); box-sizing: border-box;
    padding-bottom: var(--chm-sb);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    background: var(--surface); border-top: 1px solid var(--ch-line); position: relative; z-index: 46;
  }
  .chm-nav[data-single] { display: none; }
  .chm-nav-btn {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; padding: 4px 2px 2px; color: var(--text-secondary); font: 500 12px/1.2 var(--font); cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .chm-nav-btn span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chm-nav-btn[aria-current="page"] { color: var(--primary); }
  .chm-nav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; border-radius: 6px; }
  html.chm-kb-open .chm-nav { display: none; }
  /* Writing with the keyboard up: the bar above it has the tools, so the header keeps one
     row (the details line only while recording) and the toolbar steps aside. */
  html.chm-kbar-on #chart-draft-pane .ch-toolbar { display: none; }
  html.chm-kbar-on .ch-draft-meta:not(:has(.ch-meta-rec)) { display: none; }
  html.chm-kbar-on .ch-draft-meta .ch-meta-text, html.chm-kbar-on .ch-draft-meta .ch-meta-edit { display: none; }

  /* Insert: a bottom sheet over the note, above the navigation; drag the grip. */
  #view-patient-detail[data-mview="insert"] .ch-insert:not([hidden]) {
    display: flex; position: fixed; z-index: 44; inset-inline: 0; bottom: var(--chm-nav-h);
    height: min(60dvh, 560px); width: auto; padding-top: 30px; box-sizing: border-box;
    border-radius: 14px 14px 0 0; border-top: 1px solid var(--ch-line);
    box-shadow: 0 -10px 30px rgba(12,31,59,.18); transition: height .2s ease, transform .2s ease;
  }
  /* Grip: a 36px strip at the top of the sheet that owns its touch gestures. */
  #view-patient-detail[data-mview="insert"] .chm-grip {
    display: block; position: absolute; top: 0; inset-inline: 0; height: 36px; z-index: 1;
    touch-action: none; cursor: grab;
  }
  #view-patient-detail[data-mview="insert"] .chm-grip::before {
    content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 2px; background: var(--border);
  }
  #view-patient-detail[data-mview="insert"] .ch-insert.chm-sheet-full:not([hidden]) { height: calc(100% - var(--chrome-h, 52px) - 56px - var(--chm-nav-h)); }
  #view-patient-detail[data-mview="insert"] .ch-insert.chm-dragging { transition: none; }
  html.chm-kb-open #view-patient-detail[data-mview="insert"] .ch-insert:not([hidden]) { bottom: var(--chm-kb, 0px); height: min(60dvh, calc(var(--chm-vvh, 60dvh) - 64px)); }
  /* The navigation already switches Insert / AI: the panel's tabs give way to its close button. */
  #chart-insert .ip-tabs { position: absolute; top: 0; inset-inline-end: 4px; height: 30px; padding: 0; border: 0; z-index: 2; }
  #chart-insert .ip-tab { display: none; }
  #chart-insert .ch-ins-close { display: inline-flex; width: 40px; height: 30px; }
  #view-patient-detail[data-mview="ai"] #chart-insert .ip-tabs { display: none; }
  #chart-insert .ch-ins-head { min-height: 44px; }
  #chart-insert .ip-tip { display: none; }
  #chart-insert .chart-ins-row.ip-row { padding: 12px 16px; }
  #chart-insert .ch-ins-name { font-size: 15px; }
  #chart-insert .ch-ins-prev { font-size: 13px; }
  #chart-insert .ip-row .ip-handle { display: none; }
  #chart-insert .ch-ins-acts { gap: 4px; }

  /* AI view: full screen, composer above the keyboard (the chart shrinks to fit). */
  .ip-ai-head { padding: 10px 16px; }
  .ip-ai-msgs { padding: 14px 16px; font-size: 15px; }
  .ip-ai-composer { padding: 8px 10px; padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)); }
  .ip-ai-composer textarea { min-height: 44px; }
  .ip-ai-send { width: 44px; height: 44px; }

  /* Records-only buttons on wider screens. */
  .chm-rail-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #view-patient-detail .ch-insert, .chm-who-btn svg { transition: none !important; }
}