/* ==========================================================================
   Arrelam AI assistant widget
   All selectors are prefixed .aiw- and tokens are scoped at .aiw-root.
   Fonts are inherited from the site body (Manrope) — nothing is loaded here.
   ========================================================================== */

.aiw-root {
    --aiw-primary: #3A5A40;
    --aiw-primary-strong: #2F4A34;
    --aiw-on-primary: #FFFFFF;
    --aiw-bg: #F2F0EB;
    --aiw-surface: #FFFFFF;
    --aiw-bubble: #F2F0EB;
    --aiw-text: #2B2D26;
    --aiw-muted: #595959;
    --aiw-border: #D8D4CB;
    --aiw-error-bg: #F7ECEA;
    --aiw-error-text: #8A2F26;
    --aiw-shadow: 0 10px 30px rgba(43, 45, 38, 0.18);
    color: var(--aiw-text);
}

/* Dark mode (html.dark) — minimal token remap */
.dark .aiw-root {
    --aiw-primary: #88B090;
    --aiw-primary-strong: #9DC2A4;
    --aiw-on-primary: #151817;
    --aiw-bg: #151817;
    --aiw-surface: #1e2220;
    --aiw-bubble: #2A2F2C;
    --aiw-text: #E8E5DF;
    --aiw-muted: #A9A79E;
    --aiw-border: #3A403C;
    --aiw-error-bg: #3B2724;
    --aiw-error-text: #F2B8AE;
    --aiw-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.aiw-root button {
    font: inherit;
}

.aiw-root :focus-visible {
    outline: 2px solid var(--aiw-primary);
    outline-offset: 2px;
}

/* Author styles below use display:flex, which would defeat the UA [hidden]
   rule — force it back. */
.aiw-root [hidden],
.aiw-panel[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Launcher (fixed, bottom right)
   -------------------------------------------------------------------------- */
.aiw-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    cursor: pointer;
    /* Stronger, layered shadow + faint inner ring: reads clearly on any page. */
    box-shadow: 0 8px 24px rgba(43, 45, 38, 0.38), 0 2px 6px rgba(43, 45, 38, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Attention halo: a soft ring that expands and fades behind the button, so the
   launcher signals "live" without stealing focus from the page's own CTA. */
.aiw-launcher::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--aiw-primary);
    opacity: 0;
}

.aiw-launcher:focus-visible {
    outline: 3px solid var(--aiw-primary-strong);
    outline-offset: 3px;
}

/* Orb (ChatGPT-voice style): a sphere of smoky clouds, pale on top and a
   saturated tone underneath. Colours are derived from --aiw-primary, so a
   client widget with its own brand colour gets its own orb. Browsers without
   relative colour syntax use the color-mix values; without color-mix the
   launcher keeps its flat primary background. */
.aiw-root {
    --aiw-orb-light: color-mix(in oklab, var(--aiw-primary) 5%, #fff);
    --aiw-orb-mid: color-mix(in oklab, var(--aiw-primary) 35%, #fff);
    --aiw-orb-deep: color-mix(in oklab, var(--aiw-primary) 80%, #fff);
    --aiw-orb-core: var(--aiw-primary);
}

@supports (color: oklch(from red l c h)) {
    .aiw-root {
        --aiw-orb-light: oklch(from var(--aiw-primary) 0.98 calc(c * 0.3) h);
        --aiw-orb-mid: oklch(from var(--aiw-primary) 0.86 calc(c * 1.3) h);
        --aiw-orb-deep: oklch(from var(--aiw-primary) 0.6 calc(c * 2.2) h);
        --aiw-orb-core: oklch(from var(--aiw-primary) 0.46 calc(c * 2) h);
    }
}

.aiw-orb {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    isolation: isolate;
    background: linear-gradient(175deg,
        var(--aiw-orb-light) 0%,
        var(--aiw-orb-light) 16%,
        var(--aiw-orb-mid) 40%,
        var(--aiw-orb-deep) 66%,
        var(--aiw-orb-core) 100%);
}

/* Glass edge: a faint bright rim on top, a little shade underneath. */
.aiw-orb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 50%;
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.55), inset 0 -5px 10px rgba(0, 0, 0, 0.14);
}

.aiw-orb > span {
    position: absolute;
    border-radius: 50%;
}

/* 1. Deep cloud rolling in from the bottom left */
.aiw-orb > span:nth-child(1) {
    width: 95%;
    height: 70%;
    left: -28%;
    bottom: -18%;
    background: radial-gradient(closest-side, var(--aiw-orb-core) 20%, var(--aiw-orb-deep) 55%, transparent);
    filter: blur(4px);
}

/* 2. Second deep cloud on the right, so the boundary is uneven like smoke */
.aiw-orb > span:nth-child(2) {
    width: 70%;
    height: 60%;
    right: -18%;
    bottom: 2%;
    background: radial-gradient(closest-side, var(--aiw-orb-deep) 25%, transparent);
    filter: blur(5px);
}

/* 3. Pale plume rising through the middle */
.aiw-orb > span:nth-child(3) {
    width: 46%;
    height: 85%;
    left: 24%;
    top: -18%;
    background: radial-gradient(closest-side, #fff 30%, rgba(255, 255, 255, 0.55) 60%, transparent);
    filter: blur(4px);
}

/* 4. Thin flame of light breaking into the deep area */
.aiw-orb > span:nth-child(4) {
    width: 16%;
    height: 62%;
    left: 50%;
    top: 16%;
    border-radius: 50% 50% 45% 45%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    filter: blur(2.5px);
    transform: rotate(14deg);
}

/* 5. Wisps: a slow turning veil that breaks up the gradient */
.aiw-orb > span:nth-child(5) {
    inset: -30%;
    background: conic-gradient(from 10deg,
        transparent 0 10%,
        rgba(255, 255, 255, 0.55) 18%,
        transparent 27% 45%,
        var(--aiw-orb-deep) 55%,
        transparent 64% 78%,
        rgba(255, 255, 255, 0.35) 86%,
        transparent 94%);
    filter: blur(4px);
    opacity: 0.8;
}

/* Arrelam dark mode lightens --aiw-primary; the orb keeps the light-mode
   greens so it still reads as a lit sphere on the dark page. */
.dark .aiw-root {
    --aiw-orb-light: #F4F8F2;
    --aiw-orb-mid: #BFE0C6;
    --aiw-orb-deep: #4A9A68;
    --aiw-orb-core: #286B45;
}

/* Short, one-time invitation. It increases discovery without opening the
   conversation or competing with the page's primary CTA. */
.aiw-teaser {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 9989;
    width: min(288px, calc(100vw - 40px));
    display: flex;
    align-items: flex-start;
    gap: 4px;
    background: var(--aiw-surface);
    color: var(--aiw-text);
    border: 1px solid var(--aiw-border);
    border-radius: 16px;
    box-shadow: var(--aiw-shadow);
}

.aiw-teaser::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: var(--aiw-surface);
    border-right: 1px solid var(--aiw-border);
    border-bottom: 1px solid var(--aiw-border);
    transform: rotate(45deg);
}

.aiw-teaser-main {
    flex: 1;
    min-width: 0;
    padding: 16px 8px 16px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.aiw-teaser-title,
.aiw-teaser-body {
    display: block;
}

.aiw-teaser-title {
    margin-bottom: 4px;
    color: var(--aiw-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.aiw-teaser-body {
    color: var(--aiw-muted);
    font-size: 14px;
    line-height: 1.5;
}

.aiw-teaser-close {
    position: relative;
    z-index: 1;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--aiw-muted);
    cursor: pointer;
}

.aiw-teaser-close svg {
    width: 18px;
    height: 18px;
}

.aiw-teaser-main:hover .aiw-teaser-title,
.aiw-teaser-close:hover {
    color: var(--aiw-primary-strong);
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.aiw-panel {
    position: fixed;
    right: 20px;
    bottom: 88px;
    /* Above the floating cookie button (9998) so panel actions stay clickable;
       still below the cookie consent banner/modal (10001+). */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: min(600px, calc(100vh - 110px));
    background: var(--aiw-surface);
    color: var(--aiw-text);
    border: 1px solid var(--aiw-border);
    border-radius: 16px;
    box-shadow: var(--aiw-shadow);
    overflow: hidden;
}

/* Header */
.aiw-header {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 14px 10px 12px 20px;
    border-bottom: 1px solid var(--aiw-border);
}

.aiw-header-txt {
    flex: 1;
    min-width: 0;
    margin-right: 4px;
}

.aiw-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--aiw-text);
}

.aiw-subtitle {
    margin: 3px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--aiw-muted);
}

.aiw-chip {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--aiw-primary);
    border-radius: 6px;
    color: var(--aiw-primary);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.aiw-close {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--aiw-text);
    cursor: pointer;
}

.aiw-close:hover {
    background: var(--aiw-bubble);
}

.aiw-close svg {
    width: 20px;
    height: 20px;
}

/* Sound toggle — secondary header control (chime on the bot's reply) */
.aiw-sound {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--aiw-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.aiw-sound:hover {
    background: var(--aiw-bubble);
    color: var(--aiw-text);
}
.aiw-sound[aria-pressed="true"] {
    color: var(--aiw-primary);
}
.aiw-sound[aria-pressed="false"] {
    opacity: 0.7;
}
.aiw-sound svg {
    width: 19px;
    height: 19px;
}

/* AI notice line */
.aiw-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px 10px 20px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--aiw-muted);
    border-bottom: 1px solid var(--aiw-border);
}

