#chat {
    /* ground + surfaces */
    --ink: #070919;
    --deep: #010314;
    --panel: #171A28;
    --panel2: #0A0E1B;
    /* brand */
    --red: #DC2626;
    --purple: #581C87;
    --grad: linear-gradient(90deg, var(--red), var(--purple));
    /* type + lines (white on the gradient: worst-point contrast 4.8:1, AA ok;
     #70728F on #070919 is 4.2:1 — the site system's own pairing; reserved for
     meta/secondary text, never body copy below 14px) */
    --text: #F6F6F9;
    --dim: #70728F;
    --dim2: #9395AE;
    --line: #303245;
    --input: #171A28;
    --input-line: #2C2D33;
    --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* motion + rhythm */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --r-btn: 6px;
    --r-md: 12px;
    --r-card: 24px;
}

#chat .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#chat .sr-only:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    padding: 9px 14px;
    border-radius: var(--r-btn);
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--red);
    z-index: 2147483600;
    font-size: 14px;
}

/* ---- brand button (Figma btn component: white fill, dark label) ---- */
#chat .k-cta {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #070919;
    background: #F6F6F9;
    padding: 12px 22px;
    border-radius: var(--r-btn);
    text-decoration: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    transition: box-shadow .3s var(--ease), transform .2s var(--ease);
}

#chat .k-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}


/* ---- the chat artifact — NOT a traditional box (per Travis 2026-07-23).
     One wide floating column (~ the Figma contact-form column width) for both
     the screensaver callout and the chat; bubbles float directly on the page
     ground like the site's testimonial wall. ---- */
#chat {
    display: flex;
    flex-direction: column;
}

#chat .head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 14px;
    border-bottom: 1px solid rgba(48, 50, 69, .45);
}

#chat .mark {
    width: 34px;
    height: 19px;
    flex: 0 0 auto;
}

#chat .who b {
    font-size: 14.5px;
    font-weight: 600;
    display: block;
    line-height: 1.2;
}

#chat .who small {
    font-size: 11.5px;
    color: var(--dim2);
}

#chat .status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--dim2);
}

/* quiet ghost button — brand-gradient outline, no fill (dual-background
     trick: inner layer paints the ground inside padding-box, gradient paints
     the border-box, transparent border lets it show through the radius) */
#chat .book {
    flex: 0 0 auto;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    color: var(--dim2);
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--grad) border-box;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s var(--ease), opacity .18s var(--ease);
}

#chat .book.swap {
    opacity: 0;
}

#chat .book:hover {
    color: var(--text);
    background: linear-gradient(#14182B, #14182B) padding-box, var(--grad) border-box;
}

/* live dot = the brand's glowing red eyebrow dot (Figma section chips) */
#chat .status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    display: block;
    box-shadow: 0 0 8px 1px rgba(220, 38, 38, .85);
}

#chat .thread {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 24px 14px;
    min-height: 320px;
    max-height: 360px;
    overflow-y: auto;
    scroll-behavior: smooth;
    transition: transform .6s var(--ease), background-color .6s var(--ease);
}

@media (prefers-reduced-motion:reduce) {
    #chat .thread {
        scroll-behavior: auto;
    }
}

#chat .row {
    display: flex;
    gap: 9px;
    max-width: 74%;
}

#chat .row.them {
    align-self: flex-start;
}

/* visitor rows carry no avatar — cap them 37px narrower so both sides'
     bubbles top out at the SAME width (identical padding/type either way) */
#chat .row.us {
    align-self: flex-end;
    max-width: calc(74% - 37px);
}

/* sender avatar — initial on the brand gradient, anchored at bubble base */
#chat .av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: 0 0 auto;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: 1;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--grad);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .09);
    user-select: none;
}

#chat .rc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

#chat .us .rc {
    align-items: flex-end;
}

#chat .name {
    font-size: 11px;
    color: var(--dim2);
    margin: 0 11px 5px;
    letter-spacing: .02em;
}

/* one bubble spec for BOTH sides — size, padding, type all identical */
#chat .bubble {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.52;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#chat .them .bubble {
    background: var(--panel);
    color: var(--text);
    border-bottom-left-radius: 5px;
}

