:root{--bg-main:#1e1e1e50;--bg-secondary:#1a1a1a;--bg-tertiary:#222;--border-color:#333;--text-primary:#e0e0e0;--text-secondary:#aaa;--text-muted:#777;--accent-color:#3a7bd5;--accent-color-light:#4285f4;--accent-hover:#2c5da8;--bubble-mine:#2c394b;--bubble-other:#292929;--error-color:#cf6679;--error-bg:#3e1f24;--success-color:#4caf50;--scroll-thumb:#444;--scroll-track:#222;--shadow-color:rgba(0,0,0,.5)}.message-container{display:flex;height:90%;width:100%;max-height:800px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px var(--shadow-color);background-color:var(--bg-main);margin:20px auto;color:var(--text-primary)}.user-list{width:30%;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);overflow-y:auto;transition:all .3s ease}.user-list-header{padding:16px;margin:0;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-tertiary);position:-webkit-sticky;position:sticky;top:0;z-index:2}.user-list-header h2{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.add-conversation-btn{background-color:var(--accent-color);color:var(--text-primary);border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px var(--shadow-color)}.add-conversation-btn:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 8px var(--shadow-color)}.user-item{padding:14px 16px;border-bottom:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease}.user-item:hover{background-color:var(--bg-tertiary)}.user-item.active{background-color:rgba(58,123,213,.2);border-left:3px solid var(--accent-color)}.user-avatar{width:45px;height:45px;border-radius:50%;margin-right:12px;background-color:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:700;color:var(--text-primary);font-size:16px;box-shadow:0 2px 4px var(--shadow-color)}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-info{flex:1 1;overflow:hidden}.user-name{font-weight:600;margin-bottom:4px;color:var(--text-primary)}.user-name,.user-username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-username{font-size:13px;color:var(--text-secondary)}.chat-area{width:70%;display:flex;flex-direction:column;background-color:var(--bg-main);position:relative}.chat-header{padding:16px;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);font-weight:700;color:var(--text-primary);display:flex;align-items:center;position:-webkit-sticky;position:sticky;top:0;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.2)}.messages-container{flex:1 1;padding:20px;overflow-y:auto;background-color:var(--bg-main);display:flex;flex-direction:column}.message-bubble{max-width:70%;padding:12px 16px;border-radius:18px;margin-bottom:12px;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.2);line-height:1.5;word-break:break-word}.message-bubble.mine{background-color:var(--bubble-mine);align-self:flex-end;margin-left:auto;border-bottom-right-radius:4px;color:var(--text-primary)}.message-bubble.other{background-color:var(--bubble-other);align-self:flex-start;border-bottom-left-radius:4px;color:var(--text-primary);border:1px solid var(--border-color)}.message-time{font-size:11px;color:var(--text-muted);margin-top:5px;text-align:right}.input-area{padding:16px;background-color:var(--bg-tertiary);border-top:1px solid var(--border-color);display:flex;align-items:flex-start}.input-wrapper{flex:1 1;position:relative;margin-right:12px}.message-input{width:100%;border:1px solid var(--border-color);border-radius:24px;padding:12px 18px 28px;outline:none;resize:none;font-family:inherit;font-size:14px;line-height:1.4;transition:border .2s ease,box-shadow .2s ease;min-height:24px;max-height:120px;background-color:var(--bg-secondary);color:var(--text-primary)}.message-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px rgba(58,123,213,.3)}.char-counter{position:absolute;bottom:6px;right:16px;font-size:12px;color:var(--text-muted);background-color:transparent;transition:color .3s ease}.char-counter.warning{color:#ff9800;font-weight:500}.char-counter.error{color:var(--error-color);font-weight:700}.send-button{background-color:var(--accent-color);color:var(--text-primary);border:none;border-radius:24px;padding:0 24px;height:40px;cursor:pointer;font-weight:500;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.send-button:hover{background-color:var(--accent-hover)}.send-button:disabled{background-color:#444;color:var(--text-muted);cursor:not-allowed}.empty-state{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--text-secondary);padding:20px;text-align:center}.loading-spinner{margin-top:20px;width:30px;height:30px;border-radius:50%;border:3px solid rgba(58,123,213,.2);border-left:3px solid var(--accent-color);animation:spin 1s ease infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.no-conversation{display:flex;height:100%;align-items:center;justify-content:center;color:var(--text-secondary);font-size:16px;flex-direction:column;text-align:center;padding:20px}.no-conversation svg{color:var(--text-muted);margin-bottom:16px}.no-conversation p{margin-top:10px}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.dialog-content{background-color:var(--bg-secondary);border-radius:12px;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 30px var(--shadow-color);animation:dialog-slide-up .3s ease;overflow:hidden}@keyframes dialog-slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dialog-header{padding:16px 20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-tertiary)}.dialog-header h3{margin:0;color:var(--text-primary);font-size:18px}.close-button{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.close-button:hover{background-color:hsla(0,0%,100%,.1)}.dialog-body{padding:20px;overflow-y:auto;flex:1 1}.search-container{margin-bottom:20px}.search-input{width:100%;padding:12px 16px;border:1px solid var(--border-color);border-radius:8px;font-size:16px;outline:none;transition:all .2s ease;background-color:var(--bg-main);color:var(--text-primary)}.search-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(58,123,213,.3)}.search-results{max-height:50vh;overflow-y:auto;border-radius:8px}.no-results,.search-loading,.search-tip{padding:30px 0;text-align:center;color:var(--text-secondary);font-size:15px}.error-message{padding:10px 15px;color:var(--error-color);text-align:center;background:var(--error-bg);position:absolute;bottom:70px;left:50%;transform:translateX(-50%);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:3;max-width:80%;display:flex;align-items:center}.error-message svg{margin-right:8px}.back-button{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:5px 10px 5px 0;margin-right:10px;display:flex;align-items:center;transition:color .2s ease}.back-button-empty,.back-button:hover{color:var(--text-primary)}.back-button-empty{background:var(--accent-color);border:none;border-radius:8px;padding:10px 15px;cursor:pointer;display:flex;align-items:center;margin-bottom:20px;transition:background-color .2s ease}.back-button-empty svg{margin-right:8px}.back-button-empty:hover{background-color:var(--accent-hover)}@media (max-width:768px){.message-container{height:calc(100vh - 80px)}.user-list{width:100%;height:40%;border-right:none;border-bottom:1px solid var(--border-color)}.chat-area{width:100%;height:60%}.message-bubble{max-width:85%}.dialog-content{width:95%;max-height:90vh}.add-conversation-btn,.close-button,.send-button,.user-item{padding:12px}.input-area{padding:10px;position:fixed;bottom:0;width:100%;background-color:var(--bg-tertiary);box-shadow:0 -2px 10px rgba(0,0,0,.1)}.char-counter{bottom:4px;right:12px;font-size:10px}.message-input{padding-bottom:24px}@supports (padding-bottom:env(safe-area-inset-bottom)){.input-area{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}.chat-area,.user-list{height:100%}.mobile-hidden{transform:translateX(100%);visibility:hidden}.chat-area,.user-list{transform:translateX(0)}.chat-area:not(.mobile-hidden),.user-list:not(.mobile-hidden){z-index:2}.chat-header{display:flex;align-items:center;padding:12px}.messages-container{padding-bottom:70px}.add-conversation-btn{width:32px!important;height:32px!important;border-radius:50%!important;padding:0!important;display:flex;align-items:center;justify-content:center}.message-container{flex-direction:column;height:100vh!important;margin:0;border-radius:0;max-height:none;position:relative;overflow:hidden}.chat-area,.user-list{position:absolute;top:0;left:0;width:100%;height:100%!important;transition:transform .3s ease;overflow-y:auto;transform:translateX(0);visibility:visible}.mobile-hidden{transform:translateX(100%)!important;visibility:hidden!important;height:100%!important}}@media (max-width:480px){.user-list-header h2{font-size:16px}.user-avatar{width:40px;height:40px}.message-bubble{padding:10px 12px;font-size:14px}.message-time{font-size:10px}.send-button{min-width:60px;padding:0 12px}.message-container{height:100%}.user-list{height:35%}.chat-area{height:100%}.back-button{padding:8px}.chat-header{padding:8px 10px}.add-conversation-btn{min-height:unset!important;width:32px!important;height:32px!important}.message-container{height:100vh!important;min-height:500px}.chat-area,.user-list{height:100%!important;min-height:500px}.messages-container{padding-bottom:70px;flex:1 1;height:auto;min-height:calc(100% - 120px)}.input-area{position:fixed;bottom:0;left:0;width:100%;z-index:2}}@media (max-height:500px) and (orientation:landscape){.message-container{flex-direction:row;height:calc(100vh - 40px)}.user-list{width:30%;height:100%;border-right:1px solid var(--border-color);border-bottom:none}.chat-area{width:70%;height:100%}.chat-header,.user-item,.user-list-header{padding:8px 12px}.messages-container{padding:12px}.input-area{padding:8px 12px}}.messages-container::-webkit-scrollbar,.search-results::-webkit-scrollbar,.user-list::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track,.search-results::-webkit-scrollbar-track,.user-list::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:6px}.messages-container::-webkit-scrollbar-thumb,.search-results::-webkit-scrollbar-thumb,.user-list::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px}.messages-container::-webkit-scrollbar-thumb:hover,.search-results::-webkit-scrollbar-thumb:hover,.user-list::-webkit-scrollbar-thumb:hover{background:#666}@media (pointer:coarse){.add-conversation-btn,.close-button,.send-button,.user-item{min-height:44px}.message-input,.search-input{font-size:16px}}@supports (-webkit-touch-callout:none){.chat-area,.message-container,.user-list{height:-webkit-fill-available!important}}