body {
  --pill-bar-bg: rgba(255, 255, 255, 0.25);
  --pill-item-color: white;
  --pill-item-hover-bg: rgba(255, 255, 255, 0.07);
  --pill-item-selected-bg: rgba(255, 255, 255, 0.37);
  --pill-outline-color: rgba(255, 255, 255, 0.15);

  /* orb colors */
  --orb-1-color: rgba(29, 78, 216, 0.45);   /* deep blue */
  --orb-2-color: rgba(14, 165, 233, 0.30);  /* sky blue */
  --orb-3-color: rgba(99, 102, 241, 0.35);  /* indigo */
  --orb-4-color: rgba(6, 182, 212, 0.20);   /* cyan accent */
}

/* simplechat design tokens, mapped to the app theme so the embedded chat
   follows the active theme (VA / Dark / …) like the email windows.
   Scoped to <chat-base> because the --app-* vars resolve here in the app tree
   (they aren't defined at :root/body). The dark hex are standalone fallbacks.
   Mirrors simplechat/ui/themes/chat-tokens.css; the package owns card radius. */
chat-base {
  --bg:           var(--app-background-color, #0f1216);
  --surface:      var(--card-background-color, #171b21);
  --surface-2:    color-mix(in srgb, var(--card-background-color, #171b21) 88%, #000);
  --border:       var(--app-border-color, #2a3038);
  --border-soft:  color-mix(in srgb, var(--app-border-color, #2a3038) 55%, transparent);
  --text-1:       var(--app-text-color, #e8ebf0);
  --text-2:       var(--app-light-text-color, #98a0ad);
  --text-3:       color-mix(in srgb, var(--app-light-text-color, #98a0ad) 65%, transparent);
  --muted:        var(--app-light-text-color, #545b66);
  --accent:       var(--app-focus-color, #5b8def);
  --row-active:   color-mix(in srgb, var(--app-focus-color, #5b8def) 18%, transparent);
  --row-hover:    color-mix(in srgb, var(--app-text-color, #e8ebf0) 7%, transparent);
  --chip-bg:      color-mix(in srgb, var(--app-text-color, #e8ebf0) 12%, transparent);
  --chip-active:  color-mix(in srgb, var(--app-focus-color, #5b8def) 22%, transparent);
  --input-bg:     color-mix(in srgb, var(--app-background-color, #11151a) 55%, transparent);

  --bubble-rep:       color-mix(in srgb, var(--app-focus-color, #5b8def) 22%, var(--card-background-color, #171b21));
  --bubble-rep-fg:    var(--app-text-color, #e8ebf0);
  --bubble-cust:      var(--card-background-color, #232831);
  --bubble-cust-fg:   var(--text-1);

  --note-bg:      color-mix(in srgb, var(--app-warning-text-color, #5e4a18) 16%, transparent);
  --note-border:  color-mix(in srgb, var(--app-warning-text-color, #5e4a18) 45%, transparent);
  --note-fg:      var(--app-label-color, #d4b769);

  --ok:           var(--app-success-text-color, #34c769);
  --ok-fg:        var(--app-success-text-color, #6fdc94);
  --ok-bg:        color-mix(in srgb, var(--app-success-text-color, #34c769) 18%, transparent);
  --warn:         var(--app-warning-text-color, #f59e0b);
  --warn-fg:      var(--app-warning-text-color, #f0b658);
  --warn-bg:      color-mix(in srgb, var(--app-warning-text-color, #f59e0b) 18%, transparent);
  --err:          var(--app-error-text-color, #ef4444);
  --err-fg:       var(--app-error-text-color, #f48b8b);
  --err-bg:       color-mix(in srgb, var(--app-error-text-color, #ef4444) 18%, transparent);
  --info:         var(--app-accent1-text-color, #9ec0ff);
  --info-fg:      var(--app-accent1-text-color, #9ec0ff);
  --info-bg:      color-mix(in srgb, var(--app-accent1-text-color, #9ec0ff) 18%, transparent);
}