:root {
    /* Matches the site's actual theme: --chat-accent is --primary-clr
       (#77742F, the olive used on nav active/hover states, CTA hovers, and
       the logo wordmark itself). --chat-accent-dark is a deeper shade of
       that SAME olive (not the logo's near-black secondary color — that
       read as too much flat black across the header/pill/send-button
       gradients), so gradients stay olive-toned end to end. */
    --chat-accent: #77742F;
    --chat-accent-dark: #4A4820;
    --chat-accent-soft: rgba(119, 116, 47, .45);
}
#chat-launcher {
    position: fixed; bottom: 24px; right: 24px; border-radius: 21px;
    display: inline-flex; cursor: pointer; z-index: 9998;
    box-shadow: 0 6px 16px rgba(0,0,0,.28), 0 14px 32px rgba(0,0,0,.22);
    transition: transform .25s ease, opacity .2s ease, visibility 0s linear .2s;
}
/* Ring sits directly on the pill's own edge — not a floating outline —
   since it's a sibling of the pill (not its child) overflow:hidden on the
   pill can't clip it. Stroke-width is fixed (not animated) so it can't
   bleed inward over the pill and read as the button itself resizing. */
#chat-launcher-ring {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    display: block; width: 100%; height: 100%;
    overflow: visible;
    animation: chat-ring-glow-pulse 2.4s ease-in-out infinite;
}
/* One continuous stroke, always fully joined (no dash gaps) — the sliding
   x1/x2 animation on the gradient itself (in the blade markup) scrolls the
   colors across the ring's bounding box forever, so the colors keep
   running. Layered with a slow glow-pulse (drop-shadow intensity only —
   stroke-width itself stays fixed) so the ring has two things going on. */
#chat-launcher-ring rect {
    fill: none; stroke: url(#chat-ring-gradient); stroke-width: 1.4;
}
@keyframes chat-ring-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255,213,74,.35)); }
    50% { filter: drop-shadow(0 0 20px rgba(255,213,74,.8)); }
}
#chat-launcher-pill {
    position: relative; z-index: 1; height: 50px; padding: 0 33px 0 27px;
    border-radius: 25px; background: linear-gradient(135deg, var(--chat-accent) 0%, var(--chat-accent-dark) 100%);
    color: var(--white-clr); display: flex;
    align-items: center; justify-content: center; gap: 10px; font-size: 20px;
    border: 1px solid transparent; overflow: hidden;
}
/* Gloss band that glides across the pill once a cycle. */
#chat-launcher-pill::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 20%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); pointer-events: none;
    animation: chat-launcher-sweep 3.0s ease-in-out infinite;
}
@keyframes chat-launcher-sweep {
    0%, 40% { left: -60%; }
    100% { left: 115%; }
}
#chat-launcher-label-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
#chat-launcher-sparkle { display: flex; align-items: center; color: #FFD54A; filter: drop-shadow(0 0 3px rgba(255,213,74,.6)); }
/* Only the small mini-star and the dot (both part of the same sparkles.svg)
   twinkle — the main 4-point star stays put. */
#chat-launcher-sparkle .chat-sparkle-mini,
#chat-launcher-sparkle .chat-sparkle-dot {
    transform-box: fill-box; transform-origin: center;
    animation: chat-sparkle-twinkle 2.4s ease-in-out infinite;
}
#chat-launcher-sparkle .chat-sparkle-dot { animation-delay: .5s; }
@keyframes chat-sparkle-twinkle {
    0%, 100% { opacity: .3; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1.25); }
}
#chat-launcher.hide {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .25s ease, opacity .2s ease, visibility 0s linear 0s;
}
#chat-launcher-label { font-size: 16px; font-weight: 700; font-family: "Inter", sans-serif; white-space: nowrap; }
#chat-launcher:hover { transform: scale(1.06); }
#chat-nudge {
    position: fixed; bottom: 100px; right: 24px; max-width: 240px;
    background: var(--white-clr); color: var(--text-333); border-radius: 12px;
    border: 1px solid var(--chat-accent); box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    padding: 12px 28px 12px 14px; font-size: 13px; line-height: 1.4;
    z-index: 9997; cursor: pointer; font-family: "Inter", sans-serif;
    animation: chat-nudge-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes chat-nudge-pop {
    0% { opacity: 0; transform: scale(.7) translateY(10px); }
    60% { opacity: 1; transform: scale(1.05) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
#chat-nudge-close {
    position: absolute; top: 6px; right: 8px; background: none; border: none;
    color: var(--text-BA); font-size: 15px; cursor: pointer; line-height: 1;
}
body.chat-open { overflow: hidden; }

/* Blocks clicks/hover on the rest of the page while the chat is open —
   driven purely off the existing body.chat-open class (set/removed by
   openWidget()/closeWidget() in chat-widget.js), no JS change needed.
   Sits above the page but below both the widget (z-index 9999) and the
   launcher (9998) — the launcher fades out via .hide while open anyway. */
#chat-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20, 18, 8, .35);
    z-index: 9990;
}
body.chat-open #chat-backdrop { display: block; }

