/* ══════════════════════════════════════════════════════════
   chat.css — « المساعد » (assistant) : préfixe ch-, utilisé par app.js (#/chat) et le styleguide.
   Dépend de ui.css. Aucune couleur en dur.
   ══════════════════════════════════════════════════════════ */
.ch-wrap { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.ch-list { display: flex; flex-direction: column; gap: var(--space-3); min-height: 220px; }
.ch-msg { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 92%; }
.ch-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.ch-b { padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); line-height: var(--lh-normal); overflow-wrap: anywhere; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); }
/* Markdown minimal (app/chat-format.js) : gras, listes ; les retours à la ligne sont des <br> */
.ch-b b { font-weight: 700; }
.ch-b ul, .ch-b ol { margin: var(--space-1) 0; padding-inline-start: var(--space-5); }
.ch-b li + li { margin-top: var(--space-1); }
.ch-col { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ch-msg.me .ch-col { align-items: flex-end; }
/* 👍/👎 et « كلّم إنسان » sous une réponse */
.ch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding-inline-start: var(--space-1); }
.ch-rate { min-width: 36px; height: 32px; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--fs-sm); line-height: 1; cursor: pointer; filter: grayscale(1); opacity: .75; transition: opacity var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); }
.ch-rate:hover, .ch-rate.on { filter: none; opacity: 1; }
.ch-rate.on { border-color: var(--brand); background: var(--brand-soft); }
.ch-rate:focus-visible, .ch-human:focus-visible { outline: 2px solid var(--brand); box-shadow: var(--ring); }
.ch-rate[disabled] { cursor: progress; }
.ch-human { display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 var(--space-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface-2); color: var(--ink); }
.ch-human:hover { text-decoration: none; }
.ch-human .ico { width: 15px; height: 15px; color: var(--wa); }
@media (pointer: coarse) { .ch-rate, .ch-human { height: 40px; } }
/* Admin « المساعد » (admin/views/chats.js) */
.ch-adm-thread { display: flex; flex-direction: column; gap: var(--space-3); max-width: 820px; }
.ch-adm-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.ch-adm-q { max-width: 360px; }
.ch-msg.bot .ch-b { border-end-start-radius: var(--r-sm); }
.ch-msg.me .ch-b { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-ink); border-end-end-radius: var(--r-sm); }
.ch-link { display: inline-flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 2px 0; padding: var(--space-1) var(--space-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface-2); color: var(--brand); white-space: nowrap; }
.ch-link:hover { text-decoration: none; }
.ch-link .ico { width: 15px; height: 15px; }
.ch-typing { display: flex; gap: var(--space-1); padding: var(--space-4) var(--space-4); }
.ch-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ch-dot 1.1s infinite ease-in-out; }
.ch-typing i:nth-child(2) { animation-delay: .15s; } .ch-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ch-typing i { animation: none; } }
.ch-form { position: sticky; bottom: 0; display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-3) 0; background: var(--bg); }
.ch-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 140px; line-height: 1.5; }
.ch-form .btn { height: 46px; width: 46px; padding: 0; flex: none; }
.ch-note { text-align: center; }
.ch-fab { position: fixed; z-index: var(--z-fixed); inset-inline-start: var(--space-5); bottom: var(--space-5); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-pill); background: var(--grad); color: var(--grad-ink); font-weight: 700; box-shadow: var(--sh-2); }
.ch-fab:hover { text-decoration: none; filter: brightness(1.05); }
.ch-fab .ico { width: 20px; height: 20px; }
body[data-view="chat"] .ch-fab { display: none; }
@media (max-width: 960px) {
  .ch-fab { bottom: calc(var(--tabbar-h) + var(--space-4) + env(safe-area-inset-bottom)); inset-inline-start: var(--space-4); padding: var(--space-3); }
  .ch-fab span { display: none; }
  .ch-form { bottom: calc(var(--tabbar-h) + var(--space-2) + env(safe-area-inset-bottom)); }
  body[data-view="new"] .ch-fab { display: none; }
}