:root{color:#312d4b;background:#f4f5fa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}code{border-radius:4px;background:#f1effa;color:#6f4bd8;padding:2px 5px;font-size:.92em}.login-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);min-height:100vh;background:#f4f5fa}.login-visual{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-right:1px solid #e5e2ee;padding:48px}.brand-mark,.mobile-brand{display:inline-flex;align-items:center;gap:10px;color:#6f4bd8;font-weight:800;font-size:22px}.brand-mark{position:absolute;top:32px;left:36px}.mobile-brand{display:none}.login-illustration{z-index:1;width:min(520px,82%);max-height:560px;object-fit:contain}.login-mask{position:absolute;right:0;bottom:0;width:100%;max-height:280px;object-fit:cover;opacity:.78}.login-panel{display:flex;align-items:center;justify-content:center;background:#fff;padding:44px}.login-card{width:100%;max-width:420px}.login-heading{margin-bottom:28px}.eyebrow{margin:0 0 10px;color:#6f4bd8;font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase}.login-heading h1{margin:0 0 10px;color:#2f2b45;font-size:30px;line-height:1.2}.login-heading p{margin:0;color:#6d677c;line-height:1.7}.alert{margin-bottom:18px;border:1px solid #ffd7d2;border-radius:8px;background:#fff1ef;color:#b42318;padding:12px 14px}.login-form{display:grid;gap:18px}.login-form label,.target-box label{display:grid;gap:8px;color:#504b63;font-size:14px;font-weight:700}.field,.target-row{display:flex;align-items:center;gap:10px;min-height:48px;border:1px solid #ddd8ea;border-radius:8px;background:#fff;color:#7c758f;padding:0 12px}.field:focus-within,.target-row:focus-within{border-color:#8c57ff;box-shadow:0 0 0 3px #8c57ff1f}.field input,.field select,.target-row input,.composer input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#312d4b}.field select{cursor:pointer}.hash-icon{width:18px;text-align:center;color:#7c758f;font-weight:800}.primary-button,.send-button,.text-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.primary-button,.send-button{min-height:46px;background:#7e57e8;color:#fff;font-weight:800;box-shadow:0 6px 16px #7e57e83d;padding:0 18px}.primary-button:hover,.send-button:hover{transform:translateY(-1px);background:#7048dc}.primary-button:disabled,.send-button:disabled{cursor:not-allowed;transform:none;background:#c7bddf;box-shadow:none}.text-button{min-height:42px;background:#f4f2fb;color:#6f4bd8;font-weight:700}.icon-button{width:38px;height:38px;flex:0 0 auto;background:transparent;color:#6d677c}.icon-button:hover{background:#f1effa;color:#6f4bd8}.icon-button.filled{background:#7e57e8;color:#fff}.chat-shell{display:grid;grid-template-columns:340px minmax(0,1fr);height:100vh;background:#f4f5fa;padding:20px;gap:20px}.sidebar-backdrop,.mobile-menu-button,.mobile-more-button{display:none}.chat-sidebar,.chat-main{min-height:0;border:1px solid #e4e0ec;border-radius:8px;background:#fff;box-shadow:0 4px 16px #2f2b450f}.chat-sidebar{display:flex;flex-direction:column;overflow:hidden}.sidebar-head,.chat-topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ebe7f3;padding:16px}.account,.active-user{display:flex;align-items:center;gap:12px;min-width:0}.account img,.active-user img,.contact-item img{width:44px;height:44px;border-radius:50%;object-fit:cover}.account strong,.active-user h1,.contact-copy strong{display:block;overflow:hidden;color:#312d4b;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.account span,.active-user span,.contact-copy span{display:flex;align-items:center;gap:6px;color:#7c758f;font-size:13px}.connection-card{display:flex;align-items:center;gap:9px;margin:14px 16px 0;border:1px solid #e4e0ec;border-radius:8px;background:#faf9fd;color:#7c758f;padding:9px 10px}.connection-card span{flex:1;font-weight:700}.connection-card.open{border-color:#ccebdc;background:#f0fbf5;color:#1f8a5b}.connection-card.error{border-color:#ffd7d2;background:#fff1ef;color:#b42318}.target-box{padding:14px 16px}.target-row{min-height:44px;padding-right:4px}.contact-list{display:grid;gap:4px;overflow:auto;padding:0 10px 12px}.contact-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;border:0;border-radius:8px;background:transparent;padding:10px;text-align:left}.contact-item:hover{background:#f6f4fb}.contact-item.active{background:#7e57e8;color:#fff}.contact-item.active strong,.contact-item.active span{color:#fff}.contact-copy{min-width:0}.unread{min-width:24px;border-radius:999px;background:#ff4c51;color:#fff;padding:3px 7px;text-align:center;font-size:12px;font-weight:800}.chat-main{display:flex;flex-direction:column;overflow:hidden}.active-user h1{margin:0;font-size:18px}.status-dot.online{color:#28c76f;fill:#28c76f}.status-dot.busy{color:#ff9f43;fill:#ff9f43}.status-dot.offline{color:#a8a3b8;fill:#a8a3b8}.topbar-note{display:inline-flex;align-items:center;gap:8px;color:#6f4bd8;font-weight:800}.message-log{flex:1;overflow:auto;background:#f8f7fb;padding:22px}.empty-state{display:grid;place-items:center;align-content:center;height:100%;color:#7c758f;text-align:center}.empty-state h2{margin:14px 0 8px;color:#312d4b}.empty-state p{max-width:440px;margin:0;line-height:1.7}.message-row{display:flex;margin-bottom:12px}.message-avatar{display:none}.message-row.out{justify-content:flex-end}.message-row.in{justify-content:flex-start}.bubble{max-width:min(560px,72%);border-radius:8px;background:#fff;color:#312d4b;box-shadow:0 2px 8px #2f2b4514;padding:10px 12px 8px}.message-row.out .bubble{background:#7e57e8;color:#fff}.bubble p{margin:0;white-space:pre-wrap;word-break:break-word;line-height:1.55}.bubble time{display:block;margin-top:6px;color:currentColor;font-size:11px;opacity:.72;text-align:right}.composer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border-top:1px solid #ebe7f3;background:#fff;padding:14px 16px}.composer input{min-height:44px;border:1px solid #ddd8ea;border-radius:8px;padding:0 14px}.composer input:focus{border-color:#8c57ff;box-shadow:0 0 0 3px #8c57ff1f}.send-button{min-height:44px}@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.mobile-brand{display:inline-flex;margin-bottom:28px}.login-panel{min-height:100vh;padding:24px}.chat-shell{position:relative;display:block;height:100dvh;min-height:100vh;overflow:hidden;padding:0}.chat-sidebar{position:fixed;z-index:20;top:0;bottom:0;left:0;width:min(86vw,340px);max-height:none;border-radius:0 8px 8px 0;transform:translate(-105%);transition:transform .2s ease}.chat-main{height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none}.chat-shell.sidebar-open .chat-sidebar{transform:translate(0)}.chat-shell.sidebar-open .sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;border:0;border-radius:0;background:#2f2b4557}.mobile-menu-button,.mobile-more-button{display:inline-flex}.sidebar-head{padding:14px 16px}.connection-card{margin:12px 14px 0}.target-box{padding:12px 14px}.contact-list{padding:0 10px 14px}.chat-topbar{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;min-height:72px;padding:10px}.active-user{justify-self:center;width:100%;gap:10px}.active-user img{width:40px;height:40px}.active-user h1{font-size:16px}.active-user span{font-size:12px}.topbar-note{display:none}.message-log{padding:20px 14px 12px}.message-row{align-items:flex-end;gap:8px;margin-bottom:18px}.message-row.out{padding-left:42px}.message-row.in{padding-right:42px}.message-avatar{display:block;width:30px;height:30px;flex:0 0 auto;border-radius:50%;object-fit:cover}.bubble{max-width:min(280px,78%);padding:10px 12px 8px}.empty-state{min-height:100%;padding:0 24px}.empty-state h2{font-size:20px}.empty-state p{font-size:14px}.composer{grid-template-columns:minmax(0,1fr) auto;gap:8px;border-top:0;box-shadow:0 -6px 18px #2f2b4514;padding:10px 10px max(10px,env(safe-area-inset-bottom))}.composer>svg{display:none}.composer input{min-height:46px}.send-button{width:46px;min-height:46px;padding:0}.send-button span{display:none}}