@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: rgba(37, 99, 235, 0.1);
    --brand-2: #dbeafe;
    --sidebar-bg: #0f172a;
    --sidebar-bg-gradient: linear-gradient(180deg, #0f172a 0%, #16244a 55%, #1e293b 100%);
    --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
    --sidebar-text: #94a3b8;
    --outer-bg: #dbeafe;
    --bg-page: #f8fafc;
    --bg-alt: #f8fafc;
    --bg-card: #ffffff;
    --bg-tint: #eff6ff;
    --footer-bg: #14181f;
    --border-color: #e2e8f0;
    --border-color-2: #cbd5e1;
    --text-heading: #0f172a;
    --text-body: #565d68;
    --text-muted: #94a3b8;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --danger-border: #fecaca;
    --success-bg: #ecfdf5;
    --success-border: #a7f3d0;
    --success-text: #047857;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --stat-blue-bg: #dbeafe;
    --stat-blue-text: #2563eb;
    --stat-green-bg: #dcfce7;
    --stat-green-text: #16a34a;
    --stat-violet-bg: #f5f3ff;
    --stat-violet-text: #7c3aed;
    --stat-amber-bg: #fffbeb;
    --stat-amber-text: #d97706;
    --accent-2: #d97706;
    --accent-2-light: rgba(217, 119, 6, 0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 20px 44px rgba(15, 23, 42, 0.1);
}

* {
    box-sizing: border-box;
}

/* The browser's default styling for [hidden] is display:none, but any class rule that sets its
   own `display` (e.g. `.some-flex-row { display: flex; }`) has equal-or-higher specificity and
   silently wins, since author styles always beat the UA stylesheet — the element stays visible
   even with the hidden attribute set. This has already caused several real, live bugs in this
   codebase (elements meant to be JS/PHP-toggled showing up permanently). `hidden` means "not
   shown, full stop," so it gets the one deliberate use of !important in this file. */
[hidden] {
    display: none !important;
}

/* Dashboard-only dark mode, toggled via the topbar moon icon (see initTopbarControls in app.js).
   Scoped to pages that render the dashboard shell so it never affects the public landing page. */
body.dark:has(.dashboard-layout) {
    --outer-bg: #05070d;
    --bg-page: #0f172a;
    --bg-alt: #16213a;
    --bg-card: #131c30;
    --bg-tint: #1b2743;
    --border-color: #26324a;
    --border-color-2: #384868;
    --text-heading: #f1f5f9;
    --text-body: #cbd5e1;
    --text-muted: #7c8aa5;
    --primary-light: rgba(59, 130, 246, 0.18);
    /* Every success/warning/danger tinted surface (badges, banners, the connected-provider card,
       test-connection results) was built with light-mode-only pastel hex values, so they showed up
       as jarring bright patches in dark mode — this is what actually made dark mode "look wrong"
       across the dashboard. Redefining the tokens here fixes every one of them at once. */
    --danger: #f87171;
    --danger-bg: rgba(220, 38, 38, 0.18);
    --danger-border: rgba(248, 113, 113, 0.4);
    --success-bg: rgba(16, 185, 129, 0.16);
    --success-border: rgba(52, 211, 153, 0.4);
    --success-text: #6ee7b7;
    --warning-bg: rgba(217, 119, 6, 0.2);
    --warning-text: #fbbf24;
    --stat-blue-bg: rgba(37, 99, 235, 0.18);
    --stat-blue-text: #93c5fd;
    --stat-green-bg: rgba(22, 163, 74, 0.18);
    --stat-green-text: #86efac;
    --stat-violet-bg: rgba(124, 58, 237, 0.2);
    --stat-violet-text: #c4b5fd;
    --stat-amber-bg: rgba(217, 119, 6, 0.2);
    --stat-amber-text: #fcd34d;
}

body.dark:has(.dashboard-layout) .dashboard-layout {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark:has(.dashboard-layout) .topbar {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-alt) 100%);
}

body.dark:has(.dashboard-layout) .icb,
body.dark:has(.dashboard-layout) .btn-outline {
    background: var(--bg-alt);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-body);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------- Buttons ---------- */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease, filter 0.2s ease;
}

button:hover,
.btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
    text-decoration: none;
    transform: translateY(-1px);
}

button:active,
.btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

button:disabled,
.btn:disabled {
    background: #cbd5e1;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--border-color);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    box-shadow: none;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
}

.btn-block {
    width: 100%;
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    box-shadow: none;
}

/* ---------- Forms ---------- */
label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 8px;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--text-heading);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 20px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

input[type="radio"],
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin-right: 6px;
}

input[type="color"] {
    width: 64px;
    height: 42px;
    padding: 3px;
    cursor: pointer;
    margin-bottom: 20px;
}

fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin: 0 0 20px;
}

fieldset:disabled {
    opacity: 0.5;
}

legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    padding: 0 6px;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    margin-right: 20px;
    margin-bottom: 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    font-weight: 400;
    margin-bottom: 24px;
}

/* Pill toggle switch, styled directly on the native checkbox (appearance:none) rather than a
   separate track/thumb markup structure — every .toggle-label site keeps the exact same
   <input type="checkbox"> the JS already reads via .checked / data-was-checked, so nothing
   needed to change beyond CSS. Two classes reliably outrank the global
   input[type="checkbox"] { width:16px; ... } rule regardless of source order. */
.toggle-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 42px;
    height: 24px;
    min-width: 42px;
    margin: 0 12px 0 0;
    border-radius: 999px;
    border: none;
    background: var(--border-color-2);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.toggle-label input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease;
}

.toggle-label input[type="checkbox"]:checked {
    background: var(--primary);
}

.toggle-label input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.toggle-label input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Safe default: never overlaps whatever comes before it. The snug negative margin some callers rely
   on lives in the scoped rule below instead of here, since it only makes sense right after a form
   field — applied unconditionally it pulled this text up into a heading or plain paragraph with
   nothing above it to compensate for, which is what made "Stripe"/"PayPal"/"Square" on the
   E-commerce page render with their description text overlapping the name. */
.field-hint {
    margin: 6px 0 20px;
    font-size: 12.5px;
    color: var(--text-muted, #6b7280);
    line-height: 1.4;
}

/* Pulls the hint up snug against the labeled field or control it describes, closing the ~20px gap
   that field's own margin-bottom otherwise leaves below it, so the hint reads as attached to what
   it's explaining rather than floating in space. Scoped to the specific pairing this is meant for —
   a hint immediately following a <label> or a real text-entry control — so it never fires against a
   heading or a bare paragraph the way the old unconditional version did.
   The input[type="..."] branch is wrapped in :where() specifically so it carries ZERO specificity of
   its own (an :not()-chain version of this tried the same goal by exclusion instead and, each :not()
   costing a full specificity point, ended up beating .wizard-field .field-hint's 10px override below
   — a real, live regression where Lead Notification Email on Widget Settings rendered with its hint
   overlapping the input; a same-specificity, non-:where() rewrite of the list still lost the same way
   for a subtler reason, input[type="x"] itself counting as two selectors, not one). Zero specificity
   here means that override always wins on its own terms, not by outrunning this one. */
label + .field-hint,
:where(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="file"]) + .field-hint,
select + .field-hint,
textarea + .field-hint {
    margin-top: -18px;
}

.error-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 14px;
}

.success-message {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: var(--radius-sm);
    color: var(--success-text);
    font-size: 14px;
}

.warning-message {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-text);
    border-radius: var(--radius-sm);
    color: var(--warning-text);
    font-size: 14px;
}

.ecommerce-off-banner {
    background: var(--warning-bg);
    border: 1px solid var(--warning-text);
    color: var(--warning-text);
    font-size: 13.5px;
    line-height: 1.5;
}

.ecommerce-off-banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.billing-redirect-note {
    background: var(--primary-light);
    border: 1px solid var(--border-color-2);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-heading);
}

