/* WhatsApp-like theme */
:root {
    --whatsapp-green: #075E54;
    --whatsapp-bg: #e5ddd5;
    --whatsapp-sidebar: #ffffff;
    --whatsapp-input: #f0f2f5;
    --whatsapp-bubble-me: #dcf8c6;
    --whatsapp-bubble-other: #ffffff;
}

body, html { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.whatsapp-app { display: flex; height: 100vh; overflow: hidden; background: white; }

.sidebar { width: 350px; background: var(--whatsapp-sidebar); border-right: 1px solid #ddd; display: flex; flex-direction: column; }
.sidebar-header { background: var(--whatsapp-input); padding: 15px; display: flex; align-items: center; }

.chat-area { flex: 1; background: var(--whatsapp-bg); display: flex; flex-direction: column; }
.chat-header { background: var(--whatsapp-input); padding: 10px 20px; display: flex; align-items: center; border-left: 1px solid #ddd; }

.message-list { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.bubble { background: var(--whatsapp-bubble-other); padding: 8px 12px; border-radius: 8px; margin-bottom: 5px; max-width: 60%; position: relative; font-size: 0.95rem; box-shadow: 0 1px 0.5px rgba(0,0,0,0.1); }
.bubble.me { background: var(--whatsapp-bubble-me); align-self: flex-end; }

.chat-input { background: var(--whatsapp-input); padding: 10px 20px; display: flex; align-items: center; gap: 15px; }
.chat-input input { border-radius: 20px; border: none; padding: 10px 15px; }

/* Admin layout */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 250px; background: #343a40; color: #fff; padding: 20px; }
.admin-sidebar a { color: #ccc; display: block; padding: 10px; text-decoration: none; border-bottom: 1px solid #444; }
.admin-sidebar a.active { color: #fff; background: #495057; }
.admin-content { flex: 1; padding: 20px; background: #f8f9fa; }