:root {
    color-scheme: light;
    --canvas: #f6f8f7;
    --surface: #ffffff;
    --surface-soft: #fbfcfb;
    --border: #e6eae8;
    --border-strong: #d5ded9;
    --ink: #0f1a16;
    --secondary: #5b6b65;
    --muted: #7c8983;
    --emerald: #128c5e;
    --emerald-hover: #0e754e;
    --emerald-soft: #e8f6ef;
    --amber: #9a6408;
    --amber-soft: #fff5df;
    --red: #b64040;
    --red-soft: #fff0ef;
    --gray-soft: #f0f3f1;
    --shadow-soft: 0 8px 28px rgba(20, 42, 32, .045);
    --shadow-pop: 0 16px 42px rgba(20, 42, 32, .11);
    --radius-card: 16px;
    --radius-control: 10px;
    --font-body: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    min-width: 320px;
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 15px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea { font-family: var(--font-body); }
button, input, select, textarea { font-size: inherit; }
button { color: inherit; }
a { color: var(--emerald); text-decoration: none; }
a:hover { color: var(--emerald-hover); }
img { max-width: 100%; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4, .brand { font-family: var(--font-heading); letter-spacing: -.035em; }
h1 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; font-weight: 700; }
h2 { margin-bottom: 8px; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.28; font-weight: 700; }
h3 { margin-bottom: 8px; font-size: 1rem; line-height: 1.35; font-weight: 700; }
p { margin-bottom: 16px; }
.muted { color: var(--secondary); }
.eyebrow { margin: 0 0 8px; color: var(--emerald); font-size: .69rem; font-weight: 750; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
:focus-visible { outline: 3px solid rgba(18, 140, 94, .34); outline-offset: 3px; }

/* Buttons, controls, and shared surfaces */
.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.button svg { width: 18px; height: 18px; }
.button.primary { background: var(--emerald); color: #fff; box-shadow: 0 2px 5px rgba(18, 140, 94, .14); }
.button.primary:hover { background: var(--emerald-hover); color: #fff; box-shadow: 0 5px 14px rgba(18, 140, 94, .18); }
.button.secondary { border-color: var(--border-strong); background: var(--surface); color: var(--ink); }
.button.secondary:hover { border-color: #b9c8c0; background: #f9fbfa; color: var(--ink); }
.button-small { min-height: 38px; padding: 0 12px; font-size: .8rem; }
.button.full { width: 100%; }
.link-button, .text-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--emerald);
    cursor: pointer;
    font-size: .83rem;
    font-weight: 650;
    text-decoration: none;
}
.link-button:hover, .text-link:hover { color: var(--emerald-hover); text-decoration: underline; }
.link-button svg, .text-link svg { width: 16px; height: 16px; }
.link-button.danger { color: var(--red); }
.link-button.danger:hover { color: #8e2b2b; }
.content-card, .panel, .stat-card, .admin-kpi {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.icon-tile {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: var(--emerald-soft);
    color: var(--emerald);
}
.icon-tile svg { width: 20px; height: 20px; }
.avatar {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d7eee2;
    border-radius: 50%;
    background: var(--emerald-soft);
    color: #176243;
    font-size: .9rem;
    font-weight: 700;
}
.avatar-blue { background: #eff3f1; border-color: var(--border); color: #53645d; }
.count-badge, .role-chip {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--secondary);
    font-size: .72rem;
    font-weight: 650;
    white-space: nowrap;
}
.role-chip { background: var(--gray-soft); color: #44524c; }
.status-badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
}
.status-badge i, .status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.status-connected { border-color: #c9ead7; background: var(--emerald-soft); color: #176c48; }
.status-waiting { border-color: #f0dfb4; background: var(--amber-soft); color: #835906; }
.status-error { border-color: #f3d3d0; background: var(--red-soft); color: #a53d39; }
.status-disconnected { border-color: #e2e7e4; background: var(--gray-soft); color: #68766f; }

/* Public site header and footer */
.site-header {
    position: relative;
    z-index: 20;
    display: flex;
    width: min(1200px, 100%);
    min-height: 76px;
    align-items: center;
    gap: 36px;
    margin: 0 auto;
    padding: 0 32px;
    border-bottom: 1px solid rgba(230, 234, 232, .78);
    background: rgba(255, 255, 255, .9);
}
.landing-page { background: #fff; }
.landing-page .site-header { width: 100%; padding-right: max(32px, calc((100% - 1136px) / 2)); padding-left: max(32px, calc((100% - 1136px) / 2)); }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: var(--ink); font-size: 1rem; font-weight: 750; letter-spacing: -.035em; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-image { display: block; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.site-nav { display: flex; align-items: center; gap: 29px; margin: 0 auto; }
.site-nav a, .sign-in-link { color: var(--secondary); font-size: .84rem; font-weight: 550; }
.site-nav a:hover, .sign-in-link:hover { color: var(--ink); }
.site-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-actions .button { min-height: 40px; padding-inline: 15px; }
.public-shell { width: min(1120px, 100%); margin: 0 auto; }
.landing-shell { padding: 0 32px; }
.auth-shell { min-height: calc(100vh - 145px); padding: 48px 24px 72px; }
.site-footer {
    display: grid;
    width: min(1120px, 100%);
    grid-template-columns: minmax(200px, 1fr) auto;
    align-items: center;
    gap: 8px 32px;
    margin: 0 auto;
    padding: 25px 32px 30px;
    border-top: 1px solid var(--border);
    background: #fff;
}
.landing-page .site-footer { width: 100%; padding-right: max(32px, calc((100% - 1056px) / 2)); padding-left: max(32px, calc((100% - 1056px) / 2)); }
.footer-brand { grid-column: 1; }
.site-footer p { grid-column: 1; max-width: 440px; margin: 0; color: var(--secondary); font-size: .82rem; }
.site-footer nav { display: flex; grid-column: 2; grid-row: 1 / span 2; gap: 20px; }
.site-footer nav a, .site-footer small, .public-footer { color: var(--muted); font-size: .75rem; }
.site-footer small { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--border); }
.public-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 17px max(24px, calc((100% - 900px) / 2));
    border-top: 1px solid var(--border);
    background: #fff;
}
.public-footer > span:last-child { display: flex; gap: 16px; }
.public-footer a { color: var(--secondary); }

/* Landing page */
.hero {
    display: grid;
    min-height: 525px;
    grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr);
    align-items: center;
    gap: 68px;
    padding: 68px 0 72px;
}
.hero-copy { max-width: 510px; }
.hero-copy > .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 21px; }
.hero-copy .status-dot { color: var(--emerald); box-shadow: 0 0 0 4px var(--emerald-soft); }
.hero h1 { max-width: 520px; margin: 0 0 18px; font-size: clamp(2.65rem, 5.2vw, 4.1rem); letter-spacing: -.055em; line-height: 1.06; }
.hero h1 span { color: var(--emerald); }
.hero-lead { max-width: 440px; margin: 0; color: var(--secondary); font-size: 1.02rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 27px 0 18px; }
.hero-actions .button { min-height: 48px; padding: 0 19px; }
.hero-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.hero-note svg { width: 17px; height: 17px; color: var(--emerald); }
.hero-visual { position: relative; min-width: 0; padding: 16px 9px 35px; }
.chat-window { position: relative; z-index: 1; max-width: 540px; overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: #fff; box-shadow: 0 25px 68px rgba(23, 58, 39, .1); }
.chat-window-bar { display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--secondary); font-size: .71rem; font-weight: 600; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d3d9d5; }
.window-dots i:first-child { background: #a9b4ae; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #3e7257; font-size: .66rem; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.chat-contact { display: flex; align-items: center; gap: 10px; padding: 17px 20px 8px; }
.chat-contact > span:last-child, .chat-contact b, .chat-contact small { display: block; }
.chat-contact b { font-size: .79rem; }
.chat-contact small { margin-top: 2px; color: var(--muted); font-size: .67rem; }
.chat-contact .avatar { width: 36px; height: 36px; font-size: .76rem; }
.chat-date { margin: 8px 0 14px; color: #93a099; font-size: .59rem; font-weight: 700; letter-spacing: .09em; text-align: center; }
.chat-bubble { width: fit-content; max-width: 77%; padding: 11px 13px 8px; border: 1px solid var(--border); border-radius: 4px 13px 13px 13px; font-size: .75rem; line-height: 1.55; }
.chat-bubble > span { display: block; }
.chat-bubble small { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 5px; color: #8b9891; font-size: .59rem; }
.chat-bubble small svg { width: 13px; height: 13px; color: var(--emerald); }
.customer-bubble { margin: 0 auto 14px 20px; background: #fafcfb; color: #34413b; }
.reply-label { display: flex; align-items: center; gap: 7px; margin: 0 20px 7px auto; color: #54836b; font-size: .58rem; font-weight: 700; letter-spacing: .07em; }
.reply-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }
.reply-bubble { margin: 0 20px 0 auto; border-color: #cfe8d8; border-radius: 13px 4px 13px 13px; background: var(--emerald-soft); color: #264a37; }
.chat-compose { display: flex; min-height: 43px; align-items: center; justify-content: space-between; margin: 20px; padding: 0 8px 0 12px; border: 1px solid var(--border); border-radius: 10px; color: #96a19b; font-size: .68rem; }
.compose-send { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--emerald); color: #fff; }
.compose-send svg { width: 15px; height: 15px; }
.visual-caption { position: absolute; right: -9px; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow-pop); }
.caption-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--emerald-soft); color: var(--emerald); }
.caption-icon svg { width: 18px; height: 18px; }
.visual-caption b, .visual-caption small { display: block; }
.visual-caption b { font-size: .71rem; }
.visual-caption small { margin-top: 2px; color: var(--muted); font-size: .64rem; }
.section-block { padding: 76px 0; border-top: 1px solid var(--border); }
.section-heading { max-width: 600px; margin: 0 auto 35px; text-align: center; }
.section-heading h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3.7vw, 2.45rem); letter-spacing: -.045em; }
.section-heading > p:last-child { margin: 0; color: var(--secondary); font-size: .9rem; }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step-card, .feature-card { position: relative; min-height: 205px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; }
.step-number { position: absolute; top: 24px; right: 24px; color: #9ca8a2; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.step-card .icon-tile, .feature-card .icon-tile { margin-bottom: 19px; }
.step-card h3, .feature-card h3 { margin-bottom: 8px; font-size: .96rem; }
.step-card p, .feature-card p { margin: 0; color: var(--secondary); font-size: .81rem; line-height: 1.65; }
.feature-section { background: var(--canvas); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { min-height: 190px; background: var(--surface); }
.feature-card code, .faq-list code { padding: 2px 5px; border: 1px solid #dfe8e3; border-radius: 5px; background: #f6f8f7; color: #285a41; font: 600 .8em var(--font-body); }
.faq-section { padding-bottom: 84px; }
.faq-list { max-width: 790px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: .9rem; font-weight: 650; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--secondary); font-size: 1.1rem; font-weight: 400; transition: transform 150ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 700px; margin: -3px 45px 18px 0; color: var(--secondary); font-size: .85rem; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 0 0 72px; padding: 32px 36px; border: 1px solid #cfe8d8; border-radius: var(--radius-card); background: #f4faf6; }
.cta-band h2 { margin: 0 0 7px; font-size: 1.48rem; }
.cta-band p:not(.eyebrow) { margin: 0; color: var(--secondary); font-size: .85rem; }
.cta-band .button { flex: 0 0 auto; }

/* Auth, legal, and public notifications */
.auth-card { width: min(450px, 100%); margin: 12px auto; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-soft); }
.auth-card h1 { margin: 7px 0 9px; font-size: 1.9rem; }
.auth-card > p { color: var(--secondary); font-size: .9rem; }
.auth-card > p.center { color: var(--secondary); }
.auth-card > form:not(.form) { margin-top: 23px; }
.auth-card .form { margin-top: 22px; }
.form { display: grid; gap: 18px; }
.form label, .form-label { display: grid; gap: 7px; color: #33433b; font-size: .82rem; font-weight: 650; }
.form label small, .form-label small { display: block; margin-top: -1px; color: var(--muted); font-size: .73rem; font-weight: 400; line-height: 1.5; }
.form input:not([type=checkbox]):not([type=file]), .form select, .form textarea, .form-control {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    outline: none;
    background: #fff;
    color: var(--ink);
    font-size: .86rem;
    line-height: 1.5;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form textarea, .form-control { min-height: 105px; resize: vertical; }
.form input[type=file] { width: 100%; min-height: 45px; padding: 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); background: var(--surface-soft); color: var(--secondary); font-size: .8rem; }
.form input:focus, .form select:focus, .form textarea:focus, .form-control:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(18, 140, 94, .12); }
.form input::placeholder, .form textarea::placeholder { color: #9aa59f; }
.form .check { display: flex; min-height: 44px; align-items: center; gap: 9px; font-weight: 500; }
.form .check input { width: 17px; height: 17px; margin: 0; accent-color: var(--emerald); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.form-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sub-link { display: inline-flex; min-height: 40px; align-items: center; color: var(--emerald); font-size: .83rem; font-weight: 600; }
.center { margin: 18px 0 0; text-align: center; }
.form-feedback { min-height: 0; margin: 0; color: var(--red); font-size: .82rem; }
.form-feedback:not(:empty) { padding: 10px 12px; border-radius: 9px; background: var(--red-soft); }
.legal-content { width: min(760px, 100%); margin: 0 auto; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-soft); }
.legal-content h1 { margin: 8px 0; }
.legal-content > p { color: #43524b; font-size: .91rem; line-height: 1.75; }
.legal-content > p.muted { color: var(--muted); font-size: .78rem; }
.legal-note { margin-top: 24px; padding: 13px 15px; border: 1px solid #f0dfb5; border-radius: 11px; background: #fff9e9; color: #795a1d !important; font-size: .8rem !important; }
.toast {
    position: fixed;
    z-index: 50;
    top: 88px;
    right: 24px;
    display: flex;
    width: min(430px, calc(100vw - 32px));
    min-height: 52px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid #c9ead7;
    border-radius: 12px;
    background: #f1faf4;
    color: #245d3f;
    box-shadow: var(--shadow-pop);
    font-size: .84rem;
    animation: toast-in 180ms ease-out both;
}
.toast > svg { width: 19px; height: 19px; }
.toast > span { flex: 1; }
.toast-close { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #52725e; cursor: pointer; }
.toast-close:hover { background: #e2f2e8; }
.toast-close svg { width: 17px; height: 17px; }
.toast.is-dismissing { opacity: 0; transform: translateY(-5px); transition: opacity 180ms ease, transform 180ms ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.notice { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid #e7dfc8; border-radius: 12px; background: #fffaf0; color: #705d31; font-size: .84rem; }
.notice svg { width: 18px; height: 18px; margin-top: 1px; }
.notice.error { border-color: #f0d2cf; background: var(--red-soft); color: #913a36; }

/* Authenticated application shell */
.app-page { background: var(--canvas); }
.app-layout { display: flex; min-height: 100vh; }
.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    width: 236px;
    height: 100vh;
    flex: 0 0 236px;
    flex-direction: column;
    padding: 29px 16px 20px;
    border-right: 1px solid var(--border);
    background: #fff;
}
.sidebar-label { padding: 0 12px 11px; color: #829089; font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-nav a { display: flex; min-height: 46px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: #56665f; font-size: .85rem; font-weight: 570; }
.sidebar-nav a:hover { background: #f7faf8; color: var(--ink); text-decoration: none; }
.sidebar-nav a.active { background: var(--emerald-soft); color: #176644; font-weight: 680; }
.sidebar-nav a svg { width: 19px; height: 19px; }
.sidebar-note { display: flex; gap: 10px; margin-top: auto; padding: 14px 12px; border: 1px solid #e7eee9; border-radius: 12px; background: #f9fbfa; }
.sidebar-note-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--emerald-soft); color: var(--emerald); }
.sidebar-note-icon svg { width: 16px; height: 16px; }
.sidebar-note b, .sidebar-note small { display: block; }
.sidebar-note b { margin-bottom: 3px; font-size: .72rem; }
.sidebar-note small { color: var(--secondary); font-size: .65rem; line-height: 1.5; }
.app-stage { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.app-topbar { position: sticky; z-index: 25; top: 0; display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 34px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); }
.profile-menu { position: relative; }
.profile-toggle { display: flex; min-height: 44px; align-items: center; gap: 9px; padding: 4px 7px 4px 5px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }
.profile-toggle:hover, .profile-toggle[aria-expanded=true] { border-color: var(--border); background: var(--surface-soft); }
.profile-avatar { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cfe8d8; border-radius: 50%; background: var(--emerald-soft); color: #176644; font-size: .77rem; font-weight: 700; }
.profile-name { max-width: 160px; overflow: hidden; color: #34423b; font-size: .79rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chevron-icon { width: 16px; height: 16px; color: var(--muted); }
.quick-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(265px, calc(100vw - 24px)); padding: 9px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow-pop); }
.quick-menu-panel > a, .quick-menu-panel form button { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 10px; padding: 7px 9px; border: 0; border-radius: 8px; background: transparent; color: #44534b; cursor: pointer; font-size: .81rem; text-align: left; }
.quick-menu-panel > a:hover, .quick-menu-panel form button:hover { background: #f5f9f6; color: var(--ink); text-decoration: none; }
.quick-menu-panel svg { width: 17px; height: 17px; }
.menu-heading { margin: 5px 9px 3px; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.menu-user { display: block; overflow: hidden; padding: 0 9px 9px; color: var(--secondary); font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.menu-divider { height: 1px; margin: 6px 2px; background: var(--border); }
.quick-menu-panel form { margin: 0; }
.quick-menu-panel form button { color: var(--red); }
.app-content { width: min(1260px, 100%); flex: 1; margin: 0 auto; padding: 34px clamp(20px, 3vw, 42px) 52px; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; padding: 16px clamp(20px, 3vw, 42px); border-top: 1px solid var(--border); color: var(--muted); font-size: .72rem; }
.app-footer > span:last-child { display: flex; gap: 16px; }
.app-footer a { color: var(--secondary); }
.mobile-tabs { display: none; }

/* Page headings and dashboard */
.page-heading, .dashboard-welcome, .admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading h1, .dashboard-welcome h1, .admin-page-heading h1 { margin: 0 0 7px; font-size: clamp(1.9rem, 3.7vw, 2.55rem); }
.page-heading p:last-child, .dashboard-welcome p:last-child, .admin-page-heading p:last-child { margin: 0; }
.page-heading > .button { flex: 0 0 auto; }
.dashboard-welcome { align-items: flex-end; }
.dashboard-welcome .status-badge { margin-bottom: 5px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { position: relative; min-height: 155px; padding: 19px 20px; }
.stat-card .icon-tile { position: absolute; top: 18px; right: 18px; }
.stat-label { display: block; padding-right: 50px; color: var(--secondary); font-size: .78rem; font-weight: 550; }
.stat-card > b { display: block; margin: 8px 0 7px; font: 700 2rem/1.15 var(--font-heading); letter-spacing: -.045em; }
.stat-card > a { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; color: var(--emerald); font-size: .75rem; font-weight: 620; }
.stat-card > a svg { width: 14px; height: 14px; }
.verify-notice { align-items: center; margin-bottom: 18px; }
.verify-notice > svg { color: #95742e; }
.verify-notice > span { display: grid; flex: 1; gap: 2px; }
.verify-notice b { font-size: .81rem; }
.verify-notice small { color: var(--secondary); font-size: .74rem; }
.verify-notice a { display: inline-flex; align-items: center; gap: 5px; color: #7b5b1d; font-size: .78rem; font-weight: 650; }
.verify-notice a svg { width: 15px; height: 15px; }
.setup-card { margin-bottom: 20px; padding: 20px 22px; border: 1px solid #d6eadc; border-radius: var(--radius-card); background: #fbfefc; box-shadow: var(--shadow-soft); }
.setup-intro { display: flex; align-items: flex-start; gap: 12px; }
.setup-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--emerald-soft); color: var(--emerald); }
.setup-icon svg { width: 18px; height: 18px; }
.setup-intro .eyebrow { margin: 1px 0 4px; }
.setup-intro h2 { margin: 0 0 4px; font-size: 1.08rem; }
.setup-intro p:last-child { margin: 0; font-size: .78rem; }
.setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.setup-step { display: flex; min-height: 66px; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--ink); }
.setup-step:hover { border-color: #b6d9c3; color: var(--ink); text-decoration: none; }
.step-check { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border: 1px solid #d5dfd9; border-radius: 50%; color: transparent; }
.step-check svg { width: 13px; height: 13px; }
.setup-step.is-done .step-check { border-color: #bbdfc9; background: var(--emerald-soft); color: var(--emerald); }
.setup-step > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.setup-step b { font-size: .75rem; }
.setup-step small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.step-arrow { width: 15px; height: 15px; margin-left: auto; color: #8c9992; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: 17px; }
.content-card { min-width: 0; padding: 20px; }
.card-heading, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.card-heading .eyebrow, .section-title .eyebrow { margin-bottom: 5px; }
.card-heading h2, .section-title h2 { margin: 0; font-size: 1.08rem; }
.card-heading .text-link { flex: 0 0 auto; }
.conversation-row { display: flex; min-height: 68px; align-items: center; gap: 11px; border-top: 1px solid #edf0ee; color: var(--ink); }
.conversation-row:hover { text-decoration: none; }
.conversation-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.conversation-copy b { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy small { overflow: hidden; color: var(--secondary); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row time { align-self: flex-start; margin-top: 16px; color: var(--muted); font-size: .65rem; white-space: nowrap; }
.quick-actions-card { padding-bottom: 10px; }
.quick-actions-card .card-heading { margin-bottom: 8px; }
.quick-action { display: flex; min-height: 71px; align-items: center; gap: 11px; border-top: 1px solid #edf0ee; color: var(--ink); }
.quick-action:hover { color: var(--ink); text-decoration: none; }
.quick-action .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.quick-action .icon-tile svg { width: 18px; height: 18px; }
.quick-action > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.quick-action b { font-size: .77rem; }
.quick-action small { color: var(--muted); font-size: .69rem; }
.quick-arrow { width: 16px; height: 16px; margin-left: auto; color: #8a9890; }
.safety-note { display: flex; align-items: flex-start; gap: 10px; margin: 17px 0 0; padding: 12px 14px; border: 1px solid #e2e9e5; border-radius: 11px; background: #f9fbfa; color: var(--secondary); font-size: .76rem; line-height: 1.55; }
.safety-note svg { width: 18px; height: 18px; color: #557d64; }
.safety-note span { flex: 1; }
.empty-state { display: flex; min-height: 210px; flex-direction: column; align-items: center; justify-content: center; padding: 26px 18px; text-align: center; }
.empty-state h3, .empty-state h2 { margin: 10px 0 6px; font-size: 1rem; }
.empty-state p { max-width: 370px; margin: 0 0 15px; color: var(--secondary); font-size: .78rem; line-height: 1.6; }
.empty-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #dcefe3; border-radius: 14px; background: var(--emerald-soft); color: var(--emerald); }
.empty-icon svg { width: 21px; height: 21px; }
.compact-empty { min-height: 165px; padding: 20px; }

/* Inbox */
.inbox-heading { margin-bottom: 18px; }
.inbox-heading .button svg { width: 17px; height: 17px; }
.inbox-layout { display: grid; min-height: min(650px, calc(100vh - 220px)); grid-template-columns: minmax(275px, .78fr) minmax(0, 1.35fr); gap: 16px; }
.contact-list, .conversation-panel { display: flex; min-height: 500px; flex-direction: column; overflow: hidden; padding: 0; }
.list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 18px 12px; }
.list-heading > div { display: flex; align-items: center; gap: 8px; }
.list-heading h2 { margin: 0; font-size: .97rem; }
.list-status { display: inline-flex; align-items: center; gap: 6px; color: var(--secondary); font-size: .68rem; }
.list-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.search-field { display: flex; min-height: 42px; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #829088; }
.search-field svg { width: 17px; height: 17px; }
.search-field input { width: 100%; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .75rem; }
.search-field input::placeholder { color: #96a29b; }
.contact-items { min-height: 0; flex: 1; overflow-y: auto; border-top: 1px solid var(--border); }
.contact-item { display: flex; min-height: 73px; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #edf0ee; color: var(--ink); }
.contact-item:hover { background: #fafcfb; color: var(--ink); text-decoration: none; }
.contact-item.active { background: #f0f8f3; box-shadow: inset 3px 0 var(--emerald); }
.contact-item .avatar { width: 38px; height: 38px; font-size: .78rem; }
.contact-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.contact-copy b, .contact-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-copy b { font-size: .77rem; }
.contact-copy small { color: var(--secondary); font-size: .68rem; }
.contact-meta { display: grid; justify-items: end; gap: 5px; color: var(--muted); font-size: .63rem; white-space: nowrap; }
.contact-meta small { font-size: .6rem; }
.contact-items .empty-state { padding-inline: 16px; }
.conversation-header { display: flex; min-height: 70px; align-items: center; gap: 11px; padding: 12px 17px; border-bottom: 1px solid var(--border); }
.conversation-header > span:last-child { display: grid; gap: 2px; }
.conversation-header b { font-size: .82rem; }
.conversation-header small { color: var(--muted); font-size: .68rem; }
.message-thread { display: flex; min-height: 350px; flex: 1; flex-direction: column; gap: 13px; overflow-y: auto; padding: 22px; background-color: #fafcfb; background-image: radial-gradient(#eaf0ec .7px, transparent .7px); background-size: 18px 18px; }
.message-line { display: flex; }
.message-in { justify-content: flex-start; }
.message-out { justify-content: flex-end; }
.message-bubble { max-width: min(78%, 460px); padding: 10px 12px 8px; border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; background: #fff; box-shadow: 0 2px 5px rgba(22, 40, 30, .025); }
.message-out .message-bubble { border-color: #cfe6d7; border-radius: 12px 4px 12px 12px; background: #edf8f1; }
.message-bubble p { margin: 0; color: #26342d; font-size: .79rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble small { display: block; margin-top: 6px; color: var(--muted); font-size: .61rem; text-align: right; }
.thread-footnote { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .68rem; }
.thread-footnote svg { width: 15px; height: 15px; }
.mobile-back { display: none; }

/* Auto replies and rule forms */
.rule-create { margin-bottom: 27px; padding: 0; overflow: hidden; }
.rule-create > summary { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; }
.rule-create > summary::-webkit-details-marker { display: none; }
.rule-create > summary > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.rule-create > summary b { font-size: .85rem; }
.rule-create > summary small { color: var(--secondary); font-size: .73rem; }
.summary-action { display: inline-flex; min-height: 38px; align-items: center; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--secondary); font-size: .76rem; font-weight: 650; }
.rule-create[open] > summary { border-bottom: 1px solid var(--border); background: #fcfdfc; }
.rule-create[open] .summary-action { border-color: #cfe8d8; background: var(--emerald-soft); color: var(--emerald); }
.rule-form { padding: 20px; }
.rule-form .form-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rules-section { margin-top: 30px; }
.rules-section > .section-title { margin-bottom: 12px; }
.rules-list { display: grid; gap: 12px; }
.rule-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 18px; }
.rule-card-main { min-width: 0; flex: 1; }
.rule-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rule-title-line h3 { margin: 0; font-size: .95rem; }
.rule-meta { margin: 8px 0 11px; color: var(--secondary); font-size: .72rem; }
.rule-meta span { padding: 0 4px; color: #a0aaa4; }
.keyword-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.keyword-list span { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 9px; border: 1px solid #dcece2; border-radius: 999px; background: #f4faf6; color: #315b41; font-size: .68rem; }
.keyword-list .keyword-muted { border-color: var(--border); background: var(--gray-soft); color: var(--muted); }
.rule-reply-preview { padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfb; }
.rule-reply-preview small { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .08em; }
.rule-reply-preview p { margin: 5px 0 0; color: #45534c; font-size: .77rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.rule-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.rule-card-actions form { margin: 0; }
.form-panel { width: min(760px, 100%); margin: 0 auto; padding: 22px; }
.edit-rule-form { grid-template-columns: 1fr; }
.edit-rule-form .form-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reply-composer { display: grid; gap: 9px; }
.reply-composer > label { display: grid; gap: 5px; color: #33433b; font-size: .82rem; font-weight: 650; }
.reply-composer > label small { color: var(--muted); font-size: .73rem; font-weight: 400; line-height: 1.5; }
.reply-shortcut-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.reply-shortcut-heading { margin-right: 3px; color: var(--secondary); font-size: .72rem; font-weight: 650; }
.reply-shortcut-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; color: #3e5147; cursor: pointer; font-size: .74rem; font-weight: 650; }
.reply-shortcut-button:hover { border-color: #b8d9c5; background: #f5faf6; color: #176644; }
.reply-shortcut-reference { color: var(--secondary); font-size: .74rem; }
.reply-shortcut-reference summary { display: inline-flex; min-height: 32px; align-items: center; cursor: pointer; color: var(--emerald); font-weight: 650; }
.reply-shortcut-reference summary:hover { color: var(--emerald-hover); text-decoration: underline; }
.reply-shortcut-list { display: grid; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.reply-shortcut-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.reply-shortcut-list code { min-width: 92px; color: #285a41; font: 650 .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.reply-shortcut-list span { color: var(--secondary); font-size: .72rem; }
.risk-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid #e8e6d9; border-radius: 11px; background: #fbfaf4; color: #71684c; font-size: .76rem; line-height: 1.6; }

/* WhatsApp account management */
.connection-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; gap: 16px; margin-bottom: 20px; }
.connect-form-panel, .connect-result { padding: 22px; }
.panel-intro { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.panel-intro h2 { margin: 0 0 5px; font-size: 1.1rem; }
.panel-intro p:last-child { margin: 0; font-size: .79rem; }
.connect-form-panel .form { gap: 15px; }
.connect-result { display: flex; min-height: 300px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.result-mark { display: grid; width: 52px; height: 52px; margin-bottom: 15px; place-items: center; border: 1px solid #d8eee1; border-radius: 16px; background: var(--emerald-soft); color: var(--emerald); }
.result-mark svg { width: 24px; height: 24px; }
.connect-result .eyebrow { margin-bottom: 5px; }
.connect-result h2 { margin: 0 0 6px; font-size: 1.13rem; }
.connect-result > p.muted { max-width: 390px; margin-bottom: 8px; font-size: .78rem; }
.connect-result img[data-result-qr] { display: block; width: min(220px, 100%); height: auto; margin: 14px auto; border: 8px solid #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--border); }
.pair-code { margin: 10px 0; color: var(--ink); font: 700 1.6rem var(--font-heading); letter-spacing: .18em; }
.result-help { font-size: .72rem !important; }
.sessions-panel { padding: 20px; }
.sessions-panel .section-title { margin-bottom: 9px; }
.session-list { border-top: 1px solid var(--border); }
.session-row { display: flex; min-height: 76px; align-items: center; gap: 12px; border-bottom: 1px solid #edf0ee; }
.session-row:last-child { border-bottom: 0; }
.session-row .icon-tile { width: 37px; height: 37px; border-radius: 11px; }
.session-row .icon-tile svg { width: 18px; height: 18px; }
.session-info { display: grid; min-width: 0; flex: 1; gap: 3px; }
.session-info b { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.session-info small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }

/* Admin tabs, metrics, tables, and settings */
.admin-page-heading { margin-bottom: 19px; }
.admin-badge { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid #d5e8dc; border-radius: 999px; background: #f2faf5; color: #286847; font-size: .72rem; font-weight: 700; }
.admin-badge svg { width: 16px; height: 16px; }
.admin-tabs { display: flex; gap: 4px; margin: 0 0 20px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.admin-tabs button { display: inline-flex; min-height: 47px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--secondary); cursor: pointer; font-size: .79rem; font-weight: 600; }
.admin-tabs button:hover { color: var(--ink); }
.admin-tabs button[aria-selected=true] { border-bottom-color: var(--emerald); color: var(--emerald); }
.admin-tabs button svg { width: 17px; height: 17px; }
.admin-tabs button span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 999px; background: #edf1ee; color: var(--secondary); font-size: .63rem; }
.admin-tab-panel { min-width: 0; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.admin-kpi { position: relative; min-height: 141px; padding: 18px; }
.admin-kpi .icon-tile { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; }
.admin-kpi .icon-tile svg { width: 18px; height: 18px; }
.admin-kpi small, .admin-kpi > span:last-child { display: block; color: var(--secondary); font-size: .72rem; }
.admin-kpi small { padding-right: 43px; }
.admin-kpi b { display: block; margin: 12px 0 5px; font: 700 1.75rem/1.1 var(--font-heading); letter-spacing: -.045em; }
.admin-kpi > span:last-child { font-size: .66rem; }
.admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.admin-overview-card h2, .site-preview-card h2 { margin-bottom: 6px; }
.admin-overview-card > p:not(.eyebrow) { margin-bottom: 13px; font-size: .8rem; }
.overview-links { display: grid; }
.overview-links button { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: #35443c; cursor: pointer; font-size: .78rem; text-align: left; }
.overview-links button:hover { color: var(--emerald); }
.overview-links svg { width: 16px; height: 16px; }
.brand-live-preview { display: flex; min-width: 0; align-items: center; gap: 12px; margin-top: 17px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfb; }
.preview-logo { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.preview-logo img { width: 31px; height: 31px; border-radius: 8px; object-fit: cover; }
.brand-live-preview > span:last-child { display: grid; min-width: 0; gap: 3px; }
.brand-live-preview b { font-size: .84rem; }
.brand-live-preview small { overflow: hidden; color: var(--secondary); font-size: .7rem; text-overflow: ellipsis; }
.admin-section-title { align-items: flex-end; margin-bottom: 14px; }
.admin-section-title .muted { margin: 5px 0 0; font-size: .8rem; }
.admin-table-card { padding: 0; overflow: hidden; }
.admin-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px; border-bottom: 1px solid var(--border); }
.admin-table-tools .search-field { width: min(340px, 100%); margin: 0; }
.filter-chips { display: flex; gap: 5px; }
.filter-chips button { min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--secondary); cursor: pointer; font-size: .73rem; font-weight: 600; }
.filter-chips button:hover { background: #f4f7f5; }
.filter-chips button.active { border-color: #cce5d5; background: var(--emerald-soft); color: #176644; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { height: 43px; padding: 0 15px; border-bottom: 1px solid var(--border); background: #fafcfb; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 15px; border-bottom: 1px solid #edf0ee; color: #39473f; font-size: .75rem; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfdfc; }
.table-user { display: flex; min-width: 190px; align-items: center; gap: 10px; }
.table-user > span:last-child { display: grid; min-width: 0; gap: 2px; }
.table-user .avatar { width: 35px; height: 35px; font-size: .75rem; }
.table-user b, .table-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-user b { font-size: .75rem; }
.table-user small, .table-subtext { color: var(--muted); font-size: .66rem; }
.table-user .icon-tile { width: 35px; height: 35px; }
.table-meta { display: block; font-size: .73rem; }
.table-subtext { display: block; margin-top: 4px; }
.admin-user-form { display: flex; align-items: center; gap: 5px; }
.admin-user-form select { width: auto; max-width: 98px; min-height: 36px; padding: 6px 23px 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #3b4942; font-size: .68rem; }
.action-menu { position: relative; }
.action-menu > summary { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--secondary); cursor: pointer; list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary, .action-menu > summary:hover { background: #f5f8f6; }
.action-menu > summary svg { width: 18px; height: 18px; }
.action-menu > div { position: absolute; z-index: 6; top: calc(100% + 5px); right: 0; min-width: 132px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: var(--shadow-pop); }
.action-menu .button { width: 100%; min-height: 37px; padding-inline: 9px; font-size: .72rem; }
.pagination-wrap { padding: 14px 16px; border-top: 1px solid var(--border); }
.pagination-wrap nav { display: flex; justify-content: center; }
.pagination-wrap nav > div:first-child { display: none; }
.pagination-wrap nav > div:last-child > span, .pagination-wrap nav > div:last-child > a { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; margin: 0 2px; border: 1px solid var(--border); border-radius: 8px; color: var(--secondary); font-size: .74rem; }
.pagination-wrap nav > div:last-child > span[aria-current] { border-color: #cce5d5; background: var(--emerald-soft); color: #176644; }
.pagination-wrap nav svg { width: 16px; height: 16px; }
.account-table .table-user { min-width: 170px; }
.account-table .link-button { min-height: 38px; font-size: .73rem; white-space: nowrap; }
.account-table .link-button svg { width: 15px; height: 15px; }
.admin-brand-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); align-items: start; gap: 15px; }
.brand-editor-card, .brand-preview-card, .legal-editor-card { padding: 21px; }
.brand-editor-card .form { gap: 15px; }
.brand-preview-card h3 { margin: 0; font-size: .91rem; }
.brand-preview-card .brand-live-preview { margin-top: 13px; }
.logo-remove-form { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.legal-editor-card { display: grid; gap: 17px; }
.legal-tabs { display: flex; gap: 4px; padding-bottom: 0; border-bottom: 1px solid var(--border); }
.legal-tabs button { min-height: 43px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--secondary); cursor: pointer; font-size: .78rem; font-weight: 600; }
.legal-tabs button[aria-selected=true] { border-bottom-color: var(--emerald); color: var(--emerald); }
.legal-editor-card .form-label { margin-bottom: 8px; }
.legal-editor-card .form-label small { margin-top: 2px; }
.legal-textarea { min-height: 300px; }

/* Small screen adaptations */
@media (max-width: 1040px) {
    .app-sidebar { width: 208px; flex-basis: 208px; }
    .app-content { padding-inline: 24px; }
    .hero { gap: 38px; }
    .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-user-form { flex-wrap: wrap; }
}
@media (max-width: 820px) {
    .site-header { min-height: 68px; gap: 20px; padding-inline: 22px; }
    .landing-page .site-header { padding-inline: 22px; }
    .site-nav { gap: 16px; }
    .landing-shell { padding-inline: 22px; }
    .hero { min-height: initial; grid-template-columns: 1fr 1fr; gap: 22px; padding: 56px 0 64px; }
    .hero h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
    .hero-visual { padding-inline: 0; }
    .visual-caption { right: -3px; }
    .app-sidebar { display: none; }
    .app-content { padding: 27px 24px 40px; }
    .mobile-tabs { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; min-height: 64px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 5px 8px max(5px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); }
    .mobile-tabs a { display: flex; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 9px; color: var(--muted); font-size: .63rem; font-weight: 550; }
    .mobile-tabs a.active { color: var(--emerald); font-weight: 700; }
    .mobile-tabs svg { width: 19px; height: 19px; }
    .app-footer { padding-bottom: 80px; }
    .app-content { padding-bottom: 30px; }
    .inbox-layout { grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr); }
}
@media (max-width: 680px) {
    body { font-size: 14px; }
    h1 { font-size: 2rem; }
    .site-header { min-height: 62px; padding-inline: 16px; }
    .landing-page .site-header { padding-inline: 16px; }
    .site-nav { display: none; }
    .site-actions { gap: 13px; }
    .site-actions .button { min-height: 38px; padding-inline: 12px; font-size: .78rem; }
    .sign-in-link { font-size: .78rem; }
    .brand { gap: 8px; font-size: .92rem; }
    .brand-image { width: 31px; height: 31px; border-radius: 9px; }
    .landing-shell { padding: 0 16px; }
    .hero { grid-template-columns: 1fr; gap: 28px; padding: 47px 0 55px; }
    .hero h1 { max-width: 500px; font-size: clamp(2.55rem, 11vw, 3.4rem); }
    .hero-lead { font-size: .93rem; }
    .hero-visual { width: min(100%, 510px); margin: 0 auto; padding: 0 4px 30px; }
    .chat-window { border-radius: 14px; }
    .chat-window-bar { min-height: 43px; padding-inline: 12px; font-size: .64rem; }
    .chat-contact { padding-inline: 14px; }
    .customer-bubble { margin-left: 14px; }
    .reply-label, .reply-bubble { margin-right: 14px; }
    .chat-compose { margin: 16px 14px; }
    .visual-caption { right: -2px; bottom: -2px; padding: 8px 10px; }
    .caption-icon { width: 30px; height: 30px; }
    .visual-caption b { font-size: .66rem; }
    .visual-caption small { font-size: .59rem; }
    .section-block { padding: 55px 0; }
    .section-heading { margin-bottom: 25px; }
    .section-heading h2 { font-size: 1.9rem; }
    .steps-grid, .feature-grid { grid-template-columns: 1fr; gap: 10px; }
    .step-card, .feature-card { min-height: initial; padding: 20px; }
    .step-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
    .step-card .icon-tile { grid-row: span 2; margin: 0; }
    .step-card h3 { align-self: end; margin-bottom: 4px; }
    .step-card p { grid-column: 2; }
    .step-number { top: 20px; right: 20px; }
    .feature-card .icon-tile { margin-bottom: 14px; }
    .faq-section { padding-bottom: 56px; }
    .faq-list summary { min-height: 58px; font-size: .83rem; }
    .faq-list details p { font-size: .79rem; }
    .cta-band { flex-direction: column; align-items: stretch; gap: 17px; margin-bottom: 48px; padding: 23px; }
    .cta-band h2 { font-size: 1.24rem; }
    .cta-band .button { align-self: flex-start; }
    .site-footer, .landing-page .site-footer { grid-template-columns: 1fr; gap: 9px; padding: 20px 16px 24px; }
    .site-footer nav { grid-column: 1; grid-row: auto; gap: 17px; padding: 5px 0; }
    .site-footer small { grid-column: 1; }
    .auth-shell { min-height: calc(100vh - 120px); padding: 28px 16px 48px; }
    .auth-card, .legal-content { padding: 24px 20px; }
    .auth-card h1 { font-size: 1.75rem; }
    .public-footer { padding-inline: 16px; }
    .toast { top: 72px; right: 12px; width: calc(100vw - 24px); font-size: .77rem; }
    .app-topbar { min-height: 60px; padding-inline: 15px; }
    .profile-name { display: none; }
    .app-content { padding: 24px 15px 26px; }
    .app-footer { padding: 14px 15px 80px; font-size: .67rem; }
    .page-heading, .dashboard-welcome, .admin-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 19px; }
    .page-heading h1, .dashboard-welcome h1, .admin-page-heading h1 { font-size: 1.95rem; }
    .page-heading > .button { align-self: flex-start; }
    .dashboard-welcome .status-badge { margin: 0; }
    .stats-grid { grid-template-columns: 1fr; gap: 9px; margin-bottom: 14px; }
    .stat-card { min-height: 117px; padding: 15px; }
    .stat-card .icon-tile { top: 14px; right: 14px; width: 35px; height: 35px; }
    .stat-card > b { margin: 5px 0 4px; font-size: 1.72rem; }
    .setup-card { padding: 16px; }
    .setup-steps { grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
    .setup-step { min-height: 61px; }
    .dashboard-columns { grid-template-columns: 1fr; gap: 12px; }
    .content-card { padding: 16px; }
    .card-heading { align-items: flex-start; }
    .conversation-row { min-height: 65px; }
    .conversation-row time { font-size: .59rem; }
    .verify-notice { flex-wrap: wrap; }
    .verify-notice > span { min-width: calc(100% - 42px); }
    .verify-notice a { margin-left: 28px; }
    .inbox-heading { flex-direction: row; align-items: flex-end; }
    .inbox-heading .button { min-height: 40px; padding-inline: 10px; font-size: .74rem; }
    .inbox-layout { display: block; min-height: 0; }
    .contact-list { min-height: 480px; }
    .conversation-panel { display: none; min-height: calc(100vh - 160px); }
    .inbox-layout.mobile-show-thread .contact-list { display: none; }
    .inbox-layout.mobile-show-thread .conversation-panel { display: flex; }
    .mobile-back { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--secondary); transform: rotate(180deg); }
    .mobile-back svg { width: 17px; height: 17px; }
    .message-thread { min-height: 0; padding: 16px 13px; }
    .message-bubble { max-width: 88%; }
    .rule-create > summary { min-height: 71px; padding: 12px; }
    .rule-create > summary .icon-tile { width: 36px; height: 36px; }
    .summary-action { min-height: 35px; padding-inline: 9px; font-size: .69rem; }
    .rule-form { padding: 16px; }
    .rule-form .form-two-col, .edit-rule-form .form-two-col, .form-two-col { grid-template-columns: 1fr; gap: 15px; }
    .rule-card { flex-direction: column; gap: 13px; padding: 15px; }
    .rule-card-actions { width: 100%; flex-wrap: wrap; }
    .rule-card-actions .button { min-height: 40px; }
    .connection-layout { grid-template-columns: 1fr; gap: 11px; }
    .connect-form-panel, .connect-result { padding: 17px; }
    .connect-result { min-height: 240px; }
    .sessions-panel { padding: 16px; }
    .session-row { flex-wrap: wrap; gap: 8px 10px; padding: 12px 0; }
    .session-row .session-info { min-width: calc(100% - 60px); }
    .session-row > .status-badge { margin-left: 47px; }
    .session-row > form { margin-left: auto; }
    .session-row .link-button { min-height: 40px; }
    .admin-tabs { margin-right: -15px; margin-left: -15px; padding: 0 9px; }
    .admin-tabs button { min-height: 44px; padding-inline: 10px; font-size: .73rem; }
    .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .admin-kpi { min-height: 126px; padding: 14px; }
    .admin-kpi .icon-tile { top: 12px; right: 12px; width: 31px; height: 31px; }
    .admin-kpi .icon-tile svg { width: 16px; height: 16px; }
    .admin-kpi small { padding-right: 33px; font-size: .65rem; }
    .admin-kpi b { margin: 11px 0 5px; font-size: 1.5rem; }
    .admin-kpi > span:last-child { font-size: .6rem; }
    .admin-overview-grid, .admin-brand-layout { grid-template-columns: 1fr; gap: 11px; }
    .admin-section-title { flex-direction: row; align-items: flex-end; }
    .admin-table-tools { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; }
    .admin-table-tools .search-field { width: 100%; }
    .filter-chips { overflow-x: auto; }
    .filter-chips button { min-height: 38px; }
    .table-scroll { overflow: visible; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table thead { display: none; }
    .data-table tbody { padding: 10px; }
    .data-table tbody tr { margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
    .data-table tbody tr:last-child { border-bottom: 1px solid var(--border); }
    .data-table td { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 43px; padding: 8px 0; border-bottom: 1px solid #f0f2f1; font-size: .71rem; }
    .data-table td::before { content: attr(data-label); color: var(--muted); font-size: .65rem; font-weight: 650; }
    .data-table td:first-child { grid-template-columns: 1fr; padding-top: 5px; }
    .data-table td:first-child::before, .data-table td[colspan]::before { display: none; }
    .data-table td:last-child { border-bottom: 0; }
    .data-table td[colspan] { display: block; }
    .data-table td[colspan] .empty-state { min-height: 130px; }
    .table-user { min-width: 0; }
    .admin-user-form { flex-wrap: wrap; }
    .admin-user-form select { max-width: 105px; min-height: 40px; }
    .admin-user-form .action-menu { margin-left: auto; }
    .account-table .table-user { min-width: 0; }
    .pagination-wrap { padding: 10px; }
    .brand-editor-card, .brand-preview-card, .legal-editor-card { padding: 16px; }
    .legal-textarea { min-height: 240px; }
    .legal-tabs button { padding-inline: 9px; font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ReplyFlow visual refresh */
:root {
    --canvas: #f5faf6;
    --surface-soft: #fbfdfb;
    --border: #e1ebe4;
    --border-strong: #cddbd2;
    --ink: #10251a;
    --secondary: #536a5b;
    --muted: #7b8e81;
    --emerald: #11884d;
    --emerald-hover: #0b6e3d;
    --emerald-soft: #e7f7ed;
    --shadow-soft: 0 10px 30px rgba(20, 65, 38, .055);
    --shadow-pop: 0 18px 46px rgba(12, 49, 28, .15);
}

body { color: var(--ink); }
.button.primary {
    background: linear-gradient(135deg, #11884d, #20a65e);
    box-shadow: 0 7px 18px rgba(17, 136, 77, .17);
}
.button.primary:hover {
    background: linear-gradient(135deg, #0b6e3d, #11884d);
    box-shadow: 0 10px 22px rgba(17, 136, 77, .24);
}
.icon-tile { background: linear-gradient(145deg, #e9f9ef, #ddf3e5); }

/* Landing page: quiet motion, soft green atmosphere, and a stronger first impression */
.landing-page { background: #fff; }
.landing-page .site-header {
    position: sticky;
    top: 0;
    border-bottom-color: rgba(222, 236, 226, .82);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
}
.landing-page .site-nav a { transition: color 160ms ease; }
.landing-page .site-nav a:hover { color: var(--emerald); }
.landing-shell { overflow: clip; }
.hero {
    position: relative;
    min-height: 570px;
    gap: clamp(34px, 6vw, 78px);
    padding-top: 74px;
    padding-bottom: 78px;
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy > .eyebrow {
    padding: 8px 12px;
    border: 1px solid #d8efdf;
    border-radius: 999px;
    background: #f3fbf5;
    color: #247448;
    letter-spacing: .1em;
}
.hero-copy .status-dot { animation: status-glow 2.4s ease-in-out infinite; }
.hero h1 { font-size: clamp(2.8rem, 5.1vw, 4.45rem); line-height: 1.035; }
.hero h1 span {
    color: #12884e;
    background: linear-gradient(100deg, #0e8046 5%, #24ad62 90%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-lead { max-width: 470px; font-size: 1.04rem; line-height: 1.8; }
.hero-actions .button { min-height: 50px; padding-inline: 21px; }
.hero-visual { padding: 20px 14px 44px; }
.hero-visual::before {
    position: absolute;
    z-index: 0;
    inset: 0 1% 7% 7%;
    border-radius: 40px;
    background:
        radial-gradient(ellipse at 56% 46%, rgba(194, 240, 207, .65), transparent 61%),
        radial-gradient(ellipse at 88% 14%, rgba(228, 248, 232, .96), transparent 52%);
    content: "";
    animation: ambient-drift 11s ease-in-out infinite alternate;
}
.hero-visual::after {
    position: absolute;
    z-index: 0;
    right: 4%;
    bottom: 9%;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(38, 155, 83, .15);
    border-radius: 50%;
    content: "";
    animation: orbit-breathe 6s ease-in-out infinite;
}
.chat-window {
    border-color: #dcebe0;
    border-radius: 20px;
    box-shadow: 0 30px 75px rgba(25, 83, 45, .15);
    animation: chat-float 7s ease-in-out infinite;
}
.chat-window-bar { background: linear-gradient(180deg, #fff, #fbfefb); }
.reply-bubble { background: #e6f8ec; }
.visual-caption {
    border-color: #dcebe0;
    box-shadow: 0 15px 38px rgba(24, 71, 39, .14);
    animation: caption-float 5s ease-in-out infinite;
}
.section-block { border-top-color: #e9f0eb; }
.section-heading h2 { letter-spacing: -.05em; }
.step-card, .feature-card {
    border-color: #e2ece5;
    box-shadow: 0 7px 23px rgba(21, 62, 37, .035);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.step-card:hover, .feature-card:hover {
    transform: translateY(-5px);
    border-color: #c4e4ce;
    box-shadow: 0 16px 34px rgba(21, 77, 41, .09);
}
.step-number { color: #71a784; }
.feature-section { background: linear-gradient(180deg, #f6fbf7, #f0f8f2); }
.faq-list { border-top-color: #dce8df; }
.faq-list details { border-bottom-color: #dce8df; }
.faq-list summary span { transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.faq-list details[open] summary span { background: var(--emerald-soft); color: var(--emerald); }
.cta-band {
    border-color: #cce8d4;
    background:
        radial-gradient(circle at 88% 14%, rgba(196, 236, 207, .7), transparent 32%),
        linear-gradient(115deg, #f1faf3, #f8fcf8);
    box-shadow: 0 12px 34px rgba(26, 87, 45, .055);
}
.cta-band .eyebrow { color: #31784b; }
html.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .65, .25, 1);
}
html.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.steps-grid [data-reveal]:nth-child(2), .feature-grid [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.steps-grid [data-reveal]:nth-child(3), .feature-grid [data-reveal]:nth-child(3) { transition-delay: 150ms; }
.feature-grid [data-reveal]:nth-child(4) { transition-delay: 40ms; }
.feature-grid [data-reveal]:nth-child(5) { transition-delay: 110ms; }
.feature-grid [data-reveal]:nth-child(6) { transition-delay: 180ms; }

/* Shared dark footer for public pages and the signed-in workspace */
.site-footer, .landing-page .site-footer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #07150d;
    color: #f2faf4;
}
.site-footer-inner { width: min(1200px, 100%); margin: 0 auto; padding: 54px 32px 21px; }
.site-footer-main { display: grid; grid-template-columns: minmax(240px, 1.25fr) minmax(150px, .7fr) minmax(175px, .8fr); gap: 48px; padding-bottom: 43px; }
.footer-brand { color: #f4fbf5; font-size: 1.16rem; }
.footer-brand:hover { color: #fff; }
.site-footer .brand-image { padding: 3px; border: 1px solid rgba(255, 255, 255, .1); background: #fff; object-fit: contain; }
.footer-identity p { max-width: 390px; margin: 17px 0 0; color: #a9beb0; font-size: .84rem; line-height: 1.75; }
.footer-column h2 { margin: 4px 0 15px; color: #f5fbf6; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.footer-column nav { display: grid; gap: 10px; }
.footer-column nav a { width: fit-content; color: #b3c4b7; font-size: .81rem; transition: color 160ms ease, transform 160ms ease; }
.footer-column nav a:hover { color: #8de5aa; transform: translateX(2px); }
.footer-social-links a { display: flex; align-items: center; gap: 10px; }
.footer-social-links a svg { width: 14px; height: 14px; margin-left: auto; color: #769580; }
.social-link-mark { display: inline-grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(144, 214, 164, .25); border-radius: 8px; background: rgba(43, 125, 68, .22); color: #a4e8b7; font-size: .64rem; font-weight: 750; }
.footer-support-empty { max-width: 240px; margin: 0; color: #8fa596; font-size: .8rem; line-height: 1.65; }
.site-footer-bottom { display: flex; min-height: 53px; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(221, 241, 225, .14); }
.site-footer-bottom small, .site-footer-bottom nav a { color: #849a8b; font-size: .72rem; }
.site-footer-bottom nav { display: flex; gap: 20px; }
.site-footer-bottom nav a:hover { color: #c7efd1; }
.app-footer { padding-bottom: 0; }

/* Cleaner workspace overview and a more deliberate admin surface */
.app-page { background: linear-gradient(130deg, #f4f9f5, #f7faf8 42%, #f2f8f4); }
.app-topbar { border-bottom-color: #dfebe2; }
.app-content { padding-top: 38px; }
.dashboard-welcome { margin-bottom: 27px; }
.dashboard-welcome .eyebrow { margin-bottom: 9px; }
.dashboard-welcome h1 { letter-spacing: -.045em; }
.stats-grid { gap: 14px; margin-bottom: 22px; }
.stat-card {
    min-height: 154px;
    overflow: hidden;
    border-color: #dfebe2;
    box-shadow: 0 10px 28px rgba(27, 70, 39, .045);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.stat-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #13884e, #75d090);
    content: "";
}
.stat-card:hover { transform: translateY(-2px); border-color: #c6e2cf; box-shadow: 0 15px 33px rgba(27, 70, 39, .08); }
.stat-card .icon-tile { border-radius: 13px; }
.stat-card > a { min-height: 34px; }
.setup-card { border-color: #d5e9db; background: linear-gradient(120deg, #fbfefc, #f5fbf6); }
.setup-step { transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.setup-step:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(24, 76, 40, .055); }
.dashboard-columns { grid-template-columns: minmax(0, 1fr); }
.recent-card { border-color: #e0ebe3; box-shadow: 0 10px 28px rgba(27, 70, 39, .04); }
.recent-card .card-heading { padding-bottom: 14px; border-bottom: 1px solid #e8efe9; }
.conversation-row { transition: background-color 160ms ease, padding 160ms ease; }
.conversation-row:hover { padding-inline: 7px; background: #f8fcf9; }
.safety-note { border-color: #e1ebe4; background: rgba(255, 255, 255, .74); }
.app-footer.site-footer { margin-top: 16px; }

.admin-page .app-content { width: min(1320px, 100%); }
.admin-page-heading {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    margin-bottom: 22px;
    padding: 25px 28px;
    border: 1px solid #d6e9dc;
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 10%, rgba(191, 232, 202, .65), transparent 27%),
        linear-gradient(110deg, #fff, #f2faf4);
    box-shadow: 0 11px 30px rgba(28, 78, 41, .05);
}
.admin-page-heading > div { position: relative; z-index: 1; }
.admin-page-heading h1 { letter-spacing: -.045em; }
.admin-badge { border-color: #cae6d2; background: #edf9f0; }
.admin-tabs {
    gap: 5px;
    padding: 5px;
    border: 1px solid #dfebe2;
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
}
.admin-tabs button { min-height: 42px; border: 0; border-radius: 9px; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.admin-tabs button[aria-selected=true] { background: #fff; color: #117a45; box-shadow: 0 2px 8px rgba(27, 72, 39, .1); }
.admin-tabs button span { background: #eff5f0; }
.admin-kpi {
    border-color: #dfebe2;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.admin-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27, 70, 39, .075); }
.admin-kpi .icon-tile { border-radius: 11px; }
.admin-overview-card, .site-preview-card, .admin-table-card, .brand-editor-card, .brand-preview-card, .legal-editor-card {
    border-color: #e0ebe3;
    box-shadow: 0 9px 25px rgba(28, 70, 39, .04);
}
.data-table th { background: #f5faf6; }
.data-table tbody tr:hover { background: #f8fcf9; }
.brand-live-preview { background: linear-gradient(110deg, #f9fcfa, #f2f9f4); }
.admin-brand-form { gap: 19px; }
.social-settings {
    min-width: 0;
    margin: 0;
    padding: 17px;
    border: 1px solid #deebe2;
    border-radius: 13px;
    background: #f9fcfa;
}
.social-settings legend { padding: 0 7px; color: #254c34; font-size: .82rem; font-weight: 700; }
.social-settings > p { margin: -3px 0 13px; color: var(--secondary); font-size: .74rem; line-height: 1.55; }
.social-settings-grid { gap: 13px; }
.social-settings-grid label { font-size: .76rem; }
.social-settings-grid input { min-width: 0; }

@keyframes status-glow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(18, 136, 78, .11); }
    50% { box-shadow: 0 0 0 7px rgba(18, 136, 78, .03); }
}
@keyframes ambient-drift {
    from { transform: translate3d(-1%, 0, 0) scale(.98); }
    to { transform: translate3d(1%, 1%, 0) scale(1.04); }
}
@keyframes orbit-breathe {
    0%, 100% { transform: scale(.92); opacity: .5; }
    50% { transform: scale(1.08); opacity: .95; }
}
@keyframes chat-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes caption-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 820px) {
    .hero { min-height: 0; padding-top: 58px; }
    .hero-visual { padding-inline: 7px; }
    .site-footer-main { grid-template-columns: minmax(200px, 1.1fr) minmax(135px, .7fr) minmax(150px, .8fr); gap: 26px; }
}
@media (max-width: 680px) {
    .hero { gap: 27px; padding-top: 43px; }
    .hero h1 { font-size: clamp(2.45rem, 10vw, 3.2rem); }
    .hero-visual { padding: 8px 3px 33px; }
    .chat-window { animation-duration: 8s; }
    .site-footer-inner { padding: 38px 18px 17px; }
    .site-footer-main { grid-template-columns: 1fr 1fr; gap: 29px 22px; padding-bottom: 29px; }
    .footer-identity { grid-column: 1 / -1; }
    .footer-identity p { max-width: 480px; margin-top: 12px; }
    .footer-column h2 { margin-bottom: 12px; }
    .footer-column nav { gap: 9px; }
    .site-footer-bottom { min-height: 55px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 0; }
    .site-footer-bottom nav { gap: 17px; }
    .app-footer.site-footer { padding-bottom: 0; }
    .app-footer .site-footer-inner { padding-bottom: 86px; }
    .admin-page-heading { min-height: 0; padding: 20px; }
    .admin-tabs { border-radius: 0; border-right: 0; border-left: 0; }
    .social-settings { padding: 14px; }
    .social-settings-grid { grid-template-columns: 1fr; }
}

/* Compact workspace metrics: put the number, label, and route on one scan line. */
.stats-grid { gap: 12px; }
.stat-card {
    display: grid;
    min-height: 96px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-color: #dfebe2;
    box-shadow: 0 7px 20px rgba(27, 70, 39, .035);
}
.stat-card::before { display: none; }
.stat-card .icon-tile { position: static; width: 42px; height: 42px; }
.stat-card-copy { display: grid; min-width: 0; gap: 3px; }
.stat-card .stat-label { overflow: hidden; padding: 0; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.stat-card-copy > b { display: block; margin: 0; font: 700 1.65rem/1.1 var(--font-heading); letter-spacing: -.045em; }
.stat-card > a { min-height: 34px; gap: 6px; white-space: nowrap; }
.stat-action-label { display: inline; }

/* The landing-page preview now reads and animates like a WhatsApp conversation. */
.chat-window { overflow: hidden; border-color: #dce8df; border-radius: 20px; background: #f4f6f5; }
.chat-window-bar {
    min-height: 70px;
    gap: 11px;
    padding: 11px 16px;
    border: 0;
    background: #087b5e;
    color: #f7fffa;
}
.chat-back-mark { color: #f0fff4; font: 400 1.7rem/1 var(--font-body); }
.chat-avatar { width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.3); background: #d8f2e0; color: #176644; }
.chat-header-copy { display: grid; min-width: 0; gap: 2px; }
.chat-header-copy b { overflow: hidden; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-copy small { display: flex; align-items: center; gap: 6px; color: #d4f1df; font-size: .65rem; }
.chat-header-copy small i { width: 6px; height: 6px; border-radius: 50%; background: #9be9b4; box-shadow: 0 0 0 3px rgba(155,233,180,.14); }
.chat-header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; color: #f1fff5; }
.chat-header-actions svg { width: 19px; height: 19px; }
.chat-thread {
    position: relative;
    display: flex;
    min-height: 276px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
    padding: 16px 18px 18px;
    background-color: #efeae2;
    background-image:
        radial-gradient(circle at 13px 12px, rgba(55, 88, 66, .055) 1.2px, transparent 1.8px),
        radial-gradient(circle at 25px 27px, rgba(55, 88, 66, .04) 1px, transparent 1.7px);
    background-size: 34px 34px, 43px 43px;
}
.chat-date { align-self: center; margin: 0 0 2px; padding: 4px 10px; border: 1px solid rgba(220, 229, 219, .6); border-radius: 999px; background: rgba(255,255,255,.78); color: #79867d; font-size: .58rem; font-weight: 700; letter-spacing: .07em; }
.chat-bubble { position: relative; max-width: 79%; padding: 10px 12px 7px; border: 0; box-shadow: 0 1px 1px rgba(30, 50, 35, .1); font-size: .74rem; }
.customer-bubble { align-self: flex-start; margin: 0 auto 0 0; border-radius: 0 12px 12px 12px; background: #fff; color: #34413b; animation: chat-message-in .4s .15s both; }
.reply-bubble { align-self: flex-end; margin: 0 0 0 auto; border-radius: 12px 0 12px 12px; background: #d9fdd3; color: #264a37; animation: chat-message-in .48s 1.55s both; }
.chat-bubble small { margin-top: 5px; color: #7b8980; }
.chat-bubble small svg { color: #239a78; }
.chat-typing { display: flex; width: fit-content; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 0 12px 12px 12px; background: #fff; box-shadow: 0 1px 1px rgba(30,50,35,.08); opacity: 0; animation: chat-typing-once .9s .7s both; }
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: #8b9990; animation: typing-dot .65s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .1s; }
.chat-typing i:nth-child(3) { animation-delay: .2s; }
.reply-label { align-self: flex-end; margin: 0 2px -5px 0; font-size: .56rem; animation: chat-message-in .35s 1.3s both; }
.reply-dot { width: 6px; height: 6px; }
.chat-compose { min-height: 57px; gap: 9px; margin: 0; padding: 8px 12px; border: 0; border-top: 1px solid #e4eae6; border-radius: 0; background: #f4f6f5; }
.chat-compose > span:first-child { display: flex; min-height: 39px; flex: 1; align-items: center; padding: 0 14px; border: 1px solid #e4eae6; border-radius: 999px; background: #fff; color: #89948d; }
.compose-send { width: 36px; height: 36px; border-radius: 50%; }
.compose-send svg { width: 16px; height: 16px; }
.chat-ticks { display: inline-flex; align-items: center; margin-left: -5px; }
.chat-ticks svg + svg { margin-left: -8px; }
.chat-ticks svg { width: 12px !important; height: 12px !important; }

/* Keep admin records as a numbered, one-record-per-row table on narrow screens. */
#admin-users .table-scroll, #admin-accounts .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
#admin-users .data-table, #admin-accounts .data-table { min-width: 940px; }
#admin-accounts .data-table { min-width: 870px; }
.serial-column, .serial-number { width: 54px; text-align: center !important; font-variant-numeric: tabular-nums; }
.serial-column { color: #718078 !important; }
.serial-number { color: #718078 !important; font-size: .72rem !important; font-weight: 700; }

@media (max-width: 680px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
    .stat-card { min-height: 82px; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 8px; padding: 11px 10px; border-radius: 13px; }
    .stat-card:last-child { grid-column: 1 / -1; }
    .stat-card .icon-tile { width: 34px; height: 34px; border-radius: 10px; }
    .stat-card .icon-tile svg { width: 17px; height: 17px; }
    .stat-card .stat-label { font-size: .68rem; }
    .stat-card-copy > b { font-size: 1.42rem; }
    .stat-card > a { display: grid; width: 30px; min-width: 30px; height: 30px; min-height: 30px; place-items: center; border: 1px solid #dcebe0; border-radius: 50%; background: #f5faf6; font-size: 0; }
    .stat-action-label { display: none; }
    .stat-card > a svg { width: 14px; height: 14px; }

    .chat-window-bar { min-height: 64px; gap: 9px; padding: 10px 12px; font-size: .68rem; }
    .chat-avatar { width: 35px; height: 35px; }
    .chat-header-actions { gap: 12px; }
    .chat-header-actions svg { width: 17px; height: 17px; }
    .chat-thread { min-height: 244px; gap: 9px; padding: 14px 13px 15px; }
    .chat-bubble { max-width: 86%; padding: 9px 11px 7px; font-size: .71rem; }
    .chat-compose { min-height: 53px; padding: 7px 9px; }
    .chat-compose > span:first-child { min-height: 37px; padding-inline: 12px; }
    .compose-send { width: 34px; height: 34px; }

    #admin-users .table-scroll, #admin-accounts .table-scroll { overflow-x: auto; }
    #admin-users .data-table, #admin-accounts .data-table { display: table; width: 100%; min-width: 940px; }
    #admin-accounts .data-table { min-width: 870px; }
    #admin-users .data-table thead, #admin-accounts .data-table thead { display: table-header-group; }
    #admin-users .data-table tbody, #admin-accounts .data-table tbody { display: table-row-group; padding: 0; }
    #admin-users .data-table tr, #admin-accounts .data-table tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
    #admin-users .data-table td, #admin-accounts .data-table td { display: table-cell; width: auto; min-height: 0; padding: 11px 12px; border: 0; border-bottom: 1px solid #edf0ee; font-size: .72rem; vertical-align: middle; }
    #admin-users .data-table td::before, #admin-accounts .data-table td::before { display: none; content: none; }
    #admin-users .data-table td:first-child, #admin-accounts .data-table td:first-child { grid-template-columns: none; padding-top: 11px; }
    #admin-users .data-table td[colspan], #admin-accounts .data-table td[colspan] { display: table-cell; }
    #admin-users .data-table tbody tr:last-child td, #admin-accounts .data-table tbody tr:last-child td { border-bottom: 1px solid #edf0ee; }
    #admin-users .serial-column, #admin-users .serial-number,
    #admin-accounts .serial-column, #admin-accounts .serial-number { position: sticky; left: 0; z-index: 2; width: 54px; background: #fff; }
    #admin-users .data-table tbody tr:hover .serial-number, #admin-accounts .data-table tbody tr:hover .serial-number { background: #f8fcf9; }
    .admin-user-form { flex-wrap: nowrap; }
    .admin-user-form select { min-width: 95px; }
}

@media (max-width: 380px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card:last-child { grid-column: auto; }
}

@keyframes chat-message-in {
    from { opacity: 0; transform: translateY(7px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat-typing-once {
    0%, 8%, 100% { opacity: 0; transform: translateY(4px); }
    18%, 72% { opacity: 1; transform: translateY(0); }
}
@keyframes typing-dot {
    0%, 60%, 100% { opacity: .45; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .customer-bubble, .reply-label, .reply-bubble, .chat-typing, .chat-typing i {
        animation-delay: 0s !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .chat-typing { display: none; }
}

/* Landing page: WhatsApp conversation and single-column hanging cards. */
.landing-page .chat-window {
    border: 6px solid #111a1e;
    border-radius: 28px;
    box-shadow: 0 28px 62px rgba(20, 45, 33, .18);
}
.landing-page .chat-window-bar {
    min-height: 70px;
    background: #087b5e;
}
.landing-page .chat-thread {
    min-height: 408px;
    gap: 9px;
    padding: 16px 18px;
}
.landing-page .chat-message-one,
.landing-page .reply-label-one,
.landing-page .reply-bubble-one,
.landing-page .chat-message-two,
.landing-page .reply-label-two,
.landing-page .reply-bubble-two,
.landing-page .chat-message-three,
.landing-page .chat-typing-one,
.landing-page .chat-typing-two {
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.landing-page .chat-message-one { animation-name: chat-cycle-first; }
.landing-page .chat-typing-one { animation-name: chat-cycle-typing-one; }
.landing-page .reply-label-one,
.landing-page .reply-bubble-one { animation-name: chat-cycle-reply-one; }
.landing-page .chat-message-two { animation-name: chat-cycle-message-two; }
.landing-page .chat-typing-two { animation-name: chat-cycle-typing-two; }
.landing-page .reply-label-two,
.landing-page .reply-bubble-two { animation-name: chat-cycle-reply-two; }
.landing-page .chat-message-three { animation-name: chat-cycle-message-three; }
.landing-page .chat-typing { align-self: flex-start; }
.landing-page .chat-thread .reply-label { margin-right: 2px; }
.landing-page .chat-compose { min-height: 58px; }

.landing-page .steps-grid,
.landing-page .feature-grid {
    width: min(820px, 100%);
    grid-template-columns: minmax(0, 1fr);
    gap: 66px;
    margin-inline: auto;
}
.landing-page .step-card,
.landing-page .feature-card {
    min-height: 0;
    overflow: visible;
    padding: 23px 26px;
    border-color: #e0ebe4;
    border-radius: 17px;
    box-shadow: 0 13px 30px rgba(30, 74, 47, .075);
}
.landing-page .step-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 15px;
}
.landing-page .step-card .icon-tile {
    grid-row: 1 / span 2;
    margin: 0;
}
.landing-page .step-card h3 {
    align-self: end;
    margin-bottom: 5px;
}
.landing-page .step-card p { grid-column: 2; }
.landing-page .step-number,
.landing-page .feature-number {
    position: absolute;
    top: 23px;
    right: 24px;
    color: #78a88d;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .1em;
}
.landing-page .step-card h3,
.landing-page .feature-card h3 { padding-right: 42px; }
.landing-page .feature-card {
    display: block;
}
.landing-page .feature-card .icon-tile {
    margin: 0 0 19px;
}

.hang-card {
    position: relative;
    transform-origin: 50% -40px;
}
.hang-card::before {
    position: absolute;
    z-index: 0;
    top: -39px;
    left: calc(50% - 1px);
    width: 2px;
    height: 39px;
    background: linear-gradient(180deg, #b7c9bf, #83ad96);
    content: "";
    transform-origin: bottom center;
}
.hang-card::after {
    position: absolute;
    top: -49px;
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border: 3px solid #208a61;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(32, 138, 97, .09);
    content: "";
}
.hang-card:hover {
    border-color: #bfdcc9;
    box-shadow: 0 17px 34px rgba(30, 74, 47, .12);
}
.hang-card:hover,
.hang-card:focus-visible,
.hang-card.is-swinging {
    animation: hanger-swing 720ms ease-in-out;
}
.hang-card:active { animation-duration: 520ms; }

.landing-page .hang-card { transform-origin: 50% -43px; }
.landing-page .hang-card::before {
    top: -43px;
    left: 0;
    width: 100%;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 44' preserveAspectRatio='none'%3E%3Cpath d='M140 0H220M180 0L70 43M180 0L290 43' fill='none' stroke='%23a9bcb2' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center bottom / 100% 44px no-repeat;
    pointer-events: none;
}
.landing-page .hang-card::after { pointer-events: none; }

/* Dashboard: keep action labels readable and make setup steps numbered rows. */
.app-page .stats-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.app-page .stat-card {
    grid-template-columns: 42px minmax(0, 1fr) max-content;
}
.app-page .stat-card > a {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 38px;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dcebe0;
    border-radius: 9px;
    background: #f5faf6;
    color: #176644;
    font-size: .75rem;
}
.app-page .stat-action-label { display: inline; }
.app-page .stat-card > a svg { width: 15px; height: 15px; }
.app-page .setup-card { overflow: visible; }
.app-page .setup-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    margin-top: 26px;
}
.app-page .setup-step {
    min-height: 78px;
    gap: 12px;
    padding: 13px 16px;
    border-color: #e0ebe4;
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(30, 74, 47, .06);
}
.app-page .setup-step-number {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #d7ebdd;
    border-radius: 12px;
    background: #eef8f1;
    color: #28734f;
    font-size: .82rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.app-page .setup-step.is-done .setup-step-number {
    border-color: #b9dfc6;
    background: #e6f6eb;
    color: #126b43;
}
.app-page .setup-step .step-check {
    width: 21px;
    height: 21px;
}
.app-page .setup-step > span:nth-child(3) {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 3px;
}
.app-page .setup-step b { font-size: .84rem; }
.app-page .setup-step small {
    overflow: visible;
    font-size: .73rem;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
}
.app-page .setup-step .step-arrow { width: 17px; height: 17px; }
.app-page .setup-step:hover {
    border-color: #bfdcc9;
    box-shadow: 0 14px 28px rgba(30, 74, 47, .1);
}

@keyframes chat-cycle-first {
    0%, 4% { opacity: 0; transform: translateY(7px) scale(.985); }
    6%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    91%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes chat-cycle-typing-one {
    0%, 8% { opacity: 0; transform: translateY(4px); }
    10%, 15% { opacity: 1; transform: translateY(0); }
    18%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes chat-cycle-reply-one {
    0%, 15% { opacity: 0; transform: translateY(7px) scale(.985); }
    18%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    91%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes chat-cycle-message-two {
    0%, 25% { opacity: 0; transform: translateY(7px) scale(.985); }
    28%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    91%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes chat-cycle-typing-two {
    0%, 30% { opacity: 0; transform: translateY(4px); }
    33%, 38% { opacity: 1; transform: translateY(0); }
    41%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes chat-cycle-reply-two {
    0%, 39% { opacity: 0; transform: translateY(7px) scale(.985); }
    42%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    91%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes chat-cycle-message-three {
    0%, 51% { opacity: 0; transform: translateY(7px) scale(.985); }
    54%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    91%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes hanger-swing {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(1.8deg) translateY(1px); }
    45% { transform: rotate(-1.4deg) translateY(0); }
    68% { transform: rotate(.8deg); }
    84% { transform: rotate(-.35deg); }
}

@media (max-width: 680px) {
    .landing-page .chat-window { border-radius: 23px; }
    .landing-page .chat-window-bar { min-height: 64px; }
    .landing-page .chat-thread { min-height: 382px; gap: 8px; padding: 13px; }
    .landing-page .chat-thread .chat-bubble { max-width: 88%; }
    .landing-page .steps-grid,
    .landing-page .feature-grid { gap: 66px; }
    .landing-page .step-card,
    .landing-page .feature-card { padding: 19px 18px; }
    .landing-page .step-number,
    .landing-page .feature-number { top: 16px; right: 15px; }
    .app-page .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .app-page .stat-card {
        min-height: 88px;
        grid-template-columns: 38px minmax(0, 1fr) max-content;
        gap: 9px;
        padding: 12px;
    }
    .app-page .stat-card:last-child { grid-column: auto; }
    .app-page .stat-card .icon-tile { width: 38px; height: 38px; }
    .app-page .stat-card .stat-label { font-size: .72rem; white-space: normal; }
    .app-page .stat-card-copy > b { font-size: 1.45rem; }
    .app-page .stat-card > a {
        width: auto;
        min-width: 0;
        min-height: 34px;
        gap: 5px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: .68rem;
    }
    .app-page .stat-action-label { display: inline; }
    .app-page .setup-steps { gap: 38px; margin-top: 24px; }
    .app-page .setup-step {
        min-height: 74px;
        gap: 8px;
        padding: 11px 10px;
    }
    .app-page .setup-step-number { width: 35px; height: 35px; }
    .app-page .setup-step .step-check { width: 18px; height: 18px; }
    .app-page .setup-step b { font-size: .78rem; }
    .app-page .setup-step small { font-size: .67rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hang-card,
    .landing-page .chat-message-one,
    .landing-page .reply-label-one,
    .landing-page .reply-bubble-one,
    .landing-page .chat-message-two,
    .landing-page .reply-label-two,
    .landing-page .reply-bubble-two,
    .landing-page .chat-message-three,
    .landing-page .chat-typing-one,
    .landing-page .chat-typing-two {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}