.chat-categories { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; flex-shrink:0; }
.chat-category { display:flex; align-items:center; justify-content:center; flex:0 0 auto; gap:8px; min-height:40px; padding:8px 14px; margin:0; border:1px solid var(--line); border-radius:9px; background:#fff; text-align:left; cursor:pointer; color:var(--ink); font:inherit; transition:border-color .15s,background .15s; }
.chat-category:hover { border-color:#bacaac; }
.chat-category[aria-pressed="true"] { border-color:#8caa60; background:#f6f9ef; box-shadow:inset 0 0 0 1px #8caa60; }
.chat-category>.icon { width:18px; height:18px; color:#75984f; }
.chat-category strong { font-size:12px; white-space:nowrap; }
.chat-unread { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:24px; height:24px; padding:0 7px; background:var(--ink); color:#fff; border-radius:20px; font-size:10px; font-weight:700; }
.chat-layout { display:grid; grid-template-columns:clamp(210px,24%,280px) minmax(0,1fr); gap:12px; flex:1; min-height:0; overflow:hidden; align-items:stretch; }
.chat-sidebar,.chat-panel { min-width:0; margin:0; overflow:hidden; }
.chat-sidebar-head { display:flex; flex-direction:column; gap:8px; padding:12px; border-bottom:1px solid var(--line); }
.chat-sidebar-head h2 { font-size:18px; }
.chat-sidebar-head .btn { width:100%; justify-content:center; min-height:36px; padding:8px; }
.chat-sidebar-head .search { width:100%; min-width:0; }
.chat-list-note { padding:24px; color:var(--muted); font-size:12px; }
.chat-list-empty { padding:36px 24px; text-align:center; }
.chat-list-empty>.icon { color:#a8b1b5; width:30px; height:30px; margin-bottom:16px; }
.chat-list-empty h3 { font-size:13px; line-height:1.6; }
.chat-list-empty p { font-size:11px; color:var(--muted); line-height:1.8; margin:10px 0 0; }
.chat-list-item { display:flex; align-items:center; gap:10px; padding:12px; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; font:inherit; color:var(--ink); }
.chat-list-item:hover { background:#fafbf7; }
.chat-list-item[aria-pressed="true"] { background:#f0f5e6; box-shadow:inset 3px 0 0 #8caa60; }
.chat-list-item .avatar { width:36px; height:36px; flex-shrink:0; font-size:11px; }
.chat-list-copy { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.chat-list-copy strong,.chat-list-copy>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-copy strong { font-size:12px; }
.chat-list-copy>span { font-size:11px; color:var(--muted); }
.chat-list-copy small { font-size:10px; color:var(--muted); }
.chat-panel { display:flex; flex-direction:column; }
.chat-panel>.empty { margin:auto 0; padding:64px 28px; }
.chat-head { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.chat-back { background:none; border:0; cursor:pointer; padding:0; margin:0; align-self:flex-start; font:inherit; font-size:11px; color:var(--muted); }
.chat-person { display:flex; flex:1 1 150px; gap:10px; align-items:center; min-width:0; }
.chat-person>.avatar { flex-shrink:0; }
.chat-person>div { min-width:0; }
.chat-person h2 { font-size:16px; overflow-wrap:anywhere; }
.chat-person p { font-size:11px; color:var(--muted); line-height:1.6; margin:6px 0 0; }
.chat-head .actions { gap:6px; }
.chat-search { display:flex; gap:8px; margin:0; padding:8px 16px; border-bottom:1px solid var(--line); }
.chat-search input { min-width:0; flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:12px; background:#fff; }
.chat-history { flex:1; max-height:55vh; min-height:220px; overflow:auto; padding:18px 24px; overscroll-behavior:contain; }
.chat-history .muted { font-size:12px; line-height:1.8; }
.chat-message { position:relative; width:fit-content; max-width:min(86%,560px); background:#f5f6f8; padding:6px 10px; border-radius:12px 12px 12px 4px; margin:0 auto 6px 0; overflow-wrap:anywhere; }
.chat-message.chat-own { background:#f0f5e6; border-radius:12px 12px 4px 12px; margin-left:auto; margin-right:0; }
.chat-message.chat-rich { width:min(86%,360px); }
.chat-message header { margin-bottom:2px; font-size:12px; line-height:1.3; }
.chat-message header strong { color:#377956; font-weight:700; }
.chat-message p { white-space:pre-wrap; margin:0; font-size:14px; line-height:1.4; }
.chat-announcement { display:block; color:#377956; font-size:11px; font-weight:600; margin-bottom:3px; }
.chat-day { text-align:center; margin:8px 0 12px; color:var(--muted); font-size:11px; }
.chat-quote { min-width:0; border-left:3px solid #377956; border-radius:4px; margin:10px 0; padding:6px 10px; background:rgba(55,121,86,.06); font-size:12px; line-height:1.5; }
.chat-quote strong { display:block; color:#377956; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-quote span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.chat-quick-reply,.chat-reply-cancel { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:24px; cursor:pointer; }
.chat-quick-reply { position:absolute; top:50%; right:-32px; width:30px; height:32px; transform:translateY(-50%); opacity:0; pointer-events:none; transition:opacity .12s; font-size:20px; }
.chat-own .chat-quick-reply { right:auto; left:-32px; }
.chat-message:hover .chat-quick-reply,.chat-message:focus-within .chat-quick-reply { opacity:1; pointer-events:auto; }
.chat-quick-reply:hover,.chat-reply-cancel:hover { background:rgba(55,121,86,.1); }
@media (hover:none) { .chat-quick-reply { opacity:1; pointer-events:auto; } }
.chat-message .chat-quote { margin:3px 0 5px; padding:4px 8px; }
.chat-message-meta { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:5px; margin-top:2px; color:var(--muted); font-size:10px; line-height:1.3; }
.chat-message-meta small { font-size:10px; }
.chat-message-menu summary { display:grid; place-items:center; width:28px; height:24px; border-radius:5px; cursor:pointer; list-style:none; color:var(--muted); }
.chat-message-menu summary::-webkit-details-marker { display:none; }
.chat-message-menu summary:hover,.chat-message-menu summary:focus-visible { background:rgba(55,121,86,.1); }
.chat-message-menu[open] { flex-basis:100%; }
.chat-message-menu[open] summary { margin-left:auto; }
.chat-message-menu>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; padding-top:4px; }
.chat-message-menu .btn { font-size:11px; padding:6px; min-height:32px; background:transparent; }
.chat-compose { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; border-top:1px solid var(--line); padding:10px 16px; }
.chat-compose textarea { flex:1; min-width:140px; border:1px solid var(--line); border-radius:10px; padding:12px; font:inherit; font-size:13px; resize:vertical; background:#fff; }
.chat-compose [data-reply] { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.chat-compose .chat-quote { flex:1; margin:0; }
.chat-compose [data-reply]:empty { display:none; }
.chat-compose [data-uploads] { width:100%; min-width:0; }
.chat-compose [data-uploads]:empty,.chat-attachments:empty { display:none; }
.chat-attach-button { position:relative; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:26px; flex-shrink:0; overflow:hidden; }
.chat-attach-button:focus-within { outline:2px solid var(--ink); }
.chat-attach-button input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.chat-attachments { display:grid; gap:6px; margin-top:4px; }
.chat-attachment,.chat-upload { display:flex; align-items:center; gap:10px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.8); text-align:left; font:inherit; color:var(--ink); }
.chat-attachment { width:100%; cursor:pointer; }
.chat-attachment:hover { border-color:var(--ink); }
.chat-attachment>span:last-child,.chat-upload>span { flex:1; min-width:0; }
.chat-attachment strong,.chat-upload strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.chat-attachment small,.chat-upload small { display:block; margin-top:4px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.chat-file-symbol { font-size:25px; width:30px; flex-shrink:0; text-align:center; }
.chat-upload { margin-bottom:8px; }
.chat-upload>button { cursor:pointer; }
.chat-media-preview { display:block; width:100%; max-height:65vh; object-fit:contain; background:#13232c; border-radius:10px; }
.chat-notice { padding:20px 24px; margin:0; border-top:1px solid var(--line); font-size:12px; line-height:1.7; color:var(--muted); }
.chat-error { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; margin-bottom:20px; }
.chat-error p { color:#a9343e; white-space:pre-wrap; margin:0; font-size:12px; line-height:1.7; }
.chat-error .btn { flex-shrink:0; }
.chat-vote fieldset { border:0; padding:0; }
.chat-vote label { display:flex; gap:10px; margin:12px 0; align-items:center; font-size:12px; }
.chat-vote label span { margin-left:auto; }
.chat-vote input { width:auto; }
.chat-vote small { display:block; margin:12px 0; color:var(--muted); font-size:10px; }
.chat-vote legend { font-size:12px; font-weight:600; }
.chat-vote .chat-vote-option { padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.55); cursor:pointer; }
.chat-vote .chat-vote-option:has(input:checked) { border-color:#8eae55; background:#f1f6e5; }
.chat-vote .chat-vote-copy { flex:1; min-width:0; margin:0; }
.chat-vote .chat-vote-copy>span { display:block; margin:0; overflow-wrap:anywhere; }
.chat-vote .chat-vote-copy small { display:inline; margin:0 0 0 6px; color:#377956; }
.chat-vote .chat-vote-count { flex:0; margin:0; font-weight:600; }
.chat-vote .chat-vote-bar { appearance:none; display:block; width:100%; height:4px; margin-top:8px; border:0; background:#e5ebde; border-radius:3px; overflow:hidden; }
.chat-vote-bar::-webkit-progress-bar { background:#e5ebde; }
.chat-vote-bar::-webkit-progress-value { background:#8eae55; }
.chat-vote-bar::-moz-progress-bar { background:#8eae55; }
.chat-vote input { flex-shrink:0; }
.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; }
@media(min-width:801px) { .chat-back { display:none; } }
@media(max-width:800px) {
  .chat-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
  .chat-category { padding:8px; min-height:44px; gap:6px; }
  .chat-category strong { font-size:11px; }
  .chat-layout { display:block; min-height:0; }
  .chat-panel { display:none; }
  .chat-open .chat-panel { display:flex; }
  .chat-open .chat-sidebar,.chat-open .chat-categories,.chat-open>.page-heading { display:none; }
  .chat-sidebar { height:100%; }
  .chat-history { max-height:48vh; padding:18px; }
  .chat-back { flex-basis:100%; }
  .chat-head { padding:10px 12px; }
  .chat-search,.chat-compose { padding:8px 12px; }
  .chat-error { align-items:flex-start; flex-direction:column; }
}
.chat-compose [data-uploads] { max-height: 160px; overflow-y: auto; }
.chat-upload .btn { padding: 7px 10px; font-size: 12px; }

/* Chats own the remaining viewport; navigation stays compact and lists scroll. */
.workspace-main:has(> .content > .chat-categories) { height:100dvh; min-height:0; overflow:hidden; }
.workspace-main:has(> .content > .chat-categories) > .topbar { height:60px; flex-shrink:0; }
.workspace-main:has(> .content > .chat-categories) > .workspace-footer { display:none; }
.content:has(> .chat-categories) { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:14px; max-width:none; }
.content:has(> .chat-categories) > .page-heading { margin-bottom:10px; flex-shrink:0; }
.content:has(> .chat-categories) > .page-heading h1 { font-size:22px; line-height:1.25; }
.chat-open > .page-heading,.chat-open > .chat-categories,.chat-open > .chat-error { flex-shrink:0; }
.chat-open > .chat-error { max-height:15%; overflow:auto; }
.chat-open .chat-layout { flex:1; min-height:0; overflow:hidden; }
.chat-open .chat-panel { height:100%; min-height:0; }
.chat-sidebar { display:flex; flex-direction:column; min-height:0; }
.chat-sidebar-head { flex-shrink:0; }
[data-chat-list] { min-height:0; overflow:auto; overscroll-behavior:contain; }
.chat-open .chat-head,.chat-open .chat-search,.chat-open .chat-compose,.chat-open .chat-notice { flex-shrink:0; }
.chat-open .chat-head { max-height:30%; overflow:auto; }
.chat-open .chat-history { flex:1; min-height:0; max-height:none; padding-top:0; padding-bottom:0; }
.chat-open [data-messages] { padding:12px 0; }
.chat-open .chat-compose { max-height:50%; overflow:hidden; background:#fff; }
.chat-open .chat-compose textarea { max-height:min(120px,12dvh); }
.chat-open .chat-compose [data-uploads] { max-height:min(120px,15dvh); min-height:0; flex:0 1 auto; }
@media(max-width:800px) {
  .content:has(> .chat-categories) { padding:8px; }
  .content.chat-open > .page-heading { display:none; }
  .chat-open .chat-sidebar { display:none; }
  .chat-open .chat-head { padding:10px 12px; gap:8px; }
  .chat-open .chat-search,.chat-open .chat-compose { padding:8px 12px; }
}

.chat-compose { flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
.chat-compose-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-width:0; flex-shrink:0; }
.chat-compose [data-reply] { flex-shrink:0; }
.chat-compose textarea { min-height:44px; min-width:0; }
.chat-send-button { width:44px; height:44px; padding:0; justify-content:center; flex-shrink:0; }
.chat-media-tile { position:relative; display:block; width:100%; max-width:360px; aspect-ratio:4/3; padding:0; overflow:hidden; border:0; border-radius:12px; background:#13232c; color:white; cursor:pointer; }
.chat-media-tile img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; }
.chat-media-tile .chat-media-fallback { position:absolute; inset:0; display:grid; place-items:center; font-size:32px; text-shadow:0 1px 8px #13232c; }
.chat-video-tile .chat-media-fallback { z-index:2; }
.chat-media-tile small { position:absolute; z-index:2; left:8px; bottom:8px; padding:4px 8px; border-radius:6px; background:rgba(0,0,0,.55); font-size:11px; }
.chat-media-tile:focus-visible { outline:3px solid var(--green); outline-offset:3px; }