/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@700&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────── */
/* Brand restyle (feat/homu-brand-theme): values match the Homu Media marketing
   site (HomePages/homumedia/src/styles/global.css). Token NAMES are unchanged so
   existing rules keep working; only the values were retuned.
   Assumptions:
   - The --ink-* scale is the app's neutral scale; it now runs from brand ink
     (#0c1719, a dark teal) through warm sand to cream/white instead of cool grey.
   - --brand-yellow keeps its (historical) name but is the brand lime.
   - Status colours (success/warning/danger/info) keep their previous hues; they
     only become tokens so pages stop hard-coding them. */
:root {
  /* Assumption: the CMS shares homumedia's palette across public and app pages.
     Keep the existing token names so every route receives the same hierarchy. */
  --homu-black:  #0c1719;
  --homu-green:  #c5e462;
  --homu-bg:     #f2f0ea;
  --homu-white:  #ffffff;
  --homu-muted:  #55605f;
  --homu-border: #dcd8cc;
  --font-inter:  'Poppins', sans-serif;
  --brand-yellow: #c5e462;
  --brand-yellow-soft: rgba(197, 228, 98, 0.18);
  --brand-yellow-dim: rgba(197, 228, 98, 0.10);
  --brand-yellow-hover: #a8cb3a;

  --ink-900: #0c1719;
  --ink-800: #1d2a2c;
  --ink-700: #1d2a2c;
  --ink-600: #55605f;
  --ink-500: #55605f;
  --ink-400: #55605f;
  --ink-300: #a5ada3;
  --ink-200: #dcd8cc;
  --ink-150: #dcd8cc;
  --ink-100: #e7e3d8;
  --ink-50:  #f2f0ea;
  --ink-0:   #ffffff;

  /* ── Surfaces ── */
  --page-bg: #f2f0ea;       /* cream page background */
  --surface: #ffffff;       /* cards, panels, modals sit on the cream page */
  --surface-muted: #f8f7f3; /* subtle fill inside a white card (inputs, rows) */
  --chat-bg: #e9e2d6;       /* WhatsApp-style chat wallpaper */

  /* ── Status (same hues as before, now tokenised) ── */
  --success-fg: #15803d;
  --success-bg: #dcfce7;
  --warning-fg: #92400e;
  --warning-bg: #fef3c7;
  --danger-fg:  #c0392b;
  --danger-bg:  #fee2e2;
  --info-fg:    #1d4ed8;
  --info-bg:    #dbeafe;
  --whatsapp:   #25d366;    /* WhatsApp brand green; never restyle */

  /* ── Shape: rounder, homepage-style ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* Shadows are tinted with brand ink instead of pure black */
  --shadow-1: 0 1px 2px rgba(12,23,25,0.05), 0 1px 3px rgba(12,23,25,0.07);
  --shadow-2: 0 4px 8px rgba(12,23,25,0.06), 0 12px 24px rgba(12,23,25,0.06);
  --shadow-panel: 0 12px 32px -8px rgba(12,23,25,0.22);
  --shadow-card: var(--shadow-1);
  --shadow-card-hover: 0 12px 32px -12px rgba(12,23,25,0.18);
  --shadow-msg: 0 1px 2px rgba(12,23,25,0.05), 0 1px 5px rgba(12,23,25,0.06);
  --focus-ring: 0 0 0 3px rgba(168, 203, 58, 0.55);
  --transition-fast: 0.12s ease;
  --transition-base: 0.15s ease;
  --transition-panel: 0.2s ease;

  --font-brand: 'Poppins', sans-serif;
  --font-ui:    'Poppins', sans-serif;

  /* Increased from 48px to 60px to accommodate icon+text nav items */
  --header-h: 64px;
  --sidebar-w: 320px;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

/* ─── Shared scrollbar style — apply to any scrollable container ──
   Standardizes the app's previously inconsistent per-component
   scrollbar CSS (sidebar/messages/tpl-list/panels/modals) into one
   thin, always-visible-but-quiet thumb that darkens on hover. */
.scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-150) transparent;
}
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: var(--ink-150);
  border-radius: var(--radius-pill);
  -webkit-transition: background var(--transition-fast);
  transition: background var(--transition-fast);
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

body {
  font-family: var(--font-ui);
  font-size: 18px;
  background: var(--homu-bg);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

/* Assumption: all CMS headers use homumedia's cream, lightly bordered bar. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 20px;
  /* Light card replaces the previous dark translucent bar */
  background: rgba(242, 240, 234, 0.94);
  color: var(--ink-900);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(12, 23, 25, 0.1);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.app-header h1 {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Wordmark — bold dark text on the light header */
.header-wordmark {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.header-wordmark-muted {
  color: var(--homu-muted);
  font-weight: 500;
}

/* WA status pill — kept for pages that still pass waConnected prop */
.header-wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--ink-150);
  background: var(--ink-50);
  color: var(--ink-500);
  white-space: nowrap;
}

.header-wa-pill.connected {
  border-color: rgba(197,228,98,0.55);
  background: rgba(197,228,98,0.10);
  color: #3a6b00;
}

.header-wa-pill.disconnected {
  border-color: var(--ink-150);
  color: var(--ink-400);
}

.header-wa-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Kept for any legacy references that set .header-account */
.header-account {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-signout {
  font-size: 14px;
  padding: 5px 10px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.header-logo-link {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-900);
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo-link svg {
  flex-shrink: 0;
}

/* Nav — left edge aligned with dashboard-shell content (same min(1180px) formula) */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  position: static;
}

/* Shared base for every nav item */
.header-nav a,
.header-nav > span,
.header-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  /* Use near-black so text reads as black on the white header */
  color: var(--ink-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

/* Explicit pointer so links never inherit the not-allowed cursor from the span rule */
.header-nav a {
  cursor: pointer;
}

.header-nav a:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}

/* Active pill — solid lime green background with dark text */
.header-nav a.active {
  background: var(--brand-yellow);
  color: var(--ink-900);
}

/* Disabled/coming-soon items rendered as <span> (direct children only) */
.header-nav > span {
  opacity: 0.45;
  cursor: not-allowed;
}

/* "Soon" pill badge shown next to disabled nav items */
.nav-coming-soon {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 16px;
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .header-nav a span,
  .header-nav > span span {
    display: none;
  }
  .header-nav a,
  .header-nav > span {
    padding: 6px 10px;
    gap: 0;
  }
}

/* ── Public header (logged-out) CTA buttons — used by PublicHeader ── */
.header-login-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--brand-yellow);
  color: var(--ink-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.header-login-link:hover {
  background: var(--brand-yellow-hover);
  box-shadow: 0 2px 8px rgba(197, 228, 98, 0.40);
}

.header-signup-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--brand-yellow);
  color: var(--ink-900);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.header-signup-btn:hover {
  background: var(--brand-yellow-hover);
  box-shadow: 0 2px 8px rgba(197, 228, 98, 0.40);
}

/* Public actions follow the reference: a plain login link, then a dark CTA. */
.header-actions > .header-signup-btn:first-child {
  background: transparent;
  color: var(--ink-900);
}

.header-actions > .header-signup-btn:last-of-type {
  background: var(--ink-900);
  color: var(--homu-bg);
}

.header-actions > .header-signup-btn:last-of-type:hover {
  background: var(--ink-800);
  box-shadow: none;
}

/* .header-link-button used by some pages for inline nav-style actions */
.header-link-button {
  color: var(--ink-700);
  background: transparent;
  border: none;
  cursor: pointer;
}

.header-link-button:hover {
  background: var(--ink-50);
  color: var(--ink-900);
  box-shadow: none;
}

.header-actions,
.connect-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sync status badge — used on inbox page */
.sync-status {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success-fg);
  padding: 4px 10px;
  border: 1px solid rgba(197, 228, 98, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(197, 228, 98, 0.12);
}

/* ── Bell notification button (right cluster) ── */
.header-bell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ink-150);
  color: var(--ink-600);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  box-shadow: none;
}

.header-bell-btn:hover {
  background: var(--ink-50);
  color: var(--ink-900);
  border-color: var(--ink-200);
  box-shadow: none;
}

/* ── Account dropdown (CSS-only hover) ── */
.header-acct-wrap {
  position: relative;
  /* Invisible padding bridges the gap to .header-dd so the mouse never
     leaves the hoverable box while crossing it (was causing the dropdown
     to close if you didn't move the mouse there fast enough). Negative
     margin cancels the layout impact. */
  padding-bottom: 8px;
  margin-bottom: -8px;
}

