
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
.bg-wa-header { background-color: #075e54; } /* WhatsApp Dark Green */
.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-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 - Bright Red Pulse */
.recording-pulse { 
    animation: pulse-red 1s infinite; 
    background-color: #ef4444 !important; /* Red-500 */
    color: white !important; 
    transform: scale(1.1);
}
@keyframes pulse-red { 
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 
    70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 
}
