CSS מותאם אישית

/* Does NOT work — tokens are applied inline on the host element,
   which beats any :host rule: */
:host { --syncanix-primary: #0f766e; }

/* Works — re-declare the variable on a descendant instead: */
.syncanix-panel { --syncanix-primary: #0f766e; }

/* Launcher (the closed floating button — an attribute, not a class) */
[data-syncanix='launcher']
.syncanix-launcher-avatar
.syncanix-launcher-brand

/* Panel chrome */
.syncanix-panel
.syncanix-panel-header

/* Messages */
.syncanix-panel-item-user
.syncanix-panel-item-assistant
.syncanix-msg-body

/* Composer */
.syncanix-panel-composer
.syncanix-panel-composer-form
.syncanix-panel-composer-input
.syncanix-panel-composer-submit
.syncanix-panel-composer-stop
.syncanix-panel-composer-limit

/* Rich primitives — each renders with its type on the root */
.syncanix-card
.syncanix-confirm-card
[data-syncanix-primitive='list' | 'table' | 'card' | 'markdown' | 'button'
  | 'detail' | 'form' | 'status' | 'empty-state' | 'confirm-card' | 'navigate'
  | 'component' | 'iframe' | 'action-plan' | 'action-in-progress'
  | 'action-result' | 'chart' | 'embed' | 'metric' | 'funnel' | 'flow'
  | 'sign-in-card' | 'onboarding-checklist']

/* Colour */
--syncanix-primary            --syncanix-primary-foreground
--syncanix-background         --syncanix-foreground
--syncanix-muted              --syncanix-muted-foreground
--syncanix-border             --syncanix-ring
--syncanix-destructive        --syncanix-destructive-foreground
--syncanix-link

/* Typography */
--syncanix-font-family        --syncanix-font-family-heading
--syncanix-line-height-base   --syncanix-letter-spacing-base
--syncanix-measure

/* Shape */
--syncanix-radius             --syncanix-radius-sm
--syncanix-radius-md          --syncanix-radius-lg
--syncanix-radius-full        --syncanix-avatar-radius

/* Elevation, spacing, motion, icons */
--syncanix-shadow-lg          --syncanix-shadow-xl
--syncanix-spacing            --syncanix-spacing-sm
--syncanix-motion-duration    --syncanix-motion-easing
--syncanix-icon-stroke-width

/* Per-element studio overrides (set on a descendant to override locally) */
--syncanix-launcher-bg        --syncanix-launcher-fg
--syncanix-header-bg          --syncanix-header-fg
--syncanix-user-bubble-bg     --syncanix-user-bubble-fg
--syncanix-assistant-bubble-bg  --syncanix-assistant-bubble-fg
--syncanix-composer-bg        --syncanix-pane-bg
--syncanix-ai-font-family     --syncanix-user-font-family

.syncanix-panel-header { background: #f8fafc; }

:host([data-color-scheme='dark']) .syncanix-panel-header {
  background: #1e293b;
}

/* A gradient panel header with a hairline divider */
.syncanix-panel-header {
  background: linear-gradient(135deg, #0f766e, #134e4a);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

/* Round only the cards, and give tables a tighter radius */
[data-syncanix-primitive='card'] { --syncanix-radius: 1rem; }
[data-syncanix-primitive='table'] { --syncanix-radius: 0.25rem; }

/* Slow the widget's motion down, and switch it off for
   reduced-motion visitors */
.syncanix-panel { --syncanix-motion-duration: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .syncanix-panel { --syncanix-motion-duration: 0ms; }
}