/* Mobile-friendly resets */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

/* Custom Colors matching WhatsApp */
.bg-wa-header { background-color: #008069; }
.bg-wa-bg { 
    background-color: #efeae2; 
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 15h2v2h-2zM35 35h2v2h-2zM55 55h2v2h-2zM75 75h2v2h-2zM15 75h2v2h-2zM75 15h2v2h-2z' fill='%23d1d7db' fill-opacity='0.4'/%3E%3C/svg%3E");
}
.bg-wa-out { background-color: #d9fdd3; }
.bg-wa-in { background-color: #ffffff; }
.bg-wa-input { background-color: #f0f2f5; }
.text-wa-dark { color: #111b21; }
.text-wa-gray { color: #54656f; }
.text-wa-blue { color: #53bdeb; }

/* Message Bubble Tails */
.bubble-in::before {
    content: ""; position: absolute; top: 0; left: -8px; width: 0; height: 0;
    border: 8px solid transparent; border-top-color: #ffffff; border-right-color: #ffffff; margin-top: -1px;
}
.bubble-out::before {
    content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0;
    border: 8px solid transparent; border-top-color: #d9fdd3; border-left-color: #d9fdd3; margin-top: -1px;
}

/* Animations & Helpers */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.msg-animate { animation: fadeIn 0.3s ease-out forwards; }
.chat-link { color: #027eb5; text-decoration: none; }
.chat-link:hover { text-decoration: underline; }

/* Layout Helpers */
.h-95vh { height: 95vh; }
.max-w-85 { max-width: 85%; }
.text-10px { font-size: 10px; }

/* Safe Area for iPhone X+ */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* Recording Animation */
.recording-pulse { animation: pulse-red 1.5s infinite; background-color: #ef4444 !important; color: white !important; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }