[data-team-chat-toggle] { position:relative; }
.tc-shell .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tc-badge { position:absolute; z-index:2; top:calc(50% - 24px); left:calc(50% + 6px); display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border:0; border-radius:999px; background:var(--color-accent); color:var(--color-on-accent); font:800 12px/1 var(--font-body); font-variant-numeric:tabular-nums; pointer-events:none; }
.tc-badge[hidden],[data-team-chat-root][hidden],[data-team-chat-toggle][hidden],.tc-shell [hidden] { display:none!important; }
.tc-dialog { position:fixed; top:0; height:100dvh; display:flex; flex-direction:column; pointer-events:auto; background:var(--color-canvas); color:var(--color-text-primary); border-inline-end:1px solid var(--color-border-strong); box-shadow:12px 0 36px var(--color-shadow); font-family:var(--font-body); }
.tc-head { display:grid; grid-template-columns:minmax(230px,30%) minmax(0,1fr); min-height:64px; border-bottom:1px solid var(--color-border); flex:none; }
.tc-heading { display:flex; align-items:center; padding:0 20px; border-inline-end:1px solid var(--color-border); }
.tc-head h2 { margin:0; font-size:19px; letter-spacing:-.025em; font-weight:700; }
.tc-head button { display:grid; place-items:center; border:0; background:transparent; color:var(--color-text-secondary); border-radius:7px; width:34px; height:34px; flex:none; cursor:pointer; font-size:24px; }
.tc-head button:hover { color:var(--color-text-primary); background:var(--color-hover); }
.tc-layout { display:grid; grid-template-columns:minmax(230px,30%) minmax(0,1fr); min-height:0; flex:1; }
.tc-peers-pane { border-inline-end:1px solid var(--color-border); display:flex; flex-direction:column; min-height:0; }
.tc-search { display:block; padding:16px 12px; }
.tc-search input { width:100%; height:40px; padding:0 12px; border:1px solid var(--color-border-strong); border-radius:7px; color:inherit; background:var(--color-input); }
.tc-peers { flex:1; min-height:0; overflow:auto; overflow-anchor:none; padding:0 8px 12px; }
.tc-peer { display:flex; align-items:center; width:100%; min-width:0; gap:10px; padding:12px 10px; border:0; border-radius:7px; background:transparent; color:inherit; text-align:start; cursor:pointer; }
.tc-peer:hover { background:var(--color-hover); }
.tc-peer.is-active { background:var(--color-selected); }
.tc-avatar { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:var(--color-surface-soft); border:1px solid var(--color-border); font-size:12px; font-weight:700; }
.tc-peer-copy { flex:1; min-width:0; display:grid; gap:4px; }
.tc-peer-copy strong,.tc-peer-copy small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tc-peer-copy strong { font-size:13px; }
.tc-peer-copy small { color:var(--color-text-secondary); font-size:12px; }
.tc-unread { background:var(--color-accent); color:var(--color-on-accent); min-width:19px; padding:2px 5px; border-radius:12px; font-size:11px; text-align:center; }
.tc-conversation { display:flex; flex-direction:column; min-width:0; min-height:0; }
.tc-thread-head { padding:12px 18px; min-width:0; display:flex; align-items:center; gap:12px; }
.tc-thread-copy { flex:1; min-width:0; display:flex; align-items:baseline; gap:10px; }
.tc-thread-head strong { font-size:15px; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tc-thread-head span { color:var(--color-text-secondary); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tc-thread-head span:empty { display:none; }
.tc-thread-head [data-tc-back] { display:none; }
.tc-message-wrap { position:relative; flex:1; min-height:0; }
.tc-messages { height:100%; overflow:auto; overflow-anchor:none; padding:20px; scroll-behavior:auto; }
.tc-message-list { display:flex; flex-direction:column; gap:10px; }
.tc-message { align-self:flex-start; max-width:88%; padding:10px 14px; border:0; border-radius:14px 14px 14px 4px; background:var(--color-surface-raised); color:var(--color-text-primary); box-shadow:0 1px 2px color-mix(in srgb,var(--color-shadow) 35%,transparent); }
.tc-message.is-self { align-self:flex-end; border-radius:14px 14px 4px 14px; background:color-mix(in srgb,var(--color-accent) 65%,#10365c); color:#fff; box-shadow:none; }
html[data-theme] .tc-shell .tc-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:15px; font-weight:550; color:inherit; opacity:1; }
.tc-message footer { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:5px; color:var(--color-text-secondary); font-size:10px; }
html[data-theme] .tc-shell .tc-message footer :is(time,span,button) { color:inherit; }
.tc-message.is-self footer { color:rgba(255,255,255,.95); }
/* Use the Inbox palette, rather than button accents, in every dark preset. */
html[data-theme="dark"] .tc-shell .tc-message { background:var(--color-message-inbound); color:var(--color-text-primary); }
html[data-theme="dark"] .tc-shell .tc-message:not(.is-failed) { box-shadow:none; }
html[data-theme="dark"] .tc-shell .tc-message.is-self { background:var(--color-message-outbound); color:var(--color-text-inverse); }
html[data-theme="dark"] .tc-shell .tc-message footer { color:var(--color-text-secondary); }
html[data-theme="dark"] .tc-shell .tc-message footer :is(time,span) { opacity:.68; }
html[data-theme="dark"] .tc-shell .tc-message.is-self footer :is(time,span) { opacity:.58; }
.tc-message footer button { cursor:pointer; color:inherit; background:transparent; border:0; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.tc-message.is-failed { box-shadow:inset 0 0 0 1px var(--color-danger); }
.tc-compose { display:flex; align-items:flex-end; gap:12px; padding:16px 20px; border-top:1px solid var(--color-border); }
.tc-compose textarea { flex:1; width:0; min-width:0; resize:vertical; min-height:58px; max-height:150px; padding:10px 12px; border:1px solid var(--color-border-strong); border-radius:8px; color:inherit; background:var(--color-input); font-size:14px; line-height:1.5; }
.tc-compose>button { border:0; border-radius:7px; background:var(--color-accent); color:var(--color-on-accent); height:40px; padding:0 16px; cursor:pointer; font-weight:600; }
.tc-compose>button:disabled { opacity:.5; cursor:default; }
.tc-error { margin:0; padding:10px 20px; font-size:12px; color:var(--color-danger); border-bottom:1px solid var(--color-border); }
.tc-error button { margin-inline-start:10px; cursor:pointer; color:inherit; border:1px solid var(--color-border); border-radius:5px; background:transparent; }
.tc-empty,.tc-list-empty { padding:20px 12px; color:var(--color-text-secondary); font-size:13px; line-height:1.6; }
.tc-older,.tc-more { padding:10px; width:100%; border:0; background:transparent; color:var(--color-accent); font-size:12px; cursor:pointer; }
.tc-new { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); border:1px solid var(--color-border); border-radius:18px; padding:8px 14px; white-space:nowrap; background:var(--color-surface-raised); color:var(--color-accent); box-shadow:0 3px 12px var(--color-shadow); cursor:pointer; }
.tc-shell :is(button,input,textarea):focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
@media(max-width:700px) {
 .tc-layout { grid-template-columns:1fr; }
 .tc-conversation { display:none; }
 .tc-shell.has-thread .tc-conversation { display:flex; }
 .tc-shell.has-thread .tc-peers-pane { display:none; }
 .tc-head { grid-template-columns:minmax(0,1fr) auto; min-height:60px; }
 .tc-heading { padding:0 16px; border:0; }
 .tc-thread-copy { display:none; }
 .tc-shell.has-thread .tc-head { grid-template-columns:minmax(0,1fr); }
 .tc-shell.has-thread .tc-heading { display:none; }
 .tc-shell.has-thread .tc-thread-copy { display:flex; }
 .tc-shell.has-thread [data-tc-back] { display:grid; }
 .tc-thread-head { padding:12px; gap:8px; }
 .tc-thread-head span { display:none; }
 .tc-messages { padding:14px; }
 .tc-compose { padding:12px; }
}