/* Desktop trigger shows the email username without an avatar or dropdown arrow. */
.header-acct-btn {
  display: flex;
  align-items: center;
  background: var(--brand-yellow);
  border: 1px solid var(--brand-yellow);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  cursor: pointer;
  color: var(--ink-900);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  box-shadow: none;
}

.header-acct-name {
  white-space: nowrap;
}

/* Mobile uses a non-interactive username beside the burger menu. */
.header-acct-name-mobile {
  display: none;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-yellow);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Dropdown panel — hidden by default, shown via .open class (JS) or :hover on pointer devices */
.header-dd {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 200;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-xl);
  padding: 8px;
  box-shadow: 0 8px 28px rgba(12,23,25,0.10), 0 2px 6px rgba(12,23,25,0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Small arrow pointer above the panel */
.header-dd::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 11px;
  height: 11px;
  background: var(--surface);
  border-left: 1px solid var(--ink-150);
  border-top: 1px solid var(--ink-150);
  transform: rotate(45deg);
}

/* JS-controlled open state — works on all devices including touch */
.header-acct-wrap.open .header-dd {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* CSS hover — only on true pointer devices (desktop mouse), not touch screens.
   Prevents iOS sticky-hover keeping the dropdown open after tap. */
@media (hover: hover) {
  .header-acct-wrap:hover .header-acct-btn {
    background: var(--brand-yellow-hover);
    border-color: var(--brand-yellow-hover);
    box-shadow: none;
  }

  .header-acct-wrap:hover .header-dd {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* "Signed in · name" eyebrow row */
.header-dd-head {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 6px 10px 10px;
}

/* Each menu row — shared by <a> links and <button> logout */
.header-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.header-dd-item:hover {
  background: var(--brand-yellow-soft);
  color: var(--ink-900);
  box-shadow: none;
}

.header-dd-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── FAQ nav dropdown (Guide + Feedback) — sits inline in .header-nav,
   styled like the other nav pills but opens a .header-dd-item list below it ── */
.header-faq-wrap {
  position: relative;
  /* Same gap-bridging trick as .header-acct-wrap — keeps the mouse inside
     the hoverable box while crossing to .header-faq-dd. */
  padding-bottom: 8px;
  margin-bottom: -8px;
}

.header-faq-wrap > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  color: var(--ink-900);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  box-shadow: none;
}

.header-faq-wrap > button:hover {
  background: var(--ink-50);
}

.header-faq-wrap > button.active {
  background: var(--brand-yellow);
  color: var(--ink-900);
}

.header-faq-dd {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  width: 180px;
  background: var(--surface);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-xl);
  padding: 8px;
  box-shadow: 0 8px 28px rgba(12,23,25,0.10), 0 2px 6px rgba(12,23,25,0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Override the centered navbar-link layout for the FAQ dropdown rows. */
.header-faq-dd .header-dd-item {
  justify-content: flex-start;
}

.header-faq-wrap.open .header-faq-dd {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: hover) {
  .header-faq-wrap:hover > button {
    background: var(--ink-50);
  }
  .header-faq-wrap:hover .header-faq-dd {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .header-faq-wrap > button span {
    display: none;
  }
  .header-faq-wrap > button {
    padding: 6px 10px;
    gap: 0;
  }
}

/* Disabled dropdown items — not clickable, greyed out */
.header-dd-item--disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Log out — muted red tint */
.header-dd-logout {
  justify-content: flex-start;
  color: var(--danger-fg);
  opacity: 0.75;
}

.header-dd-logout:hover {
  background: var(--danger-bg);
  color: var(--danger-fg);
  opacity: 1;
  box-shadow: none;
}

/* ─── Sync dropdown (hover-triggered, CSS-only) ──────────────── */

.sync-wrap {
  position: relative;
}

/* Chevron rotates on hover */
.sync-caret {
  font-size: 10px;
  opacity: 0.55;
  transition: transform var(--transition-fast);
  display: inline-block;
}

.sync-wrap:hover .sync-caret {
  transform: scaleY(-1);
}

/* Dropdown panel */
.sync-dd {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  width: 180px;
  background: var(--ink-900);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: 0 8px 26px rgba(12,23,25,0.40);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 0.13s ease, transform 0.13s ease;
}

.sync-dd::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 16px;
  width: 11px;
  height: 11px;
  background: var(--ink-900);
  border-left: 1.5px solid rgba(255,255,255,0.09);
  border-top: 1.5px solid rgba(255,255,255,0.09);
  transform: rotate(45deg);
}

.sync-wrap:hover .sync-dd {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Each action row inside the sync dropdown */
.sync-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.75);
  font-family: var(--font-ui);
  font-size: 14.5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  gap: 8px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sync-dd-item:hover:not(:disabled) {
  background: rgba(197,228,98,0.08);
  color: var(--brand-yellow);
  box-shadow: none;
}

.sync-dd-item:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Small result badge shown after a sync completes (e.g. "3 new") */
.sync-badge {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-yellow);
  background: rgba(197,228,98,0.10);
  border: 1px solid rgba(197,228,98,0.28);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Buttons ────────────────────────────────────────────────── */
/* Legacy lime theme only: opted out by both shells — [data-haus] (old Haus
   app shell) and [data-nudge] (NudgeShell + public pages), so Nudge surfaces
   keep their own green/white/dark buttons instead of turning lime on hover. */
button:where(:not([data-haus] *):not([data-nudge] *)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  /* Pill buttons in Poppins, as on the marketing site */
  border-radius: var(--radius-pill);
  background: var(--brand-yellow);
  color: var(--ink-900);
  font-family: var(--font-brand);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition-base), transform 0.1s ease, box-shadow var(--transition-base);
  white-space: nowrap;
}

button:where(:not([data-haus] *):not([data-nudge] *)):hover {
  background: var(--brand-yellow-hover);
  box-shadow: 0 2px 8px rgba(197, 228, 98, 0.40);
}

button:where(:not([data-haus] *):not([data-nudge] *)):active {
  transform: translateY(1px);
}

button:where(:not([data-haus] *):not([data-nudge] *)):disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.secondary-button {
  background: rgba(255,255,255,0.08);
  color: var(--ink-0);
  border: 1px solid rgba(255,255,255,0.15);
}

.secondary-button:hover {
  background: rgba(255,255,255,0.14);
  box-shadow: none;
}

/* ─── App Shell ──────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: calc(100vh - var(--header-h));
  min-height: 0;
  background: var(--page-bg);
}

/* ─── Landing Dashboard ─────────────────────────────────────── */
.dashboard-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0 42px;
}

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  /* Tighter vertical rhythm; divider replaces the large bottom gap */
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: 18px;
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-hero h2 {
  max-width: 700px;
  font-family: var(--font-brand);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  color: #1d2a2c;
}

.dashboard-hero p:not(.eyebrow) {
  margin-top: 7px;
  color: var(--ink-400);
  font-size: 17px;
}

.dashboard-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 200px;
}

/* Large numeric lead total — Syne for brand weight */
.dashboard-status strong {
  color: var(--ink-900);
  font-family: var(--font-brand);
  font-size: 53px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.dashboard-status small {
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.dashboard-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--danger-bg);
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger-fg);
  font-size: 15.5px;
  font-weight: 600;
}

.action-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.action-card {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--ink-150);
  box-shadow: var(--shadow-1);
  color: #1d2a2c;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.action-card.primary {
  background: var(--brand-yellow-soft);
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.action-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(12,23,25,0.08);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.55);
  color: var(--ink-900);
  font-size: 21.5px;
  font-weight: 800;
}

.action-card strong {
  font-family: var(--font-brand);
  font-size: 25px;
  font-weight: 700;
  color: #1d2a2c;
  letter-spacing: 0;
  line-height: 1.2;
}

.action-card small {
  color: var(--ink-500);
  font-size: 17px;
  line-height: 1.45;
  font-family: var(--font-ui);
}

.action-link {
  margin-top: auto;
  color: var(--ink-500);
  font-size: 17px;
  font-family: var(--font-ui);
}

.dashboard-data-grid {
  display: grid;
  /* Layout C: 58% campaign / 42% WA leads in row 1 — then 3-col row 2 */
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 16px;
}

