/* ============================================================================
   NightShift · Chatwoot Reskin V2.1 — "Soft" variant
   File:    NightShift-Chatwoot-Reskin-V2.1-2026-05-09.css
   Date:    2026-05-09
   Supersedes: NightShift-Chatwoot-Reskin-V1-2026-05-02.css
   Mockup:  NightShift-Chatwoot-Reskin-V2.1-Mockup-2026-05-09.html

   Design intent: stock Chatwoot's lightness levels held intact, but every
   cool gray remapped to a warm paper tone. Brand colour (Sage / Rust)
   used as wash and accent only — never as a structural fill. The interface
   recedes; the conversation is the loudest thing on screen.

   Key V2.1 decisions:
     - Left rail: Paper (not Rule-strong) — same lightness as the rest
     - Conversation panel + chat area: Paper-soft — nearly white-but-warm
     - All borders: Rule (not Rule-strong) — soft hairlines
     - Operator/MJ bubble: Sage WASH (rgba 16%) with Ink text — not solid Sage
     - Guest bubble: Vellum (not Rule) with Ink text — softer
     - Resolve: outlined (rust border + ink text) — fills on hover
     - Send: stays rust-filled — primary "ship it" action earns the punch
     - Active tab count badge: rust-tint + rust text (not solid rust pill)
     - Avatar rotation: Indigo / Sage / Plum
     - Logo: rust chat-bubble mark replaces Chatwoot mark
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* -------------------------------------------------------------------------- */
/* 1. NightShift token system                                                 */
/* -------------------------------------------------------------------------- */

:root {
  /* Environment */
  --ns-paper:        #FBF3E4;
  --ns-paper-soft:   #FFF8EC;
  --ns-vellum:       #F5E9D1;
  --ns-rule:         #E5D8BE;
  --ns-rule-strong:  #C9B894;

  /* Ink */
  --ns-ink:          #2A2520;
  --ns-ink-soft:     #4D453B;
  --ns-pencil:       #76695A;
  --ns-pencil-light: #A89A86;

  /* Channels */
  --ns-indigo: #3D5878;
  --ns-sage:   #5C7A52;
  --ns-rust:   #9F6248;
  --ns-plum:   #6B3A5A;
  --ns-slate:  #4A6E7A;
  --ns-brass:  #8E7340;

  /* V2.1 soft variants — used in place of solid fills */
  --ns-sage-wash:  rgba(92, 122, 82, 0.16);
  --ns-rust-tint:  rgba(159, 98, 72, 0.14);
  --ns-ink-overlay: rgba(42, 37, 32, 0.05);

  /* Utility */
  --ns-success: #5C7A52;
  --ns-warning: #B5933F;
  --ns-error:   #8E3A3A;

  /* Type */
  --ns-font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --ns-font-content: var(--ns-font-ui);
  --ns-font-meta:    'JetBrains Mono', ui-monospace, monospace;
  --ns-font-display: 'DM Serif Display', serif;

  /* Radius */
  --ns-r-5:  5px;
  --ns-r-8:  8px;
  --ns-r-13: 13px;

  /* Motion */
  --ns-ease: cubic-bezier(0.618, 0, 0.382, 1);
  --ns-dur:  236ms;
}

/* -------------------------------------------------------------------------- */
/* 2. Map tokens onto Chatwoot's CSS variables                                */
/* -------------------------------------------------------------------------- */

