.chat-list_chatListContainer__mIMnD{display:flex;flex-direction:column;height:100%;background:#fff;border-right:1px solid #e0e0e0;width:320px;min-width:320px;max-width:320px;flex-shrink:0}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_{padding:20px;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_ h2{margin:0 0 15px;font-size:18px;font-weight:600;color:#333}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_ .chat-list_searchContainer__j6k9J{position:relative}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_ .chat-list_searchContainer__j6k9J .chat-list_searchInput__mtFk7{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;background:#fff;transition:border-color .2s ease}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_ .chat-list_searchContainer__j6k9J .chat-list_searchInput__mtFk7:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.1)}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_ .chat-list_searchContainer__j6k9J .chat-list_searchInput__mtFk7::placeholder{color:#999}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET{flex:1 1;overflow-y:auto;padding:0}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListEmpty__8s_HX,.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListError__I1QT3,.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListLoading__qoegG{display:flex;align-items:center;justify-content:center;height:200px;color:#666;font-size:14px;text-align:center;padding:20px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListError__I1QT3{color:#dc3545}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background-color .2s ease;position:relative}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk:hover{background-color:#f8f9fa}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk.chat-list_active__kgh27{background-color:#e3f2fd;border-left:3px solid #007bff}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk.chat-list_active__kgh27 .chat-list_chatName__Oe404{color:#007bff}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatAvatar__c8SJm{width:48px;height:48px;border-radius:50%;margin-right:12px;flex-shrink:0;overflow:hidden;background:#e9ecef}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatAvatar__c8SJm img{width:100%;height:100%;object-fit:cover}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatAvatar__c8SJm .chat-list_chatAvatarFallback__3brmp{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:16px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO{flex:1 1;min-width:0}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatHeader__MNeb6{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatHeader__MNeb6 .chat-list_chatName__Oe404{margin:0;font-size:14px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatHeader__MNeb6 .chat-list_chatTime__l042k{font-size:12px;color:#999;white-space:nowrap;margin-left:8px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatPreview__q8ADn{display:flex;justify-content:space-between;align-items:center}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatPreview__q8ADn .chat-list_chatLastMessage__P1xqo{margin:0;font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;line-height:1.3}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatPreview__q8ADn .chat-list_chatUnreadCount__9M2_a{background:#ff6b6b;color:#fff;border-radius:50%;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin-left:8px;flex-shrink:0}@media(max-width:768px){.chat-list_chatListContainer__mIMnD{width:100%;min-width:100%;max-width:100%;border-right:none;border-bottom:none;height:100%}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_{padding:10px}.chat-list_chatListContainer__mIMnD .chat-list_chatListHeader__Z1pB_ h2{font-size:16px;margin-bottom:10px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk{padding:10px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatAvatar__c8SJm{width:40px;height:40px;margin-right:10px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatAvatar__c8SJm .chat-list_chatAvatarFallback__3brmp{font-size:14px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatHeader__MNeb6 .chat-list_chatName__Oe404{max-width:120px;font-size:13px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatHeader__MNeb6 .chat-list_chatTime__l042k{font-size:11px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatPreview__q8ADn .chat-list_chatLastMessage__P1xqo{max-width:140px;font-size:12px}.chat-list_chatListContainer__mIMnD .chat-list_chatListContent__x7oET .chat-list_chatListItem__sM9Zk .chat-list_chatInfo__XhsxO .chat-list_chatPreview__q8ADn .chat-list_chatUnreadCount__9M2_a{min-width:18px;height:18px;font-size:10px}}.chat-list_chatListContent__x7oET::-webkit-scrollbar{width:6px}.chat-list_chatListContent__x7oET::-webkit-scrollbar-track{background:#f1f1f1}.chat-list_chatListContent__x7oET::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.chat-list_chatListContent__x7oET::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.chatBackdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:999;opacity:0;animation:fadeIn .3s ease-out forwards}@media(max-width:768px){.chatBackdrop{display:block}}@media(min-width:769px){.chatBackdrop{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.chatContainer{width:100%;max-width:600px;margin:0 auto;border:1px solid #ccc;border-radius:10px;display:flex;flex-direction:column;height:100vh;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.15);background:#fff}@media(min-width:769px){.chatContainer:not(.full-width){position:fixed;bottom:20px;right:20px;width:400px;height:600px;max-width:none;margin:0;z-index:1000;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.2);animation:slideInUp .3s ease-out}}.chatContainer.full-width{position:relative;width:100%;height:100%;max-width:none;margin:0;border-radius:0;box-shadow:none;border:none;animation:none}@media(min-width:769px){.chatContainer.full-width{position:relative;bottom:auto;right:auto;width:100%;height:100%;max-width:none;margin:0;z-index:auto;border-radius:0;box-shadow:none;animation:none}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.chatHeader{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 15px;border-bottom:1px solid #eee;position:-webkit-sticky;position:sticky;top:0;z-index:10;border-radius:12px 12px 0 0}.full-width .chatHeader{border-radius:0}.chatHeader .storeInfo{display:flex;align-items:center;gap:12px;flex:1 1;min-width:0}.chatHeader .storeInfo .backButton{background:none;border:none;cursor:pointer;padding:5px;border-radius:4px}.chatHeader .storeInfo .storeLogoContainer{position:relative;width:48px;height:48px;border-radius:8px;overflow:hidden;border:2px solid #e0e0e0;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0}.chatHeader .storeInfo .storeLogoContainer .storeLogo{width:100%;height:100%;object-fit:cover;border-radius:6px}.chatHeader .storeInfo .storeLogoContainer .storeLogoFallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#6c757d;background:#f8f9fa}.chatHeader .storeInfo .storeLogoContainer .storeLogoFallback.hidden{display:none}.chatHeader .storeInfo .storeLogoContainer .storeLogoFallback svg{width:24px;height:24px}.chatHeader .storeInfo .storeDetails{flex:1 1;min-width:0}.chatHeader .storeInfo .storeDetails .storeName{margin:0;font-size:1.25rem;font-weight:600;color:#333;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatHeader .storeInfo .storeDetails .storeLocation{margin:2px 0 0;font-size:.875rem;color:#666;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chatHeader h1{margin:0;font-size:1.5rem}.chatHeader .headerRight{display:flex;align-items:center;gap:15px;flex-shrink:0}.chatHeader .closeButton{background:none;border:none;cursor:pointer;padding:5px;border-radius:4px;transition:background-color .2s;display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}.chatHeader .closeButton:hover{background-color:#f5f5f5}.chatHeader .closeButton img{display:block;width:13px;height:13px}.connectionStatus{font-size:.8rem;padding:4px 8px;border-radius:4px;font-weight:500}.connectionStatus.connected{background-color:#e8f5e8;border-radius:5px;color:#2e7d32}.connectionStatus.disconnected{background-color:#ffebee;color:#c62828}.connectionStatus.failed{background-color:#fff3e0;color:#ef6c00}.connectionStatus.reconnecting{background-color:#e3f2fd;color:#1976d2;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.messagesContainer{flex:1 1;overflow-y:auto;display:flex;flex-direction:column;padding:20px;scroll-behavior:smooth;scroll-margin-bottom:20px}@media(min-width:769px){.full-width .messagesContainer{width:1060px}}@media(max-width:768px){.messagesContainer{padding-bottom:30px;scroll-margin-bottom:30px}}.dateGroup{margin-bottom:20px}.dateSeparator{text-align:center;color:#666;font-size:12px;margin:15px 0;position:relative}.dateSeparator:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:#e0e0e0;z-index:1}.dateSeparator span{background-color:#fff;padding:0 10px;position:relative;z-index:2}.messageWrapper{display:flex;flex-direction:column;margin-bottom:8px}.messageWrapper.sent{align-items:flex-end}.messageWrapper.received{align-items:flex-start}.sentMessage{background-color:#0d2138;color:#fff;border-radius:18px;border-bottom-right-radius:4px}.receivedMessage,.sentMessage{padding:12px 16px;max-width:70%;word-wrap:break-word;box-shadow:0 1px 2px rgba(0,0,0,.1)}.receivedMessage{background-color:#f5f5f5;color:#333;border-radius:18px;border-bottom-left-radius:4px}.messageTime{font-size:11px;color:#999;margin-top:4px;padding:0 4px}.messageStatus{font-size:12px;color:gray;position:absolute;bottom:-15px;right:10px}.inputContainer{display:flex;gap:10px;padding:15px 20px 20px;background:#fff;border-top:1px solid #eee;position:-webkit-sticky;position:sticky;bottom:0;z-index:20;border-radius:0 0 12px 12px}@media(max-width:768px){.inputContainer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}.inputField{flex:1 1;padding:10px;border:1px solid #ccc;font-size:16px;-webkit-appearance:none;border-radius:5px}.inputField:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed}.inputField:focus{outline:none;border-color:#0d2138;box-shadow:0 0 0 2px rgba(13,33,56,.1)}.sendButton{padding:10px 20px;color:#0d2138;border:none;border-radius:5px;cursor:pointer;transition:all .2s ease}.sendButton:not(:disabled):hover{background-color:#0d2138;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(13,33,56,.2)}.sendButton:not(:disabled):active{transform:translateY(0);box-shadow:0 1px 4px rgba(13,33,56,.2)}.sendButton:disabled{background-color:#f5f5f5;color:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.sendButton:disabled .sendIcon{opacity:.5}.sendButton .sendIcon{transition:opacity .2s ease}.sendButton .sendIcon:not(:disabled) .sendButton .sendIcon:hover{fill:#fff}@media(max-width:768px){.chatContainer{height:100vh;max-width:100%;border-radius:0;border:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:#fff}.chatHeader{padding:15px;background:#fff}.chatHeader .storeInfo{gap:10px}.chatHeader .storeInfo .storeLogoContainer{width:40px;height:40px}.chatHeader .storeInfo .storeLogoContainer .storeLogoFallback svg{width:20px;height:20px}.chatHeader .storeInfo .storeDetails .storeName{font-size:1.1rem}.chatHeader .storeInfo .storeDetails .storeLocation{font-size:.8rem}.chatHeader .headerRight{gap:10px}.chatHeader .headerRight .connectionStatus{font-size:.75rem;padding:3px 6px}.messagesContainer{padding:15px 15px 100px;scroll-margin-bottom:100px}.inputContainer{padding:15px;gap:8px}.inputField{padding:8px}.sendButton{padding:8px 16px;font-size:.9rem}}@media(max-width:480px){.chatHeader{padding:12px}.chatHeader .storeInfo{gap:8px}.chatHeader .storeInfo .storeLogoContainer{width:36px;height:36px}.chatHeader .storeInfo .storeLogoContainer .storeLogoFallback svg{width:18px;height:18px}.chatHeader .storeInfo .storeDetails .storeName{font-size:1rem}.chatHeader .storeInfo .storeDetails .storeLocation{font-size:.75rem}.inputContainer{padding:12px}}