.gap-2{ gap: 0.5rem; } .chat-message { display: flex; margin-bottom: 15px; } /* Left side (user messages) */ .chat-message.left { justify-content: flex-start; } /* Right side (admin messages) */ .chat-message.right { justify-content: flex-end; } .chat-message.left .chat-left-msg { width: fit-content; background: #272a33; color: white; padding: 0.80rem; border-radius: 12px; max-width: 480px; text-align: left; border-top-left-radius: 0; margin-right: 10px; } .chat-message.right .chat-right-msg { width: fit-content; background: #272a33; color: white; padding: 0.80rem; border-radius: 12px; float: right; max-width: 480px; text-align: left; border-bottom-right-radius: 0; margin-left: 10px; } .chat-message .attachments{ display: flex; flex-wrap: wrap; gap: 10px; } /* Image attachments */ .chat-message .attachments img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; border: 1px solid #ddd; } .cursor-pointer { cursor: pointer; } .transparent-btn { background-color: transparent !important; border: none !important; color: #272a33 !important; padding: 0 !important; margin: 0; margin-right: 8px; font-size: 1rem !important; } @media (max-width: 768px) { .chat-wrapper .card .card-header{ flex-wrap: wrap; gap: 10px; } .chat-message.left .chat-left-msg { max-width: 100%; } .chat-message.right .chat-right-msg { max-width: 100%; } } /* Apply this class to any div you want to have a max-height and a beautiful scrollbar */ .mh-300 { max-height: 300px; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .scrollable-pretty { /* Optional: smooth scrolling */ scroll-behavior: smooth; } /* Light mode scrollbar (default) */ .scrollable-pretty::-webkit-scrollbar { width: 8px; background: #f0f0f0; border-radius: 4px; } .scrollable-pretty::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13); } .scrollable-pretty::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #fcb69f 0%, #ffecd2 100%); } /* Firefox light mode */ .scrollable-pretty { scrollbar-width: thin; scrollbar-color: #a8edea #f0f0f0; } /* DARK MODE: when */ html[data-theme="dark"] .scrollable-pretty { scrollbar-color: #3d485c #232a36; /* thumb track */ } /* Webkit dark scrollbar */ html[data-theme="dark"] .scrollable-pretty::-webkit-scrollbar { width: 8px; background: #232a36; border-radius: 4px; } html[data-theme="dark"] .scrollable-pretty::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #3d485c 0%, #7686a8 100%); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .scrollable-pretty::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #7686a8 0%, #a8b4d6 100%); }