/* Zeb, the Self-Learner's Agent's avatar guide (templates/components/learning_guide.html).
   Inline SVG, states toggled by a class on .learning-guide, driven from
   agent_chat.js on send / response / correct-quiz. Uses the site's own
   edu-theme design tokens throughout, no bespoke palette -- same
   convention agents.css and history_tutor.css already follow. All motion
   is wrapped in prefers-reduced-motion: no-preference, per the UX
   checklist's "continuous animations" item. */

.learning-guide {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-svg {
    overflow: visible;
}

.guide-head {
    fill: var(--secondary-dark);
    stroke: var(--accent-blue);
    stroke-width: 3;
}

.guide-ear {
    fill: var(--secondary-dark);
    stroke: var(--accent-blue);
    stroke-width: 3;
}

.guide-ear-inner {
    fill: var(--accent-deep);
    opacity: 0.55;
}

.guide-stripe {
    fill: none;
    stroke: var(--accent-blue);
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.85;
}

.guide-eye {
    fill: #fff;
    stroke: var(--text-primary);
    stroke-width: 1.5;
}

.guide-pupil {
    fill: var(--text-primary);
}

.guide-eyes-closed {
    fill: none;
    stroke: var(--text-primary);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
}

.guide-mouth {
    fill: none;
    stroke: var(--accent-deep);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0;
}

.guide-mouth-explaining,
.guide-mouth-celebrating {
    fill: var(--accent-deep);
    opacity: 0;
}

.guide-thinking-marks {
    fill: var(--accent-purple);
    opacity: 0;
}

.guide-celebrate-marks {
    fill: none;
    stroke: var(--accent-purple);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0;
}

/* ---------- Expression states ---------- */

.guide--idle .guide-mouth-idle { opacity: 1; }

.guide--thinking .guide-mouth-thinking { opacity: 1; }
.guide--thinking .guide-thinking-marks { opacity: 1; }

.guide--explaining .guide-mouth-explaining { opacity: 1; }

.guide--celebrating .guide-mouth-celebrating { opacity: 1; }
.guide--celebrating .guide-celebrate-marks { opacity: 1; }

/* ---------- Motion (idle blink / thinking pulse / celebrate bounce) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .guide--idle .guide-eyes {
        animation: guide-blink 5.5s infinite;
    }

    .guide--idle .guide-eyes-closed {
        animation: guide-blink-closed 5.5s infinite;
    }

    .guide--thinking .guide-thinking-marks {
        animation: guide-think-pulse 1.4s ease-in-out infinite;
        transform-origin: 104px 20px;
    }

    .guide--explaining .guide-svg {
        animation: guide-talk-bob 0.6s ease-in-out infinite;
        transform-origin: 60px 62px;
    }

    .guide--celebrating .guide-svg {
        animation: guide-celebrate-bounce 0.7s ease-in-out infinite;
        transform-origin: 60px 100px;
    }

    .guide--celebrating .guide-celebrate-marks {
        animation: guide-sparkle 0.9s ease-in-out infinite;
    }
}

@keyframes guide-blink {
    0%, 92%, 100% { opacity: 1; }
    95%, 97% { opacity: 0; }
}

@keyframes guide-blink-closed {
    0%, 92%, 100% { opacity: 0; }
    95%, 97% { opacity: 1; }
}

@keyframes guide-think-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

@keyframes guide-talk-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes guide-celebrate-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-6px) rotate(-3deg); }
    60% { transform: translateY(0) rotate(3deg); }
}

@keyframes guide-sparkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---------- Guide + chat header pairing (self_learner.html) ---------- */

.agent-guide-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--hairline);
}

.agent-guide-header-text h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.agent-guide-header-text p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .learning-guide {
        width: 52px;
        height: 52px;
    }
}