/* ═══════════════════════════════════════════
   CSS VARIABLES & RESET
   ═══════════════════════════════════════════ */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --nav-bg: #0f1629;
  --nav-hover: #1a2342;
  --nav-active: #2563eb;
  --ink: #1a1a2e;
  --ink2: #4a5568;
  --ink3: #6b7488; /* darkened from #8896ab for WCAG AA contrast (4.69:1 on white) */
  --green: #2563eb;
  --green-light: #2563eb18;
  --green-dark: #1d4ed8;
  --saffron: #f97316; /* brand accent — the "AI", growth tick */
  --blue: #3b82f6;
  --blue-light: #3b82f618;
  --orange: #f59e0b;
  --orange-light: #f59e0b18;
  --red: #ef4444;
  --red-light: #ef444418;
  --purple: #8b5cf6;
  --purple-light: #8b5cf618;
  --border: #e8ecf1;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.1);
  --radius: 14px;
  --radius-lg: 18px;
  --glow: 0 1px 2px rgba(15,23,42,.08), 0 2px 6px rgba(37,99,235,.16); /* subtle primary lift (was a heavy candy glow) */
  --glow-lg: 0 4px 14px rgba(37,99,235,.20); /* hover */
  --font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --sidebar-w: 240px;
  --topbar-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { cursor: pointer; font-family: var(--font); border: none; outline: none; }
input, select, textarea { font-family: var(--font); outline: none; }
a { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════
   AUTH PAGES (Login / Signup)
   ═══════════════════════════════════════════ */
.auth-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: linear-gradient(135deg, #0f1629 0%, #1a2342 50%, #0f1629 100%);
  position: relative;
  overflow: hidden;
}
.auth-wrapper::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, #2563eb20 0%, transparent 70%);
  top: -200px; right: -100px;
  pointer-events: none;
}
.auth-wrapper::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, #3b82f615 0%, transparent 70%);
  bottom: -100px; left: -100px;
  pointer-events: none;
}
.auth-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  color: #fff;
  position: relative;
  z-index: 1;
}
.auth-left h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.15;
  margin-bottom: 20px;
}
.auth-left h1 span { color: var(--green); }
.auth-left p {
  font-size: 17px;
  color: #8896ab;
  line-height: 1.6;
  max-width: 440px;
}
.auth-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #c0c8d8;
}
.auth-feature .dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.auth-right {
  width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  z-index: 1;
}
/* The "back to site" link on the login and signup cards. Its hover used to be an inline
   onmouseover/onmouseout pair writing style.background; a rule can do it, and gives keyboard
   users the same cue. */
.auth-home-link:hover, .auth-home-link:focus-visible { background: var(--green-light); }