/* user bubble on the brand gradient — white text clears AA across the sweep
     (worst point 4.8:1 on the #DC2626 end) */
#chat .us .bubble {
    background: var(--grad);
    color: #fff;
    border-bottom-right-radius: 5px;
}

/* wins-feed bubbles use the site's glassy testimonial-card treatment */
#chat .row.win .bubble {
    background: rgba(63, 63, 63, .18);
    border: 1px solid var(--input-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#chat .row.win .name {
    color: var(--dim2);
}

/* spotlight variant lands wins alternating left/right for rhythm */
#chat .row.win.right {
    align-self: flex-end;
    flex-direction: row-reverse;
}

#chat .row.win.right .rc {
    align-items: flex-end;
}

/* ---- screensaver spotlight (the one saver treatment; A/B chrome removed) ----
     Blurred history recedes on a VANISHING-POINT plane — same mechanic as
     r5c43-vanishing-point-work-grid: perspective container, rotateX plane
     with transform-origin at the top, grid drawn on the plane itself so the
     lines converge, glow horizon at the convergence. No mask/overflow on the
     3D chain beyond the plane element itself. Featured callout stays face-on
     in front (lift-as-punctuation). ---- */
#chat .stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#chat.saver .stage {
    perspective: 950px;
    perspective-origin: 50% 0;
}

#chat .thread.blurred {
    transform: rotateX(32deg);
    transform-origin: 50% 0;
    background:
        repeating-linear-gradient(to bottom, rgba(220, 38, 38, .075) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(to right, rgba(88, 28, 135, .16) 0 1px, transparent 1px 64px);
}

#chat .thread.blurred>* {
    filter: blur(3px);
    opacity: .42;
    transition: filter .5s var(--ease), opacity .5s var(--ease);
}

body.reduced #chat .thread.blurred>* {
    transition: none;
}

/* glow horizon + top fade at the vanishing point (brand light) */
/* #chat .stage::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: -12px;
    height: 120px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .6s var(--ease);
    background:
        linear-gradient(to bottom, var(--ink) 0%, rgba(7, 9, 25, .7) 26%, transparent 62%),
        radial-gradient(46% 90% at 50% 30%, rgba(220, 38, 38, .20), transparent 70%),
        radial-gradient(74% 120% at 50% 32%, rgba(88, 28, 135, .26), transparent 72%);
} */

#chat.saver .stage::before {
    opacity: 1;
}

#chat .feature {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 26px;
    pointer-events: none;
    z-index: 3;
}

/* larger callout — this widget replaces the contact-section form, so the
     featured win reads big enough to carry that slot from across the room */
#chat .fcard {
    position: relative;
    max-width: 82%;
    background: linear-gradient(180deg, #1B1F30, #10131F);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 28px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(220, 38, 38, .06);
}

/* micro-animation #2: a gradient underline draws for the card's dwell time */
#chat .fcard::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    transform-origin: left;
    transform: scaleX(0);
}

#chat .fcard .fhead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 9px;
}

#chat .fcard .fhead .av {
    width: 24px;
    height: 24px;
    font-size: 10px;
    align-self: auto;
}

#chat .fcard .name {
    margin: 0;
    font-size: 12px;
}

#chat .fcard .ftext {
    font-size: clamp(16px, 2.4vw, 19px);
    line-height: 1.5;
    color: var(--text);
}

/* micro-animation #1: rise + tiny overshoot settle (transform/opacity only) */
@keyframes featIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(.92);
    }

    62% {
        opacity: 1;
        transform: translateY(-3px) scale(1.012);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes underline {
    to {
        transform: scaleX(1);
    }
}

@keyframes featOut {
    to {
        opacity: 0;
        transform: translateY(22px) scale(.9);
    }
}

#chat .fcard.in {
    animation: featIn .62s var(--ease) both;
}

#chat .fcard.in::after {
    animation: underline 3.6s linear .5s both;
}

#chat .fcard.out {
    animation: featOut .45s var(--ease) both;
}

body.reduced #chat .fcard.in,
body.reduced #chat .fcard.out {
    animation: none;
}

