/* ============================================================
   Atlas Command — Responsive overrides for the React app.

   The desktop app uses inline styles extensively, so this sheet
   leans on !important to override gridTemplateColumns, paddings,
   widths and font sizes inside .react-mobile scope. Pair with the
   className anchors added in chrome.jsx, home.jsx, dashboard.jsx,
   linear-list.jsx, screens.jsx.
   ============================================================ */

:root {
  --rm-tab-bar-h: 64px;
  --rm-header-h: 56px;
  --rm-safe-b: env(safe-area-inset-bottom, 0px);
  --rm-safe-t: env(safe-area-inset-top, 0px);
}

html, body { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden !important; }

/* utility */
.rm-only { display: none !important; }
@media (max-width: 900px) { .rm-only { display: revert !important; } .rm-desktop-only { display: none !important; } }

/* ─── Top nav & app shell ─────────────────────────── */
@media (max-width: 900px) {
  .app, .app > div { min-width: 0 !important; }

  /* The desktop TopNav inline-styled wrapper. We collapse padding,
     hide overflow-prone center cluster, and reserve room for the
     bottom tab bar below the main content. */
  main { padding-bottom: calc(var(--rm-tab-bar-h) + var(--rm-safe-b) + 12px) !important; min-width: 0 !important; }

  .top-nav-row {
    padding: 10px 12px !important;
    padding-top: calc(10px + var(--rm-safe-t)) !important;
    gap: 8px !important;
    min-height: var(--rm-header-h) !important;
  }
  /* R11: ONE bottom surface (tab bar). Top nav keeps only:
     title (left) + project pill (mid) + avatar (right).
     Inbox button removed (it's a tab). + button removed (moves to bottom). */
  .top-nav-row .top-nav-tabs,
  .top-nav-row .top-nav-cmdpalette-btn,
  .top-nav-row .top-nav-briefing-btn,
  .top-nav-row .top-nav-credits,
  .top-nav-row .top-nav-newmission-btn,
  .top-nav-row .top-nav-newmission-kbd,
  .top-nav-row > div:last-child > button[title*="Inbox" i],
  .top-nav-row > div:last-child > button[title*="Daily" i],
  .top-nav-row > div:last-child > .vdiv { display: none !important; }
  /* Keep only the avatar */
  .top-nav-row > div:last-child > button[aria-label="Open settings"] {
    width: 32px !important; height: 32px !important; order: 4 !important;
  }
  .top-nav-row > div:last-child {
    gap: 0 !important;
    order: 3 !important;
    flex-shrink: 0 !important;
  }
  .top-nav-row .top-nav-newmission-btn {
    width: 40px !important; min-width: 40px !important; padding: 0 !important;
    font-size: 0 !important;
  }
  .top-nav-row .top-nav-newmission-btn svg { font-size: initial; }
  .top-nav-row .top-nav-newmission-btn .top-nav-newmission-label { display: none !important; }
  .top-nav-row .top-nav-vdiv { display: none !important; }


  .top-nav-context-title {
    display: inline-flex !important;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: -.005em;
    margin-left: 4px;
    flex: 1;
    min-width: 0;
  }

  /* ─── Home ──────────────────────────────────────── */
  .home-view {
    padding: 16px 14px 28px !important;
    max-width: 100% !important;
  }
  .home-view .home-greeting-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .home-view .home-greeting {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  .home-view .home-search-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .home-view .home-search-row > div:first-child {
    width: 100% !important;
  }


  /* Operational summary line — replaces the greeting H1 on mobile */
  .home-summary-desktop, .home-greeting-desktop { display: none !important; }
  .home-summary-mobile { display: block !important; margin: 6px 0 14px; }
  .home-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .home-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
  .home-summary-chip strong {
    color: var(--text);
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
  }
  .home-summary-chip--urgent {
    border-color: var(--orange);
    color: var(--orange);
    cursor: pointer;
  }
  .home-summary-chip--urgent strong { color: var(--orange); }
  .home-summary-chip--urgent:active { transform: scale(.97); }
  .home-summary-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
  }
  .home-summary-dot--live {
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(31,172,71,.4);
    animation: rmLiveDot 1.6s ease-out infinite;
  }
  @keyframes rmLiveDot {
    0% { box-shadow: 0 0 0 0 rgba(31,172,71,.4); }
    70% { box-shadow: 0 0 0 6px rgba(31,172,71,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,172,71,0); }
  }

    /* R3: chip summary above covers same data → hide stats card on mobile */
  .home-stats-grid { display: none !important; }

  .home-projects-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ─── Missions / Dashboard ──────────────────────── */
  .missions-view {
    padding: 14px 14px 28px !important;
    max-width: 100% !important;
  }
  /* R7: hide duplicate stats, action row, AND the greeting H1 itself.
     Keep only the conversational sub-line — that line lives in
     mobile-greeting-mode where it gets compressed to chips below. */
  .missions-view .dashboard-metrics,
  .missions-view .exec-kpi-strip { display: none !important; }
  .missions-view .missions-greeting-row > div:last-child { display: none !important; }
  /* Hide the H1 greeting; keep only the sub-line in compact form */
  .missions-view .missions-greeting-row > div:first-child > div:first-child {
    display: none !important;
  }
  .missions-view .missions-greeting-row > div:first-child > div:nth-child(2) {
    font-size: 13px !important;
    color: var(--text-2) !important;
    margin-top: 0 !important;
    line-height: 1.45 !important;
  }

  /* Suggested rail — make cards swipeable horizontally */
  .suggested-rail {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .suggested-rail > * { scroll-snap-align: start; }
  .suggested-rail-grid {
    grid-template-columns: repeat(8, 86%) !important;
    grid-auto-flow: column !important;
    gap: 10px !important;
    padding: 4px 14px 12px !important;
  }

  /* Linear list rows — simplified mobile layout
     Drop ID + avatar columns (.lr-hide-mobile), let title take full
     width with wrap, push remaining badges/meta into a 2nd row. */
  .linear-row {
    grid-template-columns: 18px 1fr !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 12px 14px !important;
  }
  .linear-row .lr-hide-mobile { display: none !important; }
  .linear-row .lr-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ─── Approvals queue → stacked master/detail ──── */
  .approvals-queue {
    grid-template-columns: 1fr !important;
    min-height: 100% !important;
    position: relative !important;
  }
  .approvals-queue .approvals-list {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    max-height: none !important;
    width: 100% !important;
  }
  .approvals-queue .approvals-detail {
    padding: 16px 14px !important;
    width: 100% !important;
  }
  .approvals-queue.detail-open .approvals-list { display: none !important; }
  .approvals-queue:not(.detail-open) .approvals-detail { display: none !important; }
  .approvals-queue .approvals-back-btn { display: inline-flex !important; }
  .approvals-queue .approvals-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .approvals-queue .approvals-actions input { flex: 1 1 100% !important; order: -1; padding: 10px 0; font-size: 14px !important; }
  .approvals-queue .approvals-actions .btn { flex: 1 1 0 !important; min-width: 96px !important; justify-content: center !important; padding: 10px 12px !important; font-size: 13px !important; }
  .approvals-queue .approvals-before-after { grid-template-columns: 1fr !important; }

  /* R3: mobile dense project row — appears on mobile only */
  .proj-mobile-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-2);
  }
  .proj-mobile-stat strong {
    color: var(--text);
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
    margin-right: 3px;
  }
  .proj-mobile-stat--urgent { color: var(--orange); }
  .proj-mobile-stat--urgent strong { color: var(--orange); }
  .proj-mobile-stat--health { font-feature-settings: 'tnum' 1; font-weight: 600; margin-left: auto; }

  /* R4: search row tighter, sort sits alongside search */
  .home-search-row .home-search-spacer { display: none !important; }
  .home-search-row > div:first-child { flex: 1 1 100% !important; width: 100% !important; order: 1; }
  .home-search-row .home-sort-select { order: 2; flex: 1 1 0; min-width: 0; padding: 9px 10px !important; font-size: 13px !important; }
  .home-search-row > span { order: 3; flex-shrink: 0; }

  /* R22: hide the dominant page-title on mobile — logo + picker do the work */
  .top-nav-context-title { display: none !important; }
  /* Larger top-nav height to accommodate the bigger title */
  .top-nav-row {
    min-height: 60px !important;
    padding: 12px 16px !important;
    padding-top: calc(12px + var(--rm-safe-t)) !important;
  }
  /* Project pill moves to the right of the title */
  .top-nav-row .project-selector-wrap { order: 2 !important; flex: 0 0 auto !important; }
  .top-nav-row .project-selector-wrap > button { min-width: 0 !important; padding: 6px 10px !important; font-size: 12.5px !important; }
  /* On mobile: hide the project name text but keep folder icon + chevron caret */
  .top-nav-row .project-selector-wrap > button > span { display: none !important; }
  /* R22: Brand mark IS the page anchor on mobile — logo replaces "Home" text */
  .top-nav-row > button[title*="Atlas Command"] {
    display: inline-flex !important;
    padding: 4px !important;
    margin-left: -4px !important;
    flex-shrink: 0 !important;
    order: 0 !important;
  }
  /* Make the project pill smaller / secondary */
  .top-nav-row .project-selector,
  .top-nav-row > button[title*="Atlas"] + button,
  .top-nav-row > button.project-pill { font-size: 12px !important; }

  /* R4: condensed onboarding row */
  .ob-mobile-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 0 0;
    font-size: 12.5px;
  }
  .ob-mobile-row .ob-mobile-step {
    color: var(--text-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ob-mobile-row .ob-mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--orange);
    font-weight: 700;
    font-size: 12.5px;
    flex-shrink: 0;
  }


  /* R5: SuggestedRow is too dense for mobile (10 cols of metadata).
     Hide the whole Suggested missions rail on mobile — users can
     access suggestions through the launcher / + button instead. */
  .suggested-rail-grid,
  .suggested-rail-grid > * { display: none !important; }
  /* And hide the rail's parent header too */
  .missions-view > div > div:has(> .suggested-rail-grid),
  .missions-view div:has(> div > .suggested-row) { display: none !important; }

  /* ─── Modals — full-screen sheets on mobile ─────── */
  .react-modal-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