.billing-redirect-note a {
    color: var(--primary-dark);
    font-weight: 600;
}

.error-list li + li {
    margin-top: 4px;
}

/* ---------- Brand mark ---------- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.site-logo-img {
    height: 32px;
    width: auto;
    max-width: 160px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.auth-brand .site-logo-img,
.wizard-brand .site-logo-img {
    height: 36px;
}

/* ---------- Auth pages (login / signup) ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-brand .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.auth-brand .brand-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
}

.auth-card h1 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 4px;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.auth-form button {
    width: 100%;
    margin-top: 4px;
}

.auth-footer {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 20px;
}

/* ---------- Landing page: navbar ---------- */
html {
    scroll-behavior: smooth;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.navbar-links a:not(.btn) {
    color: var(--text-body);
    font-weight: 500;
    font-size: 14px;
}

.navbar-links a:not(.btn):hover {
    color: var(--primary);
    text-decoration: none;
}

.navbar-links a.active {
    color: var(--primary);
    font-weight: 700;
}

/* ---------- Landing page: hero ---------- */
.hero-section {
    position: relative;
    overflow: hidden;
    padding: 64px 40px 100px;
    background: #ffffff;
}

.hero-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    z-index: 0;
}

.blob-1 {
    width: 420px;
    height: 420px;
    background: var(--primary);
    top: -140px;
    left: -120px;
}

.blob-2 {
    width: 380px;
    height: 380px;
    background: #a78bfa;
    top: 60px;
    right: -140px;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.hero-heading {
    font-size: clamp(32px, 4.5vw, 48px);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 20px;
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-content .hero-subtitle {
    font-size: 18px;
    color: var(--text-body);
    max-width: 480px;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- Landing page: mock widget visual ---------- */
.hero-visual {
    animation: waychat-float 5s ease-in-out infinite;
}

@keyframes waychat-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mock-browser {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.mock-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: #f3f4f6;
    border-bottom: 1px solid var(--border-color);
}

.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
}

.mock-dot:nth-child(1) { background: #f87171; }
.mock-dot:nth-child(2) { background: #fbbf24; }
.mock-dot:nth-child(3) { background: #34d399; }

.mock-browser-body {
    position: relative;
    padding: 24px;
    min-height: 360px;
    background: #f9fafb;
}

.mock-page-line {
    height: 10px;
    border-radius: 4px;
    background: #e5e7eb;
    margin-bottom: 12px;
}

.mock-chat-widget {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 260px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.mock-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--primary);
    color: #fff;
}

.mock-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.mock-chat-title {
    font-size: 13px;
    font-weight: 600;
}

.mock-chat-status {
    font-size: 11px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
}

.mock-chat-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f9fafb;
}

.mock-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.mock-bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mock-bubble-bot {
    align-self: flex-start;
    background: #eef2ff;
    color: var(--text-heading);
    border-bottom-left-radius: 2px;
}

.mock-bubble-user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.mock-chat-input {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    background: #fff;
}

.mock-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: waychat-typing 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes waychat-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Landing page: trust / logos ---------- */
.trust-section {
    text-align: center;
    padding: 40px 0 80px;
    background: var(--bg-alt);
}

.trust-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 28px;
    padding: 0 40px;
}

.trust-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.trust-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 64px;
    padding: 0 32px;
    animation: trust-scroll 24s linear infinite;
}

.trust-marquee:hover .trust-track {
    animation-play-state: paused;
}

@keyframes trust-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.trust-logo {
    font-size: 20px;
    font-weight: 700;
    color: #9ca3af;
    white-space: nowrap;
    filter: grayscale(1);
    opacity: 0.7;
    transition: opacity 0.2s ease, filter 0.2s ease, color 0.2s ease;
}

.trust-logo:hover {
    opacity: 1;
    filter: grayscale(0);
    color: var(--primary);
}

/* ---------- Landing page: section header ---------- */
.section-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 56px;
}

.section-header h2 {
    font-size: 32px;
    margin-bottom: 12px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 16px;
}

/* ---------- Landing page: features ---------- */
.features-section {
    padding: 100px 40px;
    background: #ffffff;
}

.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.feature-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent, var(--primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.feature-card.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card--blue { --accent: #2563eb; }
.feature-card--purple { --accent: #7c3aed; }
.feature-card--green { --accent: #059669; }
.feature-card--orange { --accent: #ea580c; }

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card--blue .feature-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.feature-card--purple .feature-icon { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
.feature-card--green .feature-icon { background: linear-gradient(135deg, #6ee7b7, #059669); }
.feature-card--orange .feature-icon { background: linear-gradient(135deg, #fdba74, #ea580c); }

.feature-card:hover .feature-icon {
    transform: scale(1.08) rotate(-4deg);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Landing page: how it works ---------- */
.steps-section {
    padding: 100px 40px;
    background: var(--bg-alt);
}

.steps-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.step-card {
    flex: 1;
    max-width: 240px;
    text-align: center;
    padding: 20px 16px;
    border-radius: var(--radius-md);
    transition: background-color 0.3s ease;
}

.step-card:hover {
    background: rgba(37, 99, 235, 0.05);
}

.step-number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    margin: 0 auto 16px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.step-number.is-visible {
    opacity: 1;
    transform: scale(1);
}

.step-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.step-card p {
    font-size: 14px;
    color: var(--text-muted);
}

.step-connector {
    flex: 0 0 60px;
    height: 2px;
    margin-top: 56px;
    position: relative;
    background: repeating-linear-gradient(90deg, var(--border-color) 0 8px, transparent 8px 14px);
    overflow: hidden;
}

.step-connector::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease 0.2s;
}

.steps-section.is-visible .step-connector::before {
    transform: scaleX(1);
}

.step-connector::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--border-color);
    z-index: 1;
}

/* ---------- Landing page: CTA ---------- */
.cta-section {
    position: relative;
    max-width: 1160px;
    margin: 0 auto 100px;
    padding: 64px 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
}

.cta-blob-1 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
    top: -120px;
    left: -60px;
    animation: cta-float-1 9s ease-in-out infinite;
}

.cta-blob-2 {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
    bottom: -100px;
    right: -40px;
    animation: cta-float-2 11s ease-in-out infinite;
}

@keyframes cta-float-1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 20px); }
}

@keyframes cta-float-2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-25px, -15px); }
}

.cta-section h2 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 12px;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    margin-bottom: 28px;
}

.btn-white {
    background: #fff;
    color: var(--primary);
}

.btn-white:hover {
    background: #f3f4f6;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.btn-glow:hover {
    animation: btn-pulse 1.6s ease-out infinite;
}

@keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.15); }
    70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0), 0 6px 16px rgba(0, 0, 0, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 6px 16px rgba(0, 0, 0, 0.15); }
}

/* ---------- Landing page: footer ---------- */
.site-footer {
    position: relative;
    background: #0f172a;
    color: var(--sidebar-text);
    padding: 0 40px 32px;
}

.footer-top-line {
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #7c3aed, var(--primary));
    background-size: 200% 100%;
    animation: footer-line-flow 6s linear infinite;
}

@keyframes footer-line-flow {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding: 56px 0 40px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.footer-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sidebar-text);
    max-width: 240px;
    margin: 14px 0 20px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-icon svg {
    width: 16px;
    height: 16px;
}

