/* ============================================================================================
   NILI identity + two role personality profiles (step 28).
   Loaded AFTER nili.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 `.nili--playful`
   (student/parent) or `.nili--pro` (staff/default) class on `.nili-launcher-root` 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).
   The trademarked ETute logo is never used or recoloured — NILI's peacock is a separate sub-brand mark.
   ============================================================================================ */

:root {
    /* NILI sub-brand palette — an iridescent peacock reading of the ETute sky/navy family. */
    --nili-sky: #00A2FF;   /* peacock body / primary */
    --nili-deep: #0B2545;  /* navy crest / header */
    --nili-teal: #12B5B0;  /* peacock teal — the plume's iridescent shift */
    --nili-plume: #6C5CE7; /* violet plume highlight — used only in the feather-eye + shimmer */
    --nili-ink: #16232f;
    --nili-glint: #eaf6ff;

    /* Tokens the two profiles re-point. Defaults = the calm "pro" personality. */
    --nili-radius: 12px;
    --nili-bubble-radius: 12px;
    --nili-title-weight: 600;
    --nili-title-spacing: 1.5px;
    --nili-bubble-pad: 8px 12px;
    --nili-bubble-fs: 0.9rem;
    --nili-launcher-bg: var(--nili-deep);
    --nili-panel-anim: nili-panel-in-right 0.18s ease-out both;
    --nili-card-anim: nili-fade 0.15s ease-out both;
}

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

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

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

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

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

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

/* ---- Launcher --------------------------------------------------------------------------------- */

.nili-launcher-btn {
    background: var(--nili-launcher-bg);
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nili--playful .nili-launcher-btn {
    --nili-launcher-bg: linear-gradient(135deg, var(--nili-sky) 0%, var(--nili-teal) 65%, var(--nili-plume) 130%);
    box-shadow: 0 6px 18px rgba(0, 162, 255, 0.4);
}

.nili--pro .nili-launcher-btn {
    --nili-launcher-bg: var(--nili-deep);
}

.nili-launcher-btn:hover { transform: translateY(-1px); }
.nili-launcher-btn.nili-open { background: var(--nili-deep); }

/* Playful launcher gently breathes at rest; pro stays perfectly still (a calm monogram tile). */
.nili--playful .nili-launcher-btn:not(.nili-open) .nili-emblem {
    animation: nili-breathe 3.4s ease-in-out infinite;
    transform-origin: center;
}

/* ---- Header wordmark + panel density ---------------------------------------------------------- */

.nili-title span {
    font-weight: var(--nili-title-weight);
    letter-spacing: var(--nili-title-spacing);
}

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

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

.nili-panel { border-radius: var(--nili-radius); }
.nili-msg-body { padding: var(--nili-bubble-pad); font-size: var(--nili-bubble-fs); }
.nili-msg-user .nili-msg-body { border-radius: var(--nili-bubble-radius); border-bottom-right-radius: 3px; }
.nili-msg-nili .nili-msg-body { border-radius: var(--nili-bubble-radius); border-bottom-left-radius: 3px; }

/* ---- Welcome ---------------------------------------------------------------------------------- */

.nili-welcome-hi {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--nili-deep);
    margin: 10px 0 4px;
    letter-spacing: 0.3px;
}

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

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

.nili-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). */
.nili-bloom .nili-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: nili-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. */
.nili-thinking .nili-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: nili-shimmer 1.3s ease-in-out infinite;
}

/* ---- Card + panel entrance (per profile) ------------------------------------------------------ */

.nili-msg-nili .nili-msg-body { animation: var(--nili-card-anim); }
.nili-panel-wrap { animation: var(--nili-panel-anim); }

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

@keyframes nili-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

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

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

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

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

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

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

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

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