/* ============================================================================
   WAVO AI — floating course-discovery chat widget
   macOS Sequoia "Liquid Glass" treatment, matched to the site design system
   (wavo-tokens.css): frosted translucent materials, navy ink on light, depth
   shadows, Sequoia radii, and the site's SF Pro type scale (caption/micro).
   All selectors are .wai-* prefixed; class names match the markup + JS.
   ========================================================================== */

.wai-root {
    --wai-accent: var(--wavo-accent, #5471af);
    --wai-ink: var(--wavo-ink, #17294c);
    --wai-z: 1150;
    font-family: var(--wavo-font-text, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif);
}

/* ---- Launcher (brand FAB) ---- */
.wai-launcher {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: var(--wai-z);
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--wavo-bg-elevated, #fff);
    box-shadow: var(--wavo-depth-3, 0 12px 28px rgba(23,41,76,0.1)), inset 0 0 0 1px var(--wavo-hairline, rgba(23,41,76,0.1));
    color: var(--wai-ink, #17294c);
    display: grid;
    place-items: center;
    transition: transform var(--wavo-dur-fast, 160ms) var(--wavo-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
                box-shadow var(--wavo-dur, 280ms) var(--wavo-ease-soft, ease);
    -webkit-tap-highlight-color: transparent;
}
.wai-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--wavo-depth-4, 0 24px 56px rgba(23,41,76,0.14)), var(--wavo-inner-shine); }
.wai-launcher:active { transform: scale(0.96); }
.wai-launcher:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow, 0 0 0 2px rgba(84,113,175,0.85)); }

.wai-launcher__icon { position: absolute; width: 24px; height: 24px; object-fit: contain; transition: opacity var(--wavo-dur-fast, 160ms) ease, transform var(--wavo-dur-fast, 160ms) ease; }
.wai-launcher__icon--open { width: 42px; height: 42px; }
.wai-launcher__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.wai-launcher.is-active .wai-launcher__icon--open { opacity: 0; transform: rotate(45deg) scale(0.6); }
.wai-launcher.is-active .wai-launcher__icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* Slow heartbeat — a periodic double-thump plus a soft pulse ring to draw the eye,
   with a long restful pause so it invites rather than nags. Pauses on hover and while
   the panel is open; fully disabled under reduced-motion (see block below). */
.wai-launcher { animation: wai-heartbeat 4.5s ease-in-out 1.5s infinite; }
.wai-launcher:hover,
.wai-launcher:active,
.wai-launcher.is-active { animation: none; }

.wai-launcher::after {
    content: "";
    position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(84, 113, 175, 0.5);
    animation: wai-pulse 4.5s var(--wavo-ease-out, ease-out) 1.5s infinite;
}
.wai-launcher:hover::after,
.wai-launcher.is-active::after { animation: none; }

@keyframes wai-heartbeat {
    0%   { transform: scale(1); }
    6%   { transform: scale(1.09); }
    12%  { transform: scale(1); }
    18%  { transform: scale(1.06); }
    24%  { transform: scale(1); }
    100% { transform: scale(1); }
}
@keyframes wai-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(84, 113, 175, 0.5); }
    14%  { box-shadow: 0 0 0 14px rgba(84, 113, 175, 0); }
    100% { box-shadow: 0 0 0 0 rgba(84, 113, 175, 0); }
}