.social-icon:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.footer-col h4 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.footer-col a {
    display: block;
    color: var(--sidebar-text);
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-col a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-newsletter-text {
    font-size: 13px;
    color: var(--sidebar-text);
    margin-bottom: 14px;
}

.footer-newsletter {
    display: flex;
    gap: 8px;
}

.footer-newsletter input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding: 10px 12px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.footer-newsletter input::placeholder {
    color: #64748b;
}

.footer-newsletter input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.footer-newsletter button {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copy {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

/* ---------- Hero: social proof row ---------- */
.hero-proof {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.avatar-stack {
    display: flex;
}

.avatar-stack-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #fff;
    margin-left: -10px;
    box-shadow: var(--shadow-sm);
}

.avatar-stack-item:first-child {
    margin-left: 0;
}

.hero-proof-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: var(--text-body);
}

.stars {
    color: var(--accent-2);
    letter-spacing: 2px;
    font-size: 14px;
}

/* ---------- Section eyebrow / shared header ---------- */
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    background: var(--primary-light);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

/* ---------- Why choose us (reuses .features-grid / .feature-card) ---------- */
.why-us-section {
    padding: 100px 40px;
    background: #ffffff;
}

/* ---------- Zigzag alternating feature sections ---------- */
.zigzag-section {
    padding: 96px 40px;
}

.zigzag-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.zigzag-inner--reverse .zigzag-text {
    order: 2;
}

.zigzag-inner--reverse .zigzag-visual {
    order: 1;
}

.zigzag-text h2 {
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 16px;
}

.zigzag-text > p {
    font-size: 16px;
    color: var(--text-body);
    line-height: 1.65;
    max-width: 460px;
    margin-bottom: 24px;
}

.checklist {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-heading);
}

.check-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.check-icon svg {
    width: 12px;
    height: 12px;
}

.link-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--primary);
}

.link-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.link-cta::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.25s ease;
}

.link-cta:hover {
    text-decoration: none;
}

.link-cta:hover::after {
    width: 100%;
}

.link-cta:hover svg {
    transform: translateX(4px);
}

/* ---------- Shared mockup card (zigzag / demo visuals) ---------- */
.mockup-card {
    max-width: 400px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 24px;
}

.mockup-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-heading);
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: waychat-livedot 2s infinite;
}

@keyframes waychat-livedot {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.mockup-divider {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0;
}

.demo-bubble {
    display: inline-block;
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    background: #eef2ff;
    color: var(--text-heading);
    font-size: 13px;
    line-height: 1.5;
}

/* Sources mockup */
.source-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-body);
}

.source-row:last-of-type {
    border-bottom: none;
}

.source-icon {
    font-size: 16px;
}

/* Leads mockup */
.lead-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.lead-row:last-of-type {
    border-bottom: none;
}

.lead-row-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.lead-row-info strong {
    font-size: 14px;
    color: var(--text-heading);
}

.lead-row-info span {
    color: var(--text-muted);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.stat-pill {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-2-light);
    color: #b45309;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 999px;
}

/* Voice mockup */
.voice-visual {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.mic-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.waveform {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.waveform span {
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), #7c3aed);
    animation: waychat-wave 1.2s ease-in-out infinite;
}

.waveform span:nth-child(1) { height: 12px; animation-delay: 0s; }
.waveform span:nth-child(2) { height: 24px; animation-delay: 0.1s; }
.waveform span:nth-child(3) { height: 36px; animation-delay: 0.2s; }
.waveform span:nth-child(4) { height: 20px; animation-delay: 0.3s; }
.waveform span:nth-child(5) { height: 32px; animation-delay: 0.4s; }
.waveform span:nth-child(6) { height: 16px; animation-delay: 0.5s; }
.waveform span:nth-child(7) { height: 28px; animation-delay: 0.6s; }

@keyframes waychat-wave {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1); }
}

/* Customization preview mockup */
.swatch-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
}

.swatch.is-active {
    border-color: var(--text-heading);
}

.position-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.position-toggle span {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg-alt);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.position-toggle span.is-active {
    background: var(--primary-light);
    color: var(--primary);
}

/* Analytics mockup (light) */
.stat-grid--light .stat-box {
    background: var(--bg-alt);
}

.stat-grid--light .stat-value {
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-grid--light .stat-label {
    color: var(--text-muted);
}

/* ---------- Demo / dark CTA section ---------- */
.demo-section {
    position: relative;
    overflow: hidden;
    padding: 100px 40px;
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    color: #fff;
}

.demo-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.demo-text h2 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 16px;
}

.demo-text p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    line-height: 1.6;
    max-width: 460px;
    margin-bottom: 32px;
}

.demo-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.mockup-card--dark {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.mockup-card--dark .mockup-card-title {
    color: #fff;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    background: linear-gradient(90deg, #60a5fa, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------- Testimonials ---------- */
.testimonials-section {
    padding: 100px 40px;
    background: var(--bg-alt);
}

.testimonial-carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonial-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 4px 12px;
    flex: 1;
    scrollbar-width: none;
}

.testimonial-track::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    scroll-snap-align: start;
    flex: 0 0 320px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.testimonial-quote {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.6;
    margin: 12px 0 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.testimonial-author-info strong {
    color: var(--text-heading);
    font-size: 14px;
}

.testimonial-author-info span {
    color: var(--text-muted);
}

.carousel-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-heading);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.carousel-arrow:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* ---------- Integrations ---------- */
.integrations-section {
    padding: 100px 40px;
    background: #ffffff;
}

.integrations-grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.integration-badge {
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-heading);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.integration-badge:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    color: var(--primary);
    background: #fff;
}

/* ---------- Pricing page ---------- */
.page-hero {
    text-align: center;
    padding: 80px 40px 40px;
    max-width: 640px;
    margin: 0 auto;
}

.page-hero h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 12px;
}

.page-hero p {
    color: var(--text-muted);
    font-size: 17px;
}

.pricing-section {
    padding: 40px 40px 100px;
}

.pricing-card {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 44px 32px 36px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.pricing-plan-name {
    font-size: 20px;
    margin: 8px 0 20px;
}

.pricing-amount {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}

.pricing-currency {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.pricing-value {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-heading);
}

.pricing-period {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.pricing-note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 8px 0 28px;
}

.pricing-features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text-heading);
}

/* ---------- FAQ accordion ---------- */
.faq-section {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 40px 100px;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    cursor: pointer;
}

.faq-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--primary);
    transition: transform 0.25s ease;
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 300px;
}

.faq-answer-inner {
    padding: 0 4px 20px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* ---------- Rich footer additions ---------- */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--sidebar-text);
}

.footer-contact a {
    color: var(--sidebar-text);
}

.footer-contact a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: #64748b;
    font-size: 13px;
}

.footer-bottom-links a:hover {
    color: #fff;
}

