@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap");

/* ===========================================================================
   CAVELLO BRAIN - PAPER & FOREST theme layer over Dify 1.17.1
   Injected before </head> by nginx sub_filter. See brand/README-theme.md.

   Why paper: cavello.club is a white site (39.4M px2 of paper against 8.4M px2
   of forest, brand/CAVELLO-BRAND.md). The dark build painted every surface the
   same forest green, so nothing had hierarchy and it read as flat. Here the
   page is warm paper, cards are near-white with a hairline, text is a
   green-tinted ink, and FOREST is spent only where it means "act here" or
   "you are here": the primary button, the send button, the selected nav item,
   toggles and focus. Gold is the logo and one hairline under a heading; gold
   TEXT is the deep gold (links), the only gold that passes on paper.

   Same mechanics as the dark build: nginx writes data-theme="light" into the
   SSR <html>, an inline head script pins localStorage.theme="light", and
   cavello.js re-forces it. Tokens are declared on :root AND both data-theme
   values, so the page is Cavello paper whatever the attribute says.

   Generated by brand/make_paper.py from the dark build (cavello.css.v-dark).
   Contrast (WCAG), measured: ink 14.9:1 on canvas / 16.3 on cards; secondary
   7.2; tertiary 5.8; placeholder 5.1; forest 10.8; link gold 5.5; paper text
   on forest 11.1. Every text value clears 4.5:1 on every surface it lands on.
   =========================================================================== */

/* -- 1. Cavello tokens ---------------------------------------------------- */
:root {
  --cav-canvas: #f3f3ee;             /* warm paper: the page */
  --cav-surface: #fdfdfb;            /* cards, answers, panels (never pure white) */
  --cav-surface-hover: #ecede7;      /* hover / pressed on a card */
  --cav-sunk: #eeefe9;               /* code blocks */
  --cav-forest: #133e2d;             /* THE action colour: primary, selected, focus */
  --cav-forest-hi: #1b4d39;          /* forest, hover */
  --cav-on-forest: #f6f6f2;          /* text on forest, 11.1:1 */
  --cav-forest-wash: rgba(19, 62, 45, 0.07);   /* your own messages, selected rows */
  --cav-gold: #c9a96e;               /* logo + decorative hairlines only (2.1:1: never text) */
  --cav-gold-text: #7a5d25;          /* gold TEXT on paper: links. 5.5:1 */

  --cav-text: #16211b;               /* ink. 14.9:1 */
  --cav-text-2: #48534d;             /* 7.2:1 */
  --cav-text-3: #566159;             /* 5.8:1 - Dify puts real copy in quaternary */
  --cav-faint: rgba(22, 33, 27, 0.28);   /* DECORATION ONLY: empty-state glyphs, handles */
  --cav-placeholder: #5f6963;        /* 5.1:1 */
  --cav-hairline: rgba(22, 33, 27, 0.12);
  --cav-hairline-soft: rgba(22, 33, 27, 0.08);
  --cav-hairline-strong: rgba(22, 33, 27, 0.2);
  --cav-field-fill: rgba(22, 33, 27, 0.045);
  --cav-field-fill-hi: rgba(22, 33, 27, 0.075);

  /* semantic, resolved for paper. All >= 5.0:1 on every surface. */
  --cav-rose: #b42318;
  --cav-amber: #8a5a00;
  --cav-mint: #1e6b45;

  --cav-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cav-font-ui: "Inter Display", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --cav-bar: 52px;
  --cav-r-pill: 999px;
  --cav-r-card: 40px;
  --cav-r-field: 10px;
}

/* -- 2. Global shape + type ------------------------------------------------ */

/* Plenty of leaves carry no text-* class and just inherit `color`. Pin the
   inherited colour to the context token on every surface Dify paints. */
html,
body,
[class*="bg-components-panel-bg"],
[class*="bg-background-default"],
[class*="bg-background-sidenav-bg"],
[class*="bg-background-body"],
[class*="bg-components-card-bg"],
[class*="bg-chatbot-bg"],
[class*="bg-chat-bubble-bg"] {
  color: var(--color-text-primary);
}

/* the canvas itself, so the very first painted frame is paper, never a flash */
html,
body {
  background-color: var(--cav-canvas);
  color-scheme: light;
}

/* Cavello has literally zero box-shadows. On paper, depth is the near-white card on the
   warm canvas plus a hairline - never a glow, never a drop shadow. */
*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

:root,
html,
html[data-theme="light"],
html[data-theme="dark"] {
  --font-sans: var(--cav-font-ui);

  /* Radii: only the Cavello set. Fields/small chrome 10px, big panels 40px,
     buttons 999px (section 5), avatars 50% (Dify already uses rounded-full). */
  --radius-xs: var(--cav-r-field);
  --radius-sm: var(--cav-r-field);
  --radius-md: var(--cav-r-field);
  --radius-lg: var(--cav-r-field);
  --radius-xl: var(--cav-r-field);
  --radius-2xl: var(--cav-r-card);
  --radius-3xl: var(--cav-r-card);
}

/* -- 3. The single PAPER context ------------------------------------------- */
/* Declared three times over so the page is Cavello paper whatever data-theme
   says - see the header note. Everything below is one selector list. */
:root,
html,
html[data-theme="light"],
html[data-theme="dark"],
/* and on every surface container too, so a token that Dify overrides locally
   with a Tailwind arbitrary value still resolves to a Cavello value. */
