/* ════════════════════════════════════════════════════════════════════
   PWA + MOBILE — Brick & Click Workspace
   Loaded after the dashboard's inline <style>, so these rules win on
   the mobile breakpoint. Uses the same brand tokens (--navy-*, --o*,
   --t-*, --serif, --sans, --ease-*) declared in :root upstream.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Touch scrolling on common scroll containers ────────────────── */
.sidebar,
.content,
.rpt-doc-wrap,
.seo-kw-table,
.rev-inbox,
.leads-main,
.lead-drawer,
.email-frame-wrap,
.inv-table tbody,
.rev-composer textarea,
textarea.field-input {
  -webkit-overflow-scrolling: touch;
}

/* ─── Mobile-only chrome (hidden on desktop by default) ──────────── */
.bc-mobile-top { display: none; }
.bc-bottom-nav { display: none; }
.bc-drawer-backdrop { display: none; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  (< 768px)
   Hides the original topbar + bottom-sidebar treatment from the
   existing 880px query and replaces them with:
     • compact mobile top bar  (.bc-mobile-top)
     • slide-over sidebar drawer
     • fixed bottom nav        (.bc-bottom-nav)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* hide the desktop topbar entirely */
  .topbar { display: none !important; }

  /* let the app render as a single column */
  .app { grid-template-columns: 1fr !important; }

  /* ── sidebar → slide-over drawer ────────────────────────────── */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: min(86vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex-direction: column !important;
    padding: 24px 16px max(20px, env(safe-area-inset-bottom)) !important;
    gap: 24px !important;
    border-right: 1px solid var(--line) !important;
    border-top: none !important;
    background: var(--navy-1) !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  body.bc-drawer-open .sidebar { transform: translateX(0); }

  /* Re-show items the existing 880px query collapsed */
  .sidebar .brand,
  .sidebar .client-pill,
  .sidebar .nav-label,
  .sidebar .sidebar-footer { display: flex !important; }

  .sidebar .nav-group {
    flex-direction: column !important;
    gap: 2px !important;
    width: auto !important;
    overflow: visible !important;
  }
  .sidebar .nav-item {
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px 12px !important;
    font-size: 14.5px !important;
    flex: initial !important;
    min-height: 44px;
  }
  .sidebar .nav-item .nav-text { font-size: 14.5px !important; }
  .sidebar .nav-item .nav-badge { display: inline-flex !important; }
  .sidebar .nav-item .nav-icon { width: 18px; height: 18px; }

  /* ── main column ────────────────────────────────────────────── */
  .main {
    padding-top: 56px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .content {
    padding: 18px 16px 24px !important;
    max-width: 100% !important;
  }

  /* ── typography scale-down (Fraunces display ~20% smaller) ──── */
  .page-title           { font-size: 30px !important; line-height: 1.08 !important; }
  .placeholder-title    { font-size: 30px !important; }
  .rpt-title            { font-size: 34px !important; }
  .acct-card-title      { font-size: 19px !important; }
  .seo-section-title    { font-size: 19px !important; }

  /* hero values */
  .kpi-value                  { font-size: 36px !important; }
  .kpi.is-hero .kpi-value     { font-size: 44px !important; }
  .review-score               { font-size: 50px !important; }
  .rpt-review-score           { font-size: 48px !important; }
  .leads-rail-hero            { font-size: 44px !important; }
  .seo-da-hero .v             { font-size: 44px !important; }
  .plan-hero-name             { font-size: 26px !important; }
  .plan-hero-price .num       { font-size: 36px !important; }
  .rev-overall .score         { font-size: 52px !important; }
  .seo-traffic-hero .v        { font-size: 30px !important; }

  /* page-head stacks naturally; reduce gap */
  .page-head { gap: 18px !important; margin-bottom: 22px !important; }
  .page-sub  { font-size: 14px !important; line-height: 1.55 !important; }
  .eyebrow   { margin-bottom: 10px !important; }

  /* ── KPIs stack to single column ────────────────────────────── */
  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
  }
  .kpi { padding: 18px 18px 16px !important; }
  .kpi.is-hero::after { display: none; }
  .spark { height: 38px !important; }

  /* ── rows collapse ──────────────────────────────────────────── */
  .row-2, .row-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
  }
  .card { padding: 20px !important; }
  .card-head { margin-bottom: 18px !important; }

  /* chart smaller */
  .chart { height: 180px !important; padding: 10px 0 38px !important; }
  .chart-bar { max-width: 14px !important; }

  /* health banner stacks */
  .health {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px 18px !important;
    gap: 14px !important;
  }
  .health-signals {
    padding-left: 0 !important;
    border-left: none !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--line) !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* range tabs scrollable */
  .range-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .range-tab { white-space: nowrap; min-height: 36px; padding: 8px 16px !important; }

  /* reviews / leads / seo / settings layouts → 1 column */
  .reviews-layout,
  .leads-layout,
  .seo-layout,
  .email-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .rev-filters,
  .rev-analytics,
  .leads-rail,
  .seo-rail,
  .email-controls {
    position: static !important;
    top: auto !important;
  }
  .rev-analytics,
  .leads-rail,
  .seo-rail {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* keyword table — keep desktop columns but shrink */
  .seo-kw-table { overflow-x: auto; }
  .seo-kw-header,
  .seo-kw-row {
    grid-template-columns: 1fr 64px 70px !important;
    gap: 10px !important;
    padding: 14px 14px !important;
  }
  .seo-kw-header > :nth-child(4),
  .seo-kw-header > :nth-child(5),
  .seo-kw-row    > :nth-child(4),
  .seo-kw-row    > :nth-child(5) { display: none !important; }
  .seo-kw-rank { font-size: 22px !important; }

  /* page health cards stack */
  .seo-page-grid { grid-template-columns: 1fr !important; }

  /* leads filter scrollable */
  .leads-filterbar { gap: 8px !important; }
  .leads-filter-tabs { width: 100%; overflow-x: auto; }
  .leads-filter-tab { white-space: nowrap; }

  /* reviews controls */
  .rev-card { padding: 18px !important; }
  .rev-actions { flex-wrap: wrap; }

  /* email frame: smaller paper, no fancy padding */
  .email-frame-wrap { padding: 16px !important; }
  .email-client { max-width: 100% !important; }
  .email-content { padding: 22px !important; }
  .email-hero { padding: 18px 22px !important; }
  .email-headline { font-size: 22px !important; }

  /* placeholder pane */
  .placeholder {
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 28px !important;
  }

  /* monthly reports — shrink the printed paper to fit */
  .rpt-doc { padding: 36px 24px 28px !important; }
  .rpt-doc-wrap { padding: 4px 0 24px !important; }
  .rpt-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rpt-header-r { text-align: left; }
  .rpt-kpi-row { grid-template-columns: 1fr 1fr !important; }
  .rpt-kpi + .rpt-kpi { border-left: none !important; padding-left: 4px !important; }
  .rpt-kpi { border-bottom: 1px solid #E8E5DC; }
  .rpt-kpi:nth-last-child(-n+2) { border-bottom: none; }
  .rpt-kpi .v { font-size: 26px !important; }
  .rpt-sources { grid-template-columns: 1fr 1fr !important; }
  .rpt-reviews { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rpt-seo-grid { grid-template-columns: 1fr !important; }
  .rpt-toolbar { flex-direction: column; align-items: stretch; }

  /* billing/settings */
  .plan-hero { grid-template-columns: 1fr !important; }
  .plan-hero-l { border-right: none !important; border-bottom: 1px solid var(--line) !important; padding: 24px 22px !important; }
  .plan-hero-r { padding: 22px !important; }
  .field-grid { grid-template-columns: 1fr !important; }
  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
  .inv-table tr {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    align-items: center;
  }
  .inv-table tbody td {
    padding: 0 !important;
    border: none !important;
  }
  .inv-table tbody td:nth-child(1) { grid-column: 1 / 2; grid-row: 1; }
  .inv-table tbody td:nth-child(2) { grid-column: 2 / 3; grid-row: 1; text-align: right; }
  .inv-table tbody td:nth-child(3) { grid-column: 1 / 2; grid-row: 2; }
  .inv-table tbody td:nth-child(4) { grid-column: 2 / 3; grid-row: 2; text-align: right; }

  /* ── tap targets ───────────────────────────────────────────── */
  .t-btn,
  .rev-btn,
  .lead-action-btn,
  .seo-page-cta,
  .nav-item,
  .leads-filter-tab,
  .rev-range-tab,
  .seo-filter-tab,
  .rpt-month-tab,
  .email-toggle button,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-orange,
  .plan-hero-cta,
  .email-action-btn,
  .rev-platform-row,
  .rev-star-toggle {
    min-height: 44px;
  }

  /* the toggle switch is intentionally 22px; keep its inline metric */
  .switch { min-height: 22px; }

  /* toast moves above the bottom nav */
  .email-toast {
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    left: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Disable hover-only states on touch devices
   ════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .kpi:hover,
  .lead-card:hover,
  .lead-row:hover,
  .rev-card:hover,
  .seo-page-card:hover,
  .seo-kw-row:hover,
  .inv-table tbody tr:hover,
  .nav-item:hover,
  .client-pill:hover,
  .rev-platform-row:hover,
  .rev-star-toggle:hover,
  .acct-card:hover,
  .lead-card:hover,
  .feed-item:hover {
    background: inherit;
    border-color: var(--line);
    transform: none;
    color: inherit;
  }
  .t-btn:hover,
  .rev-btn.ghost:hover,
  .btn-ghost:hover,
  .lead-action-btn.ghost:hover,
  .seo-page-cta:hover,
  .plan-hero-cta:hover,
  .btn-primary:hover,
  .btn-orange:hover,
  .email-action-btn:hover,
  .leads-filter-tab:hover,
  .rev-range-tab:hover,
  .seo-filter-tab:hover {
    transform: none;
  }
  /* keep clear active-press feedback in lieu of hover */
  .nav-item:active,
  .t-btn:active,
  .rev-btn:active,
  .lead-action-btn:active,
  .seo-page-cta:active,
  .btn-primary:active,
  .btn-orange:active,
  .plan-hero-cta:active {
    transform: scale(0.985);
    transition: transform 0.06s ease-out;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE TOP BAR
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .bc-mobile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 14px 0 16px;
    background: rgba(10, 22, 40, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    z-index: 90;
  }
}
.bc-mt-mark {
  width: 26px; height: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5px;
  flex-shrink: 0;
}
.bc-mt-mark .b { background: var(--navy-3); border-radius: 2px; }
.bc-mt-mark .b.is-orange {
  background: linear-gradient(135deg, #F2975A 0%, #E8833A 40%, #C96820 100%);
  box-shadow: 0 1px 0 rgba(245,160,106,0.35) inset, 0 -1px 0 rgba(138,64,16,0.4) inset;
}
.bc-mt-client {
  flex: 1; min-width: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--t-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.bc-mt-hamburger {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--t-1);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s ease-out;
}
.bc-mt-hamburger svg { width: 22px; height: 22px; }
.bc-mt-hamburger:active { background: var(--navy-3); }

/* ════════════════════════════════════════════════════════════════════
   DRAWER BACKDROP
   ════════════════════════════════════════════════════════════════════ */
.bc-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 8, 18, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 150;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (max-width: 767px) {
  .bc-drawer-backdrop { display: block; }
}
body.bc-drawer-open .bc-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body.bc-drawer-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════
   BOTTOM NAV
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .bc-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(15, 30, 51, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    z-index: 95;
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
  }
}
.bc-bn-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--t-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: var(--sans);
  text-align: center;
  cursor: pointer;
  transition: color 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.bc-bn-item svg {
  width: 20px; height: 20px;
  color: var(--t-3);
  transition: color 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.bc-bn-item.is-active { color: var(--o); }
.bc-bn-item.is-active svg { color: var(--o); }
.bc-bn-item.is-active::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(135deg, #F2975A 0%, #E8833A 40%, #C96820 100%);
}
.bc-bn-item:active { background: var(--navy-3); }
.bc-bn-item span {
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   INSTALL BANNER  ("Add to Home Screen")
   ════════════════════════════════════════════════════════════════════ */
.bc-install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 180;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-1) 100%);
  border: 1px solid rgba(232, 131, 58, 0.35);
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 50px rgba(0,0,0,0.55);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease-out;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bc-install-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 480px) {
  .bc-install-banner { left: auto; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 380px; }
}
.bc-install-banner-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bc-install-banner-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 7px;
  flex-shrink: 0;
  background: var(--navy-3);
  box-shadow: 0 0 0 1px rgba(232,131,58,0.18);
}
.bc-install-banner-icon .b {
  background: rgba(122, 154, 184, 0.18);
  border-radius: 2px;
}
.bc-install-banner-icon .b.is-orange {
  background: linear-gradient(135deg, #F2975A 0%, #E8833A 40%, #C96820 100%);
  box-shadow: 0 6px 14px -4px rgba(232,131,58,0.6);
}
.bc-install-banner-body {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.bc-install-banner-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--t-1);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.bc-install-banner-title em {
  font-style: italic;
  color: var(--o);
  font-weight: 500;
}
.bc-install-banner-sub {
  font-size: 12px;
  color: var(--t-3);
  line-height: 1.45;
}
.bc-install-banner-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: none; /* close arrow is hidden — use "Not now" button instead */
}
.bc-install-banner-actions {
  display: flex;
  gap: 8px;
}
.bc-install-banner-actions .bc-btn-ghost,
.bc-install-banner-actions .bc-btn-primary {
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════════
   NOTIFICATION PERMISSION PROMPT (branded card)
   ════════════════════════════════════════════════════════════════════ */
.bc-notif-prompt {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 480px) {
  .bc-notif-prompt { align-items: center; }
}
.bc-notif-prompt.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.bc-notif-overlay {
  position: absolute; inset: 0;
  background: rgba(2, 8, 18, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bc-notif-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background:
    radial-gradient(420px 200px at 50% -10%, rgba(232,131,58,0.10), transparent 70%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy-1) 100%);
  border: 1px solid rgba(122, 154, 184, 0.22);
  border-radius: 20px;
  padding: 30px 26px 22px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 28px 70px rgba(0,0,0,0.65);
  transform: translateY(28px) scale(0.96);
  transition: transform 0.34s cubic-bezier(0.34, 1.42, 0.64, 1);
}
.bc-notif-prompt.is-visible .bc-notif-card {
  transform: translateY(0) scale(1);
}
.bc-notif-bell {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(232, 131, 58, 0.14);
  border: 1px solid rgba(232, 131, 58, 0.32);
  display: grid;
  place-items: center;
  color: var(--o);
  position: relative;
}
.bc-notif-bell::before,
.bc-notif-bell::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--o);
  opacity: 0;
  animation: bc-bell-pulse 2.6s ease-out infinite;
}
.bc-notif-bell::after { animation-delay: 1.3s; }
@keyframes bc-bell-pulse {
  0%   { transform: scale(0.85); opacity: 0.65; }
  100% { transform: scale(1.45); opacity: 0; }
}
.bc-notif-bell svg { width: 28px; height: 28px; }
.bc-notif-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--t-1);
  margin-bottom: 10px;
}
.bc-notif-title em {
  font-style: italic;
  color: var(--o);
  font-weight: 500;
}
.bc-notif-body {
  font-size: 14px;
  color: var(--t-3);
  line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 30ch;
}
.bc-notif-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   SHARED BRAND BUTTONS (banner + notif prompt + confirm toast)
   ════════════════════════════════════════════════════════════════════ */
