/*
 * Comms+Network mobile polish — slice 9 + post-shipping fix-batch catchup.
 *
 * The per-view stylesheets (`messages.css`, `person-thread.css`,
 * `people-detail.css`, `people.css`) and the inline `<style id="…">`
 * blocks injected by `compose.js` / `people-dashboard.js` / `contact-list.js`
 * / `contact-detail.js` / `people-matrix.js` ship desktop-first. Every
 * mobile override needed by frames M01–M04 of
 * `pwa/docs/comms-network-wireframes.html` lives here, gated by a single
 * `@media (max-width: 768px)` block.
 *
 * Hard rules:
 *   - Edit ONLY this file. Other agents own the JS views + their inline CSS.
 *   - Stick to the existing class namespaces (msg / pth / cmp / ppd / ccl /
 *     pmx). Do not invent new BEM modifiers.
 *   - Minimum 44pt touch targets on every interactive element.
 *
 * Spec: pwa/docs/comms-network-spec.md M01..M04.
 */

@media (max-width: 768px) {

  /* ════════════════════════════════════════════════════════════════
   * M01 · Unified Inbox (#/messages)
   * Three-pane shell → single list pane. Sources collapses to a
   * horizontal-scroll filter strip at the top; preview pane is hidden
   * (tap a row → person-thread).
   * ════════════════════════════════════════════════════════════════ */
  .msg-shell {
    grid-template-rows: auto 1fr !important;
    grid-template-columns: 1fr !important;
    height: 100vh;
  }
  .msg-shell [data-msg-pane="preview"] { display: none; }

  /* Sources pane becomes a chip strip — short, horizontally-scrollable. */
  .msg-shell [data-msg-pane="sources"] {
    max-height: none;
    height: auto;
    overflow: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .msg-shell [data-msg-pane="sources"] .msg-pane-head {
    display: none; /* "Sources · tune" eyebrow eats height; chips suffice */
  }
  .msg-shell .msg-sources-body {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    scrollbar-width: none;
  }
  .msg-shell .msg-sources-body::-webkit-scrollbar { display: none; }

  /* Each section becomes a horizontal cluster of chips (label hidden). */
  .msg-shell .msg-filter-section {
    flex-direction: row;
    flex-shrink: 0;
    gap: 6px;
    min-width: 0;
  }
  .msg-shell .msg-filter-label { display: none; }
  .msg-shell .msg-filter-row {
    flex-shrink: 0;
    padding: 8px 12px;
    min-height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    font-size: 12px;
  }
  .msg-shell .msg-filter-row.active {
    background: color-mix(in oklab, var(--color-primary) 28%, transparent);
    border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
  }
  .msg-shell .msg-filter-row-label { font-size: 12px; }
  .msg-shell .msg-filter-row-count {
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.7;
  }
  /* Inline search becomes a single chip-shaped pill at the end of the strip. */
  .msg-shell .msg-search-wrap {
    margin: 0;
    flex-shrink: 0;
    min-width: 140px;
    padding: 6px 10px;
    border-radius: 999px;
  }
  .msg-shell .msg-search { font-size: 13px; }

  /* List rows: enlarge tap target, soften paddings. */
  .msg-shell .msg-list-body { min-height: 0; }
  .msg-shell .msg-list-row {
    padding: 12px 14px;
    min-height: 64px;
    gap: 10px;
  }
  .msg-shell .msg-list-row .msg-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
  .msg-shell .msg-list-preview {
    -webkit-line-clamp: 2;
    font-size: 12px;
  }

  /* ════════════════════════════════════════════════════════════════
   * M02 · Person Thread (#/messages/thread/:id)
   * Hide both side rails. Conversation + composer fill viewport.
   * ════════════════════════════════════════════════════════════════ */
  .pth-shell {
    grid-template-rows: auto 1fr auto !important;
    grid-template-columns: 1fr !important;
    height: 100vh;
  }
  .pth-shell [data-pth-pane="threads"],
  .pth-shell [data-pth-pane="person"] {
    display: none;
  }
  .pth-shell .pth-center-head {
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 4;
  }
  .pth-shell .pth-composer {
    padding: 8px 10px 10px;
    position: sticky;
    bottom: 0;
    z-index: 4;
  }
  .pth-shell .pth-bubble {
    max-width: 86%;
    padding: 9px 11px;
  }
  .pth-bubble-meta {
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
  }
  .pth-bubble-meta .material-symbols-outlined { font-size: 11px; }

  /* Composer: channel picker scrolls horizontally; textarea grows slim. */
  .pth-composer .pth-composer-picker,
  .pth-composer .channel-picker {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .pth-composer .pth-composer-picker::-webkit-scrollbar { display: none; }
  .pth-composer-picker-hint { display: none; } /* eats horizontal space */

  /* Action bar (REPLY/SNOOZE/LABEL/TO ACTIVITY) — hidden in the person
   * pane on mobile anyway; defensive belt. */
  .pth-action-bar { display: none; }

  /* ════════════════════════════════════════════════════════════════
   * Compose (#/messages/compose)
   * Stack labels on top of inputs; collapse bottom toolbar to
   * icon-only ghost buttons + full-width primary CTA.
   * ════════════════════════════════════════════════════════════════ */
  .cmp-shell { padding: 16px 14px 80px; }
  .cmp-h { font-size: 20px; }
  .cmp-sub { font-size: 12px; margin-bottom: 16px; }
  .cmp-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .cmp-label-col {
    padding-top: 0 !important;
    padding-bottom: 2px;
  }
  .cmp-input { padding: 12px; font-size: 16px; min-height: 44px; }
  .cmp-textarea { font-size: 15px; min-height: 160px; }

  /* Chips wrap freely; size up for thumbs. */
  .cmp-chips { gap: 8px; }
  .cmp-chip-wrap { min-height: 36px; }

  /* Bottom toolbar — secondary buttons collapse to icon-only (38pt),
   * primary CTA becomes a full-width row above them. */
  .cmp-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
  }
  .cmp-toolbar [data-cmp-send] {
    order: -1; /* primary first, full width */
    flex: 1 0 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 12px;
  }
  .cmp-toolbar .cmp-toolbar-spacer { display: none; }
  .cmp-toolbar [data-cmp-send-later],
  .cmp-toolbar [data-cmp-track],
  .cmp-toolbar [data-cmp-cancel] {
    flex: 0 0 auto;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    /* Hide the label text — keep the icon only. */
    font-size: 0;
    gap: 0;
  }
  .cmp-toolbar [data-cmp-send-later] .material-symbols-outlined,
  .cmp-toolbar [data-cmp-track] .material-symbols-outlined,
  .cmp-toolbar [data-cmp-cancel] .material-symbols-outlined {
    font-size: 18px;
  }

  /* Tool buttons (Draft / Template / Attach) stay labelled but thumb-sized. */
  .cmp-tool-btn { min-height: 36px; padding: 8px 12px; font-size: 12px; }

  /* ════════════════════════════════════════════════════════════════
   * M04 · Dashboard (#/people)
   * Verify 2×2 tile grid post-drift-bar additions; toolbar wraps;
   * drift alerts + nudges stack vertically.
   * ════════════════════════════════════════════════════════════════ */
  .ppd-shell-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    padding: 14px 16px !important;
  }
  .ppd-shell-title { font-size: 22px; }
  .ppd-shell-sub { font-size: 12px; }

  /* Toolbar (LIST / MATRIX / NEW CONTACT) — wraps; chips become icon-priority. */
  .ppd-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .ppd-toolbar .ppd-tb-chip {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* 4-tile row → 2×2 grid. Tighten per-tile padding & numerals. */
  .ppd-dash-tiles {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .ppd-dash-tile {
    padding: 12px !important;
    min-height: 0 !important;
  }
  .ppd-dash-tile-count { font-size: 22px !important; }
  .ppd-dash-tile-row { font-size: 10px; }
  .ppd-dash-tile-caps { font-size: 9px; }
  .ppd-dash-tile-ratio { font-size: 11px; }
  .ppd-dash-tile-driftrow { gap: 6px; }
  .ppd-dash-tile-driftval { font-size: 10px; }

  /* Drift alerts ◯ Upcoming nudges columns → stack. */
  .ppd-dash-cols {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 14px 16px !important;
  }
  .ppd-dash-block-head { padding: 10px 12px; }
  .ppd-dash-block-controls { flex-wrap: wrap; gap: 6px; }
  .ppd-dash-block-controls .ppd-tb-chip {
    padding: 6px 10px;
    font-size: 11px;
    min-height: 32px;
  }

  /* Alert + plan rows: bigger tap target, narrower CTA on right. */
  .ppd-alert-row {
    gap: 10px;
    padding: 12px 12px 12px 10px;
    min-height: 56px;
  }
  .ppd-alert-cta {
    padding: 6px 10px;
    font-size: 10px;
    min-height: 32px;
  }
  .ppd-plan-row { padding: 12px; min-height: 56px; }

  /* Matrix preview thumbnail — scales to viewport, retains hscroll. */
  .ppd-matrix-thumb { margin: 0 14px 14px; }
  .ppd-matrix-thumb-body { padding: 6px 10px 10px; }
  .ppd-matrix-thumb-table { min-width: 380px; font-size: 10px; }
  .ppd-matrix-thumb-name { max-width: 110px; font-size: 10px; }

  /* ════════════════════════════════════════════════════════════════
   * M03 · Contact List (#/people/list)
   * Hide left filter pane (the view's own 720px media-query already does
   * this — belt + braces). Table → card list per slice-9 spirit.
   * Toolbar collapses to icon-only chips.
   * ════════════════════════════════════════════════════════════════ */
  .ccl-shell-body { grid-template-columns: 1fr !important; }
  .ccl-filter-pane { display: none !important; }

  /* Toolbar — keep the count line, shrink chips to icon-only. */
  .ccl-toolbar {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ccl-toolbar-chips { gap: 6px; }
  .ccl-chip-btn {
    padding: 8px 10px;
    min-width: 44px;
    min-height: 40px;
    font-size: 0; /* hide label */
    gap: 0;
  }
  .ccl-chip-btn .material-symbols-outlined { font-size: 18px; }

  /* Table → card list. Hide all <th> except the implicit row container.
   * The existing slice-9 baseline already handles the .ppd-table swap;
   * extend it for the new chevron column + spacing. */
  .ppd-table-wrap { padding: 0 12px 24px; }
  .ppd-table thead { display: none; }
  .ppd-table,
  .ppd-table tbody,
  .ppd-table tr,
  .ppd-table td { display: block; }
  .ppd-table tr.ccl-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md, 10px);
    margin-bottom: 10px;
    padding: 12px 14px 10px;
    position: relative; /* anchor for the chevron */
    min-height: 64px;
  }
  .ppd-table tr.ccl-row td { padding: 4px 0; border: 0; }
  .ppd-table tr.ccl-row td:first-child { padding-top: 0; }
  .ppd-table-numeric { text-align: left; }
  /* The chevron column hangs in the top-right corner of each card. */
  .ppd-table tr.ccl-row td:last-child {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto !important;
  }
  .ccl-row-chevron { width: 36px; height: 36px; }

  /* ════════════════════════════════════════════════════════════════
   * Contact Detail (#/people/:id)
   * 3-col workspace → single column; plan pane stacks below.
   * Tab strip horizontal-scrollable. Reachability matrix collapses.
   * SET TARGET row keeps 4-across; cadence slider compresses.
   * ════════════════════════════════════════════════════════════════ */
  .ppd-detail-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
  }
  .ppd-detail-main { min-width: 0; }
  .ppd-plan-pane {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px !important;
  }

  /* Header. */
  .ppd-detail-header {
    padding: 14px;
    gap: 12px;
  }
  .ppd-detail-avatar {
    width: 52px;
    height: 52px;
    font-size: 17px;
    flex-basis: 52px;
  }
  .ppd-detail-name { font-size: 19px; }
  .ppd-detail-sub { font-size: 12px; }
  .ppd-detail-pillrow {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ppd-detail-meta { font-size: 11px; }

  /* Tab strip — 9 tabs overflow even at 1440px on desktop; on mobile
   * force horizontal scroll, no wrap. */
  .ppd-tab-strip {
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .ppd-tab-strip::-webkit-scrollbar { display: none; }
  .ppd-tab-strip .ppd-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px;
  }

  .ppd-detail-body { padding: 14px; }
  .ppd-section { margin-bottom: 20px; }
  .ppd-section-h { font-size: 13px; }

  /* Reachability matrix: 5-col grid collapses to a 2-row block per channel —
   * row 1: channel chip + status (right aligned)
   * row 2: address (mono) + sparkline + metrics dots
   * "Sparkline" header column hidden because the head row no longer fits. */
  .ppd-reach-row {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "chan addr stat"
      "metr spark spark" !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    padding: 10px 12px !important;
  }
  .ppd-reach-row--head { display: none !important; } /* labels lose meaning here */
  .ppd-reach-cell-channel { grid-area: chan; }
  .ppd-reach-cell-addr {
    grid-area: addr;
    font-size: 10px !important;
  }
  .ppd-reach-cell-status {
    grid-area: stat;
    font-size: 10px !important;
    text-align: right !important;
  }
  .ppd-reach-cell-metrics {
    grid-area: metr;
    justify-self: start;
  }
  .ppd-reach-cell-spark {
    grid-area: spark;
    justify-self: end;
    min-height: 22px;
  }

  /* 52-week density heatmap — shrink cells so it fits without h-scroll. */
  .ppd-heatmap-12m {
    grid-template-columns: repeat(26, 1fr);
    grid-auto-rows: 8px;
    gap: 2px;
  }
  .ppd-heatmap-cell { width: 100%; height: 8px; }

  /* Cadence chart bars get tighter. */
  .ppd-cad52-chart { gap: 1px; }

  /* Activity rows + week groups. */
  .ppd-activity-row,
  .ppd-activity-row--v2 {
    grid-template-columns: 48px 1fr !important;
    column-gap: 8px !important;
    padding: 10px 0 !important;
  }
  .ppd-activity-chip,
  .ppd-activity-dir { display: none !important; }
  .ppd-activity-row--v2 .ppd-activity-when {
    font-size: 10px !important;
    padding-top: 0;
  }
  .ppd-activity-subj { font-size: 12px; }
  .ppd-activity-preview { font-size: 11px; -webkit-line-clamp: 2; }

  /* Channel-card on Channels sub-tab: stack chip+main / spark / action vertically. */
  .ppd-ch-card--v2 {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "chip   action"
      "main   main"
      "spark  spark" !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .ppd-ch-card-chip   { grid-area: chip; }
  .ppd-ch-card-main   { grid-area: main; }
  .ppd-ch-card-spark  { grid-area: spark; }
  .ppd-ch-card-actions { grid-area: action; }
  .ppd-ch-reply-btn { padding: 8px 12px; min-height: 40px; }

  /* Plan pane controls — keep SET TARGET 4-across, slim each pill. */
  .ppd-plan-target-row {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .ppd-plan-target-btn { flex: 1 1 0; min-width: 0; }
  .ppd-plan-cadence-slider {
    flex-wrap: nowrap !important;
    gap: 2px !important;
  }
  .ppd-plan-cadence-step {
    padding: 8px 4px !important;
    font-size: 10px !important;
    min-height: 40px;
  }
  .ppd-plan-channels-list { flex-wrap: wrap; gap: 6px; }
  .pth-open-contact-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Drift component grid already collapses at 720px in contact-detail's
   * inline CSS — belt + braces. */
  .ppd-drift-grid { grid-template-columns: 1fr !important; }

  /* Ranked-mutuals + influence-map. */
  .ppd-network-svg { width: 100%; height: auto; }
  .ppd-ranked-row { padding: 10px 12px; min-height: 56px; }

  /* Files / trips / calendar mini-pickers. */
  .ppd-files-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ppd-cal-month { font-size: 11px; }
  .ppd-cal-cell { padding: 6px 0; }

  /* ════════════════════════════════════════════════════════════════
   * Matrix (#/people/matrix)
   * Hide left filter rail by default; provide a horizontal scroll for
   * the heatmap. Cells shrink to 36×36 (was 56 desktop / 44 @1100).
   * ════════════════════════════════════════════════════════════════ */
  .pmx-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  /* The filter rail is heavy — hide on mobile entirely. Users can still
   * filter via the dashboard or contact-list; a per-screen toggle is a
   * follow-up that needs JS. */
  .pmx-filters { display: none !important; }

  .pmx-canvas {
    padding: 8px;
    overflow-x: auto;
  }
  .pmx-grid {
    grid-template-columns: 140px repeat(7, 36px) !important;
    min-width: 392px !important;
    gap: 4px !important;
  }
  .pmx-col-head {
    padding: 6px 2px;
    font-size: 9px;
  }
  .pmx-col-head .pmx-col-full { display: none; }
  .pmx-col-head .pmx-col-abbr { display: inline; }
  .pmx-row-head {
    padding: 4px 6px;
    min-height: 36px;
  }
  .pmx-row-name { font-size: 12px; }
  .pmx-cell {
    min-height: 36px !important;
    font-size: 11px;
    border-radius: 4px;
  }

  /* ════════════════════════════════════════════════════════════════
   * Polish — touch targets across all comms+network surfaces.
   * Audit chip buttons (they were sized for desktop hover).
   * ════════════════════════════════════════════════════════════════ */
  .msg-shell button,
  .pth-shell button,
  .cmp-shell button,
  .ppd-shell button,
  .ppd-detail-shell button {
    min-height: 36px;
  }
  /* Primary CTAs get the full 44pt floor. */
  .msg-preview-action,
  .pth-action-btn,
  .cmp-btn,
  .ppd-tb-chip.primary,
  .ppd-plan-target-btn,
  .ppd-plan-cadence-step {
    min-height: 40px;
  }
}