@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");
/* Chatwoot design-language overlay — ReUI app-shell-4 / nova tokens
   Paint only: fonts, colors, radii, type sizes.
   Does NOT change Chatwoot layout, features, or DOM structure.
   Safe to remove: delete this file + the nginx link + sub_filter. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --cw-bg: #ffffff;
  --cw-sidebar: #ffffff;
  --cw-muted: #f4f4f4;
  --cw-border: #e5e7eb;
  --cw-fg: #101010;
  --cw-muted-fg: #6b7280;
  --cw-primary: #101010;
  --cw-primary-fg: #ffffff;
  --cw-radius: 10px;
  --cw-radius-sm: 8px;
  --cw-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Chatwoot CSS variables (where present) → nova-like neutrals */
  --w-brand: var(--cw-primary) !important;
  --w-brand-dark: #0a0a0a !important;
  --woot-color-brand: var(--cw-primary) !important;
}

html,
body,
#app,
.app-wrapper,
.woot-theme {
  font-family: var(--cw-font) !important;
  color: var(--cw-fg);
  background-color: var(--cw-bg) !important;
  -webkit-font-smoothing: antialiased;
}

/* Kill Chatwoot blue accents where they show as brand fills */
.button--primary,
.button.primary,
button.primary,
.bg-woot-500,
.bg-woot-600,
.bg-woot-700,
[class*="bg-woot-"] {
  background-color: var(--cw-primary) !important;
  border-color: var(--cw-primary) !important;
  color: var(--cw-primary-fg) !important;
}

.text-woot-500,
.text-woot-600,
.text-woot-700,
a.text-woot-500,
.conversation-panel a:not(.button) {
  color: var(--cw-fg) !important;
}

a:not(.button):not([class*="bg-"]) {
  color: var(--cw-fg);
  text-underline-offset: 4px;
}

/* Sidebar / rails */
.sidebar,
.side-menu,
.left-menu,
.nav-menu,
aside,
[class*="sidebar"] {
  background-color: var(--cw-sidebar) !important;
  border-color: var(--cw-border) !important;
  font-size: 14px;
}

.sidebar a,
.side-menu a,
.nav-menu a {
  color: color-mix(in srgb, var(--cw-fg) 60%, transparent) !important;
  border-radius: var(--cw-radius-sm) !important;
  font-weight: 500;
}

.sidebar a.active,
.sidebar .active > a,
.side-menu .active,
.nav-menu .active,
[class*="sidebar"] [aria-current="page"],
[class*="sidebar"] .router-link-active {
  background-color: var(--cw-muted) !important;
  color: var(--cw-fg) !important;
}

/* Conversation list */
.conversations-list,
.conversation-list,
.messages-list,
[class*="conversation-list"] {
  background-color: var(--cw-bg) !important;
  border-color: var(--cw-border) !important;
}

.conversation,
.conversation-card,
[class*="conversation-item"],
[class*="ConversationCard"] {
  border-color: var(--cw-border) !important;
  border-radius: var(--cw-radius-sm) !important;
}

.conversation:hover,
.conversation.active,
[class*="conversation-item"]:hover,
[class*="conversation-item"].active {
  background-color: var(--cw-muted) !important;
}

/* Type scale nudges toward app-shell-4 / nova */
h1, h2, .page-title, .header-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--cw-fg) !important;
}

.conversation .message,
.message-content,
.chat-bubble,
.chat-message {
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.45;
}

.meta,
.timestamp,
.text-muted,
.secondary-text,
.conversation .meta {
  font-size: 12px !important;
  color: var(--cw-muted-fg) !important;
}

/* Tabs / filters */
.tabs,
.tab-list,
[role="tablist"] {
  background-color: var(--cw-muted) !important;
  border-radius: var(--cw-radius-sm) !important;
}

[role="tab"],
.tabs .tab,
.tab-item {
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--cw-radius-sm) !important;
  color: color-mix(in srgb, var(--cw-fg) 60%, transparent) !important;
}

