/* ============================================================================
   NightShift · Chatwoot Reskin V1
   File:    NightShift-Chatwoot-Reskin-V1-2026-05-02.css
   Date:    2026-05-02
   Scope:   Pure cosmetic overlay. Loads after Chatwoot's own stylesheets.
            Colour, type, spacing, radius, logo. Zero functional change.
   How to load:
     - Chatwoot Cloud / hosted: paste this into Settings > Inbox > Custom CSS
       per-account (admins only). Some selectors will be ignored if the
       admin custom-CSS slot doesn't have full reach — you'll see them
       fall back gracefully.
     - Self-hosted: drop into public/dashboard/custom.css and import after
       the main app stylesheet, or inject into the dashboard layout via
       config.
   What it does NOT do:
     - Rename tabs, hide menu items, restructure layouts.
     - Change the conversation state machine, keyboard shortcuts, or any
       Vue component logic.
     - Alter SLA, automation, routing, or webhook behaviour.
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/* 1. Fonts                                                                   */
/* -------------------------------------------------------------------------- */

@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');

/* -------------------------------------------------------------------------- */
/* 2. NightShift token system                                                 */
/* -------------------------------------------------------------------------- */
/* Defined on :root so child overrides can reference them. Day mode is the    */
/* default; Night Shift is enabled by Chatwoot's existing dark-mode hook.     */

: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 (category colours) */
  --ns-indigo: #3D5878;   /* Web Widget */
  --ns-sage:   #5C7A52;   /* WhatsApp + utility success */
  --ns-rust:   #9F6248;   /* Facebook + brand accent */
  --ns-plum:   #6B3A5A;   /* Instagram */
  --ns-slate:  #4A6E7A;   /* Email */
  --ns-brass:  #8E7340;   /* Voice */

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

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

  /* Spacing — Fibonacci subset */
  --ns-sp-1:   1px;
  --ns-sp-2:   2px;
  --ns-sp-3:   3px;
  --ns-sp-5:   5px;
  --ns-sp-8:   8px;
  --ns-sp-13:  13px;
  --ns-sp-21:  21px;
  --ns-sp-34:  34px;
  --ns-sp-55:  55px;
  --ns-sp-89:  89px;

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

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

/* -------------------------------------------------------------------------- */
/* 3. Map NightShift tokens onto Chatwoot's CSS variables                     */
/* -------------------------------------------------------------------------- */
/* Chatwoot uses several variable ramps. We override them at :root so the     */
/* whole app picks up the new palette without us having to touch component    */
/* selectors one by one.                                                      */

:root {
  /* --- Surface / structural --- */
  --color-background:       var(--ns-paper);
  --color-background-light: var(--ns-vellum);
  --color-background-white: var(--ns-paper);
  --color-border:           var(--ns-rule);
  --color-border-light:     var(--ns-rule);

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

  /* --- Primary (Woot blue) → Indigo / Web channel --- */
  /* Chatwoot's primary scale is `--w-*`. Indigo is our brand-neutral channel */
  --w-25:  #F4F6FA;
  --w-50:  #E5EBF3;
  --w-75:  #C2CDE0;
  --w-100: #A8B6CC;
  --w-200: #8094B5;
  --w-300: #607696;
  --w-400: #4D6584;
  --w-500: #3D5878;   /* indigo */
  --w-600: #344E6B;
  --w-700: #2C435C;
  --w-800: #233649;
  --w-900: #1A2939;

  /* --- Slate (UI greys) → warm pencil ramp --- */
  --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;

  /* --- Green (success) → Sage / WhatsApp --- */
  --g-25:  #EDF2EA;
  --g-50:  #DDE6D7;
  --g-75:  #BDCEB3;
  --g-100: #9DB58F;
  --g-200: #7E9C72;
  --g-300: #6E8C61;
  --g-400: #65835A;
  --g-500: #5C7A52;   /* sage */
  --g-600: #4F6A47;
  --g-700: #41583B;
  --g-800: #344730;
  --g-900: #283624;

  /* --- Yellow (warning) → Mustard --- */
  --y-25:  #FAF4E4;
  --y-50:  #F5E9C6;
  --y-75:  #ECD79A;
  --y-100: #E1C470;
  --y-200: #CDAA52;
  --y-300: #C29E47;
  --y-400: #BC9743;
  --y-500: #B5933F;   /* warning */
  --y-600: #9C7E36;
  --y-700: #7E662C;
  --y-800: #604E22;
  --y-900: #3F3417;

  /* --- Red (error) → Stamp --- */
  --r-25:  #F7E9E9;
  --r-50:  #EFD4D4;
  --r-75:  #E0A9A9;
  --r-100: #D17F7F;
  --r-200: #B25555;
  --r-300: #9F4747;
  --r-400: #973F3F;
  --r-500: #8E3A3A;   /* error */
  --r-600: #7A3232;
  --r-700: #642929;
  --r-800: #4D2020;
  --r-900: #381818;

  /* --- Plum (Instagram) — not in Chatwoot's default ramp; expose for our use --- */
  --p-500: #6B3A5A;
}

