.card{ background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:16px 18px 18px; margin-bottom:18px; display:flex; flex-direction:column; gap:10px; }
.card[hidden]{ display:none; }
.card h2{ font-size:18px; margin:0 0 2px; }
.steps{ margin:0; padding-left:20px; font-size:13.5px; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
.steps b{ color:var(--ink); }
.card .add-sup-row input:not([type="checkbox"]){ padding:9px 11px; border-radius:7px; border:1.3px solid var(--rule); background:var(--surface); color:var(--ink); font-size:13.5px; flex:1 1 200px; }
.card [hidden]{ display:none; }
.who-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.chat-list{ border:1px solid var(--rule); border-radius:8px; overflow:hidden; max-height:60vh; overflow-y:auto; }
.chat-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--rule); background:var(--surface); }
.chat-row:nth-child(even){ background:var(--surface-2); }
.chat-row:last-child{ border-bottom:none; }
.chat-row input[type="checkbox"]{ width:18px; height:18px; flex:0 0 auto; }
.chat-row .ct{ flex:1 1 220px; min-width:0; font-size:13.5px; }
.chat-row .ct small{ display:block; color:var(--ink-faint); font-size:11.5px; }
.chat-row .sup-in{ flex:0 1 200px; padding:6px 9px; border-radius:6px; border:1.3px solid var(--rule); background:var(--surface); color:var(--ink); font:13px 'IBM Plex Sans', sans-serif; }
.chat-row .sup-in:disabled{ opacity:.45; }
.chat-row .cnt{ font:11.5px 'IBM Plex Mono', monospace; color:var(--ink-faint); min-width:70px; text-align:right; }
.badge-type{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); border:1px solid var(--rule); border-radius:4px; padding:0 5px; margin-left:6px; }

.chat-list.tracked{ max-height:none; border-color:var(--good); }
.chat-list.tracked .chat-row .ct{ flex:1 1 240px; }
.chat-row .btn-add, .chat-row .btn-remove{ font:600 12.5px 'IBM Plex Sans', sans-serif; padding:6px 12px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.chat-row .btn-add{ margin-left:auto; border:1.3px solid var(--good); background:var(--surface); color:var(--good); }
.chat-row .btn-add:hover:not(:disabled){ background:var(--good); color:#fff; }
.chat-row .btn-remove{ border:1.3px solid var(--accent); background:var(--surface); color:var(--accent); }
.chat-row .btn-remove:hover:not(:disabled){ background:var(--accent); color:var(--accent-ink); }
.chat-row button:disabled{ opacity:.5; cursor:wait; }

.chat-row.is-syncing{ background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.chat-row.is-syncing .ct:after{ content:''; display:inline-block; width:13px; height:13px; margin-left:8px; border:2px solid var(--rule); border-top-color:var(--accent); border-radius:50%; animation:rc-spin .8s linear infinite; vertical-align:-2px; }
#syncLine{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); }