[class*="bg-components-panel-bg"],
[class*="bg-background-default"],
[class*="bg-background-sidenav-bg"],
[class*="bg-chatbot-bg"],
#cavello-bar {
  /* ---- text ---------------------------------------------------------- */
  --color-text-primary: var(--cav-text);
  --color-text-primary-on-surface: var(--cav-text);
  --color-text-secondary: var(--cav-text-2);
  --color-text-secondary-on-surface: var(--cav-text-2);
  --color-text-tertiary: var(--cav-text-3);
  --color-text-quaternary: var(--cav-text-3);   /* 5.40:1 - Dify puts real copy here */
  --color-text-empty-state-icon: rgba(22, 33, 27, 0.198);
  --color-text-placeholder: var(--cav-placeholder);
  --color-text-disabled: rgba(22, 33, 27, 0.45);
  --color-text-accent: var(--cav-gold-text);
  --color-text-accent-secondary: var(--cav-gold-text);
  --color-text-accent-light-mode-only: var(--cav-gold-text);
  --color-text-logo-text: var(--cav-forest);
  --color-text-inverted: var(--cav-on-forest);
  --color-text-inverted-dimmed: rgba(243, 243, 238, 0.92);
  --color-text-text-selected: rgba(201, 169, 110, 0.35);
  --color-text-destructive: var(--cav-rose);
  --color-text-destructive-secondary: var(--cav-rose);
  --color-text-warning: var(--cav-amber);
  --color-text-warning-secondary: var(--cav-amber);
  --color-text-success: var(--cav-mint);
  --color-text-success-secondary: var(--cav-mint);

  /* ---- floors -------------------------------------------------------- */
  --color-background-body: var(--cav-canvas);
  --color-background-body-transparent: rgba(243, 243, 238, 0);
  --color-background-default: var(--cav-surface);
  --color-background-default-hover: var(--cav-surface-hover);
  --color-background-default-hover-alpha-0: rgba(243, 243, 238, 0);
  --color-background-default-subtle: var(--cav-surface);
  --color-background-default-dodge: var(--cav-surface-hover);
  --color-background-default-burn: var(--cav-canvas);
  --color-background-default-dimmed: var(--cav-surface);
  --color-background-default-lighter: rgba(22, 33, 27, 0.031);
  --color-background-section: rgba(22, 33, 27, 0.025);
  --color-background-section-burn: var(--cav-sunk);
  --color-background-section-burn-inverted: var(--cav-surface);
  --color-background-soft: rgba(22, 33, 27, 0.025);
  --color-background-neutral-subtle: var(--cav-canvas);
  --color-background-surface-white: var(--cav-surface);
  --color-background-sidenav-bg: var(--cav-canvas);
  --color-background-overlay: rgba(22, 33, 27, 0.344);
  --color-background-overlay-alt: rgba(22, 33, 27, 0.189);
  --color-background-overlay-backdrop: rgba(22, 33, 27, 0.378);
  --color-background-overlay-fullscreen: var(--cav-canvas);
  --color-background-overlay-destructive: rgba(180, 35, 24, 0.154);
  --color-background-interaction-from-bg-1: rgba(22, 33, 27, 0.037);
  --color-background-interaction-from-bg-2: rgba(22, 33, 27, 0.012);

  /* gradients Dify paints behind chat and the debug pane - flatten them all,
     Cavello has none. Your own chat messages get the one tint: a forest wash. */
  --color-background-gradient-bg-fill-chat-bg-1: var(--cav-canvas);
  --color-background-gradient-bg-fill-chat-bg-2: var(--cav-canvas);
  --color-background-gradient-bg-fill-chat-bubble-bg-1: var(--cav-forest-wash);
  --color-background-gradient-bg-fill-chat-bubble-bg-2: var(--cav-forest-wash);
  --color-background-gradient-bg-fill-chat-bubble-bg-3: var(--cav-forest-wash);
  --color-background-gradient-bg-fill-debug-bg-1: rgba(22, 33, 27, 0.037);
  --color-background-gradient-bg-fill-debug-bg-2: rgba(22, 33, 27, 0.012);
  --color-background-gradient-mask-gray: rgba(243, 243, 238, 0.5);
  --color-background-gradient-mask-transparent: rgba(243, 243, 238, 0);
  --color-background-gradient-mask-transparent-dark: rgba(243, 243, 238, 0);
  --color-background-gradient-mask-side-panel-1: rgba(243, 243, 238, 0);
  --color-background-gradient-mask-side-panel-2: var(--cav-canvas);
  --color-background-gradient-mask-input-clear-1: var(--cav-surface);
  --color-background-gradient-mask-input-clear-2: rgba(243, 243, 238, 0);
  --color-chat-input-mask: linear-gradient(180deg, rgba(243, 243, 238, 0) 0%, var(--cav-canvas) 60%);

  /* ---- panels and cards ---------------------------------------------- */
  --color-components-panel-bg: var(--cav-surface);
  --color-components-panel-bg-transparent: rgba(243, 243, 238, 0);
  --color-components-panel-bg-alt: var(--cav-surface);
  --color-components-panel-bg-blur: var(--cav-surface);
  --color-components-panel-bg-blur-burn: var(--cav-canvas);
  --color-components-panel-gradient-1: var(--cav-surface);
  --color-components-panel-gradient-2: var(--cav-surface);
  --color-components-panel-border: var(--cav-hairline);
  --color-components-panel-border-subtle: var(--cav-hairline-soft);
  --color-components-panel-on-panel-item-bg: var(--cav-surface-hover);
  --color-components-panel-on-panel-item-bg-transparent: rgba(243, 243, 238, 0);
  --color-components-panel-on-panel-item-bg-hover: var(--cav-surface-hover);
  --color-components-panel-on-panel-item-bg-hover-transparent: rgba(243, 243, 238, 0);
  --color-components-panel-on-panel-item-bg-alt: var(--cav-surface-hover);
  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgba(180, 35, 24, 0);
  --color-components-card-bg: var(--cav-surface);
  --color-components-card-bg-alt: var(--cav-surface-hover);
  --color-components-card-bg-transparent: rgba(243, 243, 238, 0);
  --color-components-card-bg-alt-transparent: rgba(243, 243, 238, 0);
  --color-components-card-border: var(--cav-hairline);
  --color-components-actionbar-bg: var(--cav-surface);
  --color-components-actionbar-bg-accent: var(--cav-surface-hover);
  --color-components-actionbar-border: var(--cav-hairline);
  --color-components-actionbar-border-accent: var(--cav-forest);
  --color-components-tooltip-bg: var(--cav-surface);
  --color-components-avatar-default-avatar-bg: var(--cav-forest);
  --color-components-chart-bg: var(--cav-sunk);
  --color-chatbot-bg: var(--cav-canvas);
  --color-chat-bubble-bg: var(--cav-surface);
  --color-saas-background: var(--cav-canvas);
  --color-saas-background-inverted: var(--cav-forest);
  --color-saas-background-inverted-hover: var(--cav-forest-hi);
  --color-saas-pricing-grid-bg: var(--cav-hairline);

  /* ---- dividers and effects ------------------------------------------ */
  --color-divider-subtle: var(--cav-hairline-soft);
  --color-divider-regular: var(--cav-hairline);
  --color-divider-deep: var(--cav-hairline-strong);
  --color-divider-burn: var(--cav-sunk);
  --color-divider-intense: rgba(22, 33, 27, 0.186);
  --color-divider-accent: rgba(19, 62, 45, 0.275);
  --color-divider-solid: var(--cav-hairline-strong);
  --color-divider-solid-alt: rgba(22, 33, 27, 0.186);
  --color-effects-highlight: rgba(22, 33, 27, 0.037);
  --color-effects-highlight-subtle: rgba(22, 33, 27, 0.019);
  --color-effects-highlight-lightmode-off: rgba(22, 33, 27, 0.037);
  --color-effects-icon-border: var(--cav-hairline);

  /* ---- shadow tokens: Cavello has none. Zero every stop. -------------- */
  --color-shadow-shadow-1: rgba(0, 0, 0, 0);
  --color-shadow-shadow-2: rgba(0, 0, 0, 0);
  --color-shadow-shadow-3: rgba(0, 0, 0, 0);
  --color-shadow-shadow-4: rgba(0, 0, 0, 0);
  --color-shadow-shadow-5: rgba(0, 0, 0, 0);
  --color-shadow-shadow-6: rgba(0, 0, 0, 0);
  --color-shadow-shadow-7: rgba(0, 0, 0, 0);
  --color-shadow-shadow-8: rgba(0, 0, 0, 0);
  --color-shadow-shadow-9: rgba(0, 0, 0, 0);
  --color-shadow-shadow-10: rgba(0, 0, 0, 0);

  /* ---- interaction states -------------------------------------------- */
  --color-state-base-hover-subtle: rgba(22, 33, 27, 0.025);
  --color-state-base-hover: rgba(22, 33, 27, 0.05);
  --color-state-base-hover-alt: rgba(22, 33, 27, 0.087);
  --color-state-base-active: rgba(22, 33, 27, 0.112);
  --color-state-base-handle: rgba(22, 33, 27, 0.198);
  --color-state-base-handle-hover: rgba(22, 33, 27, 0.5);
  --color-state-accent-hover: rgba(19, 62, 45, 0.06);
  --color-state-accent-hover-alt: rgba(19, 62, 45, 0.1);
  --color-state-accent-active: rgba(19, 62, 45, 0.07);
  --color-state-accent-active-alt: rgba(19, 62, 45, 0.1);
  --color-state-accent-solid: var(--cav-forest);
  --color-state-destructive-hover: rgba(180, 35, 24, 0.077);
  --color-state-destructive-hover-transparent: rgba(180, 35, 24, 0);
  --color-state-destructive-hover-alt: rgba(180, 35, 24, 0.132);
  --color-state-destructive-active: rgba(180, 35, 24, 0.154);
  --color-state-destructive-solid: var(--cav-rose);
  --color-state-destructive-border: var(--cav-rose);
  --color-state-warning-hover: rgba(138, 90, 0, 0.07);
  --color-state-warning-hover-transparent: rgba(138, 90, 0, 0);
  --color-state-warning-hover-alt: rgba(138, 90, 0, 0.12);
  --color-state-warning-active: rgba(138, 90, 0, 0.14);
  --color-state-warning-solid: var(--cav-amber);
  --color-state-success-hover: rgba(30, 107, 69, 0.07);
  --color-state-success-hover-alt: rgba(30, 107, 69, 0.12);
  --color-state-success-active: rgba(30, 107, 69, 0.14);
  --color-state-success-solid: var(--cav-mint);

  /* ---- the brand ramp: every blue -> forest -------------------------- */
  --color-primary-25: #f1f5f2;
  --color-primary-50: #e6eee9;
  --color-primary-100: #cfddd4;
  --color-primary-200: #a9c2b3;
  --color-primary-300: #7fa38e;
  --color-primary-500: var(--cav-forest-hi);
  --color-primary-600: var(--cav-forest);
  --color-primary-700: var(--cav-forest);
  --color-brand-color-opacity-300: rgba(19, 62, 45, 0.15);
  --color-brand-color-opacity-400: rgba(19, 62, 45, 0.2);
  --color-brand-color-opacity-500: var(--cav-forest);
  --color-brand-color-opacity-600: var(--cav-forest-hi);
  --color-brand-color-opacity-700: #a9c2b3;
  --color-brand-color-opacity-800: #cfddd4;
  --color-util-colors-blue-brand-blue-brand-50: rgba(19, 62, 45, 0.06);
  --color-util-colors-blue-brand-blue-brand-100: rgba(19, 62, 45, 0.1);
  --color-util-colors-blue-brand-blue-brand-200: rgba(19, 62, 45, 0.16);
  --color-util-colors-blue-brand-blue-brand-300: #7fa38e;
  --color-util-colors-blue-brand-blue-brand-400: var(--cav-forest);
  --color-util-colors-blue-brand-blue-brand-500: var(--cav-forest);
  --color-util-colors-blue-brand-blue-brand-600: var(--cav-forest);
  --color-util-colors-blue-brand-blue-brand-700: var(--cav-forest);
  --color-saas-dify-blue-static: var(--cav-forest);
  --color-saas-dify-blue-static-hover: var(--cav-forest-hi);
  --color-saas-dify-blue-accessible: var(--cav-forest);
  --color-saas-dify-blue-inverted: var(--cav-on-forest);
  --color-saas-dify-blue-inverted-dimmed: rgba(243, 243, 238, 0.88);

  /* ---- every remaining blue control -> forest ------------------------ */
  --color-components-tab-active: var(--cav-forest);
  --color-components-toggle-bg: var(--cav-forest);
  --color-components-toggle-bg-hover: var(--cav-forest-hi);
  --color-components-toggle-bg-unchecked: rgba(22, 33, 27, 0.136);
  --color-components-toggle-bg-unchecked-hover: rgba(22, 33, 27, 0.198);
  --color-components-toggle-knob: var(--cav-surface);
  --color-components-toggle-knob-hover: var(--cav-surface);
  --color-components-checkbox-bg: var(--cav-forest);
  --color-components-checkbox-bg-hover: var(--cav-forest-hi);
  --color-components-checkbox-bg-disabled-checked: rgba(19, 62, 45, 0.16);
  --color-components-checkbox-icon: var(--cav-on-forest);
  --color-components-checkbox-border: rgba(22, 33, 27, 0.45);
  --color-components-checkbox-border-hover: rgba(22, 33, 27, 0.65);
  --color-components-radio-border-checked: var(--cav-forest);
  --color-components-radio-border-checked-hover: var(--cav-forest-hi);
  --color-components-radio-border-checked-disabled: rgba(19, 62, 45, 0.16);
  --color-components-radio-border: rgba(22, 33, 27, 0.45);
  --color-components-radio-border-hover: rgba(22, 33, 27, 0.65);
  --color-components-option-card-option-bg: rgba(22, 33, 27, 0.031);
  --color-components-option-card-option-bg-hover: rgba(22, 33, 27, 0.062);
  --color-components-option-card-option-border: var(--cav-hairline);
  --color-components-option-card-option-border-hover: var(--cav-hairline-strong);
  --color-components-option-card-option-selected-border: var(--cav-forest);
  --color-components-option-card-option-selected-bg: rgba(19, 62, 45, 0.05);
  --color-components-segmented-control-bg-normal: rgba(22, 33, 27, 0.043);
  --color-components-segmented-control-item-active-bg: rgba(22, 33, 27, 0.087);
  --color-components-segmented-control-item-active-border: var(--cav-hairline);
  --color-components-segmented-control-item-active-accent-bg: rgba(19, 62, 45, 0.06);
  --color-components-segmented-control-item-active-accent-border: rgba(19, 62, 45, 0.225);
  --color-components-progress-brand-bg: rgba(19, 62, 45, 0.07);
  --color-components-progress-brand-border: var(--cav-forest);
  --color-components-progress-brand-progress: var(--cav-forest);
  --color-components-progress-bar-progress: rgba(19, 62, 45, 0.225);
  --color-components-progress-bar-progress-highlight: var(--cav-forest);
  --color-components-progress-bar-progress-solid: var(--cav-forest);
  --color-components-progress-bar-bg: rgba(22, 33, 27, 0.062);
  --color-components-progress-bar-border: var(--cav-hairline);
  --color-components-progress-white-progress: var(--cav-forest);
  --color-components-progress-white-border: var(--cav-forest);
  --color-components-progress-gray-progress: rgba(22, 33, 27, 0.45);
  --color-components-progress-gray-border: rgba(22, 33, 27, 0.45);
  --color-components-progress-warning-progress: var(--cav-amber);
  --color-components-progress-warning-border: var(--cav-amber);
  --color-components-progress-error-progress: var(--cav-rose);
  --color-components-progress-error-border: var(--cav-rose);
  --color-components-slider-range: var(--cav-forest);
  --color-components-slider-track: rgba(22, 33, 27, 0.136);
  --color-components-slider-knob: var(--cav-surface);
  --color-components-slider-knob-hover: var(--cav-surface);
  --color-components-slider-knob-border: rgba(243, 243, 238, 0.4);
  --color-components-slider-knob-border-hover: rgba(243, 243, 238, 0.6);
  --color-components-dropzone-bg: rgba(22, 33, 27, 0.025);
  --color-components-dropzone-bg-alt: var(--cav-surface);
  --color-components-dropzone-bg-accent: rgba(19, 62, 45, 0.08);
  --color-components-dropzone-border: var(--cav-hairline);
  --color-components-dropzone-border-alt: var(--cav-hairline-strong);
  --color-components-dropzone-border-accent: var(--cav-forest);
  --color-components-chat-input-audio-bg: rgba(19, 62, 45, 0.09);
  --color-components-chat-input-audio-bg-alt: var(--cav-sunk);
  --color-components-chat-input-audio-wave-default: rgba(22, 33, 27, 0.136);
  --color-components-chat-input-audio-wave-active: var(--cav-forest);
  --color-components-chat-input-bg-mask-1: rgba(243, 243, 238, 0);
  --color-components-chat-input-bg-mask-2: var(--cav-canvas);
  --color-components-chat-input-border: var(--cav-hairline);
  --color-components-chart-line: var(--cav-forest);
  --color-components-chart-current-1: var(--cav-forest);
  --color-components-chart-current-2: rgba(19, 62, 45, 0.175);
  --color-components-chart-area-1: rgba(19, 62, 45, 0.125);
  --color-components-chart-area-2: rgba(19, 62, 45, 0.03);
  /* Dify picks one of eleven "icon-bg" hues by hashing the workspace or app id,
     so any of them can turn up. All eleven resolve to forest, glyph in paper. */
  --color-components-icon-bg-blue-solid: var(--cav-forest);
  --color-components-icon-bg-blue-light-solid: var(--cav-forest);
  --color-components-icon-bg-indigo-solid: var(--cav-forest);
  --color-components-icon-bg-violet-solid: var(--cav-forest);
  --color-components-icon-bg-green-solid: var(--cav-forest);
  --color-components-icon-bg-teal-solid: var(--cav-forest);
  --color-components-icon-bg-orange-solid: var(--cav-forest);
  --color-components-icon-bg-orange-dark-solid: var(--cav-forest);
  --color-components-icon-bg-red-solid: var(--cav-forest);
  --color-components-icon-bg-rose-solid: var(--cav-forest);
  --color-components-icon-bg-pink-solid: var(--cav-forest);
  --color-components-icon-bg-yellow-solid: var(--cav-forest);
  --color-components-icon-bg-midnight-solid: var(--cav-forest);
  --color-components-icon-bg-blue-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-blue-light-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-indigo-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-violet-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-green-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-teal-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-orange-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-orange-dark-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-red-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-rose-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-pink-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-yellow-soft: rgba(19, 62, 45, 0.11);
  --color-components-icon-bg-midnight-soft: rgba(19, 62, 45, 0.11);

  /* the avatar letter: paper on forest, the same pairing as the pills. */
  --color-components-avatar-shape-fill-stop-0: var(--cav-on-forest);
  --color-components-avatar-shape-fill-stop-100: var(--cav-on-forest);
  --color-components-avatar-bg-mask-stop-0: rgba(22, 33, 27, 0.112);
  --color-components-avatar-bg-mask-stop-100: rgba(22, 33, 27, 0.025);
  --color-components-avatar-mask-darkmode-dimmed: rgba(0, 0, 0, 0);
  --color-components-input-border-active-prompt-1: var(--cav-forest);
  --color-components-input-border-active-prompt-2: var(--cav-forest);
  --color-components-kbd-bg-gray: rgba(22, 33, 27, 0.05);
  --color-components-kbd-bg-white: rgba(22, 33, 27, 0.099);
  --color-components-badge-white-to-dark: var(--cav-sunk);
  --color-components-badge-white-to-dark-alpha: rgba(243, 243, 238, 0);
  --color-components-badge-bg-dimm: rgba(22, 33, 27, 0.05);
  --color-components-badge-bg-gray-soft: rgba(22, 33, 27, 0.062);
  --color-components-badge-bg-green-soft: rgba(30, 107, 69, 0.09);
  --color-components-badge-bg-orange-soft: rgba(138, 90, 0, 0.09);
  --color-components-badge-bg-red-soft: rgba(180, 35, 24, 0.099);
  --color-components-badge-bg-blue-light-soft: rgba(19, 62, 45, 0.09);
  --color-components-badge-status-light-border-outer: var(--cav-surface);
  --color-components-badge-status-light-success-bg: var(--cav-mint);
  --color-components-badge-status-light-success-border-inner: var(--cav-mint);
  --color-components-badge-status-light-success-halo: rgba(30, 107, 69, 0.15);
  --color-components-badge-status-light-warning-bg: var(--cav-amber);
  --color-components-badge-status-light-warning-border-inner: var(--cav-amber);
  --color-components-badge-status-light-warning-halo: rgba(138, 90, 0, 0.15);
  --color-components-badge-status-light-error-bg: var(--cav-rose);
  --color-components-badge-status-light-error-border-inner: var(--cav-rose);
  --color-components-badge-status-light-error-halo: rgba(180, 35, 24, 0.165);
  --color-components-badge-status-light-normal-bg: var(--cav-forest);
  --color-components-badge-status-light-normal-border-inner: var(--cav-forest);
  --color-components-badge-status-light-normal-halo: rgba(19, 62, 45, 0.15);
  --color-components-badge-status-light-disabled-bg: rgba(22, 33, 27, 0.198);
  --color-components-badge-status-light-disabled-border-inner: rgba(22, 33, 27, 0.45);
  --color-components-badge-status-light-disabled-halo: rgba(22, 33, 27, 0.062);
  --color-components-badge-status-light-high-light: rgba(22, 33, 27, 0.186);
  --color-components-menu-item-text: var(--cav-text-3);
  --color-components-menu-item-text-hover: var(--cav-text-2);
  --color-components-menu-item-text-active: var(--cav-text);
  --color-components-menu-item-text-active-accent: var(--cav-forest);
  --color-components-menu-item-bg-hover: rgba(22, 33, 27, 0.05);
  --color-components-menu-item-bg-active: var(--cav-forest-wash);

  /* ---- fields --------------------------------------------------------- */
  --color-components-input-bg-normal: var(--cav-field-fill);
  --color-components-input-bg-hover: var(--cav-field-fill-hi);
  --color-components-input-bg-active: var(--cav-field-fill-hi);
  --color-components-input-bg-disabled: rgba(22, 33, 27, 0.031);
  --color-components-input-bg-destructive: rgba(180, 35, 24, 0.055);
  --color-components-input-text-filled: var(--cav-text);
  --color-components-input-text-filled-disabled: rgba(22, 33, 27, 0.45);
  --color-components-input-text-filled-blue: var(--cav-forest);
  --color-components-input-text-placeholder: var(--cav-placeholder);
  --color-components-input-text-disabled: rgba(22, 33, 27, 0.45);
  --color-components-input-border-active: var(--cav-forest);
  --color-components-input-border-hover: var(--cav-hairline-strong);
  --color-components-input-border-destructive: var(--cav-rose);

  /* ---- buttons -------------------------------------------------------- */
  --color-components-button-primary-bg: var(--cav-forest);
  --color-components-button-primary-bg-hover: var(--cav-forest-hi);
  --color-components-button-primary-bg-disabled: rgba(19, 62, 45, 0.14);
  --color-components-button-primary-text: var(--cav-on-forest);
  --color-components-button-primary-text-disabled: rgba(243, 243, 238, 0.55);
  --color-components-button-primary-border: transparent;
  --color-components-button-primary-border-hover: transparent;
  --color-components-button-primary-border-disabled: transparent;
  --color-components-button-button-seam: rgba(0, 0, 0, 0);

  --color-components-button-secondary-bg: var(--cav-field-fill);
  --color-components-button-secondary-bg-hover: rgba(22, 33, 27, 0.099);
  --color-components-button-secondary-bg-disabled: rgba(22, 33, 27, 0.031);
  --color-components-button-secondary-border: var(--cav-hairline);
  --color-components-button-secondary-border-hover: var(--cav-hairline-strong);
  --color-components-button-secondary-text: var(--cav-text);
  --color-components-button-secondary-text-disabled: rgba(22, 33, 27, 0.45);
  --color-components-button-secondary-accent-text: var(--cav-forest);
  --color-components-button-secondary-accent-text-disabled: rgba(22, 33, 27, 0.45);
  --color-components-button-secondary-accent-bg: rgba(19, 62, 45, 0.05);
  --color-components-button-secondary-accent-bg-hover: rgba(19, 62, 45, 0.09);
  --color-components-button-secondary-accent-bg-disabled: rgba(22, 33, 27, 0.031);
  --color-components-button-secondary-accent-border: rgba(19, 62, 45, 0.225);
  --color-components-button-secondary-accent-border-hover: var(--cav-forest);
  --color-components-button-secondary-accent-border-disabled: var(--cav-hairline-soft);

  --color-components-button-tertiary-text: var(--cav-text);
  --color-components-button-tertiary-text-disabled: rgba(22, 33, 27, 0.45);
  --color-components-button-tertiary-bg: var(--cav-field-fill);
  --color-components-button-tertiary-bg-hover: rgba(22, 33, 27, 0.099);
  --color-components-button-tertiary-bg-disabled: rgba(22, 33, 27, 0.031);
  --color-components-button-ghost-text: var(--cav-text-2);
  --color-components-button-ghost-text-disabled: rgba(22, 33, 27, 0.45);
  --color-components-button-ghost-bg-hover: rgba(22, 33, 27, 0.05);

  --color-components-button-destructive-primary-bg: var(--cav-rose);
  --color-components-button-destructive-primary-bg-hover: #9a1f15;
  --color-components-button-destructive-primary-bg-disabled: rgba(180, 35, 24, 0.154);
  --color-components-button-destructive-primary-text: var(--cav-on-forest);
  --color-components-button-destructive-primary-text-disabled: rgba(246, 246, 242, 0.7);
  --color-components-button-destructive-primary-border: transparent;
  --color-components-button-destructive-primary-border-hover: transparent;
  --color-components-button-destructive-primary-border-disabled: transparent;
  --color-components-button-destructive-secondary-text: var(--cav-rose);
  --color-components-button-destructive-secondary-bg: rgba(180, 35, 24, 0.066);
  --color-components-button-destructive-secondary-bg-hover: rgba(180, 35, 24, 0.11);
  --color-components-button-destructive-secondary-border: rgba(180, 35, 24, 0.22);
  --color-components-button-destructive-secondary-border-hover: var(--cav-rose);
  --color-components-button-destructive-tertiary-text: var(--cav-rose);
  --color-components-button-destructive-tertiary-bg: rgba(180, 35, 24, 0.066);
  --color-components-button-destructive-tertiary-bg-hover: rgba(180, 35, 24, 0.11);
  --color-components-button-destructive-ghost-text: var(--cav-rose);
  --color-components-button-destructive-ghost-bg-hover: rgba(180, 35, 24, 0.066);
  --color-components-button-indigo-bg: var(--cav-forest);
  --color-components-button-indigo-bg-hover: var(--cav-forest-hi);
  --color-components-button-debug-bg: var(--cav-forest);
  --color-components-button-debug-bg-hover: var(--cav-forest-hi);
  --color-components-button-debug-text: var(--cav-on-forest);
  --color-components-button-debug-border: transparent;
  --color-components-button-debug-border-hover: transparent;

  /* ---- the console left nav: paper; the selected item is a forest pill -- */
  --color-components-main-nav-text: var(--cav-text-2);
  --color-components-main-nav-text-active: var(--cav-text);
  --color-components-main-nav-nav-button-text: var(--cav-text-2);
  --color-components-main-nav-nav-button-text-active: var(--cav-on-forest);
  --color-components-main-nav-nav-button-bg: rgba(22, 33, 27, 0);
  --color-components-main-nav-nav-button-bg-hover: rgba(22, 33, 27, 0.05);
  --color-components-main-nav-nav-button-bg-active: var(--cav-forest);
  --color-components-main-nav-nav-button-border: var(--cav-hairline);
  --color-components-main-nav-nav-user-border: var(--cav-hairline);
  /* the "liquid glass" nav surface: a 9-stop blue gradient. Flatten it. */
  --color-components-main-nav-glass-inner-glow: rgba(19, 62, 45, 0.03);
  --color-components-main-nav-glass-shadow-reflection: rgba(19, 62, 45, 0.02);
  --color-components-main-nav-glass-shadow-reflection-glow: rgba(22, 33, 27, 0.012);
  --color-components-main-nav-glass-text-glow: rgba(19, 62, 45, 0);
  --color-components-main-nav-glass-surface-first: rgba(19, 62, 45, 0.09);
  --color-components-main-nav-glass-surface-middle-1: rgba(19, 62, 45, 0.1);
  --color-components-main-nav-glass-surface-middle-2: rgba(19, 62, 45, 0.1);
  --color-components-main-nav-glass-surface-end: rgba(19, 62, 45, 0.09);
  --color-components-main-nav-glass-edge-reflection-first: rgba(19, 62, 45, 0.225);
  --color-components-main-nav-glass-edge-reflection-middle: rgba(19, 62, 45, 0.225);
  --color-components-main-nav-glass-edge-reflection-end: rgba(19, 62, 45, 0.225);
  --color-components-main-nav-glass-edge-highlight-first: rgba(19, 62, 45, 0.15);
  --color-components-main-nav-glass-edge-highlight-middle: rgba(19, 62, 45, 0.15);
  --color-components-main-nav-glass-edge-highlight-end: rgba(19, 62, 45, 0.15);
}

