:root{--primary-color: #00a884;--primary-dark: #008069;--background-default: #f0f2f5;--panel-background: #ffffff;--message-in: #ffffff;--message-out: #d9fdd3;--text-primary: #111b21;--text-secondary: #667781;--border-color: #e9edef;--online-indicator: #00a884;--offline-indicator: #8696a0;--hover-background: #f5f6f6;--input-background: #f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:fixed;background-color:var(--background-default);color:var(--text-primary)}body{min-width:320px}#root{width:100%;height:100%;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0000004d}button{font-family:inherit;cursor:pointer;border:none;outline:none}input,textarea{font-family:inherit}a{color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#00a884 0% 130px,#f0f2f5 130px 100%);padding:20px;overflow-y:auto;overflow-x:hidden}.auth-box{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;width:100%;max-width:400px;padding:30px}.auth-header{text-align:center;margin-bottom:30px}.auth-logo{font-size:64px;margin-bottom:16px}.auth-header h1{color:#111b21;font-size:24px;font-weight:500;margin:0 0 8px}.auth-header p{color:#667781;font-size:14px;margin:0}.auth-form{margin-bottom:20px}.form-group{margin-bottom:16px}.form-group input{width:100%;padding:12px 16px;border:1px solid #e9edef;border-radius:4px;font-size:15px;font-family:inherit;transition:border-color .2s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#00a884}.form-group input:disabled{background-color:#f0f2f5;cursor:not-allowed}.error-message{background-color:#fee;color:#c00;padding:12px;border-radius:4px;font-size:14px;margin-bottom:16px;border-left:3px solid #c00}.submit-btn{width:100%;padding:12px;background-color:#00a884;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s;font-family:inherit}.submit-btn:hover:not(:disabled){background-color:#008069}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.auth-footer{text-align:center;padding-top:20px;border-top:1px solid #e9edef}.auth-footer p{color:#667781;font-size:14px;margin:0}.link-btn{background:none;border:none;color:#00a884;cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;padding:0;font-family:inherit}.link-btn:hover:not(:disabled){text-decoration:underline}.link-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.auth-container{padding:16px}.auth-box{padding:24px}.auth-logo{font-size:56px}.auth-header h1{font-size:22px}.form-group input{padding:10px 14px;font-size:14px}.submit-btn{padding:11px;font-size:15px}}@media(max-width:480px){.auth-container{padding:12px}.auth-box{padding:20px}.auth-logo{font-size:48px}.auth-header h1{font-size:20px}.auth-header p{font-size:13px}.form-group input{padding:9px 12px;font-size:13px}.submit-btn{padding:10px;font-size:14px}.auth-footer p,.link-btn{font-size:13px}}.avatar{position:relative;display:inline-block;flex-shrink:0}.avatar-small{width:32px;height:32px}.avatar-medium{width:49px;height:49px}.avatar-large{width:64px;height:64px}.avatar-image,.avatar-placeholder{width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-placeholder{background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px}.avatar-small .avatar-placeholder{font-size:11px}.avatar-large .avatar-placeholder{font-size:18px}.online-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;border:2px solid white}.online-indicator.online{background-color:var(--online-indicator)}.online-indicator.offline{background-color:var(--offline-indicator)}.spinner{display:inline-block}.spinner-small{width:16px;height:16px}.spinner-medium{width:32px;height:32px}.spinner-large{width:48px;height:48px}.spinner-circle{width:100%;height:100%;border:3px solid rgba(0,168,132,.2);border-top-color:var(--primary-color);border-radius:50%;animation:spinner-rotate .8s linear infinite}.spinner-small .spinner-circle{border-width:2px}.spinner-large .spinner-circle{border-width:4px}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.loading-container{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-secondary)}.loading-container .spinner{margin-right:12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text-secondary)}.empty-state-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state-title{font-size:20px;font-weight:500;color:var(--text-primary);margin-bottom:8px}.empty-state-description{font-size:14px;max-width:300px}@media(max-width:768px){.empty-state{padding:40px 20px}.empty-state-icon{font-size:48px}.empty-state-title{font-size:18px}.empty-state-description{font-size:13px}.loading-container{padding:30px;font-size:14px}}@media(max-width:480px){.empty-state{padding:30px 16px}.empty-state-icon{font-size:40px}.empty-state-title{font-size:16px}.empty-state-description{font-size:12px;max-width:250px}}.sidebar{width:400px;height:100%;max-height:100%;background-color:var(--panel-background);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:10px 16px;background-color:var(--background-default);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color)}.user-profile{display:flex;align-items:center;gap:12px;flex:1}.user-info{flex:1;min-width:0}.user-name{font-weight:500;color:var(--text-primary);font-size:16px}.user-username{font-size:13px;color:var(--text-secondary)}.new-chat-btn,.logout-icon-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .2s}.new-chat-btn:hover,.logout-icon-btn:hover{background-color:var(--hover-background)}.user-search{padding:8px;background-color:var(--panel-background);border-bottom:1px solid var(--border-color)}.search-input{width:100%;padding:10px 16px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;background-color:var(--input-background)}.search-input:focus{outline:none;border-color:var(--primary-color)}.search-results{max-height:300px;overflow-y:auto;margin-top:8px}.search-result-item{padding:12px 16px;cursor:pointer;border-radius:4px;transition:background-color .2s}.search-result-item:hover{background-color:var(--hover-background)}.search-result-name{font-weight:500;color:var(--text-primary)}.search-result-username{font-size:13px;color:var(--text-secondary)}.search-loading,.no-results{padding:16px;text-align:center;color:var(--text-secondary);font-size:14px}.chat-list{flex:1;overflow-y:auto}.chat-list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background-color .2s}.chat-list-item:hover{background-color:var(--hover-background)}.chat-list-item.selected{background-color:var(--background-default)}.chat-item-content{flex:1;min-width:0}.chat-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.chat-item-name{font-weight:500;color:var(--text-primary);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-item-time{font-size:12px;color:var(--text-secondary);flex-shrink:0;margin-left:8px}.chat-item-last-message{font-size:14px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1024px){.sidebar{width:350px}}@media(max-width:768px){.sidebar{width:100%;border-right:none}.sidebar-header{padding:8px 12px}.user-name{font-size:15px}.user-username{font-size:12px}.new-chat-btn,.logout-icon-btn{font-size:20px;padding:6px}.search-input{padding:8px 12px;font-size:13px}.chat-list-item{padding:10px 12px}.chat-item-name{font-size:15px}.chat-item-last-message{font-size:13px}.chat-item-time{font-size:11px}.search-result-item{padding:10px 12px}.search-result-name{font-size:15px}.search-result-username{font-size:12px}}@media(max-width:480px){.user-name,.chat-item-name{font-size:14px}.chat-item-last-message{font-size:12px}.avatar-medium{width:42px;height:42px}}.chat-window{flex:1;display:flex;flex-direction:column;background-color:#e5ddd5;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><text x="10" y="50" font-size="40">💬</text></svg>');height:100%;max-height:100%;overflow:hidden;position:relative}.chat-header{background-color:var(--panel-background);padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border-color);flex-shrink:0;min-height:60px}.back-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;color:var(--text-primary);margin-right:4px}.back-btn:hover{background-color:var(--hover-background);border-radius:50%}.chat-header-info{flex:1}.chat-header-name{font-weight:500;color:var(--text-primary);font-size:16px}.chat-header-status{font-size:13px;color:var(--text-secondary)}.chat-header-status.typing{color:var(--primary-color);font-style:italic}.message-list{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:8px}.message{display:flex;margin-bottom:4px}.message-own{justify-content:flex-end}.message-other{justify-content:flex-start}.message-bubble{max-width:65%;padding:6px 10px 8px;border-radius:8px;position:relative;word-wrap:break-word}.message-own .message-bubble{background-color:var(--message-out);border-bottom-right-radius:2px}.message-other .message-bubble{background-color:var(--message-in);border-bottom-left-radius:2px;box-shadow:0 1px .5px #00000021}.message-text{color:var(--text-primary);font-size:14px;line-height:1.4;margin-bottom:4px}.message-time{font-size:11px;color:var(--text-secondary);text-align:right;margin-top:4px}.message-image{max-width:100%;max-height:400px;border-radius:4px;margin-bottom:4px;display:block}.message-file{margin-bottom:4px}.file-link{color:var(--primary-color);text-decoration:none;font-size:14px;display:inline-block;padding:8px 12px;background-color:#0000000d;border-radius:4px}.file-link:hover{background-color:#0000001a}.message-input{background-color:var(--panel-background);padding:10px 16px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--border-color);flex-shrink:0;min-height:60px}.attach-btn,.send-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .2s;flex-shrink:0}.attach-btn:hover:not(:disabled),.send-btn:hover:not(:disabled){background-color:var(--hover-background)}.attach-btn:disabled,.send-btn:disabled{opacity:.5;cursor:not-allowed}.text-input{flex:1;padding:10px 16px;border:none;border-radius:21px;background-color:var(--panel-background);font-size:15px;outline:none}.text-input:focus{background-color:#fff}.send-btn{color:var(--primary-color);font-size:20px}.message-voice{display:flex;align-items:center;gap:8px;min-width:200px}.voice-play-btn{width:36px;height:36px;border-radius:50%;border:none;background-color:var(--primary-color);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.voice-play-btn:hover{background-color:var(--primary-dark)}.voice-waveform{flex:1;font-size:13px;color:var(--text-secondary)}.recording-mode,.voice-preview-mode{background-color:var(--panel-background);padding:10px 16px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border-color);flex-shrink:0;min-height:60px}.recording-indicator{flex:1;display:flex;align-items:center;gap:12px;color:var(--primary-color);font-weight:500}.recording-dot{width:12px;height:12px;border-radius:50%;background-color:red;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.recording-time{font-size:16px}.voice-preview{flex:1;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-primary)}.cancel-recording-btn,.stop-recording-btn,.cancel-voice-btn,.send-voice-btn,.voice-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .2s;flex-shrink:0}.cancel-recording-btn:hover,.cancel-voice-btn:hover{background-color:#ff00001a;color:red}.stop-recording-btn:hover{background-color:var(--hover-background)}.send-voice-btn,.voice-btn{color:var(--primary-color);font-size:20px}.send-voice-btn:hover:not(:disabled),.voice-btn:hover:not(:disabled){background-color:var(--hover-background)}.send-voice-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1024px){.chat-window{width:100%}.message-bubble{max-width:75%}}@media(max-width:768px){.chat-header{padding:8px 12px}.chat-header-name{font-size:15px}.chat-header-status{font-size:12px}.message-bubble{max-width:85%;padding:5px 8px 6px}.message-text{font-size:13px}.message-list{padding:12px 8px}.message-input{padding:8px 12px}.text-input{font-size:14px;padding:8px 12px}.attach-btn,.send-btn,.voice-btn{font-size:20px;padding:6px}.message-image{max-height:300px}.voice-play-btn{width:32px;height:32px;font-size:14px}}@media(max-width:480px){.message-bubble{max-width:90%}.message-list{padding:8px}.chat-header-name{font-size:14px}.message-text{font-size:12px}}.main-layout{display:flex;height:100%;width:100%;max-height:100%;background-color:var(--background-default);overflow:hidden;position:relative}@media(max-width:1024px){.main-layout{position:relative}}@media(max-width:768px){.main-layout{flex-direction:column}.main-layout.chat-selected .sidebar{display:none}.main-layout.chat-selected .chat-window{display:flex}}.chat-app{width:100%;height:100%;background-color:#f0f2f5;overflow:hidden}.temp-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:20px;text-align:center}.temp-container h1{color:#111b21;font-size:32px;margin-bottom:16px}.temp-container p{color:#667781;font-size:16px;margin-bottom:12px}.logout-btn{padding:12px 24px;background-color:#00a884;color:#fff;border:none;border-radius:4px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s;margin:20px 0}.logout-btn:hover{background-color:#008069}.info-text{font-style:italic;color:#8696a0}