/* -------------------------------------------------------------------------- */
/* 4. Night Shift — Chatwoot dark theme override                              */
/* -------------------------------------------------------------------------- */
/* Chatwoot toggles dark via the `dark` class on <html> (Tailwind dark: mode) */
/* AND, in older builds, via [data-theme="dark"]. Cover both.                 */

html.dark,
html[data-theme="dark"] {
  --color-background:       #1F1A14;   /* night ink */
  --color-background-light: #353029;   /* night ink muted */
  --color-background-white: #2A2520;   /* night ink soft */
  --color-border:           #3F382E;
  --color-border-light:     #3F382E;

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

  /* Lifted channel ramp — same desaturation, more luminance */
  --w-500: #7892B0;
  --w-600: #607696;
  --w-700: #4D6584;

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

  --p-500:  #A6809A;
  --ns-slate: #87A6AF;
  --ns-brass: #C2A878;

  --s-25:  #2A2520;
  --s-50:  #353029;
  --s-75:  #3F382E;
  --s-100: #544A3D;
  --s-200: #6B6253;
  --s-300: #948872;
  --s-700: #D4C7AF;
  --s-900: #EFE5D2;
}

/* -------------------------------------------------------------------------- */
/* 5. Type — sweep the app                                                    */
/* -------------------------------------------------------------------------- */

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

/* Conversation content reads in serif — both incoming and outgoing */
.message-text, .message-text__wrap,
.conversation--message .bubble,
.bubble.text .message-text,
.bubble .text-content {
  font-family: var(--ns-font-content) !important;
  font-size: 15px;
  line-height: 1.55;
}

/* Timestamps and metadata in mono */
.conversation-date, .timestamp, .time, .date,
.conversation--meta, .activity-time,
.bubble .meta, .bubble--time, .bubble-actions__time {
  font-family: var(--ns-font-meta) !important;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ns-pencil) !important;
}

/* Headings stay in Inter (UI face) — hierarchy via weight, not face */
h1, h2, h3, h4, h5, h6,
.title, .page-title, .conversation--header .user-name {
  font-family: var(--ns-font-ui);
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------- */
/* 6. Surfaces                                                                */
/* -------------------------------------------------------------------------- */

body, .app-wrapper {
  background: var(--ns-paper);
  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;
}

/* Sidebar — vellum, soft hairline */
.sidebar, .app-sidebar,
.conversations-sidebar, .secondary-sidebar {
  background: var(--ns-vellum) !important;
  border-color: var(--ns-rule) !important;
}
html.dark .sidebar, html.dark .app-sidebar { background: #353029 !important; border-color: #3F382E !important; }

/* Conversation list panel */
.conversations-list, .conversation-list, .conv-list {
  background: var(--ns-vellum);
  border-color: var(--ns-rule);
}

/* Selected conversation row — paper background + 2px ink left edge */
.conversation--item.active,
.conversations-list .conversation.active,
.conv-list .conv-item.active {
  background: var(--ns-paper) !important;
  border-left: 2px solid var(--ns-ink) !important;
}

/* Hover — 2px rust left edge, no fill change */
.conversation--item:hover,
.conversations-list .conversation:hover {
  border-left: 2px solid var(--ns-rust);
}

/* -------------------------------------------------------------------------- */
/* 7. Message bubbles                                                          */
/* -------------------------------------------------------------------------- */
/* Chatwoot bubble class names vary slightly between versions; this covers    */
/* the common ones (.bubble.left/.right, .conversation--message in/out).      */

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

/* Customer (incoming) — soft paper bubble, opposite side */
.bubble.left,
.conversation--message.left .bubble,
.message-incoming .bubble {
  background: var(--ns-paper-soft) !important;
  border: 1px solid var(--ns-rule) !important;
  color: var(--ns-ink) !important;
}

/* Operator (outgoing, human) — vellum bubble */
.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-vellum) !important;
  border: 1px solid var(--ns-rule-strong) !important;
  color: var(--ns-ink) !important;
}