/* -- 4. Surfaces Dify paints without a token ------------------------------ */

/* The chat/result floor. It is the
   single biggest surface in the product and it is the paper canvas. */
.bg-chatbot-bg,
[class*="bg-chatbot-bg"] {
  background-color: var(--cav-canvas) !important;
  background-image: none !important;
  color: var(--cav-text);
}

/* Cards standing on the canvas: the raised surface + a hairline. That pairing
   IS the depth model - see brand/CAVELLO-BRAND.md section 4.2. */
[class*="bg-chatbot-bg"] [class*="bg-components-panel-bg"],
[class*="bg-chatbot-bg"] [class*="bg-components-panel-on-panel-item-bg"],
[class*="bg-components-panel-bg"]:has(.markdown-body),
[class*="bg-chat-bubble-bg"] {
  background-color: var(--cav-surface) !important;
  background-image: none !important;
  border-color: var(--cav-hairline) !important;
  color: var(--cav-text);
}

/* Tailwind's literal white/near-white utilities, wherever Dify emits them.
   These are the exact classes that would flash a white card mid-page. */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-neutral-50,
.bg-zinc-50 {
  background-color: var(--cav-surface) !important;
}

/* a white-to-transparent gradient mask (used above composers and long lists)
   must fade into the paper canvas, not into white */
