@layer cs.components{.cs-chat{--chat-bg:var(--cs-accent-soft);--chat-edge:color-mix(in oklch, var(--cs-accent-line) 55%, transparent);--chat-name:var(--cs-ok-text);inline-size:fit-content;max-inline-size:100%;margin-block:var(--cs-space-3);padding:var(--cs-space-2) var(--cs-space-3);border-radius:var(--cs-radius-lg) var(--cs-radius-lg) var(--cs-radius-lg) var(--cs-radius-xs);background:var(--chat-bg);box-shadow:inset 0 0 0 var(--cs-bw) var(--chat-edge);color:var(--cs-text-1);font-size:var(--cs-text-md);line-height:var(--cs-lh-md);letter-spacing:var(--cs-track-md);overflow-wrap:anywhere;display:block}.cs-chat:has(+.cs-chat){margin-block-end:var(--cs-space-1-5)}.cs-chat+.cs-chat{margin-block-start:var(--cs-space-1-5)}.cs-chat>b:first-of-type{align-items:center;gap:var(--cs-space-1);vertical-align:.0625em;padding:.0625rem var(--cs-space-1-5);border-radius:var(--cs-radius-sm);background:var(--cs-accent-solid);color:var(--cs-accent-on-solid);font-size:var(--cs-text-2xs);line-height:var(--cs-lh-2xs);font-weight:var(--cs-weight-bold);letter-spacing:.01em;white-space:nowrap;display:inline-flex}.cs-chat--viewer{--chat-bg:var(--cs-surface-2);--chat-edge:var(--cs-line-2)}.cs-chat--viewer>b:first-of-type{vertical-align:baseline;color:var(--chat-name);font-size:inherit;line-height:inherit;letter-spacing:inherit;background:0 0;padding:0;display:inline}.cs-chat--viewer>b:first-of-type:after{content:":";color:var(--cs-text-2);font-weight:var(--cs-weight-regular)}.cs-chat[data-color=blue]{--chat-name:var(--cs-accent-text)}.cs-chat[data-color=green]{--chat-name:var(--cs-ok-text)}.cs-chat[data-color=amber]{--chat-name:var(--cs-warn-text)}.cs-chat[data-color=red]{--chat-name:var(--cs-err-text)}.cs-chat[data-color=cyan]{--chat-name:var(--cs-info-text)}.cs-chat[data-color=pink]{--chat-name:var(--cs-live-text)}.cs-chat code{padding:.0625rem var(--cs-space-1-5);border-radius:var(--cs-radius-sm);background:var(--cs-surface-sunken);box-shadow:inset 0 0 0 var(--cs-bw) var(--cs-line-2);color:var(--cs-text-1);font-family:var(--cs-font-mono);font-feature-settings:var(--cs-font-features-mono);font-size:.92em;font-weight:var(--cs-weight-medium)}.cs-chat-mention{color:var(--cs-text-1);font-weight:var(--cs-weight-semibold)}.cs-chat-time{color:var(--cs-text-3);font-size:var(--cs-text-xs);font-variant-numeric:tabular-nums}.cs-chat-badges{vertical-align:-.1875rem;gap:.1875rem;display:inline-flex}.cs-chat-badge{--badge-bg:var(--cs-surface-4);--badge-ink:var(--cs-text-1);border-radius:var(--cs-radius-xs);background:var(--badge-bg);block-size:1.125rem;inline-size:1.125rem;color:var(--badge-ink);place-items:center;display:inline-grid}.cs-chat-badge svg{block-size:.75rem;inline-size:.75rem}.cs-chat-badge[data-badge=broadcaster]{--badge-bg:var(--cs-err-solid);--badge-ink:var(--cs-err-on-solid)}.cs-chat-badge[data-badge=moderator]{--badge-bg:var(--cs-ok-solid);--badge-ink:var(--cs-ok-on-solid)}.cs-chat-badge[data-badge=vip]{--badge-bg:var(--cs-live-solid);--badge-ink:var(--cs-live-on-solid)}.cs-chat-badge[data-badge=subscriber]{--badge-bg:var(--cs-accent-solid);--badge-ink:var(--cs-accent-on-solid)}.cs-chat-mark{flex:none;block-size:.75rem;inline-size:.75rem}.cs-chatlog{border:var(--cs-bw) solid var(--cs-line-1);border-radius:var(--cs-radius-lg);background:var(--cs-surface-sunken);min-inline-size:0;display:grid;position:relative;overflow:hidden}.cs-chatlog-head{align-items:center;gap:var(--cs-space-2);padding:var(--cs-space-2) var(--cs-space-3);border-block-end:var(--cs-bw) solid var(--cs-line-1);background:var(--cs-surface-1);color:var(--cs-text-2);font-size:var(--cs-text-xs);font-weight:var(--cs-weight-medium);display:flex}.cs-chatlog-head .cs-chatlog-channel{color:var(--cs-text-1);font-family:var(--cs-font-mono);font-feature-settings:var(--cs-font-features-mono)}.cs-chatlog-body{place-items:start;gap:var(--cs-space-1-5);padding:var(--cs-space-3);display:grid}.cs-chatlog-body>.cs-chat{margin:0}:root[data-cs-theme=contrast] .cs-chat{--chat-bg:var(--cs-surface-1);--chat-edge:var(--cs-accent-line)}:root[data-cs-theme=contrast] .cs-chat--viewer{--chat-bg:var(--cs-surface-2);--chat-edge:var(--cs-line-2)}:root[data-cs-theme=contrast] .cs-chatlog{border-color:var(--cs-line-2)}@media (forced-colors:active){.cs-chat,.cs-chatlog{border:1px solid canvastext}.cs-chatlog .cs-chatlog-head{border-block-end-color:canvastext}.cs-chat>b:first-of-type,.cs-chat-badge{border:1px solid canvastext}}}