/* AI agent (bot) — soft indigo tint, requires the "AI" badge to be readable */
.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 (operator-to-operator, internal) — mustard tint */
.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 — no bubble, mono ledger line */
.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;
}

/* -------------------------------------------------------------------------- */
/* 8. 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 — softened ink fill */
.button.primary, .button--primary,
button[type="submit"]:not(.alert):not(.success) {
  background: var(--ns-ink) !important;
  border-color: var(--ns-ink) !important;
  color: var(--ns-paper) !important;
}
.button.primary:hover, .button--primary:hover {
  background: var(--ns-ink-soft) !important;
  border-color: var(--ns-ink-soft) !important;
}

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

/* Accent — rust, for one-per-screen "Resolve" / "Approve AI" moments */
.button.success, .button--success,
.button.resolve, .resolve-button {
  background: var(--ns-rust) !important;
  border-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}
.button.success:hover, .button--success:hover { filter: brightness(0.94); }

/* Warning chips */
.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;
}

/* Danger / alert */
.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;
}

/* Ghost — most row-level actions */
.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; }

/* -------------------------------------------------------------------------- */
/* 9. Inputs                                                                  */
/* -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="search"],
input[type="password"], textarea, select,
.multiselect__tags, .ProseMirror {
  font-family: var(--ns-font-content) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  background: var(--ns-paper) !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;
}
input:focus, textarea:focus, select:focus,
.multiselect__tags:focus-within, .ProseMirror:focus {
  border-color: var(--ns-rule-strong) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
::placeholder {
  color: var(--ns-pencil-light) !important;
  font-style: italic !important;
}

/* -------------------------------------------------------------------------- */
/* 10. Channel pills (where Chatwoot shows inbox / channel labels)            */
/* -------------------------------------------------------------------------- */
/* Chatwoot tags channels with classes containing the channel slug.            */
/* If your build uses different selectors, treat this as a starting list and   */
/* add overrides per inbox.                                                    */

/* Web widget (default Chatwoot) */
.inbox-name[data-channel="api"],
.inbox-name[data-channel="website"],
.channel--web .channel-badge,
.tag.web {
  background: rgba(61, 88, 120, 0.20) !important;
  color: var(--ns-indigo) !important;
  border: 1px solid rgba(61, 88, 120, 0.28) !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.20) !important;
  color: var(--ns-sage) !important;
  border: 1px solid rgba(92, 122, 82, 0.28) !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.20) !important;
  color: var(--ns-rust) !important;
  border: 1px solid rgba(159, 98, 72, 0.28) !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.20) !important;
  color: var(--ns-plum) !important;
  border: 1px solid rgba(107, 58, 90, 0.28) !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.20) !important;
  color: var(--ns-slate) !important;
  border: 1px solid rgba(74, 110, 122, 0.28) !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.20) !important;
  color: var(--ns-brass) !important;
  border: 1px solid rgba(142, 115, 64, 0.28) !important;
  font-family: var(--ns-font-ui) !important;
  border-radius: var(--ns-r-5) !important;
  padding: 1px 8px !important;
}

/* -------------------------------------------------------------------------- */
/* 11. Status weight (V3.1 amendment 2 — pending bold, resolved pencil)       */
/* -------------------------------------------------------------------------- */

.conversations-list .conversation .conversation--user,
.conversations-list .conversation .last-message,
.conv-list .conv-item .name {
  font-family: var(--ns-font-content) !important;
  font-size: 15px !important;
  color: var(--ns-ink) !important;
  font-weight: 600 !important;
}
.conversations-list .conversation.read .conversation--user,
.conversations-list .conversation.resolved .conversation--user {
  font-weight: 400 !important;
  color: var(--ns-pencil) !important;
}

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

