/* Hestia : la fenêtre de discussion (page #/hestia, 06/11/2026) et la page du Copilote. Couleurs : variables des thèmes. */
.visuel-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hc-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 16px; align-items: start; margin-top: 14px; }
.hc-chat { gap: 12px; padding: 14px; }
.hc-fil { display: flex; flex-direction: column; gap: 12px; height: min(62vh, 640px); min-height: 280px; overflow-y: auto; padding: 4px 6px 4px 2px; scroll-behavior: smooth; overscroll-behavior: contain; }

.hc-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; max-width: min(88%, 720px); }
.hc-msg.moi { grid-template-columns: minmax(0, 1fr); justify-self: end; margin-left: auto; }
.hc-avatar { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-doux); border: 1px solid var(--trait); color: var(--braise); }
.hc-avatar .ico { width: 20px; height: 20px; }
.hc-bulle { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 4px 16px 16px 16px; padding: 10px 14px; line-height: 1.5; overflow-wrap: anywhere; }
.hc-msg.moi .hc-bulle { background: linear-gradient(180deg, var(--braise), var(--braise-sombre)); color: var(--sur-grad); border-color: transparent; border-radius: 16px 4px 16px 16px; white-space: pre-wrap; }
.hc-msg.erreur .hc-bulle { border-color: color-mix(in srgb, var(--mal) 45%, transparent); background: color-mix(in srgb, var(--mal) 8%, var(--surface-2)); }
.hc-bulle p { margin: 0; }
.hc-bulle p + p, .hc-bulle p + ul, .hc-bulle p + ol, .hc-bulle ul + p, .hc-bulle ol + p { margin-top: 8px; }
.hc-bulle ul, .hc-bulle ol { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.hc-bulle a { color: var(--or); }
.hc-bulle .bouton { margin-top: 8px; }
.hc-heure { font-size: .72rem; color: var(--pale); padding: 0 4px; }
.hc-msg.moi .hc-heure { text-align: right; }
.hc-details { font-size: .76rem; color: var(--pale); margin-top: 6px !important; border-top: 1px dashed var(--trait); padding-top: 6px; }

.hc-msg.attente .hc-bulle { color: var(--doux); display: flex; align-items: center; gap: 8px; }
.hc-points { display: inline-flex; gap: 4px; }
.hc-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--braise); opacity: .35; animation: hc-point 1.2s ease-in-out infinite; }
.hc-points i:nth-child(2) { animation-delay: .2s; }
.hc-points i:nth-child(3) { animation-delay: .4s; }
@keyframes hc-point { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hc-points i { animation: none; opacity: .7; } .hc-fil { scroll-behavior: auto; } }

.hc-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-suggestions:empty { display: none; }
.hc-saisie { display: flex; gap: 10px; align-items: flex-end; }
.hc-saisie textarea { flex: 1; min-height: 46px; max-height: 180px; resize: none; overflow-y: hidden; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface-2); color: var(--encre); font: inherit; line-height: 1.4; }
.hc-saisie textarea:focus { outline: 2px solid color-mix(in srgb, var(--braise) 55%, transparent); outline-offset: 1px; }
.hc-saisie .bouton { min-height: 46px; }
.hc-note { margin: 0; }

.hc-cote { display: grid; gap: 14px; }
.hc-carte { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--trait); color: inherit; text-decoration: none; }
.hc-carte:last-child { border-bottom: 0; }
.hc-carte > .ico { color: var(--braise); width: 22px; height: 22px; flex: none; margin-top: 2px; }
.hc-carte p { margin: 2px 0 0; color: var(--doux); font-size: .86rem; }
.hc-essai { margin-top: 4px; text-align: left; font-size: .8rem; }

@media (max-width: 900px) {
  .hc-page { grid-template-columns: minmax(0, 1fr); }
  .hc-fil { height: min(58vh, 560px); }
  .hc-msg { max-width: 100%; }
}
@media (max-width: 520px) {
  /* la saisie reste visible au-dessus des onglets du bas : l'en-tête se resserre, le fil prend la hauteur qui reste */
  .entete:has(+ .hc-page) p { display: none; }
  .hc-page { margin-top: 8px; }
  .hc-fil { height: max(220px, calc(100dvh - 480px)); min-height: 220px; }
  .hc-chat { padding: 10px; }
  .hc-saisie { flex-direction: column; align-items: stretch; }
  .hc-avatar { width: 28px; height: 28px; }
}