[class*="from-white"],
[class*="to-white"],
[class*="via-white"] {
  --tw-gradient-from: rgba(243, 243, 238, 0) !important;
  --tw-gradient-to: var(--cav-canvas) !important;
  --tw-gradient-via: var(--cav-canvas) !important;
}

/* backdrop blurs are decoration Cavello does not use. Flatten them. */
[class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dify's native dark theme inverts its own logo component
   ([html[data-theme=dark]_&]:brightness-0 invert). Our lockup is already gold
   on transparent and must never be inverted into a white silhouette. */
img[src*="/branding/logo-"],
img[src*="/logo/logo.svg"],
img[alt="Cavello Brain"] {
  filter: none !important;
}

/* Dify's brand icons are inline SVGs filled with a hard-coded blue
   linearGradient, which no token can reach. Repaint them forest. */
svg[data-icon] path[fill^="url("],
svg[data-icon] rect[fill^="url("],
svg[data-icon] circle[fill^="url("] {
  fill: var(--cav-forest) !important;
}

/* The anonymous chat avatar is an inline SVG with a hard-coded #B2DDFF disc and
   a white silhouette. Forest disc, paper figure: the same pairing as the pills. */
svg.question-default-user-icon rect[fill="#B2DDFF"],
svg[data-icon="User"] rect[fill="#B2DDFF"] {
  fill: var(--cav-forest) !important;
}

svg.question-default-user-icon circle[fill="white"],
svg.question-default-user-icon ellipse[fill="white"],
svg[data-icon="User"] circle[fill="white"],
svg[data-icon="User"] ellipse[fill="white"] {
  fill: var(--cav-on-forest) !important;
  opacity: 0.9 !important;
}

/* Avatars and icon tiles: forest fill, paper glyph (11.1:1), like the primary pill. */
[class*="bg-primary-"][class*="rounded-full"],
[class*="bg-primary-"][class*="rounded-full"] * ,
[class*="icon-bg-"][class*="solid"],
[class*="icon-bg-"][class*="solid"] * {
  color: var(--cav-on-forest) !important;
}

/* The theme switcher. Dify offers light / dark / system; the Cavello tokens are
   identical under all three, so the control is now a no-op. Hide it rather than
   leave a dead affordance. (Removing it in JS would fight React.) */
button[aria-label="Theme"] {
  display: none !important;
}

/* ...and the divider that separated it from the language picker, which would
   otherwise be left hanging at the right edge of the sign-in card. */
/* scoped to the one row that holds the theme button, never to dividers elsewhere */
div:has(> button[aria-label="Theme"]) > [data-testid="divider"],
div:has(button[aria-label="Theme"]) > [data-testid="divider"] {
  display: none !important;
}

/* Chips, badges, fields and segmented controls add a 4-8% ink wash. On paper that
   moves the ladder very little (tertiary stays >= 5.4:1), so they keep the tokens. */

/* Accent text on a forest-tinted fill (selected rows, accent buttons) is forest itself:
   9.4:1 on the wash. The deep-gold link colour is reserved for links on plain paper. */
[class*="bg-state-accent-"],
[class*="bg-components-button-secondary-accent-bg"],
[class*="bg-components-option-card-option-selected-bg"],
[class*="bg-components-menu-item-bg-active"],
[class*="bg-components-segmented-control-item-active-accent"],
[class*="bg-util-colors-blue-brand"] {
  --color-text-accent: var(--cav-forest);
  --color-text-accent-secondary: var(--cav-forest);
  --color-text-accent-light-mode-only: var(--cav-forest);
  --color-components-button-secondary-accent-text: var(--cav-forest);
}

/* -- 5. Buttons ------------------------------------------------------------ */
button,
[role="button"],
.btn {
  border-radius: var(--cav-r-pill) !important;
  font-family: var(--cav-font-ui);
  letter-spacing: 0.01em;
}

/* square/icon buttons stay circles, not lozenges */
button.rounded-full,
button[class*="size-6"],
button[class*="size-8"] {
  border-radius: 50% !important;
}

/* tabs are <button>s: a pill radius would bend their 2px underline into an arc */
button[role="tab"],
[role="tab"],
.border-b-2 {
  border-radius: 0 !important;
}

/* the primary pill: forest fill, paper text, no border, no shadow (11.1:1) */
button[class*="bg-components-button-primary-bg"],
.bg-components-button-primary-bg {
  color: var(--cav-on-forest) !important;
  border-color: transparent !important;
}

button[class*="bg-components-button-primary-bg"] span,
button[class*="bg-components-button-primary-bg"] svg,
button[class*="bg-components-button-primary-bg"] div,
.bg-components-button-primary-bg span,
.bg-components-button-primary-bg svg {
  color: var(--cav-on-forest) !important;
}

/* -- 6. Fields ------------------------------------------------------------- */
input,
textarea,
select,
[class*="bg-components-input-bg"],
[contenteditable="true"] {
  border-radius: var(--cav-r-field) !important;
  font-family: var(--cav-font-ui);
  color: var(--cav-text);
}

/* a <select>'s own dropdown list is painted by the OS from the element's own
   colours, so it needs a real (non-alpha) background or it renders white */
select,
select option,
optgroup {
  background-color: var(--cav-surface);
  color: var(--cav-text);
}

input,
textarea,
[contenteditable="true"] {
  caret-color: var(--cav-forest);
}

/* every placeholder route Dify uses. >= 4.8:1 on every field fill. */
::placeholder,
input::placeholder,
textarea::placeholder,
[contenteditable="true"]:empty::before,
[class*="text-components-input-text-placeholder"],
[class*="text-text-placeholder"] {
  color: var(--cav-placeholder) !important;
  opacity: 1;
}

/* disabled: dim the glyph and soften the hairline, never grey the surface */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  color: rgba(22, 33, 27, 0.38) !important;
  border-color: var(--cav-hairline-soft) !important;
}