/* ---------- Dashboard layout ---------- */
@keyframes waychat-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes waychat-ping {
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

@keyframes waychat-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

body:has(.dashboard-layout) {
    background: var(--outer-bg);
    padding: 14px;
}

/* Dashboard-only font — scoped to .dashboard-layout so the public marketing site (which shares
   this stylesheet) keeps its own Inter/Space Grotesk pairing untouched. Redefining --font-heading
   here (rather than only setting font-family on the wrapper) also repoints every rule that already
   reads var(--font-heading) — hub-stat-value, sidebar-brand, convo-list-title, h1-h3 — without
   having to re-target each of them individually. */
.dashboard-layout {
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.dashboard-layout,
.dashboard-layout button,
.dashboard-layout input,
.dashboard-layout select,
.dashboard-layout textarea {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.dashboard-layout h1,
.dashboard-layout h2,
.dashboard-layout h3 {
    font-family: var(--font-heading);
}

/* The signup/onboarding wizard (.wizard-body) is its own separate layout, not nested inside
   .dashboard-layout, so it never picked up the Outfit override above even though it's the very
   first thing a new customer sees before landing in the dashboard proper. Same treatment here. */
.wizard-body {
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.wizard-body,
.wizard-body button,
.wizard-body input,
.wizard-body select,
.wizard-body textarea {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.wizard-body h1,
.wizard-body h2,
.wizard-body h3 {
    font-family: var(--font-heading);
}

.dashboard-layout {
    display: flex;
    height: calc(100vh - 28px);
    max-width: 1600px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--sidebar-bg-gradient);
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    position: relative;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    opacity: 0.6;
}

.sidebar.is-collapsed {
    width: 76px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-brand img,
.sidebar-brand svg {
    flex-shrink: 0;
}

.sidebar-brand .brand-text {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.28s ease;
}

.sidebar.is-collapsed .brand-text {
    opacity: 0;
    width: 0;
}

.sidebar-nav-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    padding: 4px 12px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.sidebar.is-collapsed .sidebar-nav-label {
    opacity: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 4px 8px;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sidebar-nav a .nav-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.sidebar-nav a span {
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.sidebar-nav a .nav-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sidebar-nav a .nav-text strong {
    font-size: 13.5px;
    font-weight: 600;
}

.sidebar-nav a .nav-text em {
    font-style: normal;
    font-size: 10.5px;
    color: #94a3b8;
}

.sidebar-nav a.active .nav-text em {
    color: #c7d2fe;
}

.sidebar.is-collapsed .sidebar-nav a span {
    opacity: 0;
    width: 0;
}

.sidebar-nav a:hover {
    background: var(--sidebar-bg-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.06);
}

.sidebar-nav a:hover .nav-icon {
    transform: scale(1.08);
}

.sidebar-nav a.active {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.25);
    transform: translateY(-1px);
}

.sidebar-nav a.active .nav-icon {
    color: #fff;
    opacity: 1;
}

.sidebar.is-collapsed .sidebar-nav a::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.2s;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar.is-collapsed .sidebar-nav a:hover::after {
    opacity: 1;
    visibility: visible;
}

.sidebar-nav a.logout-link {
    margin-top: auto;
}

.sidebar-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 4px 4px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.18);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sidebar-status::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transform: translateX(-100%);
    animation: waychat-shimmer 3s infinite;
}

.sidebar.is-collapsed .sidebar-status {
    justify-content: center;
    padding: 10px;
}

.sidebar-status .dot {
    position: relative;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}

.sidebar-status .dot::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 10px #60a5fa;
}

.sidebar-status .dot::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a5fa;
    animation: waychat-ping 1.6s infinite;
}

.sidebar-status span {
    font-size: 11px;
    color: #bfdbfe;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.28s;
}

.sidebar.is-collapsed .sidebar-status span {
    width: 0;
    opacity: 0;
}

.sidebar-credits {
    display: block;
    padding: 10px 12px;
    margin: 8px 4px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    transition: background 0.2s;
}

.sidebar-credits:hover {
    background: rgba(255, 255, 255, 0.09);
}

.sidebar-credits-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 6px;
}

.sidebar-credits-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.sidebar-credits-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
}

.sidebar-credits-fill--full {
    background: linear-gradient(90deg, #f87171, #fca5a5);
}

.sidebar.is-collapsed .sidebar-credits-top {
    width: 0;
    opacity: 0;
    margin-bottom: 0;
}

.sidebar.is-collapsed .sidebar-credits {
    padding: 8px;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 6px 4px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar.is-collapsed .sidebar-collapse-btn {
    justify-content: center;
}

.sidebar-collapse-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.sidebar.is-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.sidebar-collapse-btn .ctx {
    white-space: nowrap;
    overflow: hidden;
    transition: 0.28s;
}

.sidebar.is-collapsed .sidebar-collapse-btn .ctx {
    width: 0;
    opacity: 0;
}

.dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-alt) 100%);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}

.topbar-business {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.topbar-business-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-business-text span {
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-business-text small {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tint);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    padding: 8px 14px;
    width: 220px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
}

.topbar-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    width: 260px;
}

.topbar-search svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text-heading);
    min-width: 0;
    width: 100%;
    /* Form inputs site-wide carry padding: 12px 16px and margin-bottom: 20px for stacked forms. Left
       in place here they doubled up with the pill's own padding and made a 40px field sit in a 78px
       tall wrapper, which is what gave the search box its oversized, unbalanced look. */
    padding: 0;
    margin: 0;
}

.topbar-search input::placeholder {
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .topbar-search {
        display: none;
    }
}

.icb {
    width: 38px;
    height: 38px;
    /* The shared `button, .btn` rule sets padding: 12px 24px. With border-box sizing that is 48px of
       padding inside a 38px box, which collapses the content area to zero width — the icon inside was
       being squeezed out of existence and these rendered as blank squares. */
    padding: 0;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.icb svg {
    width: 18px;
    height: 18px;
    /* An SVG with only a viewBox has no intrinsic width, so as a flex item it is the first thing the
       browser shrinks. Without this it collapses again the moment the button is short of space. */
    flex-shrink: 0;
}

.icb:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-light);
}

.icb .notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
}

.topbar-user-wrap {
    position: relative;
}

/* .topbar-user is a <button> (for proper keyboard/AT support on the dropdown trigger), which
   means it inherits the global button/.btn look (gradient fill, white text, pill padding) unless
   explicitly reset — same leak already hit on .icb and .gw-provider-choice elsewhere in this file. */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 0 10px;
    margin-left: 4px;
    border: none;
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
}

.topbar-user:hover {
    filter: none;
    box-shadow: none;
    transform: none;
}

.topbar-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 100;
}

.topbar-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    text-decoration: none;
}

.topbar-user-menu a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.topbar-user-menu a:hover,
.topbar-user-menu a.active {
    background: var(--bg-alt);
}

.topbar-user-menu a.topbar-user-menu-logout {
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding-top: 10px;
}

.topbar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 640px) {
    .topbar-user-text {
        display: none;
    }
}

.topbar-user-text span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.topbar-user-text small {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.topbar-caret {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dashboard-content {
    padding: 28px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    background-image: radial-gradient(1000px 400px at 0% 0%, rgba(37, 99, 235, 0.04), transparent),
        radial-gradient(800px 300px at 100% 0%, rgba(147, 197, 253, 0.05), transparent);
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 26px;
    margin-bottom: 4px;
}

.page-header p {
    color: var(--text-muted);
    font-size: 14px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    opacity: 0.6;
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-2);
}

.card + .card {
    margin-top: 24px;
}

/* ...but not when a container is already spacing them with gap. In .hub-grid the two cards sit
   side by side, and this margin pushed the right-hand one 24px lower than its neighbour, so their
   tops never lined up. */
.hub-grid > .card + .card {
    margin-top: 0;
}

.crawler-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-body);
}

.crawler-status-icon {
    font-size: 18px;
}

/* ---------- Admin: branding settings ---------- */
.branding-preview {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    min-height: 72px;
}

.branding-preview-img {
    max-height: 56px;
    max-width: 200px;
    object-fit: contain;
    border-radius: 6px;
}

.branding-preview-img--favicon {
    max-height: 32px;
    max-width: 32px;
}

.branding-preview-empty {
    color: var(--text-muted);
    font-size: 14px;
}

/* ---------- Onboarding wizard ---------- */
.wizard-body {
    background: var(--bg-page);
}

.wizard-layout {
    display: flex;
    min-height: 100vh;
}

.wizard-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: linear-gradient(160deg, #eef2ff, #f5f3ff);
    border-right: 1px solid var(--border-color);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
}

.wizard-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.wizard-brand-text,
.wizard-brand .brand-text {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-heading);
}

.wizard-illustration {
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
}

.wizard-illustration svg {
    width: 100%;
    height: 100%;
}

.wizard-sidebar-heading {
    font-size: 22px;
    margin-bottom: 12px;
}

.wizard-sidebar-subtext {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 32px;
}

