/* Écran « Claude » — deux colonnes : les conversations à gauche, le fil à droite.
   Aucune couleur en dur : le thème HUD (sombre / clair) pose les variables. Les bulles,
   la barre de saisie et les chips de démarrage réutilisent les classes de app.css
   (.cchat, .cmsg, .cbubble, .cchat-bar, .cstart) — rien n'est redéfini ici. */

.cl-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }

/* ── Colonne de gauche ── */
.cl-aside {
  border: 1px solid var(--bord); border-radius: 12px; padding: 12px;
  position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow-y: auto;
}
.cl-liste { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cl-groupe { display: flex; flex-direction: column; gap: 3px; }
.cl-groupe-titre {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); padding: 0 4px 2px;
}
.cl-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.cl-item:hover { border-color: var(--bord); }
.cl-item.on { border-color: var(--corail); }
.cl-item-titre { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-item-meta { font-size: 11px; color: var(--gris); }
.cl-vide { font-size: 12.5px; color: var(--gris); padding: 8px 4px; }
.cl-repli {
  margin-top: 12px; width: 100%; text-align: left; padding: 6px 4px;
  background: transparent; border: 0; border-top: 1px solid var(--bord);
  color: var(--gris); font: inherit; font-size: 12px; cursor: pointer;
}
.cl-archives-liste { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }

/* ── Colonne de droite ── */
.cl-main { min-width: 0; }
.cl-entete { margin-bottom: 12px; }
.cl-titre {
  width: 100%; font-size: 19px; font-weight: 600; padding: 4px 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; font-family: inherit;
}
.cl-titre:hover { border-color: var(--bord); }
.cl-titre:focus { outline: none; border-color: var(--corail); }
.cl-reglettes { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.cl-champ { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--gris); }
.cl-champ input, .cl-champ select {
  min-width: 170px; padding: 6px 9px; border: 1px solid var(--bord);
  border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px;
}
.cl-champ input:focus, .cl-champ select:focus { outline: none; border-color: var(--corail); }
/* Ce que change la puissance choisie, sous le menu « Modèle ». */
.cl-aide { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--gris); }

/* ── Les tableaux des réponses ──
   Une réponse en tableau se lit comme un tableau, en gros caractères : pas de capitales
   serrées dans l'en-tête, et un défilement horizontal plutôt qu'une colonne écrasée. */
.cbubble .cl-tableau { overflow-x: auto; margin: 8px 0; }
.cbubble:has(.cl-tableau) { max-width: 100%; }
.cbubble table { font-size: 13.5px; box-shadow: none; border: 1px solid var(--bord); }
.cbubble .table-wrap { box-shadow: none; }
.cbubble .table-wrap table { min-width: 0; }
.cbubble th {
  text-transform: none; letter-spacing: 0; font-size: 13px; padding: 7px 10px;
}
.cbubble td { padding: 7px 10px; vertical-align: top; }

/* Pourquoi le dernier envoi n'est pas parti, dit en phrase, juste au-dessus de la saisie. */
.cl-avis {
  margin: 8px 0 0; padding: 8px 11px; border: 1px solid var(--corail); border-radius: 9px;
  font-size: 13px; line-height: 1.45;
}

/* ── L'aide adaptée et la réflexion approfondie (ticket AIDE-THINKING) ──
   Aucune couleur en dur : les variables du thème. Tout tient sur une colonne de 390 px. */
.cl-meta { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--gris); }
.cl-reflexion { margin: 10px 0 0; padding: 8px 11px; border: 1px solid var(--bord); border-radius: 9px; font-size: 13px; line-height: 1.45; }
.cl-reflexion-off { color: var(--gris); font-size: 12.5px; }
.cl-reflexion-case { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 600; }
.cl-reflexion-case input { width: 18px; height: 18px; margin: 0; accent-color: var(--corail); }
.cl-reflexion-cout { margin-left: 8px; color: var(--gris); font-size: 12.5px; overflow-wrap: anywhere; }
.cl-reflexion-detail { margin-top: 4px; font-size: 12px; }
.cl-reflexion-detail summary { cursor: pointer; color: var(--gris); }
.cl-reflexion-detail div { margin-top: 4px; overflow-wrap: anywhere; }
.cl-reflexion-auto { margin-top: 4px; font-size: 12px; }
.cl-suggestion { margin-top: 6px; font-size: 13px; }
.cl-suggestion:empty { display: none; }
.cl-suggestion .btn { margin-left: 6px; }
.cl-recours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cl-etat { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 9px; font-size: 13px; line-height: 1.5; }
.cl-etat p { margin: 4px 0; }
.cl-etat-titre { font-weight: 600; margin-bottom: 4px; }

/* ── Une seule colonne sur écran étroit ── */
@media (max-width: 800px) {
  .cl-wrap { grid-template-columns: 1fr; }
  .cl-aside { position: static; max-height: none; }
}