/* ============================================================
 * demo-training.css — Cards & modale parcours pédagogiques (Julia)
 *
 * Design intent (cf. skill ui-ux-pro-max + design tokens Woopets) :
 *   - Hierarchie typo claire : titre (700) / sous-titre muted (500)
 *   - 3 états séquentiels visuels : current (highlight), done (muted), locked (gris)
 *   - Micro-interactions : hover 200ms, active scale, focus rings a11y
 *   - Banner celebration : gradient + pulse subtil sur day-advance
 *   - Touch targets 44px min, prefers-reduced-motion respecté
 *   - Largeur stable indépendante du parent shrink-to-fit
 *
 * 3 types de cards :
 *   .training-launch-card      — Lancement (intro_message + jour 1 + boutons séquentiels)
 *   .training-step-card        — Étape du jour (progress + sequential blocks + boutons)
 *   .training-completion-card  — Fin de parcours (recap + bouton restart)
 *
 * + modale .training-rating-overlay pour la saisie note + feedback
 * ============================================================ */

/* ============================================================
 * Conteneur commun (.training-card)
 * ============================================================ */
.training-card {
    /* Largeur stable, indépendante du parent shrink-to-fit (`.chat-bubble.agent`).
     * Unités absolues (px + vw) → pas de dépendance circulaire au parent → bulle stable
     * (la card ne grandit pas pendant le streaming du texte qui suit en dessous).
     *
     * Cible : occuper tout l'espace utile du chat (chat-messages-scroll = 768px de max-width
     * standard, 860px sur ≥1280px). On laisse 32px de padding interne au scroll + 16px buffer.
     * Mobile : utilise 100vw - 48px = full width minus padding chat. */
    box-sizing: border-box;
    width: min(720px, calc(100vw - 48px));
    background: var(--c-bg-card);
    border-radius: 18px;
    padding: 18px 18px 16px;
    margin: 10px 0;
    /* Layered shadow pour profondeur subtile (vs flat single shadow) */
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--c-border-light);
    position: relative;
    overflow: hidden;
    /* Anim d'entrée subtile */
    animation: training-card-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Top accent strip (4px) — color-coded par card type pour identification visuelle rapide */
.training-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
}
.training-launch-card::before { background: linear-gradient(90deg, var(--c-accent-vivid), var(--c-accent-hover)); }
.training-step-card::before { background: linear-gradient(90deg, var(--c-primary-soft), var(--c-primary)); }
.training-completion-card::before { background: linear-gradient(90deg, #34d399, var(--c-success)); }

/* ============================================================
 * Header (icône + titre + sous-titre)
 * ============================================================ */
.training-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.training-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    /* Inner glow + outer subtle shadow */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(15, 23, 42, 0.08);
}

.training-launch-card .training-card-icon {
    background: linear-gradient(135deg, var(--c-accent-light), var(--c-accent-soft));
    color: var(--c-accent-hover);
}
.training-step-card .training-card-icon {
    background: linear-gradient(135deg, var(--c-primary-light), var(--c-bg-warm));
    color: var(--c-primary);
}
.training-completion-card .training-card-icon {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: var(--c-success);
}

.training-card-title {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--c-text);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.training-card-subtitle {
    font-size: 12.5px;
    color: var(--c-text-muted);
    margin-top: 2px;
    line-height: 1.35;
}

.training-card-body {
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.55;
}

/* Intro message (italique sur fond légèrement teinté pour le distinguer) */
.training-card-intro {
    margin: 12px 0;
    padding: 12px 14px;
    color: var(--c-text-secondary);
    background: var(--c-bg-warm);
    border-left: 3px solid var(--c-primary-soft);
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    line-height: 1.5;
    font-style: italic;
}

/* ============================================================
 * Progress bar
 * ============================================================ */
.training-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

.training-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--c-border-light);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.training-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary-soft), var(--c-primary));
    border-radius: 9999px;
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.training-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Day celebration banner (apparait quand just_advanced_from_day est set)
 * ============================================================ */
.training-day-celebration {
    margin: 0 -18px 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    color: #92400e;
    font-weight: 700;
    font-size: 14.5px;
    text-align: center;
    border-bottom: 1px solid #fed7aa;
    letter-spacing: 0.01em;
    /* Pulse subtil pour attirer l'attention au moment du render */
    animation: training-celebration-pulse 1200ms ease-out;
}

@keyframes training-celebration-pulse {
    0% { transform: scale(0.96); opacity: 0; }
    50% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Adjustment banner — apparait quand adjust_program a re-généré le plan.
 * Visible une seule fois (au moment du tool call), pas au reload. */
.training-adjust-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 4px solid #3b82f6;
    border-radius: 0 12px 12px 0;
    animation: training-celebration-pulse 1000ms ease-out;
}

.training-adjust-icon {
    font-size: 22px;
    line-height: 1.2;
    flex-shrink: 0;
}

.training-adjust-text {
    flex: 1;
    min-width: 0;
}

.training-adjust-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.training-adjust-summary {
    font-size: 13.5px;
    color: var(--c-text);
    line-height: 1.45;
}