.wizard-sidebar-footer {
    margin-top: 32px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.wizard-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wizard-step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.wizard-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wizard-step-item.is-active {
    color: var(--text-heading);
}

.wizard-step-item.is-active .wizard-step-number {
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    border-color: transparent;
    color: #fff;
}

.wizard-step-item.is-complete .wizard-step-number {
    background: #10b981;
    border-color: transparent;
    color: #fff;
}

.wizard-main {
    flex: 1;
    padding: 56px 64px;
    overflow-y: auto;
}

.wizard-panel-heading {
    font-size: 26px;
    margin-bottom: 32px;
}

.wizard-panel-subtext {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.wizard-payment-reassure {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.wizard-payment-reassure li {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-body);
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.wizard-crawl-status {
    margin: -12px 0 28px;
    padding: 14px 16px;
    background: #eefaf6;
    border: 1px solid #c2e8db;
    border-radius: var(--radius-sm);
    transition: opacity 0.3s ease;
}

.wizard-crawl-status--done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.wizard-crawl-status--failed {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}

.wizard-crawl-progress {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #d7f0e8;
    overflow: hidden;
    margin-bottom: 10px;
}

.wizard-crawl-status--failed .wizard-crawl-progress {
    display: none;
}

.wizard-crawl-progress-bar {
    height: 100%;
    width: 8%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-dark), #34d0a4, var(--primary-dark));
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.45);
    animation: wizard-crawl-shimmer 1.5s ease-in-out infinite;
    transition: width 0.6s ease, background-color 0.3s ease;
}

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

.wizard-crawl-status--done .wizard-crawl-progress-bar {
    background: #22c55e;
    box-shadow: none;
    animation: none;
}

.wizard-crawl-status-text {
    margin: 0;
    font-size: 13px;
    color: var(--primary-dark);
}

.wizard-crawl-status--done .wizard-crawl-status-text {
    color: var(--success-text);
}

.wizard-crawl-status--failed .wizard-crawl-status-text {
    color: var(--danger);
}

.wizard-crawl-game-card {
    margin: 0 0 28px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.wizard-crawl-game-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

#signup-crawl-game-canvas {
    display: block;
    width: 100%;
    max-width: 560px;
    height: 180px;
    margin: 0 auto;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.wizard-crawl-banner {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #eefaf6;
    border: 1px solid #c2e8db;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--primary-dark);
}

.wizard-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start;
}

.wizard-form-col {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wizard-field {
    padding: 22px 0;
    border-top: 1px solid var(--border-color);
}

.wizard-field:first-child {
    padding-top: 0;
    border-top: none;
}

.wizard-field > label:first-child,
.wizard-field > .field-label {
    font-size: 14px;
    margin-bottom: 12px;
}

.wizard-field input[type="text"],
.wizard-field input[type="email"],
.wizard-field input[type="url"],
.wizard-field textarea,
.wizard-field select {
    margin-bottom: 0;
}

.wizard-field .field-hint {
    margin: 10px 0 0;
}

.voice-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-picker-row select {
    flex: 1;
    margin-bottom: 0;
}

.voice-replay-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.voice-replay-btn:hover {
    transform: scale(1.08);
    border-color: var(--primary);
}

.wizard-logo-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wizard-logo-preview {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.wizard-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wizard-color-swatches {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wizard-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.wizard-swatch:hover {
    transform: scale(1.1);
}

.wizard-swatch.is-active {
    border-color: var(--text-heading);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text-heading);
}

.wizard-color-input {
    width: 110px;
    padding: 8px 12px;
    margin-left: 8px;
    font-family: monospace;
    font-size: 13px;
}

.wizard-suggested-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.wizard-suggestion-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-suggestion-input {
    flex: 1;
    padding: 8px 12px;
    margin-bottom: 0;
}

.wizard-suggestion-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wizard-suggestion-remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}

.wizard-error {
    margin-top: 8px;
}

.wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
}

.wizard-narrow-panel {
    max-width: 600px;
}

.wizard-step3-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wizard-preview-col {
    /* The settings form is usually much taller than the preview widget — without this the column
       just sits at the top of a tall empty run of card background as the page scrolls past it. */
    position: sticky;
    top: 88px;
    align-self: start;
}

.wizard-preview-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.wizard-preview-frame {
    position: relative;
    background: var(--bg-alt);
    border-radius: 16px;
    padding: 32px;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Soft, slow-drifting blurred color washes behind the preview mockup — purely atmospheric, kept
   off the actual settings form (which needs to stay plainly readable) and confined to this frame's
   rounded corners via overflow:hidden above. */
.wizard-preview-frame::before,
.wizard-preview-frame::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.4;
    pointer-events: none;
    animation: waychat-blob-drift 16s ease-in-out infinite;
}

.wizard-preview-frame::before {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, #818cf8, transparent 70%);
    top: -70px;
    left: -60px;
}

.wizard-preview-frame::after {
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, #f472b6, transparent 70%);
    bottom: -60px;
    right: -50px;
    animation-delay: -8s;
    animation-duration: 19s;
}

@keyframes waychat-blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(24px, 18px) scale(1.12); }
    66% { transform: translate(-18px, 12px) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-preview-frame::before,
    .wizard-preview-frame::after {
        animation: none;
    }
}

.wizard-preview-bubble-icon,
.wizard-preview-panel {
    position: relative;
    z-index: 1;
}

.wizard-preview-bubble-icon {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.wizard-preview-bubble-icon svg {
    width: 24px;
    height: 24px;
}

.wizard-preview-bubble-icon .waychat-lottie-icon {
    width: 28px;
    height: 28px;
}

.wizard-icon-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.wizard-icon-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wizard-icon-tab.is-active {
    background: var(--text-heading);
    color: #fff;
    border-color: var(--text-heading);
}

/* The active pill uses --text-heading as an inverted fill (dark pill, white text) — that only
   works while --text-heading is itself dark. In dark mode it flips to a near-white body-text
   color, which would turn the "selected" pill white-on-white. --sidebar-bg is a stable dark navy
   that never flips with the light/dark toggle (the sidebar stays dark in both modes), so it keeps
   the same solid-dark-pill look here without depending on a token that changes meaning. */
body.dark:has(.dashboard-layout) .wizard-icon-tab.is-active {
    background: var(--sidebar-bg);
    border-color: var(--sidebar-bg);
}

.wizard-icon-static-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.wizard-icon-static-option {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    border: 2px solid var(--border-color);
    background: var(--bg-alt);
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.wizard-icon-static-option:hover {
    transform: translateY(-2px);
}

.wizard-icon-static-option svg {
    width: 32px;
    height: 32px;
}

.wizard-icon-static-option:hover {
    border-color: #94a3b8;
}

.wizard-icon-static-option.is-selected {
    border-color: var(--primary);
    background: #eefaf6;
    color: var(--primary);
}

.wizard-icon-animated-select select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.wizard-crawl-frequency-field select {
    max-width: 260px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

form.wizard-crawl-frequency-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

form.wizard-crawl-frequency-field label {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.wizard-icon-search {
    width: 100%;
    max-width: 280px;
    padding: 9px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
}

.wizard-icon-lottie-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.wizard-icon-lottie-option {
    width: 100px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 2px solid var(--border-color);
    background: var(--bg-alt);
    color: #374151;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.wizard-icon-lottie-option:hover {
    border-color: #94a3b8;
    transform: translateY(-2px);
}

.wizard-icon-lottie-option.is-selected {
    border-color: var(--primary);
    background: #eefaf6;
}

.wizard-icon-lottie-option[hidden] {
    display: none;
}

.wizard-icon-lottie-preview {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-icon-lottie-preview dotlottie-wc,
.wizard-icon-lottie-preview img {
    width: 56px;
    height: 56px;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}

.wizard-icon-lottie-name {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.wizard-icon-lottie-option.is-selected .wizard-icon-lottie-name {
    color: var(--primary);
    font-weight: 600;
}

.wizard-preview-panel {
    width: 300px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
}

.wizard-preview-main {
    flex: 1;
    min-width: 0;
}

/* Illustrates where the real widget's Home/Ask/Help tab rail sits — hidden for every theme except
   Expanded, the one theme that actually moves it to the side (see .wizard-preview-frame--theme-
   expanded below). Dots stand in for the rail rather than reproducing its icons exactly; the point
   of this mockup is the layout shift, not a pixel-accurate copy. */
.wizard-preview-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 34px;
    flex-shrink: 0;
}

.wizard-preview-rail-tab {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.wizard-preview-rail-tab.is-active {
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.25);
}

.wizard-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #fff;
    background: var(--primary);
    transition: background-color 0.2s ease;
}

.wizard-preview-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    overflow: hidden;
    flex-shrink: 0;
}

.wizard-preview-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wizard-preview-title {
    font-size: 13px;
    font-weight: 600;
}

.wizard-preview-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    opacity: 0.85;
}

.wizard-preview-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
}

.wizard-preview-messages {
    padding: 16px;
    background: #f9fafb;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wizard-preview-bubble {
    background: #eef2ff;
    color: var(--text-heading);
    padding: 10px 14px;
    border-radius: 14px;
    border-bottom-left-radius: 3px;
    font-size: 13px;
    line-height: 1.45;
    max-width: 90%;
}

.wizard-preview-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wizard-preview-suggestion-btn {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--primary);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: default;
}

