/* ========================================================== Aistra Meridian Design System — Chatwoot CSS Overrides Injected via vueapp.html.erb tag ========================================================== */ /* --- 0. Google Fonts (Plus Jakarta Sans already loaded in ) --- */ /* --- 1. Primary Color: Override Chatwoot's woot/blue scale --- */ :root { --w-500: 37 99 235 !important; /* #2563eb */ --w-600: 29 78 216 !important; /* #1d4ed8 */ --w-400: 59 130 246 !important; /* #3b82f6 */ --w-300: 96 165 250 !important; /* #60a5fa */ --w-200: 147 197 253 !important; /* #93c5fd */ --w-100: 219 234 254 !important; /* #dbeafe */ --w-50: 239 246 255 !important; /* #eff6ff */ --w-700: 30 64 175 !important; /* #1e40af */ --w-800: 30 58 138 !important; /* #1e3a8a */ } /* --- 2. Dark Navy Sidebar --- */ aside.bg-n-background { background-color: #0f1b2d !important; border-right-color: rgba(255,255,255,0.08) !important; border-left-color: rgba(255,255,255,0.08) !important; } /* Sidebar logo separator */ aside.bg-n-background .bg-n-strong { background-color: rgba(255,255,255,0.12) !important; } /* Account name in sidebar */ aside.bg-n-background #sidebar-account-switcher span { color: #ffffff !important; } /* Sidebar search bar */ aside.bg-n-background .bg-n-button-color { background-color: rgba(255,255,255,0.06) !important; outline-color: rgba(255,255,255,0.1) !important; } aside.bg-n-background .bg-n-button-color:hover { background-color: rgba(255,255,255,0.1) !important; } aside.bg-n-background .bg-n-button-color .text-n-slate-10, aside.bg-n-background .bg-n-button-color span.text-n-slate-10 { color: rgba(255,255,255,0.5) !important; } /* Compose button in sidebar */ aside.bg-n-background button.bg-n-button-color { background-color: rgba(255,255,255,0.06) !important; outline-color: rgba(255,255,255,0.1) !important; } aside.bg-n-background button.bg-n-button-color span { color: rgba(255,255,255,0.6) !important; } /* Sidebar nav: all text */ aside.bg-n-background .text-n-slate-11 { color: rgba(255,255,255,0.6) !important; } aside.bg-n-background .text-n-slate-12 { color: rgba(255,255,255,0.85) !important; } /* Sidebar nav: group header text (Conversations, Captain, etc.) */ aside.bg-n-background nav .font-medium { color: rgba(255,255,255,0.85) !important; } /* Sidebar nav: icons */ aside.bg-n-background nav span[class*="i-lucide-"] { color: rgba(255,255,255,0.5) !important; } /* Sidebar nav: active item */ aside.bg-n-background .bg-n-alpha-2.active, aside.bg-n-background a.active { background-color: rgba(37, 99, 235, 0.2) !important; } aside.bg-n-background .bg-n-alpha-2.active .text-n-slate-12, aside.bg-n-background a.active div { color: #ffffff !important; } /* Sidebar nav: hover */ aside.bg-n-background nav a:hover { background: rgba(255,255,255,0.06) !important; } /* Sidebar child-item tree lines */ aside.bg-n-background .child-item::before { background-color: rgba(255,255,255,0.1) !important; } aside.bg-n-background .child-item::after { border-color: rgba(255,255,255,0.1) !important; } /* Sidebar bottom: profile area */ aside.bg-n-background .border-n-weak { border-color: rgba(255,255,255,0.08) !important; } /* Profile name + email in sidebar */ aside.bg-n-background .text-n-slate-12.truncate { color: #ffffff !important; } aside.bg-n-background .text-n-slate-11.truncate { color: rgba(255,255,255,0.5) !important; } /* Profile hover */ aside.bg-n-background button.hover\:bg-n-alpha-1:hover { background-color: rgba(255,255,255,0.06) !important; } /* Sidebar gradient fade at bottom of nav */ aside.bg-n-background .from-n-background { --tw-gradient-from: #0f1b2d !important; } /* Sidebar notification bell */ aside.bg-n-background .text-n-slate-11 { color: rgba(255,255,255,0.6) !important; } /* --- 3. Typography --- */ /* Headings: Plus Jakarta Sans */ h1, h2, h3, h4, h5, h6, .text-2xl, .text-xl, .text-lg, [class*="header"] .font-medium, .font-bold { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important; } /* Page title area (e.g., "Conversations") */ .text-2xl.font-semibold, .text-xl.font-semibold { font-weight: 700 !important; letter-spacing: -0.025em !important; } /* --- 4. Content Area Background --- */ .bg-n-background:not(aside) { background-color: #f8fafc !important; } /* --- 5. Cards & Panels --- */ /* Conversation list panel */ .border-n-weak:not(aside):not(aside *) { border-color: #e2e8f0 !important; } /* --- 6. Badges --- */ .rounded-full[class*="bg-"], span.rounded-full { border-radius: 9999px !important; } /* Conversation count badges */ .bg-woot-500, [class*="bg-woot-"] { background-color: #2563eb !important; } /* --- 7. Buttons --- */ button { border-radius: 8px !important; } /* Primary action buttons */ .bg-woot-600, .bg-woot-500, button[class*="bg-woot"] { background-color: #2563eb !important; border-radius: 8px !important; } .bg-woot-600:hover, .bg-woot-500:hover, button[class*="bg-woot"]:hover { background-color: #1d4ed8 !important; } /* --- 8. Conversation Panel Refinements --- */ /* Tab underline active color */ .border-woot-500, [class*="border-woot-"] { border-color: #2563eb !important; } .text-woot-500, [class*="text-woot-"] { color: #2563eb !important; } /* --- 9. Input Fields --- */ input, textarea, select { border-radius: 8px !important; } /* Focus states */ input:focus, textarea:focus, select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important; } /* --- 10. Login Page --- */ .login-page, [class*="login"] { background-color: #060d1b !important; } /* ========================================================== 11. Side-by-Side: Messages + Agent Assist Panel Override Vue v-show to force both panels visible. Works by using CSS !important to beat Vue's inline display:none. ========================================================== */ /* Make conversation-details-wrap a CSS grid for side-by-side layout */ .conversation-details-wrap { display: grid !important; grid-template-rows: auto 1fr !important; grid-template-columns: 1fr 440px !important; } /* When no dashboard app exists, messages take full width */ .conversation-details-wrap:not(:has(.dashboard-app--container)) { grid-template-columns: 1fr !important; } /* Header spans full width (first child) */ .conversation-details-wrap > :first-child { grid-column: 1 / -1 !important; } /* Hide the tab bar (second child: .border-b + .h-10) */ .conversation-details-wrap > .border-b.h-10, .conversation-details-wrap > .border-b-n-weak.h-10, .conversation-details-wrap > div[class*="border-b"][class*="h-10"] { display: none !important; grid-column: 1 / -1 !important; } /* Force messages div always visible (override v-show="!activeIndex") */ /* Messages panel - multiple selectors for robustness */ .conversation-details-wrap > .flex.h-full.min-h-0.m-0, .conversation-details-wrap > div[class*="h-full"][class*="min-h-0"], .conversation-details-wrap > div:nth-child(3) { display: flex !important; grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; min-height: 0 !important; min-width: 0 !important; overflow: hidden !important; } /* Force dashboard app container always visible (override v-show) */ .conversation-details-wrap > .dashboard-app--container { display: flex !important; flex-direction: column !important; grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; border-left: 1px solid #e2e8f0 !important; overflow: hidden !important; } /* Dashboard app internal: iframe fills the panel */ .conversation-details-wrap .dashboard-app--container .dashboard-app--list { height: 100% !important; width: 100% !important; } .conversation-details-wrap .dashboard-app--container .dashboard-app--list iframe { height: 100% !important; width: 100% !important; border: 0 !important; } /* Responsive: collapse on narrow screens */ @media (max-width: 1100px) { .conversation-details-wrap { grid-template-columns: 1fr !important; } .conversation-details-wrap > .dashboard-app--container { display: none !important; } } /* --- 12. Hide Captain nav item --- */ nav li:has(button[class*="captain"]), nav li:has(a[href*="captain"]) { display: none !important; } /* --- 13. Hide system/activity messages in conversation view --- */ .conversation-wrap .activity-wrap, .conversation-wrap .activity-message, .conversation-wrap [class*="activity-wrap"], .conversation-wrap [class*="AgentActivity"], .conversation--activity { display: none !important; } /* Hide ALL activity/system messages in conversation */ .conversation-panel .conversation--activity, .conversation-panel [data-key*="activity"], .conversation-wrap .activity-wrap, .flex.items-center.justify-center.py-1 { display: none !important; } /* Target the specific "self-assigned" text pattern */ div[class*="flex"][class*="items-center"][class*="justify-center"][class*="py-"] { display: none !important; }