/* Violet reuses the shared workspace surface map, with its own light/dark
   tokens. Navigation is intentionally purple; working surfaces stay calm. */
html.crm-glass.crm-violet:root {
  color-scheme: light;
  --violet-scheme: light;
  --feed-scene-base: #423794;
  --feed-scene: url('/images/workspace-violet-orbit-aec040c2907c.svg') center / cover no-repeat,
    radial-gradient(ellipse at 8% 12%, rgb(143 127 239 / 56%), transparent 47%),
    radial-gradient(ellipse at 95% 90%, rgb(58 142 211 / 40%), transparent 50%),
    linear-gradient(135deg, #5549b5, #382e87 65%, #443ba0);
  --slate-card: rgb(255 255 255 / 97%);
  --slate-card-solid: #fff;
  --slate-field: #f3f6fb;
  --slate-ink: #263245;
  --slate-muted: #647087;
  --slate-edge: #dfe5ef;
  --slate-positive: #08765b;
  --slate-negative: #bd3654;
  --slate-link: #1371c8;
  --slate-warning: #8d5d0c;
  --violet-action: #0879c9;
  --violet-action-hover: #0668b1;
  --violet-action-ink: #fff;
  --violet-success-fill: #e5f6ef;
  --violet-danger-fill: #fff0f3;
  --violet-info-fill: #e6f3ff;
  --violet-warning-fill: #fff5df;
  --violet-purple-fill: #f0eafd;
  --violet-purple-ink: #7252b5;
  --violet-nav: rgb(71 58 160 / 68%);
  --violet-nav-solid: #493f9d;
  --violet-canvas: #f2f3fa;
  --dk-bg: #f2f4fa;
  --dk-bg-solid: #fff;
  --dk-bg-deep: #e9edf6;
  --dk-nav: rgb(255 255 255 / 96%);
  --dk-surface: #fff;
  --dk-surface-2: #f7f8fc;
  --dk-surface-3: #eff3f9;
  --dk-surface-4: #e7ecf5;
  --dk-surface-5: #dce4ef;
  --dk-surface-6: #ccd6e5;
  --dk-surface-raised: #e8eef8;
  --dk-popover: #fff;
  --dk-surface-solid: #fff;
  --dk-surface-opaque: rgb(255 255 255 / 97%);
  --dk-input: var(--slate-field);
  --dk-input-opaque: #f3f6fb;
  --dk-hover: #edf5fc;
  --dk-hover-2: #e5f0fb;
  --dk-hover-3: #d9eafb;
  --dk-active: #dcecff;
  --dk-selected: #e2f1ff;
  --dk-overlay: rgb(22 18 57 / 42%);
  --dk-border-soft: #edf0f6;
  --dk-border: var(--slate-edge);
  --dk-border-strong: #ccd6e5;
  --dk-border-x: #c6d2e3;
  --dk-accent-border: #1685d9;
  --dk-ring: rgb(22 133 217 / 17%);
  --dk-text-primary: var(--slate-ink);
  --dk-text-body: #344259;
  --dk-text-secondary: #485770;
  --dk-text-muted: var(--slate-muted);
  --dk-text-faint: #748198;
  --dk-text-disabled: #8b96a8;
  --dk-link: var(--slate-link);
  --dk-success: var(--slate-positive);
  --dk-warning: var(--slate-warning);
  --dk-error: var(--slate-negative);
  --dk-info: var(--slate-link);
  --crm-glass-surface: rgb(255 255 255 / 96%);
  --crm-glass-solid: #fff;
  --crm-glass-edge: var(--slate-edge);
  --crm-glass-ink: var(--slate-ink);
  --crm-glass-hover: var(--dk-hover);
  --crm-glass-control: var(--slate-field);
  --crm-glass-active: var(--dk-selected);
  --crm-glass-active-edge: #a7cfee;
  --crm-glass-accent: var(--slate-link);
  --crm-glass-danger: var(--slate-negative);
  --crm-glass-shadow: rgb(27 20 80 / 17%);
  --crm-dialog-surface: rgb(255 255 255 / 98%);
  --crm-dialog-solid: var(--slate-card-solid);
  --crm-dialog-ink: var(--slate-ink);
  --crm-dialog-muted: var(--slate-muted);
  --crm-dialog-edge: var(--slate-edge);
  --crm-dialog-card: var(--slate-field);
  --crm-dialog-hover: var(--dk-hover);
  --crm-dialog-active: var(--dk-selected);
  --crm-dialog-accent: var(--slate-link);
  --crm-dialog-warning: var(--slate-warning);
  --crm-dialog-warning-fill: var(--violet-warning-fill);
  --crm-dialog-danger: var(--slate-negative);
  --crm-dialog-scroll: #aab9d0;
  scrollbar-color: #aab9d0 transparent;
}
html.crm-glass.crm-violet.dark:root {
  color-scheme: dark;
  --violet-scheme: dark;
  --feed-scene-base: #211d47;
  --feed-scene: url('/images/workspace-violet-orbit-aec040c2907c.svg') center / cover no-repeat,
    radial-gradient(ellipse at 8% 12%, rgb(105 83 192 / 32%), transparent 50%),
    linear-gradient(135deg, #30275e, #201c43 65%, #2b325d);
  --slate-card: rgb(39 38 65 / 97%);
  --slate-card-solid: #29283f;
  --slate-field: #211f36;
  --slate-ink: #f0f1fb;
  --slate-muted: #b7bed5;
  --slate-edge: #44435e;
  --slate-positive: #8ee5c2;
  --slate-negative: #ffacc0;
  --slate-link: #94d3ff;
  --slate-warning: #f6d28d;
  --violet-action: #0879c9;
  --violet-action-hover: #0668b1;
  --violet-success-fill: #23443e;
  --violet-danger-fill: #4c2d44;
  --violet-info-fill: #263f61;
  --violet-warning-fill: #4c402f;
  --violet-purple-fill: #3f3159;
  --violet-purple-ink: #d1b8fb;
  --violet-nav: rgb(48 37 100 / 83%);
  --violet-nav-solid: #302564;
  --violet-canvas: #211f36;
  --dk-bg: #211f36;
  --dk-bg-solid: var(--slate-card-solid);
  --dk-bg-deep: #1c1a30;
  --dk-nav: #2c2947;
  --dk-surface: var(--slate-card-solid);
  --dk-surface-2: #302e49;
  --dk-surface-3: #36344f;
  --dk-surface-4: #3d3a57;
  --dk-surface-5: #45425e;
  --dk-surface-6: #565271;
  --dk-surface-raised: #37334f;
  --dk-popover: var(--slate-card-solid);
  --dk-surface-solid: var(--slate-card-solid);
  --dk-surface-opaque: #2d2a45;
  --dk-input-opaque: var(--slate-field);
  --dk-hover: #373653;
  --dk-hover-2: #403e60;
  --dk-hover-3: #49476a;
  --dk-active: #3a4668;
  --dk-selected: #2b4667;
  --dk-overlay: rgb(10 8 28 / 68%);
  --dk-border-soft: #38354e;
  --dk-border-strong: #56516f;
  --dk-border-x: #676180;
  --dk-accent-border: #72bfff;
  --dk-ring: rgb(100 181 255 / 22%);
  --dk-text-body: #e1e3f1;
  --dk-text-secondary: #d3d6e7;
  --dk-text-faint: #a0aac4;
  --dk-text-disabled: #8991aa;
  --crm-glass-surface: #2c2947;
  --crm-glass-solid: var(--slate-card-solid);
  --crm-glass-active-edge: #507ca3;
  --crm-glass-shadow: rgb(8 7 24 / 34%);
  --crm-dialog-surface: #2c2947;
  --crm-dialog-scroll: #6c728c;
  scrollbar-color: #6c728c transparent;
}

html.crm-glass.crm-violet:root :is(body, .crm-workspace, .transactions-page.container) { background: var(--feed-scene) var(--feed-scene-base); background-attachment: fixed; }
/* Unframed headings and forms need a quiet canvas as well as white cards. */
html.crm-glass.crm-violet:root .crm-route-content { background: var(--violet-canvas); color: var(--slate-ink); }
html.crm-glass.crm-violet:root .crm-route-content:has(> .profile-page),
html.crm-glass.crm-violet:root .crm-route-content:has(> .min-h-screen .calculator-form) { background: transparent; }
html.crm-glass.crm-violet:root .crm-route-content > :is(.feed-page, .h-dvh:has(.warehouse-header)) { background: var(--feed-scene) var(--feed-scene-base) !important; background-attachment: fixed; }
html.crm-glass.crm-violet:root :is(input, textarea, select, option) { color-scheme: var(--violet-scheme); }
html.crm-glass.crm-violet:root :is(input, textarea)::placeholder { color: var(--slate-muted); opacity: .85; }
html.crm-glass.crm-violet:root option { background: var(--slate-card-solid); color: var(--slate-ink); }
html.crm-glass.crm-violet:root :is(.text-gray-800, .text-slate-800, .text-zinc-800, .text-black) { color: var(--slate-ink); }
html.crm-glass.crm-violet:root :is(.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900, .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900, .text-teal-500, .text-teal-600) { color: var(--slate-positive) !important; }
html.crm-glass.crm-violet:root :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-sky-500, .text-sky-600, .text-cyan-600) { color: var(--slate-link); }
html.crm-glass.crm-violet:root :is(.text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-indigo-950, .text-violet-500, .text-violet-600, .text-violet-700, .text-violet-800, .text-violet-900, [class^='text-violet-700/'], [class*=' text-violet-700/']) { color: var(--violet-purple-ink) !important; }
html.crm-glass.crm-violet:root :is(.text-amber-500, .text-amber-600, .text-amber-700, .text-yellow-600, .text-orange-600) { color: var(--slate-warning); }
html.crm-glass.crm-violet:root :is(.text-red-400, .text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900, .text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800, .text-rose-900) { color: var(--slate-negative) !important; }
html.crm-glass.crm-violet:root :is(.bg-emerald-50, .bg-emerald-100, .bg-green-50, .bg-green-100, .bg-teal-50) { background-color: var(--violet-success-fill); }
html.crm-glass.crm-violet:root :is(.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100) { background-color: var(--violet-danger-fill); }
html.crm-glass.crm-violet:root :is(.bg-blue-50, .bg-blue-100, .bg-sky-50, .bg-sky-100, .bg-cyan-50) { background-color: var(--violet-info-fill); }
html.crm-glass.crm-violet:root :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-orange-50) { background-color: var(--violet-warning-fill); }
html.crm-glass.crm-violet:root :is(.bg-purple-50, .bg-purple-100, .bg-indigo-50, .bg-indigo-100, .bg-violet-50) { background-color: var(--violet-purple-fill); }

