/* Support console overlay — brand selector + nav trims. * Served at /brand/console.css; injected via the vueapp.html.erb override. */ /* --- Brand selector (two static rows under the org name) ------------------ */ /* Outlined, never a filled box (owner 2026-08-03: "the black box is ugly"). * The console runs in LIGHT mode by default, so the old #0d1626 fill read as a * black slab on a white sidebar. Transparent + a hairline outline sits in the * chrome instead of fighting it. Colours are theme-aware: Chatwoot toggles * Tailwind's `dark` class on , and prefers-color-scheme is the backstop * for the auto theme. */ #ws-brand-selector { margin: 0 8px 10px; padding: 4px; border-radius: 10px; background: transparent; outline: 1px solid rgba(0, 0, 0, 0.55); display: grid; gap: 2px; flex-shrink: 0; } #ws-brand-selector .ws-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 550; letter-spacing: 0.01em; color: #1f2937; text-decoration: none; cursor: pointer; transition: background 120ms ease-out; } #ws-brand-selector .ws-brand-row:hover { background: rgba(0, 0, 0, 0.06); color: #000000; } #ws-brand-selector .ws-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ws-brand-selector .ws-brand-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; color: #6ee7a0; } #ws-brand-selector .ws-brand-pip { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.8); } /* Collapsed sidebar: keep the rows usable at narrow width */ @media (max-width: 767px) { #ws-brand-selector { margin: 0 6px 8px; } } /* --- Hide the "Calls" nav entry ------------------------------------------- */ /* v4.16 gates the sidebar Calls item on cloud/enterprise installation type * only — it carries NO per-account feature flag (config/features.yml * channel_voice does not gate it), so it is hidden here instead. */ #app aside li:has(> a[name='Calls'][href$='/calls']) { display: none !important; } /* --- "Get Started" nav item (bottom of the sidebar nav) -------------------- */ /* Same visual family as the brand selector; injected by console.js as the * last child of the sidebar nav, opens /brand/guide.html in a new tab. */ #ws-get-started { display: flex; align-items: center; gap: 8px; height: 32px; /* Sits directly under the brand selector, which owns the 10px gap below it. */ margin: -2px 8px 12px; padding: 0 10px; border-radius: 10px; background: transparent; outline: 1px solid rgba(0, 0, 0, 0.55); font-size: 13px; font-weight: 550; letter-spacing: 0.01em; color: #1f2937; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: background 120ms ease-out; } #ws-get-started:hover { background: rgba(0, 0, 0, 0.06); color: #000000; } #ws-get-started .ws-gs-icon { flex-shrink: 0; color: #6ee7a0; } #ws-get-started .ws-gs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 767px) { #ws-get-started { margin: 8px 6px; } } /* --- Dark theme ----------------------------------------------------------- */ /* A black hairline vanishes on a dark sidebar, and the dark ink would too, so * both invert. `.dark` is Chatwoot's own toggle; the media query covers the * "system" theme setting where no class is applied. */ html.dark #ws-brand-selector, html.dark #ws-get-started { outline-color: rgba(122, 149, 197, 0.28); } html.dark #ws-brand-selector .ws-brand-row, html.dark #ws-get-started { color: #d5e1f5; } html.dark #ws-brand-selector .ws-brand-row:hover, html.dark #ws-get-started:hover { background: rgba(122, 149, 197, 0.14); color: #ffffff; } @media (prefers-color-scheme: dark) { html:not(.light) #ws-brand-selector, html:not(.light) #ws-get-started { outline-color: rgba(122, 149, 197, 0.28); } html:not(.light) #ws-brand-selector .ws-brand-row, html:not(.light) #ws-get-started { color: #d5e1f5; } html:not(.light) #ws-brand-selector .ws-brand-row:hover, html:not(.light) #ws-get-started:hover { background: rgba(122, 149, 197, 0.14); color: #ffffff; } } /* ws-nav-simplify */ #app aside [data-ws-hide] { display: none !important; } /* --- Mandatory 2FA gate --------------------------------------------------- */ #ws-mfa-gate { position: fixed; inset: 0; z-index: 2147483000; /* above every Chatwoot modal and toast */ background: rgba(6, 11, 22, 0.92); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; } #ws-mfa-gate .ws-mfa-card { max-width: 460px; background: #0d1626; border: 1px solid rgba(122, 149, 197, 0.22); border-radius: 14px; padding: 30px 32px; color: #d5e1f5; font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8); } #ws-mfa-gate .ws-mfa-title { color: #ffffff; font-size: 20px; font-weight: 650; margin-bottom: 12px; } #ws-mfa-gate .ws-mfa-body { margin: 0 0 12px; } #ws-mfa-gate strong { color: #ffffff; } #ws-mfa-gate .ws-mfa-btn { display: inline-block; margin-top: 8px; padding: 10px 18px; border-radius: 9px; background: #6ee7a0; color: #06281a; font-weight: 700; text-decoration: none; } #ws-mfa-gate .ws-mfa-btn:hover { filter: brightness(1.06); } /* --- Hide Help Center from agents ---------------------------------------- */ /* Chatwoot renders the Help Center nav row for agents but its route is * administrator-gated, so clicking it bounced them to the dashboard — a dead * link. Hidden until agents get real access (see REVIEW.md). Administrators * are unaffected: console.js tags the row only when the role is not admin. */ #app aside [data-ws-hide-hc] { display: none !important; }