/* Composer modal (MissionComposer) — collapse split body to single col */
  .composer-modal .composer-body {
    grid-template-columns: 1fr !important;
  }
  .composer-modal .composer-body > *:first-child {
    border-bottom: 1px solid var(--border) !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  /* MissionDetail full-screen sheet */
  .react-modal-sheet.fade-in {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }

  /* Morning Briefing: full-screen sheet, stacked footer */
  .briefing-backdrop {
    padding: 0 !important;
  }
  .briefing-modal {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .briefing-footer {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  .briefing-footer > span:nth-child(2) {
    flex: 1 1 100% !important;
    order: 2 !important;
    font-size: 12.5px !important;
  }
  .briefing-footer > div { display: none !important; }
  .briefing-footer > button:last-child {
    flex: 1 1 0 !important;
    min-width: 200px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

    /* Settings popover slides to overlap full width */
  .settings-dropdown {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    top: calc(var(--rm-header-h) + var(--rm-safe-t) + 8px) !important;
  }
}



  /* R3: Compact project rows — drop in-card 4-col stats grid, keep
     name + favicon + last activity + a single sparkline. */
  .home-projects-grid > button {
    padding: 14px 14px !important;
  }
  .home-projects-grid > button > div:not(:first-child) {
    /* hide the stats grid (MISSIONS / RUNNING / APPROVALS / COMPLETED)
       and the visibility hero block on mobile; users tap to drill in */
  }
  /* Target the dense card stats — they use a 4-col grid;
     match by gridTemplateColumns inline style is hard, so use heuristic class */
  .home-projects-grid > button .proj-stats-grid,
  .home-projects-grid > button [data-mobile-hide] {
    display: none !important;
  }

  /* R3: SuggestedRail vertical on mobile (was horizontal carousel) */
  .suggested-rail-grid {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    overflow-x: visible !important;
    padding: 4px 14px 12px !important;
    gap: 8px !important;
  }
  .suggested-rail-grid > * {
    scroll-snap-align: unset !important;
    min-height: 64px;
  }



  /* R3: mobile dense project row — one line, three signals */
  .proj-mobile-row { display: none; }

/* ============================================================
   Bottom Tab Bar (mobile only) — populated by chrome.jsx
   ============================================================ */
.rm-bottom-tabbar { display: none; }
@media (max-width: 900px) {
  .rm-bottom-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    align-items: stretch;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding-bottom: var(--rm-safe-b);
    z-index: 80;
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 -4px 16px rgba(0,0,0,.10);
  }
}
.rm-bottom-tabbar > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative;
  min-height: var(--rm-tab-bar-h);
  -webkit-tap-highlight-color: transparent;
}
.rm-bottom-tabbar > button.active { color: var(--text); }
.rm-bottom-tabbar > button .rm-tab-icon-wrap {
  width: 36px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: background .14s;
}
.rm-bottom-tabbar > button.active .rm-tab-icon-wrap {
  background: rgba(102,87,255,.14);
  color: var(--accent, #6657FF);
}
.rm-bottom-tabbar > button .rm-tab-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}


/* ============================================================
   Floating Tool Dock (mobile only) — populated by chrome.jsx
   Sits just above the bottom tab bar. Renders 3 actions:
   notifications · + new mission (primary, larger) · account avatar
   ============================================================ */
:root { --rm-dock-h: 0px; }
/* R11: ToolDock retired. Surface consolidated to single bottom tab bar.
   Inbox/+ /Avatar moved to the top nav and bottom-tab "+" slot. */
.rm-tool-dock { display: none !important; }
html.light .rm-tool-dock {
  background: rgba(255,255,255,.86);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
}

.rm-tool-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .14s, color .14s;
}
.rm-tool-btn:hover { color: var(--text); }
.rm-tool-btn:active { transform: scale(.94); }
.rm-tool-btn .rm-tool-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(20,20,22,.88);
}
html.light .rm-tool-btn .rm-tool-badge { box-shadow: 0 0 0 2px rgba(255,255,255,.94); }

