* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body { background: #d9e2ec; height: 100vh; overflow: hidden; }
.app-container { display: flex; height: 100vh; background: #fff; width: 100%; max-width: 1400px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.sidebar { width: 64px; background: #0068ff; display: flex; flex-direction: column; align-items: center; padding-top: 20px; }
.avatar-holder img { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 20px; }
.icon { color: #fff; margin-bottom: 20px; cursor: pointer; opacity: 0.7; transition: 0.2s;}
.icon:hover, .icon.active { opacity: 1; transform: scale(1.1); }
.chat-list-panel { width: 340px; border-right: 1px solid #e1e4ea; display: flex; flex-direction: column; background:#fff; z-index:2;}
.search-bar { padding: 15px; } .search-bar input { width: 100%; padding: 8px 15px; border-radius: 15px; border: none; background: #eaedf0; outline:none; }
.chat-items { flex: 1; overflow-y: auto; }
.chat-item { display: flex; align-items: center; padding: 15px; cursor: pointer; border-bottom:1px solid #f1f1f1; position:relative;}
.chat-item:hover, .chat-item.active { background: #f3f5f8; }
.chat-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 15px; object-fit: cover;}
.chat-info { flex:1; overflow:hidden; }
.chat-name { font-weight: 600; font-size: 15px; color: #081c36; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chat-preview { font-size: 13px; color: #888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px;}
.unread-badge { background: #ff3b30; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 10px; font-weight: bold; position:absolute; right:15px; top:50%; transform:translateY(-50%);}

.chat-window { flex: 1; display: flex; flex-direction: column; background: #eef0f4; position: relative; z-index:1;}
.chat-header { height: 68px; background: #fff; border-bottom: 1px solid #e1e4ea; display: flex; align-items: center; padding: 0 15px; justify-content:space-between;}
.back-btn { display: none; margin-right: 15px; color: #0068ff; cursor: pointer; }
.header-info { display: flex; align-items: center; } .header-info img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }

/* AVATAR TRONG KHUNG CHAT */
.chat-messages { flex: 1; padding: 20px; overflow-y: auto; display:flex; flex-direction:column;}
.msg-row { display: flex; align-items: flex-end; margin-bottom: 15px; width: 100%; gap: 10px; flex-direction: row; }
.msg-row.me { justify-content: flex-end; flex-direction: row-reverse;}
.msg-row.other { justify-content: flex-start; }
.msg-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

.msg-wrapper { display: flex; flex-direction: column; max-width: 65%; }
.msg-wrapper.me { align-items: flex-end; }
.msg-wrapper.other { align-items: flex-start; }
.msg-bubble { padding: 10px 14px; border-radius: 8px; font-size: 15px; word-wrap: break-word; }
.msg-wrapper.me .msg-bubble { background: #e5efff; border: 1px solid #c2d8ff; }
.msg-wrapper.other .msg-bubble { background: #fff; border: 1px solid #e1e4ea; }
.msg-action-btn { color: #888; cursor: pointer; font-size: 20px; padding-bottom: 5px; opacity:0.5; transition: 0.2s;}
.msg-action-btn:hover { color: #0068ff; opacity:1; transform: scale(1.1);}

.chat-input { background: #fff; padding: 10px 15px; border-top: 1px solid #e1e4ea; display: flex; align-items: center; }
.upload-icon { cursor: pointer; margin-right: 10px; color: #666; display:flex; align-items:center; }
.chat-input input[type="text"] { flex: 1; padding: 10px; border: none; outline: none; font-size: 15px; background: #f3f5f8; border-radius: 20px; margin-right: 10px; padding-left: 15px;}
.send-btn { background: #0068ff; color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;}

.date-separator { text-align: center; margin: 20px 0 15px; } .date-separator span { background: #d9e2ec; padding: 4px 12px; font-size: 12px; font-weight: bold; color: #555; border-radius: 12px; }
.msg-time { font-size: 11px; color: #888; margin-top: 3px; display:flex; align-items:center; gap:5px;}

/* TRẠNG THÁI ĐÃ XEM & BUZZ */
.read-status { font-size: 10px; font-weight:bold; color: #0068ff; }
.buzz-btn { background: #ff9800; color: #fff; border: none; padding: 6px 12px; border-radius: 20px; font-weight: bold; cursor: pointer; display:flex; align-items:center; gap:5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.buzz-btn:active { transform: scale(0.95); }
@keyframes shake-anim { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
.buzzing { animation: shake-anim 0.5s infinite; }

.msg-images { display: grid; gap: 4px; margin-top: 5px; border-radius: 8px; overflow: hidden; width: 100%; min-width:200px; max-width: 400px; }
.grid-1 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); }
.img-wrap { width: 100%; padding-top: 100%; background-size: cover; background-position: center; position: relative; cursor: pointer; border-radius: 4px;} .grid-1 .img-wrap { padding-top: 0; min-height: 250px; }
.img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: bold; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
.modal-box { background: #fff; padding: 25px; border-radius: 10px; width: 90%; max-width: 350px; text-align: center; } .modal-box input, .modal-box button { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; } .modal-box button { background:#0068ff; color:#fff; font-weight:bold; border:none;}
.share-guest-row { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid #eee;}

.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; flex-direction: column; align-items: center; justify-content: center; }
.close-lb { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 35px; cursor: pointer; }
.lb-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 80%; touch-action: none;} /* Cho phép vuốt */
.lb-content img { max-width: 80%; max-height: 80vh; border-radius: 8px; user-select:none;}
.prev-lb, .next-lb { color: #fff; font-size: 40px; cursor: pointer; padding: 20px; user-select: none;}
.btn-ask-price { background: #ff3b30; color: #fff; border: none; padding: 12px 25px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer;}

@media (max-width: 768px) {
    .sidebar { display: none; } .chat-list-panel { width: 100%; }
    .chat-window { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: none; }
    .chat-window.active { display: flex; } .back-btn { display: block; }
}