/* Agents directory + Self-Learning Agent / Teacher Agent pages. Uses the
   site's edu-theme design tokens (static/css/edu-theme.css), not a bespoke
   palette — mirrors projects/history_tutor/history_tutor.css's own
   convention rather than site_concierge.css's older hardcoded-dark colors,
   which predate the "chalk" rebrand (see home_concierge.css's header
   comment for the same reasoning). */

.agents-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.agents-header {
    position: relative;
    text-align: center;
    margin-bottom: 32px;
}

.agents-back {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.agents-back:hover {
    color: var(--accent-blue);
}

.agents-header h1 {
    font-size: 2.2rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.agents-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Directory page: agent cards ---------- */

.agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.agent-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.agent-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow);
    border-color: var(--accent-blue);
}

.agent-card--soon {
    opacity: 0.6;
}

.agent-card-subject {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-green);
    font-weight: 600;
}

.agent-card h2 {
    font-size: 1.3rem;
    margin: 0;
    color: var(--text-primary);
}

.agent-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    flex: 1;
}

.agent-card-cta {
    font-weight: 600;
    color: var(--accent-deep);
    font-size: 0.9rem;
}

/* ---------- Self-Learner's Agent page: two-column guided layout ---------- */
/* Same grid shape as History Tutor's .ht-layout/.ht-chat-col/.ht-stage-col
   (static/css/projects/history_tutor/history_tutor.css) -- chat on the
   left, a widget stage on the right that accumulates path/concept/
   simulation/quiz cards as the guide calls tools. Teacher Agent's page
   keeps the older single-column .agent-chat (still used standalone below). */

.agent-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
}

@media (max-width: 860px) {
    .agent-layout {
        grid-template-columns: 1fr;
    }
}

.agent-chat-col .agent-chat {
    margin-bottom: 0;
    height: 70vh;
    min-height: 460px;
    max-height: 640px;
}

.agent-stage-col {
    min-height: 420px;
}

.agent-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 2px;
}

.agent-progress-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--tertiary-dark);
    border-radius: 10px;
    padding: 8px 14px;
    margin: 0 0 12px;
}

.agent-stage-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--hairline);
    border-radius: 14px;
}

.agent-widget {
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 16px;
}

@media (prefers-reduced-motion: no-preference) {
    .agent-widget {
        animation: agent-widget-in 0.25s ease;
    }
}

@keyframes agent-widget-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.agent-widget h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Path widget */

.agent-path-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: agent-path;
}

.agent-path-step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 8px 34px;
    position: relative;
    border-radius: 8px;
    background: var(--tertiary-dark);
    counter-increment: agent-path;
}

.agent-path-step::before {
    content: counter(agent-path);
    position: absolute;
    left: 10px;
    top: 9px;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-deep);
}

.agent-path-step-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.92rem;
}

.agent-path-step-goal {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Concept widget */

.agent-concept-summary {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

/* Simulation widget */

.agent-sim-focus {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin: 0 0 10px;
}

.agent-sim-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Predict step -- appears before the canvas/controls, blocks the primary
   action until a choice is picked (see physics_widgets.js's buildPredict). */

.agent-sim-predict-q {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0 0 8px;
    font-weight: 600;
}

.agent-sim-predict-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-sim-predict-btn {
    text-align: left;
    background: var(--primary-dark);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
}

.agent-sim-predict-btn:hover:not(:disabled) {
    border-color: var(--accent-blue);
}

.agent-sim-predict-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

.agent-sim-predict-btn.agent-sim-predict-picked {
    border-color: var(--accent-blue);
    background: rgba(150, 48, 95, 0.1);
    opacity: 1;
    font-weight: 600;
}

.agent-sim-canvas-wrap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--tertiary-dark);
    display: flex;
    justify-content: center;
}

.agent-sim-canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.agent-sim-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-sim-play-btn,
.agent-sim-secondary-btn {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: none;
}

.agent-sim-play-btn {
    background: var(--accent-blue);
    color: #fff;
}

.agent-sim-play-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agent-sim-secondary-btn {
    background: var(--tertiary-dark);
    color: var(--text-primary);
    border: 1px solid var(--hairline);
}

.agent-sim-secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agent-sim-status {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 6px 0 0;
    text-align: center;
}

.agent-sim-readout {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--tertiary-dark);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

.agent-sim-lab-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--accent-deep);
    text-decoration: none;
    font-weight: 600;
}