.aiw-notice-body {
    flex: 1;
    min-width: 0;
}

.aiw-notice a {
    color: var(--aiw-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aiw-notice-close {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--aiw-muted);
    cursor: pointer;
}

.aiw-notice-close:hover {
    background: var(--aiw-bubble);
    color: var(--aiw-text);
}

.aiw-notice-close:focus-visible {
    outline: 2px solid var(--aiw-primary);
    outline-offset: 2px;
}

.aiw-notice-close svg {
    width: 15px;
    height: 15px;
}

/* Views (chat / contact / success) */
.aiw-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.aiw-messages {
    flex: 1 1 auto;
    min-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
}

.aiw-msg {
    max-width: 85%;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.91rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    user-select: text;
}

.aiw-msg-user {
    align-self: flex-end;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    border-bottom-right-radius: 4px;
}

.aiw-msg-assistant {
    align-self: flex-start;
    background: var(--aiw-bubble);
    color: var(--aiw-text);
    border-bottom-left-radius: 4px;
}

/* "IA" prefix chip — speaker is not marked by color alone */
.aiw-msg-chip {
    display: block;
    margin-bottom: 2px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--aiw-primary);
}

.aiw-msg-text {
    margin: 0;
}

.aiw-msg-error {
    align-self: flex-start;
    background: var(--aiw-error-bg);
    color: var(--aiw-error-text);
    font-size: 0.85rem;
}

