/* ============================================================================
   Voicemail by SoftwarePlus Tech — design system
   Clean & minimal: restrained palette, deliberate type scale, generous space.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --ink: #0f172a;        /* slate-900 */
  --ink-2: #334155;      /* slate-700 */
  --muted: #64748b;      /* slate-500 */
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-tint: #eff4ff;
  --soft: #f8fafc;       /* slate-50 */
  --line: #e7ebf1;       /* hairline */
  --line-2: #dfe5ee;
  --ok: #16a34a;
  --ok-tint: #f0fdf4;
  --warn-tint: #fffbeb;
  --warn-ink: #92400e;
  --bad: #dc2626;
  --bad-tint: #fef2f2;
  --radius: 14px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --maxw: 1060px;
  --content: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.15; color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 1px; }
.btn-block { display: flex; width: 100%; }
.btn-secondary {
  background: #fff; color: var(--ink-2); border-color: var(--line-2); box-shadow: none;
}
.btn-secondary:hover { background: var(--soft); border-color: var(--muted); }
.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-danger:focus-visible { outline: 3px solid #fecaca; }

/* ---- Header / nav ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand span { color: var(--brand); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--muted); font-weight: 500; font-size: 0.94rem; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav .nav-cta {
  background: var(--brand); color: #fff; padding: 9px 16px; border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav .nav-cta:hover { background: var(--brand-dark); color: #fff; }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding: 84px 0 64px; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-tint);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 { font-size: 3rem; font-weight: 800; margin: 0 0 18px; }
.hero p.lead {
  font-size: 1.2rem; color: var(--ink-2); max-width: 600px; margin: 0 auto 30px; line-height: 1.55;
}
.hero .btn { padding: 15px 30px; font-size: 1.05rem; }
.hero-sub { margin-top: 20px; font-size: 0.9rem; color: var(--muted); }

/* ---- Sections --------------------------------------------------------- */
section { padding: 72px 0; }
section h2 { font-size: 1.9rem; font-weight: 800; margin: 0 0 14px; text-align: center; }
.section-sub { text-align: center; color: var(--muted); max-width: 540px; margin: 0 auto 44px; font-size: 1.05rem; }

/* ---- Steps ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-tint); color: var(--brand); font-weight: 700; margin-bottom: 16px;
}
.step h3 { margin: 0 0 8px; font-size: 1.12rem; }
.step p { margin: 0; color: var(--muted); }

/* ---- Features --------------------------------------------------------- */
.features-section { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.feature { text-align: center; }
.ficon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--line); color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.ficon svg { width: 24px; height: 24px; }
.feature h3 { margin: 0 0 6px; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ---- Pricing ---------------------------------------------------------- */
.price-card {
  position: relative; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 40px 34px; max-width: 430px; margin: 0 auto;
  text-align: center; box-shadow: var(--shadow);
}
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.price-card h3 { margin: 6px 0 16px; font-size: 1.15rem; color: var(--muted); font-weight: 600; }
.price { margin-bottom: 6px; }
.price .amount { font-size: 3.4rem; font-weight: 800; color: var(--ink); letter-spacing: -0.04em; }
.price .per { color: var(--muted); font-weight: 500; }
.price-note { color: var(--muted); margin: 0 0 26px; font-size: 0.92rem; }
.price-list { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; }
.price-list li { padding: 11px 0 11px 30px; position: relative; border-top: 1px solid var(--line); color: var(--ink-2); }
.price-list li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 16px; height: 16px;
  background: var(--ok-tint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3 8 14l-4.7-4.7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3 8 14l-4.7-4.7' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background: var(--ok);
}

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 760px; margin: 0 auto; align-items: stretch; }
.price-grid .price-card { max-width: none; margin: 0; padding: 30px 28px; display: flex; flex-direction: column; }
.price-grid .price-card .price-list { flex: 1 1 auto; } /* equal-height: lists absorb the slack so buttons line up */
.price-grid .price-card .btn-block { margin-top: 8px; }
.price-grid .amount { font-size: 2.8rem; }
.price-card .plan-name { color: var(--ink); font-weight: 700; font-size: 1.3rem; margin: 0 0 14px; }
.price-card.featured { border: 2px solid var(--brand); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 44px rgba(37, 99, 235, .16); }
.price-hero { display: flex; gap: 13px; text-align: left; align-items: flex-start; background: var(--brand-tint); border: 1px solid #d3e0ff; border-radius: var(--radius-md); padding: 15px 16px; margin: 0 0 22px; }
.price-hero-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.price-hero-icon svg { width: 21px; height: 21px; }
.price-hero-text strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 3px; }
.price-hero-text span { color: var(--ink-2); font-size: 0.9rem; line-height: 1.42; }

/* ---- FAQ -------------------------------------------------------------- */
.faq-section { background: var(--soft); border-top: 1px solid var(--line); }
.faq { max-width: var(--content); margin: 0 auto; display: grid; gap: 14px; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 24px; }
.qa h3 { margin: 0 0 6px; font-size: 1.05rem; }
.qa p { margin: 0; color: var(--muted); }

/* ---- Signup / forms --------------------------------------------------- */
.signup { background: var(--soft); border-top: 1px solid var(--line); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 540px; margin: 0 auto; box-shadow: var(--shadow); }
.card-intro { margin: 0 0 22px; color: var(--muted); }
.plan-banner { position: relative; display: flex; flex-direction: column; gap: 3px; background: var(--brand-tint); border: 1px solid #d3e0ff; border-radius: var(--radius-sm); padding: 13px 16px; margin: 0 0 22px; }
.plan-banner strong { color: var(--ink); font-size: 0.98rem; }
.plan-banner span { color: var(--ink-2); font-size: 0.88rem; }
.plan-switch { position: absolute; top: 13px; right: 16px; font-size: 0.82rem; font-weight: 600; }
.pro-note { margin: -8px 0 20px; font-size: 0.88rem; color: var(--warn-ink); background: var(--warn-tint); border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 11px 14px; line-height: 1.45; }
.pro-note[hidden] { display: none; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.94rem; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-size: 1rem; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.field-hint { margin: 7px 0 0; font-size: 0.82rem; color: var(--muted); }
.consent {
  display: flex; gap: 11px; align-items: flex-start; background: var(--soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px; font-size: 0.85rem; color: var(--muted);
}
.consent input { margin-top: 3px; }
.fineprint { font-size: 0.8rem; color: var(--muted); margin-top: 16px; }
.form-error { display: none; background: var(--bad-tint); border: 1px solid #fecaca; color: #b91c1c; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.9rem; margin-bottom: 16px; }
.form-error.show { display: block; }

.signup-success { display: none; text-align: center; padding: 10px 4px; }
.signup-success.show { display: block; }
.signup-success .check, .success .check {
  width: 60px; height: 60px; border-radius: 50%; background: var(--ok-tint); color: var(--ok);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 16px;
  border: 1px solid #bbf7d0;
}
.signup-success h3 { margin: 0 0 10px; font-size: 1.3rem; }
.signup-success p { color: var(--muted); margin: 0 0 12px; }

/* ---- Setup / instructions -------------------------------------------- */
.instructions { counter-reset: step; }
.instruction { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.instruction:last-child { border-bottom: none; }
.instruction .num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); font-weight: 700;
}
.instruction h3 { margin: 3px 0 6px; font-size: 1.1rem; }
.instruction p { margin: 0 0 6px; color: var(--muted); }
.code-chip {
  display: inline-block; background: var(--soft); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 2px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--ink);
}
.note { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; color: var(--muted); font-size: 0.92rem; margin-top: 24px; }
.note.error { border-color: #fecaca; color: #b91c1c; background: var(--bad-tint); }
.note.ok { border-color: #bbf7d0; color: #15803d; background: var(--ok-tint); }

/* ---- Success page ----------------------------------------------------- */
.success { text-align: center; padding: 80px 0; }
.success h1 { margin: 0 0 12px; }
.success p { color: var(--muted); max-width: 520px; margin: 0 auto 24px; }
.cta-row { margin-top: 28px; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--muted); font-size: 0.9rem; background: var(--soft); }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-footer a { color: var(--muted); margin-left: 18px; }
.site-footer a:hover { color: var(--brand); text-decoration: none; }

/* ---- Legal / generic content page ------------------------------------ */
.legal { padding: 56px 0; max-width: var(--content); margin: 0 auto; }
/* Admin dashboard needs a wider layout than prose pages (data table + stat grid). */
.legal.admin { max-width: 1440px; }
.legal.admin .wrap { max-width: none; }
.legal h1 { font-size: 2.1rem; font-weight: 800; margin-bottom: 8px; }
.legal .updated { color: var(--muted); margin-bottom: 32px; }
.legal h2 { text-align: left; font-size: 1.3rem; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 22px; }

/* ============================================================================
   App surfaces: admin + customer dashboard
   ========================================================================== */
.admin-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0; }
.admin-auth input[type="password"], .admin-auth input[type="text"] {
  flex: 1 1 200px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit;
}
.admin-auth input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
#toolbar { display: flex; gap: 10px; margin: 20px 0; }
.dash-summary { color: var(--muted); font-size: 0.92rem; align-self: center; }

.lead-card, .cust-card {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; margin: 14px 0;
  background: #fff; box-shadow: var(--shadow-sm);
}
.lead-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lead-info { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
.lead-meta { color: var(--muted); font-size: 0.92rem; }
.lead-result { flex-basis: 100%; margin-top: 8px; padding: 13px 15px; border-radius: var(--radius-sm); background: var(--soft); font-size: 0.94rem; }
.lead-result.ok { background: var(--ok-tint); border: 1px solid #bbf7d0; }
.lead-result.error { background: var(--bad-tint); border: 1px solid #fecaca; color: #b91c1c; }
.lead-result ul { margin: 8px 0 0; padding-left: 18px; }
.lead-result li { margin: 3px 0; }

.cust-card.has-failures { border-color: #fecaca; background: var(--bad-tint); }
.cust-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.cust-id { display: flex; flex-direction: column; gap: 3px; }
.cust-id strong { font-size: 1.05rem; }
.cust-right { display: flex; align-items: center; gap: 10px; }
.cust-number { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.badge { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.badge-pending { background: var(--warn-tint); color: var(--warn-ink); }
.badge-canceled { background: var(--bad-tint); color: #991b1b; }
.badge-fail { background: #fee2e2; color: #b91c1c; font-weight: 600; }
.badge-ok { background: #dcfce7; color: #166534; }
.texter-list { max-height: 50vh; overflow-y: auto; margin: 4px 0 8px; border: 1px solid var(--line, #e5e7eb); border-radius: var(--radius-sm); }
.texter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line, #f1f5f9); }
.texter-row:last-child { border-bottom: none; }
.texter-left { display: flex; align-items: center; gap: 8px; }
.texter-num { font-weight: 600; color: #4338ca; text-decoration: none; }
.texter-when { font-size: 0.82rem; color: #6b7280; white-space: nowrap; }
.badge-pro { background: #ede9fe; color: #6d28d9; margin-left: 6px; }
.cust-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { font-size: 0.82rem; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: var(--ink-2); border: 1px solid var(--line); }
.chip-ok { background: var(--ok-tint); color: #15803d; border-color: #bbf7d0; }
.chip-bad { background: var(--bad-tint); color: #b91c1c; border-color: #fecaca; font-weight: 600; }
.chip-warn { background: var(--warn-tint); color: var(--warn-ink); border-color: #fde68a; }
.btn-link { background: none; border: none; color: var(--brand); cursor: pointer; padding: 10px 0 0; font: inherit; font-size: 0.88rem; }
.btn-link:hover { text-decoration: underline; }
.cust-detail { margin-top: 10px; border-top: 1px solid var(--line); }
.vm-row { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.vm-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vm-from { flex: 1 1 140px; font-variant-numeric: tabular-nums; font-weight: 600; }
.vm-when, .vm-dur { color: var(--muted); font-variant-numeric: tabular-nums; }
.vm-status { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.vm-sent { background: #eef2ff; color: #4338ca; } /* accepted, awaiting carrier confirmation */
.vm-delivered { background: var(--ok-tint); color: #15803d; } /* carrier confirmed delivered */
.vm-failed { background: var(--bad-tint); color: #b91c1c; }
.vm-stored { background: var(--warn-tint); color: var(--warn-ink); }
/* Read-toggle + delete sit at the right end of the header line. */
.vm-readtoggle, .vm-del { flex: 0 0 auto; padding: 3px 11px; font-size: 0.75rem; }
.vm-readtoggle { margin-left: auto; }
.vm-audio { display: block; width: 100%; height: 36px; margin-top: 8px; }
/* Unread: tinted row, bold caller, and an explicit "Unread" badge — so read vs unread
   is obvious at a glance, and flips instantly when played/marked (no reload). */
.vm-unread { background: #eef4ff; border-radius: 8px; padding-left: 10px; padding-right: 10px; margin: 0 -10px; }
.vm-unread .vm-from { font-weight: 800; }
.vm-unread .vm-from::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand, #2563eb); margin-right: 8px; vertical-align: middle;
}
.vm-unread-badge {
  display: none; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px; background: var(--brand, #2563eb); color: #fff;
}
.vm-unread .vm-unread-badge { display: inline-block; }
.vm-row:not(.vm-unread) .vm-from { color: var(--ink-2); } /* read rows recede a bit */
/* All / Unread filter pills. */
.vm-filter { display: flex; gap: 8px; margin-bottom: 14px; }
.vm-filter-btn {
  padding: 5px 14px; font-size: 0.85rem; font-weight: 600; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer;
}
.vm-filter-btn.is-active { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; }
.vm-transcript { margin-top: 8px; color: var(--ink); background: var(--soft); border-radius: 8px; padding: 8px 11px; font-size: 0.88rem; line-height: 1.45; }
.vm-more { margin-top: 13px; }
/* Missed-call rows: red phone-x glyph + tappable number. */
.mc-left { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 160px; }
.mc-ico { display: inline-flex; color: #dc2626; flex: 0 0 auto; }
.mc-ico svg { display: block; }
.mc-num { color: #2563eb; text-decoration: none; font-weight: 600; }
.mc-num:hover { text-decoration: underline; }
/* Caller cell: name over number. */
.from-name { display: block; font-weight: 600; line-height: 1.25; }
.from-num { display: block; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; text-decoration: none; }
a.from-num:hover { color: #2563eb; text-decoration: underline; }
/* Tiny "auto-identified (not in contacts)" marker next to looked-up names. */
.looked-ic { display: inline-flex; vertical-align: -1px; margin-left: 5px; color: var(--muted); cursor: help; }
.looked-ic svg { display: block; }
/* Compact account header on the dashboard (name · number + Settings link). */
.acct-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acct-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-name { font-weight: 700; font-size: 1.05rem; }
.acct-meta { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.acct-settings { flex: 0 0 auto; }
.acct-settings svg { vertical-align: -3px; margin-right: 2px; }
.back-link { display: inline-block; margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.back-link:hover { color: var(--brand, #2563eb); text-decoration: underline; }
/* Greeting: "or" divider + recording state. */
/* Blocked callers list */
.admin-auth input[type="tel"] { padding: 9px 12px; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 9px; min-width: 200px; }
.admin-auth input[type="tel"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.blocked-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blocked-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.blocked-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.btn-sm { padding: 5px 12px; font-size: 0.85rem; }
.lookup-where { margin-top: 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lookup-where select { padding: 7px 10px; font-size: 0.92rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.sub-head { font-size: 0.95rem; font-weight: 700; margin: 20px 0 4px; color: var(--ink); }
.sub-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sub-section .sub-head { margin-top: 0; }
.sync-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 13px; }
.beta-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; padding: 2px 7px; border-radius: 999px; background: var(--ok-tint); color: #15803d; margin-left: 6px; }
.plan-perks { margin: 10px 0 16px; padding-left: 20px; color: var(--ink-2); font-size: 0.92rem; }
.plan-perks li { padding: 3px 0; }
.coupon-row { margin: 0 0 12px; }
.coupon-row input { width: 100%; max-width: 280px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 0.92rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal { background: #fff; border-radius: var(--radius-md, 14px); box-shadow: var(--shadow, 0 10px 40px rgba(0,0,0,.2)); max-width: 420px; width: 100%; padding: 24px; }
.modal h3 { margin: 0 0 8px; font-size: 1.15rem; }
.modal p { margin: 0 0 20px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; white-space: pre-line; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.greeting-or { margin: 13px 0 9px; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.btn.recording { background: #dc2626; border-color: #dc2626; }
.btn.recording:hover { background: #b91c1c; border-color: #b91c1c; }
#greeting-preview { margin-top: 11px; max-width: 360px; }

/* Dashboard settings cards — each setting is a self-contained panel. */
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 14px 0; box-shadow: var(--shadow-sm); }
.settings-card h2 { margin: 0 0 6px; font-size: 1.08rem; }

/* Back-to-dashboard link + modern account header (matches the dashboard look) */
.settings-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 0.92rem; margin: 0 0 14px; }
.settings-back:hover { color: var(--brand); text-decoration: none; }
.settings-account { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin: 0 0 16px; box-shadow: var(--shadow-sm); }
.sa-head { display: flex; align-items: center; gap: 14px; }
.sa-av { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.3rem; }
.sa-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sa-name { font-weight: 700; font-size: 1.12rem; }
.sa-meta { color: var(--muted); font-size: 0.9rem; }
.sa-chip { align-self: flex-start; font-size: 0.76rem; background: var(--soft); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; margin-top: 3px; }
.settings-card > .fineprint { margin: 0 0 13px; }
.settings-card.danger { border-color: #fecaca; background: var(--bad-tint); }
.settings-card #voicemails { margin-top: 4px; }
/* Pro-gated section, locked for Basic: greyed, controls inert, but the upgrade notice/link stays usable. */
.settings-card.is-locked { opacity: 0.72; }
.settings-card.is-locked .admin-auth, .settings-card.is-locked .sub-section, .settings-card.is-locked > .fineprint { pointer-events: none; }
.settings-card.is-locked #caller-names-locked { opacity: 1; pointer-events: auto; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ===== Google Voice-style customer dashboard (rail | list | detail) ===== */
/* The dashboard reuses .legal, which caps at 760px (for text pages). Widen it for the
   3-pane app — same approach as .legal.admin. */
.legal.dash-main { max-width: none; padding: 10px 0 12px; }
.legal.dash-main .wrap { max-width: none; padding-left: 16px; padding-right: 16px; }
.dash-header .wrap { max-width: none; padding-left: 16px; padding-right: 16px; } /* header spans full width to match */
.gv-shell { display: flex; height: calc(100vh - 84px); min-height: 460px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }

.gv-rail { width: 200px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px; background: #fbfcfe; }
.gv-acct { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.gv-acct-info { min-width: 0; }
.gv-acct-name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-acct-meta { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-tabs { display: flex; flex-direction: column; gap: 2px; }
.gv-tab { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; background: transparent; border-radius: 999px; color: var(--ink-2); font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; width: 100%; text-align: left; }
.gv-tab:hover { background: #eef2f7; text-decoration: none; }
.gv-tab.is-active { background: var(--brand-tint); color: var(--brand-dark); }
.gv-tab svg { flex: none; }
/* "Turn on notifications" prompt at the top of the messages list. */
.gv-notify-cta { display: block; width: 100%; margin: 0 0 10px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--brand-tint); color: var(--brand-dark); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: center; }
.gv-notify-cta:hover { filter: brightness(0.97); }
.gv-tab span:first-of-type { flex: 1; }
.gv-badge { background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.gv-badge[hidden] { display: none; }
.gv-settings { margin-top: auto; }

.gv-listpane { width: 320px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.gv-listhead { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.gv-listhead h2 { margin: 0; font-size: 1.15rem; }
.gv-list { flex: 1; overflow-y: auto; }
.gv-listempty { color: var(--muted); padding: 24px 16px; }
.gv-filter-btn { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.85rem; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.gv-filter-btn.is-active { background: var(--brand-tint); color: var(--brand-dark); }

.gv-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--soft); }
.gv-item:hover { background: #f6f8fb; }
.gv-item.is-active { background: var(--brand-tint); }
.gv-item-main { flex: 1; min-width: 0; }
.gv-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gv-item-title { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-item-time { font-size: 0.76rem; color: var(--muted); flex: none; }
.gv-item-sub { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-item.is-unread .gv-item-title, .gv-item.is-unread .gv-item-sub { color: var(--ink); font-weight: 700; }
.gv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }

.gv-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; }
.gv-av-lg { width: 64px; height: 64px; font-size: 1.6rem; }

.gv-detail { flex: 1; overflow-y: auto; padding: 22px 26px; min-width: 0; }
/* Message thread: the panel itself doesn't scroll — the bubbles do, so the
   composer stays pinned to the bottom (even with only a message or two) and
   opening a thread lands at the latest message. */
.gv-detail.is-thread,
.gv-shell.show-detail .gv-detail.is-thread { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.gv-detail.is-thread .gv-back { flex-shrink: 0; margin: 14px 26px 0; }
.gv-detail.is-thread .gv-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gv-detail.is-thread .gv-detail-head { flex-shrink: 0; padding: 14px 26px 12px; margin-bottom: 0; }
.gv-detail.is-thread .gv-bubbles { flex: 1; overflow-y: auto; min-height: 0; padding: 6px 26px 10px; }
.gv-detail.is-thread .gv-composer { flex-shrink: 0; position: static; margin: 0; padding: 12px 26px; }
.gv-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.gv-empty-hi { font-size: 1.3rem; color: var(--ink); margin: 0 0 4px; }
.gv-empty-sub { margin: 0; }
.gv-pane.gv-centered { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 26px; }
.gv-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gv-detail-title { font-size: 1.2rem; font-weight: 700; }
.gv-detail-sub { color: var(--muted); font-size: 0.9rem; }
.gv-detail-note { color: var(--muted); font-size: 0.82rem; margin-top: 16px; }
.gv-audio { width: 100%; margin: 6px 0 16px; }
/* Don't draw the browser's chunky blue focus box around the audio players when
   clicked with a mouse (keyboard focus still shows a ring for accessibility). */
.gv-audio:focus:not(:focus-visible),
.gv-bubble-audio:focus:not(:focus-visible) { outline: none; }

/* Custom Google-style voice-note player (replaces the native <audio>) */
.gv-vn { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 340px; margin: 4px 0; }
.gv-vn-btn { flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: currentColor; }
.gv-vn-btn svg { display: block; fill: var(--vn-icon, #fff); }
.gv-vn-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.gv-vn-bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: currentColor; opacity: 0.32; }
.gv-vn-bar.played { opacity: 1; }
.gv-vn-time { flex: none; font-size: 0.78rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.gv-vn-accent { color: var(--brand); --vn-icon: #fff; }       /* voicemail on the white card */
.gv-outbound .gv-vn-btn svg { fill: #1a73e8; }                /* white circle, blue icon */
.gv-inbound .gv-vn-btn svg { fill: #f1f3f4; }                 /* dark circle, light icon */
.gv-transcript { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; line-height: 1.5; margin-bottom: 16px; }
.gv-vm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gv-callbtn { margin-top: 14px; text-decoration: none; }
.gv-bubbles { display: flex; flex-direction: column; gap: 6px; }
.gv-back { display: none; }

/* Skeleton placeholders shown instantly while the dashboard loads (no "Loading…" box) */
.gv-skel-box { background: #e9eef5; color: transparent; border-radius: 8px; animation: gv-pulse 1.3s ease-in-out infinite; }
.gv-skel-line { height: 11px; margin: 5px 0; }
.gv-acct-name.gv-skel-line { width: 96px; height: 13px; }
.gv-acct-meta.gv-skel-line { width: 64px; }
.sa-name.gv-skel-line { width: 130px; height: 14px; }
.sa-meta.gv-skel-line { width: 95px; }
.gv-av.gv-skel-box, .sa-av.gv-skel-box { border-radius: 50%; }
.gv-item.gv-skel { cursor: default; }
.gv-item.gv-skel:hover { background: transparent; }
.gv-skel .gv-skel-line { width: 62%; }
.gv-skel .gv-skel-line.short { width: 38%; }
@keyframes gv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Admin: text-conversation viewer (💬 on a customer/texter → the full SMS back-and-forth) */
.ct-texts { background: none; border: 0; cursor: pointer; font-size: 14px; padding: 0 2px; margin-left: 6px; opacity: 0.65; vertical-align: middle; }
.ct-texts:hover { opacity: 1; }
.conv-list { max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.conv-row { display: flex; flex-direction: column; max-width: 82%; }
.conv-in { align-self: flex-start; align-items: flex-start; }
.conv-out { align-self: flex-end; align-items: flex-end; }
.conv-bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.conv-in .conv-bubble { background: #eef2f7; color: #0f172a; border-bottom-left-radius: 4px; }
.conv-out .conv-bubble { background: #2563eb; color: #ffffff; border-bottom-right-radius: 4px; }
.conv-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; padding: 0 4px; }
.modal-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; margin: 6px 0 2px; cursor: pointer; }
.modal-check input { width: 16px; height: 16px; margin: 0; }

/* Below ~1000px there isn't room for 3 panes — collapse to one pane at a time
   (rail becomes a top icon bar; list, then detail-on-tap) instead of cramming. */
@media (max-width: 1000px) {
  .gv-shell { flex-direction: column; height: auto; min-height: 0; border: 0; box-shadow: none; }
  .gv-rail { width: auto; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .gv-acct { display: none; }
  .gv-tabs { flex-direction: row; }
  .gv-tab span:first-of-type, .gv-settings span { display: none; }
  .gv-settings { margin-top: 0; margin-left: auto; }
  .gv-listpane { width: auto; border-right: 0; }
  .gv-detail { display: none; }
  .gv-shell.show-detail .gv-rail, .gv-shell.show-detail .gv-listpane { display: none; }
  .gv-shell.show-detail .gv-detail { display: block; }
  .gv-back { display: inline-block; background: transparent; border: 0; color: var(--brand); font-weight: 600; cursor: pointer; padding: 0 0 12px; }
}

/* Toggle SWITCH (replaces the bare checkbox inside .toggle-row). */
.toggle-row { display: flex; align-items: center; gap: 11px; font-size: 0.95rem; font-weight: 500; cursor: pointer; margin: 2px 0 0; }
.toggle-row input { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background .18s ease; }
.toggle-row input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.28); transition: transform .18s ease; }
.toggle-row input:checked { background: #2563eb; }
.toggle-row input:checked::after { transform: translateX(18px); }
.toggle-row input:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.pin-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; flex-wrap: wrap; }
.pin-row label { font-weight: 600; font-size: 0.9rem; }
.pin-row input { width: 100px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: 1.05rem; letter-spacing: 0.35em; text-align: center; }

/* ---- Admin console ---------------------------------------------------- */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.dash-head h1 { margin: 0; }
/* Uniform fixed-size metric tiles (same size across every group — no stretching). */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 10px; justify-content: start; margin: 0; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px 15px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.stat-num { font-size: 1.5rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-label { font-size: 0.77rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.stat-card.is-pending .stat-num { color: var(--warn-ink); }
.stat-card.is-bad .stat-num { color: #b91c1c; }
.stat-card.is-primary .stat-num { color: var(--brand); }
.stat-card.is-good .stat-num { color: #15803d; }
.stat-group { margin-bottom: 14px; }
.stat-group-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 7px; }
.admin-empty { color: var(--muted); font-size: 0.92rem; padding: 4px 0; }

/* Problem reports (in-app "Report a problem") */
.report-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; margin-bottom: 8px; overflow: hidden; }
.report-row { display: flex; align-items: stretch; }
.report-head { flex: 1; display: block; text-align: left; background: none; border: 0; padding: 11px 14px; cursor: pointer; font: inherit; min-width: 0; }
.report-head:hover { background: #f8fafc; }
.report-del { flex: none; width: 44px; background: none; border: 0; border-left: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; cursor: pointer; }
.report-del:hover { background: #fef2f2; color: #b91c1c; }
.report-del:disabled { opacity: 0.5; cursor: default; }
.report-note { font-weight: 600; color: var(--ink); }
.report-sub { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; font-size: 0.8rem; color: var(--muted); }
.report-who { font-weight: 600; color: var(--brand, #2563eb); }
.report-log { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line); background: #0f172a; color: #e2e8f0; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto; }

/* Admin: section header + date filter */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.section-head h2 { margin: 0; }
.filter-bar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.filter-btn { font-size: 0.84rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.filter-btn:hover { background: var(--soft); }
.filter-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Stat cards: clickable ones drill into the matching customers. */
.stat-card.is-clickable { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.stat-card.is-clickable:hover { box-shadow: 0 2px 6px rgba(15,23,42,0.12); transform: translateY(-1px); border-color: var(--line-2); }
/* Active-segment chip (replaces the time pills when a card was clicked). */
.filter-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; padding: 6px 8px 6px 13px; border-radius: 999px; background: var(--brand); color: #fff; }
.filter-chip-x { background: rgba(255,255,255,.25); border: none; color: #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 0.7rem; }
.filter-chip-x:hover { background: rgba(255,255,255,.45); }
.dash-actions { display: inline-flex; gap: 8px; align-items: center; }

/* Admin: customers table */
#customers { overflow-x: auto; }
.cust-search { width: 100%; box-sizing: border-box; margin: 12px 0 4px; padding: 9px 12px; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.cust-search:focus { outline: none; border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.cust-section-head { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line-2); }
.cust-section-head:first-child { margin-top: 6px; }
.cust-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.cust-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 8px 7px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cust-table th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.cust-table th.sortable:hover { color: var(--ink); }
.cust-table th.sort-asc::after { content: ' ▲'; font-size: 0.7em; }
.cust-table th.sort-desc::after { content: ' ▼'; font-size: 0.7em; }
.cust-table td { padding: 8px 7px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.cust-row.expandable { cursor: pointer; }
.cust-row.expandable:hover { background: var(--soft); }
.cust-row.has-failures { background: var(--bad-tint); }
.ct-name { font-weight: 600; }
.ct-sub { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ct-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.ct-fail { color: #b91c1c; font-weight: 600; }
.ct-dismiss { margin-left: 8px; font-size: 0.7rem; padding: 2px 9px; border-radius: 999px; border: 1px solid #fecaca; background: #fff; color: #b91c1c; cursor: pointer; vertical-align: middle; }
.ct-dismiss:hover { background: var(--bad-tint); }
.cust-detail-row td { padding: 4px 10px 12px; background: var(--soft); white-space: normal; }
.badge-good { background: var(--ok-tint); color: #15803d; }

/* Per-customer actions in the table (remind / cancel) */
.ct-act { text-align: right; white-space: nowrap; }
.ct-remind { font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; white-space: nowrap; margin-right: 4px; }
.ct-remind:hover { background: var(--soft); border-color: var(--brand); color: var(--brand); }
.ct-remind.sent { border-color: #bbf7d0; background: var(--ok-tint); color: #15803d; }
.ct-remind.sent:hover { background: #dcfce7; border-color: #86efac; color: #15803d; }
.ct-cancel { font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; border: 1px solid #fecaca; background: #fff; color: #b91c1c; cursor: pointer; white-space: nowrap; }
.ct-comp { font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; border: 1px solid #c7d2fe; background: #fff; color: #4338ca; cursor: pointer; white-space: nowrap; margin-left: 4px; }
.ct-cancel:hover { background: var(--bad-tint); border-color: #dc2626; }
.ct-pause { font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; border: 1px solid #fde68a; background: #fff; color: #b45309; cursor: pointer; white-space: nowrap; margin-left: 4px; }
.ct-pause:hover { background: #fffbeb; border-color: #d97706; }
.ct-pause.paused { border-color: #bbf7d0; background: var(--ok-tint); color: #15803d; }
.ct-pause.paused:hover { background: #dcfce7; border-color: #86efac; }

/* Danger-zone modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 100; }
.modal { background: #fff; border-radius: var(--radius); width: 100%; max-width: 520px; padding: 26px 26px 22px; box-shadow: 0 12px 40px rgba(15,23,42,0.25); }
.danger-modal { border-top: 4px solid #dc2626; }
.modal-title { font-size: 1.25rem; margin: 0 0 8px; }
.modal-warn { background: var(--bad-tint); border: 1px solid #fecaca; color: #b91c1c; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.9rem; margin: 0 0 18px; }
.modal-info { background: var(--brand-tint); border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.9rem; margin: 0 0 18px; }
.modal-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin: 14px 0 5px; }
.modal-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; font-size: 0.95rem; color: var(--ink); background: #fff; box-sizing: border-box; resize: vertical; }
.modal-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.modal-input + .modal-input { margin-top: 10px; } /* stacked fields (e.g. Add tester) */
.modal-confirm { max-width: 180px; }
.modal-gen { margin-top: 12px; font-size: 0.9rem; }
.modal-fine { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0; }
.modal-note { font-size: 0.88rem; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft); border: 1px solid var(--line); color: var(--muted); }
.modal-note.error { border-color: #fecaca; color: #b91c1c; background: var(--bad-tint); }
.modal-note.ok { border-color: #bbf7d0; color: #15803d; background: var(--ok-tint); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .hero { padding: 56px 0 44px; }
  .hero h1 { font-size: 2.1rem; }
  .hero p.lead { font-size: 1.08rem; }
  section { padding: 52px 0; }
  section h2 { font-size: 1.55rem; }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .nav { gap: 16px; }
  .nav a:not(.nav-cta):not(:last-child) { display: none; }
}

/* Customer dashboard sign-in: break the Clerk widget out of the narrow content
   column to the FULL viewport width, then dead-center it. (The column was what
   kept pulling it off-center.) */
#signin {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#signin:empty { display: none; }
#signin .cl-rootBox { width: 100%; display: flex; justify-content: center; }
.legal > .wrap > #status { text-align: center; }

/* Dashboard sign-in intro (shown when signed out — login is for existing customers) */
.signin-intro { text-align: center; max-width: 460px; margin: 28px auto 4px; }
.signin-intro h1 { margin: 0 0 8px; }
.signin-intro p { color: var(--muted); margin: 0 0 8px; }
.signin-intro[hidden] { display: none; }

/* The HTML `hidden` attribute must always win over component display rules. */
[hidden] { display: none !important; }

/* Text-message conversations on the dashboard (read-only sync view) */
.msg-snippet { color: var(--muted, #555); font-size: 14px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.msg-bubble { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.msg-inbound { align-self: flex-start; background: #eceff1; color: #111; }
.msg-outbound { align-self: flex-end; background: #2563eb; color: #fff; }

/* Synced-text conversation bubbles (dashboard Messages tab).
   NOTE: .gv-bubbles and @keyframes gv-pulse are already defined above (main's
   redesigned dashboard owns them) — not re-declared here to avoid duplicate selectors. */
.gv-bubble { max-width: 75%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.gv-inbound { align-self: flex-start; background: #f1f3f4; color: #202124; border-bottom-left-radius: 4px; }
.gv-outbound { align-self: flex-end; background: #1a73e8; color: #fff; border-bottom-right-radius: 4px; }
/* Group threads: who sent an incoming bubble (labelled once per run, like a group chat). */
.gv-bubble-sender { align-self: flex-start; margin: 6px 0 0 6px; font-size: 12px; font-weight: 600; color: #5f6368; }

/* Reply composer — pinned to the bottom of the conversation pane */
.gv-composer {
  display: flex; gap: 8px; align-items: center;
  position: sticky; bottom: 0; margin-top: 12px;
  padding: 12px 0 6px; background: #fff;
  border-top: 1px solid #eceff1;
}
.gv-composer-input {
  flex: 1; min-width: 0; padding: 11px 16px; border: 1px solid #dadce0;
  border-radius: 22px; font-size: 14px; outline: none; background: #fff;
}
.gv-composer-input:focus { border-color: #1a73e8; }
.gv-composer-send {
  padding: 10px 20px; border: none; border-radius: 22px; background: #1a73e8;
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.gv-composer-send:disabled { opacity: 0.5; cursor: default; }
.gv-composer-icon {
  border: none; background: transparent; font-size: 20px; line-height: 1;
  padding: 6px; cursor: pointer; border-radius: 50%;
}
.gv-composer-icon:hover { background: #f1f3f4; }
.gv-composer-icon.is-recording { background: #fde7e9; animation: gv-pulse 1s infinite; }

/* Media in message bubbles */
.gv-bubble-img { display: block; max-width: 240px; max-height: 280px; border-radius: 12px; }
.gv-bubble-audio { display: block; max-width: 240px; }
.gv-bubble-text { margin-top: 6px; }
.gv-bubble:has(.gv-bubble-img), .gv-bubble:has(.gv-bubble-audio) { padding: 6px; }
/* A photo on its own = no coloured bubble frame around it (like Google Messages). */
.gv-bubble:has(.gv-bubble-img):not(:has(.gv-bubble-text)) { background: transparent; padding: 0; }
.gv-bubble-img { border-radius: 14px; }
/* Thin tinted ring shows direction: soft blue = you sent, light gray = received. */
.gv-outbound .gv-bubble-img { box-shadow: 0 0 0 2px #1a73e8; }
.gv-inbound .gv-bubble-img { box-shadow: 0 0 0 1.5px #dadce0; }

/* Billing-lock paywall: shown to a past-due customer whose grace period elapsed. */
.gv-locked { max-width: 460px; margin: 8vh auto 0; padding: 32px 28px; text-align: center;
  background: #fff; border: 1px solid #e3e8f1; border-radius: 16px; box-shadow: 0 6px 24px rgba(20,33,61,.06); }
.gv-locked-badge { font-size: 40px; line-height: 1; }
.gv-locked-title { font-size: 22px; margin: 12px 0 8px; color: #14213d; }
.gv-locked-sub { color: #5b6478; font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.gv-locked-btn { display: inline-block; background: #2563eb; color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 11px; font-weight: 700; font-size: 15px; }




/* ============================================================================
   Customer dashboard — full redesign (2026-07-06). Sidebar + audio-inbox.
   Geist type, blue accents, medium avatars, sleek waveform, glass sidebar.
   All scoped under .dv-app so the marketing site / admin / legal are untouched.
   ========================================================================== */
@font-face { font-family:'Geist'; src:url('/fonts/geist.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }

.dv-app{
  --dv-ink:#1b2436; --dv-ink2:#3d4658; --dv-muted:#828a99; --dv-faint:#aab1bf;
  --dv-line:#e9ebf0; --dv-line2:#e0e3ea; --dv-accent:#2563eb; --dv-accent2:#3b7bff;
  --dv-accentdk:#1d4ed8; --dv-soft:#eaf1ff; --dv-wave:#dbe0ea; --dv-waveon:#2563eb;
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  letter-spacing:-0.012em; color:var(--dv-ink);
  display:flex; height:100vh; overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(760px 520px at 108% 8%, rgba(94,120,220,0.10), transparent 60%),
    linear-gradient(180deg,#eef1f8 0%,#e9ecf4 100%);
}
.dv-app *{box-sizing:border-box;}

/* ---- sidebar ---- */
.dv-side{width:246px;flex:none;display:flex;flex-direction:column;padding:16px 14px;
  background:rgba(255,255,255,0.55);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-right:1px solid rgba(255,255,255,0.6);}
/* Resizable/collapsible panels: drag the handle, click the arrow to collapse. */
.dv-resizer{flex:none;width:7px;align-self:stretch;cursor:col-resize;position:relative;z-index:6;touch-action:none;}
.dv-resizer::before{content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;background:transparent;transition:background .12s;}
.dv-resizer:hover::before,.dv-resizer.dragging::before{background:var(--dv-accent);}
.dv-resizer-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:34px;padding:0;border-radius:6px;
  background:#fff;border:1px solid var(--dv-line2);box-shadow:0 1px 5px rgba(27,36,54,.16);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--dv-muted);opacity:0;transition:opacity .12s;}
.dv-resizer:hover .dv-resizer-btn,.dv-resizer.is-collapsed .dv-resizer-btn{opacity:1;}
.dv-resizer-btn::before{content:"‹";font-size:15px;line-height:1;}
.dv-resizer.is-collapsed{background:rgba(37,99,235,.06);}
.dv-resizer.is-collapsed .dv-resizer-btn::before{content:"›";}
.dv-side.dv-collapsed{padding-left:0;padding-right:0;overflow:hidden;}
.dv-threadcol.dv-collapsed{padding:0;overflow:hidden;border-right:0;}
/* Sidebar collapse toggle (chevron). Sits at the top-right of the sidebar. */
.dv-side{position:relative;}
.dv-side-toggle{position:absolute;top:14px;right:8px;width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--dv-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .12s,background .12s,transform .18s;z-index:2;}
.dv-side-toggle:hover{opacity:1;background:#eef1f7;color:var(--dv-ink2);}

/* Collapsed = icon-only RAIL: labels hide, icons stay so you can still navigate. */
.dv-app.dv-side-rail .dv-side{width:64px!important;padding:16px 8px;align-items:center;}
.dv-app.dv-side-rail .dv-side + .dv-resizer{display:none;}
.dv-app.dv-side-rail .dv-brand{justify-content:center;padding:6px 0 14px;gap:0;}
.dv-app.dv-side-rail .dv-brand > span:not(.dv-brand-dot){display:none;}
.dv-app.dv-side-rail .dv-acct{justify-content:center;padding:10px 0;gap:0;margin-bottom:10px;}
.dv-app.dv-side-rail .dv-acct-info{display:none;}
.dv-app.dv-side-rail .dv-nav{align-self:stretch;}
.dv-app.dv-side-rail .dv-navlink{position:relative;justify-content:center;padding:11px 0;gap:0;}
.dv-app.dv-side-rail .dv-navlink > span:not(.dv-badge){display:none;}
/* Unread badge → a small corner dot in rail mode (no room for the count). */
.dv-app.dv-side-rail .dv-navlink .dv-badge{position:absolute;top:6px;right:14px;margin:0;min-width:9px;width:9px;height:9px;padding:0;font-size:0;border-radius:50%;}
.dv-app.dv-side-rail .dv-foot{flex-direction:column;gap:10px;align-items:center;}
.dv-app.dv-side-rail .dv-foot .dv-navlink{flex:none;}
.dv-app.dv-side-rail .dv-foot .dv-navlink > span{display:none;}
/* In the rail, the toggle becomes a clear ›-expand button at the TOP (above the
   brand, its own row) so it's always obvious and clickable. */
.dv-app.dv-side-rail .dv-side-toggle{order:-1;position:static;margin:0 auto 8px;width:36px;height:32px;border:1px solid var(--dv-line2);background:#fff;opacity:1;transform:rotate(180deg);box-shadow:0 1px 4px rgba(27,36,54,.12);}
.dv-app.dv-side-rail .dv-side-toggle:hover{background:var(--dv-soft);color:var(--dv-accent);}
.dv-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;letter-spacing:-0.02em;padding:6px 8px 16px;color:var(--dv-ink);text-decoration:none;}
.dv-brand:hover{text-decoration:none;}
.dv-brand-dot{width:28px;height:28px;border-radius:9px;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(37,99,235,.35);}
.dv-brand-dot svg{width:16px;height:16px;stroke:#fff;fill:none;}
.dv-acct{display:flex;align-items:center;gap:11px;padding:10px 8px;margin-bottom:12px;border-top:1px solid rgba(27,36,54,.07);border-bottom:1px solid rgba(27,36,54,.07);min-width:0;}
.dv-acct .dv-av{width:38px;height:38px;font-size:0.92rem;}
.dv-acct-info{min-width:0;}
.dv-acct-name{font-weight:600;font-size:0.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-acct-meta{color:var(--dv-muted);font-size:0.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-nav{display:flex;flex-direction:column;gap:3px;}
.dv-navlink{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--dv-ink2);font-weight:500;font-size:0.95rem;cursor:pointer;text-decoration:none;transition:background .14s,color .14s;}
.dv-navlink svg{width:19px;height:19px;stroke:currentColor;fill:none;flex:none;}
.dv-navlink:hover{background:rgba(27,36,54,.05);color:var(--dv-ink);text-decoration:none;}
.dv-navlink.on{background:var(--dv-soft);color:var(--dv-accentdk);font-weight:600;}
.dv-navlink .dv-badge{margin-left:auto;font-size:0.72rem;font-weight:600;color:#fff;background:var(--dv-accent);border-radius:999px;padding:1px 7px;}
.dv-navlink .dv-badge:empty{display:none;}
.dv-foot{margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:8px;}
.dv-foot .dv-navlink{flex:1;}
.dv-foot #userbtn{flex:none;}

/* ---- main ---- */
.dv-main{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;}
/* The marketing site's global `section{padding:72px 0}` bled into the app's
   <section> views — a 72px dead strip above every view. Kill it here. */
.dv-app section{padding:0;}
.dv-view{display:none;} .dv-view.on{display:block;}
.dv-view.on.dv-view-fill{display:flex;flex-direction:column;flex:1;min-height:0;}
.dv-content{max-width:1080px;width:100%;margin:0 auto;padding:22px 44px 80px;}
.dv-stage-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 2px 20px;gap:16px;}
.dv-stage-head h1{margin:0;font-size:1.8rem;font-weight:600;letter-spacing:-0.03em;color:var(--dv-ink);}
.dv-stage-head .dv-sub{color:var(--dv-muted);font-size:0.9rem;margin-top:4px;}
.dv-filter{display:flex;gap:4px;background:rgba(255,255,255,.5);padding:3px;border-radius:999px;flex:none;}
.dv-filter button{border:0;background:transparent;font:inherit;font-size:0.83rem;font-weight:500;color:var(--dv-muted);padding:6px 14px;border-radius:999px;cursor:pointer;}
.dv-filter button.on{background:#fff;color:var(--dv-ink);box-shadow:0 1px 2px rgba(27,36,54,.1);}
.dv-listempty{color:var(--dv-muted);padding:20px 4px;}

/* ---- avatars (medium filled, white initial) ---- */
.dv-av{flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 2px rgba(27,36,54,.14);}

/* ---- voicemail hero ---- */
.dv-hero{background:#fff;border:1px solid var(--dv-line);border-radius:16px;padding:18px 22px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(27,36,54,.04),0 14px 36px -22px rgba(27,36,54,.20);}
.dv-hero-row{display:flex;align-items:center;gap:13px;}
.dv-hero .dv-av{width:44px;height:44px;font-size:1rem;}
.dv-who{flex:1;min-width:0;}
.dv-who .dv-nm{font-weight:600;font-size:1.02rem;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-who .dv-mt{color:var(--dv-muted);font-size:0.83rem;margin-top:1px;}
.dv-newpill{font-size:0.64rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--dv-accentdk);background:var(--dv-soft);padding:3px 9px;border-radius:999px;flex:none;}
.dv-transcript{font-size:0.96rem;line-height:1.55;color:var(--dv-ink2);letter-spacing:-0.01em;margin:14px 0 16px;}
.dv-actions{display:flex;gap:9px;flex-wrap:wrap;}
.dv-act{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--dv-line2);background:#fff;border-radius:11px;font:inherit;font-size:0.86rem;font-weight:500;color:var(--dv-ink2);padding:9px 15px;cursor:pointer;transition:background .13s,border-color .13s;}
.dv-act:hover{background:#f6f7fa;border-color:#d5d9e0;}
.dv-act svg{width:16px;height:16px;stroke:currentColor;fill:none;}
.dv-act.primary{background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));color:#fff;border-color:var(--dv-accent);box-shadow:0 3px 10px rgba(37,99,235,.3);text-decoration:none;}
.dv-act.primary svg{fill:#fff;stroke:none;}
.dv-act.danger:hover{color:#c0392b;border-color:#e6b4ac;background:#fdf4f2;}

/* ---- list rows (voicemail + calls) ---- */
.dv-list{padding:2px 0;}
.dv-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;cursor:pointer;transition:background .13s;}
.dv-row:hover{background:rgba(255,255,255,.55);}
.dv-row.is-active{background:var(--dv-soft);}
.dv-row .dv-av{width:44px;height:44px;font-size:1rem;}
.dv-mid{flex:1;min-width:0;}
.dv-mid .dv-t{display:flex;align-items:baseline;gap:10px;}
.dv-mid .dv-nm{font-weight:500;font-size:0.97rem;color:var(--dv-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-mid .dv-tm{margin-left:auto;flex:none;color:var(--dv-muted);font-size:0.8rem;font-variant-numeric:tabular-nums;}
.dv-mid .dv-pv{color:var(--dv-muted);font-size:0.89rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.dv-row.is-unread .dv-nm,.dv-row.is-unread .dv-pv{color:var(--dv-ink);font-weight:600;}
.dv-dot{width:8px;height:8px;border-radius:50%;background:var(--dv-accent);flex:none;}
.dv-callback{flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--dv-line2);background:#fff;border-radius:999px;font:inherit;font-size:0.84rem;font-weight:500;color:var(--dv-accentdk);padding:8px 15px;cursor:pointer;text-decoration:none;}
.dv-callback:hover{background:var(--dv-soft);border-color:#c9dbff;text-decoration:none;}
.dv-callback svg{width:15px;height:15px;stroke:currentColor;fill:none;}
.dv-missed{color:#c0392b;}

/* ---- messages 2-pane ---- */
.dv-2pane{display:flex;height:100%;min-height:0;flex:1;}
.dv-threadcol{width:340px;flex:none;border-right:1px solid rgba(27,36,54,.08);display:flex;flex-direction:column;overflow:hidden;padding:0;}
.dv-threadhead{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 8px;}
.dv-thtitle{font-size:1.35rem;font-weight:600;letter-spacing:-0.03em;}
.dv-thactions{display:flex;align-items:center;gap:6px;}
.dv-icon-btn{width:34px;height:34px;border:0;background:transparent;border-radius:9px;color:var(--dv-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dv-icon-btn:hover{background:#eef1f7;color:var(--dv-accent);}
/* "New chat" — a clear labeled compose button (was an easy-to-miss pencil icon). */
.dv-newbtn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;padding:7px 13px 7px 10px;border-radius:999px;font:inherit;font-size:0.85rem;font-weight:600;color:#fff;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));box-shadow:0 2px 6px rgba(37,99,235,.28);white-space:nowrap;}
.dv-newbtn:hover{filter:brightness(1.05);}
.dv-newbtn svg{flex:none;}
.dv-menu-wrap{position:relative;}
.dv-menu{position:absolute;right:0;top:38px;z-index:30;background:#ffffff;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--dv-line2);border-radius:11px;box-shadow:0 8px 24px rgba(27,36,54,.16);padding:5px;min-width:150px;}
.dv-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:8px;font:inherit;font-size:0.9rem;color:var(--dv-ink2);cursor:pointer;}
.dv-menu-item:hover{background:var(--dv-soft);color:var(--dv-accentdk);}
.dv-throws{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 18px;}
.dv-search{flex:none;margin:0 10px 8px;width:calc(100% - 20px);border:1px solid var(--dv-line2);border-radius:999px;padding:8px 14px;font:inherit;font-size:0.9rem;outline:none;background:rgba(255,255,255,.6);}
.dv-search:focus{border-color:var(--dv-accent);box-shadow:0 0 0 3px var(--dv-soft);}
.dv-throw{position:relative;}
.dv-throw-more-wrap{position:absolute;right:10px;top:12px;}
.dv-throw:hover .dv-tm{opacity:0;}
.dv-throw-more{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--dv-muted);cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(27,36,54,.14);}
.dv-throw:hover .dv-throw-more{display:flex;}
.dv-throw-more:hover{color:var(--dv-accent);}
.dv-throw .dv-menu{top:32px;}
/* Compose suggestions (people already messaged) */
.dv-compose-towrap{position:relative;}
.dv-compose-sugg{position:absolute;left:0;right:0;top:46px;z-index:5;background:#fff;border:1px solid var(--dv-line2);border-radius:12px;box-shadow:0 10px 30px rgba(27,36,54,.16);overflow:hidden;max-height:260px;overflow-y:auto;}
.dv-compose-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;}
.dv-compose-item:hover{background:var(--dv-soft);}
.dv-compose-item .dv-av{width:34px;height:34px;font-size:0.85rem;}
.dv-compose-info{min-width:0;}
.dv-compose-nm{font-weight:600;font-size:0.92rem;color:var(--dv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-compose-num{font-size:0.8rem;color:var(--dv-muted);}
/* Incoming-MMS placeholder (announced, not yet downloaded) */
.dv-downloading{color:var(--dv-accentdk);font-weight:600;}
.dv-b-downloading{display:flex;align-items:center;gap:8px;color:var(--dv-muted);font-style:italic;}
.dv-dl-spin{width:13px;height:13px;border:2px solid var(--dv-line2);border-top-color:var(--dv-accent);border-radius:50%;animation:dv-spin .8s linear infinite;flex:none;}
@keyframes dv-spin{to{transform:rotate(360deg);}}
/* New-message modal */
.dv-modal-overlay{position:fixed;inset:0;z-index:40;background:rgba(20,28,45,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;}
.dv-modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(20,28,45,.3);padding:22px;width:100%;max-width:420px;}
.dv-modal-title{font-size:1.15rem;font-weight:600;margin:0 0 14px;color:var(--dv-ink);}
.dv-modal-input{width:100%;border:1px solid var(--dv-line2);border-radius:11px;padding:11px 14px;font:inherit;font-size:0.95rem;outline:none;margin-bottom:10px;}
.dv-modal-input:focus{border-color:var(--dv-accent);box-shadow:0 0 0 3px var(--dv-soft);}
.dv-modal-area{resize:vertical;min-height:70px;}
.dv-modal-note{font-size:0.85rem;color:var(--dv-muted);margin:2px 2px 10px;}
.dv-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.dv-btn-ghost{border:1px solid var(--dv-line2);background:transparent;border-radius:999px;padding:10px 18px;font:inherit;font-weight:600;font-size:0.9rem;color:var(--dv-ink2);cursor:pointer;}
.dv-btn-ghost:hover{background:#f0f2f6;}
.dv-modal-actions .dv-send{flex:none;border:0;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));color:#fff;border-radius:999px;font:inherit;font-weight:600;font-size:0.9rem;padding:10px 22px;cursor:pointer;box-shadow:0 3px 10px rgba(37,99,235,.3);}
.dv-modal-actions .dv-send:disabled{opacity:.55;cursor:default;}
.dv-throw{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;cursor:pointer;transition:background .13s;}
.dv-throw:hover{background:rgba(255,255,255,.6);}
.dv-throw.is-active{background:var(--dv-soft);}
.dv-throw .dv-av{width:42px;height:42px;font-size:0.98rem;}
.dv-throw.is-unread .dv-nm{color:var(--dv-ink);font-weight:700;}
.dv-throw.is-unread .dv-pv{color:var(--dv-ink);font-weight:600;}
.dv-conv{flex:1;min-width:0;display:flex;flex-direction:column;}
.dv-convhead{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid rgba(27,36,54,.07);flex:none;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);}
.dv-convhead .dv-av{width:36px;height:36px;font-size:0.9rem;}
.dv-convhead .dv-nm{font-weight:600;font-size:1rem;}
.dv-tofield{flex:1;display:flex;align-items:center;gap:8px;position:relative;min-width:0;}
.dv-tolabel{color:var(--dv-muted);font-size:0.95rem;flex:none;}
.dv-chips{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;}
.dv-toinput{flex:1;border:0;background:transparent;font:inherit;font-size:1rem;outline:none;color:var(--dv-ink);min-width:80px;}
.dv-chip{display:inline-flex;align-items:center;gap:5px;background:var(--dv-soft);color:var(--dv-accentdk);border-radius:999px;padding:4px 6px 4px 11px;font-size:0.88rem;font-weight:500;max-width:220px;}
.dv-chip > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-chip-x{border:0;background:transparent;color:var(--dv-accentdk);cursor:pointer;font-size:1.05rem;line-height:1;padding:0 2px;opacity:.7;}
.dv-chip-x:hover{opacity:1;}
.dv-tofield .dv-compose-sugg{top:40px;left:0;right:0;}
.dv-convhead .dv-sub{color:var(--dv-muted);font-size:0.82rem;}
.dv-convback{display:none;border:0;background:transparent;cursor:pointer;color:var(--dv-ink2);padding:4px;border-radius:8px;margin-right:2px;}
.dv-convback svg{width:20px;height:20px;stroke:currentColor;fill:none;}
.dv-bubbles{flex:1;min-height:0;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:8px;}
/* Bottom-anchor WITHOUT justify-content:flex-end — that kills scrolling once
   content overflows (the classic flexbox scroll trap). margin-top:auto on the
   first bubble pushes a short thread to the bottom and long threads scroll. */
.dv-bubbles > :first-child{margin-top:auto;}
.dv-b{max-width:74%;padding:10px 15px;font-size:0.95rem;line-height:1.45;border-radius:18px;word-break:break-word;}
.dv-b.dv-inbound{align-self:flex-start;background:#f1f3f7;color:var(--dv-ink);border-bottom-left-radius:5px;}
.dv-b.dv-outbound{align-self:flex-end;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));color:#fff;border-bottom-right-radius:5px;}
.dv-b-img{max-width:240px;max-height:280px;border-radius:12px;display:block;}
.dv-b-sender{align-self:flex-start;font-size:0.74rem;font-weight:600;color:var(--dv-muted);margin:4px 0 -2px 6px;}
.dv-composer{display:flex;align-items:flex-end;gap:10px;padding:13px 16px;border-top:1px solid var(--dv-line);flex:none;}
.dv-composer input{flex:1;min-width:0;border:1px solid var(--dv-line2);border-radius:999px;padding:11px 16px;font:inherit;font-size:0.94rem;outline:none;}
.dv-composer input:focus{border-color:var(--dv-accent);box-shadow:0 0 0 3px var(--dv-soft);}
/* Attachment preview: a picked/dropped/pasted file waits here until Send. */
.dv-attachrow{display:flex;padding:10px 16px 2px;}
.dv-attach-chip{position:relative;display:inline-flex;align-items:center;background:#eef1f7;border-radius:12px;padding:6px;max-width:220px;}
.dv-attach-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block;}
.dv-attach-name{font-size:0.85rem;color:var(--dv-ink2);padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-attach-x{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border:0;border-radius:50%;background:#111;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.dv-attach-x:hover{background:#333;}
.dv-dragging{outline:2px dashed var(--dv-accent);outline-offset:-10px;background:var(--dv-soft);}
/* "Draft:" preview tag in the thread list (unsent text waiting in a conversation). */
.dv-draft-tag{color:#c0392b;font-weight:600;}
/* Message box: grows with the text (auto-grow in JS), then scrolls inside. */
.dv-composer textarea{flex:1;min-width:0;border:1px solid var(--dv-line2);border-radius:20px;padding:9px 16px;font:inherit;font-family:inherit;font-size:0.94rem;line-height:1.35;outline:none;resize:none;max-height:140px;overflow-y:auto;}
.dv-composer textarea:focus{border-color:var(--dv-accent);box-shadow:0 0 0 3px var(--dv-soft);}
.dv-composer .dv-send{flex:none;border:0;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));color:#fff;border-radius:999px;font:inherit;font-weight:600;font-size:0.9rem;padding:11px 20px;cursor:pointer;box-shadow:0 3px 10px rgba(37,99,235,.3);}
.dv-composer .dv-send:disabled{opacity:.55;cursor:default;}
.dv-cicon{flex:none;width:38px;height:38px;border:0;background:transparent;border-radius:50%;color:var(--dv-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.05rem;}
.dv-cicon:hover{background:#f0f2f6;color:var(--dv-ink2);}
.dv-cicon.is-recording{background:#fdecec;color:#c0392b;}
/* Composer: normal controls row + the recording bar occupy the same space. */
.dv-crow{display:flex;align-items:flex-end;gap:10px;flex:1;min-width:0;}
.dv-recbar{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.dv-rec-x{flex:none;width:38px;height:38px;border:0;background:#f0f2f6;border-radius:50%;color:var(--dv-muted);cursor:pointer;font-size:0.95rem;display:flex;align-items:center;justify-content:center;}
.dv-rec-x:hover{background:#e6e9ef;color:var(--dv-ink2);}
.dv-rec-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#e5484d;animation:gv-pulse 1.1s infinite;}
.dv-rec-time{flex:none;font-variant-numeric:tabular-nums;font-size:0.9rem;color:var(--dv-ink2);font-weight:600;min-width:34px;}
.dv-rec-wave{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:2px;overflow:hidden;}
.dv-rec-bar{flex:1;min-width:2px;height:100%;background:var(--dv-accent);border-radius:999px;transform:scaleY(0.12);transform-origin:center;transition:transform .06s linear;opacity:.85;}
/* Review waveform: dim by default, the played portion turns solid as it plays. */
.dv-rev-wave .dv-rec-bar{opacity:.3;transition:opacity .05s linear;}
.dv-rev-wave .dv-rec-bar.played{opacity:1;}
/* Round icon buttons: ⏹ stop / ▶ play / ➤ send. */
.dv-rec-stop,.dv-rec-play,.dv-rec-go{flex:none;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dv-rec-stop{background:#e5484d;}
.dv-rec-stop::before{content:"";width:13px;height:13px;border-radius:3px;background:#fff;}
.dv-rec-play{background:var(--dv-soft);}
.dv-rec-play::before{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--dv-accentdk);margin-left:2px;}
.dv-rec-play.is-playing::before{border:0;width:10px;height:12px;margin:0;background:var(--dv-accentdk);-webkit-mask:linear-gradient(#000 0 0) 0/34% 100% no-repeat,linear-gradient(#000 0 0) 100%/34% 100% no-repeat;mask:linear-gradient(#000 0 0) 0/34% 100% no-repeat,linear-gradient(#000 0 0) 100%/34% 100% no-repeat;}
.dv-rec-go{background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));color:#fff;font-size:1rem;box-shadow:0 3px 10px rgba(37,99,235,.3);}
.dv-notify-cta{flex:none;display:block;width:calc(100% - 20px);margin-left:10px;margin-right:10px;margin:6px 0 8px;padding:9px 14px;border:0;border-radius:11px;background:var(--dv-soft);color:var(--dv-accentdk);font:inherit;font-size:0.88rem;font-weight:600;cursor:pointer;text-align:center;}

/* ---- empty detail (voicemail all-caught-up / calls) ---- */
.dv-empty{padding:60px 10px;text-align:center;color:var(--dv-muted);}
.dv-empty-hi{font-size:1.4rem;font-weight:600;color:var(--dv-ink);margin:0 0 4px;}

/* ---- voice player (restyle the shared gv-vn to the sleek look) ---- */
.dv-app .gv-vn{display:flex;align-items:center;gap:14px;margin:15px 0 6px;max-width:none;min-width:0;}
.dv-app .gv-vn-btn{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(37,99,235,.38);}
.dv-app .gv-vn-btn svg{fill:#fff;width:17px;height:17px;}
.dv-app .gv-vn-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;}
.dv-app .gv-vn-bar{flex:1 1 0;min-width:2px;border-radius:999px;background:var(--dv-wave);opacity:1;}
.dv-app .gv-vn-bar.played{background:var(--dv-waveon);}
.dv-app .gv-vn-time{flex:none;font-size:0.8rem;color:var(--dv-muted);font-variant-numeric:tabular-nums;}
/* voice-note player INSIDE a message bubble: compact, inherits bubble color */
.dv-app .dv-b .gv-vn{margin:2px 0;min-width:180px;}
.dv-app .dv-b.dv-outbound .gv-vn-btn{background:#fff;}
.dv-app .dv-b.dv-outbound .gv-vn-btn svg{fill:var(--dv-accent);}
.dv-app .dv-b.dv-outbound .gv-vn-bar{background:rgba(255,255,255,.45);}
.dv-app .dv-b.dv-outbound .gv-vn-bar.played{background:#fff;}
.dv-app .dv-b.dv-outbound .gv-vn-time{color:rgba(255,255,255,.9);}

/* ---- skeleton ---- */
.dv-skel-box{background:rgba(255,255,255,.6);border-radius:8px;animation:dv-pulse 1.3s ease-in-out infinite;color:transparent;}
.dv-skel-line{height:11px;margin:5px 0;border-radius:6px;}
@keyframes dv-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}

/* ---- billing-lock paywall ---- */
.dv-locked{max-width:520px;margin:8vh auto;text-align:center;padding:0 24px;}
.dv-locked-badge{font-size:40px;}
.dv-locked h2{font-size:1.5rem;margin:12px 0 10px;color:var(--dv-ink);}
.dv-locked p{color:var(--dv-ink2);line-height:1.55;margin:0 0 18px;}
.dv-locked-btn{display:inline-block;background:linear-gradient(180deg,var(--dv-accent2),var(--dv-accent));color:#fff;text-decoration:none;padding:13px 26px;border-radius:12px;font-weight:600;box-shadow:0 3px 10px rgba(37,99,235,.3);}

/* ---- small screens ---- */
@media (max-width:820px){
  .dv-app{flex-direction:column;height:100vh;overflow-x:hidden;}
  .dv-main{overflow-x:hidden;}
  .dv-side{width:100%;flex-direction:row;align-items:center;gap:6px;padding:8px 12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.6);overflow-x:auto;flex:none;}
  .dv-brand span{display:none;}
  .dv-acct{display:none;}
  .dv-nav{flex-direction:row;gap:4px;}
  .dv-navlink{padding:8px 12px;font-size:0.9rem;white-space:nowrap;}
  .dv-foot{margin:0 0 0 auto;padding:0;}
  .dv-foot .dv-navlink span{display:none;}
  .dv-content{padding:22px 18px 60px;max-width:none;overflow-x:hidden;}
  .dv-stage-head{flex-wrap:wrap;gap:8px;}
  .dv-stage-head h1{font-size:1.5rem;}
  .dv-hero{padding:18px;}
  /* messages: one pane at a time */
  .dv-2pane{flex-direction:column;}
  .dv-threadcol{width:auto;border-right:0;border-bottom:1px solid rgba(27,36,54,.08);}
  .dv-2pane.show-conv .dv-threadcol{display:none;}
  .dv-2pane:not(.show-conv) .dv-conv{display:none;}
  .dv-convback{display:flex;}
}