/* ============================================================================================
   Quant identity + two role personality profiles.
   Loaded AFTER quant.css so it layers the sub-brand mark, motion, and per-profile density on top
   of the base skin. ONE component set renders both personalities: the role-driven `.quant--playful`
   (a future lighter-touch role) or `.quant--pro` (staff / default, set on EqAskSheet's root)
   class on an ancestor switches everything here — colour tokens, the peacock emblem variant,
   motion, radii, and density. No new type families: personality comes from weight / spacing /
   motion, using the app's existing fonts (font: inherit).
   ============================================================================================ */

:root {
    /* Quant sub-brand palette — an iridescent peacock reading, aliased onto Quant's own colours
       (these are the same literal values quant.css already uses for the launcher/bubbles). */
    --quant-sky: #00A2FF;   /* peacock body / primary */
    --quant-deep: #0B2545;  /* navy crest / header */
    --quant-teal: #12B5B0;  /* peacock teal — the plume's iridescent shift */
    --quant-plume: #6C5CE7; /* violet plume highlight — used only in the feather-eye + shimmer */
    --quant-ink: #16232f;
    --quant-glint: #eaf6ff;

    /* Tokens the two profiles re-point. Defaults = the baseline personality before either profile
       adjusts it. */
    --quant-radius: 12px;
    --quant-bubble-radius: 12px;
    --quant-title-weight: 600;
    --quant-title-spacing: 1.5px;
    --quant-bubble-pad: 8px 12px;
    --quant-bubble-fs: 0.9rem;
    --quant-panel-anim: quant-panel-in-right 0.18s ease-out both;
    --quant-card-anim: quant-fade 0.15s ease-out both;
}

/* ---- The peacock emblem ------------------------------------------------------------------------ */

.quant-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    line-height: 0;
}

.quant-emblem svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Default / pro -> compact feather-eye monogram. Playful -> full peacock mascot. */
.quant-emblem__mascot { display: none; }
.quant-emblem__mono { display: block; }

.quant--playful .quant-emblem__mono { display: none; }
.quant--playful .quant-emblem__mascot { display: block; }

/* Size by context so callers don't need to pass a size everywhere. */
.quant-title .quant-emblem { width: 22px; height: 22px; }
.quant-msg-avatar .quant-emblem { width: 24px; height: 24px; }
.quant-emblem.quant-avatar-xl { width: 60px; height: 60px; }

/* ---- Panel density (per profile) --------------------------------------------------------------- */
/* --quant-title-weight/-spacing are re-pointed here too; the header wordmark that consumed them
   (.quant-title) is out of scope for this port and carries no rule in this file. */

.quant--playful {
    --quant-radius: 18px;
    --quant-bubble-radius: 16px;
    --quant-title-weight: 700;
    --quant-title-spacing: 2.5px;
    --quant-bubble-pad: 10px 14px;
    --quant-bubble-fs: 0.95rem;
    --quant-panel-anim: quant-panel-bloom 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    --quant-card-anim: quant-slide-bloom 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.quant--pro {
    --quant-radius: 10px;
    --quant-bubble-radius: 10px;
    --quant-bubble-pad: 6px 10px;
    --quant-bubble-fs: 0.86rem;
}

/* Overrides quant.css's fixed padding/border-radius/font-size on .quant-msg-body with the
   per-profile tokens above — this file must load after quant.css for that to win. */
.quant-msg-body { padding: var(--quant-bubble-pad); font-size: var(--quant-bubble-fs); }
.quant-msg-user .quant-msg-body { border-radius: var(--quant-bubble-radius); border-bottom-right-radius: 3px; }
.quant-msg-agent .quant-msg-body { border-radius: var(--quant-bubble-radius); border-bottom-left-radius: 3px; }

/* ---- Message avatar + the signature feather-bloom --------------------------------------------- */

.quant-msg-agent { align-items: flex-end; gap: 6px; }

.quant-msg-avatar {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-bottom: 2px;
}

/* One-shot bloom: the ocellus opens as the answer lands. Once only (iteration-count 1). */
.quant-bloom .quant-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: quant-bloom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.4) both;
}

/* Iridescent thinking shimmer over the feather-eye while a reply streams. */
.quant-thinking .quant-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: quant-shimmer 1.3s ease-in-out infinite;
}

/* ---- Card entrance (per profile) --------------------------------------------------------------- */
/* --quant-panel-anim is re-pointed above but has no consumer here; the chat panel it entered
   (.quant-panel-wrap) is out of scope for this port. */

.quant-msg-agent .quant-msg-body { animation: var(--quant-card-anim); }

/* ---- Keyframes -------------------------------------------------------------------------------- */

@keyframes quant-bloom {
    0% { transform: scale(0.2); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes quant-shimmer {
    0%, 100% { opacity: 1; filter: none; }
    50% { opacity: 0.75; filter: brightness(1.3) saturate(1.5); }
}

@keyframes quant-slide-bloom {
    0% { transform: translateY(8px) scale(0.96); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes quant-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes quant-panel-in-right {
    0% { transform: translateX(16px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes quant-panel-bloom {
    0% { transform: translateY(14px) scale(0.94); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---- Reduced motion kills ALL Quant motion (both profiles) ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .quant-emblem,
    .quant-emblem *,
    .quant-msg-agent .quant-msg-body,
    .quant-bloom .quant-eye,
    .quant-thinking .quant-eye,
    .quant-wave span {
        animation: none !important;
        transition: none !important;
    }
}