/** * chat-bubble-fix.css * Standalone override — chỉ sửa bubble size, không đụng layout khác * Load SAU app.css và mobile-chat-improved.css trong * * Thêm vào index.html: * */ /* ───────────────────────────────────────────── BUBBLE COMPACT — như Facebook Messenger Dùng !important để chắc chắn override tất cả ───────────────────────────────────────────── */ /* Bubble chính: tự co theo nội dung, không bị rộng thừa */ .chat-bubble { max-width: min(68vw, 260px) !important; padding: 6px 10px !important; border-radius: 18px !important; font-size: 14px !important; line-height: 1.4 !important; width: auto !important; display: inline-block !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Đuôi bubble — mine (phải) / other (trái) */ .chat-row.mine .chat-bubble { border-bottom-right-radius: 5px !important; } .chat-row.other .chat-bubble { border-bottom-left-radius: 5px !important; } /* Tin liên tiếp cùng người: không có đuôi */ .chat-bubble.chat-bubble-consecutive { border-radius: 18px !important; } .chat-row.other .chat-bubble.chat-bubble-consecutive { border-top-left-radius: 4px !important; } .chat-row.mine .chat-bubble.chat-bubble-consecutive { border-top-right-radius: 4px !important; } /* Row spacing gọn hơn */ .chat-row { margin: 0 0 2px 0 !important; align-items: flex-end !important; } /* Avatar nhỏ hơn */ .chat-avatar-circle { width: 28px !important; height: 28px !important; } .chat-avatar-circle .avatar-fallback { font-size: 13px !important; } /* Tên người gửi */ .chat-sender-name { font-size: 11px !important; font-weight: 600 !important; color: rgba(255,255,255,0.65) !important; margin-bottom: 2px !important; } /* Input: chiều cao gọn */ #chat-dock .chat-inp { height: 38px !important; padding: 9px 14px !important; font-size: 15px !important; border-radius: 19px !important; } /* Send button tròn */ #chat-dock .send-btn { width: 42px !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important; } /* ───────────────────────────────────────────── Bubble màu — giữ nguyên màu gốc, chỉ fix size ───────────────────────────────────────────── */ /* Public / Village — mine */ .chat-bubble.mine { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; } /* Public / Village — other: trắng gọn */ .chat-bubble.other { background: #ffffff !important; color: #1c1c1e !important; border: none !important; box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important; } /* Wolf mine */ .chat-bubble.mine.wolf-self { background: linear-gradient(145deg, #1a1a2e, #16213e) !important; border: 1.5px solid rgba(255,77,77,0.45) !important; color: #fff !important; } /* Wolf other */ .chat-bubble.other.wolf-other { background: linear-gradient(145deg, #8b0000, #5c0000) !important; color: #fff !important; border: none !important; } /* Couple mine */ .chat-bubble.mine.couple-self { background: linear-gradient(135deg, #a8edea, #fed6e3) !important; color: #2d3748 !important; border: none !important; } /* Couple other */ .chat-bubble.other.couple-other { background: linear-gradient(135deg, #ffeaa7, #fdcb6e) !important; color: #2d3436 !important; border: none !important; } /* Medium mine */ .chat-bubble.mine.medium-self { background: linear-gradient(135deg, #667eea, #764ba2) !important; color: #fff !important; } /* Medium other */ .chat-bubble.other.medium-other { background: linear-gradient(135deg, #2d1b69, #1a0a3d) !important; color: #e8d5ff !important; border: none !important; } /* Dead mine */ .chat-bubble.mine.dead-self { background: linear-gradient(135deg, #2c3e50, #3d5166) !important; color: #b0bec5 !important; border: none !important; } /* Dead other */ .chat-bubble.other.dead-other { background: linear-gradient(135deg, #424242, #616161) !important; color: #e0e0e0 !important; border: none !important; }