.bc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, #F2975A 0%, #E8833A 40%, #C96820 100%);
  color: #1A0A02;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  padding: 12px 18px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--sans);
  box-shadow: 0 8px 24px -8px rgba(232, 131, 58, 0.45);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease-out;
}
.bc-btn-primary svg { width: 14px; height: 14px; }
.bc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(232, 131, 58, 0.55); }
.bc-btn-primary:active { transform: scale(0.985); }

.bc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: transparent;
  color: var(--t-2);
  font-weight: 500;
  font-size: 13.5px;
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid rgba(122, 154, 184, 0.22);
  cursor: pointer;
  min-height: 44px;
  font-family: var(--sans);
  transition: background 0.14s ease-out, border-color 0.14s ease-out, color 0.14s ease-out;
}
.bc-btn-ghost:hover { background: var(--navy-3); color: var(--t-1); border-color: rgba(122, 154, 184, 0.32); }
.bc-btn-ghost:active { transform: scale(0.985); }

/* ════════════════════════════════════════════════════════════════════
   CONFIRM TOAST (after "Turn on notifications" → granted)
   ════════════════════════════════════════════════════════════════════ */
.bc-confirm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  z-index: 250;
  background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy-2) 100%);
  border: 1px solid rgba(93, 187, 137, 0.45);
  border-radius: 999px;
  padding: 12px 18px 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--t-1);
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 50px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.34s cubic-bezier(0.34, 1.42, 0.64, 1), opacity 0.24s ease-out;
  max-width: calc(100vw - 32px);
}
.bc-confirm-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.bc-confirm-toast-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(93, 187, 137, 0.18);
  color: var(--good);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bc-confirm-toast-icon svg { width: 12px; height: 12px; }

@media (min-width: 768px) {
  .bc-confirm-toast { bottom: 32px; }
  .bc-install-banner { bottom: 32px; left: auto; right: 28px; max-width: 400px; }
}

/* Hide install banner / notif prompt when running as installed PWA */
@media (display-mode: standalone) {
  .bc-install-banner { display: none !important; }
}