:root {
  --color-background:       var(--ns-paper-soft);
  --color-background-light: var(--ns-paper);
  --color-background-white: var(--ns-paper-soft);
  --color-border:           var(--ns-rule);
  --color-border-light:     var(--ns-rule);

  --color-body:    var(--ns-ink-soft);
  --color-heading: var(--ns-ink);
  --color-light:   var(--ns-pencil);

  /* Chatwoot v2 woot ramp — primary accent driven by Rust at the 500 stop */
  --w-25:  #FBF3E4;
  --w-50:  #FFF8EC;
  --w-75:  #F5E9D1;
  --w-100: #E5D8BE;
  --w-200: #C9B894;
  --w-300: #B57A5C;
  --w-400: #A86C50;
  --w-500: #9F6248;
  --w-600: #8B5440;
  --w-700: #724636;
  --w-800: #58372A;
  --w-900: #3F2820;

  --color-woot-25:  #FBF3E4;
  --color-woot-50:  #FFF8EC;
  --color-woot-75:  #F5E9D1;
  --color-woot-100: #E5D8BE;
  --color-woot-200: #C9B894;
  --color-woot-300: #B57A5C;
  --color-woot-400: #A86C50;
  --color-woot-500: #9F6248;
  --color-woot-600: #8B5440;
  --color-woot-700: #724636;
  --color-woot-800: #58372A;
  --color-woot-900: #3F2820;

  /* Radix slate scale — used as RGB triplets via rgb(var(--slate-X) / 1) */
  --slate-1:  255 248 236 !important;   /* paper-soft */
  --slate-2:  251 243 228 !important;   /* paper */
  --slate-3:  245 233 209 !important;   /* vellum — outgoing-bubble fallback */
  --slate-4:  229 216 190 !important;   /* rule */
  --slate-5:  201 184 148 !important;
  --slate-6:  168 154 134 !important;
  --slate-7:  118 105  90 !important;
  --slate-8:   77  69  59 !important;
  --slate-9:   58  51  44 !important;
  --slate-10:  56  49  41 !important;
  --slate-11:  42  37  32 !important;
  --slate-12:  42  37  32 !important;

  --background-color: 255 252 245 !important;
  --surface-1: 255 252 245 !important;
  --surface-2: 255 252 245 !important;
  --surface-active: 255 252 245 !important;
  --card-color: 255 252 245 !important;
  --solid-1: 255 252 245 !important;
  --solid-2: 255 252 245 !important;
  --solid-3: 255 252 245 !important;
  --solid-active: 255 252 245 !important;
  --button-color: 255 252 245 !important;
  --border-weak: 229 216 190 !important;
  --border-strong: 229 216 190 !important;
  --border-container: 229 216 190 !important;
  --alpha-1: 42, 37, 32, .03 !important;
  --alpha-2: 42, 37, 32, .05 !important;
  --alpha-3: 255, 252, 245, .96 !important;
  --border-blue: 159, 98, 72, .5 !important;

  --s-25:  #FCF7EC;
  --s-50:  #F8F0DD;
  --s-75:  #F0E6CA;
  --s-100: #E5D8BE;
  --s-200: #C9B894;
  --s-300: #A89A86;
  --s-400: #8C7E6C;
  --s-500: #76695A;
  --s-600: #5E5347;
  --s-700: #4D453B;
  --s-800: #3A332C;
  --s-900: #2A2520;

  --g-500: #5C7A52;
  --y-500: #B5933F;
  --r-500: #8E3A3A;
  --p-500: #6B3A5A;

  /* Chatwoot v3/Radix blue scale — remap stock blue highlights to Rust.
     This catches active tabs and icons that use rgb(var(--blue-X)). */
  --blue-1:  255 248 236 !important;
  --blue-2:  251 243 228 !important;
  --blue-3:  245 233 209 !important;
  --blue-4:  229 216 190 !important;
  --blue-5:  230 210 199 !important;
  --blue-6:  218 188 174 !important;
  --blue-7:  198 155 135 !important;
  --blue-8:  181 122  92 !important;
  --blue-9:  159  98  72 !important;
  --blue-10: 139  84  64 !important;
  --blue-11: 114  70  54 !important;
  --blue-12:  42  37  32 !important;
  --solid-blue: 159 98 72 !important;
  --solid-blue-text: 42 37 32 !important;
  --text-blue: 159 98 72 !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Night Shift dark theme                                                  */
/* -------------------------------------------------------------------------- */

html.dark, html[data-theme="dark"] {
  --color-background:       #1F1A14;
  --color-background-light: #2A2520;
  --color-background-white: #2A2520;
  --color-border:           #3F382E;
  --color-border-light:     #3F382E;

  --color-body:    #D4C7AF;
  --color-heading: #EFE5D2;
  --color-light:   #948872;

  --w-500: #B57A5C;
  --w-600: #9F6248;
  --w-700: #8B5440;

  --g-500: #95B086;
  --y-500: #D4B36C;
  --r-500: #C97070;
  --p-500: #A6809A;

  --ns-sage-wash:  rgba(149, 176, 134, 0.16);
  --ns-rust-tint:  rgba(181, 122, 92, 0.14);
  --ns-ink-overlay: rgba(255, 248, 236, 0.05);
}

/* -------------------------------------------------------------------------- */
/* 4. Type sweep                                                              */
/* -------------------------------------------------------------------------- */

html, body, .app-wrapper, .app-content,
button, input, textarea, select,
.button, .conversation--header, .sidebar {
  font-family: var(--ns-font-ui);
  -webkit-font-smoothing: antialiased;
}

.message-text, .message-text__wrap,
.conversation--message .bubble,
.bubble.text .message-text,
.bubble .text-content {
  font-family: var(--ns-font-ui) !important;
  font-size: 15px;
  line-height: 1.55;
}

.conversation-date, .timestamp, .time, .date,
.conversation--meta, .activity-time,
.bubble .meta, .bubble--time, .bubble-actions__time {
  font-family: var(--ns-font-ui) !important;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--ns-pencil) !important;
}

