/* Page Commentaires (js/chat.js) */
body[data-page="chat"] .page[data-page="chat"] { display: flex; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat button { width: auto; }
.ck-src { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #0a0f16; border: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #9aa6b8; }
.ck-pill i { width: 8px; height: 8px; border-radius: 50%; background: #3a4452; }
.ck-pill.on { color: #c7f5dc; } .ck-pill.on i { background: #27c76f; }
.ck-pill.wait i { background: #f3c24f; } .ck-pill.err { color: #ffb4b4; } .ck-pill.err i { background: #e62b2b; }
.ck-tw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ck-tw input { flex: 1; min-width: 180px; }
.ck-bar { display: flex; align-items: center; gap: 8px; font-weight: 700; } .ck-bar .spacer { flex: 1; }
.ck-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; min-height: 160px; overflow-y: auto; padding-right: 4px; }
.ck-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #0d131c; border: 1px solid rgba(255,255,255,.07); }
.ck-item.on { border-color: rgba(243,194,79,.7); }
.ck-b { flex: none; font-size: 10.5px; font-weight: 800; padding: 3px 6px; border-radius: 5px; color: #fff; }
.ck-b.yt { background: #e62b2b; } .ck-b.fb { background: #1877f2; } .ck-b.tw { background: #9146ff; }
.ck-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ck-t b { font-size: 12.5px; color: #f3c24f; } .ck-t span { overflow-wrap: anywhere; }
.ck-show.on { background: #f3c24f; color: #1a1205; border-color: #f3c24f; font-weight: 700; }