:root{--ink:#202020;--line:#dedede;--bg:#f6f6f6;--navy:#273246;--muted:#8c8c8c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}
button,input,textarea{font:inherit}
button{cursor:pointer;border:0}
.app{min-height:100vh}
.top{position:sticky;top:0;z-index:5;height:78px;padding:0 28px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center}
.brand-line{display:flex;align-items:center;gap:12px}
.brand-icon{display:block;width:48px;height:48px;border-radius:14px}
.brand{font-size:23px;line-height:1.1;font-weight:700;letter-spacing:-.6px}
.muted{display:block;margin-top:4px;color:#909090;font-size:13px}
.spacer{flex:1}
.help-link{padding:9px 12px;color:#6f7b8d;font-size:14px;font-weight:600;text-decoration:none}.help-link:hover{color:#273246}
.logout{padding:9px 4px 9px 14px;background:transparent;color:#858585;font-size:15px;font-weight:600}
.logout:hover{color:#222}
.timeline{width:min(900px,calc(100% - 44px));min-height:calc(100vh - 78px);margin:0 auto;padding:0 0 118px}
.notice{margin:0;padding:14px 0 7px;text-align:center;color:#999;font-size:12px}
.loading-state{padding:54px 0;text-align:center;color:#999}
.message{position:relative;display:flex;align-items:flex-start;gap:10px;max-width:100%;margin:19px 0 25px}
.message.mine{justify-content:flex-end}
.message-stack{display:flex;flex:0 1 auto;min-width:0;max-width:min(450px,72vw);flex-direction:column;align-items:flex-start}
.message.other .sender-stack{order:1}
.message.other .message-stack{order:2}
.message.mine .message-stack{order:1;align-items:flex-end}
.message.mine .sender-stack{order:2}
.message-card{position:relative;width:max-content;max-width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:7px 19px 19px 19px;background:#fff;animation:message-in .2s ease both}
.message.mine .message-card{border-radius:19px 7px 19px 19px}
.message-meta{display:flex;align-items:center;min-height:18px;width:100%;margin-top:5px;padding:0 3px}
.message-time{color:#999;font-size:12px;line-height:1.2}
.sender-stack{flex:0 0 40px;width:40px;display:flex;flex-direction:column;align-items:center}
.sender-avatar{width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.sender-badge{margin-top:5px;max-width:58px;overflow:hidden;color:#888;font-size:11px;line-height:1.15;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.sender-avatar i{position:relative;display:block;width:21px;height:15px;border:3px solid #222;border-radius:3px}
.sender-avatar i:after{content:"";position:absolute;bottom:-8px;left:4px;width:9px;height:3px;border-radius:3px;background:#222}
.sender-avatar.phone i{width:13px;height:22px;border-radius:4px}
.sender-avatar.phone i:after{bottom:2px;left:4px;width:3px;height:2px}
.sender-avatar.tablet i{width:17px;height:22px;border-radius:4px}
.sender-avatar.tablet i:after{bottom:2px;left:6px;width:3px;height:2px}
.text{font-size:17px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.select-mark{position:absolute;top:12px;left:-28px;width:20px;height:20px;padding:0;border:1px solid #b8b8b8;border-radius:50%;background:#fff;color:#fff;font-size:12px;line-height:18px;text-align:center}
.message.mine .select-mark{right:-28px;left:auto}
.message.selected .message-card{border-color:#273246;box-shadow:0 0 0 2px #27324622}
.message.selected .select-mark{border-color:#273246;background:#273246}
.file{display:flex;align-items:center;gap:10px;min-width:0;max-width:340px;margin-top:2px;padding:9px;background:#f0f0f0;border:1px solid var(--line);border-radius:9px}
.file-icon{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:8px;background:#fff;color:#242424;font-size:11px;font-weight:700}
.file>div{min-width:0;flex:1;overflow:hidden}
.file-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.file small{display:block;color:#999;font-size:12px}
.file a{flex:0 0 auto;margin-left:auto;color:#5c5c5c;text-decoration:none;font-size:13px}
.expired-content{color:#999;font-size:14px}
.image-attachment{width:min(278px,68vw);overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff}
.image-frame{display:block;width:100%;padding:0;background:#f2f2f2;text-align:left}
.image-frame{cursor:zoom-in}
.preview{display:block;width:100%;max-height:420px;object-fit:contain;background:#f2f2f2}
.preview.preview-unavailable{min-height:108px;object-fit:contain;color:transparent;background:linear-gradient(135deg,#f1f3f6,#e7ebf1)}
.image-details{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid #e4e4e4}
.image-file{min-width:0;display:flex;align-items:center;gap:7px}
.image-tag{color:#777;font-size:13px}
.image-download{margin-left:auto;color:#666;text-decoration:none;font-size:13px}
.composer{position:fixed;right:0;bottom:0;left:0;z-index:4;padding:9px 20px 8px;background:#fff;border-top:1px solid var(--line)}
#composer-normal[hidden]{display:none!important}
.composer-box{width:min(820px,100%);margin:auto}
.compose-row{display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:40px;padding:0;display:grid;place-items:center;border-radius:8px;background:transparent;color:#8d8d8d;font-size:23px;line-height:1}
.icon-btn:first-child{font-size:20px}
.batch-delete{flex:0 0 auto;height:34px;padding:0 9px;border:1px solid #dedede;border-radius:9px;background:#fff;color:#666;font-size:12px;white-space:nowrap}
.batch-delete:hover{border-color:#aeb4be;color:#273246;background:#f7f8fa}
.compose-row textarea{flex:1;min-height:46px;max-height:104px;padding:12px 15px;resize:none;outline:0;border:1px solid var(--line);border-radius:15px;background:#f7f7f7;font-size:16px;line-height:1.35}
.compose-row textarea:focus{background:#fff;border-color:#c9c9c9}
.btn{min-width:86px;min-height:46px;padding:0 16px;border-radius:15px;background:#c7c7c7;color:#fff;font-size:16px;font-weight:700}
.btn.ready{background:#273246}
.btn:not([disabled]):hover{background:#1d2635}
.paste-tip{margin-top:4px;text-align:center;color:#999;font-size:11px}
.drop{outline:2px dashed #888;outline-offset:-8px}
.toast{position:fixed;left:50%;z-index:20;padding:10px 15px;border-radius:10px;background:#363636;color:#fff;transform:translateX(-50%)}
.toast{top:92px}
.toast.error{background:#b63b47}
.upload-status{margin:0 0 8px;padding:0 4px}
.upload-status-copy{color:#666;font-size:12px}
.upload-track{height:4px;margin-top:5px;overflow:hidden;border-radius:999px;background:#e5e5e5}
.upload-fill{width:0;height:100%;border-radius:inherit;background:#273246;transition:width .12s linear}
.upload-retry{display:block;width:100%;margin:0 0 8px;padding:0 4px;background:transparent;color:#9b4b4b;font-size:12px;text-align:left}
.upload-retry:hover{text-decoration:underline}
.withdraw{margin-left:auto;padding:1px 2px;border:0;border-radius:4px;background:transparent;color:#9ba2ad;font-size:12px;line-height:1.25;opacity:0;pointer-events:none;transition:opacity .16s ease,color .16s ease;background .16s ease}
.message:hover .withdraw,.message:focus-within .withdraw,.message.reveal-withdraw .withdraw{opacity:1;pointer-events:auto}
.withdraw:hover,.withdraw:focus-visible{background:#fff2f3;color:#c24c5c;outline:none}
.attachment-draft{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:8px 9px 0;border-bottom:1px solid #eceff3;scrollbar-width:thin}
.draft-item{position:relative;display:flex;align-items:center;flex:0 0 auto;gap:8px;min-width:0;max-width:240px;height:62px;padding:6px 27px 6px 6px;border:1px solid #e5e9ef;border-radius:9px;background:#f7f8fa}
.draft-image img,.draft-file-icon{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;object-fit:cover;border-radius:6px;background:#e8edf3;color:#5f6d82;font-size:18px}
.draft-file-copy{display:grid;min-width:0;gap:1px}.draft-file-copy b{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.draft-file-copy small{color:#8b95a3;font-size:11px}
.draft-remove{position:absolute;top:4px;right:4px;display:grid;width:18px;height:18px;padding:0;place-items:center;border-radius:50%;background:#e5e9ef;color:#5c6878;font-size:16px;line-height:1}.draft-remove:hover{background:#c4505d;color:#fff}
.selection-bar{width:min(820px,100%);min-height:46px;margin:auto;display:flex;align-items:center;gap:12px}
.selection-bar[hidden]{display:none}
.selection-bar:not([hidden]){display:flex!important}
.selection-cancel{padding:8px 4px;background:transparent;color:#666}
.selection-count{flex:1;text-align:center;color:#666;font-size:14px}
.selection-delete{min-width:70px;min-height:38px;border-radius:12px;background:#273246;color:#fff;font-weight:700}
.selection-delete:disabled{background:#c7c7c7}
.jump-latest{position:fixed;right:28px;bottom:98px;z-index:6;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #d4d4d4;border-radius:50%;background:#fff;color:#576277;box-shadow:0 5px 18px #2222;font-size:22px;font-weight:500;line-height:1}
.jump-latest.has-unread:after{content:"";position:absolute;top:2px;right:2px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;background:#eb4d4b}
.jump-latest:hover{background:#f7f8fa;color:#273246}
.image-preview{position:fixed;inset:0;z-index:30;overflow:auto;padding:24px max(24px,calc((100vw - 1100px)/2));background:#000c;cursor:zoom-out}
.image-preview[hidden]{display:none}
.image-preview img{display:block;width:auto;height:auto;max-width:min(78vw,860px);max-height:74vh;margin:auto;object-fit:contain;cursor:default}
.image-preview-close{position:fixed;top:16px;right:20px;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;color:#333;font-size:27px;line-height:1}
@keyframes message-in{from{opacity:0;transform:translateY(7px)}
to{opacity:1;transform:none}
}
body.login{min-height:100vh;padding:26px;display:grid;place-items:center;overflow-x:hidden;background:radial-gradient(circle at 12% 12%,#e6eefc 0,transparent 30%),radial-gradient(circle at 90% 88%,#e3f3ed 0,transparent 28%),#f5f6f8}
.login-card{position:relative;display:grid;grid-template-columns:minmax(290px,.92fr) minmax(390px,1.08fr);width:min(880px,100%);overflow:hidden;border:1px solid #dfe4eb;border-radius:26px;background:#fff;box-shadow:0 28px 70px #16233b20}
.login-intro{position:relative;min-height:570px;padding:38px;background:linear-gradient(150deg,#1f2d46 0%,#273b5b 58%,#345778 100%);color:#fff;overflow:hidden}
.login-intro:after{content:"";position:absolute;width:290px;height:290px;right:-115px;bottom:-125px;border:1px solid #ffffff2b;border-radius:50%;box-shadow:0 0 0 30px #ffffff0b,0 0 0 70px #ffffff08}
.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:11px;font-size:22px;font-weight:720;letter-spacing:-.5px}
.login-brand img{width:44px;height:44px;border-radius:13px;box-shadow:0 8px 18px #0003}
.intro-copy{position:relative;z-index:1;margin-top:82px}
.eyebrow{margin:0 0 9px;color:#b8c9df;font-size:13px;font-weight:650;letter-spacing:.08em}
.intro-copy h2{margin:0;font-size:32px;line-height:1.3;letter-spacing:-1.3px}
.intro-copy>p:last-child{max-width:270px;margin:19px 0 0;color:#d7e0ec;font-size:14px;line-height:1.8}
.intro-features{position:relative;z-index:1;margin:44px 0 0;padding:0;list-style:none;color:#dbe5f0;font-size:13px;line-height:2.2}
.intro-features li:before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 2px 1px;border-radius:50%;background:#79d4b3}
.login-panel{padding:52px 58px 34px;background:#fff}
.login-panel-head{display:flex;align-items:center;gap:7px;color:#708096;font-size:12px;font-weight:650;letter-spacing:.04em}
.security-dot{width:7px;height:7px;border-radius:50%;background:#4bbb8c;box-shadow:0 0 0 4px #4bbb8c20}
.login h1{margin:13px 0 9px;color:#202a38;font-size:27px;line-height:1.3;letter-spacing:-.8px}
.login-description{min-height:43px;margin:0;color:#8490a0;font-size:14px;line-height:1.6}
.login .qr-wrap{display:grid;place-items:center;width:252px;height:252px;margin:25px auto 12px;padding:13px;border:1px solid #e1e6ed;border-radius:18px;background:#fff;box-shadow:0 10px 28px #17263d0d}
.login .qr-wrap img{display:block;width:220px;height:220px;border-radius:8px;image-rendering:auto}
.login .timer{margin:0;text-align:center;color:#98a1ad;font-size:13px}
.login .timer b{color:#46546a;font-weight:700}
.login .ghost{display:block;width:100%;min-height:45px;margin-top:17px;border:1px solid #dfe5ed;border-radius:12px;background:#f7f9fb;color:#33455d;font-size:14px;font-weight:700;transition:.18s ease}
.login .ghost:hover{border-color:#bdcad9;background:#eff3f7;color:#1f2d46}
.login .ghost:disabled{opacity:.6;cursor:wait}
.login-footnote{margin:14px 0 0;color:#a3acb7;font-size:11px;text-align:center}
.phone-link-panel{grid-column:2;padding-top:84px}.phone-scan-button{display:grid;place-items:center;width:100%;margin-top:30px;background:#273246;text-align:center}.scan-status{min-height:24px;margin:16px 0 0;color:#77869a;font-size:13px;text-align:center}
.demo-help{grid-column:1/-1;margin:0;padding:13px 20px;border-top:1px solid #e7ebef;background:#f8f9fb;color:#778292;font-size:12px}.demo-help a{color:#273246}
@media(max-width:650px){.top{height:68px;padding:0 15px}
.brand-icon{width:42px;height:42px;border-radius:12px}
.brand{font-size:20px}
.muted{font-size:12px}
.logout{padding-right:0;font-size:14px}
.timeline{width:calc(100% - 28px);min-height:calc(100vh - 68px);padding-bottom:111px}
.notice{padding:11px 0 5px}
.message{gap:8px;margin-top:16px;margin-bottom:20px}
.message-stack{max-width:calc(100% - 45px)}
.message-card{padding:9px 11px}
.withdraw{font-size:11px}
.file{width:100%;max-width:100%}.attachment-draft{padding:7px 7px 0}.draft-item{max-width:205px;height:58px}.draft-image img,.draft-file-icon{flex-basis:44px;width:44px;height:44px}
.sender-stack{width:35px;flex-basis:35px}
.sender-avatar{width:35px;height:35px;border-radius:10px}
.sender-avatar i{transform:scale(.8)}
.sender-badge{font-size:10px}
.text{font-size:17px}
.composer{padding:7px 12px}
.compose-row{gap:5px}
.icon-btn{width:28px;height:36px;font-size:22px}
.batch-delete{height:32px;padding:0 7px;font-size:11px}
.compose-row textarea{min-height:42px;padding:10px 12px;border-radius:14px;font-size:15px}
.btn{min-width:66px;min-height:42px;padding:0 10px;border-radius:14px;font-size:15px}
.image-attachment{width:min(245px,70vw)}
.select-mark{left:-24px}.message.mine .select-mark{right:-24px}
.jump-latest{right:14px;bottom:88px}
.login-card{grid-template-columns:1fr;width:min(500px,100%);border-radius:21px}.login-intro{min-height:auto;padding:24px 26px 23px}.login-intro:after{display:none}.login-brand{font-size:20px}.login-brand img{width:38px;height:38px;border-radius:11px}.intro-copy{margin-top:22px}.intro-copy h2{font-size:24px}.intro-copy>p:last-child,.intro-features{display:none}.login-panel{padding:31px 28px 28px}.phone-link-panel{grid-column:auto;padding-top:31px}.login h1{font-size:22px}.login-description{min-height:0}.login .qr-wrap{width:238px;height:238px;margin-top:23px}.login .qr-wrap img{width:208px;height:208px}
}