/*
 * Bixie's November 2026 design handoff: its palette and its typeface. Loaded right
 * after app.css on every page, so the shared components built on these tokens follow
 * it. How each area uses the palette is up to site.css, hub.css and dash.css.
 */

:root {
    /* Bixie's palette, by the names in the handoff. */
    --bx-heliotrope: #8E7BFF;
    --bx-cornflower: #5B47D6;
    --bx-tickle:     #FF84B0;
    --bx-hot-pink:   #FF6BA0;
    --bx-lilac:      #E0DBFF;
    --bx-lavender:   #F4F1FF;
    --bx-pink-bg:    #FFE3EE;
    --bx-mint:       #B3EBC5;
    --bx-blue:       #ACC4FF;
    --bx-rose:       #FBB8B8;
    --bx-peach:      #FFCDA5;
    --bx-body:       #4A4170;
    --bx-muted:      #5E567F;

    /* The tokens every shared component is built on, pointed at that palette. */
    --font-display: "Barlow", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

    --purple-600: #5B47D6;
    --purple-700: #5B47D6;
    --purple-800: #3F2FA8;
    --purple-200: #E0DBFF;
    --purple-100: #E0DBFF;
    --purple-050: #F4F1FF;
    --ink-deep:   #1F1640;
    --heading:    #1F1640;
    --ink:        #1F1640;
    --ink-soft:   #5E567F;
    --ink-faint:  #5E567F;
    --ink-ghost:  #A9A2C6;

    --surface-page: #F4F1FF;
    --surface-tint: #F4F1FF;
    --surface-mute: #F4F1FF;
    --line:         #E0DBFF;
    --line-soft:    #F4F1FF;
    --line-strong:  #E0DBFF;

    --good:     #1F6B45;
    --good-ink: #1F6B45;
    --good-bg:  #DDF5E5;
    --warn:     #8A4B12;
    --warn-bg:  #FFE9D6;

    --shadow-sm: 0 2px 8px rgba(31, 22, 64, .06);
    --shadow-md: 0 8px 20px rgba(31, 22, 64, .08);
    --shadow-lg: 0 24px 60px rgba(31, 22, 64, .18);

    /* Version A's chat button. See the note in hub.css. */
    --hub-chat-head:  #5B47D6;
    --hub-bubble:     #FF84B0;
    --hub-bubble-ink: #1F1640;
}

.brand svg { color: var(--bx-heliotrope); }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }

/* --- Buttons ------------------------------------------------------------------ */
.btn { min-height: 46px; padding: 11px 22px; border-width: 2px; font-weight: 700; }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn--sm { min-height: 38px; padding: 6px 16px; font-size: .875rem; }
.btn--pink { background: var(--bx-tickle); color: var(--ink); }
.btn--pink:hover { background: var(--bx-hot-pink); color: var(--ink); }


/* --- Meet Bixie, the round button in the corner ---------------------------------------- */
.assistant { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.assistant__bubble {
    display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--hub-bubble); color: var(--hub-bubble-ink); box-shadow: 0 10px 24px rgba(31, 22, 64, .3);
    cursor: pointer; list-style: none; transition: transform .18s ease;
}
.assistant__bubble::-webkit-details-marker { display: none; }
.assistant__bubble:hover { transform: scale(1.05); }
.assistant__bubble:focus-visible { outline: 3px solid var(--bx-heliotrope); outline-offset: 3px; }
.assistant__panel { width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow-y: auto; border-radius: 24px; background: #FFFFFF; box-shadow: 0 20px 50px rgba(31, 22, 64, .28); }
.assistant__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--hub-chat-head); color: #FFFFFF; }
.assistant__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bx-tickle); color: var(--ink); }
.assistant__who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.assistant__who strong { font-size: 1.0625rem; font-weight: 800; }
.assistant__who span { font-size: .81rem; color: var(--bx-lilac); }
.assistant__close { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #FFFFFF; cursor: pointer; }
html:not(.js) .assistant__close { display: none; }
.assistant__body { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.assistant__hello { margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--bx-lavender); font-size: .94rem; line-height: 1.45; }
.assistant__action { padding: 12px 16px; border-radius: 14px; color: var(--ink); font-size: .94rem; font-weight: 800; text-decoration: none; }
.assistant__action:hover { color: var(--ink); filter: brightness(.96); }
.assistant__action--violet { background: var(--bx-heliotrope); }
.assistant__action--pink { background: var(--bx-tickle); }
.assistant__action--mint { background: var(--bx-mint); }
.assistant__ask { display: flex; gap: 8px; margin: 4px 0 0; }
.assistant__ask input { flex: 1; min-width: 0; padding: 11px 12px; border: 2px solid var(--bx-lilac); border-radius: 12px; color: var(--ink); font: inherit; font-size: .875rem; }
.assistant__ask button { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; border: 0; border-radius: 12px; background: var(--ink); color: #FFFFFF; cursor: pointer; }
.assistant__note { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--bx-muted); }
@media (max-width: 34rem) { .assistant { right: 16px; bottom: 16px; } }