/* ============================================
   Copilote documentaire — exemples, chat, sources citées
   (tokens uniquement, aucune couleur en dur)
   ============================================ */

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.assistant-card { display: flex; flex-direction: column; }
.assistant-header {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.assistant-header .card-title { margin-bottom: 0; }
.assistant-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.disclaimer-banner {
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

/* ── Panneau d'exemples (repliable, séparé du chat) ───────────────────────── */
.suggestions-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-body);
    margin-bottom: 1rem;
    overflow: hidden;
}
.suggestions-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.suggestions-summary::-webkit-details-marker { display: none; }
.suggestions-summary:hover { background: rgba(255, 255, 255, .03); }
.suggestions-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.suggestions-summary-label svg { color: var(--primary); flex: 0 0 auto; }
.suggestions-chevron {
    color: var(--text-secondary);
    flex: 0 0 auto;
    transition: transform 0.2s;
}
.suggestions-panel[open] .suggestions-chevron { transform: rotate(180deg); }

.suggestions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0.9rem 0.9rem;
}
.suggestion-group-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.55rem;
}
.suggestion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--primary);
}
.suggestion-group--a .suggestion-dot { background: var(--accent); }
.suggestion-group--b .suggestion-dot { background: var(--primary); }
.suggestion-group--c .suggestion-dot { background: var(--type-float); }

.suggestion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.55rem;
}
.suggestion-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.35;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.suggestion-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.suggestion-card:active { transform: translateY(0); }
.suggestion-card-q { flex: 1; }
.suggestion-card-go {
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
    flex: 0 0 auto;
    transition: transform 0.15s;
}
.suggestion-card:hover .suggestion-card-go { transform: translateX(3px); }

/* ── Chat ─────────────────────────────────────────────────────────────────── */
.chat-log {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 260px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
}
.chat-empty {
    margin: auto;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.5rem;
}
.chat-empty svg { color: var(--primary); opacity: 0.8; }
/* Bulle de l'état vide : trois points qui pulsent doucement à l'intérieur, comme
   un indicateur de frappe au repos. Discret, signale que l'assistant attend. */
.chat-empty-dot {
    animation: chat-empty-pulse 1.6s ease-in-out infinite;
}
.chat-empty-dot:nth-child(3) { animation-delay: 0.25s; }
.chat-empty-dot:nth-child(4) { animation-delay: 0.5s; }
@keyframes chat-empty-pulse {
    0%, 70%, 100% { opacity: 0.25; }
    35% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-empty-dot { animation: none; opacity: 0.7; }
}
.chat-empty p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
/* Message d'accueil personnalisé (utilisateur connecté). Sélecteur plus spécifique
   que « .chat-empty p » ci-dessus pour en surcharger la taille et la couleur.
   Entrée en fondu doux au chargement, prénom accentué dans le bleu de la charte. */
.chat-empty p.chat-empty-greeting {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    animation: chat-greeting-in 0.8s ease-out both;
}
.chat-empty-greeting-name {
    color: var(--primary);
    font-weight: 700;
}
@keyframes chat-greeting-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-empty p.chat-empty-greeting { animation: none; }
}

.chat-empty-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.chat-empty-option {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.chat-empty-or {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: lowercase;
}

/* ── Messages ─────────────────────────────────────────────────────────────── */
/* Une ligne = avatar + bulle. L'avatar vit hors de la bulle colorée. */
.msg-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 92%;
}
.msg-row--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.msg-row--assistant {
    align-self: flex-start;
}

/* Pastille ronde portant l'icône SVG (couleur du trait = fond de page). */
.msg-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-body);
}
.msg-avatar svg { width: 18px; height: 18px; }
.msg-avatar--user { background: var(--primary); }
.msg-avatar--assistant { background: var(--accent); }