.agent-sim-lab-link:hover {
    text-decoration: underline;
}

/* Quiz widget */

.agent-quiz-question {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.agent-quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-quiz-choice {
    text-align: left;
    background: var(--primary-dark);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
}

.agent-quiz-choice:hover:not(:disabled) {
    border-color: var(--accent-blue);
}

.agent-quiz-choice:disabled {
    cursor: default;
}

.agent-quiz-choice.agent-correct {
    border-color: var(--accent-green);
    background: rgba(47, 122, 107, 0.12);
}

.agent-quiz-choice.agent-incorrect {
    border-color: #b23a3a;
    background: rgba(178, 58, 58, 0.1);
}

.agent-quiz-feedback {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--hairline);
    padding-top: 10px;
}

@media (max-width: 600px) {
    .agent-chat-col .agent-chat {
        height: 65vh;
    }
}

/* ---------- Self-Learner's Agent / Teacher Agent pages: chat ---------- */

.agent-chat {
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    height: 60vh;
    min-height: 380px;
    max-height: 520px;
    overflow: hidden;
    margin-bottom: 40px;
}

.agent-chat .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-chat .message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.agent-chat .message-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--tertiary-dark);
    color: var(--accent-blue);
}

.agent-chat .message.user .message-avatar {
    background: var(--accent-blue);
    color: #fff;
}

.agent-chat .message-content {
    background: var(--tertiary-dark);
    padding: 10px 14px;
    border-radius: 10px;
    line-height: 1.5;
    max-width: 80%;
    color: var(--text-primary);
    /* A drafted lesson plan (Teacher Agent's generate_lesson_plan) lands in
       this same bubble as plain text with real line breaks (Hook /
       Instruction / Practice sections) -- without this, CSS's default
       `normal` collapses them into one run-on paragraph. Still wraps long
       lines normally, unlike `pre`. Same reasoning as home_concierge.css's
       identical rule for the homepage concierge widget. */
    white-space: pre-wrap;
}

.agent-chat .message.user {
    flex-direction: row-reverse;
}

.agent-chat .message.user .message-content {
    background: var(--accent-blue);
    color: #fff;
}

/* Starter-topic chips under Zeb's greeting (self_learner.html) -- a
   click-to-ask affordance for a visitor who doesn't know what to try yet.
   The [hidden] override is needed because of cascade ORIGIN, not
   specificity: the [hidden] rule it has to beat is the user agent
   stylesheet's, and any author-level declaration (display:flex below)
   beats a UA declaration regardless of specificity -- so plain
   .agent-suggestions{display:flex} would make .hidden = true a no-op
   without this. */
.agent-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-suggestions[hidden] {
    display: none;
}

.agent-suggestion-chip {
    background: var(--tertiary-dark);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
}

.agent-suggestion-chip:hover,
.agent-suggestion-chip:focus-visible {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.agent-chat .typing-indicator {
    display: flex;
    gap: 4px;
    padding: 2px 0;
}

.agent-chat .typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: agent-chat-blink 1.2s infinite ease-in-out;
}

.agent-chat .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.agent-chat .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes agent-chat-blink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

.agent-chat .chat-input-area {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--hairline);
}

.agent-chat .chat-input {
    flex: 1;
    resize: none;
    background: var(--primary-dark);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 10px 12px;
    font-size: 0.95rem;
    font-family: inherit;
}

.agent-chat .chat-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.agent-chat .send-btn {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.agent-chat .send-btn:hover {
    opacity: 0.9;
}

.agent-chat .send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* "Start over" control -- sits in .agent-guide-header on the Physics
   Teaching Agent page (guide.css) or in this standalone toolbar on Teacher
   Agent, which has no guide header. Text-link styling, not a full button:
   a rare, low-stakes action that shouldn't compete visually with Send. */
.agent-chat-toolbar {
    display: flex;
    padding: 10px 14px 0;
}

.agent-reset-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 2px;
}