/* Inline contact CTA under a bubble */
.aiw-cta-row {
    align-self: flex-start;
    max-width: 85%;
}

.aiw-cta {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--aiw-primary);
    border-radius: 10px;
    background: transparent;
    color: var(--aiw-primary);
    font-weight: 700;
    cursor: pointer;
}

.aiw-cta:hover {
    background: var(--aiw-bubble);
}

/* Session-limit status line */
.aiw-status {
    align-self: center;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--aiw-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Suggestions
   -------------------------------------------------------------------------- */
.aiw-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 20px 12px;
}

.aiw-suggestion {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--aiw-primary);
    border-radius: 10px;
    background: transparent;
    color: var(--aiw-primary);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.aiw-suggestion:hover {
    background: var(--aiw-bubble);
}

/* --------------------------------------------------------------------------
   Typing indicator
   -------------------------------------------------------------------------- */
.aiw-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 20px 10px;
    flex-shrink: 0;
}

.aiw-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aiw-muted);
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Input area
   -------------------------------------------------------------------------- */
.aiw-counter {
    padding: 2px 20px 0;
    font-size: 0.75rem;
    color: var(--aiw-muted);
    text-align: right;
    flex-shrink: 0;
}

/* AI Act art. 50.1 — fixed identification just above the input. Plain text
   plus a decorative "IA" badge: the sentence itself carries the meaning, so
   it never depends on colour or the badge alone. */