/* Row 1: campaign summary (col 1) + right column wrapper (col 2) */
.campaign-summary-panel  { grid-column: 1; grid-row: 1; }
.leads-and-replies-col   { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }

/* WA leads panel — fixed size */
.leads-breakdown-panel {
  min-height: unset;
}

/* Recent Replies — fixed height, scrollable list */
.recent-replies-panel {
  min-height: unset;
  display: flex;
  flex-direction: column;
  max-height: 340px;
}

.recent-replies-panel .priority-list {
  overflow-y: auto;
  flex: 1 1;
}

/* Campaign summary panel — stretches to match the right column height via CSS grid */
.campaign-summary-panel {
  display: flex;
  flex-direction: column;
}

.campaign-summary-panel .campaign-table {
  overflow-y: auto;
  flex: 1 1;
}

/* Campaign status badge inside the enrolled campaigns table */
.dash-campaign-status {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
  background: var(--ink-100);
  color: var(--ink-500);
}
.dash-campaign-status.completed { background: var(--success-bg); color: var(--success-fg); }
.dash-campaign-status.pending   { background: var(--warning-bg); color: var(--warning-fg); }
.dash-campaign-status.failed    { background: var(--danger-bg);  color: var(--danger-fg); }

/* Leads follow-up count row — wireframe style */
.leads-followup-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.leads-followup-count {
  font-family: var(--font-brand);
  font-size: 38.5px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -0.03em;
}

.leads-followup-label {
  color: var(--ink-400);
  font-size: 15.5px;
}

/* Lower panels sit in a 3-col row */
@media (min-width: 761px) {
  .dashboard-data-grid {
    /* Allow the 3 lower panels to also be responsive */
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }

  /* Explicitly place lower panels into a 3-col sub-row using display:contents trick */
  .awareness-panel,
  .recent-replies-panel,
  .usage-panel {
    grid-column: 1 / -1;
  }
}

.summary-pill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.summary-pill-row div {
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 2px solid var(--ink-150);
}

.summary-pill-row span,
.campaign-table-head span {
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.summary-pill-row strong {
  display: block;
  margin-top: 5px;
  font-family: var(--font-brand);
  font-size: 33.5px;
  font-weight: 700;
  color: #1d2a2c;
}

.campaign-table {
  display: grid;
  gap: 2px;
  margin-top: 16px;
}

.campaign-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 70px;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
}

.campaign-table > div:not(.campaign-table-head) {
  background: var(--surface-muted);
  color: var(--ink-600);
  font-size: 15.5px;
}

.campaign-table strong {
  color: var(--ink-900);
}

.lead-breakdown {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.lead-pie {
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 18px var(--ink-0), var(--shadow-1);
}

.lead-pie span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-900);
  font-family: var(--font-brand);
  font-size: 29px;
  font-weight: 800;
}

.lead-legend {
  display: grid;
  gap: 9px;
}

.lead-legend div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--ink-600);
  font-size: 15.5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.hot { background: var(--success-fg); }
.legend-dot.warm { background: var(--brand-yellow); }
.legend-dot.cold { background: var(--info-fg); }
.legend-dot.unclassified { background: var(--ink-200); }

.dashboard-empty-card {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 34px;
  border: 1px dashed var(--ink-200);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: center;
}

.empty-plus {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--brand-yellow-soft);
  color: var(--ink-900);
  font-size: 33.5px;
  font-weight: 800;
}

.dashboard-empty-card h3 {
  font-family: var(--font-brand);
  font-size: 24px;
  color: var(--ink-900);
}

.dashboard-empty-card p {
  max-width: 420px;
  color: var(--ink-400);
  line-height: 1.5;
}

.primary-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--brand-yellow);
  color: var(--ink-900);
  font-weight: 800;
  text-decoration: none;
}

.metric-grid {
  display: grid;
  /* First card (Total Conversations) is 1.5× wider — anchors the strip visually */
  grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.metric-card,
.dashboard-panel {
  background: var(--surface);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.metric-card {
  min-height: 160px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* ::before accent bar needs a stacking context */
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  /* Hover lift needs a transition on transform and shadow */
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Thin top accent bar — temperature color at a glance */
.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ink-200);
  border-radius: 10px 10px 0 0;
}

.metric-card span {
  color: var(--ink-400);
  /* Instrument Sans reads better than Syne at small uppercase sizes */
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.metric-card strong {
  color: var(--ink-900);
  /* Instrument Sans has more open vertical metrics than Syne for numerals */
  font-family: var(--font-brand);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.metric-card small {
  color: var(--ink-400);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Assumption: temperature border tints keep their subtle opacity while their
   hues follow the matching semantic status tokens. */
.metric-card.hot {
  border-color: color-mix(in srgb, var(--success-fg) 22%, transparent);
}
.metric-card.hot::before     { background: var(--success-fg); }

.metric-card.warm {
  border-color: color-mix(in srgb, var(--warning-fg) 40%, transparent);
}
.metric-card.warm::before    { background: var(--brand-yellow); }

.metric-card.cold {
  border-color: color-mix(in srgb, var(--info-fg) 22%, transparent);
}
.metric-card.cold::before    { background: var(--info-fg); }

.metric-card.unclassified,
.metric-card.follow-up {
  border-color: color-mix(in srgb, var(--ink-400) 22%, transparent);
}
.metric-card.follow-up::before { background: var(--ink-400); }

.dashboard-grid {
  display: grid;
  /* 3 equal columns: Awareness | Recent Replies | Free Usage — Campaign spans all 3 below */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.dashboard-panel {
  min-height: 238px;
  padding: 22px 24px;
  border-radius: var(--radius-xl);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-heading h3 {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 700;
  color: #1d2a2c;
  letter-spacing: 0;
}

.panel-heading span,
.panel-heading a {
  color: var(--ink-400);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}

.panel-heading a:hover {
  color: var(--ink-900);
}

.awareness-list,
.usage-list {
  display: grid;
  gap: 10px;
}

.awareness-list > div,
.usage-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--ink-50);
}

.awareness-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1;
}

.awareness-list strong,
.usage-list strong,
.priority-list strong {
  color: var(--ink-900);
  font-size: 15.5px;
}

.awareness-count {
  min-width: 34px;
  text-align: right;
}

.awareness-status {
  min-width: 118px;
  text-align: right;
}

.awareness-list span,
.usage-list span,
.priority-list span,
.priority-list time,
.panel-copy,
.panel-empty,
.panel-note {
  color: var(--ink-400);
  font-size: 15px;
  line-height: 1.45;
}

.panel-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-100);
}

.priority-list {
  display: grid;
  gap: 10px;
  list-style: none;
}

.priority-list li {
  display: flex;
  align-items: center;
  /* avatar | body (flex: 1) | meta */
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ink-100);
}

.priority-list li:last-child {
  border-bottom: 0;
}

/* Body grows to fill the space between avatar and meta */
.priority-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1;
}

.priority-body strong,
.priority-body span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-list time {
  flex-shrink: 0;
  text-align: right;
}

.priority-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  flex-shrink: 0;
}

.lead-chip {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.lead-chip.hot {
  background: var(--success-bg);
  color: var(--success-fg);
}

.lead-chip.warm {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

.lead-chip.cold {
  background: var(--info-bg);
  color: var(--info-fg);
}

.lead-chip.unclassified {
  background: var(--ink-100);
  color: var(--ink-400);
}

.lead-chip.informed {
  background: var(--success-bg);
  color: var(--success-fg);
}

.lead-chip.ignorant {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.lead-chip.middle_ground {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

.lead-chip.blind {
  background: var(--info-bg);
  color: var(--info-fg);
}

.panel-copy {
  max-width: 430px;
  margin-bottom: 18px;
}

/* AI quota progress bar that lives below the usage list */
.ai-usage-bar {
  height: 6px;
  background: var(--ink-100);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
}

.ai-usage-fill {
  height: 100%;
  background: var(--brand-yellow);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.campaign-panel {
  grid-column: span 3;
}

.angle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.angle-list span {
  padding: 7px 10px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  color: var(--ink-600);
  font-size: 14.5px;
  font-weight: 700;
}

/* ─── Settings ───────────────────────────────────────────────── */
.settings-shell {
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.settings-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 28px;
}

.settings-hero h2 {
  font-family: var(--font-brand);
  font-size: 41px;
  line-height: 1.08;
  color: var(--ink-900);
}

.settings-status {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 220px;
}

.settings-status span {
  color: var(--ink-400);
  font-size: 14.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.settings-status strong {
  color: var(--ink-900);
  font-size: 19px;
  text-align: right;
}

.settings-success {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--success-fg) 24%, transparent);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--success-fg);
  font-size: 15.5px;
  font-weight: 700;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
  padding: 24px;
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.settings-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.settings-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.settings-summary div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.settings-summary span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  text-transform: uppercase;
}

.settings-summary strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-field span {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-600);
}

.settings-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: 17px;
  outline: none;
  transition: all 0.2s ease;
}

.settings-field input:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(197,228,98,0.12);
}

