/* =============================================================================
   mobile.css — Phase 870: responsive layer for phones (≤ 760px).
   Loaded on every page; everything is scoped inside the media query so the
   desktop layout is untouched. Conservative first pass: viewport already
   does most of the work; here we fix navigation, the top bar, inputs, modals,
   and runaway widths. Per-screen pane stacking comes in a later pass.
   ============================================================================= */

@media (max-width: 760px) {

  /* ---- Base typography + tap targets ---------------------------------- */
  html { -webkit-text-size-adjust: 100%; }
  /* 16px inputs stop iOS from auto-zooming when a field is focused. */
  input, select, textarea { font-size: 16px !important; }

  /* ---- Top bar: sticky + wrapping. It was fixed at 51px, but on mobile it
     wraps to 2 rows, so content padded for 51px slid UNDER it (cut-off page
     titles everywhere). Sticky puts it back in normal flow at any height, and
     the shells drop their 51px top padding below. ---------------------------- */
  #cf-topbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 51px;
    padding: 4px 10px !important;
    gap: 6px !important;
    white-space: normal !important;
  }
  /* Slim the top bar: drop the email, clinic name, cloud status, and the
     "Available" word (keep the 🔔). */
  #cal-user-email, #cf-clinic-name, #cal-cloud-status, #cf-dnd-label {
    display: none !important;
  }
  /* Shrink the "SoCal Neurosurgery" title + drop its 200px min-width so the
     whole bar (incl. sign-out) fits on ONE row. */
  #cf-topbar > div:first-child { min-width: 0 !important; }
  #cf-topbar > div:first-child span { font-size: 1.02em !important; }
  /* Hide the "N online" presence badge on mobile — it pushes the bar to a
     2nd row and the info isn't needed on a phone. */
  #cf-presence-badge { display: none !important; }

  /* ---- Sidebar icon rail → bottom tab bar ----------------------------- */
  #cf-sidebar {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 54px !important;
    flex-direction: row !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 250 !important;
    -webkit-overflow-scrolling: touch;
  }
  #cf-sidebar .cf-nav-btn {
    flex: 0 0 auto !important;
    width: 56px !important;
    padding: 8px 0 !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
  }
  /* Bottom-bar order: Calendar, Patients (chart), Tasks, Inbox first; the
     rest keep their natural order after. (CSS `order` — mobile only, so the
     desktop vertical sidebar is unaffected.) */
  #cf-sidebar > * { order: 10; }
  #cf-sidebar .cf-nav-btn[data-view="calendar"] { order: 1 !important; }
  #cf-sidebar .cf-nav-btn[data-view="patients"] { order: 2 !important; }
  #cf-sidebar .cf-nav-btn[data-view="tasks"]    { order: 3 !important; }
  #cf-sidebar .cf-nav-btn[data-view="inbox"]    { order: 4 !important; }
  /* 5th = Voice command, 6th = Ask AI (mobile-only action icons), then Address book. */
  #cf-nav-voice { order: 5 !important; }
  #cf-nav-askai { order: 6 !important; }
  #cf-sidebar .cf-nav-btn[data-view="addressbook"] { order: 7 !important; }
  /* Show the mobile action icons (inline display:none keeps them off desktop)
     and match the nav-button footprint. */
  #cf-sidebar .cf-nav-action {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 56px !important;
    padding: 8px 0 !important;
  }
  /* The vertical spacer would eat the row on a horizontal bar — hide it. */
  #cf-sidebar > div[style*="flex:1"] { display: none !important; }

  /* Shells reserved 54px on the LEFT for the rail — reclaim it and instead
     leave room at the BOTTOM for the new tab bar. */
  #calendar-shell, #patient-shell, #app-shell, #cf-duplicates-shell {
    padding-left: 0 !important;
    padding-top: 0 !important;       /* topbar is sticky/in-flow now */
    padding-bottom: 62px !important;
  }
  #calendar-shell main {
    padding: 12px 10px !important;
  }

  /* ---- Modals / overlays: near full-screen on a phone ----------------- */
  /* Dialogs are a fixed overlay whose first child is the white card. */
  [style*="position:fixed"][style*="inset:0"] > div:first-child,
  [style*="position: fixed"][style*="inset: 0"] > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 8px !important;
  }

  /* ---- Tame the widest fixed-width cards so nothing scrolls sideways --- */
  [style*="width:1400px"], [style*="width: 1400px"],
  [style*="width:1150px"], [style*="width: 1150px"],
  [style*="width:1100px"], [style*="width: 1100px"],
  [style*="width:920px"],  [style*="width: 920px"],
  [style*="width:880px"],  [style*="width: 880px"],
  [style*="width:680px"],  [style*="width: 680px"],
  [style*="width:560px"],  [style*="width: 560px"],
  [style*="width:520px"],  [style*="width: 520px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- Floating widgets shouldn't cover the screen ------------------- */
  #cf-pi-scratch { width: 78vw !important; right: 8px !important; top: 96px !important; }

  /* Softphone pill was anchored bottom-left to clear the old side rail;
     the rail is now a bottom tab bar, so lift the pill above it and move
     it off the left edge. */
  #cf-softphone {
    left: 8px !important;
    bottom: 66px !important;
    z-index: 9000 !important;
  }
  /* When the dialer is open, take the whole screen (covering the bottom tab
     bar) so the keypad + contact search have room. The collapsed pill keeps
     the rule above. */
  #cf-softphone.cf-sp-open {
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
  }
  #cf-softphone.cf-sp-open > div {
    width: 100% !important; height: 100vh !important; max-height: 100vh !important;
    border-radius: 0 !important; display: flex !important; flex-direction: column !important;
  }
  #cf-softphone.cf-sp-open > div > div:last-child { flex: 1 1 auto !important; overflow-y: auto !important; }
  /* Chat launcher — lift above the bottom tab bar, mirroring the softphone. */
  #cf-chat-launcher {
    bottom: 66px !important;
    right: 8px !important;
    z-index: 9000 !important;
  }

  /* ---- Messaging (B): chat drawer goes full-screen, like a messaging app ---- */
  #cf-chat-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    top: 0 !important;          /* cover the wrapped topbar too — own header */
    bottom: 0 !important;
    border-left: none !important;
    z-index: 9500 !important;   /* above the bottom tab bar while chatting */
  }
  /* The sound-options popover anchored to the chat header. */
  #cf-chat-sound-pop { right: 12px !important; left: auto !important; }

  /* ---- Calls & Texts (B): master-detail. Show the conversation LIST full
     width; tapping a contact slides into the conversation (cf-comms-showpane
     added by JS), with a ‹ back button. -------------------------------------- */
  #cf-comms-wrap { height: calc(100vh - 150px) !important; }
  #cf-comms-wrap aside { width: 100% !important; flex-shrink: 1 !important; }
  #cf-comms-wrap #cf-comms-pane { display: none !important; }
  #cf-comms-wrap.cf-comms-showpane aside { display: none !important; }
  #cf-comms-wrap.cf-comms-showpane #cf-comms-pane { display: flex !important; width: 100% !important; }
  .cf-comms-back { display: inline-block !important; }
  /* Row action buttons (pin + mark-unread) live behind the ⋯ menu now.
     Hidden by default; the kebab toggle adds .cf-open to reveal them. Bigger
     tap targets when open. Row padding leaves room for the ⋯ button. */
  .cf-comms-row-actions.cf-open { display: flex !important; background: rgba(255,255,255,0.95); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
  .cf-comms-row-actions button { padding: 7px 10px !important; font-size: 1em !important; }
  .cf-comms-kebab { padding: 6px 11px !important; font-size: 1.1em !important; }
  .cf-comms-contact { padding-right: 48px !important; }

  /* Conversation header: Call + Open chart / Link → icons to reclaim width on
     a phone (the labels pushed the contact name onto multiple lines). */
  .cf-comms-call { font-size: 0 !important; padding: 10px 14px !important; line-height: 1 !important; }
  .cf-comms-call::before { content: "☎"; font-size: 18px; }
  .cf-comms-openchart, .cf-comms-link { font-size: 0 !important; padding: 10px 13px !important; line-height: 1 !important; }
  .cf-comms-openchart::before { content: "📂"; font-size: 17px; }
  .cf-comms-link::before { content: "🔗"; font-size: 17px; }

  /* Composer: SMS / Internal Note tabs + Send → icons so the text field gets
     nearly the full width. The active tab keeps its dark background. */
  .cf-comms-comp-tab { font-size: 0 !important; padding: 8px 13px !important; line-height: 1 !important; }
  .cf-comms-comp-tab[data-tab="sms"]::before  { content: "💬"; font-size: 16px; }
  .cf-comms-comp-tab[data-tab="note"]::before { content: "📝"; font-size: 16px; }
  #cf-comms-comp-send { font-size: 0 !important; padding: 10px 15px !important; line-height: 1 !important; }
  #cf-comms-comp-send::before { content: "➤"; font-size: 18px; }

  /* Inbox tab row (✉️ 📠 📀 📞) collapses on scroll-down to give the
     conversation list / thread more height; revealed on any scroll-up. JS
     toggles body.cf-comms-tabs-hidden (see comms-view.js). */
  #cf-inbox-tabs {
    transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
    max-height: 120px;
    overflow: hidden;
  }
  body.cf-comms-tabs-hidden #cf-inbox-tabs {
    max-height: 0 !important;
    margin-bottom: 0 !important;
    opacity: 0 !important;
    border-bottom-width: 0 !important;
  }


  /* ---- Email inbox (B): same master-detail. List full width; tap a row to
     open the reading pane full width with a ‹ back button. ----------------- */
  #mail-split { min-height: calc(100vh - 200px) !important; }
  #mail-list { width: 100% !important; max-height: calc(100vh - 200px) !important; border-right: none !important; }
  #mail-pane { display: none !important; }
  #mail-split.cf-mail-showpane #mail-list { display: none !important; }
  #mail-split.cf-mail-showpane #mail-pane { display: block !important; }
  .mail-back { display: inline-block !important; }

  /* ---- Tab strips: bigger tap targets, horizontal scroll if they overflow.
     Covers the unified-inbox tabs (Email/Fax/DICOM/Calls) and mail's
     Inbox/Drafts/Outbox + Needs-action filter rows. -------------------------- */
  .mail-tab, .mail-filter, .cf-inbox-tab {
    padding: 10px 14px !important;
    font-size: 0.9em !important;
  }

  /* ---- Patient chart header: compact + icon-only action buttons ----
     The desktop header lays out Back + name + six text buttons in one row;
     on a phone the labels wrap and overflow ("Send intake" gets cut off).
     Collapse Back to a ‹ chip and every action button to its emoji, then
     center them on a tidy second row. */
  #patient-shell > div[style*="sticky"] {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* Back → ‹ icon, pinned to the start of row 1. */
  #pat-back {
    font-size: 0 !important;
    padding: 6px 11px !important;
    order: 1 !important;
  }
  #pat-back::before { content: "‹"; font-size: 22px; font-weight: bold; line-height: 1; }
  /* Name block fills the rest of row 1 so the action icons wrap below it. */
  #pat-back + div { order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important; }
  #pat-name { font-size: 1.08em !important; line-height: 1.15 !important; }
  #pat-meta { font-size: 0.78em !important; }
  /* Action buttons → emoji only, centered on row 2. */
  #pat-task, #pat-intake, #pat-schedule, #pat-findtime, #pat-package, #pat-fill-form, #pat-merge, #pat-new {
    font-size: 0 !important;
    padding: 8px 13px !important;
  }
  /* Forced break: full-width zero-height item between the name (order 2) and
     the action buttons (order 11+) so every icon drops to its own row and
     none sit inline with the patient name. */
  #pat-hdr-break  { display: block !important; order: 10 !important; flex: 0 0 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
  #pat-task       { order: 11 !important; }
  #pat-intake     { order: 12 !important; }
  #pat-package    { order: 13 !important; }
  #pat-fill-form  { order: 14 !important; }
  #pat-merge      { order: 15 !important; }
  #pat-new        { order: 16 !important; }
  #pat-schedule   { order: 17 !important; }
  #pat-findtime   { order: 18 !important; }
  #pat-task::before      { content: "✅"; font-size: 17px; }
  #pat-intake::before    { content: "📤"; font-size: 17px; }
  #pat-schedule::before  { content: "📅"; font-size: 17px; }
  #pat-findtime::before  { content: "🕑"; font-size: 17px; }
  /* Phase 822b — the action buttons now live in #pat-actions; make it one
     full-width horizontal scroll row under the name (overrides the old
     per-button order/break hacks above, which are now harmless no-ops). */
  #pat-actions { flex: 1 1 100% !important; order: 5 !important; overflow-x: auto !important; justify-content: flex-start !important; gap: 6px !important; }
  #pat-hdr-break { display: none !important; }
  #pat-package::before   { content: "📨"; font-size: 17px; }
  #pat-fill-form::before { content: "📋"; font-size: 17px; }
  #pat-merge::before     { content: "🔗"; font-size: 17px; }
  #pat-new::before       { content: "📝"; font-size: 17px; }

  /* Collapsible sub-header (AI intake + e-sign strips) scrolls away under the
     pinned name + icon header; tighten its padding to match the body. */
  #pat-subhead { padding: 4px 10px 0 !important; }

  /* Patient Details sub-tabs (Demographics / Care Team / …) — make the row a
     horizontal scroller like the main tab bar instead of wrapping/clipping.
     Tapping one still fills its content into #pat-details-body below. */
  #pat-details-subnav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #pat-details-subnav::-webkit-scrollbar { display: none; }
  .pat-details-subnav-btn { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* Shared PDF/attachment preview modal → full screen on mobile (matches the
     Documents full-screen preview). */
  #cf-pdf-preview-overlay { padding: 0 !important; }
  #cf-pdf-preview-panel {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* ---- OHIF (DICOM viewer) top bar: keep it to one slim line ----
     The long StudyInstanceUID + full label pushed the ✕ Close button off the
     right edge. Hide the UID, shrink the label, shorten the new-tab link to an
     icon, and guarantee the Close button stays visible. */
  #cf-ohif-uid { display: none !important; }
  #cf-ohif-title { font-size: 0.85em !important; }
  #cf-ohif-newtab { font-size: 0 !important; }
  #cf-ohif-newtab::before { content: "↗"; font-size: 1.15rem; }
  #cf-ohif-close { flex: 0 0 auto !important; }

  /* ---- Patient TASKS tab: show the whole task, edit button underneath ----
     Desktop lays out [checkbox | task | @assignee | Edit] in one squeezed row,
     wrapping the task text one word per line on a phone. Let the task body
     fill the first line; the @assignee + Edit wrap onto the line below. */
  .pat-task-row { flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 6px !important; }
  .pat-task-body { flex: 1 1 auto !important; min-width: 0 !important; }
  /* @assignee + Edit drop to a full-width line below the task text. */
  .pat-task-actions { flex: 1 1 100% !important; padding-left: 26px !important; }

  /* ---- Patient APPOINTMENTS tab: nothing cut off the right edge ----
     The row's fixed min-widths (date 110 + time 90 + status 100) overflow a
     phone, pushing the status badge off-screen. Wrap it: date · time · status
     on line 1, the full appointment detail on line 2. */
  .papt-row { flex-wrap: wrap !important; gap: 4px 10px !important; align-items: baseline !important; }
  .papt-row > span { min-width: 0 !important; }
  .papt-row > span:nth-child(1) { order: 1 !important; }                         /* date */
  .papt-row > span:nth-child(2) { order: 2 !important; }                         /* time */
  .papt-row > span:nth-child(4) { order: 3 !important; margin-left: auto !important; } /* status */
  .papt-row > span:nth-child(3) { order: 4 !important; flex: 1 1 100% !important; }    /* detail → own line */

  /* ---- Patient IMAGING (DICOM) tab: expose the View / × actions ----
     The 6-column grid is wider than a phone, so the View + delete buttons get
     clipped off the right. Reflow each row to wrap: thumbnail + modality on
     line 1, date / patient / instances + the action buttons wrap below. */
  #dcm-list > div { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 10px !important; padding: 10px 12px !important; }
  #dcm-list > div:first-child { display: none !important; }                      /* column header */
  #dcm-list > div > span:nth-child(1) { flex: 0 0 auto !important; }             /* thumbnail */
  #dcm-list > div > span:nth-child(3) { flex: 1 1 60% !important; min-width: 0 !important; } /* modality / desc */
  #dcm-list > div > span:nth-child(2),
  #dcm-list > div > span:nth-child(4),
  #dcm-list > div > span:nth-child(5) { flex: 0 0 auto !important; }             /* date / patient / instances */
  #dcm-list > div > span:last-child { margin-left: auto !important; flex: 0 0 auto !important; text-align: right !important; } /* View / × */

  /* ---- Patient chart: vertical 180px sub-nav → horizontal scrolling tab
     bar on top, content below. ----------------------------------------------- */
  #pat-body { flex-direction: column !important; }
  #pat-nav {
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  #pat-nav .pat-nav-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 11px 14px !important;
  }
  /* Active sub-tab uses a left border on desktop; switch to bottom border. */
  #pat-nav .pat-nav-btn[style*="border-left: 3px solid rgb(45"],
  #pat-nav .pat-nav-btn.active {
    border-bottom-color: #2d3e57 !important;
  }
  /* ---- Documents + Encounters: master-detail on mobile ----
     The list fills the frame (no inline preview underneath). Tapping an item
     slides its preview to full screen with a ‹ back button; back returns to
     the list. Mirrors the Mail / Comms / Fax pattern. */
  #pview-documents > div[style*="grid-template-columns"],
  #pview-encounters > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* List mode — hide the preview column entirely. */
  #pview-doc-preview-col, #pview-enc-preview-col { display: none !important; }
  /* Detail mode — hide the list (and cats / chips), show preview full-screen. */
  #pview-documents.cf-docs-showpane #pview-doc-cats,
  #pview-documents.cf-docs-showpane #pview-doc-drop { display: none !important; }
  #pview-encounters.cf-enc-showpane #pview-enc-list-col,
  #pview-encounters.cf-enc-showpane #enc-chips { display: none !important; }
  #pview-documents.cf-docs-showpane #pview-doc-preview-col,
  #pview-encounters.cf-enc-showpane #pview-enc-preview-col {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 7000 !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  /* The ‹ back chips show only in detail mode. */
  .pview-doc-back, .pview-enc-back { display: none !important; }
  #pview-documents.cf-docs-showpane .pview-doc-back,
  #pview-encounters.cf-enc-showpane .pview-enc-back { display: inline-block !important; }

  /* Demographics form: the 3-column grid (Basic / Contact / Emergency) is far
     too narrow on a phone — each phone field shares its sliver with the 📞
     call button, hiding the number. Stack to one column so every field, phone
     numbers included, gets a full-width row. */
  #pat-details-body [style*="grid-template-columns:1fr 1fr 1fr"],
  #pat-details-body [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #pview-documents [style*="height:calc(100vh"],
  #pview-encounters [style*="height:calc(100vh"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- Wide data tables: scroll rather than squash ------------------- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Calendar grid is intentionally wide: pan sideways ------------- */
  #cal-week { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ---- Compact toolbars: collapse labelled buttons to icons. font-size:0
     hides the text; ::before supplies an icon. Keeps tap targets big. ------- */
  #cal-booking-links, #cal-new-block, #cal-new-appt, #cal-new-avail, #cal-find-time, #cal-new,
  #cf-askchart-btn, #cf-topbar-signout,
  #mail-sync, #mail-compose, #pat-list-new {
    font-size: 0 !important;
    padding: 8px 11px !important;
    line-height: 1 !important;
  }
  /* Sync to EHR isn't practical from a phone — hide it on mobile. */
  #cal-sync, #cal-sync-status { display: none !important; }
  #cal-booking-links::before { content: "🔗"; font-size: 17px; }
  #cal-new-block::before   { content: "⛔"; font-size: 17px; }
  #cal-new-avail::before   { content: "🟢"; font-size: 17px; }
  #cal-find-time::before   { content: "🕑"; font-size: 17px; }
  #cal-new-appt::before    { content: "➕"; font-size: 17px; }
  #cal-new::before         { content: "📝"; font-size: 17px; }
  #cf-askchart-btn::before { content: "🤖"; font-size: 17px; }
  #cf-topbar-signout::before { content: "⏻"; font-size: 17px; }
  #cal-cf-only             { font-size: 0 !important; padding: 8px 11px !important; line-height: 1 !important; }
  #cal-cf-only::before     { content: "📆"; font-size: 17px; }
  #mail-sync::before       { content: "🔄"; font-size: 17px; }
  #mail-compose::before    { content: "+"; font-size: 24px; color: #fff; font-weight: bold; }
  #pat-list-new::before    { content: "+"; font-size: 24px; color: #fff; font-weight: bold; }
  #tasks-new::before       { content: "+"; font-size: 24px; color: #fff; font-weight: bold; }

  /* New-task button → icon only (it's obviously "new task" in the Tasks view). */
  #tasks-new { font-size: 0 !important; padding: 8px 13px !important; line-height: 1 !important; }

  /* Email reading pane: action bar buttons → icons so they fit one row.
     (💬 thread + ↗ open are already icons.) */
  #mp-reply, #mp-reply-all, #mp-forward, #mp-mark {
    font-size: 0 !important;
    padding: 7px 9px !important;
    line-height: 1 !important;
  }
  #mp-reply::before     { content: "↩"; font-size: 17px; }
  #mp-reply-all::before { content: "↩↩"; font-size: 12px; letter-spacing: -3px; }
  #mp-forward::before   { content: "↪"; font-size: 17px; }
  #mp-mark::before      { content: "✓"; font-size: 17px; }
  /* Shrink the Needs-review banner's File/Dismiss buttons + padding. */
  #mp-file, #mp-dismiss-review { padding: 5px 10px !important; font-size: 0.85em !important; }

  /* ---- Email + Fax viewer modals (opened from the task list or the
     Mail/Fax tabs): true full-screen on a phone. The header wraps so the
     subject gets its own full-width line, the × is pinned to the top-right
     corner, and the action buttons collapse to icons on the row below. ------ */
  #mail-inbox-viewer, #mail-thread-viewer, #fax-inbox-viewer { padding: 0 !important; }
  #mail-inbox-viewer > div,
  #mail-thread-viewer > div,
  #fax-inbox-viewer > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  /* Header row → wrap; leave space at top-right for the pinned ×. */
  #mail-inbox-viewer > div > div:first-child,
  #mail-thread-viewer > div > div:first-child,
  #fax-inbox-viewer > div > div:first-child {
    position: relative !important;
    flex-wrap: wrap !important;
    padding: 12px 52px 10px 16px !important;
    row-gap: 8px !important;
  }
  /* Subject / title → its own full-width line. */
  #mail-inbox-viewer > div > div:first-child > h2,
  #mail-thread-viewer > div > div:first-child > h2,
  #fax-inbox-viewer > div > div:first-child > h2 {
    flex: 1 1 100% !important;
    font-size: 1.02em !important;
    line-height: 1.25 !important;
  }
  /* × → pinned to the header's top-right corner. */
  #mxv-close, #mtv-close, #fxv-close {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    font-size: 1.8em !important;
    line-height: 1 !important;
    padding: 0 6px !important;
  }
  /* Action buttons → icons only (text hidden, glyph supplied by ::before). */
  #mxv-file, #mxv-open, #mxv-reply, #mxv-reply-all, #mxv-mark,
  #mtv-reply, #mtv-reply-all, #mtv-forward, #mtv-mark,
  #fxv-file, #fxv-open, #fxv-mark, #fxv-archive {
    font-size: 0 !important;
    padding: 8px 11px !important;
    line-height: 1 !important;
  }
  #mxv-discuss, #mtv-discuss, #fxv-discuss { padding: 8px 11px !important; }
  #mxv-file::before      { content: "🗂"; font-size: 17px; }
  #mxv-open::before      { content: "↗";  font-size: 17px; }
  #mxv-reply::before     { content: "↩";  font-size: 17px; }
  #mxv-reply-all::before { content: "↩↩"; font-size: 12px; letter-spacing: -3px; }
  #mxv-mark::before      { content: "✓";  font-size: 17px; }
  #mtv-reply::before     { content: "↩";  font-size: 17px; }
  #mtv-reply-all::before { content: "↩↩"; font-size: 12px; letter-spacing: -3px; }
  #mtv-forward::before   { content: "↪";  font-size: 17px; }
  #mtv-mark::before      { content: "✓";  font-size: 17px; }
  #fxv-file::before      { content: "🗂"; font-size: 17px; }
  #fxv-open::before      { content: "↗";  font-size: 17px; }
  #fxv-mark::before      { content: "✓";  font-size: 17px; }
  #fxv-archive::before   { content: "🗄"; font-size: 17px; }
  /* Body: stack the metadata sidebar above the message/PDF so each gets the
     full width (the side-by-side 280–300px column is too tight on a phone). */
  #mail-inbox-viewer > div > div:nth-child(2),
  #fax-inbox-viewer > div > div:nth-child(2) {
    flex-direction: column !important;
  }
  #mail-inbox-viewer > div > div:nth-child(2) > div:first-child,
  #fax-inbox-viewer > div > div:nth-child(2) > div:first-child {
    width: 100% !important;
    max-height: 38vh !important;
    border-right: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }

  /* Mail: hide the "Mail" heading so the search field spans full width, and
     force the search wrapper to stretch to the right margin. */
  .cf-mail-title { display: none !important; }
  .cf-mail-search-wrap { flex: 1 1 auto !important; min-width: 0 !important; }
  #mail-search { width: 100% !important; }

  /* Faxes: same treatment — hide title + spacer, stretch search, and turn
     Address book / + Send fax into icons. */
  .cf-fax-title, .cf-fax-spacer { display: none !important; }
  #fax-search { max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; }
  #fax-addrbook, #fax-new-send {
    font-size: 0 !important;
    padding: 8px 11px !important;
    line-height: 1 !important;
  }
  #fax-addrbook::before { content: "📇"; font-size: 17px; }
  #fax-new-send::before { content: "+"; font-size: 24px; color: #fff; font-weight: bold; }

  /* Fax master-detail: list full width; tap a fax to open the PDF preview
     full-screen with a ‹ back button. */
  #fax-md-split { height: calc(100vh - 230px) !important; }
  #fax-md-list { width: 100% !important; border-right: none !important; }
  #fax-md-detail { display: none !important; }
  #fax-md-split.cf-fax-showpane #fax-md-list { display: none !important; }
  #fax-md-split.cf-fax-showpane #fax-md-detail { display: block !important; }
  .fax-back { display: inline-block !important; }
  /* Fax detail action buttons → compact so they fit. */
  #fxd-file, #fxd-mark, #fxd-discuss, #fxd-open, #fxd-archive { padding: 5px 8px !important; font-size: 0.8em !important; }

  /* Patients header: search drops to its own full-width line below the
     title / Sort / + button. */
  #cf-view-patients > div:first-child { flex-wrap: wrap !important; }
  #pat-list-search-wrap { order: 10 !important; flex: 1 1 100% !important; }

  /* Tasks header: Tasks title + Show-completed + (+) on one line; the
     "Assigned to me" filter drops to its own line below. */
  #cf-view-tasks > div:first-child { flex-wrap: wrap !important; align-items: center !important; }
  #tasks-filter { order: 10 !important; flex: 1 1 100% !important; }

  /* Task rows: checkbox + description share the first line; only the
     thread / edit / delete actions wrap onto a second line below. Tight
     padding so each task isn't tall. */
  .task-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 8px 12px !important;
    gap: 6px 8px !important;
  }
  .task-row .task-content { flex: 1 1 0 !important; min-width: 0 !important; }
  .task-row .task-actions {
    flex: 1 1 100% !important;
    justify-content: flex-end !important;
    margin-top: 2px !important;
  }
  /* Trim the inner spacing of the task body (meta line gap). */
  .task-row .task-content > div { margin-top: 1px !important; }

  /* Patients list: Import CSV not needed on phone. */
  #pat-list-import-csv { display: none !important; }

  /* Inbox tabs → icon + counter only (hide the text label). */
  .cf-inbox-tab { padding: 10px 12px !important; }
  .cf-inbox-lbl { display: none !important; }

  /* Calendar nav buttons → icons (‹ today ›). */
  #cal-prev, #cal-today, #cal-next {
    font-size: 0 !important;
    padding: 7px 12px !important;
    line-height: 1 !important;
  }
  #cal-prev::before  { content: "‹";  font-size: 22px; font-weight: bold; }
  #cal-today::before { content: "⦿"; font-size: 17px; }
  #cal-next::before  { content: "›";  font-size: 22px; font-weight: bold; }

  /* Remove the slot-height ("15 min · medium") picker + the "+ Note" button
     from the calendar toolbar on phones. */
  #cal-zoom, #cal-new { display: none !important; }

  /* The date label duplicates the day-grid header ("Sat 6/13") directly
     below it — hide it on mobile to declutter the toolbar. */
  #cal-range { display: none !important; }

  /* Two clean centered rows in the calendar toolbar:
     Row 1 — ‹ ⦿ › · Day view
     Row 2 — 🔄 🔗 ⛔ 📆 · 🔍 */
  #cal-prev   { order: 1 !important; }
  #cal-today  { order: 2 !important; }
  #cal-next   { order: 3 !important; }
  #cal-days   { order: 4 !important; }
  /* Forced line break: full-width zero-height item between the nav row and
     the action-icon row so 🔗 ⛔ 📆 🔍 always wrap onto their own row. */
  #cal-tb-break { display: block !important; order: 5 !important; flex: 0 0 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
  /* Pack the toolbar tight and center each wrapped row. */
  #cf-view-calendar > div:first-child {
    gap: 5px !important;
    margin-bottom: 5px !important;
    row-gap: 5px !important;
    justify-content: center !important;
  }
  /* Trim the calendar content padding + the grid wrapper margin. */
  #calendar-shell main { padding: 8px 8px 0 !important; }
  #cal-week-wrap { margin-top: 4px !important; }
  /* Day-view: the grid repeats the toolbar date — hide that header row. */
  #cal-week .cal-day-header, .cal-day-subcount { display: none !important; }
  #cal-cf-only       { order: 11 !important; }
  #cal-booking-links { order: 12 !important; }
  #cal-new-block     { order: 13 !important; }
  #cal-new-avail     { order: 14 !important; }
  #cal-find-time     { order: 15 !important; }
  #cal-new-appt      { order: 16 !important; }
  /* Search span (holds the 🔍) joins the action-icon row. */
  #cf-view-calendar span:has(> #cal-search) { order: 17 !important; }

  /* Hide the "N appts · N notes" subtitle under each day header. */
  .cal-day-subcount { display: none !important; }

  /* Search appointments → 🔍 icon by default; tapping reveals the field as a
     full-width dropdown below the toolbar. */
  .cal-search-icon { display: inline-block !important; }
  #cal-search { display: none !important; }
  .cf-search-open .cal-search-icon { display: none !important; }
  .cf-search-open #cal-search {
    display: block !important;
    position: fixed !important;
    top: 104px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 440px !important;
    z-index: 6001;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  }
  /* Center the results dropdown under the centered field too. */
  .cf-search-open #cal-search-pop {
    position: fixed !important;
    top: 148px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 90vw !important;
    max-width: 440px !important;
  }

  /* Topbar: hide the email text + "Available" label clutter to make room. */
  #cf-topbar .cf-topbar-email, #cf-topbar #cf-presence-label { display: none !important; }

  /* ---- Patients + Notes lists: one frame, no horizontal scroll ----------
     Hide the column header, drop the fixed min-widths + sideways scroller,
     and reflow each row into a wrapping card (fields flow onto a 2nd line). */
  .cf-list-header { display: none !important; }
  #cf-view-patients [style*="overflow-x"], #cf-view-notes [style*="overflow-x"] { overflow-x: visible !important; }
  #cf-view-patients [style*="min-width"], #cf-view-notes [style*="min-width"] { min-width: 0 !important; }

  .pat-list-row, .notes-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 10px !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
  }
  .pat-list-row > span, .notes-row > span { white-space: normal !important; }
  /* Patients: keep SoCal ID, Last, First, DOB, Phone — hide Sex / Notes
     count / Last-visit so the essentials fit one screen width. */
  .pat-list-row > span:nth-child(5),
  .pat-list-row > span:nth-child(7),
  .pat-list-row > span:nth-child(8) { display: none !important; }
  /* Make the name span full-width so it reads as a card title, the rest
     wraps onto the next line. */
  .pat-list-row > span:nth-child(2) { flex: 1 0 100%; font-size: 1.05em; }

  /* ---- New-note editor: the note chrome reserves 254px on the left (sidebar
     + section nav) and a fixed 78px header, which squeezes the note into a
     sliver on a phone. Reclaim the width, hide the section nav, and let the
     header wrap into a compact 2-row bar (patient line + scrolling buttons).
     `body #app-shell` outranks the runtime-injected `#app-shell` rule. ------ */
  #cf-note-nav { display: none !important; }
  body #app-shell { padding-left: 6px !important; padding-right: 6px !important; padding-top: 150px !important; }
  #cf-note-hdr {
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }
  /* Drop the provider/date/facility/visit grid — it duplicates the patient
     header and is the main thing overflowing. */
  #cf-note-hdr > div[style*="grid-template-columns"] { display: none !important; }
  /* Patient card fills row 1; buttons scroll on row 2. */
  #cf-note-hdr > div[style*="min-width:200px"] {
    min-width: 0 !important; padding-right: 0 !important; border-right: none !important; flex: 1 1 auto !important;
  }
  #cf-note-hdr > div[style*="gap:6px"] {
    flex: 1 1 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; justify-content: flex-start !important;
  }
  /* Note action buttons → icon-only on the scrolling row (tooltips remain). */
  #cf-note-save, #cf-note-dict, #cf-note-dict-more, #cf-note-callts, #cf-note-tpl,
  #cf-note-ai, #cf-note-sign, #cf-note-unlock, #cf-note-close {
    font-size: 0 !important;
    padding: 8px 11px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
  #cf-note-save::before      { content: "💾"; font-size: 16px; }
  #cf-note-dict::before      { content: "🎙️"; font-size: 16px; }
  #cf-note-callts::before    { content: "📞"; font-size: 16px; }
  #cf-note-dict-more::before { content: "➕"; font-size: 14px; }
  #cf-note-tpl::before       { content: "📋"; font-size: 16px; }
  #cf-note-ai::before        { content: "🤖"; font-size: 16px; }
  #cf-note-sign::before      { content: "✍️"; font-size: 16px; }
  #cf-note-unlock::before    { content: "🔓"; font-size: 16px; }
  #cf-note-close::before     { content: "✕";  font-size: 16px; }

  /* ---- Prior notes + Files cabinet (from a note): full-screen on a phone ----
     Both dock as side panels on desktop; on a phone they cover the WHOLE
     screen (over the topbar and bottom tab bar) with their list on top and
     the note/PDF filling the rest. Closing (⇤ Collapse) removes the panel and
     returns to the normal screen. z-index sits above the bottom bar (250),
     softphone (9000), and chat (9500). */
  #cf-prior-panel, #cf-cab-panel {
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important; border-radius: 0 !important;
    z-index: 9600 !important;
  }
  /* Cabinet inner grid → stacked rows (file list on top, PDF below). */
  #cf-cab-panel > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(70px, 26vh) 1fr !important;
  }
  #cf-cab-list { border-right: none !important; border-bottom: 1px solid #e8ecf1 !important; }
  /* Prior-notes list a touch taller on a full screen; the note body fills. */
  #cf-prior-list { max-height: 26vh !important; }

  /* ---- Dictation recording bar: full-width + wrapping (was clipped off the
     left edge at min-width:320). ---------------------------------------------- */
  #cf-dict-bar {
    left: 8px !important; right: 8px !important; top: 56px !important;
    min-width: 0 !important; width: auto !important;
    flex-wrap: wrap !important; justify-content: center !important; row-gap: 8px !important;
  }
  #cf-dict-bar #cf-dict-pause, #cf-dict-bar #cf-dict-stop, #cf-dict-bar #cf-dict-cancel {
    flex: 1 1 auto !important; padding: 9px 12px !important;
  }

  /* ---- Dictation transcript modal: full-width card, footer buttons wrap
     (Discard / Append / Generate were running off the right edge). ----------- */
  #cf-dict-transcript > div { width: 100% !important; max-width: 100% !important; max-height: 92vh !important; margin: 8px !important; }
  #cf-dict-text { height: 200px !important; }
  #cf-dict-transcript > div > div:last-child { flex-wrap: wrap !important; row-gap: 8px !important; }
  #cf-dict-transcript > div > div:last-child > span { flex: 1 1 100% !important; }
  #cf-dict-transcript > div > div:last-child > button { flex: 1 1 auto !important; }
}