.wizard-preview-input {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
    font-size: 13px;
}

/* Theme presets mirrored onto the preview mockup's own classes — these have to be kept in sync
   by hand with the equivalent waychat-widget-root--theme-* rules in widget/widget.js, since the
   preview is a separate hand-built approximation of the real widget, not the widget itself. */
.wizard-preview-frame--theme-vibrant .wizard-preview-panel {
    border-radius: 26px;
}

.wizard-preview-frame--theme-vibrant .wizard-preview-header {
    padding: 20px 18px;
}

.wizard-preview-frame--theme-vibrant .wizard-preview-bubble {
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background: var(--primary-light);
}

.wizard-preview-frame--theme-vibrant .wizard-preview-suggestion-btn {
    border-radius: 14px;
}

.wizard-preview-frame--theme-vibrant .wizard-preview-input {
    border-radius: 0 0 26px 26px;
}

.wizard-preview-frame--theme-minimal .wizard-preview-panel {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: none;
}

.wizard-preview-frame--theme-minimal .wizard-preview-header {
    /* Background itself is set inline by initWidgetThemePicker() in app.js, not here — it has to
       win over the color-picker's own inline style, which plain CSS can't reliably guarantee. */
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-color);
}

.wizard-preview-frame--theme-minimal .wizard-preview-status {
    color: var(--text-muted);
}

.wizard-preview-frame--theme-minimal .wizard-preview-bubble {
    border-radius: 8px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
}

.wizard-preview-frame--theme-minimal .wizard-preview-bubble-icon {
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}

/* Expanded is a layout change, not a restyle, so this mirrors the real widget's two structural
   moves — much wider panel, tab rail to the side — rather than just recoloring the same shape the
   other themes use. */
.wizard-preview-frame--theme-expanded .wizard-preview-panel {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    background: linear-gradient(140deg, #020617 0%, #1e1b4b 55%, #0f172a 100%);
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.45);
}

.wizard-preview-frame--theme-expanded .wizard-preview-rail {
    display: flex;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.wizard-preview-frame--theme-expanded .wizard-preview-header {
    /* Background is forced inline by applyPreviewTheme() in app.js, same reason as Minimal above —
       it has to beat the color-picker's own inline style. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-preview-frame--theme-expanded .wizard-preview-title {
    color: #f1f5f9;
}

.wizard-preview-frame--theme-expanded .wizard-preview-status {
    color: #94a3b8;
}

.wizard-preview-frame--theme-expanded .wizard-preview-messages {
    background: transparent;
}

.wizard-preview-frame--theme-expanded .wizard-preview-bubble {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #e8eef7;
}

.wizard-preview-frame--theme-expanded .wizard-preview-input {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
}

/* Nova keeps the same stacked shape as Classic/Vibrant/Minimal (no rail) — only the real widget's
   panel gets the full aurora/orb-ring treatment; this mockup is deliberately the simpler
   approximation the comment above already established as this preview's standard. */
.wizard-preview-frame--theme-nova .wizard-preview-panel {
    background: #05060a;
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.5);
}

.wizard-preview-frame--theme-nova .wizard-preview-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-preview-frame--theme-nova .wizard-preview-avatar {
    background: linear-gradient(135deg, #7c5cff, #22d3ee, #ff5ca8);
}

.wizard-preview-frame--theme-nova .wizard-preview-title {
    color: #eef1f7;
}

.wizard-preview-frame--theme-nova .wizard-preview-status {
    color: #98a0b3;
}

.wizard-preview-frame--theme-nova .wizard-preview-messages {
    background: transparent;
}

.wizard-preview-frame--theme-nova .wizard-preview-bubble {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #eef1f7;
}

.wizard-preview-frame--theme-nova .wizard-preview-input {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #6b7280;
}

.wizard-platforms-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 32px 0 12px;
}

.wizard-platforms {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.platform-badge {
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-alt);
    cursor: default;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.platform-badge:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Widget Settings reuses .wizard-grid inside the dashboard's sidebar+card layout, where there's
   much less horizontal room than the full-width setup wizard — default it to a single column and
   only go side-by-side once there's genuinely enough width for both to breathe.
   1300px was tuned against the raw window width, but the sidebar (~260px expanded) is what actually
   eats into the card's own space, so a normal ~1200-1280px laptop window never qualified and the
   live preview always rendered thousands of pixels below the form instead of beside it — for
   practical purposes it never appeared. Lowered to a width measured against the card's real
   available space with the sidebar expanded (the narrower of the two states). */
.card .wizard-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 1060px) {
    .card .wizard-grid {
        grid-template-columns: 1.3fr 1fr;
    }
}

@media (max-width: 900px) {
    .wizard-layout {
        flex-direction: column;
    }

    .wizard-sidebar {
        width: 100%;
        padding: 32px 24px;
    }

    .wizard-illustration {
        display: none;
    }

    .wizard-steps {
        flex-direction: row;
        gap: 24px;
    }

    .wizard-main {
        padding: 32px 24px;
    }

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

/* ---------- Dashboard hub ---------- */
/* Fixed counts rather than auto-fit. auto-fit packs in as many 215px cards as happen to fit, which
   at common window widths left three across and a single orphan card sitting alone on the second
   row with a wide empty gap beside it. Stepping 4 -> 2 -> 1 always produces a balanced block. */
.hub-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1180px) {
    .hub-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .hub-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hub-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    transition: all 0.28s ease;
    position: relative;
    overflow: hidden;
    animation: waychat-fade-up 0.5s ease-out both;
}

.hub-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #818cf8);
    opacity: 0.85;
}

.hub-stat-card:hover {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    transform: translateY(-4px);
    border-color: var(--border-color-2);
}

.hub-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.hub-stat-card:hover .hub-stat-icon {
    transform: scale(1.08) rotate(2deg);
}

.hub-stat-icon svg {
    width: 20px;
    height: 20px;
}

.hub-stat-icon--blue { background: var(--stat-blue-bg); color: var(--stat-blue-text); }
.hub-stat-icon--violet { background: var(--stat-violet-bg); color: var(--stat-violet-text); }
.hub-stat-icon--green { background: var(--stat-green-bg); color: var(--stat-green-text); }
.hub-stat-icon--amber { background: var(--stat-amber-bg); color: var(--stat-amber-text); }

.hub-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hub-stat-value {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hub-stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: 2px;
}

.hub-stat-trend {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 6px;
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--bg-tint);
}

.hub-stat-trend--up {
    color: var(--primary);
    background: var(--primary-light);
}

.hub-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.hub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.hub-card-title {
    font-size: 16px;
}

.hub-card-meta {
    font-size: 12.5px;
    color: var(--text-muted);
}

.hub-card-link {
    font-size: 12.5px;
    font-weight: 600;
}

/* The two cards in .hub-grid stretch to the same height, and the chart is the shorter of the pair —
   at a fixed 240px that left a tall band of empty white under it inside its own card. Letting the
   chart take the leftover height fills that space with more chart instead. The canvas reads its own
   box at draw time, so it simply renders taller. */
.hub-chart-card {
    display: flex;
    flex-direction: column;
}

.hub-chart-wrap {
    flex: 1;
    min-height: 240px;
    position: relative;
}

