/* Lightweight, quiet surfaces. Calls retain their dedicated responsive layout. */
:root{--surface:var(--panel);--muted:var(--sub);--border:var(--line);color-scheme:light;--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
:root[data-theme=dark]{color-scheme:dark}
body{font-family:var(--font)}
button,input,textarea,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent,#007aff);outline-offset:3px}
.auth-screen{display:flex;flex-direction:column;min-height:100dvh;background:var(--bg,#f5f5f7);padding:32px 20px}
.auth-form-wrap{margin:auto;flex:none;width:100%;max-width:408px;padding:38px 32px;background:var(--surface,#fff);border:1px solid var(--border,#e8e8ed);border-radius:28px;box-shadow:0 12px 44px #18233306}
.auth-form-content{max-width:100%;width:100%}
.simple-brand{display:flex;align-items:center;gap:10px;margin-bottom:32px;font-size:21px;letter-spacing:.5px}
.simple-brand .brand-mark{width:38px;height:38px;border-radius:12px;font-size:21px}
.auth-form-content h1{font-size:26px;letter-spacing:-.5px;line-height:1.35;margin:0 0 26px}
.auth-form-content input{font-size:16px;min-height:46px;border-radius:12px}
.auth-submit{margin-top:8px;min-height:47px;border-radius:13px;box-shadow:none;justify-content:center}
.auth-links{display:flex;justify-content:space-between;gap:16px;margin-top:20px}
.auth-form-content .field-label{margin-top:20px}
.auth-form-content #authError:empty{min-height:0;margin-top:16px}
.auth-form-wrap{min-height:0}
.search-dialog .modal-body{padding-top:8px}
.search-status{padding:28px 8px 10px;text-align:center;color:var(--muted);font-size:13px}
.empty-list strong{display:block;font-weight:400}
.empty-list>p{margin-top:6px}
.empty-list>.text-button{display:block;margin:12px auto 0}
.auth-links .text-button{font-size:13px}
.sidebar-eyebrow,.header-dot,.sidebar-footer,.composer-hint,.header-separator{display:none!important}
.rail-bottom #themeButton,.rail-bottom>[data-action=settings]{display:none}
.sidebar-heading{margin-bottom:20px}.sidebar-heading h1{font-size:25px;letter-spacing:-.6px}
.sidebar-header{padding-top:26px}.head-actions .icon-button{border-radius:50%}
.filter-tabs{padding-top:10px}.filter-tabs button{font-size:12px;min-height:32px}
.room-item{margin-top:3px;margin-bottom:3px;border-radius:14px}
.room-name{font-weight:600}.room-preview,.contact-handle{font-size:12px}
.welcome{background:none}.welcome h2{font-size:25px;margin:20px 0 10px;letter-spacing:-.4px}
.welcome-mark{height:72px;width:72px;display:grid;place-items:center;border:1px solid var(--border,#e8e8ed);border-radius:24px;color:var(--muted,#86868b);font-size:32px;background:var(--surface,#fff)}
.welcome .secondary{margin-top:14px;border-radius:12px;padding:11px 22px}
.simple-profile{padding:30px 12px 28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.avatar-edit{position:relative;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.avatar-edit .avatar{width:82px;height:82px;font-size:30px;margin:0}
.avatar-edit>span:last-child{position:absolute;right:-2px;bottom:0;display:grid;place-items:center;width:27px;height:27px;background:var(--surface,#fff);border:1px solid var(--border,#ddd);border-radius:50%;box-shadow:0 2px 4px #0001}
.avatar-edit>span:last-child svg{width:14px;height:14px}
.profile-name{background:none;border:0;padding:8px;cursor:pointer}.profile-name h3{margin:0 0 4px;font-size:20px}.profile-name>span{font-size:11px}
.profile-id{display:flex;align-items:center;gap:8px;max-width:100%;overflow-wrap:anywhere;background:none;border:0;font-size:12px;color:var(--muted,#86868b);cursor:pointer;padding:5px}
.profile-id svg{height:13px;width:13px}.owner-label{font-size:11px;color:var(--muted,#86868b)}
.profile-options{border-radius:17px;background:var(--surface,#fff);border:1px solid var(--border,#e8e8ed);overflow:hidden}
.profile-options .modal-option{margin:0;border-radius:0;padding:16px;min-height:55px}.profile-options .modal-option+.modal-option{border-top:1px solid var(--border,#eee)}
.profile-options .modal-option small:empty{display:none}.profile-options .modal-option strong{font-size:14px;font-weight:500}
.composer-wrap{padding-top:8px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.composer{border-radius:19px}
.messages{background:var(--bg,#f5f5f7)}.bubble{box-shadow:none;line-height:1.65}.chat-header{box-shadow:none}
.action-popover{position:fixed;z-index:1800;width:224px;max-width:calc(100vw - 24px);padding:7px;border:1px solid var(--border,#e8e8ed);border-radius:16px;background:var(--surface,#fff);box-shadow:0 10px 40px #17233126;overflow:auto;overscroll-behavior:contain;animation:popover-in .14s ease-out;color:var(--text,#1d1d1f)}
.popover-action{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 12px;border-radius:9px;min-height:42px;font-size:14px;cursor:pointer;color:inherit}
.popover-action svg{height:17px;width:17px;color:var(--muted,#86868b)}
.popover-action:hover,.popover-action:focus-visible,.quick-reactions button:hover{background:var(--bg,#f5f5f7)}
.popover-action.danger,.popover-confirm-actions .danger{color:#e54444}.popover-action.danger svg{color:inherit}
.quick-reactions{display:flex;justify-content:space-between;gap:3px;padding:3px 1px 9px;margin-bottom:4px;border-bottom:1px solid var(--border,#e8e8ed)}
.quick-reactions button{font-size:21px;min-height:37px;width:38px;border:0;background:none;border-radius:9px;cursor:pointer}
.popover-confirm{font-size:13px;line-height:1.65;margin:8px 8px 13px}.popover-confirm-actions{display:flex;border-top:1px solid var(--border,#e8e8ed);padding-top:6px;gap:6px}
.popover-confirm-actions button{flex:1;border:0;background:none;border-radius:8px;padding:10px;font-size:14px;cursor:pointer}.popover-confirm-actions button:hover{background:var(--bg,#f5f5f7)}
.help-details{font-size:12px;line-height:1.8;color:var(--muted,#86868b);padding:15px 2px 0}.help-details summary{cursor:pointer}.help-details p{margin:12px 0}
.modal-option strong{font-weight:500}.modal-header h2{font-size:18px}.modal{border-radius:22px}.modal-body{font-size:14px}
@keyframes popover-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:720px){
 .auth-screen{padding:24px}.auth-form-wrap{background:none;border:0;box-shadow:none;padding:20px 0;max-width:350px}
 .simple-brand{margin-bottom:42px}.sidebar-header{padding-top:22px}.mobile-nav{grid-template-columns:repeat(3,1fr)}
 .mobile-nav button{flex:1}.profile-page{padding:0 18px 24px}.simple-profile{padding:30px 12px 35px}
 .chat-header-actions{gap:2px}.chat-header-actions .icon-button{width:34px;height:38px}
 .composer{gap:2px}.composer>.icon-button{width:32px;min-width:32px}.composer-wrap{padding-left:10px;padding-right:10px}
 .action-popover{width:216px}.bubble{-webkit-touch-callout:none}.modal:not(.lightbox){max-height:calc(100dvh - 36px)}
}
@media(prefers-reduced-motion:reduce){.action-popover{animation:none}}

#app[data-section=profile] .head-actions{visibility:hidden}