/* Portal chrome base (also used by the local demo, which has no inline portal styles). */
.lily-portal-header { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; }
.lily-portal-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.lily-portal-account { display: flex; align-items: center; gap: 10px; }

/* Shared Lily brand layer. Presentation only. Neutral Lily defaults below;
   a tenant overrides the --brand-* tokens in /files/lily-brand.css
   (site public files) and supplies its logo there too. */
:where(html[data-lily-theme="neutral"], html:not([data-lily-theme])) {
  --brand-name: ""; --brand-tagline: ""; --brand-title: ""; --brand-theme-color: ""; --brand-favicon: "";
  --brand-initial: "L"; --brand-initial-color: var(--brand-wordmark); --brand-initial-size: 22px;
  --brand-header-height: 48px; --brand-header-border: 1px solid var(--brand-detail);
  --brand-shell: #1c1714; --brand-shell-text: #f6f1e8; --brand-wordmark: #f6f1e8; --brand-detail: #c98a5e;
  --brand-indicator: var(--brand-detail); --brand-active: #3b342f; --brand-selected-text: #f6f1e8;
  --brand-bg: #f4f1ed; --brand-surface: #ffffff; --brand-ink: #24211f; --brand-muted: #56514d;
  --brand-border: #ddd8d1; --brand-action: #0e7480; --brand-soft: #e3eff0;
  --brand-bg-rgb: 244 241 237; --brand-surface-rgb: 255 255 255; --brand-soft-rgb: 227 239 240;
  --brand-border-rgb: 221 216 209; --brand-action-rgb: 14 116 128;
  --brand-logo: url("/assets/lily_workspace/images/lily-icon.svg"); --brand-logo-size: contain;
  --brand-logo-position: center; --brand-logo-bg: transparent; --brand-logo-padding: 0; --brand-logo-radius: 0;
  --brand-mark-width: 26px; --brand-mark-height: 26px; --brand-mark-width-mobile: var(--brand-mark-width);
  --brand-wordmark-font: 600 17px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-wordmark-spacing: 0; --brand-wordmark-direction: column;
  --brand-tagline-font: 500 9px/1.3 system-ui, sans-serif; --brand-tagline-spacing: 2px; --brand-tagline-color: var(--brand-shell-text);
  --lily-host-header-height: var(--brand-header-height);
}
body.lily-portal-page { background: var(--brand-bg); color: var(--brand-ink); }
.lily-portal-header { height: var(--brand-header-height); background: var(--brand-shell); border-bottom: var(--brand-header-border); }
.lily-portal-brand { min-width: 0; }
.tenant-mark { display: block; flex: none; width: var(--brand-mark-width); height: var(--brand-mark-height); box-sizing: border-box; padding: var(--brand-logo-padding); background-color: var(--brand-logo-bg); background-image: var(--brand-logo); background-repeat: no-repeat; background-origin: content-box; background-size: var(--brand-logo-size); background-position: var(--brand-logo-position); border-radius: var(--brand-logo-radius); }
.tenant-wordmark { display: flex; flex-direction: var(--brand-wordmark-direction); min-width: 0; font: var(--brand-wordmark-font); letter-spacing: var(--brand-wordmark-spacing); color: var(--brand-wordmark); }
.tenant-wordmark small { display: block; font: var(--brand-tagline-font); letter-spacing: var(--brand-tagline-spacing); color: var(--brand-tagline-color); }
.tenant-wordmark strong { font: inherit; }
.tenant-wordmark small:empty { display: none; }
.tenant-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lily-portal-account { color: var(--lily-chrome-control-ink); }
body.lily-branded { font-family: var(--lily-font-body); }
body.lily-branded .lily-portal-account button { color: var(--lily-chrome-control-ink); background: var(--lily-shell); border: 1px solid var(--lily-chrome-control-edge); border-radius: 6px; }
body.lily-branded .lily-portal-account button:hover { background: var(--lily-chrome-control-hover); }
body.lily-branded .lily-product-nav { background: var(--brand-shell) !important; border-color: var(--brand-detail) !important; }
body.lily-branded .lily-product-nav > div[aria-hidden] { font-size: 0; background: transparent !important; }
body.lily-branded .lily-product-nav > div[aria-hidden]::after { content: var(--brand-initial); font: 400 var(--brand-initial-size) Georgia, serif; color: var(--brand-initial-color); white-space: nowrap; }
body.lily-branded .lily-product-nav button { color: var(--lily-c-nav-ink) !important; }
body.lily-branded .lily-product-nav button:hover { background: var(--brand-active) !important; }
body.lily-branded .lily-product-nav button[aria-current=page] { color: var(--lily-c-nav-active-ink) !important; background: var(--lily-c-nav-active-bg) !important; box-shadow: inset 3px 0 var(--lily-c-nav-bar); }
body.lily-branded .lily-mgmt-button-primary { background: var(--lily-action) !important; border-color: var(--lily-action); color: var(--lily-on-action); }
body.lily-branded .lily-mgmt-button-primary:hover { filter: brightness(.9); }
body.lily-branded .lily-assistant-launcher { background: var(--lily-action); border-color: var(--lily-action); color: var(--lily-on-action); }
body.lily-branded .lily-assistant-launcher::before { background: currentColor; }
body.lily-branded .lily-assistant-launcher:hover { background: var(--lily-action-hover); color: var(--lily-on-action); filter: none; }
body.lily-branded .lily-assistant-launcher:active { background: var(--lily-action-pressed); color: var(--lily-on-action); }
body.lily-branded .lily-assistant-launcher:focus-visible { outline-color: var(--lily-focus-ring); }
body.lily-branded .lily-assistant-send { background: var(--lily-action); border-color: var(--lily-action); color: var(--lily-on-action); }
body.lily-branded .lily-mgmt-header { border-left-color: var(--brand-indicator); }
body.lily-branded .lily-language-strip { background: var(--lily-surface); border-color: var(--lily-border-control); }
body.lily-branded .lily-language-settings-label, body.lily-branded .lily-language-settings-select { color: var(--lily-ink); }
body.lily-branded .lily-language-settings-select { background: var(--lily-c-field-bg); border-color: var(--lily-c-field-edge); }
body.lily-portal-page .lily-language-settings-label { color: var(--lily-ink); }
body.lily-portal-page .lily-language-settings-select {
  background: var(--lily-c-field-bg); color: var(--lily-ink);
  border: 1px solid var(--lily-c-field-edge);
}
body.lily-branded :focus-visible { outline-color: var(--brand-action); }
@media (max-width: 560px) {
  .lily-portal-brand { gap: 8px; }
  .tenant-mark { width: var(--brand-mark-width-mobile); }
  body.lily-branded .tenant-wordmark { font-size: 17px; letter-spacing: 1px; }
  body.lily-branded .lily-portal-account button { padding: 7px 10px; }
  body.lily-branded .lily-product-nav button[aria-current=page] { box-shadow: inset 0 3px var(--brand-indicator); }
}