/* the app's emoji tile ships an inline pastel background; it becomes the brand's
   field fill and the emoji stays. */
[class*="rounded-"]:has(> em-emoji) {
  background: var(--color-components-input-bg-normal) !important;
  border-color: var(--color-components-panel-border) !important;
}

/* -- 7. The Cavello bar ---------------------------------------------------- */
#cavello-bar {
  position: relative;
  z-index: 60;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  height: var(--cav-bar);
  padding: 0 20px;
  background: var(--cav-surface);
  border-bottom: 1px solid var(--cav-hairline);
  box-sizing: border-box;
  user-select: none;
}

#cavello-bar .cav-lockup {
  display: block;
  width: 126px;
  height: 20px;
  flex: 0 0 auto;
  background-image: url("/branding/logo-lockup-light.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

#cavello-bar .cav-rule {
  width: 1px;
  height: 18px;
  background: var(--cav-hairline-strong);
  flex: 0 0 auto;
}

#cavello-bar .cav-product {
  font-family: var(--cav-font-ui);
  font-weight: 300;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.42px;
  text-transform: uppercase;
  color: var(--cav-gold-text);
  white-space: nowrap;
}

/* make room for the bar without letting 100vh overflow underneath it */
html:has(#cavello-bar),
html:has(#cavello-bar) body {
  height: 100%;
}

html:has(#cavello-bar) body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html:has(#cavello-bar) body > div.isolate {
  flex: 1 1 auto;
  min-height: 0;
}

html:has(#cavello-bar) .h-screen,
html:has(#cavello-bar) .min-h-screen {
  height: calc(100vh - var(--cav-bar)) !important;
}

html:has(#cavello-bar) [class*="100vh-36px"] {
  height: calc(100vh - var(--cav-bar) - 36px) !important;
}

/* Dify's own logo slot is a 48x22 box; the Cavello lockup is 6.3:1. On paper the
   lockup is the light version (gold mark, forest wordmark), set in nginx. */
img[src*="/logo/logo.svg"],
img[src*="/branding/logo-"],
img[alt="Dify"],
img[alt="Cavello Brain"] {
  width: auto !important;
  height: 22px !important;
  max-width: 180px;
  object-fit: contain;
}

/* the console's active nav item is a Dify component class, not a token:
   a blue glass surface with hard-coded white text. A solid forest pill. */
/* exact class only: Tailwind also emits `aria-[current=page]:dify-blue-glass-surface`
   on every nav item, so a [class*=] match would light them all up as active. */
.dify-blue-glass-surface {
  background: var(--cav-forest) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--cav-on-forest) !important;
}

.dify-blue-glass-surface * {
  color: var(--cav-on-forest) !important;
}

/* the active item carries the Tailwind VARIANT class
   `aria-[current=page]:dify-blue-glass-surface`, which no plain class selector
   matches. Target the aria state itself - semantic and upgrade-proof. */
nav [aria-current="page"] {
  background: var(--cav-forest) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--cav-on-forest) !important;
}