body.reduced #chat .fcard.in::after {
    animation: none;
    transform: scaleX(1);
}

/* thread dividers — mode handoffs ("you're talking to iComm now") */
#chat .divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dim2);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 4px 0;
}

#chat .divider::before,
#chat .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* entrance — app-like spring pop (iMessage feel): quick, whole-message,
     grows from the bubble's anchor corner. Transform/opacity only; gated off
     under reduced motion. */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.94);
    }

    62% {
        opacity: 1;
        transform: translateY(-1px) scale(1.004);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#chat .row {
    animation: popIn .26s var(--ease) both;
}

#chat .row.them {
    transform-origin: 0 100%;
}

#chat .row.us {
    transform-origin: 100% 100%;
}

#chat .divider {
    animation: fadeIn .3s var(--ease) both;
}

body.reduced #chat .row,
body.reduced #chat .divider {
    animation: none;
}

/* typing dots — CSS only, gated off under reduced motion (and never built then) */
#chat .typing {
    align-self: flex-start;
    display: flex;
    gap: 5px;
    background: var(--panel);
    padding: 14px 16px;
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    margin-left: 37px;
}

#chat .typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dim);
    display: block;
    animation: dot 1.1s var(--ease) infinite;
}

#chat .typing i:nth-child(2) {
    animation-delay: .16s;
}

#chat .typing i:nth-child(3) {
    animation-delay: .32s;
}

@keyframes dot {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* "While I file this" — the bubble ITSELF is the progress bar: a brand
     tint fills left→right while Spark files the inquiry, then clears once
     filed. One-shot, transform/opacity only, no loop seam. */
#chat .row.filing .bubble {
    position: relative;
    overflow: hidden;
}

#chat .row.filing .bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad);
    opacity: .26;
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
    animation: fileFill 2.2s var(--ease) .15s forwards, fileClear .5s var(--ease) 2.5s forwards;
}

@keyframes fileFill {
    to {
        transform: scaleX(1);
    }
}

@keyframes fileClear {
    to {
        opacity: 0;
    }
}

body.reduced #chat .row.filing .bubble::before {
    animation: none;
    opacity: 0;
}

/* related-content suggestion cards (inside a "them" turn) */
#chat .cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0 0 37px;
    max-width: 86%;
    align-self: flex-start;
    animation: popIn .26s var(--ease) both;
    transform-origin: 0 100%;
}

body.reduced #chat .cards {
    animation: none;
}

#chat .card {
    display: block;
    text-decoration: none;
    background: var(--panel);
    border: 1px solid var(--input-line);
    border-radius: var(--r-md);
    padding: 11px 14px;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}

#chat .card:hover {
    border-color: var(--red);
    transform: translateY(-1px);
}

#chat .card b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

#chat .card span {
    font-size: 11.5px;
    color: var(--dim2);
}

/* receipt summary card (final "them" turn) */
#chat .receipt {
    background: var(--panel2);
    border: 1px solid var(--input-line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 6px 0 0 37px;
    max-width: 86%;
    align-self: flex-start;
}

#chat .receipt dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
}

#chat .receipt dt {
    font-size: 10.5px;
    color: var(--dim2);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 2px;
}

#chat .receipt dd {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ---- composer: free-text mode + pill mode + classic form + done note ----
     floats free of any card; carries its own surface + shadow */
#chat .composer {
    padding: 14px 0 0;
}

/* composer ring matches the brainstorm button: brand-gradient outline via
     the dual-background trick. The border layer is an over-wide gradient whose
     position drifts in saver mode, so the ring flows and the bar reads alive. */
#chat .input-row {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(var(--input), var(--input)) padding-box,
        linear-gradient(90deg, var(--red), var(--purple), var(--red)) border-box;
    background-size: 100% 100%, 220% 100%;
    padding: 6px 6px 6px 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    transition: box-shadow .2s var(--ease);
}

#chat .input-row:focus-within {
    box-shadow: 0 0 0 1px rgba(220, 38, 38, .55), 0 18px 50px rgba(0, 0, 0, .4);
}