.aiw-disclosure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--aiw-border);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--aiw-text);
    flex-shrink: 0;
}

.aiw-disclosure-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.aiw-disclosure + .aiw-inputarea {
    border-top: 0;
    padding-top: 4px;
}

.aiw-inputarea {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px 6px;
    border-top: 1px solid var(--aiw-border);
    flex-shrink: 0;
}

.aiw-input {
    flex: 1;
    min-height: 44px;
    max-height: 108px; /* ~4 rows, JS mirrors this cap */
    padding: 11px 12px;
    border: 1px solid var(--aiw-border);
    border-radius: 10px;
    background: var(--aiw-surface);
    color: var(--aiw-text);
    font: inherit;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}

.aiw-input::placeholder {
    color: var(--aiw-muted);
}

.aiw-send {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    cursor: pointer;
}

.aiw-send:hover:not(:disabled) {
    background: var(--aiw-primary-strong);
}

.aiw-send:disabled {
    opacity: 0.55;
    cursor: default;
}

.aiw-send svg {
    width: 20px;
    height: 20px;
}

/* Footer: one compact row — "talk to a person" chip + retention/privacy.
   The chip looks 32px tall but keeps a 44px hit area (the button box),
   so the row stays a single line under the input. */
.aiw-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 6px 10px;
    flex-shrink: 0;
}

.aiw-chipbtn {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 6px 0;
    padding: 0 12px;
    border: 1px solid var(--aiw-border);
    border-radius: 999px;
    background: none;
    color: var(--aiw-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Beats `.aiw-root button { font: inherit }` (0,1,1). */
.aiw-actions .aiw-chipbtn {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Invisible extension: 32px pill, 44px touch target. */
.aiw-chipbtn::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
}

.aiw-chipbtn > svg {
    width: 14px;
    height: 14px;
}

.aiw-chipbtn:hover {
    background: var(--aiw-bubble);
    border-color: var(--aiw-primary);
}

.aiw-actions .aiw-privacy {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    text-align: right;
}

.aiw-textbtn {
    min-height: 44px;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--aiw-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.aiw-privacy {
    margin: 0;
    padding: 0 20px 12px;
    font-size: 0.75rem;
    color: var(--aiw-muted);
    flex-shrink: 0;
}

.aiw-privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Contact form + success view
   -------------------------------------------------------------------------- */
.aiw-contact,
.aiw-success {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
    overflow-y: auto;
}

.aiw-contact-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.aiw-contact-intro {
    margin: 0;
    font-size: 0.85rem;
    color: var(--aiw-muted);
}

.aiw-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.aiw-field input,
.aiw-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--aiw-border);
    border-radius: 10px;
    background: var(--aiw-surface);
    color: var(--aiw-text);
    font: inherit;
    line-height: 1.4;
}

.aiw-field textarea {
    resize: vertical;
}

.aiw-field [aria-invalid="true"] {
    border-color: var(--aiw-error-text);
}

.aiw-field-error {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--aiw-error-text);
}

.aiw-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aiw-consent input {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--aiw-primary);
}

.aiw-consent label {
    font-size: 0.8rem;
    line-height: 1.45;
}

