/* Shared phone navigation. Desktop workspaces keep their existing geometry. */
:root {
  --mobile-nav-height: 72px;
  --mobile-header-height: 56px;
  --mobile-viewport-height: 100dvh;
  --mobile-surface: #fff;
  --mobile-ink: #19372e;
  --mobile-muted: #62746c;
  --mobile-line: #e3ece7;
  --mobile-ease: cubic-bezier(.22, 1, .36, 1);
}
.customer-mobile-header-actions,
.mobile-pro-tabbar,
.mobile-nav-group-title,
.mobile-workspace-menu { display: none; }

@media (max-width: 760px) {
  html { scroll-padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 12px); }
  body { -webkit-tap-highlight-color: transparent; }
  :is(.customer-shell, .dashboard-shell, .pro-portal-shell) :is(button, a, summary) { touch-action: manipulation; }
  :is(.customer-shell, .dashboard-shell, .pro-portal-shell) :is(input, select, textarea) { font-size: 16px; }
  :is(.customer-shell, .dashboard-shell, .pro-portal-shell) :is(button, a, summary):focus-visible {
    outline: 3px solid #6d55b1;
    outline-offset: 3px;
  }
  .customer-shell .customer-topbar {
    position: sticky; top: 0; z-index: 80;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
    width: 100%; min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    height: auto; margin: 0; padding: env(safe-area-inset-top) 16px 0;
    border: 0; border-bottom: 1px solid #e5ece8; border-radius: 0;
    background: #ffffffed; backdrop-filter: blur(18px); box-shadow: none;
  }
  .customer-shell .customer-topbar :is(.primary-nav, .top-actions) { display: none; }
  .customer-shell .customer-topbar .customer-brand-wordmark { width: 126px; max-width: 126px; height: auto; }
  .customer-shell .customer-topbar .customer-header-brand { min-width: 0; min-height: 44px; margin: 0; }
  .customer-mobile-header-actions { display: flex; align-items: center; gap: 8px; }
  .customer-mobile-header-actions a {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--mobile-line); border-radius: 14px;
    background: #f5faf7; color: var(--mobile-ink); font-size: 13px; font-weight: 600;
  }
  .customer-mobile-header-actions .icon { width: 19px; height: 19px; }
  .customer-shell > .page-wrap { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 20px); }
  .customer-shell .mobile-tabbar,
  .mobile-pro-tabbar {
    position: fixed; z-index: 120; inset: auto 0 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    width: 100%; max-width: none; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    min-height: 0; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 4px;
    border: 0; border-top: 1px solid #dfe9e3; border-radius: 20px 20px 0 0;
    background: #fffffff2; backdrop-filter: blur(20px) saturate(1.12);
    box-shadow: 0 -5px 25px #213e2810; transform: none;
    transition: transform 180ms var(--mobile-ease), opacity 180ms ease;
  }
  .customer-shell .mobile-tabbar .nav-link,
  .mobile-pro-tabbar .side-link,
  .mobile-pro-tabbar .mobile-more-button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; min-width: 0; max-width: none; min-height: 54px; height: 100%; margin: 0; padding: 5px 2px;
    gap: 4px; border: 0; border-radius: 14px; background: transparent; color: #67776f;
    font-size: 10px; font-weight: 550; line-height: 1.2; text-align: center; text-decoration: none;
    transform: none; transition: background 160ms ease, color 160ms ease, transform 160ms var(--mobile-ease);
  }
  .customer-shell .mobile-tabbar .nav-link .icon,
  .mobile-pro-tabbar :is(.side-link, .mobile-more-button) .icon { width: 22px; height: 22px; flex-shrink: 0; }
  .customer-shell .mobile-tabbar .nav-link span,
  .mobile-pro-tabbar .side-link-label { display: block; max-width: 100%; opacity: 1; transform: none; font-size: inherit; line-height: inherit; white-space: nowrap; }
  .customer-shell .mobile-tabbar .nav-link.active,
  .mobile-pro-tabbar :is(.side-link.active, .mobile-more-button.active, .mobile-more-button[aria-expanded="true"]) {
    color: #1c5b47; background: #e6f4ec; box-shadow: none;
  }
  .customer-shell .mobile-tabbar .nav-link:active,
  .mobile-pro-tabbar :is(.side-link, .mobile-more-button):active { transform: scale(.94); }
  .mobile-pro-tabbar .dashboard-nav-request-count {
    position: absolute; top: 3px; right: max(5px, calc(50% - 24px));
    min-width: 17px; height: 17px; padding: 1px 4px; border: 2px solid #fff;
    border-radius: 20px; background: #795cba; color: #fff; font-size: 9px; line-height: 11px;
  }
  .dashboard-shell { --dashboard-dock-clearance: calc(var(--mobile-nav-height) + 12px); --dashboard-rail-width: 0px; }
  .dashboard-shell > .sidebar.dashboard-bottom-dock { display: none; }
  .dashboard-shell .dashboard-main { margin-left: 0; width: 100%; min-width: 0; }
  .dashboard-shell .dashboard-content {
    width: 100%; min-width: 0; min-height: 100dvh; margin: 0;
    padding: max(12px, env(safe-area-inset-top)) 12px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 16px);
  }
  .dashboard-shell .business-workspace-page.business-messages-page {
    height: calc(var(--mobile-viewport-height) - var(--mobile-nav-height) - env(safe-area-inset-bottom) - 24px);
  }
  html.mobile-keyboard-open .mobile-tabbar,
  html.mobile-keyboard-open .mobile-pro-tabbar { transform: translateY(110%); opacity: 0; pointer-events: none; }
  html.mobile-keyboard-open .dashboard-shell .business-workspace-page.business-messages-page { height: calc(var(--mobile-viewport-height) - 24px); }
  .mobile-workspace-menu[open] {
    position: fixed; inset: auto 0 0; display: block;
    width: min(100%, 520px); max-width: 100%; max-height: min(88dvh, calc(var(--mobile-viewport-height) - 20px));
    margin: auto auto 0; padding: 0 18px max(18px, env(safe-area-inset-bottom));
    border: 1px solid #dce8e0; border-bottom: 0; border-radius: 26px 26px 0 0;
    background: #fff; color: var(--mobile-ink); box-shadow: 0 -16px 70px #152e2729;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  }
  .mobile-workspace-menu::backdrop { background: #132a2452; backdrop-filter: blur(4px); animation: mobile-scrim-in 180ms ease both; }
  html.mobile-navigation-open, html.mobile-navigation-open body { overflow: hidden; }
  .mobile-menu-grip { width: 34px; height: 4px; margin: 9px auto 2px; border-radius: 8px; background: #cedbd3; }
  .mobile-workspace-menu-header { position: sticky; top: -1px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; background: #fff; border-bottom: 1px solid #edf1ee; }
  .mobile-workspace-menu-header h2 { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.15; letter-spacing: -.035em; }
  .mobile-workspace-menu-header p { margin: 4px 0 0; font-size: 12px; color: #60756a; }
  .mobile-workspace-menu-header button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #e4ece7; border-radius: 50%; background: #f5f9f6; color: #2b483a; }
  .mobile-workspace-menu-header button .icon { width: 20px; height: 20px; }
  .mobile-workspace-menu .dashboard-nav-group,
  .mobile-workspace-menu .mobile-workspace-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 17px 0 0; }
  .mobile-workspace-menu .mobile-nav-group-title { display: block; grid-column: 1 / -1; padding: 0 2px 2px; color: #62766b; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
  .mobile-workspace-menu .side-link {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-width: 0; max-width: none; height: auto; min-height: 51px; padding: 11px;
    border: 1px solid #e6eee8; border-radius: 13px; background: #f8fbf9; color: #2f4b3d;
    font-size: 13px; font-weight: 550; line-height: 1.3; text-decoration: none;
  }
  .mobile-workspace-menu .side-link .icon { width: 20px; height: 20px; flex-shrink: 0; }
  .mobile-workspace-menu .side-link-label { display: block; max-width: 100%; opacity: 1; white-space: normal; transform: none; }
  .mobile-workspace-menu .side-link.active { color: #1d5c47; background: #e6f5ec; border-color: #bcdcca; }
  .mobile-workspace-menu .dashboard-nav-request-count { margin-left: auto; flex-shrink: 0; min-width: 18px; padding: 2px 4px; border-radius: 20px; background: #7a5cb8; color: #fff; font-size: 10px; text-align: center; }
  .mobile-workspace-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5eee7; }
  .mobile-workspace-links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; min-height: 44px; padding: 8px; border-radius: 12px; color: #476354; background: #f0f6f2; font-size: 12px; text-decoration: none; }
  .mobile-workspace-links .icon { width: 18px; height: 18px; }
  @keyframes mobile-scrim-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 350px) {
  .customer-shell .mobile-tabbar, .mobile-pro-tabbar { padding-left: 5px; padding-right: 5px; gap: 2px; }
  .mobile-pro-tabbar :is(.side-link, .mobile-more-button), .customer-shell .mobile-tabbar .nav-link { font-size: 9px; }
  .mobile-workspace-menu .side-link { font-size: 12px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-tabbar, .mobile-pro-tabbar, .mobile-tabbar .nav-link, .mobile-pro-tabbar .side-link, .mobile-more-button { transition: none !important; }
  .mobile-workspace-menu::backdrop { animation: none; }
}

@media (max-width: 760px) {
  .customer-shell .customer-footer { padding: 24px 18px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 20px); }
  .customer-shell .customer-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .customer-shell .customer-footer-column a { margin-bottom: 0; }
  body.auth-screen-mode { min-height: 100dvh; }
}

@media (max-width: 760px) {
  body.auth-screen-mode .auth-divider > span { color: #626d65; }
}

/* Customer chrome leaves more room for the content on phones. */
@media (max-width: 760px) {
  body.customer-mode { --mobile-nav-height: 60px; --mobile-header-height: 52px; }
  .customer-shell .customer-topbar { padding-inline: 12px; }
  .customer-shell .customer-topbar .customer-brand-wordmark { width: 118px; max-width: 118px; }
  .customer-mobile-header-actions a { padding-inline: 10px; border-radius: 11px; font-size: 12px; }
  .customer-shell .mobile-tabbar { padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); gap: 2px; border-radius: 0; box-shadow: 0 -2px 12px #213e2808; }
  .customer-shell .mobile-tabbar .nav-link { min-height: 44px; padding: 3px 1px; gap: 3px; border-radius: 10px; font-size: 10px; }
  .customer-shell .mobile-tabbar .nav-link .icon { width: 20px; height: 20px; }
}