.auth-card {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.auth-card .logo {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.auth-card .logo span { color: var(--saffron); }
.logo-mark { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.auth-card .subtitle {
  font-size: 14px;
  color: var(--ink3);
  margin-bottom: 32px;
}
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.form-group input, .form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  transition: border-color .2s;
  background: #fafbfc;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--green);
  background: #fff;
}
/* +91 phone prefix (India-only). The wrapper owns the border; the input is bare. */
.gs-phone{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface,#fff)}
.gs-phone:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
.gs-phone .gs-cc{display:flex;align-items:center;padding:0 11px;font-size:14px;font-weight:700;color:var(--ink3);background:#f1f5f9;border-right:1px solid var(--border)}
.gs-phone input{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;flex:1;min-width:0}
/* Checkboxes/radios must NOT inherit the full-width form-field sizing above —
   that stretched the broadcast/select-all checkboxes and shoved their labels
   to the far right. Specificity (class+attr+el) beats the rule above. */
.form-group input[type="checkbox"], .form-group input[type="radio"] {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: background .2s, transform .1s;
  margin-top: 8px;
  min-height: 44px; /* explicit 44px touch target (auth CTAs) */
}
.btn-primary:hover { background: var(--green-dark); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink3);
}
.auth-switch a {
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
}
.auth-error {
  background: var(--red-light);
  color: var(--red);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  display: none;
}
.auth-error.show { display: block; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--ink3);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.btn-google {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
  cursor: pointer;
}
.btn-google:hover { border-color: #4285f4; background: #f8f9ff; }
.btn-google svg { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════════ */
/* 100dvh, NOT 100vh. On mobile Chrome 100vh is the LARGE viewport -- the height the
   page has once the URL bar has collapsed -- so a shell sized to it is taller than
   what you can see while that bar is still showing. The page therefore scrolls, and a
   position:fixed bottom:0 bar is pinned to the bottom of THAT viewport: below the fold.
   Reported as "the bottom menu is missing until I scroll down", and it appears on the
   scroll because scrolling is what collapses the bar. dvh tracks the visible height.
   The 100vh line stays first as the fallback for anything without dvh. */
.dashboard { display: none; min-height: 100vh; min-height: 100dvh; }
.dashboard.active { display: flex; }
/* Pre-paint auth state (class set in <head> from localStorage): hide the login
   screen for already-signed-in users so a reload doesn't flash it. Not !important
   so showLogin()/logout's inline display:flex still wins. */
html.gs-authed #authScreen { display: none; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--nav-bg);
  height: 100vh;
  height: 100dvh;
  position: fixed;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: transform .3s;
}
.sidebar-logo {
  padding: 20px 24px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid #ffffff10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-logo span { color: var(--saffron); }
.sidebar-nav {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  color: #8896ab;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 2px;
  /* Button reset (nav-items are <button> for keyboard a11y) */
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.nav-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nav-item:hover { background: var(--nav-hover); color: #c0c8d8; }
.nav-item.active {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}
.sidebar-bottom {
  padding: 16px;
  border-top: 1px solid #ffffff10;
}
.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  /* Button reset (user-badge is a <button> for keyboard a11y) */
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  color: inherit;
}
.user-badge:hover { background: var(--nav-hover); }
.user-badge:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.user-avatar {
  width: 36px; height: 36px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.user-info { flex: 1; min-width: 0; }
.user-info .name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .plan { font-size: 11px; color: var(--green); text-transform: uppercase; letter-spacing: .5px; }

/* Main content */
.main {
  flex: 1;
  /* min-width:0 lets this flex item shrink below its content's intrinsic
     width. Without it, a wide child (e.g. the 7-column leads table) forces
     .main past the viewport on mobile — the page renders zoomed-out / with
     horizontal scroll instead of the table scrolling inside its own
     overflow-x:auto container. */
  min-width: 0;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  min-height: 100dvh;   /* see .dashboard — vh is the LARGE viewport on mobile */
}
/* Account expiry ribbon. Amber while there is time, red on the last day, dark once it
   has passed. Wraps rather than scrolls on a phone: tests/e2e/mobile-no-sideways-scroll
   fails the whole app at 320px if anything hangs past the right edge. */
.xrib { display:flex; align-items:center; gap:12px; padding:11px 16px; font-size:13.5px;
  border-bottom:1px solid var(--border); background:var(--orange-light); color:#7c4a03;
  border-bottom-color:#f59e0b40; }
.xrib-ic { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center;
  border-radius:50%; font-size:12px; font-weight:800; color:#fff; background:var(--orange); }
.xrib-txt { flex:1 1 auto; min-width:0; }
.xrib-sub { opacity:.85; }
.xrib-act { flex:0 0 auto; border:none; border-radius:8px; padding:7px 14px; font:inherit;
  font-size:13px; font-weight:700; cursor:pointer; background:var(--green); color:#fff; }
.xrib-x { flex:0 0 auto; background:none; border:none; font-size:19px; line-height:1;
  cursor:pointer; color:inherit; opacity:.5; padding:0 2px; }
.xrib-x:hover { opacity:1; }
.xrib.is-now { background:var(--red-light); color:#8f1d1d; border-bottom-color:#ef444440; }
.xrib.is-now .xrib-ic, .xrib.is-now .xrib-act { background:var(--red); }
.xrib.is-past { background:var(--nav-bg); color:#e8ecf1; border-bottom-color:var(--nav-bg); }
.xrib.is-past .xrib-ic { background:#e8ecf1; color:var(--nav-bg); }
.xrib.is-past .xrib-act { background:var(--saffron); }
@media (max-width: 640px) {
  .xrib { flex-wrap:wrap; padding:10px 12px; }
  .xrib-txt { flex:1 1 100%; order:2; }
  .xrib-act { order:3; width:100%; margin-top:8px; }
  .xrib-x { order:1; margin-left:auto; }
}


.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;          /* let the title shrink + ellipsis instead of wrapping */
}
/* GrowStart AI mark in the top bar — hidden on desktop (the sidebar shows it),
   shown on mobile where the sidebar is off-canvas (see the mobile @media). */
.topbar-logo { display: none; height: 30px; width: auto; flex: none; }
.topbar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  /* Never wrap onto a second line: the bar has a fixed height, so a wrapped title
     breaks the whole top bar on narrow phones. Truncate instead. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;            /* the controls keep their size; the title absorbs the squeeze */
}
.btn-upgrade {
  padding: 8px 18px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  transition: background .2s;
}
.btn-upgrade:hover { background: var(--green-dark); }

/* Tab content */
.tab-content {
  padding: 28px;
}
.tab-page { display: none; }
.tab-page.active { display: block; animation: fadeIn .25s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.stat-card .stat-label {
  font-size: 13px;
  color: var(--ink3);
  font-weight: 500;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════
   GENERIC COMPONENTS
   ═══════════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
  /* 44px min touch target (iOS HIG / WCAG 2.5.5). inline-flex centers
     content + spinners without changing the inline flow. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Primary = brand blue. Saffron is reserved for the single top CTA per screen. */
.btn-green { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.20); }
.btn-green:hover { background: var(--green-dark); box-shadow: 0 5px 14px rgba(37,99,235,.28); }
/* Interaction polish for the module-specific action buttons (they lacked any
   hover/press feedback). Colours stay per-module; this just adds the "alive" feel. */
.nh-btn,.nh-sbtn,.nh-import,.nh-act,.lp-add,.lp-btn,.cp-btn,.cp-sheet-btn,.gx-sheet-btn,.gx-fsync,.gx-fsave,.gx-pull,.cats-save,.cats-del,.wc-send{ transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease; }
.nh-btn:active,.nh-sbtn:active,.nh-import:active,.nh-act:active,.lp-add:active,.lp-btn:active,.cp-btn:active,.cp-sheet-btn:active,.gx-sheet-btn:active,.gx-fsync:active,.gx-fsave:active,.gx-pull:active,.cats-save:active,.cats-del:active,.wc-send:active{ transform: translateY(1px); }
.nh-btn:hover,.nh-sbtn:hover,.nh-import:hover,.lp-add:hover,.lp-btn:hover,.cp-btn:hover,.cp-sheet-btn:hover,.gx-sheet-btn:hover,.gx-fsync:hover,.gx-fsave:hover,.gx-pull:hover,.cats-save:hover,.wc-send:hover{ filter: brightness(.97); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--ink2); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
/* Tertiary + destructive button variants (design system) */
.btn-ghost { background: transparent; color: var(--ink2); }
.btn-ghost:hover { background: var(--border); color: var(--ink); }
.btn-danger { background: transparent; color: var(--red); border: 1.5px solid #f3c6cf; }
/* Compact action-button rows — content-width buttons that wrap (no full-width
   stretch on narrow screens). Used by the website/card action toolbars. */
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.btn-danger:hover { background: var(--red-light); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1eb858; }
.btn-sm { padding: 6px 12px; font-size: 13px; min-height: 36px; }
/* Segmented control — for equal options (image source, view toggles, …) */
.seg { display: flex; background: #eef1f6; border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { flex: 1; border: none; background: transparent; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--ink2); padding: 9px 6px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.seg-btn.on { background: #fff; color: var(--green); box-shadow: var(--shadow-sm); }
.seg-btn .ic { width: 15px; height: 15px; }

/* Toast */
/* bottom/z-index clear the Help FAB (#copilotFab: bottom:20px; z-index:1200) so
   a toast never hides behind it — the FAB used to render on top of the toast. */
.toast {
  position: fixed;
  bottom: 88px;
  right: 24px;
  background: var(--ink);
  color: #fff;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: all .3s;
  z-index: 1300;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-new { background: var(--blue-light); color: var(--blue); }
.badge-contacted { background: var(--orange-light); color: var(--orange); }
.badge-interested { background: var(--purple-light); color: var(--purple); }
.badge-converted { background: var(--green-light); color: var(--green); }
.badge-lost { background: var(--red-light); color: var(--red); }
.badge-hot { background: var(--red-light); color: var(--red); }
.badge-warm { background: var(--orange-light); color: var(--orange); }
.badge-cold { background: var(--blue-light); color: var(--blue); }
.badge-upcoming { background: var(--blue-light); color: var(--blue); }
.badge-done { background: var(--green-light); color: var(--green); }
.badge-cancelled { background: var(--red-light); color: var(--red); }
/* AI-3: a booking whose slot has passed is reported as status 'past' by the
   API. Muted neutral pill so it reads as elapsed/inactive, distinct from the
   blue "upcoming". --ink2 on --border keeps WCAG AA contrast. */
.badge-past { background: var(--border); color: var(--ink2); }

/* Bookings — full-width aligned list (mirrors Archived) */
.bk-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.bk-search { flex:1; min-width:200px; max-width:360px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:8px 12px; }
.bk-search input { border:0; outline:0; flex:1; font-size:13.5px; font-family:inherit; background:none; color:#0f172a; min-width:0; }
.bk-bulk { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.bk-bulk button { border:0; border-radius:8px; padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.bk-bulk .b-done { background:#dcfce7; color:#166534; } .bk-bulk .b-cancel { background:#f1f5f9; color:#475569; } .bk-bulk .b-del { background:#fef2f2; color:#b91c1c; } .bk-bulk .b-clr { background:#f1f5f9; color:#475569; }
.bk-list { background:#fff; border:1px solid #e9edf2; border-radius:14px; overflow:hidden; }
.bk-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #f1f5f9; }
.bk-row:last-child { border-bottom:0; }
.bk-row.sel { background:#eff4ff; }
.bk-sel { width:18px; height:18px; flex:none; cursor:pointer; accent-color:#2563eb; }
.bk-av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; }
.bk-id { flex:1; min-width:0; }
.bk-name { font-weight:700; font-size:14px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-name .badge { margin-left:3px; vertical-align:1px; }
.bk-meta { font-size:12px; color:#94a3b8; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-when { width:120px; flex:none; }
.bk-when .d { font-size:12.5px; font-weight:700; color:#0f172a; display:flex; align-items:center; gap:5px; }
.bk-when .t { font-size:11.5px; color:#94a3b8; margin-top:3px; }
.bk-when .ic { width:14px; height:14px; color:#94a3b8; flex:none; }
.bk-act { width:246px; flex:none; display:flex; gap:7px; }
.bk-act button { border:0; border-radius:9px; padding:8px 10px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.bk-act .ic { width:15px; height:15px; }
.bk-act .done { background:#dcfce7; color:#166534; }
.bk-act .cancel { border:1px solid #cbd5e1; background:#fff; color:#334155; }
.bk-act .wa { border:1px solid #25d36655; background:#fff; color:#128c3f; }
.bk-act .del { background:#fef2f2; color:#b91c1c; }
.bk-act button:disabled { opacity:.45; cursor:default; }
@media(max-width:720px){ .bk-row{flex-wrap:wrap;gap:10px} .bk-when{flex:0 0 100%;order:5} .bk-act{flex:0 0 100%;width:auto;order:6} .bk-act .done,.bk-act .cancel{flex:1} }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* A CONFIRMATION HAS TO SIT ABOVE WHATEVER ASKED FOR IT.

   .cats-sheet and .nh-sheet are z-index 1210 and the Copilot panel is 1200, so at
   the shared .modal-overlay z-index of 200 a confirm opened from inside a sheet
   rendered BEHIND it: the buttons could not be clicked and the action simply never
   happened. The browser dialog always drew on top, so nothing exposed this until the
   in-app dialog replaced it -- Playwright found it as a product delete that fired
   no request.

   Only these two are lifted. The rest are page-level modals that are not opened
   from on top of a sheet, and raising all nine would reorder stacking nobody has
   asked to change. */
#confirmModal,
#promptModal { z-index: 2000; }
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: fadeIn .2s ease;
}
.modal h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.modal .form-group { margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Friendly WhatsApp template builder (#waTemplateModal): a readable message box
   (the base .form-group rule styles input/select but NOT textarea) + tidy
   personalization chips. Uses theme tokens so it also holds up in dark mode. */
#waTemplateModal #waNewTplBody {
  width: 100%; min-height: 150px; padding: 13px 15px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: var(--font); font-size: 15px; line-height: 1.65;
  color: var(--ink); background: #fafbfc; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
#waTemplateModal #waNewTplBody:focus { border-color: var(--green); background: var(--surface); box-shadow: 0 0 0 3px var(--green-light); }
#waTemplateModal #waNewTplBody::placeholder { color: var(--ink3); }
#waTemplateModal .tpl-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
#waTemplateModal .tpl-chips .tpl-lead { font-size: 12px; color: var(--ink3); }
#waTemplateModal .tpl-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink2);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; cursor: pointer; min-height: 32px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: border-color .15s, color .15s, background .15s;
}
#waTemplateModal .tpl-chip:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }
#waTemplateModal .tpl-ai {
  border: 1.5px solid var(--green); background: var(--green-light); color: var(--green);
  font-family: var(--font); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s;
}
#waTemplateModal .tpl-ai:hover { background: #2563eb26; }
#waTemplateModal .tpl-ai:disabled { opacity: .6; cursor: default; }
#waTemplateModal .tpl-ai .ic { width: 15px; height: 15px; }
#waTemplateModal .tpl-chip .ic { width: 13px; height: 13px; }
#waTemplateModal .tpl-hint { font-size: 11.5px; line-height: 1.5; color: var(--ink3); margin-top: 7px; }
/* Un-scoped from #waTemplateModal so the campaign Edit sheet renders a message
   through the SAME component. A second bubble that drifts from the first is how
   two screens end up disagreeing about what a customer will see. */
.tpl-preview { background: #e5ddd5; border-radius: 12px; padding: 16px 14px; }
#waTemplateModal .tpl-imgtoggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 12px 13px; border: 1.5px solid var(--border); border-radius: 10px; background: #fafbfc; transition: border-color .15s; }
#waTemplateModal .tpl-imgtoggle:hover { border-color: var(--green); }
#waTemplateModal .tpl-imgtoggle input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; border-radius: 4px; accent-color: var(--green); flex: none; cursor: pointer; }
#waTemplateModal .tpl-imgtoggle-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
#waTemplateModal .tpl-imgtoggle-s { display: block; font-size: 11.5px; line-height: 1.45; color: var(--ink3); margin-top: 2px; }
.tpl-bubble { background: #fff; border-radius: 8px; max-width: min(88%, 420px); box-shadow: 0 1px .5px rgba(0,0,0,.13); overflow: hidden; }
  /* Body text for a bubble rendered outside the template modal, which styles its
     own via #waTplPreview. */
  .tpl-bubble-body { padding: 9px 12px 4px; font-size: 13.5px; line-height: 1.5; color: #111b21; white-space: pre-wrap; word-break: break-word; }
  .tpl-bubble-time { padding: 0 12px 7px; font-size: 10.5px; color: #667781; text-align: right; }
.tpl-bubble-shot { width: calc(100% + 24px); max-width: none; border-radius: 10px 10px 0 0; margin: -10px -12px 8px; display: block; }
.tpl-bubble-img { display: none; align-items: center; gap: 11px; padding: 13px 14px; background: linear-gradient(135deg, #fef0dd, #e7edfb); border-bottom: 1px solid var(--border); }
.tpl-bubble-img .ic { width: 22px; height: 22px; color: var(--saffron); flex: none; }
.tpl-bubble-img-t { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.tpl-bubble-img-s { font-size: 11px; color: var(--ink3); line-height: 1.35; margin-top: 1px; }
#waTemplateModal #waTplPreview { padding: 9px 12px; font-size: 13.5px; line-height: 1.5; color: #111b21; white-space: pre-wrap; word-break: break-word; }
#waTemplateModal .tpl-sublab { font-size: 12px; line-height: 1.5; color: var(--ink3); margin: -2px 0 10px; }
#waTemplateModal .tpl-gen { width: 100%; justify-content: center; padding: 12px 18px; font-size: 14px; margin-bottom: 15px; }
/* NOT scoped to #waTemplateModal. It was, and the broadcast preview reused the class:
   outside the modal the rule did not apply, so a 1024px render came through at its
   natural size and dragged the bubble across the page. A shared class needs a shared
   rule. max-width belongs here too, because width:100% alone does not stop an image
   from overflowing a flex parent on a narrow screen. */
.tpl-bubble-photo { display: block; width: 100%; max-width: 100%; height: auto; max-height: 260px; object-fit: cover; object-position: center; }
/* WhatsApp Templates list — polished cards + friendly names */
.tpl-card { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; background: var(--surface); transition: box-shadow .15s, border-color .15s; }
.tpl-card:hover { box-shadow: var(--shadow-md); border-color: #d7dde6; }
.tpl-card-top { display: flex; align-items: center; gap: 8px; }
.tpl-card-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tpl-spacer { flex: 1; }
.tpl-card-sub { font-size: 11px; color: var(--ink3); margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.tpl-badge { font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.tpl-badge-img { color: var(--green); background: var(--green-light); }
.tpl-del { border: 1px solid var(--border); background: transparent; color: var(--ink3); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer; font-family: var(--font); flex: none; }
.tpl-del:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.tpl-card-body { margin-top: 8px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.tpl-card-rej { margin-top: 6px; font-size: 12px; color: var(--red); }
.tpl-showall { width: 100%; margin-top: 4px; padding: 11px; border: 1.5px dashed var(--border); background: transparent; border-radius: 10px; color: var(--ink2); font-weight: 600; font-size: 13px; font-family: var(--font); cursor: pointer; }
.tpl-showall:hover { border-color: var(--green); color: var(--green); }
/* Broadcast per-variable "Personalize" boxes */
.wa-var-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.wa-var-row:last-child { border-bottom: 0; }
.wa-var-label { flex: 0 0 140px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.wa-var-auto { font-size: 12px; color: var(--green); background: var(--green-light); padding: 4px 11px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.wa-var-input { flex: 1; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13.5px; background: #fafbfc; font-family: var(--font); color: var(--ink); }
.wa-var-input:focus { border-color: var(--green); background: var(--surface); outline: none; }
/* Broadcast send card — stepped, cleaner layout */
#waBroadcastCard .wa-step { margin-bottom: 20px; }
#waBroadcastCard .wa-step:last-of-type { margin-bottom: 0; }
.wa-step-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wa-step-n { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; }
.wa-step-t { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink2); }
.wa-lang-chip { flex: none; padding: 0 15px; border-radius: 10px; background: var(--green-light); color: var(--green); font-size: 12.5px; font-weight: 800; letter-spacing: .4px; display: flex; align-items: center; }
.wa-search { width: 100%; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13px; background: #fafbfc; font-family: var(--font); color: var(--ink); margin-bottom: 8px; }
.wa-search:focus { border-color: var(--green); outline: none; background: var(--surface); }
.wa-clist { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; font-size: 13px; background: var(--surface); }
#waVarsBoxes { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#waVarsBoxes .wa-var-row { padding: 11px 13px; }
.wa-var-note { padding: 14px; font-size: 12.5px; color: var(--ink3); background: #fafbfc; }
.wa-var-note b { color: var(--ink2); }
/* Failure explainer — the plain-language reason + fix steps from the error catalog */
.wa-err { margin-top: 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 10px; padding: 12px 14px; }
.wa-err-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #b91c1c; }
.wa-err-h .ic { width: 16px; height: 16px; flex: none; }
.wa-err-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 999px; padding: 2px 8px; }
.wa-err-why { font-size: 12.5px; line-height: 1.55; color: var(--ink2); margin-top: 7px; }
.wa-err-fix { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.wa-err-fix li { margin-bottom: 3px; }
@media (prefers-color-scheme: dark) { .wa-err { background: #7f1d1d26; border-color: #b91c1c66; } }

/* Empty state */
.empty-state { text-align: center; padding: 50px 20px; color: var(--ink3); }
.empty-state .es-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state h4 { font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.empty-state p { font-size: 14px; }

/* Chat bubbles */
.chat-msg { display: flex; }
.chat-msg.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}
.bot-bubble {
  background: #f0f2f5;
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.user-bubble {
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
@keyframes typingDot { 0%, 80% { opacity: .3; } 40% { opacity: 1; } }

/* Analytics bar chart */
.ga-bar {
  flex: 1;
  min-width: 12px;
  background: var(--green-light);
  border-radius: 4px 4px 0 0;
  transition: height .3s, background .15s;
  position: relative;
  cursor: pointer;
}
.ga-bar:hover { background: var(--green); }
.ga-bar:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  margin-bottom: 4px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 4px solid var(--green); }
.toast.error { border-left: 4px solid var(--red); }
/* Neither a win nor a failure: the action half-landed and the user must wait. */
.toast.info { border-left: 4px solid var(--orange); }

/* Loading spinner */
/* Branded loader: the GrowStart AI logo-mark on a small white chip (so the
   two-tone logo stays visible on coloured buttons too), gently pulsing.
   Replaces the old generic ring spinner everywhere <span class="spinner">
   is used. */
.spinner {
  width: 20px; height: 20px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  background: #fff center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M44.6 47.9A20 20 0 1 1 44.6 16.1' stroke='%232563eb' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M45 32H33' stroke='%232563eb' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M47 6 57 17.5 51.5 17.5 51.5 27a3 3 0 0 1-3 3h-3a3 3 0 0 1-3-3L42.5 17.5 37 17.5Z' fill='%23f97316'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
  animation: gs-pulse 1.1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gs-pulse { 0%, 100% { transform: scale(.78); opacity: .65 } 50% { transform: scale(1); opacity: 1 } }

/* Placeholder for unbuilt tabs */

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .auth-wrapper { flex-direction: column; }
  .auth-left { padding: 40px 24px; text-align: center; }
  .auth-left h1 { font-size: 32px; }
  .auth-left p { margin: 0 auto; }
  /* Keep the value-prop visible on phones (signup is most common on mobile);
     just tighten spacing + center to match the centered auth-left. */
  .auth-features { margin-top: 24px; gap: 10px; align-items: center; }
  .auth-feature { font-size: 14px; }
  .auth-right { width: 100%; padding: 0 16px 40px; }
  .auth-card { padding: 28px; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .tab-content { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .topbar-title { font-size: 16px; }
  /* The right side carries four controls (Ask AI, Upgrade, bell, gear). Tighten the
     bar's padding + gap on phones so the title keeps enough room to stay on one line. */
  .topbar { padding: 0 14px; }
  .topbar-right { gap: 10px; }
  .topbar-logo { display: block; }   /* sidebar is off-canvas on mobile — show the logo in the top bar */
  /* GS-052: iOS Safari auto-zooms when focusing a form control with
     font-size < 16px. Several inputs/selects/textareas use 13-15px (incl.
     inline styles), so force 16px on phones. !important is required to beat
     the inline font-size declarations. Desktop is unaffected (no auto-zoom). */
  input, select, textarea { font-size: 16px !important; }
}
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 45;
}
.overlay.show { display: block; }

/* Global keyboard-focus ring. :focus-visible only shows for keyboard/AT
   navigation, not mouse clicks, so it doesn't add visual noise for pointer
   users while giving keyboard users a clear focus indicator everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* GS-139: skip-to-content link — off-screen until keyboard-focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--green);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Hide all PWA install UI when already running as an installed app. */
@media (display-mode: standalone) {
  #installBanner, #installAppCard { display: none !important; }
}

/* ════════════ Redesigned navigation (rail + sub-tabs + bottom nav) ════════════ */
.navlabel { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: #5b677e; padding: 14px 18px 6px; text-transform: uppercase; }
.sidebar-nav { padding: 6px 12px; }
.rail-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: 11px; border: none; background: none; color: #aab4c8; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left; margin-bottom: 3px; transition: all .15s; }
.rail-item:hover { background: var(--nav-hover, #1a2342); color: #fff; }
.rail-item.active { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.4); }
.rail-item .nav-svg { width: 20px; height: 20px; flex-shrink: 0; }

/* overflow-y:hidden because overflow-x:auto silently promotes overflow-y to
   auto, and the active tab's border-bottom + margin-bottom:-1px makes the strip
   1px taller than its box → a phantom vertical scrollbar. Hidden clips only that
   1px overlap (the underline still shows), not the tabs. */
.subtabs { display: none; background: #fff; border-bottom: 1px solid var(--border); padding: 0 22px; gap: 2px; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; }
.subtabs.show { display: flex; }
.subtab { padding: 12px 16px; border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: all .15s; }
.subtab:hover { color: var(--ink2); }
.subtab.active { color: var(--green); border-bottom-color: var(--green); }
/* A tab can hold several .subpanel sections; only the active sub-tab's shows. */
.subpanel { display: none; }
.subpanel > .card { margin-bottom: 16px; }  /* spacing when cards relied on a grid gap */

/* ── Visual polish (cosmetic only): editorial headings, brand glow, plan card ── */
.topbar-title { font-weight: 800; letter-spacing: -.3px; }
.section-title { font-weight: 800; letter-spacing: -.2px; }
.stat-value { font-weight: 800; letter-spacing: -.5px; }
.btn-green, .btn-primary, .btn-upgrade { box-shadow: var(--glow); }
.btn-green:hover, .btn-primary:hover, .btn-upgrade:hover { box-shadow: var(--glow-lg); }
/* Sidebar plan / upsell card */
.rail-foot { margin: 0 14px 10px; padding: 12px 13px; border-radius: 13px; background: linear-gradient(135deg, #1e293b, #0f1b34); border: 1px solid rgba(255,255,255,.08); }
.rail-foot-plan { color: #fff; font-weight: 700; font-size: 13.5px; }
.rail-foot-sub { color: #9aa6bd; font-size: 11.5px; margin: 3px 0 10px; line-height: 1.4; }
.rail-foot-btn { width: 100%; border: none; border-radius: 9px; background: var(--saffron); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 10px; cursor: pointer; }
.rail-foot-btn:hover { filter: brightness(1.05); }
/* Rank: AI keyword-suggestion chips */
.rank-sugg { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.rank-sugg:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }

.askai-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: linear-gradient(135deg, var(--green), #3b82f6); color: #fff; border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,.3); }
.askai-btn:hover { filter: brightness(1.05); }

.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 62px; background: #fff; border-top: 1px solid var(--border); z-index: 46; justify-content: space-around; box-shadow: 0 -2px 14px rgba(15,23,42,.07); }
.bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: none; cursor: pointer; color: var(--ink3); font: inherit; font-size: 10.5px; font-weight: 700; flex: 1; padding: 7px 2px; position: relative; }
.bn-item .nav-svg { width: 22px; height: 22px; }
.bn-item.active { color: var(--green); }
.bn-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--green); }

/* Responsive: side rail on desktop, bottom nav on mobile */
@media (max-width: 880px) {
  .sidebar { display: none !important; }
  .overlay { display: none !important; }
  .bottom-nav { display: flex; }
  .main { margin-left: 0 !important; }
  .tab-content { padding-bottom: 84px; }
  .askai-lbl { display: none; }
  #copilotFab { display: none !important; } /* topbar "Ask AI" is the mobile entry */
  #copilotPanel { bottom: 80px; height: calc(100vh - 150px); max-height: calc(100vh - 150px); }
}
/* Both desktop and mobile use the topbar "Ask AI" button (next to Settings); the
   floating fab is retired so the desktop layout matches mobile and stays uncluttered. */
@media (min-width: 881px) {
  #copilotFab { display: none !important; }
}

  .ic{width:1.05em;height:1.05em;display:inline-flex;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .askai-ic{width:1em;height:1em;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #nh-home .nh-ti svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #nh-home .ic-g{color:var(--nh-green)} #nh-home .ic-b{color:var(--green)} #nh-home .ic-a{color:#d97706} #nh-home .ic-p{color:#7c3aed} #nh-home .ic-o{color:#ea580c}
  #nh-home .nh-qab span{color:var(--ink2)} #nh-home .nh-qab span svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #nh-home .nh-qadd-t svg,#nh-home .nh-import svg{width:1.05em;height:1.05em;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #nh-home .nh-arrow svg{width:1em;height:1em;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #nh-home .nh-search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 14px;margin-bottom:14px} #nh-home .nh-search svg{width:18px;height:18px;stroke:var(--ink3);fill:none;flex-shrink:0} #nh-home .nh-search input{border:none;outline:none;background:none;flex:1;font-size:14px;font-family:inherit;color:var(--ink)}