/* ---------------------------------------------------------------------------
   Premium layer (20260925). Depth, tone and texture derived from the same
   --brand-* tokens, so the neutral Lily default and every tenant get it
   without new colours. Optional tuning tokens (set them in /files/lily-brand.css):
     --brand-body-family / --brand-heading-family   font stacks (load fonts with @import there)
     --brand-heading-weight / --brand-heading-scale / --brand-heading-spacing
     --brand-shell-lift / --brand-shell-depth       tonal range of the header and nav (0%-16%)
     --brand-grain / --brand-grain-blend            paper grain on header and nav (0 = off, .08-.14; soft-light on dark shells)
     --brand-header-padding                         header padding
     --brand-hairline-center / --brand-hairline-height / --brand-hairline   header hairline (override the gradient if needed)
     --brand-active-lift                            highlight of the selected menu item (lower on dark shells)
     --brand-motif / --brand-motif-color            single-colour SVG/PNG drawn as the brand motif
     --brand-wordmark-image (+ -width / -height)    exact vector wordmark tinted with --brand-wordmark
   --------------------------------------------------------------------------- */
:where(html[data-lily-theme="neutral"], html:not([data-lily-theme])) {
  --brand-body-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-heading-family: var(--brand-body-family);
  --brand-heading-weight: 650;
  --brand-heading-scale: 1;
  --brand-heading-spacing: 0;
  --brand-shell-lift: 3%;
  --brand-shell-depth: 3%;
  --brand-grain: 0;
  --brand-grain-blend: multiply;
  --brand-header-padding: 4px 12px;
  --brand-hairline-center: var(--brand-detail);
  --brand-hairline-height: 1px;
  --brand-active-lift: 26%;
  --brand-motif-color: var(--brand-detail);
  --brand-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M30 8H9a5 5 0 0 0-5 5v11a5 5 0 0 0 5 5h3v7l8-7h10a5 5 0 0 0 5-5V13a5 5 0 0 0-5-5z'/%3E%3Cpath d='M35 14h4a5 5 0 0 1 5 5v9a5 5 0 0 1-5 5h-2v5l-6-5h-7'/%3E%3C/svg%3E");
  --brand-wordmark-image: none;
  --brand-wordmark-image-width: 220px;
  --brand-wordmark-image-height: 22px;
  --brand-radius: 16px;
  --brand-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in srgb, red, blue)) {
  :where(html[data-lily-theme="neutral"], html:not([data-lily-theme])) {
    --brand-shell-light: color-mix(in srgb, var(--brand-shell), #fff var(--brand-shell-lift));
    --brand-shell-deep: color-mix(in srgb, var(--brand-shell), #000 var(--brand-shell-depth));
    --brand-shadow: color-mix(in srgb, var(--brand-ink) 24%, transparent);
    --brand-shadow-soft: color-mix(in srgb, var(--brand-ink) 7%, transparent);
    --brand-glow: color-mix(in srgb, var(--brand-detail) 34%, transparent);
    --brand-card-shadow: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent), 0 1px 1px var(--brand-shadow-soft), 0 3px 6px -2px var(--brand-shadow-soft), 0 18px 36px -22px var(--brand-shadow);
    --brand-hairline: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-detail) 80%, transparent) 20%, var(--brand-hairline-center) 50%, color-mix(in srgb, var(--brand-detail) 80%, transparent) 80%, transparent);
  }

  /* Canvas: the same background colour, lit by two very soft glows. */
  body.lily-portal-page {
    accent-color: var(--lily-action);
    font-family: var(--brand-body-family);
    background:
      radial-gradient(1100px 540px at 94% -12%, var(--brand-glow), transparent 64%),
      radial-gradient(820px 500px at -6% 110%, color-mix(in srgb, var(--brand-soft) 70%, transparent), transparent 62%),
      var(--brand-bg);
    background-attachment: fixed;
  }
  body.lily-portal-page .lily-product,
  body.lily-portal-page .lily-app { background: transparent; font-family: var(--brand-body-family); }
  body.lily-portal-page * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand-muted) 38%, transparent) transparent; }

  /* Header: a tonal gradient of the shell colour, fine grain and a hairline. */
  body.lily-portal-page .lily-portal-header {
    position: relative;
    isolation: isolate;
    padding: var(--brand-header-padding);
    background: linear-gradient(180deg, var(--brand-shell-light) 0%, var(--brand-shell) 52%, var(--brand-shell-deep) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  }
  body.lily-portal-page .lily-portal-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--brand-grain-image); background-size: 180px; opacity: var(--brand-grain); mix-blend-mode: var(--brand-grain-blend);
  }
  body.lily-portal-page .lily-portal-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--brand-hairline-height); pointer-events: none; background: var(--brand-hairline);
  }
  body.lily-branded .tenant-wordmark strong { text-shadow: 0 1px 0 color-mix(in srgb, var(--brand-ink) 18%, transparent); }
  body.lily-brand-wordmark-image .tenant-wordmark strong {
    display: block; width: var(--brand-wordmark-image-width); height: var(--brand-wordmark-image-height); max-width: 46vw;
    font-size: 0; color: transparent; text-shadow: none; background: var(--brand-wordmark);
    -webkit-mask: var(--brand-wordmark-image) left center / contain no-repeat; mask: var(--brand-wordmark-image) left center / contain no-repeat;
  }
  body.lily-brand-wordmark-image .tenant-wordmark small { margin-top: 6px; }
  body.lily-portal-page .lily-portal-account button {
    border-radius: 999px; padding-inline: 16px;
    background: var(--lily-shell);
    border: 1px solid var(--lily-chrome-control-edge);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
    transition: background-color .18s ease, border-color .18s ease;
  }
  body.lily-portal-page .lily-portal-account button:hover { background: var(--lily-chrome-control-hover); }

  /* Page header of the workspace: a translucent reading surface. */
  body.lily-portal-page .lily-product-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-surface) 94%, transparent), color-mix(in srgb, var(--brand-surface) 70%, transparent));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 75%, transparent);
  }
  body.lily-portal-page .lily-product-title {
    font-family: var(--brand-heading-family); font-weight: var(--brand-heading-weight);
    letter-spacing: var(--brand-heading-spacing); font-size: calc(21px * var(--brand-heading-scale)); color: var(--brand-ink);
  }
  body.lily-portal-page .lily-product-business { color: var(--brand-muted); letter-spacing: .01em; }
  body.lily-portal-page :is(.lily-product-edition, .lily-product-authority, .lily-product-demo, .lily-edition-badge, .lily-demo-badge) {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; font-size: 12.5px; font-weight: 500;
    color: var(--brand-ink); background: color-mix(in srgb, var(--brand-surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-detail) 50%, var(--brand-border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 90%, transparent);
  }
  body.lily-portal-page :is(.lily-product-edition, .lily-product-authority, .lily-product-demo, .lily-edition-badge, .lily-demo-badge)::before {
    content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-action) 16%, transparent);
  }
  body.lily-portal-page .lily-product-authority::before { background: var(--brand-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-muted) 14%, transparent); }
  body.lily-portal-page :is(.lily-product-demo, .lily-demo-badge)::before { background: #c98a2e; box-shadow: 0 0 0 3px color-mix(in srgb, #c98a2e 18%, transparent); }

  /* Navigation: tonal gradient, grain, frosted selected item, line icons. */
  body.lily-portal-page .lily-product-nav {
    isolation: isolate;
    background: linear-gradient(180deg, var(--brand-shell) 0%, var(--brand-shell-deep) 100%) !important;
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--brand-detail) 45%, transparent);
  }
  body.lily-portal-page .lily-product-nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--brand-grain-image); background-size: 180px; opacity: var(--brand-grain); mix-blend-mode: var(--brand-grain-blend);
  }
  body.lily-portal-page .lily-product-nav .lily-nav-item {
    display: flex; align-items: center; gap: 10px; border-radius: 12px; font-weight: 500;
    transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  body.lily-portal-page .lily-product-nav .lily-nav-item::before {
    content: ""; flex: none; width: 17px; height: 17px; background: currentColor; opacity: .85;
    -webkit-mask: var(--lily-nav-icon) center / contain no-repeat; mask: var(--lily-nav-icon) center / contain no-repeat;
  }
  body.lily-portal-page .lily-product-nav .lily-nav-item:hover { background: color-mix(in srgb, var(--brand-wordmark) 10%, transparent) !important; }
  body.lily-portal-page .lily-product-nav .lily-nav-item--active,
  body.lily-branded .lily-product-nav button[aria-current=page] {
    color: var(--brand-selected-text) !important; font-weight: 600;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-active), #fff var(--brand-active-lift)), var(--brand-active)) !important;
    border: 1px solid color-mix(in srgb, var(--brand-detail), #fff 20%) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 8px 18px -10px var(--brand-shadow) !important;
  }
  body.lily-portal-page .lily-product-nav .lily-nav-item[data-section="conversations"] { --lily-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.6L3.5 20.5l1-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3C/svg%3E"); }
  body.lily-portal-page .lily-product-nav .lily-nav-item[data-section="context"] { --lily-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E"); }
  body.lily-portal-page .lily-product-nav .lily-nav-item[data-section="settings"] { --lily-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 12h3M11 12h9M4 17h11M19 17h1'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
  body.lily-portal-page .lily-product-nav .lily-nav-item[data-section="knowledge"] { --lily-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0-2 2z'/%3E%3Cpath d='M5 20a2 2 0 0 0 2 1.5h12V18'/%3E%3C/svg%3E"); }
  body.lily-portal-page .lily-product-nav .lily-nav-item[data-section="learning"] { --lily-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l9 4.5-9 4.5L3 9z'/%3E%3Cpath d='M7 11.5V16c0 1.4 2.2 2.6 5 2.6s5-1.2 5-2.6v-4.5'/%3E%3C/svg%3E"); }
  body.lily-portal-page .lily-product-nav .lily-nav-item[data-section="activity"] { --lily-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 5 12 2.5-6h4'/%3E%3C/svg%3E"); }
  @media (max-width: 899px) {
    body.lily-portal-page .lily-product-nav .lily-nav-item { flex-direction: column; justify-content: center; gap: 3px; font-size: 11px; }
    body.lily-portal-page .lily-product-authority { display: none; }
    body.lily-portal-page :is(.lily-product-edition, .lily-product-demo) { padding: 2px 9px; font-size: 11px; gap: 6px; }
  }
  @media (min-width: 900px) {
    body.lily-branded .lily-product-nav::after {
      content: ""; display: block; flex: none; position: sticky; bottom: 22px; margin: auto auto 22px; width: 128px; height: 96px; opacity: .3;
      background: var(--brand-wordmark);
      -webkit-mask: var(--brand-motif) center / contain no-repeat; mask: var(--brand-motif) center / contain no-repeat;
    }
  }

  /* Reading panes use resolved appearance roles in every mode and pack. */
  body.lily-portal-page :is(.lily-list-pane, .lily-conversation-pane, .lily-side-pane, .lily-mgmt-panel) {
    background: var(--lily-surface);
    background-image: none;
    border: 1px solid var(--lily-border-subtle);
    border-radius: var(--brand-radius);
    box-shadow: var(--lily-elev-panel);
  }
  body.lily-portal-page :is(.lily-list-title, .lily-conv-title, .lily-mgmt-panel-title, .lily-product-section-title, .lily-mgmt-title, .lily-unavailable-title) {
    font-family: var(--brand-heading-family); font-weight: var(--brand-heading-weight);
    letter-spacing: var(--brand-heading-spacing); text-transform: none; color: var(--lily-ink);
  }
  body.lily-portal-page .lily-list-title { font-size: calc(18px * var(--brand-heading-scale)); }
  body.lily-portal-page .lily-conv-title { font-size: calc(19px * var(--brand-heading-scale)); }
  body.lily-portal-page .lily-mgmt-panel-title { font-size: calc(17px * var(--brand-heading-scale)); }
  body.lily-portal-page .lily-product-section-title { font-size: calc(19px * var(--brand-heading-scale)); }
  body.lily-portal-page .lily-side-title {
    font: 600 10.5px/1.2 var(--brand-body-family); letter-spacing: .18em; text-transform: uppercase; color: var(--lily-ink-muted);
    padding-bottom: 10px; border-bottom: 0;
    background: linear-gradient(90deg, var(--lily-border-subtle), transparent) left bottom / 100% 1px no-repeat;
  }

  /* Search and filters. */
  body.lily-portal-page .lily-search-wrap { position: relative; }
  body.lily-portal-page .lily-search-wrap::after {
    content: ""; position: absolute; left: 13px; bottom: 13px; width: 15px; height: 15px; pointer-events: none; background: var(--lily-ink-muted); opacity: .75;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.lily-portal-page .lily-search {
    padding-left: 36px; border-radius: 12px; background: var(--lily-surface);
    border: 1px solid var(--lily-border-control);
    box-shadow: inset 0 1px 2px var(--brand-shadow-soft);
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  body.lily-portal-page .lily-search:focus-visible,
  body.lily-portal-page :is(.lily-mgmt-input, .lily-mgmt-select, .lily-mgmt-textarea, .lily-composer-input, .lily-assistant-input):focus-visible {
    outline: none; border-color: var(--lily-border-control);
    box-shadow: inset 0 1px 2px var(--brand-shadow-soft), 0 0 0 3px color-mix(in srgb, var(--brand-action) 20%, transparent);
  }
  body.lily-portal-page :is(.lily-list-pane, .lily-toolbar, .lily-owners) { min-width: 0; }
  body.lily-portal-page :is(.lily-filters, .lily-owner-options) {
    display: flex; gap: 2px; padding: 3px; border-radius: 12px; min-width: 0; max-width: 100%; overflow-x: auto;
    background: var(--lily-surface-inset);
    border: 1px solid var(--lily-border-subtle);
  }
  body.lily-portal-page :is(.lily-filters, .lily-owner-options) .lily-chip-button {
    flex: 1 0 auto; border: 0; border-radius: 9px; background: transparent; color: var(--lily-ink-muted); font-weight: 500;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
  }
  body.lily-portal-page :is(.lily-filters, .lily-owner-options) .lily-chip-button:hover:not(:disabled) { background: var(--lily-c-row-hover-bg); color: var(--lily-ink); }
  body.lily-portal-page :is(.lily-filters, .lily-owner-options) .lily-chip-button--active {
    background: var(--lily-surface); color: var(--lily-ink); font-weight: 600;
    box-shadow: 0 1px 2px var(--brand-shadow-soft), 0 2px 8px -4px var(--brand-shadow);
  }

  /* Conversation list. */
  body.lily-portal-page .lily-conversation { border-radius: 12px; transition: background-color .18s ease, box-shadow .18s ease; }
  body.lily-portal-page .lily-conversation:hover { background: var(--lily-c-row-hover-bg); }
  body.lily-portal-page .lily-conversation--selected {
    background: var(--lily-selection-bg);
    box-shadow: inset 0 0 0 1px var(--lily-border-control);
  }
  body.lily-portal-page .lily-conv-item-title { color: var(--lily-ink); }

  /* Empty states carry the brand motif instead of a blank box. */
  body.lily-portal-page .lily-conversation-pane { position: relative; isolation: isolate; }
  body.lily-portal-page .lily-conversation-pane .lily-placeholder { padding-top: 40px; color: var(--lily-ink-muted); }
  body.lily-portal-page .lily-conversation-pane .lily-placeholder::before {
    content: ""; display: block; width: 104px; height: 76px; margin: 0 auto 16px; background: var(--brand-motif-color);
    -webkit-mask: var(--brand-motif) center / contain no-repeat; mask: var(--brand-motif) center / contain no-repeat;
  }
  body.lily-portal-page .lily-conversation-pane:has(> .lily-placeholder:not([hidden]))::after {
    content: ""; position: absolute; right: -40px; bottom: -30px; width: 420px; height: 300px; z-index: -1; pointer-events: none;
    background: var(--brand-motif-color); opacity: .08;
    -webkit-mask: var(--brand-motif) center / contain no-repeat; mask: var(--brand-motif) center / contain no-repeat;
  }
  body.lily-portal-page .lily-side-pane .lily-placeholder {
    margin: 4px 0 12px; padding: 12px 14px; text-align: left; font-size: 13px; color: var(--lily-ink-muted); border-radius: 12px;
    background: var(--lily-surface-inset);
    border: 1px solid var(--lily-border-subtle);
  }

  /* Buttons and Ask Lily. */
  body.lily-portal-page :is(.lily-button, .lily-mgmt-button) { border-radius: 10px; transition: background-color .18s ease, box-shadow .18s ease, filter .18s ease; }
  body.lily-portal-page :is(.lily-primary, .lily-mgmt-button-primary, .lily-assistant-send),
  body.lily-branded :is(.lily-mgmt-button-primary, .lily-assistant-send) {
    color: var(--lily-on-action); border-color: var(--lily-action) !important;
    background: var(--lily-action) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--brand-action) 70%, transparent);
  }
  body.lily-portal-page .lily-assistant-launcher {
    display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; font-weight: 600; letter-spacing: .01em;
    color: var(--lily-on-action); border: 1px solid var(--lily-action);
    background: var(--lily-action);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), 0 1px 2px var(--brand-shadow), 0 14px 28px -10px color-mix(in srgb, var(--brand-action) 70%, transparent);
  }
  body.lily-portal-page .lily-assistant-launcher::before {
    content: ""; flex: none; width: 17px; height: 17px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.9 5.1 5.1 1.9-5.1 1.9L11 17.5l-1.9-5.1L4 10.5l5.1-1.9z'/%3E%3Cpath d='M18.5 15.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.9 5.1 5.1 1.9-5.1 1.9L11 17.5l-1.9-5.1L4 10.5l5.1-1.9z'/%3E%3Cpath d='M18.5 15.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.lily-portal-page .lily-assistant-launcher:hover { background: var(--lily-action-hover); color: var(--lily-on-action); filter: none; }
  body.lily-portal-page .lily-assistant-launcher:active { background: var(--lily-action-pressed); color: var(--lily-on-action); }
  body.lily-portal-page :is(.lily-mgmt-button-primary, .lily-assistant-send):disabled,
  body.lily-branded :is(.lily-mgmt-button-primary, .lily-assistant-send):disabled {
    color: var(--lily-c-btn-disabled-ink);
    background: var(--lily-c-btn-disabled-bg) !important;
    border-color: var(--lily-c-field-edge) !important;
    opacity: 1;
    box-shadow: none;
  }
  body.lily-portal-page .lily-assistant-panel {
    background: var(--lily-surface-overlay); background-image: none; color: var(--lily-ink);
    border-radius: 18px; border: 1px solid var(--lily-border-subtle);
    box-shadow: var(--lily-elev-overlay);
  }
  body.lily-portal-page .lily-assistant-header {
    background: var(--lily-surface-inset);
    border-bottom: 1px solid var(--lily-border-subtle);
  }
  body.lily-portal-page .lily-assistant-title { font-family: var(--brand-heading-family); font-weight: var(--brand-heading-weight); letter-spacing: var(--brand-heading-spacing); }

  /* Phones: the panes are full-width sheets, so no card corners or shadows. */
  @media (max-width: 899px) {
    body.lily-portal-page :is(.lily-list-pane, .lily-conversation-pane, .lily-side-pane) { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  }

  /* Management tabs and fields. */
  body.lily-portal-page :is(.lily-mgmt-input, .lily-mgmt-select, .lily-mgmt-textarea) { border-radius: 10px; }
  body.lily-portal-page .lily-mgmt-tab-active { box-shadow: inset 0 -2px 0 var(--brand-action); }
}

@media (prefers-reduced-motion: reduce) {
  body.lily-portal-page * { transition: none !important; }
}

/* The header has its own colour pair. Surface controls in the dropdown keep
   the reading pair, while its trigger and the launcher use shell roles. */
body.lily-portal-page #lily-header-tools :is(.lily-portal-account button, .lily-appearance-menu > button) {
  min-height: 44px;
  color: var(--lily-chrome-control-ink);
  background: var(--lily-shell);
  border: 1px solid var(--lily-chrome-control-edge);
}
body.lily-portal-page #lily-header-tools :is(.lily-portal-account button, .lily-appearance-menu > button):hover {
  background: var(--lily-chrome-control-hover);
}
body.lily-portal-page #lily-header-tools :is(.lily-portal-account button, .lily-appearance-menu > button):active {
  background: var(--lily-chrome-control-pressed);
}
body.lily-portal-page #lily-header-tools :is(.lily-portal-account button, .lily-appearance-menu > button, .lily-assistant-launcher):focus-visible {
  outline: var(--lily-read-focus-w, 2px) solid var(--lily-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--lily-chrome-control-ink);
}
body.lily-portal-page #lily-header-tools :is(.lily-portal-account button, .lily-appearance-menu > button, .lily-assistant-launcher):disabled {
  opacity: 1;
  color: var(--lily-chrome-control-ink);
  background: var(--lily-chrome-control-pressed);
}

/* ---------------------------------------------------------------------------
   Brand-pack lockup fit under the appearance styles (VIS-P, 20260930). Pack-agnostic: it reacts to what a pack
   declares (body.lily-brand-lockup-wide = mark + image wordmark of 260px or more, set by lily_brand.js from the tokens; body.lily-branded),
   never to a tenant name. The neutral Lily lockup is small and never needs these steps.
   Moderno: 1240-1499 the inactive destinations collapse to icons (same rule the base applies below 1240) so a wide lockup
   never runs under the navigation pill; the image wordmark then steps down (150px) and finally leaves the pill (mark only)
   before the tools would collide with it. The name stays reachable as .tenant-title and the mark.
   --------------------------------------------------------------------------- */
/* a polarity-locked mark keeps its own plate in Moderno light (the pill already supplies the opaque shell plate behind a transparent one) */
html[data-lily-mode="light"][data-lily-style="moderno"] body.lily-branded .lily-portal-brand .tenant-mark { background-color: var(--lily-mark-plate); }

@media (min-width: 1240px) and (max-width: 1499.98px) {
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide.lily-portal-page .lily-nav-moderno .lily-nav-item:not(.is-active) { width: 44px; padding: 0; justify-content: center; }
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide.lily-portal-page .lily-nav-moderno .lily-nav-item:not(.is-active) .lily-nav-label { display: none; }
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide.lily-portal-page .lily-nav-moderno .lily-nav-item:not(.is-active):is(:hover, :focus-visible)::before {
    content: attr(aria-label); position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 5; padding: 6px 12px; border-radius: 999px;
    background: color-mix(in oklab, var(--lily-shell) var(--k-a), var(--lily-surface)); color: var(--k-ink); border: 1px solid var(--glass-edge);
    font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 24px -10px color-mix(in oklab, black calc(60% * var(--_dark, 0) + 26% * (1 - var(--_dark, 0))), transparent);
  }
}
@media (min-width: 720px) and (max-width: 1179.98px) {
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide .tenant-wordmark strong { width: min(var(--brand-wordmark-image-width), 150px); }
}
@media (min-width: 720px) and (max-width: 959.98px) {
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide :is(.lily-portal-brand) .tenant-wordmark { display: none; }
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide.lily-portal-page .lily-portal-brand { padding-right: 14px; }
}
/* Leitura: one flat band, so only the very narrow widths need the wordmark to step down */
@media (max-width: 899.98px) {
  html[data-lily-style="leitura"] body.lily-brand-lockup-wide .tenant-wordmark strong { width: min(var(--brand-wordmark-image-width), 150px); }
}
/* phones: the image wordmark (about 10px tall at this width, too small to read) leaves the lockup; the mark stays, the name stays as .tenant-title.
   Leitura: Ask Lily becomes the 44px glyph in the header (spec), so the tool cluster fits beside the lockup */
@media (max-width: 719.98px) {
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide .tenant-wordmark,
  html[data-lily-style="leitura"] body.lily-brand-lockup-wide .tenant-wordmark { display: none; }
  html[data-lily-style="moderno"] body.lily-brand-lockup-wide.lily-portal-page .lily-portal-brand { padding-right: 10px; }
  html[data-lily-style="leitura"] body.lily-branded.lily-portal-page #lily-header-tools .lily-assistant-launcher {
    width: var(--lily-read-target, 44px); min-width: var(--lily-read-target, 44px); padding: 0; gap: 0; justify-content: center; font-size: 0; overflow: visible;
  }
  /* the text wordmark of a pack must not touch the tool cluster: the two text buttons give back 12px each */
  html[data-lily-style="leitura"] body.lily-branded.lily-portal-page #lily-header-tools :is(.lily-portal-account button, .lily-appearance-menu > button) { padding-inline: 10px; }
  html[data-lily-style="leitura"] body.lily-branded.lily-portal-page .lily-portal-brand { padding-right: 8px; }
  /* a multi-word tagline wraps to three lines at this width and is clipped by the header band (Moderno already drops it) */
  html[data-lily-style="leitura"] body.lily-branded.lily-portal-page .tenant-wordmark small { display: none; }
  html[data-lily-style="leitura"] body.lily-brand-lockup-phone-tight .tenant-wordmark { display: none; }
}

/* ---------------------------------------------------------------------------
   Brand watermark in the conversation thread (VIS-W, 20260930). A customer's own mark, faint and centred behind the
   messages, as the premium brand layer drew it before the appearance styles. Decorative: pure CSS (a mask of the pack's
   mark tinted with a role colour), no pointer events, no layout shift, hidden without a brand pack.
   Optional pack tokens (all with defaults, old packs unchanged):
     --brand-watermark           image to use instead of --brand-logo (single-colour silhouette; the alpha channel is the shape)
     --brand-watermark-opacity   visual weight, default .07 (keep it between .04 and .08)
     --brand-watermark-tint      colour of the silhouette, default a blend of the action and ink roles
   --------------------------------------------------------------------------- */
html[data-lily-style] body.lily-branded.lily-portal-page .lily-chatwoot-app .lily-thread-wrap > div {
  position: relative; isolation: isolate;
}
html[data-lily-style] body.lily-branded.lily-portal-page .lily-chatwoot-app .lily-thread-wrap > div::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 47%;
  width: min(62%, 380px); height: min(46%, 280px); transform: translate(-50%, -50%);
  background: var(--brand-watermark-tint, color-mix(in srgb, var(--lily-action) 45%, var(--lily-ink)));
  opacity: var(--brand-watermark-opacity, .07);
  -webkit-mask: var(--brand-watermark, var(--brand-logo)) center / contain no-repeat;
  mask: var(--brand-watermark, var(--brand-logo)) center / contain no-repeat;
}
/* the message list takes the pane's own surface, so the mark shows between the bubbles (Leitura paints it opaque) */
html[data-lily-style] body.lily-branded.lily-portal-page .lily-chatwoot-app .lily-thread-wrap > div > div > ul { background: transparent; }
@media (max-width: 719.98px) {
  html[data-lily-style] body.lily-branded.lily-portal-page .lily-chatwoot-app .lily-thread-wrap > div::before { width: min(66%, 240px); height: min(34%, 190px); }
}
@media (forced-colors: active), (prefers-contrast: more) {
  html[data-lily-style] body.lily-branded.lily-portal-page .lily-chatwoot-app .lily-thread-wrap > div::before { display: none; }
}