/* RCVPAY Conversion Agent — Bloomfield AI Solutions
   All classes namespaced .rcv-agent-* so nothing collides with style.css. */

:root {
    --rcv-agent-green: #2e9e6b;
    --rcv-agent-green-dark: #388273;
    --rcv-agent-green-deep: #1a8a5a;
    --rcv-agent-green-light: #60e39a;
    --rcv-agent-ink: #111827;
    --rcv-agent-muted: #6b7280;
    --rcv-agent-line: #e5e7eb;
}

/* ---------- launcher ---------- */
.rcv-agent-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rcv-agent-green) 0%, var(--rcv-agent-green-dark) 100%);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(46, 158, 107, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: transform .2s ease, box-shadow .2s ease;
}

.rcv-agent-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(46, 158, 107, .45);
}

.rcv-agent-launcher .rcv-agent-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .2s ease;
}

.rcv-agent-launcher .rcv-agent-dot.on {
    opacity: 1;
    transform: scale(1);
}

/* ---------- proactive nudge ---------- */
.rcv-agent-nudge {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 310px;
    background: #fff;
    border: 1px solid var(--rcv-agent-line);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 16px 40px rgba(17, 24, 39, .16);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.rcv-agent-nudge.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rcv-agent-nudge-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: none;
    color: var(--rcv-agent-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.rcv-agent-nudge p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rcv-agent-ink);
}

.rcv-agent-nudge-cta {
    border: 0;
    background: var(--rcv-agent-green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
}

.rcv-agent-nudge-cta:hover {
    background: var(--rcv-agent-green-deep);
}

/* ---------- panel ---------- */
.rcv-agent-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 380px;
    max-height: 560px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 56px rgba(17, 24, 39, .22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.98);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.rcv-agent-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.rcv-agent-head {
    background: linear-gradient(135deg, var(--rcv-agent-green) 0%, var(--rcv-agent-green-dark) 100%);
    color: #fff;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

/* RCVPAY flower mark, extracted as a true vector from the mark inside their
   logo-footer.svg (the rounded-square container subpath dropped). Ships as our
   own asset — their files are untouched.

   Their logo is monochrome and flips for contrast: near-black (#212529) on light
   backgrounds, white on dark. Neither reads cleanly on the mid-tone green header
   (white 3.4:1, black 4.6:1 — they swap across the gradient), so the mark sits on
   a white tile instead. That gives their black logo the light ground it's drawn
   for, and reads as a deliberate brand chip. */
.rcv-agent-mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
}

.rcv-agent-head-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
}

.rcv-agent-head-close {
    margin-left: auto;
    border: 0;
    background: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    opacity: .85;
}

.rcv-agent-head-close:hover {
    opacity: 1;
}

.rcv-agent-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: #f9fafb;
    min-height: 210px;
}

.rcv-agent-m {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: 15px;
    font-size: 13.5px;
    line-height: 1.55;
    word-wrap: break-word;
}

.rcv-agent-m.bot {
    align-self: flex-start;
    background: #fff;
    color: var(--rcv-agent-ink);
    border: 1px solid var(--rcv-agent-line);
    border-bottom-left-radius: 5px;
}

.rcv-agent-m.user {
    align-self: flex-end;
    background: var(--rcv-agent-green);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.rcv-agent-m.bot b,
.rcv-agent-m.bot strong {
    color: var(--rcv-agent-green-dark);
}

/* typing dots */
.rcv-agent-m.typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 13px 15px;
}

.rcv-agent-m.typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ca3af;
    display: inline-block;
    animation: rcv-agent-bounce 1.3s infinite;
}

.rcv-agent-m.typing i:nth-child(2) { animation-delay: .16s; }
.rcv-agent-m.typing i:nth-child(3) { animation-delay: .32s; }

@keyframes rcv-agent-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* Markdown rendered from model replies — lists, links, inline code. */
.rcv-agent-list {
    margin: 6px 0 2px;
    padding-left: 18px;
}

.rcv-agent-list li {
    margin-bottom: 4px;
}

.rcv-agent-m.bot a {
    color: var(--rcv-agent-green-dark);
    text-decoration: underline;
}

.rcv-agent-m.bot code {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

/* ---------- working state ----------
   While the agent runs a tool, the pending bubble shows a label with a soft
   highlight sweeping through the words - the same bubble the answer then
   streams into, so nothing new appears below it. */
.rcv-agent-m.rcv-agent-working {
    padding: 11px 15px;
    font-size: 12.5px;
}

.rcv-agent-shimmer {
    display: inline-block;
    color: var(--rcv-agent-muted);
    background: linear-gradient(
        90deg,
        var(--rcv-agent-muted) 0%,
        var(--rcv-agent-muted) 38%,
        #dfe3e8 50%,
        var(--rcv-agent-muted) 62%,
        var(--rcv-agent-muted) 100%
    );
    background-size: 220% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: rcv-agent-shimmer 1.5s linear infinite;
}

@keyframes rcv-agent-shimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* ---------- footer: credit + disclaimer ----------
   Two quiet lines under the composer. Brand first, then a four-word
   disclaimer; both small and low-contrast so they read as a footnote. */
.rcv-agent-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 14px 9px;
    background: #fff;
    flex-shrink: 0;
    text-align: center;
    line-height: 1.35;
}