h1, h2, h3, h4, h5, h6,
.title, .page-title, .conversation--header .user-name {
  font-family: var(--ns-font-ui);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------- */
/* 5. Surfaces                                                                */
/* -------------------------------------------------------------------------- */

body, .app-wrapper {
  background: var(--ns-paper-soft);
  color: var(--ns-ink);
}
html.dark body, html[data-theme="dark"] body,
html.dark .app-wrapper, html[data-theme="dark"] .app-wrapper {
  background: #1F1A14;
  color: #EFE5D2;
}

/* Left icon rail — Paper (one shade off the rest, mirrors Chatwoot's
   "barely grayer than white" sidebar treatment) */
.app-sidebar,
.sidebar:not(.secondary-sidebar):not(.conversations-sidebar) {
  background: var(--ns-paper) !important;
  border-right: 1px solid var(--ns-rule) !important;
}
html.dark .app-sidebar { background: #2A2520 !important; border-right-color: #3F382E !important; }

/* Conversation panel (middle column) — Paper-soft */
.secondary-sidebar,
.conversations-sidebar {
  background: var(--ns-paper-soft) !important;
  border-color: var(--ns-rule) !important;
}
html.dark .secondary-sidebar,
html.dark .conversations-sidebar { background: #2A2520 !important; border-color: #3F382E !important; }

.conversations-list, .conversation-list, .conv-list {
  background: var(--ns-paper-soft);
  border-color: var(--ns-rule);
}

/* Active conversation row — soft Ink overlay + 2px Ink left edge.
   Quiet "you are here" cue, no heavy color block. */
.conversation--item.active,
.conversations-list .conversation.active,
.conv-list .conv-item.active {
  background: var(--ns-ink-overlay) !important;
  border-left: 2px solid var(--ns-ink) !important;
}

.conversation--item:hover:not(.active),
.conversations-list .conversation:hover:not(.active) {
  background: rgba(42,37,32,0.03);
}

/* -------------------------------------------------------------------------- */
/* 6. Message bubbles — V2.1: sage wash + vellum                              */
/* -------------------------------------------------------------------------- */

.bubble {
  border-radius: var(--ns-r-13) !important;
  padding: 13px 16px !important;
}

/* Guest (incoming) — Vellum bubble, Ink text */
.bubble.left,
.conversation--message.left .bubble,
.message-incoming .bubble {
  background: var(--ns-vellum) !important;
  border: 1px solid var(--ns-rule) !important;
  color: var(--ns-ink) !important;
}

/* Operator/MJ (outgoing, human) — Sage WASH, Ink text */
.bubble.right:not(.is-from-bot):not(.private),
.conversation--message.right .bubble:not(.is-from-bot):not(.private),
.message-outgoing .bubble:not(.is-from-bot):not(.private) {
  background: var(--ns-sage-wash) !important;
  border: 1px solid rgba(92,122,82,0.20) !important;
  color: var(--ns-ink) !important;
}

/* AI agent (bot) — soft indigo wash, distinct from operator */
.bubble.is-from-bot,
.conversation--message .bubble.bot,
.bubble.agent-bot {
  background: rgba(61, 88, 120, 0.10) !important;
  border: 1px solid rgba(61, 88, 120, 0.20) !important;
  color: var(--ns-ink) !important;
}
html.dark .bubble.is-from-bot {
  background: rgba(120, 146, 176, 0.12) !important;
  border-color: rgba(120, 146, 176, 0.22) !important;
}

/* Private notes — mustard wash */
.bubble.private,
.message-private .bubble {
  background: rgba(181, 147, 63, 0.10) !important;
  border: 1px solid rgba(181, 147, 63, 0.22) !important;
  color: var(--ns-ink) !important;
}

/* Activity / system notice */
.conversation--activity,
.conversation .activity,
.activity-message {
  font-family: var(--ns-font-meta) !important;
  font-size: 11px !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--ns-pencil) !important;
  border-top: 1px dashed var(--ns-rule) !important;
  border-bottom: 1px dashed var(--ns-rule) !important;
  background: transparent !important;
  padding: 8px 13px !important;
  margin: 5px 0 !important;
  text-align: center !important;
}

/* -------------------------------------------------------------------------- */
/* 7. Buttons                                                                 */
/* -------------------------------------------------------------------------- */

.button, button.button,
.modal--button, .ui-button {
  font-family: var(--ns-font-ui) !important;
  font-weight: 500 !important;
  border-radius: var(--ns-r-8) !important;
  letter-spacing: 0 !important;
  transition: all var(--ns-dur) var(--ns-ease) !important;
}

/* Primary (Send-style) — Rust filled */
.button.primary, .button--primary,
button[type="submit"]:not(.alert):not(.success):not(.resolve-button):not([data-key="resolve"]) {
  background: var(--ns-rust) !important;
  border-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}
.button.primary:hover, .button--primary:hover { filter: brightness(0.94); }

/* Secondary — Vellum */
.button.secondary, .button--secondary, .button.hollow {
  background: var(--ns-vellum) !important;
  border: 1px solid var(--ns-rule) !important;
  color: var(--ns-ink) !important;
}

/* V2.1: Resolve becomes outlined — rust border, ink text. Fills on hover. */
.button.success, .button--success,
.button.resolve, .resolve-button,
button[data-key="resolve"], .woot-button--resolve {
  background: transparent !important;
  border: 1px solid var(--ns-rust) !important;
  color: var(--ns-ink) !important;
}
.button.success:hover, .button--success:hover,
.button.resolve:hover, .resolve-button:hover,
button[data-key="resolve"]:hover, .woot-button--resolve:hover {
  background: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}

.button.warning, .label.warning, .badge.warning {
  background: rgba(181, 147, 63, 0.18) !important;
  color: var(--ns-warning) !important;
  border: 1px solid rgba(181, 147, 63, 0.28) !important;
}

.button.alert, .button--alert, .button.danger {
  background: transparent !important;
  color: var(--ns-error) !important;
  border: 1px solid transparent !important;
}
.button.alert:hover { background: var(--ns-error) !important; color: var(--ns-paper) !important; }

.button.clear, .button.ghost, .button--clear {
  background: transparent !important;
  color: var(--ns-pencil) !important;
  border: 0 !important;
}
.button.clear:hover { color: var(--ns-ink) !important; background: var(--ns-vellum) !important; }

/* -------------------------------------------------------------------------- */
/* 8. Inputs                                                                  */
/* -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="search"],
input[type="password"], textarea, select,
.multiselect__tags, .ProseMirror {
  font-family: var(--ns-font-ui) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  background: var(--ns-paper-soft) !important;
  border: 1px solid var(--ns-rule) !important;
  border-radius: var(--ns-r-8) !important;
  color: var(--ns-ink) !important;
  transition: border-color var(--ns-dur) var(--ns-ease) !important;
}
.ProseMirror,
[contenteditable="true"],
textarea {
  padding: 13px 16px !important;
}
input:focus, textarea:focus, select:focus,
.multiselect__tags:focus-within, .ProseMirror:focus {
  border-color: var(--ns-rust) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(159,98,72,0.12) !important;
}
::placeholder { color: var(--ns-pencil-light) !important; font-style: italic !important; }

/* -------------------------------------------------------------------------- */
/* 9. Channel pills                                                           */
/* -------------------------------------------------------------------------- */

.inbox-name[data-channel="api"],
.inbox-name[data-channel="website"],
.channel--web .channel-badge,
.tag.web {
  background: rgba(61, 88, 120, 0.18) !important;
  color: var(--ns-indigo) !important;
  border: 1px solid rgba(61, 88, 120, 0.26) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}
.inbox-name[data-channel="whatsapp"],
.channel--whatsapp .channel-badge,
.tag.whatsapp {
  background: rgba(92, 122, 82, 0.18) !important;
  color: var(--ns-sage) !important;
  border: 1px solid rgba(92, 122, 82, 0.26) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}
.inbox-name[data-channel="facebook"],
.channel--facebook .channel-badge,
.tag.facebook {
  background: rgba(159, 98, 72, 0.18) !important;
  color: var(--ns-rust) !important;
  border: 1px solid rgba(159, 98, 72, 0.26) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}
.inbox-name[data-channel="instagram"],
.channel--instagram .channel-badge,
.tag.instagram {
  background: rgba(107, 58, 90, 0.18) !important;
  color: var(--ns-plum) !important;
  border: 1px solid rgba(107, 58, 90, 0.26) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}
.inbox-name[data-channel="email"],
.channel--email .channel-badge,
.tag.email {
  background: rgba(74, 110, 122, 0.18) !important;
  color: var(--ns-slate) !important;
  border: 1px solid rgba(74, 110, 122, 0.26) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}
.inbox-name[data-channel="voice"],
.inbox-name[data-channel="twilio"],
.channel--voice .channel-badge,
.tag.voice {
  background: rgba(142, 115, 64, 0.18) !important;
  color: var(--ns-brass) !important;
  border: 1px solid rgba(142, 115, 64, 0.26) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}

/* -------------------------------------------------------------------------- */
/* 10. Conversation row name weight                                           */
/* -------------------------------------------------------------------------- */

.conversations-list .conversation .conversation--user,
.conv-list .conv-item .name {
  font-family: var(--ns-font-ui) !important;
  font-size: 14px !important;
  color: var(--ns-ink) !important;
  font-weight: 600 !important;
}
.conversations-list .conversation .last-message,
.conv-list .conv-item .last-message,
[class*="conversation"] [class*="last-message"] {
  font-family: var(--ns-font-ui) !important;
  font-size: 13px !important;
  color: var(--ns-pencil) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}
.conversations-list .conversation.read .conversation--user,
.conversations-list .conversation.resolved .conversation--user {
  font-weight: 400 !important;
  color: var(--ns-pencil) !important;
}

/* -------------------------------------------------------------------------- */
/* 11. Top bar / app header                                                   */
/* -------------------------------------------------------------------------- */

.app-header, .navbar, .top-bar {
  background: rgba(255, 248, 236, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ns-rule) !important;
}
html.dark .app-header, html.dark .navbar {
  background: rgba(31, 26, 20, 0.92) !important;
  border-bottom-color: #3F382E !important;
}

/* -------------------------------------------------------------------------- */
/* 12. Logo replacement                                                       */
/* -------------------------------------------------------------------------- */
/* SVG inlined as data URI — no file hosting required on the Chatwoot server. */

.app-logo img,
.logo img,
.sidebar .logo img,
.sidebar-header .logo img,
.sidebar .brand img,
a.logo img,
[class*="logo-link"] img,
[class*="sidebar"] > a:first-child img {
  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M6 8 C6 5.8 7.8 4 10 4 L22 4 C24.2 4 26 5.8 26 8 L26 18 C26 20.2 24.2 22 22 22 L14 22 L9 27 L9 22 C7.3 22 6 20.7 6 19 Z' fill='%239F6248'/></svg>") !important;
  width: 28px !important;
  height: 28px !important;
}
.app-logo, .logo, .sidebar .logo {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M6 8 C6 5.8 7.8 4 10 4 L22 4 C24.2 4 26 5.8 26 8 L26 18 C26 20.2 24.2 22 22 22 L14 22 L9 27 L9 22 C7.3 22 6 20.7 6 19 Z' fill='%239F6248'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.sidebar .logo::after,
.sidebar-header .logo::after,
.sidebar .brand::after,
a.logo::after,
[class*="logo-link"]::after,
[class*="sidebar"] > a:first-child::after {
  content: "NightShift.";
  display: inline-block;
  font-family: var(--ns-font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ns-ink);
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1;
}
html.dark .sidebar .logo::after { color: #EFE5D2; }

/* -------------------------------------------------------------------------- */
/* 13. Modals                                                                 */
/* -------------------------------------------------------------------------- */

.modal-container, .modal--container, .ui-confirm-modal {
  background: var(--ns-paper-soft) !important;
  border: 1px solid var(--ns-rule) !important;
  border-radius: var(--ns-r-13) !important;
  box-shadow: 0 21px 55px rgba(42, 37, 32, 0.13) !important;
}
.modal-mask, .modal-bg {
  background: rgba(42, 37, 32, 0.34) !important;
  backdrop-filter: blur(3px);
}

/* -------------------------------------------------------------------------- */
/* 14. Chatwoot v3 Tailwind neutral-scale overrides                           */
/* -------------------------------------------------------------------------- */

.bg-n-solid, .bg-n-0, .bg-n-25, .bg-n-50,
.bg-n-background, .bg-n-card,
.bg-n-surface-1, .bg-n-surface-2,
.bg-n-solid-1, .bg-n-solid-2, .bg-n-solid-3, .bg-n-solid-active,
.bg-n-solid-1\/70, .bg-n-solid-2\/90,
.bg-n-alpha-3, .bg-n-alpha-3\/50 {
  background-color: var(--ns-paper-soft) !important;
}
.bg-n-weak, .bg-n-75, .bg-n-100 {
  background-color: var(--ns-paper-soft) !important;
}
.bg-n-strong, .bg-n-150, .bg-n-200 {
  background-color: var(--ns-rule) !important;
}

html.dark .bg-n-subtle,
html.dark .bg-n-800,
html.dark .bg-n-900,
html.dark .dark\:bg-n-subtle {
  background-color: #1F1A14 !important;
}

[class*=" bg-n-"]:not([class*="bg-n-sage"]):not([class*="bg-n-solid-blue"]):not([class*="bg-n-ruby"]):not([class*="bg-n-amber"]):not([class*="bg-n-teal"]):not([class*="bg-n-iris"]):not([class*="bg-n-violet"]):not([class*="bg-n-slate-12"]),
[class^="bg-n-"]:not([class*="bg-n-sage"]):not([class*="bg-n-solid-blue"]):not([class*="bg-n-ruby"]):not([class*="bg-n-amber"]):not([class*="bg-n-teal"]):not([class*="bg-n-iris"]):not([class*="bg-n-violet"]):not([class*="bg-n-slate-12"]) {
  background-color: var(--ns-paper-soft) !important;
}

.border-n-strong, .border-n-100, .border-n-150,
.border-n-weak, .border-n-50, .border-n-75 {
  border-color: var(--ns-rule) !important;
}

/* Structural <aside> — left rail */
aside.app-sidebar,
aside:first-of-type {
  background-color: var(--ns-paper) !important;
  border-right-color: var(--ns-rule) !important;
}
html.dark aside.app-sidebar,
html.dark aside:first-of-type {
  background-color: #2A2520 !important;
  border-right-color: #3F382E !important;
}

.bg-white {
  background-color: var(--ns-paper-soft) !important;
}
html.dark .bg-white,
html.dark .dark\:bg-slate-900 {
  background-color: #1F1A14 !important;
}

/* -------------------------------------------------------------------------- */
/* 15. Active nav-item                                                        */
/* -------------------------------------------------------------------------- */

[data-state="active"],
[aria-current="page"],
.router-link-active:not([class*="channel"]),
.router-link-exact-active:not([class*="channel"]) {
  background-color: var(--ns-ink-overlay) !important;
  color: var(--ns-ink) !important;
}

/* -------------------------------------------------------------------------- */
/* 16. Chatwoot v3 woot-* Tailwind class overrides                            */
/* -------------------------------------------------------------------------- */

.bg-woot-25  { background-color: #FBF3E4 !important; }
.bg-woot-50  { background-color: #FFF8EC !important; }
.bg-woot-75  { background-color: #F5E9D1 !important; }
.bg-woot-100 { background-color: #E5D8BE !important; }
.bg-woot-200 { background-color: #C9B894 !important; }
.bg-woot-300 { background-color: #B57A5C !important; }
.bg-woot-400 { background-color: #A86C50 !important; }
.bg-woot-500 { background-color: #9F6248 !important; }
.bg-woot-600 { background-color: #8B5440 !important; }
.bg-woot-700 { background-color: #724636 !important; }
.bg-woot-800 { background-color: #58372A !important; }
.bg-woot-900 { background-color: #3F2820 !important; }

.text-woot-400 { color: #A86C50 !important; }
.text-woot-500 { color: #9F6248 !important; }
.text-woot-600 { color: #8B5440 !important; }
.hover\:text-woot-500:hover { color: #8B5440 !important; }
.hover\:text-woot-600:hover { color: #2C435C !important; }

.border-woot-100 { border-color: rgba(159,98,72,0.18) !important; }
.border-woot-200 { border-color: rgba(159,98,72,0.30) !important; }
.border-woot-400 { border-color: #A86C50 !important; }
.border-woot-500 { border-color: #9F6248 !important; }
.border-b-woot-500,
[class*="border-b"][class*="woot"] { border-color: #9F6248 !important; }

/* Send button — explicit catch */
button[type="submit"][class*="woot"],
button.send-button,
[class*="reply-box"] button[type="submit"] {
  background-color: var(--ns-rust) !important;
  border-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}

/* Active tab — Mine / Unassigned / All */
[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"],
.tab-active,
.tabs-title.is-active > a {
  color: var(--ns-ink) !important;
  border-bottom-color: var(--ns-rust) !important;
}
[role="tab"][aria-selected="true"]::after,
[role="tab"][data-state="active"]::after,
[role="tab"][aria-selected="true"]::before,
[role="tab"][data-state="active"]::before {
  background-color: var(--ns-rust) !important;
  border-color: var(--ns-rust) !important;
}
[class*="border-b-2"][class*="woot"],
[class*="border-b-4"][class*="woot"],
.border-woot-300, .border-woot-400, .border-woot-500 {
  border-color: var(--ns-rust) !important;
}

/* V2.1: tab count pill on active tab — rust tint, not solid rust */
[role="tab"][aria-selected="true"] [class*="rounded"],
[role="tab"][data-state="active"] [class*="rounded"],
.tabs-title.is-active .count {
  background-color: var(--ns-rust-tint) !important;
  color: var(--ns-rust) !important;
}

/* -------------------------------------------------------------------------- */
/* 17. Chatwoot v3 message bubble structure                                   */
/* -------------------------------------------------------------------------- */

/* Outgoing / agent / MJ — Sage WASH, Ink text.
   Target the visible bubble, not the layout wrapper. */
.message-bubble-container.justify-end .right-bubble,
.message-bubble-container.justify-end .chat-bubble.user,
.message-bubble-container.justify-end [class*="bg-n-solid-blue"],
.message-bubble-container.justify-end [class*="bg-woot-"],
.message-bubble-container.justify-end [class*="bg-slate-1"],
.message-bubble-container.justify-end [class*="bg-blue-"],
.message-bubble-container.justify-end [class*="bg-primary"],
.message-bubble-container.justify-end [class*="bg-indigo-"] {
  background: var(--ns-sage-wash) !important;
  background-color: var(--ns-sage-wash) !important;
  background-image: none !important;
  border: 1px solid rgba(92,122,82,0.20) !important;
  border-radius: var(--ns-r-13) !important;
  color: var(--ns-ink) !important;
}

/* Keep the outer layout shell transparent. If this wrapper is tinted, the
   16% sage wash doubles up and turns into the heavy gray-green block. */
.message-bubble-container.justify-end > div:first-child:has(.right-bubble),
.message-bubble-container.justify-end > div:first-child:has(.chat-bubble.user) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.message-bubble-container.justify-end .right-bubble *,
.message-bubble-container.justify-end .chat-bubble.user * {
  color: var(--ns-ink) !important;
}
.message-bubble-container.justify-end .meta,
.message-bubble-container.justify-end .time,
.message-bubble-container.justify-end .timestamp {
  color: var(--ns-pencil) !important;
}

/* Incoming / guest — Vellum, Ink text */
.message-bubble-container.justify-start .left-bubble,
.message-bubble-container.justify-start .chat-bubble:not(.user),
.message-bubble-container.justify-start [class*="bg-woot-"],
.message-bubble-container.justify-start [class*="bg-slate-"],
.message-bubble-container.justify-start [class*="bg-n-"] {
  background: var(--ns-vellum) !important;
  background-color: var(--ns-vellum) !important;
  border: 1px solid var(--ns-rule) !important;
  border-radius: var(--ns-r-13) !important;
  color: var(--ns-ink) !important;
}
/* Symmetry with .justify-end — keep wrapper transparent so the bubble's
   rounded edges aren't framed by a vellum block. */
.message-bubble-container.justify-start > div:first-child:has(.left-bubble),
.message-bubble-container.justify-start > div:first-child:has(.chat-bubble:not(.user)) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.message-bubble-container.justify-start .left-bubble *,
.message-bubble-container.justify-start .chat-bubble:not(.user) * {
  color: var(--ns-ink) !important;
}

/* System / activity */
.message-bubble-container.justify-center {
  background: transparent !important;
  font-family: var(--ns-font-meta) !important;
  font-size: 11px !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--ns-pencil) !important;
}

/* Chat area — Paper-soft (same as panel; transition is the 1px Rule hairline) */
.conversations-view,
.conversation-panel,
.view-box,
.conversation-main {
  background-color: var(--ns-paper-soft) !important;
}

/* -------------------------------------------------------------------------- */
/* 18. Direct bubble overrides                                                */
/* -------------------------------------------------------------------------- */

/* Chatwoot v3 — high-specificity rule to beat dynamically-injected Vite CSS. */
html body .message-bubble-container.justify-end .right-bubble.bg-n-solid-blue.text-n-slate-12 {
  background: rgba(92, 122, 82, 0.16) !important;
  background-color: rgba(92, 122, 82, 0.16) !important;
  background-image: none !important;
  color: #2A2520 !important;
  border: 1px solid rgba(92, 122, 82, 0.20) !important;
  border-radius: 13px !important;
}

/* Legacy class name fallbacks — visible bubbles only. Do not color
   .message-bubble-container.justify-end > div:first-child; in current
   Chatwoot it is a layout shell around .right-bubble. */
.chat-bubble.user,
.message-bubble-container.justify-end .chat-bubble {
  background-color: rgba(92, 122, 82, 0.16) !important;
  color: #2A2520 !important;
  border: 1px solid rgba(92, 122, 82, 0.20) !important;
  border-radius: 13px !important;
}

.chat-bubble:not(.user),
.message-bubble-container.justify-start .chat-bubble {
  background-color: #F5E9D1 !important;
  color: #2A2520 !important;
  border: 1px solid #E5D8BE !important;
  border-radius: 13px !important;
}

/* -------------------------------------------------------------------------- */
/* 19. Logo — explicit hide of stock Chatwoot mark                            */
/* -------------------------------------------------------------------------- */

.sidebar .logo img,
.sidebar-header .logo img,
.sidebar .brand img,
.sidebar-header img,
a.logo img,
[class*="logo-link"] img,
[class*="sidebar"] > a:first-child img {
  display: none !important;
}

/* Drive woot-500 globally — focus rings, Send button, tab line */
:root {
  --color-woot-500: #9F6248 !important;
  --w-500: #9F6248 !important;
}

.bg-woot-500 { background-color: #9F6248 !important; }
.border-woot-500, .border-b-woot-500 { border-color: #9F6248 !important; }
.text-woot-500 { color: #9F6248 !important; }

.bg-n-brand, .bg-n-brand\/10, .bg-n-brand\/5,
.before\:bg-n-brand::before,
.after\:bg-n-brand::after,
.checked\:bg-n-brand:checked {
  background-color: var(--ns-rust) !important;
}
.text-n-brand {
  color: var(--ns-rust) !important;
}
.border-n-brand,
.checked\:border-n-brand:checked {
  border-color: var(--ns-rust) !important;
}

/* -------------------------------------------------------------------------- */
/* 20. Avatar rotation — Indigo / Sage / Plum                                 */
/* -------------------------------------------------------------------------- */

.conversations-list .conversation:nth-child(3n+1) .user-thumbnail-box,
.conv-list .conv-item:nth-child(3n+1) .avatar,
.conversations-list .conversation:nth-child(3n+1) [class*="avatar"]:not(img) {
  background-color: var(--ns-indigo) !important;
  color: var(--ns-paper) !important;
}
.conversations-list .conversation:nth-child(3n+2) .user-thumbnail-box,
.conv-list .conv-item:nth-child(3n+2) .avatar,
.conversations-list .conversation:nth-child(3n+2) [class*="avatar"]:not(img) {
  background-color: var(--ns-sage) !important;
  color: var(--ns-paper) !important;
}
.conversations-list .conversation:nth-child(3n) .user-thumbnail-box,
.conv-list .conv-item:nth-child(3n) .avatar,
.conversations-list .conversation:nth-child(3n) [class*="avatar"]:not(img) {
  background-color: var(--ns-plum) !important;
  color: var(--ns-paper) !important;
}

/* -------------------------------------------------------------------------- */
/* 21. Phase-2 limitations                                                    */
/* -------------------------------------------------------------------------- */
/*
   - Icon-font glyphs in /public/dashboard/images/icons/
   - Favicon, PWA manifest, app icons
   - Email-template colours (Chatwoot admin settings)
   - Avatars baked into inline styles or data-URL SVGs
   - Rich-text editor (TipTap) toolbar icons
   - Hardcoded hex literals in new-conversation modal and onboarding screens
   Defer all to Phase 2 source-level fork after V2.1 is approved in production.
*/

/* End — NightShift Chatwoot Reskin V2.1                                      */

/* -------------------------------------------------------------------------- */
/* 22. NightShift V2.1 reset pass                                             */
/* -------------------------------------------------------------------------- */

/* Product decision, 2026-05-10: keep Chatwoot's default operational sans
   everywhere. Brand warmth comes from color, spacing, and restrained accents,
   not mixed typefaces inside the CRM. */
html, body, .app-wrapper, .app-content,
button, input, textarea, select,
.button, .sidebar, .conversation--header,
.message-text, .message-text__wrap,
.conversation--message .bubble,
.bubble.text .message-text,
.bubble .text-content,
.conversations-list .conversation .conversation--user,
.conv-list .conv-item .name,
.ProseMirror {
  font-family: var(--ns-font-ui) !important;
}

/* Simple three-surface hierarchy:
   navigation is one warm step darker; list/chat/composer sit on Paper-soft. */
body,
.app-wrapper,
.app-content,
main,
.secondary-sidebar,
.conversations-sidebar,
.conversations-list,
.conversation-list,
.conv-list,
.conversations-view,
.conversation-panel,
.view-box,
.conversation-main,
[class*="conversation-panel"],
[class*="conversation-main"],
[class*="conversation-view"],
[class*="messages-view"],
[class*="inbox-view"] {
  background-color: var(--ns-paper-soft) !important;
  color: var(--ns-ink) !important;
}

aside:first-of-type,
aside.app-sidebar,
.app-sidebar,
.sidebar:not(.secondary-sidebar):not(.conversations-sidebar) {
  background-color: var(--ns-paper) !important;
  color: var(--ns-ink) !important;
  border-right: 1px solid var(--ns-rule) !important;
}

[class*="conversation-header"],
[class*="chat-header"],
[class*="message-editor"],
[class*="reply-box"],
[class*="composer"] {
  background-color: var(--ns-paper-soft) !important;
  border-color: var(--ns-rule) !important;
  color: var(--ns-ink) !important;
}

/* The main work surfaces must stay lighter than the left navigation. */
.conversations-sidebar [class*="bg-n-"],
.secondary-sidebar [class*="bg-n-"],
.conversations-list [class*="bg-n-"],
.conversation-list [class*="bg-n-"],
.conversation-panel [class*="bg-n-"],
.conversation-main [class*="bg-n-"],
.conversations-view [class*="bg-n-"],
[class*="messages-view"] [class*="bg-n-"],
[class*="inbox-view"] [class*="bg-n-"],
[class*="reply-box"] [class*="bg-n-"],
[class*="composer"] [class*="bg-n-"] {
  background-color: var(--ns-paper-soft) !important;
}

/* Rust replaces Chatwoot blue for action/focus affordances only. */
:root {
  --blue-1:  255 248 236 !important;
  --blue-2:  251 243 228 !important;
  --blue-3:  245 233 209 !important;
  --blue-4:  229 216 190 !important;
  --blue-5:  230 210 199 !important;
  --blue-6:  218 188 174 !important;
  --blue-7:  198 155 135 !important;
  --blue-8:  181 122  92 !important;
  --blue-9:  159  98  72 !important;
  --blue-10: 139  84  64 !important;
  --blue-11: 114  70  54 !important;
  --blue-12:  42  37  32 !important;
  --solid-blue: 159 98 72 !important;
  --solid-blue-text: 42 37 32 !important;
  --text-blue: 159 98 72 !important;
}

.text-blue-500, .text-blue-600, .text-woot-500, .text-n-blue-text,
[class*="text-blue-"], [class*="text-woot-"], [class*="text-n-blue"],
a[class*="text-blue"], a[class*="text-woot"] {
  color: var(--ns-rust) !important;
}
.stroke-blue-500, .stroke-blue-600, .stroke-woot-500,
[class*="stroke-blue"], [class*="stroke-woot"] {
  stroke: var(--ns-rust) !important;
}
.fill-blue-500, .fill-blue-600, .fill-woot-500,
[class*="fill-blue"], [class*="fill-woot"] {
  fill: var(--ns-rust) !important;
}
.border-blue-500, .border-blue-600, .border-woot-500,
[class*="border-blue"], [class*="border-woot"],
[class*="border-b-blue"], [class*="border-b-woot"] {
  border-color: var(--ns-rust) !important;
}
.bg-blue-500, .bg-blue-600, .bg-woot-500,
[class*="bg-blue"], [class*="bg-woot-500"] {
  background-color: var(--ns-rust) !important;
}

/* Rows need scan lines. Selected rows use ink, not rust, so rust remains the
   action/focus color. */
.conversation--item,
.conversations-list .conversation,
.conv-list .conv-item,
[class*="conversation-card"],
[class*="conversation-item"] {
  background-color: transparent !important;
  border-bottom: 1px solid var(--ns-rule) !important;
  border-left: 2px solid transparent !important;
}
.conversation--item:hover,
.conversations-list .conversation:hover,
.conv-list .conv-item:hover,
[class*="conversation-card"]:hover,
[class*="conversation-item"]:hover {
  background-color: rgba(42,37,32,0.03) !important;
}
.conversation--item.active,
.conversations-list .conversation.active,
.conv-list .conv-item.active,
[aria-selected="true"][class*="conversation"],
[data-state="active"][class*="conversation"],
[class*="conversation-card"][data-state="active"],
[class*="conversation-item"][data-state="active"] {
  background-color: var(--ns-ink-overlay) !important;
  border-left-color: var(--ns-ink) !important;
}

.conversation--item.is-unread .conversation--user,
.conversations-list .conversation.is-unread .conversation--user,
.conversation--item.unread .conversation--user,
.conversations-list .conversation.unread .conversation--user,
[class*="conversation-item"][class*="unread"] {
  font-weight: 600 !important;
  color: var(--ns-ink) !important;
}

/* Bubble colors: no beige patchwork, just guest vellum and MJ sage wash. */
.message-bubble-container.justify-end .right-bubble,
.message-bubble-container.justify-end .chat-bubble.user,
.message-bubble-container.justify-end [class*="bg-n-solid-blue"] {
  background: var(--ns-sage-wash) !important;
  background-color: var(--ns-sage-wash) !important;
  border: 1px solid rgba(42,37,32,0.06) !important;
  color: var(--ns-ink) !important;
}
.message-bubble-container.justify-start .left-bubble,
.message-bubble-container.justify-start .chat-bubble:not(.user),
.message-bubble-container.justify-start [class*="bg-n-"] {
  background: var(--ns-vellum) !important;
  background-color: var(--ns-vellum) !important;
  border: 1px solid rgba(42,37,32,0.06) !important;
  color: var(--ns-ink) !important;
}

/* Avatars should be real circular chips. Avoid square-backed wrappers. */
.user-thumbnail-box,
[class*="thumbnail"]:not(img),
[class*="avatar"]:not(img) {
  border: 0 !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Chatwoot source icon in the top-left: recolor the existing mark first.
   If source DOM changes later, replace with the canonical rust SVG in source. */
aside:first-of-type > *:first-child svg,
aside.app-sidebar > *:first-child svg,
.app-sidebar > *:first-child svg {
  color: var(--ns-rust) !important;
}
aside:first-of-type > *:first-child svg [fill],
aside.app-sidebar > *:first-child svg [fill],
.app-sidebar > *:first-child svg [fill] {
  fill: var(--ns-rust) !important;
}
aside:first-of-type > *:first-child svg [stroke],
aside.app-sidebar > *:first-child svg [stroke],
.app-sidebar > *:first-child svg [stroke] {
  stroke: var(--ns-rust) !important;
}

/* Exact Chatwoot account-switcher mark. */
img[src="/brand-assets/logo_thumbnail.svg"],
img[src$="/brand-assets/logo_thumbnail.svg"] {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%239F6248'/%3E%3Ccircle cx='11' cy='15' r='4.2' fill='white'/%3E%3Ccircle cx='21' cy='15' r='4.2' fill='white'/%3E%3C/svg%3E") !important;
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
}

/* Scoped work surfaces: only the conversation column and chat canvas.
   Do not touch the left navigation or the existing border treatment. */
main,
main > *,
main [class*="conversation-panel"],
main [class*="conversation-main"],
main [class*="conversation-view"],
main [class*="messages-view"],
main [class*="inbox-view"],
main [class*="message-editor"],
main [class*="reply-box"],
main [class*="composer"],
main .secondary-sidebar,
main .conversations-sidebar,
main .conversations-list,
main .conversation-list,
main .conv-list,
main .view-box,
main .bg-n-background,
main .bg-n-card,
main .bg-n-surface-1,
main .bg-n-surface-2,
main .bg-n-solid-1,
main .bg-n-solid-2,
main .bg-n-solid-3,
main .bg-n-solid-active,
main .bg-n-solid-1\/70,
main .bg-n-solid-2\/90 {
  background-color: var(--ns-paper-soft) !important;
}

/* Quiet icon chrome; real action buttons are handled below. */
button:not([type="submit"]):not(.button):not([data-key="resolve"]):not(.resolve-button),
[role="button"]:not([class*="avatar"]):not([class*="thumbnail"]):not([class*="resolve"]) {
  color: var(--ns-pencil) !important;
  box-shadow: none !important;
}
button:not([type="submit"]):not(.button):not([data-key="resolve"]):not(.resolve-button):hover,
[role="button"]:not([class*="avatar"]):not([class*="thumbnail"]):not([class*="resolve"]):hover {
  background-color: rgba(42,37,32,0.05) !important;
  color: var(--ns-ink) !important;
}

/* Send stays the single loud action. Resolve stays outlined. */
button[type="submit"],
button.send-button,
[class*="reply-box"] button[type="submit"] {
  background-color: var(--ns-rust) !important;
  border-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}
button[data-key="resolve"],
.resolve-button,
.woot-button--resolve,
[class*="resolve"] button,
button[class*="resolve"] {
  background-color: transparent !important;
  border: 1px solid var(--ns-rust) !important;
  color: var(--ns-ink) !important;
}
button[data-key="resolve"]:hover,
.resolve-button:hover,
.woot-button--resolve:hover,
[class*="resolve"] button:hover,
button[class*="resolve"]:hover {
  background-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}

/* --------------------------------------------------------------------------
   Left rail (the only <aside> with .bg-n-background) — Paper, per V2.1 spec.
   Targets the live DOM element directly (confirmed via dev-tools 2026-05-10:
   <aside class="bg-n-background flex flex-col …" inside #app). The broad
   .bg-n-* rule uses 7 chained :not() pseudo-classes which give it (0,8,0)
   specificity. Using #app + aside.bg-n-background gives ID specificity
   (1,1,1) which beats any class-only selector. ONLY the left rail shifts
   to paper; middle (.conversations-list-wrap) and right
   (.conversation-details-wrap) keep paper-soft. Brand-canonical hexes only.
   -------------------------------------------------------------------------- */

#app aside.bg-n-background {
  background-color: var(--ns-paper) !important;
}

/* --------------------------------------------------------------------------
   Guest bubble (incoming, justify-start) — Vellum, per V2.1 spec.
   The live element has class .left-bubble + .bg-n-slate-* (slate-3/4/etc).
   The broad .bg-n-* rule has (0,8,0) specificity from its 7-chain :not() —
   beats the spec-intended vellum rule at line 743. Adding #app gives ID
   specificity that wins regardless. Catches any slate variant via [class*=].
   Brand-canonical hex (--ns-vellum #F5E9D1).
   -------------------------------------------------------------------------- */

html body #app .message-bubble-container.justify-start .left-bubble[class*="bg-n-slate"] {
  background: var(--ns-vellum) !important;
  background-color: var(--ns-vellum) !important;
  background-image: none !important;
  color: var(--ns-ink) !important;
}

/* --------------------------------------------------------------------------
   Send button (.bg-n-brand) — Rust filled per V2.1 spec.
   The broad .bg-n-* :not() chain (specificity 0,8,0) does not exclude
   "bg-n-brand", so it was painting the Send button paper-soft. Adding
   #app gives ID specificity to win the cascade. This same rule covers any
   future primary-action element using Chatwoot's bg-n-brand utility.
   Brand-canonical hexes only.
   -------------------------------------------------------------------------- */

#app .bg-n-brand {
  background-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}
#app .bg-n-brand:hover {
  background-color: #8B5440 !important; /* --ns-rust darkened, brand-canonical --w-600 */
  color: var(--ns-paper) !important;
}

/* -------------------------------------------------------------------------- */
/* 23. Banner notifications — brand-canonical colors                          */
/* Chatwoot uses .banner.primary / .banner.alert / .banner.warning.           */
/* Exact selectors confirmed from /vite/assets/dashboard-*.css.              */
/* -------------------------------------------------------------------------- */

/* Primary / info banners — brand indigo, paper text */
.banner.primary {
  background-color: var(--ns-indigo) !important;   /* #3D5878 */
  color: var(--ns-paper) !important;
}
.banner.primary a { color: var(--ns-paper) !important; opacity: 0.85; }

/* Alert / error banners — brand error wash, dark red text (per brand guide sys-alert) */
.banner.alert {
  background-color: rgba(142, 58, 58, 0.10) !important;
  color: var(--ns-error) !important;               /* #8E3A3A */
  border-left: 3px solid var(--ns-error) !important;
}
.banner.alert a { color: var(--ns-error) !important; }

/* Warning banners — brand warning wash, dark amber text */
.banner.warning {
  background-color: rgba(181, 147, 63, 0.10) !important;
  color: #8E7530 !important;
  border-left: 3px solid var(--ns-warning) !important;
}
.banner.warning a { color: #8E7530 !important; }

/* Ensure all banner text inherits from the banner, not a painted ancestor */
.banner * { color: inherit !important; }

/* -------------------------------------------------------------------------- */
/* 24. Snackbar / toast — restore dark slate background                       */
/* Chatwoot snackbar uses bg-n-slate-12 (rgb 28 32 36, near-black) with      */
/* text-white. Our broad bg-n-* rule was painting it paper-soft (beige).     */
/* This rule sits after the broad rule so same-specificity !important wins.  */
/* -------------------------------------------------------------------------- */
.bg-n-slate-12 {
  background-color: rgb(28, 32, 36) !important;
  color: white !important;
}