.settings-clear-button {
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 14.5px;
  background: var(--ink-50);
  color: var(--ink-600);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-pill);
}

.settings-clear-button:hover {
  background: var(--ink-100);
  color: var(--ink-800);
}

.settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.secondary-settings-button {
  background: var(--ink-50);
  color: var(--ink-600);
  border: 1.5px solid var(--ink-100);
}

.secondary-settings-button:hover {
  background: var(--ink-100);
  color: var(--ink-800);
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  min-height: 0;
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--ink-150);
}

.sidebar h2 {
  padding: 20px 18px 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ─── Panels ─────────────────────────────────────────────────── */
.setup-panel,
.accounts-panel {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink-100);
}

.setup-panel p,
.empty-copy {
  margin: 0 18px 14px;
  color: var(--ink-400);
  font-size: 15.5px;
  line-height: 1.5;
}

.check-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  margin: 0 18px 8px;
  color: var(--ink-600);
  font-size: 15px;
  line-height: 1.4;
}

.check-row input {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  accent-color: var(--brand-yellow);
}

.setup-status {
  margin: 10px 18px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brand-yellow) 40%, transparent);
  border-radius: var(--radius-md);
  background: var(--brand-yellow-dim);
  color: var(--ink-800);
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 500;
}

/* ─── Account List ───────────────────────────────────────────── */
.account-list {
  list-style: none;
  padding: 4px 0;
}

.account-list li {
  padding: 10px 18px;
  border-top: 1px solid var(--ink-50);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.12s;
}

.account-list li:hover {
  background: var(--ink-50);
}

.account-phone {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-800);
  overflow-wrap: anywhere;
  letter-spacing: 0.01em;
}

.conv-meta {
  font-size: 14px;
  color: var(--ink-400);
  letter-spacing: 0.01em;
}

/* ─── Conversation List ──────────────────────────────────────── */
.conversation-list {
  list-style: none;
  padding: 4px 0;
}

.conversation-list li {
  padding: 12px 18px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}

.conversation-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: background 0.15s ease;
}

.conversation-list li:hover {
  background: var(--ink-50);
}

.conversation-list li:hover::before {
  background: var(--ink-200);
}

.conversation-list li.active {
  background: var(--brand-yellow-dim);
}

.conversation-list li.active::before {
  background: var(--brand-yellow);
}

.conversation-list li.hot::before {
  background: var(--success-fg);
}

.conversation-list li.warm::before {
  background: var(--brand-yellow);
}

.conversation-list li.cold::before {
  background: var(--info-fg);
}

.conversation-list li.unclassified::before {
  background: var(--ink-200);
}

.conversation-list li.hot {
  border-bottom-color: color-mix(in srgb, var(--success-fg) 10%, transparent);
}

.conversation-list li.warm {
  border-bottom-color: color-mix(in srgb, var(--warning-fg) 18%, transparent);
}

.conversation-list li.cold {
  border-bottom-color: color-mix(in srgb, var(--info-fg) 10%, transparent);
}

.conv-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.conv-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-list li.active .conv-name {
  color: var(--ink-900);
}

/* ─── Thread ─────────────────────────────────────────────────── */
.thread {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--ink-50);
}

.thread-header {
  padding: 12px 22px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--ink-100);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-800);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
}

.lead-profile-panel {
  display: flex;
  flex-direction: column;
  padding: 14px 24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--ink-100);
}

/* lead-profile-next no longer rendered — kept for any legacy references */
.lead-profile-main,
.lead-profile-next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lead-profile-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.lead-profile-main strong,
.lead-profile-next strong {
  color: var(--ink-900);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lead-profile-main p,
.lead-profile-next p,
.lead-profile-next span {
  color: var(--ink-600);
  font-size: 15px;
  line-height: 1.45;
}

.lead-profile-next {
  padding-left: 14px;
  border-left: 1px solid var(--ink-100);
}

.lead-profile-next span {
  color: var(--ink-400);
}

.analysis-regenerate-button {
  padding: 5px 9px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--ink-50);
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1;
  box-shadow: none;
}

.analysis-regenerate-button:hover {
  background: var(--ink-100);
  box-shadow: none;
}

.suggested-message-field {
  display: grid;
  gap: 6px;
}

.suggested-message-field span {
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.suggested-message-field textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.suggested-message-field textarea:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(197,228,98,0.14);
}

.suggested-send-button {
  justify-self: end;
  min-width: 92px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

/* ─── Customer Notes ──────────────────────────────────────────── */

/* Editable textarea replacing the old static AI Analysis paragraph */
.customer-notes-textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.customer-notes-textarea:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(197,228,98,0.14);
}

.notes-save-button {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 14px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  color: var(--ink-600);
  font-size: 13px;
  box-shadow: none;
}

.notes-save-button:hover:not(:disabled) {
  background: var(--ink-100);
  box-shadow: none;
}

/* Draft box: highlighted section shown when AI generates notes pending approval */
.notes-draft-box {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--warning-fg);
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
}

.notes-draft-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.notes-draft-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--warning-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notes-draft-hint {
  font-size: 12px;
  color: var(--warning-fg);
}

.notes-draft-body {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.5;
  margin: 0 0 10px;
  white-space: pre-wrap;
}

.notes-draft-actions {
  display: flex;
  gap: 8px;
}

.notes-approve-button {
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--success-fg);
  color: var(--ink-0);
  border: none;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.notes-approve-button:hover:not(:disabled) {
  background: var(--success-fg);
  box-shadow: none;
}

.notes-discard-button {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-100);
  background: var(--surface);
  color: var(--ink-500);
  font-size: 13px;
  box-shadow: none;
}

.notes-discard-button:hover:not(:disabled) {
  background: var(--ink-50);
  box-shadow: none;
}

/* Disabled state for AI suggested message template item when no message exists yet */
.tpl-item-disabled {
  opacity: 0.55;
  cursor: default;
}

/* Cost warning appears when free-form WhatsApp session replies are no longer available. */
.template-cost-warning {
  margin: 6px 0 0;
  color: var(--warning-fg);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

/* ─── Messages Area ──────────────────────────────────────────── */
.messages {
  display: flex;
  flex: 1 1;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ─── Message Bubbles ────────────────────────────────────────── */
.msg {
  max-width: 58%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  line-height: 1.5;
  font-size: 16px;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-msg);
  animation: msgIn 0.18s ease both;
}

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

.msg.in {
  align-self: flex-start;
  background: #ffffff;
  color: #1d2a2c;
  border: 2px solid #d0d0d0;
  border-bottom-left-radius: 4px;
}

.msg.out {
  align-self: flex-end;
  background: var(--brand-yellow-soft);
  color: #1d2a2c;
  border: 2px solid rgba(197,228,98,0.4);
  border-bottom-right-radius: 4px;
}

.msg .ts {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-400);
}

.msg.out .ts {
  text-align: right;
  color: color-mix(in srgb, var(--ink-800) 50%, transparent);
}

/* ─── Send Form ──────────────────────────────────────────────── */
.send-form {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface);
  border-top: 1px solid var(--ink-100);
}

.send-input {
  flex: 1 1;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-pill);
  outline: none;
  font-family: var(--font-ui);
  font-size: 16px;
  background: var(--surface-muted);
  color: var(--ink-800);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.send-input::placeholder {
  color: var(--ink-200);
}

.send-input:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(197,228,98,0.15);
}

.send-form button[type="submit"] {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
}