.rcv-agent-foot-brand {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--rcv-agent-muted);
    text-decoration: none;
}

.rcv-agent-foot-brand:hover {
    color: var(--rcv-agent-green-dark);
}

.rcv-agent-foot-note {
    font-size: 10px;
    color: var(--rcv-agent-muted);
    opacity: .7;
}

/* guardrail badge */
.rcv-agent-guard {
    display: block;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--rcv-agent-line);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--rcv-agent-muted);
}

/* ---------- lead capture ---------- */
.rcv-agent-lead {
    align-self: flex-start;
    width: 84%;
    background: #fff;
    border: 1px solid var(--rcv-agent-line);
    border-radius: 15px;
    border-bottom-left-radius: 5px;
    padding: 13px 14px;
}

.rcv-agent-lead p {
    margin: 0 0 9px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rcv-agent-ink);
}

.rcv-agent-lead-row {
    display: flex;
    gap: 7px;
}

.rcv-agent-lead input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--rcv-agent-line);
    border-radius: 9px;
    padding: 8px 11px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.rcv-agent-lead input:focus {
    border-color: var(--rcv-agent-green);
}

.rcv-agent-lead button {
    border: 0;
    background: var(--rcv-agent-green);
    color: #fff;
    border-radius: 9px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rcv-agent-lead button:hover {
    background: var(--rcv-agent-green-deep);
}

.rcv-agent-lead-err {
    margin: 7px 0 0;
    font-size: 11.5px;
    color: #dc2626;
    display: none;
}

/* ---------- chips ---------- */
.rcv-agent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 18px 12px;
    background: #f9fafb;
    flex-shrink: 0;
}

.rcv-agent-chip {
    border: 1px solid rgba(46, 158, 107, .35);
    background: #fff;
    color: var(--rcv-agent-green-dark);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.rcv-agent-chip:hover {
    background: var(--rcv-agent-green);
    color: #fff;
    border-color: var(--rcv-agent-green);
}

/* ---------- composer ---------- */
.rcv-agent-input-row {
    display: flex;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid var(--rcv-agent-line);
    background: #fff;
    flex-shrink: 0;
}

.rcv-agent-input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--rcv-agent-line);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
}

.rcv-agent-input-row input:focus {
    border-color: var(--rcv-agent-green);
}

.rcv-agent-send {
    border: 0;
    background: var(--rcv-agent-green);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rcv-agent-send:hover {
    background: var(--rcv-agent-green-deep);
}

/* ---------- mobile ----------
   Phones get the same treatment as our other widgets (Aesthetics Academy,
   Rovestead): the open chat is a full-screen sheet, the launcher hides while
   it is open, and the visitor closes from the header X. Everything else on
   the page is untouched. */
@media (max-width: 480px) {
    .rcv-agent-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: none;
        height: 100vh;
        height: 100dvh;           /* tracks the on-screen keyboard where supported */
        border-radius: 0;
        transform: translateY(24px);
    }

    .rcv-agent-panel.open {
        transform: translateY(0);
        /* While the keyboard is up, the script sets top/height inline to pin
           the sheet to the visual viewport; no transition on those, or the
           sheet lags the keyboard. */
        transition-property: opacity, transform, visibility;
    }

    .rcv-agent-head {
        padding-top: calc(15px + env(safe-area-inset-top, 0px));
    }

    .rcv-agent-msgs {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;   /* scrolling the thread never scrolls the page behind */
    }

    .rcv-agent-m {
        max-width: 88%;
        font-size: 15px;
    }

    .rcv-agent-foot {
        padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
    }

    .rcv-agent-input-row input {
        font-size: 16px;   /* below 16px iOS zooms the page on focus */
        padding: 11px 16px;
    }

    .rcv-agent-send {
        width: 44px;
        height: 44px;
    }

    /* While the sheet is open the launcher is under it and useless; hide it so
       it can never poke through, and lock the page behind the sheet. */
    html.rcv-agent-open .rcv-agent-launcher,
    html.rcv-agent-open .rcv-agent-nudge {
        display: none;
    }

    html.rcv-agent-open,
    html.rcv-agent-open body {
        overflow: hidden;
    }

    .rcv-agent-nudge {
        right: 10px;
        left: 10px;
        width: auto;
        bottom: 84px;
    }

    .rcv-agent-launcher {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        font-size: 23px;
    }
}

/* No prefers-reduced-motion overrides, on purpose. Windows reports "reduced"
   whenever its animation effects are off, which froze the dots, shimmer and
   panel transitions for people who never asked for that. Nothing here is
   large-scale motion: a 280ms fade/slide, bouncing 6px dots, a text shimmer. */

/* Consent line under the lead form (brief §9K: contact details only via a consent flow). */
.rcv-agent-lead-consent { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--rcv-agent-muted); }