.aiw-consent a {
    color: var(--aiw-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.aiw-form-error {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--aiw-error-text);
    border-radius: 10px;
    background: var(--aiw-error-bg);
    color: var(--aiw-error-text);
    font-size: 0.84rem;
}

.aiw-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aiw-btn-primary {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--aiw-primary);
    color: var(--aiw-on-primary);
    font-weight: 700;
    cursor: pointer;
}

.aiw-btn-primary:hover:not(:disabled) {
    background: var(--aiw-primary-strong);
}

.aiw-btn-primary:disabled {
    opacity: 0.55;
    cursor: default;
}

.aiw-success p {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Visually hidden (clip-path pattern)
   -------------------------------------------------------------------------- */
.aiw-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   Motion (opt-in only) and reduced-motion guard
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .aiw-panel:not([hidden]) {
        animation: aiw-in 0.18s ease-out;
    }

    .aiw-teaser:not([hidden]) {
        animation: aiw-in 0.18s ease-out;
    }

    .aiw-launcher {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    /* Continuous soft halo — the main "I'm here / live" cue. */
    .aiw-launcher::before {
        animation: aiw-halo 2.8s ease-out infinite;
    }

    /* Clouds drift inside the orb: slow, out of step, transform only. */
    .aiw-orb > span:nth-child(1) {
        animation: aiw-roll 9s ease-in-out infinite alternate;
    }

    .aiw-orb > span:nth-child(2) {
        animation: aiw-roll-back 7.5s ease-in-out infinite alternate;
    }

    .aiw-orb > span:nth-child(3) {
        animation: aiw-plume 6.5s ease-in-out infinite alternate;
    }

    .aiw-orb > span:nth-child(4) {
        animation: aiw-flame 5s ease-in-out infinite alternate;
    }

    .aiw-orb > span:nth-child(5) {
        animation: aiw-spin 14s linear infinite;
    }

    .aiw-launcher:hover {
        transform: scale(1.08);
        box-shadow: 0 10px 28px rgba(43, 45, 38, 0.44), 0 3px 8px rgba(43, 45, 38, 0.28);
    }

    .aiw-launcher:hover::before {
        animation: none; /* calm the halo while the visitor engages */
    }

    .aiw-typing-dot {
        animation: aiw-pulse 1.1s ease-in-out infinite;
    }

    .aiw-typing-dot + .aiw-typing-dot {
        animation-delay: 0.18s;
    }

    .aiw-typing-dot + .aiw-typing-dot + .aiw-typing-dot {
        animation-delay: 0.36s;
    }
}

@keyframes aiw-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aiw-pulse {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes aiw-halo {
    0% {
        opacity: 0.45;
        transform: scale(1);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

@keyframes aiw-plume {
    from { transform: translate(-6%, 4%) scale(1) rotate(-8deg); }
    to   { transform: translate(8%, -4%) scale(1.12) rotate(10deg); }
}

@keyframes aiw-roll {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(24%, -14%) scale(1.18); }
}

@keyframes aiw-roll-back {
    from { transform: translate(0, 0) scale(1.1); }
    to   { transform: translate(-22%, 8%) scale(0.95); }
}

@keyframes aiw-flame {
    from { transform: translate(-40%, 6%) rotate(-12deg) scaleY(0.9); }
    to   { transform: translate(35%, -8%) rotate(18deg) scaleY(1.15); }
}

@keyframes aiw-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .aiw-panel,
    .aiw-teaser,
    .aiw-launcher,
    .aiw-launcher::before,
    .aiw-orb > span,
    .aiw-typing-dot,
    .aiw-chipbtn,
    .aiw-sound {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile (≤640px): full-screen panel
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .aiw-teaser {
        right: 16px;
        bottom: 88px;
        width: min(288px, calc(100vw - 32px));
    }

    .aiw-panel {
        inset: 0;
        width: auto;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}