/* ─── Modal ──────────────────────────────────────────────────── */
/* Consumers are Nudge pages (rendered inside NudgeShell), so the backdrop takes
   the shell's overlay layer and always covers the mobile tab bar + header. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 300);
  background: rgba(12,23,25,0.55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: backdropIn 0.15s ease both;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--ink-150);
  box-shadow: var(--shadow-panel);
  width: 100%;
  max-width: 440px;
  animation: modalIn 0.18s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.modal-header h2 {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: 0.01em;
}

.modal-close {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 17px;
  color: var(--ink-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.modal-close:hover {
  background: var(--ink-50);
  color: var(--ink-800);
  box-shadow: none;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 24px;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-150) transparent;
}

.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--ink-150); border-radius: var(--radius-pill); }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-field span {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.modal-field input {
  padding: 9px 14px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink-800);
  background: var(--ink-50);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.modal-field input:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(197,228,98,0.15);
}

.modal-field input::placeholder {
  color: var(--ink-200);
  font-size: 15.5px;
}

.modal-error {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-bg);
  color: var(--danger-fg);
  font-size: 15px;
  line-height: 1.4;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.modal-cancel {
  background: var(--ink-50);
  color: var(--ink-600);
  border: 1.5px solid var(--ink-100);
  box-shadow: none;
}

.modal-cancel:hover {
  background: var(--ink-100);
  box-shadow: none;
}

/* ─── Auth Animations ────────────────────────────────────────── */

/* Left panel slides in from the left on page load */
@keyframes authPanelIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Form elements cascade in from below, staggered via animation-delay */
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse glow on the lime-green badge */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,228,98,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(197,228,98,0); }
}

.auth-panel-in  { animation: authPanelIn 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.auth-fade-up-1 { animation: authFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.auth-fade-up-2 { animation: authFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.12s both; }
.auth-fade-up-3 { animation: authFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.19s both; }
.auth-fade-up-4 { animation: authFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.26s both; }
.auth-fade-up-5 { animation: authFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.33s both; }
.auth-fade-up-6 { animation: authFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.40s both; }
.auth-badge-pulse { animation: badgePulse 2.4s ease-in-out 0.8s infinite; }

/* Assumption: Guide and Feedback share the landing page's hero hierarchy. */
.brand-subpage-hero {
  padding: 76px 24px 56px;
  background: radial-gradient(60% 70% at 50% 0%, rgba(197, 228, 98, 0.35), transparent), var(--homu-bg);
  text-align: center;
}

.brand-subpage-hero-inner {
  width: min(100%, 900px);
  margin: 0 auto;
}

.brand-subpage-eyebrow {
  margin: 0 0 16px;
  color: var(--homu-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.brand-subpage-title {
  max-width: 850px;
  margin: 0 auto 20px;
  color: var(--homu-black);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.brand-subpage-description {
  max-width: 660px;
  margin: 0 auto 32px;
  color: var(--homu-muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.guide-stage-nav a:hover {
  border-color: var(--homu-green);
  background: var(--homu-green);
}

@media (max-width: 560px) {
  .brand-subpage-hero {
    padding: 56px 24px 48px;
  }

  .brand-subpage-description {
    font-size: 16px;
  }
}


/* ─── Auth Split Layout (Login / Register) ───────────────────── */

/* Assumption: /login and /register use the same compact hero-to-content
   sequence as /guide at every viewport, rather than a desktop-only split. */
.auth-split {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  background: var(--homu-bg);
  font-family: var(--font-inter);
  overflow: hidden;
}

/* Used on /login, /register, /feedback now that PublicHeader sits above
   the split — shrinks it by the header height so the pair still fits
   exactly 100vh instead of overflowing. */
.auth-split--with-header {
  height: calc(100vh - var(--header-h));
  min-height: calc(100vh - var(--header-h));
}

/* Dark brand hero — mirrors the /guide hero's full-width, vertical rhythm. */
.auth-left {
  width: 100%;
  min-height: 0;
  background: var(--homu-black);
  /* Lime-green dot grid — suggests a property map / floor-plan grid */
  background-image:
    radial-gradient(circle, rgba(197,228,98,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  position: relative;
  overflow: hidden;
}

/* Keep auth content aligned to the guide's 780px reading measure. */
.auth-left-inner {
  width: min(100%, 780px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 72px 24px 56px;
  overflow-x: hidden;
}

/* Lime-green glow bloom — top-right corner atmosphere */
.auth-left::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,228,98,0.13) 0%, transparent 70%);
  pointer-events: none;
}

/* Right white form panel */
.auth-right {
  flex: 1 1;
  min-height: 0;
  width: 100%;
  display: flex;
  /* "safe" keeps content centered when it fits, but falls back to
     top-aligned (scrollable) instead of clipping when the content is
     taller than the panel — plain "center" here made the top of the
     form unreachable via scroll once PublicHeader shrank this panel. */
  align-items: safe center;
  justify-content: center;
  padding: 24px 24px 32px;
  background: var(--homu-bg);
  overflow-y: auto;
}

.auth-left-inner .auth-top-section {
  flex: none !important;
}

/* The supplied vertical auth layout carries only the brand and tagline. */
.auth-features,
.auth-social-proof,
.auth-tagline-sub {
  display: none !important;
}

.auth-form-wrap {
  width: min(100%, 780px) !important;
  max-width: 520px !important;
  margin: 0 auto;
}

/* When the remaining desktop panel is shorter than the form, keep the
   heading visible at its top and let only this panel scroll. */
@media (min-width: 769px) and (max-height: 875px) {
  .auth-right {
    align-items: flex-start;
  }
}

/* Mobile keeps the same hierarchy with tighter guide-like section spacing. */
@media (max-width: 768px) {
  .auth-split {
    height: auto;
    overflow: visible;
  }

  .auth-left {
    min-height: 205px;
  }

  .auth-left-inner {
    padding: 32px 24px 34px;
  }

  .auth-top-section {
    flex: none !important;
  }

  .auth-logo-row {
    margin-bottom: 36px !important;
  }

  .auth-tagline {
    font-size: 28px !important;
    line-height: 1.18 !important;
    margin-bottom: 0 !important;
  }

  .auth-right {
    align-items: flex-start;
    padding: 64px 24px 40px;
    overflow: visible;
  }

  .auth-form-wrap {
    max-width: none !important;
  }
}

/* ─── Hamburger button (mobile only — shown via @media rule) ─── */
.mobile-menu-btn {
  display: none; /* desktop: hidden */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-menu-btn:hover {
  background: var(--ink-50);
  color: var(--ink-900);
  box-shadow: none;
}

/* ─── Mobile slide-down nav panel ───────────────────────────── */
/* Hidden on desktop — shown only inside the @media block */
.mobile-nav-panel {
  display: none;
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Single-row compact header — logo on left, actions + hamburger on right */
  .app-header {
    height: var(--header-h);
    padding: 0 16px;
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  /* Keep brand as a simple row (logo only; nav is hidden) */
  .header-brand {
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: auto;
    flex: 1 1;
  }

  /* Desktop nav pills hidden on mobile — navigation lives in mobile-nav-panel */
  .header-nav {
    display: none;
  }

  /* Show hamburger on mobile */
  .mobile-menu-btn {
    display: inline-flex;
  }

  /* The burger owns mobile navigation, so the username is display-only. */
  .header-acct-btn,
  .header-acct-wrap .header-dd {
    display: none;
  }

  .header-acct-name-mobile {
    display: inline;
  }

  /* Logged-out CTA buttons collapse into the mobile-nav-panel instead */
  .header-login-link,
  .header-signup-btn {
    display: none;
  }

  /* Mobile nav panel: fixed below the sticky header, slides down on open */
  .mobile-nav-panel {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 98;
    background: var(--surface);
    border-bottom: 1px solid var(--ink-100);
    box-shadow: 0 8px 28px rgba(12,23,25,0.12);
    padding: 10px 12px 18px;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), opacity 0.18s ease;
  }

  .mobile-nav-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: var(--radius-md);
    color: var(--ink-700);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .mobile-nav-item:hover {
    background: var(--ink-50);
    color: var(--ink-900);
  }

  .mobile-nav-item.active {
    background: var(--brand-yellow);
    color: var(--ink-900);
  }

  /* "Sign up free" row in the logged-out mobile nav panel */
  .mobile-nav-item--cta {
    background: var(--brand-yellow);
    color: var(--ink-900);
    justify-content: center;
    font-weight: 700;
  }

  .mobile-nav-item--cta:hover {
    background: var(--brand-yellow-hover);
    color: var(--ink-900);
  }

  /* Disabled/coming-soon mobile items */
  .mobile-nav-item--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  .mobile-nav-item--disabled:hover {
    background: transparent;
    color: var(--ink-700);
  }

  .mobile-nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Log-out row inside the standardized mobile nav list */
  .mobile-nav-logout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--danger-fg);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.8;
    box-shadow: none;
    transition: background var(--transition-fast), opacity var(--transition-fast);
  }

  .mobile-nav-logout:hover {
    background: var(--danger-bg);
    opacity: 1;
    box-shadow: none;
  }

  /* Semi-transparent backdrop — tapping it closes the menu */
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    z-index: 97;
    background: rgba(12,23,25,0.18);
  }

  /* Use padding instead of width math so left/right margins are guaranteed equal (Pattern 3) */
  .dashboard-shell {
    width: 100%;
    margin: 0;
    padding: 18px 24px 44px;
  }

  .settings-shell {
    /* Use padding instead of width math so left/right margins are guaranteed equal */
    width: 100%;
    margin: 0;
    padding: 18px 24px 44px;
  }

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-hero h2 {
    font-size: 29px;
  }

  .settings-hero h2 {
    font-size: 33.5px;
  }

  .dashboard-status {
    align-items: flex-start;
  }

  .settings-status {
    justify-items: start;
  }

  .metric-grid {
    /* Collapse to two equal columns on mobile — asymmetry doesn't help at small widths */
    grid-template-columns: repeat(2, 1fr);
  }

  .action-card-row,
  .dashboard-data-grid,
  .summary-pill-row {
    grid-template-columns: 1fr;
  }

  .leads-and-replies-col {
    /* Reset explicit placement so the single-column grid stacks correctly */
    grid-column: 1;
    grid-row: auto;
  }

  .campaign-summary-panel,
  .recent-replies-panel,
  .leads-breakdown-panel {
    grid-column: auto;
    grid-row: auto;
  }

  /* Remove fixed max-height so Recent Replies isn't clipped on small screens */
  .recent-replies-panel {
    max-height: none;
  }

  .lead-breakdown {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .settings-panel {
    min-height: auto;
  }

  .settings-summary {
    grid-template-columns: 1fr;
  }

  .settings-actions {
    flex-direction: column-reverse;
  }

  .settings-actions button {
    width: 100%;
  }

  .priority-list li,
  .awareness-list > div,
  .usage-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .awareness-count,
  .awareness-status {
    min-width: 0;
    text-align: left;
  }

  .priority-list time {
    text-align: left;
  }

  .priority-meta {
    justify-items: start;
  }

  .lead-profile-panel,
  .lead-profile-main {
    flex-direction: column;
  }

  .lead-profile-next {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid var(--ink-100);
  }

  .suggested-send-button {
    justify-self: stretch;
  }

  .campaign-panel {
    grid-column: 1;
  }

  /* Allow heading + action link to wrap to a second line on very narrow panels */
  .panel-heading {
    flex-wrap: wrap;
  }

  /* Reduce panel heading h3 so it fits on one line alongside the action link */
  .panel-heading h3 {
    font-size: 18px;
  }

  /* Hide the CPL column on mobile — it's always "—" and wastes horizontal space */
  .campaign-table > div {
    grid-template-columns: minmax(0, 1fr) 76px;
  }
  .campaign-table > div > span:last-child {
    display: none;
  }
  /* Truncate long campaign names instead of wrapping to multiple lines */
  .campaign-table > div > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 35vh) minmax(0, 1fr);
    height: calc(100vh - var(--header-h));
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--ink-100);
  }

  .msg {
    max-width: 82%;
  }

  .messages {
    padding: 16px 16px;
  }

  /* ─── Sequence page ──────────────────────────────────────────── */

  /* Keep title on the left and Sync Sheet button pinned top-right, matching the desktop row layout */
  .seq-page-header {
    align-items: flex-start;
  }

  /* Stats chips wrap on narrow screens */
  .seq-stats-footer {
    flex-wrap: wrap;
    gap: 10px !important;
  }
}

/* ─── Inbox Sidebar Header ───────────────────────────────────── */

/* Top bar of the sidebar: title + connected account chip */
.inbox-sidebar-header {
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

/* Pill showing total conversation count */
.inbox-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: 0;
}

/* Compact chip showing the connected WhatsApp number */
.inbox-account-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--whatsapp) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--whatsapp) 20%, transparent);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-800);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}

