/* CLEO chatbot — distinctive entry surface (core/layout.php's
   cleo_render_chatbot_mount()). Loaded only when a site's Manifest sets
   chatbot.enabled — sites without it ship zero bytes of this. Theme-token
   driven, no hard-coded client colors.

   Clarity Engine pass (2026-08-18): the launcher and panel-header avatar
   both carry a dashed aperture-ring detail (see each rule below) — CLEO
   reads as a lens/aperture "coming into focus," the same idea the rest of
   the site's motion language expresses, not a bespoke chatbot-only effect. */

.cleo-chatbot {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    font-family: var(--cleo-font-body);
}

/* Launcher (2026-08-17 icon pass): a black circle, CLEO's "C", and a
   metallic gold ring — CLEO's own recurring identity mark (like the
   hard-coded "Hi, I'm CLEO." copy above, this is Factory-wide, not
   resolved from a client's brand accent color, so CLEO reads as CLEO on
   every site regardless of that client's palette).

   The ring is a `position:relative` pseudo-element sized a few px larger
   than the button and stacked BEHIND its opaque black background
   (z-index:-1 within the button's own stacking context) — so it only ever
   shows as a thin ring in the margin, no mask/border-image trickery
   needed. A conic-gradient with alternating light/mid/dark gold stops (not
   one flat hue) is what reads as faceted metal instead of a flat yellow
   border; a small inset highlight + inset shadow on the ring itself adds
   the bevel. A thin translucent-white outer hairline keeps the ring
   separated and visible even when the launcher sits over a near-black
   hero/video section, where a gold-on-dark edge alone can otherwise lose
   definition. */
.cleo-chatbot-launcher {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    position: relative;
    background: var(--cleo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--cleo-shadow);
}
.cleo-chatbot-launcher::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
        #7a5a20 0deg,
        #e9c674 40deg,
        #fff6df 75deg,
        #c9a24b 115deg,
        #8a6423 150deg,
        #f6dfa0 195deg,
        #b8892f 240deg,
        #e9c674 290deg,
        #7a5a20 340deg,
        #7a5a20 360deg);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.65),
        inset 0 -2px 3px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.14),
        0 2px 10px rgba(0,0,0,.35);
}

/* Clarity Engine aperture motif (2026-08-18): a thin dashed inner ring,
   reading as camera-iris/aperture blades — ties the launcher to the site's
   "resolves into focus" thesis without adding literal camera iconography
   or crowding the "C". `.is-open` (assets/js/chatbot.js) is the hook for
   the matching motion-gated "focus pull" pulse in assets/css/motion.css;
   the ring itself needs no JS and is identical whether the panel is open
   or closed. */
.cleo-chatbot-launcher::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 1.5px dashed rgba(201, 162, 75, .75);
    pointer-events: none;
}

.cleo-chatbot-launcher-avatar {
    font-family: var(--cleo-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--cleo-accent);
}

.cleo-chatbot-panel {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: min(360px, 88vw);
    max-height: min(70vh, 560px);
    background: var(--cleo-bg);
    border-radius: var(--cleo-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    border: 1px solid var(--cleo-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* [hidden] and a same-specificity `display` rule on the same selector tie
   in the cascade, and author CSS wins that tie over the UA stylesheet —
   without this, the panel above would render open by default. */
.cleo-chatbot-panel[hidden] { display: none; }

.cleo-chatbot-panel-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px;
    background: var(--cleo-primary);
    color: #fff;
}
.cleo-chatbot-panel-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px dashed rgba(201, 162, 75, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cleo-font-heading);
    font-weight: 700;
    color: var(--cleo-accent);
    flex-shrink: 0;
}
.cleo-chatbot-panel-header strong { display: block; margin-bottom: 2px; color: #fff; }
.cleo-chatbot-panel-header p { margin: 0; font-size: .85rem; opacity: .85; color: #fff; }
.cleo-chatbot-close {
    margin-left: auto;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.cleo-chatbot-quick-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--cleo-border);
}
.cleo-chatbot-prompt {
    border: 1px solid var(--cleo-border);
    background: var(--cleo-surface);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .82rem;
    cursor: pointer;
    color: var(--cleo-text);
}
.cleo-chatbot-prompt:hover { border-color: var(--cleo-accent); }

.cleo-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px;
    min-height: 50px;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cleo-chatbot-message {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--cleo-radius);
    max-width: 85%;
    font-size: .9rem;
}
.cleo-chatbot-message-visitor { align-self: flex-end; background: var(--cleo-primary); color: #fff; }
.cleo-chatbot-message-bot { align-self: flex-start; background: var(--cleo-surface); }

.cleo-chatbot-form {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--cleo-border);
}
.cleo-chatbot-form input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--cleo-border);
    border-radius: var(--cleo-radius-sm);
    font: inherit;
}
.cleo-chatbot-form .button { padding: 10px 16px; box-shadow: none; }

/* Visitor disclosure (Stage 8): small, quiet, always-visible-once-open —
   never a modal, never a dismiss-to-proceed gate. Sits below the input so
   it never competes with the conversation itself for attention. */
.cleo-chatbot-disclosure {
    margin: 0;
    padding: 0 18px 14px;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--cleo-text);
    opacity: .6;
}

/* Visitor-awareness invite (assets/js/chatbot.js times and toggles
   `.is-visible`; assets/css/motion.css animates the entrance/exit and the
   launcher's `.is-inviting` pulse when motion is allowed). `[hidden]`
   keeps it removed from layout and the accessibility tree until JS
   decides to show it — no CSS-only fallback state, because this is a
   timed behavior, not a progressive-enhancement reveal: without JS the
   launcher is simply never invited, which is the correct, unbroken
   baseline (a visitor can still always open the chat themselves). */
.cleo-chatbot-invite {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: max-content;
    max-width: 240px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: var(--cleo-bg);
    color: var(--cleo-text);
    border: 1px solid var(--cleo-border);
    border-radius: var(--cleo-radius);
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    padding: 10px 12px;
}
.cleo-chatbot-invite[hidden] { display: none; }
.cleo-chatbot-invite p { margin: 0; font-size: .85rem; line-height: 1.35; }
.cleo-chatbot-invite-dismiss {
    flex-shrink: 0;
    background: none;
    border: 0;
    color: var(--cleo-text);
    opacity: .6;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 4px;
}
.cleo-chatbot-invite-dismiss:hover { opacity: 1; }

@media (max-width: 480px) {
    .cleo-chatbot { right: 12px; bottom: 12px; }
    .cleo-chatbot-panel { width: calc(100vw - 24px); }
    .cleo-chatbot-invite { max-width: min(260px, calc(100vw - 48px)); }
}