/* Workplace chat layout; colors and form metrics come from theme.css/form.css. */
.shell:has(.wc-page){grid-template-columns:84px minmax(0,1fr)}
.shell:has(.wc-page) .sidebar{width:auto;padding:18px 8px}
.shell:has(.wc-page) .brand{font-size:18px;letter-spacing:1px}
.shell:has(.wc-page) :is(.brand-sub,.nav-label,.nav-group-label,.sidebar-foot,.sidebar-toggle){display:none}
.shell:has(.wc-page) .nav a{justify-content:center;padding:16px 8px}
.shell:has(.wc-page) .nav-icon{display:block;font-size:23px}
.shell:has(.wc-page) :is(.topbar,.demo){display:none}
#content.wc-page{padding:0;max-width:none;height:100dvh}
.wc-layout{height:100dvh;min-height:0;grid-template-columns:330px minmax(0,1fr);border:0;border-radius:0}
.wc-layout.info-open{grid-template-columns:330px minmax(0,1fr) 300px}
.wc-layout .wp-channels{display:flex;flex-direction:column;padding:16px 10px;gap:12px;overflow:hidden}
.wc-left-head{display:flex;align-items:center;gap:6px}.wc-left-head h1{font-size:22px;margin:0;flex:1}
.wc-online{display:flex;gap:12px;overflow-x:auto;flex:none;padding:4px}.wc-online button{border:0;background:none;color:var(--muted);display:grid;justify-items:center;gap:4px;cursor:pointer}.wc-online>small{color:var(--muted)}
.wc-avatar{position:relative;display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--royal-soft);color:var(--brand);font-size:12px;font-weight:800}
.wc-avatar.on:after,.wc-avatar.away:after{content:'';position:absolute;right:0;bottom:0;width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--green)}.wc-avatar.away:after{background:var(--orange)}
.wc-filters{display:flex;gap:5px;flex-wrap:wrap}.wc-filters button{border:0;border-radius:20px;background:var(--bg);padding:6px 10px;font-size:11px;color:var(--muted);cursor:pointer}.wc-filters [aria-pressed=true]{background:var(--royal-soft);color:var(--royal);font-weight:700}
.wc-list{flex:1;overflow:auto;min-height:0}.wc-layout .wp-channel{padding:12px 8px;gap:10px;max-width:none}.wc-layout .wp-channel span{white-space:normal;overflow:visible}.wc-channel-text{flex:1;min-width:0}.wc-channel-text strong,.wc-channel-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wc-channel-text strong{font-size:13px;font-weight:500}.wp-channel.unread strong{font-weight:800}.wc-channel-text small{font-size:11px;color:var(--muted);margin-top:4px}.wc-channel-meta{display:flex;flex-direction:column;align-items:end;gap:6px;font-size:10px;flex:none}
.wc-layout #wp-chat-header{display:flex;gap:10px;align-items:center;min-height:75px}.wc-layout #wp-chat-header>div{flex:1;min-width:0}.wc-back{display:none}
.wc-layout .wp-messages{padding:22px;overscroll-behavior:contain}.wc-day{text-align:center;color:var(--muted);font-size:11px;margin:16px 0}
.wc-group{display:flex;align-items:end;gap:8px;margin:12px 0 2px}.wc-group.own{justify-content:flex-end}.wc-group-body{max-width:85%;min-width:0}.wc-sender{font-size:11px;color:var(--muted);margin-bottom:5px}.wc-time{display:block;font-size:10px;color:var(--muted);margin-top:5px}.wc-group.own .wc-time{text-align:right}
.wc-layout .wp-message{margin:3px 0;display:block;position:relative}.wc-layout .wp-text{background:var(--bg);color:var(--ink);padding:10px 14px;border-radius:16px;width:fit-content;max-width:100%;font-size:14px}.wc-layout .own .wp-text{background:var(--royal);color:var(--surface);margin-left:auto}.wc-layout .wp-text.emoji{font-size:36px;background:none;color:var(--ink);padding:0}.wc-layout .wp-msg-actions{position:relative;flex-wrap:wrap;margin-top:3px;display:none;opacity:1}.wc-layout .wp-message:hover .wp-msg-actions,.wc-layout .wp-message:focus-within .wp-msg-actions,.wc-layout .wp-message.selected .wp-msg-actions{display:flex}.wc-layout .wp-msg-actions button{border:0;border-radius:8px;background:var(--bg);padding:5px 7px;cursor:pointer}.wc-layout .own .wp-msg-actions{justify-content:end}.wc-reactions{display:flex;gap:4px;margin-top:4px}.own .wc-reactions{justify-content:end}.wc-reactions button{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:3px 8px;cursor:pointer}.wc-reactions [aria-pressed=true]{border-color:var(--royal);background:var(--royal-soft)}
.wc-quote{display:block;border-left:3px solid var(--royal);padding:8px;background:var(--royal-soft);border-radius:6px;color:var(--brand);margin-bottom:7px;font-size:12px}.wc-seen{display:flex;gap:3px;margin:4px 0 4px 46px}.wc-seen.own{justify-content:end}.wc-seen .wc-avatar{width:16px;height:16px;font-size:7px}.wc-seen .wc-avatar:after{display:none}
.wc-typing{display:flex;align-items:center;gap:7px;min-height:0;padding:0 18px;color:var(--muted);font-size:12px}.wc-typing:not(:empty){padding-bottom:8px}.wc-dots{animation:wc-pulse 1s infinite}@keyframes wc-pulse{50%{opacity:.3}}
.wc-layout .wp-compose{padding:12px 16px}.wc-layout .wp-compose-row{flex-wrap:nowrap;align-items:center}.wc-layout .wp-compose-row>button{flex:none}.wc-mentions{font-size:11px;color:var(--muted);margin-top:4px}.wc-readonly{padding:15px;font-size:12px;color:var(--muted);background:var(--bg)}
.wc-info{display:none;padding:18px;overflow-y:auto;border-left:1px solid var(--line);min-width:0}.info-open .wc-info{display:block}.wc-info-title{text-align:center}.wc-info h4{font-size:12px;margin-top:26px}.wc-info small{color:var(--muted);display:block}.wc-member{display:flex;align-items:center;gap:9px;margin:12px 0;font-size:12px}.wc-member small{margin-top:3px;font-size:10px}.wc-info .wp-task-card{margin:10px 0;font-size:11px}.wc-info .wp-task-card h3{font-size:13px}.wc-info .wp-actions{gap:4px}.wc-mute{margin-top:24px}.wc-empty{padding:16px;color:var(--muted)}
@media(max-width:1100px){.wc-layout.info-open{grid-template-columns:280px minmax(0,1fr) 260px}.wc-layout{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:979px){.wc-layout.info-open{grid-template-columns:280px minmax(0,1fr)}.info-open .wc-info{position:absolute;right:0;top:0;bottom:0;width:300px;max-width:100%;background:var(--surface);box-shadow:var(--shadow);z-index:10}}
@media(max-width:760px){.shell:has(.wc-page){display:block}.shell:has(.wc-page) .sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;height:60px;min-height:0;padding:0;z-index:20}.shell:has(.wc-page) .sidebar .brand{display:none}.shell:has(.wc-page) .sidebar .nav{display:flex;flex-direction:row;justify-content:space-around;margin:0;padding:0;gap:0;border:0;height:60px;overflow-x:auto}.shell:has(.wc-page) .nav a{flex:1;padding:10px;min-width:45px}.shell:has(.wc-page) .nav-icon{font-size:22px}.shell:has(.wc-page) .nav-count,.shell:has(.wc-page) .wp-nav-count{position:absolute;right:0;top:0;font-size:9px}.wc-layout,.wc-layout.info-open{display:block;height:calc(100dvh - 60px);min-height:0;position:relative}.wc-layout .wp-channels{height:100%;border:0}.wc-layout .wp-stream{height:100%;display:none}.wc-layout.chat-open .wp-channels{display:none}.wc-layout.chat-open .wp-stream{display:flex}.wc-back{display:inline-block}.wc-layout .wp-channel{flex:none}.wc-layout .wp-messages{padding:12px}.wc-layout .wp-compose{padding:8px}.wc-layout .wp-compose textarea{flex-basis:auto}.wc-layout .wp-compose-row>button{font-size:11px;padding:8px}.wc-group-body{max-width:84%}.wc-layout.info-open .wc-info{display:none}.wc-layout.chat-open.info-open .wc-info{display:block;width:100%}.wc-layout #wp-chat-header{padding:10px;min-height:65px}.wc-layout #wp-chat-header b{font-size:13px}#content.wc-page{height:calc(100dvh - 60px)}}

.wc-member-chat{width:100%;border:0;background:transparent;color:var(--ink);text-align:left;padding:9px 7px;border-radius:10px;cursor:pointer;font-family:inherit}.wc-member-chat>span:nth-child(2){min-width:0;flex:1;overflow-wrap:anywhere}.wc-member-chat:hover{background:var(--royal-soft);color:var(--royal)}.wc-member-chat:focus-visible{outline:2px solid var(--royal);outline-offset:2px}.wc-member-hint{color:var(--royal);font-size:16px}.wc-member-self{padding:9px 7px}

/* Keep chat geometry stable while the selected conversation is authorized and loaded. */
.wp-stream{position:relative}
.wc-loading-state{padding:28px;display:grid;gap:16px;align-content:start;color:var(--muted)}
.wc-loading-state>span{display:block;height:38px;width:55%;border-radius:14px;background:var(--royal-soft)}
.wc-loading-state>span:nth-child(2){width:38%;justify-self:end}
.wc-loading-state>span:nth-child(3){width:46%}
.wc-loading .wp-messages{animation:wc-reveal .18s ease-out}
@keyframes wc-reveal{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.wc-loading .wp-messages{animation:none}}