.agent-reset-btn:hover:not(:disabled) {
    color: var(--accent-blue);
}

.agent-reset-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agent-chat .chat-error {
    background: rgba(163, 31, 52, 0.1);
    border: 1px solid rgba(163, 31, 52, 0.35);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* Newtonian Physics Tutor only: a compact citation line under the AI's
   message bubble (agent_chat.js's renderSources), replacing full resource
   cards -- external resources are supplementary references here, not
   featured content, so they read like a footnote, not a recommendation. */

.agent-sources {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-left: 40px; /* aligns under the message bubble, past the avatar */
}

.agent-sources-label {
    font-weight: 600;
    margin-right: 4px;
}

.agent-sources a {
    color: var(--text-muted);
    text-decoration: underline;
}

.agent-sources a:hover {
    color: var(--accent-deep);
}

.agent-sources-sep {
    margin: 0 6px;
}

/* ---------- Self-Learning Agent / Teacher Agent pages: static sections ---------- */

.agent-section {
    margin-bottom: 40px;
}

.agent-section h2 {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.agent-template-card {
    display: block;
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.agent-template-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow);
    border-color: var(--accent-blue);
}

.agent-template-eyebrow {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-purple);
    font-weight: 600;
}

.agent-template-card h3 {
    font-size: 1.2rem;
    margin: 6px 0;
    color: var(--text-primary);
}

.agent-template-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.agent-template-cta {
    font-weight: 600;
    color: var(--accent-deep);
    font-size: 0.9rem;
}

.agent-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.agent-resource-card {
    display: block;
    background: var(--secondary-dark);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}

.agent-resource-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.agent-resource-type {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-deep);
}

.agent-resource-card h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 4px 0;
}

.agent-resource-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Newtonian Physics Tutor's static "Additional Sources" section only --
   Teacher Agent keeps the full .agent-resource-grid cards above, since
   resources are its main content, not a footnote. */

.agent-additional-sources {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-additional-sources a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.agent-additional-sources a:hover {
    color: var(--accent-deep);
    text-decoration: underline;
}

.agent-additional-sources a span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .agent-chat {
        height: 65vh;
    }

    /* .agents-back is absolutely positioned over the centered h1 (fine at
       desktop widths where the title is short and there's room on either
       side); at narrow widths it overlaps the title text, so drop back to
       static flow and stack it above instead. */
    .agents-header {
        text-align: left;
    }

    .agents-back {
        position: static;
        display: inline-block;
        margin-bottom: 12px;
    }

    .agents-header h1,
    .agents-header p {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- Chat card always fits the screen (input never below the fold) ----------
   The card used to be 70vh tall starting ~270px down the page, so on a
   typical laptop (720-800px) or phone the message box sat under the fold
   and visitors had to scroll just to type. Size it from the space that is
   actually left, and let the messages list scroll inside it. */
.agent-chat-col .agent-chat {
    height: calc(100vh - 300px);
    height: calc(100dvh - 300px);
    min-height: 400px;
    max-height: 720px;
}

@media (max-width: 860px) {
    .agent-chat-col .agent-chat {
        height: calc(100vh - 340px);
        height: calc(100dvh - 340px);
        min-height: 380px;
        max-height: none;
    }

    .agents-header { margin-bottom: 16px; }
    .agents-header h1 { font-size: 1.7rem; }
}

@media (max-width: 600px) {
    .agent-chat-col .agent-chat {
        height: calc(100vh - 290px);
        height: calc(100dvh - 290px);
    }

    /* The one-line pitch is repeated in the page's meta description and the
       "about" text below the chat; on a phone it only pushes the chat down. */
    body:has(.agent-chat) .agents-header p { display: none; }

    /* The floating share button would sit on top of Send here. */
    body:has(.agent-chat) .share-fab { display: none; }
}