:root{--portal-accent:var(--accent-1);--portal-radius:14px}
[hidden]{display:none!important}
body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;padding:20px}
body::before,body::after{animation:none;opacity:.16}
button,input,textarea,select{font:inherit}
button{cursor:pointer;border:0}
button:disabled{cursor:wait;opacity:.6}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent-1);outline-offset:3px}
input,select{width:100%;height:42px;border:1px solid var(--divider);border-radius:9px;background:var(--bg-input);color:var(--text-primary);padding:0 12px}
label{font-size:13px;font-weight:600;display:block}
.primary{border-radius:9px;padding:10px 17px;background:var(--bg-bubble-self);color:white;font-weight:600;white-space:nowrap}
.quiet{border-radius:8px;padding:8px 12px;background:transparent;color:var(--text-secondary)}
.quiet:hover{background:var(--bg-hover);color:var(--text-primary)}
.brand-icon{display:grid;place-items:center;background:var(--bg-bubble-self);color:white;font-size:28px;font-weight:700;width:60px;height:60px;border-radius:17px}
.brand-icon.small{width:42px;height:42px;font-size:23px;border-radius:13px;margin-bottom:25px}
.fusion-app{position:relative;z-index:1;display:flex;width:min(1560px,100%);height:calc(100dvh - 40px);max-height:980px;background:var(--bg-secondary);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}
.rail{display:flex;flex-direction:column;align-items:center;width:78px;flex-shrink:0;padding:22px 8px 12px;border-right:1px solid var(--border-color);background:var(--bg-tertiary);gap:8px}
.rail-btn{position:relative;width:56px;min-height:52px;padding:8px 4px;border-radius:13px;color:var(--text-secondary);background:none;display:grid;justify-items:center;gap:3px}
.rail-btn:hover,.rail-btn.active{background:var(--bg-active);color:var(--accent-1)}
.rail-btn svg,.contact-search svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail-btn span{font-size:11px}
.rail-btn b{position:absolute;right:0;top:0;background:var(--badge-bg);color:white;font-size:10px;border-radius:9px;padding:2px 5px}
.rail-bottom{margin-top:auto;display:grid;gap:9px}
.view{flex:1;min-width:0;min-height:0}
.chat-view{display:flex}
.contacts-pane{width:290px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border-color);background:var(--bg-secondary)}
.contacts-head{padding:26px 21px 18px;display:flex;align-items:center;justify-content:space-between}
.contacts-head h1,.workspace-head h1{font-size:21px;letter-spacing:-.5px}
.role-pill{font-size:11px;background:var(--bg-active);color:var(--accent-1);border-radius:6px;padding:4px 7px}
.contact-search{margin:0 17px 20px;position:relative}
.contact-search input{height:37px;background:var(--bg-tertiary);border:0;padding-left:36px;font-size:13px}
.contact-search svg{position:absolute;left:10px;top:10px;width:17px;height:17px;color:var(--text-tertiary)}
.contact-list{flex:1;overflow-y:auto;padding:0 9px}
.contact-row{width:100%;padding:14px 11px;display:flex;align-items:center;text-align:left;gap:12px;border-radius:12px;margin-bottom:3px;color:var(--text-primary);background:none}
.contact-row:hover{background:var(--bg-hover)}
.contact-row.active{background:var(--bg-active)}
.avatar{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);font-size:18px;font-weight:650}
.avatar.junior{background:linear-gradient(135deg,#20b2a0,#388dc1)}
.avatar.customer{background:linear-gradient(135deg,#c58b61,#c1698c)}
.contact-info{min-width:0;flex:1}
.contact-line{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.contact-info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px}
.contact-info p{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-meta{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.contact-meta time{font-size:10px;color:var(--text-tertiary)}
.unread-badge{font-size:10px;min-width:17px;padding:2px 5px;border-radius:9px;color:white;background:var(--badge-bg)}
.list-empty{padding:28px 14px;color:var(--text-secondary);font-size:13px;line-height:1.8}
.self-card{padding:16px 18px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--border-color)}
.self-card .avatar{width:35px;height:35px;font-size:15px;border-radius:11px}
.self-card div{min-width:0;flex:1}
.self-card strong,.self-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.self-card strong{font-size:13px}.self-card small{font-size:11px;color:var(--text-tertiary);margin-top:3px}
.presence-dot{width:8px;height:8px;border-radius:50%;background:var(--online-color)}
.conversation-pane{flex:1;min-width:0;background:var(--bg-chat);position:relative}
.empty-conversation{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}
.empty-symbol{font-size:38px;color:var(--accent-1);background:var(--bg-active);padding:15px 23px;border-radius:25px;margin-bottom:22px}
.empty-conversation h2{font-size:21px;margin-bottom:10px}.empty-conversation p{font-size:14px;color:var(--text-secondary)}
.conversation{height:100%;display:flex;flex-direction:column}
.conversation-head{display:flex;align-items:center;gap:13px;padding:17px 26px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}
.contact-heading{flex:1;min-width:0}.contact-heading h2{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-heading p{font-size:12px;margin-top:5px;color:var(--text-secondary)}
.messages{flex:1;min-height:0;overflow-y:auto;padding:22px 29px;scroll-behavior:auto}
.message-row{display:flex;gap:10px;margin:17px 0;align-items:flex-start}
.message-row.self{flex-direction:row-reverse}.message-row .avatar{width:32px;height:32px;border-radius:10px;font-size:14px;margin-top:19px}
.message-column{max-width:min(74%,650px);min-width:0}.message-name{font-size:11px;color:var(--text-secondary);margin-bottom:7px;overflow-wrap:anywhere}
.message-row.self .message-name{text-align:right}
.bubble{background:var(--bg-bubble-other);color:var(--text-bubble-other);border-radius:4px 15px 15px 15px;padding:12px 16px;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--shadow-sm)}
.self .bubble{background:var(--bg-bubble-self);color:white;border-radius:15px 4px 15px 15px;box-shadow:var(--shadow-bubble)}
.bubble img{max-width:100%;max-height:300px;border-radius:8px;display:block;cursor:zoom-in}
.bubble a{color:inherit;text-decoration:underline}
.message-time{font-size:10px;color:var(--text-tertiary);margin-top:6px;display:flex;align-items:center;gap:8px}.self .message-time{justify-content:flex-end}
.message-select{align-self:center;width:16px;height:16px;accent-color:var(--accent-1);cursor:pointer}
.message-status{color:var(--accent-1)}.history-btn{display:block;margin:0 auto;background:var(--bg-active);color:var(--accent-1);padding:6px 15px;border-radius:20px;font-size:12px}
.composer{background:var(--bg-secondary);padding:13px 24px 14px;border-top:1px solid var(--border-color)}
.composer-tools{display:flex;align-items:center;gap:4px}.composer-tools .quiet{font-size:24px;padding:3px 9px;line-height:1.2}.composer-tools span{margin-left:auto;font-size:11px;color:var(--text-tertiary)}
.attachment{cursor:pointer;font-weight:400}.compose-row{display:flex;gap:15px;align-items:flex-end;margin-top:8px}
.compose-row textarea{width:100%;max-height:160px;resize:vertical;border:0;background:none;color:var(--text-primary);font-size:14px;line-height:1.6;padding:6px 0}
.send-btn{width:auto;min-width:88px;height:42px;padding:10px 19px;margin-bottom:7px;font-size:14px;display:inline-flex}.send-btn span{margin-left:8px}.send-btn::after{display:none}
.compose-hint{font-size:10px;color:var(--text-tertiary);margin-top:5px}.form-error{font-size:13px;line-height:1.5;color:var(--danger);margin-top:7px}.form-error:empty{display:none}
.emoji-panel{display:flex;gap:4px;flex-wrap:wrap;padding-top:10px}.emoji-panel button{padding:6px;font-size:22px;background:none}
.selection-bar,.draft-notice{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--bg-active);font-size:13px;color:var(--accent-1)}.selection-bar span,.draft-notice span{flex:1}
.operator-form{display:flex;gap:12px;padding:12px 24px;background:var(--bg-secondary);align-items:flex-end;border-bottom:1px solid var(--border-color)}.operator-form label{flex:1}.operator-form input,.operator-form select{margin-top:6px;height:36px}
.business-view{display:flex;flex-direction:column;background:var(--bg-tertiary)}
.workspace-head{display:flex;align-items:center;justify-content:space-between;padding:23px 28px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)}
.workspace-head p{font-size:12px;color:var(--text-secondary);margin-top:6px}
.business-view iframe{border:0;flex:1;width:100%;background:var(--bg-tertiary);min-height:0}
.settings-view{overflow:auto;background:var(--bg-tertiary)}
.settings-form{max-width:520px;margin:30px;padding:25px;background:var(--bg-secondary);border-radius:14px;border:1px solid var(--border-color)}
.settings-form h2{font-size:17px;margin-bottom:22px}.settings-form label{margin:14px 0 8px}.settings-form .primary{margin-top:18px}.form-hint{font-size:12px;color:var(--text-secondary);line-height:1.7;margin-top:12px}
.settings-status{margin:0 30px 30px;color:var(--accent-1);font-size:14px}
.portal-toast{position:fixed;bottom:27px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:12px;background:var(--text-primary);color:var(--bg-secondary);box-shadow:var(--shadow-md);font-size:13px;z-index:100}
.auth-wrap{z-index:1;width:430px;max-height:calc(100dvh - 40px);overflow:auto;padding:36px;background:var(--bg-secondary);border-radius:23px;box-shadow:var(--shadow-lg)}
.auth-brand{display:flex;flex-direction:column;align-items:center}.auth-brand h1{font-size:24px;margin-top:18px}.auth-brand p{font-size:13px;color:var(--text-secondary);margin:10px 0 27px}
.auth-tabs{display:flex;border-bottom:1px solid var(--divider);margin-bottom:23px}.auth-tabs button{flex:1;padding:11px;background:none;color:var(--text-secondary)}.auth-tabs button.active{color:var(--accent-1);border-bottom:2px solid var(--accent-1);font-weight:600}
.auth-form label{margin:17px 0 8px}.full{width:100%;margin-top:24px}.demo-accounts{border-top:1px solid var(--divider);margin-top:27px;padding-top:18px;text-align:center;font-size:11px;color:var(--text-tertiary)}
.demo-accounts div{display:flex;gap:8px;margin-top:11px;justify-content:center}.demo-accounts button{background:var(--bg-tertiary);color:var(--text-secondary);border-radius:7px;padding:7px 13px;font-size:12px}
.mobile-only{display:none}
@media(max-width:1050px){body{padding:0}.fusion-app{height:100dvh;max-height:none;width:100%;border-radius:0}.contacts-pane{width:255px}.rail{width:65px}.messages{padding:15px 18px}.conversation-head{padding:15px 18px}}
@media(max-width:700px){.rail{width:58px;padding:16px 4px}.rail-btn{width:48px}.brand-icon.small{width:36px;height:36px}.contacts-pane{width:100%}.conversation-pane{display:none}.chat-view.show-conversation .contacts-pane{display:none}.chat-view.show-conversation .conversation-pane{display:block}.mobile-only{display:block}.conversation-head{gap:9px;padding:12px}.conversation-head .avatar{width:36px;height:36px}.conversation-head .quiet{font-size:12px;padding:7px}.contact-heading h2{font-size:14px}.contact-heading p{font-size:10px}.composer{padding:11px 12px}.composer-tools span{font-size:10px}.compose-row{gap:8px}.send-btn{padding:9px 13px}.message-column{max-width:78%}.bubble{font-size:13px;padding:10px 12px}.operator-form{padding:12px;flex-wrap:wrap}.operator-form label{min-width:100%;}.workspace-head{padding:20px}.workspace-head h1{font-size:18px}.settings-form{margin:18px;padding:20px}.auth-wrap{width:min(430px,100%);padding:26px;margin:16px}.selection-bar,.draft-notice{padding:10px 12px;gap:5px;flex-wrap:wrap}.selection-bar .quiet{padding:6px}.compose-hint{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 开户功能 */
.open-account-view{padding:24px;overflow:auto}.open-account-card{max-width:520px;margin:auto}.open-account-preview{display:flex;justify-content:space-between;align-items:center;background:var(--panel-soft,#f6f7fb);border:1px solid var(--line,#e2e8f0);border-radius:14px;padding:12px 14px;margin:10px 0}.open-account-preview span{color:var(--muted,#64748b);font-size:13px}.open-account-preview strong{font-size:22px;letter-spacing:.5px}.open-account-list{display:grid;gap:8px;margin-top:16px}.open-account-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:10px 12px;background:var(--panel,#fff)}.open-account-row small{grid-column:1/-1;color:var(--muted,#64748b)}