.app-header, .navbar, .top-bar {
  background: rgba(251, 243, 228, 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;
}

/* -------------------------------------------------------------------------- */
/* 13. Logo replacement                                                       */
/* -------------------------------------------------------------------------- */
/* Drop the NightShift mark + wordmark in place of the Chatwoot logo.          */
/* Replace the data URL below with the path to your hosted SVG asset.          */
/* Keep the ::after wordmark hidden if your build already shows the company    */
/* name in text — set it to display:none.                                      */

.app-logo img,
.logo img,
.sidebar .logo img {
  content: url("/branding/nightshift-mark.svg") !important;
  width: 26px !important; height: 26px !important;
}

/* If Chatwoot renders the logo as a background image */
.app-logo, .logo, .sidebar .logo {
  background-image: url("/branding/nightshift-mark.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

/* Add the wordmark beside the mark on the sidebar */
.sidebar .logo::after {
  content: "NightShift.";
  font-family: var(--ns-font-display);
  font-size: 18px;
  color: var(--ns-ink);
  margin-left: 8px;
  letter-spacing: -0.01em;
}
html.dark .sidebar .logo::after { color: #EFE5D2; }

/* -------------------------------------------------------------------------- */
/* 13b. System messages — toasts, banners, alerts                             */
/* -------------------------------------------------------------------------- */
/* Mirrors the four-state system from the brand guide (success/warning/error/  */
/* info). Picks up Chatwoot's existing notification classes.                   */

/* Toast (Chatwoot uses .ui-snackbar / .vue-notification depending on version) */
.ui-snackbar, .vue-notification, .toast-message {
  font-family: var(--ns-font-ui) !important;
  font-size: 14px !important;
  border-radius: var(--ns-r-8) !important;
  padding: 13px 16px !important;
  box-shadow: 0 13px 34px rgba(42, 37, 32, 0.18) !important;
  border: 0 !important;
}
.ui-snackbar.success, .vue-notification.success, .toast-message.success {
  background: var(--ns-success) !important;
  color: var(--ns-paper) !important;
}
.ui-snackbar.warn, .vue-notification.warn, .toast-message.warning,
.ui-snackbar.warning, .vue-notification.warning {
  background: var(--ns-warning) !important;
  color: var(--ns-ink) !important;
}
.ui-snackbar.error, .vue-notification.error, .toast-message.error {
  background: var(--ns-error) !important;
  color: var(--ns-paper) !important;
}
.ui-snackbar.info, .vue-notification.info, .toast-message.info {
  background: var(--ns-ink) !important;
  color: var(--ns-paper) !important;
}

/* Inline alert callout (Chatwoot's .alert / .callout) */
.alert, .callout {
  font-family: var(--ns-font-content) !important;
  font-size: 15px !important;
  border-radius: var(--ns-r-8) !important;
  padding: 13px 16px !important;
  border: 1px solid var(--ns-rule) !important;
  background: var(--ns-paper) !important;
}
.alert.success, .callout.success {
  background: rgba(92, 122, 82, 0.08) !important;
  border-color: rgba(92, 122, 82, 0.28) !important;
  border-left: 3px solid var(--ns-success) !important;
  color: var(--ns-ink) !important;
}
.alert.warning, .callout.warning {
  background: rgba(181, 147, 63, 0.08) !important;
  border-color: rgba(181, 147, 63, 0.32) !important;
  border-left: 3px solid var(--ns-warning) !important;
  color: var(--ns-ink) !important;
}
.alert.alert--error, .alert.error, .callout.error,
.alert.alert--danger, .alert.danger {
  background: rgba(142, 58, 58, 0.08) !important;
  border-color: rgba(142, 58, 58, 0.28) !important;
  border-left: 3px solid var(--ns-error) !important;
  color: var(--ns-ink) !important;
}
.alert.info, .callout.info, .alert.alert--info {
  background: var(--ns-vellum) !important;
  border-left: 3px solid var(--ns-ink-soft) !important;
  color: var(--ns-ink) !important;
}

/* Status pill (Chatwoot's .label / .badge classes used for inline state) */
.label, .badge {
  font-family: var(--ns-font-ui) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 89px !important;
  padding: 3px 10px !important;
}
.label.success, .badge.success {
  color: var(--ns-success) !important;
  background: rgba(92, 122, 82, 0.14) !important;
  border: 1px solid rgba(92, 122, 82, 0.26) !important;
}
.label.warning, .badge.warning {
  color: #8E7530 !important;
  background: rgba(181, 147, 63, 0.18) !important;
  border: 1px solid rgba(181, 147, 63, 0.32) !important;
}
.label.alert, .badge.alert, .label.error, .badge.error {
  color: var(--ns-error) !important;
  background: rgba(142, 58, 58, 0.14) !important;
  border: 1px solid rgba(142, 58, 58, 0.26) !important;
}

/* -------------------------------------------------------------------------- */
/* 14. Modals and overlays                                                    */
/* -------------------------------------------------------------------------- */

.modal-container, .modal--container, .ui-confirm-modal {
  background: var(--ns-paper) !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);
}

/* -------------------------------------------------------------------------- */
/* 15. Phase-2 limitations (CSS-only cannot reach)                            */
/* -------------------------------------------------------------------------- */
/*
   The following live as either inline styles, hex literals inside Vue
   templates, or asset files baked at build time. They will keep their
   stock Chatwoot appearance until they're replaced at the source:

     - .icon font glyphs (single-colour SVG symbols loaded from the
       icon font sprite). Each glyph is a separate asset; replace them
       in /public/dashboard/images/icons/ to fully match the brand.

     - The favicon and PWA manifest icon. Replace in
       /public/favicon.ico, /public/dashboard/icon-*.png, and
       /public/manifest.json.

     - Email-template colours (sent by Chatwoot's mailer). These live in
       the email templates section of admin settings — not reachable by
       this stylesheet.

     - The rich-text editor toolbar buttons (TipTap / ProseMirror) —
       partially restyled above; some toolbar icons keep their stock
       fill. Full replacement requires editing the toolbar component.

     - Hardcoded hex literals inside a small set of Vue components
       (notably the new conversation modal and a few onboarding
       screens). These need a SCSS rebuild to override cleanly.

   Mark these for a Phase-2 fork once the cosmetic pass is approved.
*/

/* -------------------------------------------------------------------------- */
/* 16. Chatwoot v3 Tailwind neutral-scale overrides                           */
/* -------------------------------------------------------------------------- */
/*
   Chatwoot v3 migrated to Tailwind CSS with a custom `n-*` (neutral) color
   scale. The primary left nav sidebar uses Tailwind utility classes like
   `bg-n-solid`, `bg-n-weak`, etc., rather than component class names.
   CSS variable overrides at :root don't reach these; we must override the
   Tailwind utility classes directly.

   Also covers the `aside` element selector as a structural fallback, and
   the `[class*="bg-n-"]` attribute pattern for any numeric neutral variants.
*/

/* Override Chatwoot v3 Tailwind neutral utility classes */
.bg-n-solid, .bg-n-0,
.bg-n-25, .bg-n-50 {
  background-color: var(--ns-paper) !important;
}

.bg-n-weak, .bg-n-75, .bg-n-100 {
  background-color: var(--ns-vellum) !important;
}

.bg-n-strong, .bg-n-150, .bg-n-200 {
  background-color: var(--ns-rule) !important;
}

/* Dark mode Tailwind neutral overrides */
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;
}

/* Attribute pattern — catches any numeric bg-n-* variant we may have missed */
[class*=" bg-n-"]:not([class*="bg-n-s"]),
[class^="bg-n-"]:not([class*="bg-n-s"]) {
  background-color: var(--ns-paper) !important;
}

/* Border overrides for the neutral scale */
.border-n-strong, .border-n-100, .border-n-150 {
  border-color: var(--ns-rule) !important;
}
.border-n-weak, .border-n-50, .border-n-75 {
  border-color: var(--ns-rule) !important;
}

/* Structural fallback — sidebar is typically an <aside> element */
aside {
  background-color: var(--ns-paper) !important;
  border-right-color: var(--ns-rule) !important;
}
html.dark aside {
  background-color: #1F1A14 !important;
  border-right-color: #3F382E !important;
}

/* bg-white override — catches explicit hardcoded class on any panel */
.bg-white {
  background-color: var(--ns-paper) !important;
}
html.dark .bg-white,
html.dark .dark\:bg-slate-900 {
  background-color: #1F1A14 !important;
}

/* -------------------------------------------------------------------------- */
/* 17. Chatwoot v3 active nav-item and Resolve button                         */
/* -------------------------------------------------------------------------- */

/* Active nav states — Radix / shadcn use data-state="active"; Vue Router    */
/* adds router-link-active; some Chatwoot versions use aria-current="page"   */
[data-state="active"],
[aria-current="page"],
.router-link-active:not([class*="channel"]),
.router-link-exact-active:not([class*="channel"]) {
  background-color: var(--ns-vellum) !important;
  color: var(--ns-ink) !important;
}

/* Resolve / primary action button */
button[data-key="resolve"],
.resolve-button,
[class*="resolve-btn"],
.woot-button--resolve {
  background-color: var(--ns-rust) !important;
  border-color: var(--ns-rust) !important;
  color: var(--ns-paper) !important;
}

/* -------------------------------------------------------------------------- */
/* 18. Chatwoot v3 woot-* Tailwind class overrides                            */
/* -------------------------------------------------------------------------- */
/*
   Chatwoot v3 compiles woot-* and n-* Tailwind colors as literal hex at
   build time via JIT. CSS variable overrides at :root don't reach them —
   we must override the generated classes directly.

   woot-* is Chatwoot's primary blue ramp. We remap it to our indigo channel
   color (#3D5878) for UI chrome, and to ns-vellum for message bubbles.
*/

/* Primary blue ramp → indigo (chrome: tabs, borders, icons) */
.bg-woot-25  { background-color: #F4F6FA !important; }
.bg-woot-50  { background-color: #E5EBF3 !important; }
.bg-woot-75  { background-color: rgba(61,88,120,0.12) !important; }
.bg-woot-100 { background-color: rgba(61,88,120,0.18) !important; }
.bg-woot-200 { background-color: rgba(61,88,120,0.30) !important; }
.bg-woot-300 { background-color: #607696 !important; }
.bg-woot-400 { background-color: #4D6584 !important; }
.bg-woot-500 { background-color: #3D5878 !important; }
.bg-woot-600 { background-color: #344E6B !important; }
.bg-woot-700 { background-color: #2C435C !important; }
.bg-woot-800 { background-color: #233649 !important; }
.bg-woot-900 { background-color: #1A2939 !important; }

.text-woot-400 { color: #4D6584 !important; }
.text-woot-500 { color: #3D5878 !important; }
.text-woot-600 { color: #344E6B !important; }
.hover\:text-woot-500:hover { color: #344E6B !important; }
.hover\:text-woot-600:hover { color: #2C435C !important; }

.border-woot-100 { border-color: rgba(61,88,120,0.18) !important; }
.border-woot-200 { border-color: rgba(61,88,120,0.30) !important; }
.border-woot-400 { border-color: #4D6584 !important; }
.border-woot-500 { border-color: #3D5878 !important; }
.border-b-woot-500,
[class*="border-b"][class*="woot"] { border-color: #9F6248 !important; }

/* Attribute pattern fallback for any woot-* class we haven't enumerated */
[class*="bg-woot-5"], [class*="bg-woot-6"],
[class*="bg-woot-7"], [class*="bg-woot-8"],
[class*="bg-woot-9"] { background-color: #3D5878 !important; }

/* Active tab indicator — remap to rust */
[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;
}
/* The colored underline bar on Mine/Unassigned/All tabs */
[class*="border-b-2"][class*="woot"],
[class*="border-b-4"][class*="woot"] {
  border-color: var(--ns-rust) !important;
}

/* -------------------------------------------------------------------------- */
/* 19. Chatwoot v3 message bubble structure                                   */
/* -------------------------------------------------------------------------- */
/*
   In v3 the bubble class names changed. Cover both old (.bubble.right/.left)
   and v3 structural patterns (div[class*="message-type-"]).
   Also target by data attributes which are stable across versions.
*/

/* Outgoing/agent bubble (v3 structural variants) */
[class*="message-type-outgoing"],
[data-message-type="outgoing"],
.message--outgoing,
.message-outgoing {
  background-color: var(--ns-vellum) !important;
  border: 1px solid var(--ns-rule-strong) !important;
  border-radius: var(--ns-r-13) !important;
  color: var(--ns-ink) !important;
}
/* Make the inner text use ink if the wrapper was targeted */
[class*="message-type-outgoing"] *,
[data-message-type="outgoing"] * { color: var(--ns-ink) !important; }

/* Any element that has BOTH a woot-bg and relates to a bubble */
[class*="bg-woot"][class*="bubble"],
[class*="bubble"][class*="bg-woot"] {
  background-color: var(--ns-vellum) !important;
  border: 1px solid var(--ns-rule-strong) !important;
  color: var(--ns-ink) !important;
}

/* Conversation view — the right-hand panel background */
.conversations-view,
.conversation-panel,
.view-box,
.conversation-main {
  background-color: var(--ns-paper) !important;
}

/* End — NightShift Chatwoot Reskin V1                                        */
/* -------------------------------------------------------------------------- */