.training-day-recap {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: rgba(220, 240, 237, 0.45);
    border-radius: 12px;
    border: 1px solid var(--c-border-light);
}

.training-day-recap-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.training-day-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border), transparent);
    margin: 6px 0 14px;
}

/* ============================================================
 * Block list — 3 états visuels distincts
 * ============================================================ */
.training-blocks-list {
    /* Flex column + gap : spacing uniforme entre items, pas de margin-bottom à gérer */
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

.training-block-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
    border: 1px solid transparent;
}

/* État DONE (✅) — déjà complété, barré, muted */
.training-block-item.training-block--done {
    background: var(--c-bg-warm);
    opacity: 0.7;
}
.training-block-item.training-block--done .training-block-name {
    text-decoration: line-through;
    color: var(--c-text-muted);
}
.training-block-item.training-block--done .training-block-status {
    color: var(--c-success);
}

/* État CURRENT (◯) — prochain bloc à faire, mis en avant */
.training-block-item.training-block--current {
    background: var(--c-bg-card);
    border-color: var(--c-primary-soft);
    box-shadow:
        0 0 0 3px rgba(72, 181, 168, 0.12),
        0 1px 3px rgba(15, 23, 42, 0.04);
}
.training-block-item.training-block--current .training-block-name {
    color: var(--c-text);
    font-weight: 700;
}

/* État LOCKED (🔒) — futur bloc, grisé */
.training-block-item.training-block--locked {
    background: rgba(241, 245, 249, 0.5);
    opacity: 0.55;
}
.training-block-item.training-block--locked .training-block-name,
.training-block-item.training-block--locked .training-block-description {
    color: var(--c-text-muted);
}
.training-block-item.training-block--locked .training-block-status {
    filter: grayscale(0.4);
}

.training-block-status {
    font-size: 16px;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 1px;
    /* Smooth state transition */
    transition: color 200ms ease, transform 200ms ease;
}

.training-block-content {
    flex: 1;
    min-width: 0;
}

.training-block-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-text);
    line-height: 1.35;
    transition: color 200ms ease;
}

.training-block-duration {
    font-size: 11.5px;
    color: var(--c-text-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.training-block-description {
    font-size: 12.5px;
    color: var(--c-text-secondary);
    margin-top: 4px;
    line-height: 1.45;
}

.training-block-locked-hint {
    font-size: 11px;
    color: var(--c-text-muted);
    margin-top: 5px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
 * Block details (<details><summary>) — content_md expand
 * ============================================================ */
.training-block-details {
    margin-top: 8px;
    border-top: 1px dashed var(--c-border-light);
    padding-top: 8px;
}

.training-block-details-summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    padding: 4px 0;
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 150ms ease;
    /* Touch target */
    min-height: 28px;
}

.training-block-details-summary::-webkit-details-marker { display: none; }
.training-block-details-summary::marker { content: ''; }
.training-block-details-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 4px;
    transition: transform 200ms ease;
    color: var(--c-text-muted);
    font-size: 10px;
}
.training-block-details[open] .training-block-details-summary::before {
    transform: rotate(90deg);
}
.training-block-details-summary:hover {
    color: var(--c-primary-hover);
}
.training-block-details-summary:focus-visible {
    outline: 2px solid var(--c-primary-soft);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Content markdown stylisé */
.training-block-md {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border-light);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-text);
    animation: training-md-in 200ms ease-out;
}

@keyframes training-md-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.training-block-md h2,
.training-block-md h3 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-text);
    margin: 12px 0 6px;
    line-height: 1.3;
}
.training-block-md h2:first-child,
.training-block-md h3:first-child {
    margin-top: 0;
}

.training-block-md p {
    margin: 6px 0;
}

.training-block-md ul,
.training-block-md ol {
    margin: 6px 0;
    padding-left: 22px;
}
.training-block-md li {
    margin: 3px 0;
}

.training-block-md strong {
    font-weight: 700;
    color: var(--c-text);
}

.training-block-md code {
    background: var(--c-bg-warm);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ============================================================
 * Boutons CTA
 * ============================================================ */
.training-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.training-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 18px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 9999px;
    border: 0;
    cursor: pointer;
    transition: background-color 180ms ease, transform 100ms ease, box-shadow 180ms ease;
    font-family: inherit;
    /* Touch target 44px min (avec padding 11+11 + line-height ~18 ≈ 40px, on monte avec min-height) */
    min-height: 44px;
    text-align: center;
}

.training-card-button:active:not([disabled]):not(.training-card-button--disabled) {
    transform: scale(0.97);
}

.training-card-button--primary {
    background: var(--c-accent-vivid);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(255, 122, 89, 0.3);
}
.training-card-button--primary:hover {
    background: var(--c-accent-vivid-hover);
    box-shadow: 0 2px 6px rgba(255, 122, 89, 0.4);
}
.training-card-button--primary:focus-visible {
    outline: 3px solid rgba(255, 122, 89, 0.4);
    outline-offset: 2px;
}