.inbox-account-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-account-status {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success-fg);
  flex-shrink: 0;
}

/* Small connect button shown when no account is linked */
.inbox-connect-btn {
  padding: 5px 10px;
  font-size: 13px;
  background: var(--surface-muted);
  color: var(--ink-600);
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--radius-pill);
  box-shadow: none;
  width: fit-content;
}

.inbox-connect-btn:hover {
  background: var(--ink-100);
  box-shadow: none;
}

/* ─── Inbox Search ────────────────────────────────────────────── */

.inbox-search-wrap {
  position: relative;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--ink-100);
}

.inbox-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}

.inbox-search {
  width: 100%;
  padding: 7px 28px 7px 32px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.inbox-search:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(197,228,98,0.12);
}

.inbox-search::placeholder {
  color: var(--ink-200);
}

/* Clear (✕) button inside the search field */
.inbox-search-clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--ink-400);
  cursor: pointer;
  box-shadow: none;
  border-radius: var(--radius-pill);
}

.inbox-search-clear:hover {
  color: var(--ink-800);
  background: var(--ink-100);
  box-shadow: none;
}

/* ─── Conversation List Item (wireframe-aligned) ─────────────── */

.conv-item {
  display: flex;
  align-items: stretch;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--ink-100);
  transition: background 0.1s ease;
  list-style: none;
  position: relative;
  overflow: hidden;
}

/* Remove old pseudo-element — replaced by explicit .conv-temp-bar span */
.conv-item::before { display: none; }

.conv-item:hover { background: var(--ink-50); }
.conv-item.active { background: var(--brand-yellow-dim); }

/* ── Temperature bar: 6px wide colored left edge (wireframe style) */
.conv-temp-bar {
  width: 6px;
  flex-shrink: 0;
  align-self: stretch;
  background: var(--ink-200);
  transition: background 0.15s ease;
}

.conv-temp-bar.hot          { background: var(--success-fg); }
.conv-temp-bar.warm         { background: var(--brand-yellow); }
.conv-temp-bar.cold         { background: var(--info-fg); }
.conv-temp-bar.unclassified { background: var(--ink-200); }

/* Wrap avatar + text — occupies remaining width after the bar */
.conv-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  flex: 1 1;
  min-width: 0;
}

/* ── Temperature pill inside conv rows ── */
.conv-temp-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.conv-temp-pill.hot          { background: var(--success-bg);  color: var(--success-fg); }
.conv-temp-pill.warm         { background: var(--warning-bg); color: var(--warning-fg); }
.conv-temp-pill.cold         { background: var(--info-bg); color: var(--info-fg); }
.conv-temp-pill.unclassified { background: var(--ink-100);        color: var(--ink-400); }

/* ── 2-line clamped message preview ── */
.conv-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  color: var(--ink-400);
  line-height: 1.35;
  margin-top: 3px;
}

/* ── "Next: xxx" suggested action hint ── */
.conv-next-hint {
  font-size: 13px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

/* Row that holds avatar + content side-by-side */
.conv-avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Content area: name/time on top, phone/chips on bottom */
.conv-content {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.conv-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.conv-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}

/* Relative timestamp (e.g. "3h", "2d", "now") */
.conv-time {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-400);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.conv-bottom-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Muted phone number in the conversation row */
.conv-phone {
  font-size: 13px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

/* ─── Thread Header (redesigned) ────────────────────────────── */

.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--ink-100);
  min-height: 60px;
  flex-wrap: wrap;
}

/* Remove old ::before pseudo-element — avatar replaces the yellow dot */
.thread-header::before {
  display: none;
}

/* Contact identity block: avatar + name/id stacked + temperature chip */
.thread-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.thread-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.thread-contact-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.thread-contact-id {
  font-size: 13px;
  color: var(--ink-400);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.thread-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Placeholder copy when no conversation is active */
.thread-empty-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  color: var(--ink-400);
  font-weight: 500;
}

/* ─── Lead Profile Panel (redesigned) ───────────────────────── */

/* Already defined above, adding extra section-header helpers */
.lead-profile-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.lead-profile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lead-profile-label {
  color: var(--ink-400);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-profile-body {
  color: var(--ink-600);
  font-size: 15px;
  line-height: 1.5;
}

/* Group the recommended next step directly beneath the AI analysis copy. */
.lead-profile-action {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-100);
}

