:root {
    --chat-ink: #172033;
    --chat-muted: #475569;
    --chat-line: #d8e1ea;
    --chat-line-strong: #7c8da1;
    --chat-brand: #2563eb;
    --chat-brand-dark: #1d4ed8;
    --chat-soft: #eff6ff;
    --chat-brand-line: #bfdbfe;
    --chat-bg: #f5f7fa;
    --chat-surface-hover: #f8fafc;
    --chat-warning: #b45309;
    --chat-warning-soft: #fffbeb;
    --chat-warning-line: #fde68a;
    --chat-danger: #b91c1c;
    --chat-danger-soft: #fef2f2;
}

.sr-only { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.chat-hub { color:var(--chat-ink); }
.chat-launcher { align-items:center; background:var(--chat-brand); border:0; border-radius:999px; bottom:24px; box-shadow:0 12px 34px rgba(29,78,216,.28); color:#fff; cursor:pointer; display:flex; font-weight:800; gap:8px; min-height:50px; padding:10px 16px; position:fixed; right:24px; z-index:70; }
.chat-launcher:hover { background:var(--chat-brand-dark); }
.chat-launcher-icon { font-size:19px; line-height:1; }
.chat-unread-badge { align-items:center; background:var(--chat-brand); border-radius:999px; color:#fff; display:inline-flex; font-size:11px; font-weight:800; justify-content:center; line-height:1; min-height:20px; min-width:20px; padding:4px 6px; }
.chat-backdrop { background:rgba(23,32,51,.18); border:0; inset:0; position:fixed; z-index:59; }
.chat-hub--widget .chat-panel { bottom:16px; box-shadow:0 20px 54px rgba(23,32,51,.24); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); position:fixed; right:16px; top:16px; width:min(420px,calc(100vw - 32px)); z-index:60; }
.chat-panel { background:#fff; border:1px solid var(--chat-line); border-radius:14px; display:grid; grid-template-rows:auto auto minmax(0,1fr); min-height:0; overflow:hidden; }
.chat-panel-header { align-items:center; border-bottom:1px solid var(--chat-line); display:flex; gap:12px; justify-content:space-between; min-height:66px; padding:10px 13px 10px 16px; }
.chat-panel-heading,.chat-panel-actions { align-items:center; display:flex; gap:9px; min-width:0; }
.chat-panel-heading > div { min-width:0; }
.chat-panel-heading h2,.chat-panel-heading span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-panel-heading h2 { font-size:15px; margin:0; }
.chat-panel-heading span { color:var(--chat-muted); font-size:12px; }
.chat-icon-button { align-items:center; background:#fff; border:1px solid var(--chat-line); border-radius:8px; color:var(--chat-ink); cursor:pointer; display:inline-flex; font-size:17px; height:44px; justify-content:center; line-height:1; padding:0; text-decoration:none; width:44px; }
.chat-icon-button:hover { background:var(--chat-surface-hover); color:var(--chat-ink); text-decoration:none; }
.chat-icon-button.is-unavailable { color:var(--chat-muted); cursor:not-allowed; opacity:.65; }
.chat-connectivity { background:var(--chat-warning-soft); border-bottom:1px solid var(--chat-warning-line); color:var(--chat-warning); font-size:12px; padding:8px 13px; }
.chat-layout { display:grid; grid-template-columns:300px minmax(0,1fr); min-height:0; }
.chat-hub--workspace .chat-panel { height:calc(100vh - 170px); height:calc(100dvh - 170px); max-height:860px; min-height:420px; }
.chat-hub--popout,.chat-hub--popout .chat-panel { height:100vh; height:100dvh; }
.chat-hub--popout .chat-panel { border:0; border-radius:0; }
.chat-hub--popout .chat-layout { grid-template-columns:1fr; }
.chat-hub--popout .chat-sidebar { display:none; }
.chat-hub--widget .chat-layout { grid-template-columns:1fr; }
.chat-sidebar { border-right:1px solid var(--chat-line); display:flex; flex-direction:column; min-height:0; }
.chat-hub--widget .chat-panel.has-active-room .chat-sidebar { display:none; }
.chat-hub--widget .chat-panel:not(.has-active-room) .chat-conversation { display:none; }
.chat-create-actions { display:grid; gap:8px; grid-template-columns:1fr 1fr; padding:12px; }
.chat-button,.chat-send-button { background:var(--chat-brand); border:1px solid var(--chat-brand); border-radius:8px; color:#fff; cursor:pointer; font-weight:750; min-height:44px; padding:7px 11px; }
.chat-button:hover,.chat-send-button:hover { background:var(--chat-brand-dark); }
.chat-button:disabled,.chat-send-button:disabled,.chat-load-more:disabled,.chat-load-older:disabled { cursor:wait; opacity:.65; }
.chat-button--secondary { background:#fff; border-color:var(--chat-line-strong); color:var(--chat-ink); }
.chat-button--secondary:hover { background:var(--chat-surface-hover); }
.chat-text-button { background:transparent; border:0; color:var(--chat-brand); cursor:pointer; padding:7px; }
.chat-create-form { border-bottom:1px solid var(--chat-line); display:grid; gap:9px; padding:12px; }
.chat-create-form label,.chat-create-form legend { font-size:12px; font-weight:750; }
.chat-create-form input,.chat-create-form select { background:#fff; border:1px solid var(--chat-line-strong); border-radius:8px; color:var(--chat-ink); min-height:38px; padding:8px 9px; width:100%; }
.chat-form-actions { align-items:center; display:flex; gap:5px; }
.chat-field-error { color:var(--chat-danger); font-size:12px; margin:0; }
.chat-people-fieldset { border:0; margin:0; min-width:0; padding:0; }
.chat-people-options { border:1px solid var(--chat-line); border-radius:8px; max-height:150px; overflow:auto; }
.chat-person-option { align-items:start; border-bottom:1px solid var(--chat-line); cursor:pointer; display:grid; gap:8px; grid-template-columns:auto minmax(0,1fr); margin:0; padding:8px; }
.chat-person-option:last-child { border-bottom:0; }
.chat-person-option input { margin-top:3px; min-height:auto; width:auto; }
.chat-person-option strong,.chat-person-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-person-option small { color:var(--chat-muted); }
.chat-people-empty { color:var(--chat-muted); display:block; font-size:12px; padding:12px; }
.chat-room-list { min-height:0; overflow:auto; }
.chat-room-item { align-items:center; border-top:1px solid var(--chat-line); color:var(--chat-ink); display:grid; gap:10px; grid-template-columns:38px minmax(0,1fr); padding:11px 12px; }
.chat-room-item:hover { background:var(--chat-surface-hover); text-decoration:none; }
.chat-room-item.active { background:var(--chat-soft); box-shadow:inset 3px 0 0 var(--chat-brand); text-decoration:none; }
.chat-avatar { align-items:center; background:var(--chat-soft); border-radius:50%; color:var(--chat-brand-dark); display:flex; font-weight:800; height:38px; justify-content:center; width:38px; }
.chat-room-copy,.chat-room-title,.chat-room-preview { min-width:0; }
.chat-room-title { align-items:center; display:flex; gap:7px; justify-content:space-between; }
.chat-room-title strong,.chat-room-preview { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-room-preview { color:var(--chat-muted); font-size:12px; margin-top:2px; }
.chat-list-empty { color:var(--chat-muted); display:grid; gap:4px; padding:28px 20px; text-align:center; }
.chat-list-empty strong { color:var(--chat-ink); }
.chat-load-more,.chat-load-older { background:#fff; border:1px solid var(--chat-line); border-radius:8px; color:var(--chat-brand); cursor:pointer; font-weight:700; margin:10px auto; min-height:40px; padding:7px 12px; }
.chat-load-more { display:block; }
.chat-load-older { align-self:center; flex:0 0 auto; }
.chat-conversation { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; }
.chat-conversation-context { align-items:center; border-bottom:1px solid var(--chat-line); color:var(--chat-muted); display:flex; font-size:12px; gap:10px; justify-content:space-between; min-width:0; padding:7px 14px; }
.chat-conversation-context > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-new-messages { background:var(--chat-soft); border:1px solid var(--chat-brand-line); border-radius:999px; color:var(--chat-brand-dark); cursor:pointer; flex:0 0 auto; font-size:12px; font-weight:800; min-height:32px; padding:4px 10px; }
.chat-messages { background:var(--chat-surface-hover); display:flex; flex-direction:column; gap:11px; min-height:0; overflow:auto; padding:15px; }
.chat-message { align-self:flex-start; max-width:min(82%,620px); }
.chat-message.own { align-self:flex-end; }
.chat-message-meta { align-items:center; color:var(--chat-muted); display:flex; font-size:11px; gap:8px; margin:0 4px 3px; }
.chat-message.own .chat-message-meta { justify-content:flex-end; }
.chat-message-bubble { background:#fff; border:1px solid var(--chat-line); border-radius:5px 13px 13px 13px; overflow-wrap:anywhere; padding:9px 11px; white-space:pre-wrap; }
.chat-message.own .chat-message-bubble { background:var(--chat-brand); border-color:var(--chat-brand); border-radius:13px 5px 13px 13px; color:#fff; }
.chat-conversation-empty { align-items:center; color:var(--chat-muted); display:flex; flex:1; flex-direction:column; justify-content:center; min-height:150px; padding:28px; text-align:center; }
.chat-conversation-empty strong { color:var(--chat-ink); }
.chat-conversation-empty--large { height:100%; }
.chat-composer { align-items:end; background:#fff; border-top:1px solid var(--chat-line); display:grid; gap:9px; grid-template-columns:minmax(0,1fr) auto; padding:11px; }
.chat-composer textarea { border:1px solid var(--chat-line-strong); border-radius:9px; max-height:180px; min-height:66px; padding:9px 10px; resize:vertical; width:100%; }
.chat-composer .chat-field-error { grid-column:1/-1; }
.chat-send-button { min-width:72px; }
.chat-popout-body { min-height:100vh; min-height:100dvh; }
.chat-hub button:focus-visible,.chat-hub a:focus-visible,.chat-hub textarea:focus-visible,.chat-hub input:focus-visible,.chat-hub select:focus-visible { outline:3px solid rgba(37,99,235,.32); outline-offset:2px; }

@media (max-width:1050px) {
    .chat-hub--workspace .chat-panel { height:calc(100vh - 145px); height:calc(100dvh - 145px); min-height:0; }
    .chat-hub--workspace .chat-layout { grid-template-columns:1fr; }
    .chat-hub--workspace .chat-panel.has-active-room .chat-sidebar { display:none; }
    .chat-hub--workspace .chat-panel:not(.has-active-room) .chat-conversation { display:none; }
}

@media (max-width:800px) {
    .chat-launcher { bottom:14px; right:14px; }
    .chat-hub--widget .chat-panel { border:0; border-radius:0; bottom:0; height:100vh; height:100dvh; left:0; max-height:none; right:0; top:0; width:100%; }
    .chat-message { max-width:90%; }
}

@media (min-width:1051px) {
    .chat-hub--workspace .chat-back-button { display:none; }
}