/* ==========================================================================
   Coach IA — styles de page
   --------------------------------------------------------------------------
   Externalisé (et non inline) pour que la page puisse servir une CSP stricte
   `style-src 'self'`, comme analysis.css. Aucun attribut `style=` n'est donc
   utilisé dans coach.html : tout passe par une classe.

   Accessibilité — l'orange de marque #f27f0d est trop clair :
     blanc sur orange  = 2,69:1  (AA exige 4,5:1)
     orange sur crème  = 2,37:1
   Deux règles, pour rester fidèle à l'identité :
     1. surfaces pleines → orange de marque + texte #1c1009 (6,93:1)
     2. texte/icône orange sur fond clair → même teinte assombrie #a75809
        (4,58:1 sur crème, 5,11:1 sur surface)
   NB : `.btn-primary`, `.nav-link-topo` et `.bottom-nav-item.active` partagent
   ce défaut à l'échelle de l'app — hors périmètre de cette page.
   ========================================================================== */

.coach-page {
    --color-accent-aa: #a75809;
}

/* `max-w-3xl` et `bg-[var(--color-primary-light)]` n'existent pas dans le
   build Tailwind livré (purge) : on les remplace par des classes locales. */
.coach-container {
    max-width: 48rem;
    margin-inline: auto;
    width: 100%;
}

.badge-ia {
    background: var(--color-primary-light);
}

/* -------------------------------------------------------------------------
   Fil conversationnel
   ------------------------------------------------------------------------- */

.coach-thread {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bubble-user {
    align-self: flex-end;
    max-width: 85%;
    background: var(--color-primary);
    color: #1c1009;
    padding: 0.625rem 1rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: var(--shadow-card);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.coach-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.dark .coach-meta {
    color: var(--color-text-muted-dark);
}

.coach-meta .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-accent-aa);
}

.bubble-coach {
    background: var(--color-surface-light);
    border: 1px solid var(--color-border-light);
    border-radius: 1rem 1rem 1rem 0.25rem;
    padding: 1rem 1.125rem;
    box-shadow: var(--shadow-card);
}

.dark .bubble-coach {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

.bubble-coach p {
    font-size: 0.9375rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Sources citées
   ------------------------------------------------------------------------- */

.sources-block {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border-light);
}

.dark .sources-block {
    border-color: var(--color-border-dark);
}

.sources-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.dark .sources-title {
    color: var(--color-text-muted-dark);
}

.sources-title .material-symbols-outlined {
    font-size: 16px;
}

.source-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    text-decoration: none;
    color: inherit;
}

.source-card:hover,
.source-card:focus-visible {
    background: var(--color-primary-light);
    border-color: rgba(var(--primary-rgb), .3);
}

.source-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: var(--color-primary-light);
    color: var(--color-accent-aa);
    font-size: 0.6875rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.source-title {
    font-size: 0.875rem;
    font-weight: 600;
    display: block;
}

.source-card:hover .source-title {
    color: var(--color-accent-aa);
}

.source-snippet {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.dark .source-snippet {
    color: var(--color-text-muted-dark);
}

.source-open {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 18px !important;
    color: var(--color-text-muted);
}

.source-card:hover .source-open {
    color: var(--color-accent-aa);
}

/* -------------------------------------------------------------------------
   Chips (questions suggérées et relances)
   ------------------------------------------------------------------------- */

.chip {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    border: 1.5px solid var(--color-border-light);
    background: var(--color-surface-light);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all .15s ease;
    text-align: left;
}

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

.chip[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.dark .chip {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary-dark);
}

.chip-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    color: var(--color-text-muted);
}

.dark .chip-sm {
    color: var(--color-text-muted-dark);
}

/* -------------------------------------------------------------------------
   Barre de saisie
   ------------------------------------------------------------------------- */

.composer-wrap {
    position: sticky;
    bottom: 0;
    z-index: 1001;
    background: rgba(245, 240, 232, .92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border-light);
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
}

.dark .composer-wrap {
    background: rgba(26, 19, 10, .92);
    border-color: var(--color-border-dark);
}

/* Sur mobile la bottom-nav est fixe (~60 px) : le composer se pose au-dessus. */
@media (max-width: 767px) {
    .composer-wrap {
        bottom: calc(60px + env(safe-area-inset-bottom));
        padding-bottom: 0.75rem;
    }
}

.composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    background: var(--color-surface-light);
    border: 1.5px solid var(--color-border-light);
    border-radius: 1rem;
    padding: 0.5rem 0.75rem;
    transition: border-color .15s ease;
}

.composer:focus-within {
    border-color: var(--color-primary);
}

.dark .composer {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

.composer textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.9375rem;
    padding: 0.375rem 0;
    color: inherit;
    font-family: inherit;
    max-height: 8rem;
}

.composer textarea::placeholder {
    color: var(--color-text-muted);
}

.composer-send {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--color-primary);
    color: #1c1009;
    display: grid;
    place-items: center;
    transition: background .15s ease;
}

.composer-send:hover:not([disabled]) {
    background: var(--color-primary-hover);
}

.composer-send[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.composer-note {
    font-size: 0.6875rem;
    text-align: center;
    margin-top: 0.5rem;
    color: var(--color-text-muted);
}

.dark .composer-note {
    color: var(--color-text-muted-dark);
}

/* -------------------------------------------------------------------------
   Panneaux d'état
   ------------------------------------------------------------------------- */

/* Ces blocs reçoivent le focus par programme, pour que le clavier et les
   lecteurs d'écran arrivent sur la réponse plutôt que de rester dans le
   champ de saisie. Ce sont des conteneurs non interactifs, hors ordre de
   tabulation : l'anneau de focus n'y apporte rien et encadrerait toute la
   réponse. Le repère reste `aria-live` + le déplacement du focus lui-même. */
.coach-answer:focus,
.state-panel:focus {
    outline: none;
}

.state-panel {
    border: 1px dashed var(--color-border-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--color-surface-light);
}

.dark .state-panel {
    background: var(--color-surface-dark);
    border-color: var(--color-border-dark);
}

.state-icon {
    font-size: 40px !important;
    color: var(--color-text-muted);
}

.state-title {
    font-weight: 700;
    margin-top: 0.5rem;
}

.state-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.dark .state-desc {
    color: var(--color-text-muted-dark);
}

.state-action {
    margin-top: 1rem;
    display: inline-flex;
}

.banner-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: var(--color-primary-light);
    color: #8a4a04;
    border: 1px solid rgba(var(--primary-rgb), .25);
    margin-bottom: 1rem;
}

.dark .banner-info {
    color: #fdba74;
}

.banner-info .material-symbols-outlined {
    font-size: 20px;
}

/* Squelette de chargement : largeurs fixes, sans attribut `style`. */
.skeleton-w-92 { width: 92%; }
.skeleton-w-100 { width: 100%; }
.skeleton-w-66 { width: 66%; }

.icon-inline {
    font-size: 16px !important;
}

.icon-btn {
    font-size: 18px !important;
}

/* -------------------------------------------------------------------------
   Correctifs de cascade
   --------------------------------------------------------------------------
   design-system.css est chargé après build.css et redéfinit `display` sur
   `.btn-primary` : à spécificité égale, cette règle écrase l'utilitaire
   Tailwind `hidden`. Défaut pré-existant à l'échelle de l'app ; neutralisé
   ici pour que la page se comporte correctement. (`.bottom-nav` est masquée
   sur desktop par mobile-ux.css.)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .coach-page header .btn-primary { display: none; }
}