#chat-widget {
    position: fixed; top: 50%; left: 50%; width: 640px; max-width: 92vw;
    height: 580px; max-height: 78vh; background: var(--white-clr); border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 20px 45px rgba(0,0,0,.45), 0 0 0 1px rgba(119,116,47,.12);
    z-index: 9999; display: flex;
    flex-direction: column; overflow: hidden; font-size: 14px;
    font-family: "Inter", sans-serif;
    /* Closed state: invisible, non-interactive, scaled down around its own
       center — opens with a soft pop, closes with a fade. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, -50%) scale(.92);
    transition: width .7s cubic-bezier(.34, 1.4, .64, 1), height .7s cubic-bezier(.34, 1.4, .64, 1), opacity .22s ease,
        transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .22s;
}
#chat-widget.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: width .7s cubic-bezier(.34, 1.4, .64, 1), height .7s cubic-bezier(.34, 1.4, .64, 1), opacity .22s ease,
        transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear 0s;
}
#chat-header {
    position: relative;
    background: linear-gradient(135deg, var(--chat-accent) 0%, var(--chat-accent-dark) 100%);
    color: var(--white-clr); padding: 12px 16px; font-weight: 600; font-size: 14px;
    display: flex; align-items: center; justify-content: space-between;
}
/* Thin olive signature strip — the one deliberate "this is the AI" mark. */
#chat-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--chat-accent-dark) 0%, rgba(119,116,47,0) 70%);
}
#chat-header-brand { display: flex; align-items: center; gap: 10px; }
#chat-header-titles { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
#chat-header-subtitle { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.75); letter-spacing: .2px; }
#chat-header-logo {
    position: relative;
    width: 34px; height: 34px; border-radius: 50%; background: var(--white-clr);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--chat-accent); font-size: 13px; font-weight: 800; letter-spacing: .3px;
    box-shadow: 0 0 0 3px var(--chat-accent-soft);
}
#chat-header-status {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: #3bb54a; box-shadow: 0 0 0 2px var(--white-clr);
    animation: chat-status-blink 2s ease-in-out infinite;
    bottom: -1px; right: -1px;
}
@keyframes chat-status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
#chat-header-actions { display: flex; align-items: center; gap: 12px; }
#chat-new { background: none; border: none; color: var(--white-clr); font-size: 15px; cursor: pointer; line-height: 1; }
#chat-close { background: none; border: none; color: var(--white-clr); font-size: 22px; cursor: pointer; line-height: 1; }
#chat-messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
#chat-messages {
    flex: 1; min-height: 0; overflow-y: auto; padding: 12px;
    background: linear-gradient(180deg, rgba(119,116,47,.07) 0%, #F9F9FB 170px, #F9F9FB 100%);
}
#chat-jump-bottom {
    position: absolute; bottom: 12px; right: 14px; transform: translateY(6px);
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--white-clr); border: 1px solid var(--text-DEDE);
    color: var(--chat-accent); box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; z-index: 5;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
