/* =====================================================================
   AGENT PHONE — the agent workspace as a phone app (under 700px).
   Designed in Figma, page "Agent: Phone" (file 9IgmWlUSsYf2IHz1LPqPnW):
   compact header with the page name, section chips under it, a fixed
   bottom tab bar (Pipeline, CRM, Tasks, Calendar, More) and a More sheet.
   Loaded last so it wins over each app's own narrow-screen rules. Colours
   come from the same --m-* tokens as money.css.
   ===================================================================== */
.ag-phone {
  --m-bg: #f5f6f8; --m-surface: #ffffff; --m-surface-2: #f0f2f4; --m-line: #e4e7ea;
  --m-ink: #171b21; --m-muted: #5c6672; --m-faint: #8d97a2; --m-accent: var(--brand, #1d2733); --m-accent-soft: var(--brand-soft, #e3e8ef); --m-warn: #d97706;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
.ag-phone[data-theme="dark"] {
  --m-bg: #0d1117; --m-surface: #151b23; --m-surface-2: #1c232c; --m-line: #27303a;
  --m-ink: #e9edf2; --m-muted: #a3adb9; --m-faint: #6f7a86; --m-accent: var(--brand-dark, #6d92ba); --m-accent-soft: #1d2733; --m-warn: #f59e0b;
}
.ag-phone svg.i, .ag-bar svg.i { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Desktop: none of the phone parts show. */
.ag-phone, .ag-mtitle, .ag-mact, .ag-mback, .pd-quick { display: none; }
button.ag-avatar { padding: 0; cursor: default; font-family: inherit; }

@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  /* iOS zooms into any field under 16px; keep every field at 16px. */
  #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #app select, #app textarea { font-size: 16px !important; }

  /* ---- header ---- */
  .ag-bar { height: auto; min-height: 52px; padding: env(safe-area-inset-top) 10px 0 16px; gap: 10px; }
  .ag-bar .ag-tabs, .ag-bar .ag-logout, .ag-bar .ag-over { display: none; }
  .ag-bar .ag-brand { padding-right: 0; }
  .ag-bar .ag-brand b { display: none; }
  .ag-mtitle { display: block; flex: 1; min-width: 0; font-size: 17px; font-weight: 600; color: #171b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ag-right { padding-left: 0; gap: 4px; }
  .ag-mact { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; color: #171b21 !important; }
  .ag-mact:active { background: #f0f2f4; }
  .ag-bar .ag-avatar { display: flex; width: 34px; height: 34px; cursor: pointer; background: var(--brand-soft, #e3e8ef); border-color: transparent; color: var(--brand, #1d2733); font-size: 12px; }
  .ag-bar[data-theme="dark"] { background: #151b23; border-bottom-color: #27303a; }
  .ag-bar[data-theme="dark"] .ag-mtitle, .ag-bar[data-theme="dark"] .ag-mact { color: #e9edf2 !important; }
  .ag-bar[data-theme="dark"] .ag-avatar { background: #1d2733; color: #e9edf2; }
  .ag-bar[data-theme="dark"] .tp-brand-mark { background: #6d92ba; }

  /* ---- bottom tab bar ---- */
  .ag-phone { display: block; }
  .ag-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--m-surface); border-top: 1px solid var(--m-line); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); }
  .ag-bn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 10.5px; font-weight: 500; color: var(--m-faint); cursor: pointer; text-decoration: none; }
  .ag-bn-i { display: flex; align-items: center; justify-content: center; width: 56px; height: 28px; border-radius: 999px; }
  .ag-bn.on { color: var(--m-accent); font-weight: 600; }
  .ag-bn.on .ag-bn-i { background: var(--m-accent-soft); }
  .ag-phone[data-theme="dark"] .ag-bn.on { color: var(--m-ink); }

  /* ---- More sheet ---- */
  .ag-scrim { position: fixed; inset: 0; z-index: 58; background: rgba(13, 17, 23, 0.4); animation: ag-fade .15s ease-out; }
  .ag-sheet { position: fixed; left: 0; right: 0; bottom: calc(59px + env(safe-area-inset-bottom)); z-index: 59; max-height: calc(100vh - 140px); overflow-y: auto; background: var(--m-surface); color: var(--m-ink); border-radius: 20px 20px 0 0; padding: 8px 16px 18px; box-shadow: 0 -10px 30px rgba(13, 17, 23, 0.18); animation: ag-up .18s ease-out; }
  /* The page under the open sheet stays put. */
  body:has(.ag-sheet) { overflow: hidden; }
  .ag-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--m-line); margin: 0 auto 12px; }
  .ag-who { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
  .ag-who .pl-avatar { width: 40px; height: 40px; font-size: 14px; }
  .ag-who .t { display: flex; flex-direction: column; min-width: 0; }
  .ag-who b { font-size: 15px; }
  .ag-who .t span { font-size: 12.5px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ag-sheet-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-faint); margin: 14px 0 8px; }
  .ag-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ag-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 4px; border-radius: 14px; background: var(--m-surface-2); color: var(--m-ink); font-size: 11.5px; font-weight: 500; text-align: center; text-decoration: none; }
  .ag-tile svg.i { width: 22px; height: 22px; color: var(--m-accent); }
  .ag-phone[data-theme="dark"] .ag-tile svg.i { color: var(--m-ink); }
  .ag-tile.on { box-shadow: inset 0 0 0 2px var(--m-accent); }
  .ag-badge { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--m-warn); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .ag-sheet-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .ag-sheet-foot .m-btn { justify-content: center; min-height: 44px; background: var(--m-surface); color: var(--m-ink); border: 1px solid var(--m-line); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  @keyframes ag-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes ag-fade { from { opacity: 0; } to { opacity: 1; } }

  /* ---- every app: room for the tab bar, and the rail becomes chips ---- */
  .money-app { min-height: calc(100vh - 52px); }
  /* The rail is a strip on top here. Without this the grid's two auto rows
     shared a short page's spare height, leaving a blank band under the strip. */
  .money-app:has(> .m-side) { grid-template-rows: auto 1fr; align-content: stretch; }
  .m-main, .tp-page main { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)) !important; gap: 14px; }
  .m-side { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 20; padding: 8px 16px 10px; gap: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .m-side { height: auto !important; align-items: center; align-self: start; }
  .m-side::-webkit-scrollbar { display: none; }
  /* Every item is a snap point, so a button ahead of the tabs (New meeting,
     New campaign) is not snapped past and left half off the screen. */
  .m-side { scroll-padding-inline: 16px; }
  .m-side > * { scroll-snap-align: start; }
  .m-side .m-brand, .m-side .pl-newbtn, .m-side .cr-quick, .m-side .pl-group, .m-side .pl-side-foot, .m-side .tk-deals,
  .m-side .cs2-sidefoot, .m-side .t-side-foot, .m-side .cal-gcal, .m-side .m-iconbtn { display: none !important; }
  .m-side .m-nav { flex-shrink: 0; min-height: 34px; padding: 7px 14px; border-radius: 999px; background: var(--m-surface-2); color: var(--m-muted); font-size: 13px; gap: 6px; scroll-snap-align: start; border: 0; }
  .m-side .m-nav svg.i { display: none; }
  /* The CRM rail is a scrolling strip of chips here, so its groups flatten:
     no headings, and a folded group still lists its screens. */
  .m-side .cr-group { display: contents; }
  .m-side .cr-group-head { display: none; }
  .m-side .cr-group:not(.open) > .m-nav { display: inline-flex; }
  .m-side .m-nav.cr-sub { padding-left: 14px; }
  .m-side .m-nav.active { background: var(--m-accent); color: #fff; }
  .m-side .money-app[data-theme="dark"] .m-nav.active, .money-app[data-theme="dark"] .m-side .m-nav.active { background: var(--m-accent); color: #0d1117; }
  .m-side .m-nav .pl-navcount, .m-side .m-nav .cr-navcount { margin-left: 2px; background: rgba(127, 127, 127, 0.18); color: inherit; }

  /* CRM: stage editor rows wrap instead of running off the side. A pipeline
     stage is two lines: number and name, then outcome, chance and the
     buttons. The old three-column grid scattered those over three ragged
     lines, and put a tag row's name box in the 24px number column. */
  .cr-stage { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cr-stage > .m-input:first-child { flex: 1 1 100%; min-width: 0; }
  .cr-stage:has(.cr-grip) { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) auto auto auto; }
  .cr-stage:has(.cr-grip) > .m-input:not(.cr-num) { grid-column: 2 / -1; min-width: 0; }
  .cr-stage:has(.cr-grip) > .m-select { grid-column: 2; width: 100%; min-width: 0; }
  .cr-stage:has(.cr-grip) > .cr-num { flex: none; width: 100%; min-width: 0; }
  .m-table-wrap { -webkit-overflow-scrolling: touch; }

  /* CRM: the global bar replaces its own; its quick-add button sits above ours. */
  .cr-bnav { display: none !important; }
  .cr-main { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
  .cr-fab { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }

  /* Calendar: the chip strip already switches Month and Agenda, so the
     same switch in the page head was a second copy of it. */
  .cal-viewseg { display: none !important; }

  /* On a phone the rail becomes the chip strip, so its "New ..." button sat
     right above the same button in the page head. When the page head has
     its own primary button the rail's copy steps aside; on pages without
     one (Scraper leads, a record page) it stays, so the action is never
     lost. CMA already has "New presentation" as a strip entry. */
  .money-app:has(.m-main .m-head .m-actions .m-btn.primary) .m-side > .m-btn.primary { display: none !important; }
  .m-side > .cs2-newbtn { display: none !important; }

  /* Touch targets. */
  .money-app .m-btn { min-height: 40px; }
  .money-app .m-btn.sm { min-height: 34px; }
  .money-app .m-card { border-radius: 14px; }
  /* Page heads: the header already names the page, so drop the eyebrow and
     the long description and tighten the title. */
  .m-head { align-items: flex-start; gap: 10px; }
  .m-head .m-eyebrow, .m-head .pl-sub, .m-head .cs2-sub { display: none; }
  .m-title { font-size: 22px; }
  .m-head .m-actions { width: 100%; }
  .m-actions { flex-wrap: wrap; }
  .m-kpis, .pl-kpis { gap: 10px; }

  /* Deal page (Figma 02): back arrow in the header, quick contact row. */
  .ag-mback { display: flex; width: 36px; height: 36px; margin-left: -8px; align-items: center; justify-content: center; color: #171b21 !important; }
  .ag-mback svg.i { width: 24px; height: 24px; }
  .ag-bar[data-theme="dark"] .ag-mback { color: #e9edf2 !important; }
  .ag-bar:has(.ag-mback) .ag-brand { display: none; }
  .pd-back, .pl-back { display: none !important; }
  .pd-hero .pd-titlerow .m-title { font-size: 22px; }
  .pd-hero .m-actions { display: grid !important; grid-template-columns: 1fr; gap: 8px; width: 100%; }
  .pd-hero .m-actions .m-btn { justify-content: center; min-height: 44px; }
  .pd-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pd-q { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-radius: 12px; background: var(--m-surface); border: 1px solid var(--m-line); color: var(--m-ink); font: inherit; font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; }
  .pd-q svg.i { width: 20px; height: 20px; color: var(--m-accent); }
  .money-app[data-theme="dark"] .pd-q svg.i { color: var(--m-ink); }
  .pd-q.off { opacity: .45; }
  .pd-steps { margin: 0 -16px; padding: 6px 16px 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .pd-steps::-webkit-scrollbar { display: none; }
  .pd-stepper { grid-auto-columns: 104px; }
  .pd-stepper > * { scroll-snap-align: start; }
  .pd-stats { gap: 12px 18px; }

  /* Anything that opens over the page covers the tab bar too. */
  .modal-overlay, .m-modal-back, .lb-overlay { z-index: 80 !important; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; right: 16px; left: 16px; text-align: center; z-index: 90; }
  .m-modal-back { padding: 0; align-items: flex-end; }
  .m-modal { max-width: none; border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); animation: ag-up .18s ease-out; }

}