:root{--primary-blue: #0E7490;--bg-light: #F9FAFB;--border-color: #E5E7EB;--text-dark: #111827;--text-gray: #6B7280;--msg-incoming-bg: #F3F4F6;--msg-outgoing-bg: #E0F2FE}body{background-color:var(--bg-light)!important;color:var(--text-dark);font-family:Inter,sans-serif}.messages-page-container{max-width:1200px;margin:40px auto;padding:0 20px}.page-title{font-size:32px;font-weight:800;margin-bottom:24px;color:#1a1a1a}.messages-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px #0000000d;display:flex;height:700px;overflow:hidden;border:1px solid #f0f0f0}.messages-sidebar{width:320px;border-right:1px solid var(--border-color);display:flex;flex-direction:column;background:#fff}.sidebar-header{padding:24px}.sidebar-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;margin-bottom:20px}.message-count{background:#e0f2fe;color:#0ea5e9;font-size:12px;padding:2px 8px;border-radius:12px;font-weight:600}.search-box{position:relative;margin-bottom:0}.search-box input{width:100%;padding:10px 40px 10px 16px;border:1px solid #E5E7EB;border-radius:8px;outline:none;font-size:14px}.search-box svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#9ca3af}.conversations-list{flex:1;overflow-y:auto}.conversation-item{display:flex;padding:16px 24px;cursor:pointer;transition:background .2s;border-bottom:1px solid #f9f9f9;position:relative}.conversation-item:hover{background:#f9fafb}.conversation-item.active{background:#eff6ff}.conversation-item.unread:before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#0ea5e9;border-radius:50%}.user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:12px}.msg-preview{flex:1;min-width:0}.msg-header{display:flex;justify-content:space-between;margin-bottom:4px}.msg-name{font-weight:600;font-size:14px;color:#111827}.msg-time{font-size:12px;color:#9ca3af}.msg-role{font-size:12px;color:#6b7280;margin-bottom:4px;display:block}.msg-text{font-size:13px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.read-receipt{margin-left:4px;width:14px;height:14px;vertical-align:middle}.chat-window{flex:1;display:flex;flex-direction:column;background:#fff}.chat-header{padding:16px 24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.chat-user-info{display:flex;align-items:center}.chat-user-avatar{width:40px;height:40px;border-radius:50%;margin-right:12px}.chat-username{font-weight:700;font-size:16px;color:#111827}.chat-actions{display:flex;gap:12px}.btn-archive,.btn-seller-page{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;background:#fff;transition:all .2s}.btn-archive{border:1px solid #7DD3FC;color:#0e7490}.btn-seller-page{border:1px solid #7DD3FC;color:#0e7490;display:flex;align-items:center;gap:6px;text-decoration:none}.btn-seller-page:hover,.btn-archive:hover{background:#f0f9ff}.chat-messages{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:24px;background:#fff}.message-group{display:flex;gap:12px;max-width:80%}.message-group.incoming{align-self:flex-start}.message-group.outgoing{align-self:flex-end;flex-direction:row-reverse}.group-avatar{width:32px;height:32px;border-radius:50%;margin-top:4px}.message-bubble{padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5;position:relative}.incoming .message-bubble{background:var(--msg-incoming-bg);color:#374151;border-top-left-radius:2px}.outgoing .message-bubble{background:var(--msg-outgoing-bg);color:#374151;border-top-right-radius:2px}.file-attachment{display:flex;align-items:center;background:#fff;border:1px solid #E5E7EB;border-radius:8px;padding:10px 12px;margin-bottom:4px;width:280px}.file-icon{width:24px;height:24px;margin-right:12px}.file-info{display:flex;flex-direction:column}.file-name{font-size:14px;font-weight:500;color:#374151}.file-size{font-size:12px;color:#9ca3af}.date-divider{text-align:center;margin:16px 0;position:relative}.date-divider span{background:#fff;padding:0 12px;color:#9ca3af;font-size:12px;position:relative;z-index:1}.date-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#f3f4f6;z-index:0}.chat-input-area{padding:24px;border-top:1px solid var(--border-color)}.input-wrapper{border:1px solid #E5E7EB;border-radius:12px;padding:12px;background:#fff;display:flex;flex-direction:column}.input-wrapper textarea{border:none;outline:none;resize:none;width:100%;min-height:48px;font-family:inherit;font-size:14px;color:#374151;margin-bottom:12px}.input-wrapper textarea::placeholder{color:#9ca3af}.input-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px}.action-icon{color:#6b7280;cursor:pointer;transition:color .2s}.action-icon:hover{color:#374151}.btn-send{background:#0e7490;color:#fff;border:none;border-radius:8px;padding:8px 24px;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s}.btn-send:hover{background:#0891b2}.conversations-list::-webkit-scrollbar,.chat-messages::-webkit-scrollbar{width:6px}.conversations-list::-webkit-scrollbar-track,.chat-messages::-webkit-scrollbar-track{background:transparent}.conversations-list::-webkit-scrollbar-thumb,.chat-messages::-webkit-scrollbar-thumb{background-color:#e5e7eb;border-radius:3px}@media (max-width: 991px){.messages-card{height:calc(100vh - 120px)!important;border-radius:0;border:none;margin-top:0;display:flex!important;flex-direction:row!important}.messages-page-container{padding:0;margin:20px 0 0;max-width:100%}.page-title{display:none}.messages-sidebar{width:100%!important;min-width:100%!important;display:flex!important;border-right:none}.chat-window{display:none!important;width:100%!important;min-width:100%!important}.messages-card.show-chat .messages-sidebar{display:none!important}.messages-card.show-chat .chat-window{display:flex!important;height:100%;flex-direction:column!important}.btn-back-mobile{display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:4px;margin-right:8px;cursor:pointer;color:var(--text-dark)}.btn-back-mobile svg{width:24px;height:24px}.chat-header{padding:12px 16px}.chat-user-avatar{width:32px;height:32px}.chat-username{font-size:14px}.btn-seller-page{font-size:0;padding:8px}.btn-seller-page svg{margin:0}.btn-archive{font-size:0;padding:8px}.btn-archive:before{content:"Archive";font-size:12px}.chat-window .chat-header .chat-user-info{flex:1}}@media (min-width: 992px){.btn-back-mobile{display:none}}