#chat-jump-bottom.show {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
#chat-jump-bottom:hover { background: var(--chat-accent-dark); color: var(--white-clr); }
.chat-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--chat-accent) 0%, var(--chat-accent-dark) 100%);
    color: var(--white-clr); display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; letter-spacing: .2px; margin-top: 1px;
    box-shadow: 0 0 0 2px var(--chat-accent-soft);
}
.chat-msg-row.agent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.chat-msg-row.agent .chat-msg.agent { margin-bottom: 0; max-width: calc(85% - 40px); }
.chat-msg { margin-bottom: 12px; max-width: 85%; padding: 9px 13px; border-radius: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-line; }
.chat-msg.user {
    margin-left: auto; background: linear-gradient(135deg, var(--chat-accent) 0%, var(--chat-accent-dark) 100%);
    color: var(--white-clr); border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(119,116,47,.25);
}
.chat-msg.agent {
    margin-right: auto; background: var(--white-clr); color: var(--text-333);
    border: 1px solid var(--text-DEDE); border-left: 3px solid var(--chat-accent-dark);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
/* Live token-streaming preview bubble — a blinking cursor at the end of the
   text while it's still arriving, discarded once the final "done" render
   replaces it. Rendered as an inline span appended into the last text node
   (see renderAgentCardContent in chat-widget.js) instead of a ::after on the
   card itself, so it flows right after the last character and wraps onto
   the current line instead of dropping onto a new line below the block. */
.chat-stream-cursor {
    display: inline-block; width: 2px; height: 1em;
    margin-left: 2px; vertical-align: text-bottom;
    background: var(--chat-accent-dark); animation: chat-stream-cursor .8s step-end infinite;
}
@keyframes chat-stream-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.chat-job-section { margin-bottom: 10px; }
.chat-job-section:last-child { margin-bottom: 0; }
.chat-job-section.has-divider { border-top: 1px solid var(--text-DEDE); padding-top: 10px; }
.chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-link-btn {
    display: inline-block; padding: 6px 14px; border-radius: 16px; font-size: 13px;
    font-weight: 600; text-decoration: none; white-space: nowrap; transition: .3s ease;
}
.chat-link-btn.view { background: var(--white-clr); border: 1px solid var(--chat-accent); color: var(--chat-accent); }
.chat-link-btn.view:hover { background: var(--chat-accent); color: var(--white-clr); }
.chat-link-btn.apply { background: var(--chat-accent); border: 1px solid var(--chat-accent); color: var(--white-clr); }
.chat-link-btn.apply:hover { background: var(--black-clr); border-color: var(--black-clr); }
.chat-link-btn.other {
    background: var(--white-clr); border: 1px solid var(--text-DEDE); color: var(--text-333);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.chat-link-btn.other:hover { border-color: var(--chat-accent); color: var(--chat-accent-dark); box-shadow: none; }
.chat-typing {
    width: fit-content; margin-bottom: 12px; margin-right: auto;
    background: var(--white-clr); border: 1px solid var(--text-DEDE);
    border-radius: 14px; border-bottom-left-radius: 4px;
    padding: 8px 12px; display: flex; gap: 4px; align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.chat-msg-row.agent .chat-typing { margin-bottom: 0; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--chat-accent-dark); animation: chat-typing-bounce 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
#chat-quick-replies { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
#chat-quick-replies:empty { display: none; padding: 0; }
.chat-quick-reply {
    background: rgba(119, 116, 47, 0.1); border: 1px solid var(--chat-accent); color: var(--chat-accent); border-radius: 16px;
    padding: 4px 10px; font-size: 13px; cursor: pointer; transition: .3s ease;
    display: inline-flex; align-items: center; gap: 6px;
}
.chat-quick-reply i { font-size: 11px; }
.chat-quick-reply:hover { background: var(--chat-accent); color: var(--white-clr); }
#chat-input-row { display: flex; align-items: flex-end; border-top: 1px solid var(--text-DEDE); padding: 8px 10px; gap: 8px; }
#chat-input {
    flex: 1; border: 1px solid var(--chat-accent-dark); border-radius: 20px; padding: 8px 13px;
    outline: none; font-family: inherit; font-size: inherit; resize: none;
    max-height: 120px; overflow-y: hidden; line-height: 1.4;
    scrollbar-width: thin; scrollbar-color: var(--chat-accent-soft) transparent;
}
#chat-input::-webkit-scrollbar { width: 5px; }
#chat-input::-webkit-scrollbar-track { background: transparent; }
#chat-input::-webkit-scrollbar-thumb { background: var(--chat-accent-soft); border-radius: 3px; }
#chat-input::-webkit-scrollbar-thumb:hover { background: var(--chat-accent); }
#chat-input::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

#chat-messages { scrollbar-width: thin; scrollbar-color: var(--chat-accent-soft) transparent; }
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: var(--chat-accent-soft); border-radius: 3px; }
#chat-messages::-webkit-scrollbar-thumb:hover { background: var(--chat-accent); }
#chat-messages::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#chat-send {
    background: linear-gradient(135deg, var(--chat-accent) 0%, var(--chat-accent-dark) 100%);
    color: var(--white-clr); border: none; border-radius: 50%;
    width: 42px; height: 42px; flex-shrink: 0; cursor: pointer; transition: .25s ease;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    box-shadow: 0 2px 8px rgba(119,116,47,.3);
}
#chat-send:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 4px 12px rgba(119,116,47,.4); }
#chat-send:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
#chat-send.stop { font-size: 13px; }
.chat-system-note {
    text-align: center; font-size: 11.5px; color: var(--text-BA);
    margin: 2px 0 12px; font-style: italic;
}
.chat-retry {
    margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--chat-accent-dark);
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    opacity: .75; transition: opacity .2s ease;
}
.chat-retry:hover { opacity: 1; text-decoration: underline; }
.chat-retry i { font-size: 10px; }
#chat-disclaimer {
    padding: 0 14px 8px; font-size: 10.5px; line-height: 1.4;
    color: #9c9b9b; text-align: center;
}
#chat-disclaimer.show {
    animation: chat-disclaimer-in 1.4s ease-out;
}
@keyframes chat-disclaimer-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
#chat-disclaimer a { color: var(--text-666); text-decoration: underline; }
#chat-disclaimer a:hover { color: var(--chat-accent); }