[role="tab"][aria-selected="true"],
.tabs .tab.active,
.tab-item.active {
  background-color: var(--cw-bg) !important;
  color: var(--cw-fg) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

/* Bubbles / messages */
.chat-bubble,
.message-text,
[class*="message-bubble"] {
  border-radius: 12px !important;
}

.chat-bubble.left,
.message.incoming .message-text,
[class*="incoming"] {
  background-color: var(--cw-muted) !important;
  color: var(--cw-fg) !important;
}

.chat-bubble.right,
.message.outgoing .message-text,
[class*="outgoing"] {
  background-color: var(--cw-primary) !important;
  color: var(--cw-primary-fg) !important;
}

/* Inputs / composer */
input,
textarea,
.select,
.editor,
.ProseMirror,
[contenteditable="true"] {
  font-family: var(--cw-font) !important;
  border-color: var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background-color: var(--cw-bg) !important;
  color: var(--cw-fg) !important;
}

.reply-box,
.compose-box,
[class*="reply-box"],
[class*="editor-wrap"] {
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background-color: var(--cw-bg) !important;
}

/* Avatars → muted tiles instead of brand blue */
.avatar,
.user-thumbnail,
[class*="Avatar"] {
  background-color: var(--cw-muted) !important;
  color: var(--cw-fg) !important;
  border-radius: 9999px !important;
}

/* Borders / cards */
.card,
.panel,
.box,
.modal-content,
.dropdown-menu {
  border-color: var(--cw-border) !important;
  border-radius: var(--cw-radius) !important;
  background-color: var(--cw-bg) !important;
}

/* Scrollbars subtle */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 9999px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* === Pass 2 (11 Oct): remove remaining Chatwoot blue, logo and testimonial === */
/* Remap Chatwoot's blue scale (RGB triplets) to neutrals, light and dark */
:root, html, body, .light {
  --blue-1: 250 250 250 !important; --blue-2: 245 245 245 !important; --blue-3: 240 240 240 !important;
  --blue-4: 229 229 229 !important; --blue-5: 212 212 212 !important; --blue-6: 200 200 200 !important;
  --blue-7: 163 163 163 !important; --blue-8: 115 115 115 !important; --blue-9: 16 16 16 !important;
  --blue-10: 38 38 38 !important; --blue-11: 23 23 23 !important; --blue-12: 10 10 10 !important;
}
.dark, html.dark, body.dark {
  --blue-1: 10 10 10 !important; --blue-2: 23 23 23 !important; --blue-3: 38 38 38 !important;
  --blue-4: 45 45 45 !important; --blue-5: 64 64 64 !important; --blue-6: 82 82 82 !important;
  --blue-7: 115 115 115 !important; --blue-8: 163 163 163 !important; --blue-9: 245 245 245 !important;
  --blue-10: 229 229 229 !important; --blue-11: 245 245 245 !important; --blue-12: 250 250 250 !important;
}
/* Classes compiled with the hard-coded brand blue */
.bg-n-brand, .bg-n-blue-9, .bg-\[\#2781F6\], .hover\:bg-n-brand:hover,
.checked\:bg-n-brand:checked, .indeterminate\:bg-n-brand:indeterminate,
.after\:bg-n-brand:after, .before\:bg-n-brand:before, .group:hover .group-hover\:bg-n-brand {
  background-color: var(--cw-primary) !important;
}
.bg-n-brand\/5, .bg-n-brand\/10, .bg-n-brand\/20, .hover\:bg-n-brand\/10:hover,
.hover\:enabled\:bg-n-brand\/20:enabled:hover, .focus-visible\:bg-n-brand\/20:focus-visible {
  background-color: color-mix(in srgb, var(--cw-primary) 8%, transparent) !important;
}
.hover\:bg-n-brand\/80:hover { background-color: #262626 !important; }
.text-n-brand, .text-n-blue-9, .text-link, .hover\:text-n-brand:hover,
.group:focus-within .group-focus-within\:text-n-brand { color: var(--cw-fg) !important; }
.fill-n-blue-9 { fill: var(--cw-fg) !important; }
.border-n-brand, .border-t-n-brand, .hover\:border-n-brand:hover, .focus\:border-n-brand:focus,
.checked\:border-n-brand:checked, .indeterminate\:border-n-brand:indeterminate,
.hover\:enabled\:border-n-blue-9:enabled:hover, .border-n-blue-border { border-color: var(--cw-primary) !important; }
.outline-n-brand, .outline-n-blue-9, .\!outline-n-brand, .focus\:outline-n-brand:focus,
.focus\:outline-n-blue-9:focus, .focus-visible\:outline-n-brand:focus-visible,
.focus-within\:outline-n-brand:focus-within, .has-\[\:focus\]\:outline-n-brand:has(:focus) {
  outline-color: #a3a3a3 !important;
}
.focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: #a3a3a3 !important; }
/* Login / sign-up: hide the Chatwoot logo and the chatwoot.com testimonial panel */
img[src*="/brand-assets/logo"], img[alt="Chatwoot"] { display: none !important; }
div.rounded-e-lg:has(img[src*="testimonials"]),
div.rounded-e-lg.hidden.xl\:flex:has(svg.text-n-slate-7) { display: none !important; }


/* === Pass 3 (11 Oct): Mono utility, the admin's default look (PrecisionDataHQ/Admin) ===
   Page #f4f4f4, white cards and sidebar, ink #101010, grey text #6b7280,
   hairlines #e5e7eb, 10px cards / 8px controls, DM Sans, focus ring #09f.
   Light only: the dark tokens get the same light values. */
:root, html, body, .light, .dark, html.dark, body.dark {
  --background-color: 244 244 244 !important;
  --surface-1: 255 255 255 !important; --surface-2: 255 255 255 !important; --surface-active: 255 255 255 !important;
  --solid-1: 255 255 255 !important; --solid-2: 255 255 255 !important; --solid-3: 255 255 255 !important;
  --solid-active: 244 244 244 !important; --card-color: 255 255 255 !important; --button-color: 255 255 255 !important;
  --label-background: 244 244 244 !important; --label-border: 0, 0, 0, .06 !important;
  --border-weak: 229 231 235 !important; --border-strong: 229 231 235 !important; --border-container: 229 231 235 !important;
  --slate-1: 250 250 250 !important; --slate-2: 244 244 244 !important; --slate-3: 240 240 240 !important;
  --slate-4: 229 231 235 !important; --slate-5: 229 231 235 !important; --slate-6: 209 213 219 !important;
  --slate-7: 209 213 219 !important; --slate-8: 156 163 175 !important; --slate-9: 156 163 175 !important;
  --slate-10: 107 114 128 !important; --slate-11: 107 114 128 !important; --slate-12: 16 16 16 !important;
  --solid-blue: 244 244 244 !important; --solid-blue-2: 250 250 250 !important; --text-blue: 16 16 16 !important;
  --solid-iris: 244 244 244 !important; --solid-purple: 244 244 244 !important;
  --border-blue: 0, 153, 255, .5 !important; --border-blue-strong: 16 16 16 !important;
  --alpha-1: 0, 0, 0, .04 !important; --alpha-2: 0, 0, 0, .05 !important; --alpha-3: 255, 255, 255, .96 !important;
  --overlay: 0, 0, 0, .12 !important; --white-alpha: 255, 255, 255, .8 !important;
  color-scheme: light !important;
}
html, body, #app, .woot-theme, .app-wrapper { background-color: #f4f4f4 !important; }
body, body * { font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
code, pre, kbd, .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
/* sidebar: white with a hairline, like the admin */
aside { background-color: #ffffff; }
/* controls: 8px corners; cards and dialogs: 10px */
button, .button, input, select, textarea, [role="combobox"] { border-radius: 8px; }
[class*="rounded-xl"], [class*="rounded-2xl"], .modal-container, [role="dialog"] > div { border-radius: 10px !important; }
/* focus ring: the admin's #09f */
:focus-visible { outline-color: #0099ff !important; }
.focus-visible\:ring-n-brand:focus-visible { --tw-ring-color: #0099ff !important; }

.bg-n-brand, .bg-n-blue-9, .bg-\[\#2781F6\] { color: #ffffff !important; }

/* === Pass 4 (11 Oct): Mono utility layout — white cards floating on the grey canvas, like the admin === */
aside { background-color: #ffffff !important; border-color: #e5e7eb !important; }
main { background-color: #f4f4f4 !important; padding: 10px !important; gap: 10px; }
main > section { gap: 10px !important; background: transparent !important; }
main > section > .conversations-list-wrap,
main > section > .conversation-details-wrap {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,16,16,.04);
}
/* every other page (contacts, reports, settings, help center): its body becomes one white card */
main > *:not(section),
main > section:not(:has(> .conversations-list-wrap)) {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: auto;
  box-shadow: 0 1px 2px rgba(16,16,16,.04);
}
/* card headers get the admin's soft grey strip */
.conversations-list-wrap > div:first-child { background-color: #fafafa; border-bottom: 1px solid #e5e7eb; }
/* active sidebar item: soft grey pill */
aside a.router-link-active, aside [aria-current="page"] { background-color: #f4f4f4 !important; border-radius: 8px !important; color: #101010 !important; font-weight: 500; }
/* outgoing (our) messages: ink bubbles with white text, like the admin's primary buttons */
.bg-n-solid-blue, [class*="bg-n-solid-blue "] { background-color: #101010 !important; color: #ffffff !important; }
.bg-n-solid-blue * { color: inherit !important; }