/* ============================================================================== WhatsApp-Style Override for Chatwoot v4.16.0 Targets Chatwoot 4.x Tailwind / New Design System (Vite build) Injected via vueapp.html.erb layout patch Makes Chatwoot look like WhatsApp Web/Desktop Key architecture notes: - Chatwoot 4.16.0 uses CSS custom properties in "R G B" format (space-separated) - Colors are applied via rgb(var(--name) / opacity) - Dark mode uses .dark class on - Brand color #2781f6 is hardcoded in .bg-n-brand (must override directly) - Component classes: .conversation, .conversation-details-wrap, .left-bubble, .right-bubble, .message-bubble-container, .prose-bubble, .reply-box, etc. ============================================================================== */ /* ===== CSS Variables — WhatsApp Light Palette ===== */ :root { --background-color: 240 242 245; --surface-1: 255 255 255; --surface-2: 255 255 255; --surface-active: 233 237 239; --solid-1: 255 255 255; --solid-2: 240 242 245; --solid-3: 233 237 239; --solid-active: 0 168 132; --solid-blue: 217 253 211; --solid-amber: 255 228 181; --border-weak: 233 237 239; --border-strong: 209 215 219; --border-container: 233 237 239; --slate-11: 102 119 129; --slate-12: 17 27 33; --card-color: 255 255 255; --button-color: 0 168 132; --button-hover-color: 0, 128, 105, .2; --label-background: 217 253 211; --label-border: 0, 168, 132, .12; --background-input-box: 255, 255, 255, .03; --alpha-3: 255, 255, 255, .96; --black-alpha-1: 0, 0, 0, .08; --black-alpha-2: 0, 0, 0, .04; --overlay: 0, 0, 0, .08; --overlay-avatar: 255, 255, 255, .67; --white-alpha: 255, 255, 255, .8; } /* ===== CSS Variables — WhatsApp Dark Palette ===== */ .dark { --background-color: 11 20 26; --surface-1: 17 27 33; --surface-2: 32 44 51; --surface-active: 42 57 66; --solid-1: 32 44 51; --solid-2: 32 44 51; --solid-3: 42 57 66; --solid-active: 0 168 132; --solid-blue: 0 92 75; --solid-amber: 56 50 41; --border-weak: 34 45 52; --border-strong: 55 64 69; --border-container: 34 45 52; --slate-11: 134 150 160; --slate-12: 233 237 239; --card-color: 17 27 33; --button-color: 0 168 132; --button-hover-color: 0, 0, 0, .15; --label-background: 0 92 75; --label-border: 255, 255, 255, .03; --background-input-box: 255, 255, 255, .02; --alpha-3: 33, 34, 38, .95; --black-alpha-1: 0, 0, 0, .3; --black-alpha-2: 0, 0, 0, .2; --overlay: 0, 0, 0, .3; --overlay-avatar: 0, 0, 0, .05; --white-alpha: 255, 255, 255, .1; } /* ===== Brand Color Override (hardcoded #2781f6 → WhatsApp green) ===== */ .bg-n-brand { background-color: rgb(0 168 132 / var(--tw-bg-opacity, 1)) !important; } .bg-n-brand\/5 { background-color: rgb(0 168 132 / .05) !important; } .bg-n-brand\/10 { background-color: rgb(0 168 132 / .1) !important; } .bg-n-brand\/20 { background-color: rgb(0 168 132 / .2) !important; } .text-n-brand { color: rgb(0 168 132 / var(--tw-text-opacity, 1)) !important; } .border-n-brand { border-color: rgb(0 168 132 / var(--tw-border-opacity, 1)) !important; } .hover\:bg-n-brand:hover { background-color: rgb(0 168 132 / var(--tw-bg-opacity, 1)) !important; } /* ===== Global Font ===== */ body, #app { font-family: 'Segoe UI', Helvetica, Arial, sans-serif !important; } /* ===== Main App Background ===== */ #app { background-color: rgb(var(--background-color)) !important; } /* ===== Dotted Chat Wallpaper ===== */ .conversation-details-wrap { background-color: rgb(var(--background-color)) !important; background-image: radial-gradient(circle, rgba(125,125,125,0.15) 1px, transparent 1px) !important; background-size: 22px 22px !important; background-position: center !important; } .dark .conversation-details-wrap { background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px) !important; } /* ===== Conversation Header (chat top bar) ===== */ .conversation-details-wrap > div > div:first-child { background-color: rgb(var(--surface-2)) !important; border-bottom: 1px solid rgb(var(--border-weak)) !important; min-height: 60px !important; } /* ===== Message Bubbles ===== */ .message-bubble-container { padding: 2px 8% !important; } .message-bubble-container .right-bubble { background-color: rgb(var(--solid-blue)) !important; border-radius: 8px !important; border-top-right-radius: 2px !important; box-shadow: 0 1px 0.5px rgba(0,0,0,.08) !important; padding: 6px 9px 8px 9px !important; max-width: 65% !important; } .dark .message-bubble-container .right-bubble { box-shadow: 0 1px 0.5px rgba(0,0,0,.3) !important; } .message-bubble-container .left-bubble { background-color: rgb(var(--surface-1)) !important; border-radius: 8px !important; border-top-left-radius: 2px !important; box-shadow: 0 1px 0.5px rgba(0,0,0,.08) !important; padding: 6px 9px 8px 9px !important; max-width: 65% !important; } .dark .message-bubble-container .left-bubble { box-shadow: 0 1px 0.5px rgba(0,0,0,.3) !important; } /* Bubble text */ .prose-bubble { color: rgb(var(--slate-12)) !important; font-size: 14.2px !important; line-height: 19px !important; } /* Bubble time stamps */ .message-bubble-container .right-bubble .text-n-slate-10, .message-bubble-container .left-bubble .text-n-slate-10 { font-size: 11px !important; opacity: .8 !important; } /* Bubble alignment */ .right-wrap { justify-content: flex-end !important; } .left-wrap { justify-content: flex-start !important; } /* ===== Conversation List Items ===== */ .conversation { padding: 10px 12px 10px 16px !important; cursor: pointer !important; transition: background-color .15s ease !important; } .conversation:hover { background-color: rgb(var(--surface-active) / .5) !important; } .conversation.active, .conversation.is-active { background-color: rgb(var(--surface-active)) !important; } /* Unread conversation */ .is-unread { font-weight: 600 !important; } /* Unread badge — WhatsApp green pill */ .conversation .bg-n-teal-9, .conversation .bg-n-teal-10, .sidebar-unread-badge, [class*="unread-badge"], [class*="unread-count"] { background-color: rgb(0 168 132) !important; color: #fff !important; border-radius: 10px !important; min-width: 20px !important; height: 20px !important; font-size: 12px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 6px !important; } /* ===== Composer / Reply Box ===== */ .reply-box { background-color: rgb(var(--surface-2)) !important; border-radius: 8px !important; border: 1px solid rgb(var(--border-weak)) !important; margin: 10px 16px !important; } .resizable-editor-wrapper .ProseMirror.ProseMirror-woot-style { background-color: transparent !important; border: none !important; box-shadow: none !important; color: rgb(var(--slate-12)) !important; font-size: 15px !important; } /* Send button — WhatsApp green circle */ .send-button { background-color: rgb(0 168 132) !important; border-radius: 50% !important; color: #fff !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; cursor: pointer !important; transition: background-color .15s ease !important; } .send-button:hover { background-color: rgb(0 128 105) !important; } /* ===== Search Input ===== */ .search-input { background-color: rgb(var(--background-color)) !important; border-radius: 8px !important; border: 1px solid transparent !important; } .search-input:focus { border-color: rgb(0 168 132 / .5) !important; } /* ===== Avatars — Force Circular ===== */ [class*="rounded-full"] img, img[class*="rounded-full"], .avatar img, .user-avatar img, [class*="avatar"] img { border-radius: 50% !important; object-fit: cover !important; } /* ===== Date Separators ===== */ [class*="date-separator"], [class*="day-divider"], [class*="day-separator"] { align-self: center !important; background-color: rgb(var(--surface-1)) !important; color: rgb(var(--slate-11)) !important; font-size: 12.5px !important; padding: 5px 12px !important; border-radius: 8px !important; box-shadow: 0 1px 1px rgba(0,0,0,.08) !important; margin: 14px auto !important; text-align: center !important; } /* ===== Scrollbar ===== */ ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } ::-webkit-scrollbar-thumb { background: rgb(var(--slate-8)) !important; border-radius: 4px !important; } ::-webkit-scrollbar-track { background: transparent !important; } /* ===== Empty State ===== */ [class*="empty-state"], [class*="no-chat"], [class*="conversation-empty"] { background-color: rgb(var(--background-color)) !important; color: rgb(var(--slate-11)) !important; text-align: center !important; } /* ===== Focus Rings ===== */ *:focus { outline-color: rgb(0 168 132) !important; } /* ===== Online Status Dots ===== */ [class*="bg-n-teal-9"], [class*="bg-n-teal-10"] { background-color: rgb(0 168 132 / var(--tw-bg-opacity, 1)) !important; } /* ===== Typing Indicator ===== */ [class*="typing-bubble"], [class*="typing-indicator"] { background-color: rgb(var(--surface-1)) !important; border-radius: 8px !important; border-top-left-radius: 2px !important; } /* ===== Sidebar / Left Navigation ===== */ .sidebar-account-switcher { background-color: rgb(var(--surface-2)) !important; } /* ===== Mobile Responsive ===== */ @media (max-width: 768px) { .message-bubble-container .right-bubble, .message-bubble-container .left-bubble { max-width: 85% !important; } .message-bubble-container { padding: 2px 8px !important; } .reply-box { margin: 8px !important; } }