/* The Raptors AI Assistant for website visitors (views/inc/ai_guest_widget.php).
   Built on rf_landing.css's own tokens, so it sits in the page's design. */

.aig-launch {
    position: fixed; right: 20px; bottom: 20px; z-index: 1050;
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
    background: linear-gradient(145deg, var(--color-accent), var(--color-accent-800));
    color: #fff; font-size: 24px; cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
    animation: aig-pulse 2.6s ease-out 1.2s 2;
}
.aig-launch:hover { transform: translateY(-2px) scale(1.04); }
.aig-launch:focus-visible { outline: 3px solid var(--color-accent-300); outline-offset: 3px; }
/* The support chat, when it is on, keeps the corner: this sits above it. */
.aig-has-support .aig-launch { bottom: 86px; }
.aig-has-support .aig-panel { bottom: 152px; }
@keyframes aig-pulse {
    0% { box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
    100% { box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 0 18px transparent; }
}

.aig-panel {
    position: fixed; right: 20px; bottom: 88px; z-index: 1051;
    width: 380px; max-width: calc(100vw - 32px);
    height: 560px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    overflow: hidden; font-family: var(--font-body);
}
.aig-panel[hidden] { display: none; }

.aig-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--color-divider); }
.aig-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-300); font-size: 15px; flex: none; }
.aig-title { flex: 1 1 auto; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; }
.aig-icon { width: 30px; height: 30px; border: 0; border-radius: var(--radius-md); background: transparent; color: color-mix(in srgb, var(--color-text) 70%, transparent); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.aig-icon:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text); }

.aig-log { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.aig-msg { max-width: 88%; font-size: 14px; line-height: 21px; }
.aig-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.aig-msg.is-bot { align-self: flex-start; }
.aig-msg.is-bot p { padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.aig-msg.is-user { align-self: flex-end; }
.aig-msg.is-user p { padding: 9px 12px; border-radius: 14px 4px 14px 14px; background: color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-accent-100); }
.aig-msg.is-typing p { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.aig-dots::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: aig-dots 1.2s steps(4) infinite; }
@keyframes aig-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.aig-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aig-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none;
    color: var(--color-accent-200); border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.aig-action:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); color: var(--color-accent-100); }

.aig-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aig-chip {
    border: 1px solid var(--color-divider); background: transparent; color: color-mix(in srgb, var(--color-text) 85%, transparent);
    border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.aig-chip:hover { border-color: var(--color-accent); color: var(--color-accent-200); }

.aig-bar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-divider); }
.aig-bar textarea {
    flex: 1 1 auto; resize: none; max-height: 120px; min-height: 38px;
    padding: 9px 12px; border-radius: 12px; border: 1px solid var(--color-divider);
    background: color-mix(in srgb, var(--color-bg) 70%, transparent); color: var(--color-text);
    font: inherit; font-size: 14px; line-height: 20px; outline: none;
}
.aig-bar textarea:focus { border-color: var(--color-accent); }
.aig-send { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: var(--color-accent); color: #fff; font-size: 17px; cursor: pointer; display: grid; place-items: center; }
.aig-send:disabled { opacity: .4; cursor: default; }

@media (max-width: 480px) {
    .aig-panel { right: 8px; left: 8px; width: auto; max-width: none; bottom: 84px; height: calc(100vh - 110px); }
    .aig-launch { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .aig-launch { animation: none; transition: none; } }