nav [aria-current="page"] * {
  color: var(--cav-on-forest) !important;
}

/* -- 8. App header / titles ------------------------------------------------ */
body:has(#cavello-bar) .system-md-semibold.text-text-secondary.grow.truncate,
body:has(#cavello-bar) .grow.truncate.system-md-semibold {
  font-family: var(--cav-font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cav-text) !important;
}

/* Dify's display sizes (login heading, modal titles) -> Cormorant, tight */
h1[class*="title-"],
h2[class*="title-"],
[class*="title-4xl"],
[class*="title-3xl"],
[class*="title-2xl"] {
  font-family: var(--cav-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  font-size: 34px;
  line-height: 1.15;
  color: var(--cav-text);
}

/* uppercase micro-labels: 300, +0.42px, exactly as the brand sets them */
[class*="uppercase"],
.system-2xs-medium-uppercase,
.system-xs-medium-uppercase {
  font-family: var(--cav-font-ui) !important;
  font-weight: 300 !important;
  letter-spacing: 0.42px !important;
}

/* field labels stay Inter, quieter weight */
label .truncate,
label > div > .truncate {
  font-weight: 500;
}

/* -- 9. Result + markdown area --------------------------------------------- */
.markdown-body {
  font-family: var(--cav-font-ui);
  color: var(--cav-text) !important;
  background: transparent !important;
  font-size: 15px;
  line-height: 1.75;
  max-width: 68ch;                 /* Cavello's narrow editorial measure */
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family: var(--cav-font-display) !important;
  font-weight: 500 !important;
  color: var(--cav-text) !important;
  letter-spacing: -0.02em;
  border-bottom: 0 !important;
}

.markdown-body h1 {
  font-size: 34px !important;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em !important;
  padding-bottom: 0.3em !important;
  border-bottom: 1px solid var(--cav-gold) !important;
}

.markdown-body h2 {
  font-size: 26px !important;
  line-height: 1.25;
  margin: 1.5em 0 0.35em !important;
}

.markdown-body h3 {
  font-size: 21px !important;
  margin: 1.3em 0 0.3em !important;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-size: 18px !important;
}

.markdown-body p,
.markdown-body li,
.markdown-body dd,
.markdown-body dt,
.markdown-body td {
  color: var(--cav-text);
}

/* emphasis in prose is weight, not colour */
.markdown-body strong,
.markdown-body b {
  font-weight: 600;
  color: var(--cav-text);
}

.markdown-body em {
  color: var(--cav-text);
}

.markdown-body a {
  color: var(--cav-gold-text) !important;
  text-decoration-color: rgba(122, 93, 37, 0.45);
  text-underline-offset: 3px;
}

.markdown-body hr {
  border: 0 !important;
  height: 1px !important;
  background: var(--cav-hairline) !important;
  margin: 2em 0 !important;
}

.markdown-body blockquote {
  border: 0 !important;
  border-radius: var(--cav-r-field) !important;
  background: var(--cav-forest-wash);
  color: var(--cav-text) !important;
  padding: 0.6em 1.2em !important;
  margin: 1.2em 0 !important;
  font-family: var(--cav-font-display);
  font-size: 19px;
  line-height: 1.55;
}

.markdown-body blockquote p {
  color: var(--cav-text) !important;
}

.markdown-body ul > li::marker,
.markdown-body ol > li::marker {
  color: var(--cav-gold-text);
}

.markdown-body table {
  border-collapse: collapse;
  display: table;
  width: 100%;
  background: transparent !important;
}

.markdown-body table th,
.markdown-body table td {
  border: 1px solid var(--cav-hairline) !important;
  background: transparent !important;
  color: var(--cav-text) !important;
  padding: 8px 12px !important;
}

/* github-markdown-css stripes even rows with a light fill - kill it */
.markdown-body table tr,
.markdown-body table tr:nth-child(2n) {
  background: transparent !important;
  border-top-color: var(--cav-hairline) !important;
}

.markdown-body table th {
  background: rgba(22, 33, 27, 0.037) !important;
  font-family: var(--cav-font-ui);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.42px;
  text-transform: uppercase;
  color: var(--cav-text-2) !important;
}

.markdown-body img {
  background: transparent !important;
}

/* -- 10. Code blocks ------------------------------------------------------- */
.markdown-body code,
.markdown-body kbd,
.markdown-body samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86em;
}

/* inline code: a whisper of ink on paper */
.markdown-body :not(pre) > code {
  background: rgba(22, 33, 27, 0.06) !important;
  color: var(--cav-text) !important;
  border-radius: var(--cav-r-field) !important;
  padding: 0.15em 0.4em !important;
}

/* block code: a sunk paper tone plus a hairline. No new hue, no shadow. */
.markdown-body pre,
pre[class*="language-"],
[class*="bg-components-panel-bg"] pre {
  background: var(--cav-sunk) !important;
  border: 1px solid var(--cav-hairline) !important;
  border-radius: var(--cav-r-field) !important;
  color: var(--cav-text) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.markdown-body pre code,
pre[class*="language-"] code {
  background: transparent !important;
  color: var(--cav-text) !important;
}

/* the copy/language strip Dify puts above a fenced block */
[class*="rounded-t"][class*="border-b"]:has(+ pre) {
  background: rgba(22, 33, 27, 0.037) !important;
  color: var(--cav-text-2) !important;
  border-color: var(--cav-hairline) !important;
}

/* syntax: forest keywords, deep-gold strings, ink, muted comments. No rainbow.
   Every colour clears 5:1 on the code block. */
.markdown-body pre .token.comment,
.markdown-body pre .token.prolog,
.markdown-body pre .token.doctype,
.markdown-body pre .token.cdata,
pre[class*="language-"] .token.comment {
  color: var(--cav-text-3) !important;
  font-style: italic;
}

.markdown-body pre .token.keyword,
.markdown-body pre .token.selector,
.markdown-body pre .token.tag,
.markdown-body pre .token.operator,
.markdown-body pre .token.important,
pre[class*="language-"] .token.keyword {
  color: var(--cav-forest) !important;
}

.markdown-body pre .token.string,
.markdown-body pre .token.attr-value,
.markdown-body pre .token.number,
.markdown-body pre .token.boolean,
pre[class*="language-"] .token.string {
  color: #7a5d25 !important;
}

.markdown-body pre .token.function,
.markdown-body pre .token.class-name,
.markdown-body pre .token.attr-name,
.markdown-body pre .token.property,
.markdown-body pre .token.punctuation {
  color: var(--cav-text) !important;
}

/* -- 11. Loading, empty, error and toast states ---------------------------- */
[class*="animate-spin"] {
  color: var(--cav-forest) !important;
}

/* THE loading indicator. Dify's four-square loader is an inline SVG with
   fill="#1C64F2" baked into each path - no token touches it, and it is on
   screen for the whole of every workflow run. Forest, at Dify's own opacities. */
svg.spin-animation path,
svg[class*="spin-animation"] path,
svg[class*="spin-animation"] rect,
svg[class*="spin-animation"] circle {
  fill: var(--cav-forest) !important;
}

/* the thin indeterminate bar Dify shows above a streaming result */
[class*="indeterminate"],
[class*="Indeterminate"] {
  background-color: rgba(19, 62, 45, 0.225) !important;
  background-image: none !important;
}

svg[class*="animate-spin"] circle,
svg[class*="animate-spin"] path {
  stroke: var(--cav-forest) !important;
}

/* skeleton shimmer -> a flat ink wash, no gradient */
[class*="skeleton"],
[class*="Skeleton"],
[class*="animate-pulse"] {
  background: rgba(22, 33, 27, 0.06) !important;
  background-image: none !important;
  border-radius: var(--cav-r-field) !important;
}

/* the streaming card before any text arrives: a card with its hairline */
[class*="bg-components-panel-bg"]:empty,
[class*="bg-chat-bubble-bg"]:empty {
  background-color: var(--cav-surface) !important;
  border-color: var(--cav-hairline) !important;
}

/* toasts and inline alerts: a card, semantic glyph, hairline, no glow */
/* NB `:not([class*="viewport"])`: Dify's toast VIEWPORT is an always-present,
   empty, 2px-tall fixed wrapper. Skinning it draws a stray hairline across the
   top-right of every page in the product. Only skin real toasts. */
[role="alert"],
[role="status"],
[class*="toast"]:not([class*="viewport"]):not([class*="Viewport"]),
[class*="Toast"]:not([class*="viewport"]):not([class*="Viewport"]) {
  border-radius: var(--cav-r-field) !important;
  background-color: var(--cav-surface) !important;
  background-image: none !important;
  border: 1px solid var(--cav-hairline) !important;
  color: var(--cav-text) !important;
}

[role="alert"] [class*="text-text-destructive"],
[class*="toast"]:not([class*="viewport"]) [class*="text-text-destructive"] {
  color: var(--cav-rose) !important;
}

/* Dify's error/refusal panels use the red util ramp directly */
[class*="bg-util-colors-red"],
[class*="bg-util-colors-orange"],
[class*="bg-util-colors-warning"] {
  background-color: rgba(180, 35, 24, 0.066) !important;
  border-color: rgba(180, 35, 24, 0.193) !important;
}

[class*="text-util-colors-red"],
[class*="text-util-colors-red"] * {
  color: var(--cav-rose) !important;
}

/* empty states */
[class*="text-text-empty-state-icon"] {
  color: rgba(22, 33, 27, 0.198) !important;
}

/* -- 12. Scrollbars, focus, selection -------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 33, 27, 0.22) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(22, 33, 27, 0.2);
  border-radius: var(--cav-r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 33, 27, 0.34);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::selection {
  background: rgba(201, 169, 110, 0.38);
  color: var(--cav-text);
}

::-moz-selection {
  background: rgba(201, 169, 110, 0.38);
  color: var(--cav-text);
}

/* shadows are gone, so focus must be an outline, not a ring */
:focus-visible {
  outline: 2px solid var(--cav-forest);
  outline-offset: 2px;
}

/* ...but not on text fields: Dify scrolls them inside a clipping wrapper, so an
   offset outline shows up as two stray arcs. They get a forest border instead. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
[contenteditable="true"]:focus,
[contenteditable="true"]:focus-visible {
  outline: none;
}

[class*="bg-components-input-bg"]:focus-within,
[class*="border-components-chat"]:focus-within {
  border-color: var(--cav-forest) !important;
}

/* -- 13. Mobile ------------------------------------------------------------ */
@media (max-width: 430px) {
  :root {
    --cav-bar: 46px;
  }

  #cavello-bar {
    padding: 0 14px;
    gap: 10px;
  }

  #cavello-bar .cav-lockup {
    width: 108px;
    height: 17px;
  }

  #cavello-bar .cav-product {
    font-size: 10px;
  }

  /* The lockup is 6.3:1 where Dify's wordmark was 2.2:1, so at 390px it pushes
     the language switcher off the sign-in card. On phones show the bare mark -
     which is Cavello's actual logo; the wordmark is always live type anyway. */
  img[src*="/branding/logo-"] {
    content: url("/branding/logo-mark.png");
    height: 22px !important;
    width: auto !important;
    max-width: none;
  }

  /* Dify ships a fixed w-100 (400px) divider under the sign-in form, which is
     wider than the viewport. Pre-existing; stop it scrolling the page. */
  html,
  body {
    overflow-x: hidden;
  }

  .w-100 {
    max-width: 100%;
  }

  body:has(#cavello-bar) .system-md-semibold.text-text-secondary.grow.truncate,
  body:has(#cavello-bar) .grow.truncate.system-md-semibold {
    font-size: 20px;
  }

  .markdown-body {
    max-width: none;
  }

  .markdown-body h1 {
    font-size: 27px !important;
  }

  .markdown-body h2 {
    font-size: 22px !important;
  }

  .markdown-body h3 {
    font-size: 19px !important;
  }

  /* the mobile result sheet sits under the bar, keep its rounded top */
  [class*="rounded-t-2xl"] {
    border-radius: var(--cav-r-card) var(--cav-r-card) 0 0 !important;
  }
}

