/* =============================================================================
   NS_Chat — Design Tokens
   Extracted from OfficePro_UI_Kit.html. SupportPro module color = #4f3f6e.
   Keep variable names stable — both widget and admin consume them.
   ========================================================================== */

:root {
  /* ── Brand: NaturaeSoft purple family ─────────────────────────────────── */
  --ns-color-brand-deepest: #2e2540;    /* sidebar surface, text primary */
  --ns-color-brand-darker:  #3e3258;    /* secondary card headers, hover deep */
  --ns-color-brand:         #4f3f6e;    /* PRIMARY — buttons, card headers, accents */
  --ns-color-brand-light:   #675592;    /* ApptPro tone, active accents */
  --ns-color-brand-light-2: #7060a0;    /* avatar fill on dark, decorative */
  --ns-color-brand-tint:    #9080b8;    /* sidebar muted text, faint accent */
  --ns-color-brand-tint-2:  #b0a0cc;    /* sidebar inactive nav text */
  --ns-color-brand-tint-3:  #cfc5e0;    /* sidebar footer name color */
  --ns-color-brand-pale:    #ddd8ef;    /* tinted backgrounds for stats/pills */
  --ns-color-brand-wash:    rgba(79, 63, 110, 0.10);  /* purple-tinted shadows */

  /* ── NaturaeSoft module accents (rare, mostly for status-by-module) ───── */
  --ns-color-apptpro:    #675592;
  --ns-color-chartpro:   #b08a00;
  --ns-color-patientpro: #e07018;
  --ns-color-billpro:    #d84848;
  --ns-color-productpro: #578a35;

  /* ── Neutrals ──────────────────────────────────────────────────────────── */
  --ns-color-bg:        #f5f5fa;
  --ns-color-bg-2:      #f9f9fc;        /* table header row, faint zebra */
  --ns-color-surface:   #ffffff;
  --ns-color-border:    #e4e4ee;
  --ns-color-border-soft: #f2f2f8;      /* table row dividers */
  --ns-color-text:      #2e2540;        /* primary body text */
  --ns-color-text-2:    #4a4a5e;        /* secondary, slightly muted */
  --ns-color-text-muted: #666680;       /* topbar icons, table subdued cells */
  --ns-color-text-quiet: #888898;       /* small captions, subtitles */
  --ns-color-text-faint: #aaaabc;       /* placeholders, disabled, very quiet */

  /* ── Semantic / status pills (mirroring the kit's status badge pattern) ── */
  /* Each status: a tinted bg + the saturated text/border tone. */
  --ns-status-waiting-bg:    #fef6e4;
  --ns-status-waiting-fg:    #c07810;
  --ns-status-open-bg:       var(--ns-color-brand-pale);
  --ns-status-open-fg:       var(--ns-color-brand);
  --ns-status-assigned-bg:   #e6f4ec;
  --ns-status-assigned-fg:   #2e8a4a;
  --ns-status-closed-bg:     #f0f0f5;
  --ns-status-closed-fg:     var(--ns-color-text-quiet);
  --ns-status-alert-bg:      #fce8e8;
  --ns-status-alert-fg:      #c83838;

  /* ── Notification dot (matches the kit's topbar bell badge) ───────────── */
  --ns-color-alert: #d84848;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --ns-font-display: 'Montserrat', 'Segoe UI', 'DejaVu Sans', Arial, sans-serif;
  --ns-font-body:    'Segoe UI', 'DejaVu Sans', Arial, sans-serif;
  --ns-font-script:  'Magneto', Georgia, serif;  /* wordmark only */
  --ns-font-mono:    ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;

  /* Type scale — the kit defaults to 13px body */
  --ns-text-xs:   11px;   /* eyebrow / TH labels */
  --ns-text-sm:   12px;   /* subtitles, captions */
  --ns-text-base: 13px;   /* body default */
  --ns-text-md:   14px;   /* sidebar logo */
  --ns-text-lg:   16px;   /* topbar title, section headings */
  --ns-text-xl:   18px;   /* placeholder hero */
  --ns-text-2xl:  26px;   /* stat values */

  --ns-fw-regular:  400;
  --ns-fw-medium:   500;
  --ns-fw-semibold: 600;
  --ns-fw-bold:     700;

  /* ── Spacing (4px grid) ────────────────────────────────────────────────── */
  --ns-space-1:  4px;
  --ns-space-2:  8px;
  --ns-space-3:  10px;
  --ns-space-4:  12px;
  --ns-space-5:  14px;
  --ns-space-6:  16px;
  --ns-space-7:  20px;
  --ns-space-8:  24px;
  --ns-space-10: 32px;

  /* ── Radii (the kit favors small/tight radii) ──────────────────────────── */
  --ns-radius-xs:    4px;   /* tags, small pills */
  --ns-radius-sm:    6px;   /* inputs, icon buttons */
  --ns-radius-md:    7px;   /* quick action buttons */
  --ns-radius-lg:    8px;   /* cards */
  --ns-radius-xl:    10px;  /* large icon tiles */
  --ns-radius-pill:  9999px;

  /* ── Shadows (purple-tinted, low-key) ──────────────────────────────────── */
  --ns-shadow-card: 0 2px 4px rgba(79, 63, 110, 0.10);
  --ns-shadow-pop:  0 8px 24px rgba(46, 37, 64, 0.18);
  --ns-shadow-launcher: 0 6px 20px rgba(46, 37, 64, 0.32);

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --ns-border-thin: 1px solid var(--ns-color-border);
  --ns-border-medium: 1.5px solid var(--ns-color-border);  /* inputs, icon-btns */
  --ns-border-table: 2px solid var(--ns-color-border);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ns-motion-fast: 120ms;
  --ns-motion-base: 180ms;
  --ns-motion-slow: 280ms;
  --ns-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ns-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);

  /* ── Z-index (widget needs to float over host app) ────────────────────── */
  --ns-z-widget-launcher: 2147483600;
  --ns-z-widget-panel:    2147483601;
  --ns-z-toast:           2147483602;

  /* ── Chat-specific tokens ─────────────────────────────────────────────── */
  --ns-chat-customer-bg: var(--ns-color-brand);
  --ns-chat-customer-fg: #ffffff;
  --ns-chat-agent-bg:    var(--ns-color-surface);
  --ns-chat-agent-fg:    var(--ns-color-text);
  --ns-chat-system-fg:   var(--ns-color-text-quiet);
  --ns-chat-bubble-radius: 14px;
  --ns-chat-bubble-radius-tail: 4px;
}

/* Enforce [hidden] — CSS display properties have higher specificity than the
   browser's built-in [hidden]{display:none}, so we re-assert it here. */
[hidden] { display: none !important; }

/* Per-practice overrides come through `Customers.Primary_Color` etc. via
   the bootstrap endpoint and are applied on .ns-themed-root as inline
   custom property overrides:

     <div class="ns-themed-root" style="--ns-color-brand: #abc123;">
*/