.msg {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-lg);
    line-height: 1.55;
    font-size: 0.9rem;
}
.msg-user {
    background: var(--primary);
    color: var(--bg-body);
    font-weight: 500;
}
.msg-assistant {
    /* occupe l'espace restant de la ligne, à côté de l'avatar */
    flex: 1;
    /* un cran au-dessus du fond de la card pour détacher la réponse */
    background: color-mix(in srgb, var(--bg-secondary) 40%, var(--bg-primary));
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.msg-answer { white-space: pre-wrap; }
.msg-answer.is-abstention { color: var(--warning); }
/* Message conversationnel (salutation, remerciement) : ton neutre et accueillant,
   distinct du jaune d'avertissement de l'abstention. */
.msg-answer.is-conversational { color: var(--text-primary); }

/* curseur clignotant pendant le « streaming » */
.msg-answer.is-streaming::after {
    content: "▋";
    margin-left: 1px;
    color: var(--primary);
    animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink { to { opacity: 0; } }

/* Indicateur « en train d'écrire » (trois points) façon messagerie */
.msg-thinking { flex: 0 0 auto; }
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0;
}
.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .typing-dot { animation-duration: 0s; animation: typing-fade 1.2s ease-in-out infinite; }
    @keyframes typing-fade { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}

.msg-warnings {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.msg-warnings .alert {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.block-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0.9rem 0 0.4rem;
}

/* ── Bloc « après réponse » (apparition en fondu) ─────────────────────────── */
.answer-extras { animation: extras-in 0.35s ease both; }
@keyframes extras-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Indicateur de confiance ──────────────────────────────────────────────── */
.answer-confidence {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* Icône info de consommation (réponse LLM réelle) : petite pastille « i »
   discrète, animée au survol/focus, dévoilant tokens et coût via le tooltip. */
.gen-info {
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: var(--text-secondary);
    border-radius: 999px;
    outline: none;
}
.gen-info-icon {
    width: 15px;
    height: 15px;
    display: block;
    transition: transform 0.18s ease, color 0.18s ease;
}
.gen-info:hover .gen-info-icon,
.gen-info:focus-visible .gen-info-icon {
    color: var(--primary);
    transform: scale(1.25);
    animation: gen-info-pulse 1.4s ease-in-out infinite;
}
.gen-info:focus-visible {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .35);
}
@keyframes gen-info-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
/* Le tooltip de consommation tient sur plusieurs lignes (deux infos empilées). */
.gen-info .tooltip-content {
    white-space: normal;
    min-width: 210px;
    max-width: 260px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.gen-info .tooltip-content span {
    color: var(--text-primary);
}
/* Révèle le tooltip aussi au focus clavier (le global ne couvre que :hover). */
.gen-info:focus-within .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* ── Pastilles « mode » (génération, recherche) ───────────────────────────────
   La pastille affiche le cas courant ; au survol/focus, l'infobulle énumère
   tous les cas possibles de l'étape, le courant « allumé », les autres éteints. */
.mode-badge {
    cursor: help;
    outline: none;
}
.mode-badge:focus-visible {
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .35);
}
.mode-badge .tooltip-content.mode-cases {
    white-space: normal;
    min-width: 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mode-cases-title {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.64rem;
}
.mode-case {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    opacity: 0.45;            /* cas inactif : éteint */
    transition: opacity 0.15s ease;
}
.mode-case.is-active { opacity: 1; }   /* cas courant : allumé */
.mode-case-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 0.28rem;
    border-radius: 999px;
    border: 1px solid var(--text-muted);
    background: transparent;
}
.mode-case.is-active .mode-case-dot {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
}
.mode-case-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.mode-case-label {
    color: var(--text-primary);
    font-weight: 500;
}
.mode-case.is-active .mode-case-label { color: var(--primary); }
.mode-case-note {
    color: var(--text-muted);
    font-size: 0.7rem;
}
.mode-badge:focus-within .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* ── Sources & passages (repliés derrière « Voir les sources ») ───────────── */
.answer-sources {
    margin-top: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-body);
    overflow: hidden;
}
.answer-sources-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
}
.answer-sources-summary::-webkit-details-marker { display: none; }
.answer-sources-summary:hover { background: rgba(96, 165, 250, .06); }
.answer-sources-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.answer-sources-label svg { flex: 0 0 auto; }
.answer-sources-chevron {
    display: inline-flex;
    color: var(--primary);
    transition: transform 0.2s;
}
.answer-sources[open] .answer-sources-chevron { transform: rotate(180deg); }
.answer-sources .lbl-open { display: none; }
.answer-sources[open] .lbl-closed { display: none; }
.answer-sources[open] .lbl-open { display: inline; }
.answer-sources-body { padding: 0 0.75rem 0.65rem; }
.answer-sources-body .block-label:first-child { margin-top: 0.5rem; }
.answer-sources-body .msg-warnings:first-child { margin-top: 0.6rem; }
.answer-sources-body .msg-warnings { margin-bottom: 0.2rem; }