/* Timestamp + model shown below the analysis text */
.lead-profile-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--ink-400);
  font-size: 12.5px;
}

/* ─── Thread Empty State ─────────────────────────────────────── */

.thread-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--ink-400);
  text-align: center;
}

.thread-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400);
  margin-bottom: 4px;
}

.thread-empty-state strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-800);
}

.thread-empty-state span {
  font-size: 15px;
  max-width: 260px;
  line-height: 1.5;
}

/* ─── Send Form (redesigned) ─────────────────────────────────── */

.send-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--ink-100);
}

/* Wrapper gives us room for a left-side icon if needed */
.send-input-wrap {
  order: 1;
  flex: 1 1;
  min-width: 0;
  position: relative;
}

.send-input {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-pill);
  outline: none;
  font-family: var(--font-ui);
  font-size: 16px;
  background: var(--surface-muted);
  color: var(--ink-800);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.send-input::placeholder { color: var(--ink-200); }

.send-input:focus {
  border-color: var(--brand-yellow);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(197,228,98,0.15);
}

/* Primary send button — brand lime pill */
.send-btn {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--brand-yellow);
  color: var(--ink-900);
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.send-btn:hover {
  background: var(--brand-yellow-hover);
  box-shadow: 0 2px 8px rgba(197,228,98,0.35);
}

.send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Composer warning keeps template-cost copy visible without forcing the input to collapse. */
.send-cost-warning {
  order: 3;
  flex: 1 0 100%;
  margin: 0;
}

/* WhatsApp fallback for warm/cold leads whose free-form 24-hour session window has closed. */
.whatsapp-chat-link {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  color: var(--success-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Keep the AI-profile fallback compact inside the suggested message panel. */
.suggested-whatsapp-link {
  margin-left: 2px;
}

/* Missing or malformed contact ids should look inactive instead of opening a broken link. */
.whatsapp-chat-link[aria-disabled='true'] {
  color: var(--ink-300);
  pointer-events: none;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard Redesign — new components added 2026-05
   ═══════════════════════════════════════════════════════════════ */

/* ─── Dashboard Entrance Animations ─────────────────────────── */
/* Each section cascades in 70 ms after the previous */
@keyframes dashIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-in-1 { animation: dashIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both; }
.dash-in-2 { animation: dashIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.11s both; }
.dash-in-3 { animation: dashIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
.dash-in-4 { animation: dashIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
.dash-in-5 { animation: dashIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }
.dash-in-6 { animation: dashIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.39s both; }

/* ─── Connection Status Pill ─────────────────────────────────── */
.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--ink-100);
  color: var(--ink-600);
}

.connection-pill.connected {
  background: var(--success-bg);
  color: var(--success-fg);
}

.connection-pill.disconnected {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

/* Pulsing dot inside the pill — inherits the text color */
.connection-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Contact Avatar ─────────────────────────────────────────── */
/* Circle showing two-letter initials, tinted by lead temperature */
.contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: var(--ink-100);
  color: var(--ink-600);
}

.contact-avatar.hot          { background: var(--success-bg);  color: var(--success-fg); }
.contact-avatar.warm         { background: var(--warning-bg); color: var(--warning-fg); }
.contact-avatar.cold         { background: var(--info-bg); color: var(--info-fg); }
.contact-avatar.unclassified { background: var(--ink-100);           color: var(--ink-400); }

/* ─── Awareness Rows ─────────────────────────────────────────── */
/* Left-border accent signals the awareness level at a glance */
.awareness-row {
  border-left: 3px solid var(--ink-200) !important;
}

.awareness-row.informed      { border-left-color: var(--success-fg) !important; }
.awareness-row.ignorant      { border-left-color: var(--danger-fg) !important; }
.awareness-row.middle_ground { border-left-color: var(--brand-yellow) !important; }
.awareness-row.blind         { border-left-color: var(--info-fg) !important; }

/* Right cluster: count chip stacked above status text */
.awareness-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* ─── Campaign Progress Bar ──────────────────────────────────── */

/* Row wrapper: bar stretches, label sits to the right */
.campaign-quota-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.campaign-progress-bar {
  flex: 1 1;
  position: relative;
  height: 5px;
  background: var(--ink-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Width is set inline from campaignUsedPct */
.campaign-progress-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: var(--brand-yellow);
  border-radius: var(--radius-pill);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Label sits outside the bar so it is never clipped by overflow:hidden */
.campaign-progress-label {
  flex-shrink: 0;
  color: var(--ink-400);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Due-Now Highlight ──────────────────────────────────────── */
/* Turns the "due now" count red when follow-ups are overdue */
.due-now {
  color: var(--danger-fg);
  font-weight: 700;
}

/* Red accent bar + border on the follow-up card when overdue items exist */
.metric-card.due-active {
  border-color: color-mix(in srgb, var(--danger-fg) 22%, transparent);
}
.metric-card.due-active::before {
  background: var(--danger-fg);
}

/* ─── Usage Rings (donut SVGs in Free Usage panel) ───────────── */

/* Flex row centering the two quota rings */
.usage-rings {
  display: flex;
  gap: 28px;
  justify-content: center;
  padding: 16px 0 20px;
}

/* Each ring: SVG stacked above its label */
.usage-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.usage-ring-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-400);
  text-align: center;
}

/* ─── Upgrade CTA Button ─────────────────────────────────────── */
/* Dark pill — distinct from the primary yellow button */
.upgrade-btn {
  width: 100%;
  padding: 10px;
  background: var(--ink-900);
  color: var(--ink-0);
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-btn:hover {
  background: var(--ink-800);
  box-shadow: 0 2px 10px rgba(12,23,25,0.18);
}

/* ─── Hero Dashboard Status (responsive fix) ─────────────────── */
@media (max-width: 760px) {
  .connection-pill { font-size: 13px; }
  .dashboard-status strong { font-size: 38.5px; }
  .contact-avatar { width: 30px; height: 30px; font-size: 12px; }
}

/* ─── Thread + Template Panel Layout ────────────────────────── */

/* thread is now a flex row: main content | template panel */
.thread {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden; /* clip any overflow at the grid cell level */
}

/* wraps all the original thread content (header, AI panel, messages, send form) */
.thread-main {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-width: 0;
  min-height: 0;
  /* no overflow:hidden here — .messages handles its own vertical scroll */
}

/* lead-profile-panel spans full thread width as a single column */
.thread-main .lead-profile-panel {
  flex-direction: column;
}

/* ── Template Panel ─────────────────────────────────────────── */
.tpl-panel {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ink-150);
  background: var(--surface);
  min-height: 0;
  overflow: hidden;
}

.tpl-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-400);
  flex-shrink: 0;
}

.tpl-panel-empty {
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-400);
}

.tpl-panel-empty a {
  color: var(--ink-600);
  font-weight: 600;
  text-decoration: none;
}

.tpl-list {
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden; /* prevent horizontal overflow from expanding panel */
  flex: 1 1;
  min-width: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tpl-item {
  width: 100%;
  min-width: 0; /* allow flex item to shrink below content size */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--ink-100);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.13s, background 0.13s, opacity 0.13s;
}

.tpl-item:hover:not(:disabled) {
  border-color: var(--brand-yellow);
  background: var(--brand-yellow-dim);
  box-shadow: none;
}

/* Recommended: lime-tinted border + background */
.tpl-item.recommended {
  border-color: var(--brand-yellow);
  background: var(--brand-yellow-soft);
}

/* Already sent: red-tinted, disabled appearance */
.tpl-item.sent {
  border-color: color-mix(in srgb, var(--danger-fg) 25%, transparent);
  background: var(--danger-bg);
  cursor: default;
  opacity: 0.8;
}

.tpl-item-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tpl-day-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--ink-100);
  color: var(--ink-500);
}

.tpl-day-badge.recommended {
  background: rgba(197, 228, 98, 0.45);
  color: #3a5800;
}

.tpl-day-badge.sent {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.tpl-recommended-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.tpl-sent-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--danger-fg);
}

.tpl-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-800);
  line-height: 1.2;
}

.tpl-item.sent .tpl-item-name {
  color: var(--danger-fg);
  text-decoration: line-through;
}

.tpl-item-preview {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  max-width: 100%;
}

.tpl-item-files {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-400);
}

.template-file-field {
  display: grid;
  gap: 8px;
}

.template-file-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
}

.template-file-heading small {
  color: var(--ink-400);
  font-weight: 600;
}