.hub-chart-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.hub-chart-footnote {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.hub-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hub-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.hub-feed-row:first-child {
    border-top: none;
    padding-top: 0;
}

.hub-feed-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-feed-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.hub-feed-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-feed-snippet {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-feed-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.hub-feed-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 2px 8px;
}

.hub-feed-time {
    font-size: 11px;
    color: var(--text-muted);
}

.hub-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--text-muted);
}

.hub-empty-icon {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
}

.hub-empty p {
    font-size: 13px;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}

.hub-knowledge-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.hub-knowledge-actions .wizard-crawl-frequency-field {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Conversations (master / detail) ---------- */
.convo-layout {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 20px;
    align-items: start;
}

.convo-list-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    position: sticky;
    top: 88px;
}

.convo-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.convo-list-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
}

.convo-list-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 2px 9px;
}

.convo-search {
    width: 100%;
    padding: 9px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    background: var(--bg-alt);
}

.convo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 60vh;
    overflow-y: auto;
}

.convo-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.convo-item:hover {
    background: var(--bg-alt);
    text-decoration: none;
}

.convo-item.is-active {
    background: var(--primary-light);
}

.convo-item[hidden] {
    display: none;
}

.convo-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef1f4;
    color: var(--text-body);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.convo-item.is-active .convo-item-avatar {
    background: var(--primary);
    color: #fff;
}

.convo-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.convo-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.convo-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-item-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.convo-item-snippet {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-empty-search {
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
    padding: 18px 0 4px;
}

.convo-detail-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}

.convo-detail-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}

.convo-detail-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.convo-detail-ident {
    flex: 1;
    min-width: 0;
}

.convo-detail-name {
    font-size: 17px;
    margin-bottom: 2px;
}

.convo-detail-sub {
    font-size: 12.5px;
    color: var(--text-muted);
}

.pill {
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

.pill--amber {
    background: var(--accent-2-light);
    color: #a1701f;
}

.convo-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.convo-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.convo-fact-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.convo-fact-value {
    font-size: 13.5px;
    color: var(--text-heading);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.convo-transcript {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}

.convo-msg-row {
    display: flex;
}

.convo-msg-row--visitor {
    justify-content: flex-end;
}

.convo-msg {
    max-width: 74%;
    padding: 11px 15px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.55;
}

.convo-msg--bot {
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    color: var(--text-heading);
    border-bottom-left-radius: 5px;
}

.convo-msg--visitor {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.convo-msg-meta {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    opacity: 0.65;
}

.convo-msg-rating {
    margin-left: 4px;
}

@media (max-width: 1000px) {
    .convo-layout {
        grid-template-columns: 1fr;
    }

    .convo-list-panel {
        position: static;
    }

    .convo-list {
        max-height: 320px;
    }
}

/* ---------- Chat history transcript ---------- */
.is-selected-row {
    background: var(--primary-light);
}

.transcript-heading {
    font-size: 16px;
    margin-bottom: 16px;
}

.chat-transcript {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 520px;
    overflow-y: auto;
    padding: 4px 4px 0;
}

.chat-bubble-row {
    display: flex;
}

.chat-bubble-row--bot {
    justify-content: flex-start;
}

.chat-bubble-row--visitor {
    justify-content: flex-end;
}

.chat-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-bubble--bot {
    background: var(--bg-alt);
    color: var(--text-heading);
    border-bottom-left-radius: 3px;
}

.chat-bubble--visitor {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.chat-bubble-meta {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.65;
}

/* ---------- Admin: badges, table actions ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-muted {
    background: var(--bg-alt);
    color: var(--text-muted);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-form {
    display: inline-block;
}

.btn-danger {
    color: var(--danger);
    border-color: var(--danger-border);
}

.btn-danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    box-shadow: none;
}

.card.card-table {
    padding: 0;
    /* overflow-y stays hidden so the table's square corners still get clipped to the card's rounded
       ones (the reason this was overflow: hidden). overflow-x was hidden too, which silently CUT OFF
       whichever column ran past the card's edge instead of letting it scroll into view — on Leads
       that was the Date column, with no way to reach it. auto turns that into a normal horizontal
       scrollbar instead of losing the column. */
    overflow-x: auto;
    overflow-y: hidden;
}

/* ---------- Widget settings ---------- */
.settings-form {
    max-width: 440px;
}

/* widget-settings.php reuses .settings-form as the wrapper around the two-column form+live-preview
   grid, not a simple narrow form — the 440px cap above (sized for plain credential forms like
   ecommerce.php's) was clamping the whole grid down to a sliver and leaving the rest of the card
   empty. Only lift the cap where a .wizard-grid is actually inside. */
.settings-form:has(.wizard-grid) {
    max-width: none;
}

/* The narrow .settings-form above was capped for readability, but its parent .card wasn't — on a
   wide screen the card itself stretched full-width while the form stayed pinned to the left,
   leaving a large dead strip of empty white space beside it (admin Payment/Usage/Branding pages).
   Cap the card too, everywhere it holds nothing but a plain settings form, so it reads as a
   deliberately-sized card instead of an oversized box with a form crammed in one corner. */
.card:has(> .settings-form:not(:has(.wizard-grid))) {
    max-width: 560px;
}

/* ---------- Widget installation snippet ---------- */
.install-heading {
    font-size: 18px;
    margin-bottom: 8px;
}

.install-instruction {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.install-instruction code {
    background: var(--bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.code-box {
    position: relative;
    background: #0f172a;
    border-radius: var(--radius-sm);
    padding: 16px 100px 16px 16px;
    overflow-x: auto;
}

.code-box pre {
    margin: 0;
    color: #e2e8f0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
}

.code-copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 14px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

/* ---------- Data table (Leads) ---------- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th {
    text-align: left;
    padding: 12px 16px;
    background: var(--bg-alt);
    color: var(--text-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-body);
}

.data-table tbody tr:nth-child(even) {
    background: var(--bg-alt);
}

.data-table tbody tr:hover {
    background: var(--primary-light);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- Empty states ---------- */
.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 56px 24px;
    font-size: 14px;
}

.empty-state .empty-icon {
    display: block;
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.7;
}

/* ---------- E-commerce: payment provider cards ---------- */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.provider-card {
    display: flex;
    /* flex-start, not center: the grid row stretches every card to the height of the
       tallest one (the credential-entry forms), and center-aligning a short card's
       content (e.g. the disabled Stripe card, which is just a heading + one line)
       inside that tall cell left it floating in the middle instead of lining up
       with its siblings' headings at the top. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.provider-card--selectable {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.provider-card--selectable:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.provider-card--disabled {
    opacity: 0.55;
}

.provider-card--connected {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.provider-card--form {
    flex-direction: column;
    align-items: stretch;
}

.provider-credentials-form {
    margin-top: 12px;
}

/* Not-yet-connected gateways on the E-commerce page — a plain icon card that opens the same
   connect wizard as the "Enable E-commerce Checkout" toggle, instead of expanding a full
   credentials form in place. --gw-color is set inline per gateway (its own brand color). */
.gw-quick-connect-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-heading);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.gw-quick-connect-card:hover {
    border-color: var(--gw-color, var(--primary));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.gw-quick-connect-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gw-color, var(--primary));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gw-quick-connect-card strong {
    font-size: 14px;
}

.gw-quick-connect-card span:not(.gw-quick-connect-icon) {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ---------- Payment gateway connect wizard (modal, Widget Settings) ---------- */
.gw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.gw-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}

.gw-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: var(--bg-alt);
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.gw-modal-close:hover {
    color: var(--text-heading);
}

.gw-modal h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

.gw-modal-panel {
    display: none;
}

.gw-modal-panel.is-active {
    display: block;
}

.gw-provider-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.gw-provider-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    text-align: left;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-heading);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.gw-provider-choice:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.gw-provider-choice strong {
    font-size: 15px;
}

.gw-provider-choice span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.gw-modal-panel .btn-block {
    margin-top: 16px;
}

.gw-modal-panel .gw-modal-back {
    margin-top: 12px;
    width: 100%;
}

.gw-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.gw-modal-actions .gw-modal-back {
    flex: 1;
}

.gw-modal-actions #gw-test-btn {
    flex: 2;
}

.gw-test-result {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.gw-test-result.is-success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}

.gw-test-result.is-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
}

/* ---------- Custom avatar request ---------- */
.avatar-request-preview {
    display: flex;
    gap: 20px;
    margin: 16px 0;
}

.avatar-request-preview > div {
    text-align: center;
}

.avatar-request-preview img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    display: block;
    margin-bottom: 6px;
}

/* ---------- Admin customer detail summary grid ---------- */
.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 20px;
}