.training-card-button--secondary {
    background: var(--c-bg-card);
    color: var(--c-text);
    border: 1.5px solid var(--c-border);
}
.training-card-button--secondary:hover {
    background: var(--c-bg-warm);
    border-color: var(--c-primary-soft);
}
.training-card-button--secondary:focus-visible {
    outline: 3px solid rgba(72, 181, 168, 0.3);
    outline-offset: 2px;
}

.training-card-button[disabled],
.training-card-button--disabled,
.training-card--done .training-card-button {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* ============================================================
 * Modale rating
 * ============================================================ */
.training-rating-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
    animation: training-overlay-in 200ms ease-out;
}

.training-rating-overlay.active {
    display: flex;
}

@keyframes training-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.training-rating-modal-content {
    background: var(--c-bg-card);
    border-radius: 18px;
    padding: 26px 24px 22px;
    max-width: 480px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.1),
        0 16px 40px rgba(15, 23, 42, 0.12);
    animation: training-modal-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes training-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.training-rating-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.training-rating-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.training-rating-subtitle {
    font-size: 13px;
    color: var(--c-text-muted);
    margin: 0 0 18px 0;
    line-height: 1.45;
}
.training-rating-subtitle strong {
    color: var(--c-text);
    font-weight: 600;
}

.training-rating-section {
    margin-bottom: 20px;
}

.training-rating-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 10px;
}

.training-rating-stars {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.training-rating-star-btn {
    flex: 1;
    min-width: 0;
    /* Touch target 44px min */
    min-height: 56px;
    padding: 12px 4px;
    background: var(--c-bg-card);
    border: 2px solid var(--c-border);
    border-radius: 14px;
    font-size: 26px;
    cursor: pointer;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
    color: var(--c-text);
    line-height: 1;
}

.training-rating-star-btn:hover {
    border-color: var(--c-primary-soft);
    background: var(--c-bg-warm);
    transform: translateY(-1px);
}

.training-rating-star-btn:focus-visible {
    outline: 3px solid rgba(72, 181, 168, 0.3);
    outline-offset: 2px;
}

.training-rating-star-btn.active {
    background: var(--c-accent-vivid);
    color: #ffffff;
    border-color: var(--c-accent-vivid);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 122, 89, 0.35);
}

.training-rating-stars-help {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--c-text-muted);
}

.training-rating-textarea {
    width: 100%;
    min-height: 84px;
    padding: 11px 13px;
    border: 1.5px solid var(--c-border);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-bg-card);
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.training-rating-textarea:focus {
    outline: none;
    border-color: var(--c-primary-soft);
    box-shadow: 0 0 0 3px rgba(72, 181, 168, 0.15);
}

.training-rating-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

.training-rating-actions .training-card-button {
    min-width: 112px;
    justify-content: center;
}

/* ============================================================
 * Action indicator (mini-feedback temporaire après envoi action)
 * ============================================================ */
.training-action-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--c-text-muted);
    font-style: italic;
    margin: 4px 0;
    align-self: flex-end;
    background: var(--c-bg-warm);
    border-radius: 9999px;
}

.training-action-indicator-icon {
    color: var(--c-success);
    font-weight: 700;
}

/* ============================================================
 * Responsive (mobile-first → ajustements desktop)
 * ============================================================ */

/* Mobile petits écrans (≤480px) — compacter */
@media (max-width: 480px) {
    .training-card {
        padding: 16px 14px 14px;
        border-radius: 16px;
    }
    .training-card::before { border-radius: 16px 16px 0 0; }
    .training-card-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        border-radius: 12px;
    }
    .training-card-title { font-size: 15px; }
    .training-card-actions {
        flex-direction: column;
    }
    .training-card-actions .training-card-button {
        width: 100%;
    }
    .training-day-celebration {
        margin: 0 -14px 12px;
        padding: 12px 14px;
        font-size: 13.5px;
    }
    .training-block-item {
        padding: 10px;
        gap: 8px;
    }
    .training-rating-modal-content {
        padding: 20px 18px;
        border-radius: 16px;
    }
    .training-rating-star-btn {
        font-size: 22px;
        min-height: 48px;
        padding: 10px 2px;
    }
    .training-rating-actions {
        flex-direction: column-reverse;
    }
    .training-rating-actions .training-card-button {
        width: 100%;
    }
}

/* Desktop large (≥1280px) — chat-messages-scroll passe à 860px max → card 820px */
@media (min-width: 1280px) {
    .training-card {
        width: min(820px, calc(100vw - 48px));
    }
}

/* ============================================================
 * Reduced motion (a11y — respect prefers-reduced-motion)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .training-card,
    .training-day-celebration,
    .training-rating-overlay,
    .training-rating-modal-content,
    .training-block-md,
    .training-progress-fill {
        animation: none !important;
        transition: none !important;
    }
    .training-card-button:active:not([disabled]):not(.training-card-button--disabled) {
        transform: none;
    }
    .training-rating-star-btn:hover { transform: none; }
    .training-rating-star-btn.active { transform: none; }
}