#chat .input-row input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 10px 0;
}

#chat .input-row input::placeholder {
    color: var(--dim);
}

/* send = the visitor's action, so it wears the visitor's gradient (same as
     their bubbles): everything YOU send is red→purple. White label clears AA. */
#chat .send {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--r-btn);
    border: 0;
    cursor: pointer;
    background: var(--grad);
    color: var(--white) !important;
    font-size: 16px;
    padding: 6px 16px;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(220, 38, 38, .3);
    transition: transform .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}

#chat .send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, .4);
}

#chat .send:disabled {
    color: var(--white);
    opacity: .35;
    cursor: default;
    box-shadow: none;
}

/* saver mode: the ring breathes — a soft brand-light pulse, no movement
     (the old position-drift looped with a visible jump; rejected) */
@keyframes ringpulse {

    0%,
    100% {
        box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    }

    50% {
        box-shadow: 0 18px 50px rgba(0, 0, 0, .4),
            0 0 16px rgba(220, 38, 38, .32), 0 0 34px rgba(88, 28, 135, .22);
    }
}

#chat.saver .input-row {
    animation: ringpulse 3.2s var(--ease) infinite;
}

body.reduced #chat.saver .input-row {
    animation: none;
}

#chat .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#chat .pill {
    height: auto;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--input-line);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

#chat .pill:hover {
    border-color: var(--red);
    color: #fff;
    background: #1D2133;
}

/* multi-select: picked pills wear the brand ring; Done pill = the brand button */
#chat .pill.sel {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(#241627, #241627) padding-box, var(--grad) border-box;
}

#chat .pill.done {
    background: #F6F6F9;
    color: #070919;
    border-color: transparent;
    font-weight: 500;
}

#chat .pill.done:hover {
    background: #fff;
    color: #070919;
}

#chat .pill.done:disabled {
    opacity: .4;
    cursor: default;
    background: #F6F6F9;
}

/* the final send of the whole intake: composer becomes one full-width
     gradient send bar (same spec as the classic-form Send it) */
#chat .sendall {
    flex: 1 0 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: var(--grad);
    height: 44px;
    border-radius: var(--r-btn);
    box-shadow: 0 10px 26px rgba(220, 38, 38, .28);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

#chat .sendall:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(220, 38, 38, .38);
}

/* the classic-form escape hatch + its compact form (Figma input fields:
     #171A28 fill, #2C2D33 line, 6px radius, focus line = brand red) */
#chat .alt {
    margin-top: 9px;
    text-align: center;
}

#chat .alt button {
    font: inherit;
    font-size: 12px;
    color: var(--dim);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s var(--ease);
}

#chat .alt button:hover {
    color: var(--text);
}

#chat .cform {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#chat .cform input,
#chat .cform textarea {
    background: var(--input);
    border: 1px solid var(--input-line);
    border-radius: var(--r-btn);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 11px 14px;
    outline: 0;
    transition: border-color .2s var(--ease);
    resize: vertical;
    min-height: 0;
}

#chat .cform textarea {
    min-height: 64px;
}

#chat .cform input:focus,
#chat .cform textarea:focus {
    border-color: var(--red);
}

#chat .cform input::placeholder,
#chat .cform textarea::placeholder {
    color: var(--dim);
}

/* classic-form submit — the one big visitor action, so it goes full
     gradient: prominent, and consistent with the send button + us-bubbles */
#chat .cform .k-cta {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    background: var(--grad);
    color: #fff;
    height: 44px;
    padding: 0 32px;
    box-shadow: 0 10px 26px rgba(220, 38, 38, .28);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

#chat .cform .k-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(220, 38, 38, .38);
}

#chat .done {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#chat .done p {
    margin: 0;
    font-size: 12.5px;
    color: var(--dim);
    line-height: 1.5;
}

#chat .restart {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    transition: border-color .2s var(--ease);
    flex: 0 0 auto;
}

#chat .restart:hover {
    border-color: var(--red);
}

#chat .hidden {
    display: none !important;
}

@media (max-width:430px) {
    #chat .thread {
        min-height: 270px;
        max-height: 50vh;
    }
}