@import '_content/Parrot.SharedComponents/Parrot.SharedComponents.qv3ck0f6ls.bundle.scp.css';

/* /Components/Layout/Auth/AuthGlow.razor.rz.scp.css */
.auth-glow[b-fdjodcr64a] {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at top left, var(--page-edge-glow), transparent 38%),
    radial-gradient(circle at bottom right, var(--page-edge-far), transparent 34%);
  /* Linear, not eased: the outgoing and incoming glows cross-fade over the
     same second, and only a linear pair always adds up to one full glow. An
     eased pair dips in the middle, which on a dark page is a visible blink. */
  animation: auth-glow-cycle-b-fdjodcr64a var(--ds-account-story-duration) linear infinite;
}

/* Light mode, very subtle. Each hue is mixed down so its strongest point sits
   the same small distance from the page colour (0.012 in OKLab), so no colour
   in the cycle looks brighter than the others. Full-strength muted tokens
   were about four times that, which read as harsh. The far corner is 40% of
   the near one. Dark mode swaps these in app.css. */
.edge-cyan[b-fdjodcr64a] {
  --page-edge-glow: color-mix(in srgb, var(--colors-accent-cyan-muted) 21%, transparent);
  --page-edge-far: color-mix(in srgb, var(--colors-accent-cyan-muted) 8%, transparent);
}

.edge-violet[b-fdjodcr64a] {
  --page-edge-glow: color-mix(in srgb, var(--colors-accent-violet-muted) 24%, transparent);
  --page-edge-far: color-mix(in srgb, var(--colors-accent-violet-muted) 10%, transparent);
  animation-delay: calc(var(--ds-account-story-delay) * 1);
}

.edge-amber[b-fdjodcr64a] {
  --page-edge-glow: color-mix(in srgb, var(--colors-accent-amber-muted) 18%, transparent);
  --page-edge-far: color-mix(in srgb, var(--colors-accent-amber-muted) 7%, transparent);
  animation-delay: calc(var(--ds-account-story-delay) * 2);
}

.edge-pink[b-fdjodcr64a] {
  --page-edge-glow: color-mix(in srgb, var(--colors-accent-pink-muted) 26%, transparent);
  --page-edge-far: color-mix(in srgb, var(--colors-accent-pink-muted) 10%, transparent);
  animation-delay: calc(var(--ds-account-story-delay) * 3);
}

/* Each glow comes in over the first 1.2s of its slot and goes out over the
   first 1.2s of the next, exactly while the next one comes in. */
@keyframes auth-glow-cycle-b-fdjodcr64a {
  0% { opacity: 0; }
  3.75%, 25% { opacity: 1; }
  28.75%, 100% { opacity: 0; }
}

/* No motion: hold the first colour. */
@media (prefers-reduced-motion: reduce) {
  .auth-glow[b-fdjodcr64a] { animation: none; }
  .edge-cyan[b-fdjodcr64a] { opacity: 1; }
}
/* /Components/Layout/Auth/AuthLayout.razor.rz.scp.css */
.account-access-page[b-0xabxrffhh] {
  /* The authentication composition has no layout-width or long-form motion
     tokens yet. These values come from the approved account-section spec. */
  --ds-account-section-width: 1092px;
  --ds-account-section-height: 554px;
  /* Confirm Password makes registration taller than the original section.
     Give every account-access page the same stage so moving between Sign Up
     and Sign In does not move the form while the story stays fixed. */
  --ds-account-stage-height: calc(var(--ds-account-section-height) + (var(--spacing-3xl) * 2));
  --ds-account-story-width: 410px;
  --ds-account-form-width: 432px;
  /* Missing from the token set: a content-stage size. This is the measured
     initial height of the registration panel after Confirm Password was added. */
  --ds-account-form-stage-height: 524px;
  /* 250px on a wide screen, shrinking with the window so both columns still
     fit on a small laptop instead of pushing the form off the right edge. */
  --ds-account-column-gap: clamp(var(--spacing-4xl), 14vw, 250px);
  /* Fluid between two steps of the spacing scale; only the rate is not a token. */
  --ds-account-page-gutter: clamp(var(--spacing-xl), 3.5vw, var(--spacing-4xl));
  /* The story lifts above the form on a tall screen. On a short one there is
     no room above it, so the lift would push it into the header. */
  --ds-account-story-lift: calc((var(--spacing-4xl) + var(--spacing-3xl) + var(--spacing-md)) * -1);

  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--spacing-2xl) var(--ds-account-page-gutter);
  color: var(--colors-text-primary);
  background: var(--colors-surface-background);
}

.account-access-header[b-0xabxrffhh] {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.account-access-brand[b-0xabxrffhh] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--colors-text-primary);
  text-decoration: none;
}

.account-access-brand:hover[b-0xabxrffhh] { color: var(--colors-text-primary); }

.account-access-content[b-0xabxrffhh] {
  position: relative;
  z-index: 1;
  display: grid;
  /* Fluid, not fixed: each column may shrink below its design width, so the
     pair never needs more room than the window has. */
  grid-template-columns: minmax(0, var(--ds-account-story-width)) minmax(0, var(--ds-account-form-width));
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-account-column-gap);
  width: 100%;
  max-width: var(--ds-account-section-width);
  min-height: min(var(--ds-account-stage-height), 100%);
  margin: auto;
  padding-block: var(--spacing-4xl);
  /* An optical nudge, not a layout change. The box is centred exactly, but
     the form is a solid block and the story is ragged text, so the pair reads
     as leaning right. Shifting the whole group left by one step balances the
     weight without moving the columns relative to each other. */
  left: calc(var(--ds-account-optical-shift) * -1);
}

.account-access-page[b-0xabxrffhh] { --ds-account-optical-shift: var(--spacing-3xl); }

.account-access-story[b-0xabxrffhh] {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  max-width: var(--ds-account-story-width);
  min-height: calc(var(--spacing-4xl) * 7);
  transform: translateY(var(--ds-account-story-lift));
}

.account-access-story__rotation[b-0xabxrffhh] {
  display: grid;
  min-height: calc(var(--spacing-4xl) * 4);
}

.account-access-story__item[b-0xabxrffhh] {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  gap: var(--spacing-md);
  opacity: 0;
  transform: translateY(var(--spacing-md));
  animation: account-access-story-cycle-b-0xabxrffhh var(--ds-account-story-duration) var(--ds-motion-ease) infinite;
}

.account-access-story__item:nth-child(2)[b-0xabxrffhh] { animation-delay: calc(var(--ds-account-story-delay) * 1); }
.account-access-story__item:nth-child(3)[b-0xabxrffhh] { animation-delay: calc(var(--ds-account-story-delay) * 2); }
.account-access-story__item:nth-child(4)[b-0xabxrffhh] { animation-delay: calc(var(--ds-account-story-delay) * 3); }

.account-access-story__item[b-0xabxrffhh]  h2 {
  max-width: var(--ds-account-story-width);
  color: var(--story-title-color);
}

.story-cyan[b-0xabxrffhh] { --story-title-color: var(--colors-accent-cyan-text); }
.story-violet[b-0xabxrffhh] { --story-title-color: var(--colors-accent-violet-text); }
.story-amber[b-0xabxrffhh] { --story-title-color: var(--colors-accent-amber-text); }
.story-pink[b-0xabxrffhh] { --story-title-color: var(--colors-accent-pink-text); }

.account-access-story__item[b-0xabxrffhh]  p {
  max-width: var(--ds-account-story-width);
  color: var(--colors-text-secondary);
}

.account-access-story__progress[b-0xabxrffhh] {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
}

.account-access-story__progress i[b-0xabxrffhh] {
  width: var(--spacing-xl);
  height: var(--spacing-2xs);
  overflow: hidden;
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}

.account-access-story__progress i[b-0xabxrffhh]::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--story-progress-color);
  transform: scaleX(0);
  transform-origin: left;
  animation: account-access-story-progress-b-0xabxrffhh var(--ds-account-story-duration) linear infinite;
}

.account-access-story__progress i:nth-child(1)[b-0xabxrffhh] { --story-progress-color: var(--colors-accent-cyan-base); }
.account-access-story__progress i:nth-child(2)[b-0xabxrffhh] { --story-progress-color: var(--colors-accent-violet-base); }
.account-access-story__progress i:nth-child(3)[b-0xabxrffhh] { --story-progress-color: var(--colors-accent-amber-base); }
.account-access-story__progress i:nth-child(4)[b-0xabxrffhh] { --story-progress-color: var(--colors-accent-pink-base); }

.account-access-story__progress i:nth-child(2)[b-0xabxrffhh]::after { animation-delay: calc(var(--ds-account-story-delay) * 1); }
.account-access-story__progress i:nth-child(3)[b-0xabxrffhh]::after { animation-delay: calc(var(--ds-account-story-delay) * 2); }
.account-access-story__progress i:nth-child(4)[b-0xabxrffhh]::after { animation-delay: calc(var(--ds-account-story-delay) * 3); }

.account-access-story:hover .account-access-story__item[b-0xabxrffhh],
.account-access-story:hover .account-access-story__progress i[b-0xabxrffhh]::after,
.account-access-story:focus-within .account-access-story__item[b-0xabxrffhh],
.account-access-story:focus-within .account-access-story__progress i[b-0xabxrffhh]::after {
  animation-play-state: paused;
}

/* Pausing the story pauses the glow with it, so the colours stay matched. */
.account-access-page:has(.account-access-story:hover)[b-0xabxrffhh]  .auth-glow,
.account-access-page:has(.account-access-story:focus-within)[b-0xabxrffhh]  .auth-glow {
  animation-play-state: paused;
}

/* Each slot is 25% of the cycle (8s); 1% is 0.32s.
   Headline: the old one leaves over the first 0.4s of the next slot while the
   new one arrives from 0.15s to 0.6s. The two overlap only faintly, so there
   is never an empty moment and never two legible headlines at once. */
@keyframes account-access-story-cycle-b-0xabxrffhh {
  0%, 0.46875% { opacity: 0; transform: translateY(var(--spacing-md)); }
  1.875%, 25% { opacity: 1; transform: translateY(var(--spacing-none)); }
  26.25%, 100% { opacity: 0; transform: translateY(calc(var(--spacing-sm) * -1)); }
}

@keyframes account-access-story-progress-b-0xabxrffhh {
  0% { transform: scaleX(0); }
  25% { transform: scaleX(1); }
  25.01%, 100% { transform: scaleX(0); }
}

.account-access-form-panel[b-0xabxrffhh] {
  align-self: start;
  width: 100%;
  max-width: var(--ds-account-form-width);
  min-height: var(--ds-account-form-stage-height);
}

/* A short laptop screen: drop the lift and the tall story block, so the form
   is centred in the space there is rather than pinned under the header. */
@media (max-height: 760px) {
  /* Not a token: zero is the absence of the lift, not a design value. */
  .account-access-page[b-0xabxrffhh] { --ds-account-story-lift: 0px; }
  .account-access-content[b-0xabxrffhh] { padding-block: var(--spacing-2xl); }
  .account-access-story[b-0xabxrffhh] { min-height: 0; }
}

/* A small laptop. The fixed composition no longer fits, so the two columns
   become flexible and share the width: the story keeps its place beside the
   form at 1024px, and only drops above it when the window is too narrow for
   both, which it works out itself rather than at a second breakpoint. The lift
   goes because it only makes sense against the full-height composition. */
@media (max-width: 1180px) {
  /* Not a token: zero is the absence of the lift, not a design value. */
  .account-access-page[b-0xabxrffhh] { --ds-account-story-lift: 0px; }

  /* The same nudge, taken from the right instead. The columns already reach
     both gutters here, so moving the group left would push it into the edge;
     narrowing it from the right shifts its centre by the same amount while
     the left edge stays on the gutter. It fades out toward phone width, where
     the columns stack and a lopsided single column would look like a mistake:
     full at 1016px and wider, nothing at 760px and narrower. */
  .account-access-content[b-0xabxrffhh] {
    left: 0;
    padding-inline-end: var(--ds-account-optical-shift-narrow);
  }

  .account-access-page[b-0xabxrffhh] {
    /* Not tokens: the widths between which the nudge fades out. */
    --ds-account-optical-shift-narrow: clamp(0px, calc((100vw - 760px) / 8), var(--ds-account-optical-shift));
  }

  .account-access-content[b-0xabxrffhh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: var(--spacing-3xl) var(--ds-account-column-gap);
  }

  .account-access-story[b-0xabxrffhh] {
    flex: 1 1 var(--ds-account-story-min);
    min-height: 0;
  }

  .account-access-form-panel[b-0xabxrffhh] {
    flex: 1 1 var(--ds-account-form-min);
  }

  .account-access-page[b-0xabxrffhh] {
    /* Not tokens: the narrowest each column can go and still read well. Below
       their sum plus the gap, the form wraps under the story. */
    --ds-account-story-min: 320px;
    --ds-account-form-min: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-access-story__item[b-0xabxrffhh],
  .account-access-story__progress i[b-0xabxrffhh]::after { animation: none; }

  .account-access-story__item[b-0xabxrffhh] { display: none; }
  .account-access-story__item:first-child[b-0xabxrffhh] { display: grid; opacity: 1; transform: none; }
  .account-access-story__progress[b-0xabxrffhh] { display: none; }
}
/* /Components/Layout/Auth/AuthPanelLayout.razor.rz.scp.css */
.account-panel-page[b-z3okcd196j] {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--spacing-2xl) var(--ds-account-panel-gutter);
  color: var(--colors-text-primary);
  /* No gradient: only Sign In and Sign Up carry the glow. */
  background: var(--colors-surface-background);
}

.account-panel-page[b-z3okcd196j] {
  /* The same fluid gutter as the Sign In shell: between two steps of the
     spacing scale; only the rate is not a token. */
  --ds-account-panel-gutter: clamp(var(--spacing-xl), 3.5vw, var(--spacing-4xl));
}

.account-panel-header[b-z3okcd196j] {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.account-panel-brand[b-z3okcd196j] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--colors-text-primary);
  text-decoration: none;
}

.account-panel-brand:hover[b-z3okcd196j] { color: var(--colors-text-primary); }

.account-panel[b-z3okcd196j] {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--spacing-2xl);
  width: 100%;
  max-width: calc(var(--spacing-4xl) * 9);
  margin: auto;
  padding-block: var(--spacing-4xl);
}

/* The parts every panel page shares: a centred intro, a full-width primary
   action, and a success state. Pages name them; the look lives here. */
.account-panel[b-z3okcd196j]  .account-panel__intro,
.account-panel[b-z3okcd196j]  .account-panel__done {
  display: grid;
  gap: var(--spacing-sm);
  text-align: center;
}

.account-panel[b-z3okcd196j]  .account-panel__intro > p,
.account-panel[b-z3okcd196j]  .account-panel__done > p { color: var(--colors-text-muted); }

.account-panel[b-z3okcd196j]  .account-panel__primary { width: 100%; }

.account-panel[b-z3okcd196j]  .account-panel__done { justify-items: center; }

.account-panel[b-z3okcd196j]  .account-panel__done-icon {
  display: grid;
  place-items: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  margin-bottom: var(--spacing-sm);
  color: var(--colors-feedback-success);
  background: var(--colors-feedback-success-subtle);
  border-radius: var(--radius-radius-full);
}

.account-panel[b-z3okcd196j]  .account-panel__done > .account-panel__primary { margin-top: var(--spacing-lg); }

.account-panel[b-z3okcd196j]  .account-panel__form {
  display: grid;
  gap: var(--spacing-lg);
}

.account-panel[b-z3okcd196j]  .account-panel__back {
  justify-self: center;
  color: var(--colors-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--colors-surface-border);
  text-underline-offset: var(--spacing-xs);
}

.account-panel[b-z3okcd196j]  .account-panel__back:hover {
  color: var(--colors-text-primary);
  text-decoration-color: currentColor;
}
/* /Components/Layout/Auth/LogoDownloadMenu.razor.rz.scp.css */
/* Component-local, per FilterPopover's convention: these sit on the
   component's own root, never on :root. */
.logo-download-menu[b-8w162uvf9c] {
  position: relative;
  display: inline-flex;
}

.logo-download-menu__dismiss[b-8w162uvf9c] {
  position: fixed;
  inset: 0;
  z-index: var(--ds-logo-menu-layer);
  padding: var(--spacing-none);
  background: transparent;
  border: 0;
  cursor: default;
}

.logo-download-menu__menu[b-8w162uvf9c] {
  position: absolute;
  z-index: calc(var(--ds-logo-menu-layer) + 1);
  display: grid;
  gap: var(--spacing-2xs);
  min-width: var(--ds-logo-menu-width);
  padding: var(--spacing-sm);
  background: var(--colors-surface-popover);
  color: var(--colors-surface-popover-foreground);
  border: var(--ds-logo-menu-border-width) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
  box-shadow: 0 var(--spacing-md) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.logo-download-menu__option[b-8w162uvf9c] {
  display: grid;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-radius-md);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.logo-download-menu__option:hover[b-8w162uvf9c],
.logo-download-menu__option:focus-visible[b-8w162uvf9c] {
  background: var(--colors-interaction-hover);
}

.logo-download-menu__option[b-8w162uvf9c]  strong { color: var(--colors-text-primary); }
.logo-download-menu__option[b-8w162uvf9c]  small { color: var(--colors-text-muted); }

.logo-download-menu[b-8w162uvf9c] {
  /* Gaps in the token set, same as FilterPopover: no border-width scale,
     no z-index scale, no component width scale. */
  --ds-logo-menu-border-width: 1px;
  --ds-logo-menu-layer: 60;
  --ds-logo-menu-width: 176px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* The reconnect state as a status line, not a wall. The root spans the
   viewport only so that a hairline can sit at its top edge and a pill at its
   foot; it takes no pointer events itself, so the page beneath stays
   readable and scrollable throughout. The pill is the one thing that can be
   clicked, and only grows buttons once there is something to decide.

   The state classes are the framework's and must keep their names. */

.reconnect[b-9p940i2ge8] {
    /* Gaps in the token set: the toast's own geometry is a brand decision. */
    --ds-reconnect-width: 440px;
    --ds-reconnect-line: 3px;
    --ds-reconnect-hairline: 1px;
    --ds-reconnect-enter: 320ms;
    --ds-reconnect-lift: 12px;
    --ds-reconnect-button-height: 40px;
    --ds-reconnect-foot: calc(env(safe-area-inset-bottom, 0px) + var(--spacing-xl));

    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    pointer-events: none;
}

/* Present in any state the framework can put us in. */
.reconnect.components-reconnect-show[b-9p940i2ge8],
.reconnect.components-reconnect-retrying[b-9p940i2ge8],
.reconnect.components-reconnect-failed[b-9p940i2ge8],
.reconnect.components-reconnect-paused[b-9p940i2ge8],
.reconnect.components-reconnect-resume-failed[b-9p940i2ge8],
.reconnect.components-reconnect-rejected[b-9p940i2ge8] {
    display: block;
}

/* ---- Which lines show in which state ---------------------------------- */

.components-reconnect-first-attempt-visible[b-9p940i2ge8],
.components-reconnect-repeated-attempt-visible[b-9p940i2ge8],
.components-reconnect-failed-visible[b-9p940i2ge8],
.components-pause-visible[b-9p940i2ge8],
.components-resume-failed-visible[b-9p940i2ge8] {
    display: none;
}

.reconnect.components-reconnect-show .components-reconnect-first-attempt-visible[b-9p940i2ge8],
.reconnect.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9p940i2ge8],
.reconnect.components-reconnect-failed .components-reconnect-failed-visible[b-9p940i2ge8],
.reconnect.components-reconnect-paused .components-pause-visible[b-9p940i2ge8],
.reconnect.components-reconnect-resume-failed .components-resume-failed-visible[b-9p940i2ge8] {
    display: block;
}

/* The relay dots run while an attempt is in progress; otherwise the mark rests. */
.reconnect__loader[b-9p940i2ge8] { display: none; }
.reconnect__rest[b-9p940i2ge8] { display: grid; }
.reconnect.components-reconnect-show .reconnect__loader[b-9p940i2ge8],
.reconnect.components-reconnect-retrying .reconnect__loader[b-9p940i2ge8] { display: grid; }
.reconnect.components-reconnect-show .reconnect__rest[b-9p940i2ge8],
.reconnect.components-reconnect-retrying .reconnect__rest[b-9p940i2ge8] { display: none; }

/* ---- The hairline along the top edge ----------------------------------- */

.reconnect__line[b-9p940i2ge8] {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--ds-reconnect-line);
    display: none;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--cadence-teal) 18%, transparent);
}

.reconnect__line[b-9p940i2ge8]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 32%;
    background: linear-gradient(90deg, transparent, var(--cadence-teal), var(--cadence-terracotta), transparent);
    animation: reconnect-sweep-b-9p940i2ge8 1.4s var(--cadence-ease) infinite;
}

.reconnect.components-reconnect-show .reconnect__line[b-9p940i2ge8],
.reconnect.components-reconnect-retrying .reconnect__line[b-9p940i2ge8] { display: block; }

/* Once the attempt has given up the line rests in terracotta, no sweep. */
.reconnect.components-reconnect-failed .reconnect__line[b-9p940i2ge8],
.reconnect.components-reconnect-resume-failed .reconnect__line[b-9p940i2ge8] {
    display: block;
    background-color: var(--cadence-terracotta);
}
.reconnect.components-reconnect-failed .reconnect__line[b-9p940i2ge8]::after,
.reconnect.components-reconnect-resume-failed .reconnect__line[b-9p940i2ge8]::after { display: none; }

@keyframes reconnect-sweep-b-9p940i2ge8 {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ---- The pill at the foot ---------------------------------------------- */

.reconnect__toast[b-9p940i2ge8] {
    position: absolute;
    left: 50%;
    bottom: var(--ds-reconnect-foot);
    width: min(var(--ds-reconnect-width), calc(100vw - 2 * var(--spacing-lg)));
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--colors-text-primary);
    background-color: var(--colors-surface-elevated);
    border: var(--ds-reconnect-hairline) solid var(--colors-surface-border);
    border-radius: var(--radius-radius-3xl) var(--radius-radius-3xl) var(--radius-radius-3xl) var(--radius-radius-sm);
    box-shadow:
        0 var(--spacing-2xs) var(--spacing-md) var(--colors-surface-shadow),
        0 var(--spacing-md) var(--spacing-3xl) var(--colors-surface-shadow-diffuse);
    pointer-events: auto;
    transform: translate(-50%, 0);
    animation: reconnect-rise-b-9p940i2ge8 var(--ds-reconnect-enter) var(--cadence-ease) both;
}

@keyframes reconnect-rise-b-9p940i2ge8 {
    0%   { opacity: 0; transform: translate(-50%, var(--ds-reconnect-lift)); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

.reconnect__figure[b-9p940i2ge8] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

.reconnect__copy[b-9p940i2ge8] {
    display: grid;
    gap: var(--spacing-2xs);
    min-width: 0;
}

/* One line in the brand's sans while reconnecting; the serif title only
   appears once there is a decision to make. */
.reconnect__title[b-9p940i2ge8] {
    margin: 0;
    font-family: var(--cadence-font-sans);
    font-size: var(--typography-size-text-sm); /* text-style-exempt: brand sans */
    font-weight: 600; /* text-style-exempt: brand status weight */
    line-height: var(--typography-leading-leading-base);
    color: var(--colors-text-primary);
    text-wrap: pretty;
}

.reconnect.components-reconnect-failed .reconnect__title[b-9p940i2ge8],
.reconnect.components-reconnect-paused .reconnect__title[b-9p940i2ge8],
.reconnect.components-reconnect-resume-failed .reconnect__title[b-9p940i2ge8] {
    font-family: var(--cadence-font-serif);
    font-size: var(--typography-size-text-xl); /* text-style-exempt: brand serif */
    font-weight: 400; /* text-style-exempt: Instrument Serif has one weight */
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.reconnect__body[b-9p940i2ge8] {
    margin: 0;
    font-family: var(--cadence-font-sans);
    font-size: var(--typography-size-text-sm); /* text-style-exempt: brand sans */
    line-height: var(--typography-leading-leading-base);
    color: var(--colors-text-secondary);
    text-wrap: pretty;
}

.reconnect__count[b-9p940i2ge8] {
    font-variant-numeric: tabular-nums;
    color: var(--cadence-terracotta);
}

/* Actions sit under the copy, spanning the full width, only in the states
   that have any; otherwise the row collapses to nothing. */
.reconnect__actions[b-9p940i2ge8] {
    grid-column: 1 / -1;
    display: none;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.reconnect.components-reconnect-failed .reconnect__actions[b-9p940i2ge8],
.reconnect.components-reconnect-paused .reconnect__actions[b-9p940i2ge8],
.reconnect.components-reconnect-resume-failed .reconnect__actions[b-9p940i2ge8] { display: flex; }

/* The brand's button: slate, square corner at the foot. */
.reconnect__button[b-9p940i2ge8] {
    display: none;
    min-height: var(--ds-reconnect-button-height);
    padding: 0 var(--spacing-lg);
    font-family: var(--cadence-font-sans);
    font-size: var(--typography-size-text-sm); /* text-style-exempt: brand sans */
    font-weight: 600; /* text-style-exempt: brand button weight */
    color: var(--cadence-linen);
    background-color: var(--cadence-slate);
    border: 0;
    border-radius: var(--radius-radius-3xl) var(--radius-radius-3xl) 0 var(--radius-radius-3xl);
    cursor: pointer;
    transition: background-color var(--cadence-action) var(--cadence-ease), transform var(--cadence-action) var(--cadence-ease);
}

.reconnect.components-reconnect-failed .components-reconnect-failed-visible.reconnect__button[b-9p940i2ge8],
.reconnect.components-reconnect-paused .components-pause-visible.reconnect__button[b-9p940i2ge8],
.reconnect.components-reconnect-resume-failed .components-resume-failed-visible.reconnect__button[b-9p940i2ge8] { display: inline-flex; align-items: center; }

.reconnect__button:hover[b-9p940i2ge8] { background-color: var(--cadence-night); }
.reconnect__button:active[b-9p940i2ge8] { transform: translateY(1px); }

.reconnect__button--quiet[b-9p940i2ge8] {
    color: var(--colors-text-primary);
    background-color: transparent;
    border: var(--ds-reconnect-hairline) solid var(--colors-surface-border);
}
.reconnect__button--quiet:hover[b-9p940i2ge8] { background-color: color-mix(in srgb, var(--colors-text-primary) 6%, transparent); }

.reconnect__button:focus-visible[b-9p940i2ge8] {
    outline: 2px solid var(--cadence-teal);
    outline-offset: 2px;
}

/* ---- Small screens and reduced motion ---------------------------------- */

@media (max-width: 480px) {
    .reconnect__actions[b-9p940i2ge8] { justify-content: stretch; }
    .reconnect__actions .reconnect__button[b-9p940i2ge8] { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .reconnect__toast[b-9p940i2ge8] { animation: none; }
    .reconnect__line[b-9p940i2ge8]::after { animation: none; width: 100%; }
}
/* /Components/Pages/Auth/CodeEntry.razor.rz.scp.css */
.code-entry[b-4kzamht9e3] { display: grid; gap: var(--spacing-sm); }

.code-entry__control[b-4kzamht9e3] {
  position: relative;
  display: block;
}

/* The real input sits over the boxes, invisible, so a tap anywhere on them
   focuses it and the keyboard and autofill see an ordinary text field. */
.code-entry__control > input[b-4kzamht9e3] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: text;
}

.code-entry__control > input:disabled[b-4kzamht9e3] { cursor: not-allowed; }

.code-entry__slots[b-4kzamht9e3] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-sm);
}

.code-entry__slots i[b-4kzamht9e3] {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-xl);
  font-style: normal;
  transition:
    border-color var(--ds-motion-fast) var(--ds-motion-ease),
    box-shadow var(--ds-motion-fast) var(--ds-motion-ease);
}

/* The box the next digit goes into lights up while the field has focus, with
   the same border and ring a focused Input uses (Input.razor.css). */
.code-entry__control:focus-within .code-entry__slots i.is-current[b-4kzamht9e3] {
  border-color: var(--colors-brand-primary);
  box-shadow: inset 0 0 0 var(--ds-hairline) var(--colors-brand-primary);
}

.code-entry.is-error .code-entry__slots i[b-4kzamht9e3] {
  border-color: var(--colors-feedback-destructive-border);
}

/* After a wrong code the field takes focus again; as on a focused Input in
   error, the current box stays red rather than turning brand colour. */
.code-entry.is-error .code-entry__control:focus-within .code-entry__slots i.is-current[b-4kzamht9e3] {
  border-color: var(--colors-feedback-destructive);
  box-shadow: inset 0 0 0 var(--ds-hairline) var(--colors-feedback-destructive);
}

.code-entry__control:has(input:disabled) .code-entry__slots i[b-4kzamht9e3] {
  background: var(--colors-interaction-disabled-background);
}

[b-4kzamht9e3] .code-entry__message { text-align: center; }
[b-4kzamht9e3] .code-entry__message--hint { color: var(--colors-text-muted); }
[b-4kzamht9e3] .code-entry__message--error { color: var(--colors-feedback-destructive-text); }

.code-entry__actions[b-4kzamht9e3] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-md);
  color: var(--colors-text-muted);
}

.code-entry__resend[b-4kzamht9e3] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
}

.code-entry__actions button[b-4kzamht9e3] {
  padding: var(--spacing-none);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.code-entry__resend button[b-4kzamht9e3] { color: var(--colors-text-link); }
.code-entry__resend button:hover:not(:disabled)[b-4kzamht9e3] { color: var(--colors-text-link-hover); }

.code-entry__actions button:disabled[b-4kzamht9e3] {
  cursor: default;
  opacity: var(--ds-code-disabled-opacity);
}

.code-entry__actions[b-4kzamht9e3] {
  /* Not a token: there is no opacity scale for a de-emphasised control. */
  --ds-code-disabled-opacity: 0.5;
}

.code-entry__actions .code-entry__change[b-4kzamht9e3] {
  color: var(--colors-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--colors-surface-border);
  text-underline-offset: var(--spacing-xs);
}

.code-entry__actions .code-entry__change:hover:not(:disabled)[b-4kzamht9e3] {
  color: var(--colors-text-primary);
  text-decoration-color: currentColor;
}
/* /Components/Pages/Auth/FacebookSignInButton.razor.rz.scp.css */
/* Meta's sign-in button: Facebook blue, white label and mark, the same in light and dark. The colours are
   Meta's, not ours, which is why they are literals (see app.css). */

.facebook-signin-wrap[b-5gt99fxati]  .facebook-signin {
  width: 100%;
  margin-top: var(--spacing-sm);
  color: var(--ds-facebook-label);
  background: var(--ds-facebook-fill);
  border: var(--ds-hairline) solid var(--ds-facebook-fill);
}

.facebook-signin-wrap[b-5gt99fxati]  .facebook-signin:hover:not(:disabled) {
  color: var(--ds-facebook-label);
  background: var(--ds-facebook-fill);
  filter: brightness(var(--ds-facebook-hover-brightness));
}

.facebook-signin-wrap[b-5gt99fxati]  .facebook-signin svg {
  width: var(--icon-size-icon-md);
  height: var(--icon-size-icon-md);
}
/* /Components/Pages/Auth/GoogleSignInButton.razor.rz.scp.css */
/* Google's published light and dark sign-in buttons. The fills, outlines and
   label colours are Google's, not ours, which is why they are literals. */

/* The colours themselves are in app.css, because they switch with the theme
   and :root cannot be reached from a scoped stylesheet. */

.google-signin-wrap[b-iv9y03datb]  .google-signin {
  width: 100%;
  color: var(--ds-google-label);
  background: var(--ds-google-fill);
  /* The same border as the text fields above it, so the three controls read
     as one set. Google's guidelines allow a neutral outline. */
  border: var(--ds-hairline) solid var(--colors-surface-input);
}

.google-signin-wrap[b-iv9y03datb]  .google-signin:hover:not(:disabled) {
  color: var(--ds-google-label);
  background: color-mix(in srgb, var(--ds-google-label) var(--ds-google-hover-mix), var(--ds-google-fill));
}

.google-signin-wrap[b-iv9y03datb]  .google-signin svg {
  width: var(--icon-size-icon-md);
  height: var(--icon-size-icon-md);
}
/* /Components/Pages/Auth/Login/Login.razor.rz.scp.css */
.login-intro[b-1c55db80bb] {
  display: grid;
  gap: var(--spacing-xs);
}

[b-1c55db80bb] .login-intro__copy { color: var(--colors-text-muted); }

.login-form[b-1c55db80bb] {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.login-form__fields[b-1c55db80bb] {
  display: grid;
  gap: var(--spacing-lg);
}

.login-form__recovery[b-1c55db80bb] {
  display: grid;
  justify-items: end;
  gap: var(--spacing-sm);
  margin-top: calc(var(--spacing-sm) * -1);
}

.login-form__forgot[b-1c55db80bb] {
  padding: var(--spacing-none);
  color: var(--colors-text-link);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.login-form__forgot:hover:not(:disabled)[b-1c55db80bb] { color: var(--colors-text-link-hover); }

.login-form__forgot:disabled[b-1c55db80bb] { cursor: default; }

[b-1c55db80bb] .login-form__submit { width: 100%; }

.login-form__divider[b-1c55db80bb] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--colors-text-muted);
}

.login-form__divider > span[b-1c55db80bb] {
  height: var(--ds-hairline);
  background: var(--colors-surface-border);
}

.login-form__signup[b-1c55db80bb] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  color: var(--colors-text-muted);
}

.login-form__signup a[b-1c55db80bb] { font-weight: var(--typography-font-weight-semibold); }
/* /Components/Pages/Auth/PasswordInput.razor.rz.scp.css */
.password-input__toggle[b-ttrw0lcb0l] {
  display: grid;
  place-items: center;
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  padding: var(--spacing-none);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.password-input__toggle:hover[b-ttrw0lcb0l] {
  color: var(--colors-text-primary);
  background: var(--colors-interaction-hover);
}

.password-strength[b-ttrw0lcb0l] {
  display: grid;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.password-strength__heading[b-ttrw0lcb0l] {
  display: flex;
  justify-content: space-between;
  color: var(--colors-text-secondary);
}

.password-strength__heading[b-ttrw0lcb0l] >  span:last-child { color: var(--password-strength-color); }

.password-strength__meter[b-ttrw0lcb0l] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xs);
}

.password-strength__meter i[b-ttrw0lcb0l] {
  height: var(--spacing-2xs);
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  transition: background-color var(--ds-motion-fast) var(--ds-motion-ease);
}

.password-strength__meter i.is-active[b-ttrw0lcb0l] { background: var(--password-strength-color); }

.password-strength__rules[b-ttrw0lcb0l] {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-none);
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none);
  color: var(--colors-text-muted);
  list-style: none;
}

.password-strength__rules li[b-ttrw0lcb0l] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.password-strength__rules li[b-ttrw0lcb0l] >  svg {
  flex: 0 0 auto;
  color: var(--colors-surface-border);
}

.password-strength__rules li.is-met[b-ttrw0lcb0l] { color: var(--colors-text-secondary); }
.password-strength__rules li.is-met[b-ttrw0lcb0l] >  svg { color: var(--colors-feedback-success); }

.password-strength.strength-weak[b-ttrw0lcb0l] { --password-strength-color: var(--colors-feedback-destructive); }
.password-strength.strength-fair[b-ttrw0lcb0l] { --password-strength-color: var(--colors-feedback-warning); }
.password-strength.strength-good[b-ttrw0lcb0l] { --password-strength-color: var(--colors-feedback-info); }
.password-strength.strength-strong[b-ttrw0lcb0l] { --password-strength-color: var(--colors-feedback-success); }
/* /Components/Pages/Auth/Register/Register.razor.rz.scp.css */
.signup-intro[b-ic5hkk3s63] {
  display: grid;
  gap: var(--spacing-xs);
}

[b-ic5hkk3s63] .signup-intro__copy { color: var(--colors-text-muted); }

.signup-form[b-ic5hkk3s63] {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.signup-form__fields[b-ic5hkk3s63] {
  display: grid;
  gap: var(--spacing-lg);
}

.signup-form__password[b-ic5hkk3s63] {
  display: grid;
  gap: var(--spacing-sm);
}

.signup-form__password-match[b-ic5hkk3s63] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  color: var(--colors-feedback-success);
}

.signup-form__password-match[b-ic5hkk3s63] >  svg { flex: 0 0 auto; }

.signup-form__divider[b-ic5hkk3s63] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--colors-text-muted);
}

.signup-form__divider > span[b-ic5hkk3s63] {
  height: var(--ds-hairline);
  background: var(--colors-surface-border);
}

[b-ic5hkk3s63] .signup-form__submit { width: 100%; }

[b-ic5hkk3s63] .signup-form__legal {
  color: var(--colors-text-muted);
  text-align: center;
}

.signup-form[b-ic5hkk3s63]  .signup-form__legal a { color: var(--colors-text-link); }
.signup-form[b-ic5hkk3s63]  .signup-form__legal a:hover { color: var(--colors-text-link-hover); }

.signup-form__signin[b-ic5hkk3s63] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  color: var(--colors-text-muted);
}

.signup-form__signin a[b-ic5hkk3s63] { font-weight: var(--typography-font-weight-semibold); }
/* /Components/Pages/Dashboard/AiAgents/AgentAdvanced.razor.rz.scp.css */
/* Advanced settings: one quiet card, closed until opened on purpose (power
   users only); inside, a white card per topic that opens on its own. The basics' rhythm: 16px from the
   heading to the cards, 12px between cards, 20px inside them, rows at least
   72px, 4px between a title and its description. Cards are white with a
   hairline, never muted: the page is the muted grey. */

.agent-advanced[b-ifxasetv4w] {
  /* Missing from the token set: no icon-badge size, control measure, row
     height or disclosure motion duration. */
  --ds-agent-advanced-icon: 40px;
  --ds-agent-advanced-control: 320px;
  --ds-agent-advanced-row: 72px;
  --ds-agent-advanced-motion: 180ms;

  display: grid;
  gap: var(--spacing-lg);
}

[b-ifxasetv4w] .agent-advanced__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }
.agent-advanced__text[b-ifxasetv4w] { display: grid; gap: var(--spacing-xs); align-content: center; min-width: 0; }
.agent-advanced__text[b-ifxasetv4w]  strong,
.agent-advanced__row[b-ifxasetv4w] >  strong,
.agent-advanced__field[b-ifxasetv4w] >  strong { color: var(--colors-text-primary); }

.agent-advanced__title[b-ifxasetv4w] { display: flex; gap: var(--spacing-sm); align-items: center; }

/* The fold: a white card that says what is inside and that it is optional. */
.agent-advanced[b-ifxasetv4w]  .agent-advanced__toggle {
  display: grid;
  grid-template-columns: var(--ds-agent-advanced-icon) minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: center;
  min-height: var(--ds-agent-advanced-row);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  transition: border-color var(--ds-agent-advanced-motion) ease;
}
.agent-advanced[b-ifxasetv4w]  .agent-advanced__toggle:hover,
.agent-advanced[b-ifxasetv4w]  .agent-advanced__toggle.is-open { border-color: var(--colors-accent-brand-border); }
.agent-advanced[b-ifxasetv4w]  .agent-advanced__toggle.is-open .agent-advanced__chevron { transform: rotate(180deg); }

.agent-advanced__icon[b-ifxasetv4w] {
  display: grid;
  place-items: center;
  width: var(--ds-agent-advanced-icon);
  height: var(--ds-agent-advanced-icon);
  color: var(--colors-icon-brand);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-lg);
}
/* The fold's own icon is neutral: these are not part of the simple path. */
/* Blue is knowledge, as on the setup screen and AI Operations. */
.agent-advanced__icon.is-knowledge[b-ifxasetv4w] { color: var(--colors-accent-blue-text); background: var(--colors-accent-blue-subtle); }
.agent-advanced__icon.is-quiet[b-ifxasetv4w] { color: var(--colors-icon-secondary); background: var(--colors-surface-muted); }
.agent-advanced__chevron[b-ifxasetv4w] {
  display: grid;
  color: var(--colors-icon-secondary);
  transition: transform var(--ds-agent-advanced-motion) ease;
}
.agent-advanced__group.is-open[b-ifxasetv4w]  .agent-advanced__head .agent-advanced__chevron { transform: rotate(180deg); }

/* ── Topics ──────────────────────────────────────────────────────────────── */

.agent-advanced__groups[b-ifxasetv4w] {
  display: grid;
  gap: var(--spacing-md);
  animation: agent-advanced-open-b-ifxasetv4w var(--ds-agent-advanced-motion) var(--ds-motion-enter);
}
.agent-advanced__group[b-ifxasetv4w] {
  display: grid;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  transition: border-color var(--ds-agent-advanced-motion) ease;
}
.agent-advanced__group:hover[b-ifxasetv4w],
.agent-advanced__group.is-open[b-ifxasetv4w] { border-color: var(--colors-accent-brand-border); }
.agent-advanced__group[b-ifxasetv4w]  .agent-advanced__head {
  display: grid;
  grid-template-columns: var(--ds-agent-advanced-icon) minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: center;
  width: 100%;
  min-height: var(--ds-agent-advanced-row);
  padding: var(--spacing-lg) var(--spacing-xl);
}
.agent-advanced__group[b-ifxasetv4w]  .agent-advanced__head h3,
.agent-advanced__head-static[b-ifxasetv4w]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-advanced__group.is-open[b-ifxasetv4w]  .agent-advanced__head { border-bottom: var(--ds-hairline) solid var(--colors-surface-border); }
.agent-advanced__content[b-ifxasetv4w] {
  display: grid;
  animation: agent-advanced-open-b-ifxasetv4w var(--ds-agent-advanced-motion) var(--ds-motion-enter);
}
@keyframes agent-advanced-open-b-ifxasetv4w {
  from { opacity: 0; transform: translateY(calc(-1 * var(--spacing-xs))); }
}

/* ── Settings inside a topic ─────────────────────────────────────────────── */

.agent-advanced__row[b-ifxasetv4w] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-xl);
  align-items: center;
  min-height: var(--ds-agent-advanced-row);
  padding: var(--spacing-lg) var(--spacing-xl);
}
.agent-advanced__content > .agent-advanced__row + .agent-advanced__row[b-ifxasetv4w],
.agent-advanced__content > .agent-advanced__row + .agent-advanced__field[b-ifxasetv4w],
.agent-advanced__content > .agent-advanced__field + .agent-advanced__field[b-ifxasetv4w],
.agent-advanced__content > .agent-advanced__field + .agent-advanced__row[b-ifxasetv4w],
.agent-advanced__topics + .agent-advanced__field[b-ifxasetv4w] { border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.agent-advanced__field[b-ifxasetv4w]  .agent-advanced__add-knowledge { justify-self: start; }
.agent-advanced__row[b-ifxasetv4w]  .ds-segmented { width: var(--ds-agent-advanced-control); }
.agent-advanced__field[b-ifxasetv4w] { display: grid; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl); }
.agent-advanced__field.is-indented[b-ifxasetv4w] { padding-top: var(--spacing-none); border-top: 0; }

/* The notes' files, one per row, and the tools to add a file or a voice note. */
.agent-advanced__files[b-ifxasetv4w] { display: grid; gap: var(--spacing-xs); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.agent-advanced__files li[b-ifxasetv4w] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}
.agent-advanced__files li[b-ifxasetv4w]  span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-advanced__note-tools[b-ifxasetv4w] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
/* Opened on purpose: brought into view with room above it. */
.agent-advanced[b-ifxasetv4w],
.agent-advanced__group[b-ifxasetv4w] { scroll-margin-top: var(--spacing-xl); }

/* Shared knowledge is a quick scan, not another form. */
/* Each topic a chip that switches on and off: on, ticked in brand; off,
   plain with a cross; not taught yet, muted and not a choice. */
.agent-advanced__topics[b-ifxasetv4w] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.agent-advanced__topics[b-ifxasetv4w]  .agent-advanced__topic {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.agent-advanced__topics[b-ifxasetv4w]  .agent-advanced__topic.is-on {
  color: var(--colors-text-primary);
  background: var(--colors-accent-brand-subtle);
  border-color: var(--colors-accent-brand-border);
}
.agent-advanced__topics[b-ifxasetv4w]  .agent-advanced__topic.is-on .ds-icon { color: var(--colors-icon-brand); }
.agent-advanced__topics[b-ifxasetv4w]  .agent-advanced__topic:disabled { color: var(--colors-text-muted); background: var(--colors-surface-muted); border-color: transparent; }

.agent-advanced__head-static[b-ifxasetv4w] {
  display: grid;
  grid-template-columns: var(--ds-agent-advanced-icon) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: center;
  min-width: 0;
}

@media (max-width: 1180px) {
  .agent-advanced__row[b-ifxasetv4w] { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); }
  .agent-advanced__row[b-ifxasetv4w]  .ds-segmented { width: 100%; }
  .agent-advanced__canvas[b-ifxasetv4w]  .ds-button { justify-self: start; }
  /* Stacked: a label like "Always" and a switch keep their own size, under the words. */
  .agent-advanced__row[b-ifxasetv4w] >  .status-badge,
  .agent-advanced__row[b-ifxasetv4w] >  .toggle { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-advanced__chevron[b-ifxasetv4w],
  .agent-advanced__group[b-ifxasetv4w] { transition: none; }
  .agent-advanced__content[b-ifxasetv4w],
  .agent-advanced__groups[b-ifxasetv4w] { animation: none; }
}

/* "More options" (Concept B): the optional extras, folded under one row. */
.agent-advanced[b-ifxasetv4w]  .agent-advanced__more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-xl);
  align-items: center;
  width: 100%;
  min-height: var(--ds-agent-advanced-row);
  padding: var(--spacing-lg) var(--spacing-xl);
  text-align: left;
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
}
.agent-advanced[b-ifxasetv4w]  .agent-advanced__more:hover { background: var(--colors-interaction-hover); }
.agent-advanced[b-ifxasetv4w]  .agent-advanced__more.is-open .agent-advanced__chevron { transform: rotate(180deg); }
/* /Components/Pages/Dashboard/AiAgents/AgentBasics.razor.rz.scp.css */
/* An agent's basics: the look and name in one card, and channels and safety
   as rows in one card each. One rhythm throughout:
   16px from a heading to its content, 20px inside a card, 16px between
   cards, rows at least 72px, and 4px between a title and its (Prose)
   description. Anything resting on the page is a white card with a hairline:
   the page itself is the muted grey, so muted panels would vanish into it. */

.agent-basics__section[b-pa29fgkiyf] {
  /* Missing from the token set: no icon-badge, avatar or row sizes, focus
     ring width, or motion value for a choice. The look control matches the
     Input's 58px field. */
  --ds-agent-basics-icon: 40px;
  --ds-agent-basics-avatar: 56px;
  --ds-agent-basics-look-avatar: 40px;
  --ds-agent-basics-look: 220px;
  --ds-agent-basics-field: 58px;
  --ds-agent-basics-row: 72px;
  --ds-agent-basics-ring: 2px;
  --ds-agent-basics-motion: 200ms;

  display: grid;
  gap: var(--spacing-lg);
}
.agent-basics__section[b-pa29fgkiyf]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
[b-pa29fgkiyf] .agent-basics__muted { color: var(--colors-text-muted); }
.agent-basics__text[b-pa29fgkiyf] { display: grid; gap: var(--spacing-xs); align-content: center; min-width: 0; }
/* A rule's title with its tag (Always on, Needs care) beside it. */
.agent-basics__title-row[b-pa29fgkiyf] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); align-items: center; }
.agent-basics__text[b-pa29fgkiyf]  strong { color: var(--colors-text-primary); }

/* ── Name and look ───────────────────────────────────────────────────────── */

.agent-basics__identity[b-pa29fgkiyf] {
  display: grid;
  grid-template-columns: var(--ds-agent-basics-look) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.agent-basics__identity[b-pa29fgkiyf]  .agent-basics__look {
  display: grid;
  grid-template-columns: var(--ds-agent-basics-look-avatar) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  height: var(--ds-agent-basics-field);
  padding: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-sm);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.agent-basics__identity[b-pa29fgkiyf]  .agent-basics__look:hover,
.agent-basics__identity[b-pa29fgkiyf]  .agent-basics__look.is-open { border-color: var(--colors-accent-brand-border); }
.agent-basics__identity[b-pa29fgkiyf]  .agent-basics__look > img {
  width: var(--ds-agent-basics-look-avatar);
  height: var(--ds-agent-basics-look-avatar);
  object-fit: cover;
  border-radius: var(--radius-radius-full);
}
.agent-basics__chevron[b-pa29fgkiyf] { display: grid; color: var(--colors-icon-secondary); transition: transform var(--ds-agent-basics-motion) ease; }
.agent-basics__identity[b-pa29fgkiyf]  .is-open .agent-basics__chevron { transform: rotate(180deg); }
/* The choice of looks opens inside the card, under both. */
.agent-basics__looks[b-pa29fgkiyf] {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
}
.agent-basics__avatars[b-pa29fgkiyf] { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.agent-basics__avatars[b-pa29fgkiyf]  .agent-basics__avatar {
  display: grid;
  place-items: center;
  width: var(--ds-agent-basics-avatar);
  height: var(--ds-agent-basics-avatar);
  padding: var(--spacing-none);
  overflow: hidden;
  border-radius: var(--radius-radius-full);
  box-shadow: 0 0 0 var(--ds-hairline) var(--colors-surface-border);
  transition: box-shadow var(--ds-agent-basics-motion) ease;
}
.agent-basics__avatars[b-pa29fgkiyf]  .agent-basics__avatar:hover { box-shadow: 0 0 0 var(--ds-agent-basics-ring) var(--colors-accent-brand-border); }
.agent-basics__avatars[b-pa29fgkiyf]  .agent-basics__avatar.is-chosen {
  box-shadow: 0 0 0 var(--ds-agent-basics-ring) var(--colors-surface-card), 0 0 0 calc(var(--ds-agent-basics-ring) * 2) var(--colors-brand-primary);
}
.agent-basics__avatars[b-pa29fgkiyf]  img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Channels and safety: one row each ───────────────────────────────────── */

.agent-basics__list[b-pa29fgkiyf] {
  display: grid;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  overflow: hidden;
  list-style: none;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.agent-basics__item[b-pa29fgkiyf] {
  display: grid;
  grid-template-columns: var(--ds-agent-basics-icon) minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: center;
  min-height: var(--ds-agent-basics-row);
  padding: var(--spacing-lg) var(--spacing-xl);
}
.agent-basics__item.is-on[b-pa29fgkiyf] { background: var(--colors-accent-brand-subtle); }
.agent-basics__item + .agent-basics__item[b-pa29fgkiyf] { border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.agent-basics__badge[b-pa29fgkiyf] {
  display: grid;
  place-items: center;
  width: var(--ds-agent-basics-icon);
  height: var(--ds-agent-basics-icon);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}
.agent-basics__badge.is-rule[b-pa29fgkiyf] { color: var(--colors-icon-secondary); }
.agent-basics__badge.is-knowledge[b-pa29fgkiyf] { color: var(--colors-accent-blue-text); background: var(--colors-accent-blue-subtle); }
.agent-basics__badge.is-handover[b-pa29fgkiyf] { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }
.agent-basics__badge.is-money[b-pa29fgkiyf] { color: var(--colors-accent-amber-text); background: var(--colors-accent-amber-subtle); }
/* A rule being changed: its control right under its words. */
.agent-basics__change[b-pa29fgkiyf] {
  display: grid;
  grid-column: 2 / -1;
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-xs);
}
.agent-basics__empty[b-pa29fgkiyf] {
  display: grid;
  grid-template-columns: var(--ds-agent-basics-icon) minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

@media (max-width: 1280px) {
  .agent-basics__identity[b-pa29fgkiyf] { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .agent-basics__avatars[b-pa29fgkiyf]  .agent-basics__avatar,
  .agent-basics__chevron[b-pa29fgkiyf] { transition: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AgentBuilderCanvas.razor.rz.scp.css */
/* The builder canvas page. The chrome is Blazor; the canvas inside
   .abc-canvas-host is drawn by js/agent-builder.js, which is why every rule
   for it goes through ::deep — the script's elements carry no scope attribute.
   The script's node boxes, inspector and bubble carry their own inline
   colours; the chrome, canvas field, palette and Pip are styled here. */

.abc-page[b-q6x00594zj] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: var(--colors-text-primary);
  background: var(--colors-surface-background);
}

.abc-page[b-q6x00594zj] {
  /* Gaps in the token set: no bar-height, control-height, panel-width,
     figure-size, z-index, border-width or motion scale. All measured from the
     script's own layout. */
  --ds-abc-hairline: 1px;
  --ds-abc-topbar: 60px;
  --ds-abc-contextbar: 42px;
  --ds-abc-back: 34px;
  --ds-abc-icon-box: 30px;
  --ds-abc-tab: 30px;
  --ds-abc-dot: 7px;
  --ds-abc-dots: 24px;
  --ds-abc-palette-btn: 34px;
  --ds-abc-palette-dot: 9px;
  --ds-abc-inspector: 272px;
  --ds-abc-pip: 120px;
  --ds-abc-pip-height: 132px;
  --ds-abc-pip-peek: 96px;
  --ds-abc-pip-peek-height: 108px;
  --ds-abc-pip-min: 22px;
  --ds-abc-empty-card: 380px;
  --ds-abc-empty-icon: 60px;
  --ds-abc-mascot-max: 1040px;
  --ds-abc-mascot-preview: 190px;
  --ds-abc-mascot-pip: 124px;
  --ds-abc-mascot-pip-height: 140px;
  --ds-abc-mascot-guide-pip: 108px;
  --ds-abc-mascot-guide-pip-height: 122px;
  --ds-abc-mascot-measure: 620px;
  --ds-abc-layer-edges: 1;
  --ds-abc-layer-nodes: 2;
  --ds-abc-layer-chrome: 6;
  --ds-abc-layer-inspector: 8;
  --ds-abc-layer-pip: 9;
  --ds-abc-layer-toast: 10;
  --ds-abc-motion: 150ms;
  --ds-abc-peek-motion: 250ms;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.abc-topbar[b-q6x00594zj] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  height: var(--ds-abc-topbar);
  padding: var(--spacing-none) var(--spacing-xl);
  background: var(--colors-surface-card);
  border-bottom: var(--ds-abc-hairline) solid var(--colors-surface-border);
}

.abc-topbar-left[b-q6x00594zj] { display: flex; gap: var(--spacing-sm); align-items: center; min-width: 0; }

.abc-back[b-q6x00594zj] {
  display: grid;
  place-items: center;
  width: var(--ds-abc-back);
  height: var(--ds-abc-back);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.abc-back:hover[b-q6x00594zj] { color: var(--colors-text-primary); background: var(--colors-interaction-hover); }

.abc-topbar-icon[b-q6x00594zj] {
  display: grid;
  place-items: center;
  width: var(--ds-abc-icon-box);
  height: var(--ds-abc-icon-box);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-md);
}

.abc-topbar-breadcrumb[b-q6x00594zj] { display: flex; gap: var(--spacing-sm); align-items: center; min-width: 0; }
[b-q6x00594zj] .abc-topbar-section { color: var(--colors-text-subtle); }
[b-q6x00594zj] .abc-topbar-sep { color: var(--colors-accent-neutral-border); }
[b-q6x00594zj] .abc-topbar-title { overflow: hidden; color: var(--colors-text-primary); white-space: nowrap; text-overflow: ellipsis; }

.abc-topbar-right[b-q6x00594zj] { display: flex; gap: var(--spacing-md); align-items: center; margin-left: auto; }

.abc-tab-group[b-q6x00594zj] {
  display: flex;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs);
  background: var(--colors-accent-neutral-border);
  border-radius: var(--radius-radius-full);
}

.abc-tab-group button[b-q6x00594zj] {
  height: var(--ds-abc-tab);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
  transition: background var(--ds-abc-motion) ease, color var(--ds-abc-motion) ease;
}

.abc-tab-group button.is-active[b-q6x00594zj] {
  color: var(--colors-brand-primary);
  background: var(--colors-surface-card);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-xs) var(--colors-surface-shadow);
}

/* ── Context bar ─────────────────────────────────────────────────────────── */

.abc-contextbar[b-q6x00594zj] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  height: var(--ds-abc-contextbar);
  padding: var(--spacing-none) var(--spacing-xl);
  background: var(--colors-surface-card);
  border-bottom: var(--ds-abc-hairline) solid var(--colors-surface-border);
}

[b-q6x00594zj] .abc-contextbar-glyph { color: var(--colors-brand-primary); }
[b-q6x00594zj] .abc-contextbar-title { color: var(--colors-text-primary); }
[b-q6x00594zj] .abc-contextbar-type,
[b-q6x00594zj] .abc-contextbar-count { color: var(--colors-text-muted); }
.abc-contextbar-div[b-q6x00594zj] { width: var(--ds-abc-hairline); height: var(--spacing-lg); background: var(--colors-surface-border); }
.abc-contextbar-status[b-q6x00594zj] { display: flex; gap: var(--spacing-sm); align-items: center; margin-left: auto; color: var(--colors-text-subtle); }
.abc-live-dot[b-q6x00594zj] { width: var(--ds-abc-dot); height: var(--ds-abc-dot); background: var(--colors-feedback-success); border-radius: var(--radius-radius-full); }

/* ── View area ───────────────────────────────────────────────────────────── */

.abc-view-area[b-q6x00594zj] { position: relative; display: flex; flex-direction: column; min-height: 0; }
.abc-canvas-host[b-q6x00594zj] { position: relative; flex: 1; min-height: 0; }

/* ── Canvas (script-rendered) ────────────────────────────────────────────── */

.abc-canvas-host[b-q6x00594zj]  .abc-cv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: default;
  background-color: var(--colors-surface-background);
  background-image: radial-gradient(circle, var(--colors-accent-neutral-border) 1.1px, transparent 1.1px);
  background-size: var(--ds-abc-dots) var(--ds-abc-dots);
}

.abc-canvas-host[b-q6x00594zj]  .abc-cv-edges { position: absolute; inset: 0; z-index: var(--ds-abc-layer-edges); width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.abc-canvas-host[b-q6x00594zj]  .abc-cv-nodes { position: absolute; inset: 0; z-index: var(--ds-abc-layer-nodes); }

.abc-canvas-host[b-q6x00594zj]  .abc-cv-empty {
  position: absolute;
  inset: 0;
  z-index: var(--ds-abc-layer-nodes);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.abc-canvas-host[b-q6x00594zj]  .abc-cv-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--ds-abc-empty-card);
  padding: var(--spacing-4xl) var(--spacing-3xl);
  text-align: center;
  background: var(--colors-surface-translucent);
  border: var(--spacing-2xs) dashed var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-2xl);
  pointer-events: auto;
}

.abc-canvas-host[b-q6x00594zj]  .abc-cv-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-abc-empty-icon);
  height: var(--ds-abc-empty-icon);
  margin-bottom: var(--spacing-lg);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-xl);
}

.abc-canvas-host[b-q6x00594zj]  .abc-cv-empty-title { margin-bottom: var(--spacing-sm); font-size: var(--typography-size-text-lg); font-weight: var(--typography-font-weight-bold); color: var(--colors-text-primary); }
.abc-canvas-host[b-q6x00594zj]  .abc-cv-empty-sub { margin-bottom: var(--spacing-xl); font-size: var(--typography-size-text-sm); line-height: var(--typography-leading-leading-base); color: var(--colors-text-muted); }
.abc-canvas-host[b-q6x00594zj]  .abc-cv-empty-btns { display: flex; gap: var(--spacing-sm); }

/* Buttons the script draws with Parrot's old .abc-btn classes, redrawn in the
   Button component's language. */
.abc-canvas-host[b-q6x00594zj]  .abc-btn {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  height: var(--ds-abc-palette-btn);
  padding: var(--spacing-none) var(--spacing-md);
  font-size: var(--typography-size-text-xs);
  font-weight: var(--typography-font-weight-semibold);
  border-radius: var(--radius-radius-full);
  cursor: pointer;
  transition: background var(--ds-abc-motion) ease;
}

.abc-canvas-host[b-q6x00594zj]  .abc-btn--ghost { color: var(--colors-text-secondary); background: var(--colors-surface-card); border: var(--ds-abc-hairline) solid var(--colors-surface-border); }
.abc-canvas-host[b-q6x00594zj]  .abc-btn--ghost:hover { background: var(--colors-interaction-hover); }
.abc-canvas-host[b-q6x00594zj]  .abc-btn--primary { color: var(--colors-text-on-primary); background: var(--colors-brand-primary); border: 0; }
.abc-canvas-host[b-q6x00594zj]  .abc-btn--primary:hover { background: var(--colors-brand-primary-hover); }

.abc-canvas-host[b-q6x00594zj]  .abc-palette {
  position: absolute;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  z-index: var(--ds-abc-layer-chrome);
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--colors-surface-card);
  border: var(--ds-abc-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
  box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--colors-surface-shadow);
}

.abc-canvas-host[b-q6x00594zj]  .abc-palette-btn {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  height: var(--ds-abc-palette-btn);
  padding: var(--spacing-none) var(--spacing-md);
  font-size: var(--typography-size-text-xs);
  font-weight: var(--typography-font-weight-semibold);
  color: var(--colors-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-md);
  cursor: pointer;
  transition: background var(--ds-abc-motion) ease;
}

.abc-canvas-host[b-q6x00594zj]  .abc-palette-btn:hover { background: var(--colors-interaction-hover); }
.abc-canvas-host[b-q6x00594zj]  .abc-palette-btn--sup { color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); }
.abc-canvas-host[b-q6x00594zj]  .abc-palette-btn--sup:hover { background: var(--colors-accent-brand-muted); }
.abc-canvas-host[b-q6x00594zj]  .abc-pdot { flex-shrink: 0; }
.abc-canvas-host[b-q6x00594zj]  .abc-psep { width: var(--ds-abc-hairline); height: var(--spacing-xl); margin: var(--spacing-none) var(--spacing-2xs); background: var(--colors-surface-border); }

.abc-canvas-host[b-q6x00594zj]  .abc-palette-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-abc-palette-btn);
  height: var(--ds-abc-palette-btn);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-md);
  cursor: pointer;
  transition: background var(--ds-abc-motion) ease;
}

.abc-canvas-host[b-q6x00594zj]  .abc-palette-icon:hover { background: var(--colors-interaction-hover); }

.abc-canvas-host[b-q6x00594zj]  .abc-hint {
  position: absolute;
  top: var(--spacing-lg);
  left: 50%;
  z-index: var(--ds-abc-layer-chrome);
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--typography-size-text-xs);
  font-weight: var(--typography-font-weight-medium);
  color: var(--colors-text-inverse);
  background: var(--colors-surface-foreground);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-xs) var(--spacing-lg) var(--colors-surface-shadow);
  transform: translateX(-50%);
  pointer-events: none;
}

.abc-canvas-host[b-q6x00594zj]  .abc-inspector {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: var(--ds-abc-layer-inspector);
  width: var(--ds-abc-inspector);
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-abc-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) var(--colors-surface-shadow);
}

.abc-canvas-host[b-q6x00594zj]  .abc-pip-wrap {
  position: absolute;
  right: var(--spacing-2xl);
  bottom: var(--spacing-xl);
  z-index: var(--ds-abc-layer-pip);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-end;
  pointer-events: none;
}

.abc-canvas-host[b-q6x00594zj]  .abc-bubble-wrap { pointer-events: auto; }
.abc-canvas-host[b-q6x00594zj]  .abc-pip-row { display: flex; gap: var(--spacing-sm); align-items: flex-end; pointer-events: auto; }

.abc-canvas-host[b-q6x00594zj]  .abc-ask-btn {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  height: var(--spacing-3xl);
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-none) var(--spacing-md);
  font-size: var(--typography-size-text-xs);
  font-weight: var(--typography-font-weight-semibold);
  color: var(--colors-brand-primary);
  background: var(--colors-surface-card);
  border: var(--ds-abc-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-xs) var(--spacing-md) var(--colors-surface-shadow);
  cursor: pointer;
}

.abc-canvas-host[b-q6x00594zj]  .abc-pip-fig-wrap { position: relative; }
.abc-canvas-host[b-q6x00594zj]  .abc-pip-fig { width: var(--ds-abc-pip); height: var(--ds-abc-pip-height); cursor: pointer; filter: drop-shadow(0 var(--spacing-sm) var(--spacing-lg) var(--colors-surface-shadow)); }

.abc-canvas-host[b-q6x00594zj]  .abc-pip-min {
  position: absolute;
  top: 0;
  right: calc(var(--spacing-2xs) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-abc-pip-min);
  height: var(--ds-abc-pip-min);
  color: var(--colors-text-subtle);
  background: var(--colors-surface-card);
  border: var(--ds-abc-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-xs) var(--colors-surface-shadow);
  cursor: pointer;
}

.abc-canvas-host[b-q6x00594zj]  .abc-pip-peek {
  position: absolute;
  right: calc(var(--spacing-2xl) * -1);
  bottom: var(--spacing-2xl);
  z-index: var(--ds-abc-layer-pip);
  width: var(--ds-abc-pip-peek);
  height: var(--ds-abc-pip-peek-height);
  cursor: pointer;
  filter: drop-shadow(calc(var(--spacing-xs) * -1) var(--spacing-xs) var(--spacing-md) var(--colors-surface-shadow));
  transform: rotate(-12deg);
  transition: right var(--ds-abc-peek-motion) ease;
}

.abc-canvas-host[b-q6x00594zj]  .abc-pip-peek:hover { right: var(--spacing-xs); }

.abc-canvas-host[b-q6x00594zj]  .abc-toast {
  position: absolute;
  bottom: var(--spacing-2xl);
  left: 50%;
  z-index: var(--ds-abc-layer-toast);
  white-space: nowrap;
  transform: translateX(-50%);
}

/* ── Pip poses (shared by the canvas and the gallery) ────────────────────── */

.abc-page[b-q6x00594zj]  .abc-pip-svg { display: block; width: 100%; height: 100%; transform-origin: center bottom; }
.abc-page[b-q6x00594zj]  .abc-pip-svg--idle { animation: abc-p-idle-b-q6x00594zj 3.5s ease-in-out infinite; }
.abc-page[b-q6x00594zj]  .abc-pip-svg--curious { animation: abc-p-curious-b-q6x00594zj 2s ease-in-out infinite; }
.abc-page[b-q6x00594zj]  .abc-pip-svg--happy { animation: abc-p-happy-b-q6x00594zj 0.7s cubic-bezier(0.2, 0.7, 0.3, 1.2) 3; }
.abc-page[b-q6x00594zj]  .abc-pip-svg--concerned { animation: abc-p-concerned-b-q6x00594zj 2.5s ease-in-out infinite; }
.abc-page[b-q6x00594zj]  .abc-pip-svg--greet { animation: abc-p-greet-b-q6x00594zj 0.6s ease-in-out 2; }

@keyframes abc-p-idle-b-q6x00594zj { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--spacing-xs) * -1)); } }
@keyframes abc-p-curious-b-q6x00594zj { 0%, 100% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } }
@keyframes abc-p-happy-b-q6x00594zj { 0%, 40%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(calc(var(--spacing-md) * -1)) scale(1.08); } }
@keyframes abc-p-concerned-b-q6x00594zj { 0%, 100% { transform: rotate(-3deg) translateY(var(--spacing-2xs)); } 50% { transform: rotate(3deg) translateY(var(--spacing-xs)); } }
@keyframes abc-p-greet-b-q6x00594zj { 0%, 50%, 100% { transform: scale(1); } 25% { transform: scale(1.1) rotate(8deg); } }

/* Referenced by the script's inline animation names. */
@keyframes abc-nodeIn-b-q6x00594zj { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes abc-nodeOut-b-q6x00594zj { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes abc-edgeDraw-b-q6x00594zj { to { stroke-dashoffset: 0; } }
@keyframes abc-bubbleIn-b-q6x00594zj { from { transform: translateY(var(--spacing-sm)) scale(0.96); } to { transform: translateY(0) scale(1); } }
@keyframes abc-toastIn-b-q6x00594zj { from { opacity: 0; transform: translateY(var(--spacing-sm)) translateX(-50%); } to { opacity: 1; transform: translateY(0) translateX(-50%); } }

/* ── Mascot gallery ──────────────────────────────────────────────────────── */

.abc-mascot-view[b-q6x00594zj] {
  position: absolute;
  inset: 0;
  padding: var(--spacing-3xl) var(--spacing-4xl);
  overflow-y: auto;
  background: var(--colors-surface-background);
}

.abc-mascot-content[b-q6x00594zj] { max-width: var(--ds-abc-mascot-max); margin: var(--spacing-none) auto; }
[b-q6x00594zj] .abc-mascot-hero-title { margin: var(--spacing-none); color: var(--colors-text-primary); }
[b-q6x00594zj] .abc-mascot-hero-sub { max-width: var(--ds-abc-mascot-measure); margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none); color: var(--colors-text-muted); }

.abc-mascot-grid[b-q6x00594zj] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-xl);
  margin-top: var(--spacing-3xl);
}

.abc-mascot-card[b-q6x00594zj] {
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-abc-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.abc-mascot-card-preview[b-q6x00594zj] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--ds-abc-mascot-preview);
  padding: var(--spacing-xl);
}

.abc-mascot-card-preview--idle[b-q6x00594zj] { background: linear-gradient(180deg, var(--colors-surface-card), var(--colors-surface-muted)); }
.abc-mascot-card-preview--curious[b-q6x00594zj] { background: linear-gradient(180deg, var(--colors-surface-card), var(--colors-accent-brand-subtle)); }
.abc-mascot-card-preview--happy[b-q6x00594zj] { background: linear-gradient(180deg, var(--colors-surface-card), var(--colors-feedback-success-subtle)); }
.abc-mascot-card-preview--concerned[b-q6x00594zj] { background: linear-gradient(180deg, var(--colors-surface-card), var(--colors-feedback-destructive-subtle)); }

.abc-mascot-pip-wrap[b-q6x00594zj] { width: var(--ds-abc-mascot-pip); height: var(--ds-abc-mascot-pip-height); }
.abc-mascot-card-info[b-q6x00594zj] { display: grid; gap: var(--spacing-sm); padding: var(--spacing-lg); }
.abc-mascot-card-header[b-q6x00594zj] { display: flex; gap: var(--spacing-sm); align-items: center; }
.abc-mascot-card-header[b-q6x00594zj]  strong { color: var(--colors-text-primary); }
.abc-mascot-dot[b-q6x00594zj] { flex-shrink: 0; width: var(--spacing-sm); height: var(--spacing-sm); border-radius: var(--radius-radius-full); }
.abc-mascot-dot--teal[b-q6x00594zj] { background: var(--colors-accent-teal-solid); }
.abc-mascot-dot--brand[b-q6x00594zj] { background: var(--colors-brand-primary); }
.abc-mascot-dot--green[b-q6x00594zj] { background: var(--colors-feedback-success); }
.abc-mascot-dot--red[b-q6x00594zj] { background: var(--colors-feedback-destructive); }
[b-q6x00594zj] .abc-mascot-pose-desc { margin: var(--spacing-none); color: var(--colors-text-muted); }

.abc-mascot-guide-card[b-q6x00594zj] {
  display: flex;
  gap: var(--spacing-2xl);
  align-items: center;
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-xl) var(--spacing-2xl);
  background: var(--colors-surface-card);
  border: var(--ds-abc-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.abc-mascot-guide-pip[b-q6x00594zj] { flex-shrink: 0; width: var(--ds-abc-mascot-guide-pip); height: var(--ds-abc-mascot-guide-pip-height); }
.abc-mascot-guide-body[b-q6x00594zj] { flex: 1; min-width: 0; }
.abc-mascot-guide-body[b-q6x00594zj]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }
[b-q6x00594zj] .abc-mascot-guide-sub { max-width: var(--ds-abc-mascot-measure); margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none); color: var(--colors-text-muted); }

.abc-mascot-guide-bubble[b-q6x00594zj] {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--colors-text-primary);
  background: var(--colors-surface-muted);
  border: var(--ds-abc-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg) var(--radius-radius-lg) var(--radius-radius-lg) var(--radius-radius-xs);
}

.abc-mascot-guide-opts[b-q6x00594zj] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

[b-q6x00594zj] .abc-mascot-opt {
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-brand-primary);
  background: var(--colors-interaction-selected);
  border: var(--ds-abc-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-md);
}

@media (max-width: 1280px) {
  .abc-mascot-grid[b-q6x00594zj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .abc-page[b-q6x00594zj]  .abc-pip-svg { animation: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AgentCard.razor.rz.scp.css */
/* One agent: who it is and its job, how its day is going, where it answers
   and the next thing to do. A white card on the muted page, 20px inside. */
.agent-card[b-3yy59izx18] {
  /* Gaps in the token set: no avatar size, card lift or motion values. */
  --ds-agent-avatar: 48px;
  --ds-agent-lift: -2px;
  --ds-agent-card-motion: 150ms;

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--spacing-lg);
  min-width: 0;
  padding: var(--spacing-xl);
  color: inherit;
  text-align: left;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
  cursor: pointer;
  transition:
    box-shadow var(--ds-agent-card-motion) ease,
    transform var(--ds-agent-card-motion) ease;
}

.agent-card:hover[b-3yy59izx18],
.agent-card:focus-visible[b-3yy59izx18] {
  box-shadow: 0 var(--spacing-md) var(--spacing-3xl) var(--colors-surface-shadow);
  transform: translateY(var(--ds-agent-lift));
}

.agent-card:focus-visible[b-3yy59izx18] {
  outline: var(--spacing-2xs) solid var(--colors-interaction-focus);
  outline-offset: var(--spacing-2xs);
}

.agent-card > header[b-3yy59izx18] {
  display: grid;
  grid-template-columns: var(--ds-agent-avatar) minmax(0, 1fr) auto auto;
  gap: var(--spacing-md);
  align-items: center;
}

.agent-card__avatar[b-3yy59izx18] {
  overflow: hidden;
  width: var(--ds-agent-avatar);
  height: var(--ds-agent-avatar);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.agent-card__avatar img[b-3yy59izx18] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-card__who[b-3yy59izx18] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.agent-card__who[b-3yy59izx18]  h3 {
  overflow: hidden;
  margin: 0;
  color: var(--colors-text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.agent-card__who[b-3yy59izx18]  span { color: var(--colors-text-muted); }

/* Its day so far, or why it isn't answering. */
.agent-card__today[b-3yy59izx18]  p { margin: 0; color: var(--colors-text-secondary); }
.agent-card__today[b-3yy59izx18]  strong { color: var(--colors-text-primary); }

.agent-card > footer[b-3yy59izx18] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-md);
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
}

.agent-card__channels[b-3yy59izx18] { display: flex; gap: var(--spacing-sm); align-items: center; }
.agent-card__channels[b-3yy59izx18]  .agent-card__none { color: var(--colors-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .agent-card[b-3yy59izx18] { transition: none; }
  .agent-card:hover[b-3yy59izx18],
  .agent-card:focus-visible[b-3yy59izx18] { transform: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AgentChannelGate.razor.rz.scp.css */
/* The three channels an agent can answer on, each in its own colour. */
.agent-channel-gate[b-nxjj8r4qrb] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}
.agent-channel-gate li[b-nxjj8r4qrb] {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  padding: var(--spacing-lg) var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
/* /Components/Pages/Dashboard/AiAgents/AgentCreate.razor.rz.scp.css */
/* Creating an agent, Concept B: a page of its own, no navigation. A thin
   bar on top (what this is, how far along, close), then one question at a
   time in the middle of the window, with Back above it and the way on right
   under it, so nothing is a reach. Clear and uncluttered: white cards on the
   muted page, 32px from the question to its answers. */

.agent-create[b-jb3pt8mkuh] {
  /* Missing from the token set: no column width for a guided flow, card
     sizes for its choices, or the preview's avatar sizes. The job cards
     match Concept A's. */
  --ds-agent-create-column: 720px;
  --ds-agent-create-column-wide: 920px;
  --ds-agent-create-tile: 88px;
  --ds-agent-create-progress: 280px;
  --ds-agent-create-icon: 36px;
  --ds-agent-create-card: 72px;
  --ds-agent-create-avatar: 88px;
  --ds-agent-create-look: 40px;
  --ds-agent-create-ring: 2px;
  --ds-agent-create-gutter: clamp(16px, 4vw, 48px);
  --ds-agent-create-reveal: 280ms;
  /* Step 4 sits at a fixed height, about where the step before had its
     question (so arriving isn't a jump), and stays there as it grows (the
     talking, then the job description under it). */
  --ds-agent-create-top: clamp(48px, 14vh, 160px);

  /* Its own scroller: the page body does not scroll (the app shell has its
     own), and the bar sticks inside it. */
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--colors-text-primary);
  background: var(--colors-surface-background);
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.agent-create__bar[b-jb3pt8mkuh] {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-md) var(--ds-agent-create-gutter);
  background: var(--colors-surface-card);
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
}
.agent-create__bar[b-jb3pt8mkuh]  .agent-create__brand { color: var(--colors-text-primary); }
.agent-create__bar[b-jb3pt8mkuh] >  .ds-button { justify-self: end; }
.agent-create__progress[b-jb3pt8mkuh] { display: flex; gap: var(--spacing-md); align-items: center; }
.agent-create__segments[b-jb3pt8mkuh] { display: flex; gap: var(--spacing-xs); width: var(--ds-agent-create-progress); }
.agent-create__segment[b-jb3pt8mkuh] {
  flex: 1;
  height: var(--spacing-xs);
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  transition: background-color var(--ds-agent-create-reveal) var(--ds-motion-enter);
}
.agent-create__segment.is-done[b-jb3pt8mkuh] { background: var(--colors-brand-primary); }
.agent-create__segment.is-current[b-jb3pt8mkuh] { background: var(--colors-accent-brand-border); }
[b-jb3pt8mkuh] .agent-create__count { color: var(--colors-text-muted); white-space: nowrap; }

/* ── The question, in the middle ─────────────────────────────────────────── */

/* At least the rest of the window, its step centred in it (a little above
   the true middle, where centred reads as centred, and clear of the demo's
   concept switch); a longer step makes it taller, so it starts at the top
   and scrolls. */
.agent-create__main[b-jb3pt8mkuh] {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-3xl) var(--ds-agent-create-gutter) var(--spacing-5xl);
}
.agent-create__step[b-jb3pt8mkuh] {
  display: grid;
  gap: var(--spacing-2xl);
  width: min(var(--ds-agent-create-column), 100%);
  margin-inline: auto;
  animation: agent-create-in-b-jb3pt8mkuh var(--ds-agent-create-reveal) var(--ds-motion-enter);
}
.agent-create__step > *[b-jb3pt8mkuh] { min-width: 0; }
@keyframes agent-create-in-b-jb3pt8mkuh {
  from { opacity: 0; transform: translateY(var(--spacing-sm)); }
}
/* Back sits flush with the question under it. */
.agent-create__step[b-jb3pt8mkuh] >  .agent-create__back { justify-self: start; margin: 0 0 calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-sm)); }
.agent-create__question[b-jb3pt8mkuh] { display: grid; gap: var(--spacing-md); }
/* It takes the focus when the step changes (for screen readers); no ring on a heading. */
.agent-create__question:focus[b-jb3pt8mkuh] { outline: none; }
/* Two even lines, never one word left alone, when a question wraps; on the job step the question starts its own line. */
.agent-create__question[b-jb3pt8mkuh]  h1 { margin: var(--spacing-none); color: var(--colors-text-primary); text-wrap: balance; }
[b-jb3pt8mkuh] .agent-create__lede { margin: var(--spacing-none); color: var(--colors-text-muted); }

.agent-create__card[b-jb3pt8mkuh] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

/* The way on: right under the question, at its right-hand edge. */
.agent-create__actions[b-jb3pt8mkuh] { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: center; justify-content: flex-end; }

/* ── 1. Its job: Concept A's cards, two to a row, a colour each ──────────── */

.agent-create__jobs[b-jb3pt8mkuh] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job {
  display: grid;
  grid-template-columns: var(--ds-agent-create-icon) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--ds-agent-create-card);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: start;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  transition: border-color var(--ds-motion-fast) ease, background-color var(--ds-motion-fast) ease, box-shadow var(--ds-motion-fast) ease;
}
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job:hover { border-color: var(--colors-accent-brand-border); }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job.is-chosen {
  background: var(--colors-accent-brand-subtle);
  border-color: var(--colors-brand-primary);
  box-shadow: 0 0 0 var(--ds-hairline) var(--colors-brand-primary);
}
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job-icon {
  display: grid;
  place-items: center;
  width: var(--ds-agent-create-icon);
  height: var(--ds-agent-create-icon);
  color: var(--colors-icon-brand);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-lg);
}
/* A little colour makes the jobs easier to scan, as in Concept A; choosing
   one still uses the single brand treatment. */
.agent-create__jobs[b-jb3pt8mkuh]  .is-support:not(.is-chosen) .agent-create__job-icon { color: var(--colors-accent-teal-text); background: var(--colors-accent-teal-subtle); }
.agent-create__jobs[b-jb3pt8mkuh]  .is-sales:not(.is-chosen) .agent-create__job-icon { color: var(--colors-accent-emerald-text); background: var(--colors-accent-emerald-subtle); }
.agent-create__jobs[b-jb3pt8mkuh]  .is-tracking:not(.is-chosen) .agent-create__job-icon { color: var(--colors-accent-amber-text); background: var(--colors-accent-amber-subtle); }
.agent-create__jobs[b-jb3pt8mkuh]  .is-bookings:not(.is-chosen) .agent-create__job-icon { color: var(--colors-accent-orange-text); background: var(--colors-accent-orange-subtle); }
.agent-create__jobs[b-jb3pt8mkuh]  .is-followups:not(.is-chosen) .agent-create__job-icon { color: var(--colors-accent-cyan-text); background: var(--colors-accent-cyan-subtle); }
.agent-create__jobs[b-jb3pt8mkuh]  .is-custom:not(.is-chosen) .agent-create__job-icon { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }
.agent-create__jobs[b-jb3pt8mkuh]  .is-chosen .agent-create__job-icon { color: var(--colors-accent-brand-on-solid); background: var(--colors-brand-primary); }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job-text { display: grid; gap: var(--spacing-xs); min-width: 0; }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job-text strong { color: var(--colors-text-primary); }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job-text span { color: var(--colors-text-muted); }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__job-text .agent-create__done-by { color: var(--colors-accent-blue-text); }
.agent-create__jobs[b-jb3pt8mkuh]  .agent-create__tick { display: grid; color: var(--colors-brand-primary); opacity: 0; transition: opacity var(--ds-motion-fast) ease; }
.agent-create__jobs[b-jb3pt8mkuh]  .is-chosen .agent-create__tick { opacity: 1; }
.agent-create__custom[b-jb3pt8mkuh] { animation: agent-create-in-b-jb3pt8mkuh var(--ds-agent-create-reveal) var(--ds-motion-enter); }

/* ── 2. Its name and look, as customers will see them ────────────────────── */

.agent-create__identity[b-jb3pt8mkuh] { justify-items: stretch; }
.agent-create__preview[b-jb3pt8mkuh] { display: grid; gap: var(--spacing-xs); justify-items: center; padding-block: var(--spacing-sm) var(--spacing-xs); text-align: center; }
.agent-create__preview img[b-jb3pt8mkuh] {
  width: var(--ds-agent-create-avatar);
  height: var(--ds-agent-create-avatar);
  margin-bottom: var(--spacing-sm);
  object-fit: cover;
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--colors-surface-shadow-diffuse);
}
.agent-create__preview[b-jb3pt8mkuh]  strong { color: var(--colors-text-primary); }
.agent-create__preview[b-jb3pt8mkuh]  strong.is-empty { color: var(--colors-text-muted); }
.agent-create__preview[b-jb3pt8mkuh]  span { color: var(--colors-text-muted); }
.agent-create__looks[b-jb3pt8mkuh] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.agent-create__looks[b-jb3pt8mkuh]  .agent-create__look {
  padding: var(--spacing-2xs);
  background: transparent;
  border: var(--ds-agent-create-ring) solid transparent;
  border-radius: var(--radius-radius-full);
}
.agent-create__looks[b-jb3pt8mkuh]  .agent-create__look:hover { border-color: var(--colors-accent-brand-border); }
.agent-create__looks[b-jb3pt8mkuh]  .agent-create__look.is-chosen { border-color: var(--colors-brand-primary); }
.agent-create__looks[b-jb3pt8mkuh]  .agent-create__look img {
  display: block;
  width: var(--ds-agent-create-look);
  height: var(--ds-agent-create-look);
  object-fit: cover;
  border-radius: var(--radius-radius-full);
}

/* One column of choices on a phone; the bar keeps only the progress. */
@media (max-width: 1180px) {
  .agent-create__jobs[b-jb3pt8mkuh],
  .agent-create__bar[b-jb3pt8mkuh] { grid-template-columns: minmax(0, 1fr) auto; }
  .agent-create__bar[b-jb3pt8mkuh]  .agent-create__brand { display: none; }
  .agent-create__segments[b-jb3pt8mkuh] { width: auto; flex: 1; }
  .agent-create__progress[b-jb3pt8mkuh] { min-width: 0; }
  .agent-create__main[b-jb3pt8mkuh] { justify-content: flex-start; padding-top: var(--spacing-2xl); }
  .agent-create__actions[b-jb3pt8mkuh]  .ds-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-create__step[b-jb3pt8mkuh],
  .agent-create__custom[b-jb3pt8mkuh] { animation: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AgentJobEditor.razor.rz.scp.css */
/* An agent's job description: the conversation on top (at the start, the orb
   in a stage of its own with Talk and Type; once it starts, a chat: the
   agent's words on the left, the owner's on the right, the topics along the
   top, and at the foot the box with the mic, or a small bar saying whose turn
   it is; Teach your AI's light along the card's edges while a voice turn
   happens), then its job description to read and edit, with Hear it. White
   cards on the muted page. */

.job-editor[b-3uvynq72yp] {
  /* Missing from the token set: the orb's size and the stage around it (room
     for it to swell when loud), the start card's height (so it doesn't jump),
     the text's measure, the motion of a just-written job description, the
     conversation's height in the window, the avatar beside the agent's words,
     how wide a message runs, the bar's orb, and the typing dots. */
  --ds-job-editor-orb: 96px;
  --ds-job-editor-stage: 136px;
  --ds-job-editor-orb-small: 56px;
  --ds-job-editor-stage-small: 72px;
  --ds-job-editor-voice: 412px;
  --ds-job-editor-measure: 560px;
  --ds-job-editor-new: 2400ms;
  --ds-job-editor-word: 180ms;
  --ds-job-editor-unsaid: 0.28;
  --ds-job-editor-pause: 3s;
  --ds-job-editor-bar: 160px;
  --ds-job-editor-aura: 0.6;
  --ds-job-editor-chat: min(860px, calc(100dvh - 136px));
  --ds-job-editor-answer: 64px;
  --ds-job-editor-answer-most: 168px;
  --ds-job-editor-chat-least: 420px;
  --ds-job-editor-face: 32px;
  --ds-job-editor-bubble: 80%;
  --ds-job-editor-bar-orb: 36px;
  --ds-job-editor-dot: 6px;
  --ds-job-editor-pulse: 1.2s;
  --ds-job-editor-interim: 0.7;
  --ds-job-editor-scroll-room: 72px;
  --ds-job-editor-asking: calc(var(--ds-job-editor-chat) - 200px);
  --ds-job-editor-dock-shadow: 36px;
  --ds-job-editor-asking-lift: 0 -12px 40px;

  display: grid;
  gap: var(--spacing-lg);
  min-width: 0;
}
/* In a full-screen view (telling an agent its job on its page): the window under its bar (the topics in it), with room above and below. */
.ds-focus-view .job-editor[b-3uvynq72yp] { --ds-job-editor-chat: min(860px, calc(100dvh - 200px)); }
.job-editor > *[b-3uvynq72yp] { min-width: 0; }
[b-3uvynq72yp] .job-editor__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }

/* ── The start ───────────────────────────────────────────────────────────── */

/* The card is the light's frame (VoiceAura, its first child). At the start it
   keeps one height, and its content starts from the top, so the orb stays put. */
.job-editor__voice[b-3uvynq72yp] {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: var(--ds-job-editor-voice);
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
  overflow: hidden;
  text-align: center;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  scroll-margin-top: var(--ds-job-editor-scroll-room);
}
.job-editor__voice > :not(.ds-voice-aura)[b-3uvynq72yp] { position: relative; z-index: 1; }
/* Room between the parts: the orb, 24px, what to do, 24px, the ways in. */
.job-editor__voice > .job-editor__voice-text[b-3uvynq72yp],
.job-editor__voice > .job-editor__ways[b-3uvynq72yp] { margin-top: var(--spacing-2xl); }
.job-editor__voice[b-3uvynq72yp] >  .inline-error { justify-self: stretch; margin-top: var(--spacing-lg); text-align: start; }
/* Once there is a job description: the way to add more, not the main thing. */
.job-editor__voice.is-compact[b-3uvynq72yp] {
  --ds-job-editor-orb: var(--ds-job-editor-orb-small);
  --ds-job-editor-stage: var(--ds-job-editor-stage-small);
  min-height: 0;
  padding-top: var(--spacing-xl);
}
.job-editor__voice.is-compact > .job-editor__voice-text[b-3uvynq72yp] { margin-top: var(--spacing-md); }
.job-editor__voice.is-compact > .job-editor__ways[b-3uvynq72yp] { margin-top: var(--spacing-xl); }

/* The light, kept soft for a card this size. */
.job-editor .job-editor__voice[b-3uvynq72yp]  .ds-voice-aura {
  /* Missing from the token set: the light's bands for a small card,
     thinner than for Teach your AI's large panel. */
  --ds-voice-aura-tight: 2px;
  --ds-voice-aura-tight-blur: 6px;
  --ds-voice-aura-wide: 6px;
  --ds-voice-aura-wide-blur: 16px;
  opacity: var(--ds-job-editor-aura);
}

/* The orb in its stage: room to swell, never near the edge. */
.job-editor__stage[b-3uvynq72yp] {
  display: grid;
  place-items: center;
  width: var(--ds-job-editor-stage);
  height: var(--ds-job-editor-stage);
}
.job-editor__voice[b-3uvynq72yp]  .ds-voice-orb.job-editor__orb { --ds-voice-orb-size: var(--ds-job-editor-orb); }
.job-editor__voice-text[b-3uvynq72yp] { display: grid; gap: var(--spacing-xs); justify-items: center; max-width: var(--ds-job-editor-measure); }
.job-editor__voice-text[b-3uvynq72yp]  p { margin: var(--spacing-none); }
.job-editor__voice-text[b-3uvynq72yp]  p:first-child { color: var(--colors-text-primary); }

.job-editor__ways[b-3uvynq72yp] { display: grid; gap: var(--spacing-xl); justify-items: center; }
.job-editor__start[b-3uvynq72yp] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; justify-content: center; }

/* ── The conversation ────────────────────────────────────────────────────── */

/* A chat in the card: the topics on top, the messages in between (scrolling
   when there are many), and the foot always in reach. */
.job-editor__voice.is-talking[b-3uvynq72yp] {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-items: stretch;
  height: var(--ds-job-editor-chat);
  min-height: var(--ds-job-editor-chat-least);
  padding: var(--spacing-none);
  text-align: start;
}
/* A short exchange (adding to it): as tall as it needs, up to the same height. */
.job-editor__voice.is-talking.is-short[b-3uvynq72yp] { height: auto; min-height: 0; max-height: var(--ds-job-editor-chat); }

.job-editor__topics[b-3uvynq72yp] {
  flex: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
}

.job-editor__log[b-3uvynq72yp] {
  flex: 1;
  min-height: 0;
  padding: var(--spacing-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The chat and its approval scroll with no bar showing (designer, 19 October 2026): the
   conversation is the focus. The wheel, a trackpad and the keyboard still scroll them. */
.job-editor__log[b-3uvynq72yp],
.job-editor__dock.is-asking[b-3uvynq72yp] { scrollbar-width: none; }
.job-editor__log[b-3uvynq72yp]::-webkit-scrollbar,
.job-editor__dock.is-asking[b-3uvynq72yp]::-webkit-scrollbar { display: none; }
.job-editor__thread[b-3uvynq72yp] {
  display: grid;
  gap: var(--spacing-lg);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

/* A new topic, like a new day in a chat: its name between two hairlines. */
.job-editor__divider[b-3uvynq72yp] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-block: var(--spacing-xs);
  color: var(--colors-text-muted);
}
.job-editor__divider[b-3uvynq72yp]::before,
.job-editor__divider[b-3uvynq72yp]::after {
  flex: 1;
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
  content: "";
}

/* The messages, in the test chat's colours: the agent in the soft brand tint
   on the left, beside its face; the owner in solid brand on the right. */
.job-editor__msg[b-3uvynq72yp] { display: flex; gap: var(--spacing-sm); align-items: flex-start; min-width: 0; animation: job-editor-in-b-3uvynq72yp var(--ds-motion-base) var(--ds-motion-enter) both; }
.job-editor__msg > img[b-3uvynq72yp] { flex: none; width: var(--ds-job-editor-face); height: var(--ds-job-editor-face); object-fit: cover; border-radius: var(--radius-radius-full); }
.job-editor__msg.is-owner[b-3uvynq72yp] { justify-content: flex-end; }
.job-editor__reply[b-3uvynq72yp] { display: grid; flex: 1; gap: var(--spacing-sm); justify-items: start; min-width: 0; }

.job-editor__bubble[b-3uvynq72yp] {
  max-width: var(--ds-job-editor-bubble);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-radius-2xl);
}
.job-editor__bubble[b-3uvynq72yp]  p { margin: var(--spacing-none); }
.is-agent .job-editor__bubble[b-3uvynq72yp] {
  color: var(--colors-text-secondary);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-brand-muted);
  border-top-left-radius: var(--radius-radius-sm);
}
.is-owner .job-editor__bubble[b-3uvynq72yp] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-top-right-radius: var(--radius-radius-sm);
}
/* Said aloud now: each word lights as it is said. */
.job-editor__bubble.is-speaking[b-3uvynq72yp]  span { transition: opacity var(--ds-job-editor-word) ease-out; }
.job-editor__bubble.is-speaking[b-3uvynq72yp]  span:not([data-on]) { opacity: var(--ds-job-editor-unsaid); }
/* Their words as they talk: the part still being heard, quieter. */
.is-live .job-editor__bubble[b-3uvynq72yp]  .job-editor__interim { opacity: var(--ds-job-editor-interim); }

/* Thinking: three dots. */
.job-editor__bubble.is-typing[b-3uvynq72yp] { display: flex; gap: var(--spacing-2xs); padding-block: var(--spacing-md); }
.job-editor__bubble.is-typing i[b-3uvynq72yp] {
  width: var(--ds-job-editor-dot);
  height: var(--ds-job-editor-dot);
  background: var(--colors-icon-brand);
  border-radius: var(--radius-radius-full);
  animation: job-editor-typing-b-3uvynq72yp var(--ds-job-editor-pulse) ease-in-out infinite;
}
.job-editor__bubble.is-typing i:nth-child(2)[b-3uvynq72yp] { animation-delay: calc(var(--ds-job-editor-pulse) / 6); }
.job-editor__bubble.is-typing i:nth-child(3)[b-3uvynq72yp] { animation-delay: calc(var(--ds-job-editor-pulse) / 3); }
@keyframes job-editor-typing-b-3uvynq72yp {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}


/* A topic confirmed: what was given, to read. */
.job-editor__checked[b-3uvynq72yp] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.job-editor__checked[b-3uvynq72yp] >  .ds-icon { flex: none; margin-top: var(--spacing-2xs); color: var(--colors-feedback-success-text); }
.job-editor__checked-text[b-3uvynq72yp] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.job-editor__checked-text[b-3uvynq72yp]  p { margin: var(--spacing-none); color: var(--colors-text-muted); }
.job-editor__checked-text[b-3uvynq72yp]  p:first-child { color: var(--colors-text-primary); }
.job-editor__checked-text[b-3uvynq72yp]  .job-editor__checked-answer { color: var(--colors-text-primary); }

/* The foot: the box with the mic, or the bar while a voice turn happens. */
.job-editor__foot[b-3uvynq72yp] {
  flex: none;
  padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
}
/* The box: one floating dock at the foot of the chat (Teach your AI's), holding the box or
   the voice bar. An approval grows out of it in their place: the dock rises, lifted, the chat
   giving it room above; long, it scrolls inside itself. Nothing else until it's approved. */
.job-editor__dock[b-3uvynq72yp] {
  display: grid;
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-job-editor-dock-shadow) var(--colors-surface-shadow);
  transition: border-color var(--ds-motion-base) ease-out, box-shadow var(--ds-motion-base) ease-out;
}
/* Typing: a soft brand edge says where the words go. */
.job-editor__dock:focus-within[b-3uvynq72yp] { border-color: var(--colors-accent-brand-border); }
.job-editor__dock.is-asking[b-3uvynq72yp] {
  max-height: var(--ds-job-editor-asking);
  padding: var(--spacing-none);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: var(--colors-accent-brand-border);
  box-shadow: var(--ds-job-editor-asking-lift) var(--colors-surface-shadow);
  transform-origin: bottom center;
  animation: job-editor-grow-b-3uvynq72yp var(--ds-motion-base) var(--ds-motion-enter);
}
/* The approval is the dock's content: no frame of its own. */
.job-editor__dock.is-asking[b-3uvynq72yp] >  .job-editor__approve {
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
}
@keyframes job-editor-grow-b-3uvynq72yp {
  from { opacity: 0; transform: translateY(var(--spacing-md)) scaleY(0.96); }
}
@keyframes job-editor-rise-b-3uvynq72yp {
  from { opacity: 0; transform: translateY(var(--spacing-lg)); }
}

/* The box, as in Teach your AI: the answer gets the room, the tools sit under it. */
.job-editor__composer[b-3uvynq72yp] { display: grid; gap: var(--spacing-xs); }
.job-editor__composer[b-3uvynq72yp]  .job-editor__answer {
  --ds-text-area-plain-min-height: var(--ds-job-editor-answer);
  --ds-text-area-plain-max-height: var(--ds-job-editor-answer-most);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-primary);
}
.job-editor__composer-foot[b-3uvynq72yp] { display: flex; gap: var(--spacing-sm); align-items: center; }
.job-editor__composer-tools[b-3uvynq72yp] { display: flex; flex: 1; gap: var(--spacing-2xs); align-items: center; }

/* A suggested reply above the box, in line with the agent's words. */
.job-editor__replies[b-3uvynq72yp] {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-none) var(--spacing-xl) var(--spacing-sm) calc(var(--spacing-xl) + var(--ds-job-editor-face) + var(--spacing-sm));
  animation: job-editor-rise-b-3uvynq72yp var(--ds-motion-base) var(--ds-motion-enter);
}

.job-editor__bar[b-3uvynq72yp] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); align-items: center; }
.job-editor__bar[b-3uvynq72yp]  .ds-voice-orb.job-editor__bar-orb { --ds-voice-orb-size: var(--ds-job-editor-bar-orb); flex: none; }
.job-editor__bar-text[b-3uvynq72yp] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.job-editor__bar-text[b-3uvynq72yp]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__bar-text[b-3uvynq72yp]  p.job-editor__muted { color: var(--colors-text-muted); }
.job-editor__bar-actions[b-3uvynq72yp] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; justify-content: flex-end; margin-inline-start: auto; }
.job-editor__voice.is-talking[b-3uvynq72yp] >  .inline-error { flex: none; margin: var(--spacing-none) var(--spacing-md) var(--spacing-md); }

/* The pause running out: a thin bar that fills, then their turn is sent. */
.job-editor__countdown[b-3uvynq72yp] {
  display: block;
  width: var(--ds-job-editor-bar);
  height: var(--spacing-2xs);
  margin-top: var(--spacing-2xs);
  overflow: hidden;
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.job-editor__countdown > span[b-3uvynq72yp] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  border-radius: inherit;
  animation: job-editor-countdown-b-3uvynq72yp var(--ds-job-editor-pause) linear forwards;
}
@keyframes job-editor-countdown-b-3uvynq72yp {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Its job description, with Hear it ──────────────────────────────────── */

.job-editor__brief[b-3uvynq72yp] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  outline: none;
  animation: job-editor-in-b-3uvynq72yp var(--ds-motion-base) var(--ds-motion-enter);
}
@keyframes job-editor-in-b-3uvynq72yp {
  from { opacity: 0; transform: translateY(var(--spacing-sm)); }
}
.job-editor__brief-head[b-3uvynq72yp] { display: flex; gap: var(--spacing-lg); align-items: flex-start; justify-content: space-between; }
.job-editor__brief-title[b-3uvynq72yp] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.job-editor__brief-title[b-3uvynq72yp]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__brief-head[b-3uvynq72yp] >  .ds-button { flex: none; }
.job-editor__brief-actions[b-3uvynq72yp] { display: flex; flex: none; gap: var(--spacing-sm); align-items: center; }

/* Being written: placeholder lines, then the text arriving sentence by sentence. */
.job-editor__writing[b-3uvynq72yp],
.job-editor__streaming[b-3uvynq72yp] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: var(--ds-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-xl);
}
.job-editor__streaming[b-3uvynq72yp]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__streaming[b-3uvynq72yp]  span { animation: job-editor-in-b-3uvynq72yp var(--ds-motion-base) var(--ds-motion-enter); }

/* Just written: the box is marked for a moment. */
.job-editor__brief[b-3uvynq72yp]  .ds-text-area.is-new { animation: job-editor-new-b-3uvynq72yp var(--ds-job-editor-new) ease-out; }
@keyframes job-editor-new-b-3uvynq72yp {
  from { background: var(--colors-accent-brand-subtle); border-color: var(--colors-accent-brand-border); }
}

/* Just updated: one quiet line, with Undo. */
.job-editor__added[b-3uvynq72yp] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
  border-radius: var(--radius-radius-xl);
}
.job-editor__added[b-3uvynq72yp]  p { flex: 1; margin: var(--spacing-none); color: var(--colors-text-primary); }

/* What an addition changes, before it goes in: each sentence going in, and
   any it takes the place of, struck through. */
.job-editor__change[b-3uvynq72yp] {
  display: grid;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  padding: var(--spacing-md);
  list-style: none;
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}
.job-editor__change li[b-3uvynq72yp] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-sm); align-items: start; }
.job-editor__change li[b-3uvynq72yp] >  .ds-icon { margin-top: var(--spacing-2xs); }
.job-editor__change[b-3uvynq72yp]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__change li.is-in[b-3uvynq72yp] >  .ds-icon { color: var(--colors-feedback-success-text); }
.job-editor__change li.is-out[b-3uvynq72yp] >  .ds-icon,
.job-editor__change li.is-out[b-3uvynq72yp]  p { color: var(--colors-text-muted); }

/* What else was noted, in plain words. */
.job-editor__noted[b-3uvynq72yp] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--colors-accent-blue-text);
  background: var(--colors-accent-blue-subtle);
  border-radius: var(--radius-radius-xl);
}
.job-editor__noted[b-3uvynq72yp],
.job-editor__added[b-3uvynq72yp] { transition: opacity var(--ds-motion-base) ease-out; }
.job-editor__noted.is-leaving[b-3uvynq72yp],
.job-editor__added.is-leaving[b-3uvynq72yp] { opacity: 0; }
.job-editor__noted[b-3uvynq72yp]  p { flex: 1; margin: var(--spacing-none); color: var(--colors-text-primary); }

/* A ready-made one's check: part of the job description's card, under a line. */
.job-editor__brief[b-3uvynq72yp]  .job-editor__ready {
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-none);
  background: transparent;
  border: 0;
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: 0;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .job-editor__brief[b-3uvynq72yp],
  .job-editor__msg[b-3uvynq72yp],
  .job-editor__streaming[b-3uvynq72yp]  span,
  .job-editor__brief[b-3uvynq72yp]  .ds-text-area.is-new { animation: none; }
  .job-editor__bubble.is-speaking[b-3uvynq72yp]  span:not([data-on]) { opacity: 1; }
  .job-editor__bubble.is-typing i[b-3uvynq72yp] { animation: none; opacity: 1; }
  .job-editor__countdown > span[b-3uvynq72yp] { animation: none; width: 100%; }
  .job-editor__noted[b-3uvynq72yp],
  .job-editor__added[b-3uvynq72yp] { transition: none; }
  .job-editor__dock.is-asking[b-3uvynq72yp],
  .job-editor__replies[b-3uvynq72yp] { animation: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AgentTestChat.razor.rz.scp.css */
/* Test as a customer: a window over the page, like Teach your AI, holding
   a chat. The agent in the soft brand tint on the left, the customer in
   solid brand on the right (the Inbox's colours), and under each reply what
   it came from. The composer stays at the foot. */

.test-chat[b-5hin3h98l9] {
  /* Missing from the token set: no overlay layer, window size, bubble
     width or typing-dot motion. The layer and blur match Teach your AI. */
  --ds-test-chat-layer: 100;
  --ds-test-chat-panel: 760px;
  --ds-test-chat-height: 880px;
  --ds-test-chat-blur: 6px;
  --ds-test-chat-avatar: 32px;
  --ds-test-chat-bar-avatar: 44px;
  --ds-test-chat-bubble: 80%;
  --ds-test-chat-bubble-phone: 92%;
  --ds-test-chat-dot: 6px;
  --ds-test-chat-pulse: 1.2s;
  --ds-test-chat-motion: 240ms;

  position: fixed;
  inset: 0;
  z-index: var(--ds-test-chat-layer);
  display: grid;
  place-items: center;
  padding: var(--spacing-2xl);
}
.test-chat[b-5hin3h98l9]::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--colors-surface-overlay);
  backdrop-filter: blur(var(--ds-test-chat-blur));
}

.test-chat__panel[b-5hin3h98l9] {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(var(--ds-test-chat-panel), 100%);
  height: min(var(--ds-test-chat-height), calc(100dvh - 2 * var(--spacing-2xl)));
  overflow: hidden;
  color: var(--colors-text-primary);
  background: var(--colors-surface-popover);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  outline: none;
  box-shadow: 0 var(--spacing-xl) var(--spacing-4xl) var(--colors-surface-shadow);
  animation: test-chat-rise-b-5hin3h98l9 var(--ds-test-chat-motion) var(--ds-motion-enter) both;
}
@keyframes test-chat-rise-b-5hin3h98l9 {
  from { opacity: 0; transform: translateY(var(--spacing-md)); }
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.test-chat__bar[b-5hin3h98l9] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl);
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
}
.test-chat__avatar[b-5hin3h98l9] {
  flex: none;
  width: var(--ds-test-chat-bar-avatar);
  height: var(--ds-test-chat-bar-avatar);
  object-fit: cover;
  border-radius: var(--radius-radius-full);
}
.test-chat__heading[b-5hin3h98l9] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.test-chat__heading[b-5hin3h98l9]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.test-chat__heading[b-5hin3h98l9]  p { margin: var(--spacing-none); color: var(--colors-text-muted); }
.test-chat__bar-actions[b-5hin3h98l9] { display: flex; flex: none; gap: var(--spacing-xs); align-items: center; }

/* ── The conversation ────────────────────────────────────────────────────── */

.test-chat__thread[b-5hin3h98l9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
  margin: var(--spacing-none);
  padding: var(--spacing-xl) var(--spacing-2xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--colors-surface-background);
}
.test-chat__msg[b-5hin3h98l9] { display: flex; gap: var(--spacing-sm); align-items: flex-start; max-width: var(--ds-test-chat-bubble); animation: test-chat-rise-b-5hin3h98l9 var(--ds-test-chat-motion) var(--ds-motion-enter); }
.test-chat__msg > img[b-5hin3h98l9] { flex: none; width: var(--ds-test-chat-avatar); height: var(--ds-test-chat-avatar); object-fit: cover; border-radius: var(--radius-radius-full); }
.test-chat__msg.is-agent[b-5hin3h98l9] { align-self: flex-start; }
.test-chat__msg.is-customer[b-5hin3h98l9] { align-self: flex-end; }
.test-chat__reply[b-5hin3h98l9] { display: grid; gap: var(--spacing-sm); justify-items: start; min-width: 0; }

.test-chat__bubble[b-5hin3h98l9] {
  display: grid;
  gap: var(--spacing-xs);
  min-width: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-radius-2xl);
}
.test-chat__bubble[b-5hin3h98l9]  p { margin: var(--spacing-none); }
.is-agent .test-chat__bubble[b-5hin3h98l9] {
  color: var(--colors-text-secondary);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-brand-muted);
  border-top-left-radius: var(--radius-radius-sm);
}
.is-customer .test-chat__bubble[b-5hin3h98l9] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-top-right-radius: var(--radius-radius-sm);
}
.is-customer .test-chat__bubble[b-5hin3h98l9]  .test-chat__transcript { opacity: 0.85; }

/* What a reply came from: a quiet line, its icon in the source's colour. */
.test-chat__why[b-5hin3h98l9] { display: flex; gap: var(--spacing-xs); align-items: flex-start; color: var(--colors-text-muted); }
.test-chat__why[b-5hin3h98l9]  .icon,
.test-chat__why[b-5hin3h98l9] >  svg { flex: none; }
.test-chat__why.is-brief[b-5hin3h98l9] { color: var(--colors-text-muted); }
.test-chat__why.is-knowledge[b-5hin3h98l9] { color: var(--colors-accent-blue-text); }
.test-chat__why.is-unknown[b-5hin3h98l9] { color: var(--colors-feedback-warning-text); }
.test-chat__why[b-5hin3h98l9]  span { color: var(--colors-text-muted); }

.test-chat__teach[b-5hin3h98l9] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
  justify-self: stretch;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-accent-brand-border);
  border-radius: var(--radius-radius-xl);
}
.test-chat__teach[b-5hin3h98l9]  textarea { flex: 1; min-width: 0; }
.test-chat__taught[b-5hin3h98l9] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-sm); align-items: center; color: var(--colors-feedback-success-text); }
.test-chat__taught[b-5hin3h98l9]  span { color: var(--colors-text-secondary); }

/* Typing: three dots. */
.test-chat__bubble.is-typing[b-5hin3h98l9] { display: flex; gap: var(--spacing-2xs); padding-block: var(--spacing-md); }
.test-chat__bubble.is-typing i[b-5hin3h98l9] {
  width: var(--ds-test-chat-dot);
  height: var(--ds-test-chat-dot);
  background: var(--colors-icon-brand);
  border-radius: var(--radius-radius-full);
  animation: test-chat-typing-b-5hin3h98l9 var(--ds-test-chat-pulse) ease-in-out infinite;
}
.test-chat__bubble.is-typing i:nth-child(2)[b-5hin3h98l9] { animation-delay: calc(var(--ds-test-chat-pulse) / 6); }
.test-chat__bubble.is-typing i:nth-child(3)[b-5hin3h98l9] { animation-delay: calc(var(--ds-test-chat-pulse) / 3); }
@keyframes test-chat-typing-b-5hin3h98l9 {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* ── The composer ────────────────────────────────────────────────────────── */

.test-chat__dock[b-5hin3h98l9] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-xl);
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
}
.test-chat__try[b-5hin3h98l9] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.test-chat__composer[b-5hin3h98l9] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-end;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.test-chat__composer:focus-within[b-5hin3h98l9] { border-color: var(--colors-accent-brand-border); }
.test-chat__composer[b-5hin3h98l9]  textarea { flex: 1; min-width: 0; }

/* A phone: the window fills the screen. */
@media (max-width: 1180px) {
  .test-chat[b-5hin3h98l9] { padding: var(--spacing-md); }
  .test-chat__panel[b-5hin3h98l9] { height: calc(100dvh - 2 * var(--spacing-md)); }
  .test-chat__bar[b-5hin3h98l9] { padding-inline: var(--spacing-lg) var(--spacing-md); }
  .test-chat__thread[b-5hin3h98l9],
  .test-chat__dock[b-5hin3h98l9] { padding-inline: var(--spacing-lg); }
  .test-chat__msg[b-5hin3h98l9] { max-width: var(--ds-test-chat-bubble-phone); }
}

@media (prefers-reduced-motion: reduce) {
  .test-chat__panel[b-5hin3h98l9],
  .test-chat__msg[b-5hin3h98l9] { animation: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AiAgentDetail.razor.rz.scp.css */
/* Agent detail — one agent's page: the header, a tab tray, and on Overview
   its day (the figures, what needs you, the latest conversations it replied to, the week) above
   how it is set up. The figures use AI Operations' colours, one per meaning. */

.agent-detail[b-8tivzazhha] {
  min-width: 0;
  padding: var(--spacing-4xl) var(--ds-detail-gutter) var(--spacing-5xl);
}

.agent-detail > *[b-8tivzazhha] {
  width: min(var(--ds-detail-max), 100%);
  margin-inline: auto;
}

.agent-detail[b-8tivzazhha] {
  /* Gaps in the token set: no page-gutter, content-width, control-height,
     border-width or chart scale. Shared with the operations page. */
  --ds-detail-gutter: clamp(28px, 4vw, 66px);
  --ds-detail-max: 1440px;
  --ds-detail-hairline: 1px;
  --ds-detail-measure: 650px;
  --ds-detail-avatar: 64px;
  --ds-detail-avatar-radius: 18px;
  --ds-detail-back-height: 34px;
  --ds-detail-tab: 34px;
  --ds-detail-stat-icon: 42px;
  --ds-detail-stat-min: 104px;
  --ds-detail-row-min: 64px;
  --ds-detail-week-height: 120px;
  --ds-detail-week-bar: 28px;
  --ds-detail-week-min: 4px;
  --ds-detail-ring: 1.5px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.agent-detail__header[b-8tivzazhha] {
  display: grid;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

/* The back button sits flush with the avatar below it. */
.agent-detail__header[b-8tivzazhha]  .agent-detail__back { justify-self: start; margin-inline-start: calc(-1 * var(--spacing-sm)); }

.agent-detail__identity[b-8tivzazhha] {
  display: grid;
  grid-template-columns: var(--ds-detail-avatar) minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: center;
}

.agent-tone-slate[b-8tivzazhha] {
  --agent-color: var(--colors-text-secondary);
  --agent-soft: var(--colors-surface-muted);
}

.agent-detail__avatar[b-8tivzazhha] {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: var(--ds-detail-avatar);
  height: var(--ds-detail-avatar);
  color: var(--agent-color);
  background: var(--agent-soft);
  border-radius: var(--ds-detail-avatar-radius);
}

.agent-detail__avatar img[b-8tivzazhha] { display: block; width: 100%; height: 100%; object-fit: cover; }

.agent-detail__titles[b-8tivzazhha] { display: grid; gap: var(--spacing-xs); min-width: 0; }
/* The job, then the channels' marks, ringed in the page colour they sit on. */
.agent-detail__job[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.agent-detail__job[b-8tivzazhha]  .ds-channel-stack { --ds-channel-stack-ring: var(--colors-surface-background); }
.agent-detail__name-row[b-8tivzazhha] { display: flex; gap: var(--spacing-md); align-items: center; }
.agent-detail__name-row[b-8tivzazhha]  h1 { overflow: hidden; margin: var(--spacing-none); color: var(--colors-text-primary); white-space: nowrap; text-overflow: ellipsis; }
[b-8tivzazhha] .agent-detail__lede { max-width: var(--ds-detail-measure); margin: var(--spacing-none); color: var(--colors-text-muted); }

.agent-detail__actions[b-8tivzazhha] { display: flex; flex: 0 0 auto; gap: var(--spacing-sm); align-items: center; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.agent-detail[b-8tivzazhha]  .agent-detail__tabs {
  width: fit-content;
  margin: var(--spacing-none) auto var(--spacing-2xl);
}

/* Draft readiness: the shortest safe path from a saved agent to live. */
.agent-detail__readiness[b-8tivzazhha] {
  overflow: hidden;
  margin-bottom: var(--spacing-2xl);
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.agent-detail__readiness-head[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-2xl);
  background: linear-gradient(135deg, var(--colors-accent-brand-subtle), var(--colors-surface-card) 72%);
  border-bottom: var(--ds-detail-hairline) solid var(--colors-surface-border);
}

.agent-detail__readiness-head > div[b-8tivzazhha] { display: grid; gap: var(--spacing-xs); }
.agent-detail__readiness-head[b-8tivzazhha]  h2,
.agent-detail__readiness-head[b-8tivzazhha]  p,
.agent-detail__readiness-title[b-8tivzazhha]  h3,
.agent-detail__readiness-copy[b-8tivzazhha]  p,
.agent-detail__readiness-foot[b-8tivzazhha]  p { margin: var(--spacing-none); }
.agent-detail__readiness-head[b-8tivzazhha]  h2,
.agent-detail__readiness-title[b-8tivzazhha]  h3 { color: var(--colors-text-primary); }
.agent-detail__readiness-head[b-8tivzazhha]  p,
.agent-detail__readiness-copy[b-8tivzazhha]  p { color: var(--colors-text-secondary); }

.agent-detail__readiness-list[b-8tivzazhha] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.agent-detail__readiness-step[b-8tivzazhha] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: center;
  min-width: 0;
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border: var(--ds-detail-hairline) solid transparent;
  border-radius: var(--radius-radius-xl);
}

.agent-detail__readiness-step.is-next[b-8tivzazhha] {
  background: var(--colors-accent-blue-subtle);
  border-color: var(--colors-accent-blue-text);
}

.agent-detail__readiness-icon[b-8tivzazhha] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-detail-stat-icon);
  height: var(--ds-detail-stat-icon);
  border-radius: var(--radius-radius-lg);
}

.agent-detail__readiness-step.is-knowledge .agent-detail__readiness-icon[b-8tivzazhha] {
  color: var(--colors-accent-blue-text);
  background: var(--colors-accent-blue-subtle);
}
.agent-detail__readiness-step.is-test .agent-detail__readiness-icon[b-8tivzazhha] {
  color: var(--colors-accent-violet-text);
  background: var(--colors-accent-violet-subtle);
}
.agent-detail__readiness-step.is-live .agent-detail__readiness-icon[b-8tivzazhha] {
  color: var(--colors-accent-emerald-text);
  background: var(--colors-accent-emerald-subtle);
}
.agent-detail__readiness-step.is-live.is-locked .agent-detail__readiness-icon[b-8tivzazhha] {
  color: var(--colors-icon-muted);
  background: var(--colors-surface-card);
}

.agent-detail__readiness-copy[b-8tivzazhha] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.agent-detail__readiness-title[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }

.agent-detail__readiness-foot[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-lg);
  color: var(--colors-icon-secondary);
  border-top: var(--ds-detail-hairline) solid var(--colors-surface-border);
}
.agent-detail__readiness-foot[b-8tivzazhha]  p { color: var(--colors-text-muted); }

@media (max-width: 1180px) {
  .agent-detail__readiness-step[b-8tivzazhha] { grid-template-columns: auto minmax(0, 1fr); }
  .agent-detail__readiness-step[b-8tivzazhha] >  .ds-button { grid-column: 2; justify-self: start; }
}

/* ── Today ───────────────────────────────────────────────────────────────── */
/* The four figures in one strip, as on AI Operations. The three that lead
   somewhere (the chats, the handovers, the tasks) are buttons. */

.agent-detail__today[b-8tivzazhha] { margin-bottom: var(--spacing-lg); }

.agent-detail__stats[b-8tivzazhha] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.agent-detail__stats[b-8tivzazhha]  .agent-detail__stat {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  min-width: 0;
  min-height: var(--ds-detail-stat-min);
  padding: var(--spacing-xl);
}
.agent-detail__stats[b-8tivzazhha]  .agent-detail__stat + .agent-detail__stat { border-left: var(--ds-detail-hairline) solid var(--colors-surface-border); }
.agent-detail__stats[b-8tivzazhha]  .agent-detail__stat:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--ds-detail-ring) var(--colors-interaction-focus);
}

.agent-detail__stat-icon[b-8tivzazhha] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-detail-stat-icon);
  height: var(--ds-detail-stat-icon);
  border-radius: var(--radius-radius-lg);
}
/* AI Operations' meanings: pink conversations, green done alone, violet a
   handover to a person, the brand for tasks. No yellow or amber. */
.agent-detail__stat-icon.is-conversations[b-8tivzazhha] { color: var(--colors-accent-pink-text); background: var(--colors-accent-pink-subtle); }
.agent-detail__stat-icon.is-answered[b-8tivzazhha] { color: var(--colors-accent-emerald-text); background: var(--colors-accent-emerald-subtle); }
.agent-detail__stat-icon.is-passed[b-8tivzazhha] { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }
.agent-detail__stat-icon.is-tasks[b-8tivzazhha] { color: var(--colors-icon-brand); background: var(--colors-accent-brand-subtle); }

.agent-detail__stat-text[b-8tivzazhha] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.agent-detail__stat-text[b-8tivzazhha]  strong { color: var(--colors-text-primary); }
.agent-detail__stat-text[b-8tivzazhha] >  span { color: var(--colors-text-muted); }
.agent-detail__figure[b-8tivzazhha] { display: flex; gap: var(--spacing-sm); align-items: baseline; }
.agent-detail__figure[b-8tivzazhha]  .agent-detail__share { color: var(--colors-accent-emerald-text); }
.agent-detail__stat-text[b-8tivzazhha]  .agent-detail__note { color: var(--colors-text-muted); }

/* Off or a draft: one calm line in place of a day of zeros. */
.agent-detail__quiet[b-8tivzazhha] { display: flex; gap: var(--spacing-md); align-items: center; padding: var(--spacing-xl); }

/* ── Needs you ───────────────────────────────────────────────────────────── */
/* As on AI Operations, for this agent's questions only. */

.agent-detail__needs[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-feedback-warning-border);
  border-radius: var(--radius-radius-2xl);
}
.agent-detail__needs-icon[b-8tivzazhha] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-detail-stat-icon);
  height: var(--ds-detail-stat-icon);
  color: var(--colors-feedback-warning-text);
  background: var(--colors-feedback-warning-subtle);
  border-radius: var(--radius-radius-lg);
}
.agent-detail__needs[b-8tivzazhha]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-detail__needs[b-8tivzazhha]  p { margin: var(--spacing-none); color: var(--colors-text-secondary); }

/* ── Recent conversations and the week, side by side ─────────────────────── */

.agent-detail__pair[b-8tivzazhha] {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--spacing-lg);
  align-items: stretch;
  margin-bottom: var(--spacing-lg);
}
/* Each card fills the row, so the week's bars grow to the list's height. */
.agent-detail__pair > .agent-detail__card[b-8tivzazhha] { display: flex; flex-direction: column; margin-bottom: var(--spacing-none); }

.agent-detail__recent[b-8tivzazhha] { margin: var(--spacing-none); padding: var(--spacing-xs); list-style: none; }

.agent-detail__recent[b-8tivzazhha]  .agent-detail__recent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
  min-height: var(--ds-detail-row-min);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-radius-lg);
}
.agent-detail__recent[b-8tivzazhha]  .agent-detail__recent-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--ds-detail-ring) var(--colors-interaction-focus);
}
/* Nothing yet: what will appear here, and when. */
.agent-detail__recent-empty[b-8tivzazhha] { display: grid; gap: var(--spacing-xs); padding: var(--spacing-xl); }
.agent-detail__recent-empty[b-8tivzazhha]  strong { color: var(--colors-text-primary); }
.agent-detail__recent-hint[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }

.agent-detail__recent[b-8tivzazhha]  .agent-detail__recent-name { overflow: hidden; color: var(--colors-text-primary); white-space: nowrap; text-overflow: ellipsis; }
.agent-detail__recent[b-8tivzazhha]  .agent-detail__recent-time { color: var(--colors-text-muted); white-space: nowrap; }

.agent-detail__card-head[b-8tivzazhha]  .agent-detail__muted { color: var(--colors-text-muted); }

/* Today in the first chart colour (the brand), the days before it in the
   brand's muted tint (the chart set has no lighter step), a day with nothing
   in the no-data colour. */
.agent-detail__week[b-8tivzazhha] {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
}
.agent-detail__day[b-8tivzazhha] { display: grid; grid-template-rows: auto minmax(var(--ds-detail-week-height), 1fr) auto; gap: var(--spacing-xs); justify-items: center; }
.agent-detail__day[b-8tivzazhha]  .agent-detail__day-value { color: var(--colors-text-secondary); }
.agent-detail__day[b-8tivzazhha]  .agent-detail__day-name { color: var(--colors-text-muted); }
.agent-detail__day-bar[b-8tivzazhha] {
  align-self: end;
  width: min(var(--ds-detail-week-bar), 100%);
  height: max(var(--ds-detail-week-min), var(--ds-detail-bar));
  background: var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-sm) var(--radius-radius-sm) 0 0;
}
.agent-detail__day.is-today .agent-detail__day-bar[b-8tivzazhha] { background: var(--colors-chart-chart-1); }
.agent-detail__day-bar.is-empty[b-8tivzazhha] { background: var(--colors-chart-no-data); }
.agent-detail__day.is-today[b-8tivzazhha]  .agent-detail__day-name,
.agent-detail__day.is-today[b-8tivzazhha]  .agent-detail__day-value { color: var(--colors-text-primary); }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.agent-detail__card[b-8tivzazhha] {
  margin-bottom: var(--spacing-lg);
  overflow: visible;
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.agent-detail__card-head[b-8tivzazhha] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: var(--ds-detail-hairline) solid var(--colors-surface-border);
}

.agent-detail__card-head[b-8tivzazhha]  h2,
.agent-detail__card-head[b-8tivzazhha]  h3,
.agent-detail__section-head[b-8tivzazhha]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }

.agent-detail__card-head[b-8tivzazhha]  p,
.agent-detail__section-head[b-8tivzazhha]  p { margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none); color: var(--colors-text-subtle); }

.agent-detail__section-head[b-8tivzazhha] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-lg);
}

.agent-detail__row[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--ds-detail-row-min);
  padding: var(--spacing-md) var(--spacing-xl);
}

.agent-detail__row + .agent-detail__row[b-8tivzazhha] { border-top: var(--ds-detail-hairline) solid var(--colors-surface-border); }
.agent-detail__row-text[b-8tivzazhha] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.agent-detail__row-text[b-8tivzazhha]  strong { color: var(--colors-text-primary); }
.agent-detail__row-text[b-8tivzazhha]  small { color: var(--colors-text-muted); }
.agent-detail__fact-title[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }


@media (max-width: 1280px) {
  .agent-detail__pair[b-8tivzazhha] { grid-template-columns: minmax(0, 1fr); }
  .agent-detail__identity[b-8tivzazhha] { grid-template-columns: var(--ds-detail-avatar) minmax(0, 1fr); }
  .agent-detail__actions[b-8tivzazhha] { grid-column: 2; justify-self: start; }
}

@media (max-width: 1180px) {
  .agent-detail[b-8tivzazhha] { padding-inline: var(--spacing-2xl); }
  /* Two by two: the third starts a row, so it takes the top rule instead. */
  .agent-detail__stats[b-8tivzazhha] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-detail__stats[b-8tivzazhha]  .agent-detail__stat { gap: var(--spacing-md); padding: var(--spacing-lg); }
  .agent-detail__stats[b-8tivzazhha]  .agent-detail__stat:nth-child(3) { border-left: 0; }
  .agent-detail__stats[b-8tivzazhha]  .agent-detail__stat:nth-child(n + 3) { border-top: var(--ds-detail-hairline) solid var(--colors-surface-border); }
}

/* ── Just turned on ──────────────────────────────────────────────────────── */
/* One line above the tabs: where it is live, and what to do next. */

.agent-detail__live[b-8tivzazhha] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-detail-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-2xl);
}
.agent-detail__live-icon[b-8tivzazhha] { display: grid; flex: none; place-items: center; color: var(--colors-brand-primary); }
.agent-detail__live[b-8tivzazhha]  .agent-detail__live-title { display: flex; flex: 1; gap: var(--spacing-sm); align-items: center; min-width: 0; margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-detail__live[b-8tivzazhha]  .ds-channel-stack { --ds-channel-stack-ring: var(--colors-accent-brand-subtle); }
.agent-detail__live-actions[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }

/* ── How it works ────────────────────────────────────────────────────────── */

.agent-detail__fact-icon[b-8tivzazhha] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-detail-stat-icon);
  height: var(--ds-detail-stat-icon);
  color: var(--colors-icon-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

/* ── Settings ────────────────────────────────────────────────────────────── */
/* The setup screen's layout: settings on the left, the live preview on the
   right, and a save bar pinned to the foot once anything changes. */

.agent-detail__settings[b-8tivzazhha] {
  /* Missing from the token set: the preview's width, as on the setup screen. */
  --ds-detail-preview: 400px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ds-detail-preview);
  gap: var(--spacing-4xl);
  align-items: start;
}
/* The setup screen's rhythm: 48px between sections. */
.agent-detail__settings-form[b-8tivzazhha] { display: grid; gap: var(--spacing-4xl); min-width: 0; }

.agent-detail__save[b-8tivzazhha] {
  position: sticky;
  bottom: var(--spacing-lg);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}
.agent-detail__save[b-8tivzazhha]  p { margin: var(--spacing-none); color: var(--colors-text-muted); }
.agent-detail__save[b-8tivzazhha]  p.is-error { color: var(--colors-feedback-destructive-text); }

@media (max-width: 1180px) {
  .agent-detail__settings[b-8tivzazhha] { grid-template-columns: minmax(0, 1fr); }
}


/* ── Concept B: its configuration, one tab at a time ─────────────────────── */
/* One column at a reading width, the setup rhythm between cards, and the
   save bar under whichever tab is open. */

.agent-detail__config[b-8tivzazhha] {
  /* Missing from the token set: the configuration's reading width. */
  --ds-detail-config: 880px;

  display: grid;
  gap: var(--spacing-xl);
  width: min(var(--ds-detail-config), 100%);
  min-width: 0;
}
.agent-detail__config > *[b-8tivzazhha] { min-width: 0; }
.agent-detail__config > .agent-detail__card[b-8tivzazhha] { margin-bottom: var(--spacing-none); }

/* Its main job: one row, with Change. */
.agent-detail__job-type[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xl);
}

/* About the business: the kind of business, then the website and what it found. */
.agent-detail__website[b-8tivzazhha] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
  border-top: var(--ds-detail-hairline) solid var(--colors-surface-border);
}
/* Level with the field, not its helper text. */
.agent-detail__website[b-8tivzazhha] >  .ds-button { margin-top: var(--spacing-sm); }
.agent-detail__found[b-8tivzazhha] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  margin: var(--spacing-none) var(--spacing-xl) var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  color: var(--colors-accent-blue-text);
  background: var(--colors-accent-blue-subtle);
  border-radius: var(--radius-radius-xl);
}
.agent-detail__found[b-8tivzazhha]  p { flex: 1; margin: var(--spacing-none); color: var(--colors-text-primary); }

/* Just created: the banner's two lines. */
.agent-detail__created-text[b-8tivzazhha] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.agent-detail__created-text[b-8tivzazhha]  p { margin: var(--spacing-none); color: var(--colors-text-secondary); }

@media (max-width: 1180px) {
  .agent-detail__website[b-8tivzazhha] { grid-template-columns: minmax(0, 1fr); }
  .agent-detail__website[b-8tivzazhha] >  .ds-button { margin-top: var(--spacing-none); justify-self: start; }
}

/* ── Concept B, revised (designer, 14 October 2026) ──────────────────────── */

/* The tabs are the page's sections: left, in line with the name, at the
   page's width, and pinned at the top as the page scrolls so they are never
   lost on a long tab. The page's own colour behind them (designer, 2 November
   2026: no band of its own), so they sit on the page and what scrolls under
   them doesn't show through. */
.agent-detail[b-8tivzazhha]  .agent-detail__tabs.is-sections {
  position: sticky;
  top: 0;
  z-index: var(--ds-detail-tabs-layer);
  width: min(var(--ds-detail-max), 100%);
  margin: var(--spacing-none) auto var(--spacing-2xl);
  padding-top: var(--spacing-sm);
  background: var(--colors-surface-background);
}

.agent-detail[b-8tivzazhha] {
  /* Missing from the token set: no z-index scale. Above the cards, under dialogs. */
  --ds-detail-tabs-layer: 3;
}

/* Every tab one column, at the same width as the header and the tabs, so
   switching tabs never changes the page's width (and no second column to
   fold on a smaller screen). */
.agent-detail__config[b-8tivzazhha] { width: min(var(--ds-detail-max), 100%); }

/* How it's set up: each line opens the tab where it is set. */
.agent-detail[b-8tivzazhha]  .agent-detail__setup-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
  min-height: var(--ds-detail-row-min);
  padding: var(--spacing-md) var(--spacing-xl);
  text-align: left;
  border-top: var(--ds-detail-hairline) solid var(--colors-surface-border);
}
.agent-detail[b-8tivzazhha]  .agent-detail__setup-row:hover { background: var(--colors-interaction-hover); }
.agent-detail[b-8tivzazhha]  .agent-detail__setup-go { flex: none; color: var(--colors-icon-secondary); }
.agent-detail__setup[b-8tivzazhha] { overflow: hidden; }

/* What this job needs that the business hasn't said: knowledge's blue, one line, a way to add it. */
.agent-detail__gaps[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-accent-blue-subtle);
  border-radius: var(--radius-radius-2xl);
}
.agent-detail__gaps[b-8tivzazhha] >  p { flex: 1; min-width: 0; color: var(--colors-text-secondary); }
.agent-detail__gaps-icon[b-8tivzazhha] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-detail-stat-icon);
  height: var(--ds-detail-stat-icon);
  color: var(--colors-accent-blue-text);
  background: var(--colors-accent-blue-subtle);
  border-radius: var(--radius-radius-lg);
}

/* ── Concept B: four tabs, each thing said once ──────────────────────────── */

/* A titled part of a tab: its heading, a line under it, then its card. */
.agent-detail__group[b-8tivzazhha] { display: grid; gap: var(--spacing-md); min-width: 0; }
.agent-detail__group[b-8tivzazhha]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-detail__group-head[b-8tivzazhha] { display: grid; gap: var(--spacing-xs); }
.agent-detail__group-head[b-8tivzazhha]  p { margin: var(--spacing-none); color: var(--colors-text-muted); }

/* Overview: where it answers, above how it's set up. */
.agent-detail__where[b-8tivzazhha] { margin-bottom: var(--spacing-xl); }


/* Handover & safety: its limits, a switch a row. */
.agent-detail__limit[b-8tivzazhha] { padding: var(--spacing-lg) var(--spacing-xl); }
.agent-detail__limit + .agent-detail__limit[b-8tivzazhha] { border-top: var(--ds-detail-hairline) solid var(--colors-surface-border); }

/* A part's heading with one action beside it (Knowledge: All business knowledge). */
.agent-detail__group-row[b-8tivzazhha] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  align-items: flex-end;
  justify-content: space-between;
}

/* Concept B's save bar: the page's last child, so it floats at the window's
   foot on any tab, above the cards; what is unsaved on the left, the two
   buttons on the right. */
.agent-detail__save.is-floating[b-8tivzazhha] {
  z-index: var(--ds-detail-tabs-layer);
  justify-content: space-between;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-3xl) var(--colors-surface-shadow);
}
.agent-detail__save.is-floating[b-8tivzazhha]  p { flex: 1; min-width: 0; }
.agent-detail__save-actions[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

.agent-detail[b-8tivzazhha] {
  /* Missing from the token set: the height of the demo's own tools at the
     window's foot (concept switch, theme toggle), to float the bar above. */
  --ds-detail-demo-tools: 64px;
}
.agent-detail.is-demo .agent-detail__save.is-floating[b-8tivzazhha] { bottom: calc(var(--spacing-lg) + var(--ds-detail-demo-tools)); }

/* ── A draft, getting ready (designer, 19 October 2026) ────────────────────
   Its job first, then a test, then on: one row each, a numbered mark that
   becomes a tick, the one to do now in full colour, the rest quieter. */
/* Room to breathe (designer, 20 October 2026): a roomier head with no rule under it, taller rows, the mark
   and the button centred on the words, and rules between the steps starting at the words. */
.agent-detail__ready[b-8tivzazhha] { margin-bottom: var(--spacing-4xl); }
.agent-detail__ready > .agent-detail__card-head[b-8tivzazhha] { padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-sm); border-bottom: 0; }
.agent-detail__ready-steps[b-8tivzazhha] { display: grid; margin: var(--spacing-none); padding: var(--spacing-none) var(--spacing-none) var(--spacing-sm); list-style: none; }
.agent-detail__ready-step[b-8tivzazhha] {
  position: relative;
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  min-height: var(--ds-detail-row-min);
  padding: var(--spacing-xl) var(--spacing-2xl);
}
.agent-detail__ready-step + .agent-detail__ready-step[b-8tivzazhha]::before {
  position: absolute;
  top: 0;
  right: var(--spacing-2xl);
  left: calc(var(--spacing-2xl) + var(--ds-detail-ready-mark) + var(--spacing-lg));
  border-top: var(--ds-detail-hairline) solid var(--colors-surface-border);
  content: "";
}
.agent-detail__ready-mark[b-8tivzazhha] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-detail-ready-mark);
  height: var(--ds-detail-ready-mark);
  color: var(--colors-text-muted);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
/* The step to do next, lit for a moment as the Overview opens from the end of telling it its job. */
.agent-detail__ready-step.is-lit[b-8tivzazhha] { animation: agent-ready-lit-b-8tivzazhha var(--ds-detail-ready-lit) var(--ds-motion-ease) both; }
@keyframes agent-ready-lit-b-8tivzazhha { from { background-color: var(--colors-accent-brand-subtle); } }
.agent-detail__ready-step.is-now .agent-detail__ready-mark[b-8tivzazhha] { color: var(--colors-brand-primary); border-color: var(--colors-brand-primary); }
.agent-detail__ready-step.is-done .agent-detail__ready-mark[b-8tivzazhha] { color: var(--colors-brand-primary-foreground); background: var(--colors-brand-primary); border-color: var(--colors-brand-primary); }
.agent-detail__ready-text[b-8tivzazhha] { display: grid; flex: 1; gap: var(--spacing-xs); min-width: 0; }
.agent-detail__ready-text[b-8tivzazhha]  strong { color: var(--colors-text-primary); }
.agent-detail__ready-text[b-8tivzazhha]  small { color: var(--colors-text-muted); }
.agent-detail__ready-step.is-later .agent-detail__ready-text[b-8tivzazhha]  strong { color: var(--colors-text-secondary); }
.agent-detail__ready-step[b-8tivzazhha] >  .ds-button { flex: none; }
.agent-detail[b-8tivzazhha] {
  /* Missing from the token set: a numbered step's round mark, and how long the next step stays lit. */
  --ds-detail-ready-mark: 32px;
  --ds-detail-ready-lit: 2.4s;
}

/* ── Told its job, in its view: it speaks for itself first ──────────────── */
.agent-detail__job-empty[b-8tivzazhha] { padding: var(--spacing-2xl) var(--spacing-xl); }
.agent-detail__job-intro[b-8tivzazhha] { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
/* Once they are talking, it has said hello in the chat: the chat takes the room, the window's height. */
.agent-detail__job-intro:has(~ .job-editor .job-editor__voice.is-talking)[b-8tivzazhha] { display: none; }
.agent-detail__job-intro[b-8tivzazhha]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-detail__job-intro[b-8tivzazhha]  .agent-detail__job-ask { display: block; }
.agent-detail__job-intro[b-8tivzazhha]  .agent-detail__job-lede { max-width: var(--ds-detail-job-lede); margin: var(--spacing-none); color: var(--colors-text-muted); }
.agent-detail[b-8tivzazhha] {
  /* Missing from the token set: a comfortable reading measure for one paragraph. */
  --ds-detail-job-lede: 640px;
}

/* ── It knows its job: the end of telling it (designer, 19 October 2026) ───
   Calm: its face, a tick that pops in, then what it will do, a line at a time. */
.agent-detail__told[b-8tivzazhha] { display: grid; justify-items: center; gap: var(--spacing-md); text-align: center; }
.agent-detail__told[b-8tivzazhha]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); animation: agent-told-rise-b-8tivzazhha var(--ds-motion-slow) var(--ds-motion-enter) both; animation-delay: var(--ds-told-step); }
.agent-detail__told-face[b-8tivzazhha] { position: relative; width: var(--ds-told-face); height: var(--ds-told-face); animation: agent-told-face-b-8tivzazhha var(--ds-motion-slow) var(--ds-motion-enter) both; }
.agent-detail__told-face img[b-8tivzazhha] { display: block; width: 100%; height: 100%; border-radius: var(--radius-radius-full); box-shadow: 0 0 0 var(--spacing-sm) var(--colors-accent-brand-subtle); }
.agent-detail__told-tick[b-8tivzazhha] {
  position: absolute;
  right: calc(-1 * var(--spacing-2xs));
  bottom: calc(-1 * var(--spacing-2xs));
  display: grid;
  place-items: center;
  width: var(--ds-told-tick);
  height: var(--ds-told-tick);
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border: var(--ds-told-ring) solid var(--colors-surface-background);
  border-radius: var(--radius-radius-full);
  animation: agent-told-tick-b-8tivzazhha var(--ds-motion-slow) var(--ds-motion-enter) both;
  animation-delay: var(--ds-told-step);
}
.agent-detail__told[b-8tivzazhha]  .agent-detail__told-lede { margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none); color: var(--colors-text-muted); animation: agent-told-rise-b-8tivzazhha var(--ds-motion-slow) var(--ds-motion-enter) both; animation-delay: calc(var(--ds-told-step) * 2); }
.agent-detail__told-list[b-8tivzazhha] {
  display: grid;
  gap: var(--spacing-sm);
  width: min(var(--ds-detail-job-lede), 100%);
  margin: var(--spacing-none);
  padding: var(--spacing-lg) var(--spacing-xl);
  text-align: left;
  list-style: none;
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}
.agent-detail__told-list li[b-8tivzazhha] { display: flex; gap: var(--spacing-sm); align-items: flex-start; color: var(--colors-text-secondary); animation: agent-told-rise-b-8tivzazhha var(--ds-motion-base) var(--ds-motion-enter) both; animation-delay: calc(var(--ds-told-step) * 2 + var(--ds-told-at, 0) * var(--ds-told-line)); }
.agent-detail__told-list li[b-8tivzazhha] >  .ds-icon { flex: none; margin-top: var(--spacing-2xs); color: var(--colors-brand-primary); }
.agent-detail__told[b-8tivzazhha]  .agent-detail__told-more { animation: agent-told-rise-b-8tivzazhha var(--ds-motion-base) var(--ds-motion-enter) both; animation-delay: calc(var(--ds-told-step) * 2 + var(--ds-told-at, 0) * var(--ds-told-line)); }
.agent-detail__told[b-8tivzazhha]  .agent-detail__told-note { max-width: var(--ds-detail-job-lede); margin: var(--spacing-none); color: var(--colors-text-muted); }
.agent-detail__told-actions[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; margin-top: var(--spacing-md); }
.agent-detail__told[b-8tivzazhha] {
  /* Missing from the token set: the moment's face and tick, and its pace (a beat between each part, a shorter one between lines). */
  --ds-told-face: 88px;
  --ds-told-tick: 32px;
  --ds-told-ring: 3px;
  --ds-told-step: 160ms;
  --ds-told-line: 70ms;
}
@keyframes agent-told-face-b-8tivzazhha { from { opacity: 0; transform: scale(0.9); } }
@keyframes agent-told-tick-b-8tivzazhha { from { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.12); } }
@keyframes agent-told-rise-b-8tivzazhha { from { opacity: 0; transform: translateY(var(--spacing-xs)); } }
@media (prefers-reduced-motion: reduce) {
  .agent-detail__told[b-8tivzazhha]  h2,
  .agent-detail__told-face[b-8tivzazhha],
  .agent-detail__told-tick[b-8tivzazhha],
  .agent-detail__told[b-8tivzazhha]  .agent-detail__told-lede,
  .agent-detail__told-list li[b-8tivzazhha],
  .agent-detail__told[b-8tivzazhha]  .agent-detail__told-more { animation: none; }
}

/* Its job (designer, 20 October 2026): the summary to read, its name and the way to change it above. */
.agent-detail__job-card[b-8tivzazhha] {
  /* Missing from the token set: how long an addition stays lit. The summary fills the card (designer, 2 November 2026). */
  --ds-detail-job-glow: 4s;
}
.agent-detail__job-head[b-8tivzazhha] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: var(--ds-detail-hairline) solid var(--colors-surface-border);
}
.agent-detail__job-head[b-8tivzazhha]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-detail__job-head[b-8tivzazhha]  small { color: var(--colors-text-muted); }
.agent-detail__job-actions[b-8tivzazhha] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: flex-end; }
.agent-detail__job-body[b-8tivzazhha] { display: grid; justify-items: start; gap: var(--spacing-sm); padding: var(--spacing-xl); }
/* A long job: its first four lines, then Show all. */
.agent-detail__job-body.is-clamped[b-8tivzazhha]  .agent-detail__job-summary p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.agent-detail__job-body[b-8tivzazhha]  .agent-detail__job-more { margin-left: calc(-1 * var(--spacing-md)); }
.agent-detail__job-summary[b-8tivzazhha]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.agent-detail__job-summary span[b-8tivzazhha] { border-radius: var(--radius-radius-sm); box-decoration-break: clone; transition: color var(--ds-motion-base) var(--ds-motion-ease); }
/* Just added: lit, then back to the page. */
.agent-detail__job-summary span.is-new[b-8tivzazhha] { animation: agent-job-new-b-8tivzazhha var(--ds-detail-job-glow) var(--ds-motion-ease) both; }
/* To change (from the test chat): marked while they talk about it. */
.agent-detail__job-summary span.is-focus[b-8tivzazhha] { background: var(--colors-accent-brand-subtle); }
/* Read aloud: what is still to come quieter, each sentence lighting as it is reached. */
.agent-detail__job-summary.is-reading span:not([data-on])[b-8tivzazhha] { color: var(--colors-text-muted); }
@keyframes agent-job-new-b-8tivzazhha { from { background-color: var(--colors-accent-brand-subtle); } }

/* Updating it: its job now, quiet, above the conversation; put away once they talk (the chat takes the room). */
.agent-detail__update-now[b-8tivzazhha] { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.agent-detail__update-now:has(~ .job-editor .job-editor__voice.is-talking)[b-8tivzazhha] { display: none; }
.agent-detail__update-head[b-8tivzazhha] { display: flex; gap: var(--spacing-md); align-items: center; justify-content: space-between; }
.agent-detail__update-head[b-8tivzazhha]  .agent-detail__update-label { margin: var(--spacing-none); color: var(--colors-text-muted); }
.agent-detail__update-now .agent-detail__job-summary[b-8tivzazhha] {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-detail-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.agent-detail__update-now .agent-detail__job-summary[b-8tivzazhha]  p { color: var(--colors-text-secondary); }

@media (max-width: 760px) {
  .agent-detail__job-head[b-8tivzazhha] { flex-wrap: wrap; }
  .agent-detail__job-actions[b-8tivzazhha] { justify-content: flex-start; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-detail__job-summary span[b-8tivzazhha] { transition: none; }
  .agent-detail__job-summary span.is-new[b-8tivzazhha] { animation: none; }
}
/* /Components/Pages/Dashboard/AiAgents/AiAgents.razor.rz.scp.css */
/* AI Operations: a header, today's numbers, what needs you (only when
   something does), your agents, then what they all know. Content capped and
   centred; white cards on the muted page; 48px between sections, 16px from a
   heading to its content, 20px inside a card. The shell is AppShell's job. */

.operations-main[b-h2u06yoial] {
  /* Gaps in the token set: no page-gutter, content-width or icon-tile scale.
     The gutter and cap are the React page's. */
  --ds-ops-gutter: clamp(28px, 4vw, 66px);
  --ds-ops-max: 1180px;
  --ds-ops-icon: 44px;
  --ds-ops-grid-min: 320px;
  --ds-skeleton-avatar: 48px;
  --ds-skeleton-copy: 40px;
  --ds-skeleton-body: 96px;

  display: grid;
  gap: var(--spacing-4xl);
  align-content: start;
  min-width: 0;
  padding: var(--spacing-4xl) var(--ds-ops-gutter) var(--spacing-5xl);
}

.operations-main > *[b-h2u06yoial] {
  width: min(var(--ds-ops-max), 100%);
  margin-inline: auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.operations-header[b-h2u06yoial] {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-end;
  justify-content: space-between;
}

.operations-heading[b-h2u06yoial] { display: grid; gap: var(--spacing-sm); min-width: 0; }
.operations-heading[b-h2u06yoial]  h1 { margin: 0; color: var(--colors-text-primary); }
.operations-heading[b-h2u06yoial]  p { margin: 0; color: var(--colors-text-muted); }

/* A heading straight after the header sits closer than a section would. */
.operations-header + *[b-h2u06yoial] { margin-top: calc(var(--spacing-2xl) - var(--spacing-4xl)); }

/* ── Nothing yet: the way in, in the middle of the page ──────────────────── */
/* The page fills the window, and what is left under the header is shared
   out evenly above and below the empty state, a little higher than centre,
   where the eye goes first. */
.operations-main.is-empty[b-h2u06yoial] {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100dvh;
}
.operations-main.is-empty .operations-header + *[b-h2u06yoial] { margin-top: 0; }
.operations-start[b-h2u06yoial] {
  display: grid;
  gap: var(--spacing-lg);
  align-content: center;
  padding-bottom: var(--spacing-6xl);
}

/* ── Today: the numbers lead ─────────────────────────────────────────────── */
.operations-stats[b-h2u06yoial] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.operations-stat[b-h2u06yoial] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  min-width: 0;
  padding: var(--spacing-xl);
}
.operations-stat + .operations-stat[b-h2u06yoial] { border-left: var(--ds-hairline) solid var(--colors-surface-border); }
.operations-stat > div[b-h2u06yoial] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.operations-stat[b-h2u06yoial]  strong { color: var(--colors-text-primary); }
.operations-stat > div[b-h2u06yoial] >  span { color: var(--colors-text-muted); }

.operations-stat__figure[b-h2u06yoial] { display: inline-flex; gap: var(--spacing-sm); align-items: baseline; }
.operations-stat__figure[b-h2u06yoial]  .operations-stat__share { color: var(--colors-accent-emerald-text); }

.operations-stat__icon[b-h2u06yoial] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-ops-icon);
  height: var(--ds-ops-icon);
  border-radius: var(--radius-radius-lg);
}
.operations-stat__icon.is-conversations[b-h2u06yoial] { color: var(--colors-accent-pink-text); background: var(--colors-accent-pink-subtle); }
/* One colour per meaning, as on agent setup: pink is conversations, green is
   work done, violet a handover to a person, blue is knowledge (never used here
   for anything else). No yellow or amber: those read as warnings. */
.operations-stat__icon.is-answered[b-h2u06yoial] { color: var(--colors-accent-emerald-text); background: var(--colors-accent-emerald-subtle); }
.operations-stat__icon.is-passed[b-h2u06yoial] { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }
/* Tasks: the brand, for the work the agents got done for the business. */
.operations-stat__icon.is-tasks[b-h2u06yoial] { color: var(--colors-icon-brand); background: var(--colors-accent-brand-subtle); }
.operations-stat > div[b-h2u06yoial] >  .operations-stat__note { color: var(--colors-text-muted); }

/* ── Needs you: the one thing to act on ──────────────────────────────────── */
.operations-needs[b-h2u06yoial],
.operations-knowledge[b-h2u06yoial] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.operations-needs[b-h2u06yoial] { border-color: var(--colors-feedback-warning-border); }

.operations-needs__icon[b-h2u06yoial],
.operations-knowledge__icon[b-h2u06yoial] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-ops-icon);
  height: var(--ds-ops-icon);
  border-radius: var(--radius-radius-lg);
}
.operations-needs__icon[b-h2u06yoial] { color: var(--colors-feedback-warning-text); background: var(--colors-feedback-warning-subtle); }
.operations-knowledge__icon[b-h2u06yoial] { color: var(--colors-accent-blue-text); background: var(--colors-accent-blue-subtle); }

.operations-needs__text[b-h2u06yoial],
.operations-knowledge__text[b-h2u06yoial] { display: grid; flex: 1; gap: var(--spacing-xs); min-width: 0; }
.operations-needs__text[b-h2u06yoial]  h2,
.operations-knowledge__text[b-h2u06yoial]  h2 { margin: 0; color: var(--colors-text-primary); }
.operations-needs__text[b-h2u06yoial]  p,
.operations-knowledge__text[b-h2u06yoial]  p { margin: 0; color: var(--colors-text-secondary); }

/* ── Your agents ─────────────────────────────────────────────────────────── */
.operations-agents[b-h2u06yoial] { display: grid; gap: var(--spacing-lg); }

.operations-section-head[b-h2u06yoial] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
}
.operations-section-head[b-h2u06yoial]  h2 { margin: 0; color: var(--colors-text-primary); }
.operations-tools[b-h2u06yoial] { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: center; }

.agent-grid[b-h2u06yoial] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--ds-ops-grid-min), 100%), 1fr));
  gap: var(--spacing-lg);
}

.agent-card-skeleton[b-h2u06yoial] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.operations-empty[b-h2u06yoial] {
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

/* ── Smaller windows ─────────────────────────────────────────────────────── */
/* The dashboard keeps a minimum width, so the three numbers stay side by side;
   they just get a little closer. */
@media (max-width: 1180px) {
  .operations-stat[b-h2u06yoial] { gap: var(--spacing-md); padding: var(--spacing-lg); }
}

/* /Components/Pages/Dashboard/AiAgents/OmniJobConversation.razor.rz.scp.css */
/* An agent's job description: the conversation on top (at the start, the orb
   in a stage of its own with Talk and Type; once it starts, a chat: the
   agent's words on the left, the owner's on the right, the topics along the
   top, and at the foot the box with the mic, or a small bar saying whose turn
   it is; Teach your AI's light along the card's edges while a voice turn
   happens), then its job description to read and edit, with Hear it. White
   cards on the muted page. */

.job-editor[b-p9n8fiypse] {
  /* Missing from the token set: the orb's size and the stage around it (room
     for it to swell when loud), the start card's height (so it doesn't jump),
     the text's measure, the motion of a just-written job description, the
     conversation's height in the window, the avatar beside the agent's words,
     how wide a message runs, the bar's orb, and the typing dots. */
  --ds-job-editor-orb: 96px;
  --ds-job-editor-stage: 136px;
  --ds-job-editor-orb-small: 56px;
  --ds-job-editor-stage-small: 72px;
  --ds-job-editor-voice: 412px;
  --ds-job-editor-measure: 560px;
  --ds-job-editor-new: 2400ms;
  --ds-job-editor-word: 180ms;
  --ds-job-editor-unsaid: 0.28;
  --ds-job-editor-pause: 3s;
  --ds-job-editor-bar: 160px;
  --ds-job-editor-aura: 0.6;
  --ds-job-editor-chat: min(860px, calc(100dvh - 136px));
  --ds-job-editor-answer: 64px;
  --ds-job-editor-answer-most: 168px;
  --ds-job-editor-chat-least: 420px;
  --ds-job-editor-face: 32px;
  --ds-job-editor-bubble: 80%;
  --ds-job-editor-bar-orb: 36px;
  --ds-job-editor-dot: 6px;
  --ds-job-editor-pulse: 1.2s;
  --ds-job-editor-interim: 0.7;
  --ds-job-editor-scroll-room: 72px;
  --ds-job-editor-asking: calc(var(--ds-job-editor-chat) - 200px);
  --ds-job-editor-dock-shadow: 36px;
  --ds-job-editor-asking-lift: 0 -12px 40px;

  display: grid;
  gap: var(--spacing-lg);
  min-width: 0;
}
/* In a full-screen view (telling an agent its job on its page): the window under its bar (the topics in it), with room above and below. */
.ds-focus-view .job-editor[b-p9n8fiypse] { --ds-job-editor-chat: min(860px, calc(100dvh - 200px)); }
.job-editor > *[b-p9n8fiypse] { min-width: 0; }
[b-p9n8fiypse] .job-editor__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }

/* ── The start ───────────────────────────────────────────────────────────── */

/* The card is the light's frame (VoiceAura, its first child). At the start it
   keeps one height, and its content starts from the top, so the orb stays put. */
.job-editor__voice[b-p9n8fiypse] {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: var(--ds-job-editor-voice);
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
  overflow: hidden;
  text-align: center;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  scroll-margin-top: var(--ds-job-editor-scroll-room);
}
.job-editor__voice > :not(.ds-voice-aura)[b-p9n8fiypse] { position: relative; z-index: 1; }
/* Room between the parts: the orb, 24px, what to do, 24px, the ways in. */
.job-editor__voice > .job-editor__voice-text[b-p9n8fiypse],
.job-editor__voice > .job-editor__ways[b-p9n8fiypse] { margin-top: var(--spacing-2xl); }
.job-editor__voice[b-p9n8fiypse] >  .inline-error { justify-self: stretch; margin-top: var(--spacing-lg); text-align: start; }
/* Once there is a job description: the way to add more, not the main thing. */
.job-editor__voice.is-compact[b-p9n8fiypse] {
  --ds-job-editor-orb: var(--ds-job-editor-orb-small);
  --ds-job-editor-stage: var(--ds-job-editor-stage-small);
  min-height: 0;
  padding-top: var(--spacing-xl);
}
.job-editor__voice.is-compact > .job-editor__voice-text[b-p9n8fiypse] { margin-top: var(--spacing-md); }
.job-editor__voice.is-compact > .job-editor__ways[b-p9n8fiypse] { margin-top: var(--spacing-xl); }

/* The light, kept soft for a card this size. */
.job-editor .job-editor__voice[b-p9n8fiypse]  .ds-voice-aura {
  /* Missing from the token set: the light's bands for a small card,
     thinner than for Teach your AI's large panel. */
  --ds-voice-aura-tight: 2px;
  --ds-voice-aura-tight-blur: 6px;
  --ds-voice-aura-wide: 6px;
  --ds-voice-aura-wide-blur: 16px;
  opacity: var(--ds-job-editor-aura);
}

/* The orb in its stage: room to swell, never near the edge. */
.job-editor__stage[b-p9n8fiypse] {
  display: grid;
  place-items: center;
  width: var(--ds-job-editor-stage);
  height: var(--ds-job-editor-stage);
}
.job-editor__voice[b-p9n8fiypse]  .ds-voice-orb.job-editor__orb { --ds-voice-orb-size: var(--ds-job-editor-orb); }
.job-editor__voice-text[b-p9n8fiypse] { display: grid; gap: var(--spacing-xs); justify-items: center; max-width: var(--ds-job-editor-measure); }
.job-editor__voice-text[b-p9n8fiypse]  p { margin: var(--spacing-none); }
.job-editor__voice-text[b-p9n8fiypse]  p:first-child { color: var(--colors-text-primary); }

.job-editor__ways[b-p9n8fiypse] { display: grid; gap: var(--spacing-xl); justify-items: center; }
.job-editor__start[b-p9n8fiypse] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; justify-content: center; }

/* ── The conversation ────────────────────────────────────────────────────── */

/* A chat in the card: the topics on top, the messages in between (scrolling
   when there are many), and the foot always in reach. */
.job-editor__voice.is-talking[b-p9n8fiypse] {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-items: stretch;
  height: var(--ds-job-editor-chat);
  min-height: var(--ds-job-editor-chat-least);
  padding: var(--spacing-none);
  text-align: start;
}
/* A short exchange (adding to it): as tall as it needs, up to the same height. */
.job-editor__voice.is-talking.is-short[b-p9n8fiypse] { height: auto; min-height: 0; max-height: var(--ds-job-editor-chat); }

.job-editor__topics[b-p9n8fiypse] {
  flex: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
}

.job-editor__log[b-p9n8fiypse] {
  flex: 1;
  min-height: 0;
  padding: var(--spacing-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The chat and its approval scroll with no bar showing (designer, 19 October 2026): the
   conversation is the focus. The wheel, a trackpad and the keyboard still scroll them. */
.job-editor__log[b-p9n8fiypse],
.job-editor__dock.is-asking[b-p9n8fiypse] { scrollbar-width: none; }
.job-editor__log[b-p9n8fiypse]::-webkit-scrollbar,
.job-editor__dock.is-asking[b-p9n8fiypse]::-webkit-scrollbar { display: none; }
.job-editor__thread[b-p9n8fiypse] {
  display: grid;
  gap: var(--spacing-lg);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

/* A new topic, like a new day in a chat: its name between two hairlines. */
.job-editor__divider[b-p9n8fiypse] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-block: var(--spacing-xs);
  color: var(--colors-text-muted);
}
.job-editor__divider[b-p9n8fiypse]::before,
.job-editor__divider[b-p9n8fiypse]::after {
  flex: 1;
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
  content: "";
}

/* The messages, in the test chat's colours: the agent in the soft brand tint
   on the left, beside its face; the owner in solid brand on the right. */
.job-editor__msg[b-p9n8fiypse] { display: flex; gap: var(--spacing-sm); align-items: flex-start; min-width: 0; animation: job-editor-in-b-p9n8fiypse var(--ds-motion-base) var(--ds-motion-enter) both; }
.job-editor__msg > img[b-p9n8fiypse] { flex: none; width: var(--ds-job-editor-face); height: var(--ds-job-editor-face); object-fit: cover; border-radius: var(--radius-radius-full); }
.job-editor__msg.is-owner[b-p9n8fiypse] { justify-content: flex-end; }
.job-editor__reply[b-p9n8fiypse] { display: grid; flex: 1; gap: var(--spacing-sm); justify-items: start; min-width: 0; }

.job-editor__bubble[b-p9n8fiypse] {
  max-width: var(--ds-job-editor-bubble);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-radius-2xl);
}
.job-editor__bubble[b-p9n8fiypse]  p { margin: var(--spacing-none); }
.is-agent .job-editor__bubble[b-p9n8fiypse] {
  color: var(--colors-text-secondary);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-brand-muted);
  border-top-left-radius: var(--radius-radius-sm);
}
.is-owner .job-editor__bubble[b-p9n8fiypse] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-top-right-radius: var(--radius-radius-sm);
}
/* Said aloud now: each word lights as it is said. */
.job-editor__bubble.is-speaking[b-p9n8fiypse]  span { transition: opacity var(--ds-job-editor-word) ease-out; }
.job-editor__bubble.is-speaking[b-p9n8fiypse]  span:not([data-on]) { opacity: var(--ds-job-editor-unsaid); }
/* Their words as they talk: the part still being heard, quieter. */
.is-live .job-editor__bubble[b-p9n8fiypse]  .job-editor__interim { opacity: var(--ds-job-editor-interim); }

/* Thinking: three dots. */
.job-editor__bubble.is-typing[b-p9n8fiypse] { display: flex; gap: var(--spacing-2xs); padding-block: var(--spacing-md); }
.job-editor__bubble.is-typing i[b-p9n8fiypse] {
  width: var(--ds-job-editor-dot);
  height: var(--ds-job-editor-dot);
  background: var(--colors-icon-brand);
  border-radius: var(--radius-radius-full);
  animation: job-editor-typing-b-p9n8fiypse var(--ds-job-editor-pulse) ease-in-out infinite;
}
.job-editor__bubble.is-typing i:nth-child(2)[b-p9n8fiypse] { animation-delay: calc(var(--ds-job-editor-pulse) / 6); }
.job-editor__bubble.is-typing i:nth-child(3)[b-p9n8fiypse] { animation-delay: calc(var(--ds-job-editor-pulse) / 3); }
@keyframes job-editor-typing-b-p9n8fiypse {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}


/* A topic confirmed: what was given, to read. */
.job-editor__checked[b-p9n8fiypse] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.job-editor__checked[b-p9n8fiypse] >  .ds-icon { flex: none; margin-top: var(--spacing-2xs); color: var(--colors-feedback-success-text); }
.job-editor__checked-text[b-p9n8fiypse] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.job-editor__checked-text[b-p9n8fiypse]  p { margin: var(--spacing-none); color: var(--colors-text-muted); }
.job-editor__checked-text[b-p9n8fiypse]  p:first-child { color: var(--colors-text-primary); }
.job-editor__checked-text[b-p9n8fiypse]  .job-editor__checked-answer { color: var(--colors-text-primary); }

/* The foot: the box with the mic, or the bar while a voice turn happens. */
.job-editor__foot[b-p9n8fiypse] {
  flex: none;
  padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
}
/* The box: one floating dock at the foot of the chat (Teach your AI's), holding the box or
   the voice bar. An approval grows out of it in their place: the dock rises, lifted, the chat
   giving it room above; long, it scrolls inside itself. Nothing else until it's approved. */
.job-editor__dock[b-p9n8fiypse] {
  display: grid;
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-job-editor-dock-shadow) var(--colors-surface-shadow);
  transition: border-color var(--ds-motion-base) ease-out, box-shadow var(--ds-motion-base) ease-out;
}
/* Typing: a soft brand edge says where the words go. */
.job-editor__dock:focus-within[b-p9n8fiypse] { border-color: var(--colors-accent-brand-border); }
.job-editor__dock.is-asking[b-p9n8fiypse] {
  max-height: var(--ds-job-editor-asking);
  padding: var(--spacing-none);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: var(--colors-accent-brand-border);
  box-shadow: var(--ds-job-editor-asking-lift) var(--colors-surface-shadow);
  transform-origin: bottom center;
  animation: job-editor-grow-b-p9n8fiypse var(--ds-motion-base) var(--ds-motion-enter);
}
/* The approval is the dock's content: no frame of its own. */
.job-editor__dock.is-asking[b-p9n8fiypse] >  .job-editor__approve {
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
}
@keyframes job-editor-grow-b-p9n8fiypse {
  from { opacity: 0; transform: translateY(var(--spacing-md)) scaleY(0.96); }
}
@keyframes job-editor-rise-b-p9n8fiypse {
  from { opacity: 0; transform: translateY(var(--spacing-lg)); }
}

/* The box, as in Teach your AI: the answer gets the room, the tools sit under it. */
.job-editor__composer[b-p9n8fiypse] { display: grid; gap: var(--spacing-xs); }
.job-editor__composer[b-p9n8fiypse]  .job-editor__answer {
  --ds-text-area-plain-min-height: var(--ds-job-editor-answer);
  --ds-text-area-plain-max-height: var(--ds-job-editor-answer-most);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-primary);
}
.job-editor__composer-foot[b-p9n8fiypse] { display: flex; gap: var(--spacing-sm); align-items: center; }
.job-editor__composer-tools[b-p9n8fiypse] { display: flex; flex: 1; gap: var(--spacing-2xs); align-items: center; }

/* A suggested reply above the box, in line with the agent's words. */
.job-editor__replies[b-p9n8fiypse] {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-none) var(--spacing-xl) var(--spacing-sm) calc(var(--spacing-xl) + var(--ds-job-editor-face) + var(--spacing-sm));
  animation: job-editor-rise-b-p9n8fiypse var(--ds-motion-base) var(--ds-motion-enter);
}

.job-editor__bar[b-p9n8fiypse] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); align-items: center; }
.job-editor__bar[b-p9n8fiypse]  .ds-voice-orb.job-editor__bar-orb { --ds-voice-orb-size: var(--ds-job-editor-bar-orb); flex: none; }
.job-editor__bar-text[b-p9n8fiypse] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.job-editor__bar-text[b-p9n8fiypse]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__bar-text[b-p9n8fiypse]  p.job-editor__muted { color: var(--colors-text-muted); }
.job-editor__bar-actions[b-p9n8fiypse] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; justify-content: flex-end; margin-inline-start: auto; }
.job-editor__voice.is-talking[b-p9n8fiypse] >  .inline-error { flex: none; margin: var(--spacing-none) var(--spacing-md) var(--spacing-md); }

/* The pause running out: a thin bar that fills, then their turn is sent. */
.job-editor__countdown[b-p9n8fiypse] {
  display: block;
  width: var(--ds-job-editor-bar);
  height: var(--spacing-2xs);
  margin-top: var(--spacing-2xs);
  overflow: hidden;
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.job-editor__countdown > span[b-p9n8fiypse] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  border-radius: inherit;
  animation: job-editor-countdown-b-p9n8fiypse var(--ds-job-editor-pause) linear forwards;
}
@keyframes job-editor-countdown-b-p9n8fiypse {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Its job description, with Hear it ──────────────────────────────────── */

.job-editor__brief[b-p9n8fiypse] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  outline: none;
  animation: job-editor-in-b-p9n8fiypse var(--ds-motion-base) var(--ds-motion-enter);
}
@keyframes job-editor-in-b-p9n8fiypse {
  from { opacity: 0; transform: translateY(var(--spacing-sm)); }
}
.job-editor__brief-head[b-p9n8fiypse] { display: flex; gap: var(--spacing-lg); align-items: flex-start; justify-content: space-between; }
.job-editor__brief-title[b-p9n8fiypse] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.job-editor__brief-title[b-p9n8fiypse]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__brief-head[b-p9n8fiypse] >  .ds-button { flex: none; }
.job-editor__brief-actions[b-p9n8fiypse] { display: flex; flex: none; gap: var(--spacing-sm); align-items: center; }

/* Being written: placeholder lines, then the text arriving sentence by sentence. */
.job-editor__writing[b-p9n8fiypse],
.job-editor__streaming[b-p9n8fiypse] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: var(--ds-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-xl);
}
.job-editor__streaming[b-p9n8fiypse]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__streaming[b-p9n8fiypse]  span { animation: job-editor-in-b-p9n8fiypse var(--ds-motion-base) var(--ds-motion-enter); }

/* Just written: the box is marked for a moment. */
.job-editor__brief[b-p9n8fiypse]  .ds-text-area.is-new { animation: job-editor-new-b-p9n8fiypse var(--ds-job-editor-new) ease-out; }
@keyframes job-editor-new-b-p9n8fiypse {
  from { background: var(--colors-accent-brand-subtle); border-color: var(--colors-accent-brand-border); }
}

/* Just updated: one quiet line, with Undo. */
.job-editor__added[b-p9n8fiypse] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
  border-radius: var(--radius-radius-xl);
}
.job-editor__added[b-p9n8fiypse]  p { flex: 1; margin: var(--spacing-none); color: var(--colors-text-primary); }

/* What an addition changes, before it goes in: each sentence going in, and
   any it takes the place of, struck through. */
.job-editor__change[b-p9n8fiypse] {
  display: grid;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  padding: var(--spacing-md);
  list-style: none;
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}
.job-editor__change li[b-p9n8fiypse] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-sm); align-items: start; }
.job-editor__change li[b-p9n8fiypse] >  .ds-icon { margin-top: var(--spacing-2xs); }
.job-editor__change[b-p9n8fiypse]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.job-editor__change li.is-in[b-p9n8fiypse] >  .ds-icon { color: var(--colors-feedback-success-text); }
.job-editor__change li.is-out[b-p9n8fiypse] >  .ds-icon,
.job-editor__change li.is-out[b-p9n8fiypse]  p { color: var(--colors-text-muted); }

/* What else was noted, in plain words. */
.job-editor__noted[b-p9n8fiypse] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--colors-accent-blue-text);
  background: var(--colors-accent-blue-subtle);
  border-radius: var(--radius-radius-xl);
}
.job-editor__noted[b-p9n8fiypse],
.job-editor__added[b-p9n8fiypse] { transition: opacity var(--ds-motion-base) ease-out; }
.job-editor__noted.is-leaving[b-p9n8fiypse],
.job-editor__added.is-leaving[b-p9n8fiypse] { opacity: 0; }
.job-editor__noted[b-p9n8fiypse]  p { flex: 1; margin: var(--spacing-none); color: var(--colors-text-primary); }

/* A ready-made one's check: part of the job description's card, under a line. */
.job-editor__brief[b-p9n8fiypse]  .job-editor__ready {
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-none);
  background: transparent;
  border: 0;
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: 0;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .job-editor__brief[b-p9n8fiypse],
  .job-editor__msg[b-p9n8fiypse],
  .job-editor__streaming[b-p9n8fiypse]  span,
  .job-editor__brief[b-p9n8fiypse]  .ds-text-area.is-new { animation: none; }
  .job-editor__bubble.is-speaking[b-p9n8fiypse]  span:not([data-on]) { opacity: 1; }
  .job-editor__bubble.is-typing i[b-p9n8fiypse] { animation: none; opacity: 1; }
  .job-editor__countdown > span[b-p9n8fiypse] { animation: none; width: 100%; }
  .job-editor__noted[b-p9n8fiypse],
  .job-editor__added[b-p9n8fiypse] { transition: none; }
  .job-editor__dock.is-asking[b-p9n8fiypse],
  .job-editor__replies[b-p9n8fiypse] { animation: none; }
}
/* /Components/Pages/Dashboard/AiAgents/PlaybookBuilder.razor.rz.scp.css */
/* Playbook builder — a page header in Aurora's list-page idiom over a
   workspace that fills the rest of the shell: the canvas on the left, a
   configuration panel and the test panel docked to the right. */

.playbook[b-l26aw3d05e] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--spacing-lg);
  min-width: 0;
  height: 100%;
  padding: var(--spacing-2xl) var(--ds-pb-gutter) var(--spacing-2xl);
}

.playbook[b-l26aw3d05e] {
  /* Gaps in the token set: no page-gutter, control-height, field-width or
     border-width scale. */
  --ds-pb-gutter: clamp(28px, 4vw, 66px);
  --ds-pb-hairline: 1px;
  --ds-pb-back-height: 34px;
  --ds-pb-name-width: 360px;
}

.playbook__header[b-l26aw3d05e] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}

.playbook__heading[b-l26aw3d05e] { display: grid; gap: var(--spacing-md); min-width: 0; }

.playbook__back[b-l26aw3d05e] {
  display: inline-flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-self: start;
  height: var(--ds-pb-back-height);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.playbook__back:hover[b-l26aw3d05e] { color: var(--colors-text-primary); background: var(--colors-interaction-hover); }

.playbook__title-row[b-l26aw3d05e] { display: flex; gap: var(--spacing-md); align-items: center; }
.playbook__title-row[b-l26aw3d05e]  .field { width: var(--ds-pb-name-width); }

.playbook__actions[b-l26aw3d05e] { display: flex; flex: 0 0 auto; gap: var(--spacing-sm); align-items: center; }

.playbook__workspace[b-l26aw3d05e] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: stretch;
  min-height: 0;
}

.playbook__workspace[b-l26aw3d05e]  .playbook-canvas { flex: 1; min-width: 0; }
/* /Components/Pages/Dashboard/AiAgents/PlaybookCanvas.razor.rz.scp.css */
/* The flow canvas: a dotted field, nodes stacked down its centre, hairline
   connectors between them. Node accents use the accent scale so each step
   kind keeps a colour that also works in the dark theme. */

.playbook-canvas[b-hezvismndj] {
  position: relative;
  min-height: 0;
  padding: var(--spacing-3xl) var(--spacing-xl);
  overflow: auto;
  background:
    linear-gradient(color-mix(in srgb, var(--colors-surface-background) 94%, transparent), color-mix(in srgb, var(--colors-surface-background) 98%, transparent)),
    radial-gradient(circle at 20% 20%, var(--colors-accent-neutral-border) 1px, transparent 1px);
  background-size: auto, var(--ds-canvas-dots) var(--ds-canvas-dots);
  border: var(--ds-canvas-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.playbook-canvas[b-hezvismndj] {
  /* Gaps in the token set: no node-width, connector, border-width, menu-width
     or motion scale. */
  --ds-canvas-dots: 18px;
  --ds-canvas-hairline: 1px;
  --ds-canvas-node: 360px;
  --ds-canvas-connector: 28px;
  --ds-canvas-connector-width: 2px;
  --ds-canvas-glyph: 28px;
  --ds-canvas-picker: 300px;
  --ds-canvas-picker-layer: 20;
  --ds-canvas-motion: 140ms;
}

.playbook-canvas__flow[b-hezvismndj] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.playbook-node[b-hezvismndj] {
  display: grid;
  gap: var(--spacing-xs);
  width: min(var(--ds-canvas-node), 100%);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--colors-text-primary);
  text-align: left;
  background: var(--colors-surface-card);
  border: var(--ds-canvas-hairline) solid var(--colors-surface-border);
  border-left: var(--spacing-xs) solid var(--ds-node-accent, var(--colors-brand-primary));
  border-radius: var(--radius-radius-lg);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow-diffuse);
  cursor: pointer;
  transition: border-color var(--ds-canvas-motion) ease, box-shadow var(--ds-canvas-motion) ease;
}

.playbook-node:hover[b-hezvismndj] { box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow); }

.playbook-node.is-selected[b-hezvismndj] {
  border-color: var(--colors-brand-primary);
  box-shadow: 0 0 0 var(--spacing-2xs) color-mix(in srgb, var(--colors-brand-primary) 12%, transparent);
}

.playbook-node:focus-visible[b-hezvismndj] { outline: var(--spacing-2xs) solid var(--colors-interaction-focus); outline-offset: var(--spacing-2xs); }

.playbook-node--trigger[b-hezvismndj] { --ds-node-accent: var(--colors-brand-primary); }
.playbook-node--question[b-hezvismndj] { --ds-node-accent: var(--colors-accent-indigo-solid); }
.playbook-node--catalog[b-hezvismndj] { --ds-node-accent: var(--colors-accent-green-solid); }
.playbook-node--notification[b-hezvismndj] { --ds-node-accent: var(--colors-accent-orange-solid); }
.playbook-node--payment[b-hezvismndj] { --ds-node-accent: var(--colors-accent-red-solid); }
.playbook-node--contact[b-hezvismndj] { --ds-node-accent: var(--colors-accent-yellow-solid); }
.playbook-node--wait[b-hezvismndj] { --ds-node-accent: var(--colors-accent-amber-solid); }
.playbook-node--condition[b-hezvismndj] { --ds-node-accent: var(--colors-accent-blue-solid); }
.playbook-node--end[b-hezvismndj] { --ds-node-accent: var(--colors-accent-neutral-solid); }

.playbook-node__row[b-hezvismndj] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
}

.playbook-node__label[b-hezvismndj] { display: inline-flex; gap: var(--spacing-sm); align-items: center; min-width: 0; color: var(--colors-text-primary); }
[b-hezvismndj] .playbook-node__hint { color: var(--colors-text-subtle); }

.playbook-node__glyph[b-hezvismndj] {
  display: grid;
  place-items: center;
  width: var(--ds-canvas-glyph);
  height: var(--ds-canvas-glyph);
  color: var(--ds-node-accent);
  background: color-mix(in srgb, var(--ds-node-accent) 12%, transparent);
  border-radius: var(--radius-radius-md);
}

[b-hezvismndj] .playbook-node__type { color: var(--colors-text-muted); }
[b-hezvismndj] .playbook-node__remove { color: var(--colors-feedback-destructive-text); }

.playbook-canvas__connector[b-hezvismndj] {
  width: var(--ds-canvas-connector-width);
  height: var(--ds-canvas-connector);
  background: var(--colors-surface-border);
}

.playbook-canvas__add[b-hezvismndj] { position: relative; display: grid; justify-items: center; }

.playbook-canvas__picker[b-hezvismndj] {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--ds-canvas-picker-layer);
  display: grid;
  gap: var(--spacing-2xs);
  width: var(--ds-canvas-picker);
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--colors-surface-popover);
  border: var(--ds-canvas-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
  box-shadow: 0 var(--spacing-md) var(--spacing-3xl) var(--colors-surface-shadow);
  transform: translateX(-50%);
}

.playbook-canvas__picker-glyph[b-hezvismndj] {
  display: grid;
  place-items: center;
  width: var(--ds-canvas-glyph);
  height: var(--ds-canvas-glyph);
  color: var(--ds-node-accent);
  background: color-mix(in srgb, var(--ds-node-accent) 12%, transparent);
  border-radius: var(--radius-radius-md);
}

.playbook-canvas__picker-glyph--question[b-hezvismndj] { --ds-node-accent: var(--colors-accent-indigo-solid); }
.playbook-canvas__picker-glyph--catalog[b-hezvismndj] { --ds-node-accent: var(--colors-accent-green-solid); }
.playbook-canvas__picker-glyph--notification[b-hezvismndj] { --ds-node-accent: var(--colors-accent-orange-solid); }
.playbook-canvas__picker-glyph--payment[b-hezvismndj] { --ds-node-accent: var(--colors-accent-red-solid); }
.playbook-canvas__picker-glyph--contact[b-hezvismndj] { --ds-node-accent: var(--colors-accent-yellow-solid); }
.playbook-canvas__picker-glyph--wait[b-hezvismndj] { --ds-node-accent: var(--colors-accent-amber-solid); }
.playbook-canvas__picker-glyph--condition[b-hezvismndj] { --ds-node-accent: var(--colors-accent-blue-solid); }
.playbook-canvas__picker-glyph--end[b-hezvismndj] { --ds-node-accent: var(--colors-accent-neutral-solid); }
/* /Components/Pages/Dashboard/AiAgents/PlaybookStepPanel.razor.rz.scp.css */
/* The step panel: a card docked beside the canvas, header and scrolling body.
   The kind panels inside it share one vocabulary — .step-field, .step-two-col,
   .step-row, .step-hint, .step-note, .step-chips — declared here with ::deep
   so eight small components do not each carry a copy. */

.step-panel[b-zsuj1djabi] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 0 0 var(--ds-step-panel-width);
  min-height: 0;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.step-panel[b-zsuj1djabi] {
  /* Gaps in the token set: no panel-width or border-width scale. */
  --ds-step-panel-width: 400px;
  --ds-step-panel-hairline: 1px;
  --ds-step-panel-toolbar-btn: 28px;
}

.step-panel__head[b-zsuj1djabi] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
}

.step-panel__title[b-zsuj1djabi] { display: flex; gap: var(--spacing-sm); align-items: center; min-width: 0; }
.step-panel__title[b-zsuj1djabi]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }

.step-panel__body[b-zsuj1djabi] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  min-height: 0;
  padding: var(--spacing-xl);
  overflow-y: auto;
}

/* ── Shared field vocabulary ─────────────────────────────────────────────── */

.step-panel__body[b-zsuj1djabi]  .step-field { display: grid; gap: var(--spacing-sm); min-width: 0; }
.step-panel__body[b-zsuj1djabi]  .step-field > .step-label { color: var(--colors-text-secondary); }
.step-panel__body[b-zsuj1djabi]  .step-field > .step-label em { color: var(--colors-text-subtle); font-style: normal; }
.step-panel__body[b-zsuj1djabi]  .step-hint { margin: var(--spacing-none); color: var(--colors-text-muted); }
.step-panel__body[b-zsuj1djabi]  .step-hint--warn { color: var(--colors-feedback-warning-text); }

.step-panel__body[b-zsuj1djabi]  .step-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.step-panel__body[b-zsuj1djabi]  .step-divider { height: var(--ds-step-panel-hairline); background: var(--colors-surface-border); }

.step-panel__body[b-zsuj1djabi]  .step-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
}

.step-panel__body[b-zsuj1djabi]  .step-row-text { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.step-panel__body[b-zsuj1djabi]  .step-row-text strong { color: var(--colors-text-primary); }
.step-panel__body[b-zsuj1djabi]  .step-row-text small { color: var(--colors-text-muted); }

.step-panel__body[b-zsuj1djabi]  .step-field textarea {
  width: 100%;
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-md);
  resize: vertical;
}

.step-panel__body[b-zsuj1djabi]  .step-field textarea:focus { border-color: var(--colors-brand-primary); outline: 0; }

.step-panel__body[b-zsuj1djabi]  .step-note {
  display: grid;
  grid-template-columns: var(--spacing-xl) minmax(0, 1fr);
  gap: var(--spacing-sm);
  align-items: start;
  padding: var(--spacing-md);
  color: var(--colors-feedback-warning-text);
  background: var(--colors-feedback-warning-subtle);
  border-radius: var(--radius-radius-lg);
}

.step-panel__body[b-zsuj1djabi]  .step-note p { margin: var(--spacing-none); color: var(--colors-text-secondary); }

/* Removable tags (catalog picks, trigger phrases). */
.step-panel__body[b-zsuj1djabi]  .step-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }

.step-panel__body[b-zsuj1djabi]  .step-chip {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-brand-primary);
  background: var(--colors-interaction-selected);
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.step-panel__body[b-zsuj1djabi]  .step-chip:hover { background: var(--colors-accent-brand-muted); }

/* A grouped option block (choice options in Ask question). */
.step-panel__body[b-zsuj1djabi]  .step-block {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.step-panel__body[b-zsuj1djabi]  .step-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.step-panel__body[b-zsuj1djabi]  .step-block-head .ds-overline { color: var(--colors-text-muted); }
.step-panel__body[b-zsuj1djabi]  .step-block-remove { color: var(--colors-feedback-destructive-text); }

/* A segmented pair (amount source). */
.step-panel__body[b-zsuj1djabi]  .step-segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs);
  background: var(--colors-accent-neutral-border);
  border-radius: var(--radius-radius-full);
}

.step-panel__body[b-zsuj1djabi]  .step-segment {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.step-panel__body[b-zsuj1djabi]  .step-segment.is-active {
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow);
}

/* The notification editor: a toolbar over a textarea, and dynamic-data chips. */
.step-panel__body[b-zsuj1djabi]  .step-editor {
  overflow: hidden;
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-md);
}

.step-panel__body[b-zsuj1djabi]  .step-editor:focus-within { border-color: var(--colors-brand-primary); }

.step-panel__body[b-zsuj1djabi]  .step-toolbar {
  display: flex;
  gap: var(--spacing-2xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--colors-surface-muted);
  border-bottom: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
}

.step-panel__body[b-zsuj1djabi]  .step-tool {
  display: grid;
  place-items: center;
  width: var(--ds-step-panel-toolbar-btn);
  height: var(--ds-step-panel-toolbar-btn);
  color: var(--colors-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-sm);
  cursor: pointer;
}

.step-panel__body[b-zsuj1djabi]  .step-tool:hover { background: var(--colors-interaction-hover); }
.step-panel__body[b-zsuj1djabi]  .step-tool--italic { font-style: italic; }
.step-panel__body[b-zsuj1djabi]  .step-tool--underline { text-decoration: underline; }
.step-panel__body[b-zsuj1djabi]  .step-tool--strike { text-decoration: line-through; }
.step-panel__body[b-zsuj1djabi]  .step-tool-sep { width: var(--ds-step-panel-hairline); height: var(--spacing-lg); margin: var(--spacing-none) var(--spacing-xs); background: var(--colors-surface-border); }

.step-panel__body[b-zsuj1djabi]  .step-editor textarea {
  width: 100%;
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: 0;
  outline: 0;
  resize: vertical;
}

.step-panel__body[b-zsuj1djabi]  .step-data { display: grid; gap: var(--spacing-md); }
.step-panel__body[b-zsuj1djabi]  .step-data-group { display: grid; gap: var(--spacing-sm); }
.step-panel__body[b-zsuj1djabi]  .step-data-group .ds-overline { color: var(--colors-text-subtle); }

.step-panel__body[b-zsuj1djabi]  .step-data-chip {
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.step-panel__body[b-zsuj1djabi]  .step-data-chip:hover { border-color: var(--colors-brand-primary); color: var(--colors-brand-primary); }

.step-panel__body[b-zsuj1djabi]  .step-preview {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.step-panel__body[b-zsuj1djabi]  .step-preview-bubble {
  justify-self: start;
  max-width: 88%;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-text-secondary);
  white-space: pre-wrap;
  background: var(--colors-surface-card);
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xs) var(--radius-radius-xl) var(--radius-radius-xl) var(--radius-radius-xl);
}

/* Condition paths. */
.step-panel__body[b-zsuj1djabi]  .step-path {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
  border-left: var(--spacing-xs) solid var(--ds-path-accent);
  border-radius: var(--radius-radius-lg);
}

.step-panel__body[b-zsuj1djabi]  .step-path--yes { --ds-path-accent: var(--colors-feedback-success); }
.step-panel__body[b-zsuj1djabi]  .step-path--no { --ds-path-accent: var(--colors-feedback-destructive); }
.step-panel__body[b-zsuj1djabi]  .step-path-head { display: flex; gap: var(--spacing-sm); align-items: center; color: var(--ds-path-accent); }

/* The catalog list. */
.step-panel__body[b-zsuj1djabi]  .step-catalog-list {
  display: grid;
  gap: var(--spacing-2xs);
  max-height: var(--ds-step-catalog-max);
  padding: var(--spacing-xs);
  overflow-y: auto;
  border: var(--ds-step-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

.step-panel[b-zsuj1djabi] { --ds-step-catalog-max: 220px; }
/* /Components/Pages/Dashboard/AiAgents/SavePlaybookModal.razor.rz.scp.css */
/* The two fields inside the save dialog. The dialog itself is Aurora's. */

.save-playbook__fields[b-evdysikjmf] {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.save-playbook__description[b-evdysikjmf] { display: grid; gap: var(--spacing-sm); }
.save-playbook__description[b-evdysikjmf]  span { color: var(--colors-text-secondary); }
.save-playbook__description[b-evdysikjmf]  em { color: var(--colors-text-subtle); font-style: normal; }

.save-playbook__description textarea[b-evdysikjmf] {
  width: 100%;
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-save-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-md);
  resize: vertical;
}

.save-playbook__description textarea:focus[b-evdysikjmf] { border-color: var(--colors-brand-primary); outline: 0; }

.save-playbook__fields[b-evdysikjmf] {
  /* Gap in the token set: no border-width scale. */
  --ds-save-hairline: 1px;
}
/* /Components/Pages/Dashboard/AiAgents/TestPanel.razor.rz.scp.css */
/* The test panel: the step panel's shell around a conversation thread and a
   composer, in the builder sandbox's dress. */

.test-panel[b-tvfrtg3saw] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 0 0 var(--ds-test-panel-width);
  min-height: 0;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-test-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.test-panel[b-tvfrtg3saw] {
  /* Gaps in the token set: no panel-width, avatar or border-width scale. */
  --ds-test-panel-width: 360px;
  --ds-test-panel-hairline: 1px;
  --ds-test-panel-avatar: 28px;
  --ds-test-panel-dots: 18px;
  --ds-test-panel-composer-pad: 5px 5px 5px 12px;
}

.test-panel__head[b-tvfrtg3saw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: var(--ds-test-panel-hairline) solid var(--colors-surface-border);
}

.test-panel__title[b-tvfrtg3saw] { display: grid; gap: var(--spacing-2xs); }
.test-panel__title[b-tvfrtg3saw]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.test-panel__title[b-tvfrtg3saw]  span { color: var(--colors-text-subtle); }

.test-panel__messages[b-tvfrtg3saw] {
  display: grid;
  align-content: start;
  gap: var(--spacing-md);
  min-height: 0;
  padding: var(--spacing-lg);
  overflow-y: auto;
  background:
    linear-gradient(color-mix(in srgb, var(--colors-surface-background) 94%, transparent), color-mix(in srgb, var(--colors-surface-background) 98%, transparent)),
    radial-gradient(circle at 20% 20%, var(--colors-accent-neutral-border) 1px, transparent 1px);
  background-size: auto, var(--ds-test-panel-dots) var(--ds-test-panel-dots);
}

.test-panel__row[b-tvfrtg3saw] { display: grid; gap: var(--spacing-sm); }
.test-panel__row--user[b-tvfrtg3saw] { justify-items: end; }
.test-panel__row--bot[b-tvfrtg3saw] { grid-template-columns: var(--ds-test-panel-avatar) minmax(0, 1fr); align-items: start; max-width: 88%; }

.test-panel__avatar[b-tvfrtg3saw] {
  display: grid;
  place-items: center;
  width: var(--ds-test-panel-avatar);
  height: var(--ds-test-panel-avatar);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-md);
}

.test-panel__bubble[b-tvfrtg3saw] { padding: var(--spacing-sm) var(--spacing-md); }
.test-panel__bubble[b-tvfrtg3saw]  p { margin: var(--spacing-none); white-space: pre-line; }

.test-panel__bubble--user[b-tvfrtg3saw] {
  max-width: 80%;
  color: var(--colors-text-on-primary);
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-xl) var(--radius-radius-xl) var(--radius-radius-xs) var(--radius-radius-xl);
}

.test-panel__bubble--bot[b-tvfrtg3saw] {
  color: var(--colors-text-secondary);
  background: var(--colors-surface-card);
  border: var(--ds-test-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xs) var(--radius-radius-xl) var(--radius-radius-xl) var(--radius-radius-xl);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow-diffuse);
}

.test-panel__composer[b-tvfrtg3saw] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: center;
  margin: var(--spacing-md);
  padding: var(--ds-test-panel-composer-pad);
  background: var(--colors-surface-background);
  border: var(--ds-test-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.test-panel__composer:focus-within[b-tvfrtg3saw] { border-color: var(--colors-brand-primary); }

.test-panel__composer input[b-tvfrtg3saw] {
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-none);
  color: var(--colors-text-primary);
  background: transparent;
  border: 0;
  outline: 0;
}

.test-panel__composer input[b-tvfrtg3saw]::placeholder { color: var(--colors-text-subtle); }
/* /Components/Pages/Dashboard/AiAgents/TriggerPanel.razor.rz.scp.css */
/* The trigger panel wears the step panel's shell. */

.trigger-panel[b-gf9gaveshq] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 0 0 var(--ds-trigger-panel-width);
  min-height: 0;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-trigger-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.trigger-panel[b-gf9gaveshq] {
  /* Gaps in the token set: no panel-width or border-width scale. */
  --ds-trigger-panel-width: 400px;
  --ds-trigger-panel-hairline: 1px;
}

.trigger-panel__head[b-gf9gaveshq] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: var(--ds-trigger-panel-hairline) solid var(--colors-surface-border);
}

.trigger-panel__title[b-gf9gaveshq] { display: flex; gap: var(--spacing-sm); align-items: center; }
.trigger-panel__title[b-gf9gaveshq]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }

.trigger-panel__body[b-gf9gaveshq] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  overflow-y: auto;
}

.trigger-panel__field[b-gf9gaveshq] { display: grid; gap: var(--spacing-sm); }
[b-gf9gaveshq] .trigger-panel__label { color: var(--colors-text-secondary); }
[b-gf9gaveshq] .trigger-panel__hint { margin: var(--spacing-none); color: var(--colors-text-muted); }
[b-gf9gaveshq] .trigger-panel__hint--warn { color: var(--colors-feedback-warning-text); }

.trigger-panel__input-row[b-gf9gaveshq] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: center;
}

.trigger-panel__chips[b-gf9gaveshq] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }

.trigger-panel__chip[b-gf9gaveshq] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-brand-primary);
  background: var(--colors-interaction-selected);
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.trigger-panel__chip:hover[b-gf9gaveshq] { background: var(--colors-accent-brand-muted); }
/* /Components/Pages/Dashboard/BusinessSetup/BusinessSetup.razor.rz.scp.css */
/* Business setup. The card is Aurora's guided setup shell (GuidedSetup.razor.css)
   at the shared setup-card width; the form inside it is Aurora's editor grid. */

.setup[b-600myvy08d] {
  padding: var(--spacing-5xl) var(--ds-setup-gutter) var(--spacing-4xl);
}

.setup[b-600myvy08d] {
  /* Gaps in the token set: no page-gutter, progress-height, control-size,
     motion or measure scale. */
  --ds-setup-gutter: clamp(28px, 4vw, 66px);
  --ds-setup-progress: 4px;
  --ds-setup-measure: 590px;
  --ds-setup-motion: 240ms;
  --ds-setup-icon: 32px;
  --ds-setup-success-icon: 64px;
  --ds-setup-agent-min: 220px;
}

.guided[b-600myvy08d] {
  display: grid;
  width: min(var(--ds-setup-card-width), 100%);
  margin-inline: auto;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-setup-card-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-setup-card-shadow) var(--colors-surface-shadow);
}

.guided__header[b-600myvy08d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.guided__counter[b-600myvy08d] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: baseline;
  color: var(--colors-text-muted);
}

.guided__counter[b-600myvy08d]  strong { color: var(--colors-text-primary); }

.guided__progress[b-600myvy08d] {
  height: var(--ds-setup-progress);
  background: var(--colors-surface-muted);
}

.guided__progress i[b-600myvy08d] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  transition: width var(--ds-setup-motion) ease;
}

.guided__body[b-600myvy08d] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  padding: var(--ds-setup-card-pad);
}

.guided__body--centred[b-600myvy08d] {
  justify-items: center;
  text-align: center;
}

[b-600myvy08d] .guided__eyebrow { color: var(--colors-text-subtle); }

[b-600myvy08d] .guided__lede {
  max-width: var(--ds-setup-measure);
  color: var(--colors-text-muted);
}

.guided__aside[b-600myvy08d] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border: var(--ds-setup-card-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

.guided__aside[b-600myvy08d] >  svg { flex: 0 0 auto; margin-top: var(--spacing-2xs); color: var(--colors-brand-primary); }
.guided__aside[b-600myvy08d]  strong { color: var(--colors-text-primary); }

.guided__footer[b-600myvy08d] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-muted);
  border-top: var(--ds-setup-card-hairline) solid var(--colors-surface-border);
}

.guided__footer-actions[b-600myvy08d] { display: flex; gap: var(--spacing-sm); align-items: center; }

/* What a wait is doing, said beside the button that started it. */
[b-600myvy08d] .guided__footer-note { color: var(--colors-text-muted); }

.guided__success-icon[b-600myvy08d] {
  display: grid;
  place-items: center;
  width: var(--ds-setup-success-icon);
  height: var(--ds-setup-success-icon);
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
  border-radius: var(--radius-radius-full);
}

.guided__success-actions[b-600myvy08d] { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); }

/* ── Fields ──────────────────────────────────────────────────────────────── */

.setup__grid[b-600myvy08d] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
}

.setup__full[b-600myvy08d] { grid-column: 1 / -1; display: grid; gap: var(--spacing-sm); }
.setup__field[b-600myvy08d] { display: grid; gap: var(--spacing-sm); justify-items: start; }
[b-600myvy08d] .setup__optional { color: var(--colors-text-subtle); }

.setup__full textarea[b-600myvy08d] {
  width: 100%;
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-setup-card-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-md);
  resize: vertical;
}

.setup__full textarea:focus[b-600myvy08d] {
  border-color: var(--colors-brand-primary);
  outline: 0;
}

[b-600myvy08d] .setup__sources { color: var(--colors-text-muted); }
[b-600myvy08d] .setup__sources strong { color: var(--colors-text-primary); }

/* ── Social ──────────────────────────────────────────────────────────────── */

.setup__social[b-600myvy08d] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  border: var(--ds-setup-card-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.setup__social-toggle[b-600myvy08d] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
  padding: var(--spacing-xs);
  color: var(--colors-text-primary);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-md);
  cursor: pointer;
}

.setup__social-toggle:hover[b-600myvy08d] { background: var(--colors-interaction-hover); }
.setup__social-toggle[b-600myvy08d] >  svg:last-child { color: var(--colors-text-subtle); }

.setup__social-icon[b-600myvy08d] {
  display: grid;
  place-items: center;
  width: var(--ds-setup-icon);
  height: var(--ds-setup-icon);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-md);
}

.setup__social-text[b-600myvy08d] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.setup__social-text[b-600myvy08d]  small { color: var(--colors-text-muted); }

/* Brand marks, not ours — recorded in brand-literals.json, as on Aurora's
   ChannelCard and GuidedSetup. */
[b-600myvy08d] .setup__brand-facebook { color: #1877f2; }
[b-600myvy08d] .setup__brand-instagram { color: #c63886; }
[b-600myvy08d] .setup__brand-whatsapp { color: #22a968; }

/* ── Key facts ───────────────────────────────────────────────────────────── */

.setup__facts-wrap[b-600myvy08d] { gap: var(--spacing-sm); }

.setup__facts[b-600myvy08d] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.setup__fact[b-600myvy08d] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

.setup__fact-remove[b-600myvy08d] {
  display: grid;
  place-items: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  padding: var(--spacing-none);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.setup__fact-remove:hover[b-600myvy08d] { color: var(--colors-text-primary); background: var(--colors-interaction-hover); }

/* ── Agents ──────────────────────────────────────────────────────────────── */
/* Selectable cards, as Aurora's editor kind cards: a hairline at rest, the
   brand edge and tint when chosen. */

.setup__agents[b-600myvy08d] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-setup-agent-min), 1fr));
  gap: var(--spacing-md);
}

.setup__agent[b-600myvy08d] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  text-align: left;
  background: var(--colors-surface-card);
  border: var(--ds-setup-card-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
  cursor: pointer;
}

.setup__agent:hover[b-600myvy08d] { background: var(--colors-interaction-hover); }

.setup__agent.is-selected[b-600myvy08d] {
  border-color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
}

.setup__agent.is-selected[b-600myvy08d] >  svg:last-child { color: var(--colors-brand-primary); }

.setup__agent-text[b-600myvy08d] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.setup__agent-text[b-600myvy08d]  strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.setup__agent-text[b-600myvy08d]  small { color: var(--colors-text-muted); }

.setup__agent--new[b-600myvy08d] {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--colors-brand-primary);
  border-style: dashed;
}

.setup__agent-new-icon[b-600myvy08d] {
  display: grid;
  place-items: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}

/* ── Roles ───────────────────────────────────────────────────────────────── */

.setup__roles[b-600myvy08d] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}

.setup__roles-titles[b-600myvy08d] { display: grid; gap: var(--spacing-2xs); }
.setup__roles-titles[b-600myvy08d]  h3 { color: var(--colors-text-primary); }
.setup__roles-titles[b-600myvy08d]  p { color: var(--colors-text-muted); }

.setup__role-list[b-600myvy08d] { display: grid; gap: var(--spacing-md); }

.setup__role[b-600myvy08d] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--spacing-lg);
  align-items: center;
}

.setup__role[b-600myvy08d]  strong { color: var(--colors-text-primary); }
/* /Components/Pages/Dashboard/Catalog/ChannelCatalogue.razor.rz.scp.css */
/* A connected-but-not-catalogued channel: the "Import from Channel's Catalogue"
   picker, reached from the channel card and from the catalogue page's back route.

   The page sits in the main area, so it fills the column rather than the window. */
.chan-cat[b-g1r2nfchit] {
  /* Gaps in the token set: no page-gutter, page-width or readable-measure scale. */
  --ds-chan-cat-gutter: clamp(28px, 4vw, 66px);
  --ds-chan-cat-max: 1280px;
  --ds-chan-cat-measure: 480px;
  /* Card dimensions taken from ChannelCard (designer, channel page): 104px min-height,
     48px mark on a 15px gutter. */
  --ds-chan-cat-min: 104px;
  --ds-chan-cat-gutter-inner: 15px;
  --ds-chan-cat-mark: 48px;
  /* The card's edge. */
  --ds-chan-cat-hairline: 1px;
  /* No motion token: matches --ds-channel-motion on ChannelCard. */
  --ds-chan-cat-motion: 140ms;

  padding: var(--spacing-4xl) var(--ds-chan-cat-gutter) var(--spacing-5xl);
}

.chan-cat > *[b-g1r2nfchit] {
  width: min(var(--ds-chan-cat-max), 100%);
  margin-inline: auto;
}

.chan-cat__header[b-g1r2nfchit] {
  display: grid;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
}

.chan-cat__heading[b-g1r2nfchit] {
  display: grid;
  gap: var(--spacing-sm);
}

.chan-cat__lede[b-g1r2nfchit] {
  color: var(--colors-text-secondary);
  max-width: var(--ds-chan-cat-measure);
}

.chan-cat__channels[b-g1r2nfchit] {
  display: grid;
  gap: var(--spacing-md);
}

/* Matches ChannelCard exactly: same height, gap, padding and corners so the two
   pages read as one system. */
.chan-cat__card[b-g1r2nfchit] {
  display: flex;
  gap: var(--ds-chan-cat-gutter-inner);
  align-items: center;
  min-height: var(--ds-chan-cat-min);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-chan-cat-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  transition: box-shadow var(--ds-chan-cat-motion) ease;
}

.chan-cat__card:hover[b-g1r2nfchit] {
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

/* The brand disc: same size and corners as ChannelCard's mark (48px, radius-xl).
   Each channel variant sets its own background; the icon is painted inverse (white)
   so it reads on the coloured disc — the same one-place-in-the-product rule as the
   Channels page. */
.chan-cat__mark[b-g1r2nfchit] {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ds-chan-cat-mark);
  height: var(--ds-chan-cat-mark);
  color: var(--colors-text-inverse);
  border-radius: var(--radius-radius-xl);
}

.chan-cat__card.is-whatsapp .chan-cat__mark[b-g1r2nfchit] { background: #22a968; }

.chan-cat__copy[b-g1r2nfchit] {
  flex: 1;
  display: grid;
  gap: var(--spacing-2xs);
  min-width: 0;
}

.chan-cat__account[b-g1r2nfchit] {
  color: var(--colors-text-muted);
}

.chan-cat__action[b-g1r2nfchit] {
  flex: none;
}
/* /Components/Pages/Dashboard/Catalog/ConceptC/AvailabilityCell.razor.rz.scp.css */
/* A's availability pill: green in stock, red sold out, with a dot. The
   chevron shows on hover or focus, to say it opens. */
.availability-cell-wrap[b-g7bdqzc5hv] {
  /* Gaps in the token set: no pill-size or dot-size scale (A's measures). */
  --ds-availability-cell-pill: 33px;
  --ds-availability-cell-pill-min: 128px;
  --ds-availability-cell-dot: 6px;

  min-width: 0;
}

.availability-cell-wrap:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger {
  width: fit-content;
  min-width: var(--ds-availability-cell-pill-min);
  height: var(--ds-availability-cell-pill);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--colors-accent-emerald-text);
  background: var(--colors-accent-emerald-subtle);
  border-color: transparent;
}
.availability-cell-wrap.is-out:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger {
  color: var(--colors-accent-red-text);
  background: var(--colors-accent-red-subtle);
}
/* Hidden: not offered, kept for later. Quiet, not alarming. */
.availability-cell-wrap.is-hidden:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger {
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
}
.availability-cell-wrap:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger > .ds-icon { opacity: 0; transition: opacity var(--ds-motion-fast) ease; }
.availability-cell-wrap:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger:hover > .ds-icon,
.availability-cell-wrap:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger:focus-visible > .ds-icon,
.availability-cell-wrap:not(.is-quiet)[b-g7bdqzc5hv]  .filter-popover__trigger[aria-expanded="true"] > .ds-icon { opacity: 1; }

/* Concept E uses the shared quiet trigger, matching Task Requests: neutral words and an 8px status dot. */
.availability-cell-wrap.is-quiet[b-g7bdqzc5hv] { --ds-availability-cell-dot: 8px; display: flex; }
.availability-cell-wrap.is-quiet .availability-cell__dot[b-g7bdqzc5hv] { background: var(--colors-feedback-success-text); }
.availability-cell-wrap.is-quiet.is-out .availability-cell__dot[b-g7bdqzc5hv] { background: var(--colors-feedback-destructive-text); }
.availability-cell-wrap.is-quiet.is-hidden .availability-cell__dot[b-g7bdqzc5hv] { background: var(--colors-text-muted); }
.availability-cell-wrap.is-quiet[b-g7bdqzc5hv]  .availability-cell__option-dot.is-available { background: var(--colors-feedback-success-text); }
.availability-cell-wrap.is-quiet[b-g7bdqzc5hv]  .availability-cell__option-dot.is-out { background: var(--colors-feedback-destructive-text); }

.availability-cell__dot[b-g7bdqzc5hv] {
  display: block;
  width: var(--ds-availability-cell-dot);
  height: var(--ds-availability-cell-dot);
  background: currentColor;
  border-radius: var(--radius-radius-full);
}

/* In the menu: each choice with the dot of the pill it makes. */
.availability-cell__option-dot[b-g7bdqzc5hv] {
  /* Gap in the token set: no dot-size scale (A's 6px, a little larger to read in a menu). */
  --ds-availability-cell-dot: 8px;

  display: block;
  width: var(--ds-availability-cell-dot);
  height: var(--ds-availability-cell-dot);
  border-radius: var(--radius-radius-full);
}
.availability-cell__option-dot.is-available[b-g7bdqzc5hv] { background: var(--colors-accent-emerald-text); }
.availability-cell__option-dot.is-out[b-g7bdqzc5hv] { background: var(--colors-accent-red-text); }
.availability-cell__option-dot.is-hidden[b-g7bdqzc5hv] { background: var(--colors-text-muted); }

.availability-cell__stock[b-g7bdqzc5hv] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: start;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
}
.availability-cell__stock[b-g7bdqzc5hv]  .ds-button { margin-top: var(--spacing-sm); }

@media (prefers-reduced-motion: reduce) {
  .availability-cell-wrap[b-g7bdqzc5hv]  .filter-popover__trigger > .ds-icon { transition: none; }
}
/* /Components/Pages/Dashboard/Catalog/ConceptC/CategoryCell.razor.rz.scp.css */
/* The category as A shows it, small and quiet under the type: plain text
   that opens its menu, with the chevron only on hover or focus. */
.category-cell-wrap[b-rmsqylwkwr] { min-width: 0; max-width: 100%; }

.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger {
  width: auto;
  max-width: 100%;
  height: auto;
  padding: var(--spacing-none);
  color: var(--colors-text-subtle);
  background: transparent;
  border-color: transparent;
}
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger:hover,
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger[aria-expanded="true"] {
  color: var(--colors-text-primary);
  background: transparent;
  border-color: transparent;
}
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger > span { overflow: hidden; text-overflow: ellipsis; }
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger > .ds-icon { opacity: 0; transition: opacity var(--ds-motion-fast) ease; }
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger:hover > .ds-icon,
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger:focus-visible > .ds-icon,
.category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger[aria-expanded="true"] > .ds-icon { opacity: 1; }

/* No category yet: said as an invitation, in the link colour on hover. */
.category-cell-wrap[b-rmsqylwkwr]  .category-cell.is-empty .filter-popover__trigger:hover { color: var(--colors-text-link); }

/* A new category, made right in the menu. */
.category-cell__new[b-rmsqylwkwr] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: start;
  padding: var(--spacing-sm);
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
}
.category-cell__new[b-rmsqylwkwr]  .ds-button { margin-top: var(--spacing-sm); }

@media (prefers-reduced-motion: reduce) {
  .category-cell-wrap[b-rmsqylwkwr]  .filter-popover__trigger > .ds-icon { transition: none; }
}
/* /Components/Pages/Dashboard/Catalog/ConceptC/CategoryManager.razor.rz.scp.css */
.category-manager[b-thaigtqsw5] { display: grid; gap: var(--spacing-lg); }
.category-manager[b-thaigtqsw5]  .category-manager__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }

.category-manager__list[b-thaigtqsw5] { display: grid; gap: var(--spacing-sm); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }

/* One category: its place, its name, how many items, delete. */
.category-manager__row[b-thaigtqsw5] {
  /* Gap in the token set: no column-width scale. */
  --ds-category-manager-count: 64px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--ds-category-manager-count) auto;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.category-manager__row.is-deleting[b-thaigtqsw5] { background: var(--colors-feedback-destructive-subtle); border-color: var(--colors-feedback-destructive-border); }

.category-manager__move[b-thaigtqsw5] { display: grid; gap: var(--spacing-2xs); }
.category-manager__move[b-thaigtqsw5]  .category-manager__up .ds-button__icon { transform: rotate(180deg); }

.category-manager__row[b-thaigtqsw5]  .category-manager__count { align-self: center; color: var(--colors-text-muted); white-space: nowrap; }
.category-manager__row[b-thaigtqsw5] >  .ds-button:last-of-type { align-self: center; }

/* Deleting one that holds items: where they go first. */
.category-manager__delete[b-thaigtqsw5] {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}
.category-manager__delete[b-thaigtqsw5]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
/* /Components/Pages/Dashboard/Catalog/ConceptE/ChangePrices.razor.rz.scp.css */
/* Changing many prices at once: up or down, by how much, and the new prices before anything changes. */
.change-prices__panel[b-kc9qkuzn1k] {
  /* Gap in the token set: no menu-width scale. */
  --ds-change-prices-panel: 340px;

  display: grid;
  gap: var(--spacing-md);
  width: var(--ds-change-prices-panel);
  max-width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}

/* The amount and its unit side by side, the switch exactly as tall as the field so their tops and bottoms line
   up; a helper under the field doesn't stretch the switch. */
.change-prices__by[b-kc9qkuzn1k] {
  /* Gap in the token set: no control-height scale; the field's own height (Input's --ds-field-height). */
  --ds-change-prices-field: 58px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: start;
}
.change-prices__by[b-kc9qkuzn1k]  .ds-segmented { box-sizing: border-box; height: var(--ds-change-prices-field); }
/* At this height a pill as wide as it is tall, so % and ₦ read as round, not as tall ovals. */
.change-prices__by[b-kc9qkuzn1k]  .ds-segmented__option { min-width: calc(var(--ds-change-prices-field) - var(--spacing-xs) * 2); }

.change-prices__preview[b-kc9qkuzn1k] { display: grid; gap: var(--spacing-2xs); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.change-prices__preview li[b-kc9qkuzn1k] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-primary);
  background: var(--colors-surface-background);
  border-radius: var(--radius-radius-md);
}
.change-prices__preview[b-kc9qkuzn1k]  .change-prices__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--colors-text-secondary); }
.change-prices__preview[b-kc9qkuzn1k]  .change-prices__was { color: var(--colors-text-muted); text-decoration: line-through; }
.change-prices__preview li[b-kc9qkuzn1k]  .ds-icon { color: var(--colors-icon-muted); }

.change-prices__panel[b-kc9qkuzn1k]  .change-prices__note { margin: var(--spacing-none); color: var(--colors-text-muted); }

.change-prices__actions[b-kc9qkuzn1k] { display: flex; gap: var(--spacing-xs); justify-content: flex-end; }
/* /Components/Pages/Dashboard/Catalog/ConceptE/ItemForm.razor.rz.scp.css */
/* One item, plainly: white cards on the muted page, one column; with the post it came from beside it when
   checking a post. Agent setup's rhythm: 16px between cards, 20px inside them. */

.item-form[b-hn8akgydly] {
  /* Gaps in the token set: no page gutter, form width, source width or border width. */
  --ds-item-form-gutter: clamp(24px, 3vw, 56px);
  --ds-item-form-measure: 720px;
  --ds-item-form-source: 380px;
  --ds-item-form-hairline: 1px;

  min-width: 0;
  padding: var(--spacing-4xl) var(--ds-item-form-gutter) calc(var(--spacing-5xl) + var(--ds-catalog-preview-clearance, var(--spacing-none)));
  color: var(--colors-text-primary);
  outline: none;
}

.item-form__top[b-hn8akgydly],
.item-form__layout[b-hn8akgydly] { width: min(var(--ds-item-form-measure), 100%); margin-inline: auto; }
.item-form__layout.has-source[b-hn8akgydly] { width: min(calc(var(--ds-item-form-measure) + var(--ds-item-form-source) + var(--spacing-3xl)), 100%); }
.item-form__top:has(+ .item-form__layout.has-source)[b-hn8akgydly] { width: min(calc(var(--ds-item-form-measure) + var(--ds-item-form-source) + var(--spacing-3xl)), 100%); }

.item-form__top[b-hn8akgydly] { display: grid; gap: var(--spacing-sm); justify-items: start; margin-bottom: var(--spacing-2xl); }
.item-form__top[b-hn8akgydly]  .item-form__back { margin-inline-start: calc(-1 * var(--spacing-sm)); }
.item-form__top[b-hn8akgydly]  h1 { margin: var(--spacing-none); }
.item-form__top[b-hn8akgydly]  p { margin: var(--spacing-none); }

.item-form__layout[b-hn8akgydly] { display: grid; gap: var(--spacing-3xl); align-items: start; }
.item-form__layout.has-source[b-hn8akgydly] { grid-template-columns: minmax(0, 1fr) var(--ds-item-form-source); }

.item-form__main[b-hn8akgydly] { display: grid; gap: var(--spacing-lg); min-width: 0; }

.item-form__card[b-hn8akgydly] {
  display: grid;
  gap: var(--spacing-lg);
  min-width: 0;
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-item-form-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}
.item-form__card[b-hn8akgydly]  h2 { margin: var(--spacing-none); }

/* Photos are a small row here: the name matters more. */
.item-form__card[b-hn8akgydly]  .ds-photo-picker { --ds-photo-picker-tile: 80px; }

.item-form__chips[b-hn8akgydly] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; }
.item-form__selectors[b-hn8akgydly] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); }
.item-form__category-create[b-hn8akgydly] { display: grid; gap: var(--spacing-md); }
.item-form[b-hn8akgydly]  .item-form__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }
.item-form[b-hn8akgydly]  .field__helper,
.item-form[b-hn8akgydly]  .select-field__helper,
.item-form[b-hn8akgydly]  .toggle__text small,
.item-form__category-create[b-hn8akgydly]  .field__helper { font-weight: var(--typography-font-weight-medium); }

.item-form__pair[b-hn8akgydly] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--spacing-sm); align-items: start; }

/* The price: a single price, variants, or price on request. Variants are a list, a row each: the variant
   written their way and its price. On a wide card a row is one line, its fields lined up down the list;
   where there's less room the price moves under the variant. */
.item-form__price[b-hn8akgydly] { container: item-price / inline-size; }

.item-form__versions[b-hn8akgydly] {
  /* Gap in the token set: no width for a variant's price. */
  --ds-item-form-version-price: 180px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ds-item-form-version-price) auto;
  column-gap: var(--spacing-sm);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
  background: var(--colors-surface-card);
  border: var(--ds-item-form-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.item-form__version[b-hn8akgydly] {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
}
.item-form__version + .item-form__version[b-hn8akgydly] { border-top: var(--ds-item-form-hairline) solid var(--colors-surface-border); }
.item-form__version-end[b-hn8akgydly] { display: inline-flex; gap: var(--spacing-xs); align-items: center; justify-self: end; }
.item-form[b-hn8akgydly]  .item-form__add-variant { justify-self: start; margin-inline-start: calc(-1 * var(--spacing-sm)); }

@container item-price (max-width: 480px) {
  .item-form__versions[b-hn8akgydly] { grid-template-columns: minmax(0, 1fr); }
  .item-form__version[b-hn8akgydly] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
  .item-form__version[b-hn8akgydly]  .item-form__value { flex: 1 1 100%; }
  .item-form__version[b-hn8akgydly]  .item-form__amount { flex: 1 1 var(--ds-item-form-version-price); }
  .item-form__version-end[b-hn8akgydly] { margin-inline-start: auto; }
}


/* The post is about an item already on the list. */
.item-form__match[b-hn8akgydly] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-item-form-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.item-form__match[b-hn8akgydly]  p { margin: var(--spacing-none); }
.item-form__match[b-hn8akgydly]  strong { font-weight: var(--typography-font-weight-semibold); }

.item-form__actions[b-hn8akgydly] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-item-form-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  scroll-margin-block-end: var(--ds-catalog-preview-clearance, var(--spacing-xl));
}
.item-form__buttons[b-hn8akgydly] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.item-form__spacer[b-hn8akgydly] { flex: 1 1 auto; }

/* The post it came from, staying in view. */
.item-form__source[b-hn8akgydly] { position: sticky; top: var(--spacing-xl); min-width: 0; }
.item-form__source-card[b-hn8akgydly] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-item-form-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  max-height: calc(100dvh - var(--spacing-5xl));
  overflow-y: auto;
}
.item-form__source-words[b-hn8akgydly] { display: grid; gap: var(--spacing-xs); padding: var(--spacing-none) var(--spacing-xs) var(--spacing-xs); }
.item-form__source-from[b-hn8akgydly] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
.item-form__source-words[b-hn8akgydly]  .item-form__caption { margin: var(--spacing-none); color: var(--colors-text-secondary); white-space: pre-line; }

@media (max-width: 1180px) {
  .item-form__layout.has-source[b-hn8akgydly] { grid-template-columns: minmax(0, 1fr); }
  .item-form__source[b-hn8akgydly] { position: static; order: -1; }
  .item-form__source-card[b-hn8akgydly] { max-height: none; }
  .item-form__source-words[b-hn8akgydly]  .item-form__caption { max-block-size: 6lh; overflow-y: auto; }
  .item-form__source-card[b-hn8akgydly]  .post-tile { display: none; }
}

@media (max-width: 760px) {
  .item-form__card[b-hn8akgydly] { padding: var(--spacing-lg); }
  .item-form__pair[b-hn8akgydly],
  .item-form__selectors[b-hn8akgydly] { grid-template-columns: minmax(0, 1fr); }
  .item-form__spacer[b-hn8akgydly] { display: none; }
  .item-form__buttons[b-hn8akgydly] { justify-content: flex-end; }
}

/* In a side panel (reviewing): no page around it. The panel gives the edges, so the cards become groups
   divided by a hairline; the post sits small at the top; More details opens what's optional. */
.item-form.is-panel[b-hn8akgydly] {
  /* Gap in the token set: no thumbnail size. */
  --ds-item-form-post-photo: 64px;

  padding: var(--spacing-none);
}
.item-form.is-panel .item-form__card[b-hn8akgydly] {
  padding: var(--spacing-none);
  background: transparent;
  border: var(--spacing-none);
  border-radius: var(--radius-radius-none);
}
.item-form.is-panel .item-form__card + .item-form__card[b-hn8akgydly],
.item-form.is-panel .item-form__card + .item-form__more[b-hn8akgydly] { padding-top: var(--spacing-lg); border-top: var(--ds-item-form-hairline) solid var(--colors-surface-border); }

.item-form__post[b-hn8akgydly] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-md);
  background: var(--colors-surface-background);
  border-radius: var(--radius-radius-xl);
}
.item-form__post-photo[b-hn8akgydly] { width: var(--ds-item-form-post-photo); height: var(--ds-item-form-post-photo); object-fit: cover; border-radius: var(--radius-radius-lg); }
.item-form__post-words[b-hn8akgydly] { display: grid; grid-column: -2; gap: var(--spacing-2xs); min-width: 0; }
.item-form__post[b-hn8akgydly]  .item-form__post-caption {
  display: -webkit-box;
  margin: var(--spacing-none);
  overflow: hidden;
  color: var(--colors-text-secondary);
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.item-form[b-hn8akgydly]  .item-form__more { justify-self: start; margin-inline-start: calc(-1 * var(--spacing-sm)); }
.item-form[b-hn8akgydly]  .item-form__more svg { transition: transform var(--ds-motion-fast) ease; }
.item-form[b-hn8akgydly]  .item-form__more.is-open svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .item-form[b-hn8akgydly]  .item-form__more svg { transition: none; }
}
/* /Components/Pages/Dashboard/Catalog/ConceptE/ItemReview.razor.rz.scp.css */
/* One full-width review table for every import source. A price-list photo is available on demand,
   not in a sidebar that squeezes the table. */

.review[b-btnrl309w2] {
  /* Gaps in the token set: no page gutter, page width or border width. */
  --ds-review-gutter: clamp(24px, 3vw, 56px);
  --ds-review-max: 1180px;
  --ds-review-hairline: 1px;

  display: grid;
  gap: var(--spacing-xl);
  min-width: 0;
  padding: var(--spacing-4xl) var(--ds-review-gutter) var(--spacing-6xl);
  color: var(--colors-text-primary);
  outline: none;
}
.review > *[b-btnrl309w2] { width: min(var(--ds-review-max), 100%); min-width: 0; margin-inline: auto; }

.review__top[b-btnrl309w2] { display: grid; gap: var(--spacing-sm); justify-items: start; }
.review__top[b-btnrl309w2]  .review__back { margin-inline-start: calc(-1 * var(--spacing-sm)); margin-bottom: var(--spacing-xl); }
.review__summary[b-btnrl309w2] { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center; justify-content: space-between; width: 100%; }
.review__heading[b-btnrl309w2] { display: grid; gap: var(--spacing-sm); min-width: 0; }
.review__top[b-btnrl309w2]  h1 { margin: var(--spacing-none); }
.review__top[b-btnrl309w2]  .review__lede { margin: var(--spacing-none); color: var(--colors-text-secondary); }

.review[b-btnrl309w2]  .review__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }

.review__layout[b-btnrl309w2] { display: grid; gap: var(--spacing-2xl); align-items: start; }

/* The table, its card and its footer (the review's progress) are the shared DataTable's (designer, 28 October 2026). */

/* Under a post's name: its channel and age. */
.review[b-btnrl309w2]  .review__origin { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }

.review__photo-preview[b-btnrl309w2] {
  /* Gap in the token set: viewport-relative height for a source image in the shared dialog. */
  --ds-review-photo-height: 65dvh;

  display: block;
  width: 100%;
  max-height: var(--ds-review-photo-height);
  object-fit: contain;
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-xl);
}

/* The way on: one button, floating at the bottom right; an error, if any, beside it. */
.review__bar[b-btnrl309w2] {
  position: sticky;
  bottom: var(--spacing-xl);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.review__bar[b-btnrl309w2] >  * { pointer-events: auto; }
.review__bar[b-btnrl309w2]  .ds-button { box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow); }
.review__bar[b-btnrl309w2]  .ds-button { margin-inline-start: auto; }

/* /Components/Pages/Dashboard/Catalog/ConceptE/LinkDialog.razor.rz.scp.css */
/* The link field, and while it's read, a line saying so. */
.link-dialog[b-b2yzd8jut2] { display: grid; gap: var(--spacing-md); }
.link-dialog__reading[b-b2yzd8jut2] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
/* /Components/Pages/Dashboard/Catalog/ConceptE/OfferRow.razor.rz.scp.css */
/* A row of Concept E's table, and its column names (is-head). The table's look (padding, the line between
   rows, the header band, hover, chosen) is the shared DataTable's (designer, 28 October 2026: every table
   alike). Item, category, price and availability share aligned columns. Under the name: only the item type. */
.offer-row[b-fn789f3l8q] {
  /* Gaps in the token set: no border-width, thumbnail, row-height or opacity scale. */
  --ds-offer-row-hairline: 1px;
  /* A thumbnail's edge, half a hairline (designer, 25 October 2026: subtle). */
  --ds-offer-row-divider: 0.5px;
  --ds-offer-row-thumb: 48px;
  --ds-offer-row-hidden: 0.6;
  --ds-offer-row-min: 88px;
  /* Gap in the token set: a shared action-column width keeps table headers and every row aligned. */
  --ds-offer-row-review-width: 112px;
  /* No status-column width in the token set: Taking bookings and its chevron, the longest status. The column
     is only that wide, so the other columns share the space and the table ends evenly at both edges
     (designer, 27 October 2026: balanced). */
  --ds-offer-row-availability-min: 152px;
  --ds-table-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) var(--ds-offer-row-availability-min);
}
.offer-row:not(.is-head)[b-fn789f3l8q] { min-height: var(--ds-offer-row-min); }
.offer-row.is-review[b-fn789f3l8q] { --ds-table-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) var(--ds-offer-row-review-width); }
.offer-row__review[b-fn789f3l8q] { position: relative; z-index: 1; display: grid; gap: var(--spacing-xs); justify-items: end; }
.offer-row.is-review .offer-row__price[b-fn789f3l8q] { display: grid; gap: var(--spacing-xs); }
.offer-row[b-fn789f3l8q]  .offer-row__detail { color: var(--colors-text-muted); }

/* The tick box, the picture and the words, side by side. The tick box sits above the name's cover, so it
   chooses rather than opens. */
.offer-row__item[b-fn789f3l8q] { display: flex; gap: var(--spacing-md); align-items: center; min-width: 0; }
.offer-row__select[b-fn789f3l8q] { position: relative; z-index: 1; display: grid; flex: none; place-items: center; }

.offer-row__thumb[b-fn789f3l8q] {
  flex: none;
  width: var(--ds-offer-row-thumb);
  height: var(--ds-offer-row-thumb);
  object-fit: cover;
  background: var(--colors-surface-muted);
  border: var(--ds-offer-row-divider) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
/* The picture, with where it came from as a small mark on its corner when it came from a post. */
.offer-row__picture[b-fn789f3l8q] { position: relative; display: grid; flex: none; }
.offer-row__channel[b-fn789f3l8q] {
  /* Gap in the token set: no badge size. */
  --ds-offer-row-badge: 22px;

  position: absolute;
  right: calc(-1 * var(--spacing-xs));
  bottom: calc(-1 * var(--spacing-xs));
  display: grid;
  place-items: center;
  width: var(--ds-offer-row-badge);
  height: var(--ds-offer-row-badge);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow-diffuse);
}

/* No photo: the item's initials, the size and corners of a photo. */
.offer-row__monogram[b-fn789f3l8q] { display: grid; flex: none; }
.offer-row__monogram[b-fn789f3l8q]  .petal-avatar { width: var(--ds-offer-row-thumb); height: var(--ds-offer-row-thumb); border-radius: var(--radius-radius-lg); }

.offer-row__words[b-fn789f3l8q] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.offer-row__words[b-fn789f3l8q]  .offer-row__name {
  justify-content: start;
  min-height: auto;
  padding: var(--spacing-none);
  color: var(--colors-text-primary);
  text-align: start;
  background: transparent;
}
/* At most two lines, then "…", as a task's title. */
.offer-row__words[b-fn789f3l8q]  .offer-row__name-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.offer-row__words[b-fn789f3l8q]  .offer-row__name::after { position: absolute; inset: 0; content: ""; }
.offer-row__words[b-fn789f3l8q]  .offer-row__name:focus-visible { outline: none; }
.offer-row__words[b-fn789f3l8q]  .offer-row__name:focus-visible::after { outline: var(--ds-offer-row-hairline) solid var(--colors-brand-primary); outline-offset: calc(var(--ds-offer-row-hairline) * -1); }

.offer-row__meta[b-fn789f3l8q] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
/* The note sits above the name's cover, as the tick box does, so a badge can be read without opening. */
.offer-row__note[b-fn789f3l8q] { position: relative; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); pointer-events: none; }

/* The price and availability panels open above the name's cover, so they can be used on their own. */
.offer-row__price[b-fn789f3l8q],
.offer-row__category[b-fn789f3l8q],
.offer-row__available[b-fn789f3l8q] { position: relative; z-index: 1; }

/* A hidden item stays on the list, quieter: it's kept for later. Its availability keeps full contrast. */
.offer-row.is-hidden .offer-row__thumb[b-fn789f3l8q],
.offer-row.is-hidden .offer-row__monogram[b-fn789f3l8q],
.offer-row.is-hidden .offer-row__words[b-fn789f3l8q],
.offer-row.is-hidden > .offer-row__category[b-fn789f3l8q],
.offer-row.is-hidden > .offer-row__price[b-fn789f3l8q] { opacity: var(--ds-offer-row-hidden); }
/* Reviewing: an unticked row is left out, so it fades as a hidden one does. */
.offer-row.is-left-out .offer-row__thumb[b-fn789f3l8q],
.offer-row.is-left-out .offer-row__monogram[b-fn789f3l8q],
.offer-row.is-left-out .offer-row__words[b-fn789f3l8q],
.offer-row.is-left-out > .offer-row__price[b-fn789f3l8q],
.offer-row.is-left-out > .offer-row__available[b-fn789f3l8q] { opacity: var(--ds-offer-row-hidden); }

/* A tablet or smaller, as every table stacks (designer, 28 October 2026): the item on top, its price and
   availability on one line under it, in line with its name. */
@media (max-width: 1024px) {
  .offer-row[b-fn789f3l8q] {
    --ds-table-columns: minmax(0, 1fr) auto;
    grid-template-areas: "item item" "price available";
  }
  .offer-row:not(.is-review):has(.offer-row__category:not(.is-empty))[b-fn789f3l8q] { grid-template-areas: "item item" "category category" "price available"; }
  .offer-row__item[b-fn789f3l8q] { grid-area: item; }
  .offer-row__category[b-fn789f3l8q] { grid-area: category; padding-left: calc(var(--icon-size-icon-md) + var(--spacing-md) * 2 + var(--ds-offer-row-thumb)); }
  .offer-row__category.is-empty[b-fn789f3l8q] { display: none; }
  .offer-row__price[b-fn789f3l8q] { grid-area: price; padding-left: calc(var(--icon-size-icon-md) + var(--spacing-md) * 2 + var(--ds-offer-row-thumb)); }
  .offer-row__available[b-fn789f3l8q] { grid-area: available; }
  .offer-row.is-review[b-fn789f3l8q] { --ds-table-columns: minmax(0, 1fr) auto; grid-template-areas: "item review" "price available"; }
  .offer-row__review[b-fn789f3l8q] { grid-area: review; }
}
/* /Components/Pages/Dashboard/Catalog/ConceptE/PostPicker.razor.rz.scp.css */
/* Posts stay at their original size. Clear groups and readable captions provide breathing room;
   selecting and previewing are separate actions, and the one floating review button stays in view. */

.post-picker[b-nu4lvyp8gi] {
  /* Gaps in the token set: no page gutter, page width, tile, tick, ring or skeleton size, and no opacity scale. */
  --ds-post-picker-gutter: clamp(24px, 3vw, 56px);
  --ds-post-picker-max: 1180px;
  --ds-post-picker-card: 180px;
  --ds-post-picker-tick: 24px;
  --ds-post-picker-ring: 2px;
  --ds-post-picker-hairline: 1px;
  --ds-post-picker-skeleton: 180px;
  /* Gap in the token set: no search-field measure. */
  --ds-post-picker-search: 280px;

  display: grid;
  gap: var(--spacing-2xl);
  min-width: 0;
  padding: var(--spacing-4xl) var(--ds-post-picker-gutter) var(--spacing-6xl);
  color: var(--colors-text-primary);
}
.post-picker > *[b-nu4lvyp8gi] { width: min(var(--ds-post-picker-max), 100%); min-width: 0; margin-inline: auto; }

.post-picker__top[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-sm); justify-items: start; }
.post-picker > nav[b-nu4lvyp8gi]  .post-picker__back { margin-inline-start: calc(-1 * var(--spacing-sm)); }
.post-picker__top[b-nu4lvyp8gi]  h1,
.post-picker__top[b-nu4lvyp8gi]  .post-picker__lede { margin: var(--spacing-none); }
.post-picker__top[b-nu4lvyp8gi]  .post-picker__lede { color: var(--colors-text-secondary); }

.post-picker__content[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-xl); min-width: 0; }

/* The way on: one button, floating at the bottom right, over the grid as it scrolls. */
.post-picker__bar[b-nu4lvyp8gi] {
  position: sticky;
  bottom: var(--spacing-xl);
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.post-picker__bar[b-nu4lvyp8gi]  .ds-button { pointer-events: auto; box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow); }

.post-picker[b-nu4lvyp8gi]  .post-picker__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }

.post-picker__tools[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-md); }
.post-picker__filters[b-nu4lvyp8gi] { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center; justify-content: space-between; }
.post-picker__filters[b-nu4lvyp8gi]  .post-picker__channels { max-width: 100%; min-width: 0; }
.post-picker__filters[b-nu4lvyp8gi]  .ds-tab { display: inline-flex; gap: var(--spacing-xs); align-items: center; }
.post-picker__filters[b-nu4lvyp8gi]  .post-picker__search { flex: 1 1 var(--ds-post-picker-search); width: var(--ds-post-picker-search); min-width: 0; }
.post-picker__find[b-nu4lvyp8gi] { display: flex; gap: var(--spacing-sm); align-items: center; min-width: 0; }
.post-picker__find[b-nu4lvyp8gi]  .filter-popover { flex: none; }
/* Bulk selection starts above the first tile; the result count anchors the far edge. */
.post-picker__selection[b-nu4lvyp8gi] { display: flex; gap: var(--spacing-lg); align-items: center; }
.post-picker__selection[b-nu4lvyp8gi]  .checkbox { align-items: center; }
.post-picker__selection[b-nu4lvyp8gi]  .post-picker__count { margin-inline-start: auto; }
.post-picker__from[b-nu4lvyp8gi] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-secondary); }

.post-picker__grid[b-nu4lvyp8gi] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-post-picker-card), 1fr));
  gap: var(--spacing-2xl) var(--spacing-lg);
  margin-block: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}
.post-picker__skeleton[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-sm); }

.post-picker__post[b-nu4lvyp8gi] { display: grid; align-content: start; gap: var(--spacing-xs); justify-items: start; min-width: 0; }

/* The tile is the button: no fill of its own, the post's picture fills it. */
.post-picker__post[b-nu4lvyp8gi]  .post-picker__pick {
  position: relative;
  display: grid;
  justify-self: stretch;
  min-height: 0;
  padding: var(--spacing-none);
  background: transparent;
  border-radius: var(--radius-radius-xl);
  transition: box-shadow var(--ds-motion-fast) ease;
}
.post-picker__post[b-nu4lvyp8gi]  .post-picker__pick:hover { background: transparent; box-shadow: 0 0 0 var(--ds-post-picker-ring) var(--colors-surface-input); }
.post-picker__post[b-nu4lvyp8gi]  .post-picker__pick:focus-visible { outline: var(--ds-post-picker-ring) solid var(--colors-brand-primary); outline-offset: var(--spacing-2xs); }
.post-picker__post.is-chosen[b-nu4lvyp8gi]  .post-picker__pick { box-shadow: 0 0 0 var(--ds-post-picker-ring) var(--colors-brand-primary); }

/* The tick, top right: an empty ring until picked, then filled. */
.post-picker__post[b-nu4lvyp8gi]  .post-picker__tick {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: grid;
  place-items: center;
  width: var(--ds-post-picker-tick);
  height: var(--ds-post-picker-tick);
  color: transparent;
  background: var(--colors-surface-card);
  border: var(--ds-post-picker-ring) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow-diffuse);
}
.post-picker__post.is-chosen[b-nu4lvyp8gi]  .post-picker__tick {
  color: var(--colors-text-on-primary);
  background: var(--colors-brand-primary);
  border-color: var(--colors-brand-primary);
}

.post-picker__words[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-xs); justify-self: stretch; min-width: 0; padding: var(--spacing-xs) var(--spacing-2xs) var(--spacing-none); }
.post-picker[b-nu4lvyp8gi]  .post-picker__line { overflow: hidden; color: var(--colors-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.post-picker[b-nu4lvyp8gi]  .post-picker__caption {
  display: -webkit-box;
  min-block-size: 2lh;
  overflow: hidden;
  color: var(--colors-text-primary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.post-picker__meta[b-nu4lvyp8gi] { display: flex; gap: var(--spacing-xs); align-items: center; justify-content: space-between; }
.post-picker__meta[b-nu4lvyp8gi]  .ds-button { padding-inline: var(--spacing-xs); color: var(--colors-text-secondary); }

/* Recovery stays by the action; preparation itself covers the full viewport below. */
.post-picker__recovery-card[b-nu4lvyp8gi] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  max-width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-post-picker-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow);
  pointer-events: auto;
}
.post-picker__progress-copy[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-xs); }
.post-picker__progress-copy[b-nu4lvyp8gi]  strong { color: var(--colors-text-primary); }
.post-picker__progress-copy[b-nu4lvyp8gi]  span { color: var(--colors-text-secondary); }
.post-picker__recovery[b-nu4lvyp8gi] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-inline-start: auto; }

/* The shared Dialog owns the full-screen layer and focus management. No visible card around the status. */
.post-preparation[b-nu4lvyp8gi] {
  /* Gap in the token set: no translucent preparation-overlay opacity. */
  --ds-post-preparation-opacity: 94%;
}
.post-preparation[b-nu4lvyp8gi]  .dialog-backdrop::before {
  background: color-mix(in srgb, var(--colors-surface-background) var(--ds-post-preparation-opacity), transparent);
}
.post-preparation[b-nu4lvyp8gi]  .dialog {
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-radius-none);
}
.post-preparation__body[b-nu4lvyp8gi] { display: grid; gap: var(--spacing-md); justify-items: center; text-align: center; }
.post-preparation__mark[b-nu4lvyp8gi] { display: grid; place-items: center; margin-bottom: var(--spacing-lg); color: var(--colors-icon-brand); }
.post-preparation__body[b-nu4lvyp8gi]  h2 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.post-preparation__body[b-nu4lvyp8gi]  p { margin: var(--spacing-none); color: var(--colors-text-secondary); }

.post-preview[b-nu4lvyp8gi] {
  /* Gap in the token set: no post-preview image height. */
  --ds-post-preview-image-max: 340px;
  display: grid;
  gap: var(--spacing-xl);
  min-width: 0;
}
.post-preview__source[b-nu4lvyp8gi] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.post-preview[b-nu4lvyp8gi]  .post-preview__muted { color: var(--colors-text-muted); }
.post-preview__content[b-nu4lvyp8gi] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; }
.post-preview__content.is-text[b-nu4lvyp8gi] { grid-template-columns: minmax(0, 1fr); }
.post-preview__image[b-nu4lvyp8gi] { width: 100%; max-height: var(--ds-post-preview-image-max); object-fit: contain; background: var(--colors-surface-muted); border-radius: var(--radius-radius-xl); }
.post-preview[b-nu4lvyp8gi]  .post-preview__caption { margin: var(--spacing-none); color: var(--colors-text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-preview__actions[b-nu4lvyp8gi] { display: flex; justify-content: flex-end; padding-top: var(--spacing-md); }

@media (max-width: 760px) {
  .post-picker[b-nu4lvyp8gi] { --ds-post-picker-card: 132px; /* gap: no tile-size scale */ }
  .post-picker__find[b-nu4lvyp8gi] { width: 100%; }
  .post-picker__find[b-nu4lvyp8gi]  .post-picker__search { flex: 1 1 auto; width: auto; }
  .post-preview__content[b-nu4lvyp8gi] { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .post-picker__post[b-nu4lvyp8gi]  .post-picker__pick { transition: none; }
}
/* /Components/Pages/Dashboard/Catalog/ConceptE/PostTile.razor.rz.scp.css */
/* A post's picture, square, with its channel's mark in the corner. */
.post-tile[b-gblro8qrjk] {
  /* Gap in the token set: no aspect-ratio or badge-size scale. */
  --ds-post-tile-ratio: 1;
  --ds-post-tile-badge: 28px;
  --ds-post-tile-hairline: 1px;

  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: var(--ds-post-tile-ratio);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}
.post-tile__photo[b-gblro8qrjk] { width: 100%; height: 100%; object-fit: cover; }

/* A neutral thumbnail placeholder; source captions belong outside the image. */
.post-tile.is-words[b-gblro8qrjk] {
  padding: var(--spacing-lg);
  background: var(--colors-surface-card);
  box-shadow: inset 0 0 0 var(--ds-post-tile-hairline) var(--colors-surface-border);
}
.post-tile__placeholder[b-gblro8qrjk] {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: center;
  color: var(--colors-icon-muted);
  text-align: center;
}
.post-tile__placeholder[b-gblro8qrjk]  span { color: var(--colors-text-muted); }

.post-tile__channel[b-gblro8qrjk] {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  display: grid;
  place-items: center;
  width: var(--ds-post-tile-badge);
  height: var(--ds-post-tile-badge);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow-diffuse);
}
/* /Components/Pages/Dashboard/Catalog/ConceptE/PriceListDialog.razor.rz.scp.css */
/* A price list in a window: three tabs for how it comes in, one place to drop or paste it, the photo while
   it's read, and a file's columns with the first items they give. */

.price-list[b-znfmzfbe1u] {
  /* Gaps in the token set: no border width, drop-area height, icon tile, photo height or measure. */
  --ds-price-list-hairline: 1px;
  --ds-price-list-drop: 200px;
  --ds-price-list-icon: 48px;
  --ds-price-list-photo: 240px;
  --ds-price-list-measure: 44ch;

  display: grid;
  gap: var(--spacing-lg);
  min-width: 0;
  color: var(--colors-text-primary);
}

.price-list[b-znfmzfbe1u]  .price-list__muted { margin: var(--spacing-none); color: var(--colors-text-muted); }
.price-list[b-znfmzfbe1u]  .price-list__ways { justify-self: start; }

/* The whole area opens the file chooser. */
.price-list[b-znfmzfbe1u]  .price-list__drop {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-height: var(--ds-price-list-drop);
  padding: var(--spacing-2xl);
  text-align: center;
  background: var(--colors-surface-background);
  border: var(--ds-price-list-hairline) dashed var(--colors-surface-input);
  border-radius: var(--radius-radius-xl);
  cursor: pointer;
  transition: border-color var(--ds-motion-fast) ease, background var(--ds-motion-fast) ease;
}
.price-list[b-znfmzfbe1u]  .price-list__drop:hover,
.price-list[b-znfmzfbe1u]  .price-list__drop:focus-visible { background: var(--colors-accent-brand-subtle); border-color: var(--colors-accent-brand-border); }
.price-list[b-znfmzfbe1u]  .price-list__drop > span:not(.price-list__drop-icon) { max-width: var(--ds-price-list-measure); color: var(--colors-text-muted); }
.price-list[b-znfmzfbe1u]  .price-list__drop strong { color: var(--colors-text-primary); }
.price-list[b-znfmzfbe1u]  .price-list__drop-icon {
  display: grid;
  place-items: center;
  width: var(--ds-price-list-icon);
  height: var(--ds-price-list-icon);
  color: var(--colors-icon-brand);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-lg);
}

.price-list__reading[b-znfmzfbe1u] { display: grid; gap: var(--spacing-md); justify-items: center; padding: var(--spacing-lg) var(--spacing-none); }
.price-list__reading-line[b-znfmzfbe1u] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
.price-list__photo[b-znfmzfbe1u] { display: block; max-width: 100%; max-height: var(--ds-price-list-photo); object-fit: contain; border-radius: var(--radius-radius-xl); }

/* A file: the columns, then the first items they give. */
.price-list__columns[b-znfmzfbe1u] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.price-list__preview[b-znfmzfbe1u] {
  display: grid;
  margin: var(--spacing-none);
  padding: var(--spacing-none) var(--spacing-lg);
  list-style: none;
  background: var(--colors-surface-background);
  border-radius: var(--radius-radius-xl);
}
.price-list__preview-row[b-znfmzfbe1u] { display: flex; gap: var(--spacing-lg); align-items: baseline; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-none); }
.price-list__preview-row + .price-list__preview-row[b-znfmzfbe1u] { border-top: var(--ds-price-list-hairline) solid var(--colors-surface-border); }
.price-list__preview-row[b-znfmzfbe1u]  .price-list__preview-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .price-list[b-znfmzfbe1u]  .price-list__drop { transition: none; }
}
/* /Components/Pages/Dashboard/Catalog/ConceptE/PriceSummaryCell.razor.rz.scp.css */
/* The price, plain until pointed at: the amount, and a quiet line under it when it adds something. */
.price-summary[b-w00s81mc7b] {
  /* Gap in the token set: no menu-width or menu-height scale. */
  --ds-price-summary-panel: 340px;
  --ds-price-summary-panel-height: 360px;

  min-width: 0;
}

/* The popover's anchor takes the column's width here, so the price is sized against the column, not squeezed. */
.price-summary[b-w00s81mc7b]  .ds-popover { display: flex; }
/* The panel is as wide as the fields and buttons in it, so nothing is cut off at its edge. */
.price-summary[b-w00s81mc7b]  .ds-popover__panel { width: min(var(--ds-price-summary-panel), calc(100vw - var(--spacing-lg))); }

.price-summary[b-w00s81mc7b]  .price-summary__trigger {
  display: grid;
  justify-items: start;
  gap: var(--spacing-2xs);
  /* Its own width, so "₦20,000" and "per person" never break word by word (it's a flex item of the popover's
     anchor, so it mustn't shrink); the column caps it. */
  flex: none;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-inline-start: calc(-1 * var(--spacing-sm));
  text-align: start;
  background: transparent;
  border-radius: var(--radius-radius-md);
}
.price-summary[b-w00s81mc7b]  .price-summary__trigger:hover,
.price-summary[b-w00s81mc7b]  .price-summary__trigger[aria-expanded="true"] { background: var(--colors-surface-muted); }

/* Each line whole; a long one is cut with an ellipsis at the column's edge rather than broken. */
.price-summary[b-w00s81mc7b]  .price-summary__main,
.price-summary[b-w00s81mc7b]  .price-summary__detail { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-summary[b-w00s81mc7b]  .price-summary__main { color: var(--colors-text-primary); }
.price-summary[b-w00s81mc7b]  .price-summary__detail { color: var(--colors-text-muted); }

/* Nothing yet: the one thing to do. Ask for price: an answer, not a gap, so quieter. */
.price-summary.is-missing[b-w00s81mc7b]  .price-summary__main { color: var(--colors-feedback-warning-text); }
.price-summary.is-ask[b-w00s81mc7b]  .price-summary__main { color: var(--colors-text-secondary); }

.price-summary__panel[b-w00s81mc7b] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  max-height: var(--ds-price-summary-panel-height);
  overflow-y: auto;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
}
.price-summary__panel[b-w00s81mc7b]  .price-summary__note { margin: var(--spacing-none); color: var(--colors-text-secondary); }
.price-summary__actions[b-w00s81mc7b] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; justify-content: flex-end; }

/* Review uses one amount field, rather than a menu of unrelated pricing actions. */
.price-summary__review[b-w00s81mc7b] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.price-summary__review[b-w00s81mc7b]  .ds-button { justify-self: start; }
.price-summary[b-w00s81mc7b]  .price-summary__edit { color: var(--colors-text-link); }
/* /Components/Pages/Dashboard/Catalog/ConceptE/ProductsConceptE.razor.rz.scp.css */
/* Products & Services, Concept E: Concept C's page (designer, 25 October 2026), laid out as Tasks is: the gutter
   outside, then everything on one 1440 measure, centred; the table on a white card. */

.products-e[b-5zw3c2ijcp] {
  /* Gaps in the token set: no page-gutter, page-width, thumbnail, search-width or border-width scale.
     The gutter and the cap are the Tasks page's. */
  --ds-products-e-gutter: clamp(28px, 4vw, 66px);
  --ds-products-e-max: 1440px;
  --ds-products-e-hairline: 1px;
  /* The card's edge and the lines inside the table, half a hairline (designer, 25 October 2026: subtle). */
  --ds-products-e-divider: 0.5px;
  --ds-products-e-photo: 48px;
  --ds-products-e-select: 32px;
  --ds-products-e-search: 300px;
  --ds-products-e-mark: 28px;

  display: grid;
  gap: var(--spacing-xl);
  padding: var(--spacing-4xl) var(--ds-products-e-gutter) var(--spacing-6xl);
  color: var(--colors-text-primary);
}

/* Every block on the one measure, and free to shrink: a wide one scrolls inside itself. */
.products-e[b-5zw3c2ijcp] >  * { width: min(var(--ds-products-e-max), 100%); min-width: 0; margin-inline: auto; }

.products-e__header[b-5zw3c2ijcp] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg) var(--spacing-xl);
  align-items: flex-end;
  justify-content: space-between;
}
.products-e__heading[b-5zw3c2ijcp] { display: grid; gap: var(--spacing-sm); min-width: 0; }
.products-e__heading[b-5zw3c2ijcp]  h1 { margin: var(--spacing-none); }
.products-e__heading[b-5zw3c2ijcp]  .products-e__lede { margin: var(--spacing-none); color: var(--colors-text-secondary); }
.products-e__actions[b-5zw3c2ijcp] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }

/* The first visit: one invitation with the same actions as the populated list. */

.products-e__start[b-5zw3c2ijcp] {
  display: grid;
  gap: var(--spacing-xl);
  padding: clamp(var(--spacing-xl), 4vw, var(--spacing-4xl));
  justify-items: start;
  background: var(--colors-surface-card);
  border: var(--ds-products-e-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}
.products-e__start-head[b-5zw3c2ijcp] { display: grid; gap: var(--spacing-sm); }
.products-e__start-head[b-5zw3c2ijcp]  h2,
.products-e__start-head[b-5zw3c2ijcp]  p { margin: var(--spacing-none); }
.products-e__start-head[b-5zw3c2ijcp]  p { color: var(--colors-text-secondary); }

/* Quiet visual markers make the alternative methods easy to scan. */
.products-e__way-mark[b-5zw3c2ijcp] {
  display: grid;
  place-items: center;
  width: var(--ds-products-e-mark);
  height: var(--ds-products-e-mark);
  border-radius: var(--radius-radius-md);
}
.products-e__way-mark.is-one[b-5zw3c2ijcp] { color: var(--colors-icon-brand); background: var(--colors-accent-brand-subtle); }
.products-e__way-mark.is-list[b-5zw3c2ijcp] { color: var(--colors-accent-teal-text); background: var(--colors-accent-teal-subtle); }
.products-e__way-mark.is-link[b-5zw3c2ijcp] { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }

/* Social sources use their own colours. */
.products-e__channels[b-5zw3c2ijcp] { display: inline-flex; gap: var(--spacing-2xs); align-items: center; }

/* ── Finding and changing items ──────────────────────────────────────────── */

.products-e__toolbar[b-5zw3c2ijcp],
.products-e__bulk[b-5zw3c2ijcp] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
}
.products-e__toolbar[b-5zw3c2ijcp] >  .products-e__views { min-width: 0; max-width: 100%; overflow-x: auto; }
.products-e__toolbar[b-5zw3c2ijcp]  .ds-tab { white-space: nowrap; }
.products-e__find[b-5zw3c2ijcp] { display: flex; gap: var(--spacing-sm); align-items: center; }
.products-e__find[b-5zw3c2ijcp]  .ds-search-field { width: var(--ds-products-e-search); }

/* Items chosen: the toolbar becomes what can be done to them. */
.products-e__bulk[b-5zw3c2ijcp] {
  justify-content: flex-start;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-products-e-hairline) solid var(--colors-accent-brand-border);
  border-radius: var(--radius-radius-xl);
}
.products-e__bulk[b-5zw3c2ijcp]  p { margin: var(--spacing-none); color: var(--colors-text-primary); }
.products-e__bulk-actions[b-5zw3c2ijcp] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; margin-left: auto; }

/* ── The table ───────────────────────────────────────────────────────────── */
/* The table, its card and its pages are the shared DataTable's (designer, 28 October 2026); the rows draw
   their own columns (OfferRow), so the head always lines up. */

/* New posts to review: one quiet line on a white card, above the list. */
.products-e__new[b-5zw3c2ijcp] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-products-e-divider) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}
.products-e__new[b-5zw3c2ijcp]  p { flex: 1 1 auto; margin: var(--spacing-none); }
.products-e__new-actions[b-5zw3c2ijcp] { display: flex; gap: var(--spacing-xs); align-items: center; }

/* By category: each section opens with its name and count, and can be chosen whole while choosing. */
.products-e__section-head[b-5zw3c2ijcp] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-2xl);
  background: var(--colors-surface-muted);
  border-bottom: var(--ds-products-e-divider) solid var(--colors-surface-border);
}
.products-e__section + .products-e__section .products-e__section-head[b-5zw3c2ijcp] { border-top: var(--ds-products-e-divider) solid var(--colors-surface-border); }
.products-e__section-select[b-5zw3c2ijcp] { display: grid; place-items: center; }
.products-e__section-title[b-5zw3c2ijcp] { display: flex; gap: var(--spacing-sm); align-items: baseline; }
.products-e__section-title[b-5zw3c2ijcp]  strong { color: var(--colors-text-primary); }
.products-e__section-title[b-5zw3c2ijcp]  span { color: var(--colors-text-muted); }

/* In the category menu: show the list by category, and manage categories. */
.products-e__category-tools[b-5zw3c2ijcp] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-top: var(--ds-products-e-hairline) solid var(--colors-surface-border);
}

.products-e__skeleton[b-5zw3c2ijcp] {
  display: grid;
  grid-template-columns: var(--ds-products-e-photo) minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
}
.products-e__skeleton + .products-e__skeleton[b-5zw3c2ijcp] { border-top: var(--ds-products-e-hairline) solid var(--colors-surface-border); }

@media (max-width: 1024px) {
  .products-e__find[b-5zw3c2ijcp] { flex: 1 1 100%; }
  .products-e__find[b-5zw3c2ijcp]  .ds-search-field { flex: 1 1 auto; width: auto; }
  .products-e__bulk-actions[b-5zw3c2ijcp] { margin-left: 0; }
}

.products-e[b-5zw3c2ijcp]  .products-e__draft-note {
  /* Keep the page's shared auto inline margins, including above its 1440px content cap. */
  margin-block: var(--spacing-none);
  color: var(--colors-text-secondary);
}
/* /Components/Pages/Dashboard/Channels/ChannelCard.razor.rz.scp.css */
/* A row: the brand mark, the copy, and the one action. Flex with an explicit
   order, so nothing depends on grid auto-placement. */

.channel-card[b-19wequjel0] {
  display: flex;
  gap: var(--ds-channel-gutter);
  align-items: center;
  min-height: var(--ds-channel-min);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-channel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  transition:
    border-color var(--ds-channel-motion) ease,
    box-shadow var(--ds-channel-motion) ease;
}

.channel-card[b-19wequjel0] {
  /* Gaps in the token set: no card-height, control-size, border-width or
     motion scale. The mark is 48px on a 15px radius, from the design. */
  --ds-channel-min: 104px;
  --ds-channel-gutter: 15px;
  --ds-channel-hairline: 1px;
  --ds-channel-motion: 140ms;
  --ds-channel-mark: 48px;
}

.channel-card:hover[b-19wequjel0] {
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

/* The one place in this product where a colour is not ours. These are Meta's
   brand marks; they do not shift in dark mode and they are not tokenised,
   which tools/design-tokens/brand-literals.json records. */
.channel-card__mark[b-19wequjel0] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-channel-mark);
  height: var(--ds-channel-mark);
  color: var(--colors-text-inverse);
  border-radius: var(--radius-radius-xl);
}

.channel-whatsapp .channel-card__mark[b-19wequjel0] { background: #22a968; }
.channel-instagram .channel-card__mark[b-19wequjel0] { background: #c63886; }
.channel-facebook .channel-card__mark[b-19wequjel0] { background: #1877f2; }
/* X and TikTok follow the text colour, so their discs stay visible in dark and light mode. */
.channel-x .channel-card__mark[b-19wequjel0],
.channel-tiktok .channel-card__mark[b-19wequjel0] { background: var(--colors-text-primary); color: var(--colors-surface-card); }

.channel-card__copy[b-19wequjel0] {
  display: grid;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0;
}

.channel-card__title[b-19wequjel0] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.channel-card__title[b-19wequjel0]  h2 { color: var(--colors-text-primary); }

/* ::deep, because Typography renders the span itself and that element never
   carries this component's scope attribute — without it the pill loses its
   padding, its radius and its background, and reads as bare text. */
[b-19wequjel0] .channel-card__status {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-radius-full);
}

[b-19wequjel0] .channel-card__status.is-connected {
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
}

[b-19wequjel0] .channel-card__status.is-attention {
  color: var(--colors-feedback-warning-text);
  background: var(--colors-feedback-warning-subtle);
}

[b-19wequjel0] .channel-card__status.is-not-connected {
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
}

[b-19wequjel0] .channel-card__description { color: var(--colors-text-muted); }
[b-19wequjel0] .channel-card__meta { color: var(--colors-text-subtle); }

.channel-card__actions[b-19wequjel0] {
  display: flex;
  flex: 0 0 auto;
  gap: var(--spacing-sm);
  align-items: center;
}

.channel-card__ready[b-19wequjel0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-width: var(--ds-channel-ready);
  color: var(--colors-feedback-success-text);
}

.channel-card[b-19wequjel0] {
  /* Matches the width of the Start setup button it replaces, so a connected
     row does not shift the column. */
  --ds-channel-ready: 82px;
}

/* The design-system Secondary button, unmodified — its own height, padding,
   type, border and hover.

   The single addition is a floor on the width, and it is a layout constraint
   rather than a restyle: the label changes with the channel's state (Start
   setup / Continue setup / Fix connection), so without it the action column
   shifts every time a row changes state. */
[b-19wequjel0] .channel-card__action {
  min-width: var(--ds-channel-action-width);
}

.channel-card[b-19wequjel0] {
  /* Gap in the token set: no control-width scale. */
  --ds-channel-action-width: 112px;
}
/* /Components/Pages/Dashboard/Channels/Channels.razor.rz.scp.css */
/* The landing screen. Narrower than Products at 1040 rather than 1440, because
   this is a short list of decisions rather than a table to scan. */

.channels[b-u9abzue9cs] {
  padding: var(--spacing-4xl) var(--ds-channels-gutter) var(--spacing-5xl);
}

.channels > *[b-u9abzue9cs] {
  width: min(var(--ds-channels-max), 100%);
  margin-inline: auto;
}

.channels[b-u9abzue9cs] {
  /* Gaps in the token set: no page-gutter or content-width scale. Both come
     from the design. */
  --ds-channels-gutter: clamp(28px, 4vw, 66px);
  --ds-channels-max: 1040px;
  --ds-channels-measure: 640px;
}

.channels__header[b-u9abzue9cs] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
}

.channels__heading[b-u9abzue9cs] { display: grid; gap: var(--spacing-sm); }

[b-u9abzue9cs] .channels__lede {
  max-width: var(--ds-channels-measure);
  color: var(--colors-text-muted);
}

.channels__list[b-u9abzue9cs] {
  display: grid;
  gap: var(--spacing-sm);
}

/* A setup flow gets the page to itself and sits higher up it, because it is a
   single task rather than a list to browse. */
/* Where a setup screen sits. On a large screen, where the designer likes it:
   176px down, as it always has. On a shorter window the space above gives way
   first, only as much as the screen needs, so a laptop sees the whole card and
   its button; a screen too long to fit anyway starts near the top. The page
   is the window's height and the space above is the one thing that shrinks. */
.channels--setup[b-u9abzue9cs] {
  /* Missing from the token set: the large-screen space above (176px), less
     the 32px that always stays. */
  --ds-channels-setup-lift: 144px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-none);
}

/* The screens never give way, only the space around them. They are other
   components, so this needs ::deep to reach them. */
.channels--setup[b-u9abzue9cs]  > * { flex-shrink: 0; }

.channels--setup[b-u9abzue9cs]::before {
  content: "";
  flex: 0 1 var(--ds-channels-setup-lift);
}

/* Room under the card, even when it runs past the window. It gives way
   before the space above does, so a large screen keeps its 176px. */
.channels--setup[b-u9abzue9cs]::after {
  content: "";
  flex: 0 100 var(--spacing-4xl);
  min-height: var(--spacing-lg);
}
/* /Components/Pages/Dashboard/Channels/ConnectingProgress.razor.rz.scp.css */
/* A centred, narrow column. There is nothing to do on this screen, so there is
   nothing else on it. */

.connecting[b-l5mg95xe9y] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-sm);
  width: min(var(--ds-connecting-width), 100%);
  margin-inline: auto;
  padding: var(--ds-connecting-pad);
  text-align: center;
  background: var(--colors-surface-card);
  border: var(--ds-connecting-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-connecting-shadow) var(--colors-surface-shadow);
}

.connecting[b-l5mg95xe9y] {
  /* Gaps in the token set: no column-width, control-size or motion scale. */
  --ds-connecting-width: var(--ds-setup-card-width);
  --ds-connecting-hairline: var(--ds-setup-card-hairline);
  --ds-connecting-pad: var(--ds-setup-card-pad);
  --ds-connecting-shadow: var(--ds-setup-card-shadow);
  --ds-connecting-mark: 72px;
  --ds-connecting-ring: 2px;
  --ds-connecting-pulse: 2400ms;
  --ds-connecting-pulse-2: 800ms;
  --ds-connecting-pulse-3: 1600ms;
}

/* Three rings leaving the mark. Slow enough to read as "working", not as
   "stuck"; silenced by the global reduced-motion block. */
.connecting__pulse[b-l5mg95xe9y] {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ds-connecting-mark);
  height: var(--ds-connecting-mark);
  margin-bottom: var(--spacing-md);
}

.connecting__mark[b-l5mg95xe9y] {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--colors-text-inverse);
  border-radius: var(--radius-radius-full);
}

.channel-whatsapp .connecting__mark[b-l5mg95xe9y] { background: #22a968; }
.channel-instagram .connecting__mark[b-l5mg95xe9y] { background: #c63886; }
.channel-facebook .connecting__mark[b-l5mg95xe9y] { background: #1877f2; }
.channel-x .connecting__mark[b-l5mg95xe9y] { background: var(--colors-text-primary); color: var(--colors-surface-card); }

.connecting__pulse i[b-l5mg95xe9y] {
  position: absolute;
  inset: 0;
  border: var(--ds-connecting-ring) solid var(--colors-accent-brand-border);
  border-radius: var(--radius-radius-full);
  opacity: 0;
  animation: connecting-pulse-b-l5mg95xe9y var(--ds-connecting-pulse) ease-out infinite;
}

.connecting__pulse i:nth-child(3)[b-l5mg95xe9y] { animation-delay: var(--ds-connecting-pulse-2); }
.connecting__pulse i:nth-child(4)[b-l5mg95xe9y] { animation-delay: var(--ds-connecting-pulse-3); }

[b-l5mg95xe9y] .connecting__eyebrow { color: var(--colors-text-subtle); }
[b-l5mg95xe9y] .connecting__lede { max-width: var(--ds-connecting-measure); color: var(--colors-text-muted); }

.connecting[b-l5mg95xe9y] { --ds-connecting-measure: 44ch; }

.connecting__steps[b-l5mg95xe9y] {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: start;
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.connecting__step[b-l5mg95xe9y] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  color: var(--colors-text-subtle);
}

.connecting__step.is-active[b-l5mg95xe9y] { color: var(--colors-text-primary); }
.connecting__step.is-done[b-l5mg95xe9y] { color: var(--colors-feedback-success-text); }

.connecting__tick[b-l5mg95xe9y] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-size-icon-md);
  height: var(--icon-size-icon-md);
  border: var(--ds-connecting-ring) solid currentColor;
  border-radius: var(--radius-radius-full);
  opacity: var(--ds-connecting-pending);
}

.connecting[b-l5mg95xe9y] { --ds-connecting-pending: 0.35; }

.connecting__step.is-active .connecting__tick[b-l5mg95xe9y],
.connecting__step.is-done .connecting__tick[b-l5mg95xe9y] { opacity: 1; }

.connecting__step.is-done .connecting__tick[b-l5mg95xe9y] {
  background: var(--colors-feedback-success-subtle);
}

@keyframes connecting-pulse-b-l5mg95xe9y {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
/* /Components/Pages/Dashboard/Channels/ConnectionSuccess.razor.rz.scp.css */
/* The same card as the test it replaces, so the result lands in place. */
.connected[b-07rijnroie] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-sm);
  width: min(var(--ds-connected-width), 100%);
  margin-inline: auto;
  padding: var(--ds-connected-pad);
  text-align: center;
  background: var(--colors-surface-card);
  border: var(--ds-connected-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-connected-shadow) var(--colors-surface-shadow);
}

.connected[b-07rijnroie] {
  /* Gaps in the token set: no page-width, control-size, border-width or
     motion scale. The mark matches the test card's. */
  --ds-connected-width: var(--ds-setup-card-width);
  --ds-connected-hairline: var(--ds-setup-card-hairline);
  --ds-connected-pad: var(--ds-setup-card-pad);
  --ds-connected-shadow: var(--ds-setup-card-shadow);
  --ds-connected-mark: 54px;
  --ds-connected-mark-radius: 17px;
  --ds-connected-badge: 24px;
  --ds-connected-badge-offset: -6px;
  --ds-connected-measure: 46ch;
  --ds-connected-glow: 28px;
  --ds-connected-enter: 320ms;
  --ds-connected-enter-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-connected-rise: 6px;
}

/* Focus is moved here by script so a screen reader hears the result; it is
   not a control, so it draws no focus ring. */
.connected:focus[b-07rijnroie] { outline: none; }

/* The words and buttons ease in where the test's were; the card itself
   stays put. */
.connected > *[b-07rijnroie] {
  animation: connected-enter-b-07rijnroie var(--ds-connected-enter) var(--ds-connected-enter-ease) both;
}

/* The tick lands on the channel's mark a moment after the words. */
.connected__badge[b-07rijnroie] {
  position: absolute;
  right: var(--ds-connected-badge-offset);
  bottom: var(--ds-connected-badge-offset);
  display: grid;
  place-items: center;
  width: var(--ds-connected-badge);
  height: var(--ds-connected-badge);
  color: var(--colors-feedback-success);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
  animation: connected-tick-b-07rijnroie var(--ds-connected-enter) var(--ds-connected-enter-ease) var(--ds-connected-enter) both;
}

@keyframes connected-enter-b-07rijnroie {
  from { opacity: 0; transform: translateY(var(--ds-connected-rise)); }
}

@keyframes connected-tick-b-07rijnroie {
  from { opacity: 0; transform: scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .connected > *[b-07rijnroie],
  .connected__badge[b-07rijnroie] { animation: none; }
}

.connected__mark[b-07rijnroie] {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ds-connected-mark);
  height: var(--ds-connected-mark);
  margin-bottom: var(--spacing-md);
  color: var(--colors-text-inverse);
  border-radius: var(--ds-connected-mark-radius);
}

/* The brands' own colours, as on the test card: third-party marks. */
.channel-whatsapp.connected .connected__mark[b-07rijnroie] {
  background: #22a968;
  box-shadow: 0 var(--spacing-sm) var(--ds-connected-glow) color-mix(in srgb, #22a968 23%, transparent);
}

.channel-instagram.connected .connected__mark[b-07rijnroie] {
  background: #c63886;
  box-shadow: 0 var(--spacing-sm) var(--ds-connected-glow) color-mix(in srgb, #c63886 23%, transparent);
}

.channel-facebook.connected .connected__mark[b-07rijnroie] {
  background: #1877f2;
  box-shadow: 0 var(--spacing-sm) var(--ds-connected-glow) color-mix(in srgb, #1877f2 23%, transparent);
}

/* X follows the text colour, so it stays visible in dark mode. */
.channel-x.connected .connected__mark[b-07rijnroie] { background: var(--colors-text-primary); color: var(--colors-surface-card); }

[b-07rijnroie] .connected__lede {
  max-width: var(--ds-connected-measure);
  color: var(--colors-text-muted);
}

.connected__lede strong[b-07rijnroie] { color: var(--colors-text-primary); }

/* Connected, with a caveat — a temporary token that will expire, usually.
   Worth saying now rather than when it breaks. */
.connected__note[b-07rijnroie] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  margin-top: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  color: var(--colors-feedback-warning-text);
  background: var(--colors-feedback-warning-subtle);
  border-radius: var(--radius-radius-xl);
}

.connected__actions[b-07rijnroie] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-top: var(--spacing-lg);
}
/* /Components/Pages/Dashboard/Channels/FacebookManualSetup.razor.rz.scp.css */
/* Facebook's manual setup, a step in the Channels flow. The guided card and
   the manual sections are Aurora's (GuidedSetup.razor.css and
   ManualConnection.razor.css), repeated here because a Blazor scoped
   stylesheet cannot reach another component's classes. */

.guided[b-x8lcpg5dzb] {
  display: grid;
  width: min(var(--ds-guided-width), 100%);
  margin-inline: auto;
  /* clip, not hidden: the same rounded corners, but not a scroll box of its
     own, so the footer can stay in view (below). */
  overflow: clip;
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-guided-shadow-blur) var(--colors-surface-shadow);
}

.guided[b-x8lcpg5dzb] {
  /* Gaps in the token set: no page-width, border-width or control-size scale. */
  --ds-guided-width: var(--ds-setup-card-width);
  --ds-guided-hairline: var(--ds-setup-card-hairline);
  --ds-guided-progress: 4px;
  --ds-guided-marker: 28px;
  --ds-guided-measure: 590px;
  --ds-guided-shadow-blur: var(--ds-setup-card-shadow);
  --ds-guided-body-pad: var(--ds-setup-card-pad);
  --ds-guided-body-pad-preflight: 43px 62px 72px;
  --ds-guided-title-gap: 34px;
  --ds-guided-step-gap: 30px;
  --ds-guided-marker-gap: 14px;
  --ds-guided-rule: 2px;
  /* The rule drops from just under the marker and runs down its centre:
     28px marker + 2px clearance, and (28 - 2) / 2 to centre a 2px line. */
  --ds-guided-rule-top: 30px;
  --ds-guided-rule-left: 13px;
  --ds-guided-link-height: 40px;
  --ds-guided-split: 1120px;
  --ds-guided-copy-min: 280px;
  --ds-guided-demo-min: 480px;
  --ds-guided-motion: 240ms;
}

.guided__header[b-x8lcpg5dzb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.guided__counter[b-x8lcpg5dzb] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: baseline;
  color: var(--colors-text-muted);
}

.guided__counter[b-x8lcpg5dzb]  strong { color: var(--colors-text-primary); }

.guided__progress[b-x8lcpg5dzb] {
  height: var(--ds-guided-progress);
  background: var(--colors-surface-muted);
}

.guided__progress i[b-x8lcpg5dzb] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  transition: width var(--ds-guided-motion) ease;
}

.guided__body[b-x8lcpg5dzb] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  padding: var(--ds-guided-body-pad);
}

[b-x8lcpg5dzb] .guided__eyebrow { color: var(--colors-text-subtle); }

[b-x8lcpg5dzb] .guided__lede {
  max-width: var(--ds-guided-measure);
  color: var(--colors-text-muted);
}

/* Numbered, because they happen in order on the provider screen and doing them
   out of order is how people end up on the wrong page. */
.guided__instructions[b-x8lcpg5dzb] {
  display: grid;
  gap: var(--spacing-none);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

/* A rule runs from each marker to the next, so three instructions read as one
   path rather than three unrelated rows. The last one has nothing to join. */
.guided__instructions li[b-x8lcpg5dzb] {
  position: relative;
  display: grid;
  grid-template-columns: var(--ds-guided-marker) minmax(0, 1fr);
  gap: var(--ds-guided-marker-gap);
  align-items: start;
  padding-bottom: var(--ds-guided-step-gap);
}

.guided__instructions li:last-child[b-x8lcpg5dzb] { padding-bottom: var(--spacing-none); }

.guided__instructions li:not(:last-child)[b-x8lcpg5dzb]::before {
  position: absolute;
  top: var(--ds-guided-rule-top);
  left: var(--ds-guided-rule-left);
  width: var(--ds-guided-rule);
  height: calc(100% - var(--ds-guided-rule-top));
  content: "";
  background: var(--colors-surface-border);
  border-radius: var(--ds-guided-rule);
}

[b-x8lcpg5dzb] .guided__marker {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-guided-marker);
  height: var(--ds-guided-marker);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

/* 2px holds a label to the line it heads. The link is a control, not another
   line of copy, so it stands off further. */
.guided__instruction[b-x8lcpg5dzb] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.guided__instruction .guided__link[b-x8lcpg5dzb] { margin-top: var(--spacing-sm); }
.guided__instruction[b-x8lcpg5dzb]  p { color: var(--colors-text-secondary); }
.guided__instruction[b-x8lcpg5dzb]  strong { color: var(--colors-text-primary); }

/* The one thing on the step that takes you out of the product, so it is drawn
   as a control with an edge rather than a tinted tag. */
.guided__link[b-x8lcpg5dzb] {
  display: inline-flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-self: start;
  width: max-content;
  height: var(--ds-guided-link-height);
  padding: var(--spacing-none) var(--spacing-lg);
  color: var(--colors-text-link);
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid color-mix(in srgb, var(--colors-text-link) 28%, transparent);
  border-radius: var(--radius-radius-full);
  text-decoration: none;
}

.guided__link:hover[b-x8lcpg5dzb] {
  color: var(--colors-text-link-hover);
  background: color-mix(in srgb, var(--colors-text-link) 7%, transparent);
  border-color: var(--colors-text-link);
}

.guided__aside[b-x8lcpg5dzb] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

/* A long setup: Save and exit stays in view at the window's foot. */
.guided__footer[b-x8lcpg5dzb] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-muted);
  border-top: var(--ds-guided-hairline) solid var(--colors-surface-border);
}


.manual[b-x8lcpg5dzb] {
  display: grid;
  gap: var(--ds-manual-gap);
  /* Gaps in the token set: no measure or fine spacing scale. */
  --ds-manual-intro-measure: 660px;
  --ds-manual-gap: 10px;
}

.manual__section[b-x8lcpg5dzb] {
  /* Keeps the section clear of the top edge when it is scrolled into view, so
     it reads as part of a card rather than jammed against the chrome. */
  scroll-margin-top: var(--ds-manual-scroll-margin);
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-manual-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.manual__section[b-x8lcpg5dzb] {
  /* Gaps in the token set: no border-width, control-size or opacity scale. */
  --ds-manual-hairline: 1px;
  --ds-manual-scroll-margin: 24px;
  --ds-manual-marker: 32px;
  --ds-manual-header-min: 74px;
  --ds-manual-header-pad: 13px 15px;
  --ds-manual-body-pad: 18px 20px 20px;
  --ds-manual-upcoming: 0.68;
  --ds-manual-title-gap: 3px;
  --ds-manual-token-gap: 9px;
  --ds-manual-token-inner: 10px;
  --ds-manual-token-icon: 28px;
  --ds-manual-token-tick: 18px;
  --ds-manual-token-min: 66px;
  --ds-manual-token-pad: 10px 13px;
  --ds-manual-token-radius: 13px;
  --ds-manual-token-motion: 140ms;
}

/* Current is where the flow is waiting — stated softly, as a tint of the
   brand mixed into the ordinary border. Open is where you are looking right
   now, and takes the full-strength border plus a ring. A section is usually
   both, and when it is, open wins. */
.manual__section.is-current[b-x8lcpg5dzb] {
  border-color: color-mix(in srgb, var(--colors-brand-primary) 35%, var(--colors-surface-border));
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) color-mix(in srgb, var(--colors-brand-primary) 7%, transparent);
}

.manual__section.is-open[b-x8lcpg5dzb] {
  border-color: var(--colors-brand-primary);
  box-shadow: 0 0 0 var(--ds-manual-hairline) var(--colors-brand-primary);
}

/* Not yet reachable, so it is dimmed rather than hidden — seeing what is
   coming is what makes three sections feel finite. */
.manual__section.is-upcoming > .manual__header[b-x8lcpg5dzb] { opacity: var(--ds-manual-upcoming); }

.manual__header[b-x8lcpg5dzb] {
  display: grid;
  grid-template-columns: var(--ds-manual-marker) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--ds-manual-header-min);
  padding: var(--ds-manual-header-pad);
}

.manual__marker[b-x8lcpg5dzb] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-manual-marker);
  height: var(--ds-manual-marker);
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

.manual__section.is-current .manual__marker[b-x8lcpg5dzb] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
}

.manual__section.is-complete .manual__marker[b-x8lcpg5dzb] {
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
}

.manual__titles[b-x8lcpg5dzb] { display: grid; gap: var(--ds-manual-title-gap); min-width: 0; }
.manual__titles[b-x8lcpg5dzb]  p { color: var(--colors-text-muted); }

.manual__status[b-x8lcpg5dzb] {
  flex: 0 0 auto;
  color: var(--colors-text-subtle);
}

.manual__reopen[b-x8lcpg5dzb] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex: 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-link);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.manual__reopen:hover[b-x8lcpg5dzb] { background: var(--colors-interaction-hover); }

.manual__body[b-x8lcpg5dzb] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--ds-manual-body-pad);
  border-top: var(--ds-manual-hairline) solid var(--colors-surface-border);
}

.manual__body > *[b-x8lcpg5dzb] { width: 100%; min-width: 0; }

.manual__body[b-x8lcpg5dzb]  p { color: var(--colors-text-secondary); }
.manual__body[b-x8lcpg5dzb]  strong { color: var(--colors-text-primary); }

.manual__checklist[b-x8lcpg5dzb],
.manual__ordered[b-x8lcpg5dzb] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.manual__checklist li[b-x8lcpg5dzb],
.manual__ordered li[b-x8lcpg5dzb] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  color: var(--colors-text-secondary);
}

.manual__fields[b-x8lcpg5dzb] {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

.manual__copy-values[b-x8lcpg5dzb] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
}

/* /Components/Pages/Dashboard/Channels/GuidedSetup.razor.rz.scp.css */
/* One card, held to a reading width. Someone is following this with Meta open
   in another tab, so the column has to be scannable in a glance sideways. */

.guided[b-dhz815ruuy] {
  display: grid;
  width: min(var(--ds-guided-width), 100%);
  margin-inline: auto;
  /* clip, not hidden: it rounds the corners the same, but is not a scroll
     box of its own, so the footer can stay in view (below). */
  overflow: clip;
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-guided-shadow-blur) var(--colors-surface-shadow);
}

.guided[b-dhz815ruuy] {
  /* Gaps in the token set: no page-width, border-width or control-size scale. */
  --ds-guided-width: var(--ds-setup-card-width);
  --ds-guided-hairline: var(--ds-setup-card-hairline);
  --ds-guided-progress: 4px;
  --ds-guided-marker: 28px;
  --ds-guided-measure: 590px;
  --ds-guided-shadow-blur: var(--ds-setup-card-shadow);
  --ds-guided-body-pad: var(--ds-setup-card-pad);
  --ds-guided-body-pad-preflight: 43px 62px 72px;
  --ds-guided-title-gap: 34px;
  --ds-guided-step-gap: 30px;
  --ds-guided-marker-gap: 14px;
  --ds-guided-rule: 2px;
  /* The rule drops from just under the marker and runs down its centre:
     28px marker + 2px clearance, and (28 - 2) / 2 to centre a 2px line. */
  --ds-guided-rule-top: 30px;
  --ds-guided-rule-left: 13px;
  --ds-guided-link-height: 40px;
  --ds-guided-split: 1120px;
  --ds-guided-copy-min: 280px;
  --ds-guided-demo-min: 480px;
  --ds-guided-motion: 240ms;
}

.guided__header[b-dhz815ruuy] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.guided__counter[b-dhz815ruuy] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: baseline;
  color: var(--colors-text-muted);
}

.guided__counter[b-dhz815ruuy]  strong { color: var(--colors-text-primary); }

.guided__progress[b-dhz815ruuy] {
  height: var(--ds-guided-progress);
  background: var(--colors-surface-muted);
}

.guided__progress i[b-dhz815ruuy] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  transition: width var(--ds-guided-motion) ease;
}

.guided__body[b-dhz815ruuy] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  padding: var(--ds-guided-body-pad);
}

/* The preflight ends on a card rather than a control, so it carries more room
   beneath it than a step does. */
.guided--preflight .guided__body[b-dhz815ruuy] { padding: var(--ds-guided-body-pad-preflight); }

[b-dhz815ruuy] .guided__eyebrow { color: var(--colors-text-subtle); }

[b-dhz815ruuy] .guided__lede {
  max-width: var(--ds-guided-measure);
  color: var(--colors-text-muted);
}

[b-dhz815ruuy] .guided__requirements-title {
  margin-top: var(--ds-guided-title-gap);
  color: var(--colors-text-primary);
}

.guided__requirements[b-dhz815ruuy] {
  display: grid;
  gap: var(--spacing-md);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.guided__requirements li[b-dhz815ruuy] {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}

/* Facebook blue, because this is telling you to go and get a Facebook
   account — the mark is the point. */
[b-dhz815ruuy] .guided__facebook { color: #1877f2; }

.guided__requirement-copy[b-dhz815ruuy] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.guided__requirement-copy[b-dhz815ruuy]  small { color: var(--colors-text-muted); }

/* Numbered, because they happen in order on the provider screen and doing them
   out of order is how people end up on the wrong page. */
.guided__instructions[b-dhz815ruuy] {
  display: grid;
  gap: var(--spacing-none);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

/* A rule runs from each marker to the next, so three instructions read as one
   path rather than three unrelated rows. The last one has nothing to join. */
.guided__instructions li[b-dhz815ruuy] {
  position: relative;
  display: grid;
  grid-template-columns: var(--ds-guided-marker) minmax(0, 1fr);
  gap: var(--ds-guided-marker-gap);
  align-items: start;
  padding-bottom: var(--ds-guided-step-gap);
}

.guided__instructions li:last-child[b-dhz815ruuy] { padding-bottom: var(--spacing-none); }

.guided__instructions li:not(:last-child)[b-dhz815ruuy]::before {
  position: absolute;
  top: var(--ds-guided-rule-top);
  left: var(--ds-guided-rule-left);
  width: var(--ds-guided-rule);
  height: calc(100% - var(--ds-guided-rule-top));
  content: "";
  background: var(--colors-surface-border);
  border-radius: var(--ds-guided-rule);
}

[b-dhz815ruuy] .guided__marker {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-guided-marker);
  height: var(--ds-guided-marker);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

/* 2px holds a label to the line it heads. The link is a control, not another
   line of copy, so it stands off further. */
.guided__instruction[b-dhz815ruuy] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.guided__instruction .guided__link[b-dhz815ruuy] { margin-top: var(--spacing-sm); }
.guided__instruction[b-dhz815ruuy]  p { color: var(--colors-text-secondary); }
.guided__instruction[b-dhz815ruuy]  strong { color: var(--colors-text-primary); }

/* The one thing on the step that takes you out of the product, so it is drawn
   as a control with an edge rather than a tinted tag. */
.guided__link[b-dhz815ruuy] {
  display: inline-flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-self: start;
  width: max-content;
  height: var(--ds-guided-link-height);
  padding: var(--spacing-none) var(--spacing-lg);
  color: var(--colors-text-link);
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid color-mix(in srgb, var(--colors-text-link) 28%, transparent);
  border-radius: var(--radius-radius-full);
  text-decoration: none;
}

.guided__link:hover[b-dhz815ruuy] {
  color: var(--colors-text-link-hover);
  background: color-mix(in srgb, var(--colors-text-link) 7%, transparent);
  border-color: var(--colors-text-link);
}

.guided__aside[b-dhz815ruuy] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

/* The drawing gets the full width of the card. It is 480px of detail at its
   narrowest, so squeezing it beside the copy would make it unreadable, which
   defeats the point of drawing it. */
.guided__demo[b-dhz815ruuy] { min-width: 0; }

/* On a window too short for the whole step, Back and Continue stay in view
   at its foot; where it fits, this changes nothing. */
.guided__footer[b-dhz815ruuy] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-muted);
  border-top: var(--ds-guided-hairline) solid var(--colors-surface-border);
}

/* ── The two-column option ────────────────────────────────────────────────
   Instructions are read once; the drawing is looked at repeatedly while the
   reader switches to Meta and back. Side by side keeps the two in one glance.

   It needs real width to work — the copy will not go below 280px and the
   drawing is 480px of detail at its narrowest, so the pair need ~800px of
   content before the drawing starts losing legibility. At the app's 1080px
   floor with the rail open there is only 762px, so below the 1180 rung the
   two stack in source order and the drawing sits under the copy it
   illustrates. 1180 is the narrowest breakpoint on the scale that clears it:
   it leaves 854px of content against the 798px the pair need. */
.guided__copy[b-dhz815ruuy] { display: grid; align-content: start; gap: var(--spacing-lg); min-width: 0; }

@media (min-width: 1180px) {
  .guided__split[b-dhz815ruuy] {
    display: grid;
    grid-template-columns:
      minmax(var(--ds-guided-copy-min), 0.78fr)
      minmax(var(--ds-guided-demo-min), 1.22fr);
    align-items: start;
    gap: var(--ds-guided-split-gap);
  }

  /* The drawing steps earn a wider card, because the drawing is the point of
     them. Every other step stays at the reading width. */
  .guided--split[b-dhz815ruuy] { width: min(var(--ds-guided-width-wide), 100%); }
  .guided--split .guided__body[b-dhz815ruuy] { padding: var(--ds-guided-body-pad-wide); }
}

.guided[b-dhz815ruuy] {
  /* Gaps in the token set: no column-gap, layout-width or page-padding scale.
     All three are the wide drawing step's own geometry. */
  --ds-guided-split-gap: 38px;
  --ds-guided-width-wide: 1060px;
  --ds-guided-body-pad-wide: 42px 48px 38px;
}

/* The connecting and test screens carry their own card when they are the whole
   page in the embedded flow. Here they are already inside one, so the frame
   comes off instead of nesting a card within a card. */
.guided__body[b-dhz815ruuy]  .connecting,
.guided__body[b-dhz815ruuy]  .connected,
.guided__body[b-dhz815ruuy]  .live-test {
  width: 100%;
  padding: var(--spacing-none);
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* /Components/Pages/Dashboard/Channels/InstagramManualSetup.razor.rz.scp.css */
/* Instagram's manual setup, a step in the Channels flow. The guided card and
   the manual sections are Aurora's (GuidedSetup.razor.css and
   ManualConnection.razor.css), repeated here because a Blazor scoped
   stylesheet cannot reach another component's classes. */

.guided[b-nyw10n6lab] {
  display: grid;
  width: min(var(--ds-guided-width), 100%);
  margin-inline: auto;
  /* clip, not hidden: the same rounded corners, but not a scroll box of its
     own, so the footer can stay in view (below). */
  overflow: clip;
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-guided-shadow-blur) var(--colors-surface-shadow);
}

.guided[b-nyw10n6lab] {
  /* Gaps in the token set: no page-width, border-width or control-size scale. */
  --ds-guided-width: var(--ds-setup-card-width);
  --ds-guided-hairline: var(--ds-setup-card-hairline);
  --ds-guided-progress: 4px;
  --ds-guided-marker: 28px;
  --ds-guided-measure: 590px;
  --ds-guided-shadow-blur: var(--ds-setup-card-shadow);
  --ds-guided-body-pad: var(--ds-setup-card-pad);
  --ds-guided-body-pad-preflight: 43px 62px 72px;
  --ds-guided-title-gap: 34px;
  --ds-guided-step-gap: 30px;
  --ds-guided-marker-gap: 14px;
  --ds-guided-rule: 2px;
  /* The rule drops from just under the marker and runs down its centre:
     28px marker + 2px clearance, and (28 - 2) / 2 to centre a 2px line. */
  --ds-guided-rule-top: 30px;
  --ds-guided-rule-left: 13px;
  --ds-guided-link-height: 40px;
  --ds-guided-split: 1120px;
  --ds-guided-copy-min: 280px;
  --ds-guided-demo-min: 480px;
  --ds-guided-motion: 240ms;
}

.guided__header[b-nyw10n6lab] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.guided__counter[b-nyw10n6lab] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: baseline;
  color: var(--colors-text-muted);
}

.guided__counter[b-nyw10n6lab]  strong { color: var(--colors-text-primary); }

.guided__progress[b-nyw10n6lab] {
  height: var(--ds-guided-progress);
  background: var(--colors-surface-muted);
}

.guided__progress i[b-nyw10n6lab] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  transition: width var(--ds-guided-motion) ease;
}

.guided__body[b-nyw10n6lab] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  padding: var(--ds-guided-body-pad);
}

[b-nyw10n6lab] .guided__eyebrow { color: var(--colors-text-subtle); }

[b-nyw10n6lab] .guided__lede {
  max-width: var(--ds-guided-measure);
  color: var(--colors-text-muted);
}

/* Numbered, because they happen in order on the provider screen and doing them
   out of order is how people end up on the wrong page. */
.guided__instructions[b-nyw10n6lab] {
  display: grid;
  gap: var(--spacing-none);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

/* A rule runs from each marker to the next, so three instructions read as one
   path rather than three unrelated rows. The last one has nothing to join. */
.guided__instructions li[b-nyw10n6lab] {
  position: relative;
  display: grid;
  grid-template-columns: var(--ds-guided-marker) minmax(0, 1fr);
  gap: var(--ds-guided-marker-gap);
  align-items: start;
  padding-bottom: var(--ds-guided-step-gap);
}

.guided__instructions li:last-child[b-nyw10n6lab] { padding-bottom: var(--spacing-none); }

.guided__instructions li:not(:last-child)[b-nyw10n6lab]::before {
  position: absolute;
  top: var(--ds-guided-rule-top);
  left: var(--ds-guided-rule-left);
  width: var(--ds-guided-rule);
  height: calc(100% - var(--ds-guided-rule-top));
  content: "";
  background: var(--colors-surface-border);
  border-radius: var(--ds-guided-rule);
}

[b-nyw10n6lab] .guided__marker {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-guided-marker);
  height: var(--ds-guided-marker);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

/* 2px holds a label to the line it heads. The link is a control, not another
   line of copy, so it stands off further. */
.guided__instruction[b-nyw10n6lab] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.guided__instruction .guided__link[b-nyw10n6lab] { margin-top: var(--spacing-sm); }
.guided__instruction[b-nyw10n6lab]  p { color: var(--colors-text-secondary); }
.guided__instruction[b-nyw10n6lab]  strong { color: var(--colors-text-primary); }

/* The one thing on the step that takes you out of the product, so it is drawn
   as a control with an edge rather than a tinted tag. */
.guided__link[b-nyw10n6lab] {
  display: inline-flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-self: start;
  width: max-content;
  height: var(--ds-guided-link-height);
  padding: var(--spacing-none) var(--spacing-lg);
  color: var(--colors-text-link);
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid color-mix(in srgb, var(--colors-text-link) 28%, transparent);
  border-radius: var(--radius-radius-full);
  text-decoration: none;
}

.guided__link:hover[b-nyw10n6lab] {
  color: var(--colors-text-link-hover);
  background: color-mix(in srgb, var(--colors-text-link) 7%, transparent);
  border-color: var(--colors-text-link);
}

.guided__aside[b-nyw10n6lab] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

/* A long setup: Save and exit stays in view at the window's foot. */
.guided__footer[b-nyw10n6lab] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-muted);
  border-top: var(--ds-guided-hairline) solid var(--colors-surface-border);
}


.manual[b-nyw10n6lab] {
  display: grid;
  gap: var(--ds-manual-gap);
  /* Gaps in the token set: no measure or fine spacing scale. */
  --ds-manual-intro-measure: 660px;
  --ds-manual-gap: 10px;
}

.manual__section[b-nyw10n6lab] {
  /* Keeps the section clear of the top edge when it is scrolled into view, so
     it reads as part of a card rather than jammed against the chrome. */
  scroll-margin-top: var(--ds-manual-scroll-margin);
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-manual-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.manual__section[b-nyw10n6lab] {
  /* Gaps in the token set: no border-width, control-size or opacity scale. */
  --ds-manual-hairline: 1px;
  --ds-manual-scroll-margin: 24px;
  --ds-manual-marker: 32px;
  --ds-manual-header-min: 74px;
  --ds-manual-header-pad: 13px 15px;
  --ds-manual-body-pad: 18px 20px 20px;
  --ds-manual-upcoming: 0.68;
  --ds-manual-title-gap: 3px;
  --ds-manual-token-gap: 9px;
  --ds-manual-token-inner: 10px;
  --ds-manual-token-icon: 28px;
  --ds-manual-token-tick: 18px;
  --ds-manual-token-min: 66px;
  --ds-manual-token-pad: 10px 13px;
  --ds-manual-token-radius: 13px;
  --ds-manual-token-motion: 140ms;
}

/* Current is where the flow is waiting — stated softly, as a tint of the
   brand mixed into the ordinary border. Open is where you are looking right
   now, and takes the full-strength border plus a ring. A section is usually
   both, and when it is, open wins. */
.manual__section.is-current[b-nyw10n6lab] {
  border-color: color-mix(in srgb, var(--colors-brand-primary) 35%, var(--colors-surface-border));
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) color-mix(in srgb, var(--colors-brand-primary) 7%, transparent);
}

.manual__section.is-open[b-nyw10n6lab] {
  border-color: var(--colors-brand-primary);
  box-shadow: 0 0 0 var(--ds-manual-hairline) var(--colors-brand-primary);
}

/* Not yet reachable, so it is dimmed rather than hidden — seeing what is
   coming is what makes three sections feel finite. */
.manual__section.is-upcoming > .manual__header[b-nyw10n6lab] { opacity: var(--ds-manual-upcoming); }

.manual__header[b-nyw10n6lab] {
  display: grid;
  grid-template-columns: var(--ds-manual-marker) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--ds-manual-header-min);
  padding: var(--ds-manual-header-pad);
}

.manual__marker[b-nyw10n6lab] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-manual-marker);
  height: var(--ds-manual-marker);
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

.manual__section.is-current .manual__marker[b-nyw10n6lab] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
}

.manual__section.is-complete .manual__marker[b-nyw10n6lab] {
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
}

.manual__titles[b-nyw10n6lab] { display: grid; gap: var(--ds-manual-title-gap); min-width: 0; }
.manual__titles[b-nyw10n6lab]  p { color: var(--colors-text-muted); }

.manual__status[b-nyw10n6lab] {
  flex: 0 0 auto;
  color: var(--colors-text-subtle);
}

.manual__reopen[b-nyw10n6lab] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex: 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-link);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.manual__reopen:hover[b-nyw10n6lab] { background: var(--colors-interaction-hover); }

.manual__body[b-nyw10n6lab] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--ds-manual-body-pad);
  border-top: var(--ds-manual-hairline) solid var(--colors-surface-border);
}

.manual__body > *[b-nyw10n6lab] { width: 100%; min-width: 0; }

.manual__body[b-nyw10n6lab]  p { color: var(--colors-text-secondary); }
.manual__body[b-nyw10n6lab]  strong { color: var(--colors-text-primary); }

.manual__checklist[b-nyw10n6lab],
.manual__ordered[b-nyw10n6lab] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.manual__checklist li[b-nyw10n6lab],
.manual__ordered li[b-nyw10n6lab] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  color: var(--colors-text-secondary);
}

.manual__fields[b-nyw10n6lab] {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

.manual__copy-values[b-nyw10n6lab] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
}

/* /Components/Pages/Dashboard/Channels/ManualConnection.razor.rz.scp.css */
/* An accordion where every finished section stays reopenable. Everything in
   here is typed into Meta by hand, so a wrong digit is likely and the fix has
   to be reachable without restarting the setup. */
[b-f060lctqqg] .manual__intro {
  max-width: var(--ds-manual-intro-measure);
  margin-bottom: var(--spacing-lg);
  color: var(--colors-text-muted);
}

.manual[b-f060lctqqg] {
  display: grid;
  gap: var(--ds-manual-gap);
  /* Gaps in the token set: no measure or fine spacing scale. */
  --ds-manual-intro-measure: 660px;
  --ds-manual-gap: 10px;
}

.manual__section[b-f060lctqqg] {
  /* Keeps the section clear of the top edge when it is scrolled into view, so
     it reads as part of a card rather than jammed against the chrome. */
  scroll-margin-top: var(--ds-manual-scroll-margin);
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-manual-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.manual__section[b-f060lctqqg] {
  /* Gaps in the token set: no border-width, control-size or opacity scale. */
  --ds-manual-hairline: 1px;
  --ds-manual-scroll-margin: 24px;
  --ds-manual-marker: 32px;
  --ds-manual-header-min: 74px;
  --ds-manual-header-pad: 13px 15px;
  --ds-manual-body-pad: 18px 20px 20px;
  --ds-manual-upcoming: 0.68;
  --ds-manual-title-gap: 3px;
  --ds-manual-token-gap: 9px;
  --ds-manual-token-inner: 10px;
  --ds-manual-token-icon: 28px;
  --ds-manual-token-tick: 18px;
  --ds-manual-token-min: 66px;
  --ds-manual-token-pad: 10px 13px;
  --ds-manual-token-radius: 13px;
  --ds-manual-token-motion: 140ms;
}

/* Current is where the flow is waiting — stated softly, as a tint of the
   brand mixed into the ordinary border. Open is where you are looking right
   now, and takes the full-strength border plus a ring. A section is usually
   both, and when it is, open wins. */
.manual__section.is-current[b-f060lctqqg] {
  border-color: color-mix(in srgb, var(--colors-brand-primary) 35%, var(--colors-surface-border));
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) color-mix(in srgb, var(--colors-brand-primary) 7%, transparent);
}

.manual__section.is-open[b-f060lctqqg] {
  border-color: var(--colors-brand-primary);
  box-shadow: 0 0 0 var(--ds-manual-hairline) var(--colors-brand-primary);
}

/* Not yet reachable, so it is dimmed rather than hidden — seeing what is
   coming is what makes three sections feel finite. */
.manual__section.is-upcoming > .manual__header[b-f060lctqqg] { opacity: var(--ds-manual-upcoming); }

.manual__header[b-f060lctqqg] {
  display: grid;
  grid-template-columns: var(--ds-manual-marker) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--ds-manual-header-min);
  padding: var(--ds-manual-header-pad);
}

.manual__marker[b-f060lctqqg] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-manual-marker);
  height: var(--ds-manual-marker);
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

.manual__section.is-current .manual__marker[b-f060lctqqg] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
}

.manual__section.is-complete .manual__marker[b-f060lctqqg] {
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
}

.manual__titles[b-f060lctqqg] { display: grid; gap: var(--ds-manual-title-gap); min-width: 0; }
.manual__titles[b-f060lctqqg]  p { color: var(--colors-text-muted); }

.manual__status[b-f060lctqqg] {
  flex: 0 0 auto;
  color: var(--colors-text-subtle);
}

.manual__reopen[b-f060lctqqg] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex: 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-link);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.manual__reopen:hover[b-f060lctqqg] { background: var(--colors-interaction-hover); }

.manual__body[b-f060lctqqg] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--ds-manual-body-pad);
  border-top: var(--ds-manual-hairline) solid var(--colors-surface-border);
}

.manual__body > *[b-f060lctqqg] { width: 100%; min-width: 0; }

.manual__body[b-f060lctqqg]  p { color: var(--colors-text-secondary); }
.manual__body[b-f060lctqqg]  strong { color: var(--colors-text-primary); }

.manual__checklist[b-f060lctqqg],
.manual__ordered[b-f060lctqqg] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.manual__checklist li[b-f060lctqqg],
.manual__ordered li[b-f060lctqqg] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  color: var(--colors-text-secondary);
}

.manual__checklist li[b-f060lctqqg] >  svg {
  flex: 0 0 auto;
  margin-top: var(--spacing-2xs);
  color: var(--colors-feedback-success-text);
}

[b-f060lctqqg] .manual__order-marker {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}

/* Permanent or temporary, as two cards rather than a dropdown: picking the
   temporary one is the single most expensive mistake available here, and it
   should not be one line in a list. */
/* Two columns, fixed. These are a pair of alternatives and they are read
   against each other, so they stay side by side; auto-fit let them collapse
   into one full-width row that read as two separate banners. */
.manual__token-type[b-f060lctqqg] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-manual-token-gap);
  width: 100%;
}

.manual__token-type[b-f060lctqqg]  .manual__token {
  display: grid;
  grid-template-columns: var(--ds-manual-token-icon) minmax(0, 1fr) var(--ds-manual-token-tick);
  gap: var(--ds-manual-token-inner);
  align-items: center;
  min-height: var(--ds-manual-token-min);
  padding: var(--ds-manual-token-pad);
  text-align: left;
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
  border: var(--ds-manual-hairline) solid var(--colors-surface-border);
  border-radius: var(--ds-manual-token-radius);
  cursor: pointer;
  transition:
    background var(--ds-manual-token-motion) ease,
    border-color var(--ds-manual-token-motion) ease;
}

.manual__token-type[b-f060lctqqg]  .manual__token:hover { background: var(--colors-interaction-hover); }

.manual__token-type[b-f060lctqqg]  .manual__token.is-selected {
  color: var(--colors-brand-primary);
  background: color-mix(in srgb, var(--colors-brand-primary) 5%, var(--colors-surface-card));
  border-color: color-mix(in srgb, var(--colors-brand-primary) 30%, var(--colors-surface-border));
}

.manual__token-copy[b-f060lctqqg] { display: grid; gap: var(--spacing-2xs); flex: 1; min-width: 0; }
.manual__token-copy[b-f060lctqqg]  small { color: var(--colors-text-muted); }

.manual__fields[b-f060lctqqg] {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

.manual__copy-values[b-f060lctqqg] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
}

.manual__help[b-f060lctqqg] {
  margin-top: var(--spacing-lg);
  text-align: center;
}

.manual__help a[b-f060lctqqg] { color: var(--colors-text-link); }

/* The tick sits in the layout whether or not it is showing, so choosing a
   token does not resize the pair beneath the cursor. */
.manual__token-tick[b-f060lctqqg] {
  display: grid;
  place-items: center;
  visibility: hidden;
  padding: var(--ds-manual-tick-pad);
  color: var(--colors-text-on-primary);
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
}

.manual__token-tick.is-shown[b-f060lctqqg] { visibility: visible; }

.manual__token-copy[b-f060lctqqg] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.manual__token-type[b-f060lctqqg]  .manual__token strong { color: var(--colors-text-primary); }
.manual__token-type[b-f060lctqqg]  .manual__token.is-selected strong { color: var(--colors-brand-primary); }

.manual__section[b-f060lctqqg] {
  /* Gap in the token set: no sub-4px spacing rung. */
  --ds-manual-tick-pad: 2px;
}
/* /Components/Pages/Dashboard/Channels/ManualSectionAside.razor.rz.scp.css */
/* Both controls are elements this component renders itself, so they carry its
   scope attribute and need no ::deep. Only the label inside them comes from
   Typography, and nothing here has to reach it. */

.aside__status[b-naykz40pww] {
  display: inline-flex;
  align-items: center;
  height: var(--ds-aside-height);
  padding: var(--spacing-none) var(--ds-aside-pad);
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
  white-space: nowrap;
}

.aside__status.is-current[b-naykz40pww] {
  color: var(--colors-brand-primary);
  background: var(--colors-interaction-selected);
}

.aside__status.is-complete[b-naykz40pww] {
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
}

/* A finished section offers a way back in. Outlined rather than filled, so it
   reads as secondary to whatever the open section is asking for. */


.aside__reopen[b-naykz40pww]  svg { flex: 0 0 auto; }

.aside__status[b-naykz40pww],
.aside__reopen[b-naykz40pww] {
  /* Gaps in the token set: no control-height or border-width scale. 25px is
     the pill height the design draws for both. */
  --ds-aside-height: 25px;
  --ds-aside-pad: 10px;
  --ds-aside-reopen-pad: 11px;
  --ds-aside-hairline: 1px;
}
/* /Components/Pages/Dashboard/Channels/MessageTest.razor.rz.scp.css */
/* The same shape as the connecting screen, because it is the same moment
   continued: one thing to do, nothing else on the page. */

.live-test[b-qhc0kbuh9c] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-sm);
  width: min(var(--ds-test-width), 100%);
  margin-inline: auto;
  padding: var(--ds-test-pad);
  text-align: center;
  background: var(--colors-surface-card);
  border: var(--ds-test-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-test-shadow) var(--colors-surface-shadow);
}

.live-test[b-qhc0kbuh9c] {
  /* Gaps in the token set: no column-width, control-size, border-width or
     motion scale. */
  --ds-test-width: var(--ds-setup-card-width);
  --ds-test-hairline: var(--ds-setup-card-hairline);
  --ds-test-pad: var(--ds-setup-card-pad);
  --ds-test-shadow: var(--ds-setup-card-shadow);
  --ds-test-mark: 54px;
  --ds-test-mark-radius: 17px;
  --ds-test-glow: 28px;
  --ds-test-measure: 46ch;
  --ds-test-dot: 10px;
  --ds-test-listen: 1400ms;
  --ds-test-ring: 9px;
}

.live-test__mark[b-qhc0kbuh9c] {
  display: grid;
  place-items: center;
  width: var(--ds-test-mark);
  height: var(--ds-test-mark);
  margin-bottom: var(--spacing-md);
  color: var(--colors-text-inverse);
  border-radius: var(--ds-test-mark-radius);
}

.channel-whatsapp.live-test .live-test__mark[b-qhc0kbuh9c] {
  background: #22a968;
  box-shadow: 0 var(--spacing-sm) var(--ds-test-glow) color-mix(in srgb, #22a968 23%, transparent);
}

.channel-instagram.live-test .live-test__mark[b-qhc0kbuh9c] {
  background: #c63886;
  box-shadow: 0 var(--spacing-sm) var(--ds-test-glow) color-mix(in srgb, #c63886 23%, transparent);
}

.channel-x.live-test .live-test__mark[b-qhc0kbuh9c] { background: var(--colors-text-primary); color: var(--colors-surface-card); }

.channel-facebook.live-test .live-test__mark[b-qhc0kbuh9c] {
  background: #1877f2;
  box-shadow: 0 var(--spacing-sm) var(--ds-test-glow) color-mix(in srgb, #1877f2 23%, transparent);
}

[b-qhc0kbuh9c] .live-test__eyebrow { color: var(--colors-text-subtle); }

[b-qhc0kbuh9c] .live-test__instruction {
  max-width: var(--ds-test-measure);
  color: var(--colors-text-muted);
}

.live-test__instruction[b-qhc0kbuh9c]  strong { color: var(--colors-text-primary); }

/* The status line. An amber dot breathes while the page waits for the
   person's message, and holds still while the check runs, because the button
   below carries the brand's loader and a view shows one animated loader at a
   time. Green is kept for the result. */
.live-test__status[b-qhc0kbuh9c] {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  width: 100%;
  margin: var(--spacing-lg) var(--spacing-none);
  padding: var(--spacing-lg);
  text-align: left;
  background: var(--colors-surface-muted);
  border: var(--ds-test-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.live-test__status i[b-qhc0kbuh9c] {
  flex: 0 0 auto;
  width: var(--ds-test-dot);
  height: var(--ds-test-dot);
  margin-top: var(--spacing-xs);
  background: var(--colors-accent-amber-solid);
  border-radius: var(--radius-radius-full);
  animation: live-test-waiting-b-qhc0kbuh9c var(--ds-test-listen) ease-in-out infinite;
}

.live-test__status i.is-checking[b-qhc0kbuh9c] { animation: none; }

/* No message yet: the line turns to the warning colours, so it reads as
   something to act on rather than more waiting. */
.live-test__status.is-missed[b-qhc0kbuh9c] {
  background: var(--colors-feedback-warning-subtle);
  border-color: var(--colors-feedback-warning-border);
}

.live-test__status i.is-missed[b-qhc0kbuh9c] {
  background: var(--colors-feedback-warning);
  animation: none;
}

.live-test__status-copy[b-qhc0kbuh9c] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.live-test__status-copy[b-qhc0kbuh9c]  small { color: var(--colors-text-muted); }

@keyframes live-test-waiting-b-qhc0kbuh9c {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colors-accent-amber-solid) 30%, transparent); }
  50% { box-shadow: 0 0 0 var(--ds-test-ring) color-mix(in srgb, var(--colors-accent-amber-solid) 0%, transparent); }
}

/* With motion switched off the words still say which state it is. */
@media (prefers-reduced-motion: reduce) {
  .live-test__status i[b-qhc0kbuh9c] { animation: none; }
}

/* The only thing to do on this screen, so it takes the full width rather than
   sitting as a small target under a centred column. */
[b-qhc0kbuh9c] .live-test__action { width: 100%; }
/* /Components/Pages/Dashboard/Channels/MetaApiSetupDemo.razor.rz.scp.css */
/* The Meta app dashboard and the Customize screen, drawn.
   ──────────────────────────────────────────────────────────────────────────
   Everything inside the window frame is a picture of another company's
   interface, so its colours are deliberately NOT design tokens. Tokenising
   them would mean Meta's console changes appearance whenever our brand does,
   which is exactly backwards: this has to keep looking like Meta so it is
   recognisable when the person switches tabs.

   The palette is repeated here rather than shared with MetaBrowserDemo on
   purpose. Each drawing owns the shades it needs, so retouching one screen
   cannot silently repaint another. */

.meta-api[b-mibw3qfkll] {
  /* Meta console chrome, allowlisted in brand-literals.json. Not tokens: this
     is a drawing of another product and has to keep looking like theirs. */
  --ds-meta-chrome: #f2f3f5;
  --ds-meta-chrome-edge: #dfe2e7;
  --ds-meta-frame: #d9dee7;
  --ds-meta-surface: #ffffff;
  --ds-meta-canvas: #f5f6f8;
  --ds-meta-rail: #fafbfc;
  --ds-meta-rail-edge: #dfe3e8;
  --ds-meta-line: #e5e8ec;
  --ds-meta-ink: #242b34;
  --ds-meta-ink-soft: #5f6772;
  --ds-meta-ink-mute: #858c96;
  --ds-meta-dot: #bdc3cc;
  --ds-meta-field: #f2f3f5;
  --ds-meta-field-edge: #dce1e8;
  --ds-meta-panel: #fafbfc;
  --ds-meta-panel-edge: #e0e3e7;
  --ds-meta-highlight: #eaf0f8;
  --ds-meta-highlight-edge: #b3c9e4;
  --ds-meta-blue: #4C77B9;
  --ds-meta-whatsapp: #22a968;

  /* Geometry and timing. No token scale describes a drawing of someone else's
     product, and ten seconds is what two screens need: long enough to read the
     WhatsApp row before the scenery changes under it. */
  --ds-meta-hairline: 1px;
  --ds-meta-loop: 10s;

  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.meta-api__window[b-mibw3qfkll] {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ds-meta-canvas);
  border: var(--ds-meta-hairline) solid var(--ds-meta-frame);
  border-radius: var(--radius-radius-xl);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) var(--colors-surface-shadow-diffuse);
}

/* ── Browser chrome ─────────────────────────────────────────────────────── */

.meta-api__toolbar[b-mibw3qfkll] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--ds-meta-toolbar);
  padding: var(--spacing-none) var(--spacing-md);
  background: var(--ds-meta-chrome);
  border-bottom: var(--ds-meta-hairline) solid var(--ds-meta-chrome-edge);
}

.meta-api[b-mibw3qfkll] {
  /* Toolbar metrics. No token describes a drawing of a browser window. */
  --ds-meta-toolbar: 30px;
  --ds-meta-dot-size: 6px;
  --ds-meta-url-inset: 34px;
}

.meta-api__toolbar > i[b-mibw3qfkll] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-api__toolbar[b-mibw3qfkll] >  span {
  min-width: 0;
  margin-left: var(--spacing-xs);
  padding: var(--spacing-xs) var(--ds-meta-url-inset);
  overflow: hidden;
  color: var(--ds-meta-ink-mute);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-full);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: a drawing of another product's chrome, not our type scale */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Both scenes ────────────────────────────────────────────────────────── */

.meta-api__scene[b-mibw3qfkll] {
  min-height: var(--ds-meta-scene-min);
  color: var(--ds-meta-ink);
  background: var(--ds-meta-canvas);
}

.meta-api[b-mibw3qfkll] {
  /* The dashboard sets the window's height; the Customize screen is stacked on
     top of it absolutely, so it needs the same floor or the frame would
     collapse the moment the first scene fades out. */
  --ds-meta-scene-min: 300px;
}

/* ── Scene one: the app dashboard ───────────────────────────────────────── */

.meta-api__scene--dashboard[b-mibw3qfkll] {
  display: grid;
  grid-template-columns: var(--ds-meta-rail-width) minmax(0, 1fr);
  animation: meta-api-dashboard-b-mibw3qfkll var(--ds-meta-loop) ease-in-out infinite;
}

.meta-api[b-mibw3qfkll] {
  /* Rail and row metrics, measured off Meta's console. */
  --ds-meta-rail-width: 132px;
  --ds-meta-row: 27px;
}

.meta-api__scene--dashboard > aside[b-mibw3qfkll] {
  display: grid;
  align-content: start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-sm);
  background: var(--ds-meta-rail);
  border-right: var(--ds-meta-hairline) solid var(--ds-meta-rail-edge);
}

.meta-api__scene--dashboard > aside > *[b-mibw3qfkll] {
  min-height: var(--ds-meta-row);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--ds-meta-ink-soft);
  border: var(--ds-meta-hairline) solid transparent;
  border-radius: var(--radius-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-api__scene--dashboard > aside strong[b-mibw3qfkll] {
  overflow: hidden;
  color: var(--ds-meta-ink);
  background: var(--ds-meta-surface);
  border-color: var(--ds-meta-panel-edge);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meta-api__scene--dashboard > aside b[b-mibw3qfkll] {
  color: var(--ds-meta-blue);
  background: var(--ds-meta-highlight);
  border-color: var(--ds-meta-highlight-edge);
}

.meta-api__scene--dashboard > section[b-mibw3qfkll] { padding: var(--spacing-lg); }

.meta-api__scene--dashboard h2[b-mibw3qfkll] {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md);
  font-size: var(--typography-size-text-base); /* text-style-exempt: as above */
}

.meta-api__scene--dashboard section > div[b-mibw3qfkll] {
  padding: var(--spacing-md);
  background: var(--ds-meta-surface);
  border: var(--ds-meta-hairline) solid var(--ds-meta-rail-edge);
  border-radius: var(--radius-radius-md);
}

.meta-api__scene--dashboard h3[b-mibw3qfkll] {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xs);
  font-size: var(--typography-size-text-xs); /* text-style-exempt: as above */
}

.meta-api__scene--dashboard section p[b-mibw3qfkll] {
  display: grid;
  grid-template-columns: var(--ds-meta-marker) minmax(0, 1fr) var(--ds-meta-chevron);
  align-items: center;
  min-height: var(--ds-meta-list-row);
  margin: var(--spacing-none);
  color: var(--ds-meta-ink-soft);
  border-top: var(--ds-meta-hairline) solid var(--ds-meta-line);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-api[b-mibw3qfkll] {
  /* The checklist's three columns: status marker, label, chevron. The marker
     column is sized for the tick badge, the wider of the two markers, so the
     labels stay on one left edge whether a row is done or not. */
  --ds-meta-marker: 20px;
  --ds-meta-chevron: 10px;
  --ds-meta-list-row: 42px;
  --ds-meta-bullet: 10px;
}

.meta-api__scene--dashboard section p:first-of-type[b-mibw3qfkll] { border-top: 0; }

/* An unfinished task is an empty ring. Only the WhatsApp row is drawn as done,
   because that is the one row the reader is being sent to. */
.meta-api__scene--dashboard section p:not(.meta-api__whatsapp-row)[b-mibw3qfkll]::before {
  width: var(--ds-meta-bullet);
  height: var(--ds-meta-bullet);
  content: "";
  border: var(--ds-meta-hairline) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-api__scene--dashboard section p i[b-mibw3qfkll] {
  justify-self: end;
  font-style: normal;
  font-size: var(--typography-size-text-base); /* text-style-exempt: as above */
}

/* Declared after the generic row so it simply wins on order. The React source
   needed !important here; nothing about the colour was ever that urgent. */
.meta-api__whatsapp-row[b-mibw3qfkll] {
  color: var(--ds-meta-ink);
  animation: meta-api-whatsapp-row-b-mibw3qfkll var(--ds-meta-loop) ease-in-out infinite;
}

.meta-api__whatsapp-row[b-mibw3qfkll] >  svg {
  padding: var(--spacing-2xs);
  color: var(--ds-meta-surface);
  background: var(--ds-meta-whatsapp);
  border-radius: var(--radius-radius-full);
}

/* ── Scene two: Customize use case ──────────────────────────────────────── */

.meta-api__scene--customize[b-mibw3qfkll] {
  position: absolute;
  z-index: 2;
  inset: var(--ds-meta-scene-top) 0 0;
  min-height: var(--ds-meta-scene-min);
  padding: var(--spacing-lg);
  opacity: 0;
  animation: meta-api-customize-b-mibw3qfkll var(--ds-meta-loop) ease-in-out infinite;
}

.meta-api[b-mibw3qfkll] {
  /* It starts below the browser chrome, which is never covered: the reader has
     to keep seeing this is the same browser window, not a second one. */
  --ds-meta-scene-top: 29px;
  /* How far it drifts in from — small enough to read as a page settling rather
     than as a slide transition between two unrelated things. */
  --ds-meta-slide: 8px;
}

.meta-api__scene--customize > header[b-mibw3qfkll] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--ds-meta-ink-soft);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-api__scene--customize > header i[b-mibw3qfkll] { font-style: normal; }

.meta-api__scene--customize > h2[b-mibw3qfkll] {
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-2xs);
  font-size: var(--typography-size-text-base); /* text-style-exempt: as above */
}

.meta-api__scene--customize > p[b-mibw3qfkll] {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md);
  color: var(--ds-meta-ink-mute);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-api__scene--customize > div[b-mibw3qfkll] {
  display: grid;
  grid-template-columns: var(--ds-meta-menu-width) minmax(0, 1fr);
  min-height: var(--ds-meta-panel-min);
  overflow: hidden;
  background: var(--ds-meta-surface);
  border: var(--ds-meta-hairline) solid var(--ds-meta-rail-edge);
  border-radius: var(--radius-radius-md);
}

.meta-api[b-mibw3qfkll] {
  /* Wide enough to hold "Tech Provider onboarding" unwrapped. The neighbours
     are what make API Setup findable, so none of them may be clipped. */
  --ds-meta-menu-width: 162px;
  --ds-meta-panel-min: 205px;
}

.meta-api__scene--customize aside[b-mibw3qfkll] {
  display: grid;
  align-content: start;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-right: var(--ds-meta-hairline) solid var(--ds-meta-rail-edge);
}

.meta-api__scene--customize aside > *[b-mibw3qfkll] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: var(--ds-meta-row);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--ds-meta-ink-soft);
  border: var(--ds-meta-hairline) solid transparent;
  border-radius: var(--radius-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-api__scene--customize aside strong[b-mibw3qfkll] {
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-sm);
  color: var(--ds-meta-ink);
  border-bottom: var(--ds-meta-hairline) solid var(--ds-meta-line);
  border-radius: 0;
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
  white-space: nowrap;
}

.meta-api__menu[b-mibw3qfkll] {
  color: var(--ds-meta-blue);
  animation: meta-api-menu-b-mibw3qfkll var(--ds-meta-loop) ease-in-out infinite;
}

.meta-api__scene--customize section[b-mibw3qfkll] { padding: var(--spacing-lg); }

.meta-api__scene--customize section h3[b-mibw3qfkll] {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
  font-size: var(--typography-size-text-xs); /* text-style-exempt: as above */
}

/* Field and button share a row rather than overlapping. In the React original
   the button sat absolutely positioned over the field, which read as a single
   control and hid the box the token actually lands in. */
.meta-api__token[b-mibw3qfkll] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.meta-api[b-mibw3qfkll] {
  /* Meta's own control height. Nothing on our scale is 34px. */
  --ds-meta-control: 34px;
}

.meta-api__token[b-mibw3qfkll] >  span {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--ds-meta-control);
  background: var(--ds-meta-field);
  border: var(--ds-meta-hairline) solid var(--ds-meta-field-edge);
  border-radius: var(--radius-radius-sm);
}

.meta-api__token > button[b-mibw3qfkll] {
  flex: 0 0 auto;
  height: var(--ds-meta-control);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--ds-meta-surface);
  background: var(--ds-meta-blue);
  border: 0;
  border-radius: var(--radius-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-semibold); /* text-style-exempt: as above */
  white-space: nowrap;
}

.meta-api__scene--customize article[b-mibw3qfkll] {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--ds-meta-panel);
  border: var(--ds-meta-hairline) solid var(--ds-meta-panel-edge);
  border-radius: var(--radius-radius-sm);
}

.meta-api__scene--customize article strong[b-mibw3qfkll] {
  font-size: var(--typography-size-text-xs); /* text-style-exempt: as above */
}

.meta-api__scene--customize article p[b-mibw3qfkll] {
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none);
  color: var(--ds-meta-ink-mute);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

/* ── The walk ───────────────────────────────────────────────────────────────
   The tip is parked on the WhatsApp row, so every other position below is a
   measured gap from there rather than an absolute coordinate.

   It hides across the scene change instead of sliding, because the page
   underneath it has been replaced and a pointer gliding over a cross-fade
   belongs to neither screen. On the Customize screen it re-enters at the top
   of the menu and walks down to API Setup, so the reader watches the choice
   being made instead of finding it already made. */

.meta-api__cursor[b-mibw3qfkll] {
  position: absolute;
  z-index: 4;
  top: var(--ds-meta-cursor-top);
  right: var(--ds-meta-cursor-right);
  width: var(--ds-meta-cursor-w);
  height: var(--ds-meta-cursor-h);
  background: var(--ds-meta-ink);
  clip-path: polygon(0 0, 100% 67%, 56% 72%, 42% 100%);
  animation: meta-api-cursor-b-mibw3qfkll var(--ds-meta-loop) ease-in-out infinite;
}

.meta-api[b-mibw3qfkll] {
  /* Where the pointer rests, measured against the drawing. */
  --ds-meta-cursor-top: 221px;
  --ds-meta-cursor-right: 203px;
  --ds-meta-cursor-w: 13px;
  --ds-meta-cursor-h: 18px;
  /* Off-target, where it waits at either end of the loop. */
  --ds-meta-park-x: 26px;
  --ds-meta-park-y: -16px;
  /* Top of the Customize menu, then down its length to API Setup. */
  --ds-meta-menu-x: -146.7px;
  --ds-meta-menu-y: -129.9px;
  --ds-meta-walk-x: -237.1px;
  --ds-meta-walk-y: -76.4px;
  --ds-meta-target-y: 20.6px;
}

/* ── Our caption ────────────────────────────────────────────────────────── */

.meta-api__caption[b-mibw3qfkll] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  color: var(--colors-text-muted);
}

.meta-api__dot[b-mibw3qfkll] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-blue);
  border-radius: var(--radius-radius-full);
}



/* Every track returns to its starting state before 100%, so the loop restarts
   without a visible cut. */

@keyframes meta-api-whatsapp-row-b-mibw3qfkll {
  0%, 7% { background: transparent; }
  13%, 38% { background: var(--ds-meta-highlight); }
  44%, 100% { background: transparent; }
}

@keyframes meta-api-dashboard-b-mibw3qfkll {
  0%, 38% { opacity: 1; }
  45%, 90% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

@keyframes meta-api-customize-b-mibw3qfkll {
  0%, 42% { opacity: 0; transform: translateX(var(--ds-meta-slide)); }
  50%, 90% { opacity: 1; transform: translateX(0); }
  96%, 100% { opacity: 0; transform: translateX(var(--ds-meta-slide)); }
}

@keyframes meta-api-menu-b-mibw3qfkll {
  0%, 58% { background: transparent; border-color: transparent; }
  65%, 90% { background: var(--ds-meta-highlight); border-color: var(--ds-meta-highlight-edge); }
  96%, 100% { background: transparent; border-color: transparent; }
}

@keyframes meta-api-cursor-b-mibw3qfkll {
  0% { opacity: 1; transform: translate(var(--ds-meta-park-x), var(--ds-meta-park-y)); }
  8%, 38% { opacity: 1; transform: translate(0, 0); }
  44% { opacity: 0; transform: translate(0, 0); }
  48% { opacity: 0; transform: translate(var(--ds-meta-menu-x), var(--ds-meta-menu-y)); }
  52% { opacity: 1; transform: translate(var(--ds-meta-menu-x), var(--ds-meta-menu-y)); }
  58% { opacity: 1; transform: translate(var(--ds-meta-walk-x), var(--ds-meta-walk-y)); }
  64%, 90% { opacity: 1; transform: translate(var(--ds-meta-walk-x), var(--ds-meta-target-y)); }
  96%, 100% { opacity: 0; transform: translate(var(--ds-meta-park-x), var(--ds-meta-park-y)); }
}

/* Stopped, the drawing still has to teach — and with two scenes there is a
   choice to make, because a cross-fade held still is only two screens printed
   on top of each other. It settles on the second: the pointer goes, the
   dashboard drops out, and the Customize screen stands alone with API Setup
   highlighted. That is the end state of the walk, and the answer the reader
   came for. The dashboard keeps its space in the layout rather than being
   removed, because the Customize screen is stacked on it and would otherwise
   have no window left to sit in. */
@media (prefers-reduced-motion: reduce) {
  .meta-api__scene--dashboard[b-mibw3qfkll],
  .meta-api__scene--customize[b-mibw3qfkll],
  .meta-api__whatsapp-row[b-mibw3qfkll],
  .meta-api__menu[b-mibw3qfkll],
  .meta-api__cursor[b-mibw3qfkll] { animation: none; }

  .meta-api__scene--dashboard[b-mibw3qfkll] { opacity: 0; }

  .meta-api__scene--customize[b-mibw3qfkll] { opacity: 1; transform: none; }

  .meta-api__menu[b-mibw3qfkll] {
    background: var(--ds-meta-highlight);
    border-color: var(--ds-meta-highlight-edge);
  }

  .meta-api__cursor[b-mibw3qfkll] { display: none; }
}
/* /Components/Pages/Dashboard/Channels/MetaBrowserDemo.razor.rz.scp.css */
/* Meta Business Settings, drawn.
   ──────────────────────────────────────────────────────────────────────────
   Everything inside the window frame is a picture of another company's
   interface, so its colours are deliberately NOT design tokens. Tokenising
   them would mean Meta's console changes appearance whenever our brand does,
   which is exactly backwards: this has to keep looking like Meta so it is
   recognisable when the person switches tabs.

   They are collected here as one palette rather than scattered through the
   file, so the boundary between "our product" and "a drawing of theirs" is a
   single block you can read. */

.meta-demo[b-6vkg8rbitq] {
  /* Meta console chrome, allowlisted in brand-literals.json. Not tokens: this
     is a drawing of another product and has to keep looking like theirs. */
  --ds-meta-chrome: #f2f3f5;
  --ds-meta-chrome-edge: #dfe2e7;
  --ds-meta-frame: #d9dee7;
  --ds-meta-surface: #ffffff;
  --ds-meta-rail: #f5f6f8;
  --ds-meta-rail-edge: #dfe3e8;
  --ds-meta-line: #e5e8ec;
  --ds-meta-ink: #242b34;
  --ds-meta-ink-soft: #5f6772;
  --ds-meta-ink-mute: #858c96;
  --ds-meta-dot: #bdc3cc;
  --ds-meta-placeholder: #e2e5e9;
  --ds-meta-field: #fafbfc;
  --ds-meta-field-edge: #dce1e8;
  --ds-meta-empty: #eef0f2;
  --ds-meta-empty-edge: #e0e3e7;
  --ds-meta-bar: #dfe3e7;
  --ds-meta-bar-accent: #b8ddd5;
  --ds-meta-highlight: #eaf0f8;
  --ds-meta-highlight-edge: #b3c9e4;

  /* Geometry and timing. No token scale describes a drawing of someone
     else's product. */
  --ds-meta-radius: 16px;
  --ds-meta-radius-sm: 6px;
  --ds-meta-hairline: 1px;
  --ds-meta-loop: 6s;
  --ds-meta-rail-width: 150px;

  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.meta-demo__window[b-6vkg8rbitq] {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ds-meta-surface);
  border: var(--ds-meta-hairline) solid var(--ds-meta-frame);
  border-radius: var(--ds-meta-radius);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) var(--colors-surface-shadow-diffuse);
}

.meta-demo__toolbar[b-6vkg8rbitq] {
  display: flex;
  align-items: center;
  gap: var(--ds-art-toolbar-gap);
  height: var(--ds-meta-toolbar);
  padding: var(--ds-art-toolbar-pad);
  background: var(--ds-meta-chrome);
  border-bottom: var(--ds-meta-hairline) solid var(--ds-meta-chrome-edge);
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-toolbar: 30px; --ds-meta-dot-size: 6px; }

.meta-demo__toolbar > i[b-6vkg8rbitq] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-demo__toolbar[b-6vkg8rbitq] >  span {
  min-width: 0;
  margin-left: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-3xl);
  overflow: hidden;
  color: var(--ds-meta-ink-mute);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-full);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: this is a drawing of another product's chrome, not our type scale */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meta-demo__productbar[b-6vkg8rbitq] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
  height: var(--ds-meta-productbar);
  padding: var(--ds-art-productbar-pad);
  border-bottom: var(--ds-meta-hairline) solid var(--ds-meta-line);
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-productbar: 45px; --ds-meta-avatar: 21px; }

.meta-demo__productbar[b-6vkg8rbitq] >  span {
  color: var(--ds-meta-ink-soft);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  text-align: right;
}

.meta-demo__productbar > i[b-6vkg8rbitq] {
  width: var(--ds-meta-avatar);
  height: var(--ds-meta-avatar);
  background: var(--ds-meta-placeholder);
  border-radius: var(--radius-radius-full);
}

.meta-demo__workspace[b-6vkg8rbitq] {
  display: grid;
  grid-template-columns: var(--ds-meta-rail-width) minmax(0, 1fr);
  min-height: var(--ds-meta-workspace);
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-workspace: 280px; }

.meta-demo__workspace nav[b-6vkg8rbitq] {
  display: grid;
  align-content: start;
  gap: var(--ds-art-nav-gap);
  padding: var(--ds-art-nav-pad);
  background: var(--ds-meta-rail);
  border-right: var(--ds-meta-hairline) solid var(--ds-meta-rail-edge);
}

.meta-demo__workspace nav small[b-6vkg8rbitq] {
  margin: var(--ds-art-nav-label);
  color: var(--ds-meta-ink-soft);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
}

.meta-demo__workspace nav[b-6vkg8rbitq] >  span {
  display: flex;
  align-items: center;
  min-height: var(--ds-meta-row);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--ds-meta-ink-soft);
  border-radius: var(--ds-meta-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-semibold); /* text-style-exempt: as above */
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-row: 27px; --ds-meta-row-sub: 24px; }

.meta-demo__group[b-6vkg8rbitq] { display: grid; gap: var(--spacing-2xs); }

.meta-demo__group > strong[b-6vkg8rbitq] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: var(--ds-meta-row);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--ds-meta-ink);
  border: var(--ds-meta-hairline) solid transparent;
  border-radius: var(--ds-meta-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-demo__group > strong > i[b-6vkg8rbitq] {
  color: var(--ds-meta-ink-soft);
  font-style: normal;
}

.meta-demo__group > div[b-6vkg8rbitq] {
  display: grid;
  gap: var(--spacing-2xs);
  padding-left: var(--spacing-xl);
}

.meta-demo__group > div[b-6vkg8rbitq] >  span {
  display: flex;
  align-items: center;
  min-height: var(--ds-meta-row-sub);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--ds-meta-ink-soft);
  border: var(--ds-meta-hairline) solid transparent;
  border-radius: var(--ds-meta-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-demo__workspace section[b-6vkg8rbitq] {
  min-width: 0;
  padding: var(--ds-art-section-pad);
  background: var(--ds-meta-surface);
}

.meta-demo__workspace section header[b-6vkg8rbitq] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-art-section-gap);
}

.meta-demo__workspace section header > strong[b-6vkg8rbitq] {
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-base); /* text-style-exempt: as above */
}

.meta-demo__workspace section header > div[b-6vkg8rbitq] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.meta-demo__workspace section header > div > i[b-6vkg8rbitq] {
  width: var(--ds-meta-search);
  height: var(--ds-meta-control);
  background: var(--ds-meta-field);
  border: var(--ds-meta-hairline) solid var(--ds-meta-field-edge);
  border-radius: var(--radius-radius-xs);
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-search: 104px; --ds-meta-control: 26px; --ds-meta-button: 28px; }

/* Meta's own blue, allowlisted in brand-literals.json. */
.meta-demo__workspace section button[b-6vkg8rbitq] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--ds-meta-button);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--ds-meta-surface);
  background: #4C77B9;
  border: 0;
  border-radius: var(--radius-radius-xs);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
  animation: meta-highlight-create-b-6vkg8rbitq var(--ds-meta-loop) ease-in-out infinite;
}

.meta-demo__empty[b-6vkg8rbitq] {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: var(--ds-meta-empty-height);
  text-align: center;
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-empty-height: 220px; --ds-meta-thumb-w: 84px; --ds-meta-thumb-h: 58px; }

.meta-demo__empty > div[b-6vkg8rbitq] {
  position: relative;
  width: var(--ds-meta-thumb-w);
  height: var(--ds-meta-thumb-h);
  margin-bottom: var(--spacing-md);
  background: var(--ds-meta-empty);
  border: var(--ds-meta-hairline) solid var(--ds-meta-empty-edge);
  border-radius: var(--radius-radius-xs);
}

.meta-demo__empty > div i[b-6vkg8rbitq] {
  position: absolute;
  bottom: var(--spacing-sm);
  width: var(--ds-meta-bar-width);
  background: var(--ds-meta-bar);
  border-radius: var(--radius-radius-xs) var(--radius-radius-xs) 0 0;
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-bar-width: 18px; }

.meta-demo__empty > div i:nth-child(1)[b-6vkg8rbitq] { left: var(--spacing-md); height: var(--icon-size-icon-lg); }
.meta-demo__empty > div i:nth-child(2)[b-6vkg8rbitq] { left: var(--spacing-3xl); height: var(--spacing-3xl); background: var(--ds-meta-bar-accent); }
.meta-demo__empty > div i:nth-child(3)[b-6vkg8rbitq] { right: var(--spacing-md); height: var(--spacing-xl); }

.meta-demo__empty > strong[b-6vkg8rbitq] {
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-demo__empty[b-6vkg8rbitq] >  span {
  max-width: var(--ds-meta-empty-measure);
  margin-top: var(--spacing-xs);
  color: var(--ds-meta-ink-mute);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-demo[b-6vkg8rbitq] { --ds-meta-empty-measure: 190px; }

/* ── The walk ─────────────────────────────────────────────────────────────
   Accounts opens, Apps highlights, Add pulses. One six-second loop, so the
   three beats keep time with the cursor crossing the window. */

.meta-demo__accounts[b-6vkg8rbitq] { animation: meta-highlight-accounts-b-6vkg8rbitq var(--ds-meta-loop) ease-in-out infinite; }
.meta-demo__apps[b-6vkg8rbitq] { animation: meta-highlight-apps-b-6vkg8rbitq var(--ds-meta-loop) ease-in-out infinite; }

.meta-demo__cursor[b-6vkg8rbitq] {
  position: absolute;
  z-index: 3;
  top: var(--ds-meta-cursor-top);
  left: var(--ds-meta-cursor-left);
  width: var(--ds-meta-cursor-w);
  height: var(--ds-meta-cursor-h);
  background: var(--ds-meta-ink);
  clip-path: polygon(0 0, 100% 67%, 56% 72%, 42% 100%);
  animation: meta-demo-cursor-b-6vkg8rbitq var(--ds-meta-loop) ease-in-out infinite;
}

.meta-demo[b-6vkg8rbitq] {
  /* Where the pointer starts, measured against the drawing. */
  --ds-meta-cursor-top: 184px;
  --ds-meta-cursor-left: 62px;
  --ds-meta-cursor-w: 13px;
  --ds-meta-cursor-h: 18px;
  /* Where the cursor travels: down into the Accounts submenu, then across to
     the Add button. Measured against the drawing, not a spacing scale. */
  --ds-meta-walk-x1: 24px;
  --ds-meta-walk-y1: 86px;
  --ds-meta-walk-x2: 444px;
  --ds-meta-walk-y2: -76px;
}

.meta-demo__caption[b-6vkg8rbitq] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  color: var(--colors-text-muted);
}

.meta-demo__dot[b-6vkg8rbitq] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: #4C77B9;
  border-radius: var(--radius-radius-full);
}



@keyframes meta-highlight-accounts-b-6vkg8rbitq {
  0%, 24% {
    color: #4C77B9;
    background: var(--ds-meta-highlight);
    border-color: var(--ds-meta-highlight-edge);
  }
  32%, 100% {
    color: var(--ds-meta-ink);
    background: transparent;
    border-color: transparent;
  }
}

@keyframes meta-highlight-apps-b-6vkg8rbitq {
  0%, 28% {
    color: var(--ds-meta-ink-soft);
    background: transparent;
    border-color: transparent;
  }
  34%, 100% {
    color: #4C77B9;
    background: var(--ds-meta-highlight);
    border-color: var(--ds-meta-highlight-edge);
  }
}

@keyframes meta-highlight-create-b-6vkg8rbitq {
  0%, 64%, 92%, 100% { transform: scale(1); }
  70%, 88% { transform: scale(1.04); }
}

@keyframes meta-demo-cursor-b-6vkg8rbitq {
  0%, 22% { opacity: 1; transform: translate(0, 0); }
  34%, 56% { opacity: 1; transform: translate(var(--ds-meta-walk-x1), var(--ds-meta-walk-y1)); }
  68%, 88% { opacity: 1; transform: translate(var(--ds-meta-walk-x2), var(--ds-meta-walk-y2)); }
  95%, 100% { opacity: 0; transform: translate(var(--ds-meta-walk-x2), var(--ds-meta-walk-y2)); }
}

/* Stopped, the drawing still has to teach. The cursor goes, and Apps stays
   highlighted — the end state of the walk, which is the answer. */
@media (prefers-reduced-motion: reduce) {
  .meta-demo__cursor[b-6vkg8rbitq] { display: none; }

  .meta-demo__apps[b-6vkg8rbitq] {
    color: #4C77B9;
    background: var(--ds-meta-highlight);
    border-color: var(--ds-meta-highlight-edge);
  }
}

.meta-demo__window[b-6vkg8rbitq] {
  /* Artwork coordinates, not layout. Every measurement here is calibrated
     against the cursor animation's absolute travel distances, so none can come
     from the spacing scale: moved to the nearest rung, the target shifts out
     from under the pointer. These are the source geometry, to the pixel. */
  --ds-art-toolbar-pad: 0 11px;
  --ds-art-toolbar-gap: 6px;
  --ds-art-productbar-pad: 0 13px;
  --ds-art-nav-pad: 14px 10px;
  --ds-art-nav-gap: 5px;
  --ds-art-nav-label: 0 7px 5px;
  --ds-art-section-pad: 18px;
  --ds-art-section-gap: 10px;
}
/* /Components/Pages/Dashboard/Channels/MetaDetailsDemo.razor.rz.scp.css */
/* Meta's "Create an app" form, drawn.
   ──────────────────────────────────────────────────────────────────────────
   Everything inside the window frame is a picture of another company's
   interface, so its colours are deliberately NOT design tokens. Tokenising
   them would mean Meta's console changes appearance whenever our brand does,
   which is exactly backwards: this has to keep looking like Meta so it is
   recognisable when the person switches tabs.

   The palette is a component-local copy of the one MetaBrowserDemo carries,
   under the same names. Scoped stylesheets cannot share custom properties, and
   lifting them into a common file would file a drawing of someone else's
   product under our token set. */

.meta-details[b-ne5o3b6y26] {
  /* Meta console chrome, allowlisted in brand-literals.json. Not tokens: this
     is a drawing of another product and has to keep looking like theirs. */
  --ds-meta-chrome: #f2f3f5;
  --ds-meta-chrome-edge: #dfe2e7;
  --ds-meta-frame: #d9dee7;
  --ds-meta-surface: #ffffff;
  --ds-meta-line: #e5e8ec;
  --ds-meta-ink: #242b34;
  --ds-meta-ink-soft: #5f6772;
  --ds-meta-ink-mute: #858c96;
  --ds-meta-dot: #bdc3cc;
  --ds-meta-field-edge: #dce1e8;
  --ds-meta-highlight: #eaf0f8;
  --ds-meta-highlight-edge: #b3c9e4;
  --ds-meta-blue: #4C77B9;

  /* Geometry and timing. No token scale describes a drawing of someone
     else's product. Seven seconds because two fields have to be typed out
     legibly before the button wakes up; six reads as a scramble. */
  --ds-meta-radius: 16px;
  --ds-meta-hairline: 1px;
  --ds-meta-loop: 7s;
  --ds-meta-blink: 0.7s;

  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.meta-details__window[b-ne5o3b6y26] {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ds-meta-chrome);
  border: var(--ds-meta-hairline) solid var(--ds-meta-frame);
  border-radius: var(--ds-meta-radius);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) var(--colors-surface-shadow-diffuse);
}

.meta-details[b-ne5o3b6y26] {
  /* Browser chrome height and the traffic-light dots — pixel facts about a
     drawing, which no spacing or icon scale has an opinion about. */
  --ds-meta-toolbar: 30px;
  --ds-meta-dot-size: 6px;
}

.meta-details__toolbar[b-ne5o3b6y26] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--ds-meta-toolbar);
  padding: var(--spacing-none) var(--spacing-md);
  background: var(--ds-meta-chrome);
  border-bottom: var(--ds-meta-hairline) solid var(--ds-meta-chrome-edge);
}

.meta-details__toolbar > i[b-ne5o3b6y26] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-details__toolbar[b-ne5o3b6y26] >  span {
  min-width: 0;
  margin-left: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-3xl);
  overflow: hidden;
  color: var(--ds-meta-ink-mute);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-full);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: this is a drawing of another product's chrome, not our type scale */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meta-details__page[b-ne5o3b6y26] { padding: var(--ds-art-page-pad); }

.meta-details__page > h2[b-ne5o3b6y26] {
  margin: var(--ds-art-heading-gap);
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-base); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
}

/* ── The five-step strip ───────────────────────────────────────────────────
   Drawn because it is the reassurance: someone who has just been sent off to
   a stranger's site needs to see that this form is step one of five, and that
   the page in front of them is the page we meant. */

.meta-details__progress[b-ne5o3b6y26] {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  align-items: center;
  gap: var(--ds-art-progress-gap);
  padding: var(--ds-art-progress-pad);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-md);
}

.meta-details__progress > *[b-ne5o3b6y26] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-art-progress-gap);
  min-width: 0;
  color: var(--ds-meta-ink-mute);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-semibold); /* text-style-exempt: as above */
  white-space: nowrap;
}

.meta-details__progress > *:not(:last-child)[b-ne5o3b6y26]::after {
  content: "";
  flex: 1;
  min-width: var(--spacing-sm);
  height: var(--spacing-2xs);
  background: var(--ds-meta-line);
}

.meta-details[b-ne5o3b6y26] {
  /* The step bullet: a small ring, half-filled on the step you are on.
     Measured off Meta's own strip — no icon-size token lands on it. */
  --ds-meta-step: 13px;
  --ds-meta-step-ring: 2px;
  --ds-meta-step-fill: 6px;
}

.meta-details__progress i[b-ne5o3b6y26] {
  flex: 0 0 auto;
  width: var(--ds-meta-step);
  height: var(--ds-meta-step);
  border: var(--ds-meta-step-ring) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-details__progress strong[b-ne5o3b6y26] { color: var(--ds-meta-blue); }

.meta-details__progress strong i[b-ne5o3b6y26] {
  border-color: var(--ds-meta-blue);
  box-shadow: inset var(--ds-meta-step-fill) 0 var(--ds-meta-blue);
}

/* ── The form ──────────────────────────────────────────────────────────────
   Two fields and a button. The hint under each label is Meta's own wording,
   kept verbatim: matching their sentence is what lets someone find the field
   on the real page without reading it twice. */

.meta-details__form[b-ne5o3b6y26] {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
  padding: var(--ds-art-form-pad);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-md);
}

.meta-details__form label[b-ne5o3b6y26] { display: grid; gap: var(--spacing-xs); }

.meta-details__form label > strong[b-ne5o3b6y26] {
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-details__form label > small[b-ne5o3b6y26] {
  color: var(--ds-meta-ink-soft);
  line-height: var(--ds-art-hint-leading);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  line-height: 1.4;
}

.meta-details[b-ne5o3b6y26] {
  /* Input and footer-control heights, and the caret drawn inside them. These
     are Meta's control sizes; ours would make it look like our form. */
  --ds-meta-field-h: 36px;
  --ds-meta-caret-h: 15px;
  --ds-meta-control: 31px;
}

.meta-details__form label[b-ne5o3b6y26] >  span {
  display: flex;
  align-items: center;
  height: var(--ds-meta-field-h);
  margin-top: var(--ds-art-field-gap);
  padding: var(--ds-art-field-pad);
  overflow: hidden;
  color: var(--ds-meta-ink);
  border: var(--ds-meta-hairline) solid var(--ds-meta-field-edge);
  border-radius: var(--radius-radius-xs);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

/* Typing is a width animation over a nowrap run of text, so the characters
   are uncovered rather than re-laid-out, and steps() lands them one at a time
   instead of sliding a ribbon. */
.meta-details__form label > span b[b-ne5o3b6y26] {
  display: block;
  overflow: hidden;
  font-weight: var(--typography-font-weight-medium); /* text-style-exempt: as above */
  white-space: nowrap;
}

.meta-details__form label > span i[b-ne5o3b6y26] {
  width: var(--ds-meta-hairline);
  height: var(--ds-meta-caret-h);
  background: var(--ds-meta-blue);
}

.meta-details__name[b-ne5o3b6y26] { animation: meta-details-focus-name-b-ne5o3b6y26 var(--ds-meta-loop) ease-in-out infinite; }
.meta-details__email[b-ne5o3b6y26] { animation: meta-details-focus-email-b-ne5o3b6y26 var(--ds-meta-loop) ease-in-out infinite; }

.meta-details__name b[b-ne5o3b6y26] { animation: meta-details-type-name-b-ne5o3b6y26 var(--ds-meta-loop) steps(15, end) infinite; }
.meta-details__email b[b-ne5o3b6y26] { animation: meta-details-type-email-b-ne5o3b6y26 var(--ds-meta-loop) steps(22, end) infinite; }

/* Two animations per caret: one blinks it, the other says which field it is
   currently sitting in, so only one caret is ever alive. */
.meta-details__name i[b-ne5o3b6y26] {
  animation: meta-details-caret-b-ne5o3b6y26 var(--ds-meta-blink) step-end infinite,
             meta-details-caret-name-b-ne5o3b6y26 var(--ds-meta-loop) step-end infinite;
}

.meta-details__email i[b-ne5o3b6y26] {
  animation: meta-details-caret-b-ne5o3b6y26 var(--ds-meta-blink) step-end infinite,
             meta-details-caret-email-b-ne5o3b6y26 var(--ds-meta-loop) step-end infinite;
}

.meta-details__form footer[b-ne5o3b6y26] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-2xs);
}

.meta-details__form footer[b-ne5o3b6y26] >  span {
  display: grid;
  place-items: center;
  height: var(--ds-meta-control);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--ds-meta-ink-soft);
  border: var(--ds-meta-hairline) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-xs);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

/* Next starts dormant and turns blue only once both fields hold something.
   That state change is the reason this moves at all: on the real page the
   button looks broken to anyone who filled in a name and stopped. */
.meta-details__form footer button[b-ne5o3b6y26] {
  height: var(--ds-meta-control);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--ds-meta-surface);
  background: var(--ds-meta-highlight-edge);
  border: 0;
  border-radius: var(--radius-radius-xs);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
  animation: meta-details-next-b-ne5o3b6y26 var(--ds-meta-loop) ease-in-out infinite;
}

.meta-details[b-ne5o3b6y26] {
  /* Where the pointer starts, and the two hops it makes: down to the email
     field, then across and down to Next. Measured against the drawing, not a
     spacing scale. */
  --ds-meta-cursor-top: 200px;
  --ds-meta-cursor-left: 150px;
  --ds-meta-cursor-w: 13px;
  --ds-meta-cursor-h: 18px;
  --ds-meta-walk-y1: 86px;
  --ds-meta-walk-x2: 353px;
  --ds-meta-walk-y2: 140px;
  --ds-meta-exit-x: 346px;
  --ds-meta-exit-y: 158px;
  /* How wide each field's text runs once fully typed — the end of the
     reveal, so it is also the still frame. */
  --ds-meta-name-width: 91px;
  --ds-meta-email-width: 126px;
  /* Focus and press rings. Drawn as solid tints because the allowlist holds
     Meta's flat chrome colours, not its translucent overlays. */
  --ds-meta-focus-ring: 3px;
  --ds-meta-press-ring: 4px;
}

.meta-details__cursor[b-ne5o3b6y26] {
  position: absolute;
  z-index: 4;
  top: var(--ds-meta-cursor-top);
  left: var(--ds-meta-cursor-left);
  width: var(--ds-meta-cursor-w);
  height: var(--ds-meta-cursor-h);
  background: var(--ds-meta-ink);
  clip-path: polygon(0 0, 100% 67%, 56% 72%, 42% 100%);
  animation: meta-details-cursor-b-ne5o3b6y26 var(--ds-meta-loop) ease-in-out infinite;
}

.meta-details__caption[b-ne5o3b6y26] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  color: var(--colors-text-muted);
}

.meta-details__dot[b-ne5o3b6y26] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-blue);
  border-radius: var(--radius-radius-full);
}



/* ── The seven seconds ─────────────────────────────────────────────────────
   Name, email, Next, in that order, with the cursor arriving a beat before
   each one so the pointer looks like the cause rather than a passenger. */

@keyframes meta-details-type-name-b-ne5o3b6y26 {
  0%, 8% { width: 0; }
  30%, 100% { width: var(--ds-meta-name-width); }
}

@keyframes meta-details-type-email-b-ne5o3b6y26 {
  0%, 40% { width: 0; }
  66%, 100% { width: var(--ds-meta-email-width); }
}

@keyframes meta-details-focus-name-b-ne5o3b6y26 {
  0%, 34% {
    border-color: var(--ds-meta-blue);
    box-shadow: 0 0 0 var(--ds-meta-focus-ring) var(--ds-meta-highlight);
  }
  40%, 100% {
    border-color: var(--ds-meta-field-edge);
    box-shadow: none;
  }
}

@keyframes meta-details-focus-email-b-ne5o3b6y26 {
  0%, 38%, 70%, 100% {
    border-color: var(--ds-meta-field-edge);
    box-shadow: none;
  }
  44%, 66% {
    border-color: var(--ds-meta-blue);
    box-shadow: 0 0 0 var(--ds-meta-focus-ring) var(--ds-meta-highlight);
  }
}

@keyframes meta-details-next-b-ne5o3b6y26 {
  0%, 68%, 100% {
    background: var(--ds-meta-highlight-edge);
    box-shadow: none;
    transform: scale(1);
  }
  74%, 94% {
    background: var(--ds-meta-blue);
    box-shadow: 0 0 0 var(--ds-meta-press-ring) var(--ds-meta-highlight);
    transform: scale(1.04);
  }
}

@keyframes meta-details-cursor-b-ne5o3b6y26 {
  0%, 32% { opacity: 1; transform: translate(0, 0); }
  44%, 66% { opacity: 1; transform: translate(0, var(--ds-meta-walk-y1)); }
  76%, 94% { opacity: 1; transform: translate(var(--ds-meta-walk-x2), var(--ds-meta-walk-y2)); }
  100% { opacity: 0; transform: translate(var(--ds-meta-exit-x), var(--ds-meta-exit-y)); }
}

@keyframes meta-details-caret-b-ne5o3b6y26 { 50% { opacity: 0; } }

@keyframes meta-details-caret-name-b-ne5o3b6y26 {
  0%, 39% { visibility: visible; }
  40%, 100% { visibility: hidden; }
}

@keyframes meta-details-caret-email-b-ne5o3b6y26 {
  0%, 43% { visibility: hidden; }
  44%, 69% { visibility: visible; }
  70%, 100% { visibility: hidden; }
}

/* Stopped, the drawing still has to teach. It settles on the end of the loop:
   both fields filled and Next live — the thing people get wrong, and the only
   frame worth showing if there is going to be just one. */
@media (prefers-reduced-motion: reduce) {
  .meta-details__name[b-ne5o3b6y26],
  .meta-details__email[b-ne5o3b6y26],
  .meta-details__name b[b-ne5o3b6y26],
  .meta-details__email b[b-ne5o3b6y26],
  .meta-details__name i[b-ne5o3b6y26],
  .meta-details__email i[b-ne5o3b6y26],
  .meta-details__form footer button[b-ne5o3b6y26],
  .meta-details__cursor[b-ne5o3b6y26] { animation: none; }

  .meta-details__name b[b-ne5o3b6y26] { width: var(--ds-meta-name-width); }
  .meta-details__email b[b-ne5o3b6y26] { width: var(--ds-meta-email-width); }

  /* Nothing is being typed in a still picture, and a frozen caret in both
     fields at once reads as two cursors rather than none. */
  .meta-details__form label > span i[b-ne5o3b6y26] { display: none; }

  .meta-details__form footer button[b-ne5o3b6y26] { background: var(--ds-meta-blue); }
  .meta-details__cursor[b-ne5o3b6y26] { display: none; }
}

.meta-details__window[b-ne5o3b6y26] {
  /* Artwork coordinates, not layout. Every measurement here is calibrated
     against the cursor animation's absolute travel distances, so none can come
     from the spacing scale: moved to the nearest rung, the target shifts out
     from under the pointer. These are the source geometry, to the pixel. */
  --ds-art-page-pad: 18px;
  --ds-art-progress-gap: 5px;
  --ds-art-heading-gap: 0 0 15px;
  --ds-art-progress-pad: 11px;
  --ds-art-form-pad: 18px;
  --ds-art-hint-leading: 1.4;
  --ds-art-field-gap: 3px;
  --ds-art-field-pad: 0 10px;
}
/* /Components/Pages/Dashboard/Channels/MetaUseCaseDemo.razor.rz.scp.css */
/* Meta's "Add use cases" screen, drawn.
   ──────────────────────────────────────────────────────────────────────────
   Everything inside the window frame is a picture of another company's
   interface, so its colours are deliberately NOT design tokens. Tokenising
   them would mean Meta's console changes appearance whenever our brand does,
   which is exactly backwards: this has to keep looking like Meta so it is
   recognisable when the person switches tabs.

   The palette is collected in one block rather than scattered through the
   file, so the boundary between "our product" and "a drawing of theirs" is a
   single thing you can read. The names match MetaBrowserDemo's wherever the
   colour is the same — each component declares its own copy, because a
   scoped stylesheet cannot share locals with a sibling, but a reader moving
   between the two drawings should not have to relearn them. */

.meta-usecase[b-hixf8evi3x] {
  /* Meta console chrome, allowlisted in brand-literals.json. Not tokens: this
     is a drawing of another product and has to keep looking like theirs. A few
     of Meta's shades are rounded onto a neighbour already on the allowlist
     rather than widening it — at this size they are indistinguishable, and the
     allowlist is meant to stay short enough to audit. */
  --ds-meta-chrome: #f2f3f5;
  --ds-meta-chrome-edge: #dfe2e7;
  --ds-meta-frame: #d9dee7;
  --ds-meta-surface: #ffffff;
  --ds-meta-rail: #f5f6f8;
  --ds-meta-rail-edge: #dfe3e8;
  --ds-meta-line: #e5e8ec;
  --ds-meta-ink: #242b34;
  --ds-meta-ink-soft: #5f6772;
  --ds-meta-ink-mute: #858c96;
  --ds-meta-dot: #bdc3cc;
  --ds-meta-empty: #eef0f2;
  --ds-meta-highlight: #eaf0f8;
  --ds-meta-highlight-edge: #b3c9e4;
  --ds-meta-blue: #4C77B9;

  /* Geometry and timing. No token scale describes a drawing of someone
     else's product. Nine seconds because three ticks have to be watched
     happen one after another; faster and they read as one event. */
  --ds-meta-radius: 16px;
  --ds-meta-hairline: 1px;
  --ds-meta-ring: 1.5px;
  --ds-meta-ring-thick: 2px;
  --ds-meta-loop: 9s;

  display: grid;
  gap: var(--spacing-sm);
  min-width: 0;
}

.meta-usecase__window[b-hixf8evi3x] {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ds-meta-rail);
  border: var(--ds-meta-hairline) solid var(--ds-meta-frame);
  border-radius: var(--ds-meta-radius);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) var(--colors-surface-shadow-diffuse);
}

.meta-usecase__toolbar[b-hixf8evi3x] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--ds-meta-toolbar);
  padding: var(--spacing-none) var(--spacing-md);
  background: var(--ds-meta-chrome);
  border-bottom: var(--ds-meta-hairline) solid var(--ds-meta-chrome-edge);
}

.meta-usecase[b-hixf8evi3x] {
  /* Browser chrome heights — nothing in the spacing scale is a window
     toolbar, and rounding them would stop it reading as a browser. */
  --ds-meta-toolbar: 30px;
  --ds-meta-dot-size: 6px;
}

.meta-usecase__toolbar > i[b-hixf8evi3x] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-usecase__toolbar[b-hixf8evi3x] >  span {
  min-width: 0;
  margin-left: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-3xl);
  overflow: hidden;
  color: var(--ds-meta-ink-mute);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-full);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: a drawing of another product's chrome, not our type scale */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── The wizard page ─────────────────────────────────────────────────────── */

.meta-usecase__page[b-hixf8evi3x] { padding: var(--spacing-lg); }

.meta-usecase__page > h2[b-hixf8evi3x] {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-base); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
}

/* The stepper earns its place: it is the only thing on screen saying this is
   step two of five, which is what stops someone closing the tab believing the
   app is finished. */
.meta-usecase__progress[b-hixf8evi3x] {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 1fr);
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-md);
}

.meta-usecase__progress > *[b-hixf8evi3x] {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  color: var(--ds-meta-ink-mute);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-semibold); /* text-style-exempt: as above */
  white-space: nowrap;
}

.meta-usecase__progress > *:not(:last-child)[b-hixf8evi3x]::after {
  content: "";
  flex: 1;
  min-width: var(--spacing-sm);
  height: var(--ds-meta-ring-thick);
  background: var(--ds-meta-line);
}

.meta-usecase__progress i[b-hixf8evi3x] {
  flex: 0 0 auto;
  width: var(--ds-meta-step);
  height: var(--ds-meta-step);
  border: var(--ds-meta-ring-thick) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-usecase[b-hixf8evi3x] {
  /* Stepper dot, and the half-fill that marks the step you are on. No radius
     or size token lands on a 13px circle. */
  --ds-meta-step: 13px;
  --ds-meta-step-half: 6px;
}

.meta-usecase__progress strong[b-hixf8evi3x] { color: var(--ds-meta-blue); }

.meta-usecase__progress strong i[b-hixf8evi3x] {
  border-color: var(--ds-meta-blue);
  box-shadow: inset var(--ds-meta-step-half) 0 var(--ds-meta-blue);
}

/* Step one is behind us — filled solid, so the stepper reads as progress made
   rather than as five equal choices. */
.meta-usecase__done[b-hixf8evi3x] { color: var(--ds-meta-blue); }

.meta-usecase__done i[b-hixf8evi3x] {
  background: var(--ds-meta-blue);
  border-color: var(--ds-meta-blue);
}

/* ── The use-case panel ──────────────────────────────────────────────────── */

.meta-usecase__panel[b-hixf8evi3x] {
  margin-top: var(--spacing-md);
  padding: var(--ds-art-panel-pad);
  background: var(--ds-meta-surface);
  border-radius: var(--radius-radius-md);
}

.meta-usecase__panel > h3[b-hixf8evi3x] {
  margin: var(--ds-art-heading-gap);
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-xs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
}

.meta-usecase__layout[b-hixf8evi3x] {
  display: grid;
  grid-template-columns: var(--ds-meta-filter) minmax(0, 1fr);
  gap: var(--ds-art-layout-gap);
  align-items: start;
}

.meta-usecase[b-hixf8evi3x] {
  /* The filter rail's width, measured off the real screen. It is drawn at all
     because the instruction is "leave Featured selected" — with the rail
     cropped out there is nothing for that sentence to refer to. */
  --ds-meta-filter: 116px;
}

.meta-usecase__layout nav[b-hixf8evi3x] { display: grid; gap: var(--ds-art-nav-gap); }

.meta-usecase__layout nav small[b-hixf8evi3x] {
  margin-bottom: var(--spacing-2xs);
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
}

.meta-usecase__layout nav[b-hixf8evi3x]  span {
  display: flex;
  align-items: center;
  gap: var(--ds-art-nav-item-gap);
  padding: var(--ds-art-nav-item-pad);
  color: var(--ds-meta-ink-soft);
  border-radius: var(--radius-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-usecase__layout nav span i[b-hixf8evi3x] {
  flex: 0 0 auto;
  width: var(--ds-meta-radio);
  height: var(--ds-meta-radio);
  border: var(--ds-meta-ring) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-full);
}

.meta-usecase[b-hixf8evi3x] {
  /* The filter radio, and the two inset rings that draw its selected dot. */
  --ds-meta-radio: 10px;
  --ds-meta-radio-gap: 2px;
  --ds-meta-radio-dot: 5px;
}

/* Featured stays selected for the whole sequence. It is the one control here
   that should NOT be touched, so it never animates. */
.meta-usecase__filter-on[b-hixf8evi3x] {
  color: var(--ds-meta-ink);
  background: var(--ds-meta-highlight);
}

.meta-usecase__filter-on i[b-hixf8evi3x] {
  border-color: var(--ds-meta-blue);
  box-shadow:
    inset 0 0 0 var(--ds-meta-radio-gap) var(--ds-meta-surface),
    inset 0 0 0 var(--ds-meta-radio-dot) var(--ds-meta-blue);
}

.meta-usecase__layout ul[b-hixf8evi3x] {
  display: grid;
  gap: var(--ds-art-list-gap);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.meta-usecase__row[b-hixf8evi3x] {
  display: grid;
  grid-template-columns: var(--ds-meta-tile) minmax(0, 1fr) var(--ds-meta-box);
  align-items: start;
  gap: var(--ds-art-row-gap);
  padding: var(--ds-art-row-pad);
  border: var(--ds-meta-hairline) solid var(--ds-meta-rail-edge);
  border-radius: var(--radius-radius-sm);
}

.meta-usecase[b-hixf8evi3x] {
  /* The row's own furniture: product tile, checkbox, and the checkmark inside
     it. Meta's sizes, not ours. */
  --ds-meta-tile: 22px;
  --ds-meta-box: 14px;
  --ds-meta-check: 9px;
}

.meta-usecase__row em[b-hixf8evi3x] {
  width: var(--ds-meta-tile);
  height: var(--ds-meta-tile);
  background: var(--ds-meta-empty);
  border-radius: var(--radius-radius-sm);
}

.meta-usecase__row strong[b-hixf8evi3x] {
  display: block;
  color: var(--ds-meta-ink);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-usecase__row small[b-hixf8evi3x] {
  display: block;
  margin-top: var(--spacing-2xs);
  color: var(--ds-meta-ink-soft);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  line-height: 1.35;
}

/* The tick: an empty box that fills. Drawn with a border and Meta's own
   checkmark path rather than a glyph, so it needs no asset and recolours
   with the mock's blue. */
.meta-usecase__row b[b-hixf8evi3x] {
  display: grid;
  place-items: center;
  width: var(--ds-meta-box);
  height: var(--ds-meta-box);
  margin-top: var(--ds-art-check-gap);
  color: var(--ds-meta-surface);
  border: var(--ds-meta-ring) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-xs);
}

.meta-usecase__row b svg[b-hixf8evi3x] {
  display: block;
  width: var(--ds-meta-check);
  height: var(--ds-meta-check);
  opacity: 0;
}

/* ── The three ticks ─────────────────────────────────────────────────────
   Each row ticks at its own point in the run rather than on a shared delay:
   the whole value of the animation is watching the ORDER happen, because the
   instructions beside it are numbered one, two, three.

   It runs once and holds ("forwards") instead of looping. A loop that keeps
   unticking the boxes would keep undoing the answer; Replay exists for the
   person who looked away. */

.meta-usecase__row--marketing[b-hixf8evi3x] { animation: meta-usecase-row-1-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }
.meta-usecase__row--ads[b-hixf8evi3x] { animation: meta-usecase-row-2-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }
.meta-usecase__row--whatsapp[b-hixf8evi3x] { animation: meta-usecase-row-3-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }

.meta-usecase__row--marketing b[b-hixf8evi3x] { animation: meta-usecase-tick-1-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }
.meta-usecase__row--ads b[b-hixf8evi3x] { animation: meta-usecase-tick-2-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }
.meta-usecase__row--whatsapp b[b-hixf8evi3x] { animation: meta-usecase-tick-3-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }

.meta-usecase__row--marketing b svg[b-hixf8evi3x] { animation: meta-usecase-check-1-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }
.meta-usecase__row--ads b svg[b-hixf8evi3x] { animation: meta-usecase-check-2-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }
.meta-usecase__row--whatsapp b svg[b-hixf8evi3x] { animation: meta-usecase-check-3-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards; }

/* ── The panel footer ────────────────────────────────────────────────────── */

.meta-usecase__panel footer[b-hixf8evi3x] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-md);
}

.meta-usecase__panel footer > div[b-hixf8evi3x] {
  display: flex;
  align-items: center;
  gap: var(--ds-art-footer-gap);
}

.meta-usecase__panel footer[b-hixf8evi3x]  span {
  display: grid;
  place-items: center;
  height: var(--ds-meta-button);
  padding: var(--spacing-none) var(--spacing-sm);
  color: var(--ds-meta-ink-soft);
  border: var(--ds-meta-hairline) solid var(--ds-meta-dot);
  border-radius: var(--radius-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
}

.meta-usecase[b-hixf8evi3x] { --ds-meta-button: 28px; /* Meta's control height; our button tokens are taller. */ }

/* Next starts muted and turns Meta's blue only once all three boxes are
   ticked — the same signal Meta gives, and the reason the drawing ends on
   the button rather than on the last row. */
.meta-usecase__panel footer button[b-hixf8evi3x] {
  height: var(--ds-meta-button);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--ds-meta-surface);
  background: var(--ds-meta-highlight-edge);
  border: 0;
  border-radius: var(--radius-radius-sm);
  font-size: var(--typography-size-text-xxs); /* text-style-exempt: as above */
  font-weight: var(--typography-font-weight-bold); /* text-style-exempt: as above */
  animation: meta-usecase-next-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards;
}

/* ── The pointer ─────────────────────────────────────────────────────────
   Anchored to the RIGHT edge of the window rather than the left, because the
   checkboxes are the last column of the row: pinned left, the pointer would
   drift off them the moment the card is a different width than the one this
   was measured against. */
.meta-usecase__cursor[b-hixf8evi3x] {
  position: absolute;
  z-index: 4;
  top: var(--ds-meta-cursor-top);
  right: var(--ds-meta-cursor-right);
  width: var(--ds-meta-cursor-w);
  height: var(--ds-meta-cursor-h);
  background: var(--ds-meta-ink);
  clip-path: polygon(0 0, 100% 67%, 56% 72%, 42% 100%);
  animation: meta-usecase-cursor-b-hixf8evi3x var(--ds-meta-loop) ease-in-out forwards;
}

.meta-usecase[b-hixf8evi3x] {
  /* Measured against the drawing, not a spacing scale: the tip rests on the
     first checkbox, and each offset is the gap down to the next one, so the
     pointer actually touches what it is about to tick. */
  --ds-meta-cursor-top: 190px;
  --ds-meta-cursor-right: 42px;
  --ds-meta-cursor-w: 13px;
  --ds-meta-cursor-h: 18px;
  --ds-meta-enter-x: -34px;
  --ds-meta-enter-y: -22px;
  --ds-meta-box-2-y: 67px;
  --ds-meta-box-3-y: 120.5px;
  --ds-meta-next-x: -7.6px;
  --ds-meta-next-y: 187.5px;
  --ds-meta-exit-y: 193px;
}

/* ── Our caption, below the frame ────────────────────────────────────────── */

.meta-usecase__caption[b-hixf8evi3x] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  color: var(--colors-text-muted);
}

.meta-usecase__dot[b-hixf8evi3x] {
  width: var(--ds-meta-dot-size);
  height: var(--ds-meta-dot-size);
  background: var(--ds-meta-blue);
  border-radius: var(--radius-radius-full);
}



/* ── Keyframes ───────────────────────────────────────────────────────────
   Each row's border warms a beat after the pointer arrives on it, so cause
   reads before effect. The box fills first and the checkmark fades in just
   behind it, which is what a real click looks like. */

@keyframes meta-usecase-row-1-b-hixf8evi3x { 0%, 14% { border-color: var(--ds-meta-rail-edge); } 18%, 100% { border-color: var(--ds-meta-highlight-edge); } }
@keyframes meta-usecase-row-2-b-hixf8evi3x { 0%, 36% { border-color: var(--ds-meta-rail-edge); } 40%, 100% { border-color: var(--ds-meta-highlight-edge); } }
@keyframes meta-usecase-row-3-b-hixf8evi3x { 0%, 58% { border-color: var(--ds-meta-rail-edge); } 62%, 100% { border-color: var(--ds-meta-highlight-edge); } }

@keyframes meta-usecase-tick-1-b-hixf8evi3x { 0%, 14% { background: transparent; border-color: var(--ds-meta-dot); } 18%, 100% { background: var(--ds-meta-blue); border-color: var(--ds-meta-blue); } }
@keyframes meta-usecase-tick-2-b-hixf8evi3x { 0%, 36% { background: transparent; border-color: var(--ds-meta-dot); } 40%, 100% { background: var(--ds-meta-blue); border-color: var(--ds-meta-blue); } }
@keyframes meta-usecase-tick-3-b-hixf8evi3x { 0%, 58% { background: transparent; border-color: var(--ds-meta-dot); } 62%, 100% { background: var(--ds-meta-blue); border-color: var(--ds-meta-blue); } }

@keyframes meta-usecase-check-1-b-hixf8evi3x { 0%, 15% { opacity: 0; } 19%, 100% { opacity: 1; } }
@keyframes meta-usecase-check-2-b-hixf8evi3x { 0%, 37% { opacity: 0; } 41%, 100% { opacity: 1; } }
@keyframes meta-usecase-check-3-b-hixf8evi3x { 0%, 59% { opacity: 0; } 63%, 100% { opacity: 1; } }

@keyframes meta-usecase-next-b-hixf8evi3x { 0%, 74% { background: var(--ds-meta-highlight-edge); } 78%, 100% { background: var(--ds-meta-blue); } }

/* The pointer enters from off the panel so the first tick is seen being
   caused, pauses on each box long enough to read the row it is about to
   tick, then leaves once Next is live — the drawing has said everything it
   has to say by then, and a pointer parked on screen reads as unfinished. */
@keyframes meta-usecase-cursor-b-hixf8evi3x {
  0% { opacity: 1; transform: translate(var(--ds-meta-enter-x), var(--ds-meta-enter-y)); }
  10%, 20% { opacity: 1; transform: translate(0, 0); }
  30%, 42% { opacity: 1; transform: translate(0, var(--ds-meta-box-2-y)); }
  52%, 64% { opacity: 1; transform: translate(0, var(--ds-meta-box-3-y)); }
  74%, 94% { opacity: 1; transform: translate(var(--ds-meta-next-x), var(--ds-meta-next-y)); }
  100% { opacity: 0; transform: translate(var(--ds-meta-next-x), var(--ds-meta-exit-y)); }
}

/* Stopped, the drawing still has to teach. The pointer goes and the sequence
   is replaced by its end state: all three boxes ticked and Next live, which
   is the answer the sequence was spelling out.

   The WhatsApp row keeps the highlight fill on top of that. Still, the three
   rows would look interchangeable, and they are not — the WhatsApp use case
   is the one that adds WhatsApp to the app. Miss it and the WhatsApp menu
   never appears in Meta, and every later step of this guide points at
   nothing. */
@media (prefers-reduced-motion: reduce) {
  .meta-usecase__cursor[b-hixf8evi3x] { display: none; }

  .meta-usecase__row[b-hixf8evi3x],
  .meta-usecase__row b[b-hixf8evi3x],
  .meta-usecase__row b svg[b-hixf8evi3x],
  .meta-usecase__panel footer button[b-hixf8evi3x] { animation: none; }

  .meta-usecase__row[b-hixf8evi3x] { border-color: var(--ds-meta-highlight-edge); }

  .meta-usecase__row b[b-hixf8evi3x] {
    color: var(--ds-meta-surface);
    background: var(--ds-meta-blue);
    border-color: var(--ds-meta-blue);
  }

  .meta-usecase__row b svg[b-hixf8evi3x] { opacity: 1; }

  .meta-usecase__row--whatsapp[b-hixf8evi3x] { background: var(--ds-meta-highlight); }

  .meta-usecase__panel footer button[b-hixf8evi3x] { background: var(--ds-meta-blue); }
}

.meta-usecase__window[b-hixf8evi3x] {
  /* Artwork coordinates, not layout. Every measurement here is calibrated
     against the cursor animation's absolute travel distances, so none can come
     from the spacing scale: moved to the nearest rung, the target shifts out
     from under the pointer. These are the source geometry, to the pixel. */
  --ds-art-layout-gap: 13px;
  --ds-art-nav-gap: 5px;
  --ds-art-panel-pad: 14px;
  --ds-art-nav-item-gap: 6px;
  --ds-art-nav-item-pad: 4px 6px;
  --ds-art-row-gap: 9px;
  --ds-art-row-pad: 8px 9px;
  --ds-art-check-gap: 3px;
  --ds-art-footer-gap: 7px;
  --ds-art-heading-gap: 0 0 11px;
  --ds-art-list-gap: 7px;
}
/* /Components/Pages/Dashboard/Channels/ProviderPopup.razor.rz.scp.css */
/* Deliberately unlike the rest of the product: square chrome, a title bar, a
   plain body. It is standing in for someone else's window, and making it look
   like ours would teach people to trust a window that is not. */

.provider-backdrop[b-bfx6ngmdzn] {
  position: fixed;
  inset: 0;
  z-index: var(--ds-provider-layer);
  display: grid;
  place-items: center;
  padding: var(--spacing-2xl);
  background: var(--colors-surface-overlay);
  backdrop-filter: blur(var(--ds-provider-blur));
  /* Its own fade, in place of the page arrival (app.css, page-enter): a
     full-screen layer that slid up with it left a strip of page uncovered. */
  animation: provider-backdrop-in-b-bfx6ngmdzn var(--ds-provider-enter) ease;
}

.provider[b-bfx6ngmdzn] {
  display: grid;
  width: min(var(--ds-provider-width), 100%);
  overflow: hidden;
  background: var(--colors-surface-elevated);
  border-radius: var(--radius-radius-lg);
  box-shadow: 0 var(--spacing-2xl) var(--spacing-6xl) var(--colors-surface-shadow-diffuse);
  animation: provider-in-b-bfx6ngmdzn var(--ds-provider-enter) ease;
}

.provider-backdrop[b-bfx6ngmdzn] {
  /* Gaps in the token set: no z-index, window-width, blur or motion scale. */
  --ds-provider-layer: 140;
  --ds-provider-width: 460px;
  --ds-provider-blur: 4px;
  --ds-provider-enter: 160ms;
  --ds-provider-hairline: 1px;
}

/* Neutral chrome, like any browser or OS title bar — only the icon carries
   Meta's colour. Painting the whole bar in brand colour would make this look
   like one of ours, and the point of this screen is that it is not: everything
   inside it is Meta's, everything outside it is ours. */
.provider__chrome[b-bfx6ngmdzn] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-bottom: var(--ds-provider-hairline) solid var(--colors-surface-border);
}

[b-bfx6ngmdzn] .provider__chrome-icon { color: #1877f2; }
.channel-instagram[b-bfx6ngmdzn]  .provider__chrome-icon { color: #c63886; }
/* X is black on white and white on black, so it follows the text colour. */
.channel-x[b-bfx6ngmdzn]  .provider__chrome-icon { color: var(--colors-text-primary); }

/* The CTA hands off into Meta's own flow, so it takes Meta's colour rather
   than ours — the same reasoning as the chrome bar above. */
[b-bfx6ngmdzn] .provider__cta.ds-button--primary { background: #1877f2; }
.channel-instagram[b-bfx6ngmdzn]  .provider__cta.ds-button--primary { background: #c63886; }
.channel-x[b-bfx6ngmdzn]  .provider__cta.ds-button--primary { color: var(--colors-surface-card); background: var(--colors-text-primary); }
[b-bfx6ngmdzn] .provider__cta.ds-button--primary:hover:not(:disabled) { background: color-mix(in srgb, #1877f2 88%, black); }
.channel-instagram[b-bfx6ngmdzn]  .provider__cta.ds-button--primary:hover:not(:disabled) { background: color-mix(in srgb, #c63886 88%, black); }
.channel-x[b-bfx6ngmdzn]  .provider__cta.ds-button--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--colors-text-primary) 85%, var(--colors-surface-card)); }

.provider__body[b-bfx6ngmdzn] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--colors-text-muted);
}

.provider__consent[b-bfx6ngmdzn] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-feedback-warning-text);
  background: var(--colors-feedback-warning-subtle);
  border-radius: var(--radius-radius-md);
}

.provider__footer[b-bfx6ngmdzn] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-top: var(--ds-provider-hairline) solid var(--colors-surface-border);
}

@keyframes provider-backdrop-in-b-bfx6ngmdzn {
  from { opacity: 0; }
}

@keyframes provider-in-b-bfx6ngmdzn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* No motion asked for: both appear in place. */
@media (prefers-reduced-motion: reduce) {
  .provider-backdrop[b-bfx6ngmdzn],
  .provider[b-bfx6ngmdzn] { animation: none; }
}
/* /Components/Pages/Dashboard/Channels/RouteChoice.razor.rz.scp.css */
.route-choice-backdrop[b-h9a00hol8s] {
  position: fixed;
  inset: 0;
  z-index: var(--ds-route-layer);
  display: grid;
  place-items: center;
  padding: var(--ds-route-backdrop-pad);
  background: var(--colors-surface-overlay);
  backdrop-filter: blur(var(--ds-route-blur));
  animation: route-backdrop-in-b-h9a00hol8s var(--ds-route-backdrop-enter) ease;
}

/* Focus is moved here by script (as Dialog does); it is not a control, so no ring. */
.route-choice:focus[b-h9a00hol8s] { outline: none; }

/* The modal hugs its cards: three for WhatsApp, two for Facebook. */
.route-choice[b-h9a00hol8s] {
  display: grid;
  gap: var(--spacing-xl);
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--ds-route-pad);
  background: var(--colors-surface-elevated);
  border-radius: var(--ds-route-radius);
  box-shadow: 0 var(--spacing-2xl) var(--spacing-6xl) var(--colors-surface-shadow-diffuse);
  animation: route-choice-in-b-h9a00hol8s var(--ds-route-enter) var(--ds-route-ease);
}

.route-choice-backdrop[b-h9a00hol8s] {
  /* Geometry the token set has no scale for: React draws this dialog at 940px
     with 32px padding and a 25px radius, none of which sit on our spacing or
     radius rungs. */
  --ds-route-layer: 150;
  --ds-route-backdrop-pad: 28px;
  --ds-route-pad: 32px;
  --ds-route-radius: 25px;
  --ds-route-blur: 5px;
  --ds-route-backdrop-enter: 150ms;
  --ds-route-enter: 200ms;
  --ds-route-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-route-hairline: 1px;
  --ds-route-mark: 48px;
  --ds-route-mark-radius: 15px;
  --ds-route-close: 36px;
}

/* The heading wraps to the cards' width rather than widening the modal. */
.route-choice__header[b-h9a00hol8s] {
  width: 0;
  min-width: 100%;
  display: grid;
  grid-template-columns: var(--ds-route-mark) minmax(0, 1fr) var(--ds-route-close);
  gap: var(--spacing-md);
  align-items: center;
}

/* Meta's colours, as on the landing card — allowlisted, not tokens. */
.route-choice__mark[b-h9a00hol8s] {
  display: grid;
  place-items: center;
  width: var(--ds-route-mark);
  height: var(--ds-route-mark);
  color: var(--colors-text-inverse);
  border-radius: var(--ds-route-mark-radius);
}

.channel-whatsapp.route-choice__mark[b-h9a00hol8s] {
  background: #22a968;
  box-shadow: 0 var(--spacing-sm) var(--spacing-xl) color-mix(in srgb, #22a968 20%, transparent);
}
.channel-instagram.route-choice__mark[b-h9a00hol8s] {
  background: #c63886;
  box-shadow: 0 var(--spacing-sm) var(--spacing-xl) color-mix(in srgb, #c63886 20%, transparent);
}
.channel-x.route-choice__mark[b-h9a00hol8s] { background: var(--colors-text-primary); color: var(--colors-surface-card); }

.channel-facebook.route-choice__mark[b-h9a00hol8s] {
  background: #1877f2;
  box-shadow: 0 var(--spacing-sm) var(--spacing-xl) color-mix(in srgb, #1877f2 20%, transparent);
}

.route-choice__intro[b-h9a00hol8s] { display: grid; gap: var(--spacing-xs); min-width: 0; }
[b-h9a00hol8s] .route-choice__lede { color: var(--colors-text-muted); }


/* As Dialog draws its close: muted, on a muted circle. */
.route-choice__header[b-h9a00hol8s]  .route-choice__close { flex: none; color: var(--colors-text-muted); background: var(--colors-surface-muted); border-radius: var(--radius-radius-full); }

/* One column per card, each the width three took at the original 940px, so
   the modal is as wide as its cards; on a narrower window they share what
   there is. It never renders with fewer than two: the screen is skipped when
   there is nothing to choose between. */
.route-choice__cards[b-h9a00hol8s] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, var(--ds-route-card-width));
  gap: var(--ds-route-card-gap);
}

.route-choice-backdrop[b-h9a00hol8s] {
  /* Gaps in the token set: the design's 14px card gap, and each card's width,
     (940 - 2 × 32 padding - 2 × 14 gaps) ÷ 3. */
  --ds-route-card-gap: 14px;
  --ds-route-card-width: 283px;
}

.route-choice__cards[b-h9a00hol8s]  .route-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  min-height: var(--ds-route-card-min);
  overflow: hidden;
  padding: var(--ds-route-card-pad);
  text-align: left;
  background: var(--colors-surface-background);
  border: var(--ds-route-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--ds-route-card-radius);
  cursor: pointer;
  transition:
    transform var(--ds-route-card-motion) ease,
    border-color var(--ds-route-card-motion) ease,
    box-shadow var(--ds-route-card-motion) ease;
}

.route-choice-backdrop[b-h9a00hol8s] {
  /* Geometry the token set has no scale for: the card is drawn to a fixed
     302px min-height at 24px padding with a 19px radius, and the icon, arrow
     circle and decorative corner circle are all one-off sizes from the
     design rather than steps on any scale. */
  --ds-route-card-min: 302px;
  --ds-route-card-pad: 24px;
  --ds-route-card-radius: 19px;
  --ds-route-card-motion: 170ms;
  --ds-route-icon: 50px;
  --ds-route-icon-radius: 15px;
  --ds-route-arrow: 29px;
  --ds-route-circle: 128px;

}

/* A soft tinted circle bleeding off the top-right corner — decorative only,
   so it sits behind the content (z-index -1 inside this card's own isolated
   stacking context) and grows slightly on hover. */
.route-choice__cards[b-h9a00hol8s]  .route-card::after {
  position: absolute;
  z-index: -1;
  top: -46px;
  right: -43px;
  width: var(--ds-route-circle);
  height: var(--ds-route-circle);
  content: "";
  background: color-mix(in srgb, var(--colors-brand-primary) 5.5%, transparent);
  border-radius: var(--radius-radius-full);
  transition: transform var(--ds-route-circle-motion) ease;
}

.route-choice-backdrop[b-h9a00hol8s] {
  /* Gap in the token set: no motion scale. This one differs slightly from
     the card border/shadow transition above it, matching the source. */
  --ds-route-circle-motion: 180ms;
}

.route-choice__cards[b-h9a00hol8s]  .route-card:hover {
  border-color: var(--colors-accent-brand-solid);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) color-mix(in srgb, var(--colors-brand-primary) 11%, transparent);
  transform: translateY(-3px);
}

.route-choice__cards[b-h9a00hol8s]  .route-card:hover::after { transform: scale(1.12); }

/* Coming soon: the card stays readable but does not answer the pointer. */
.route-choice__cards[b-h9a00hol8s]  .route-card.is-soon { cursor: not-allowed; }
.route-choice__cards[b-h9a00hol8s]  .route-card.is-soon:hover {
  border-color: var(--colors-accent-brand-muted);
  box-shadow: none;
  transform: none;
}
.route-choice__cards[b-h9a00hol8s]  .route-card.is-soon:hover::after { transform: none; }
.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence.is-soon:hover { border-color: var(--colors-accent-emerald-muted); box-shadow: none; }
.route-choice__cards[b-h9a00hol8s]  .route-card--migration.is-soon:hover { border-color: var(--colors-accent-violet-border); box-shadow: none; }

/* No focus rule: the app-wide ring in app.css covers these cards, and a
   bespoke one here only made them inconsistent with every other control. */

/* The plain card (a fresh number, a channel's only route) takes the brand
   family, as coexistence takes emerald and manual setup violet, so no card
   reads weaker than the others. */
.route-card__icon[b-h9a00hol8s] {
  display: grid;
  place-items: center;
  width: var(--ds-route-icon);
  height: var(--ds-route-icon);
  margin-bottom: var(--spacing-2xl);
  color: var(--colors-accent-brand-text);
  background: var(--colors-accent-brand-muted);
  border-radius: var(--ds-route-icon-radius);
  box-shadow: 0 var(--spacing-sm) var(--spacing-lg) color-mix(in srgb, var(--colors-brand-primary) 9%, transparent);
}

[b-h9a00hol8s] .route-card__marker {
  width: max-content;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-accent-brand-text);
  background: color-mix(in srgb, var(--colors-surface-card) 72%, transparent);
  border-radius: var(--radius-radius-full);
}

[b-h9a00hol8s] .route-card__label {
  display: block;
  max-width: var(--ds-route-label-measure);
  margin-top: var(--spacing-md);
  color: var(--colors-text-primary);
}

.route-choice-backdrop[b-h9a00hol8s] { --ds-route-label-measure: 220px; }

[b-h9a00hol8s] .route-card__explanation {
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-2xl);
  color: var(--colors-text-muted);
}

.route-card__go[b-h9a00hol8s] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  gap: var(--spacing-sm);
  color: var(--colors-accent-brand-text);
}

.route-card__arrow[b-h9a00hol8s] {
  display: grid;
  place-items: center;
  width: var(--ds-route-arrow);
  height: var(--ds-route-arrow);
  color: var(--colors-text-on-primary);
  background: var(--colors-accent-brand-solid);
  border-radius: var(--radius-radius-full);
}

/* Coexistence: emerald.
   The literal colours here (#277457, #2b8d69, #dff3e9) are unambiguously
   emerald. The generated theme mapping splits this one card across teal AND
   green depending on which rule it looked at, so this is authored directly
   against the emerald ramp instead of following it. */
.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence {
  border-color: var(--colors-accent-emerald-muted);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence::after {
  background: color-mix(in srgb, var(--colors-accent-emerald-solid) 7%, transparent);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence:hover {
  border-color: var(--colors-accent-emerald-solid);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) color-mix(in srgb, var(--colors-accent-emerald-solid) 11%, transparent);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence .route-card__icon {
  color: var(--colors-accent-emerald-text);
  background: var(--colors-accent-emerald-muted);
  box-shadow: 0 var(--spacing-sm) var(--spacing-lg) color-mix(in srgb, var(--colors-accent-emerald-solid) 10%, transparent);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence .route-card__marker { color: var(--colors-accent-emerald-text); }

.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence .route-card__go { color: var(--colors-accent-emerald-text); }

.route-choice__cards[b-h9a00hol8s]  .route-card--coexistence .route-card__arrow {
  color: var(--colors-text-on-primary);
  background: var(--colors-accent-emerald-solid);
}

/* Migration, and manual setup in its place: violet.
   The one family the generated theme already gets right end to end — its
   border token (#ddd6ff) matches the React literal exactly. */
.route-choice__cards[b-h9a00hol8s]  .route-card--migration,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual {
  border-color: var(--colors-accent-violet-border);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--migration::after,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual::after {
  background: color-mix(in srgb, var(--colors-accent-violet-base) 7%, transparent);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--migration:hover,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual:hover {
  border-color: var(--colors-accent-violet-solid);
  box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) color-mix(in srgb, var(--colors-accent-violet-solid) 11%, transparent);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--migration .route-card__icon,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual .route-card__icon {
  color: var(--colors-accent-violet-text);
  background: var(--colors-accent-violet-muted);
  box-shadow: 0 var(--spacing-sm) var(--spacing-lg) color-mix(in srgb, var(--colors-accent-violet-solid) 10%, transparent);
}

.route-choice__cards[b-h9a00hol8s]  .route-card--migration .route-card__marker,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual .route-card__marker { color: var(--colors-accent-violet-text); }

.route-choice__cards[b-h9a00hol8s]  .route-card--migration .route-card__go,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual .route-card__go { color: var(--colors-accent-violet-text); }

.route-choice__cards[b-h9a00hol8s]  .route-card--migration .route-card__arrow,
.route-choice__cards[b-h9a00hol8s]  .route-card--manual .route-card__arrow {
  color: var(--colors-text-on-primary);
  background: var(--colors-accent-violet-solid);
}

/* The footer link is commented out for now (RouteChoice.razor); its styles stay with it. */
.route-choice__footer[b-h9a00hol8s] {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  margin-top: var(--ds-route-footer-gap);
  color: var(--colors-text-muted);
}

.route-choice-backdrop[b-h9a00hol8s] { --ds-route-footer-gap: 21px; }

/* The manual link: the Ghost Button, text only and underlined, so it reads as
   a way round rather than a second choice. */
.route-choice__footer[b-h9a00hol8s]  .route-choice__manual {
  text-decoration: underline;
  text-underline-offset: var(--ds-route-underline-offset);
}

.route-choice-backdrop[b-h9a00hol8s] {
  /* Gap in the token set: no underline-offset scale. */
  --ds-route-underline-offset: 3px;
}




@keyframes route-backdrop-in-b-h9a00hol8s {
  from { opacity: 0; }
}

@keyframes route-choice-in-b-h9a00hol8s {
  from {
    opacity: 0;
    transform: translateY(var(--spacing-md)) scale(0.985);
  }
}
/* /Components/Pages/Dashboard/Channels/RoutePreparation.razor.rz.scp.css */
/* A reading page, not a form. It is capped at a comfortable measure and the
   acknowledgement sits at the end of the reading, because ticking it means
   having read the thing above it.

   ::deep appears throughout. Typography renders its own element, so that
   element never carries this component's scope attribute and a plain
   descendant selector silently matches nothing. */

/* No uniform gap: the four bands are spaced differently on purpose — 32 under
   the header, 22 before the agreement, 24 before the footer — so each carries
   its own margin rather than being flattened to one rhythm. */
.prep[b-0nhkitws2n] {
  display: grid;
  width: min(var(--ds-prep-width), 100%);
  margin-inline: auto;
  padding: var(--ds-prep-pad);
  background: var(--colors-surface-card);
  border: var(--ds-prep-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-2xl) var(--spacing-6xl) var(--colors-surface-shadow);
}

.prep[b-0nhkitws2n] {
  /* Geometry the token set has no scale for: React draws this reading page at
     920px, with an asymmetric 30/36/28px padding and its own shadow. */
  --ds-prep-width: 920px;
  --ds-prep-pad-x: 36px;
  --ds-prep-pad-bottom: 28px;
  --ds-prep-pad: 30px var(--ds-prep-pad-x) var(--ds-prep-pad-bottom);
  --ds-prep-hairline: 1px;
  --ds-prep-icon: 36px;
  --ds-prep-row-icon: 40px;
  --ds-prep-rule: 2px;
  --ds-prep-section-gap: 28px;
  /* Off-scale vertical rhythm from the design: the bands between header,
     reading, agreement and footer are 32 / 22 / 24, and the heading sits 7px
     above its own list rather than a section apart from it. */
  --ds-prep-header-gap: 32px;
  --ds-prep-agreement-gap: 22px;
  --ds-prep-footer-gap: 24px;
  --ds-prep-heading-gap: 7px;
  /* Measures. Each block is capped so a line stays readable rather than
     running the full width of a 920px card. */
  --ds-prep-intro-measure: 720px;
  --ds-prep-lede-measure: 650px;
  --ds-prep-details-measure: 520px;
}

.prep__header[b-0nhkitws2n] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  margin-bottom: var(--ds-prep-header-gap);
}

/* Pulled left by its own padding so the label sits flush with the heading
   below it, while the hover pill still extends into the card's gutter. */
[b-0nhkitws2n] .prep__back {
  margin-left: calc(var(--spacing-lg) * -1);
  color: var(--colors-text-muted);
}

/* The route, restated and tinted to the channel it belongs to — the same
   green/pink/blue association the landing card's mark and the route-choice
   header already carry. */
.prep__route[b-0nhkitws2n] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--ds-prep-chip-pad);
  border-radius: var(--radius-radius-full);
}

.channel-whatsapp.prep__route[b-0nhkitws2n] { color: var(--colors-accent-emerald-text); background: var(--colors-accent-emerald-subtle); }
.channel-instagram.prep__route[b-0nhkitws2n] { color: var(--colors-accent-pink-text); background: var(--colors-accent-pink-subtle); }
.channel-facebook.prep__route[b-0nhkitws2n] { color: var(--colors-accent-blue-text); background: var(--colors-accent-blue-subtle); }
.channel-x.prep__route[b-0nhkitws2n] { color: var(--colors-text-primary); background: var(--colors-surface-muted); }

.prep[b-0nhkitws2n] { --ds-prep-chip-pad: 9px 13px; }

.prep__reading[b-0nhkitws2n] { display: grid; gap: var(--ds-prep-section-gap); }

/* 4px, not a paragraph gap: the intro is a subtitle hanging off the heading. */
.prep__intro[b-0nhkitws2n] { display: grid; gap: var(--spacing-xs); max-width: var(--ds-prep-intro-measure); }

[b-0nhkitws2n] .prep__lede {
  max-width: var(--ds-prep-lede-measure);
  color: var(--colors-text-muted);
}

/* The priority note is a section apart; the heading belongs to the list
   directly beneath it, so it sits close enough to read as its label. */
.prep__expectations[b-0nhkitws2n] { display: grid; }
.prep__priority[b-0nhkitws2n] { margin-bottom: var(--ds-prep-section-gap); }
[b-0nhkitws2n] .prep__heading { margin-bottom: var(--ds-prep-heading-gap); }

/* The irreversible one. Info-toned rather than brand-toned, because it is
   telling you something you cannot take back, not selling you a feature. */
.prep__priority[b-0nhkitws2n] {
  display: grid;
  grid-template-columns: var(--ds-prep-icon) minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-lg);
  color: var(--colors-feedback-info-text);
  background: var(--colors-feedback-info-subtle);
  border: var(--ds-prep-hairline) solid var(--colors-feedback-info-border);
  border-radius: var(--radius-radius-xl);
}

.prep__priority-icon[b-0nhkitws2n] {
  display: grid;
  place-items: center;
  width: var(--ds-prep-icon);
  height: var(--ds-prep-icon);
  color: var(--colors-feedback-info-text);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-lg);
}

.prep__priority div[b-0nhkitws2n] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.prep__priority[b-0nhkitws2n]  strong { display: block; color: var(--colors-feedback-info-text); }
.prep__priority[b-0nhkitws2n]  p { color: var(--colors-text-secondary); }

/* A hairline between rows rather than whitespace, so a list of five reads as a
   list and not as a wall. */
.prep__list[b-0nhkitws2n] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }

.prep__item[b-0nhkitws2n] {
  display: grid;
  grid-template-columns: var(--ds-prep-row-icon) minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-lg) 0;
  border-bottom: var(--ds-prep-hairline) solid var(--colors-surface-border);
}

.prep__item:last-child[b-0nhkitws2n] { border-bottom: 0; }

.prep__item-icon[b-0nhkitws2n] {
  display: grid;
  place-items: center;
  width: var(--ds-prep-row-icon);
  height: var(--ds-prep-row-icon);
  color: var(--colors-text-secondary);
  background: var(--colors-interaction-hover);
  border-radius: var(--radius-radius-full);
}

.prep__item-copy[b-0nhkitws2n] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.prep__item-copy[b-0nhkitws2n]  strong { display: block; color: var(--colors-text-secondary); }
.prep__item-copy[b-0nhkitws2n]  p { color: var(--colors-text-muted); }

.prep__details[b-0nhkitws2n] { margin-top: var(--spacing-xs); }

.prep__details[b-0nhkitws2n]  summary {
  width: max-content;
  color: var(--colors-brand-primary);
  cursor: pointer;
  list-style: none;
}

.prep__details[b-0nhkitws2n]  summary::-webkit-details-marker { display: none; }

.prep__details[b-0nhkitws2n]  p {
  max-width: var(--ds-prep-details-measure);
  margin-top: var(--spacing-xs);
  padding-left: var(--spacing-sm);
  color: var(--colors-text-muted);
  border-left: var(--ds-prep-rule) solid var(--colors-accent-brand-muted);
}

.prep__agreement[b-0nhkitws2n] {
  margin-top: var(--ds-prep-agreement-gap);
  padding: var(--spacing-lg);
  background: var(--colors-sidebar-background);
  border: var(--ds-prep-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

/* Centred, not top-aligned: this consent line is a single row, so the box sits
   on the text centre. The component keeps flex-start for labels that wrap. */
.prep__agreement[b-0nhkitws2n]  .checkbox { align-items: center; }

/* The consent line sits with the list it confirms, so it takes the same
   secondary weight of colour as the row titles rather than the Checkbox
   component default of primary. */
.prep__agreement[b-0nhkitws2n]  .checkbox__text strong { color: var(--colors-text-secondary); }

/* On a window too short for the whole page, the tick and Continue stay in
   view at its foot while the reading scrolls under them; where it fits, this
   changes nothing. The group reaches the card's edges so the reading passes
   cleanly beneath it, fading out over the gap above the tick. */
.prep__actions[b-0nhkitws2n] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0 calc(var(--ds-prep-pad-x) * -1) calc(var(--ds-prep-pad-bottom) * -1);
  padding: 0 var(--ds-prep-pad-x) var(--ds-prep-pad-bottom);
  background: linear-gradient(to bottom, transparent, var(--colors-surface-card) var(--ds-prep-agreement-gap));
  border-radius: 0 0 var(--radius-radius-3xl) var(--radius-radius-3xl);
}

/* The design-system Button, held to the width the design gives it. */
.prep__footer[b-0nhkitws2n]  .prep__continue { min-width: var(--ds-prep-cta-width); }

.prep__footer[b-0nhkitws2n] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-prep-footer-gap);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ds-prep-footer-gap);
  padding-top: var(--ds-prep-agreement-gap);
  border-top: var(--ds-prep-hairline) solid var(--colors-surface-border);
}

.prep__assurance[b-0nhkitws2n] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  max-width: var(--ds-prep-assurance);
  color: var(--colors-text-muted);
}

/* The shield is the one coloured mark in the footer — it is reassurance, and
   grey reads as disabled. Icon renders its own svg, so this needs ::deep. */
.prep__assurance[b-0nhkitws2n]  svg { color: var(--colors-accent-emerald-solid); }

.prep[b-0nhkitws2n] { --ds-prep-assurance: 380px; }

/* A bespoke primary control rather than the design-system Button: React holds
   a disabled state at full opacity — only the grey fill should read — while
   the shared Button also dims disabled states by half, which double-fades
   the exact control this page opens on (locked until the tick above it). */

.prep[b-0nhkitws2n] { --ds-prep-cta-width: 220px; --ds-prep-cta-height: 46px; }

/* Shorter windows (laptops): the same page, its rhythm drawn in a little, so
   it fits without scrolling down to Continue. Missing from the token set:
   the compact padding is the design's own, smaller. */
@media (max-height: 960px) {
  .prep[b-0nhkitws2n] {
    /* Missing from the token set: the design's spacing, a step tighter. */
    --ds-prep-pad-x: 32px;
    --ds-prep-pad-bottom: 22px;
    --ds-prep-pad: 24px var(--ds-prep-pad-x) var(--ds-prep-pad-bottom);
    --ds-prep-header-gap: 20px;
    --ds-prep-section-gap: 20px;
    --ds-prep-agreement-gap: 16px;
    --ds-prep-footer-gap: 16px;
  }

  .prep__item[b-0nhkitws2n] { padding: var(--spacing-md) 0; }

  .prep__priority[b-0nhkitws2n],
  .prep__agreement[b-0nhkitws2n] { padding: var(--spacing-md) var(--spacing-lg); }
}
/* /Components/Pages/Dashboard/Channels/SetupFailure.razor.rz.scp.css */
/* Failure gets a page, not a toast. It is the common case, and the person
   reading it needs somewhere to stand while they work out what to do. */

.setup-failed[b-q7spxarwmm] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-sm);
  width: min(var(--ds-failed-width), 100%);
  margin-inline: auto;
  padding: var(--spacing-3xl) var(--spacing-2xl);
  text-align: center;
  background: var(--colors-surface-card);
  border: var(--ds-failed-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
}

.setup-failed[b-q7spxarwmm] {
  /* Gaps in the token set: no page-width, control-size or border-width scale. */
  --ds-failed-width: 560px;
  --ds-failed-mark: 56px;
  --ds-failed-hairline: 1px;
  --ds-failed-measure: 46ch;
}

.setup-failed__mark[b-q7spxarwmm] {
  display: grid;
  place-items: center;
  width: var(--ds-failed-mark);
  height: var(--ds-failed-mark);
  margin-bottom: var(--spacing-sm);
  color: var(--colors-feedback-destructive-text);
  background: var(--colors-feedback-destructive-subtle);
  border-radius: var(--radius-radius-full);
}

[b-q7spxarwmm] .setup-failed__reason {
  max-width: var(--ds-failed-measure);
  color: var(--colors-text-muted);
}

/* What to check, in the words of the route they chose — generic advice at this
   point is worse than none. */
/* Warning-toned, not neutral: this is what to check on a screen that just
   said setup did not finish, and reads as caution rather than as a completed
   checklist. */
.setup-failed__recovery[b-q7spxarwmm] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  margin: var(--spacing-lg) var(--spacing-none);
  padding: var(--spacing-lg);
  text-align: left;
  list-style: none;
  background: var(--colors-feedback-warning-subtle);
  border-radius: var(--radius-radius-xl);
}

.setup-failed__recovery li[b-q7spxarwmm] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  color: var(--colors-feedback-warning-text);
}

.setup-failed__recovery li[b-q7spxarwmm] >  svg {
  flex: 0 0 auto;
  margin-top: var(--spacing-2xs);
  color: var(--colors-feedback-warning-text);
}

.setup-failed__actions[b-q7spxarwmm] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}
/* /Components/Pages/Dashboard/Channels/TikTokManualSetup.razor.rz.scp.css */
/* TikTok's manual setup, a step in the Channels flow. The same card and sections as Facebook's
   (FacebookManualSetup.razor.css), repeated here because a Blazor scoped stylesheet cannot
   reach another component's classes. */

.guided[b-e97k8agpjj] {
  display: grid;
  width: min(var(--ds-guided-width), 100%);
  margin-inline: auto;
  /* clip, not hidden: the same rounded corners, but not a scroll box of its
     own, so the footer can stay in view (below). */
  overflow: clip;
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-guided-shadow-blur) var(--colors-surface-shadow);
}

.guided[b-e97k8agpjj] {
  /* Gaps in the token set: no page-width, border-width or control-size scale. */
  --ds-guided-width: var(--ds-setup-card-width);
  --ds-guided-hairline: var(--ds-setup-card-hairline);
  --ds-guided-progress: 4px;
  --ds-guided-marker: 28px;
  --ds-guided-measure: 590px;
  --ds-guided-shadow-blur: var(--ds-setup-card-shadow);
  --ds-guided-body-pad: var(--ds-setup-card-pad);
  --ds-guided-body-pad-preflight: 43px 62px 72px;
  --ds-guided-title-gap: 34px;
  --ds-guided-step-gap: 30px;
  --ds-guided-marker-gap: 14px;
  --ds-guided-rule: 2px;
  /* The rule drops from just under the marker and runs down its centre:
     28px marker + 2px clearance, and (28 - 2) / 2 to centre a 2px line. */
  --ds-guided-rule-top: 30px;
  --ds-guided-rule-left: 13px;
  --ds-guided-link-height: 40px;
  --ds-guided-split: 1120px;
  --ds-guided-copy-min: 280px;
  --ds-guided-demo-min: 480px;
  --ds-guided-motion: 240ms;
}

.guided__header[b-e97k8agpjj] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl);
}

.guided__counter[b-e97k8agpjj] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: baseline;
  color: var(--colors-text-muted);
}

.guided__counter[b-e97k8agpjj]  strong { color: var(--colors-text-primary); }

.guided__progress[b-e97k8agpjj] {
  height: var(--ds-guided-progress);
  background: var(--colors-surface-muted);
}

.guided__progress i[b-e97k8agpjj] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  transition: width var(--ds-guided-motion) ease;
}

.guided__body[b-e97k8agpjj] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  padding: var(--ds-guided-body-pad);
}

[b-e97k8agpjj] .guided__eyebrow { color: var(--colors-text-subtle); }

[b-e97k8agpjj] .guided__lede {
  max-width: var(--ds-guided-measure);
  color: var(--colors-text-muted);
}

/* Numbered, because they happen in order on the provider screen and doing them
   out of order is how people end up on the wrong page. */
.guided__instructions[b-e97k8agpjj] {
  display: grid;
  gap: var(--spacing-none);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

/* A rule runs from each marker to the next, so three instructions read as one
   path rather than three unrelated rows. The last one has nothing to join. */
.guided__instructions li[b-e97k8agpjj] {
  position: relative;
  display: grid;
  grid-template-columns: var(--ds-guided-marker) minmax(0, 1fr);
  gap: var(--ds-guided-marker-gap);
  align-items: start;
  padding-bottom: var(--ds-guided-step-gap);
}

.guided__instructions li:last-child[b-e97k8agpjj] { padding-bottom: var(--spacing-none); }

.guided__instructions li:not(:last-child)[b-e97k8agpjj]::before {
  position: absolute;
  top: var(--ds-guided-rule-top);
  left: var(--ds-guided-rule-left);
  width: var(--ds-guided-rule);
  height: calc(100% - var(--ds-guided-rule-top));
  content: "";
  background: var(--colors-surface-border);
  border-radius: var(--ds-guided-rule);
}

[b-e97k8agpjj] .guided__marker {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-guided-marker);
  height: var(--ds-guided-marker);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

/* 2px holds a label to the line it heads. The link is a control, not another
   line of copy, so it stands off further. */
.guided__instruction[b-e97k8agpjj] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.guided__instruction .guided__link[b-e97k8agpjj] { margin-top: var(--spacing-sm); }
.guided__instruction[b-e97k8agpjj]  p { color: var(--colors-text-secondary); }
.guided__instruction[b-e97k8agpjj]  strong { color: var(--colors-text-primary); }

/* The one thing on the step that takes you out of the product, so it is drawn
   as a control with an edge rather than a tinted tag. */
.guided__link[b-e97k8agpjj] {
  display: inline-flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-self: start;
  width: max-content;
  height: var(--ds-guided-link-height);
  padding: var(--spacing-none) var(--spacing-lg);
  color: var(--colors-text-link);
  background: var(--colors-surface-card);
  border: var(--ds-guided-hairline) solid color-mix(in srgb, var(--colors-text-link) 28%, transparent);
  border-radius: var(--radius-radius-full);
  text-decoration: none;
}

.guided__link:hover[b-e97k8agpjj] {
  color: var(--colors-text-link-hover);
  background: color-mix(in srgb, var(--colors-text-link) 7%, transparent);
  border-color: var(--colors-text-link);
}

.guided__aside[b-e97k8agpjj] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border: var(--ds-guided-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

/* A long setup: Save and exit stays in view at the window's foot. */
.guided__footer[b-e97k8agpjj] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--colors-surface-muted);
  border-top: var(--ds-guided-hairline) solid var(--colors-surface-border);
}


.manual[b-e97k8agpjj] {
  display: grid;
  gap: var(--ds-manual-gap);
  /* Gaps in the token set: no measure or fine spacing scale. */
  --ds-manual-intro-measure: 660px;
  --ds-manual-gap: 10px;
}

.manual__section[b-e97k8agpjj] {
  /* Keeps the section clear of the top edge when it is scrolled into view, so
     it reads as part of a card rather than jammed against the chrome. */
  scroll-margin-top: var(--ds-manual-scroll-margin);
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-manual-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.manual__section[b-e97k8agpjj] {
  /* Gaps in the token set: no border-width, control-size or opacity scale. */
  --ds-manual-hairline: 1px;
  --ds-manual-scroll-margin: 24px;
  --ds-manual-marker: 32px;
  --ds-manual-header-min: 74px;
  --ds-manual-header-pad: 13px 15px;
  --ds-manual-body-pad: 18px 20px 20px;
  --ds-manual-upcoming: 0.68;
  --ds-manual-title-gap: 3px;
  --ds-manual-token-gap: 9px;
  --ds-manual-token-inner: 10px;
  --ds-manual-token-icon: 28px;
  --ds-manual-token-tick: 18px;
  --ds-manual-token-min: 66px;
  --ds-manual-token-pad: 10px 13px;
  --ds-manual-token-radius: 13px;
  --ds-manual-token-motion: 140ms;
}

/* Current is where the flow is waiting — stated softly, as a tint of the
   brand mixed into the ordinary border. Open is where you are looking right
   now, and takes the full-strength border plus a ring. A section is usually
   both, and when it is, open wins. */
.manual__section.is-current[b-e97k8agpjj] {
  border-color: color-mix(in srgb, var(--colors-brand-primary) 35%, var(--colors-surface-border));
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) color-mix(in srgb, var(--colors-brand-primary) 7%, transparent);
}

.manual__section.is-open[b-e97k8agpjj] {
  border-color: var(--colors-brand-primary);
  box-shadow: 0 0 0 var(--ds-manual-hairline) var(--colors-brand-primary);
}

/* Not yet reachable, so it is dimmed rather than hidden — seeing what is
   coming is what makes three sections feel finite. */
.manual__section.is-upcoming > .manual__header[b-e97k8agpjj] { opacity: var(--ds-manual-upcoming); }

.manual__header[b-e97k8agpjj] {
  display: grid;
  grid-template-columns: var(--ds-manual-marker) minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--ds-manual-header-min);
  padding: var(--ds-manual-header-pad);
}

.manual__marker[b-e97k8agpjj] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ds-manual-marker);
  height: var(--ds-manual-marker);
  color: var(--colors-text-muted);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

.manual__section.is-current .manual__marker[b-e97k8agpjj] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
}

.manual__section.is-complete .manual__marker[b-e97k8agpjj] {
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
}

.manual__titles[b-e97k8agpjj] { display: grid; gap: var(--ds-manual-title-gap); min-width: 0; }
.manual__titles[b-e97k8agpjj]  p { color: var(--colors-text-muted); }

.manual__status[b-e97k8agpjj] {
  flex: 0 0 auto;
  color: var(--colors-text-subtle);
}

.manual__reopen[b-e97k8agpjj] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex: 0 0 auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-link);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.manual__reopen:hover[b-e97k8agpjj] { background: var(--colors-interaction-hover); }

.manual__body[b-e97k8agpjj] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--ds-manual-body-pad);
  border-top: var(--ds-manual-hairline) solid var(--colors-surface-border);
}

.manual__body > *[b-e97k8agpjj] { width: 100%; min-width: 0; }

.manual__body[b-e97k8agpjj]  p { color: var(--colors-text-secondary); }
.manual__body[b-e97k8agpjj]  strong { color: var(--colors-text-primary); }

.manual__checklist[b-e97k8agpjj],
.manual__ordered[b-e97k8agpjj] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.manual__checklist li[b-e97k8agpjj],
.manual__ordered li[b-e97k8agpjj] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  color: var(--colors-text-secondary);
}

.manual__fields[b-e97k8agpjj] {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

.manual__copy-values[b-e97k8agpjj] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
}

/* /Components/Pages/Dashboard/Channels/WhatsAppCatalogue.razor.rz.scp.css */
.wac[b-kskn1wda7n] {
  padding: var(--spacing-4xl) var(--ds-channels-gutter) var(--spacing-5xl);
}

.wac > *[b-kskn1wda7n] {
  width: min(var(--ds-wac-max), 100%);
  margin-inline: auto;
}

.wac[b-kskn1wda7n] {
  /* Gaps in the token set: no page-gutter or content-width. */
  --ds-channels-gutter: clamp(28px, 4vw, 66px);
  --ds-wac-max: 1280px;
  --ds-wac-measure: 480px;
}

.wac__header[b-kskn1wda7n] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
  flex-wrap: wrap;
}

.wac__heading[b-kskn1wda7n] {
  display: grid;
  gap: var(--spacing-sm);
}

.wac__lede[b-kskn1wda7n] {
  color: var(--colors-text-secondary);
  max-width: var(--ds-wac-measure);
}

.wac__actions[b-kskn1wda7n] {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  flex-shrink: 0;
}

.wac__sync-summary[b-kskn1wda7n] {
  color: var(--colors-text-secondary);
}

/* Product table rows — 3 columns: item, price, availability */
.wac__row[b-kskn1wda7n] {
  --ds-table-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr);
  /* Gaps in the token set: no avatar-size token yet. */
  --ds-wac-thumb: 48px;
}

/* Item column: avatar beside name + type */
.wac__item[b-kskn1wda7n] { display: flex; gap: var(--spacing-md); align-items: center; min-width: 0; }

.wac__picture[b-kskn1wda7n] { display: grid; flex: none; }
.wac__picture[b-kskn1wda7n]  .petal-avatar {
  width: var(--ds-wac-thumb);
  height: var(--ds-wac-thumb);
  border-radius: var(--radius-radius-lg);
}

.wac__words[b-kskn1wda7n] { display: grid; gap: var(--spacing-xs); min-width: 0; overflow: hidden; }

.wac__meta[b-kskn1wda7n] { color: var(--colors-text-muted); }

.wac__price[b-kskn1wda7n] { color: var(--colors-text-primary); }
.wac__no-price[b-kskn1wda7n] { color: var(--colors-text-subtle); }

.wac__available[b-kskn1wda7n] { position: relative; z-index: 1; }

/* Load more */
.wac__load-more[b-kskn1wda7n] {
  margin-top: var(--spacing-3xl);
  display: flex;
  justify-content: center;
  width: min(var(--ds-wac-max), 100%);
  margin-inline: auto;
}

/* On tablet and smaller the table row stacks; item takes full width, price and
   availability sit side by side on the next line. */
@media (max-width: 1024px) {
  .wac__row[b-kskn1wda7n] {
    --ds-table-columns: minmax(0, 1fr) auto;
    grid-template-areas: "item item" "price available";
  }
  .wac__item[b-kskn1wda7n] { grid-area: item; }
  .wac__price[b-kskn1wda7n] { grid-area: price; padding-left: calc(var(--ds-wac-thumb) + var(--spacing-md)); }
  .wac__available[b-kskn1wda7n] { grid-area: available; }
}
/* /Components/Pages/Dashboard/Contacts/AddContactModal.razor.rz.scp.css */
/* Adding a customer: one column of fields, the dialog's own rhythm. */
.add-customer[b-0w5nv716fl] { display: grid; gap: var(--spacing-md); text-align: start; }
/* /Components/Pages/Dashboard/Contacts/ContactRow.razor.rz.scp.css */
/* A row of the Customers table, and its column names (is-head). The table's look (padding, the line between
   rows, the header band, hover, just added) is the shared DataTable's (designer, 28 October 2026: every
   table alike); the columns and cells are this table's own. */
.customer-row[b-hz63s69icm] {
  /* Gaps in the token set: no border-width scale, and the columns are this table's own. */
  --ds-customer-hairline: 1px;
  --ds-customer-when: 160px;
  --ds-customer-tasks: 120px;
  --ds-table-columns: minmax(0, 2fr) minmax(0, 1.4fr) var(--ds-customer-when);
}
.customer-row.has-tasks[b-hz63s69icm] { --ds-table-columns: minmax(0, 2fr) minmax(0, 1.4fr) var(--ds-customer-when) var(--ds-customer-tasks); }
.customer-row__facts > *[b-hz63s69icm] { min-width: 0; }
.customer-row__facts[b-hz63s69icm] { display: contents; }

.customer-row__who[b-hz63s69icm] { display: flex; gap: var(--spacing-md); align-items: center; }
.customer-row__words[b-hz63s69icm] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.customer-row[b-hz63s69icm]  .customer-row__muted { color: var(--colors-text-muted); }

/* The name's button covers the row, so a click anywhere opens Customer details. */
.customer-row__words[b-hz63s69icm]  .customer-row__name {
  justify-content: start;
  min-height: auto;
  padding: var(--spacing-none);
  color: var(--colors-text-primary);
  text-align: start;
  background: transparent;
}
.customer-row__words[b-hz63s69icm]  .customer-row__name::after { position: absolute; inset: 0; content: ""; }
.customer-row__words[b-hz63s69icm]  .customer-row__name:focus-visible { outline: none; }
.customer-row__words[b-hz63s69icm]  .customer-row__name:focus-visible::after { outline: var(--ds-customer-hairline) solid var(--colors-brand-primary); outline-offset: calc(var(--ds-customer-hairline) * -1); }

.customer-row__channels[b-hz63s69icm] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); align-items: center; }
.customer-row__channel[b-hz63s69icm] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-secondary); }

.customer-row__when[b-hz63s69icm] { color: var(--colors-text-secondary); }
.customer-row__count[b-hz63s69icm] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-brand-primary); }

/* A tablet: the customer on top, then their channels, when and what's open, in one line under the name. */
@media (max-width: 1024px) {
  .customer-row[b-hz63s69icm],
  .customer-row.has-tasks[b-hz63s69icm] { --ds-table-columns: minmax(0, 1fr); }
  .customer-row__facts[b-hz63s69icm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-lg);
    align-items: center;
    padding-left: calc(var(--spacing-2xl) + var(--spacing-md));
  }
  /* Without its column name, a lone "None" says nothing: nothing open, nothing shown. */
  .customer-row__tasks.is-none[b-hz63s69icm] { display: none; }
}
/* /Components/Pages/Dashboard/Contacts/Contacts.razor.rz.scp.css */
/* Customers: laid out as Products & Services and Tasks are: the title, then search and the channel filter,
   then the table in a white card. The gutter outside, then everything on one 1440 measure, centred. */
.customers[b-zyjgbnmub9] {
  /* Gaps in the token set: no page-gutter, page-width, readable-measure, search-width or border-width scale.
     The same values as the Tasks page. */
  --ds-customers-gutter: clamp(28px, 4vw, 66px);
  --ds-customers-max: 1440px;
  --ds-customers-measure: 680px;
  --ds-customers-search: 320px;
  --ds-customers-hairline: 1px;

  display: grid;
  padding: var(--spacing-4xl) var(--ds-customers-gutter) var(--spacing-6xl);
  color: var(--colors-text-primary);
}

.customers[b-zyjgbnmub9] >  * { width: min(var(--ds-customers-max), 100%); min-width: 0; margin-inline: auto; }
.customers[b-zyjgbnmub9]  p,
.customers[b-zyjgbnmub9]  h1 { margin: var(--spacing-none); }

/* The title and its line on the left; the actions level with the line's foot. */
.customers__header[b-zyjgbnmub9] {
  display: flex;
  gap: var(--spacing-3xl);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--spacing-2xl);
}
.customers__heading[b-zyjgbnmub9] { display: grid; gap: var(--spacing-sm); }
.customers__heading[b-zyjgbnmub9]  .customers__lede { max-width: var(--ds-customers-measure); color: var(--colors-text-secondary); }
.customers__actions[b-zyjgbnmub9] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

/* Search, then the channel filter, on the right: where Tasks and Products & Services keep theirs. */
.customers__controls[b-zyjgbnmub9] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--spacing-lg);
}
.customers__controls[b-zyjgbnmub9]  .customers__search { width: var(--ds-customers-search); }

/* The table, its card and its pages are the shared DataTable's (designer, 28 October 2026). */

.customers__panel-footer[b-zyjgbnmub9] { display: flex; justify-content: flex-end; width: 100%; }

@media (max-width: 1024px) {
  /* The actions under the title, side by side, rather than squeezed beside it. */
  .customers__header[b-zyjgbnmub9] { flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); }
  .customers__controls[b-zyjgbnmub9]  .customers__search { flex: 1; width: auto; }
}

@media (max-width: 760px) {
  .customers__header[b-zyjgbnmub9] { align-items: stretch; }
}
/* /Components/Pages/Dashboard/Contacts/CustomerLinkDialog.razor.rz.scp.css */
.customer-link[b-iwj3iz88kj] { display: grid; gap: var(--spacing-lg); min-width: 0; }
.customer-link[b-iwj3iz88kj]  p, .customer-link[b-iwj3iz88kj]  h3 { margin: var(--spacing-none); }
.customer-link__profile[b-iwj3iz88kj] { display: grid; align-content: start; gap: var(--spacing-xs); padding: var(--spacing-lg); min-width: 0; background: var(--colors-surface-card); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-xl); overflow-wrap: anywhere; }
.customer-link__profile[b-iwj3iz88kj] >  p { color: var(--colors-text-muted); }
.customer-link__profile[b-iwj3iz88kj] >  h3 { color: var(--colors-text-primary); }
.customer-link__identity[b-iwj3iz88kj] { display: flex; align-items: center; gap: var(--spacing-xs); min-width: 0; }
.customer-link__identity[b-iwj3iz88kj] >  span:last-child { overflow-wrap: anywhere; }
.customer-link__results[b-iwj3iz88kj] { display: grid; gap: var(--spacing-xs); max-height: 36dvh; overflow-y: auto; }
.customer-link__results[b-iwj3iz88kj] >  p { padding: var(--spacing-lg); color: var(--colors-text-muted); }
.customer-link[b-iwj3iz88kj]  .customer-link__choice { display: flex; gap: var(--spacing-md); align-items: center; padding: var(--spacing-md); border-radius: var(--radius-radius-lg); text-align: left; }
.customer-link__choice-words[b-iwj3iz88kj] { display: grid; flex: 1; gap: var(--spacing-xs); min-width: 0; }
.customer-link__choice-words[b-iwj3iz88kj]  small { color: var(--colors-text-muted); }
.customer-link__comparison[b-iwj3iz88kj] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
.customer-link__notice[b-iwj3iz88kj] { display: flex; align-items: start; gap: var(--spacing-sm); padding: var(--spacing-md); color: var(--colors-text-secondary); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-lg); }
.customer-link__notice[b-iwj3iz88kj] >  svg { flex: 0 0 auto; margin-top: var(--spacing-2xs); color: var(--colors-brand-primary); }
.customer-link__linked-row[b-iwj3iz88kj] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-sm); align-items: center; }
@media (max-width: 760px) { .customer-link__comparison[b-iwj3iz88kj] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Pages/Dashboard/Contacts/CustomerProfiles.razor.rz.scp.css */
.customer-profiles[b-tsrupd4rw5] { display: grid; gap: var(--spacing-md); min-width: 0; }
.customer-profiles[b-tsrupd4rw5] >  p { margin: var(--spacing-none); color: var(--colors-text-muted); }
.customer-profiles__channel[b-tsrupd4rw5] { display: grid; grid-template-columns: var(--spacing-xl) minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-sm); padding-block: var(--spacing-xs); }
.customer-profiles__channel > span[b-tsrupd4rw5] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.customer-profiles__channel[b-tsrupd4rw5]  small { color: var(--colors-text-muted); }
.customer-profiles__channel[b-tsrupd4rw5]  strong { color: var(--colors-text-primary); overflow-wrap: anywhere; }
/* /Components/Pages/Dashboard/Contacts/ImportContactModal.razor.rz.scp.css */
/* Importing customers: one place to bring a list in (the drop zone, or a pasted list), then what was found,
   to check and correct, then adding. */
.import[b-4sm9rgmry9] {
  /* Gaps in the token set: no border-width scale, drop-zone height or review-list height. */
  --ds-import-hairline: 1px;
  --ds-import-drop: 232px;
  --ds-import-list: min(52vh, 480px);
  --ds-import-measure: 460px;

  display: grid;
  gap: var(--spacing-lg);
  color: var(--colors-text-primary);
  text-align: start;
}
.import[b-4sm9rgmry9]  p,
.import[b-4sm9rgmry9]  h3 { margin: var(--spacing-none); }
.import[b-4sm9rgmry9]  .import__muted { color: var(--colors-text-muted); }
.import[b-4sm9rgmry9]  .import__secondary { color: var(--colors-text-secondary); }
.import[b-4sm9rgmry9]  .import__problem { color: var(--colors-feedback-warning-text); }

/* The drop zone: the dialog's surface with a dashed edge, never grey (grey reads as disabled). A dropped file, or a click
   anywhere but the buttons, reaches the invisible file input under them. */
.import__drop[b-4sm9rgmry9] {
  position: relative;
  display: grid;
  gap: var(--spacing-xl);
  place-items: center;
  align-content: center;
  min-height: var(--ds-import-drop);
  padding: var(--spacing-3xl) var(--spacing-xl);
  text-align: center;
  /* The dialog's own surface, in light and dark. */
  background: transparent;
  border: var(--ds-import-hairline) dashed var(--colors-surface-input);
  border-radius: var(--radius-radius-xl);
  transition: border-color var(--ds-motion-fast) ease, background var(--ds-motion-fast) ease;
}
.import__drop[hidden][b-4sm9rgmry9],
.import__template[hidden][b-4sm9rgmry9] { display: none; }
.import__drop:hover[b-4sm9rgmry9],
.import__drop.is-dragging[b-4sm9rgmry9] { background: var(--colors-accent-brand-subtle); border-color: var(--colors-brand-primary); }
.import__drop[b-4sm9rgmry9]  .import__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.import__drop-mark[b-4sm9rgmry9] {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
  pointer-events: none;
}
.import__drop-words[b-4sm9rgmry9] { position: relative; display: grid; gap: var(--spacing-2xs); justify-items: center; max-width: var(--ds-import-measure); margin-top: calc(var(--spacing-sm) * -1); pointer-events: none; }
.import__drop-words[b-4sm9rgmry9]  strong { color: var(--colors-text-primary); }
/* Above the file input, so they're buttons, not a way to choose a file. */
.import__drop-actions[b-4sm9rgmry9] { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }

/* The template: a quiet line under the zone, for the few who use a spreadsheet. */
.import__template[b-4sm9rgmry9] { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs); align-items: center; justify-content: center; }
/* Read as a link in the sentence, not a second button row. */
.import__template[b-4sm9rgmry9]  .import__template-link { padding-inline: var(--spacing-xs); color: var(--colors-brand-primary); }

.import[b-4sm9rgmry9]  .import__paste textarea { font-variant-numeric: tabular-nums; }

/* What was found: where from, then what needs a look, then what's ready. */
.import__source[b-4sm9rgmry9] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--colors-surface-muted);
  /* An edge too: in dark mode the muted fill is the dialog's own (a gap in the token set). */
  border: var(--ds-import-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.import__source-mark[b-4sm9rgmry9] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  color: var(--colors-brand-primary);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
}
.import__source-words[b-4sm9rgmry9] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.import__source-words[b-4sm9rgmry9]  strong { color: var(--colors-text-primary); }

.import__group[b-4sm9rgmry9] { display: grid; gap: var(--spacing-xs); }
.import__group[b-4sm9rgmry9]  h3 { color: var(--colors-text-secondary); }
.import__group ul[b-4sm9rgmry9] {
  display: grid;
  max-height: var(--ds-import-list);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  overflow-y: auto;
  list-style: none;
}
.import__group[b-4sm9rgmry9]  > .ds-button { justify-self: start; }

.import__row[b-4sm9rgmry9] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xs);
  border-bottom: var(--ds-import-hairline) solid var(--colors-surface-border);
}
.import__row:last-child[b-4sm9rgmry9] { border-bottom-color: transparent; }
.import__row-words[b-4sm9rgmry9] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.import__row-words[b-4sm9rgmry9]  span { overflow-wrap: anywhere; }
.import__row-actions[b-4sm9rgmry9] { display: flex; flex: none; gap: var(--spacing-2xs); align-items: center; }

/* A row being corrected: its fields side by side, then what's still wrong and Done. */
.import__row.is-editing[b-4sm9rgmry9] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--colors-surface-muted);
  border: var(--ds-import-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.import__fields[b-4sm9rgmry9] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--spacing-sm); }
.import__row-foot[b-4sm9rgmry9] { display: flex; gap: var(--spacing-md); align-items: center; justify-content: flex-end; }
.import__row-foot[b-4sm9rgmry9]  .import__problem { flex: 1; }

/* Done: how many, said once. */
.import__done[b-4sm9rgmry9] { display: grid; gap: var(--spacing-xs); justify-items: center; padding-block: var(--spacing-xl); text-align: center; }
.import__done-mark[b-4sm9rgmry9] {
  display: grid;
  place-items: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  margin-bottom: var(--spacing-xs);
  color: var(--colors-feedback-success-text);
  background: var(--colors-feedback-success-subtle);
  border-radius: var(--radius-radius-full);
}
.import__done-mark.is-partial[b-4sm9rgmry9] { color: var(--colors-feedback-warning-text); background: var(--colors-feedback-warning-subtle); }

@media (max-width: 760px) {
  .import__fields[b-4sm9rgmry9] { grid-template-columns: minmax(0, 1fr); }
  .import__row[b-4sm9rgmry9] { align-items: flex-start; }
}
/* /Components/Pages/Dashboard/Conversations/ChannelGlyph.razor.rz.scp.css */
.channel-glyph[b-3o14cu6ga3] {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--ds-channel-glyph);
  height: var(--ds-channel-glyph);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}

.channel-glyph--instagram[b-3o14cu6ga3] {
  color: var(--colors-accent-rose-text);
  background: var(--colors-accent-rose-subtle);
}

.channel-glyph--whatsapp[b-3o14cu6ga3] {
  color: var(--colors-accent-teal-text);
  background: var(--colors-accent-teal-subtle);
}

.channel-glyph.is-tile[b-3o14cu6ga3] {
  width: var(--ds-channel-tile);
  height: var(--ds-channel-tile);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

.channel-glyph[b-3o14cu6ga3] {
  /* No compact avatar-size token exists. */
  --ds-channel-glyph: 32px;
  --ds-channel-tile: 36px;
}

.channel-glyph--facebook[b-3o14cu6ga3] {
  color: var(--colors-accent-blue-text);
  background: var(--colors-accent-blue-subtle);
}

/* TikTok's mark follows the text colour, as ChannelIcon draws it. */
.channel-glyph--tiktok[b-3o14cu6ga3] {
  color: var(--colors-text-primary);
  background: var(--colors-surface-muted);
}

/* Inline with a line of text: no edge, a smaller square. */
.channel-glyph.is-compact[b-3o14cu6ga3] {
  width: var(--ds-channel-compact);
  height: var(--ds-channel-compact);
  border: 0;
  border-radius: var(--radius-radius-sm);
}

.channel-glyph[b-3o14cu6ga3] { --ds-channel-compact: 18px; }
/* /Components/Pages/Dashboard/Conversations/ChannelHandoff.razor.rz.scp.css */
.channel-handoff[b-tho98t9pyh] { display: flex; gap: var(--spacing-md); align-items: flex-start; padding: var(--spacing-xs); color: var(--colors-text-secondary); }
.channel-handoff__icon[b-tho98t9pyh] { display: grid; flex: 0 0 auto; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); color: var(--colors-feedback-warning-text); background: var(--colors-feedback-warning-subtle); border-radius: var(--radius-radius-full); }
.channel-handoff__copy[b-tho98t9pyh] { display: grid; gap: var(--spacing-xs); justify-items: start; min-width: 0; }
.channel-handoff__copy[b-tho98t9pyh]  strong { color: var(--colors-text-primary); }
.channel-handoff__copy[b-tho98t9pyh]  p,
.channel-handoff__copy[b-tho98t9pyh]  small { color: var(--colors-text-muted); }

.channel-handoff__open[b-tho98t9pyh] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--colors-brand-primary-foreground);
  text-decoration: none;
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
}
.channel-handoff__open:hover[b-tho98t9pyh] { background: var(--colors-brand-primary-hover); }
.channel-handoff__open:focus-visible[b-tho98t9pyh] { outline: var(--ds-hairline) solid var(--colors-brand-primary); outline-offset: var(--spacing-2xs); }
/* /Components/Pages/Dashboard/Conversations/ConversationComposer.razor.rz.scp.css */
.conversation-composer[b-9wcsct231l] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-composer-shadow) var(--colors-surface-shadow);
  /* Locking and unlocking, as the bar above changes hands, eases instead of flashing. */
  transition: background-color var(--ds-composer-motion) ease, border-color var(--ds-composer-motion) ease;
}

.conversation-composer.is-note[b-9wcsct231l] { border-color: var(--colors-feedback-warning-border); }
.conversation-composer.is-reply-locked[b-9wcsct231l] { background: var(--colors-surface-muted); }
.conversation-composer.is-disabled[b-9wcsct231l] { opacity: var(--ds-composer-disabled-opacity); }

/* React's composer tabs are flat: no tray, the chosen one is filled. */
/* The tabs are the design system's Flat set. */

.conversation-composer__disclosure[b-9wcsct231l] { display: flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-brand-primary); }
/* Note mode, as React draws it: the note tab and the privacy line in amber. */
.conversation-composer__disclosure.is-note[b-9wcsct231l] { padding: var(--spacing-xs) var(--spacing-sm); color: var(--colors-accent-yellow-text); background: var(--colors-accent-amber-muted); border-radius: var(--radius-radius-md); }
.conversation-composer.is-note[b-9wcsct231l]  .ds-tab.is-active { color: var(--colors-feedback-warning-text); background: var(--colors-accent-amber-subtle); }
.conversation-composer__attachment[b-9wcsct231l] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-xs); align-items: center; width: fit-content; max-width: 100%; padding: var(--spacing-xs) var(--spacing-sm); color: var(--colors-text-muted); background: var(--colors-surface-muted); border-radius: var(--radius-radius-full); }
.conversation-composer__attachment button[b-9wcsct231l] { display: grid; place-items: center; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
/* The message a reply quotes (designer, 19 October 2026): a quiet card above the box, with no coloured edge.
   A reply arrow in the quoted side's colour says what it is, who wrote it leads, and up to two muted lines of
   what they said sit apart from what is being typed. */
.conversation-composer__quote[b-9wcsct231l] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
  animation: composer-quote-in-b-9wcsct231l var(--ds-motion-base) var(--ds-motion-enter);
  --ds-composer-quote-ink: var(--colors-accent-brand-text);
  /* Missing from the token set: the reply arrow's round tile, an avatar's size in the thread. */
  --ds-composer-quote-glyph: 32px;
}
.conversation-composer__quote.is-own[b-9wcsct231l] { --ds-composer-quote-ink: var(--colors-accent-teal-text); }
.conversation-composer__quote-glyph[b-9wcsct231l] {
  display: grid;
  place-items: center;
  width: var(--ds-composer-quote-glyph);
  height: var(--ds-composer-quote-glyph);
  color: var(--ds-composer-quote-ink);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--ds-hairline) var(--spacing-xs) var(--colors-surface-shadow-diffuse);
}
.conversation-composer__quote-text[b-9wcsct231l] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.conversation-composer__quote-text[b-9wcsct231l]  strong { color: var(--colors-text-primary); }
.conversation-composer__quote-text[b-9wcsct231l]  .conversation-composer__quote-body {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--colors-text-muted);
  /* Its line breaks fold into spaces, so two lines are always two lines of words. */
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.conversation-composer__quote-text[b-9wcsct231l]  .conversation-composer__quote-media { margin-inline-end: var(--spacing-2xs); vertical-align: middle; }
.conversation-composer__quote[b-9wcsct231l]  .ds-button { color: var(--colors-text-muted); }
@keyframes composer-quote-in-b-9wcsct231l { from { opacity: 0; transform: translateY(var(--spacing-xs)); } }
@media (prefers-reduced-motion: reduce) { .conversation-composer__quote[b-9wcsct231l] { animation: none; } }

.conversation-composer > footer[b-9wcsct231l] { display: flex; gap: var(--spacing-sm); align-items: center; }
.conversation-composer__tools[b-9wcsct231l] { display: flex; gap: var(--spacing-xs); align-items: center; }
.conversation-composer__tool[b-9wcsct231l] { display: grid; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); padding: 0; color: var(--colors-text-muted); background: transparent; border: 0; border-radius: var(--radius-radius-full); cursor: pointer; }
.conversation-composer__tool:hover[b-9wcsct231l] { color: var(--colors-brand-primary); background: var(--colors-interaction-hover); }
.conversation-composer__tool:disabled[b-9wcsct231l],
.conversation-composer__tool.is-disabled[b-9wcsct231l] { cursor: not-allowed; opacity: var(--ds-composer-disabled-opacity); pointer-events: none; }
/* React's send hint: the character count and the shortcut that sends. */
.conversation-composer__hint[b-9wcsct231l] { display: flex; flex: 1; gap: var(--spacing-2xs); align-items: center; justify-content: flex-end; min-width: 0; color: var(--colors-text-subtle); }
.conversation-composer__hint[b-9wcsct231l] >  span { margin-right: var(--spacing-xs); }
.conversation-composer__hint kbd[b-9wcsct231l] { display: grid; place-items: center; min-width: var(--spacing-lg); height: var(--spacing-lg); padding: 0 var(--spacing-2xs); color: var(--colors-text-muted); font-family: inherit; background: var(--colors-surface-muted); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-xs); }
[b-9wcsct231l] .conversation-composer__tool { color: var(--colors-text-muted); }
/* React draws an unavailable tool as a quieter icon, not a filled disabled control. */
[b-9wcsct231l] .conversation-composer__tool:disabled { background: transparent; }

.conversation-composer[b-9wcsct231l] {
  /* Missing from the token set: no composer height, shadow or disabled-opacity scale. */
  --ds-composer-shadow: 36px;
  --ds-composer-motion: 260ms;
  --ds-composer-disabled-opacity: 0.58;
}

@media (prefers-reduced-motion: reduce) {
  .conversation-composer[b-9wcsct231l] { transition: none; }
}

/* Narrow screens: the keyboard-shortcut hint means nothing on a touch keyboard. */
@media (max-width: 760px) {
  .conversation-composer__hint kbd[b-9wcsct231l] { display: none; }
  .conversation-composer[b-9wcsct231l] { border-radius: var(--radius-radius-xl); }
}
/* /Components/Pages/Dashboard/Conversations/ConversationMessageItem.razor.rz.scp.css */
.message-bubble[b-uo6xekef1m] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  max-width: var(--ds-message-measure);
}

.message-bubble.is-outbound[b-uo6xekef1m] { flex-direction: row-reverse; }

/* The message's row, the thread's width: the space beside the message is where a double-click replies. */
.message-row[b-uo6xekef1m] { display: flex; }
.message-row.is-outbound[b-uo6xekef1m] { justify-content: flex-end; }

.message-bubble__content[b-uo6xekef1m] { display: grid; min-width: 0; }
.message-bubble[b-uo6xekef1m]  .ds-button.message-customer-trigger {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: var(--radius-radius-lg);
}
.message-bubble[b-uo6xekef1m]  .ds-button.message-customer-trigger:hover:not(:disabled),
.message-bubble[b-uo6xekef1m]  .ds-button.message-customer-trigger:active:not(:disabled) { background: transparent; box-shadow: none; }
.message-bubble[b-uo6xekef1m]  .ds-button.message-customer-trigger .ds-button__icon { width: auto; height: auto; }
.message-bubble__content > header[b-uo6xekef1m] { display: flex; gap: var(--spacing-sm); align-items: center; margin-bottom: var(--spacing-xs); }
.message-bubble.is-outbound .message-bubble__content > header[b-uo6xekef1m] { justify-content: flex-end; }
.message-bubble__content > header[b-uo6xekef1m]  strong { color: var(--colors-text-secondary); }
.message-bubble__content > header[b-uo6xekef1m]  span { padding: var(--spacing-2xs) var(--spacing-xs); color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-full); }

[b-uo6xekef1m] .message-bubble__body {
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--colors-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-sm) var(--radius-radius-lg) var(--radius-radius-lg) var(--radius-radius-lg);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-md) var(--colors-surface-shadow-diffuse);
}

.message-bubble.is-outbound[b-uo6xekef1m]  .message-bubble__body {
  border-radius: var(--radius-radius-lg) var(--radius-radius-sm) var(--radius-radius-lg) var(--radius-radius-lg);
}

.message-bubble.is-human[b-uo6xekef1m]  .message-bubble__body {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-color: var(--colors-brand-primary);
}

.message-bubble.is-ai[b-uo6xekef1m]  .message-bubble__body {
  color: var(--colors-text-secondary);
  background: var(--colors-accent-brand-subtle);
  border-color: var(--colors-accent-brand-muted);
}

.message-bubble__content > footer[b-uo6xekef1m] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--spacing-xs);
  padding-inline: var(--spacing-xs);
  color: var(--colors-text-subtle);
}

.message-delivery[b-uo6xekef1m],
.message-learning[b-uo6xekef1m] { display: inline-flex; gap: var(--spacing-2xs); align-items: center; }
.message-learning[b-uo6xekef1m] { color: var(--colors-accent-teal-text); }
/* A send outcome, then what the channel reports: accepted, delivered, read. */
.message-delivery.is-failed[b-uo6xekef1m] { color: var(--colors-feedback-destructive-text); }
.message-delivery.is-read[b-uo6xekef1m] { color: var(--colors-accent-teal-text); }
.message-correction[b-uo6xekef1m] { display: inline-flex; gap: var(--spacing-2xs); align-items: center; padding: var(--spacing-2xs) var(--spacing-xs); color: var(--colors-brand-primary); background: transparent; border: 0; border-radius: var(--radius-radius-full); cursor: pointer; }
.message-correction:hover[b-uo6xekef1m] { background: var(--colors-interaction-hover); }

.message-bubble__ai-avatar[b-uo6xekef1m] {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-md);
}

.message-attachment[b-uo6xekef1m] {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  max-width: var(--ds-message-attachment);
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-text-muted);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-md);
}

.message-bubble.is-outbound .message-attachment[b-uo6xekef1m] { margin-left: auto; }

/* The thumbnail is a design-system Button, a child component, so its rules
   must reach into it (::deep); without that they never apply and the button
   stretches to the whole bubble. */
.message-bubble__content[b-uo6xekef1m]  .message-image {
  display: grid;
  justify-self: start;
  width: var(--ds-message-image);
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin-top: var(--spacing-sm);
  padding: 0;
  overflow: hidden;
  color: var(--colors-text-muted);
  text-align: left;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

.message-bubble.is-outbound .message-bubble__content[b-uo6xekef1m]  .message-image { justify-self: end; margin-left: auto; }
.message-bubble__content[b-uo6xekef1m]  .message-image .ds-button__label { display: grid; width: 100%; padding: 0; overflow: visible; line-height: normal; }
.message-bubble__content[b-uo6xekef1m]  .message-image:hover:not(:disabled) { background: var(--colors-surface-card); border-color: var(--colors-accent-brand-border); }
.message-image img[b-uo6xekef1m] { display: block; width: 100%; height: var(--ds-message-image-height); object-fit: cover; object-position: top; background: var(--colors-surface-muted); }
.message-image__caption[b-uo6xekef1m] { display: flex; gap: var(--spacing-xs); align-items: center; padding: var(--spacing-sm) var(--spacing-md); }

/* Pushed media before its file arrives: the image tile or attachment row it
   will become, with a loading shimmer, so nothing jumps when it lands. */
.message-pending--image[b-uo6xekef1m] {
  display: grid;
  width: var(--ds-message-image);
  max-width: 100%;
  margin-top: var(--spacing-sm);
  overflow: hidden;
  color: var(--colors-text-muted);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}

.message-pending--image[b-uo6xekef1m]  .skeleton { border-radius: 0; }
.message-bubble.is-outbound .message-pending--image[b-uo6xekef1m] { margin-left: auto; }



.message-files[b-uo6xekef1m] { display: grid; gap: var(--spacing-xs); justify-items: start; margin-top: var(--spacing-xs); }
.message-bubble.is-outbound .message-files[b-uo6xekef1m] { justify-items: end; }

.message-bubble__content[b-uo6xekef1m]  .message-media {
  display: grid;
  width: var(--ds-message-media);
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--colors-surface-muted);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.message-bubble__content[b-uo6xekef1m]  .message-media .ds-button__label { display: grid; width: 100%; padding: 0; overflow: visible; line-height: normal; }
.message-bubble__content[b-uo6xekef1m]  .message-media:hover:not(:disabled) { border-color: var(--colors-accent-brand-border); }
.message-media img[b-uo6xekef1m] { display: block; width: 100%; max-height: var(--ds-message-media-height); object-fit: cover; }
/* A sticker is drawn on the thread itself, as the customer's app does, not in a framed card. */
.message-bubble__content[b-uo6xekef1m]  .message-media.is-sticker { width: var(--ds-message-sticker); background: transparent; border-color: transparent; }
.message-media.is-sticker img[b-uo6xekef1m] { object-fit: contain; }

.message-video[b-uo6xekef1m] { display: block; width: var(--ds-message-media); max-width: 100%; max-height: var(--ds-message-media-height); background: var(--colors-surface-muted); border-radius: var(--radius-radius-lg); }
.message-audio[b-uo6xekef1m] { display: block; width: var(--ds-message-media); max-width: 100%; }

.message-file[b-uo6xekef1m] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  width: var(--ds-message-media);
  max-width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-text-secondary);
  text-decoration: none;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-md);
}
a.message-file:hover[b-uo6xekef1m] { background: var(--colors-interaction-hover); border-color: var(--colors-accent-brand-border); }
.message-file > span[b-uo6xekef1m] { display: grid; flex: 1 1 auto; gap: var(--spacing-2xs); min-width: 0; }
.message-file[b-uo6xekef1m]  strong { overflow: hidden; color: var(--colors-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.message-file[b-uo6xekef1m]  small { color: var(--colors-text-muted); }
.message-file.is-unavailable[b-uo6xekef1m] { color: var(--colors-text-muted); border-style: dashed; }
.message-file.is-pending[b-uo6xekef1m] { border-style: solid; opacity: 0.8; }

.message-note[b-uo6xekef1m] {
  display: flex;
  gap: var(--spacing-sm);
  align-self: center;
  width: min(var(--ds-note-measure), 92%);
}

.message-note__card[b-uo6xekef1m] { flex: 1; min-width: 0; padding: var(--spacing-md) var(--spacing-lg); background: var(--colors-feedback-warning-subtle); border: var(--ds-hairline) solid var(--colors-feedback-warning-border); border-radius: var(--radius-radius-lg); }
.message-note__card > header[b-uo6xekef1m] { display: flex; gap: var(--spacing-sm); align-items: center; color: var(--colors-text-muted); }
.message-note__card > header[b-uo6xekef1m]  strong { color: var(--colors-text-secondary); }
.message-note__card > header[b-uo6xekef1m]  time { margin-left: auto; }
.message-note__private[b-uo6xekef1m] { display: inline-flex; gap: var(--spacing-2xs); align-items: center; color: var(--colors-feedback-warning-text); }
[b-uo6xekef1m] .message-note__body { margin-top: var(--spacing-sm); color: var(--colors-text-secondary); white-space: pre-wrap; }

.message-question[b-uo6xekef1m] {
  display: grid;
  gap: var(--spacing-md);
  align-self: center;
  width: min(var(--ds-question-measure), 94%);
  padding: var(--spacing-lg);
  background: var(--colors-feedback-warning-subtle);
  border: var(--ds-hairline) solid var(--colors-feedback-warning-border);
  border-radius: var(--radius-radius-xl);
}

.message-question > header[b-uo6xekef1m] { display: flex; gap: var(--spacing-md); align-items: center; }
.message-question > header > div[b-uo6xekef1m] { display: grid; gap: var(--spacing-2xs); }
.message-question > header[b-uo6xekef1m]  small { color: var(--colors-text-muted); }
.message-question__icon[b-uo6xekef1m] { display: grid; flex: 0 0 auto; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); color: var(--colors-feedback-warning-text); background: var(--colors-feedback-warning-border); border-radius: var(--radius-radius-md); }
[b-uo6xekef1m] .message-question__body { color: var(--colors-text-secondary); white-space: pre-wrap; }
.message-question > footer[b-uo6xekef1m] { display: flex; align-items: center; justify-content: space-between; color: var(--colors-text-subtle); }
.message-question__action[b-uo6xekef1m] { padding: var(--spacing-xs) var(--spacing-md); color: var(--colors-feedback-warning-foreground); background: var(--colors-feedback-warning); border: 0; border-radius: var(--radius-radius-full); cursor: pointer; }
.message-question__action:hover[b-uo6xekef1m] { background: var(--colors-feedback-warning-border); }

.message-question__answer[b-uo6xekef1m] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-sm); align-items: start; padding: var(--spacing-md); color: var(--colors-accent-teal-text); background: var(--colors-surface-card); border-radius: var(--radius-radius-md); }
.message-question__answer > span[b-uo6xekef1m] { display: grid; gap: var(--spacing-xs); color: var(--colors-text-secondary); }
.message-question__answer > span[b-uo6xekef1m]  small { color: var(--colors-text-muted); }
.message-question__answer[b-uo6xekef1m]  strong { white-space: nowrap; }

.message-bubble[b-uo6xekef1m],
.message-system[b-uo6xekef1m],
.message-note[b-uo6xekef1m],
.message-question[b-uo6xekef1m] {
  /* Missing from the token set: no readable chat-message measures. */
  --ds-message-measure: min(640px, 84%);
  --ds-system-measure: 720px;
  --ds-system-glyph: 24px;
  --ds-note-measure: 640px;
  --ds-question-measure: 620px;
  --ds-message-attachment: 240px;
  --ds-message-image: 184px;
  /* Gap in the token set: the loading line beside a pending attachment's name. */
  --ds-message-pending-line: 64px;
  --ds-message-image-height: 128px;
  --ds-message-media: 240px;
  --ds-message-media-height: 240px;
  --ds-message-sticker: 144px;
}

/* React's note card: amber, with a PRIVATE pill and the time in amber. */
.message-note__card[b-uo6xekef1m] { background: var(--colors-accent-amber-subtle); box-shadow: 0 var(--spacing-2xs) var(--spacing-md) color-mix(in srgb, var(--colors-feedback-warning) 6%, transparent); }
.message-note__card > header[b-uo6xekef1m] { color: var(--colors-feedback-warning-text); }
.message-note__card > header[b-uo6xekef1m]  time { color: var(--colors-feedback-warning-text); }
.message-note__private[b-uo6xekef1m] { padding: var(--spacing-2xs) var(--spacing-xs); background: var(--colors-feedback-warning-subtle); border-radius: var(--radius-radius-full); }

/* React's "Correct for next time": a small link-coloured action beside the
   time, tinting on hover, not a full button. */
.message-bubble__content > footer[b-uo6xekef1m]  .ds-button.message-correction {
  min-height: 0;
  height: auto;
  margin-left: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  color: var(--colors-text-link);
  background: transparent;
  border-radius: var(--radius-radius-full);
}
.message-bubble__content > footer[b-uo6xekef1m]  .ds-button.message-correction:hover:not(:disabled) {
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
}
/* React separates the delivery state from the time with a middle dot. */
.message-delivery[b-uo6xekef1m]::before { content: "·"; margin-right: var(--spacing-2xs); color: var(--colors-text-subtle); }

/* A timeline event, drawn as a divider across the thread, the way Slack and
   Intercom mark hand-overs: rules either side so it cannot pass for a
   message, and no fill, so it stays quieter than the bubbles around it. */
.message-system[b-uo6xekef1m] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  align-self: stretch;
  color: var(--colors-text-secondary);
}
.message-system[b-uo6xekef1m]::before,
.message-system[b-uo6xekef1m]::after {
  flex: 1 1 var(--spacing-xl);
  min-width: var(--spacing-xl);
  height: var(--ds-hairline);
  content: "";
  background: var(--colors-surface-border);
}
.message-system__event[b-uo6xekef1m] {
  display: flex;
  flex: 0 1 auto;
  gap: var(--spacing-sm);
  align-items: center;
  max-width: var(--ds-system-measure);
  min-width: 0;
  border-radius: var(--radius-radius-full);
  transition: box-shadow var(--ds-motion-fast) ease;
}
/* The words and the time as one run, on one line when there's room; wrapped, the lines even out and the
   time stays with the last word (designer, 21 October 2026). */
.message-system__words[b-uo6xekef1m] { min-width: 0; line-height: var(--typography-leading-leading-base); text-wrap: balance; }
/* Opened at this line (a task's Reply): lit for a moment, as a message is. */
.message-system.is-highlighted .message-system__event[b-uo6xekef1m] { box-shadow: 0 0 0 var(--spacing-xs) var(--colors-accent-brand-subtle), 0 0 0 calc(var(--spacing-xs) + var(--spacing-2xs)) var(--colors-accent-brand-border); }
.message-system__glyph[b-uo6xekef1m] {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--ds-system-glyph);
  height: var(--ds-system-glyph);
  color: var(--colors-accent-neutral-text);
  background: var(--colors-accent-neutral-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-neutral-border);
  border-radius: var(--radius-radius-full);
}
.message-system__words[b-uo6xekef1m]  time { margin-left: var(--spacing-xs); color: var(--colors-text-subtle); white-space: nowrap; }
.message-system__words[b-uo6xekef1m]  time::before { content: "·"; margin-right: var(--spacing-xs); }

/* Narrow screens: bubbles may use more of the row. */
@media (max-width: 760px) {
  .message-bubble[b-uo6xekef1m] { --ds-message-measure: 92%; }
}

.message-note__card > header[b-uo6xekef1m]  .message-note__delete { flex: 0 0 auto; color: var(--colors-feedback-warning-text); }
.message-note__card > header[b-uo6xekef1m]  .message-note__delete.is-confirming { color: var(--colors-feedback-destructive-text); }

/* Replying, as WhatsApp (designer, 18 October 2026): the message's arrow sits in its bubble's top-right
   corner, with no fade, and shows while the message itself is pointed at or reached by keyboard; a touch
   screen always shows it. Double-clicking the space beside the message replies too. */
.message-bubble__box[b-uo6xekef1m] { position: relative; display: grid; min-width: 0; }
.message-bubble[b-uo6xekef1m] { --ds-message-ink: var(--colors-text-subtle); }
.message-bubble.is-human[b-uo6xekef1m] { --ds-message-ink: var(--colors-brand-primary-foreground); }
.message-bubble.is-ai[b-uo6xekef1m] { --ds-message-ink: var(--colors-text-secondary); }
.message-actions[b-uo6xekef1m] {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  z-index: 1;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-motion-fast) var(--ds-motion-ease);
}
.message-bubble__box:hover .message-actions[b-uo6xekef1m],
.message-bubble__box:focus-within .message-actions[b-uo6xekef1m],
.message-actions:has(.is-open)[b-uo6xekef1m] { opacity: 1; pointer-events: auto; }
@media (hover: none) { .message-actions[b-uo6xekef1m] { opacity: 1; pointer-events: auto; } }
.message-actions[b-uo6xekef1m]  .ds-action-menu__trigger {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: var(--spacing-2xs);
  color: var(--ds-message-ink);
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-radius-full);
  box-shadow: none;
}
/* The arrow alone: no circle behind it when pointed at, pressed or open (designer, 19 October 2026). */
.message-actions[b-uo6xekef1m]  .ds-action-menu__trigger:hover:not(:disabled),
.message-actions[b-uo6xekef1m]  .ds-action-menu__trigger:active:not(:disabled),
.message-actions[b-uo6xekef1m]  .ds-action-menu__trigger.is-open { color: var(--ds-message-ink); background: transparent; }
/* A customer's message sits on the left: its menu opens rightwards, into the thread. */
.message-bubble.is-inbound .message-actions[b-uo6xekef1m]  .ds-action-menu__menu { right: auto; left: 0; }

/* The message a reply quotes (designer, 20 October 2026: no edge down one side): a quiet card above the
   reply, as the reply box shows it before sending. A reply arrow in the quoted side's colour, who wrote it,
   and up to two lines of what they said. Choosing it goes to the original. */
.message-bubble__content[b-uo6xekef1m]  .ds-button.message-quote {
  /* Missing from the token set: the reply arrow's round tile. */
  --ds-message-quote-glyph: 28px;
  --ds-message-quote-ink: var(--colors-accent-brand-text);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-sm);
  align-items: center;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  text-align: start;
  white-space: normal;
  color: var(--colors-text-secondary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.message-bubble__content[b-uo6xekef1m]  .ds-button.message-quote.is-own { --ds-message-quote-ink: var(--colors-accent-teal-text); }
.message-bubble__content[b-uo6xekef1m]  .message-quote__glyph {
  display: grid;
  place-items: center;
  width: var(--ds-message-quote-glyph);
  height: var(--ds-message-quote-glyph);
  color: var(--ds-message-quote-ink);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}
.message-bubble__content[b-uo6xekef1m]  .message-quote__text { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.message-bubble__content[b-uo6xekef1m]  .ds-button.message-quote strong { color: var(--colors-text-primary); }
.message-bubble__content[b-uo6xekef1m]  .ds-button.message-quote .message-quote__text > span {
  color: var(--colors-text-muted);
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.message-bubble__content[b-uo6xekef1m]  .ds-button.message-quote:hover:not(:disabled) { background: var(--colors-surface-card); border-color: var(--colors-accent-brand-border); }
.message-bubble__content[b-uo6xekef1m]  .ds-button.message-quote:disabled { cursor: default; opacity: 1; }

/* Reached from a quote: marked for a moment so the eye finds it. */
.message-bubble[b-uo6xekef1m]  .message-bubble__body { transition: box-shadow var(--ds-motion-base) var(--ds-motion-ease); }
.message-bubble.is-highlighted[b-uo6xekef1m]  .message-bubble__body { box-shadow: 0 0 0 var(--spacing-2xs) var(--colors-accent-brand-border); }
@media (prefers-reduced-motion: reduce) {
  .message-actions[b-uo6xekef1m],
  .message-bubble[b-uo6xekef1m]  .message-bubble__body { transition: none; }
}
/* /Components/Pages/Dashboard/Conversations/ConversationRow.razor.rz.scp.css */
/* The host is the row's positioning box, so the options menu can sit over it. */
.conversation-row-host[b-osrk97s0vg] { position: relative; }

.conversation-row-host[b-osrk97s0vg]  .conversation-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-md);
  width: 100%;
  min-height: var(--ds-conversation-row-min);
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
  cursor: pointer;
}

.conversation-row-host:hover[b-osrk97s0vg]  .conversation-row { background: var(--colors-interaction-hover); }

.conversation-row-host[b-osrk97s0vg]  .conversation-row.is-selected {
  background: var(--colors-interaction-selected);
  box-shadow: inset var(--ds-conversation-selected-edge) 0 0 var(--colors-brand-primary);
}

.conversation-row__copy[b-osrk97s0vg] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.conversation-row__heading[b-osrk97s0vg] { display: flex; justify-content: space-between; gap: var(--spacing-sm); }
.conversation-row__heading[b-osrk97s0vg]  strong { overflow: hidden; color: var(--colors-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.conversation-row__heading[b-osrk97s0vg]  time { flex: 0 0 auto; color: var(--colors-text-muted); }

[b-osrk97s0vg] .conversation-row__preview {
  overflow: hidden;
  color: var(--colors-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-row-host[b-osrk97s0vg]  .conversation-row.has-unread .conversation-row__preview { color: var(--colors-text-secondary); }

.conversation-row__meta[b-osrk97s0vg] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  width: fit-content;
  color: var(--colors-text-subtle);
}

.conversation-row__meta.state-needs-answer[b-osrk97s0vg] { color: var(--colors-feedback-warning-text); }
.conversation-row__meta.state-handoff[b-osrk97s0vg] { color: var(--colors-brand-primary); }
.conversation-row__meta.state-escalated[b-osrk97s0vg] { color: var(--colors-feedback-warning-text); overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

[b-osrk97s0vg] .conversation-row__unread {
  position: absolute;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  display: grid;
  place-items: center;
  min-width: var(--spacing-xl);
  height: var(--spacing-xl);
  padding-inline: var(--spacing-xs);
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
}

.conversation-row-host[b-osrk97s0vg]  .conversation-row {
  /* Missing from the token set: no conversation-row height token. */
  --ds-conversation-row-min: 108px;
  /* Missing from the token set: no selected-edge width token. */
  --ds-conversation-selected-edge: 3px;
}
.conversation-row-host[b-osrk97s0vg] {
  /* Missing from the token set: the small icon button's width (the options button), which the
     unread count slides by. Button keeps it to itself (--ds-button-height-sm). */
  --ds-conversation-row-menu: 32px;
}

.conversation-row__name[b-osrk97s0vg] { display: flex; gap: var(--spacing-xs); align-items: center; min-width: 0; }
.conversation-row__name[b-osrk97s0vg]  .conversation-row__pin { flex: 0 0 auto; color: var(--colors-brand-primary); }

/* The options button (designer, 18 October 2026): in the unread count's place at the row's
   foot, not beside the time, and only while the row is hovered or has the keyboard. A count
   there slides left to make room. Touch screens have no hover, so there it always shows. */
.conversation-row__menu[b-osrk97s0vg] {
  position: absolute;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  z-index: 1;
  display: flex;
  align-items: center;
  /* The count's line: the button centres on it. */
  height: var(--spacing-xl);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--spacing-xs));
  transition: opacity var(--ds-motion-base) var(--ds-motion-ease), transform var(--ds-motion-base) var(--ds-motion-ease);
}
.conversation-row__menu[b-osrk97s0vg]  .ds-button { color: var(--colors-text-muted); background: transparent; border-color: transparent; box-shadow: none; }
.conversation-row__menu[b-osrk97s0vg]  .ds-button:hover:not(:disabled),
.conversation-row__menu[b-osrk97s0vg]  .ds-button.is-open { color: var(--colors-text-primary); background: var(--colors-interaction-hover); }
[b-osrk97s0vg] .conversation-row__unread { transition: transform var(--ds-motion-base) var(--ds-motion-ease); }

.conversation-row-host:hover .conversation-row__menu[b-osrk97s0vg],
.conversation-row-host:focus-within .conversation-row__menu[b-osrk97s0vg] { opacity: 1; pointer-events: auto; transform: none; }
.conversation-row-host:hover[b-osrk97s0vg]  .conversation-row__unread,
.conversation-row-host:focus-within[b-osrk97s0vg]  .conversation-row__unread { transform: translateX(calc(-1 * (var(--ds-conversation-row-menu) + var(--spacing-xs)))); }

@media (hover: none) {
  .conversation-row__menu[b-osrk97s0vg] { opacity: 1; pointer-events: auto; transform: none; }
  [b-osrk97s0vg] .conversation-row__unread { transform: translateX(calc(-1 * (var(--ds-conversation-row-menu) + var(--spacing-xs)))); }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-row__menu[b-osrk97s0vg],
  [b-osrk97s0vg] .conversation-row__unread { transition: none; }
}
/* /Components/Pages/Dashboard/Conversations/Conversations.razor.rz.scp.css */
.inbox-workspace[b-s51y5qiohi] {
  display: grid;
  /* One row the height of the window: the panes scroll inside it, so a long
     Customer details cannot stretch the page and push the composer out of view. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--ds-inbox-queue) minmax(0, 1fr);
  height: 100vh;
  /* The visible height on tablets (see the app shell). */
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
  background: var(--colors-surface-background);
}

.inbox-workspace[b-s51y5qiohi] {
  /* Missing from the token set: no pane widths. The list grows with the
     window instead of holding React's 438px, which took 44% of a 1080px
     laptop and left the conversation 554px (responsive audit, 14 October
     2026): 340px on the smallest laptops, about 360px at 1280, 420px from
     1500px up, close to the 320–380px support inboxes use. */
  --ds-inbox-queue: clamp(340px, 28vw, 420px);
  /* The customer panel keeps the width validated in React. */
  --ds-inbox-customer: 420px;
  --ds-inbox-control: 40px;
  --ds-inbox-avatar: 44px;
  /* Missing from the token set: no conversation-row height token. */
  --ds-inbox-row-min: 108px;
}

.inbox-queue[b-s51y5qiohi] {
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  background: var(--colors-surface-card);
  border-right: var(--ds-hairline) solid var(--colors-surface-border);
  box-shadow: var(--spacing-xs) 0 var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
  z-index: 2;
}

/* The title and the start button on one line: "Inbox" and the tabs under it
   say what the page is, so it has no subtitle (designer, 14 October 2026). */
.inbox-queue__header[b-s51y5qiohi] { display: flex; gap: var(--spacing-md); align-items: center; justify-content: space-between; padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md); }
/* React's round start button beside the title. */
/* React's start button: a medium pill with side padding rather than a square
   icon button, holding its 16px plus. */
.inbox-queue__header[b-s51y5qiohi]  .ds-button.inbox-start { flex: 0 0 auto; width: auto; aspect-ratio: auto; padding-inline: var(--spacing-lg); border-radius: var(--radius-radius-full); }

.inbox-search-wrap[b-s51y5qiohi] { margin: 0 var(--spacing-xl) var(--spacing-md); }

.inbox-scope-row[b-s51y5qiohi] { display: flex; gap: var(--spacing-sm); align-items: center; padding: 0 var(--spacing-xl) var(--spacing-md); }
/* The scope tabs are the design system's Segmented set; here they fill the row. */
.inbox-scope-row[b-s51y5qiohi]  .inbox-scopes { flex: 1; }

/* The filter toggle: a round secondary button the size of the row's other
   controls, tinted while filters are open or in use. Named one class deeper
   than Button's own hover so it keeps the inbox's quiet look. */
.inbox-scope-row[b-s51y5qiohi]  .ds-button.ds-button--secondary.inbox-filter-toggle { position: relative; flex: 0 0 auto; width: var(--ds-inbox-control); height: var(--ds-inbox-control); min-height: 0; padding: 0; aspect-ratio: auto; color: var(--colors-text-muted); background: var(--colors-surface-card); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-full); box-shadow: none; }
.inbox-scope-row[b-s51y5qiohi]  .ds-button.ds-button--secondary.inbox-filter-toggle.is-active { color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); border-color: var(--colors-accent-brand-border); }
.inbox-scope-row[b-s51y5qiohi]  .inbox-filter-toggle__count { position: absolute; top: calc(var(--spacing-xs) * -1); right: calc(var(--spacing-xs) * -1); display: grid; place-items: center; min-width: var(--spacing-lg); height: var(--spacing-lg); color: var(--colors-brand-primary-foreground); background: var(--colors-brand-primary); border-radius: var(--radius-radius-full); }

.inbox-filters[b-s51y5qiohi] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); padding: 0 var(--spacing-xl) var(--spacing-md); }
.inbox-filters[b-s51y5qiohi]  .inbox-filter-sort { grid-column: 2; }
.inbox-filters[b-s51y5qiohi]  .inbox-filters__clear { grid-column: 1 / -1; width: fit-content; }

.inbox-queue__summary[b-s51y5qiohi] { padding: var(--spacing-sm) var(--spacing-xl); color: var(--colors-text-muted); background: var(--colors-surface-background); border-block: var(--ds-hairline) solid var(--colors-surface-border); }
.inbox-list[b-s51y5qiohi] { min-height: 0; overflow-y: auto; scrollbar-color: var(--colors-accent-neutral-border) transparent; }
.inbox-list[b-s51y5qiohi] >  .inline-error { margin: var(--spacing-md); }
.inbox-list[b-s51y5qiohi] >  .empty-state { min-height: 100%; }
/* Parrot pages its list; Aurora has no equivalent control. */
.inbox-list__more[b-s51y5qiohi] { display: grid; place-items: center; padding: var(--spacing-md); }

.inbox-list__skeleton[b-s51y5qiohi] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-md); min-height: var(--ds-inbox-row-min); padding: var(--spacing-md); border-bottom: var(--ds-hairline) solid var(--colors-surface-border); }
.inbox-list__skeleton > span[b-s51y5qiohi] { display: grid; align-content: start; gap: var(--spacing-md); padding-top: var(--spacing-xs); }

/* Back to the list: only when one pane shows at a time (below 1024px). */
.inbox-back[b-s51y5qiohi] { display: none; }

/* ── Tablets in portrait: one pane at a time ──────────────────────────────
   Below 1024px the list and a conversation don't fit side by side (an iPad
   mini in portrait would leave the conversation 340px). The list fills the
   page; opening a conversation (its address) shows it instead, with Back. */
@media not all and (min-width: 1024px) {
  .inbox-workspace[b-s51y5qiohi] { grid-template-columns: minmax(0, 1fr); }
  .inbox-workspace.is-reading .inbox-queue[b-s51y5qiohi],
  .inbox-workspace:not(.is-reading) .inbox-conversation[b-s51y5qiohi] { display: none; }
  .inbox-queue[b-s51y5qiohi] { border-right: 0; box-shadow: none; }
  .inbox-back[b-s51y5qiohi] { display: contents; }
}

.inbox-conversation[b-s51y5qiohi] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; background: var(--colors-surface-muted); }
.inbox-conversation__header[b-s51y5qiohi] { display: flex; gap: var(--spacing-md); align-items: center; min-height: var(--spacing-5xl); padding: var(--spacing-md) var(--spacing-xl); background: var(--colors-surface-card); border-bottom: var(--ds-hairline) solid var(--colors-surface-border); }
/* The hover sits close to the avatar on the left, where the name starts. */
.inbox-conversation__header[b-s51y5qiohi]  .ds-button.inbox-customer-trigger { min-width: 0; width: auto; height: auto; min-height: 0; margin-left: 0; padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-xs); color: inherit; background: transparent; border-radius: var(--radius-radius-xl); }
.inbox-conversation__header[b-s51y5qiohi]  .ds-button.inbox-customer-trigger:hover:not(:disabled) { background: var(--colors-interaction-hover); }
.inbox-conversation__header[b-s51y5qiohi]  .ds-button.inbox-customer-trigger .ds-button__label { display: flex; gap: var(--spacing-md); align-items: center; min-width: 0; text-align: left; }
.inbox-conversation__identity[b-s51y5qiohi] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.inbox-conversation__identity[b-s51y5qiohi]  h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-conversation__identity[b-s51y5qiohi]  .inbox-conversation__meta { display: flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); text-transform: capitalize; }
.inbox-conversation__actions[b-s51y5qiohi] { display: flex; gap: var(--spacing-sm); align-items: center; margin-left: auto; }
.inbox-conversation__content[b-s51y5qiohi] { position: relative; display: flex; min-width: 0; min-height: 0; }
.inbox-conversation__body[b-s51y5qiohi] { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.inbox-conversation[b-s51y5qiohi] >  .empty-state { align-self: center; }

.inbox-customer-scrim[b-s51y5qiohi] {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  pointer-events: none;
  cursor: default;
  opacity: 0;
  background: color-mix(in srgb, var(--colors-surface-overlay) 18%, transparent);
  border: 0;
  transition: opacity var(--ds-customer-backdrop-motion) ease;
}
.inbox-customer-scrim.is-open[b-s51y5qiohi] { pointer-events: auto; opacity: 1; }

.inbox-customer[b-s51y5qiohi] {
  position: absolute;
  inset: var(--spacing-md) var(--spacing-md) var(--spacing-md) auto;
  z-index: 6;
  width: min(var(--ds-inbox-customer), calc(100% - (var(--spacing-md) * 2)));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-xl) var(--spacing-5xl) var(--colors-surface-shadow);
  transform: translateX(calc(100% + var(--spacing-xl)));
  transition: transform var(--ds-customer-panel-motion) var(--ds-customer-panel-ease), opacity var(--ds-customer-backdrop-motion) ease;
}
.inbox-customer.is-open[b-s51y5qiohi] { pointer-events: auto; opacity: 1; transform: translateX(0); }
.inbox-customer[b-s51y5qiohi] >  .empty-state { min-height: 100%; }

.inbox-conversation__content[b-s51y5qiohi] {
  /* Missing from the token set: no contextual drawer motion values. */
  --ds-customer-panel-motion: 240ms;
  --ds-customer-backdrop-motion: 180ms;
  --ds-customer-panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .inbox-customer[b-s51y5qiohi],
  .inbox-customer-scrim[b-s51y5qiohi] { transition: none; }
}

/* ── Empty states: React draws the parrot looking into an empty inbox. ───── */
.inbox-mascot[b-s51y5qiohi] { width: var(--ds-inbox-mascot); height: var(--ds-inbox-mascot); object-fit: contain; }

.inbox-stage[b-s51y5qiohi] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-row: 1 / -1;
  gap: var(--spacing-sm);
  padding: var(--spacing-4xl);
  text-align: center;
}
.inbox-stage__mascot[b-s51y5qiohi] { width: var(--ds-inbox-stage-mascot); height: var(--ds-inbox-stage-mascot); margin-bottom: var(--spacing-md); object-fit: contain; filter: drop-shadow(0 var(--spacing-md) var(--spacing-lg) var(--colors-surface-shadow-diffuse)); }
.inbox-stage[b-s51y5qiohi]  h2 { color: var(--colors-text-primary); }
.inbox-stage[b-s51y5qiohi]  .inbox-stage__copy { max-width: var(--ds-inbox-stage-measure); color: var(--colors-text-muted); }

/* ── Conversation toolbar: status, the AI agent, and who owns it. ───────── */
.inbox-conversation__identity[b-s51y5qiohi]  .inbox-status { font-weight: inherit; }
.inbox-conversation__identity[b-s51y5qiohi]  .inbox-status.is-open { color: var(--colors-accent-teal-text); }
.inbox-conversation__identity[b-s51y5qiohi]  .inbox-status.is-pending { color: var(--colors-feedback-warning-text); }
.inbox-conversation__identity[b-s51y5qiohi]  .inbox-status.is-resolved { color: var(--colors-text-muted); }

.inbox-agent-presence[b-s51y5qiohi] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  height: var(--ds-inbox-chip);
  padding: 0 var(--spacing-sm);
  color: var(--colors-brand-primary);
  white-space: nowrap;
  text-transform: capitalize;
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}
.inbox-agent-presence i[b-s51y5qiohi] { width: var(--ds-inbox-dot); height: var(--ds-inbox-dot); background: var(--colors-accent-teal-solid); border-radius: var(--radius-radius-full); }
.inbox-agent-presence.is-handoff[b-s51y5qiohi] { color: var(--colors-accent-violet-base); background: var(--colors-accent-violet-subtle); }
.inbox-agent-presence.is-handoff i[b-s51y5qiohi] { background: var(--colors-accent-violet-base); }
.inbox-agent-presence.is-paused[b-s51y5qiohi] { color: var(--colors-text-muted); background: var(--colors-surface-muted); }
.inbox-agent-presence.is-paused i[b-s51y5qiohi] { background: var(--colors-accent-neutral-base); }

.inbox-ownership[b-s51y5qiohi] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); white-space: nowrap; }

.inbox-escalation-chip[b-s51y5qiohi] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  height: var(--ds-inbox-chip);
  padding: 0 var(--spacing-sm);
  color: var(--colors-feedback-warning-text);
  white-space: nowrap;
  background: var(--colors-feedback-warning-subtle);
  border: var(--ds-hairline) solid var(--colors-feedback-warning-border);
  border-radius: var(--radius-radius-full);
}

.inbox-workspace[b-s51y5qiohi] {
  /* Gaps in the token set: no illustration, chip or status-dot sizes. React's. */
  --ds-inbox-mascot: 132px;
  --ds-inbox-stage-mascot: 174px;
  --ds-inbox-stage-measure: 470px;
  --ds-inbox-chip: 28px;
  --ds-inbox-dot: 4px;
}

/* ── Filter marks, as React draws them ──────────────────────────────────── */
.inbox-filters[b-s51y5qiohi]  .inbox-mark {
  display: grid;
  place-items: center;
  width: var(--ds-inbox-mark);
  height: var(--ds-inbox-mark);
  color: var(--colors-text-on-primary);
  background: var(--colors-accent-neutral-solid);
  border-radius: var(--radius-radius-full);
}
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-brand,
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-newest { background: var(--colors-brand-primary); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-open { background: var(--colors-accent-teal-text); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-pending { background: var(--colors-feedback-warning); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-oldest { background: var(--colors-accent-neutral-base); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-priority { background: var(--colors-accent-yellow-text); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-kora { background: var(--colors-accent-violet-base); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-nia { background: var(--colors-accent-orange-solid); }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-tobi { background: var(--colors-brand-primary-hover); }
/* A channel keeps its own tinted mark, drawn to the same round size. */
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-channel { background: transparent; }
.inbox-filters[b-s51y5qiohi]  .inbox-mark.is-channel .channel-glyph { width: var(--ds-inbox-mark); height: var(--ds-inbox-mark); border: 0; border-radius: var(--radius-radius-full); }
/* The option row's own mark well sits behind the mark; let the mark show. */
.inbox-filters[b-s51y5qiohi]  .popover-option__leading,
.inbox-filters[b-s51y5qiohi]  .filter-popover__leading { background: transparent; }

.inbox-workspace[b-s51y5qiohi] { --ds-inbox-mark: 24px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
.inbox-workspace[b-s51y5qiohi] { height: 100vh; height: 100dvh; }

/* Tablets: a slimmer queue, and the customer drawer takes more of the thread. */
@media (max-width: 1180px) {
  /* Gap in the token set: a slimmer queue width for tablets. */
  .inbox-workspace[b-s51y5qiohi] { --ds-inbox-queue: 340px; }
  .inbox-queue__header[b-s51y5qiohi],
  .inbox-conversation__header[b-s51y5qiohi] { padding-inline: var(--spacing-md); }
  .inbox-search-wrap[b-s51y5qiohi] { margin-inline: var(--spacing-md); }
  .inbox-scope-row[b-s51y5qiohi],
  .inbox-filters[b-s51y5qiohi] { padding-inline: var(--spacing-md); }
  .inbox-queue__summary[b-s51y5qiohi] { padding-inline: var(--spacing-md); }
  .inbox-customer[b-s51y5qiohi] { width: min(var(--ds-inbox-customer), calc(100% - var(--spacing-md))); }
  .inbox-conversation__actions[b-s51y5qiohi] { gap: var(--spacing-xs); }
}

/* Phones (already one pane at a time, below 1024px): a tighter header, and the
   customer panel edge to edge. */
@media (max-width: 760px) {
  .inbox-conversation__header[b-s51y5qiohi] { gap: var(--spacing-xs); padding-inline: var(--spacing-sm); }
  .inbox-conversation__header[b-s51y5qiohi]  .ds-button.inbox-customer-trigger { flex: 1 1 auto; min-width: 0; }
  .inbox-conversation__actions[b-s51y5qiohi] { flex: 0 0 auto; }
  /* The AI and owner chips would crowd the name; they are in the customer drawer's reach on desktop. */
  .inbox-conversation__actions > .inbox-agent-presence[b-s51y5qiohi],
  .inbox-conversation__actions > .inbox-ownership[b-s51y5qiohi],
  .inbox-conversation__actions > .inbox-escalation-chip[b-s51y5qiohi] { display: none; }
  .inbox-filters[b-s51y5qiohi] { grid-template-columns: minmax(0, 1fr); }
  .inbox-filters[b-s51y5qiohi]  .inbox-filter-sort { grid-column: auto; }
  /* The customer panel covers the thread edge to edge. */
  .inbox-customer[b-s51y5qiohi] { inset: 0; width: 100%; border: 0; border-radius: 0; }
  .inbox-stage[b-s51y5qiohi] { padding: var(--spacing-2xl); }
}
/* /Components/Pages/Dashboard/Conversations/ConversationTimeline.razor.rz.scp.css */
.conversation-timeline[b-vrb5wq9dd3] { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; }
/* The thread fades out towards the top rather than being covered by a
   painted band: a mask on the content itself, so it reads the same over
   any background, light or dark. The first message starts below the tabs. */
.conversation-timeline__scroll[b-vrb5wq9dd3] {
  position: relative;
  height: 100%;
  padding-top: var(--ds-timeline-top-clear);
  overflow-y: auto;
  /* The rail is measured against this width (see --ds-timeline-rail). */
  container-type: inline-size;
  scrollbar-color: var(--colors-accent-neutral-border) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--ds-timeline-fade-start), var(--colors-surface-card) var(--ds-timeline-fade-end));
  mask-image: linear-gradient(to bottom, transparent var(--ds-timeline-fade-start), var(--colors-surface-card) var(--ds-timeline-fade-end));
}

/* The tabs float over the top of the thread; only the pill takes clicks. */
.conversation-timeline__tabs[b-vrb5wq9dd3] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--ds-timeline-tabs-layer);
  display: flex;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-xl);
  pointer-events: none;
}
.conversation-timeline__tabs[b-vrb5wq9dd3] >  .ds-tabs { pointer-events: auto; }

/* The tabs themselves are the design system's Floating set. */

/* One responsive rail aligns the thread, response control and composer. The
   bubbles retain their own readable measure while the rail can breathe on a
   large display, as conversation-first products do. */
.conversation-timeline__messages[b-vrb5wq9dd3] { display: flex; flex-direction: column; gap: var(--spacing-xl); box-sizing: border-box; width: 100%; max-width: var(--ds-timeline-rail); margin-inline: auto; padding: 0 var(--spacing-2xl) var(--ds-timeline-composer-reserve); transform: translateX(var(--ds-timeline-optical-shift)); }
/* Parrot pages message history; Aurora has no equivalent control. */
.conversation-timeline__older[b-vrb5wq9dd3] { display: flex; justify-content: center; }
.conversation-timeline__date[b-vrb5wq9dd3] { display: flex; align-items: center; gap: var(--spacing-md); align-self: stretch; color: var(--colors-text-subtle); }
.conversation-timeline__date[b-vrb5wq9dd3]::before,
.conversation-timeline__date[b-vrb5wq9dd3]::after { content: ""; flex: 1; height: var(--ds-hairline); background: var(--colors-surface-border); }

/* React's notes heading: across the column, over an amber hairline. */
.conversation-timeline__notes-heading[b-vrb5wq9dd3] { display: flex; gap: var(--spacing-sm); align-items: center; align-self: stretch; padding-bottom: var(--spacing-md); color: var(--colors-accent-yellow-text); border-bottom: var(--ds-hairline) solid var(--colors-accent-amber-muted); }
.conversation-timeline__notes-heading > span[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-2xs); }
.conversation-timeline__notes-heading[b-vrb5wq9dd3]  strong { color: var(--colors-text-secondary); }
.conversation-timeline__notes-heading[b-vrb5wq9dd3]  small { color: var(--colors-accent-yellow-solid); }

.conversation-timeline__loading[b-vrb5wq9dd3] { display: flex; flex-direction: column; gap: var(--spacing-2xl); padding: var(--spacing-5xl) var(--spacing-2xl); }
.conversation-timeline__skeleton[b-vrb5wq9dd3] { display: flex; gap: var(--spacing-sm); align-items: flex-start; }
.conversation-timeline__skeleton.is-outbound[b-vrb5wq9dd3] { flex-direction: row-reverse; }
.conversation-timeline__state[b-vrb5wq9dd3] { display: grid; place-items: center; align-content: center; gap: var(--spacing-lg); height: 100%; padding: var(--spacing-2xl); }

.conversation-timeline__composer[b-vrb5wq9dd3] {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ds-timeline-composer-layer);
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-4xl) var(--spacing-2xl) var(--spacing-xl);
  background: linear-gradient(to bottom, transparent, var(--colors-surface-muted) var(--ds-timeline-gradient-stop));
  pointer-events: none;
  /* The rail is measured against this width (see --ds-timeline-rail). */
  container-type: inline-size;
}

/* The footer lets clicks through its fade so the thread above stays usable;
   what sits in it takes them again. The bar and the composer are components
   of their own, so the rule has to reach into them (::deep), or clicks on
   them fall through to the messages underneath. */
.conversation-timeline__composer[b-vrb5wq9dd3] >  * { width: 100%; max-width: var(--ds-timeline-rail); margin-inline: auto; pointer-events: auto; transform: translateX(var(--ds-timeline-optical-shift)); }
.conversation-timeline__resolved[b-vrb5wq9dd3] { display: flex; gap: var(--spacing-xs); align-items: center; justify-content: center; color: var(--colors-text-muted); }

.learning-dialog[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-lg); }
.learning-dialog__source[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-xs); padding: var(--spacing-md); background: var(--colors-surface-muted); border-radius: var(--radius-radius-lg); }
.learning-dialog__source[b-vrb5wq9dd3]  > span { color: var(--colors-text-muted); }
/* The field label keeps its own colour, not the dialog description's. */
.learning-dialog__field[b-vrb5wq9dd3]  > span { color: var(--colors-text-secondary); }
.learning-dialog__source[b-vrb5wq9dd3]  p { color: var(--colors-text-secondary); white-space: pre-wrap; }
.learning-dialog > label[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-xs); }
.learning-dialog > label textarea[b-vrb5wq9dd3] { width: 100%; padding: var(--spacing-md); color: var(--colors-text-primary); line-height: var(--typography-leading-leading-lg); resize: vertical; background: var(--colors-surface-input); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-lg); outline: 0; }
.learning-dialog > label textarea:focus[b-vrb5wq9dd3] { border-color: var(--colors-brand-primary); }
.learning-dialog__commitment[b-vrb5wq9dd3] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-sm); align-items: start; padding: var(--spacing-md); color: var(--colors-accent-teal-text); background: var(--colors-accent-teal-subtle); border-radius: var(--radius-radius-lg); }
.learning-dialog__commitment > span[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-2xs); }
.learning-dialog__commitment[b-vrb5wq9dd3]  strong { color: var(--colors-text-secondary); }
.learning-dialog__commitment[b-vrb5wq9dd3]  small { color: var(--colors-text-muted); }

.conversation-timeline[b-vrb5wq9dd3] {
  /* Missing from the token set: no z-index or backdrop-blur scale. */
  --ds-timeline-tabs-layer: 4;
  /* The tabs' height, the start of the fade just under their middle, and
     where the text is fully back. */
  --ds-timeline-top-clear: 76px;
  --ds-timeline-fade-start: 28px;
  --ds-timeline-fade-end: 84px;
  --ds-timeline-composer-layer: 5;
  --ds-timeline-composer-reserve: 330px;
  --ds-timeline-gradient-stop: 34%;
  /* Missing from the token set: no readable conversation rail measure or
     optical-balance offset. */
  --ds-timeline-rail-measure: 760px;
  /* A length, not a bare 0: the rail below does sums with it. */
  --ds-timeline-optical-shift: 0px;
  /* The rail as drawn: its measure, but narrower when the column has no room
     for the optical shift on both sides, so the thread, the bar and the
     composer never slide under the conversation list (just over 1520px they
     did, by up to 27px). 100cqw is the width of the area it sits in. */
  --ds-timeline-rail: min(var(--ds-timeline-rail-measure), calc(100cqw + var(--ds-timeline-optical-shift) * 2));
}

@media (min-width: 1520px) {
  .conversation-timeline[b-vrb5wq9dd3] {
    /* Missing from the token set: no large-desktop conversation rail measure. */
    --ds-timeline-rail-measure: 920px;
    --ds-timeline-optical-shift: calc(var(--spacing-5xl) * -1);
  }

  .conversation-timeline__tabs[b-vrb5wq9dd3] { transform: translateX(var(--ds-timeline-optical-shift)); }
}

/* The take-over window counts down in the control bar; the answer field in the teaching dialog. */
.learning-dialog__field[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-xs); }

/* Up to this width the composer reaches the right-hand corner, where the
   shell's floating theme toggle sits; the footer keeps clear of it so Send
   is never underneath. */
@media (max-width: 1520px) {
  .conversation-timeline__composer[b-vrb5wq9dd3] { padding-bottom: calc(var(--spacing-xl) + var(--ds-timeline-toggle-reserve)); }
}

.conversation-timeline[b-vrb5wq9dd3] {
  /* Gap in the token set: the theme toggle's height plus its gap. */
  --ds-timeline-toggle-reserve: 48px;
}

/* React's teaching dialog: a little wider, a hairline under the header, and a
   quieter Cancel. */
.learning-dialog-host[b-vrb5wq9dd3]  .dialog-backdrop { --ds-dialog-width: 540px; }
.learning-dialog-host[b-vrb5wq9dd3]  .dialog > header {
  margin-inline: calc(var(--spacing-3xl) * -1);
  padding: 0 var(--spacing-3xl) var(--spacing-lg);
  border-bottom: var(--ds-hairline) solid var(--colors-surface-border);
}
.learning-dialog-host[b-vrb5wq9dd3]  .dialog > footer .ds-button.ds-button--secondary {
  box-shadow: none;
  background: var(--colors-surface-muted);
  border-color: transparent;
}
.learning-dialog-host[b-vrb5wq9dd3]  .learning-dialog__source .ds-overline { color: var(--colors-text-subtle); }

/* ── AI typing indicator ─────────────────────────────────────────────────── */
/* Mirrors a message-bubble row's left-aligned layout without being one. */
.ai-typing-indicator[b-vrb5wq9dd3] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* The same robot tile the AI message uses: brand-coloured, rounded.
   Re-declared here because message-bubble__ai-avatar is scoped to its own component. */
.ai-typing-indicator__avatar[b-vrb5wq9dd3] {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-md);
}

.ai-typing-indicator__dots[b-vrb5wq9dd3] {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-sm) var(--radius-radius-lg) var(--radius-radius-lg) var(--radius-radius-lg);
}

.ai-typing-indicator__dots > span[b-vrb5wq9dd3] {
  /* no motion token for looping dot-pulse; gap filed */
  --ds-ai-typing-pulse-duration: 1.4s;
  --ds-ai-typing-delay-2: 0.2s;
  --ds-ai-typing-delay-3: 0.4s;
  display: block;
  width: var(--spacing-sm);
  height: var(--spacing-sm);
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
  opacity: 0.4;
  animation: ai-dot-pulse-b-vrb5wq9dd3 var(--ds-ai-typing-pulse-duration) ease-in-out infinite;
}

.ai-typing-indicator__dots > span:nth-child(2)[b-vrb5wq9dd3] { animation-delay: var(--ds-ai-typing-delay-2); }
.ai-typing-indicator__dots > span:nth-child(3)[b-vrb5wq9dd3] { animation-delay: var(--ds-ai-typing-delay-3); }

@keyframes ai-dot-pulse-b-vrb5wq9dd3 {
  0%, 60%, 100% { opacity: 0.4; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing-indicator__dots > span[b-vrb5wq9dd3] { animation: none; opacity: 0.6; }
}

/* ── Approval request card ───────────────────────────────────────────────── */
.approval-card[b-vrb5wq9dd3] {
  /* accent border is thicker than ds-hairline; no token for this width */
  --ds-approval-accent-width: 3px;
  display: flex;
  gap: var(--spacing-md);
  align-self: stretch;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-left: var(--ds-approval-accent-width) solid var(--colors-brand-primary);
  border-radius: var(--radius-radius-lg);
}
.approval-card.is-approved[b-vrb5wq9dd3] { border-left-color: var(--colors-accent-teal-solid); }
.approval-card.is-denied[b-vrb5wq9dd3] { border-left-color: var(--colors-accent-neutral-base); }
.approval-card__icon[b-vrb5wq9dd3] { flex: 0 0 auto; padding-top: var(--spacing-2xs); color: var(--colors-brand-primary); }
.approval-card.is-approved .approval-card__icon[b-vrb5wq9dd3] { color: var(--colors-accent-teal-text); }
.approval-card.is-denied .approval-card__icon[b-vrb5wq9dd3] { color: var(--colors-text-muted); }
.approval-card__body[b-vrb5wq9dd3] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.approval-card__body[b-vrb5wq9dd3]  strong { color: var(--colors-text-primary); }
.approval-card__body[b-vrb5wq9dd3]  p { color: var(--colors-text-secondary); }
.approval-card__tool[b-vrb5wq9dd3] { display: inline-block; padding: var(--spacing-2xs) var(--spacing-xs); font-family: var(--typography-family-mono, monospace); color: var(--colors-text-secondary); background: var(--colors-surface-muted); border-radius: var(--radius-radius-sm); }
.approval-card__actions[b-vrb5wq9dd3] { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

/* Narrow screens: tighter gutters, and a shorter reserve under the last message
   now that the composer is smaller. */
@media (max-width: 760px) {
  /* Gap in the token set: the composer reserve on phones. */
  .conversation-timeline[b-vrb5wq9dd3] { --ds-timeline-composer-reserve: 260px; }
  .conversation-timeline__messages[b-vrb5wq9dd3] { gap: var(--spacing-lg); padding-inline: var(--spacing-md); }
  .conversation-timeline__tabs[b-vrb5wq9dd3] { padding-inline: var(--spacing-md); }
  .conversation-timeline__composer[b-vrb5wq9dd3] { padding-inline: var(--spacing-sm); }
  .conversation-timeline__loading[b-vrb5wq9dd3] { padding-inline: var(--spacing-md); }
}
/* /Components/Pages/Dashboard/Conversations/CustomerPanel.razor.rz.scp.css */
.customer-panel[b-i2qyapzkoz] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--colors-text-secondary);
  background: var(--colors-surface-card);
}

/* Embedded (the Customers page): inside a side panel that frames, heads and scrolls it. */
.customer-panel.is-embedded[b-i2qyapzkoz] { display: block; height: auto; overflow: visible; background: transparent; }
.customer-panel.is-embedded .customer-panel__scroll[b-i2qyapzkoz] { overflow: visible; }

.customer-panel__header[b-i2qyapzkoz] { display: flex; align-items: center; justify-content: space-between; min-height: var(--spacing-5xl); padding-inline: var(--spacing-xl); border-bottom: var(--ds-hairline) solid var(--colors-surface-border); }
.customer-panel__header[b-i2qyapzkoz]  .ds-button { flex: 0 0 auto; }

.customer-panel__loading[b-i2qyapzkoz] { display: grid; justify-items: center; gap: var(--spacing-md); padding: var(--spacing-2xl); }
.customer-panel__loading[b-i2qyapzkoz] >  :nth-last-child(-n+2) { width: 100%; }
.customer-panel__state[b-i2qyapzkoz] { display: grid; align-content: center; justify-items: center; gap: var(--spacing-md); min-height: 100%; padding: var(--spacing-xl); }

.customer-profile[b-i2qyapzkoz] { display: grid; justify-items: center; gap: var(--spacing-xs); padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg); text-align: center; }
.customer-profile[b-i2qyapzkoz]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }
.customer-profile > div[b-i2qyapzkoz] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; justify-content: center; color: var(--colors-text-muted); }
.customer-profile__platform[b-i2qyapzkoz] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--colors-text-secondary);
  text-decoration: none;
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.customer-profile__platform:hover[b-i2qyapzkoz] { color: var(--colors-text-primary); border-color: var(--colors-accent-brand-border); }

/* It still scrolls; the bar stays out of the way (designer, 20 October 2026). */
.customer-panel__scroll[b-i2qyapzkoz] { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.customer-panel__scroll[b-i2qyapzkoz]::-webkit-scrollbar { display: none; }

.customer-panel__scroll[b-i2qyapzkoz]  .customer-section { padding: var(--spacing-xl); border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.customer-panel__scroll[b-i2qyapzkoz]  .customer-section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); color: var(--colors-text-muted); }
.customer-panel__scroll[b-i2qyapzkoz]  .customer-section > header > span { display: grid; place-items: center; min-width: var(--spacing-lg); height: var(--spacing-lg); color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-full); }

.customer-contact-list[b-i2qyapzkoz] { display: grid; gap: var(--spacing-xs); }
.customer-contact-list[b-i2qyapzkoz] >  .ds-row-button,
.customer-contact-list > div[b-i2qyapzkoz] { display: grid; grid-template-columns: var(--spacing-2xl) minmax(0, 1fr) var(--spacing-lg); gap: var(--spacing-sm); align-items: center; min-height: var(--spacing-4xl); padding: var(--spacing-xs) var(--spacing-sm); color: var(--colors-text-secondary); background: transparent; border: 0; border-radius: var(--radius-radius-md); text-align: left; }
.customer-contact-list[b-i2qyapzkoz] >  .ds-row-button:hover { background: var(--colors-interaction-hover); }
.customer-contact-list[b-i2qyapzkoz] >  .ds-row-button > svg:first-child,
.customer-contact-list > div[b-i2qyapzkoz] >  svg { color: var(--colors-brand-primary); }
.customer-contact-list[b-i2qyapzkoz] >  .ds-row-button > svg:last-child { color: var(--colors-text-muted); }
/* A channel they message you on: its mark, the channel and how they appear there, and Open. */
.customer-contact-list > .customer-channel[b-i2qyapzkoz] { grid-template-columns: var(--spacing-2xl) minmax(0, 1fr) auto; }
.customer-contact-list span[b-i2qyapzkoz] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.customer-contact-list[b-i2qyapzkoz]  small { color: var(--colors-text-muted); }
.customer-contact-list[b-i2qyapzkoz]  strong { overflow: hidden; color: var(--colors-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.customer-detail-loading[b-i2qyapzkoz] { display: grid; gap: var(--spacing-md); padding-block: var(--spacing-md); }

.customer-latest-note[b-i2qyapzkoz] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-feedback-warning-subtle);
  border: var(--ds-hairline) solid var(--colors-feedback-warning-border);
  border-radius: var(--radius-radius-lg);
}
.customer-latest-note > header[b-i2qyapzkoz] { display: flex; gap: var(--spacing-xs); align-items: center; min-width: 0; }
.customer-latest-note > header > span[b-i2qyapzkoz] { display: grid; place-items: center; color: var(--colors-feedback-warning-text); }
.customer-latest-note > header[b-i2qyapzkoz]  strong { overflow: hidden; color: var(--colors-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.customer-latest-note > header[b-i2qyapzkoz]  time { flex: 0 0 auto; margin-left: auto; color: var(--colors-text-muted); white-space: nowrap; }
.customer-latest-note[b-i2qyapzkoz] >  p { color: var(--colors-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }

.customer-tasks[b-i2qyapzkoz] { display: grid; gap: var(--spacing-xs); }
.customer-tasks > a[b-i2qyapzkoz] { display: grid; grid-template-columns: var(--spacing-3xl) minmax(0, 1fr) auto; gap: var(--spacing-sm); align-items: center; width: 100%; min-height: var(--spacing-5xl); padding: var(--spacing-xs) var(--spacing-sm); color: var(--colors-text-secondary); text-decoration: none; border-radius: var(--radius-radius-md); }
.customer-tasks > a:hover[b-i2qyapzkoz] { background: var(--colors-interaction-hover); }
.customer-tasks > a > span:first-child[b-i2qyapzkoz] { display: grid; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-md); }
.customer-tasks > a > span:nth-child(2)[b-i2qyapzkoz] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.customer-task__arrow[b-i2qyapzkoz] { display: grid; place-items: center; color: var(--colors-text-muted); }

/* This customer's open tasks: room between the lines, the title in body weight, the kind beside its first line. */
.customer-task-list[b-i2qyapzkoz] {
  /* Missing from the token set: an agent's look, inline with small type. */
  --ds-customer-task-look: 18px;

  display: grid;
  gap: var(--spacing-sm);
}
.customer-task-list > a.customer-task[b-i2qyapzkoz] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-md) var(--spacing-sm);
  margin-inline: calc(var(--spacing-sm) * -1);
  color: var(--colors-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-radius-lg);
}
.customer-task-list > a.customer-task:hover[b-i2qyapzkoz] { background: var(--colors-interaction-hover); }
.customer-task-list > a.customer-task > .customer-task__arrow[b-i2qyapzkoz] { align-self: center; }
.customer-task__words[b-i2qyapzkoz] { display: grid; gap: var(--spacing-sm); min-width: 0; }
.customer-task__words[b-i2qyapzkoz]  .customer-task__title { color: var(--colors-text-primary); }
.customer-task__meta[b-i2qyapzkoz] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
.customer-task__look[b-i2qyapzkoz] { width: var(--ds-customer-task-look); height: var(--ds-customer-task-look); object-fit: cover; border-radius: var(--radius-radius-full); }
.customer-task-list[b-i2qyapzkoz] >  .customer-empty { padding-block: var(--spacing-xs); }
.customer-task-list > a.customer-tasks__more[b-i2qyapzkoz] { display: block; padding: var(--spacing-xs) var(--spacing-none); color: var(--colors-text-link); text-decoration: none; }
.customer-task-list[b-i2qyapzkoz]  .customer-tasks__add { justify-self: start; margin-top: var(--spacing-sm); }
.customer-tasks[b-i2qyapzkoz]  strong { color: var(--colors-text-primary); }
.customer-tasks[b-i2qyapzkoz]  small { color: var(--colors-text-muted); }
.customer-empty[b-i2qyapzkoz] { color: var(--colors-text-muted); }

.customer-tags[b-i2qyapzkoz] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-top: var(--spacing-sm); }
.customer-tags[b-i2qyapzkoz]  span { padding: var(--spacing-2xs) var(--spacing-sm); color: var(--colors-text-secondary); background: var(--colors-surface-muted); border-radius: var(--radius-radius-full); }

.customer-media-tabs[b-i2qyapzkoz] { margin-bottom: var(--spacing-md); }
.customer-media-grid[b-i2qyapzkoz] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xs); }
.customer-media-state[b-i2qyapzkoz] { display: grid; justify-items: start; gap: var(--spacing-xs); color: var(--colors-text-muted); }
.customer-media-tile[b-i2qyapzkoz] { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; overflow: hidden; color: var(--colors-text-muted); background: var(--colors-surface-muted); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-md); cursor: pointer; }
.customer-media-tile:hover[b-i2qyapzkoz] { border-color: var(--colors-accent-brand-border); }
.customer-media-tile:focus-visible[b-i2qyapzkoz] { outline: var(--ds-hairline) solid var(--colors-brand-primary); outline-offset: var(--ds-hairline); }
.customer-media-tile img[b-i2qyapzkoz], .customer-media-tile video[b-i2qyapzkoz] { display: block; width: 100%; height: 100%; object-fit: cover; }
.customer-media-tile.is-sticker img[b-i2qyapzkoz] { object-fit: contain; }
.customer-media-tile.is-unavailable[b-i2qyapzkoz] { border-style: dashed; cursor: default; }
.customer-media-tile.is-video > span[b-i2qyapzkoz] { position: absolute; display: grid; place-items: center; width: var(--spacing-2xl); height: var(--spacing-2xl); color: var(--colors-text-inverse); background: color-mix(in srgb, var(--colors-text-primary) 60%, transparent); border-radius: var(--radius-radius-full); }
.customer-section[b-i2qyapzkoz]  .customer-media-more { margin-top: var(--spacing-sm); }

.customer-audio[b-i2qyapzkoz] { display: grid; gap: var(--spacing-xs); padding: var(--spacing-sm); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-lg); }
.customer-audio small[b-i2qyapzkoz] { color: var(--colors-text-muted); }
.customer-audio audio[b-i2qyapzkoz] { width: 100%; }
.customer-file-unavailable[b-i2qyapzkoz] { display: grid; grid-template-columns: var(--spacing-3xl) minmax(0, 1fr); gap: var(--spacing-sm); align-items: center; padding: var(--spacing-sm); color: var(--colors-text-muted); border: var(--ds-hairline) dashed var(--colors-surface-border); border-radius: var(--radius-radius-lg); }
.customer-file-unavailable > span:first-child[b-i2qyapzkoz] { display: grid; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); }
.customer-file-unavailable > span:nth-child(2)[b-i2qyapzkoz] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
/* /Components/Pages/Dashboard/Conversations/ReplyWindowChip.razor.rz.scp.css */
.reply-window[b-06686ojcpg] { font-weight: inherit; }
.reply-window.is-open[b-06686ojcpg] { color: var(--colors-accent-teal-text); }
.reply-window.is-closing[b-06686ojcpg] { color: var(--colors-feedback-warning-text); }
.reply-window.is-closed[b-06686ojcpg] { color: var(--colors-feedback-destructive-text); }
/* /Components/Pages/Dashboard/Conversations/ResponseControl.razor.rz.scp.css */
.response-control[b-t94j28wobu] {
  overflow: hidden;
  color: var(--colors-text-secondary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--colors-surface-shadow-diffuse);
}

.response-control.ai-has-control[b-t94j28wobu] { background: var(--colors-accent-brand-subtle); border-color: var(--colors-accent-brand-muted); }
.response-control.human-has-control[b-t94j28wobu] { background: var(--colors-accent-teal-subtle); border-color: var(--colors-accent-teal-muted); }

.response-control__row[b-t94j28wobu] { display: flex; gap: var(--spacing-lg); align-items: center; min-height: var(--ds-control-row-min); padding: var(--spacing-sm) var(--spacing-md); }
.response-control__copy[b-t94j28wobu] { display: flex; gap: var(--spacing-sm); align-items: center; min-width: 0; color: var(--colors-brand-primary); }
.human-has-control .response-control__copy[b-t94j28wobu] { color: var(--colors-accent-teal-text); }
.response-control__copy > span[b-t94j28wobu] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.response-control__copy[b-t94j28wobu]  strong { color: var(--colors-text-primary); }
.response-control__copy[b-t94j28wobu]  small { color: var(--colors-text-muted); }

.response-control__action[b-t94j28wobu] {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: center;
  min-height: var(--ds-control-action-height);
  padding-inline: var(--spacing-md);
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.response-control__action:hover[b-t94j28wobu] { background: var(--colors-brand-primary-hover); }
.response-control__action.is-return[b-t94j28wobu] { color: var(--colors-accent-teal-text); background: var(--colors-surface-card); }
.response-control__action.is-return:hover[b-t94j28wobu] { background: var(--colors-interaction-hover); }
.response-control__action:disabled[b-t94j28wobu],
.response-control__options button:disabled[b-t94j28wobu] { cursor: not-allowed; opacity: var(--ds-control-disabled-opacity); }

.response-control__disclosure[b-t94j28wobu] { display: grid; grid-template-rows: 0fr; opacity: 0; }
.response-control__disclosure > div[b-t94j28wobu] { min-height: 0; overflow: hidden; }
.response-control.is-expanded .response-control__disclosure[b-t94j28wobu] { grid-template-rows: 1fr; opacity: 1; }
.response-control__disclosure > div[b-t94j28wobu] { display: grid; gap: var(--spacing-sm); padding-inline: var(--spacing-md); }
.response-control.is-expanded .response-control__disclosure > div[b-t94j28wobu] { padding-bottom: var(--spacing-md); }
.response-control__disclosure[b-t94j28wobu]  > div > span { color: var(--colors-text-muted); }
.response-control__options[b-t94j28wobu] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.response-control__options button[b-t94j28wobu] { min-height: var(--spacing-3xl); padding-inline: var(--spacing-md); color: var(--colors-text-secondary); background: var(--colors-surface-card); border: 0; border-radius: var(--radius-radius-full); cursor: pointer; }
.response-control__options button:hover[b-t94j28wobu] { color: var(--colors-brand-primary); background: var(--colors-interaction-hover); }

.response-control[b-t94j28wobu] {
  /* Missing from the token set: no compact control-height, opacity or motion scale. */
  --ds-control-row-min: 54px;
  --ds-control-action-height: 34px;
  --ds-control-disabled-opacity: 0.5;
  --ds-control-motion: 260ms;
  --ds-control-motion-quick: 150ms;
  --ds-control-motion-lag: 55ms;
  --ds-control-motion-none: 0s;
  --ds-control-settle: 900ms;
  --ds-control-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Half the closed bar: a real radius, so the change to the open card eases
     all the way instead of staying round and snapping at the end. */
  --ds-control-pill-radius: 28px;
  --ds-control-ring: 3px;
}

.response-control__countdown[b-t94j28wobu] { color: var(--colors-text-primary); font-variant-numeric: tabular-nums; }

/* React's bar: one white pill in both states, rounding off to a card when
   the take-over options open, with its action at the far right. */
.response-control[b-t94j28wobu],
.response-control.ai-has-control[b-t94j28wobu],
.response-control.human-has-control[b-t94j28wobu] {
  background: color-mix(in srgb, var(--colors-surface-card) 94%, transparent);
  border-color: var(--colors-surface-border);
  border-radius: var(--ds-control-pill-radius);
  box-shadow: 0 var(--spacing-xs) var(--spacing-lg) var(--colors-surface-shadow);
  transition: border-radius var(--ds-control-motion) var(--ds-control-ease), box-shadow var(--ds-control-motion) ease;
}
.response-control.is-expanded[b-t94j28wobu] { border-radius: var(--radius-radius-xl); }
.response-control__row[b-t94j28wobu] { justify-content: space-between; }


/* React's take-over choice: one row under a hairline, the question on the
   left and the lengths as soft brand pills on the right; the Take over button
   steps back while the choice is open. */
.response-control__disclosure > .response-control__panel[b-t94j28wobu] {
  position: relative;
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding: 0 var(--spacing-xs) 0 var(--spacing-md);
}
.response-control.is-expanded .response-control__disclosure > .response-control__panel[b-t94j28wobu] { padding-block: var(--spacing-sm); }
.response-control__panel[b-t94j28wobu]::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--spacing-md);
  left: var(--spacing-md);
  height: var(--ds-hairline);
  background: var(--colors-surface-border);
}
.response-control__panel[b-t94j28wobu] >  span { color: var(--colors-text-muted); white-space: nowrap; }
.response-control__panel > .response-control__options[b-t94j28wobu] { flex-wrap: nowrap; margin-left: auto; }
.response-control__options[b-t94j28wobu]  .ds-button {
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-full);
  white-space: nowrap;
}
.response-control__options[b-t94j28wobu]  .ds-button:hover:not(:disabled) {
  background: var(--colors-accent-brand-muted);
  border-color: var(--colors-accent-brand-border);
}
/* Cancel is not a length: it stays quiet. */
.response-control__options[b-t94j28wobu]  .ds-button.response-control__cancel {
  color: var(--colors-text-muted);
  background: transparent;
  border-color: transparent;
}
.response-control__options[b-t94j28wobu]  .ds-button.response-control__cancel:hover:not(:disabled) { color: var(--colors-text-primary); background: var(--colors-interaction-hover); border-color: transparent; }
.response-control__row[b-t94j28wobu]  .response-control__action[aria-expanded="true"] {
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
}

/* Room inside the pill: its round ends need more inset than a square card,
   so the copy sits clear of the curve and the action balances it. */
.response-control__row[b-t94j28wobu] { padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-xl); }
.response-control__disclosure > .response-control__panel[b-t94j28wobu] { padding-left: var(--spacing-xl); }
.response-control__panel[b-t94j28wobu]::before { left: var(--spacing-xl); right: var(--spacing-xl); }

/* Motion, after React's bar. Opening, the card grows first and the choice
   fades in just behind it, sliding down a touch; closing, the choice fades
   out quickly and the card follows. */
.response-control__disclosure[b-t94j28wobu] {
  visibility: hidden;
  transition: grid-template-rows var(--ds-control-motion) var(--ds-control-ease), opacity var(--ds-control-motion-quick) ease, visibility var(--ds-control-motion-none) linear var(--ds-control-motion);
}
.response-control.is-expanded .response-control__disclosure[b-t94j28wobu] {
  visibility: visible;
  transition: grid-template-rows var(--ds-control-motion) var(--ds-control-ease), opacity var(--ds-control-motion-quick) ease var(--ds-control-motion-lag), visibility var(--ds-control-motion-none);
}
.response-control__disclosure > .response-control__panel[b-t94j28wobu] {
  transform: translateY(calc(var(--spacing-xs) * -1));
  transition: padding var(--ds-control-motion) var(--ds-control-ease), transform var(--ds-control-motion) var(--ds-control-ease);
}
.response-control.is-expanded .response-control__disclosure > .response-control__panel[b-t94j28wobu] { transform: none; }
.response-control__panel[b-t94j28wobu]::before { opacity: 0; transition: opacity var(--ds-control-motion-quick) ease; }
.response-control.is-expanded .response-control__panel[b-t94j28wobu]::before { opacity: 1; transition-delay: var(--ds-control-motion-lag); }

/* A change of hands: the new row rises into place, its action just after the
   words, and the bar gives one soft ring in the new owner's colour, so the
   switch is seen without anything else moving. The ring comes second in the
   list so it fades out on its own while the bar's shadow stays put. */
.response-control__row.is-arriving[b-t94j28wobu] >  * { animation: response-control-arrive-b-t94j28wobu var(--ds-control-motion) var(--ds-control-ease) both; }
.response-control__row.is-arriving[b-t94j28wobu] >  :last-child { animation-delay: var(--ds-control-motion-lag); }
.response-control.is-settling-human[b-t94j28wobu] { animation: response-control-settle-human-b-t94j28wobu var(--ds-control-settle) ease-out; }
.response-control.is-settling-ai[b-t94j28wobu] { animation: response-control-settle-ai-b-t94j28wobu var(--ds-control-settle) ease-out; }

@keyframes response-control-arrive-b-t94j28wobu {
  from { opacity: 0; transform: translateY(var(--spacing-xs)); }
}
@keyframes response-control-settle-human-b-t94j28wobu {
  from { box-shadow: 0 var(--spacing-xs) var(--spacing-lg) var(--colors-surface-shadow), 0 0 0 var(--ds-control-ring) var(--colors-accent-teal-border); }
}
@keyframes response-control-settle-ai-b-t94j28wobu {
  from { box-shadow: 0 var(--spacing-xs) var(--spacing-lg) var(--colors-surface-shadow), 0 0 0 var(--ds-control-ring) var(--colors-accent-brand-border); }
}

@media (prefers-reduced-motion: reduce) {
  .response-control[b-t94j28wobu],
  .response-control__disclosure[b-t94j28wobu],
  .response-control.is-expanded .response-control__disclosure[b-t94j28wobu],
  .response-control__disclosure > .response-control__panel[b-t94j28wobu],
  .response-control__panel[b-t94j28wobu]::before { transition: none; }
  .response-control.is-settling-human[b-t94j28wobu],
  .response-control.is-settling-ai[b-t94j28wobu],
  .response-control__row.is-arriving[b-t94j28wobu] >  * { animation: none; }
}
/* /Components/Pages/Dashboard/Conversations/SavedRepliesMenu.razor.rz.scp.css */
.saved-replies[b-u9nzo2j9gx] { position: relative; }
.saved-replies__trigger[b-u9nzo2j9gx] { display: grid; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); padding: 0; color: var(--colors-text-muted); background: transparent; border: 0; border-radius: var(--radius-radius-full); cursor: pointer; }
.saved-replies__trigger:hover[b-u9nzo2j9gx] { color: var(--colors-brand-primary); background: var(--colors-interaction-hover); }
.saved-replies__trigger:disabled[b-u9nzo2j9gx] { cursor: not-allowed; opacity: var(--ds-saved-disabled-opacity); }
.saved-replies__dismiss[b-u9nzo2j9gx] { position: fixed; inset: 0; z-index: var(--ds-saved-layer); padding: 0; background: transparent; border: 0; }

.saved-replies__menu[b-u9nzo2j9gx] { position: absolute; bottom: calc(100% + var(--spacing-sm)); left: 0; z-index: calc(var(--ds-saved-layer) + 1); display: grid; width: min(var(--ds-saved-width), calc(100vw - var(--spacing-4xl))); max-height: var(--ds-saved-height); overflow: hidden; color: var(--colors-text-secondary); background: var(--colors-surface-popover); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-xl); box-shadow: 0 var(--spacing-lg) var(--spacing-4xl) var(--colors-surface-shadow); }
.saved-replies__menu > header[b-u9nzo2j9gx] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-sm); align-items: center; padding: var(--spacing-md); border-bottom: var(--ds-hairline) solid var(--colors-surface-border); }
.saved-replies__menu > header > span[b-u9nzo2j9gx] { display: grid; place-items: center; width: var(--spacing-3xl); height: var(--spacing-3xl); color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-md); }
.saved-replies__menu > header > div[b-u9nzo2j9gx] { display: grid; gap: var(--spacing-2xs); }
.saved-replies__menu > header[b-u9nzo2j9gx]  small { color: var(--colors-text-muted); }
.saved-replies__new[b-u9nzo2j9gx] { display: inline-flex; gap: var(--spacing-2xs); align-items: center; min-height: var(--spacing-3xl); padding-inline: var(--spacing-sm); color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); border: 0; border-radius: var(--radius-radius-full); cursor: pointer; }
.saved-replies__new:disabled[b-u9nzo2j9gx] { cursor: not-allowed; opacity: var(--ds-saved-disabled-opacity); }
.saved-replies__menu[b-u9nzo2j9gx] >  .inline-error { margin: var(--spacing-sm); }

.saved-replies__list[b-u9nzo2j9gx] { min-height: 0; padding: var(--spacing-xs); overflow-y: auto; }
.saved-replies__list > button[b-u9nzo2j9gx] { display: grid; gap: var(--spacing-xs); width: 100%; padding: var(--spacing-sm) var(--spacing-md); text-align: left; background: transparent; border: 0; border-radius: var(--radius-radius-md); cursor: pointer; }
.saved-replies__list > button:hover[b-u9nzo2j9gx] { background: var(--colors-interaction-hover); }
.saved-replies__list > button[b-u9nzo2j9gx]  strong { color: var(--colors-text-primary); }
.saved-replies__list > button[b-u9nzo2j9gx]  span { display: -webkit-box; overflow: hidden; color: var(--colors-text-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.saved-replies__form[b-u9nzo2j9gx] { display: grid; gap: var(--spacing-md); padding: var(--spacing-md); overflow-y: auto; }
.saved-replies__form > label[b-u9nzo2j9gx] { display: grid; gap: var(--spacing-xs); }
.saved-replies__form textarea[b-u9nzo2j9gx] { width: 100%; padding: var(--spacing-md); color: var(--colors-text-primary); line-height: var(--typography-leading-leading-lg); resize: none; background: var(--colors-surface-input); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-lg); outline: 0; }
.saved-replies__form textarea:focus[b-u9nzo2j9gx] { border-color: var(--colors-brand-primary); }
.saved-replies__form > footer[b-u9nzo2j9gx] { display: flex; gap: var(--spacing-sm); justify-content: flex-end; }
.saved-replies__loading[b-u9nzo2j9gx] { display: grid; gap: var(--spacing-md); padding: var(--spacing-xl); }

.saved-replies[b-u9nzo2j9gx] {
  /* Missing from the token set: no popover width, height, layer or disabled-opacity scale. */
  --ds-saved-width: 380px;
  --ds-saved-height: 430px;
  --ds-saved-layer: 80;
  --ds-saved-disabled-opacity: 0.5;
}

/* However many replies there are, the menu keeps its height: the header and
   search stay put and the list scrolls between them. */
.saved-replies__menu[b-u9nzo2j9gx] { display: flex; flex-direction: column; }
.saved-replies__menu > header[b-u9nzo2j9gx],
.saved-replies__search[b-u9nzo2j9gx] { flex: 0 0 auto; }
.saved-replies__search[b-u9nzo2j9gx] { padding: var(--spacing-sm) var(--spacing-sm) 0; }
.saved-replies__list[b-u9nzo2j9gx] { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.saved-replies__list[b-u9nzo2j9gx]  .saved-replies__none { padding: var(--spacing-lg) var(--spacing-sm); color: var(--colors-text-muted); text-align: center; }

/* A row: the reply (choosing it inserts it) and its edit and delete actions,
   which show on hover or keyboard focus so the list stays calm. */
.saved-replies__item[b-u9nzo2j9gx] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--radius-radius-md); }
.saved-replies__item:hover[b-u9nzo2j9gx],
.saved-replies__item:focus-within[b-u9nzo2j9gx] { background: var(--colors-interaction-hover); }
.saved-replies__item[b-u9nzo2j9gx] >  .saved-replies__pick { display: grid; gap: var(--spacing-xs); min-width: 0; padding: var(--spacing-sm) var(--spacing-md); text-align: left; background: transparent; border: 0; border-radius: var(--radius-radius-md); cursor: pointer; }
.saved-replies__item[b-u9nzo2j9gx] >  .saved-replies__pick strong { color: var(--colors-text-primary); }
.saved-replies__item[b-u9nzo2j9gx] >  .saved-replies__pick span { display: -webkit-box; overflow: hidden; color: var(--colors-text-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.saved-replies__actions[b-u9nzo2j9gx] { display: flex; gap: var(--spacing-2xs); padding-right: var(--spacing-xs); opacity: 0; transition: opacity var(--ds-motion-fast) ease; }
.saved-replies__item:hover .saved-replies__actions[b-u9nzo2j9gx],
.saved-replies__item:focus-within .saved-replies__actions[b-u9nzo2j9gx] { opacity: 1; }
.saved-replies__actions[b-u9nzo2j9gx]  .ds-button { color: var(--colors-text-muted); }
.saved-replies__actions[b-u9nzo2j9gx]  .saved-replies__delete:hover:not(:disabled) { color: var(--colors-feedback-destructive-text); background: var(--colors-feedback-destructive-subtle); }

/* Asked in place: the row turns into the question. */
.saved-replies__item.is-confirming[b-u9nzo2j9gx] { grid-template-columns: minmax(0, 1fr); background: var(--colors-feedback-destructive-subtle); }
.saved-replies__confirm[b-u9nzo2j9gx] { display: grid; gap: var(--spacing-2xs); padding: var(--spacing-sm) var(--spacing-md); }
.saved-replies__confirm[b-u9nzo2j9gx]  strong { color: var(--colors-text-primary); }
.saved-replies__confirm[b-u9nzo2j9gx]  span { color: var(--colors-text-muted); }
.saved-replies__confirm > div[b-u9nzo2j9gx] { display: flex; gap: var(--spacing-xs); justify-content: flex-end; margin-top: var(--spacing-xs); }

/* Touch screens have no hover: keep the actions visible there. */
@media (hover: none) { .saved-replies__actions[b-u9nzo2j9gx] { opacity: 1; } }
/* /Components/Pages/Dashboard/Dashboard/DashboardHome.razor.rz.scp.css */
/* The dashboard before any channel is connected, ported from Aurora's
   activation overview (CreateWorkspacePage). The page sits inside the
   dashboard shell, so it fills the main area rather than the window. */

.workspace-onboarding[b-m8ngb666kk] {
  /* Gaps in the token set: no content-width, illustration-size, border-width
     or long-form motion scale for this activation dashboard. */
  --ds-workspace-home-width: 1040px;
  --ds-workspace-card-border: 1px;
  --ds-workspace-channel-card-min: 210px;
  --ds-workspace-flow-token: 48px;
  --ds-workspace-flow-destination: 64px;
  --ds-workspace-flow-line: 84px;
  --ds-workspace-flow-cycle: 2400ms;
  /* Not tokens: how many times the channel-to-inbox dot plays before it
     rests, and how long after the page arrives it starts. Three runs shows
     the idea; forever would be motion nobody asked for on a page people sit
     on. */
  --ds-workspace-flow-runs: 3;
  --ds-workspace-flow-start: 600ms;
  /* Not a token: the gap between each part of the page arriving. */
  --ds-workspace-stagger: 60ms;
  --ds-workspace-copy-measure: 42ch;

  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  padding: var(--spacing-4xl);
  color: var(--colors-text-primary);
  background: var(--colors-surface-background);
}

.workspace-onboarding__header[b-m8ngb666kk],
.workspace-actions[b-m8ngb666kk],
.workspace-onboarding__hint[b-m8ngb666kk] {
  width: min(100%, var(--ds-workspace-home-width));
  margin-inline: auto;
}

.workspace-onboarding__header[b-m8ngb666kk] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
}

.workspace-onboarding__header[b-m8ngb666kk]  h1,
.workspace-onboarding__header[b-m8ngb666kk]  p { margin: var(--spacing-none); }

.workspace-onboarding__header[b-m8ngb666kk]  p {
  max-width: var(--ds-workspace-copy-measure);
  color: var(--colors-text-secondary);
}

.workspace-actions[b-m8ngb666kk] {
  display: grid;
  gap: var(--spacing-lg);
}

.workspace-action[b-m8ngb666kk] {
  min-width: 0;
  background: var(--colors-surface-card);
  border: var(--ds-workspace-card-border) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.workspace-action--channels[b-m8ngb666kk] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-4xl);
  min-height: var(--ds-workspace-channel-card-min);
  padding: var(--spacing-3xl);
  overflow: hidden;
  background:
    radial-gradient(circle at right center, var(--colors-accent-cyan-subtle), transparent 42%),
    var(--colors-surface-card);
}

.workspace-action__content[b-m8ngb666kk] {
  display: grid;
  justify-items: start;
  gap: var(--spacing-sm);
  min-width: 0;
}

.workspace-action__content[b-m8ngb666kk]  h2,
.workspace-action__content[b-m8ngb666kk]  p { margin: var(--spacing-none); }

.workspace-action__content[b-m8ngb666kk]  p {
  max-width: var(--ds-workspace-copy-measure);
  color: var(--colors-text-secondary);
}

.workspace-action--channels .workspace-action__content[b-m8ngb666kk]  .ds-button {
  margin-top: var(--spacing-md);
}

.workspace-channel-flow[b-m8ngb666kk] {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-inline: var(--spacing-xl);
}

.workspace-channel-flow__socials[b-m8ngb666kk] {
  display: flex;
  align-items: center;
}

.workspace-channel-flow__socials > span[b-m8ngb666kk],
.workspace-channel-flow__inbox[b-m8ngb666kk] {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--ds-workspace-flow-token);
  height: var(--ds-workspace-flow-token);
  background: var(--colors-surface-elevated);
  border: var(--ds-workspace-card-border) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-xs) var(--spacing-lg) var(--colors-surface-shadow-diffuse);
}

.workspace-channel-flow__socials > span + span[b-m8ngb666kk] {
  margin-left: calc(var(--spacing-sm) * -1);
}

.workspace-channel-flow__socials .flow-whatsapp[b-m8ngb666kk] { color: #22a968; }
.workspace-channel-flow__socials .flow-instagram[b-m8ngb666kk] { color: #c63886; }
.workspace-channel-flow__socials .flow-facebook[b-m8ngb666kk] { color: #1877f2; }

.workspace-channel-flow__line[b-m8ngb666kk] {
  position: relative;
  width: var(--ds-workspace-flow-line);
  height: var(--ds-workspace-card-border);
  overflow: hidden;
  background: var(--colors-accent-brand-muted);
}

.workspace-channel-flow__line i[b-m8ngb666kk] {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--spacing-sm);
  height: var(--spacing-sm);
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
  opacity: 0;
  transform: translate(-100%, -50%);
}

.workspace-onboarding.is-live .workspace-channel-flow__line i[b-m8ngb666kk] {
  animation: workspace-flow-signal-b-m8ngb666kk var(--ds-workspace-flow-cycle) var(--ds-motion-ease)
    var(--ds-workspace-flow-start) var(--ds-workspace-flow-runs) both;
}

/* The hand-off from the dialog: as it fades out, the page rises in behind it,
   one part after another, top to bottom. */
.workspace-onboarding.is-live :is(.workspace-onboarding__header, .workspace-action, .workspace-onboarding__hint)[b-m8ngb666kk] {
  animation: workspace-arrive-b-m8ngb666kk var(--ds-motion-slow) var(--ds-motion-enter) both;
}

.workspace-onboarding.is-live .workspace-onboarding__header[b-m8ngb666kk] { animation-delay: var(--ds-workspace-stagger); }
.workspace-onboarding.is-live .workspace-action:nth-child(1)[b-m8ngb666kk] { animation-delay: calc(var(--ds-workspace-stagger) * 2); }
.workspace-onboarding.is-live .workspace-action:nth-child(2)[b-m8ngb666kk] { animation-delay: calc(var(--ds-workspace-stagger) * 3); }
.workspace-onboarding.is-live .workspace-onboarding__hint[b-m8ngb666kk] { animation-delay: calc(var(--ds-workspace-stagger) * 4); }

@keyframes workspace-arrive-b-m8ngb666kk {
  from {
    opacity: 0;
    transform: translateY(var(--spacing-md));
  }
}

.workspace-channel-flow__inbox[b-m8ngb666kk] {
  width: var(--ds-workspace-flow-destination);
  height: var(--ds-workspace-flow-destination);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
}

.workspace-action--ai[b-m8ngb666kk] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
}

.workspace-action--ai.is-locked[b-m8ngb666kk] { background: var(--colors-surface-muted); }
.workspace-action--ai.is-ready[b-m8ngb666kk] { border-color: var(--colors-accent-brand-muted); }

/* Concept B (demo): "Tell us about your business", and the channel step once
   it is done, share the AI card's row: an icon, the words, one action. */
.workspace-action--row[b-m8ngb666kk] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
}

.workspace-action--row.is-done .workspace-action__icon[b-m8ngb666kk] {
  color: var(--colors-accent-green-text);
  background: var(--colors-accent-green-subtle);
}

.workspace-onboarding.is-live .workspace-action:nth-child(3)[b-m8ngb666kk] { animation-delay: calc(var(--ds-workspace-stagger) * 4); }

.workspace-action__icon[b-m8ngb666kk] {
  display: grid;
  place-items: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-xl);
}

.workspace-action--ai.is-locked .workspace-action__icon[b-m8ngb666kk] {
  color: var(--colors-icon-muted);
  background: var(--colors-surface-input);
}

.workspace-action__title-row[b-m8ngb666kk] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
}

.workspace-action__lock[b-m8ngb666kk] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--colors-text-muted);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
}

.workspace-onboarding__hint[b-m8ngb666kk] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xl);
  color: var(--colors-text-muted);
}

.workspace-onboarding__hint[b-m8ngb666kk]  p { margin: var(--spacing-none); }

@keyframes workspace-flow-signal-b-m8ngb666kk {
  0%, 18% { transform: translate(-100%, -50%); opacity: 0; }
  28% { opacity: 1; }
  72% { opacity: 1; }
  82%, 100% { transform: translate(calc(var(--ds-workspace-flow-line) + 100%), -50%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-onboarding.is-live .workspace-channel-flow__line i[b-m8ngb666kk] { animation: none; display: none; }
  .workspace-onboarding.is-live :is(.workspace-onboarding__header, .workspace-action, .workspace-onboarding__hint)[b-m8ngb666kk] { animation: none; }
}

/* ── One page that grows ───────────────────────────────────────────────── */

.workspace-onboarding[b-m8ngb666kk] {
  /* Missing from the token set: the agent's picture on its card, and the
     partner mark in a row's icon tile. */
  --ds-workspace-agent: 88px;
  --ds-workspace-partner-mark: 28px;
}

/* The big card is always the one thing to do next: Concept A's first card,
   for whichever step that is. */
.workspace-action--lead[b-m8ngb666kk] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-4xl);
  min-height: var(--ds-workspace-channel-card-min);
  padding: var(--spacing-3xl);
  overflow: hidden;
  background:
    radial-gradient(circle at right center, var(--colors-accent-cyan-subtle), transparent 42%),
    var(--colors-surface-card);
}

.workspace-action--lead .workspace-action__content[b-m8ngb666kk]  .ds-button,
.workspace-action--lead .workspace-action__buttons[b-m8ngb666kk] { margin-top: var(--spacing-md); }
.workspace-action--lead .workspace-action__buttons[b-m8ngb666kk]  .ds-button { margin-top: var(--spacing-none); }

.workspace-action__buttons[b-m8ngb666kk] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

/* The agent, on its own card: its picture and where it stands. */
.workspace-agent[b-m8ngb666kk] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-sm);
  padding-inline: var(--spacing-xl);
}

.workspace-agent img[b-m8ngb666kk] {
  width: var(--ds-workspace-agent);
  height: var(--ds-workspace-agent);
  border-radius: var(--radius-radius-full);
  box-shadow: 0 var(--spacing-xs) var(--spacing-lg) var(--colors-surface-shadow-diffuse);
}

/* Accelerate: its mark on its own warm tile, its name in its colour. */
.workspace-action__icon.is-partner[b-m8ngb666kk] { background: var(--colors-accent-orange-subtle); }

.workspace-action__icon.is-partner img[b-m8ngb666kk] {
  width: var(--ds-workspace-partner-mark);
  height: var(--ds-workspace-partner-mark);
  object-fit: contain;
}

.workspace-action__content[b-m8ngb666kk]  .workspace-action__brand { color: var(--colors-accent-orange-text); }

/* Shortcuts, once there is an agent: four small cards. */
.workspace-shortcuts[b-m8ngb666kk] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-lg);
}

.workspace-shortcuts[b-m8ngb666kk]  .workspace-shortcut {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-xl);
  text-align: left;
  background: var(--colors-surface-card);
  border: var(--ds-workspace-card-border) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.workspace-shortcuts[b-m8ngb666kk]  .workspace-shortcut:hover { border-color: var(--colors-accent-brand-muted); }

.workspace-shortcut__top[b-m8ngb666kk] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  justify-self: stretch;
  margin-bottom: var(--spacing-sm);
}

.workspace-shortcut__icon[b-m8ngb666kk] {
  display: grid;
  place-items: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-xl);
}

/* Integrations: there, but its page is still to come. */
.workspace-shortcuts[b-m8ngb666kk]  .workspace-shortcut.is-soon { cursor: default; }
.workspace-shortcuts[b-m8ngb666kk]  .workspace-shortcut.is-soon:hover { border-color: var(--colors-surface-border); }

/* Each kind of card in the colour it has across the product: the icon in
   the accent's text colour on its subtle tile. Knowledge blue (Teach your
   AI, the agent page), conversations pink and the AI emerald (AI Operations'
   figures), channels cyan (the channel card's light), integrations indigo
   (new, and used for nothing else). */
.workspace-onboarding .is-tone-blue[b-m8ngb666kk] { color: var(--colors-accent-blue-text); background: var(--colors-accent-blue-subtle); }
.workspace-onboarding .is-tone-pink[b-m8ngb666kk] { color: var(--colors-accent-pink-text); background: var(--colors-accent-pink-subtle); }
.workspace-onboarding .is-tone-cyan[b-m8ngb666kk] { color: var(--colors-accent-cyan-text); background: var(--colors-accent-cyan-subtle); }
.workspace-onboarding .is-tone-emerald[b-m8ngb666kk] { color: var(--colors-accent-emerald-text); background: var(--colors-accent-emerald-subtle); }
.workspace-onboarding .is-tone-indigo[b-m8ngb666kk] { color: var(--colors-accent-indigo-text); background: var(--colors-accent-indigo-subtle); }

.workspace-shortcuts[b-m8ngb666kk]  .workspace-shortcut strong { color: var(--colors-text-primary); }
.workspace-shortcuts[b-m8ngb666kk]  .workspace-shortcut__line { color: var(--colors-text-muted); }

.workspace-onboarding.is-live :is(.workspace-shortcuts)[b-m8ngb666kk] { animation: workspace-arrive-b-m8ngb666kk var(--ds-motion-slow) var(--ds-motion-enter) both; }
.workspace-onboarding.is-live .workspace-action:nth-child(4)[b-m8ngb666kk] { animation-delay: calc(var(--ds-workspace-stagger) * 5); }
.workspace-onboarding.is-live .workspace-shortcuts[b-m8ngb666kk] { animation-delay: calc(var(--ds-workspace-stagger) * 6); }

@media (prefers-reduced-motion: reduce) {
  .workspace-onboarding.is-live .workspace-shortcuts[b-m8ngb666kk] { animation: none; }
}

/* Tablets: a row's action goes under its words, the shortcuts two by two. */
@media not all and (min-width: 1024px) {
  .workspace-action--row[b-m8ngb666kk] { grid-template-columns: auto minmax(0, 1fr); }
  .workspace-action--row[b-m8ngb666kk]  > :last-child { grid-column: 2; justify-self: start; }
  .workspace-shortcuts[b-m8ngb666kk] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Pages/Dashboard/Dashboard/WorkspaceWelcome.razor.rz.scp.css */
/* The workspace welcome card, ported from Aurora (the Original design).
   Everything below renders inside Dialog but comes from this component's own
   markup, so it carries this component's scope; ::deep is only needed to
   reach into child components such as Icon. The dark-mode overrides for the
   colour wash and the logo tile live in app.css, where the theme is visible. */

.workspace-dialog[b-bvh02nnbop] {
  display: grid;
  gap: var(--spacing-xl);
  /* Not a token: the same hairline the dashboard defines. The dialog renders
     outside the dashboard, so without its own copy every border in here
     that uses it (the logo tile, the channel marks) was silently dropped. */
  --ds-workspace-card-border: var(--ds-hairline);
}

/* Business name, then the optional phone number. */
.workspace-name-form[b-bvh02nnbop] {
  display: grid;
  gap: var(--spacing-lg);
}

.workspace-dialog__intro[b-bvh02nnbop] {
  display: grid;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.workspace-dialog__intro[b-bvh02nnbop]  h2,
.workspace-dialog__intro[b-bvh02nnbop]  p {
  margin: var(--spacing-none);
}

.workspace-dialog__intro[b-bvh02nnbop]  .workspace-dialog__title { color: var(--colors-text-primary); }
.workspace-dialog__intro[b-bvh02nnbop]  p { color: var(--colors-text-secondary); }

.workspace-ai-visual[b-bvh02nnbop] {
  /* Gaps in the token set: no compact visual-stage, token-size or ambient
     motion scale. The 24-second loop gives each channel eight quiet seconds. */
  --ds-workspace-visual-height: 164px;
  --ds-workspace-channel-token: 52px;
  --ds-workspace-brand-hub: 64px;
  --ds-workspace-visual-cycle: 24s;
  --ds-workspace-visual-step: 8s;

  position: relative;
  isolation: isolate;
  height: var(--ds-workspace-visual-height);
  overflow: hidden;
  background: transparent;
}

.workspace-dialog-gradient[b-bvh02nnbop] {
  --ds-workspace-gradient-brand: var(--colors-accent-brand-subtle);
  --ds-workspace-gradient-cyan: var(--colors-accent-cyan-subtle);
  --ds-workspace-gradient-cyan-wash: var(--colors-accent-cyan-muted);
  --ds-workspace-gradient-violet-wash: var(--colors-accent-violet-muted);
  --ds-workspace-gradient-pink-wash: var(--colors-accent-pink-muted);
  --ds-workspace-gradient-wash-peak: 0.78;

  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--ds-workspace-gradient-brand) 0%,
    var(--ds-workspace-gradient-cyan) 22%,
    transparent 58%
  );
}

.workspace-dialog-gradient__wash[b-bvh02nnbop] {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: workspace-visual-wash-b-bvh02nnbop var(--ds-workspace-visual-cycle) var(--ds-motion-ease) infinite;
}

.wash-cyan[b-bvh02nnbop] {
  background: linear-gradient(180deg, var(--ds-workspace-gradient-cyan-wash), transparent 58%);
}

.wash-violet[b-bvh02nnbop] {
  background: linear-gradient(180deg, var(--ds-workspace-gradient-violet-wash), transparent 58%);
  animation-delay: calc(var(--ds-workspace-visual-step) * -1);
}

.wash-pink[b-bvh02nnbop] {
  background: linear-gradient(180deg, var(--ds-workspace-gradient-pink-wash), transparent 58%);
  animation-delay: calc(var(--ds-workspace-visual-step) * -2);
}

.workspace-ai-visual__orbits[b-bvh02nnbop] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.workspace-orbit[b-bvh02nnbop],
.workspace-orbit-signal[b-bvh02nnbop] {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.workspace-orbit[b-bvh02nnbop] {
  stroke: var(--colors-surface-input);
  stroke-width: var(--ds-workspace-orbit-stroke);
  stroke-linecap: round;
}

.workspace-orbit-signal[b-bvh02nnbop] {
  stroke: var(--colors-brand-primary);
  stroke-width: var(--ds-workspace-orbit-signal-stroke);
  stroke-linecap: round;
  stroke-dasharray: var(--ds-workspace-orbit-dash) var(--ds-workspace-orbit-gap);
  opacity: 0;
  animation: workspace-orbit-signal-b-bvh02nnbop var(--ds-workspace-visual-cycle) linear infinite;
}

.workspace-ai-visual[b-bvh02nnbop] {
  /* SVG stroke geometry is local to this illustration and has no system token. */
  --ds-workspace-orbit-stroke: 1.5px;
  --ds-workspace-orbit-signal-stroke: 2px;
  --ds-workspace-orbit-dash: 18px;
  --ds-workspace-orbit-gap: 180px;
}

.signal-facebook[b-bvh02nnbop] { animation-delay: calc(var(--ds-workspace-visual-step) * -1); }
.signal-instagram[b-bvh02nnbop] { animation-delay: calc(var(--ds-workspace-visual-step) * -2); }

.workspace-channel-token[b-bvh02nnbop],
.workspace-omniai-hub[b-bvh02nnbop] {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--colors-surface-elevated);
  border: var(--ds-workspace-card-border) solid var(--colors-surface-border);
  box-shadow:
    0 var(--spacing-2xs) var(--spacing-md) var(--colors-surface-shadow),
    0 var(--spacing-sm) var(--spacing-xl) var(--colors-surface-shadow-diffuse);
}

.workspace-channel-token[b-bvh02nnbop] {
  width: var(--ds-workspace-channel-token);
  height: var(--ds-workspace-channel-token);
  border-radius: var(--radius-radius-full);
  animation: workspace-channel-emphasis-b-bvh02nnbop var(--ds-workspace-visual-cycle) var(--ds-motion-ease) infinite;
}

/* Only the icon dims between highlights. Dimming the whole mark made the
   circle see-through, and the line behind it showed through. */
.workspace-channel-token[b-bvh02nnbop] >  svg {
  opacity: 0.72;
  animation: workspace-channel-icon-b-bvh02nnbop var(--ds-workspace-visual-cycle) var(--ds-motion-ease) infinite;
  animation-delay: inherit;
}

/* Each mark sits on its line's end point, placed from its centre. The
   percentages are the SVG's coordinates over its 416 × 164 viewBox, so lines
   and marks stay joined when the dialog narrows. */
.workspace-channel-token[b-bvh02nnbop],
.workspace-omniai-hub[b-bvh02nnbop] {
  translate: -50% -50%;
}

.channel-whatsapp[b-bvh02nnbop] {
  top: calc(84 / 164 * 100%);
  left: calc(64 / 416 * 100%);
  color: #22a968;
}
.channel-facebook[b-bvh02nnbop] {
  top: calc(40 / 164 * 100%);
  left: 50%;
  color: #1877f2;
  animation-delay: calc(var(--ds-workspace-visual-step) * -1);
}
.channel-instagram[b-bvh02nnbop] {
  top: calc(84 / 164 * 100%);
  left: calc(352 / 416 * 100%);
  color: #c63886;
  animation-delay: calc(var(--ds-workspace-visual-step) * -2);
}

.workspace-omniai-hub[b-bvh02nnbop] {
  top: calc(124 / 164 * 100%);
  left: 50%;
  width: var(--ds-workspace-brand-hub);
  height: var(--ds-workspace-brand-hub);
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-color: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
}

/* The real yára mark on the brand fill: its slate bars take the
   foreground colour so they read on the hub; the reply stays terracotta. */
.workspace-omniai-hub[b-bvh02nnbop] { --cadence-bar: var(--colors-brand-primary-foreground); }

/* The illustration rests once the person is in a field or has typed a name,
   so nothing moves beside what they are doing. */
.workspace-dialog.has-business-name .workspace-channel-token[b-bvh02nnbop],
.workspace-dialog.has-business-name .workspace-channel-token[b-bvh02nnbop] >  svg,
.workspace-dialog.has-business-name .workspace-orbit-signal[b-bvh02nnbop],
.workspace-dialog:focus-within .workspace-channel-token[b-bvh02nnbop],
.workspace-dialog:focus-within .workspace-channel-token[b-bvh02nnbop] >  svg,
.workspace-dialog:focus-within .workspace-orbit-signal[b-bvh02nnbop] {
  animation-play-state: paused;
}

/* Animated on the compositor, not repainted every frame. */
.workspace-dialog-gradient__wash[b-bvh02nnbop] { will-change: opacity; }
.workspace-channel-token[b-bvh02nnbop] { will-change: transform; }

.workspace-dialog-gradient.has-business-name .workspace-dialog-gradient__wash[b-bvh02nnbop] {
  animation-play-state: paused;
}

@keyframes workspace-visual-wash-b-bvh02nnbop {
  0%, 4% { opacity: 0.16; }
  8%, 28% { opacity: var(--ds-workspace-gradient-wash-peak); }
  33.333%, 100% { opacity: 0; }
}

@keyframes workspace-channel-emphasis-b-bvh02nnbop {
  0%, 4% { transform: translateY(var(--spacing-none)) scale(1); }
  8%, 28% { transform: translateY(calc(var(--spacing-2xs) * -1)) scale(1.04); }
  33.333%, 100% { transform: translateY(var(--spacing-none)) scale(1); }
}

@keyframes workspace-channel-icon-b-bvh02nnbop {
  0%, 4% { opacity: 0.72; }
  8%, 28% { opacity: 1; }
  33.333%, 100% { opacity: 0.72; }
}

@keyframes workspace-orbit-signal-b-bvh02nnbop {
  0%, 5% { opacity: 0; stroke-dashoffset: var(--spacing-none); }
  9%, 27% { opacity: 0.6; }
  32%, 100% { opacity: 0; stroke-dashoffset: calc(var(--ds-workspace-orbit-gap) * -1); }
}

.workspace-dialog[b-bvh02nnbop] >  p {
  margin: var(--spacing-none);
  color: var(--colors-text-secondary);
}

.workspace-logo-field[b-bvh02nnbop] { display: grid; gap: var(--spacing-sm); }

.workspace-logo-field__heading[b-bvh02nnbop] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workspace-logo-field__heading[b-bvh02nnbop] >  span:last-child { color: var(--colors-text-muted); }

.workspace-logo-upload[b-bvh02nnbop],
.workspace-logo-preview[b-bvh02nnbop] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-md);
  min-height: var(--ds-workspace-logo-row);
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  /* A fill that differs from the dialog in both themes. surface-muted and
     the dialog are the same colour in dark mode, which made this tile vanish,
     so dark swaps in the text field fill (app.css). */
  background: var(--ds-workspace-upload-fill);
  border: var(--ds-workspace-card-border) dashed var(--ds-workspace-upload-border);
  border-radius: var(--radius-radius-xl);
}

.workspace-logo-field[b-bvh02nnbop] {
  /* Gap in the token set: no upload-row or image-preview size. */
  --ds-workspace-logo-row: 72px;
  --ds-workspace-logo-preview: 44px;
}

.workspace-logo-upload[b-bvh02nnbop] { cursor: pointer; }

/* Neutral, not blue: the fill moves a small step toward the text colour,
   so it darkens slightly in light mode and lightens slightly in dark, and the
   dashed edge firms up to a neutral grey. interaction-hover is not used
   because in dark mode it is the dialog colour and the tile would vanish. */
.workspace-logo-upload:hover[b-bvh02nnbop] {
  background: color-mix(in srgb, var(--colors-text-primary) var(--ds-workspace-upload-tint), var(--ds-workspace-upload-fill));
  border-color: var(--colors-icon-muted);
}

.workspace-logo-field[b-bvh02nnbop] {
  /* Not a token: how far the hover moves toward the text colour. */
  --ds-workspace-upload-tint: 5%;
  --ds-workspace-upload-fill: var(--colors-surface-muted);
  --ds-workspace-upload-border: var(--colors-surface-input);
}

/* While the image uploads the tile stays put and says so, with the icon
   breathing, rather than being swapped for a spinner. */
.workspace-logo-upload.is-uploading[b-bvh02nnbop] {
  cursor: progress;
  border-color: var(--colors-brand-primary);
}

.workspace-logo-upload.is-uploading:hover[b-bvh02nnbop] { background: var(--ds-workspace-upload-fill); }

.workspace-logo-upload.is-uploading > span:first-child[b-bvh02nnbop] {
  animation: workspace-logo-uploading-b-bvh02nnbop var(--ds-workspace-upload-pulse) var(--ds-motion-ease) infinite;
}

.workspace-logo-field[b-bvh02nnbop] { --ds-workspace-upload-pulse: 1200ms; }

@keyframes workspace-logo-uploading-b-bvh02nnbop {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-logo-upload.is-uploading > span:first-child[b-bvh02nnbop] { animation: none; }
}

.workspace-logo-field:focus-within .workspace-logo-upload[b-bvh02nnbop] {
  border-color: var(--colors-brand-primary);
  box-shadow: inset 0 0 0 var(--ds-workspace-card-border) var(--colors-brand-primary);
}

.workspace-logo-upload > span:first-child[b-bvh02nnbop] {
  display: grid;
  place-items: center;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-lg);
}

.workspace-logo-upload > span:last-child[b-bvh02nnbop],
.workspace-logo-preview > div[b-bvh02nnbop] { display: grid; gap: var(--spacing-2xs); }

.workspace-logo-upload[b-bvh02nnbop]  small,
.workspace-logo-preview[b-bvh02nnbop]  small { color: var(--colors-text-muted); }

.workspace-logo-field[b-bvh02nnbop] >  .workspace-logo-input {
  position: absolute;
  width: var(--ds-workspace-hidden-input);
  height: var(--ds-workspace-hidden-input);
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.workspace-logo-field[b-bvh02nnbop] {
  /* Standard visually-hidden input geometry; it remains keyboard reachable. */
  --ds-workspace-hidden-input: 1px;
}

.workspace-logo-preview[b-bvh02nnbop] { border-style: solid; }

.workspace-logo-preview > img[b-bvh02nnbop] {
  width: var(--ds-workspace-logo-preview);
  height: var(--ds-workspace-logo-preview);
  object-fit: cover;
  border-radius: var(--radius-radius-lg);
}

.workspace-logo-preview > button[b-bvh02nnbop] {
  display: grid;
  place-items: center;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  padding: var(--spacing-none);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.workspace-logo-preview > button:hover[b-bvh02nnbop] {
  color: var(--colors-feedback-destructive-text);
  background: var(--colors-feedback-destructive-subtle);
}

[b-bvh02nnbop] .workspace-logo-field__error {
  margin: var(--spacing-none);
  color: var(--colors-feedback-destructive-text);
}

@media (prefers-reduced-motion: reduce) {
  .workspace-dialog-gradient__wash[b-bvh02nnbop],
  .workspace-channel-token[b-bvh02nnbop],
  .workspace-orbit-signal[b-bvh02nnbop] { animation: none; }

  .workspace-dialog-gradient__wash:first-child[b-bvh02nnbop] { opacity: 0.72; }
  .workspace-channel-token[b-bvh02nnbop] >  svg { animation: none; opacity: 1; }
  .workspace-orbit-signal[b-bvh02nnbop] { display: none; }
}
/* /Components/Pages/Dashboard/Knowledge/KnowledgeMemory.razor.rz.scp.css */
.knowledge[b-q9e4jbzdqs] {
  /* Gaps in the token set: no page-width, compact-icon,
     readable-measure or border-width scale. */
  --ds-knowledge-max: 1040px;
  --ds-knowledge-icon: 40px;
  --ds-knowledge-channel-icon: 26px;
  --ds-knowledge-measure: 680px;
  --ds-knowledge-search: 280px;
  --ds-knowledge-hairline: 1px;
  /* How long a section stays lit after it changes. */
  --ds-knowledge-glow: 2.4s;

  display: grid;
  gap: var(--spacing-xl);
  width: min(var(--ds-knowledge-max), 100%);
  margin-inline: auto;
  padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-6xl);
  color: var(--colors-text-primary);
}

.knowledge[b-q9e4jbzdqs] >  * { min-width: 0; }
.knowledge[b-q9e4jbzdqs]  p,
.knowledge[b-q9e4jbzdqs]  h1,
.knowledge[b-q9e4jbzdqs]  h2,
.knowledge[b-q9e4jbzdqs]  h3 { margin: var(--spacing-none); }
.knowledge[b-q9e4jbzdqs]  .knowledge__muted { color: var(--colors-text-muted); }

.knowledge__header[b-q9e4jbzdqs] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-lg) var(--spacing-2xl);
  align-items: end;
}

.knowledge__heading[b-q9e4jbzdqs] { display: grid; gap: var(--spacing-xs); }
.knowledge__title[b-q9e4jbzdqs] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); align-items: center; }
/* The preview, said plainly under the lede. */
.knowledge__preview-note[b-q9e4jbzdqs] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  max-width: var(--ds-knowledge-measure);
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-feedback-info-text);
  background: var(--colors-feedback-info-subtle);
  border-radius: var(--radius-radius-lg);
}
.knowledge__preview-note[b-q9e4jbzdqs]  .ds-icon { flex: none; margin-top: var(--spacing-2xs); }
.knowledge__heading[b-q9e4jbzdqs]  .knowledge__lede { max-width: var(--ds-knowledge-measure); color: var(--colors-text-secondary); }

.knowledge__review[b-q9e4jbzdqs] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-lg);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-knowledge-hairline) solid var(--colors-accent-brand-border);
  border-radius: var(--radius-radius-2xl);
}

.knowledge__review-icon[b-q9e4jbzdqs],
.knowledge__composer-icon[b-q9e4jbzdqs],
.knowledge__catalog-icon[b-q9e4jbzdqs],
.knowledge__group-icon[b-q9e4jbzdqs] {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--colors-icon-brand);
  background: var(--colors-surface-card);
  border-radius: var(--radius-radius-full);
}

.knowledge__review-icon[b-q9e4jbzdqs] { width: var(--ds-knowledge-icon); height: var(--ds-knowledge-icon); }
.knowledge__review-copy[b-q9e4jbzdqs] { display: grid; gap: var(--spacing-2xs); }

.knowledge__composer[b-q9e4jbzdqs] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-knowledge-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.knowledge__composer-title[b-q9e4jbzdqs] { display: flex; gap: var(--spacing-md); align-items: center; }
.knowledge__composer-title > div[b-q9e4jbzdqs] { display: grid; gap: var(--spacing-2xs); }
.knowledge__composer-icon[b-q9e4jbzdqs] { width: var(--ds-knowledge-icon); height: var(--ds-knowledge-icon); color: var(--colors-accent-cyan-text); background: var(--colors-accent-cyan-subtle); }

.knowledge__question-context[b-q9e4jbzdqs] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-accent-amber-text);
  background: var(--colors-accent-amber-subtle);
  border-radius: var(--radius-radius-lg);
}

.knowledge__composer-actions[b-q9e4jbzdqs],
.knowledge__add-options[b-q9e4jbzdqs] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.knowledge__composer-actions[b-q9e4jbzdqs] { justify-content: space-between; }
.knowledge__add-options[b-q9e4jbzdqs]  .knowledge__hint { color: var(--colors-text-subtle); }

.knowledge__saved[b-q9e4jbzdqs] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--colors-feedback-success-subtle);
  border-radius: var(--radius-radius-lg);
}

.knowledge__saved[b-q9e4jbzdqs]  .ds-icon { flex: none; color: var(--colors-feedback-success-text); }
.knowledge__saved[b-q9e4jbzdqs]  p { flex: 1 1 auto; }

.knowledge__memory[b-q9e4jbzdqs] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-knowledge-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.knowledge__memory-head[b-q9e4jbzdqs] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  align-items: end;
  justify-content: space-between;
}
.knowledge__memory-head > div[b-q9e4jbzdqs] { display: grid; gap: var(--spacing-2xs); }
.knowledge__memory-head[b-q9e4jbzdqs]  .knowledge__search { width: min(var(--ds-knowledge-search), 100%); }
.knowledge[b-q9e4jbzdqs]  .knowledge__updated { color: var(--colors-text-subtle); }

/* One row per section (designer, 20 October 2026): its icon beside its name, the summary under the name, when
   it last changed under that, Edit at the right; rules between rows start at the words. */
.knowledge__sections[b-q9e4jbzdqs] { display: grid; margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.knowledge__section[b-q9e4jbzdqs] {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  align-items: start;
  padding: var(--spacing-xl) var(--spacing-none);
  border-radius: var(--radius-radius-lg);
}
.knowledge__section + .knowledge__section[b-q9e4jbzdqs]::before {
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--ds-knowledge-icon) + var(--spacing-lg));
  border-top: var(--ds-knowledge-hairline) solid var(--colors-surface-border);
  content: "";
}
.knowledge__section-body[b-q9e4jbzdqs] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.knowledge__section-body[b-q9e4jbzdqs]  h3 { color: var(--colors-text-primary); }
.knowledge__section-body[b-q9e4jbzdqs]  .knowledge__summary { max-width: var(--ds-knowledge-measure); color: var(--colors-text-secondary); }
.knowledge__section-body[b-q9e4jbzdqs]  .knowledge__updated { margin-top: var(--spacing-2xs); color: var(--colors-text-subtle); }
.knowledge__section-body[b-q9e4jbzdqs]  textarea { margin-top: var(--spacing-xs); }
.knowledge__edit-actions[b-q9e4jbzdqs] { display: flex; gap: var(--spacing-sm); justify-content: flex-end; }
/* Just added to, or just rewritten: lit for a moment. */
.knowledge__section.is-fresh[b-q9e4jbzdqs] { animation: knowledge-fresh-b-q9e4jbzdqs var(--ds-knowledge-glow) var(--ds-motion-ease) both; }
@keyframes knowledge-fresh-b-q9e4jbzdqs { from { background-color: var(--colors-accent-brand-subtle); box-shadow: 0 0 0 var(--spacing-sm) var(--colors-accent-brand-subtle); } }

.knowledge__topic-icon[b-q9e4jbzdqs] {
  display: grid;
  place-items: center;
  width: var(--ds-knowledge-icon);
  height: var(--ds-knowledge-icon);
  color: var(--colors-accent-cyan-text);
  background: var(--colors-accent-cyan-subtle);
  border-radius: var(--radius-radius-full);
}
.knowledge__topic-icon.is-amber[b-q9e4jbzdqs] { color: var(--colors-accent-amber-text); background: var(--colors-accent-amber-subtle); }
.knowledge__topic-icon.is-teal[b-q9e4jbzdqs] { color: var(--colors-accent-teal-text); background: var(--colors-accent-teal-subtle); }
.knowledge__topic-icon.is-violet[b-q9e4jbzdqs] { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }


/* Products and prices, at the foot of what it knows: quiet, as everything inside a card. */
.knowledge__catalog-link[b-q9e4jbzdqs] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: center;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}
.knowledge__catalog-link > div[b-q9e4jbzdqs] { display: grid; gap: var(--spacing-2xs); }
.knowledge__catalog-icon[b-q9e4jbzdqs] { width: var(--ds-knowledge-icon); height: var(--ds-knowledge-icon); color: var(--colors-accent-teal-text); background: var(--colors-surface-card); }

@media (max-width: 1024px) {
  .knowledge__catalog-link[b-q9e4jbzdqs] { grid-template-columns: auto minmax(0, 1fr); }
  .knowledge__catalog-link[b-q9e4jbzdqs] >  .ds-button { grid-column: 1 / -1; justify-self: start; }
  .knowledge[b-q9e4jbzdqs] { padding: var(--spacing-xl) var(--spacing-md) var(--spacing-5xl); gap: var(--spacing-lg); }
  .knowledge__header[b-q9e4jbzdqs] { grid-template-columns: 1fr; align-items: start; }
  .knowledge__header[b-q9e4jbzdqs] >  .ds-button { justify-self: start; }
  .knowledge__review[b-q9e4jbzdqs] { grid-template-columns: auto minmax(0, 1fr); }
  .knowledge__review[b-q9e4jbzdqs] >  .ds-button { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  .knowledge__composer[b-q9e4jbzdqs],
  .knowledge__memory[b-q9e4jbzdqs] { padding: var(--spacing-lg); }
  .knowledge__composer-actions[b-q9e4jbzdqs] { align-items: stretch; }
  .knowledge__composer-actions[b-q9e4jbzdqs] >  .ds-button { width: 100%; }
  .knowledge__add-options[b-q9e4jbzdqs] { justify-content: space-between; }
  .knowledge__memory-head[b-q9e4jbzdqs] { align-items: stretch; }
  .knowledge__memory-head[b-q9e4jbzdqs]  .knowledge__search { width: 100%; }
  .knowledge__section[b-q9e4jbzdqs] { grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-md); }
  .knowledge__section[b-q9e4jbzdqs] >  .knowledge__edit { grid-column: 2; justify-self: start; margin-left: calc(-1 * var(--spacing-sm)); }
  .knowledge__section + .knowledge__section[b-q9e4jbzdqs]::before { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge__section.is-fresh[b-q9e4jbzdqs] { animation: none; }
}
/* /Components/Pages/Dashboard/Knowledge/KnowledgeReview.razor.rz.scp.css */
/* Checking what was found (designer, 20 October 2026): a deck in a full-screen view. The card on top, the
   next ones peeking from behind; the decision under it; the card leaves right for yes, left for no, up for
   later, and the next one rises into its place. */
.knowledge-review[b-b9far6hfjj] {
  /* Missing from the token set: the card's width and least height, how far the cards behind peek, the tilt
     and distance of a card leaving, and the stamp's border. */
  --ds-review-card: 620px;
  --ds-review-card-min: 300px;
  --ds-review-peek: 10px;
  --ds-review-tilt: 12deg;
  --ds-review-fly: 130%;
  --ds-review-hairline: 1px;
  --ds-review-stamp: 2px;
  /* The narrowest a choice gets before the two stack. */
  --ds-review-claim: 220px;
  /* With reduced motion, the cards change at once. */
  --ds-review-instant: 1ms;

  display: grid;
  gap: var(--spacing-xl);
  justify-items: center;
  color: var(--colors-text-primary);
  outline: 0;
}
.knowledge-review[b-b9far6hfjj]  p,
.knowledge-review[b-b9far6hfjj]  h2,
.knowledge-review[b-b9far6hfjj]  h3 { margin: var(--spacing-none); }
.knowledge-review[b-b9far6hfjj]  .knowledge-review__muted { color: var(--colors-text-muted); }

/* The deck: the card, and two behind it. */
.knowledge-review__deck[b-b9far6hfjj] {
  position: relative;
  display: grid;
  width: min(var(--ds-review-card), 100%);
  padding-bottom: calc(var(--ds-review-peek) * 2);
}
.knowledge-review__behind[b-b9far6hfjj] {
  position: absolute;
  inset: 0 0 calc(var(--ds-review-peek) * 2);
  background: var(--colors-surface-card);
  border: var(--ds-review-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  transform-origin: 50% 100%;
  transition: transform var(--ds-motion-base) var(--ds-motion-enter);
}
.knowledge-review__behind.is-1[b-b9far6hfjj] { transform: translateY(var(--ds-review-peek)) scale(0.96); opacity: 0.8; }
.knowledge-review__behind.is-2[b-b9far6hfjj] { transform: translateY(calc(var(--ds-review-peek) * 2)) scale(0.92); opacity: 0.5; }

.knowledge-review__card[b-b9far6hfjj] {
  --swipe: 0;
  --lift: 0;

  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-lg);
  align-content: start;
  min-height: var(--ds-review-card-min);
  padding: var(--spacing-2xl);
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-review-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
  transform-origin: 50% 90%;
  animation: review-card-rise-b-b9far6hfjj var(--ds-motion-slow) var(--ds-motion-enter) both;
}
/* A found detail: where it came from at the top, the detail in the middle of the card. */
.knowledge-review__card.is-found[b-b9far6hfjj] { grid-template-rows: auto 1fr auto; }
.knowledge-review__body[b-b9far6hfjj] { display: grid; gap: var(--spacing-sm); align-content: center; padding-bottom: var(--spacing-xl); }
.knowledge-review__card.is-yes[b-b9far6hfjj] { animation: review-card-yes-b-b9far6hfjj var(--ds-motion-base) var(--ds-motion-exit) forwards; }
.knowledge-review__card.is-no[b-b9far6hfjj] { animation: review-card-no-b-b9far6hfjj var(--ds-motion-base) var(--ds-motion-exit) forwards; }
.knowledge-review__card.is-later[b-b9far6hfjj] { animation: review-card-later-b-b9far6hfjj var(--ds-motion-base) var(--ds-motion-exit) forwards; }

@keyframes review-card-rise-b-b9far6hfjj { from { opacity: 0.8; transform: translateY(var(--ds-review-peek)) scale(0.96); } }
@keyframes review-card-yes-b-b9far6hfjj { to { opacity: 0; transform: translateX(var(--ds-review-fly)) rotate(var(--ds-review-tilt)); } }
@keyframes review-card-no-b-b9far6hfjj { to { opacity: 0; transform: translateX(calc(var(--ds-review-fly) * -1)) rotate(calc(var(--ds-review-tilt) * -1)); } }
@keyframes review-card-later-b-b9far6hfjj { to { opacity: 0; transform: translateY(-40%) scale(0.96); } }

/* The stamps: shown as a card leaves, and as it is dragged (--swipe from -1 to 1). */
.knowledge-review__stamp[b-b9far6hfjj] {
  position: absolute;
  top: var(--spacing-xl);
  z-index: 2;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-transform: uppercase;
  background: var(--colors-surface-card);
  border: var(--ds-review-stamp) solid currentColor;
  border-radius: var(--radius-radius-md);
  opacity: 0;
  pointer-events: none;
}
.knowledge-review__stamp.is-yes[b-b9far6hfjj] { left: var(--spacing-xl); color: var(--colors-feedback-success-text); transform: rotate(calc(var(--ds-review-tilt) * -1)); opacity: max(0, var(--swipe)); }
.knowledge-review__stamp.is-no[b-b9far6hfjj] { right: var(--spacing-xl); color: var(--colors-feedback-destructive-text); transform: rotate(var(--ds-review-tilt)); opacity: max(0, calc(var(--swipe) * -1)); }
.knowledge-review__card.is-yes .knowledge-review__stamp.is-yes[b-b9far6hfjj],
.knowledge-review__card.is-no .knowledge-review__stamp.is-no[b-b9far6hfjj] { opacity: 1; }

/* What's on a card. */
.knowledge-review__top[b-b9far6hfjj] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); align-items: center; justify-content: space-between; }
.knowledge-review__source[b-b9far6hfjj] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
.knowledge-review__source.is-warning[b-b9far6hfjj] { color: var(--colors-accent-amber-text); }
.knowledge-review__goes[b-b9far6hfjj] {
  padding: var(--spacing-2xs) var(--spacing-sm);
  color: var(--colors-accent-brand-text);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}
.knowledge-review__card[b-b9far6hfjj]  .knowledge-review__ask { color: var(--colors-text-muted); }
.knowledge-review__card[b-b9far6hfjj]  .knowledge-review__detail { color: var(--colors-text-primary); }
.knowledge-review__inline[b-b9far6hfjj] { display: flex; gap: var(--spacing-sm); justify-content: flex-end; }

/* This or that. */
.knowledge-review__claims[b-b9far6hfjj] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--ds-review-claim), 1fr)); gap: var(--spacing-md); }
.knowledge-review[b-b9far6hfjj]  .knowledge-review__claim {
  display: grid;
  gap: var(--spacing-sm);
  align-content: start;
  padding: var(--spacing-lg);
  text-align: left;
  background: var(--colors-surface-muted);
  border: var(--ds-review-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  transition: border-color var(--ds-motion-fast) var(--ds-motion-ease), background-color var(--ds-motion-fast) var(--ds-motion-ease);
}
.knowledge-review[b-b9far6hfjj]  .knowledge-review__claim:hover,
.knowledge-review[b-b9far6hfjj]  .knowledge-review__claim:focus-visible { background: var(--colors-surface-card); border-color: var(--colors-brand-primary); }
.knowledge-review[b-b9far6hfjj]  .knowledge-review__use { color: var(--colors-brand-primary); }
.knowledge-review__card[b-b9far6hfjj]  .knowledge-review__neither { justify-self: center; }

/* The decision, on the card: under what it's about, a rule above it. */
.knowledge-review__card-actions[b-b9far6hfjj] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--spacing-lg);
  border-top: var(--ds-review-hairline) solid var(--colors-surface-border);
}
.knowledge-review__card.is-found .knowledge-review__card-actions[b-b9far6hfjj] >  .ds-button:first-child { margin-right: auto; }
.knowledge-review__under[b-b9far6hfjj] { display: flex; gap: var(--spacing-md); align-items: center; justify-content: space-between; width: min(var(--ds-review-card), 100%); }
.knowledge-review__last[b-b9far6hfjj] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-secondary); }
.knowledge-review__last[b-b9far6hfjj]  .ds-icon { color: var(--colors-feedback-success-text); }
.knowledge-review__under[b-b9far6hfjj]  .knowledge-review__hint { color: var(--colors-text-subtle); }
.knowledge-review__under[b-b9far6hfjj]  .knowledge-review__hint.is-swipe { display: none; }

/* The end. */
.knowledge-review__end[b-b9far6hfjj] { display: grid; gap: var(--spacing-md); justify-items: center; max-width: var(--ds-review-card); text-align: center; }
.knowledge-review__end-mark[b-b9far6hfjj] {
  display: grid;
  place-items: center;
  width: calc(var(--spacing-4xl) + var(--spacing-lg));
  height: calc(var(--spacing-4xl) + var(--spacing-lg));
  margin-bottom: var(--spacing-sm);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
  animation: review-end-mark-b-b9far6hfjj var(--ds-motion-slow) var(--ds-motion-enter) both;
}
.knowledge-review__end-mark.is-done[b-b9far6hfjj] { color: var(--colors-brand-primary-foreground); background: var(--colors-brand-primary); box-shadow: 0 0 0 var(--spacing-sm) var(--colors-accent-brand-subtle); }
.knowledge-review__end-mark.is-paused[b-b9far6hfjj] { color: var(--colors-accent-amber-text); background: var(--colors-accent-amber-subtle); }
@keyframes review-end-mark-b-b9far6hfjj { from { opacity: 0; transform: scale(0.6); } }
.knowledge-review__tally[b-b9far6hfjj] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.knowledge-review__tally li[b-b9far6hfjj] { padding: var(--spacing-xs) var(--spacing-md); color: var(--colors-text-secondary); background: var(--colors-surface-muted); border-radius: var(--radius-radius-full); }
.knowledge-review__end-actions[b-b9far6hfjj] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; margin-top: var(--spacing-md); }

/* A phone (a finger, not a mouse): a found detail is swiped; the card follows the finger without scrolling the view. */
@media (pointer: coarse) {
  .knowledge-review__card[data-swipe="true"][b-b9far6hfjj] { touch-action: none; user-select: none; }
  .knowledge-review__card.is-dragging[b-b9far6hfjj] { animation: none; transition: none; }
  .knowledge-review__under[b-b9far6hfjj]  .knowledge-review__hint.is-swipe { display: inline; }
}
@media (max-width: 760px) {
  /* A shorter card on a phone (the token set has no card heights). */
  .knowledge-review[b-b9far6hfjj] { --ds-review-card-min: 260px; gap: var(--spacing-lg); }
  .knowledge-review__card[b-b9far6hfjj] { padding: var(--spacing-xl); }
  .knowledge-review__card-actions[b-b9far6hfjj] >  .ds-button { flex: 1 1 0; }
  .knowledge-review__card.is-found .knowledge-review__card-actions[b-b9far6hfjj] >  .ds-button:first-child { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-review__card[b-b9far6hfjj],
  .knowledge-review__card.is-yes[b-b9far6hfjj],
  .knowledge-review__card.is-no[b-b9far6hfjj],
  .knowledge-review__card.is-later[b-b9far6hfjj],
  .knowledge-review__end-mark[b-b9far6hfjj] { animation-duration: var(--ds-review-instant); }
  .knowledge-review__behind[b-b9far6hfjj] { transition: none; }
}
/* /Components/Pages/Dashboard/Knowledge/KnowledgeTest.razor.rz.scp.css */
.knowledge-test-shell[b-5u0swoaejx] {
  /* Gaps in the token set: no chat-modal height, source width, avatar size or border width. */
  --ds-knowledge-test-height: 680px;
  --ds-knowledge-test-sources: 560px;
  --ds-knowledge-test-avatar: 32px;
  --ds-knowledge-test-hairline: 1px;
}

.knowledge-test-shell[b-5u0swoaejx]  .dialog {
  grid-template-rows: auto minmax(0, 1fr);
  height: min(var(--ds-knowledge-test-height), calc(100dvh - 2 * var(--spacing-3xl)));
  overflow: hidden;
}
.knowledge-test-shell[b-5u0swoaejx]  .dialog__body { min-height: 0; }

.knowledge-test[b-5u0swoaejx] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  color: var(--colors-text-primary);
}

.knowledge-test[b-5u0swoaejx]  p { margin: var(--spacing-none); }
.knowledge-test[b-5u0swoaejx]  .knowledge-test__muted { color: var(--colors-text-muted); }

.knowledge-test__thread[b-5u0swoaejx] {
  display: grid;
  align-content: start;
  gap: var(--spacing-lg);
  min-height: 0;
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-2xl);
  overflow-y: auto;
  list-style: none;
  scrollbar-gutter: stable;
}

.knowledge-test__message[b-5u0swoaejx] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  max-width: 78%;
}
.knowledge-test__message.is-customer[b-5u0swoaejx] { justify-self: end; }
.knowledge-test__message.is-ai[b-5u0swoaejx] { justify-self: start; }

.knowledge-test__avatar[b-5u0swoaejx] {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--ds-knowledge-test-avatar);
  height: var(--ds-knowledge-test-avatar);
  color: var(--colors-icon-brand);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}

.knowledge-test__reply[b-5u0swoaejx] { display: grid; gap: var(--spacing-xs); justify-items: start; }
.knowledge-test__bubble[b-5u0swoaejx] {
  width: fit-content;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-text-secondary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-xl);
  border-bottom-left-radius: var(--radius-radius-sm);
}
.knowledge-test__message.is-customer .knowledge-test__bubble[b-5u0swoaejx] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border-bottom-right-radius: var(--radius-radius-sm);
  border-bottom-left-radius: var(--radius-radius-xl);
}
.knowledge-test__bubble.is-unknown[b-5u0swoaejx] {
  color: var(--colors-text-secondary);
  background: var(--colors-accent-amber-subtle);
}

.knowledge-test[b-5u0swoaejx]  .knowledge-test__source-toggle,
.knowledge-test[b-5u0swoaejx]  .knowledge-test__teach { justify-self: start; }

.knowledge-test__sources[b-5u0swoaejx] {
  display: grid;
  gap: var(--spacing-xs);
  width: min(100%, var(--ds-knowledge-test-sources));
  padding: var(--spacing-sm);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}
.knowledge-test__fact[b-5u0swoaejx] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--colors-surface-card);
  border: var(--ds-knowledge-test-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.knowledge-test__fact > span[b-5u0swoaejx] { color: var(--colors-accent-teal-text); }
.knowledge-test__fact > div[b-5u0swoaejx] { display: grid; gap: var(--spacing-xs); }
.knowledge-test__fact-meta[b-5u0swoaejx] { display: flex; gap: var(--spacing-xs); align-items: center; }

.knowledge-test__dock[b-5u0swoaejx] {
  display: grid;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  background: linear-gradient(to bottom, transparent, var(--colors-surface-elevated) var(--spacing-xl));
}
.knowledge-test__suggestions[b-5u0swoaejx] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.knowledge-test__composer[b-5u0swoaejx] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: end;
  padding: var(--spacing-sm);
  background: var(--colors-surface-card);
  border: var(--ds-knowledge-test-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-xl) var(--colors-surface-shadow-diffuse);
}
.knowledge-test__composer[b-5u0swoaejx] >  .ds-textarea { min-height: 0; background: transparent; border: 0; box-shadow: none; }

@media (max-height: 800px) {
  .knowledge-test-shell[b-5u0swoaejx]  .dialog { height: calc(100dvh - 2 * var(--spacing-lg)); }
}

@media (max-width: 760px) {
  .knowledge-test__message[b-5u0swoaejx] { max-width: 92%; }
  .knowledge-test__suggestions[b-5u0swoaejx] { flex-wrap: nowrap; padding-bottom: var(--spacing-xs); overflow-x: auto; }
  .knowledge-test__suggestions[b-5u0swoaejx] >  .ds-button { flex: 0 0 auto; }
}
/* /Components/Pages/Dashboard/QaInsights/QaInsights.razor.rz.scp.css */
/* Insights. Aurora's Products frame (1440, centred, fluid gutter), its stat
   strip for the six numbers, and two cards beneath. */

.insights[b-s9rwvfh28z] {
  padding: var(--spacing-4xl) var(--ds-insights-gutter) var(--spacing-5xl);
}

.insights > *[b-s9rwvfh28z] {
  width: min(var(--ds-insights-max), 100%);
  margin-inline: auto;
}

.insights[b-s9rwvfh28z] {
  /* Gaps in the token set: no page-gutter, content-width, border-width,
     cell-height, ring-width or chart-size scale. */
  --ds-insights-gutter: clamp(28px, 4vw, 66px);
  --ds-insights-max: 1440px;
  --ds-insights-measure: 650px;
  --ds-insights-hairline: 1px;
  --ds-insights-tile-min: 112px;
  --ds-insights-donut: 180px;
  --ds-insights-ring: 20;
  --ds-insights-dot: 10px;
  --ds-insights-performer-icon: 32px;
}

.insights__header[b-s9rwvfh28z] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-4xl);
  margin-bottom: var(--spacing-2xl);
}

.insights__heading[b-s9rwvfh28z] { display: grid; gap: var(--spacing-sm); }
[b-s9rwvfh28z] .insights__lede { max-width: var(--ds-insights-measure); color: var(--colors-text-muted); }
.insights__actions[b-s9rwvfh28z] { display: flex; flex: 0 0 auto; gap: var(--spacing-sm); }

/* ── Summary ─────────────────────────────────────────────────────────────── */
/* One card divided into cells, not six cards. Copied from Aurora's
   products__summary and stat-tile. */

.insights__summary[b-s9rwvfh28z] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: var(--spacing-2xl);
  background: var(--colors-surface-card);
  border: var(--ds-insights-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.stat-tile[b-s9rwvfh28z] {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--ds-insights-tile-min);
  padding: var(--spacing-lg);
}

.stat-tile__body[b-s9rwvfh28z] { display: grid; gap: var(--spacing-2xs); flex: 1; min-width: 0; }
.stat-tile__top[b-s9rwvfh28z] { display: flex; gap: var(--spacing-sm); align-items: center; justify-content: space-between; }
.stat-tile__top[b-s9rwvfh28z]  small { color: var(--colors-text-muted); }
.stat-tile__body[b-s9rwvfh28z]  strong { color: var(--colors-text-primary); }
[b-s9rwvfh28z] .stat-tile__note { margin: var(--spacing-none); color: var(--colors-text-subtle); }

/* A hairline between cells, inset so it stops short of the card's edges; a
   rule between the two rows. */
.stat-tile:not(:nth-child(3n + 1))[b-s9rwvfh28z]::before {
  content: "";
  position: absolute;
  top: var(--spacing-xl);
  bottom: var(--spacing-xl);
  left: 0;
  width: var(--ds-insights-hairline);
  background: var(--colors-surface-border);
}

.stat-tile:nth-child(n + 4)[b-s9rwvfh28z] { border-top: var(--ds-insights-hairline) solid var(--colors-surface-border); }

/* ── Panels ──────────────────────────────────────────────────────────────── */

.insights__panels[b-s9rwvfh28z] {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}

.insights__card[b-s9rwvfh28z] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--colors-surface-card);
  border: var(--ds-insights-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.insights__card-header[b-s9rwvfh28z] { display: grid; gap: var(--spacing-xs); padding-bottom: var(--spacing-lg); border-bottom: var(--ds-insights-hairline) solid var(--colors-surface-border); }
.insights__card-header[b-s9rwvfh28z]  h2 { color: var(--colors-text-primary); }
.insights__card-header[b-s9rwvfh28z]  p { color: var(--colors-text-muted); }
.insights__card-header--split[b-s9rwvfh28z] { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); }

.insights__sentiment-headline[b-s9rwvfh28z] { display: flex; gap: var(--spacing-xs); align-items: baseline; }
.insights__sentiment-headline[b-s9rwvfh28z]  strong { color: var(--colors-feedback-success-text); }
.insights__sentiment-headline[b-s9rwvfh28z]  span { color: var(--colors-text-muted); }

.insights__performance[b-s9rwvfh28z] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.insights__performer[b-s9rwvfh28z] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.insights__performer > header[b-s9rwvfh28z] { display: flex; gap: var(--spacing-sm); align-items: center; color: var(--colors-text-primary); }

.insights__performer-icon[b-s9rwvfh28z] {
  display: grid;
  place-items: center;
  width: var(--ds-insights-performer-icon);
  height: var(--ds-insights-performer-icon);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-md);
}

.insights__performer dl[b-s9rwvfh28z] { display: grid; gap: var(--spacing-sm); margin: var(--spacing-none); }
.insights__performer dl > div[b-s9rwvfh28z] { display: flex; gap: var(--spacing-sm); align-items: center; justify-content: space-between; }
.insights__performer[b-s9rwvfh28z]  dt { color: var(--colors-text-muted); }
.insights__performer[b-s9rwvfh28z]  dd { margin: var(--spacing-none); color: var(--colors-text-primary); }

/* An observation, drawn as Aurora's guided aside in the warning tint. */
.insights__aside[b-s9rwvfh28z] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  color: var(--colors-feedback-warning-text);
  background: var(--colors-feedback-warning-subtle);
  border: var(--ds-insights-hairline) solid var(--colors-feedback-warning-border);
  border-radius: var(--radius-radius-lg);
}

.insights__aside[b-s9rwvfh28z] >  svg { flex: 0 0 auto; margin-top: var(--spacing-2xs); }
.insights__aside[b-s9rwvfh28z]  p { color: var(--colors-text-secondary); }

/* ── Donut ───────────────────────────────────────────────────────────────── */
/* A ring with three arcs, each a status colour: sentiment is a state. The
   track is the chart's no-data tone. */

.insights__donut-wrap[b-s9rwvfh28z] { display: grid; place-items: center; }
.insights__donut[b-s9rwvfh28z] { width: var(--ds-insights-donut); height: var(--ds-insights-donut); }

.insights__ring[b-s9rwvfh28z],
.insights__slice[b-s9rwvfh28z] {
  fill: none;
  stroke-width: var(--ds-insights-ring);
}

.insights__ring[b-s9rwvfh28z] { stroke: var(--colors-chart-no-data); }
.insights__slice--positive[b-s9rwvfh28z] { stroke: var(--colors-feedback-success); }
.insights__slice--neutral[b-s9rwvfh28z] { stroke: var(--colors-text-subtle); }
.insights__slice--negative[b-s9rwvfh28z] { stroke: var(--colors-feedback-destructive); }

.insights__legend[b-s9rwvfh28z] {
  display: grid;
  gap: var(--spacing-sm);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.insights__legend li[b-s9rwvfh28z] { display: flex; gap: var(--spacing-sm); align-items: center; color: var(--colors-text-secondary); }
.insights__legend li[b-s9rwvfh28z] >  span:not(.insights__legend-dot) { flex: 1; }
.insights__legend[b-s9rwvfh28z]  strong { color: var(--colors-text-primary); }

.insights__legend-dot[b-s9rwvfh28z] {
  flex: 0 0 auto;
  width: var(--ds-insights-dot);
  height: var(--ds-insights-dot);
  border-radius: var(--radius-radius-full);
}

.insights__legend-dot.insights__slice--positive[b-s9rwvfh28z] { background: var(--colors-feedback-success); }
.insights__legend-dot.insights__slice--neutral[b-s9rwvfh28z] { background: var(--colors-text-subtle); }
.insights__legend-dot.insights__slice--negative[b-s9rwvfh28z] { background: var(--colors-feedback-destructive); }
/* /Components/Pages/Dashboard/Settings/AutomationTab.razor.rz.scp.css */
/* Three wells, each a titled group around one field — Aurora's editor
   publish well, repeated. */

.automation__sections[b-iotg9jkbe0] { display: grid; gap: var(--spacing-md); }

.automation__section[b-iotg9jkbe0] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.automation__titles[b-iotg9jkbe0] { display: grid; gap: var(--spacing-2xs); }
.automation__titles[b-iotg9jkbe0]  h3 { color: var(--colors-text-primary); }
.automation__titles[b-iotg9jkbe0]  p { color: var(--colors-text-muted); }
/* /Components/Pages/Dashboard/Settings/BillingTab.razor.rz.scp.css */
/* Plan well, usage strip, plan cards and the invoice table — each drawn with
   the same surfaces Aurora's Products page and editor use. */

.billing__plan[b-tjyxs1pwvr] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.billing__plan-text[b-tjyxs1pwvr] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.billing__plan-name[b-tjyxs1pwvr] { display: flex; gap: var(--spacing-sm); align-items: center; color: var(--colors-text-primary); }
.billing__plan-text[b-tjyxs1pwvr]  p { color: var(--colors-text-muted); }
.billing__plan-text[b-tjyxs1pwvr]  small { color: var(--colors-text-subtle); }
.billing__plan-actions[b-tjyxs1pwvr] { display: flex; flex: 0 0 auto; gap: var(--spacing-sm); }

/* ── Usage ───────────────────────────────────────────────────────────────── */

.billing__usage[b-tjyxs1pwvr] {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border: var(--ds-billing-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.billing__usage[b-tjyxs1pwvr],
.billing__plans[b-tjyxs1pwvr],
.billing__invoices[b-tjyxs1pwvr] {
  /* Gaps in the token set: no border-width, progress-height or cell-height
     scale. */
  --ds-billing-hairline: 1px;
  --ds-billing-progress: 8px;
  --ds-billing-stat-min: 72px;
  --ds-billing-head-min: 45px;
  --ds-billing-row-min: 56px;
  --ds-billing-col-status: 110px;
  --ds-billing-col-actions: 130px;
}

.billing__usage-titles[b-tjyxs1pwvr] { display: grid; gap: var(--spacing-2xs); }
.billing__usage-titles[b-tjyxs1pwvr]  h3 { color: var(--colors-text-primary); }
.billing__usage-titles[b-tjyxs1pwvr]  p { color: var(--colors-text-muted); }

.billing__usage-label[b-tjyxs1pwvr] { display: flex; align-items: center; justify-content: space-between; color: var(--colors-text-secondary); }
.billing__usage-label[b-tjyxs1pwvr]  strong { color: var(--colors-text-primary); }

.billing__progress[b-tjyxs1pwvr] {
  height: var(--ds-billing-progress);
  overflow: hidden;
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}

.billing__progress i[b-tjyxs1pwvr] {
  display: block;
  height: 100%;
  background: var(--colors-brand-primary);
  border-radius: var(--radius-radius-full);
}

/* One strip divided into cells, as Aurora's summary card. */
.billing__stats[b-tjyxs1pwvr] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--spacing-xs);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.billing__stat[b-tjyxs1pwvr] {
  display: grid;
  gap: var(--spacing-2xs);
  min-height: var(--ds-billing-stat-min);
  padding: var(--spacing-md) var(--spacing-lg);
}

.billing__stat + .billing__stat[b-tjyxs1pwvr] { border-left: var(--ds-billing-hairline) solid var(--colors-surface-border); }
.billing__stat[b-tjyxs1pwvr]  strong { color: var(--colors-text-primary); }
.billing__stat[b-tjyxs1pwvr]  small { color: var(--colors-text-muted); }

/* ── Plans ───────────────────────────────────────────────────────────────── */

.billing__cycle[b-tjyxs1pwvr] { display: flex; gap: var(--spacing-sm); align-items: center; }

.billing__cycle-tabs[b-tjyxs1pwvr] {
  display: flex;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs);
  background: var(--colors-accent-neutral-border);
  border-radius: var(--radius-radius-full);
}

.billing__cycle-tab[b-tjyxs1pwvr] {
  display: inline-flex;
  align-items: center;
  min-height: var(--spacing-3xl);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.billing__cycle-tab:hover[b-tjyxs1pwvr] { background: var(--colors-interaction-hover); }

.billing__cycle-tab.is-active[b-tjyxs1pwvr] {
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow);
}

.billing__plans[b-tjyxs1pwvr] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.billing__plan-card[b-tjyxs1pwvr] {
  display: grid;
  align-content: start;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-billing-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.billing__plan-card.is-current[b-tjyxs1pwvr] {
  border-color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
}

.billing__plan-card-top[b-tjyxs1pwvr] { display: flex; gap: var(--spacing-sm); align-items: center; justify-content: space-between; }
.billing__plan-card[b-tjyxs1pwvr]  h3 { color: var(--colors-text-primary); }
.billing__plan-price[b-tjyxs1pwvr] { display: flex; gap: var(--spacing-xs); align-items: baseline; color: var(--colors-text-primary); }
.billing__plan-price[b-tjyxs1pwvr]  span { color: var(--colors-text-muted); }
[b-tjyxs1pwvr] .billing__plan-billing { color: var(--colors-text-subtle); }

.billing__features[b-tjyxs1pwvr] {
  display: grid;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}

.billing__features li[b-tjyxs1pwvr] { display: flex; gap: var(--spacing-sm); align-items: flex-start; color: var(--colors-text-secondary); }
.billing__features li[b-tjyxs1pwvr] >  svg { flex: 0 0 auto; color: var(--colors-feedback-success-text); }

[b-tjyxs1pwvr] .billing__plan-action { width: 100%; }

/* ── Invoices ────────────────────────────────────────────────────────────── */

.billing__invoices[b-tjyxs1pwvr] {
  overflow: hidden;
  border: var(--ds-billing-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.billing__invoices-head[b-tjyxs1pwvr],
.billing__invoice[b-tjyxs1pwvr] {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) var(--ds-billing-col-status) var(--ds-billing-col-actions);
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
}

.billing__invoices-head[b-tjyxs1pwvr] {
  min-height: var(--ds-billing-head-min);
  color: var(--colors-text-muted);
  background: var(--colors-surface-background);
  border-bottom: var(--ds-billing-hairline) solid var(--colors-surface-border);
}

.billing__invoice[b-tjyxs1pwvr] { min-height: var(--ds-billing-row-min); color: var(--colors-text-secondary); }
.billing__invoice + .billing__invoice[b-tjyxs1pwvr] { border-top: var(--ds-billing-hairline) solid var(--colors-surface-border); }
.billing__invoice:hover[b-tjyxs1pwvr] { background: var(--colors-interaction-hover); }
.billing__invoice[b-tjyxs1pwvr]  strong { color: var(--colors-text-primary); }
[b-tjyxs1pwvr] .billing__invoice-date { color: var(--colors-text-muted); }
.billing__invoice-actions[b-tjyxs1pwvr] { display: flex; justify-content: flex-end; }

.billing__invoices-footer[b-tjyxs1pwvr] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--colors-text-muted);
  background: var(--colors-surface-background);
  border-top: var(--ds-billing-hairline) solid var(--colors-surface-border);
}
/* /Components/Pages/Dashboard/Settings/NotificationTab.razor.rz.scp.css */
/* One toggle per row, separated by hairlines so a long list stays scannable. */

.notifications__list[b-p6225cj895] { display: grid; }

.notifications__row[b-p6225cj895] {
  padding-block: var(--spacing-md);
}

.notifications__row + .notifications__row[b-p6225cj895] {
  border-top: var(--ds-notifications-hairline) solid var(--colors-surface-border);
}

.notifications__list[b-p6225cj895] {
  /* Gap in the token set: no border-width scale. */
  --ds-notifications-hairline: 1px;
}
/* /Components/Pages/Dashboard/Settings/ProfileTab.razor.rz.scp.css */
/* The avatar and its actions on one line; the fields in Aurora's two-column
   editor grid beneath. */

.profile__avatar-row[b-ejweudpm0l] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
}

.profile__avatar-actions[b-ejweudpm0l] { display: flex; gap: var(--spacing-sm); }
[b-ejweudpm0l] .profile__hint { color: var(--colors-text-subtle); }

.profile__grid[b-ejweudpm0l] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
}

.profile__full[b-ejweudpm0l] { grid-column: 1 / -1; }

/* The file input covers the Upload button exactly and is see-through, so a
   click anywhere on the button opens the picker. Its focus ring is drawn on
   the button, where it can be seen. */
.profile__upload[b-ejweudpm0l] {
  position: relative;
  display: inline-flex;
  border-radius: var(--radius-radius-full);
}

[b-ejweudpm0l] .profile__upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

[b-ejweudpm0l] .profile__upload-input:disabled { cursor: default; }

.profile__upload:has(.profile__upload-input:focus-visible)[b-ejweudpm0l] {
  outline: var(--ds-focus-ring-width) solid
    color-mix(in srgb, var(--colors-interaction-focus) var(--ds-focus-ring-strength), transparent);
  outline-offset: var(--ds-focus-ring-offset);
}
/* /Components/Pages/Dashboard/Settings/SecurityTab.razor.rz.scp.css */
/* Password fields stacked; sessions as a row of small cards; the danger
   action on the right of its explanation. */

.security__fields[b-10irgiizqu] { display: grid; gap: var(--spacing-lg); }

/* A control inside Aurora's Input icon slot: no chrome of its own, so it
   reads as the icon it wraps. */
.security__reveal[b-10irgiizqu] {
  display: grid;
  place-items: center;
  padding: var(--spacing-none);
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.security__reveal:hover[b-10irgiizqu] { color: var(--colors-brand-primary); }

.security__sessions[b-10irgiizqu] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-security-session-min), 1fr));
  gap: var(--spacing-md);
}

.security__sessions[b-10irgiizqu] {
  /* Gaps in the token set: no card-width or border-width scale. */
  --ds-security-session-min: 260px;
  --ds-security-hairline: 1px;
}

.security__session[b-10irgiizqu] {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-security-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}

.security__session-icon[b-10irgiizqu] {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-lg);
}

.security__session-info[b-10irgiizqu] { display: grid; flex: 1; gap: var(--spacing-2xs); justify-items: start; min-width: 0; }
.security__session-info[b-10irgiizqu]  strong { color: var(--colors-text-primary); }
.security__session-info[b-10irgiizqu]  small,
.security__session-info[b-10irgiizqu]  time { color: var(--colors-text-muted); }

.security__danger[b-10irgiizqu] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: center;
  justify-content: space-between;
}

.security__danger-text[b-10irgiizqu] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.security__danger-text[b-10irgiizqu]  strong { color: var(--colors-text-primary); }
.security__danger-text[b-10irgiizqu]  p { color: var(--colors-text-muted); }
/* /Components/Pages/Dashboard/Settings/Settings.razor.rz.scp.css */
/* Settings. Narrower than Products at 1040, like Aurora's Channels page:
   forms to fill in rather than a table to scan. The tab tray is copied from
   ProductsPage.razor.css. */

.settings[b-mx5dn0yxny] {
  padding: var(--spacing-4xl) var(--ds-settings-gutter) var(--spacing-5xl);
}

.settings > *[b-mx5dn0yxny] {
  width: min(var(--ds-settings-max), 100%);
  margin-inline: auto;
}

.settings[b-mx5dn0yxny] {
  /* Gaps in the token set: no page-gutter, content-width or control-height
     scale. */
  --ds-settings-gutter: clamp(28px, 4vw, 66px);
  --ds-settings-max: 1040px;
  --ds-settings-measure: 640px;
  --ds-settings-tab: 34px;
}

.settings__header[b-mx5dn0yxny] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-2xl);
}

.settings__heading[b-mx5dn0yxny] { display: grid; gap: var(--spacing-sm); }
[b-mx5dn0yxny] .settings__lede { max-width: var(--ds-settings-measure); color: var(--colors-text-muted); }

/* A tray with a raised pill for the current view. */
.settings__tabs[b-mx5dn0yxny] {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-xs);
  background: var(--colors-accent-neutral-border);
  border-radius: var(--radius-radius-full);
}

.settings__tab[b-mx5dn0yxny] {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  min-height: var(--ds-settings-tab);
  padding: var(--spacing-none) var(--spacing-md);
  color: var(--colors-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-radius-full);
  cursor: pointer;
}

.settings__tab:hover[b-mx5dn0yxny] { background: var(--colors-interaction-hover); }

.settings__tab.is-active[b-mx5dn0yxny] {
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) var(--colors-surface-shadow);
}

.settings__tab.is-active[b-mx5dn0yxny]  svg { color: var(--colors-brand-primary); }

.settings__body[b-mx5dn0yxny] { display: grid; gap: var(--spacing-lg); }
/* /Components/Pages/Dashboard/Settings/SettingsCard.razor.rz.scp.css */
/* A card with a hairline edge and a soft shadow — Aurora's ChannelCard
   surface — holding a titled section of fields. */

.settings-card[b-0j72tmh6vn] {
  display: grid;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-card-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.settings-card[b-0j72tmh6vn] {
  /* Gap in the token set: no border-width scale. */
  --ds-card-hairline: 1px;
}

.settings-card--danger[b-0j72tmh6vn] { border-color: var(--colors-feedback-destructive-border); }

.settings-card__header[b-0j72tmh6vn] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-none);
}

.settings-card__titles[b-0j72tmh6vn] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.settings-card__titles[b-0j72tmh6vn]  h2 { color: var(--colors-text-primary); }
[b-0j72tmh6vn] .settings-card__description { color: var(--colors-text-muted); }
.settings-card__header-action[b-0j72tmh6vn] { flex: 0 0 auto; }

.settings-card__body[b-0j72tmh6vn] {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

.settings-card__footer[b-0j72tmh6vn] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--colors-surface-muted);
  border-top: var(--ds-card-hairline) solid var(--colors-surface-border);
}
/* /Components/Pages/Dashboard/Settings/WorkspaceTab.razor.rz.scp.css */
/* Aurora's two-column editor grid; the description spans both columns and
   wears the same textarea as ProductEditor. */

.workspace__grid[b-3zzymv1xtk] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-lg);
  align-items: start;
}

.workspace__full[b-3zzymv1xtk] { grid-column: 1 / -1; display: grid; gap: var(--spacing-sm); }

.workspace__full textarea[b-3zzymv1xtk] {
  width: 100%;
  padding: var(--spacing-md);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-workspace-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-md);
  resize: vertical;
}

.workspace__grid[b-3zzymv1xtk] {
  /* Gap in the token set: no border-width scale. */
  --ds-workspace-hairline: 1px;
}

.workspace__full textarea:focus[b-3zzymv1xtk] {
  border-color: var(--colors-brand-primary);
  outline: 0;
}
/* /Components/Pages/Dashboard/TaskRequests/NewTaskDialog.razor.rz.scp.css */
/* Adding or editing a task: the sentence first, what's been added under it, the add-ons last. */
.new-task[b-aa5op69831] {
  /* Gaps in the token set: no border-width or item-column sizes. */
  --ds-new-task-hairline: 1px;
  --ds-new-task-qty: 88px;
  --ds-new-task-price: 168px;
  /* The calendar's menu: a little wider than a list of choices, as the task panel has it. */
  --ds-new-task-calendar: 300px;

  display: grid;
  gap: var(--spacing-lg);
  text-align: start;
}
.new-task[b-aa5op69831]  p { margin: var(--spacing-none); }
.new-task[b-aa5op69831]  .new-task__muted { color: var(--colors-text-muted); }

.new-task__what[b-aa5op69831] { display: grid; gap: var(--spacing-xs); }
.new-task__type[b-aa5op69831] { display: flex; gap: var(--spacing-sm); align-items: center; }
/* The type's words line up with the sentence above them; its choices float over the form. */
.new-task__type[b-aa5op69831]  .new-task__type-toggle { margin-left: calc(var(--spacing-sm) * -1); }

/* One add-on: its name and a way to take it off, then its fields. */
.new-task__add[b-aa5op69831] {
  display: grid;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: var(--ds-new-task-hairline) solid var(--colors-surface-border);
}
.new-task__add > header[b-aa5op69831] { display: flex; align-items: center; justify-content: space-between; min-height: var(--spacing-2xl); color: var(--colors-text-secondary); }

.new-task__pair[b-aa5op69831] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }

.new-task__item[b-aa5op69831] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ds-new-task-qty) var(--ds-new-task-price) auto;
  gap: var(--spacing-sm);
  align-items: center;
}
/* A charge: what it is and how much, no quantity. */
.new-task__item.is-charge[b-aa5op69831] { grid-template-columns: minmax(0, 1fr) var(--ds-new-task-price) auto; }

.new-task__item-actions[b-aa5op69831] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.new-task__total[b-aa5op69831] { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--spacing-sm); }

/* The due date's calendar floats from its button, a little wider than a list of choices. */
.new-task__adds[b-aa5op69831]  .new-task__due .ds-popover__panel { width: min(var(--ds-new-task-calendar), calc(100vw - var(--spacing-lg))); padding: var(--spacing-md); }

.new-task__people[b-aa5op69831] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

/* What isn't added yet: a row of small buttons, urgent at the end. */
.new-task__adds[b-aa5op69831] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  padding-top: var(--spacing-lg);
  border-top: var(--ds-new-task-hairline) solid var(--colors-surface-border);
}
.new-task__adds[b-aa5op69831]  .new-task__urgent { margin-left: var(--spacing-sm); }

@media (max-width: 760px) {
  .new-task__pair[b-aa5op69831] { grid-template-columns: minmax(0, 1fr); }
  .new-task__item[b-aa5op69831] { grid-template-columns: minmax(0, 1fr) var(--ds-new-task-qty) auto; }
  .new-task__item[b-aa5op69831] >  :nth-child(3) { grid-column: 1 / 3; }
  .new-task__item.is-charge[b-aa5op69831] { grid-template-columns: minmax(0, 1fr) auto; }
  .new-task__item.is-charge[b-aa5op69831] >  :nth-child(2) { grid-column: 1; }
}
/* /Components/Pages/Dashboard/TaskRequests/TaskAssigneeMenu.razor.rz.scp.css */
.task-assignee[b-o11kaaama6] { display: flex; min-width: 0; }
/* Nobody yet: said quietly, so the people who are on things stand out. */
.task-assignee[b-o11kaaama6]  .filter-popover.is-nobody .filter-popover__trigger { color: var(--colors-text-muted); }
/* /Components/Pages/Dashboard/TaskRequests/TaskKindMark.razor.rz.scp.css */
.task-kind[b-fuofovq24e] {
  /* No compact-tile size in the token set. */
  --ds-task-kind: 36px;

  display: grid;
  flex: none;
  place-items: center;
  width: var(--ds-task-kind);
  height: var(--ds-task-kind);
  border-radius: var(--radius-radius-lg);
}
.task-kind.is-small[b-fuofovq24e] { width: var(--spacing-2xl); height: var(--spacing-2xl); border-radius: var(--radius-radius-md); }

.task-kind.is-order[b-fuofovq24e] { color: var(--colors-accent-teal-text); background: var(--colors-accent-teal-subtle); }
.task-kind.is-quote[b-fuofovq24e] { color: var(--colors-accent-violet-text); background: var(--colors-accent-violet-subtle); }
.task-kind.is-booking[b-fuofovq24e] { color: var(--colors-accent-orange-text); background: var(--colors-accent-orange-subtle); }
.task-kind.is-issue[b-fuofovq24e] { color: var(--colors-accent-amber-text); background: var(--colors-accent-amber-subtle); }
.task-kind.is-callback[b-fuofovq24e] { color: var(--colors-accent-cyan-text); background: var(--colors-accent-cyan-subtle); }
.task-kind.is-other[b-fuofovq24e] { color: var(--colors-icon-brand); background: var(--colors-accent-brand-subtle); }
/* /Components/Pages/Dashboard/TaskRequests/TaskPanel.razor.rz.scp.css */
/* A task's panel: its facts as one aligned list, then sections divided by hairlines, one rhythm throughout. */
.task-panel__body[b-pm22higj20] {
  /* Gaps in the token set: no border-width, label-column, dot or calendar-menu size. */
  --ds-task-panel-hairline: 1px;
  --ds-task-panel-label: 112px;
  --ds-task-panel-dot: 6px;
  --ds-task-panel-calendar: 300px;

  display: grid;
  color: var(--colors-text-primary);
}
.task-panel__body[b-pm22higj20]  p,
.task-panel__body[b-pm22higj20]  h3,
.task-panel__body dl[b-pm22higj20],
.task-panel__body dd[b-pm22higj20],
.task-panel__body ul[b-pm22higj20],
.task-panel__body ol[b-pm22higj20],
.task-panel__body figure[b-pm22higj20],
.task-panel__body blockquote[b-pm22higj20] { margin: var(--spacing-none); }
.task-panel__body[b-pm22higj20]  .task-panel__muted { color: var(--colors-text-muted); }

/* The facts: a fixed column of names, the values lined up beside them. */
.task-panel__props[b-pm22higj20] { display: grid; gap: var(--spacing-2xs); padding-bottom: var(--spacing-xl); }
.task-panel__prop[b-pm22higj20] {
  display: grid;
  grid-template-columns: var(--ds-task-panel-label) minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--spacing-4xl);
}
.task-panel__prop dt[b-pm22higj20] { color: var(--colors-text-muted); }
.task-panel__prop dd[b-pm22higj20] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); align-items: center; min-width: 0; }
/* A quiet menu's words line up with the plain values under it. */
.task-panel__prop dd[b-pm22higj20]  .filter-popover.is-quiet { margin-left: calc(var(--spacing-sm) * -1); }
.task-panel__due.is-late[b-pm22higj20]  .filter-popover__trigger { color: var(--colors-text-destructive); }
.task-panel__due.is-today[b-pm22higj20]  .filter-popover__trigger { color: var(--colors-feedback-warning-text); }
.task-panel__due.is-none[b-pm22higj20]  .filter-popover__trigger { color: var(--colors-text-muted); }
/* The calendar opens in the due date's menu, a little wider than a list of choices. */
.task-panel__due[b-pm22higj20]  .task-panel__due-menu .filter-popover__menu { width: var(--ds-task-panel-calendar); padding: var(--spacing-md); }
.task-panel__customer[b-pm22higj20] { display: inline-flex; gap: var(--spacing-sm); align-items: center; min-width: 0; }
.task-panel__customer a[b-pm22higj20] { color: var(--colors-text-primary); text-decoration: none; }
.task-panel__customer a:hover[b-pm22higj20] { color: var(--colors-text-link); text-decoration: underline; text-underline-offset: var(--spacing-2xs); }

.task-panel__section[b-pm22higj20] {
  display: grid;
  gap: var(--spacing-md);
  padding-block: var(--spacing-xl);
  border-top: var(--ds-task-panel-hairline) solid var(--colors-surface-border);
}
.task-panel__section:last-child[b-pm22higj20] { padding-bottom: var(--spacing-sm); }
.task-panel__section[b-pm22higj20]  .task-panel__text { color: var(--colors-text-secondary); }

/* What was asked for, in its own subtle card: each item with its note, the quantity, the amount at the
   right edge; then the charges; then the total. */
.task-panel__order[b-pm22higj20] {
  display: grid;
  padding: var(--spacing-xs) var(--spacing-lg);
  background: var(--colors-surface-muted);
  /* Outlined as well as filled: in dark mode the muted fill is the panel's own colour. */
  border: var(--ds-task-panel-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
}
.task-panel__lines[b-pm22higj20] { display: grid; padding: var(--spacing-none); list-style: none; }
.task-panel__lines li[b-pm22higj20] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--spacing-lg);
  align-items: baseline;
  padding-block: var(--spacing-md);
  border-bottom: var(--ds-task-panel-hairline) solid var(--colors-surface-border);
}
.task-panel__line-name[b-pm22higj20] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.task-panel__charges[b-pm22higj20] { display: grid; gap: var(--spacing-sm); margin: var(--spacing-none); padding: var(--spacing-md) var(--spacing-none); list-style: none; border-bottom: var(--ds-task-panel-hairline) solid var(--colors-surface-border); }
.task-panel__charges li[b-pm22higj20] { display: flex; gap: var(--spacing-lg); align-items: baseline; justify-content: space-between; color: var(--colors-text-secondary); }
.task-panel__lines[b-pm22higj20]  .task-panel__qty { color: var(--colors-text-muted); }
.task-panel__lines[b-pm22higj20]  .task-panel__amount { min-width: var(--spacing-5xl); text-align: end; }
.task-panel__total[b-pm22higj20] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-lg); padding-block: var(--spacing-md); }
/* The last item's rule gives way to the total's own space. */
.task-panel__order > :last-child.task-panel__lines li:last-child[b-pm22higj20] { border-bottom: none; }

/* Internal notes: a heading that says who sees them, a box to add one, then the notes, each with who
   wrote it. */
.task-panel__heading[b-pm22higj20] { display: grid; gap: var(--spacing-sm); }
.task-panel__compose[b-pm22higj20] { display: grid; gap: var(--spacing-sm); justify-items: end; }
.task-panel__compose[b-pm22higj20] >  :first-child { justify-self: stretch; }
.task-panel__notes[b-pm22higj20] { display: grid; gap: var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none); list-style: none; }
.task-panel__notes li[b-pm22higj20] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-md); align-items: start; }
.task-panel__notes li > div[b-pm22higj20] { display: grid; gap: var(--spacing-xs); color: var(--colors-text-primary); }
.task-panel__note-head[b-pm22higj20] { display: flex; gap: var(--spacing-sm); align-items: baseline; }

/* Activity: what happened, quietly, one line each. */
.task-panel__history[b-pm22higj20] { display: grid; gap: var(--spacing-md); padding: var(--spacing-none); list-style: none; }
.task-panel__history li[b-pm22higj20] {
  display: grid;
  grid-template-columns: var(--spacing-2xl) minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: baseline;
  color: var(--colors-text-secondary);
}
.task-panel__history li[b-pm22higj20]  time { flex: none; }
.task-panel__event-dot[b-pm22higj20] {
  justify-self: center;
  width: var(--ds-task-panel-dot);
  height: var(--ds-task-panel-dot);
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.task-panel__section[b-pm22higj20]  .task-panel__more { justify-self: start; margin-left: calc(var(--spacing-sm) * -1); }

/* Cancel on the left, quietly; reply and finish on the right. */
.task-panel__footer[b-pm22higj20] { display: flex; gap: var(--spacing-md); align-items: center; justify-content: space-between; width: 100%; }
.task-panel__footer-main[b-pm22higj20] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: flex-end; margin-left: auto; }

@media (max-width: 760px) {
  .task-panel__prop[b-pm22higj20] { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-2xs); padding-block: var(--spacing-xs); }
  .task-panel__footer[b-pm22higj20] { flex-wrap: wrap; }
}
/* /Components/Pages/Dashboard/TaskRequests/TaskRaisedBy.razor.rz.scp.css */
.task-by[b-uvkxpi73et] {
  /* No avatar size for an inline mark in the token set. */
  --ds-task-by-look: 28px;
  /* Inside a line of small text. */
  --ds-task-by-look-compact: 16px;

  display: inline-flex;
  gap: var(--spacing-sm);
  align-items: center;
  /* Kept to its cell: an inline box is as wide as its name, so a long one ran into the Customer column
     instead of ending in an ellipsis. */
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}
.task-by__look[b-uvkxpi73et] {
  flex: none;
  width: var(--ds-task-by-look);
  height: var(--ds-task-by-look);
  object-fit: cover;
  border-radius: var(--radius-radius-full);
}
.task-by.is-compact[b-uvkxpi73et] { gap: var(--spacing-xs); }
.task-by.is-compact .task-by__look[b-uvkxpi73et] { width: var(--ds-task-by-look-compact); height: var(--ds-task-by-look-compact); }
.task-by.is-compact[b-uvkxpi73et]  .task-by__name { color: inherit; }
.task-by[b-uvkxpi73et]  .task-by__name { overflow: hidden; color: var(--colors-text-primary); text-overflow: ellipsis; white-space: nowrap; }
/* /Components/Pages/Dashboard/TaskRequests/TaskRequests.razor.rz.scp.css */
/* Tasks: one list of what needs doing, laid out as Products & Services is: the title, then the views and
   filters on the page, then the table in a white card. As wide as the page before it (designer, 20 October
   2026): the gutter outside, then everything on one 1440 measure, centred. */
.tasks[b-b6dbc6rex6] {
  /* Gaps in the token set: no page-gutter, page-width, readable-measure, search-width or border-width scale.
     The gutter and the cap are the earlier Task Requests page's. */
  --ds-tasks-gutter: clamp(28px, 4vw, 66px);
  --ds-tasks-max: 1440px;
  --ds-tasks-measure: 680px;
  --ds-tasks-search: 300px;
  --ds-tasks-hairline: 1px;

  display: grid;
  padding: var(--spacing-4xl) var(--ds-tasks-gutter) var(--spacing-6xl);
  color: var(--colors-text-primary);
}

/* One left edge for the eye to follow down the page. */
.tasks[b-b6dbc6rex6] >  * { width: min(var(--ds-tasks-max), 100%); min-width: 0; margin-inline: auto; }
.tasks[b-b6dbc6rex6]  p,
.tasks[b-b6dbc6rex6]  h1,
.tasks[b-b6dbc6rex6]  h2,
.tasks[b-b6dbc6rex6]  h3 { margin: var(--spacing-none); }
.tasks[b-b6dbc6rex6]  .tasks__muted { color: var(--colors-text-muted); }

/* The title and its line on the left; New task level with the line's foot. */
.tasks__header[b-b6dbc6rex6] {
  display: flex;
  gap: var(--spacing-3xl);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--spacing-2xl);
}
.tasks__heading[b-b6dbc6rex6] { display: grid; gap: var(--spacing-sm); }
.tasks__heading[b-b6dbc6rex6]  .tasks__lede { max-width: var(--ds-tasks-measure); color: var(--colors-text-secondary); }

/* The views on the left, search and filters on the right: Products' controls row. */
.tasks__controls[b-b6dbc6rex6] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}
.tasks__tools[b-b6dbc6rex6] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.tasks__customer-scope[b-b6dbc6rex6] { display: flex; flex-wrap: wrap; gap: var(--spacing-md); align-items: center; justify-content: space-between; margin-bottom: var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-lg); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-lg); }
.tasks__customer-scope[b-b6dbc6rex6]  p { overflow-wrap: anywhere; }
.tasks__tools[b-b6dbc6rex6]  .tasks__search { width: var(--ds-tasks-search); }

/* The table, its card and its pages are the shared DataTable's (designer, 28 October 2026). */

@media (max-width: 1024px) {
  .tasks__tools[b-b6dbc6rex6] { width: 100%; }
  .tasks__tools[b-b6dbc6rex6]  .tasks__search { flex: 1; width: auto; }
}

@media (max-width: 760px) {
  .tasks__header[b-b6dbc6rex6] { flex-direction: column; align-items: stretch; gap: var(--spacing-lg); }
}
/* /Components/Pages/Dashboard/TaskRequests/TaskRow.razor.rz.scp.css */
/* A row of the Tasks table, and its column names (is-head). The table's look (padding, the line between
   rows, the header band, hover, just added) is the shared DataTable's (designer, 28 October 2026: every
   table alike); the columns and cells are this table's own. */
.task-row[b-2afdboph69] {
  /* Gaps in the token set: no border-width or compact-tile size, and the columns (with the assignee's,
     for a team) are this table's own. The status column is as wide as its longest state, "Waiting on
     customer" and its chevron, so the states line up from its start, as availability does on Products. */
  --ds-tasks-hairline: 1px;
  --ds-tasks-icon: 36px;
  --ds-tasks-due: 120px;
  --ds-tasks-status: 184px;
  --ds-tasks-assignee: 150px;
  /* The task gets the most room, so most titles sit on one line (designer, 25 October 2026); the customer's
     name and channel are short. */
  --ds-table-columns: minmax(0, 3fr) minmax(0, 0.7fr) minmax(0, 0.9fr) var(--ds-tasks-due) var(--ds-tasks-status);
}
.task-row.has-team[b-2afdboph69] { --ds-table-columns: minmax(0, 2.8fr) minmax(0, 0.6fr) minmax(0, 0.9fr) var(--ds-tasks-due) var(--ds-tasks-assignee) var(--ds-tasks-status); }
.task-row__facts > *[b-2afdboph69] { min-width: 0; }
.task-row__facts[b-2afdboph69] { display: contents; }
.task-row[b-2afdboph69]  p { margin: var(--spacing-none); }

.task-row__task[b-2afdboph69] { display: flex; gap: var(--spacing-md); align-items: center; }
.task-row__words[b-2afdboph69] { display: grid; gap: var(--spacing-xs); min-width: 0; }

/* The title's button covers the row, so a click anywhere opens the task. */
.task-row__words[b-2afdboph69]  .task-row__title {
  justify-content: start;
  min-height: auto;
  padding: var(--spacing-none);
  color: var(--colors-text-primary);
  text-align: start;
  background: transparent;
}
.task-row__words[b-2afdboph69]  .task-row__title::after { position: absolute; inset: 0; content: ""; }
.task-row__words[b-2afdboph69]  .task-row__title:focus-visible { outline: none; }
/* At most two lines, then "…": the end of a title is often what matters ("…before Friday"), so it wraps rather
   than cuts; the full title is in the row's hover text and the panel. */
.task-row__words[b-2afdboph69]  .task-row__title-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.task-row__words[b-2afdboph69]  .task-row__title:focus-visible::after { outline: var(--ds-tasks-hairline) solid var(--colors-brand-primary); outline-offset: calc(var(--ds-tasks-hairline) * -1); }
.task-row.is-closed .task-row__words[b-2afdboph69]  .task-row__title { color: var(--colors-text-secondary); }

.task-row__words[b-2afdboph69]  .task-row__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); color: var(--colors-text-muted); }
.task-row__words[b-2afdboph69]  .task-row__urgent { color: var(--colors-text-destructive); }

.task-row__customer[b-2afdboph69] { display: grid; gap: var(--spacing-xs); }
.task-row__customer[b-2afdboph69]  .task-row__name { overflow: hidden; color: var(--colors-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.task-row__customer[b-2afdboph69]  .task-row__channel { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
.task-row[b-2afdboph69]  .task-row__muted { color: var(--colors-text-muted); }

.task-row__due[b-2afdboph69]  .task-row__late { color: var(--colors-text-destructive); }
.task-row__due[b-2afdboph69]  .task-row__today { color: var(--colors-feedback-warning-text); }
.task-row__due[b-2afdboph69]  .task-row__date { color: var(--colors-text-secondary); }

/* The menus: above the title's cover, so they can be used on their own; an open one above the rows after it. */
.task-row__status[b-2afdboph69],
.task-row__assignee[b-2afdboph69] { position: relative; z-index: 1; }
.task-row.is-menu-open .task-row__status[b-2afdboph69],
.task-row.is-menu-open .task-row__assignee[b-2afdboph69] { z-index: 2; }
/* Their words line up with their column's name. The status starts its column, as every table's states do,
   so the dots line up (designer, 28 October 2026; this replaces the right-aligned status of 21 October). */
.task-row__assignee[b-2afdboph69]  .filter-popover.is-quiet,
.task-row__status[b-2afdboph69]  .filter-popover.is-quiet { margin-left: calc(var(--spacing-sm) * -1); }
.task-row__status[b-2afdboph69] { display: flex; justify-content: flex-start; }
/* Who raised it, under the title: only where its column folds away. */
.task-row__words[b-2afdboph69]  .task-row__meta-by { display: none; }

/* A smaller laptop (and a tablet, whose rows stack): six columns are too many to scan, so "Raised by" folds under the title (with the
   agent's look still beside its name) and the other columns keep their room (designer, 21 October 2026). */
@media (max-width: 1280px) {
  .task-row[b-2afdboph69] { --ds-table-columns: minmax(0, 3fr) minmax(0, 1fr) var(--ds-tasks-due) var(--ds-tasks-status); }
  .task-row.has-team[b-2afdboph69] { --ds-table-columns: minmax(0, 2.8fr) minmax(0, 1fr) var(--ds-tasks-due) var(--ds-tasks-assignee) var(--ds-tasks-status); }
  .task-row__by[b-2afdboph69],
  .task-row.is-head .task-row__facts[b-2afdboph69] >  :first-child { display: none; }
  .task-row__words[b-2afdboph69]  .task-row__meta-by { display: inline-flex; }
}

/* A tablet or phone: the task and its status on top, then who raised it, the customer and the due date in one line. */
@media (max-width: 1024px) {
  .task-row[b-2afdboph69],
  .task-row.has-team[b-2afdboph69] {
    /* The status column, narrower on a tablet (no column-width token). */
    --ds-tasks-status: 176px;
    --ds-table-columns: minmax(0, 1fr) var(--ds-tasks-status);
  }
  .task-row__facts[b-2afdboph69] {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: var(--spacing-xs) var(--spacing-lg);
    align-items: center;
    padding-left: calc(var(--ds-tasks-icon) + var(--spacing-md));
  }
  .task-row__customer[b-2afdboph69] { display: inline-flex; gap: var(--spacing-sm); align-items: center; }
  .task-row__assignee[b-2afdboph69] { grid-column: 1 / -1; grid-row: 3; padding-left: calc(var(--ds-tasks-icon) + var(--spacing-md)); }
  .task-row__assignee[b-2afdboph69]  .filter-popover.is-quiet { margin-left: var(--spacing-none); }
}

@media (max-width: 760px) {
  .task-row[b-2afdboph69],
  .task-row.has-team[b-2afdboph69] { --ds-table-columns: minmax(0, 1fr); }
  .task-row__status[b-2afdboph69] { grid-row: 4; justify-content: flex-start; padding-left: calc(var(--ds-tasks-icon) + var(--spacing-md)); }
  .task-row__status[b-2afdboph69]  .filter-popover.is-quiet { margin-left: var(--spacing-none); }
}
/* /Components/Pages/Dashboard/TaskRequests/TaskStatusMenu.razor.rz.scp.css */
.task-status[b-yk8xzsyt92] {
  /* No dot size in the token set. */
  --ds-task-status-dot: 8px;

  display: flex;
  min-width: 0;
}
[b-yk8xzsyt92] .task-status__dot {
  display: block;
  width: var(--ds-task-status-dot);
  height: var(--ds-task-status-dot);
  background: var(--colors-text-muted);
  border-radius: var(--radius-radius-full);
}
/* The trigger's dot takes the task's state; each option's dot its own. */
.task-status.is-info[b-yk8xzsyt92]  .filter-popover__leading .task-status__dot,
[b-yk8xzsyt92] .task-status__dot.is-info { background: var(--colors-feedback-info-text); }
.task-status.is-brand[b-yk8xzsyt92]  .filter-popover__leading .task-status__dot,
[b-yk8xzsyt92] .task-status__dot.is-brand { background: var(--colors-brand-primary); }
.task-status.is-warning[b-yk8xzsyt92]  .filter-popover__leading .task-status__dot,
[b-yk8xzsyt92] .task-status__dot.is-warning { background: var(--colors-feedback-warning-text); }
.task-status.is-success[b-yk8xzsyt92]  .filter-popover__leading .task-status__dot,
[b-yk8xzsyt92] .task-status__dot.is-success { background: var(--colors-feedback-success-text); }
/* /Components/Pages/Dashboard/TeachAi/BusinessIntroDialog.razor.rz.scp.css */
/* "Tell us about your business": a wider dialog than a confirmation, the
   box first and roomy, the optional links after it. */
.business-intro-host[b-1zbxq0ktba]  .dialog-backdrop {
  /* Missing from the token set: no dialog widths. Room for a few lines of a
     business's own words. */
  --ds-dialog-width: 600px;
}

.business-intro[b-1zbxq0ktba] { display: grid; gap: var(--spacing-2xl); }

.business-intro__about[b-1zbxq0ktba] { display: grid; gap: var(--spacing-sm); }
.business-intro__about > label[b-1zbxq0ktba] { color: var(--colors-text-primary); }

/* The box and its tools as one field, drawn like the design system's
   Input (white, a quiet border, the brand colour when in use) so it reads
   as somewhere to write, not a disabled panel. */
.business-intro__box[b-1zbxq0ktba] {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-input);
  border-radius: var(--radius-radius-xl);
}
/* The example in the box in the subtle text colour, so it reads as a hint, not as something already written (designer). */
.business-intro__box[b-1zbxq0ktba]  textarea::placeholder { color: var(--colors-text-subtle); }
.business-intro__box:focus-within[b-1zbxq0ktba] { border-color: var(--colors-brand-primary); box-shadow: inset 0 0 0 var(--ds-hairline) var(--colors-brand-primary); }

.business-intro__files[b-1zbxq0ktba] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin: 0; padding: 0; list-style: none; }
.business-intro__tools[b-1zbxq0ktba] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; }
/* Voice note and files on the left; what we found, on the right ("found", so they check it). */
.business-intro__tools[b-1zbxq0ktba]  .business-intro__fill { margin-left: auto; }

.business-intro__links[b-1zbxq0ktba] { display: grid; gap: var(--spacing-md); }
.business-intro__links-head[b-1zbxq0ktba] { display: flex; gap: var(--spacing-sm); align-items: baseline; }
.business-intro__links-head[b-1zbxq0ktba]  h3 { color: var(--colors-text-primary); }
.business-intro__links-head[b-1zbxq0ktba]  .business-intro__optional { color: var(--colors-text-muted); }
.business-intro__link[b-1zbxq0ktba] { display: flex; gap: var(--spacing-xs); align-items: center; }
.business-intro__link[b-1zbxq0ktba] >  *:first-child { flex: 1; min-width: 0; }

/* The rest, to pick from, each with its own mark. */
.business-intro__platforms[b-1zbxq0ktba] { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
/* /Components/Pages/Dashboard/TeachAi/QuestionnaireCard.razor.rz.scp.css */
/* While it is being answered, the card is QuestionForm itself (its own look, as in Tell its
   job); this only stacks a send error under it. Once sent, it folds to a quiet record of what
   was answered, on the same surface. */
.questionnaire-form[b-yr5ia8hvbe] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
  min-width: 0;
}

.questionnaire[b-yr5ia8hvbe] {
  display: grid;
  gap: var(--spacing-md);
  width: 100%;
  min-width: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--colors-text-primary);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}

.questionnaire__head[b-yr5ia8hvbe] { display: grid; gap: var(--spacing-2xs); }
.questionnaire__head[b-yr5ia8hvbe]  h3 { margin: 0; }

/* Sent: what was answered, question above answer, then a quiet receipt. */
.questionnaire__answers[b-yr5ia8hvbe] { display: grid; gap: var(--spacing-sm); margin: 0; }
.questionnaire__answer[b-yr5ia8hvbe] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.questionnaire__answer dt[b-yr5ia8hvbe],
.questionnaire__answer dd[b-yr5ia8hvbe] { margin: 0; }
.questionnaire__answer dt[b-yr5ia8hvbe] { color: var(--colors-text-muted); }
.questionnaire__answer dd[b-yr5ia8hvbe] { overflow-wrap: anywhere; }

.questionnaire__done[b-yr5ia8hvbe] {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  margin: 0;
  color: var(--colors-text-success);
}
/* /Components/Pages/Dashboard/TeachAi/TeachAiOverlay.razor.rz.scp.css */
.teach-ai[b-5u0riw8dok] {
  /* Missing from the token set: no large guided-workspace measure, mascot
     size, overlay layer or motion values for this experience. */
  --ds-teach-ai-layer: 100;
  --ds-teach-ai-panel: 980px;
  /* As tall as the window allows, up to this, so a large screen gives the
     conversation room; a short laptop gets the window's height. */
  --ds-teach-ai-panel-height: 1040px;
  --ds-teach-ai-measure: 720px;
  /* The title stops short of the close button in the corner. */
  --ds-teach-ai-bar-end: calc(var(--spacing-3xl) + var(--spacing-4xl));
  --ds-teach-ai-summary: 760px;
  /* Attachments: the widest a file's name runs, and a sent picture's thumbnail. */
  --ds-teach-ai-file-width: 220px;
  --ds-teach-ai-file-thumb: 96px;
  /* A voice note in a bubble, and the "Noted" card under a message: their widths. */
  --ds-teach-ai-note: 260px;
  --ds-teach-ai-noted: 440px;
  --ds-teach-ai-ring: 2px;
  --ds-teach-ai-dock-min: 128px;
  --ds-teach-ai-dock-shadow: 36px;
  /* The conversation's own sizes: the orb at the start, in the voice bar,
     and beside the agent's messages. */
  --ds-teach-ai-hello-orb: 168px;
  --ds-teach-ai-hello-copy: 480px;
  /* The two ways to start share one width, so neither reads as the lesser. */
  --ds-teach-ai-choice: 160px;
  --ds-teach-ai-bar-orb: 44px;
  --ds-teach-ai-avatar: 28px;
  --ds-teach-ai-caret: 1em;
  /* The agent's words arriving: each fades in over this long, and typed
     text staggers by this much per character (about 55 a second). */
  --ds-teach-ai-word: 220ms;
  --ds-teach-ai-type: 18ms;
  --ds-teach-ai-motion: 320ms;
  --ds-teach-ai-quick: 160ms;
  --ds-teach-ai-pulse: 1.2s;
  --ds-teach-ai-breath: 3.8s;
  --ds-teach-ai-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-teach-ai-fade: linear-gradient(to bottom, transparent, var(--colors-surface-background) var(--spacing-2xl));
  --ds-teach-ai-blur: 6px;

  position: fixed;
  inset: 0;
  z-index: var(--ds-teach-ai-layer);
  display: grid;
  place-items: center;
  padding: var(--spacing-2xl);
}

.teach-ai__shell[b-5u0riw8dok] {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(var(--ds-teach-ai-panel), 100%);
}

/* The current entry screen remains visible, so this reads as guided work inside
   yára rather than a separate full-screen product. It may open from the
   Dashboard, the standalone AI Operations module or Business Setup. Keep the
   blur on its own layer so chat updates do not repaint the whole backdrop. */
.teach-ai[b-5u0riw8dok]::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: var(--colors-surface-overlay);
  backdrop-filter: blur(var(--ds-teach-ai-blur));
  animation: teach-ai-in-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}

.teach-ai__panel[b-5u0riw8dok] {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  overflow: hidden;
  color: var(--colors-text-primary);
  background: var(--colors-surface-popover);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-3xl);
  outline: none;
  box-shadow: 0 var(--spacing-xl) var(--spacing-4xl) var(--colors-surface-shadow);
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
  transition: height var(--ds-teach-ai-motion) var(--ds-teach-ai-ease);
}
.teach-ai__shell.is-compact .teach-ai__panel[b-5u0riw8dok] { height: auto; }
.teach-ai__shell.is-expanded .teach-ai__panel[b-5u0riw8dok] {
  height: min(var(--ds-teach-ai-panel-height), calc(100dvh - 2 * var(--spacing-2xl)));
}

/* ── Top bar: what this is and how far along, voice or text, close ──────── */
/* The header and the topic row run edge to edge, on the panel's own margin,
   level with the close button; the conversation keeps its narrower column. */
.teach-ai__bar[b-5u0riw8dok] {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--spacing-2xl) var(--ds-teach-ai-bar-end) var(--spacing-lg) var(--spacing-3xl);
}
.teach-ai__heading[b-5u0riw8dok] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.teach-ai__heading[b-5u0riw8dok]  span { color: var(--colors-text-muted); }
.teach-ai__title-row[b-5u0riw8dok] { display: flex; align-items: center; }
.teach-ai__title-row[b-5u0riw8dok]  h2 { margin: 0; color: var(--colors-text-primary); }
.teach-ai__bar[b-5u0riw8dok]  .teach-ai__close { position: absolute; top: var(--spacing-xl); right: var(--spacing-xl); }
/* Figma draws the close cross at 14px in its 32px box; the 24px icon gives that. */
.teach-ai__bar[b-5u0riw8dok]  .teach-ai__close .ds-button__icon { width: var(--icon-size-icon-lg); height: var(--icon-size-icon-lg); }

/* Compact topic indicators keep progress available without surrounding the
   mascot with six competing cards. Each remains a real navigation target. */
.teach-ai__topics[b-5u0riw8dok] {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  padding: 0 var(--spacing-3xl) var(--spacing-md);
}
.teach-ai__steps[b-5u0riw8dok] { display: flex; flex: 1; gap: var(--spacing-xs); min-width: 0; }
/* Where you are, in words, at the end of the bar (the only place it is said). */
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__topics-count { flex: none; color: var(--colors-text-secondary); white-space: nowrap; }
/* Each segment is a button back to its topic: the bar is thin, the target
   is tall enough to hit. */
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile {
  display: flex;
  flex: 1;
  align-items: center;
  height: var(--spacing-xl);
  padding: 0;
  background: transparent;
}
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile::before {
  width: 100%;
  height: var(--spacing-xs);
  content: "";
  background: var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
  transition: background-color var(--ds-teach-ai-motion) var(--ds-teach-ai-ease);
}
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile:disabled { cursor: default; }
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile:hover:not(:disabled)::before { background: var(--colors-icon-muted); }
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile.is-confirmed::before { background: var(--colors-brand-primary); }
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile.is-skipped::before { background: var(--colors-icon-disabled); }
.teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile:is(.is-current, .is-checking)::before { background: var(--colors-accent-brand-border); }

/* ── Stage ───────────────────────────────────────────────────────────────── */
.teach-ai__stage[b-5u0riw8dok] {
  /* The last row, whether or not the topic row is showing. */
  grid-row: 3;
  display: grid;
  min-height: 0;
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  overflow: auto;
  overscroll-behavior: contain;
}
.teach-ai__shell.is-compact .teach-ai__stage[b-5u0riw8dok] { padding-bottom: var(--spacing-xl); }
.teach-ai__shell.is-compact .teach-ai__centre[b-5u0riw8dok] {
  min-height: 0;
  padding-block: var(--spacing-2xl) var(--spacing-4xl);
}
.teach-ai__centre[b-5u0riw8dok] {
  display: grid;
  gap: var(--spacing-xl);
  justify-items: center;
  width: min(var(--ds-teach-ai-measure), 100%);
  min-height: 100%;
  margin: auto;
  padding: var(--spacing-2xl);
  text-align: center;
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}
.teach-ai__stage[b-5u0riw8dok]  .teach-ai__caption { margin: 0; color: var(--colors-text-primary); text-wrap: balance; }
.teach-ai__stage[b-5u0riw8dok]  .teach-ai__eyebrow {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-subtle);
  border-radius: var(--radius-radius-full);
}

/* The person's words, live, as they speak. */
.teach-ai__stage[b-5u0riw8dok]  .teach-ai__heard {
  margin: 0;
  color: var(--colors-text-muted);
  opacity: 0;
  transition: opacity var(--ds-teach-ai-quick) ease;
}
.teach-ai__stage[b-5u0riw8dok]  .teach-ai__heard.is-on { opacity: 1; }

.teach-ai__replies[b-5u0riw8dok] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.teach-ai__replies.is-chips[b-5u0riw8dok] { justify-content: flex-start; padding-left: calc(var(--ds-teach-ai-avatar) + var(--spacing-sm)); }
/* Shown once the question is out: after the voice stops, or after the typed
   words have landed (--after). */
.teach-ai__replies.is-chips:not(.is-waiting)[b-5u0riw8dok] {
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
  animation-delay: var(--after);
}
.teach-ai__replies.is-chips.is-waiting[b-5u0riw8dok] { visibility: hidden; opacity: 0; }

/* ── The start: an empty state ───────────────────────────────────────────── */
/* Centred in the room the conversation will fill: the orb on a soft glow,
   the headline, what was found and where, then two equal ways to start. */
.teach-ai__hello[b-5u0riw8dok] {
  display: grid;
  gap: var(--spacing-lg);
  align-self: center;
  justify-items: center;
  width: 100%;
  padding-block: var(--spacing-2xl);
  text-align: center;
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}
.teach-ai__hello[b-5u0riw8dok]  .teach-ai__hello-orb {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.teach-ai__hello[b-5u0riw8dok]  .teach-ai__hello-orb .ds-button__icon { width: auto; height: auto; }
.teach-ai__hello[b-5u0riw8dok]  .teach-ai__hello-orb .ds-voice-orb,
.teach-ai__hello[b-5u0riw8dok]  .teach-ai__hello-still { --ds-voice-orb-size: var(--ds-teach-ai-hello-orb); }
/* Pointing at it wakes the orb: a preview of it listening. */
.teach-ai__hello[b-5u0riw8dok]  .teach-ai__hello-orb:hover .ds-voice-orb { --ds-voice-orb-wake: 1; }
.teach-ai__hello-copy[b-5u0riw8dok] { display: grid; gap: var(--spacing-sm); max-width: var(--ds-teach-ai-hello-copy); margin-top: var(--spacing-sm); }
.teach-ai__hello-copy[b-5u0riw8dok]  h3 { margin: 0; color: var(--colors-text-primary); text-wrap: balance; }
.teach-ai__hello-copy[b-5u0riw8dok]  p { margin: 0; color: var(--colors-text-secondary); text-wrap: pretty; }
.teach-ai__hello-actions[b-5u0riw8dok] { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; margin-top: var(--spacing-sm); }
.teach-ai__hello-actions[b-5u0riw8dok]  .ds-button { min-width: var(--ds-teach-ai-choice); }
.teach-ai__chat[b-5u0riw8dok]  .teach-ai__start-note { margin: 0; color: var(--colors-text-muted); }

/* ── One floating dock, with a voice and a text state ────────────────────── */
.teach-ai__dock[b-5u0riw8dok] {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  padding: var(--spacing-md);
  background: color-mix(in srgb, var(--colors-surface-card) 96%, transparent);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-lg) var(--ds-teach-ai-dock-shadow) var(--colors-surface-shadow);
  transition:
    background-color var(--ds-teach-ai-motion) var(--ds-teach-ai-ease),
    border-color var(--ds-teach-ai-motion) var(--ds-teach-ai-ease),
    box-shadow var(--ds-teach-ai-motion) var(--ds-teach-ai-ease);
}
/* Text gets the room to write; voice is one row, so the conversation keeps the space. */
.teach-ai__dock.is-text[b-5u0riw8dok] { min-height: var(--ds-teach-ai-dock-min); }
/* Typing: a soft brand edge says where the words go. No ring: the box is
   focused for you on every turn, and a ring there all the time reads as an
   error. Buttons inside keep their own keyboard focus rings. */
.teach-ai__dock.is-text:focus-within[b-5u0riw8dok] { border-color: var(--colors-accent-brand-border); }

.teach-ai__voicebar[b-5u0riw8dok] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  width: 100%;
  padding: 0 var(--spacing-xs);
  outline: none;
}
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__bar-orb { --ds-voice-orb-size: var(--ds-teach-ai-bar-orb); }
/* At 44px the rings' 3D turn bends the orb out of round; here they turn
   flat, so it stays a circle with its colours still moving. */
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__bar-orb .ds-voice-orb__rings::before,
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__bar-orb .ds-voice-orb__rings::after { animation-name: teach-ai-orb-spin-b-5u0riw8dok; }
/* And the core's speaking flare would push a point through its edge. */
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__bar-orb .ds-voice-orb__lines { animation: none; }
.teach-ai__voicebar-text[b-5u0riw8dok] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__status { margin: 0; color: var(--colors-text-primary); transition: color var(--ds-teach-ai-quick) ease; }
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__status:is(.is-listening, .is-speaking) { color: var(--colors-brand-primary); }
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__status.is-muted { color: var(--colors-text-destructive); }
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__hint { margin: 0; overflow: hidden; color: var(--colors-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.teach-ai__voicebar[b-5u0riw8dok]  .teach-ai__mute.is-on { color: var(--colors-text-destructive); }
.teach-ai__voice-actions[b-5u0riw8dok] { display: flex; flex: none; gap: var(--spacing-xs); align-items: center; }

/* ── Text: the thread and the composer ───────────────────────────────────── */
.teach-ai__chat[b-5u0riw8dok] {
  display: grid;
  /* The thread takes the room; the quick answers (when there are any) and
     the box sit under it at their own height. */
  grid-template-rows: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: var(--spacing-sm);
  width: min(var(--ds-teach-ai-measure), 100%);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
}
.teach-ai__thread[b-5u0riw8dok] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-height: 0;
  margin: 0 calc(var(--spacing-md) * -1);
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
  overflow: auto;
  list-style: none;
  /* Older lines fade out under the bar instead of being cut. */
  -webkit-mask-image: var(--ds-teach-ai-fade);
  mask-image: var(--ds-teach-ai-fade);
}
/* Like a chat app: a short conversation sits just above the bar, and grows up. */
.teach-ai__thread > :first-child[b-5u0riw8dok] { margin-top: auto; }
.teach-ai__line[b-5u0riw8dok] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  max-width: 80%;
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}
.teach-ai__line.is-turn:not(:first-child)[b-5u0riw8dok] { margin-top: var(--spacing-md); }
.teach-ai__line.is-agent[b-5u0riw8dok] { align-self: flex-start; max-width: 88%; }
.teach-ai__line.is-person[b-5u0riw8dok] { flex-direction: column; gap: var(--spacing-2xs); align-items: flex-end; align-self: flex-end; }
/* The agent's avatar: the orb, still, at the start of each of its turns;
   its later messages keep the same indent. */
.teach-ai__line[b-5u0riw8dok]  .teach-ai__avatar { flex: none; --ds-voice-orb-size: var(--ds-teach-ai-avatar); }
.teach-ai__avatar-space[b-5u0riw8dok] { flex: none; width: var(--ds-teach-ai-avatar); }
/* A form from the AI takes the thread's width beside the orb: its questions need the room a bubble does not. */
.teach-ai__line.teach-ai__form-line[b-5u0riw8dok] { width: 88%; }
.teach-ai__form-line[b-5u0riw8dok]  .questionnaire,
.teach-ai__form-line[b-5u0riw8dok]  .questionnaire-form { flex: 1; }
.teach-ai__bubble[b-5u0riw8dok] {
  min-width: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-radius-2xl);
}
.teach-ai__bubble[b-5u0riw8dok]  p { margin: 0; }
/* The Inbox's colours, so a conversation looks the same across the product:
   the AI's messages in the soft brand tint, the person's own in solid brand. */
.teach-ai__line.is-agent .teach-ai__bubble[b-5u0riw8dok] {
  color: var(--colors-text-secondary);
  background: var(--colors-accent-brand-subtle);
  border: var(--ds-hairline) solid var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-sm) var(--radius-radius-2xl) var(--radius-radius-2xl) var(--radius-radius-2xl);
}
.teach-ai__line.is-person .teach-ai__bubble[b-5u0riw8dok] {
  color: var(--colors-brand-primary-foreground);
  background: var(--colors-brand-primary);
  border: var(--ds-hairline) solid var(--colors-brand-primary);
  border-radius: var(--radius-radius-2xl) var(--radius-radius-sm) var(--radius-radius-2xl) var(--radius-radius-2xl);
  transition: color var(--ds-teach-ai-motion) var(--ds-teach-ai-ease), background-color var(--ds-teach-ai-motion) var(--ds-teach-ai-ease), border-color var(--ds-teach-ai-motion) var(--ds-teach-ai-ease);
}

/* What was found: one card, an item per row, each under what it is about
   and where it came from. Read once, here; the agent's words frame it. */
.teach-ai__evidence[b-5u0riw8dok] {
  display: grid;
  margin: var(--spacing-sm) 0 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-md) var(--colors-surface-shadow-diffuse);
}
.teach-ai__evidence-item[b-5u0riw8dok] { display: grid; gap: var(--spacing-2xs); padding: var(--spacing-sm) var(--spacing-md); }
.teach-ai__evidence-item + .teach-ai__evidence-item[b-5u0riw8dok] { border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.teach-ai__evidence[b-5u0riw8dok]  p { margin: 0; color: var(--colors-text-primary); }
/* The checkpoint's states: confirmed (a tick, two lines at most: the summary
   has the rest), found but unchecked ("I think…"), and still to ask. */
.teach-ai__evidence-item.is-confirmed[b-5u0riw8dok]  .teach-ai__evidence-state { color: var(--colors-text-success); }
.teach-ai__evidence-item.is-confirmed[b-5u0riw8dok]  p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.teach-ai__evidence-item.is-unsure[b-5u0riw8dok]  p { color: var(--colors-text-secondary); }
.teach-ai__evidence-item.is-open[b-5u0riw8dok]  p { color: var(--colors-text-muted); font-style: italic; }
.teach-ai__bubble[b-5u0riw8dok]  .teach-ai__then { margin-top: var(--spacing-sm); }

/* A voice note in your bubble: the player in the bubble's own ink, then what
   was heard, smaller, as a transcript. */
.teach-ai__line.is-person .teach-ai__bubble[b-5u0riw8dok]  .teach-ai__note {
  --ds-voice-note-ink: var(--colors-brand-primary-foreground);
  min-width: var(--ds-teach-ai-note);
}
.teach-ai__bubble[b-5u0riw8dok]  .teach-ai__transcript { margin-top: var(--spacing-xs); }

/* Under your words: what it understood, a sentence per topic, each value a
   chip to tap and correct. Saved already; fixing is a tap. */
.teach-ai__noted[b-5u0riw8dok] {
  display: grid;
  gap: var(--spacing-xs);
  width: min(var(--ds-teach-ai-noted), 100%);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-md) var(--colors-surface-shadow-diffuse);
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}
.teach-ai__noted-head[b-5u0riw8dok] { display: flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-success); }
.teach-ai__noted ul[b-5u0riw8dok] { display: grid; gap: var(--spacing-sm); margin: 0; padding: 0; list-style: none; }
.teach-ai__noted-row[b-5u0riw8dok] { display: grid; gap: var(--spacing-2xs); }
.teach-ai__noted-row[b-5u0riw8dok]  .teach-ai__noted-topic { color: var(--colors-text-muted); }
.teach-ai__noted-row[b-5u0riw8dok]  .teach-ai__noted-text { margin: 0; color: var(--colors-text-primary); }

/* Editing a message, as in other AI chats: the actions show when you point
   at your message (or tab to them); editing opens the whole message in place,
   across the column. */
.teach-ai__sent[b-5u0riw8dok] { display: flex; gap: var(--spacing-xs); align-items: center; justify-content: flex-end; max-width: 100%; }
.teach-ai__sent .teach-ai__bubble[b-5u0riw8dok] { min-width: 0; }
.teach-ai__message-actions[b-5u0riw8dok] {
  display: flex;
  flex: none;
  opacity: 0;
  transition: opacity var(--ds-teach-ai-quick) ease;
}
.teach-ai__line.is-person:hover .teach-ai__message-actions[b-5u0riw8dok],
.teach-ai__line.is-person:focus-within .teach-ai__message-actions[b-5u0riw8dok] { opacity: 1; }
.teach-ai__line.is-person.is-editing[b-5u0riw8dok] { align-self: stretch; max-width: 100%; }
.teach-ai__edit[b-5u0riw8dok] {
  display: grid;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-accent-brand-border);
  border-radius: var(--radius-radius-2xl);
}
.teach-ai__edit-actions[b-5u0riw8dok] { display: flex; gap: var(--spacing-xs); justify-content: flex-end; }

/* The voice note being recorded takes the text box's place in the dock. */
.teach-ai__composer[b-5u0riw8dok]  .teach-ai__recording { min-height: var(--ds-text-area-plain-min-height, var(--spacing-4xl)); }

/* Under your words: topics kept as they were found. */
.teach-ai__saved[b-5u0riw8dok] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: flex-end;
  color: var(--colors-text-success);
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}
.teach-ai__saved[b-5u0riw8dok]  .teach-ai__saved-topic {
  padding: 0 var(--spacing-xs);
  color: var(--colors-text-secondary);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-full);
}
.teach-ai__evidence-source[b-5u0riw8dok] { display: inline-flex; gap: var(--spacing-xs); align-items: center; color: var(--colors-text-muted); }
.teach-ai__evidence-source[b-5u0riw8dok]  .ds-icon { color: var(--colors-icon-secondary); }

/* The agent's newest line arriving. Spoken: each word shows as the voice
   reaches it (voice.js marks it data-on). Typed: the words fade in one after
   another at reading pace. Hidden words keep their room, so the bubble is its
   full size from the start and nothing below it shifts. */
.teach-ai__bubble.is-streaming[b-5u0riw8dok]  .teach-ai__word { transition: opacity var(--ds-teach-ai-word) ease-out; }
.teach-ai__bubble.is-streaming[b-5u0riw8dok]  .teach-ai__word:not([data-on]) { opacity: 0; }
.teach-ai__bubble.is-typing[b-5u0riw8dok]  .teach-ai__word {
  animation: teach-ai-word-b-5u0riw8dok var(--ds-teach-ai-word) ease-out both;
  animation-delay: calc(var(--at) * var(--type, var(--ds-teach-ai-type)));
}

/* Words still arriving as the person speaks: lighter, with a caret. When
   they are sent, the same bubble settles into a normal message. */
.teach-ai__line.is-live .teach-ai__bubble[b-5u0riw8dok] {
  color: var(--colors-text-secondary);
  background: transparent;
  border: var(--ds-hairline) dashed var(--colors-accent-brand-border);
}
.teach-ai__caret[b-5u0riw8dok] {
  display: inline-block;
  width: var(--spacing-2xs);
  height: var(--ds-teach-ai-caret);
  margin-left: var(--spacing-2xs);
  vertical-align: text-bottom;
  background: var(--colors-brand-primary);
  animation: teach-ai-pulse-b-5u0riw8dok var(--ds-teach-ai-pulse) steps(2) infinite;
}
.teach-ai__bubble[b-5u0riw8dok]  .teach-ai__note-tag {
  display: inline-flex;
  gap: var(--spacing-2xs);
  align-items: center;
  margin-bottom: var(--spacing-2xs);
  opacity: 0.8;
}
.teach-ai__bubble.is-thinking[b-5u0riw8dok] { display: flex; gap: var(--spacing-xs); align-items: center; padding-block: var(--spacing-md); }
.teach-ai__bubble.is-thinking span[b-5u0riw8dok] {
  width: var(--spacing-xs);
  height: var(--spacing-xs);
  background: var(--colors-icon-muted);
  border-radius: var(--radius-radius-full);
  animation: teach-ai-dot-b-5u0riw8dok var(--ds-teach-ai-pulse) ease-in-out infinite;
}
.teach-ai__bubble.is-thinking span:nth-child(2)[b-5u0riw8dok] { animation-delay: calc(var(--ds-teach-ai-pulse) / 6); }
.teach-ai__bubble.is-thinking span:nth-child(3)[b-5u0riw8dok] { animation-delay: calc(var(--ds-teach-ai-pulse) / 3); }

.teach-ai__composer[b-5u0riw8dok] {
  display: grid;
  gap: var(--spacing-sm);
  width: 100%;
}
.teach-ai__composer[b-5u0riw8dok]  .teach-ai__answer-field {
  /* The text-area component has no compact conversation min/max height tokens. */
  --ds-text-area-plain-min-height: 64px;
  --ds-text-area-plain-max-height: 168px;
  padding: var(--spacing-sm);
  color: var(--colors-text-primary);
  line-height: var(--typography-leading-leading-lg);
}
.teach-ai__composer-footer[b-5u0riw8dok] { display: flex; gap: var(--spacing-sm); align-items: center; }
.teach-ai__composer-tools[b-5u0riw8dok] { display: flex; flex: 1; gap: var(--spacing-2xs); align-items: center; }
/* Files waiting to be sent, in a row above what is being typed. */
.teach-ai__attachments[b-5u0riw8dok] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 0;
  padding: var(--spacing-2xs) var(--spacing-2xs) 0;
  list-style: none;
}
.teach-ai__attachment[b-5u0riw8dok] {
  display: flex;
  gap: var(--spacing-2xs);
  align-items: center;
  max-width: 100%;
  padding: var(--spacing-2xs);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

/* A file: a picture's thumbnail, or its type, name and size. */
.teach-ai__file[b-5u0riw8dok] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  min-width: 0;
  max-width: var(--ds-teach-ai-file-width);
}
.teach-ai__file-thumb[b-5u0riw8dok] {
  display: block;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  object-fit: cover;
  border-radius: var(--radius-radius-md);
}
.teach-ai__file-icon[b-5u0riw8dok] {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  color: var(--colors-icon-brand);
  background: var(--colors-surface-popover);
  border-radius: var(--radius-radius-md);
}
.teach-ai__file.is-pdf .teach-ai__file-icon[b-5u0riw8dok] { color: var(--colors-accent-red-text); }
.teach-ai__file.is-document .teach-ai__file-icon[b-5u0riw8dok] { color: var(--colors-accent-blue-text); }
.teach-ai__file.is-sheet .teach-ai__file-icon[b-5u0riw8dok] { color: var(--colors-accent-green-text); }
.teach-ai__file-text[b-5u0riw8dok] { display: grid; gap: var(--spacing-2xs); min-width: 0; padding-right: var(--spacing-xs); }
.teach-ai__file-text[b-5u0riw8dok]  span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.teach-ai__file-text[b-5u0riw8dok]  .teach-ai__file-name { color: var(--colors-text-primary); }
.teach-ai__file-text[b-5u0riw8dok]  .teach-ai__file-size { color: var(--colors-text-muted); }

/* Files sent in a message, above its words. */
.teach-ai__line-files[b-5u0riw8dok] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: flex-start;
  margin: 0 0 var(--spacing-xs);
  padding: 0;
  list-style: none;
}
.teach-ai__line-files:last-child[b-5u0riw8dok] { margin-bottom: 0; }
.teach-ai__line-files > li[b-5u0riw8dok] {
  padding: var(--spacing-2xs);
  background: var(--colors-surface-popover);
  border-radius: var(--radius-radius-lg);
}
.teach-ai__line-files .teach-ai__file-thumb[b-5u0riw8dok] { width: var(--ds-teach-ai-file-thumb); height: var(--ds-teach-ai-file-thumb); }
.teach-ai__line-files.is-summary > li[b-5u0riw8dok] { background: var(--colors-surface-muted); }

/* ── Summary ─────────────────────────────────────────────────────────────── */
.teach-ai__summary[b-5u0riw8dok] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--spacing-xl);
  width: min(var(--ds-teach-ai-measure), 100%);
  min-height: 100%;
  margin-inline: auto;
  animation: teach-ai-rise-b-5u0riw8dok var(--ds-teach-ai-motion) var(--ds-teach-ai-ease) both;
}
.teach-ai__summary-head[b-5u0riw8dok] { display: grid; gap: var(--spacing-xs); }
.teach-ai__summary-head[b-5u0riw8dok]  :is(h3, p) { margin: 0; }
.teach-ai__summary-head[b-5u0riw8dok]  p { color: var(--colors-text-muted); }
.teach-ai__facts[b-5u0riw8dok] { display: grid; gap: var(--spacing-sm); margin: 0; padding: 0; list-style: none; }
.teach-ai__fact[b-5u0riw8dok] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: start;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.teach-ai__fact.is-skipped[b-5u0riw8dok] { background: transparent; border-style: dashed; }
.teach-ai__fact-icon[b-5u0riw8dok] {
  display: grid;
  place-items: center;
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  color: var(--colors-brand-primary);
  background: var(--colors-accent-brand-muted);
  border-radius: var(--radius-radius-full);
}
.teach-ai__fact.is-skipped .teach-ai__fact-icon[b-5u0riw8dok] { color: var(--colors-icon-muted); background: var(--colors-surface-muted); }
.teach-ai__fact-body[b-5u0riw8dok] { display: grid; gap: var(--spacing-xs); min-width: 0; }
.teach-ai__fact-body[b-5u0riw8dok]  p { margin: 0; }
.teach-ai__fact-body[b-5u0riw8dok]  strong { color: var(--colors-text-muted); }
.teach-ai__fact-body[b-5u0riw8dok]  .teach-ai__fact-source,
.teach-ai__fact-body[b-5u0riw8dok]  .teach-ai__fact-missing { color: var(--colors-text-muted); }
.teach-ai__fact-actions[b-5u0riw8dok] { display: flex; gap: var(--spacing-xs); }
.teach-ai__fact-source-row[b-5u0riw8dok] { display: inline-flex; gap: var(--spacing-2xs); align-items: center; }


/* Approve stays in reach however long the list is. */
/* Pinned to the foot of the panel, covering the stage's own bottom padding
   too, so nothing shows beneath it; the fade lets what scrolls under it go
   softly. */
.teach-ai__approve[b-5u0riw8dok] {
  position: sticky;
  bottom: calc(var(--spacing-xl) * -1);
  align-self: end;
  margin-bottom: calc(var(--spacing-xl) * -1);
  padding-block: var(--spacing-xl);
  background: linear-gradient(transparent, var(--colors-surface-popover) var(--spacing-xl));
}

.teach-ai__done[b-5u0riw8dok]  p { margin: 0; }
.teach-ai__done[b-5u0riw8dok]  p + p { color: var(--colors-text-muted); }

/* Smaller desktop windows retain the same hierarchy without clipping controls. */
@media (max-width: 1180px) {
  .teach-ai[b-5u0riw8dok] { padding: var(--spacing-md); }
  .teach-ai__shell.is-expanded .teach-ai__panel[b-5u0riw8dok] {
    height: calc(100dvh - 2 * var(--spacing-md));
  }
  .teach-ai__bar[b-5u0riw8dok] {
    grid-template-columns: minmax(0, 1fr) auto;
    /* Still clear of the close button, which keeps its corner. */
    padding-inline: var(--spacing-lg) calc(var(--spacing-lg) + var(--spacing-3xl) + var(--spacing-sm));
  }
  .teach-ai__bar[b-5u0riw8dok]  .teach-ai__close { grid-column: 2; grid-row: 1; }
  .teach-ai__topics[b-5u0riw8dok] { padding-inline: var(--spacing-lg); }
  .teach-ai__stage[b-5u0riw8dok] { padding-inline: var(--spacing-md); }
}

/* Short windows (small laptops, a tablet or phone on its side): everything
   around the conversation gets more compact, so the conversation keeps the
   room and nothing is pushed off the bottom. The orb at the start shrinks
   with the height, so Talk and Type stay in view. */
@media (max-height: 760px) {
  .teach-ai[b-5u0riw8dok] { padding: var(--spacing-md); }
  .teach-ai__shell.is-expanded .teach-ai__panel[b-5u0riw8dok] { height: calc(100dvh - 2 * var(--spacing-md)); }
  .teach-ai__shell.is-compact .teach-ai__panel[b-5u0riw8dok] { max-height: calc(100dvh - 2 * var(--spacing-md)); }
  .teach-ai__bar[b-5u0riw8dok] { padding-block: var(--spacing-lg) var(--spacing-sm); }
  .teach-ai__bar[b-5u0riw8dok]  .teach-ai__close { top: var(--spacing-md); }
  .teach-ai__topics[b-5u0riw8dok] { padding-bottom: var(--spacing-xs); }
  .teach-ai__stage[b-5u0riw8dok] { padding-bottom: var(--spacing-md); }
  .teach-ai__hello[b-5u0riw8dok] { gap: var(--spacing-md); padding-block: var(--spacing-md); }
  .teach-ai[b-5u0riw8dok] {
    /* Gaps in the token set, as above: the compact orb and box heights. */
    --ds-teach-ai-hello-orb: 120px;
    --ds-teach-ai-dock-min: 104px;
  }
}

@media (max-height: 560px) {
  .teach-ai__heading[b-5u0riw8dok]  span { display: none; }
  .teach-ai__hello[b-5u0riw8dok] { gap: var(--spacing-sm); padding-block: var(--spacing-xs); }
  .teach-ai__hello-copy[b-5u0riw8dok] { margin-top: 0; }
  .teach-ai[b-5u0riw8dok] {
    /* Gaps in the token set, as above: the smallest orb and box heights. */
    --ds-teach-ai-hello-orb: 72px;
    --ds-teach-ai-dock-min: 88px;
  }
}

@keyframes teach-ai-orb-spin-b-5u0riw8dok {
  to { transform: rotate(1turn); }
}
@keyframes teach-ai-word-b-5u0riw8dok {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes teach-ai-in-b-5u0riw8dok {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes teach-ai-rise-b-5u0riw8dok {
  from { opacity: 0; transform: translateY(var(--spacing-sm)); }
  to { opacity: 1; transform: none; }
}
@keyframes teach-ai-dot-b-5u0riw8dok {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(calc(var(--spacing-2xs) * -1)); }
}
@keyframes teach-ai-pulse-b-5u0riw8dok {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes teach-ai-wave-b-5u0riw8dok {
  0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes teach-ai-breathe-b-5u0riw8dok {
  0%, 100% { transform: scale(0.94); opacity: 0.72; }
  50% { transform: scale(1.04); opacity: 1; }
}
/* The agent's typing dots: Figma draws them at 35%; they rise to full in turn. */
@keyframes teach-ai-typing-b-5u0riw8dok {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 0.9; transform: translateY(calc(var(--spacing-2xs) * -1)); }
}
@keyframes teach-ai-float-b-5u0riw8dok {
  0%, 100% { transform: translateY(var(--spacing-2xs)); }
  50% { transform: translateY(calc(var(--spacing-2xs) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .teach-ai[b-5u0riw8dok],
  .teach-ai[b-5u0riw8dok]::before,
  .teach-ai__panel[b-5u0riw8dok],
  .teach-ai__centre[b-5u0riw8dok],
  .teach-ai__line[b-5u0riw8dok],
  .teach-ai__summary[b-5u0riw8dok],
  .teach-ai__replies.is-chips:not(.is-waiting)[b-5u0riw8dok],
  .teach-ai__saved[b-5u0riw8dok],
  .teach-ai__noted[b-5u0riw8dok],
  .teach-ai__bubble.is-thinking span[b-5u0riw8dok],
  .teach-ai__caret[b-5u0riw8dok],
  .teach-ai__bubble.is-typing[b-5u0riw8dok]  .teach-ai__word { animation: none; }
  .teach-ai__topics[b-5u0riw8dok]  .teach-ai__tile::before,
  .teach-ai__message-actions[b-5u0riw8dok] { transition: none; }
  /* The words are simply there. */
  .teach-ai__bubble.is-streaming[b-5u0riw8dok]  .teach-ai__word,
  .teach-ai__bubble.is-streaming[b-5u0riw8dok]  .teach-ai__word:not([data-on]) { opacity: 1; transition: none; }
}
/* /Components/Pages/Dashboard/Team/InviteModal.razor.rz.scp.css */
/* The invitation form inside the dialog, one field per row, with the
   permissions in a muted well beneath — the same well Aurora's ProductEditor
   uses for its publish toggle. */

[b-x5n59jxx7p] .invite__lede { margin: var(--spacing-none); color: var(--colors-text-muted); }

.invite__form[b-x5n59jxx7p] {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.invite__permissions[b-x5n59jxx7p] {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.invite__permissions[b-x5n59jxx7p]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }
[b-x5n59jxx7p] .invite__placeholder { margin: var(--spacing-none); color: var(--colors-text-muted); }

.invite__permission-list[b-x5n59jxx7p] {
  display: grid;
  gap: var(--spacing-sm);
}

/* One well per workspace the person is given access to. */
.invite__grant-head[b-x5n59jxx7p] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.invite__grant-head[b-x5n59jxx7p] >  :first-child { flex: 1 1 auto; min-width: 0; }

.invite__add[b-x5n59jxx7p] {
  display: flex;
  margin-top: var(--spacing-lg);
}

/* The chosen role's permissions: read here, changed under Roles. */
.invite__role-permissions[b-x5n59jxx7p] {
  display: grid;
  gap: var(--spacing-xs);
  margin: var(--spacing-none);
  padding-left: var(--spacing-lg);
  color: var(--colors-text-secondary);
}
/* /Components/Pages/Dashboard/Team/RoleEditor.razor.rz.scp.css */
/* The role editor: the invite dialog's form and well, for a name and its permissions. */

[b-yu1vbi9rvp] .invite__lede { margin: var(--spacing-none); color: var(--colors-text-muted); }

.invite__form[b-yu1vbi9rvp] {
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.invite__permissions[b-yu1vbi9rvp] {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-lg);
}

.invite__permissions[b-yu1vbi9rvp]  h3 { margin: var(--spacing-none); color: var(--colors-text-primary); }

.invite__permission-list[b-yu1vbi9rvp] {
  display: grid;
  gap: var(--spacing-sm);
}
/* /Components/Pages/Dashboard/Team/Team.razor.rz.scp.css */
/* The team list. Same frame as Aurora's Products page: content capped at
   1440 and centred, a fluid gutter, a grid table with fixed middle columns. */

.team[b-u2sipz33ca] {
  padding: var(--spacing-4xl) var(--ds-team-gutter) var(--spacing-5xl);
}

.team > *[b-u2sipz33ca] {
  width: min(var(--ds-team-max), 100%);
  margin-inline: auto;
}

.team[b-u2sipz33ca] {
  /* Gaps in the token set: no page-gutter, content-width or border-width
     scale. The gutter and cap are Aurora's Products page's. */
  --ds-team-gutter: clamp(28px, 4vw, 66px);
  --ds-team-max: 1440px;
  --ds-team-hairline: 1px;
  --ds-team-measure: 650px;
  --ds-team-col-name: 220px;
  --ds-team-col-role: 200px;
  --ds-team-col-status: 160px;
  --ds-team-col-actions: 40px;
  --ds-team-head-min: 45px;
  --ds-team-row-min: 64px;
}

.team__header[b-u2sipz33ca] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-4xl);
  margin-bottom: var(--spacing-2xl);
}

.team__heading[b-u2sipz33ca] { display: grid; gap: var(--spacing-sm); }
[b-u2sipz33ca] .team__lede { max-width: var(--ds-team-measure); color: var(--colors-text-muted); }

.team__actions[b-u2sipz33ca] {
  display: flex;
  flex: 0 0 auto;
  gap: var(--spacing-sm);
  align-items: center;
}

.team__table-wrap[b-u2sipz33ca] {
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-team-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
  box-shadow: 0 var(--spacing-sm) var(--spacing-2xl) var(--colors-surface-shadow-diffuse);
}

.team__table-head[b-u2sipz33ca],
.team-row[b-u2sipz33ca] {
  display: grid;
  grid-template-columns:
    minmax(var(--ds-team-col-name), 1.2fr)
    minmax(0, 1.2fr)
    minmax(var(--ds-team-col-role), 1.6fr)
    var(--ds-team-col-status)
    var(--ds-team-col-actions);
  gap: var(--spacing-md);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
}

.team__table-head[b-u2sipz33ca] {
  min-height: var(--ds-team-head-min);
  color: var(--colors-text-muted);
  background: var(--colors-surface-background);
  border-bottom: var(--ds-team-hairline) solid var(--colors-surface-border);
}

.team-row[b-u2sipz33ca] {
  min-height: var(--ds-team-row-min);
  background: var(--colors-surface-card);
}

.team-row + .team-row[b-u2sipz33ca] { border-top: var(--ds-team-hairline) solid var(--colors-surface-border); }
.team-row:hover[b-u2sipz33ca] { background: var(--colors-interaction-hover); }

.team-row__name[b-u2sipz33ca] { display: flex; gap: var(--spacing-sm); align-items: center; min-width: 0; }
.team-row__name[b-u2sipz33ca]  strong { overflow: hidden; color: var(--colors-text-secondary); white-space: nowrap; text-overflow: ellipsis; }
[b-u2sipz33ca] .team-row__email { overflow: hidden; color: var(--colors-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.team-row__role[b-u2sipz33ca],
.team-row__status[b-u2sipz33ca] { display: flex; }
[b-u2sipz33ca] .team-row__access { color: var(--colors-text-secondary); }
.team-row__actions[b-u2sipz33ca] { display: flex; justify-content: flex-end; }

/* Narrow screens: name and status on top, email and access beneath. */
@media (max-width: 760px) {
  .team__table-head[b-u2sipz33ca] { display: none; }
  .team-row[b-u2sipz33ca] { grid-template-columns: minmax(0, 1fr) auto auto; }
  [b-u2sipz33ca] .team-row__email,
  [b-u2sipz33ca] .team-row__access { grid-column: 1 / -1; }
}

/* The Roles section sits under the team table. */
.team__header--section[b-u2sipz33ca] { margin-top: var(--spacing-4xl); }

.team-row--role[b-u2sipz33ca] {
  grid-template-columns:
    minmax(var(--ds-team-col-name), 1.2fr)
    var(--ds-team-col-status)
    minmax(0, 2fr)
    var(--ds-team-col-status)
    var(--ds-team-col-actions);
}
/* /Components/Pages/Dashboard/Tools/AgentTools.razor.rz.scp.css */
/* What it can do with the business's tools: the same white card and row rhythm as the switches above it (rows at
   least 72px, 20px inside, a hairline between), a tool's mark first and its switch last. */
.agent-tools[b-s1u9l0ytaf] {
  /* Gap in the token set: no row height or control measure for a settings row. */
  --ds-agent-tools-row: 72px;
  --ds-agent-tools-control: 240px;

  display: grid;
  gap: var(--spacing-md);
  min-width: 0;
}
.agent-tools[b-s1u9l0ytaf]  .agent-tools__label { margin: var(--spacing-md) var(--spacing-none) var(--spacing-none); color: var(--colors-text-muted); }
.agent-tools__card[b-s1u9l0ytaf] {
  display: grid;
  overflow: hidden;
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
  outline: none;
}
.agent-tools__item + .agent-tools__item[b-s1u9l0ytaf] { border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.agent-tools__row[b-s1u9l0ytaf] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--spacing-lg);
  align-items: center;
  min-height: var(--ds-agent-tools-row);
  padding: var(--spacing-lg) var(--spacing-xl);
}
.agent-tools__row.is-empty[b-s1u9l0ytaf] { grid-template-columns: minmax(0, 1fr) auto; }
.agent-tools__words[b-s1u9l0ytaf] { display: grid; gap: var(--spacing-xs); min-width: 0; overflow-wrap: anywhere; }
.agent-tools__words[b-s1u9l0ytaf]  strong { color: var(--colors-text-primary); }
.agent-tools__words[b-s1u9l0ytaf]  span { color: var(--colors-text-muted); }
/* The one choice for a tool that acts, beside its switch. */
.agent-tools__mode[b-s1u9l0ytaf] { width: var(--ds-agent-tools-control); }
.agent-tools[b-s1u9l0ytaf]  .agent-tools__more { justify-self: end; }

/* Narrow: the choice drops under the tool's name, full width. */
@media (max-width: 760px) {
  .agent-tools__row[b-s1u9l0ytaf] { grid-template-columns: auto minmax(0, 1fr) auto; }
  .agent-tools__mode[b-s1u9l0ytaf] { grid-column: 2 / -1; grid-row: 2; width: auto; }
  .agent-tools__no-mode[b-s1u9l0ytaf] { display: none; }
}
/* /Components/Pages/Dashboard/Tools/ToolAccessDialog.razor.rz.scp.css */
.tool-access[b-x50azlp263] { display: grid; gap: var(--spacing-xl); min-width: 0; outline: none; }
.tool-access[b-x50azlp263]  p { margin: var(--spacing-none); }
.tool-access__account[b-x50azlp263] { display: grid; gap: var(--spacing-xs); padding: var(--spacing-lg); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-xl); overflow-wrap: anywhere; }
.tool-access__account[b-x50azlp263] >  p:last-child { color: var(--colors-text-muted); }
.tool-access__choices[b-x50azlp263] { display: grid; gap: var(--spacing-lg); }
.tool-access[b-x50azlp263] >  p { color: var(--colors-text-secondary); }
.tool-access[b-x50azlp263]  .tool-access__muted { color: var(--colors-text-muted); }

/* Who can use it: an agent a row, the whole row the choice: face, name with its job under it, tick on the right. */
.tool-access__agents[b-x50azlp263] { display: grid; gap: var(--spacing-sm); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.tool-access__agents[b-x50azlp263]  .tool-access__agent {
  /* Gaps in the token set: no avatar size beside a name in a list, and no tick-box size. */
  --ds-tool-access-face: 36px;
  --ds-tool-access-tick: 22px;

  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  text-align: left;
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}
.tool-access__agents[b-x50azlp263]  .tool-access__agent.is-on { background: var(--colors-accent-brand-subtle); }
.tool-access__agents[b-x50azlp263]  .tool-access__face { flex: none; width: var(--ds-tool-access-face); height: var(--ds-tool-access-face); border-radius: var(--radius-radius-full); object-fit: cover; }
.tool-access__agents[b-x50azlp263]  .tool-access__who { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; }
.tool-access__agents[b-x50azlp263]  .tool-access__who > span:first-child { color: var(--colors-text-primary); }
.tool-access__agents[b-x50azlp263]  .tool-access__who > span:last-child:not(:first-child) { color: var(--colors-text-muted); }
.tool-access__agents[b-x50azlp263]  .tool-access__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ds-tool-access-tick);
  height: var(--ds-tool-access-tick);
  color: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-sm);
  background: var(--colors-surface-card);
}
.tool-access__agents[b-x50azlp263]  .tool-access__agent.is-on .tool-access__tick { background: var(--colors-brand-primary); border-color: var(--colors-brand-primary); }
/* /Components/Pages/Dashboard/Tools/ToolConnectionDialog.razor.rz.scp.css */
.tool-dialog[b-gipwbm1wzo] { display: grid; gap: var(--spacing-xl); min-width: 0; outline: none; }
.tool-dialog[b-gipwbm1wzo]  h3, .tool-dialog[b-gipwbm1wzo]  h4, .tool-dialog[b-gipwbm1wzo]  p { margin: var(--spacing-none); }
.tool-dialog[b-gipwbm1wzo]  h3, .tool-dialog[b-gipwbm1wzo]  h4 { color: var(--colors-text-primary); }
.tool-dialog[b-gipwbm1wzo]  .tool-dialog__notice { display: flex; align-items: start; gap: var(--spacing-md); padding: var(--spacing-lg); background: var(--colors-accent-brand-subtle); border-radius: var(--radius-radius-xl); }
.tool-dialog[b-gipwbm1wzo]  .tool-dialog__notice > svg { flex: 0 0 auto; color: var(--colors-brand-primary); margin-top: var(--spacing-2xs); }
.tool-dialog[b-gipwbm1wzo]  .tool-dialog__notice > div { display: grid; gap: var(--spacing-xs); }
.tool-dialog__authorize[b-gipwbm1wzo] { display: grid; justify-items: center; text-align: center; gap: var(--spacing-md); padding-block: var(--spacing-xl); }
.tool-dialog__authorize-icon[b-gipwbm1wzo] { padding: var(--spacing-lg); border-radius: var(--radius-radius-full); color: var(--colors-brand-primary); background: var(--colors-accent-brand-subtle); }
.tool-dialog__facts[b-gipwbm1wzo] { display: grid; gap: var(--spacing-md); margin: var(--spacing-none); }
.tool-dialog__facts > div[b-gipwbm1wzo] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--spacing-lg); align-items: start; padding-bottom: var(--spacing-md); border-bottom: var(--ds-hairline) solid var(--colors-surface-border); }
.tool-dialog__facts dt[b-gipwbm1wzo] { color: var(--colors-text-muted); }
.tool-dialog__facts dd[b-gipwbm1wzo] { margin: var(--spacing-none); color: var(--colors-text-primary); overflow-wrap: anywhere; }
/* Inside the provider's stand-in window: who is signed in, and what yára asks to allow. */
.tool-dialog__provider-account[b-gipwbm1wzo] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--colors-text-secondary);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.tool-dialog__provider-scopes[b-gipwbm1wzo] { display: grid; gap: var(--spacing-sm); color: var(--colors-text-secondary); }
.tool-dialog__provider-scopes ul[b-gipwbm1wzo] { display: grid; gap: var(--spacing-sm); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.tool-dialog__provider-scopes li[b-gipwbm1wzo] { display: flex; gap: var(--spacing-sm); align-items: start; }
.tool-dialog__provider-scopes li[b-gipwbm1wzo]  svg { flex: 0 0 auto; color: var(--colors-feedback-success-text); }
/* Back from the provider: each moment of loading, then placeholders where the choices will be. */
.tool-dialog__loading[b-gipwbm1wzo] { display: grid; gap: var(--spacing-md); }
.tool-dialog__phase[b-gipwbm1wzo] { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--colors-text-primary); }
.tool-dialog__phase[b-gipwbm1wzo]  .ds-icon { flex: none; color: var(--colors-icon-brand); animation: tool-dialog-spin-b-gipwbm1wzo var(--ds-tool-spin) linear infinite; }
.tool-dialog__phase.is-done[b-gipwbm1wzo]  .ds-icon { color: var(--colors-feedback-success-text); animation: none; }
.tool-dialog__phase.is-waiting[b-gipwbm1wzo] { color: var(--colors-text-muted); }
.tool-dialog__phase.is-waiting[b-gipwbm1wzo]  .ds-icon { color: var(--colors-text-muted); animation: none; }
.tool-dialog__placeholders[b-gipwbm1wzo] { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
@keyframes tool-dialog-spin-b-gipwbm1wzo { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tool-dialog__phase[b-gipwbm1wzo]  .ds-icon { animation: none; } }

/* Connected, first: the mark, the account, and a way to use another. A quiet surface, so it reads in both themes;
   only the tick is green. */
.tool-dialog__connected[b-gipwbm1wzo] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--colors-surface-muted);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.tool-dialog__connected > div[b-gipwbm1wzo] { display: grid; flex: 1; gap: var(--spacing-2xs); min-width: 0; overflow-wrap: anywhere; }
.tool-dialog__connected[b-gipwbm1wzo] { align-items: flex-start; }
.tool-dialog__connected > .tool-dialog__tick[b-gipwbm1wzo] { display: grid; place-items: center; flex: none; padding-top: var(--spacing-2xs); color: var(--colors-feedback-success-text); }
.tool-dialog__connected > div[b-gipwbm1wzo] >  p:first-child { color: var(--colors-text-primary); }
.tool-dialog__connected[b-gipwbm1wzo] >  button { align-self: center; }
.tool-dialog__connected > div[b-gipwbm1wzo] >  p:last-child { color: var(--colors-text-muted); }

/* Calendly's services: a row each, its labels on the right, a count and Select all above. */
.tool-dialog[b-gipwbm1wzo]  .calendly-services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); }
.tool-dialog[b-gipwbm1wzo]  .calendly-services__head > div { display: grid; gap: var(--spacing-2xs); }
.tool-dialog[b-gipwbm1wzo]  .calendly-services__head p { color: var(--colors-text-muted); }
.tool-dialog[b-gipwbm1wzo]  .calendly-services__list { display: grid; gap: var(--spacing-sm); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.tool-dialog[b-gipwbm1wzo]  .calendly-services__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-xl);
}
.tool-dialog[b-gipwbm1wzo]  .calendly-services__row.is-on { background: var(--colors-accent-brand-subtle); border-color: transparent; }

/* Who can use it: the agent, chosen in the same window, the last thing before Finish. */
.tool-dialog[b-gipwbm1wzo]  .tool-dialog__who { display: grid; gap: var(--spacing-md); padding-top: var(--spacing-xl); border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.tool-dialog[b-gipwbm1wzo]  .tool-dialog__who > p { color: var(--colors-text-muted); }

/* The choices after signing in, from the per-tool parts (Calendly's services, the sheets):
   a heading, then its options, with the same rhythm as the agent-access choices. */
.tool-dialog[b-gipwbm1wzo] {
  /* Gap in the token set: no motion scale. */
  --ds-tool-spin: 900ms;
}
.tool-dialog[b-gipwbm1wzo]  .tool-choices { display: grid; gap: var(--spacing-md); min-width: 0; }
.tool-dialog[b-gipwbm1wzo]  .tool-choices__list { display: grid; gap: var(--spacing-lg); }
.tool-dialog[b-gipwbm1wzo]  .tool-choices > p { color: var(--colors-text-secondary); }
.tool-dialog__link[b-gipwbm1wzo] { width: max-content; color: var(--colors-brand-primary); }
/* Inside Google's stand-in file picker: one row per spreadsheet, the chosen one tinted. */
.tool-dialog__files[b-gipwbm1wzo] { display: grid; gap: var(--spacing-xs); }
.tool-dialog__files[b-gipwbm1wzo]  .tool-dialog__file { display: flex; gap: var(--spacing-md); align-items: center; width: 100%; padding: var(--spacing-md); text-align: left; border-radius: var(--radius-radius-lg); }
.tool-dialog__files[b-gipwbm1wzo]  .tool-dialog__file > span { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.tool-dialog__files[b-gipwbm1wzo]  .tool-dialog__file > span > span:last-child { color: var(--colors-text-muted); }
.tool-dialog__files[b-gipwbm1wzo]  .tool-dialog__file.is-picked { background: var(--colors-accent-brand-subtle); }

/* The sheets the agent checks: a card per sheet, a row per tab (muted when on), its columns as chips and a short
   preview of what the agent sees. */
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups { display: grid; gap: var(--spacing-lg); min-width: 0; }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__start { display: grid; justify-items: start; gap: var(--spacing-lg); padding: var(--spacing-xl); color: var(--colors-text-secondary); background: var(--colors-surface-muted); border-radius: var(--radius-radius-xl); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__sheet { display: grid; gap: var(--spacing-md); min-width: 0; padding: var(--spacing-lg); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-xl); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__sheet-head { display: flex; align-items: center; gap: var(--spacing-md); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__sheet-head > h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__tab { display: grid; gap: var(--spacing-lg); min-width: 0; padding: var(--spacing-lg); border-radius: var(--radius-radius-lg); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__tab.is-on { background: var(--colors-surface-muted); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__columns { display: grid; gap: var(--spacing-sm); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__columns > p { color: var(--colors-text-muted); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__columns > div { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.tool-dialog[b-gipwbm1wzo]  .sheet-lookups__add { justify-self: start; }

/* Manage: each part a heading with its one action on the right, then what it holds. */
.tool-dialog__section[b-gipwbm1wzo] { display: grid; gap: var(--spacing-lg); padding-top: var(--spacing-2xl); border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.tool-dialog__section-head[b-gipwbm1wzo] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); }
.tool-dialog__section-head > div[b-gipwbm1wzo] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.tool-dialog__section-head > div[b-gipwbm1wzo] >  p { color: var(--colors-text-muted); }
/* What it uses: a card each, roomy and spaced, with no lines between (designer, 2 November 2026). */
.tool-dialog__found[b-gipwbm1wzo] { display: grid; gap: var(--spacing-md); margin: var(--spacing-none); padding: var(--spacing-none); list-style: none; }
.tool-dialog__found li[b-gipwbm1wzo] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--spacing-2xl);
  background: var(--colors-surface-muted);
  border-radius: var(--radius-radius-xl);
}

/* Agents that can use it: face and name, side by side. */
.tool-dialog__people[b-gipwbm1wzo] {
  /* Gap in the token set: no avatar size beside a name in a list. */
  --ds-tool-person-face: 32px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}
.tool-dialog__people li[b-gipwbm1wzo] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-xs);
  color: var(--colors-text-primary);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-full);
}
.tool-dialog__people img[b-gipwbm1wzo] { width: var(--ds-tool-person-face); height: var(--ds-tool-person-face); border-radius: var(--radius-radius-full); object-fit: cover; }
.tool-dialog__found li[b-gipwbm1wzo] >  span:first-child { color: var(--colors-text-primary); }
.tool-dialog__found li[b-gipwbm1wzo] >  span:last-child { color: var(--colors-text-muted); white-space: nowrap; }

/* Disconnecting: a quiet red action, centred at the foot (designer, 2 November 2026); the confirm step says what happens. */
.tool-dialog__foot[b-gipwbm1wzo] { display: flex; justify-content: center; padding-top: var(--spacing-xl); border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.tool-dialog__foot[b-gipwbm1wzo]  .tool-dialog__disconnect { color: var(--colors-feedback-destructive-text); }
.tool-dialog__foot[b-gipwbm1wzo]  .tool-dialog__disconnect:hover:not(:disabled) { background: var(--colors-feedback-destructive-subtle); }

/* Kept for other windows: a red-outlined box. */
.tool-dialog__danger[b-gipwbm1wzo] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: var(--ds-hairline) solid var(--colors-feedback-destructive-border);
  border-radius: var(--radius-radius-xl);
}
.tool-dialog__danger > div[b-gipwbm1wzo] { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.tool-dialog__danger > div[b-gipwbm1wzo] >  p:first-child { color: var(--colors-text-primary); }
.tool-dialog__danger > div[b-gipwbm1wzo] >  p:last-child { color: var(--colors-text-muted); }
@media (max-width: 760px) {
  .tool-dialog__danger[b-gipwbm1wzo], .tool-dialog__section-head[b-gipwbm1wzo] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Dashboard/Tools/Tools.razor.rz.scp.css */
/* Tools: the same page frame as Customers and Tasks (designer, 31 October 2026): the gutter outside, then
   everything on one 1440 measure, centred, so the heading and left edge stay put between pages. */
.workspace-tools[b-p8o3q0ns9a] {
  /* Gaps in the token set: no page-gutter, page-width, readable-measure or card-width scale. The gutter
     and the cap are the other pages'. */
  --ds-tools-gutter: clamp(28px, 4vw, 66px);
  --ds-tools-max: 1440px;
  --ds-tools-measure: 680px;

  display: grid;
  padding: var(--spacing-4xl) var(--ds-tools-gutter) var(--spacing-6xl);
  color: var(--colors-text-secondary);
}

/* One left edge for the eye to follow down the page. */
.workspace-tools[b-p8o3q0ns9a] >  * { width: min(var(--ds-tools-max), 100%); min-width: 0; margin-inline: auto; }
.workspace-tools[b-p8o3q0ns9a]  h1, .workspace-tools[b-p8o3q0ns9a]  h2, .workspace-tools[b-p8o3q0ns9a]  h3, .workspace-tools[b-p8o3q0ns9a]  h4, .workspace-tools[b-p8o3q0ns9a]  p { margin: var(--spacing-none); }
.workspace-tools[b-p8o3q0ns9a]  h1, .workspace-tools[b-p8o3q0ns9a]  h2, .workspace-tools[b-p8o3q0ns9a]  h3, .workspace-tools[b-p8o3q0ns9a]  h4 { color: var(--colors-text-primary); }

/* The title and its line on the left; Back to an agent's job level with the line's foot. */
.workspace-tools__header[b-p8o3q0ns9a] {
  display: flex;
  gap: var(--spacing-3xl);
  align-items: flex-end;
  justify-content: space-between;
  /* A section heading comes next, not a controls row: the larger step of the 48/16/20 rhythm. */
  margin-bottom: var(--spacing-3xl);
  outline: none;
}
.workspace-tools__heading[b-p8o3q0ns9a] { display: grid; gap: var(--spacing-sm); }
.workspace-tools__heading[b-p8o3q0ns9a]  .workspace-tools__lede { max-width: var(--ds-tools-measure); color: var(--colors-text-secondary); }

.workspace-tools__section + .workspace-tools__section[b-p8o3q0ns9a] { margin-top: var(--spacing-3xl); }
.workspace-tools__section-head[b-p8o3q0ns9a] { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.workspace-tools__section-head[b-p8o3q0ns9a] >  span { color: var(--colors-text-muted); }

/* Two cards across, as the first draft arranged them (designer, 31 October 2026); one on a phone. */
.workspace-tools__grid[b-p8o3q0ns9a] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl); }
.workspace-tools__card[b-p8o3q0ns9a] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl);
  background: var(--colors-surface-card);
  border: var(--ds-hairline) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-2xl);
}
.workspace-tools__card > header[b-p8o3q0ns9a] { display: flex; gap: var(--spacing-md); align-items: center; }
.workspace-tools__card > header > div[b-p8o3q0ns9a] { display: grid; gap: var(--spacing-2xs); }
.workspace-tools__card > header[b-p8o3q0ns9a]  p { color: var(--colors-text-muted); }
.workspace-tools__card-copy[b-p8o3q0ns9a] { display: grid; gap: var(--spacing-sm); align-content: start; }
.workspace-tools__card-copy[b-p8o3q0ns9a] >  p { max-width: var(--ds-tools-measure); }
/* Refused or closed early at the provider: said quietly on the card, with Try again on its button. */
.workspace-tools__not-connected[b-p8o3q0ns9a] { display: flex; align-items: center; gap: var(--spacing-xs); margin: var(--spacing-none); color: var(--colors-text-muted); }
/* Connect, at the foot of the card as the first draft placed it. Limits and requirements are explained in the
   connect window, not on the card (designer, 1 November 2026). */
.workspace-tools__card > footer[b-p8o3q0ns9a] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: var(--ds-hairline) solid var(--colors-surface-border);
  color: var(--colors-text-muted);
}

.workspace-tools__connected[b-p8o3q0ns9a] { background: var(--colors-surface-card); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-2xl); }
.workspace-tools__connection[b-p8o3q0ns9a] { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-xl); }
.workspace-tools__connection[b-p8o3q0ns9a] >  button { flex-shrink: 0; }
.workspace-tools__connection + .workspace-tools__connection[b-p8o3q0ns9a] { border-top: var(--ds-hairline) solid var(--colors-surface-border); }
.workspace-tools__connection-words[b-p8o3q0ns9a] { display: grid; flex: 1; gap: var(--spacing-xs); min-width: 0; overflow-wrap: anywhere; }
.workspace-tools__connection-words > div[b-p8o3q0ns9a] { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; }
.workspace-tools__connection-words[b-p8o3q0ns9a] >  p:last-child { color: var(--colors-text-muted); }

/* Said once, under everything: agents only get what they're given. */
.workspace-tools__footnote[b-p8o3q0ns9a] { display: flex; gap: var(--spacing-sm); justify-content: center; align-items: center; margin-top: var(--spacing-2xl); color: var(--colors-text-muted); }
.workspace-tools__footnote[b-p8o3q0ns9a] >  svg { flex: 0 0 auto; }

@media (max-width: 1024px) {
  .workspace-tools__card[b-p8o3q0ns9a] { padding: var(--spacing-xl); }
  .workspace-tools__connection[b-p8o3q0ns9a] { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .workspace-tools__grid[b-p8o3q0ns9a] { grid-template-columns: minmax(0, 1fr); }
  .workspace-tools__header[b-p8o3q0ns9a], .workspace-tools__section-head[b-p8o3q0ns9a] { flex-direction: column; align-items: stretch; gap: var(--spacing-lg); }
  .workspace-tools__connection-words[b-p8o3q0ns9a] { flex-basis: 60%; }
  .workspace-tools__footnote[b-p8o3q0ns9a] { align-items: start; }
}

/* A connected tool's agents, as overlapping faces. */
.workspace-tools__faces[b-p8o3q0ns9a] {
  /* Gaps in the token set: no avatar size for a row of faces, and no overlap step. */
  --ds-tools-face: 28px;
  --ds-tools-face-overlap: -6px;

  display: flex;
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
}
.workspace-tools__faces li[b-p8o3q0ns9a] { display: grid; border: var(--ds-hairline) solid var(--colors-surface-card); border-radius: var(--radius-radius-full); }
.workspace-tools__faces li + li[b-p8o3q0ns9a] { margin-left: var(--ds-tools-face-overlap); }
.workspace-tools__faces img[b-p8o3q0ns9a] { width: var(--ds-tools-face); height: var(--ds-tools-face); border-radius: var(--radius-radius-full); object-fit: cover; }
/* /Components/Pages/Dashboard/Tools/ToolTaskAction.razor.rz.scp.css */
.tool-task-action[b-ej8gyhca9s] { display: grid; gap: var(--spacing-lg); padding: var(--spacing-xl); background: var(--colors-accent-brand-subtle); border: var(--ds-hairline) solid var(--colors-surface-border); border-radius: var(--radius-radius-xl); color: var(--colors-text-secondary); }
.tool-task-action[b-ej8gyhca9s]  h3, .tool-task-action[b-ej8gyhca9s]  p { margin: var(--spacing-none); }
.tool-task-action[b-ej8gyhca9s]  h3 { color: var(--colors-text-primary); }
.tool-task-action__heading[b-ej8gyhca9s] { display: flex; gap: var(--spacing-md); align-items: center; }
.tool-task-action__heading > div[b-ej8gyhca9s] { display: grid; gap: var(--spacing-xs); }
.tool-task-action__buttons[b-ej8gyhca9s] { display: flex; gap: var(--spacing-sm); justify-content: end; flex-wrap: wrap; }
/* /Components/Pages/Dashboard/Tools/ToolTrialDialog.razor.rz.scp.css */
.tool-access[b-99g74uzzaa] { display: grid; gap: var(--spacing-xl); }
.tool-access[b-99g74uzzaa]  p { margin: var(--spacing-none); }
/* /Components/Pages/DesignSystem/GalleryPage.razor.rz.scp.css */
/* Reference page for the design system. Not shipped to end users — reachable
   at /design-system so design and engineering can check a component against
   the Figma frames side by side.

   The React version ended with a max-width:860px query. It never matched:
   the app sets a 1080px viewport floor, so that breakpoint was unreachable
   code. Dropped rather than ported. */

.ds-gallery[b-hlj7qjo2o5] {
  /* Layout-only values with no token behind them: the design system defines
     no border-width, label-column or tracking scale. */
  --ds-gallery-border-width: 1px;
  --ds-gallery-label-column: 7rem;
  --ds-gallery-label-tracking: 0.06em;
  --ds-gallery-icon-cell: 9rem;
  --ds-gallery-stack-width: 26rem;
  --ds-gallery-panel-width: 17rem;
  --ds-gallery-panel-height: 12rem;

  min-height: 100vh;
  padding: var(--spacing-2xl);
  background: var(--colors-surface-background);
  color: var(--colors-text-primary);
}

[b-hlj7qjo2o5] .ds-gallery__title {
  margin: 0 0 var(--spacing-xs);
}

[b-hlj7qjo2o5] .ds-gallery__lede {
  margin: 0 0 var(--spacing-2xl);
  max-width: 60ch;
  color: var(--colors-text-secondary);
  line-height: var(--typography-leading-leading-base);
}

.ds-gallery__section[b-hlj7qjo2o5] {
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-xl);
  border: var(--ds-gallery-border-width) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-lg);
  background: var(--colors-surface-card);
}

[b-hlj7qjo2o5] .ds-gallery__section-title {
  margin: 0 0 var(--spacing-lg);
}

.ds-gallery__grid[b-hlj7qjo2o5] {
  display: grid;
  grid-template-columns: var(--ds-gallery-label-column) repeat(3, minmax(0, 1fr));
  gap: var(--spacing-lg);
  align-items: center;
}

[b-hlj7qjo2o5] .ds-gallery__label {
  color: var(--colors-text-muted);
  text-transform: uppercase;
}

.ds-gallery__cell[b-hlj7qjo2o5] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

[b-hlj7qjo2o5] .ds-gallery__note {
  margin-top: var(--spacing-lg);
  color: var(--colors-text-muted);
  line-height: var(--typography-leading-leading-sm);
}

/* Typography specimen. Laid out like the Figma frame — metadata on the left,
   the live sample on the right — so the two can be read side by side. */
.ds-gallery__type-group[b-hlj7qjo2o5] {
  margin-top: var(--spacing-xl);
}

.ds-gallery__type-group[b-hlj7qjo2o5] >  .ds-gallery__label {
  margin: 0 0 var(--spacing-sm);
}

.ds-gallery__type-row[b-hlj7qjo2o5] {
  display: grid;
  grid-template-columns: calc(var(--spacing-7xl) + var(--spacing-6xl)) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-md) 0;
  border-top: var(--ds-gallery-border-width) solid var(--colors-surface-border);
}

.ds-gallery__type-meta[b-hlj7qjo2o5] {
  display: grid;
  gap: var(--spacing-2xs);
}

.ds-gallery__type-meta code[b-hlj7qjo2o5] {
  color: var(--colors-text-secondary);
  font-family: var(--typography-font-family-mono), ui-monospace, monospace; /* text-style-exempt: the scale has no small mono style — code is defined at 14 only */
}

.ds-gallery__type-meta span[b-hlj7qjo2o5],
.ds-gallery__type-meta em[b-hlj7qjo2o5] {
  color: var(--colors-text-muted);
  font-style: normal;
}

/* The samples set their own type, so this only handles flow and overflow. */
.ds-gallery__type-row[b-hlj7qjo2o5] >  p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ds-gallery__note code[b-hlj7qjo2o5] {
  font-family: var(--typography-font-family-mono), ui-monospace, monospace; /* text-style-exempt: the scale has no small mono style — code is defined at 14 only */
}

/* Icons. The whole sheet on one page, because a wrong glyph is far cheaper to
   catch here than on the screen that uses it. */
.ds-gallery__icon-grid[b-hlj7qjo2o5] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-gallery-icon-cell), 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.ds-gallery__icon-cell[b-hlj7qjo2o5] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: center;
  padding: var(--spacing-md);
  border: var(--ds-gallery-border-width) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-md);
  color: var(--colors-text-primary);
  text-align: center;
}

.ds-gallery__icon-cell code[b-hlj7qjo2o5] {
  color: var(--colors-text-muted);
  font-family: var(--typography-font-family-mono), ui-monospace, monospace; /* text-style-exempt: the scale has no small mono style — code is defined at 14 only */
  overflow-wrap: anywhere;
}

/* Layout helpers for the specimen sections. These only arrange the components
   being shown — no component is restyled from here, which is the rule scoped
   CSS enforces anyway: a parent's selectors cannot reach a child component's
   elements without ::deep. */

.ds-gallery__stack[b-hlj7qjo2o5] {
  display: grid;
  gap: var(--spacing-lg);
  justify-items: start;
  max-width: var(--ds-gallery-stack-width);
  margin-bottom: var(--spacing-xl);
}

.ds-gallery__panels[b-hlj7qjo2o5] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ds-gallery-panel-width), 1fr));
  gap: var(--spacing-lg);
}

.ds-gallery__panel[b-hlj7qjo2o5] {
  display: grid;
  align-content: center;
  gap: var(--spacing-md);
  min-height: var(--ds-gallery-panel-height);
  padding: var(--spacing-lg);
  border: var(--ds-gallery-border-width) solid var(--colors-surface-border);
  border-radius: var(--radius-radius-md);
  background: var(--colors-surface-background);
}

.ds-gallery__skeleton-row[b-hlj7qjo2o5] {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.ds-gallery__skeleton-lines[b-hlj7qjo2o5] {
  display: grid;
  gap: var(--spacing-sm);
  flex: 1;
}

/* The questionnaire at about the width it has in Teach your AI's thread. */
.ds-gallery__questionnaire[b-hlj7qjo2o5] {
  /* Gap in the token set: the thread's width beside the orb. */
  --ds-gallery-questionnaire: 560px;
  max-width: var(--ds-gallery-questionnaire);
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Centred, held to a reading width, like Aurora's NotFound page. */

.error-page[b-7qas0c01mf] {
  display: grid;
  justify-items: center;
  gap: var(--spacing-xl);
  width: min(var(--ds-error-measure), 100%);
  min-height: 100%;
  margin-inline: auto;
  padding: var(--spacing-4xl);
}

.error-page[b-7qas0c01mf] {
  /* Gap in the token set: no measure scale. */
  --ds-error-measure: 640px;
}

[b-7qas0c01mf] .error-page__note {
  color: var(--colors-text-muted);
  text-align: center;
}

[b-7qas0c01mf] .error-page__note strong { color: var(--colors-text-secondary); }
[b-7qas0c01mf] .error-page__note code { color: var(--colors-text-secondary); }
/* /Components/Pages/Legal/LegalPlaceholderPage.razor.rz.scp.css */
.legal-page[b-vfnm978fis] {
  display: grid;
  align-content: start;
  gap: var(--spacing-md);
  width: min(var(--ds-legal-measure), 100%);
  min-height: 100dvh;
  margin-inline: auto;
  padding: var(--spacing-5xl) var(--spacing-xl);
  background: var(--colors-surface-background);
}

.legal-page[b-vfnm978fis] {
  /* Not a token: a comfortable reading measure; there is no content-width scale. */
  --ds-legal-measure: 640px;
}

[b-vfnm978fis] .legal-page__copy { color: var(--colors-text-muted); }
/* /Components/Pages/NoAccess.razor.rz.scp.css */
/* The message sits where the page would have been. */
.no-access[b-f5g6m8jzzv] {
  display: grid;
  place-items: center;
  padding-block: var(--spacing-5xl);
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-s6kq32zymj] {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--spacing-4xl);
}
/* /Components/Shared/ActivityBar.razor.rz.scp.css */
.activity[b-4qripwcc6o] {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms var(--cadence-ease);
}

.activity.is-on[b-4qripwcc6o] { opacity: 1; }

.activity[b-4qripwcc6o]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, var(--cadence-teal), transparent);
}

/* Only sweep while the bar is showing. A hidden bar that kept sweeping made
   the browser draw a new frame 60 times a second on every dashboard page,
   and with a dialog open that meant re-blurring the whole screen each time. */
.activity.is-on[b-4qripwcc6o]::after {
    animation: activity-sweep-b-4qripwcc6o 1.1s var(--cadence-ease) infinite;
}

@keyframes activity-sweep-b-4qripwcc6o {
    from { transform: translateX(-100%); }
    to   { transform: translateX(430%); }
}

@media (prefers-reduced-motion: reduce) {
    .activity[b-4qripwcc6o]::after { animation: none; width: 100%; opacity: 0.6; }
}
/* /Components/Shared/ModalShell/ModalShell.razor.rz.scp.css */
/* Aurora's Dialog geometry (480px card, 32px padding, 24px radius, 20px
   section gap), carried by Parrot's legacy shell so its remaining callers
   look like every other dialog in the product. Copied from
   Parrot.SharedComponents/DesignSystem/Dialog.razor.css. */

.dialog-backdrop[b-agdwcnroks] {
  position: fixed;
  inset: 0;
  z-index: var(--ds-dialog-layer);
  display: grid;
  place-items: center;
  padding: var(--spacing-3xl);
  background: var(--colors-surface-overlay);
  backdrop-filter: blur(var(--ds-dialog-blur));
  animation: dialog-backdrop-in-b-agdwcnroks var(--ds-dialog-backdrop-enter) ease;
}

.dialog-backdrop[b-agdwcnroks] {
  /* Gaps in the token set: no component width scale, no z-index scale, no
     blur scale and no motion scale. */
  --ds-dialog-width: 480px;
  --ds-dialog-width-wide: 680px;
  --ds-dialog-layer: 120;
  --ds-dialog-blur: 6px;
  --ds-dialog-backdrop-enter: 150ms;
  --ds-dialog-enter: 190ms;
  --ds-dialog-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dialog[b-agdwcnroks] {
  display: grid;
  gap: var(--spacing-xl);
  width: min(var(--ds-dialog-width), 100%);
  max-height: 100%;
  padding: var(--spacing-3xl);
  overflow-y: auto;
  background: var(--colors-surface-elevated);
  border-radius: var(--radius-radius-3xl);
  outline: 0;
  box-shadow:
    0 var(--spacing-2xs) var(--spacing-md) var(--colors-surface-shadow),
    0 var(--spacing-md) var(--spacing-3xl) var(--colors-surface-shadow-diffuse);
  animation: dialog-in-b-agdwcnroks var(--ds-dialog-enter) var(--ds-dialog-ease);
}

.dialog--wide[b-agdwcnroks] { width: min(var(--ds-dialog-width-wide), 100%); }

.dialog__header[b-agdwcnroks] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.dialog__titles[b-agdwcnroks] { display: grid; gap: var(--spacing-xs); min-width: 0; }

.dialog__header[b-agdwcnroks]  h2 {
  min-width: 0;
  margin: var(--spacing-none);
  color: var(--colors-text-primary);
}

[b-agdwcnroks] .dialog__subtitle { margin: var(--spacing-none); color: var(--colors-text-muted); }

.dialog__body[b-agdwcnroks] {
  color: var(--colors-text-secondary);
}

.dialog__body[b-agdwcnroks]  p { margin: var(--spacing-none); }
.dialog__body[b-agdwcnroks]  p + p { margin-top: var(--spacing-sm); }

.dialog__footer[b-agdwcnroks] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

@keyframes dialog-backdrop-in-b-agdwcnroks {
  from { opacity: 0; }
}

@keyframes dialog-in-b-agdwcnroks {
  from {
    opacity: 0;
    transform: translateY(var(--spacing-sm)) scale(0.985);
  }
}
/* /Components/Shared/SessionSplash.razor.rz.scp.css */
/* The launch moment fills the window on the page colour; type here is the
   brand's own face, because this is a brand surface rather than a screen in
   the product. */

.splash[b-u65jc11ys4] {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--spacing-md);
  width: 100vw;
  height: 100vh;
  color: var(--colors-text-muted);
  background: var(--colors-surface-background);
  /* Held back a moment so a returning person whose session is read back
     quickly goes straight to their screen with no flash of the splash. */
  animation: splash-in-b-u65jc11ys4 320ms var(--cadence-ease) 200ms backwards;
}

.splash__wordmark[b-u65jc11ys4] {
  font-size: var(--typography-size-text-xl); /* text-style-exempt: brand wordmark, Figtree */
  line-height: 1;
}

.splash__note[b-u65jc11ys4] {
  font-family: var(--cadence-font-sans);
  font-size: var(--typography-size-text-sm); /* text-style-exempt: brand surface, Figtree */
  line-height: 1;
}

@keyframes splash-in-b-u65jc11ys4 {
  from { opacity: 0; }
}