/* =====================================================================
   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 { 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; }
  .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); }
  .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; }
  .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. */
  .cr-stage { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) 96px; gap: 8px; align-items: center; }
  .cr-stage .cr-num { grid-column: 2; }
  .cr-stage .m-btn { justify-self: start; }
  .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; }

  /* 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; }

}