/* Measured against the original WhatsApp page at 1440px. */
.accountbar .connect-preview img{width:28px;height:28px;flex:none;object-fit:contain}.accountbar .connect-preview:disabled{opacity:1;background:#3175ef;cursor:not-allowed}
.top-actions button{display:flex;align-items:center;gap:7px}.top-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell{min-height:0;grid-template-columns:230px minmax(0,1fr)}
.communication-page,.has-accounts .communication-page{grid-template-rows:58px 88px minmax(0,1fr)}
.accountbar{position:relative;gap:16px;padding:12px 16px;overflow:visible}
.account-picker{position:relative;flex:none}.account-select-card{min-width:0;width:320px;height:60px;padding:0 10px;gap:10px;text-align:left;cursor:pointer}
.account-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#3974e9;background:#eaf1ff;font-size:15px}
.account-caption{min-width:0;display:grid;gap:4px}.account-caption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#283955}.account-caption small{font-size:10px;color:#8b9ab1}.account-chevron{width:18px;height:18px;margin-left:auto}
.accountbar svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.status{font-size:12px;white-space:nowrap}.account-add{width:48px;height:48px}.account-add svg{width:23px;height:23px}.connect-preview{min-height:48px;padding:0 15px;font-size:11px;border-radius:12px}.connect-preview img{width:23px;height:23px}.connect-preview:disabled{opacity:.65}
.account-menu{position:absolute;z-index:20;top:52px;left:0;width:340px;padding:7px;border:1px solid #dfe5ef;border-radius:12px;background:#fff;box-shadow:0 16px 30px #1c304326}.account-menu[hidden]{display:none}.account-menu-row,.account-menu-manage{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:10px;text-align:left;background:#fff;color:#263650;cursor:pointer}.account-menu-row:hover{background:#f3f7ff}.account-menu strong,.account-menu small{display:block}.account-menu strong{font-size:14px}.account-menu small{margin-top:5px;color:#8a99ae;font-size:11px;overflow-wrap:anywhere}.account-menu-manage{border-top:1px solid #e8edf4;border-radius:0;margin-top:6px}.account-menu-manage svg{width:23px;height:23px;flex:none}.account-menu-empty{padding:12px;color:#8a99ae;font-size:12px}
.columns{grid-template-columns:minmax(230px,27.6%) minmax(360px,1fr) minmax(230px,27.6%);border-radius:14px}.conversation-filter-head{display:none}.conversation-pane:before{content:'联系人';height:76px;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid var(--line);font-size:17px;font-weight:700}.empty{min-height:100px;justify-content:flex-start;padding-top:22px}.empty strong,.empty span{color:#8b99af;font-size:14px;font-weight:400}.empty span+span{display:none}
.chat-pane{grid-template-rows:76px minmax(0,1fr);overflow:hidden;background:#f8faff}.chat-head{height:76px;padding:0 22px;background:#fff;gap:12px}.chat-head h2{font-size:16px}.chat-head span,.chat-actions{display:none}.chat-channel-mark{width:42px;height:42px;font-size:18px}.message-empty{justify-content:flex-start;padding-top:36px;min-height:0;overflow:auto}.message-empty strong{font-size:14px;font-weight:400;color:#8b99af}.message-empty p{display:none}.composer{display:none}.chat-pane:has(.message-list){grid-template-rows:76px minmax(0,1fr) 113px}.chat-pane:has(.message-list) .composer{display:grid}.message-list{overflow-y:auto}
.detail-pane .tabs{height:76px;padding:0 22px;border-bottom:1px solid var(--line)}.detail-pane .tabs button:first-child{padding:0;color:#17212b;background:transparent;font-size:17px;font-weight:700}.detail-pane .tabs button+button{display:none}.detail-pane section{padding:22px;border-bottom:1px solid #edf1f6;min-height:137px}.section-title h3{font-size:15px;font-weight:500}.empty-card{margin-top:30px;padding:8px 0;background:transparent;color:#8b99af;font-size:14px}.detail-pane section:last-child{min-height:110px}.top-actions button{white-space:nowrap}.notification svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}.notification:disabled{color:#52647d}
@media(max-width:1100px){.account-select-card{width:270px}.connect-preview{padding:0 10px}.status{font-size:11px}.accountbar{gap:10px}}
.channel-tabs button.selected{border-left-color:transparent;border-right-color:transparent;box-shadow:inset 0 -3px #3f73e6}.channel-logo{display:grid;place-items:center;width:28px;height:28px;flex:none}.channel-logo svg{width:27px;height:27px}.channel-logo.all{border-radius:8px;background:#eef4ff;color:#3476ef}.channel-logo.all svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.channel-logo.fb svg{fill:#1877f2}.channel-logo.ig{background:radial-gradient(circle at 30% 105%,#ffd676 5%,#f36247 40%,#b431a0 70%,#6258d8 100%);border-radius:7px}.channel-logo.ig svg{width:24px;height:24px;fill:#fff}.channel-logo.web{background:#3477ed;border-radius:7px}.channel-logo.web svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.6}.channel-logo.web circle{fill:#fff;stroke:none}
.workspace,.nav{min-height:0}.workspace{overflow:hidden}
@media(min-width:901px) and (max-width:1180px){.columns{grid-template-columns:minmax(180px,25%) minmax(260px,1fr) minmax(210px,27%)}.global-search{min-width:130px;flex:1}.top-actions button{padding:0 7px;font-size:11px}.user-chip b{max-width:90px;overflow:hidden;text-overflow:ellipsis}.account-select-card{width:240px}.accountbar{gap:8px}.account-add{width:36px;height:36px}.connect-preview{font-size:10px;padding:0 8px}}
@media(max-width:900px){.app-shell{display:block;height:100dvh;min-height:0}.workspace{height:100dvh;min-width:0}.topbar{min-width:0;gap:8px}.global-search{width:auto;min-width:0;flex:1}.global-search kbd{display:none}.user-chip{flex:none}.communication-page,.has-accounts .communication-page{display:flex;flex-direction:column;min-width:0;padding:12px;overflow-y:auto;overflow-x:hidden;gap:10px}.channel-tabs{min-height:58px;flex:none;min-width:0;max-width:100%}.accountbar{min-width:0;width:100%;flex:none;flex-wrap:wrap;padding:10px;gap:8px}.account-picker{flex:1 1 220px;min-width:0}.account-select-card{width:100%;height:60px}.account-caption{max-width:calc(100% - 65px)}.account-caption small{overflow-wrap:anywhere}.accountbar .status{flex:1}.accountbar-actions{margin-left:auto}.account-menu{width:min(340px,calc(100vw - 48px))}.columns{display:flex;flex-direction:column;min-width:0;min-height:0;flex:none;width:100%;overflow:hidden}.pane{width:100%;min-width:0;max-height:65dvh;overflow-y:auto}.conversation-pane,.chat-pane{border-right:0;border-bottom:1px solid var(--line)}.conversation-pane{min-height:180px}.chat-pane{display:grid;min-height:300px}.detail-pane{max-height:none}.conversation-pane:before,.chat-head,.detail-pane .tabs{height:64px;min-height:64px}.chat-pane{grid-template-rows:64px minmax(180px,1fr)}.detail-pane section{min-height:120px}.channel-tabs button:not(.selected):not(:first-child){display:none}}
.accountbar .account-picker{flex:0 1 260px;min-width:0;max-width:100%}
.accountbar .account-select-card{box-sizing:border-box;width:100%;height:54px;padding:8px 10px;gap:9px;border-radius:12px}
.accountbar .account-menu{box-sizing:border-box;top:calc(100% + 4px);width:100%;max-width:calc(100vw - 48px);padding:5px;border-radius:12px}
.accountbar .account-menu-row,.accountbar .account-menu-manage{gap:10px;padding:9px 10px;border-radius:8px}
.accountbar .account-menu-manage{margin-top:4px;padding-top:12px;border-radius:0}
.accountbar .account-menu strong{font-size:13px}
.accountbar .account-menu small{margin-top:3px;font-size:11px}
.accountbar .account-menu-row>span:last-child,.accountbar .account-menu-manage>span{min-width:0}