/* ===========================================================================
   Home: Dify's "Templates" gallery
   ---------------------------------------------------------------------------
   The cards are already empty (the catalogue endpoint returns [], see
   OPERATOR-GUIDE section 37.4), but Dify still paints the "Templates" heading,
   the category tabs, a search box, a "View more" link to marketplace.dify.ai
   and a 395 px empty box under them. cavello.js removes the nodes; this hides
   them before the first frame so there is no flash of an empty gallery.

   Anchored on the marketplace link, not on utility classes: if Dify ever stops
   rendering that link this rule matches nothing, which is the safe direction.
   =========================================================================== */
main#main-content div:has(> div > a[href*="marketplace.dify.ai"]),
main#main-content div:has(> div > a[href*="marketplace.dify.ai"]) + div {
  display: none !important;
}

/* The chat send button and chat header are painted from each app's chat_color_theme as an
   INLINE style (apply-cavello-theme.sh sets it to forest). An app imported after the last theme
   run falls back to Dify's #1C64F2, so force forest here too. */
button:has(.i-ri-send-plane-2-fill),
button:has(.i-ri-send-plane-2-fill):hover {
  background-color: var(--cav-forest) !important;
  color: var(--cav-on-forest) !important;
}
button:has(.i-ri-send-plane-2-fill):disabled,
button:has(.i-ri-send-plane-2-fill)[data-disabled] {
  background-color: rgba(19, 62, 45, 0.35) !important;
}
/* Any other element Dify paints inline with its default blue (#1C64F2 = rgb(28, 100, 242)):
   'Start Chat', chat headers, buttons of an app whose chat_color_theme was never set. */
[style*="rgb(28, 100, 242)"] {
  background-color: var(--cav-forest) !important;
  color: var(--cav-on-forest) !important;
}
[style*="rgb(28, 100, 242)"] * {
  color: var(--cav-on-forest) !important;
}