/* ---- Panel — frosted Sequoia glass ---- */
.wai-panel {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: calc(clamp(16px, 3vw, 28px) + 68px);
    z-index: var(--wai-z);
    width: min(376px, calc(100vw - 32px));
    height: min(600px, calc(100vh - 128px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--wavo-glass-strong, rgba(255, 255, 255, 0.85));
    backdrop-filter: var(--wavo-mat-blur, saturate(180%) blur(24px));
    -webkit-backdrop-filter: var(--wavo-mat-blur, saturate(180%) blur(24px));
    border-radius: var(--wavo-r-window, 26px);
    box-shadow: var(--wavo-depth-4, 0 24px 56px rgba(23, 41, 76, 0.14)),
                var(--wavo-inner-shine, inset 0 1px 0 rgba(255, 255, 255, 0.6)),
                inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
    transition: opacity var(--wavo-dur, 280ms) var(--wavo-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)),
                transform var(--wavo-dur, 280ms) var(--wavo-ease-snap, cubic-bezier(0.16, 1, 0.3, 1));
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .wai-panel { background: var(--wavo-mat-fallback, #fff); }
}
.wai-panel[hidden] { display: none; }
.wai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ---- Header — light, ink text, hairline (no heavy slab) ---- */
.wai-panel__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 14px;
    background: var(--wavo-vib-brand, rgba(23, 41, 76, 0.04));
    border-bottom: 1px solid var(--wavo-hairline, rgba(23, 41, 76, 0.1));
    color: var(--wai-ink);
    flex: 0 0 auto;
}
.wai-panel__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wai-panel__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.wai-panel__avatar {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: none;
}
.wai-panel__avatar img { width: 100%; height: 100%; object-fit: contain; }
.wai-panel__title { display: block; font-family: var(--wavo-font-display, inherit); font-weight: var(--wavo-weight-semibold, 600); font-size: 15px; letter-spacing: var(--wavo-tracking-snug, -0.015em); line-height: 1.15; color: var(--wai-ink); }
.wai-panel__subtitle { display: block; font-size: 11.5px; color: var(--wavo-ink-muted, #5b6478); line-height: 1.3; margin-top: 1px; }
.wai-panel__close {
    flex: 0 0 auto; width: 30px; height: 30px; border: none; cursor: pointer;
    border-radius: 50%; background: transparent; color: var(--wavo-ink-muted, #5b6478);
    display: grid; place-items: center; transition: background var(--wavo-dur-fast, 160ms) ease, color var(--wavo-dur-fast, 160ms) ease;
}
.wai-panel__close:hover { background: var(--wavo-hairline, rgba(23, 41, 76, 0.08)); color: var(--wai-ink); }
.wai-panel__close:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow, 0 0 0 2px rgba(84,113,175,0.85)); }
.wai-panel__close svg { width: 16px; height: 16px; }

/* ---- Message list ---- */
.wai-panel__body {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 14px 6px;
    display: flex; flex-direction: column; gap: 10px;
    -webkit-overflow-scrolling: touch;
}
.wai-panel__body::-webkit-scrollbar { width: 7px; }
.wai-panel__body::-webkit-scrollbar-thumb { background: var(--wavo-hairline-strong, rgba(23, 41, 76, 0.16)); border-radius: 7px; border: 2px solid transparent; background-clip: padding-box; }

.wai-msg { display: flex; max-width: 100%; }
.wai-msg--user { justify-content: flex-end; }
.wai-msg--bot { justify-content: flex-start; }
.wai-msg__bubble {
    max-width: 84%;
    padding: 8px 12px;
    font-size: var(--wavo-fs-caption, 13px);
    line-height: 1.5;
    letter-spacing: var(--wavo-tracking-normal, -0.005em);
    border-radius: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
    animation: wai-bubble-in var(--wavo-dur, 280ms) var(--wavo-ease-snap, cubic-bezier(0.16, 1, 0.3, 1));
}
.wai-msg--bot .wai-msg__bubble {
    background: var(--wavo-bg-elevated, #fff); color: var(--wai-ink);
    border: 1px solid var(--wavo-hairline, rgba(23, 41, 76, 0.1));
    border-bottom-left-radius: 5px;
    box-shadow: var(--wavo-depth-1, 0 1px 2px rgba(23, 41, 76, 0.06));
}
.wai-msg--user .wai-msg__bubble {
    background: var(--wavo-gradient-accent, linear-gradient(135deg, #5471af, #475f96)); color: #fff;
    border-bottom-right-radius: 5px;
    box-shadow: var(--wavo-depth-2, 0 4px 12px rgba(71, 95, 150, 0.2));
}
.wai-msg--error .wai-msg__bubble { background: var(--wavo-danger-bg, rgba(213, 0, 0, 0.08)); border-color: rgba(213, 0, 0, 0.2); color: #8a1414; }
@keyframes wai-bubble-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* streaming caret */
.wai-msg.is-streaming .wai-msg__bubble::after {
    content: ""; display: inline-block; width: 6px; height: 1.05em; margin-left: 2px;
    vertical-align: -2px; border-radius: 1px; background: var(--wai-accent);
    animation: wai-caret 1s steps(1) infinite;
}
@keyframes wai-caret { 50% { opacity: 0; } }

/* typing dots */
.wai-typing { display: inline-flex; align-items: center; gap: 5px; }
.wai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--wavo-ink-subtle, #6c7488); opacity: 0.5; animation: wai-dot 1.2s infinite ease-in-out; }
.wai-typing span:nth-child(2) { animation-delay: 0.18s; }
.wai-typing span:nth-child(3) { animation-delay: 0.36s; }
.wai-typing__label { margin-left: 4px; font-style: normal; font-size: var(--wavo-fs-micro, 12px); color: var(--wavo-ink-muted, #5b6478); }
@keyframes wai-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---- Course cards ---- */
.wai-cards { display: flex; flex-direction: column; gap: 8px; margin: 1px 0 3px; }
.wai-card {
    display: flex; gap: 10px; align-items: stretch;
    padding: 8px; text-decoration: none;
    background: var(--wavo-bg-elevated, #fff); border: 1px solid var(--wavo-hairline, rgba(23, 41, 76, 0.1));
    border-radius: var(--wavo-r-control, 14px);
    box-shadow: var(--wavo-depth-1, 0 1px 2px rgba(23, 41, 76, 0.06));
    transition: transform var(--wavo-dur-fast, 160ms) var(--wavo-ease-soft, ease),
                box-shadow var(--wavo-dur-fast, 160ms) ease, border-color var(--wavo-dur-fast, 160ms) ease;
}
.wai-card:hover { transform: translateY(-2px); box-shadow: var(--wavo-depth-3, 0 12px 28px rgba(23, 41, 76, 0.1)); border-color: var(--wavo-hairline-strong, rgba(23, 41, 76, 0.2)); }
.wai-card:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow, 0 0 0 2px rgba(84, 113, 175, 0.85)); }
.wai-card__img {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--wavo-r-chip, 10px);
    background-size: cover; background-position: center;
    background-color: var(--wavo-bg-tint-deep, #e7ecf5);
}
.wai-card__img--ph { background-image: linear-gradient(135deg, #dbe3f2, #c7d3ea); }
.wai-card__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; padding: 1px 2px; }
.wai-card__name { font-weight: var(--wavo-weight-semibold, 600); font-size: 13px; line-height: 1.25; letter-spacing: var(--wavo-tracking-snug, -0.015em); color: var(--wai-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wai-card__meta { font-size: 10.5px; color: var(--wai-accent); font-weight: var(--wavo-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.04em; }
.wai-card__desc { font-size: var(--wavo-fs-micro, 12px); color: var(--wavo-ink-muted, #5b6478); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wai-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 3px; font-size: var(--wavo-fs-micro, 12px); font-weight: var(--wavo-weight-semibold, 600); color: var(--wai-accent); }
.wai-card__cta svg { width: 12px; height: 12px; transition: transform var(--wavo-dur-fast, 160ms) ease; }
.wai-card:hover .wai-card__cta svg { transform: translateX(2px); }

/* ---- Footer ---- */
.wai-panel__footer { flex: 0 0 auto; padding: 10px 12px 11px; border-top: 1px solid var(--wavo-hairline, rgba(23, 41, 76, 0.1)); background: var(--wavo-mat-thin, rgba(255, 255, 255, 0.55)); }
.wai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wai-chip {
    border: 1px solid var(--wavo-hairline-strong, rgba(23, 41, 76, 0.2)); background: var(--wavo-bg-elevated, #fff); cursor: pointer;
    border-radius: var(--wavo-r-pill, 980px); padding: 5px 11px; font-size: 11px !important; color: var(--wai-ink);
    font-family: inherit; transition: background var(--wavo-dur-fast, 160ms) ease, border-color var(--wavo-dur-fast, 160ms) ease, transform var(--wavo-dur-fast, 160ms) ease;
}
.wai-chip:hover { background: var(--wavo-vib-accent, rgba(84, 113, 175, 0.06)); border-color: var(--wai-accent); transform: translateY(-1px); }
.wai-chip:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow, 0 0 0 2px rgba(84, 113, 175, 0.85)); }

.wai-form { display: flex; align-items: center; gap: 8px; }
.wai-input {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px;
    border: 1px solid var(--wavo-hairline-strong, rgba(23, 41, 76, 0.2));
    border-radius: 10px !important; background: var(--wavo-bg-elevated, #fff);
    font-family: inherit; font-size: 14px; color: var(--wai-ink);
    transition: border-color var(--wavo-dur-fast, 160ms) ease, box-shadow var(--wavo-dur-fast, 160ms) ease;
}
.wai-input::placeholder { color: var(--wavo-ink-subtle, #6c7488); }
.wai-input:focus { outline: none; border-color: var(--wai-accent); box-shadow: 0 0 0 3px var(--wavo-vib-accent, rgba(84, 113, 175, 0.16)); }
.wai-input:disabled { opacity: 0.6; }

.wai-send {
    flex: 0 0 auto; width: 40px; height: 40px; border: none; cursor: pointer; border-radius: 50%;
    background: var(--wavo-gradient-accent, linear-gradient(135deg, #5471af, #475f96)); color: #fff; display: grid; place-items: center;
    transition: transform var(--wavo-dur-fast, 160ms) var(--wavo-ease-spring, ease), box-shadow var(--wavo-dur-fast, 160ms) ease, opacity var(--wavo-dur-fast, 160ms) ease;
    box-shadow: var(--wavo-depth-2, 0 4px 12px rgba(71, 95, 150, 0.2)), var(--wavo-inner-shine);
}
.wai-send:hover { transform: scale(1.06); }
.wai-send:active { transform: scale(0.94); }
.wai-send:focus-visible { outline: none; box-shadow: var(--wavo-depth-glow, 0 0 0 2px rgba(84, 113, 175, 0.85)); }
.wai-send:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.wai-send svg { width: 18px; height: 18px; }

.wai-disclaimer { margin: 8px 2px 0; font-size: 8.8px; line-height: 1.35; color: var(--wavo-ink-subtle, #6c7488); text-align: center; }

/* ---- Mobile: near-fullscreen sheet ---- */
@media (max-width: 560px) {
    .wai-panel {
        right: 8px; left: 8px; bottom: 8px;
        width: auto; height: min(82vh, calc(100vh - 16px));
        border-radius: var(--wavo-r-window-lg, 32px);
    }
    .wai-launcher { width: 52px; height: 52px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .wai-launcher, .wai-panel, .wai-msg__bubble, .wai-card, .wai-send, .wai-chip { transition: none; animation: none; }
    .wai-launcher::after, .wai-typing span, .wai-msg.is-streaming .wai-msg__bubble::after { animation: none; }
    .wai-panel { transform: none; }
}

/* ---- reCAPTCHA Enterprise badge ----
   Hidden per Google's terms (the disclosure text lives in the site footer). */
.grecaptcha-badge { visibility: hidden; }