/* Phone layout (760px and below): top bar, slide-out sidebar, bottom tabs,
   and tighter spacing everywhere. Desktop is untouched. */
.m-topbar, .m-tabbar, .m-backdrop, .m-close-btn { display: none; }

@media (max-width: 760px) {
  :root { --m-top: 56px; --m-tabs: 62px; }

  /* ----- top bar ----- */
  .m-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: calc(var(--m-top) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0;
    background: color-mix(in srgb, var(--sidebar-bg) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
  }
  .m-title { display: flex; align-items: center; gap: 9px; min-width: 0; font: 700 16px var(--font-display); letter-spacing: -0.01em; }
  .m-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-logo { height: 22px; width: auto; }
  .m-icon-btn {
    width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid var(--card-border); background: var(--panel); color: var(--text); cursor: pointer;
  }
  .m-icon-btn svg { width: 21px; height: 21px; }
  #m-calls-btn { color: var(--gold); border-color: var(--gold-border); background: var(--gold-dim); }

  /* ----- sidebar becomes a drawer with full labels ----- */
  .sidebar {
    width: min(84vw, 300px) !important; z-index: 1000;
    transform: translateX(-102%); transition: transform 240ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 0 60px rgba(0,0,0,0.5); padding-top: env(safe-area-inset-top);
  }
  body.m-nav-open .sidebar { transform: none; }
  .sidebar .sidebar-logo-text, .sidebar .sidebar-nav-label, .sidebar .sidebar-label-text,
  .sidebar .sidebar-section-label, .sidebar .sidebar-nav-lock { display: revert !important; }
  .sidebar .sidebar-header { justify-content: flex-start !important; padding: 16px 14px 12px 18px !important; gap: 10px; }
  .sidebar .sidebar-nav-btn { justify-content: flex-start !important; padding: 10px 14px !important; gap: 12px !important; font-size: 15px; flex: none; }
  .sidebar .sidebar-nav { overscroll-behavior: contain; }
  .sidebar .sidebar-section-label { padding-top: 12px !important; }
  .sidebar .sidebar-nav-icon, .sidebar .nav-svg { width: 20px; height: 20px; }
  .sidebar .sidebar-collapse-btn { display: none !important; }
  .sidebar .current-user-identity { justify-content: flex-start !important; }
  .sidebar .sidebar-user-actions { flex-direction: row !important; }
  .m-close-btn { display: inline-flex; margin-left: auto; width: 38px; height: 38px; }
  .m-backdrop {
    display: block; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none; transition: opacity 200ms ease;
  }
  body.m-nav-open .m-backdrop { opacity: 1; pointer-events: auto; }
  body.m-nav-open { overflow: hidden; }

  /* ----- content area uses the full width ----- */
  .main-area { margin-left: 0 !important; padding-top: calc(var(--m-top) + env(safe-area-inset-top));
    padding-bottom: calc(var(--m-tabs) + env(safe-area-inset-bottom) + 12px); }

  /* ----- bottom tabs ----- */
  .m-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--m-tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--card-border);
  }
  .m-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; color: var(--text-dim); font: 600 11px var(--font-body); cursor: pointer;
  }
  .m-tabbar svg { width: 22px; height: 22px; }
  .m-tabbar button.active { color: var(--gold); }

  /* ----- general clean-up ----- */
  .page-head { padding: 16px 14px 10px !important; }
  .page-head .page-title, .dash-hero h1 { font-size: 24px !important; }
  .page-head .dash-eyebrow { display: none; }  /* the top bar already says where you are */
  .page-head .dash-sub { font-size: 14px; margin-top: 4px; }
  .view { padding-left: 0; padding-right: 0; }

  /* Quick actions: one swipeable row instead of a tall stack */
  .quick-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px 4px;
    -webkit-overflow-scrolling: touch; }
  .quick-bar::-webkit-scrollbar { display: none; }
  .qa-btn { flex: none; white-space: nowrap; padding: 9px 13px; font-size: 13px; }
  .page-head .quick-bar { display: none; } /* the page's own tools matter more on a phone; the top bar has calling */

  /* Dashboard: compact hero, numbers two to a row */
  .dash-hero { padding: 18px 16px !important; border-radius: 18px; }
  .dash-hero .dash-sub { margin-bottom: 14px; }
  .dashboard-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .dashboard-stats-row > * { min-width: 0; padding: 14px !important; }
  .dashboard-stat-value { font-size: 26px !important; }
  .dashboard-stats-row .stat-icon { width: 32px; height: 32px; margin-bottom: 8px; border-radius: 9px; }
  .dashboard-stats-row .stat-icon svg { width: 16px; height: 16px; }

  /* Call Mode tweaks on top of its own phone rules */
  .cm-tabs { margin: 0 14px 12px; }
  #view-callmode .cm-toolbar, #view-callmode #cm-warnings, #view-callmode .cm-grid,
  #view-callmode [data-cm-pane="funnel"] > * { margin-left: 14px; margin-right: 14px; }
  .cm-sheet { bottom: 0; }
}

@media (max-width: 760px) {
  .sidebar .sidebar-user-actions { flex-wrap: nowrap !important; width: 100%; }
  .sidebar .sidebar-user-actions > * { min-width: 0; }
  .sidebar .sidebar-user-actions > *:first-child { flex: 1 1 auto !important; }
  .sidebar .sidebar-user-actions > *:not(:first-child) { flex: 0 0 44px !important; }
}

/* ----- iPhone fixes -----
   Safari zooms the whole page in when you tap a field with text under 16px,
   which throws the fixed top and bottom bars out of place. 16px stops it. */
@media (max-width: 760px) {
  input, select, textarea, .input { font-size: 16px !important; }
  button, a, .btn, .qa-btn, .cm-out, .cm-chip { touch-action: manipulation; }
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Full-height pages fit between the bars */
  #view-library, .planner-layout, #view-chat {
    height: calc(100dvh - var(--m-top) - var(--m-tabs) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  .main-area { min-height: 100dvh; }
  img, video, canvas, table { max-width: 100%; }
}

/* ----- pages with a side panel stack on a phone ----- */
@media (max-width: 760px) {
  .planner-layout { flex-direction: column !important; height: auto !important; }
  .planner-layout > * { width: 100% !important; max-width: 100% !important; flex: none !important; border-right: 0 !important; }
  .planner-sidebar { max-height: none !important; overflow: visible !important; border-bottom: 1px solid var(--card-border); }
  #view-library { height: auto !important; }
  .library-layout { flex-direction: column !important; }
  .library-layout > * { width: 100% !important; max-width: 100% !important; border-right: 0 !important; }
  .library-sidebar { border-bottom: 1px solid var(--border); max-height: 40vh; }
  .library-tabs, .library-quick-send { padding-left: 14px !important; padding-right: 14px !important; flex-wrap: wrap; }
  #view-library .page-head { padding-left: 14px !important; }
}
@media (max-width: 760px) {
  .page-head { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; align-self: stretch; }
  .planner-layout .planner-main { order: -1; padding: 14px !important; }
  .planner-info-box { display: none !important; }  /* the how-it-works note is for desktop; it buried the calendar */
}