/* Primary FAB — the +, scaled up, accent-tinted */
.rm-tool-btn.rm-tool-primary {
  width: 56px;
  height: 56px;
  background: linear-gradient(180deg, #6657FF, #5142E6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(102,87,255,.45), inset 0 1px 0 rgba(255,255,255,.20);
}
.rm-tool-btn.rm-tool-primary:hover { color: #fff; }
.rm-tool-btn.rm-tool-primary:active { transform: scale(.95); }

/* Avatar */
.rm-tool-btn.rm-tool-avatar {
  background: linear-gradient(135deg, #FF8536, #F44343);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.rm-tool-btn.rm-tool-avatar > span { line-height: 1; }

.rm-tool-dock { transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.rm-tool-dock--hidden { transform: translateX(-50%) translateY(160%); opacity: 0; pointer-events: none; }


.ob-mobile-row { display: none; }


/* ─── R10: micro-interactions polish ─── */

/* FAB haptic-style press */
.rm-tool-btn.rm-tool-primary { transition: transform .14s cubic-bezier(.18,.78,.27,1.01), box-shadow .14s, filter .14s; }
.rm-tool-btn.rm-tool-primary:active { transform: scale(.92); filter: brightness(.95); }

/* Bottom tab press feedback — quick scale of the icon wrap */
.rm-bottom-tabbar > button:active .rm-tab-icon-wrap { transform: scale(.86); transition: transform .08s; }

/* Subtle content fade-in on tab switch — applied via main element */
@keyframes rmTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  main > div, main > section { animation: rmTabFadeIn .22s cubic-bezier(.2,.8,.2,1) both; }
  /* Smoother content scroll */
  main { scroll-behavior: smooth; }
  /* iOS-style momentum scroll on lists */
  .approvals-list, .home-projects-grid { -webkit-overflow-scrolling: touch; }
}

/* Bottom tab bar — subtle hairline above it on darker backgrounds */
.rm-bottom-tabbar {
  box-shadow: 0 -4px 16px rgba(0,0,0,.10), 0 -1px 0 rgba(255,255,255,.04);
}
html.light .rm-bottom-tabbar {
  background: rgba(255,255,255,.94);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08), 0 -1px 0 rgba(0,0,0,.04);
}


/* R11: center "Create" primary tab — visually elevated FAB inside the tab bar */
.rm-bottom-tabbar > button.rm-tab-primary {
  flex: 0 0 auto;
  width: 64px;
  padding: 0;
}
.rm-bottom-tabbar > button.rm-tab-primary .rm-tab-icon-wrap {
  width: 56px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(180deg, #6657FF, #5142E6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(102,87,255,.40), inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .14s cubic-bezier(.18,.78,.27,1.01), box-shadow .14s, filter .14s;
}
.rm-bottom-tabbar > button.rm-tab-primary:active .rm-tab-icon-wrap {
  transform: scale(.92);
  filter: brightness(.95);
}
.rm-bottom-tabbar > button.rm-tab-primary.active .rm-tab-icon-wrap {
  background: linear-gradient(180deg, #6657FF, #5142E6);
  color: #fff;
}


/* ============================================================
   Project Chip Strip — horizontal swipeable project switcher
   Renders on mobile only; sticky under the top nav.
   ============================================================ */
.rm-project-strip {
  display: none;
  position: sticky;
  top: var(--rm-header-h);
  z-index: 55;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.rm-project-strip::-webkit-scrollbar { display: none; }
.rm-project-strip .rm-project-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .14s, border-color .14s, color .14s;
  scroll-snap-align: start;
}
.rm-project-strip .rm-project-chip:active { transform: scale(.97); }
.rm-project-strip .rm-project-chip--active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}
.rm-project-strip .rm-project-chip-glyph {
  font-size: 12px;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
  opacity: .8;
}
@media (max-width: 900px) {
  .rm-project-strip { display: flex; }
  /* Hide the old project pill in the top nav — chip strip takes over */
  .top-nav-row .project-selector-wrap { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   R13: Mission tap → chat view. On mobile, MissionDetail becomes a
   full-screen chat. Kill the 320px right rail (metadata moves out of
   the way), compress the top bar to back · title · close, and tighten
   the composer padding so the chat is the entire surface.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Force single-column grid — chat occupies the entire body */
  .mission-detail-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .md-right-rail { display: none !important; }

  /* Top bar — collapse to: back · {avatar + title} · (room for close) */
  .md-top-bar {
    grid-template-columns: auto 1fr !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .md-tb-center { display: none !important; }       /* phase strip & ETA off-screen on mobile */
  .md-tb-right  { display: none !important; }       /* status/team/actions belong in (i) menu */

  /* Identity row — keep avatar + title but reduce ID line clutter */
  .md-tb-left { gap: 8px !important; }
  .md-tb-left > div[style*="width: 1px"] { display: none !important; }  /* vertical divider */

  /* Activity feed header — tighten padding */
  .md-feed-header { padding: 12px 14px 8px !important; }

  /* Approval dock — full-bleed, tighter padding */
  .md-execution-feed .approval-dock-in {
    padding: 10px 12px !important;
  }
  .md-execution-feed .approval-dock-in > div {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* Composer — tighten padding so chat fills the screen */
  .md-composer-dock {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .md-composer-dock > div:first-child {
    padding: 8px 10px !important;
  }
  /* Hide the keyboard-hint subline on mobile (no keyboard) */
  .md-composer-dock > div:last-child { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   R14: Mission chat polish.
   - Approval dock: hide Preview on mobile (Skip + Approve is enough),
     let the summary count breathe instead of crushing it onto one line.
   - "Paused for approval" footer cleaner.
   - Mission top bar identity row tighter.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hide Preview on mobile — Approve + Skip is the minimum */
  .md-approval-preview { display: none !important; }

  /* Let the count + last-activity line wrap rather than truncate to "Plan ..." */
  .md-approval-summary {
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
  }
  .md-approval-summary > span:not(.md-approval-count) {
    flex-basis: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .md-approval-count { white-space: nowrap !important; }

  /* Approve button — primary action gets visual weight */
  .md-approval-approve {
    padding: 6px 12px !important;
  }
  .md-approval-skip {
    padding: 6px 10px !important;
  }

  /* Mission top bar — make the title row breathe */
  .md-top-bar .md-tb-left > div[style*="minWidth: 0"] { min-width: 0 !important; }
  .md-top-bar .md-tb-left > div[style*="minWidth: 0"] > div[style*="fontSize: 11"] {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }
  .md-top-bar .md-tb-left > div[style*="minWidth: 0"] > div[style*="fontWeight: 600"] {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* "Paused for approval" / agent activity header — denser */
  .md-feed-header > div:first-child > div:last-child { min-width: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   R15: Bottom safe-area unification.
   Single system across Home/Missions/Approvals lists AND mission-chat
   composer + approval dock. Last item never sits behind the tab bar
   or composer; safe-area inset honored everywhere.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Chat scroll area — leave room for the approval dock + composer. They are
     the children below it inside the flex column, but iOS Safari can clip the
     last message if there's a sudden scroll jump, so add extra slack. */
  .md-feed-scroll {
    padding: 14px 14px 24px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Approval dock + composer share the same edge math */
  .md-execution-feed .approval-dock-in,
  .md-composer-dock {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* The composer is the bottommost element of MissionDetail and must
     respect the keyboard-safe area on iOS. */
  .md-composer-dock {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* List views (Missions, Approvals) — ensure last row clears the tab bar
     even when ProjectChipStrip is sticky on top. main already has
     padding-bottom, but if a child sets its own padding (e.g.,
     home-projects-grid), reinforce with scroll-margin so anchors land
     above the tab bar. */
  main > * { scroll-margin-bottom: calc(var(--rm-tab-bar-h) + 12px); }

  /* Avoid the bottom of long lists being cut by the tab bar */
  .home-projects-grid,
  .linear-list,
  .approvals-queue {
    padding-bottom: 12px !important;
  }

  /* Prevent body scroll under modal sheets — keep gestures contained */
  .react-modal-sheet { overscroll-behavior: contain; }
}

/* ─────────────────────────────────────────────────────────────────────
   R16: Simplify Missions row grammar — Linear-mobile style.
   Both Codex and Gemini flagged "overlapping avatar/chip clusters" on
   the missions tab. Mobile rules:
     • One status icon, one title line, one compact meta line
     • Hide assignee avatars (they belong in the chat view, not the list)
     • Hide low-signal pills (high-impact pin, smart sparkle); keep
       approval count (decision urgency) and parallel-action pill
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .linear-row {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    align-items: center !important;
  }
  /* Status icon stays column 1; title is column 2 (spans flexibly); meta column 3 */
  .linear-row .lr-status { grid-column: 1; grid-row: 1; }
  .linear-row .lr-title  { grid-column: 2; grid-row: 1; font-size: 14px !important; font-weight: 600 !important; }
  .linear-row .lr-meta-right { grid-column: 3; grid-row: 1; min-width: 0 !important; font-size: 11.5px !important; }

  /* Badges drop to row 2, spanning columns 2-3 — only approval/parallel pills survive */
  .linear-row .lr-badges {
    grid-column: 2 / span 2;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 4px !important;
    margin-top: 2px;
  }
  /* Hide low-signal badges on mobile: high-impact pin, smart sparkle */
  .linear-row .lr-badges > span[title="High impact"],
  .linear-row .lr-badges > span[title="Atlas Smart playbook"] {
    display: none !important;
  }

  /* Hide assignee avatars on the list — assignee surfaces inside the chat view */
  .linear-row .lr-assignee { display: none !important; }

  /* Strip any inline 'unread' dot from title styling (it interferes with truncation) */
  .linear-row .lr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ─────────────────────────────────────────────────────────────────────
   R17: Approvals queue normalization.
   Codex: "purple highlight/full-card tint reads less minimal".
   On mobile the detail view is a separate route, so the selected
   highlight on the list view adds noise — strip it. Soften the green
   impact pill to a tonal chip + keep risk dot subtle.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Selected row tint OFF on mobile — detail opens as its own screen */
  .approvals-queue .ap-row.ap-row--selected {
    background: transparent !important;
  }

  /* Row: roomier touch target, cleaner spacing */
  .approvals-queue .ap-row {
    padding: 14px 14px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
  }

  /* Impact pill: subtler tint */
  .approvals-queue .ap-row .ap-row-impact {
    background: transparent !important;
    padding: 0 !important;
    font-weight: 600 !important;
  }
  /* Risk meta: tighten dot + label */
  .approvals-queue .ap-row .ap-row-meta {
    gap: 8px !important;
    font-size: 11px !important;
  }
  /* Kind breadcrumb: enlarge project favicon (Gemini fix) */
  .approvals-queue .ap-row .ap-row-breadcrumb img,
  .approvals-queue .ap-row .ap-row-breadcrumb svg,
  .approvals-queue .ap-row .ap-row-breadcrumb [class*="avatar"] {
    width: 18px !important; height: 18px !important;
  }
  /* Title: more readable */
  .approvals-queue .ap-row .ap-row-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  /* Header padding tighter */
  .approvals-queue .approvals-list > div:first-child {
    padding: 12px 14px 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   R18: Home polish — reduce badge chrome + tighten vertical rhythm.
   Codex: "saturated badges/dashed onboarding card feel busier than
   Linear/Notion".
   Gemini: "tighten vertical spacing between Home title and search bar".
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Tighten the gap between the page title and the project chip strip
     and the chip strip and the summary chips. Currently has too much
     whitespace pushing the search row below the fold. */
  .top-nav-row { margin-bottom: 0 !important; }
  .home-view > div:first-child {
    padding-top: 4px !important;
  }

  /* Summary chip row — softer pills, less saturated */
  .home-summary-mobile { margin: 4px 0 10px !important; }
  .home-summary-chip {
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-2) !important;
  }
  .home-summary-chip--urgent {
    /* keep urgency signal but as a 2px left accent instead of full pill tint */
    border-color: var(--orange-dim) !important;
    background: transparent !important;
  }

  /* Search row — collapse vertical gap to 8px */
  .home-view .home-search-row { gap: 8px !important; margin-top: 4px !important; }

  /* Project rows — softer card background (Codex: less saturated chrome) */
  .home-projects-grid > * {
    box-shadow: none !important;
  }

  /* Onboarding card with dashed border — soften from 2px dashed to 1.5px dashed */
  .home-projects-grid > [class*="onboarding"],
  .home-projects-grid > [style*="dashed"] {
    border-width: 1.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   R21: Central project picker — single big button + bottom-sheet,
   "All Projects" listed first. Replaces the mobile chip strip per
   user-requested simplification.

   • Desktop: picker hidden, chip strip already hidden (existing rule)
   • Mobile (≤900px): chip strip hidden, picker button + sheet visible
   ───────────────────────────────────────────────────────────────────── */
.rm-project-picker { display: none; }

@media (max-width: 900px) {
  /* Swap the chip strip for the centered picker on mobile */
  .rm-project-strip { display: none !important; }
  .rm-project-picker {
    display: flex !important;
    justify-content: center;
    padding: 10px 16px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .rm-project-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    cursor: pointer;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, background .14s, border-color .14s;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
  }
  .rm-project-picker-btn:active { transform: scale(.98); }
  .rm-project-picker-glyph {
    font-size: 14px;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text);
    opacity: .9;
  }
  .rm-project-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
  }
  .rm-project-picker-chevron {
    font-size: 11px;
    color: var(--text-3);
    margin-left: 2px;
  }

  /* Bottom-sheet backdrop + sheet */
  .rm-project-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.42);
    z-index: 220;
    display: flex; align-items: flex-end; justify-content: center;
    animation: rmSheetFadeIn .18s ease-out;
  }
  .rm-project-sheet {
    width: 100%;
    max-height: 78vh;
    background: var(--bg);
    border-radius: 20px 20px 0 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    animation: rmSheetSlideUp .22s cubic-bezier(.2,.7,.3,1);
  }
  .rm-project-sheet-handle {
    width: 36px; height: 4px;
    background: var(--text-3); opacity: .35;
    border-radius: 999px;
    margin: 8px auto 6px;
  }
  .rm-project-sheet-title {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    padding: 4px 16px 10px;
    border-bottom: 1px solid var(--border);
  }
  .rm-project-sheet-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 8px;
  }
  .rm-project-sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 12px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rm-project-sheet-row:active { background: var(--hover-1); }
  .rm-project-sheet-row--active { background: var(--hover-2); }
  .rm-project-sheet-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--surface);
    flex-shrink: 0;
  }
  .rm-project-sheet-row-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 1px;
  }
  .rm-project-sheet-row-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rm-project-sheet-row-meta {
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rm-project-sheet-check {
    font-size: 14px;
    color: var(--accent);
    font-weight: 700;
  }

  @keyframes rmSheetFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes rmSheetSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ─────────────────────────────────────────────────────────────────────
   R22: Project picker inline in the top nav.
   Layout on mobile becomes:
     [logo]  [✦ All Projects ▾]  [avatar]
   The picker now lives INSIDE .top-nav-row (mounted by TopNav), so
   the separate sticky row above it is suppressed.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The picker WHEN it's a direct child of the top-nav-row: behave as
     an inline pill that flexes to take the middle slot. */
  .top-nav-row .rm-project-picker {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
    min-width: 0;
    order: 1 !important;
  }
  /* Make the picker button itself a touch smaller so it fits the nav row
     without dominating the chrome */
  .top-nav-row .rm-project-picker-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13.5px;
    max-width: calc(100% - 8px);
  }
  .top-nav-row .rm-project-picker-label { max-width: 200px; }

  /* Right cluster (avatar) stays on the right */
  .top-nav-row > div:last-child { order: 2 !important; }

  /* The top-nav-row needs flex layout that puts logo left, picker center,
     avatar right. Counter the existing min-width:0 oddities. */
  .top-nav-row {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   R23: Calmer home — strip what was overwhelming.
   - Hide the 5 "Not set up" project cards (still reachable via picker)
   - Hide the search row + sort + count (picker handles project lookup)
   - Replace with a single condensed "N projects ready to set up →"
   - Tighten card spacing so active + onboarding feel like a clean trio
   ───────────────────────────────────────────────────────────────────── */
.home-setup-more { display: none; }   /* desktop default */

@media (max-width: 900px) {
  /* Kill the verbose not-set-up cards — picker holds the full list */
  .home-projects-grid > .proj-card--not-set-up { display: none !important; }

  /* Hide the search/sort/count row on mobile */
  .home-view .home-search-row { display: none !important; }

  /* Single compact entry to the not-set-up backlog */
  .home-setup-more {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, border-color .14s, background .14s;
  }
  .home-setup-more:active { transform: scale(.99); background: var(--hover-1); }
  .home-setup-more-label strong { color: var(--text); font-weight: 700; margin-right: 4px; }
  .home-setup-more-arrow { color: var(--text-3); font-size: 14px; }

  /* Tighten the active/onboarding cards a notch */
  .home-projects-grid { gap: 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   R25: Lovable-inspired mobile home.
   - ☰ hamburger (top-left) replaces logo, opens a left drawer
   - Hero "Ask Atlas" prompt is the centerpiece of Home
   - Project cards become condensed "pulse" cards: name + one live
     activity line ("Atlas is drafting: ...")
   ───────────────────────────────────────────────────────────────────── */

/* Hamburger button — hidden on desktop, visible on mobile */
.rm-menu-btn { display: none; }
@media (max-width: 900px) {
  .rm-menu-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    order: 0 !important;
  }
  .rm-menu-btn:active { background: var(--hover-1); }

  /* Hide the brand logo (R22 unhid it; now ☰ takes its slot) */
  .top-nav-row > button[title*="Atlas Command"] { display: none !important; }
}

/* Left drawer (mobile only) */
.rm-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 230;
  display: flex;
  animation: rmDrawerFadeIn .18s ease-out;
}
.rm-drawer {
  width: min(86vw, 320px);
  height: 100%;
  background: var(--bg);
  display: flex; flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,.22);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 0 calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: rmDrawerSlideIn .22s cubic-bezier(.2,.7,.3,1);
}
.rm-drawer-header {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 18px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.rm-drawer-brand-glyph {
  font-size: 18px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  font-weight: 700;
}
.rm-drawer-brand-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.rm-drawer-brand-meta { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

.rm-drawer-section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 18px 6px;
}
.rm-drawer-section {
  padding: 0 8px 8px;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--border);
}
.rm-drawer-section:last-of-type { border-bottom: none; }
.rm-drawer-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px;
  background: transparent; border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.rm-drawer-row:active { background: var(--hover-1); }
.rm-drawer-row--active { background: var(--hover-2); font-weight: 600; }
.rm-drawer-row-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--text-2);
}
.rm-drawer-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-drawer-row-check { color: var(--accent); font-weight: 700; }

@keyframes rmDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmDrawerSlideIn {
  from { transform: translateX(-16px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Ask Atlas hero (mobile only) */
.home-ask-hero { display: none; }
@media (max-width: 900px) {
  .home-ask-hero {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 4px 0 14px;
    padding: 14px 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s, border-color .14s, background .14s;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
  }
  .home-ask-hero:active { transform: scale(.99); background: var(--hover-1); }
  .home-ask-hero-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .home-ask-hero-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 1px;
  }
  .home-ask-hero-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .home-ask-hero-sub {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
  }
  .home-ask-hero-arrow {
    color: var(--text-3);
    font-size: 16px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--surface-raised);
  }
}

/* Project pulse line (mobile only) */
.proj-mobile-pulse { display: none; }
@media (max-width: 900px) {
  .proj-mobile-pulse {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-2);
    overflow: hidden;
  }
  .proj-mobile-pulse-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    animation: pulseGreen 1.8s ease-in-out infinite;
  }
  .proj-mobile-pulse-text {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.35;
  }
  .proj-mobile-pulse-text strong { color: var(--text); font-weight: 600; }

  /* Tone down the chip summary row since the hero now owns the top */
  .home-summary-mobile { display: none !important; }
}
@keyframes pulseGreen {
  0%, 100% { opacity: .85; box-shadow: 0 0 0 0 rgba(31,172,71,.4); }
  50%      { opacity: 1;   box-shadow: 0 0 0 4px rgba(31,172,71,0); }
}

/* ─────────────────────────────────────────────────────────────────────
   R26: Strip centered picker (drawer owns project switching now);
   move the top-right user button into the drawer's bottom footer.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* The centered "All Projects ▾" picker — drawer owns this now */
  .top-nav-row .rm-project-picker { display: none !important; }

  /* The right cluster (avatar) — moved into the drawer footer */
  .top-nav-row > div:last-child { display: none !important; }

  /* Top nav row now just hosts the hamburger — left-align it */
  .top-nav-row { justify-content: flex-start !important; }
}

/* Drawer bottom-pinned user footer */
.rm-drawer-spacer { display: none; }
.rm-drawer-footer { display: none; }
@media (max-width: 900px) {
  .rm-drawer-spacer { display: block !important; flex: 1; }
  .rm-drawer-footer {
    display: block !important;
    padding: 12px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .rm-drawer-user {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rm-drawer-user:active { background: var(--hover-1); }
  .rm-drawer-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF8536, #F44343);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
  }
  .rm-drawer-user-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 1px;
  }
  .rm-drawer-user-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rm-drawer-user-meta {
    font-size: 11.5px;
    color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rm-drawer-user-chevron {
    color: var(--text-3);
    font-size: 18px;
  }

  /* Drawer container itself: make it a flex column so spacer pushes footer down */
  .rm-drawer { display: flex !important; flex-direction: column !important; }
}