:root{--brand-50: #eff6ff;--brand-100: #dbeafe;--brand-500: #3b82f6;--brand-600: #2563eb;--brand-700: #1d4ed8;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-400: #94a3b8;--slate-500: #64748b;--slate-900: #1e293b;--red-500: #ef4444;--red-600: #dc2626;--green-500: #22c55e;--font-sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--slate-900);background:var(--slate-50)}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea{font-family:inherit}.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--slate-50);padding:16px}.login-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000001a;padding:32px;width:100%;max-width:24rem}.login-title{font-size:20px;font-weight:600;text-align:center;color:var(--slate-900);margin-bottom:24px}.login-form{display:flex;flex-direction:column;gap:8px}.login-label{font-size:14px;color:var(--slate-500)}.login-input{border:1px solid var(--slate-200);border-radius:8px;padding:12px 16px;font-size:16px;outline:none;transition:border-color .2s}.login-input:focus{border-color:var(--brand-500);box-shadow:0 0 0 2px #3b82f633}.login-error{font-size:14px;color:var(--red-600);text-align:center;margin-top:4px}.login-button{height:48px;border-radius:8px;background:var(--brand-600);color:#fff;font-size:16px;font-weight:600;margin-top:8px;transition:background .2s}.login-button:hover:not(:disabled){background:var(--brand-700)}.login-button:disabled{opacity:.5;cursor:not-allowed}.dashboard{display:flex;height:100dvh;background:var(--slate-50);position:relative}.logout-button{position:absolute;top:16px;right:16px;font-size:14px;color:var(--slate-500);z-index:10;padding:4px 8px;border-radius:8px;transition:color .2s}.logout-button:hover{color:var(--brand-600)}.sidebar{width:280px;background:#fff;border-right:1px solid var(--slate-200);display:flex;flex-direction:column;flex-shrink:0}.sidebar-header{height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--slate-200)}.sidebar-header h2{font-size:16px;font-weight:600;color:var(--slate-900)}.ws-status{font-size:12px;padding:2px 8px;border-radius:9999px;font-weight:500}.ws-status-connecting{background:var(--brand-50);color:var(--brand-600)}.ws-status-connected{background:#dcfce7;color:#166534}.ws-status-disconnected{background:#fee2e2;color:var(--red-600)}.session-list-error{background:#fee2e2;color:var(--red-600);font-size:14px;padding:12px 16px;border-bottom:1px solid var(--slate-200)}.session-list-error small{color:var(--red-600);opacity:.8}.session-list{flex:1;overflow-y:auto}.session-empty{text-align:center;font-size:14px;color:var(--slate-400);padding:32px 0}.session-item{padding:12px 16px;border-bottom:1px solid var(--slate-100);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:background .2s}.session-item:hover{background:var(--slate-50)}.session-selected{background:var(--brand-50);border-left:4px solid var(--brand-600);padding-left:12px}.session-row{display:flex;justify-content:space-between;align-items:center}.session-name{font-size:14px;font-weight:600;color:var(--slate-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unread-badge{min-width:20px;height:20px;border-radius:9999px;background:var(--red-500);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0;margin-left:8px}.session-preview{font-size:14px;color:var(--slate-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-meta{font-size:14px;color:var(--slate-400)}.chat-area{flex:1;display:flex;flex-direction:column;background:var(--slate-50);min-width:0}.chat-header{height:56px;padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--slate-200);background:#fff}.back-button{font-size:20px;color:var(--slate-500);padding:4px 8px;border-radius:8px}.back-button:hover{color:var(--brand-600)}.chat-header-name{font-size:16px;font-weight:600;color:var(--slate-900)}.message-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.message-bubble{max-width:75%;display:flex;flex-direction:column;word-break:break-word}.message-staff{margin-left:auto;background:var(--brand-600);color:#fff;border-radius:16px 16px 4px;padding:8px 12px}.message-visitor{margin-right:auto;background:var(--slate-100);color:var(--slate-900);border-radius:16px 16px 16px 4px;padding:8px 12px}.bubble-content{font-size:14px;line-height:1.5}.bubble-time{font-size:14px;color:var(--slate-400);margin-top:4px}.message-staff .bubble-time{color:#ffffffb3}.no-session-selected{flex:1;display:flex;align-items:center;justify-content:center;color:var(--slate-400);font-size:14px}.chat-input-area{border-top:1px solid var(--slate-200);background:#fff;padding:12px;display:flex;align-items:flex-end;gap:8px}.chat-input{flex:1;min-height:44px;max-height:96px;resize:none;border:1px solid var(--slate-200);border-radius:8px;padding:8px 12px;font-size:14px;line-height:1.5;color:var(--slate-900);outline:none;transition:border-color .2s}.chat-input:focus{border-color:var(--brand-500);box-shadow:0 0 0 2px #3b82f633}.send-button{height:44px;padding:0 16px;border-radius:8px;background:var(--brand-600);color:#fff;font-size:14px;font-weight:500;transition:background .2s}.send-button:hover:not(:disabled){background:var(--brand-700)}.send-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 767px){.sidebar{width:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.sidebar-hidden-mobile{display:none}.chat-area{width:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}.chat-area-hidden-mobile{display:none}.logout-button{z-index:3}}