.template-file-picker {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 16px;
  border: 1.5px dashed var(--ink-150);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--ink-500);
  cursor: pointer;
}

.template-file-picker:hover {
  border-color: var(--brand-yellow);
  background: var(--brand-yellow-dim);
}

.template-file-picker.disabled {
  cursor: default;
  opacity: 0.55;
}

.template-file-picker input {
  display: none;
}

.template-file-picker strong {
  font-size: 13px;
  color: var(--ink-700);
}

.template-file-picker span {
  font-size: 11.5px;
  text-align: center;
}

.template-file-list,
.template-card-files {
  display: grid;
  gap: 6px;
}

.template-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
}

.template-file-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.template-file-row strong {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-file-row span {
  font-size: 11px;
  color: var(--ink-400);
}

.template-file-row button {
  flex-shrink: 0;
  padding: 4px 7px;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--danger-fg);
  font-size: 11.5px;
}

/* ─── Placeholder section ────────────────────────────────────── */

/* Section header: title (left) + "Add placeholder" button (right) */
.placeholder-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* 4-column table header: key | type+level | description | (actions) */
.placeholder-table-header {
  display: grid;
  grid-template-columns: 160px 150px 1fr auto;
  gap: 12px;
  padding: 8px 14px;
  background: var(--ink-100);
  border-bottom: 1px solid var(--ink-200);
}

/* Each placeholder row mirrors the header columns */
.placeholder-table-row {
  display: grid;
  grid-template-columns: 160px 150px 1fr auto;
  grid-template-areas: "key badges desc actions";
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.placeholder-row-key     { grid-area: key; min-width: 0; overflow: hidden; }
.placeholder-row-key code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.placeholder-row-badges  { grid-area: badges; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.placeholder-row-desc    { grid-area: desc; min-width: 0; }
.placeholder-row-actions { grid-area: actions; display: flex; gap: 6px; justify-content: flex-end; flex-shrink: 0; }

/* Actions bar above the template list (right-aligned on desktop) */
.templates-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.template-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.template-card-actions {
  display: flex;
  gap: 6px;
}

.template-card-files {
  margin-top: 10px;
}

.template-card-files span {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  color: var(--ink-500);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* /database category filter bar */
.database-category-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.database-category-pill {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink-200);
  background: var(--surface);
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}

.database-category-pill[data-active="true"] {
  background: var(--ink-900);
  color: var(--ink-0);
  border-color: var(--ink-900);
}

.database-category-manage {
  background: var(--ink-50);
  color: var(--ink-500);
}

.database-lead-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.database-lead-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Assumption: public file previews use Nudge colors while retaining their existing download flow. */
.file-share-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--n-page);
  font-family: var(--font-plex), sans-serif;
}

.file-share-card {
  width: min(100%, 680px);
  display: grid;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--n-border);
  border-radius: 12px;
  background: var(--n-card);
  box-shadow: none;
}

.file-share-brand,
.file-share-eyebrow {
  color: var(--n-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.file-share-preview {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border: 1px solid var(--n-border);
  border-radius: 8px;
  background: var(--n-subtle);
}

.file-share-document-icon {
  width: 84px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--n-green-tint);
  color: var(--n-green);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.file-share-details {
  display: grid;
  gap: 5px;
}

.file-share-details h1 {
  overflow-wrap: anywhere;
  color: var(--n-text);
  font-family: var(--font-serif), serif;
  font-weight: 500;
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.1;
}

.file-share-details p:last-child {
  color: var(--n-muted);
  font-size: 13px;
}

.file-share-download {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 9px;
  background: var(--n-green);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 760px) {
  .tpl-panel { display: none; }

  /* Placeholder section: stack header and full-width button */
  .placeholder-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .placeholder-section-header > button {
    width: 100%;
  }

  /* Placeholder table: hide column headers, convert rows to compact 2-row cards */
  .placeholder-table-header { display: none; }

  .placeholder-table-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "key     actions"
      "badges  badges"
      "desc    desc";
    row-gap: 6px;
    padding: 12px 14px;
  }

  /* Keep actions vertically centred against the key badge */
  .placeholder-row-actions { align-self: start; }

  /* Template card: drop to 2 columns (day badge + content), actions wrap below */
  .template-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .template-card-actions {
    grid-column: 1 / -1;
  }

  /* Stretch Edit/Delete buttons to fill the row on mobile */
  .template-card-actions button {
    flex: 1 1;
  }

  /* File name pills: cap width so long names truncate on narrow screens */
  .template-card-files span {
    max-width: 200px;
  }

  /* Full-width "New template" button — better tap target on mobile */
  .templates-actions-bar {
    justify-content: stretch;
  }

  .templates-actions-bar button {
    width: 100%;
  }

  /* /database category bar: horizontal scroll instead of wrapping to many rows */
  .database-category-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  /* /database lead card: stack content and actions, full-width action buttons */
  .database-lead-card {
    grid-template-columns: 1fr;
  }

  .database-lead-card-actions {
    width: 100%;
  }

  .database-lead-card-actions button {
    flex: 1 1;
  }
}

/* ─── Settings card grids ────────────────────────────────────── */

/* Outer two-column card grid on the settings page */
.settings-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Inner info grid inside each ConnectionCard */
.connection-card-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  padding: 16px;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-100);
}

/* Wallet Available Credits / Pending Top-Ups side-by-side stat boxes */
.wallet-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  /* Collapse both grids to single column so cards don't overflow narrow screens */
  .settings-cards-grid         { grid-template-columns: 1fr; }
  .connection-card-info-grid   { grid-template-columns: 1fr; }
  .wallet-stats-grid           { grid-template-columns: 1fr; }
}

/* ─── New Phase 1 Dashboard ──────────────────────────────────── */

.dash-greeting {
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: 28px;
}

.dash-greeting-text {
  font-family: var(--font-brand);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.dash-greeting-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-400);
}

/* Stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.dash-stat-card {
  background: var(--surface);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
}

/* Primary card — brand lime background with dark text */
.dash-stat-card--primary {
  background: var(--brand-yellow);
  border-color: transparent;
  box-shadow: none;
}

.dash-stat-number {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -0.02em;
}

.dash-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dash-stat-card--primary .dash-stat-label {
  color: var(--ink-700);
}

/* Sections — Active Sheets, Activity */
.dash-section {
  margin-bottom: 28px;
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-section-header h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.dash-section-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.dash-section-link:hover {
  color: var(--ink-900);
}

/* Sheet list */
.dash-sheet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink-900);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dash-sheet-item:hover {
  background: var(--surface-muted);
  border-color: var(--ink-200);
}

.dash-sheet-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-900);
}

/* Long sheet names yield space to the due count on narrow screens. */
.dash-sheet-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status dot — gray by default, lime when leads are due */
.dash-sheet-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-200);
  flex-shrink: 0;
}

.dash-sheet-dot--active {
  background: var(--success-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-fg) 15%, transparent);
}

.dash-sheet-due {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-400);
  flex-shrink: 0;
}

.dash-sheet-due--active {
  color: var(--success-fg);
  font-weight: 600;
}

.dash-sheet-arrow {
  color: var(--ink-300);
  font-size: 14px;
  flex-shrink: 0;
}

/* Activity feed */
.dash-activity {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-50);
}

.dash-activity-item:last-child {
  border-bottom: none;
}

/* Colored dot per event type */
.dash-activity-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-activity-dot--open { background: var(--brand-yellow); border: 1.5px solid var(--brand-yellow-hover); }
.dash-activity-dot--sync { background: var(--ink-200); }

.dash-activity-text {
  flex: 1 1;
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.4;
}

.dash-activity-text strong {
  color: var(--ink-900);
  font-weight: 600;
}

.dash-activity-time {
  font-size: 12px;
  color: var(--ink-300);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Skeleton loading state */
.dash-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-skeleton-row {
  height: 52px;
  background: linear-gradient(90deg, var(--ink-50) 25%, var(--ink-100) 50%, var(--ink-50) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
.dash-empty {
  font-size: 14px;
  color: var(--ink-400);
  padding: 16px 0;
}

.dash-empty a {
  color: var(--ink-700);
  font-weight: 600;
  text-decoration: underline;
}

/* Mobile — stack stats */
@media (max-width: 560px) {
  .dash-stats {
    grid-template-columns: 1fr;
  }

  .dash-stat-number {
    font-size: 40px;
  }
}