/* The chat reader and the Read conversations panes (design 2026-10-11-dashboard-chat, PLAN.md). One component for every place
   the dashboard shows messages. Every class is prefixed c- so nothing here can touch the admin layer's own short names.
   Logical properties only. Tokens are the kit's; the aliases below map the mockup's short names onto them. */
.shell{--t2:var(--text-2);--line2:var(--line-2);--dtile:var(--danger-tile);--hdr:var(--card);--pdeep:var(--primary-deep);--link:var(--primary);--sandink:#8A3A08;--onacc:var(--on-accent)}
.dark .shell{--sandink:#F0C99B}
/* the Read conversations page fills the page body edge to edge, under the page header */
.c-bleed{margin:-24px -32px -32px;block-size:calc(100vh - var(--hdr-h));min-block-size:560px;display:flex;flex-direction:column;background:var(--card);border-block-start:1px solid var(--line-2)}
.c-bleed.c-short{block-size:auto;min-block-size:0}
@media (max-width:860px){.c-bleed{margin:-14px -16px -32px}}
.c-pane-scroll{overflow-y:auto}
.c-row-link{color:inherit;text-decoration:none}
.c-row-link:hover{background:var(--field)}
.c-field{flex:1;min-inline-size:0;border:0;background:transparent;font:inherit;color:inherit;outline:0;resize:none;max-block-size:160px}
.c-field-in{flex:1;min-inline-size:0;padding:12px;font-size:16px;line-height:24px}
.c-field-in textarea{inline-size:100%;block-size:24px;min-block-size:24px;field-sizing:content;overflow-y:auto}

/* ============ the chat reader (one component for every place the dashboard shows messages) ============ */
.c-chat{--b-in:#fff;--b-in-bd:#E6E3DC;--b-out:#DCEFE9;--b-out-bd:#C7E2D9;--b-out-meta:#2F6B61;--q-bg:rgba(7,94,84,.09);--q-bar:#075E54;--q-name:#00695A;
 --tick:#008069;--wall:#FBF8F2;--stbar:#008069;--stchip:#E6F2EF;--stink:#075E54;--rx:#fff;--rxbd:#E6E3DC;--rxme:#E6F2EF;--gd:to right;--ink3:#6B7176;--dtile:#FBEAE8;--origbd:#C9C3B5}
.dark .c-chat{--b-in:#1F2E2B;--b-in-bd:#2A3A36;--b-out:#053F39;--b-out-bd:#075E54;--b-out-meta:#B5C7C2;--q-bg:rgba(143,211,196,.10);--q-bar:#8FD3C4;--q-name:#8FD3C4;
 --tick:#8FD3C4;--wall:#0F1715;--stbar:#8FD3C4;--stchip:#053F39;--stink:#8FD3C4;--rx:#1F2E2B;--rxbd:#2A3A36;--rxme:#1F2E2B;--ink3:#9FB0AA;--dtile:#3A1F1D;--origbd:#4A5A55}
html[dir=rtl] .c-chat{--gd:to left}
.c-wall{position:relative;background:var(--wall);display:flex;flex-direction:column;min-block-size:0;flex:1}
.c-wall::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cg fill=%22none%22 stroke=%22%23075E54%22 stroke-opacity=%22.105%22 stroke-width=%22.7%22 stroke-linejoin=%22miter%22%3E%3Cpolygon points=%225.86,5.86 34.14,5.86 34.14,34.14 5.86,34.14%22/%3E%3Cpolygon points=%2220.00,0.00 40.00,20.00 20.00,40.00 0.00,20.00%22/%3E%3Cg stroke-opacity=%22.08%22%3E%3Cpolygon points=%2213.49,13.49 26.51,13.49 26.51,26.51 13.49,26.51%22/%3E%3Cpolygon points=%2220.00,10.80 29.20,20.00 20.00,29.20 10.80,20.00%22/%3E%3C/g%3E%3Cg transform=%22rotate(45 0 0)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 0) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(0 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3Cg transform=%22translate(40 40) rotate(45)%22 stroke-opacity=%22.09%22%3E%3Crect x=%22-2.6%22 y=%22-2.6%22 width=%225.2%22 height=%225.2%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 1px 0;opacity:.5;pointer-events:none}
.dark .c-wall::after{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238FD3C4%22%20stroke-opacity%3D%220.1%22%20stroke-width%3D%22.7%22%20stroke-linejoin%3D%22miter%22%3E%3Cpolygon%20points%3D%225.86%2C5.86%2034.14%2C5.86%2034.14%2C34.14%205.86%2C34.14%22%2F%3E%3Cpolygon%20points%3D%2220.00%2C0.00%2040.00%2C20.00%2020.00%2C40.00%200.00%2C20.00%22%2F%3E%3Cg%20stroke-opacity%3D%220.075%22%3E%3Cpolygon%20points%3D%2213.49%2C13.49%2026.51%2C13.49%2026.51%2C26.51%2013.49%2C26.51%22%2F%3E%3Cpolygon%20points%3D%2220.00%2C10.80%2029.20%2C20.00%2020.00%2C29.20%2010.80%2C20.00%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2845%200%200%29%22%20stroke-opacity%3D%220.085%22%3E%3Crect%20x%3D%22-2.6%22%20y%3D%22-2.6%22%20width%3D%225.2%22%20height%3D%225.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%200%29%20rotate%2845%29%22%20stroke-opacity%3D%220.085%22%3E%3Crect%20x%3D%22-2.6%22%20y%3D%22-2.6%22%20width%3D%225.2%22%20height%3D%225.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%280%2040%29%20rotate%2845%29%22%20stroke-opacity%3D%220.085%22%3E%3Crect%20x%3D%22-2.6%22%20y%3D%22-2.6%22%20width%3D%225.2%22%20height%3D%225.2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%2040%29%20rotate%2845%29%22%20stroke-opacity%3D%220.085%22%3E%3Crect%20x%3D%22-2.6%22%20y%3D%22-2.6%22%20width%3D%225.2%22%20height%3D%225.2%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 1px 0;opacity:1}
.c-wall>*{position:relative;z-index:1}
.c-msgs{flex:1;min-block-size:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:14px 28px 10px}
.c-msgs>:first-child{margin-block-start:auto}
.c-msgs.c-top>:first-child{margin-block-start:0}
.c-msgs>*{flex:none}
.c-m{display:flex;flex-direction:column;max-inline-size:min(74%,540px);align-self:flex-start;align-items:flex-start}
.c-m.c-me{align-self:flex-end;align-items:flex-end}
.c-m.c-gap{margin-block-start:8px}
.c-b{position:relative;display:flex;flex-direction:column;max-inline-size:100%;padding:7px 12px 5px;border-radius:18px;background:var(--b-in);border:1px solid var(--b-in-bd);font-size:15px;line-height:22px;color:var(--text);text-wrap:pretty}
.c-m.c-first .c-b{border-start-start-radius:5px}
.c-m.c-me .c-b{background:var(--b-out);border-color:var(--b-out-bd)}
.c-m.c-me.c-first .c-b{border-start-start-radius:18px;border-start-end-radius:5px}
.c-b.c-hr{padding-block-end:15px;margin-block-end:14px}
.c-sn{font-size:14px;font-weight:600;line-height:20px;color:var(--q-name)}
.c-snr{display:flex;align-items:center;gap:6px;min-block-size:20px;flex-wrap:wrap}.c-snr .ic{flex:none;width:15px;height:15px;stroke-width:2;color:var(--q-name)}
.c-stb{display:inline-flex;align-items:center;gap:4px;block-size:20px;padding-inline:6px 8px;border-radius:10px;background:var(--stchip);color:var(--stink);font-size:13px;font-weight:600;line-height:20px;white-space:nowrap}.c-stb .ic{width:14px;height:14px;color:var(--stink)}
.c-b.c-st{padding-inline-start:16px;background:linear-gradient(var(--gd),var(--stbar) 0 4px,var(--b-in) 4px)}
.c-m.c-me .c-b.c-st{background:var(--b-out);padding-inline-start:12px}
.c-mt{align-self:flex-end;display:flex;align-items:center;gap:5px;font-size:13px;line-height:18px;color:var(--t2);margin-block-start:1px;white-space:nowrap}
.c-m.c-me .c-mt{color:var(--b-out-meta)}
.c-mt .ic{width:17px;height:17px;stroke-width:2;color:var(--tick)}
.c-mt bdi{font-variant-numeric:tabular-nums}
.c-fwd{display:flex;align-items:center;gap:5px;font-size:13.5px;line-height:20px;font-style:italic;color:var(--t2)}.c-fwd .ic{width:15px;height:15px;stroke-width:2}.c-m.c-me .c-fwd{color:var(--b-out-meta)}
.c-q{position:relative;overflow:hidden;background:var(--q-bg);border-radius:10px;padding:4px 10px;padding-inline-start:13px;margin:1px 0 4px;display:flex;flex-direction:column;min-inline-size:200px}
.c-q::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:var(--q-bar)}
.c-q .c-sn{font-size:13.5px;line-height:20px}.c-q .c-qc{display:flex;align-items:center;gap:5px;font-size:14px;line-height:20px;color:var(--text)}.c-q .c-qc .ic{width:16px;height:16px;color:var(--t2);flex:none}
.c-rxs{position:absolute;inset-block-end:-17px;display:flex;gap:4px}.c-m.c-in .c-rxs{inset-inline-start:10px}.c-m.c-me .c-rxs{inset-inline-end:10px}
.c-rx{position:relative;block-size:26px;padding:0 8px;border-radius:13px;display:flex;align-items:center;gap:4px;background:var(--rx);border:1px solid var(--rxbd);box-shadow:0 0 0 2px var(--wall),0 1px 3px rgba(2,35,31,.2);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer}
.c-rx i{font-style:normal;font-size:14px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.c-rx.c-who{padding:0 9px;color:var(--primary)}.c-rx.c-who .ic{width:14px;height:14px}
.c-mn{color:var(--q-name);font-weight:600}
.c-edt{font-style:italic}
/* voice */
.c-vv{inline-size:300px;max-inline-size:100%;padding-block:5px 4px}
.c-vr{display:flex;align-items:center;block-size:44px;gap:8px}
.c-vp{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:50%;background:rgba(0,128,105,.14);color:#008069}.c-m.c-me .c-vp{background:rgba(7,94,84,.14);color:#075E54}.dark .c-vp{background:rgba(143,211,196,.14);color:#8FD3C4}
.c-vp .ic{width:22px;height:22px;stroke-width:2;fill:currentColor}
.c-vw{flex:1;min-inline-size:0;display:flex;align-items:center;justify-content:space-between;block-size:34px}
.c-vw i{display:block;inline-size:3px;border-radius:2px;background:rgba(0,128,105,.40);flex:none}.c-vw i.c-p{background:#008069}
.c-m.c-me .c-vw i{background:rgba(7,94,84,.40)}.c-m.c-me .c-vw i.c-p{background:#075E54}.dark .c-vw i{background:rgba(143,211,196,.40)}.dark .c-vw i.c-p{background:#8FD3C4}
.c-vm{display:flex;align-items:center;gap:8px;margin-block-start:-4px;padding-inline-start:48px;min-block-size:20px}
.c-vm .c-du{font-size:14px;font-weight:500;color:var(--t2);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}.c-m.c-me .c-vm .c-du{color:var(--b-out-meta)}
.c-vm .c-mt{margin-inline-start:auto;margin-block-start:0}
.c-aud{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:18px;color:var(--t2);white-space:nowrap}.c-aud .ic{width:14px;height:14px;stroke-width:2}.c-m.c-me .c-aud{color:var(--b-out-meta)}
/* image, file, call, once */
.c-im{padding:3px;border-radius:18px}
.c-im .c-ph{position:relative;inline-size:300px;max-inline-size:100%;block-size:190px;border-radius:15px;overflow:hidden;margin-block-start:2px}
.c-im .c-ph svg.c-art{display:block;inline-size:100%;block-size:100%}
.c-im .c-op{position:absolute;inset-block-end:8px;inset-inline-start:8px;display:inline-flex;align-items:center;gap:6px;block-size:28px;padding:0 10px;border-radius:14px;background:rgba(20,28,26,.72);color:#fff;font-size:13px;font-weight:500}.c-im .c-op .ic{width:15px;height:15px}
.c-im .c-tm{position:absolute;inset-block-end:8px;inset-inline-end:8px;background:rgba(20,28,26,.72);color:#fff;font-size:13px;line-height:20px;padding:0 8px;border-radius:10px}
.c-im .c-cap{padding:5px 9px 3px}.c-im .c-sn{padding:3px 9px 1px}
.c-fl2{display:flex;align-items:center;gap:12px;inline-size:380px;max-inline-size:100%;padding:4px 0 2px}
.c-fl2 .c-fi{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:12px;background:var(--tile);color:var(--primary)}.dark .c-fl2 .c-fi{color:#8FD3C4}
.c-fl2 .c-fn{flex:1;min-inline-size:0}.c-fl2 .c-fn b{display:block;font-size:15px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-fl2 .c-fn small{display:block;font-size:13.5px;line-height:18px;color:var(--t2)}.c-m.c-me .c-fl2 .c-fn small{color:var(--b-out-meta)}
.c-opn{display:inline-flex;align-items:center;gap:6px;block-size:34px;padding:0 12px;border-radius:17px;background:var(--tile);color:var(--primary);font-size:13.5px;font-weight:600;white-space:nowrap}.c-opn .ic{width:16px;height:16px}.dark .c-opn{color:#8FD3C4}
.c-cb{display:flex;align-items:center;gap:12px;inline-size:360px;max-inline-size:100%;padding:3px 0 1px}
.c-cb .c-ci{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--tile);color:var(--primary)}.c-cb .c-ci.c-miss{background:var(--dtile);color:var(--danger)}.dark .c-cb .c-ci{color:#8FD3C4}.dark .c-cb .c-ci.c-miss{color:var(--danger)}
.c-cb .c-cn{flex:1;min-inline-size:0}.c-cb .c-cn b{display:block;font-size:15px;line-height:20px;font-weight:600}.c-cb .c-cn small{display:block;font-size:13.5px;line-height:18px;color:var(--t2)}.c-m.c-me .c-cb .c-cn small{color:var(--b-out-meta)}
.c-vo{display:flex;align-items:center;gap:12px;inline-size:340px;max-inline-size:100%;padding:3px 0 2px}.c-vo .c-fi{flex:none;display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;border:2px dashed var(--primary);color:var(--primary)}.dark .c-vo .c-fi{border-color:#8FD3C4;color:#8FD3C4}.c-vo .c-fn b{display:block;font-size:15px;line-height:20px;font-weight:600}.c-vo .c-fn small{display:block;font-size:13.5px;line-height:18px;color:var(--t2)}
.c-lp{display:block;margin:2px 0 4px;border-radius:10px;overflow:hidden;background:var(--q-bg);padding:6px 10px;padding-inline-start:13px;position:relative;inline-size:300px;max-inline-size:100%}.c-lp::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:var(--q-bar)}.c-lp b{display:block;font-size:14px;line-height:20px;font-weight:600}.c-lp small{display:block;font-size:13px;line-height:18px;color:var(--t2)}.c-lp .c-u{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--q-name);direction:ltr;justify-content:flex-start}.c-lp .c-u .ic{width:13px;height:13px}
/* deleted for everyone, with the kept original (staff only) */
.c-b.c-del{border-style:dashed}
.c-dl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;line-height:24px;color:var(--t2);font-style:italic}.c-dl .ic{width:17px;height:17px;flex:none}
.c-dmk{display:inline-flex;align-items:center;block-size:20px;padding:0 8px;border-radius:10px;background:var(--fill);color:var(--text);font-size:12.5px;font-weight:600;font-style:normal;white-space:nowrap}
.c-orig{margin:6px 0 3px;padding:7px 10px;border-radius:12px;border:1px dashed var(--origbd);background:var(--fill)}
.c-orig small{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--t2);font-weight:600}.c-orig small .ic{width:14px;height:14px}
.c-orig p{font-size:15.5px;line-height:24px;color:var(--text);margin-block-start:2px}
.c-hidn{display:inline-flex;align-items:center;gap:5px;margin-block-start:7px;font-size:13px;line-height:18px;color:var(--t2)}.c-hidn .ic{width:14px;height:14px;stroke-width:2}
.c-m.c-me .c-b.c-fail{border-color:var(--danger)}
.c-failn{display:flex;align-items:center;gap:6px;margin-block-start:4px;font-size:13.5px;line-height:20px;color:var(--danger);font-weight:600}.c-failn .ic{width:15px;height:15px}.c-failn a{color:var(--link);text-decoration:underline}
/* centred notes */
.c-dt,.c-sys{align-self:center;display:inline-flex;align-items:center;gap:6px;background:var(--b-in);border:1px solid var(--b-in-bd);color:var(--t2);font-size:14px;line-height:20px;padding:3px 14px;border-radius:14px;text-align:center;max-inline-size:80%}
.c-dt{margin-block:6px}.c-sys{margin-block:4px}.c-sys .ic{width:14px;height:14px}
.c-sys.c-stf{border-color:var(--stbar)}
/* the chat pane: header, dock, composer */
.c-cp{display:flex;flex-direction:column;min-inline-size:0;min-block-size:0;background:var(--card)}
.c-ch{flex:none;display:flex;align-items:center;gap:12px;block-size:64px;padding:0 20px;background:var(--hdr);border-block-end:1px solid var(--line2)}
.c-ch .c-ct{flex:1;min-inline-size:0}.c-ch .c-ct b{display:block;font-size:16.5px;line-height:22px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-ch .c-ct small{display:block;font-size:13.5px;line-height:18px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-ch .c-bk{display:none}
.c-skey{flex:none;display:inline-flex;align-items:center;gap:8px;block-size:32px;padding:0 12px 0 10px;padding-inline:10px 12px;border-radius:16px;background:var(--fill);font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap}
.c-skey i{display:block;inline-size:18px;block-size:14px;border-radius:7px;border-start-end-radius:2px;background:#BFE0D6;border:1px solid #7FB8A8}.dark .c-skey i{background:#053F39;border-color:#2E9C86}
.c-ga{flex:none;display:grid;place-items:center;border-radius:50%;background:var(--tile);color:var(--primary);font-weight:600}.c-ga.c-t{border-radius:12px}.c-ga .ic{width:22px;height:22px}
.c-ga.c-s42{inline-size:42px;block-size:42px;font-size:17px}.c-ga.c-s44{inline-size:44px;block-size:44px;font-size:18px}.c-ga.c-s40{inline-size:40px;block-size:40px;font-size:16px}.c-ga.c-s56{inline-size:56px;block-size:56px;font-size:22px}.c-ga.c-s28{inline-size:28px;block-size:28px;font-size:12px}
.c-ga.c-pair{position:relative;overflow:visible;background:none;inline-size:52px;block-size:44px}.c-ga.c-pair span{position:absolute;display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:var(--tile);color:var(--primary);font-size:14px;font-weight:600;border:2px solid var(--card)}.c-ga.c-pair span:first-child{inset-inline-start:0;inset-block-start:0;background:#D6E9E4}.c-ga.c-pair span:last-child{inset-inline-end:0;inset-block-end:0;background:#BFE0D6}
.c-dock{flex:none;display:flex;align-items:flex-end;gap:8px;padding:6px 14px 4px}
.c-cmp{flex:1;min-inline-size:0;border-radius:24px;background:var(--b-in);border:1px solid var(--b-in-bd);box-shadow:0 1px 2px rgba(2,35,31,.08);overflow:hidden}
.c-cmp .c-asl{display:flex;align-items:center;gap:10px;min-block-size:44px;padding:5px 16px;border-block-end:1px solid var(--line)}.c-cmp .c-asl .ic{flex:none;width:18px;height:18px;color:var(--primary)}.dark .c-cmp .c-asl .ic{color:#8FD3C4}
.c-cmp .c-asl b{font-size:14.5px;line-height:20px;font-weight:600}.c-cmp .c-asl small{font-size:13.5px;line-height:18px;color:var(--t2);margin-inline-start:auto;text-align:end}
.c-cmp .c-asl .c-sw2{flex:none;margin-inline-start:auto}
.c-cr{display:flex;align-items:flex-end;min-block-size:48px;padding-inline:4px}
.c-cr .c-bt{flex:none;inline-size:44px;block-size:44px;margin-block:2px;display:grid;place-items:center;color:var(--t2)}.c-cr .c-bt .ic{width:22px;height:22px}
.c-fd2{flex:1;min-inline-size:0;padding:12px 12px;font-size:16px;line-height:24px;color:var(--text)}.c-fd2.c-ph{color:var(--ink3)}
.c-caret{display:inline-block;inline-size:2px;block-size:20px;margin-inline-start:1px;vertical-align:-4px;background:var(--q-name)}
.c-sendb{flex:none;inline-size:48px;block-size:48px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 3px 8px rgba(2,35,31,.24)}.c-sendb .ic{width:22px;height:22px}.dark .c-sendb{background:#008069;color:#fff}
.c-sendb.c-off{background:var(--fill);color:var(--ink3);box-shadow:none;border:1px solid var(--b-in-bd)}
.c-hint{flex:none;padding:0 20px 8px;font-size:13px;line-height:18px;color:var(--t2);text-align:center}
.c-cmp.c-closed{display:flex;align-items:center;gap:12px;min-block-size:56px;padding:6px 8px 6px 16px;padding-inline:16px 8px;background:var(--fill);box-shadow:none}.c-cmp.c-closed .ic.c-l{flex:none;width:22px;height:22px;color:var(--t2)}.c-cmp.c-closed span.c-t{flex:1;font-size:14.5px;line-height:20px;color:var(--text)}
.c-jb{flex:none;display:inline-flex;align-items:center;gap:8px;block-size:40px;padding:0 16px;border-radius:20px;background:var(--primary);color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap}.c-jb .ic{width:18px;height:18px}.dark .c-jb{background:#8FD3C4;color:#06433B}
.c-rp{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;padding-inline:12px 8px;border-block-end:1px solid var(--line)}.c-rp .c-q{flex:1;min-inline-size:0;margin:0}.c-rp .c-qc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-rpx{flex:none;inline-size:32px;block-size:32px;display:grid;place-items:center;border-radius:50%;color:var(--t2)}.c-rpx .ic{width:18px;height:18px}.c-rpx:hover{background:var(--fill)}
.c-jb.c-jbs.c-off{background:var(--fill);color:var(--ink3);cursor:not-allowed}
.c-pushrow{display:flex;align-items:center;gap:10px;min-block-size:48px;padding:4px 16px;border-block-end:1px solid var(--line)}.c-pushrow .ic{flex:none;width:20px;height:20px;color:var(--primary)}.c-pushrow b{flex:1;font-size:15px;font-weight:500;line-height:22px}
.c-pushrow input,.c-titlerow{font-size:14.5px}
.c-titlerow{display:flex;align-items:center;gap:10px;min-block-size:44px;padding:2px 16px;border-block-end:1px solid var(--line);color:var(--ink3)}.c-titlerow span{flex:1}
.c-swk{position:relative;inline-size:46px;block-size:28px;border-radius:14px;background:var(--primary);flex:none}.c-swk::after{content:"";position:absolute;inset-block-start:3px;inset-inline-end:3px;inline-size:22px;block-size:22px;border-radius:50%;background:#fff}
.dark .c-swk{background:#2E9C86}
/* ============ the Read conversations page: three panes ============ */
.c-wabar{flex:none;display:flex;align-items:center;gap:12px;block-size:48px;padding:0 20px;background:var(--tile);border-block-end:1px solid var(--line2);font-size:14px;color:var(--text)}
.c-wabar>.ic{flex:none;width:18px;height:18px;color:var(--primary)}
.c-wabar b{font-weight:700}
.c-wabar .c-mb{margin-inline-start:auto;flex:none;display:inline-flex;align-items:center;gap:8px;block-size:36px;padding:0 12px;border-radius:12px;background:var(--card);border:1px solid var(--line2);color:var(--text);font-size:14px;font-weight:600}.c-wabar .c-mb .ic{width:18px;height:18px;color:var(--t2)}
.c-wa{flex:1;min-block-size:0;display:grid;grid-template-columns:280px 312px minmax(0,1fr);grid-template-rows:minmax(0,1fr);position:relative}
.c-wa.c-w2{grid-template-columns:280px minmax(0,1fr)}
.c-pn{display:flex;flex-direction:column;min-inline-size:0;min-block-size:0;background:var(--card);border-inline-end:1px solid var(--line2);overflow:hidden}
.c-pn.c-last{border-inline-end:0}
.c-pnh{flex:none;display:flex;align-items:center;gap:10px;block-size:52px;padding:0 16px}
.c-pnh h2{flex:1;font-size:17px;line-height:24px;font-weight:600;color:var(--pdeep)}
.c-pnh .c-sub2{font-size:13.5px;color:var(--t2)}
.c-flt{flex:none;margin:0 16px 8px;display:flex;align-items:center;gap:10px;block-size:42px;padding:0 12px;border-radius:12px;background:var(--fill);border:1px solid var(--line2);color:var(--t2);font-size:15px}.c-flt .ic{width:18px;height:18px;flex:none}
.c-flt.c-on{background:var(--card);border:1.5px solid var(--primary);box-shadow:0 0 0 3px rgba(7,94,84,.14);color:var(--text)}
.c-flt .c-x{margin-inline-start:auto;display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;background:var(--fill);color:var(--t2)}.c-flt .c-x .ic{width:14px;height:14px}
.c-chips{flex:none;display:flex;gap:6px;padding:0 16px 10px;overflow:hidden}
.c-chp{flex:1 1 auto;justify-content:center;display:inline-flex;align-items:center;gap:6px;block-size:34px;padding:0 8px;border-radius:17px;border:1px solid var(--line2);background:var(--card);color:var(--text);font-size:13.5px;font-weight:500;white-space:nowrap}
.c-chp.c-on{background:var(--tile);border-color:var(--primary);color:var(--primary);font-weight:600}.dark .c-chp.c-on{color:#8FD3C4;border-color:#8FD3C4}
.c-chp small{font-size:12.5px;color:var(--t2);font-weight:500}
.c-lst{flex:1;min-block-size:0;overflow-y:auto;border-block-start:1px solid var(--line)}
.c-lh{display:flex;align-items:center;block-size:30px;padding:0 16px;font-size:12.5px;font-weight:600;color:var(--t2);background:var(--field);border-block-end:1px solid var(--line)}.c-lh span:last-child{margin-inline-start:auto}
.c-pr{position:relative;display:flex;align-items:center;gap:12px;block-size:66px;padding:0 16px;border-block-end:1px solid var(--line)}
.c-pr.c-on{background:var(--tile)}.c-pr.c-on::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--primary)}
.c-pr .c-tx{flex:1;min-inline-size:0}.c-pr .c-tx b{display:block;font-size:15.5px;line-height:22px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-pr .c-tx small{display:block;font-size:13.5px;line-height:18px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-cn2{flex:none;display:inline-flex;align-items:center;gap:5px;block-size:28px;padding:0 10px;border-radius:14px;background:var(--fill);color:var(--text);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}.c-cn2 .ic{width:15px;height:15px;color:var(--t2)}.c-cn2.c-z{color:var(--t2);font-weight:500}
.c-pr.c-on .c-cn2{background:var(--card)}
.c-more{display:flex;align-items:center;justify-content:center;gap:8px;block-size:56px;margin:0;color:var(--link);font-size:14.5px;font-weight:600}.c-more small{font-weight:400;color:var(--t2);font-size:13px}
.c-rr{position:relative;display:flex;align-items:center;gap:12px;min-block-size:72px;padding:8px 16px;border-block-end:1px solid var(--line)}
.c-rr.c-on{background:var(--tile)}.c-rr.c-on::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--primary)}
.c-rr .c-tx{flex:1;min-inline-size:0}.c-rr .c-l1{display:flex;align-items:baseline;gap:8px}.c-rr .c-l1 b{flex:1;min-inline-size:0;font-size:15.5px;line-height:22px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-rr .c-l1 time{flex:none;font-size:13px;color:var(--t2)}
.c-rr .c-l2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-block-start:1px;font-size:13.5px;line-height:20px;color:var(--t2)}.c-rr .c-l2 .ic{width:15px;height:15px}
.c-fp{display:inline-flex;align-items:center;block-size:20px;padding:0 8px;border-radius:10px;background:var(--fill);color:var(--text);font-size:12.5px;font-weight:600;white-space:nowrap}
.c-fp.c-sd{background:var(--sand);color:var(--sandink)}
.c-rr.c-num{min-block-size:68px}
.c-pinfo{flex:none;display:flex;align-items:center;gap:12px;padding:6px 16px 10px}.c-pinfo .c-tx{flex:1;min-inline-size:0}.c-pinfo b{display:block;font-size:16.5px;line-height:22px;font-weight:600}.c-pinfo small{display:block;font-size:13.5px;line-height:18px;color:var(--t2)}
.c-aunote{flex:none;display:flex;align-items:center;gap:8px;padding:0 16px 10px;font-size:13px;line-height:18px;color:var(--t2)}.c-aunote .ic{width:15px;height:15px;flex:none;color:var(--primary)}
.c-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:28px 36px;flex:1}
.c-empty .c-mk{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:50%;background:var(--tile);color:var(--primary);margin-block-end:6px}.c-empty .c-mk .ic{width:30px;height:30px}.dark .c-empty .c-mk{color:#8FD3C4}
.c-empty.c-err .c-mk{background:var(--dtile);color:var(--danger)}
.c-empty h3{font-size:18px;line-height:26px;font-weight:600}.c-empty p{font-size:14.5px;line-height:22px;color:var(--t2);max-inline-size:40ch}
.c-empty .c-kb,.c-empty .btn{margin-block-start:10px}
.c-empty .c-steps{display:grid;gap:10px;margin-block-start:14px;text-align:start;max-inline-size:44ch}.c-empty .c-steps div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:22px;color:var(--text)}.c-empty .c-steps i{flex:none;display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;background:var(--tile);color:var(--primary);font-style:normal;font-size:13.5px;font-weight:700}
.c-pnw{position:relative;flex:1;min-block-size:0;display:flex;flex-direction:column;background:var(--wall);justify-content:center}
.c-sksp{padding:14px 16px;display:grid;gap:18px}.c-skr{display:flex;align-items:center;gap:12px}.c-skr .c-c{flex:1;display:grid;gap:8px}
.c-skb{display:flex;flex-direction:column;gap:12px;padding:20px 28px;flex:1;justify-content:flex-end}.c-skb .sk{border-radius:16px}
.c-ro{flex:none;display:flex;align-items:center;gap:10px;margin:0 16px 10px;padding:10px 12px;border-radius:12px;background:var(--fill);font-size:13.5px;line-height:20px;color:var(--text)}.c-ro .ic{width:18px;height:18px;flex:none;color:var(--t2)}
.c-menu-over{position:absolute;inset-block-start:52px;inset-inline-end:20px;inline-size:380px;z-index:8;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:0 14px 34px rgba(2,35,31,.26);padding:6px}
.c-menu-over .c-mi{display:flex;gap:12px;padding:11px 12px;border-radius:10px}.c-menu-over .c-mi:first-child{background:var(--field)}.c-menu-over .c-mi .ic{flex:none;width:20px;height:20px;color:var(--primary);margin-block-start:2px}.c-menu-over .c-mi b{display:block;font-size:15px;line-height:22px;font-weight:600}.c-menu-over .c-mi small{display:block;font-size:13.5px;line-height:20px;color:var(--t2)}
.c-menu-over .c-sepl{block-size:1px;background:var(--line);margin:2px 8px}
/* Replies, channel, broadcast, room review */
.c-wa.c-rep{grid-template-columns:340px minmax(0,1fr)}
.c-tabs2{flex:none;display:flex;gap:8px;padding:0 16px 10px}
.c-chead{flex:none;display:flex;align-items:center;gap:12px;padding:12px 28px;background:var(--hdr);border-block-end:1px solid var(--line2)}
.c-chead .c-tx{flex:1;min-inline-size:0}.c-chead h2{font-size:19px;line-height:26px;font-weight:600;color:var(--pdeep)}.c-chead small{font-size:13.5px;color:var(--t2)}
.c-wnum{display:inline-flex;align-items:center;justify-content:center;min-inline-size:24px;block-size:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:var(--onacc);font-size:13px;font-weight:700;line-height:22px;font-variant-numeric:tabular-nums}
.c-wtx{font-size:13px;line-height:18px;color:var(--text);font-weight:600}
.c-pg{position:relative;flex:1;min-block-size:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 360px}
.c-pg>.c-cp{border-inline-end:1px solid var(--line2)}
.c-side2{padding:20px;display:grid;gap:14px;align-content:start;background:var(--page);overflow:hidden}
.c-kv{display:grid;gap:0}.c-kv div{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-block-end:1px solid var(--line);font-size:14.5px}.c-kv div:last-child{border-block-end:0}.c-kv span{color:var(--t2);flex:none;inline-size:112px}.c-kv b{font-weight:600;flex:1}
.c-pad2{padding:16px 18px}
.c-rv{display:flex;align-items:center;gap:14px;padding:12px 20px;border-block-end:1px solid var(--line);min-block-size:76px}
.c-rv .c-tx{flex:1;min-inline-size:0}.c-rv .c-tx b{display:block;font-size:15.5px;line-height:22px;font-weight:600}.c-rv .c-tx small{display:block;font-size:13.5px;color:var(--t2);line-height:20px}
/* Back links only exist where one pane shows at a time; the media rules below turn them on */
.c-pnh .c-bk{display:none;place-items:center;inline-size:40px;block-size:40px;margin-inline-start:-8px;border-radius:12px;color:var(--primary);flex:none}
/* narrow */
@media (max-width:860px){
 .c-wa,.c-wa.c-w2,.c-wa.c-rep{grid-template-columns:minmax(0,1fr)}
 .c-wabar{padding:0 14px}.c-wabar span.c-tx2{flex:1;min-inline-size:0;font-size:13px;line-height:18px}
 .c-ch .c-bk{display:grid;place-items:center;inline-size:44px;block-size:44px;margin-inline-start:-10px;border-radius:12px;color:var(--primary);flex:none}.c-ch .c-bk .ic{width:22px;height:22px}
 .c-skey{display:none}
 .c-msgs{padding:12px 14px 8px}.c-m{max-inline-size:86%}
 .c-vv,.c-fl2,.c-cb,.c-vo{inline-size:min(300px,100%)}
 .c-pnh .c-bk{display:grid;place-items:center;inline-size:40px;block-size:40px;margin-inline-start:-8px;border-radius:12px;color:var(--primary);flex:none}.c-pnh .c-bk .ic{width:22px;height:22px}
}
@media (max-width:1180px){.c-m{max-inline-size:80%}.c-msgs{padding-inline:20px}.c-pg{grid-template-columns:minmax(0,1fr) 300px}
 /* two columns: the people pane gives way once a person is chosen; with nobody chosen the rooms pane gives way */
 .c-wa{grid-template-columns:288px minmax(0,1fr)}
 .c-wa.c-s-rooms>.c-pn-people,.c-wa.c-s-chat>.c-pn-people,.c-wa.c-s-people>.c-pn-rooms{display:none}
 .c-wa.c-s-rooms .c-pn-rooms .c-pnh .c-bk,.c-wa.c-s-chat .c-pn-rooms .c-pnh .c-bk{display:grid}
 .c-wa.c-s-people{grid-template-columns:312px minmax(0,1fr)}
}
@media (max-width:860px){
 .c-wa,.c-wa.c-s-people,.c-wa.c-s-rooms,.c-wa.c-s-chat{grid-template-columns:minmax(0,1fr)}
 .c-wa>.c-pn{display:none}
 .c-wa.c-s-people>.c-pn-people,.c-wa.c-s-rooms>.c-pn-rooms,.c-wa.c-s-chat>.c-pn-chat{display:flex}
}
.c-ga img{inline-size:100%;block-size:100%;border-radius:inherit;object-fit:cover}
.c-ga{overflow:hidden}
.c-ga.c-c-inst,.c-ga.c-inst{background:none;overflow:visible}
.c-ga.c-inst .inst{inline-size:100%;block-size:100%}
.c-ga.c-s28{inline-size:28px;block-size:28px;font-size:12px}
button.c-op,button.c-vp,button.c-opn,button.c-jb,button.c-rpx{border:0;font:inherit;cursor:pointer}
button.c-op{font-size:13px;font-weight:500}
.c-phi{display:grid;place-items:center;inline-size:100%;block-size:100%;background:var(--fill);color:var(--text-3)}
.c-phi{align-content:center;justify-items:center;gap:6px}.c-phi .ic{inline-size:44px;block-size:44px}
.c-phh{max-inline-size:80%;text-align:center;font-size:13px;line-height:18px;color:var(--text-2)}
.c-audio{inline-size:100%;block-size:40px}
.c-txt{overflow-wrap:anywhere;white-space:pre-wrap}
/* a bubble's "⋯" menu: quiet at rest, shown on hover, focus or while open (always on touch) */
.c-mm{position:absolute;inset-block-start:4px;inset-inline-end:6px;opacity:0}
.c-mm .ovf{inline-size:28px;block-size:28px;background:var(--b-in);border:1px solid var(--b-in-bd)}.c-mm .ovf .ic{width:16px;height:16px}
.c-b:hover .c-mm,.c-mm:focus-within,.c-mm:has([aria-expanded=true]){opacity:1}
@media (hover:none){.c-mm{opacity:1}}
.c-older{display:inline-flex;align-items:center;gap:6px;align-self:center;block-size:32px;padding:0 14px;border-radius:16px;background:var(--b-in);border:1px solid var(--b-in-bd);color:var(--link);font-size:13.5px;font-weight:600}
.c-older .ic{inline-size:14px;block-size:14px}
.c-retry{border:0;background:none;font:inherit;font-weight:600;color:var(--link);text-decoration:underline;cursor:pointer;margin-inline-start:6px}
button.c-sendb{border:0;cursor:pointer}
button.c-sendb:disabled{cursor:not-allowed}
.c-cp{min-block-size:0;flex:1}
.c-older{display:inline-flex;align-items:center;gap:6px;align-self:center;block-size:32px;padding:0 14px;border-radius:16px;background:var(--b-in);border:1px solid var(--b-in-bd);color:var(--link);font-size:13.5px;font-weight:600}
.c-older .ic{inline-size:14px;block-size:14px}
.c-retry{border:0;background:none;font:inherit;font-weight:600;color:var(--link);text-decoration:underline;cursor:pointer;margin-inline-start:6px}
button.c-sendb{border:0;cursor:pointer}
button.c-sendb:disabled{cursor:not-allowed}
.c-pn .srch{margin:0 16px 8px}
.c-pn-people,.c-pn-rooms{background:var(--card)}
.c-bk .ic{inline-size:22px;block-size:22px}
.c-row-t{min-inline-size:0}
.c-wabar .c-mb .acct{position:relative}
.c-wabar .ovf{border:1px solid var(--line-2);border-radius:12px;background:var(--card)}
.c-wa.c-solo{grid-template-columns:minmax(0,1fr)}
.c-aunote-chat{padding-block:8px 0;background:var(--card);border-block-end:1px solid var(--line);padding-block-end:8px}
.c-pgl{display:inline-flex;align-items:center;gap:6px;color:var(--link);font-weight:600}
.c-more{gap:16px;flex-wrap:wrap}
.c-repl{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--t2);white-space:nowrap}
.c-wabar .c-tx2{flex:1;min-inline-size:0}
@media (min-width:861px) and (max-width:1180px){.c-wa.c-rep.c-s-chat>.c-pn-people{display:flex}.c-wa.c-rep{grid-template-columns:288px minmax(0,1fr)}}
.c-fltw{flex:none;padding:0 16px 10px}
.c-fltw .fsel{display:flex;align-items:center;gap:10px}
.c-wtx{flex:none;font-size:13px;color:var(--t2);font-weight:600}
.c-rr .c-l2 .pl2{flex:none}
.c-card-chat{border:1px solid var(--line-2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.c-card-chat .c-msgs{min-block-size:96px;max-block-size:68vh}
.c-fwd .c-fi{display:inline-flex;align-items:center}
.c-fwd .c-many .ic+.ic{margin-inline-start:-8px}
.c-rx.c-rxm{background:var(--tile);color:var(--primary-deep)}

.c-pn .srch{flex:none;margin:0 16px 8px}
.c-pn .srch input{min-inline-size:0}
.c-pn .srch{flex:none;max-inline-size:none;block-size:42px}
.c-skey{max-inline-size:220px;overflow:hidden;text-overflow:ellipsis}
.c-ch .c-ct{min-inline-size:96px}
.c-wabar .c-mb{margin-inline-start:auto;flex:none;padding:0;border:0;background:none;block-size:auto}
.c-ch{min-inline-size:0;overflow:hidden}
.c-repl{flex:none}
@media (max-width:1180px){.c-skey{display:none}}
/* admin.css gives the section class .sec a bottom margin that the kit's secondary button shares by name */
.c-ch .btn.sec,.c-wabar .btn.sec,.c-pnh .btn.sec{margin-block-end:0}
.c-wabar .c-mb{display:flex;align-items:center}