.admin-detail-grid p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-heading);
    font-weight: 600;
}

@media (max-width: 780px) {
    .admin-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Credits usage bar (Dashboard overview) ---------- */
.credits-card {
    margin-bottom: 24px;
    animation: waychat-dash-in 0.45s ease both;
}

/* A quiet staggered entrance for the overview's own cards — the whole page used to just appear at
   once, which read as flat/static next to the rest of the redesigned dashboard. */
.hub-stats > .hub-stat-card,
.hub-grid > .card {
    animation: waychat-dash-in 0.45s ease both;
}

.hub-stats > .hub-stat-card:nth-child(1) { animation-delay: 0.06s; }
.hub-stats > .hub-stat-card:nth-child(2) { animation-delay: 0.12s; }
.hub-stats > .hub-stat-card:nth-child(3) { animation-delay: 0.18s; }
.hub-stats > .hub-stat-card:nth-child(4) { animation-delay: 0.24s; }
.hub-grid > .card:nth-child(2) { animation-delay: 0.1s; }

@keyframes waychat-dash-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .credits-card,
    .hub-stats > .hub-stat-card,
    .hub-grid > .card {
        animation: none;
    }
}

.credits-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.credits-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.credits-card-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
}

.credits-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--bg-alt);
    overflow: hidden;
}

.credits-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    transition: width 0.4s ease;
}

.credits-bar-fill--warn {
    background: linear-gradient(90deg, #d97706, #dc2626);
}

/* ---------- Voice agent tier cards (Widget Settings > Bot & Voice) ---------- */
.agent-tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.agent-tier-card {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.agent-tier-card:hover:not(.agent-tier-card--locked):not(.agent-tier-card--active) {
    border-color: var(--primary);
}

.agent-tier-card p {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

.agent-tier-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.agent-tier-card-head strong {
    font-size: 14px;
    color: var(--text-heading);
}

.agent-tier-card--active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    cursor: default;
}

.agent-tier-card--locked {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .agent-tier-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Reusable dashboard tabs (e.g. E-commerce: Payment Methods / Products) ---------- */
.dash-tabs-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.dash-tab-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-body);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dash-tab-btn:hover {
    color: var(--text-heading);
}

.dash-tab-btn.is-active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.dash-tab-panel {
    display: none;
}

.dash-tab-panel.is-active {
    display: block;
    animation: waychat-tab-fade-in 0.2s ease;
}

@keyframes waychat-tab-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- E-commerce: Add a Product form ---------- */
.product-form-panel {
    margin-top: 28px;
    padding: 22px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.product-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.product-form-grid .field-span-2 {
    grid-column: 1 / -1;
}

.product-form-grid input {
    background: var(--bg-card);
}

/* The -18px sibling pull further up (label + .field-hint etc.) is calibrated for normal block
   flow, where it collapses against the preceding input's own margin-bottom into a small, tidy
   gap. Grid items never collapse margins with each other, so inside this grid the same -18px
   would apply uncollapsed and drag the hint text up into the row above. Two classes reliably
   outrank that rule's one-class-plus-type-selector, regardless of source order. */
.product-form-grid .field-hint {
    margin: 4px 0 0;
}

@media (max-width: 640px) {
    .product-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Bookings ---------- */
.booking-empty-hero {
    text-align: center;
    padding: 48px 32px;
}

.booking-empty-hero .empty-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
}

.booking-empty-hero h2 {
    margin-top: 4px;
}

.booking-empty-hero p {
    max-width: 460px;
    margin: 10px auto 22px;
}

.mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.mode-toggle--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 560px) {
    .mode-toggle {
        grid-template-columns: 1fr;
    }
}

.mode-toggle-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mode-toggle-option:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.mode-toggle-option input {
    margin-top: 3px;
    flex-shrink: 0;
}

.mode-toggle-option span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mode-toggle-option strong {
    font-size: 14px;
    color: var(--text-heading);
}

.mode-toggle-option small {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.setup-timed-fields {
    margin-top: 4px;
}

.day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.day-pill {
    cursor: pointer;
}

.day-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.day-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-body);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.day-pill input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.day-pill input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.blocked-date-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blocked-date-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
    font-size: 13.5px;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.cal-nav {
    padding: 8px 16px;
}

.booking-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 6px;
}

.cal-day {
    min-height: 92px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-alt);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-day--empty {
    border-color: transparent;
    background: transparent;
}

.cal-day--today {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.cal-day-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-heading);
}

.cal-day--today .cal-day-num {
    color: var(--primary);
}

.cal-day-chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.cal-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-chip--pending {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.cal-chip--confirmed {
    background: var(--success-bg);
    color: var(--success-text);
}

.cal-chip--more {
    background: transparent;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .booking-calendar {
        gap: 4px;
    }
    .cal-day {
        min-height: 60px;
        padding: 4px;
    }
    .cal-chip {
        font-size: 9px;
    }
}

.spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #d7f0e8;
    border-top-color: var(--primary);
    animation: waychat-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes waychat-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    body:has(.dashboard-layout) {
        padding: 0;
    }

    .dashboard-layout {
        flex-direction: column;
        height: 100vh;
        border-radius: 0;
        max-width: 100%;
    }

    .sidebar {
        width: 100% !important;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 8px;
    }

    .sidebar-brand {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        padding: 8px 14px;
        margin-bottom: 0;
    }

    .sidebar-brand .brand-text {
        display: none;
    }

    .sidebar-nav {
        flex-direction: row;
        flex: none;
        padding: 0 8px;
        gap: 4px;
        overflow-y: visible;
    }

    .sidebar-nav a {
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        font-size: 11px;
    }

    .sidebar-nav a span {
        width: auto !important;
        opacity: 1 !important;
    }

    .sidebar-nav a.active {
        transform: none;
    }

    .sidebar-nav a.logout-link {
        margin-top: 0;
        margin-left: auto;
    }

    .sidebar-status,
    .sidebar-collapse-btn {
        display: none;
    }

    .topbar {
        padding: 0 20px;
    }

    .dashboard-content {
        padding: 20px;
    }

    .card {
        padding: 20px;
    }

    .navbar-inner {
        padding: 14px 20px;
    }

    .navbar-links {
        gap: 16px;
    }

    .navbar-links a:not(.btn) {
        display: none;
    }

    .hero-section {
        padding: 40px 20px 72px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .hero-content .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .trust-section {
        padding: 32px 0 56px;
    }

    .trust-logos {
        gap: 24px;
        padding: 0 20px;
    }

    .features-section,
    .steps-section {
        padding: 64px 20px;
    }

    .steps-grid {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .step-connector {
        display: none;
    }

    .cta-section {
        margin: 0 20px 64px;
        padding: 48px 24px;
    }

    .site-footer {
        padding: 0 20px 24px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0 32px;
    }

    .footer-tagline {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Billing ---------- */
.billing-card {
    max-width: 520px;
}

.billing-status-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.billing-label {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 4px;
}

.billing-plan-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
}

.billing-pending-note {
    color: var(--warning-text);
}

#upgrade-now-btn {
    margin-top: 8px;
}

.upgrade-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
}

.upgrade-modal-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-md, 14px);
    padding: 28px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.upgrade-modal-card h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.upgrade-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
}

.upgrade-modal-close:hover {
    color: var(--text-heading);
}

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