:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#172033;background:#eef2f8}*{box-sizing:border-box}body{margin:0}.app{position:relative;width:min(100%,480px);height:100dvh;margin:auto;overflow:hidden;background:linear-gradient(180deg,#f5f8ff,#fff 46%);box-shadow:0 0 50px #24334d18}header{height:88px;padding:calc(18px + env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #edf0f5;background:#ffffffdd;backdrop-filter:blur(16px)}header div{flex:1;text-align:center}header strong,header small{display:block}header strong{font-size:17px}header small{margin-top:3px;color:#929baa;font-size:11px}button{border:0;background:none;color:inherit}#newBtn,#channelBtn{color:#536bd5;font-size:13px;white-space:nowrap;padding:5px 2px}.messages{height:calc(100dvh - 164px);padding:22px 16px 110px;overflow:auto}.welcome{text-align:center;padding:13vh 10px 0}.mark{width:56px;height:56px;margin:auto;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#536bf0,#7659dc);color:#fff;font-size:25px;font-weight:800;box-shadow:0 15px 35px #536bf044}.welcome h1{margin:24px 0 8px;font-size:25px}.welcome p{margin:0;color:#8c96a7;font-size:14px;line-height:1.7}.employees{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}.employee{padding:8px 12px;border:1px solid #e2e7f0;border-radius:999px;background:#fff;color:#556176;font-size:13px}.row{display:flex;margin:0 0 18px}.row.user{justify-content:flex-end}.bubble{max-width:86%;padding:13px 15px;border-radius:18px;background:#fff;line-height:1.65;white-space:pre-wrap;box-shadow:0 5px 20px #2839500b}.user .bubble{background:#576fec;color:#fff;border-bottom-right-radius:5px}.typing{color:#8f99aa}footer{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 28px),452px);display:flex;align-items:flex-end;gap:8px;padding:9px;border:1px solid #e1e6ee;border-radius:22px;background:#fff;box-shadow:0 14px 45px #26365324}textarea{flex:1;min-height:42px;max-height:130px;resize:none;border:0;outline:0;padding:10px 8px;font:15px/1.45 inherit}#send{width:42px;height:42px;flex:none;border-radius:50%;background:#566eeb;color:#fff;font-size:23px}.mention{position:absolute;left:0;right:0;bottom:60px;max-height:250px;overflow:auto;border:1px solid #e2e6ee;border-radius:17px;background:#fff;box-shadow:0 14px 36px #26365320}.mention div{padding:12px 15px;border-bottom:1px solid #f0f2f6;text-align:left}.mention small{display:block;color:#929baa;margin-top:3px}.hidden{display:none}aside{position:absolute;z-index:20;top:0;bottom:0;left:0;width:82%;padding:22px;background:#fff;transform:translateX(-105%);transition:.25s}aside.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;margin:12px 0 20px}.history-item{padding:12px;border-radius:12px;color:#4e596b}.history-item:hover{background:#f1f5fc}#mask,#channelMask{display:none;position:absolute;inset:0;background:#18203366}#mask{z-index:19}#channelMask{z-index:30}#mask.open,#channelMask.open{display:block}
.channel-panel{position:absolute;z-index:31;inset:0;width:100%;background:#f6f8fc;transform:translateX(105%);transition:.25s;overflow:auto}.channel-panel.open{transform:none}.panel-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 20px 16px;background:#ffffffed;border-bottom:1px solid #e8ecf3;backdrop-filter:blur(16px)}.panel-head strong,.panel-head small,.channel-title strong,.channel-title small,.section-title strong,.section-title small,.binding strong,.binding small,.binding em{display:block}.panel-head small,.channel-title small,.section-title small{margin-top:4px;color:#929baa;font-size:12px}.panel-head>button{font-size:28px;color:#788398}.channel-body{padding:18px 16px calc(30px + env(safe-area-inset-bottom))}.channel-card,.server-card{padding:18px;border:1px solid #e5e9f1;border-radius:20px;background:#fff;box-shadow:0 8px 28px #2538520d}.server-card{margin-top:14px}.channel-title{display:flex;align-items:center;gap:12px}.channel-title>div{min-width:0;flex:1}.wecom-logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#15b77b,#08a6db);color:#fff;font-weight:800}.status{padding:5px 9px;border-radius:999px;font-size:11px}.status.connected{background:#e7f8ef;color:#12935c}.status.pending{background:#fff3d8;color:#b87800}.status.disabled{background:#eef1f5;color:#8590a0}.primary-action{width:100%;height:46px;margin-top:16px;border-radius:14px;background:linear-gradient(135deg,#536bf0,#7659dc);color:#fff;font-weight:700}.primary-action:disabled{opacity:.6}.binding{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:12px;border-radius:14px;background:#f7f9fc}.binding small{margin-top:4px;color:#7e899a;font-size:12px}.binding em{margin-top:4px;color:#d35b5b;font-size:11px;font-style:normal}.binding button{color:#d05a65}.empty-binding,.channel-error{margin-top:14px;padding:14px;border-radius:14px;background:#f7f9fc;color:#8490a2;font-size:12px;line-height:1.6}.channel-error{color:#c65058;background:#fff0f1}.section-title{margin-bottom:14px}.config-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.config-row label{grid-column:1/-1;color:#657084;font-size:12px}.config-row code{min-width:0;max-height:100px;padding:10px;border-radius:10px;background:#f5f7fa;color:#445066;font:11px/1.55 monospace;overflow:auto;white-space:pre-wrap;word-break:break-all}.config-row button{padding:0 10px;border:1px solid #e0e5ed;border-radius:10px;color:#536bd5}.config-row button:disabled{color:#b0b7c3}.config-tip{padding:10px;border-radius:10px;background:#fff7e5;color:#a97513;font-size:11px;line-height:1.6}
.qr-dialog{display:none;position:fixed;z-index:50;inset:0;background:#17203388;align-items:center;justify-content:center;padding:24px}.qr-dialog.open{display:flex}.qr-card{position:relative;width:min(100%,330px);padding:24px;border-radius:24px;background:#fff;text-align:center;box-shadow:0 24px 70px #10182744}.qr-card h3{margin:4px 0 8px}.qr-card p{margin:0;color:#8a94a5;font-size:12px;line-height:1.6}.qr-card img{display:block;width:210px;height:210px;margin:18px auto;object-fit:contain}.qr-card>strong{color:#536bd5;font-size:13px}.qr-close{position:absolute;right:13px;top:10px;font-size:25px;color:#8a94a5}@media(min-width:700px){.welcome{padding-top:18vh}}