/* Buttons keep their semantic danger state; ordinary primary actions are blue. */
html.crm-glass.crm-violet:root :is(button, a):is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600),
html.crm-glass.crm-violet:root button[style*='background: rgb(34, 197, 94)'] {
  background: var(--violet-action) !important; color: var(--violet-action-ink) !important;
  border-color: transparent; box-shadow: 0 2px 6px rgb(9 93 165 / 12%);
}
html.crm-glass.crm-violet:root :is(button, a):is(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .bg-blue-500, .bg-blue-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600):hover:not(:disabled),
html.crm-glass.crm-violet:root button[style*='background: rgb(34, 197, 94)']:hover:not(:disabled) { background: var(--violet-action-hover) !important; }
html.crm-glass.crm-violet:root :is(.bg-black, .bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-slate-700, .bg-slate-800, .bg-slate-900).text-white { background: #42415f; color: #fff; }
html.crm-glass.crm-violet:root :is(button, a):is(.bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-slate-700, .bg-slate-800, .bg-slate-900).text-white { background: var(--violet-action); color: var(--violet-action-ink); }
html.crm-glass.crm-violet:root :is(button, a):is(.bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-slate-700, .bg-slate-800, .bg-slate-900).text-white:hover:not(:disabled) { background: var(--violet-action-hover); }
html.crm-glass.crm-violet:root button:is(.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600) { background: var(--violet-danger-fill); color: var(--slate-negative); box-shadow: inset 0 0 0 1px var(--slate-edge); }
html.crm-glass.crm-violet:root :is(button, a, input, select, textarea):focus-visible { outline-color: var(--slate-link); }
html.crm-glass.crm-violet:root :is(input, select, textarea):focus { box-shadow: 0 0 0 2px var(--dk-ring); }
html.crm-glass.crm-violet:root ::-webkit-scrollbar-thumb { background: #aab9d080; }
html.crm-glass.crm-violet:root ::-webkit-scrollbar-thumb:hover { background: #8c9bb3b3; }
html.crm-glass.crm-violet:root:not(.dark) .shadow-sm { box-shadow: 0 1px 5px rgb(32 26 72 / 6%); }
html.crm-glass.crm-violet:root:not(.dark) :is(.shadow, .shadow-md) { box-shadow: 0 4px 14px rgb(32 26 72 / 9%); }
html.crm-glass.crm-violet:root:not(.dark) .shadow-lg { box-shadow: 0 8px 24px rgb(32 26 72 / 12%); }
html.crm-glass.crm-violet:root:not(.dark) :is(.shadow-xl, .shadow-2xl) { box-shadow: 0 14px 40px rgb(32 26 72 / 16%); }
html.crm-glass.crm-violet:root:not(.dark) .deal-card:hover { box-shadow: 0 6px 18px rgb(32 26 72 / 14%); }

/* White type and translucent selection belong only to the purple navigation. */
html.crm-glass.crm-violet:root :is(.desktop-sidebar-panel, [data-testid='sticky-navigation-root']) {
  --crm-glass-surface: var(--violet-nav); --crm-glass-solid: var(--violet-nav-solid);
  --crm-glass-edge: rgb(255 255 255 / 17%); --crm-glass-ink: #f2efff;
  --crm-glass-hover: rgb(255 255 255 / 15%); --crm-glass-control: rgb(255 255 255 / 6%);
  --crm-glass-active: rgb(255 255 255 / 23%); --crm-glass-active-edge: rgb(255 255 255 / 24%);
  --crm-glass-accent: #fff; --crm-glass-danger: #ffd5e2;
}
html.crm-glass.crm-violet:root .desktop-sidebar-rail { background: transparent; }
html.crm-glass.crm-violet:root .desktop-sidebar-rail .desktop-sidebar-panel { background: var(--violet-nav); border-color: rgb(255 255 255 / 15%); }
html.crm-glass.crm-violet:root .desktop-sidebar-panel .sidebar-footer { background: rgb(30 22 88 / 8%); }
html.crm-glass.crm-violet:root .desktop-sidebar-panel :is(.sidebar-nav-icon, .sidebar-nav-label, .sidebar-pin-button, .sidebar-brand > span) { color: #f2efff; }
html.crm-glass.crm-violet:root .mobile-quick-menu-actions { background: var(--slate-card-solid); }
html.crm-glass.crm-violet:root .mobile-quick-menu-toggle { background: var(--violet-nav-solid); color: #fff; border-color: rgb(255 255 255 / 20%); }
html.crm-glass.crm-violet:root .mobile-quick-menu-toggle[aria-expanded='true'] { background: #6a5abc; color: #fff; }

/* Feed and warehouse have historic overrides outside the generic surface map. */
html.crm-glass.crm-violet:root body .feed-page :is(.feed-side-card, .feed-quick-filters, .feed-content .transform > .rounded-xl) { background: var(--slate-card); box-shadow: 0 5px 22px -16px rgb(29 20 78 / 28%); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl.bg-red-50 { background: var(--violet-danger-fill); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl.bg-emerald-50 { background: var(--violet-success-fill); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl.bg-gray-50 { background: var(--dk-surface-3); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl :is(.bg-gray-50, .bg-gray-100) { background: var(--slate-field); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl :is(.bg-red-50, .bg-red-100, .bg-rose-50) { background: var(--violet-danger-fill); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl :is(.bg-emerald-50, .bg-emerald-100) { background: var(--violet-success-fill); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl .bg-blue-100 { background: var(--violet-info-fill); }
html.crm-glass.crm-violet:root body .feed-content .transform > .rounded-xl :is(.bg-amber-50, .bg-amber-100) { background: var(--violet-warning-fill); }
html.crm-glass.crm-violet:root body .feed-page .feed-review-badge { background: var(--violet-warning-fill); border-color: var(--slate-edge); color: var(--slate-warning); }
html.crm-glass.crm-violet:root body .feed-page-header input[type='search'] { background: var(--slate-field); color: var(--slate-ink); }
html.crm-glass.crm-violet:root body .feed-page-header input[type='search']::placeholder { color: var(--slate-muted); }
html.crm-glass.crm-violet:root body .feed-page .feed-quick-filters > button,
html.crm-glass.crm-violet:root body .feed-page .feed-side-card button:is(.bg-white, .bg-gray-100) { background: var(--slate-field); }
html.crm-glass.crm-violet:root body .feed-page .feed-quick-filters > button[aria-pressed='true'] { background: var(--dk-selected); color: var(--slate-link); }
html.crm-glass.crm-violet:root body .feed-page .feed-quick-filters > button span { background: var(--dk-surface-4); }
html.crm-glass.crm-violet:root body .feed-page .feed-side-card :is(input, select),
html.crm-glass.crm-violet:root:has(.feed-page) [role='dialog'] :is(input, select) { color-scheme: var(--violet-scheme); }
html.crm-glass.crm-violet:root body .warehouse-list .group.bg-white { background: var(--slate-card); border-radius: 12px; }
html.crm-glass.crm-violet:root .warehouse-list .cursor-pointer:has(> div > h3) { background: var(--slate-card); padding: 8px 10px; border-radius: 12px; }
html.crm-glass.crm-violet:root .warehouse-list .cursor-pointer:has(> div > h3) .bg-emerald-100 { background: var(--violet-info-fill) !important; color: var(--slate-link); }
html.crm-glass.crm-violet:root body .warehouse-list .group.bg-white:hover { background: var(--dk-hover); border-color: var(--dk-border-x); }
html.crm-glass.crm-violet:root body .warehouse-list :is(.text-purple-500, .text-purple-600) { color: var(--violet-purple-ink); }
html.crm-glass.crm-violet:root body .warehouse-list :is(.bg-emerald-100, .bg-purple-100) { background: var(--violet-info-fill); }
html.crm-glass.crm-violet:root body .warehouse-list .group button:hover { background: var(--dk-hover-2); }
html.crm-glass.crm-violet:root body .h-dvh:has(.warehouse-header) > .sticky button:is([style*='34, 197, 94'], .bg-emerald-500) { background: var(--violet-action) !important; color: #fff !important; }
html.crm-glass.crm-violet:root body .h-dvh:has(.warehouse-header) > .sticky button:is([style*='34, 197, 94'], .bg-emerald-500):hover { background: var(--violet-action-hover) !important; }
html.crm-glass.crm-violet:root .transactions-category-grid :is(.text-gray-700, .text-gray-600, .text-gray-400) { color: #f2efff; }
html.crm-glass.crm-violet:root .transactions-category-grid .text-center { text-shadow: 0 1px 3px rgb(23 15 66 / 35%); }
html.crm-glass.crm-violet:root .transactions-category-grid .text-emerald-500 { color: #a0f0d3 !important; }
html.crm-glass.crm-violet:root .transactions-category-grid .text-red-500 { color: #ffc1d1 !important; }

/* Data tables and portalled dialogs are opaque enough to read long records. */
html.crm-glass.crm-violet:root :is([role='menu'], [role='listbox'], [role='dialog']) { color: var(--slate-ink); }
html.crm-glass.crm-violet:root table { color: var(--slate-ink); }
html.crm-glass.crm-violet:root thead { background: var(--dk-surface-2); }
html.crm-glass.crm-violet:root .crm-assistant-panel { box-shadow: 0 22px 75px -28px rgb(25 18 72 / 40%); }

/* Paper previews are exports, not workspace panels. */
html.crm-glass.crm-violet:root .border-gray-300.rounded-lg.overflow-hidden > .prose.max-w-none { color-scheme: light; background: #fff; color: #111827; padding: 24px; }
html.crm-glass.crm-violet:root .border-gray-300.rounded-lg.overflow-hidden > .prose.max-w-none table { color: #111827; }
html.crm-glass.crm-violet:root .border-gray-300.rounded-lg.overflow-hidden > .prose.max-w-none thead { background: #f8fafc; }
html.crm-glass.crm-violet:root :is(.kp-paper, .hr-paper, #waybill-content, #qrcode-content) { color-scheme: light; background: #fff !important; color: #111827 !important; }
html.crm-glass.crm-violet:root :is(.kp-paper, .hr-paper, #waybill-content, #qrcode-content) :is(table, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-black) { color: #1f2937; }
html.crm-glass.crm-violet:root :is(.kp-paper, .hr-paper, #waybill-content, #qrcode-content) :is(thead, .bg-gray-50, .bg-gray-100) { background: #f8fafc; }
html.crm-glass.crm-violet:root :is(.kp-paper, .hr-paper, #waybill-content, #qrcode-content) .bg-white { background: #fff; }
@media (prefers-reduced-transparency: reduce) {
  html.crm-glass.crm-violet:root .desktop-sidebar-rail .desktop-sidebar-panel { background: var(--violet-nav-solid); backdrop-filter: none; }
  html.crm-glass.crm-violet:root .crm-workspace { background: var(--feed-scene-base); }
}
@media (forced-colors: active) {
  html.crm-glass.crm-violet:root { --slate-ink: CanvasText; --slate-muted: CanvasText; --slate-card: Canvas; --slate-card-solid: Canvas; --slate-edge: CanvasText; --dk-surface: Canvas; --dk-surface-solid: Canvas; --dk-nav: Canvas; }
  html.crm-glass.crm-violet:root :is(body, .crm-workspace, .desktop-sidebar-rail .desktop-sidebar-panel, .transactions-page.container) { background: Canvas !important; color: CanvasText; }
  html.crm-glass.crm-violet:root .desktop-sidebar-panel :is(.sidebar-nav-icon, .sidebar-nav-label, .sidebar-pin-button, .sidebar-brand > span) { color: ButtonText; }
}
@media print {
  html.crm-glass.crm-violet:root :is(body, .crm-workspace, .transactions-page.container) { background: #fff !important; color: #111827; }
}

/* Violet appearance for bespoke CRM components. The shared glass layer supplies
   token-based surfaces; only its fixed slate/green colours need replacing here.
   Keep layouts, business-status colours, media and printable paper unchanged. */
html.crm-violet:root {
  --violet-chat-wallpaper: #f1eef8;
  --violet-chat-outgoing: #dff0ff;
  --violet-custom-shadow: 0 6px 22px rgb(43 27 87 / 8%);
  --violet-custom-ring: color-mix(in srgb, var(--slate-link) 20%, transparent);
}
html.crm-violet.dark:root {
  --violet-chat-wallpaper: color-mix(in srgb, var(--slate-card-solid) 88%, #130c2d);
  --violet-chat-outgoing: color-mix(in srgb, var(--slate-link) 19%, var(--slate-card-solid));
  --violet-custom-shadow: 0 6px 22px rgb(8 4 23 / 22%);
}

/* Native widgets must follow the independent light/dark choice. */
html.crm-glass.crm-violet:root :is(.profile-card input:not([type='checkbox']), .org-editor, .chat-reminders, .reminder-sheet, .booking-dialog),
html.crm-glass.crm-violet:root :is(.wv-phone, .wv-service) :is(input:not([type='checkbox']), textarea, select) {
  color-scheme: var(--violet-scheme);
}

/* Profile, team and readable content panels. Exported documents are separate. */
/* The CRM shell already reserves rail width; profile must not add it twice. */
html.crm-glass.crm-violet:root .profile-page > main { padding-left: 0; }
html.crm-glass.crm-violet:root .profile-page > header { left: 0; }
@media (min-width: 1280px) {
  html.crm-glass.crm-violet:root .profile-page > header { left: 64px; }
  html.crm-glass.crm-violet:root:has(.desktop-sidebar-rail[data-pinned='true']) .profile-page > header { left: 272px; }
}
html.crm-glass.crm-violet:root .profile-card .appearance-option.is-selected {
  border-color: var(--slate-link);
  box-shadow: 0 0 0 1px var(--slate-link);
}
html.crm-glass.crm-violet:root .appearance-option:has(input:focus-visible) { outline-color: var(--slate-link); }
html.crm-glass.crm-violet:root :is(.profile-card, .team-person-panel, .instruction-paper, .wv-service .wv-card) {
  box-shadow: var(--violet-custom-shadow);
}
html.crm-glass.crm-violet:root .profile-avatar {
  background: var(--violet-action);
  color: var(--violet-action-ink);
}
html.crm-glass.crm-violet:root .profile-card input:not([type='checkbox']):focus {
  border-color: var(--slate-link);
  box-shadow: 0 0 0 3px var(--violet-custom-ring);
}
html.crm-glass.crm-violet:root :is(.instructions-directory-title, .instructions-welcome > svg, .instruction-kicker) {
  color: var(--slate-link);
}
html.crm-glass.crm-violet:root :is(.team-emblem, .team-avatar, .team-person-tabs button.active, .instruction-person.active, .instruction-avatar, .instruction-contents, .instruction-section h2 span) {
  background: var(--violet-info-fill);
  color: var(--slate-link);
}
html.crm-glass.crm-violet:root :is(.instruction-person:hover, .instruction-person.active) em { color: var(--slate-muted); }
html.crm-glass.crm-violet:root :is(.team-warning, .instruction-status:not(.approved), .booking-notice) {
  background: var(--violet-warning-fill);
  color: var(--slate-warning);
}
html.crm-glass.crm-violet:root :is(.instructions-error, .booking-error, .wv-service-error) {
  background: var(--violet-danger-fill);
  color: var(--slate-negative);
}

/* The structure canvas is a quiet lavender workspace behind opaque nodes. */
html.crm-glass.crm-violet:root .org-canvas {
  background-color: var(--violet-chat-wallpaper);
  background-image: radial-gradient(color-mix(in srgb, var(--slate-muted) 28%, transparent) .7px, transparent .7px);
}
html.crm-glass.crm-violet:root :is(.org-node, .org-studio-header, .org-studio .org-toolbar, .org-studio .org-breadcrumb, .org-studio .org-focus-bar, .org-studio .org-detail, .org-studio .org-search-results, .org-save-dock, .org-zoom) {
  box-shadow: var(--violet-custom-shadow);
}
html.crm-glass.crm-violet:root .org-node:hover {
  box-shadow: 0 8px 26px color-mix(in srgb, var(--slate-ink) 14%, transparent);
}
html.crm-glass.crm-violet:root :is(.org-node-symbol, .org-avatar) {
  background: color-mix(in srgb, var(--org-accent) 13%, var(--slate-card-solid));
  color: color-mix(in srgb, var(--org-accent) 55%, var(--slate-ink));
}
html.crm-glass.crm-violet:root :is(.org-text-button, .org-breadcrumb button, .org-focus-bar button) { color: var(--slate-link); }
html.crm-glass.crm-violet:root :is(.org-view-tabs button.active, .org-expand-all, .org-expand-all.is-expanded, .org-list-row.selected, .org-search-results button) {
  background: var(--violet-info-fill);
  color: var(--slate-link);
  border-color: var(--crm-glass-active-edge);
}
html.crm-glass.crm-violet:root :is(.org-page, .org-editor) :is(.bg-white, .bg-slate-50, [class*='bg-slate-50/']) {
  background-color: var(--slate-field);
}

/* Custom primary actions use the same blue as the rest of the new appearance. */
html.crm-glass.crm-violet:root :is(.profile-card button[type='submit'], .profile-company button, .org-button-primary, .reminder-actions .reminder-primary, .booking-actions button:first-child, .wv-phone .wv-primary) {
  background: var(--violet-action);
  border-color: var(--violet-action);
  color: var(--violet-action-ink);
}
html.crm-glass.crm-violet:root :is(.profile-card button[type='submit'], .profile-company button, .org-button-primary, .reminder-actions .reminder-primary, .booking-actions button:first-child, .wv-phone .wv-primary):not(:disabled):hover {
  background: var(--violet-action-hover);
  border-color: var(--violet-action-hover);
  color: var(--violet-action-ink);
}
html.crm-glass.crm-violet:root :is(.profile-card, .profile-page header, .org-page, .org-editor, .knowledge-audit, .chat-reminders, .reminder-sheet, .booking-dialog, .wv-phone) :is(button, input, textarea, select):focus-visible,
html.crm-glass.crm-violet:root :is(.reminder-inbox, .chat-ai-toolbar__button, .reply-suggestions__toggle, .wa-chat-row):focus-visible {
  outline-color: var(--slate-link);
}
html.crm-glass.crm-violet:root :is(.booking-dialog, .wv-service) input[type='checkbox'] { accent-color: var(--violet-action); }

/* Training's inline thumbnail badges and dialog backdrop complete its palette. */
html.crm-glass.crm-violet:root .training-page article button > span:first-child { background: var(--slate-field) !important; }
html.crm-glass.crm-violet:root .training-page article button > span:first-child > span,
html.crm-glass.crm-violet:root .crm-workspace a[aria-label^='Смотреть видеоурок:'] > span:first-child > span {
  background: rgb(43 26 76 / 90%) !important;
  color: white !important;
}
html.crm-glass.crm-violet:root dialog[data-training-player]::backdrop,
html.crm-glass.crm-violet:root .booking-dialog::backdrop { background: rgb(27 16 53 / 58%); }

/* White chat list / header, pale lavender conversation and blue outgoing notes. */
html.crm-glass.crm-violet:root :is(.whatsapp-header, .chat-header),
html.crm-glass.crm-violet:root .chat-page .chat-header,
html.crm-glass.crm-violet:root .crm-route-content aside:has(.chat-filters-toggle) {
  background: var(--slate-card-solid) !important;
  color: var(--slate-ink);
  border-color: var(--slate-edge);
}
html.crm-glass.crm-violet:root [class~='bg-[#e5ddd5]'],
html.crm-glass.crm-violet:root .chat-messages.chat-wallpaper,
html.crm-glass.crm-violet:root .chat-page .chat-messages.chat-wallpaper,
html.crm-glass.crm-violet:root .chat-input:not(.chat-composer):has(.chat-composer) {
  background: var(--violet-chat-wallpaper) !important;
}
html.crm-glass.crm-violet:root .wa-chat-row-wrap .wa-chat-selected,
html.crm-glass.crm-violet:root .wa-chat-row-wrap .wa-chat-selected:hover {
  background: var(--violet-info-fill);
  box-shadow: inset 0 0 0 1px var(--crm-glass-active-edge);
}
html.crm-glass.crm-violet:root .wa-chat-row .wa-chat-row-status > .wa-chat-count {
  background: var(--violet-action);
  color: var(--violet-action-ink);
}
html.crm-glass.crm-violet:root .wa-chat-row.wa-chat-unread .wa-chat-time { color: var(--slate-link); }
html.crm-glass.crm-violet:root .wa-chat-row > button:focus-visible { outline-color: var(--slate-link); }
html.crm-glass.crm-violet:root .wa-message-row .wa-message-bubble {
  --bubble-color: var(--slate-card-solid);
  color: var(--slate-ink);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--slate-ink) 10%, transparent);
}
html.crm-glass.crm-violet:root .wa-message-row .wa-outgoing { --bubble-color: var(--violet-chat-outgoing); }
html.crm-glass.crm-violet:root .wa-message-bubble .message-status { color: color-mix(in srgb, var(--slate-muted) 85%, var(--slate-ink)); }
html.crm-glass.crm-violet:root .wa-message-bubble .wa-message-text a { color: var(--slate-link); }
html.crm-glass.crm-violet:root .chat-messages [role='separator'] > span { box-shadow: var(--violet-custom-shadow); }
html.crm-glass.crm-violet:root .chat-messages + [class~='bg-[#f7f3ed]'] {
  background: var(--violet-chat-wallpaper) !important;
}
html.crm-glass.crm-violet:root .chat-page .chat-messages + [class~='bg-[#f7f3ed]'] > button {
  background: var(--slate-card-solid) !important;
  color: var(--slate-link) !important;
}

/* One outer focus contour for both desktop and mobile. The clipped textarea
   never gets a second ring, so typing cannot leave a cut-off green rectangle. */
html.crm-glass.crm-violet:root .chat-input.chat-composer,
html.crm-glass.crm-violet:root .chat-page .chat-input.chat-composer {
  background: var(--slate-card-solid) !important;
  border-color: var(--slate-edge);
  box-shadow: var(--violet-custom-shadow);
}
html.crm-glass.crm-violet:root .chat-composer .chat-textarea,
html.crm-glass.crm-violet:root .chat-composer .chat-textarea:focus {
  background: transparent;
  color: var(--slate-ink);
}
html.crm-glass.crm-violet:root .chat-composer .chat-textarea:focus {
  outline: none;
  box-shadow: none;
}
html.crm-glass.crm-violet:root .chat-input.chat-composer:focus-within,
html.crm-glass.crm-violet:root .chat-page .chat-input.chat-composer:focus-within {
  border-color: var(--slate-link);
  box-shadow: 0 0 0 2px var(--violet-custom-ring), var(--violet-custom-shadow);
  --tw-ring-shadow: 0 0 #0000;
}
html.crm-glass.crm-violet:root .chat-composer .right-icons > button:has(.lucide-send):not(:disabled) {
  background: var(--violet-action);
  color: var(--violet-action-ink);
}
html.crm-glass.crm-violet:root .chat-composer .right-icons > button:has(.lucide-send):not(:disabled):hover { background: var(--violet-action-hover); }
html.crm-glass.crm-violet:root .chat-input:not(.chat-composer):has(.chat-composer) .chat-ai-toolbar__button:not(.chat-ai-toolbar__toggle) {
  background: var(--slate-card-solid);
  color: var(--slate-muted);
}
html.crm-glass.crm-violet:root .chat-input:not(.chat-composer):has(.chat-composer) .chat-ai-toolbar__button:not(.chat-ai-toolbar__toggle):not(:disabled):hover {
  background: var(--violet-info-fill);
  color: var(--slate-link);
}
html.crm-glass.crm-violet:root .chat-composer .ai-tools > button:not(:disabled):hover { color: var(--slate-link); }
html.crm-glass.crm-violet:root [aria-label='Серверный AI-менеджер'] {
  background: var(--violet-info-fill);
  color: var(--slate-ink);
  border-color: var(--slate-edge);
}
html.crm-glass.crm-violet:root [role='group'][aria-label='Общий режим AI'] {
  background: var(--slate-card-solid);
  color: var(--slate-ink);
  border-color: var(--slate-edge);
}

/* Reminder / appointment widgets retain warning and destructive semantics. */
html.crm-glass.crm-violet:root .reminder-sheet { box-shadow: var(--violet-custom-shadow); }
html.crm-glass.crm-violet:root :is(.reminder-inbox-due, .reminder-due) { border-color: var(--slate-warning); }
html.crm-glass.crm-violet:root .reminder-due { background: var(--violet-warning-fill); }
html.crm-glass.crm-violet:root .reminder-inbox strong {
  background: var(--violet-warning-fill);
  color: var(--slate-warning);
}

/* Voice setup actions are blue; accepting/hanging up remain semantic controls. */
html.crm-glass.crm-violet:root .wv-logo {
  background: var(--violet-action);
  color: var(--violet-action-ink);
}
html.crm-glass.crm-violet:root .wv-meter span { background: var(--slate-positive); }
html.crm-glass.crm-violet:root .wv-phone .wv-call-accept,
html.crm-glass.crm-violet:root .wv-phone .wv-call-accept:not(:disabled):hover {
  background: var(--violet-success-fill);
  color: var(--slate-positive);
  border-color: color-mix(in srgb, var(--slate-positive) 35%, var(--slate-edge));
}
html.crm-glass.crm-violet:root .wv-phone :is(.wv-call-hangup, .wv-call-decline),
html.crm-glass.crm-violet:root .wv-phone :is(.wv-call-hangup, .wv-call-decline):not(:disabled):hover {
  background: var(--violet-danger-fill);
  color: var(--slate-negative);
  border-color: color-mix(in srgb, var(--slate-negative) 35%, var(--slate-edge));
}
html.crm-glass.crm-violet:root .wv-phone .wv-call-buttons button:disabled {
  background: var(--slate-field);
  color: var(--slate-muted);
  border-color: var(--slate-edge);
}
html.crm-glass.crm-violet:root .wv-call-state--ringing .wv-call-avatar {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--slate-positive) 10%, transparent);
}

@media (forced-colors: active) {
  html.crm-glass.crm-violet:root :is(.org-canvas, .whatsapp-header, .chat-header, .chat-messages.chat-wallpaper, .chat-input.chat-composer),
  html.crm-glass.crm-violet:root .chat-page :is(.chat-header, .chat-messages.chat-wallpaper, .chat-input.chat-composer) {
    background: Canvas !important;
    color: CanvasText;
  }
  html.crm-glass.crm-violet:root .wa-message-row .wa-message-bubble { --bubble-color: Canvas; color: CanvasText; }
  html.crm-glass.crm-violet:root .chat-input.chat-composer:focus-within,
  html.crm-glass.crm-violet:root .chat-page .chat-input.chat-composer:focus-within { outline: 2px solid Highlight; border-color: Highlight; }
}