/* ── Sources ──────────────────────────────────────────────────────────────── */
.sources {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.source-card {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
}
.source-card.is-obsolete { border-color: var(--warning); }
.source-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.source-meta {
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}
.source-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}
.source-link {
    display: inline-block;
    margin-top: 0.4rem;
    color: var(--primary);
    font-size: 0.8rem;
    text-decoration: none;
}
.source-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* ── Extraits récupérés ───────────────────────────────────────────────────── */
.extrait {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.extrait:last-child { border-bottom: none; }
.extrait-cite {
    color: var(--text-muted);
    font-size: 0.74rem;
    margin-top: 0.2rem;
}

.disclaimer {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-style: italic;
    margin-top: 0.8rem;
}
.msg-actions { margin-top: 0.6rem; }

/* ── Saisie ───────────────────────────────────────────────────────────────── */
.ask-row {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}
.ask-input {
    position: relative;
    flex: 1;
    display: flex;
}
.ask-row textarea {
    flex: 1;
    resize: vertical;
    min-height: 48px;
}
/* Caret clignotant superposé : signale que le champ attend une saisie quand il
   est vide et non focalisé. Au focus, le caret natif prend le relais (celui-ci
   se masque). Aligné sur le padding/bordure du .form-control pour coïncider
   avec le début du placeholder. */
.ask-caret {
    position: absolute;
    top: calc(0.5rem + 1px);
    left: calc(0.75rem + 1px);
    width: 2px;
    height: 1.15rem;
    background: var(--primary);
    pointer-events: none;
    animation: caret-blink 1s steps(2, start) infinite;
}
.ask-input textarea:focus ~ .ask-caret,
.ask-input textarea:not(:placeholder-shown) ~ .ask-caret {
    display: none;
}
/* Décale le placeholder pour laisser le caret se poser juste devant lui ;
   l'indentation disparaît au focus et dès qu'on saisit du texte. */
.ask-input textarea:placeholder-shown:not(:focus) {
    text-indent: 9px;
}
/* Bouton d'envoi en icône seule (façon messagerie) : carré bleu aligné sur la
   hauteur du champ. */
.btn-send {
    align-self: stretch;
    flex: 0 0 auto;
    width: 48px;
    padding: 0;
    justify-content: center;
    background: var(--primary);
    color: #fff;
}
.btn-send:hover:not(:disabled) {
    background: var(--primary-hover);
}

/* ── Panneau « crédits épuisés » : oriente vers l'administrateur ───────────── */
/* Fond/bordure hérités de .alert-warning ; on surcharge la couleur de texte
   (sinon tout passe en jaune) pour garder le corps lisible. */
.credits-exhausted {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--text-primary);
}
.credits-exhausted[hidden] { display: none; }
.credits-exhausted-title {
    margin: 0;
    font-weight: 600;
    color: var(--warning);
}
.credits-exhausted-body { margin: 0; color: var(--text-primary); }
.credits-exhausted-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Pastille de l'adresse : fond foncé + bordure marquée pour ressortir du
   panneau, texte blanc en gras (contraste). */
.credits-exhausted-email {
    padding: 0.3rem 0.6rem;
    background: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-weight: 600;
    user-select: all;
}
/* Bouton « copier » : icône blanche + bordure visible (au repos, .btn-icon est
   trop discret sur ce panneau). Le hover bleu de .btn-icon reste actif. */
.credits-exhausted-copy {
    color: var(--text-primary);
    border-color: var(--bg-tertiary);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .msg { padding: 0.7rem 0.85rem; }
    /* avatars réduits + gap resserré pour préserver la largeur de texte */
    .msg-row { gap: 0.4rem; }
    .msg-row--user { max-width: 94%; }
    .msg-row--assistant { max-width: 100%; }
    .msg-avatar { width: 26px; height: 26px; }
    .msg-avatar svg { width: 15px; height: 15px; }
    .ask-row { gap: 0.5rem; }
}