@charset "UTF-8";
/* Puls's styles, one partial per concern (CL26), each at most 200 lines of rules. The order below is the cascade: the
   colours and the plain elements first (ITCSS's settings and base), then the parts in the order they always came, so a
   later rule still wins where it did. A name under web/ is the framework's Sass, found through sasscompiler.json. A new
   rule goes in the partial of its concern, and anything that repeats becomes one shared piece that both places use. A partial that grows past 200 lines is split, and its new partial
   is listed where its lines were. The build makes wwwroot/css/app.css from this, and that file isn't in git. */
/* The framework's colours: what a site with none of its own looks like. Black and white with metallic greys, set in Geist,
   the static site's Console theme. The only colours in it are a muted red for errors and an amber for warnings. A site
   lists this first and its own colours after, so the same name set twice gives the site's. The names are Bootstrap's, and
   a --web- name where it has none; a site that sets some of them keeps these for the rest. */
:root {
  --bs-primary: #ffffff;
  --bs-primary-rgb: 255, 255, 255;
  --bs-danger: #d9675f;
  --bs-danger-rgb: 217, 103, 95;
  --bs-warning: #d4a72c;
  --bs-warning-rgb: 212, 167, 44;
  --bs-body-bg: #070708;
  --bs-body-bg-rgb: 7, 7, 8;
  --bs-secondary-bg: #0d0e10;
  --bs-secondary-bg-rgb: 13, 14, 16;
  --bs-tertiary-bg: #15171a;
  --bs-tertiary-bg-rgb: 21, 23, 26;
  --bs-success-text-emphasis: #c9ccd1;
  --web-success-text-rgb: 201, 204, 209;
  --web-menu-bg: #15171a;
  --web-menu-bg-rgb: 21, 23, 26;
  --web-overlay-rgb: 255, 255, 255;
  --web-shadow-rgb: 0, 0, 0;
  --web-failed-rgb: 217, 103, 95;
  --web-backdrop-rgb: 0, 0, 0;
  --web-hover-rgb: 127, 127, 127;
  --web-primary-deep: #c9ccd1;
  --bs-primary-bg-subtle: #1b1d21; /* a tint of what matters */
  --bs-primary-text-emphasis: #e6e8eb; /* what matters, as text */
  --bs-success: #c9ccd1; /* your messages */
  --web-success-deep: #9aa0a8;
  --bs-success-bg-subtle: #15171a;
  --web-sidebar-foot: #0d0e10; /* the sidebar's footer */
  --web-sidebar-foot-deep: #070708;
  --bs-link-color: #e6e8eb;
  /* The smaller steps the rules use. */
  --web-on-primary: #070708; /* text on an action or on your message */
  --web-bright: #ffffff; /* the brightest text on the dark */
  --web-soft-text: #c9ccd1;
  --web-settings-text: #c9ccd1;
  --web-error-text: #e8a39c;
  --web-photo-text: #333333; /* a caption on a photo's white mat */
  --web-border-hover: #3a3e45;
  --web-scrollbar: #2c2f35;
  --web-dialog-bg: #0d0e10;
  --web-code-number: #c9ccd1;
  --web-code-comment: #7c828a;
  --web-live-dot: #e6e8eb;
  --bs-emphasis-color: #ffffff; /* headings, what's lit */
  --bs-body-color: #e6e8eb;
  --bs-secondary-color: #9aa0a8;
  --bs-tertiary-color: #7c828a;
  --bs-border-color: #2c2f35;
  --web-code-bg: #15171a;
  --web-cta: linear-gradient(180deg, #ffffff 0%, #b9bec6 100%);
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --bs-box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .7);
  --web-glow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12), 0 10px 30px -10px rgba(var(--bs-primary-rgb), .25);
  --bs-font-sans-serif: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --web-ease: cubic-bezier(.2, .8, .2, 1);
  --web-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

/* Puls: dark and calm in its four colours, set in Montserrat (F20): deep charcoal to rest the eyes on, a charcoal-tinted
   white for text, orange for actions, green for your messages and what's done, and soft orange and green glows. One theme; the shared components only emit
   class names (TurnView, BlocksView, DelegationCard, CurrencySwitcher), and this file styles them. Motion is smooth and
   purposeful, and turned off for people who ask their system for less motion. The colours go by Bootstrap's names, and by
   a --web- name where it has none, and this file only sets Puls's values for them. */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
:root {
  --bs-primary: #f58220;
  --bs-primary-rgb: 245, 130, 32;
  --bs-danger: #f26b4f;
  --bs-danger-rgb: 242, 107, 79;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-body-bg: #1c1f22;
  --bs-body-bg-rgb: 28, 31, 34;
  --bs-secondary-bg: #25292d;
  --bs-secondary-bg-rgb: 37, 41, 45;
  --bs-tertiary-bg: #16191b;
  --bs-tertiary-bg-rgb: 22, 25, 27;
  --bs-success-text-emphasis: #38b449;
  --web-success-text-rgb: 56, 180, 73;
  --web-menu-bg: #23272b;
  --web-menu-bg-rgb: 35, 39, 43;
  --web-overlay-rgb: 255, 255, 255;
  --web-shadow-rgb: 36, 40, 44;
  --web-failed-rgb: 229, 72, 77;
  --web-backdrop-rgb: 8, 9, 10;
  --web-hover-rgb: 127, 127, 127;
  --web-primary-deep: #e5731a;
  --bs-primary-bg-subtle: #3a2a1d; /* orange tint on dark */
  --bs-primary-text-emphasis: #f7a55a; /* orange that reads as text on dark */
  --bs-success: #00723a; /* your messages */
  --web-success-deep: #00592d;
  --bs-success-bg-subtle: #1b3326;
  --web-sidebar-foot: #121416; /* the darkest charcoal: the sidebar's footer */
  --web-sidebar-foot-deep: #0d0f10;
  --bs-link-color: #38b449;
  /* The smaller steps the rules use. */
  --web-on-primary: #fff; /* text on an action or on your message */
  --web-bright: #fff; /* the brightest text on the dark */
  --web-soft-text: #c9c9c3;
  --web-settings-text: #e4e4df;
  --web-error-text: #f8a08c;
  --web-photo-text: #333; /* a caption on a photo's white mat */
  --web-border-hover: #454b52;
  --web-scrollbar: #3b4046;
  --web-dialog-bg: #202428;
  --web-code-number: #c4a5f5;
  --web-code-comment: #8b93ad;
  --web-live-dot: #3fb950;
  --bs-emphasis-color: #efefeb; /* the charcoal-tinted white: headings and strong text */
  --bs-body-color: #d4d4cf;
  --bs-secondary-color: #9ba1a8;
  --bs-tertiary-color: #6c727a;
  --bs-border-color: #33383d;
  --web-code-bg: #2a2e33;
  --web-cta: linear-gradient(135deg, #f7952f 0%, var(--bs-primary) 45%, #d9660b 100%);
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .2);
  --bs-box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  --web-glow: 0 0 0 4px rgba(var(--bs-primary-rgb), .18), 0 10px 30px -10px rgba(var(--bs-primary-rgb), .45);
  --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --web-ease: cubic-bezier(.2, .8, .2, 1);
  --web-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font: 14.5px/1.7 var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--bs-primary-rgb), 0.25);
  color: var(--bs-emphasis-color);
}

:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

button {
  font: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.4;
}

a {
  color: var(--bs-link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--web-scrollbar) transparent;
}

/* A quieter line of text, anywhere: a hint, a count, a date. */
.muted {
  color: var(--bs-secondary-color);
}

/* An area the guide just took the visitor to (F117): a soft glow that fades over the four seconds the widget's module
   keeps the class on. A site may restyle it; a reduced-motion setting gets the glow without the pulse. */
.area-shown {
  animation: area-glow 4s ease-out both;
  border-radius: var(--bs-border-radius-xl);
}

@keyframes area-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7), 0 0 60px rgba(var(--bs-primary-rgb), 0.35);
  }
  20% {
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.5), 0 0 80px rgba(var(--bs-primary-rgb), 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0), 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .area-shown {
    animation: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.5);
  }
}
/* The sign-in providers' own colours (FX67), from their brand guidelines: Google's dark theme, Microsoft's dark theme,
   LinkedIn's blue. A provider's button must look like the provider's, so these are not the site's colours and a site
   doesn't set them; they sit apart from _colours.scss, which holds only the site's own greys. */
:root {
  --web-google-bg: #131314;
  --web-google-stroke: #8e918f;
  --web-google-text: #e3e3e3;
  --web-microsoft-bg: #2f2f2f;
  --web-microsoft-text: #ffffff;
  --web-linkedin-bg: #0a66c2;
  --web-linkedin-text: #ffffff;
}

/* Loading and errors */
.loading {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--bs-emphasis-color);
}

.loading img {
  animation: rise 0.6s var(--web-ease) both;
}

.loading-mark {
  border-radius: 18px;
  animation: source-beat 1.1s ease-in-out infinite;
}

.loading-pct {
  font: 600 13px var(--bs-font-monospace);
  color: var(--bs-secondary-color);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

.loading-pct::after {
  content: var(--blazor-load-percentage-text, "0%");
}

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 16px 16px 16px;
  padding: 12px 18px;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--bs-primary);
  border-radius: 12px;
  box-shadow: var(--bs-box-shadow);
  z-index: 10;
}

#blazor-error-ui .dismiss {
  float: right;
  cursor: pointer;
}

/* Layout */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 280px) 8px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns 0.35s var(--web-ease);
}

.resizing .app {
  transition: none;
}

.resizing, .resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.sidebar {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-right: 1px solid var(--bs-border-color);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  gap: 14px;
  min-height: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.6px;
  color: var(--bs-emphasis-color);
  padding: 2px 8px;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
}

.sidebar-top .icon {
  color: var(--bs-secondary-color);
  width: 32px;
  height: 32px;
  place-items: center;
}

.sidebar-top .icon:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

.new-chat {
  position: relative;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 600;
  color: var(--web-on-primary);
  text-align: left;
  background: var(--web-cta);
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0 6px 16px -8px rgba(var(--bs-primary-rgb), 0.7);
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), background-position 0.6s var(--web-ease);
}

.new-chat::before {
  content: "+";
  margin-right: 8px;
  font-weight: 700;
}

.new-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(var(--bs-primary-rgb), 0.85);
  background-position: 100% 0;
}

.new-chat:active {
  transform: translateY(0) scale(0.98);
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px;
}

.chat-item {
  display: flex;
  align-items: center;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s var(--web-ease);
}

.chat-item a {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  color: var(--bs-body-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.chat-item:hover {
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.chat-item.active {
  background: var(--bs-secondary-bg);
  box-shadow: var(--bs-box-shadow-sm);
}

.chat-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--bs-primary);
}

.chat-item.active a {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.chat-item .icon {
  opacity: 0;
  transition: opacity 0.15s;
  color: var(--bs-secondary-color);
}

.chat-item:hover .icon {
  opacity: 1;
}

.sidebar-settings {
  color: var(--web-settings-text);
  font-size: 13px;
}

.sidebar-settings summary {
  cursor: pointer;
  color: var(--web-soft-text);
  list-style: none;
  padding: 4px 8px;
  border-radius: 8px;
}

.sidebar-settings summary::before {
  content: "⚙  ";
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 8px 0;
  color: var(--web-soft-text);
}

.settings input, .settings select {
  background: rgba(var(--web-overlay-rgb), 0.08);
  border: 1px solid rgba(var(--web-overlay-rgb), 0.18);
  color: var(--web-bright);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* The picker's arrow a little in from the edge: the browser draws it at the end of the content box (FX65). */
.settings select {
  padding-right: 16px;
}

.settings input:focus, .settings select:focus {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

/* A picker's open list on the menu's colour: the browser's own white under the page's bright text hid the options (FX65). */
.settings select option {
  color: var(--bs-emphasis-color);
  background: var(--web-menu-bg);
}

.icon {
  background: none;
  border: 0;
  color: var(--bs-secondary-color);
  font-size: 16px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.icon:hover {
  background: rgba(var(--web-hover-rgb), 0.14);
  color: var(--bs-emphasis-color);
}

.sidebar .icon:hover {
  color: var(--bs-emphasis-color);
}

/* Conversation */
.conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
  background: var(--bs-body-bg);
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 44px) clamp(14px, 3.5vw, 32px) 16px;
  scroll-behavior: smooth;
}

.messages > * {
  max-width: 800px;
  margin: 0 auto;
}

/* Empty state: a charcoal headline over a faint orange pulse, and suggestions to start with. */
.empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  isolation: isolate;
}

.empty h1 {
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin: 0 0 10px;
  line-height: 1.1;
  color: var(--bs-emphasis-color);
}

.empty h1 .w {
  display: inline-block;
  animation: word 0.7s var(--web-ease) both;
  animation-delay: calc(0.1s + var(--i) * 80ms);
}

.conversation > .messages {
  position: relative;
  z-index: 1;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The ways in, shared by the packs' views and the sites: a fade, a slide, a soft blink (from the admin's screens, CL58). */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes blink-soft {
  50% {
    opacity: 0.55;
  }
}
/* A page's header, on the admin's pages and the chat's panels alike: the title and its line on the left, the
   actions on the right. */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-head h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--bs-emphasis-color);
  margin: 0;
}

.page-head p {
  margin: 4px 0 0;
  color: var(--bs-secondary-color);
}

.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* The cards and the table the admin's pages, the studio and a pack's screen are built from (from the admin's
   shell, CL58): parts many components draw and override, so they stay global. */
.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  align-items: start;
}

.card-p {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: rise 0.4s var(--web-ease) both;
}

.card-p > p {
  margin: 0;
}

/* A card that holds a modal doesn't rise in: its filled transform animation would trap the modal inside it (F31). */
.card-p.holds-modal {
  animation: none;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--bs-emphasis-color);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  padding: 6px 10px;
  border-bottom: 1px solid var(--bs-border-color);
}

.admin-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(var(--web-overlay-rgb), 0.05);
  vertical-align: top;
}

.admin-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.admin-table tbody tr:hover {
  background: rgba(var(--web-overlay-rgb), 0.04);
}

.admin-table tbody tr.selected {
  background: var(--bs-primary-bg-subtle);
}

.admin-table code {
  font-size: 12.5px;
}

/* The logo (Components/PulsLogo.razor): the rings are cut out of the disc; a faint glow crosses them one after
   another, outward from the green source, like a puls travelling away from where it started. A hover sends one quicker. */
.puls-logo {
  height: 40px;
  width: auto;
  display: block;
  overflow: visible;
}

.puls-glow {
  stroke-opacity: 0;
  animation: ring-out 3.6s ease-in-out infinite;
}

.puls-glow:nth-of-type(2) {
  animation-delay: 0.22s;
}

.puls-glow:nth-of-type(3) {
  animation-delay: 0.44s;
}

.puls-glow:nth-of-type(4) {
  animation-delay: 0.66s;
}

.puls-glow:nth-of-type(5) {
  animation-delay: 0.88s;
}

.puls-glow:nth-of-type(6) {
  animation-delay: 1.1s;
}

.puls-glow:nth-of-type(7) {
  animation-delay: 1.32s;
}

.puls-glow:nth-of-type(8) {
  animation-delay: 1.54s;
}

@keyframes ring-out {
  0%, 30%, 100% {
    stroke-opacity: 0;
  }
  12% {
    stroke-opacity: 0.55;
  }
}
.puls-source {
  transform-box: fill-box;
  transform-origin: center;
  animation: source-beat 3.6s ease-in-out infinite;
}

@keyframes source-beat {
  0%, 100% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.25);
  }
  20% {
    transform: scale(1);
  }
}
.brand:hover .puls-glow, .brand:hover .puls-source {
  animation-duration: 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) :is(.puls-glow, .puls-source) {
    animation: none;
  }
}
/* The landing's water (Components/Water.razor), low behind the empty chat: across the conversation column, under the
   messages, rather than over the viewport. */
.conversation > .wave-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 0;
  mask-image: linear-gradient(transparent, var(--bs-black) 50%);
}

.empty .hint {
  color: var(--bs-secondary-color);
  font-size: 16px;
  max-width: 460px;
  margin: 0 0 26px;
  animation: rise 0.7s 0.08s var(--web-ease) both;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 10px;
  perspective: 1200px;
}

.suggestion {
  transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(var(--ty, 0));
}

.suggestion {
  text-align: left;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-sm);
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), border-color 0.25s;
  animation: rise 0.6s var(--web-ease) both;
}

.suggestion:nth-child(1) {
  animation-delay: 0.14s;
}

.suggestion:nth-child(2) {
  animation-delay: 0.2s;
}

.suggestion:nth-child(3) {
  animation-delay: 0.26s;
}

.suggestion:nth-child(4) {
  animation-delay: 0.32s;
}

.suggestion strong {
  color: var(--bs-emphasis-color);
  font-size: 14px;
}

.suggestion span {
  color: var(--bs-secondary-color);
  font-size: 13px;
}

.suggestion:hover {
  --ty: -3px;
  box-shadow: var(--bs-box-shadow);
  border-color: rgba(var(--bs-primary-rgb), 0.55);
}

.suggestion:hover strong {
  color: var(--web-primary-deep);
}

/* Turns */
.turn {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
  animation: rise 0.45s var(--web-ease) both;
}

.user-message {
  align-self: flex-end;
  max-width: 78%;
  color: var(--web-on-primary);
  background: linear-gradient(135deg, var(--bs-success), var(--web-success-deep));
  border-radius: 20px 20px 6px 20px;
  padding: 11px 16px;
  box-shadow: 0 8px 22px -10px rgba(var(--web-shadow-rgb), 0.7);
}

.user-text {
  white-space: pre-wrap;
}

.user-message .chip {
  background: rgba(var(--web-overlay-rgb), 0.16);
  border-color: rgba(var(--web-overlay-rgb), 0.25);
  color: var(--web-on-primary);
}

.assistant-message {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: 13px;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 3px 11px;
}

/* Thinking and tools: quiet until opened */
.thinking summary, .tool summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  font-size: 13px;
  list-style: none;
  user-select: none;
}

.thinking summary::-webkit-details-marker, .tool summary::-webkit-details-marker {
  display: none;
}

.thinking summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  transition: background 0.2s;
}

.thinking summary:hover {
  background: var(--bs-primary-bg-subtle);
}

.thinking summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}

.thinking[open] > summary {
  color: var(--bs-emphasis-color);
}

.tool {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: var(--bs-secondary-bg);
  padding: 9px 13px;
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tool:hover {
  border-color: var(--web-border-hover);
  box-shadow: var(--bs-box-shadow);
}

.tool.failed .tool-status {
  color: var(--bs-danger);
}

.tool-name {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  margin-right: 6px;
}

.tool pre {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  background: var(--web-code-bg);
  border-radius: 10px;
  padding: 9px 11px;
  overflow-x: auto;
  max-height: 280px;
  white-space: pre-wrap;
  margin: 4px 0 0;
}

/* Delegation card (F5): who's doing the work, with what, and the work itself, live. While it runs, its border is a
   rotating blue-to-orange ring and the avatar pulses. */
.delegation {
  position: relative;
  background: var(--bs-secondary-bg);
  border-radius: 18px;
  padding: 14px 18px;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  animation: rise 0.45s var(--web-ease) both;
}

.delegation.running {
  border-color: transparent;
  background: linear-gradient(var(--bs-secondary-bg), var(--bs-secondary-bg)) padding-box, conic-gradient(from var(--angle), var(--bs-primary), var(--bs-success-text-emphasis), var(--bs-success), var(--bs-primary)) border-box;
  animation: rise 0.45s var(--web-ease) both, spin 2.6s linear infinite;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}
.delegation.failed {
  border-color: rgba(var(--web-failed-rgb), 0.45);
}

.delegation-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.delegation-head::-webkit-details-marker {
  display: none;
}

.delegation-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--web-sidebar-foot), var(--web-sidebar-foot-deep));
  color: var(--bs-primary);
  font-weight: 800;
  font-size: 16px;
  flex: none;
  box-shadow: 0 6px 16px -6px rgba(var(--web-shadow-rgb), 0.6);
}

.delegation.running .delegation-avatar {
  animation: ring 1.8s var(--web-ease) infinite;
}

@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.6);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(var(--bs-primary-rgb), 0);
  }
}
.delegation-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.delegation-agent {
  font-size: 14px;
  color: var(--bs-secondary-color);
}

.delegation-agent strong {
  color: var(--bs-emphasis-color);
  font-weight: 700;
}

.delegation-toolsets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.toolset-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-link-color);
  border-radius: 999px;
  padding: 2px 9px;
}

/* F26: a continued sub-session's chip ("vervolg · sub-1"), told apart from the toolsets. */
.toolset-chip.follow-up {
  background: var(--bs-success-bg-subtle, var(--bs-success-bg-subtle));
  color: var(--bs-success, var(--bs-link-color));
}

.delegation-status {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.delegation-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.delegation.running .delegation-status {
  background: var(--bs-primary-bg-subtle);
  color: var(--web-primary-deep);
}

.delegation.running .delegation-status::before {
  animation: blink 1s ease-in-out infinite;
}

.delegation.failed .delegation-status {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
/* Answer text */
.markdown {
  color: var(--bs-body-color);
}

.markdown > :first-child {
  margin-top: 0;
}

.markdown > :last-child {
  margin-bottom: 0;
}

/* A line between paragraphs, said here so a site's own reset of p can't flatten an answer (FX84). */
.markdown p {
  margin: 0 0 10px;
}

.markdown h1, .markdown h2, .markdown h3 {
  color: var(--bs-emphasis-color);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin: 22px 0 8px;
}

.markdown strong {
  color: var(--bs-emphasis-color);
}

.markdown code {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-radius: 6px;
  padding: 1px 6px;
}

.markdown pre {
  background: var(--web-code-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 14px 16px;
  overflow-x: auto;
}

.markdown pre code {
  background: none;
  color: var(--bs-body-color);
  padding: 0;
  font-size: 13px;
}

.markdown blockquote {
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--bs-success-text-emphasis);
  color: var(--bs-secondary-color);
}

.markdown td img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 8px;
  background: var(--bs-white);
}

/* A product's photo beside its name (F34, Louis: "the text must not go underneath"): the cell keeps a lane for the photo, so a long name wraps beside it. */
/* Louis: "a min padding around the pics", then bigger, three times: 104 px, a cell tall enough for 10 px above and below. */
.markdown td:has(> img) {
  position: relative;
  padding-left: 128px;
  height: 124px;
}

.markdown img[data-original] {
  cursor: zoom-in;
}

/* The recipe's photo (FX24, Louis: "a fixed size to fit in our chat screen", "some rounded corners"): one fixed box, cropped to fit and never stretched, so a tall or a wide photo takes the same room; the product photos in a list's cells keep their own size above. */
.markdown img:not(td img) {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  margin: 10px 0;
  background: var(--bs-border-color);
}

.photo-dialog {
  padding: 16px;
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  background: var(--bs-white);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  cursor: zoom-out;
  animation: fade 0.2s both;
}

.photo-dialog::backdrop {
  background: rgba(var(--bs-black-rgb), 0.7);
}

.photo-dialog img {
  display: block;
  width: min(560px, 100vw - 64px);
  max-height: calc(100vh - 120px);
  object-fit: contain;
}

.photo-dialog p {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--web-photo-text);
}

.markdown td:has(> img) > img {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 104px;
  height: 104px;
  margin-right: 0;
}

.markdown table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
}

.markdown th {
  background: var(--web-code-bg);
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.markdown th, .markdown td {
  border-bottom: 1px solid var(--bs-border-color);
  padding: 8px 12px;
  text-align: left;
}

.markdown li::marker {
  color: var(--bs-primary);
}

/* Status lines */
.working, .delegation-waiting {
  color: var(--bs-secondary-color);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.working {
  background: linear-gradient(90deg, var(--bs-secondary-color) 0%, var(--bs-emphasis-color) 50%, var(--bs-secondary-color) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* F34, Louis: "maybe some small loader icon left of it". Its own colours: the label's text is clipped to its gradient. */
.working .spinner {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(var(--web-overlay-rgb), 0.14);
  border-top-color: var(--bs-primary, var(--bs-primary));
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.stopped {
  color: var(--bs-secondary-color);
  font-size: 13px;
  font-style: italic;
}

.error {
  color: var(--web-error-text);
  background: rgba(var(--bs-danger-rgb), 0.1);
  border: 1px solid rgba(var(--bs-danger-rgb), 0.3);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 14px;
}

.usage {
  font-size: 12px;
  color: var(--bs-tertiary-color);
  font-variant-numeric: tabular-nums;
}

.notice {
  max-width: 800px;
  margin: 0 auto 10px;
  background: var(--bs-primary-bg-subtle);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 12px;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: rise 0.3s var(--web-ease) both;
}

/* Composer: frosted glass with a glowing focus ring */
.composer {
  padding: 10px clamp(12px, 3.5vw, 32px) clamp(14px, 2.5vw, 26px);
  background: linear-gradient(to top, var(--bs-body-bg) 60%, rgba(var(--bs-body-bg-rgb), 0));
}

.composer > * {
  max-width: 800px;
  margin: 0 auto;
}

.composer .attachments {
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(var(--bs-secondary-bg-rgb), 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  padding: 9px 9px 9px 12px;
  box-shadow: var(--bs-box-shadow);
  transition: border-color 0.25s var(--web-ease), box-shadow 0.25s var(--web-ease);
}

.input-row:focus-within {
  border-color: rgba(var(--bs-primary-rgb), 0.6);
  box-shadow: var(--web-glow);
}

.input-row textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  font: inherit;
  color: var(--bs-emphasis-color);
  background: none;
  padding: 7px 2px;
  max-height: 240px;
}

.input-row textarea::placeholder {
  color: var(--bs-tertiary-color);
}

.attach {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--bs-secondary-color);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--web-spring);
}

.attach:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--web-primary-deep);
  transform: rotate(90deg);
}

.attach input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.send, .stop {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  display: grid;
  place-items: center;
  color: var(--web-on-primary);
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), opacity 0.2s;
}

.send {
  background: var(--web-cta);
  background-size: 200% 100%;
  box-shadow: 0 8px 18px -6px rgba(var(--bs-primary-rgb), 0.8);
}

.send:not(:disabled):hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 24px -8px rgba(var(--bs-primary-rgb), 0.9);
}

.send:not(:disabled):active {
  transform: scale(0.94);
}

.stop {
  background: var(--web-sidebar-foot);
  font-size: 12px;
  animation: ring 1.8s var(--web-ease) infinite;
}

/* Code highlighting (highlight.js) */
.hljs-comment, .hljs-quote {
  color: var(--web-code-comment);
  font-style: italic;
}

.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition {
  color: var(--bs-primary-text-emphasis);
}

.hljs-number, .hljs-regexp, .hljs-variable, .hljs-template-variable {
  color: var(--web-code-number);
}

.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-section, .hljs-type, .hljs-name {
  color: var(--bs-link-color);
}

.hljs-meta, .hljs-property, .hljs-params {
  color: var(--bs-secondary-color);
}

.hljs-deletion {
  color: var(--bs-danger);
}

/* Narrow screens: the sidebar stacks on top */
@media (max-width: 600px) {
  .user-message {
    max-width: 90%;
  }
}
/* Less motion when the system asks, unless the user switched the animations on in the sidebar's settings (F24:
   data-motion="on" on <html>, remembered in this browser). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) :is(*, *::before, *::after) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.delegation-chevron {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.12);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  transition: transform 0.45s var(--web-spring), background 0.3s, color 0.3s, border-color 0.3s;
}

.delegation-chevron::before {
  content: "+";
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
}

.delegation[open] .delegation-chevron {
  transform: rotate(135deg);
  background: var(--web-cta);
  border-color: transparent;
  color: var(--web-on-primary);
  box-shadow: 0 8px 18px -8px rgba(var(--bs-primary-rgb), 0.9);
}

.delegation-head:hover .delegation-chevron {
  background: rgba(var(--bs-primary-rgb), 0.2);
}

.delegation[open] .delegation-head:hover .delegation-chevron {
  background: var(--web-cta);
}

/* The card, its task and its work open and close with a height transition where the browser can animate a details
   element's content (F24); elsewhere they pop as before. */
:root {
  interpolate-size: allow-keywords;
}

.delegation::details-content, .delegation-task::details-content, .delegation-work::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.45s var(--web-ease), content-visibility 0.45s allow-discrete;
}

.delegation[open]::details-content, .delegation-task[open]::details-content, .delegation-work[open]::details-content {
  height: auto;
}

.delegation:not([open]) {
  box-shadow: var(--bs-box-shadow-sm);
}

.delegation:not([open]):hover {
  box-shadow: var(--bs-box-shadow);
}

/* Puls's empty chat on a narrow screen: its suggestions stack. */
@media (max-width: 600px) {
  .suggestions {
    grid-template-columns: 1fr;
  }
}
/* ---- Responsive layout and depth ---- */
/* On a wide screen the sidebar is a plain column beside the chat. */
@media (min-width: 992px) {
  .sidebar {
    position: relative;
    z-index: 3;
    overflow: hidden;
  }
}
/* The resize handle: invisible until hovered, then an orange grip. */
.resizer {
  position: relative;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
  touch-action: none;
}

.resizer::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.2s var(--web-ease);
}

.resizer:hover::after, .resizing .resizer::after {
  background: linear-gradient(var(--bs-primary), var(--web-primary-deep));
  box-shadow: 0 0 12px rgba(var(--bs-primary-rgb), 0.6);
}

/* Hidden sidebar: it folds away, and a floating tab brings it back. */
.sidebar-hidden .app {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

.sidebar-hidden .sidebar {
  visibility: hidden;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

.sidebar-tab {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  place-items: center;
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.25s var(--web-ease), transform 0.3s var(--web-spring);
}

.sidebar-hidden .sidebar-tab {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sidebar-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(var(--bs-primary-rgb), 0.55);
}

/* More depth: layered, tinted shadows that lift on hover. */
.user-message {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.12) inset, 0 12px 28px -12px rgba(var(--web-shadow-rgb), 0.75), 0 2px 6px rgba(var(--web-shadow-rgb), 0.15);
}

.delegation {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 14px 34px -14px rgba(var(--web-shadow-rgb), 0.28), 0 3px 8px rgba(var(--web-shadow-rgb), 0.06);
  transition: box-shadow 0.3s var(--web-ease), transform 0.3s var(--web-ease);
}

.delegation:not([open]):hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 18px 40px -14px rgba(var(--web-shadow-rgb), 0.34), 0 4px 10px rgba(var(--web-shadow-rgb), 0.08);
}

.tool:hover, .suggestion:hover {
  box-shadow: 0 16px 34px -14px rgba(var(--web-shadow-rgb), 0.3), 0 3px 8px rgba(var(--web-shadow-rgb), 0.06);
}

.input-row {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 18px 40px -18px rgba(var(--web-shadow-rgb), 0.35), 0 4px 12px rgba(var(--web-shadow-rgb), 0.06);
}

.markdown pre {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 8px 20px -14px rgba(var(--web-shadow-rgb), 0.25);
}

/* Below Bootstrap's lg breakpoint: a frosted top bar, and the sidebar slides in as an offcanvas. */
.topbar {
  display: none;
}

@media (max-width: 991.98px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .sidebar-hidden .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.86);
    backdrop-filter: blur(14px);
    color: var(--bs-emphasis-color);
    position: sticky;
    top: 0;
    z-index: 6;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .topbar .brand {
    padding: 0;
  }
  .topbar .icon {
    color: var(--bs-body-color);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 18px;
  }
  .topbar .icon:hover {
    background: rgba(var(--web-overlay-rgb), 0.08);
    color: var(--bs-emphasis-color);
  }
  .sidebar.offcanvas-lg {
    --bs-offcanvas-width: min(320px, 86vw);
    --bs-offcanvas-transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    border-right: 0;
  }
  .sidebar-hidden .sidebar {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  /* At lg Bootstrap makes the offcanvas a plain element again; keep it a full-height column. */
  .sidebar.offcanvas-lg {
    display: flex;
    flex-direction: column;
    visibility: visible;
  }
}
/* Puls's logo in the phone's top bar. */
@media (max-width: 991.98px) {
  .topbar .puls-logo {
    height: 32px;
  }
}
/* Spotlight: cards carry a soft orange light where the mouse is (--mx/--my set by js/chat.js). */
.suggestion, .delegation, .tool {
  position: relative;
  isolation: isolate;
}

.suggestion::after, .delegation::after, .tool::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--bs-primary-rgb), 0.14), transparent 60%);
  transition: opacity 0.3s var(--web-ease);
}

.suggestion:hover::after, .delegation:hover::after, .tool:hover::after {
  opacity: 1;
}

/* Sidebar: items slide a little and show an orange marker; New chat gets a light sweep. */
.chat-item {
  transition: background 0.2s var(--web-ease), transform 0.25s var(--web-spring);
}

.chat-item:hover {
  transform: translateX(3px);
}

.chat-item:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 2px;
  background: rgba(var(--bs-primary-rgb), 0.7);
}

.chat-item .icon:hover {
  background: rgba(var(--bs-danger-rgb), 0.18);
  color: var(--bs-danger);
}

.new-chat {
  overflow: hidden;
}

.new-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(var(--web-overlay-rgb), 0.45), transparent);
}

.new-chat:hover::after {
  transition: transform 0.7s var(--web-ease);
  transform: translateX(120%) skewX(-20deg);
}

/* Messages */
.user-message {
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease);
}

.user-message:hover {
  transform: translateY(-1px);
}

.markdown a {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--bs-primary), var(--bs-primary)) 0 100%/0 2px no-repeat;
  transition: background-size 0.3s var(--web-ease), color 0.2s;
}

.markdown a:hover {
  background-size: 100% 2px;
  color: var(--bs-emphasis-color);
}

.markdown tr {
  transition: background 0.15s;
}

.markdown tbody tr:hover {
  background: var(--bs-primary-bg-subtle);
}

.markdown pre {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.markdown pre:hover {
  border-color: var(--web-border-hover);
}

.thinking summary {
  transition: background 0.2s, color 0.2s;
}

.thinking summary:hover {
  color: var(--bs-emphasis-color);
}

/* Delegation cards and tools */
.delegation:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
}

.delegation-head:hover .delegation-chevron {
  transform: scale(1.08);
}

.delegation[open] .delegation-head:hover .delegation-chevron {
  transform: rotate(135deg) scale(1.08);
}

.delegation[open] .delegation-head:hover .delegation-chevron {
  transform: rotate(90deg) translateX(2px);
}

.toolset-chip {
  transition: transform 0.2s var(--web-spring), background 0.2s, color 0.2s;
}

.toolset-chip:hover {
  transform: translateY(-1px);
  background: var(--bs-success);
  color: var(--web-on-primary);
}

.tool {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--web-ease);
}

.tool:hover {
  transform: translateX(2px);
  border-left-color: var(--bs-primary);
}

/* Composer: the send button breathes once there's something to send. */
.input-row:hover {
  border-color: var(--web-border-hover);
}

.send:not(:disabled) {
  animation: breathe 2.4s var(--web-ease) infinite;
}

@keyframes breathe {
  0%, 100% {
    box-shadow: 0 8px 18px -6px rgba(var(--bs-primary-rgb), 0.8);
  }
  50% {
    box-shadow: 0 8px 26px -4px rgba(var(--bs-primary-rgb), 1);
  }
}
/* The pulse and the suggestions fit any width: no sideways scroll, and full-width cards on a phone. */
.messages {
  overflow-x: hidden;
}

/* Suggestions: an icon each, and an arrow that slides in. */
.suggestion {
  padding-right: 34px;
}

.suggestion strong {
  display: flex;
  align-items: center;
  gap: 9px;
}

.suggestion strong::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--bs-primary);
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.suggestion:nth-child(1) strong::before {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5 21 21'/></svg>");
}

.suggestion:nth-child(2) strong::before {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h8l5 5v13H6z'/><path d='M14 3v5h5M9 13h7M9 17h7'/></svg>");
}

.suggestion:nth-child(3) strong::before {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}

.suggestion:nth-child(4) strong::before {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20V4M16 20v-7M22 20H2'/></svg>");
}

.suggestion > span::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translate(-6px, -50%);
  opacity: 0;
  color: var(--bs-primary);
  font-weight: 700;
  transition: transform 0.3s var(--web-spring), opacity 0.2s;
}

.suggestion:hover > span::after {
  transform: translate(0, -50%);
  opacity: 1;
}

.suggestion:active {
  transform: translateY(-1px) scale(0.98);
}

.suggestions {
  width: min(540px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .suggestions {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A faint paper grain over the soft background, so large areas never look flat or digital (fixed, under everything). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.app {
  position: relative;
  z-index: 1;
}

.conversation {
  background: transparent;
}

/* A gradient, not a colour: at lg Bootstrap sets an offcanvas's background-color to transparent !important. */
.sidebar {
  background-image: linear-gradient(color-mix(in srgb, var(--bs-tertiary-bg) 94%, transparent), color-mix(in srgb, var(--bs-tertiary-bg) 94%, transparent));
}

/* Type: balanced headline lines, no lone last words in answers, figures that line up. */
.empty h1 {
  text-wrap: balance;
  letter-spacing: -1.6px;
  font-weight: 800;
}

.markdown p, .markdown li {
  text-wrap: pretty;
}

.markdown {
  font-variant-numeric: tabular-nums;
}

/* Hairlines, not borders: a touch of charcoal mixed into the background, and an inner light on raised surfaces. */
.suggestion, .tool, .delegation, .input-row, .markdown pre, .chip {
  border-color: color-mix(in srgb, var(--bs-emphasis-color) 10%, var(--bs-body-bg));
}

/* The sidebar: a small label over the chats, as in a well-made app. */
.sidebar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  padding: 6px 12px 0;
}

/* Focus is always visible, in orange, and never a browser default. */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bs-primary) 70%, transparent);
  outline-offset: 3px;
}

.input-row:focus-within {
  border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-body-bg));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 12%, transparent), 0 18px 40px -18px rgba(var(--web-shadow-rgb), 0.3);
}

/* Scrolling never shifts the layout. */
.messages, .chat-list {
  scrollbar-gutter: stable;
}

/* The tagline under the logo in the sidebar. */
.brand-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bs-secondary-color);
  text-wrap: balance;
  animation: rise 0.7s 0.9s var(--web-ease) both;
}

/* ---- Dark (F20): the glows. Soft orange and green light behind the chat, as in the Sensai look; drawn on the page so
   the sidebar, the chat and the composer's fade all sit over the same light. ---- */
body {
  background: radial-gradient(900px 600px at 78% -8%, rgba(var(--bs-primary-rgb), 0.13), transparent 62%), radial-gradient(800px 600px at 12% 108%, rgba(var(--web-success-text-rgb), 0.09), transparent 60%), radial-gradient(600px 500px at 50% 45%, rgba(var(--bs-primary-rgb), 0.04), transparent 70%), var(--bs-body-bg);
  background-attachment: fixed;
}

.conversation {
  background: transparent;
}

.composer {
  background: linear-gradient(to top, rgba(var(--bs-body-bg-rgb), 0.92) 55%, rgba(var(--bs-body-bg-rgb), 0));
}

.user-message {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.08) inset, 0 12px 28px -12px rgba(var(--bs-black-rgb), 0.7);
}

.new-chat {
  box-shadow: 0 8px 22px -8px rgba(var(--bs-primary-rgb), 0.6);
}

.tagline {
  color: var(--bs-secondary-color);
}

/* ---- The slow pulse behind an empty chat: faint orange rings that ripple out from the headline, and a soft orange
   core beating in time, like the logo's line. Behind everything, and off for reduced motion. ---- */
.pulse-bg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}

.pulse-bg span {
  position: absolute;
  width: min(240px, 50vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--bs-primary-rgb), 0.22);
  opacity: 0;
  transform: scale(0.4);
  animation: pulse-ring 7.2s cubic-bezier(0.25, 0.6, 0.3, 1) infinite;
}

.pulse-bg span:nth-child(2) {
  animation-delay: 1.8s;
}

.pulse-bg span:nth-child(3) {
  animation-delay: 3.6s;
}

.pulse-bg span:nth-child(4) {
  animation-delay: 5.4s;
}

@keyframes pulse-ring {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(3.4);
  }
}
.pulse-bg::before {
  content: "";
  position: absolute;
  width: min(360px, 76vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.16), rgba(var(--bs-primary-rgb), 0.05) 45%, transparent 70%);
  animation: heartbeat 3.6s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.8;
  }
  18% {
    transform: scale(1.05);
    opacity: 1;
  }
  32% {
    transform: scale(0.98);
  }
  46% {
    transform: scale(1.02);
  }
}
.empty .hint {
  text-wrap: balance;
  max-width: 560px;
}

.suggestion {
  border-radius: 16px;
  padding: 14px 36px 14px 16px;
  background: color-mix(in srgb, var(--bs-secondary-bg) 85%, transparent);
  backdrop-filter: blur(6px);
}

.suggestion:hover {
  border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-body-bg));
}

.sidebar .puls-logo {
  height: 44px;
}

/* ---- The app icon tiles (wwwroot/brand/puls-icon-tile*.svg) ---- */
/* The empty chat: the light tile above the headline, the slow pulse spreading out from it. The chat's scroll area
   clips it (.messages), not the empty state, whose top edge would cut the glow off in a straight line. */
.hero-mark {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  animation: rise 0.6s var(--web-ease) both;
}

.hero-mark img, .hero-mark .puls-tile {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  overflow: visible;
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 16px 34px -14px rgba(var(--web-shadow-rgb), 0.35), 0 3px 8px rgba(var(--web-shadow-rgb), 0.06);
}

.hero-mark .pulse-bg {
  overflow: visible;
  z-index: 0;
}

.hero-mark .pulse-bg::before {
  width: min(300px, 70vw);
}

.pulse-bg span {
  border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.hero-mark img, .hero-mark .puls-tile {
  box-shadow: 0 0 0 1px rgba(var(--web-overlay-rgb), 0.06), 0 18px 40px -14px rgba(var(--bs-black-rgb), 0.7), 0 0 60px -10px rgba(var(--bs-primary-rgb), 0.35);
}

/* A delegation comes from Puls: its avatar is the charcoal tile instead of an initial. The path is from where the build
   puts the CSS, wwwroot/css/app.css, whichever partial holds the rule (FX30). */
.delegation-avatar {
  background: url("../brand/puls-icon-tile.svg") center/cover no-repeat;
  color: transparent;
  font-size: 0;
}

/* ---- The landing page (F20, Pages/LandingPage.razor): Sensai's shape in Puls's colours. The page scrolls; the chat
   (/gesels) keeps its fixed three-panel frame. ---- */
/* overflow-x: clip, not hidden: hidden would make the page a scroll container and stop the nav sticking to the viewport. */
.landing {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow-x: clip;
  padding: 0 clamp(16px, 4vw, 48px);
}

.landing a {
  text-decoration: none;
}

html:has(.landing) {
  scroll-behavior: smooth;
}

/* ---- The water (F24, Components/Water.razor): four translucent swells low in the view, each lit along its top edge
   and falling into a dark body, drifting at their own pace and breathing up and down; a haze over the whole so they read
   as one surface; a low, stretched reflection drifting along it. Behind the landing page and the empty chat. ---- */
.wave-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 30%);
}

.wave-bg .layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  animation: swell 11s ease-in-out infinite alternate;
}

.wave-bg .layer svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  animation: wave-move 90s linear infinite;
}

.wave-bg .l1 {
  filter: blur(14px);
  animation-duration: 16s;
}

.wave-bg .l1 svg {
  animation-duration: 150s;
}

.wave-bg .l2 {
  filter: blur(9px);
  animation-duration: 12s;
  animation-delay: -4s;
}

.wave-bg .l2 svg {
  animation-duration: 105s;
  animation-direction: reverse;
}

.wave-bg .l3 {
  filter: blur(6px);
  animation-duration: 9s;
  animation-delay: -2s;
}

.wave-bg .l3 svg {
  animation-duration: 72s;
}

.wave-bg .l4 {
  filter: blur(4px);
  animation-duration: 7s;
  animation-delay: -5s;
}

.wave-bg .l4 svg {
  animation-duration: 50s;
  animation-direction: reverse;
}

.wave-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 20%, rgba(28, 31, 34, 0.35) 55%, rgba(13, 15, 16, 0.6));
}

.wave-bg::after {
  content: "";
  position: absolute;
  left: 6%;
  bottom: 10%;
  width: 40%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 130, 32, 0.3), rgba(245, 130, 32, 0.08) 55%, transparent);
  filter: blur(16px);
  mix-blend-mode: screen;
  scale: 1.6 0.45;
  animation: shine 30s ease-in-out infinite alternate;
}

@keyframes wave-move {
  to {
    translate: -50% 0;
  }
}
@keyframes swell {
  from {
    translate: 0 2.4vh;
  }
  to {
    translate: 0 -2.4vh;
  }
}
@keyframes shine {
  from {
    translate: 0 0;
  }
  to {
    translate: 62vw -2vh;
  }
}
/* The scroll progress line, and the section index on the left (F24). */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 30;
  background: var(--web-cta);
  box-shadow: 0 0 12px rgba(245, 130, 32, 0.7);
}

.index {
  position: fixed;
  left: 22px;
  top: 50%;
  translate: 0 -50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.index a {
  position: relative;
  padding-left: 16px;
  font: 600 10.5px/1.4 var(--bs-font-monospace);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  text-decoration: none;
  transition: color 0.25s;
}

.index a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  translate: 0 -50%;
  background: var(--bs-border-color);
  transition: background 0.25s, scale 0.25s var(--web-spring);
}

.index a:hover {
  color: var(--bs-body-color);
}

.index a.active {
  color: var(--bs-emphasis-color);
}

.index a.active::before {
  background: var(--bs-primary);
  scale: 1.4;
  box-shadow: 0 0 10px rgba(245, 130, 32, 0.8);
}

@media (max-width: 1240px) {
  .index {
    display: none;
  }
}
/* The floating pill nav: shrinks a little once the page scrolls, and underlines the section in view (F24). */
.landing-nav {
  position: sticky;
  top: 14px;
  z-index: 10;
  max-width: 1120px;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  background: rgba(28, 31, 34, 0.66);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  transition: padding 0.35s var(--web-ease), box-shadow 0.35s var(--web-ease);
}

.landing-nav.compact {
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(245, 130, 32, 0.08);
}

.landing-nav .brand {
  padding: 0;
}

.landing-nav .puls-logo {
  height: 34px;
}

.landing-links {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-links a {
  position: relative;
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.landing-links a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--bs-emphasis-color);
}

.landing-links a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--web-ease);
}

.landing-links a.active {
  color: var(--bs-emphasis-color);
}

.landing-links a.active::after {
  transform: scaleX(1);
}

/* Reveals (F24): visible at rest; when a block enters, it plays rise once; a heading comes in through a mask. */
/* The reveal rises on translate, not transform: a filled transform animation would override a card's tilt (.feature) for good. */
.landing .reveal.in {
  animation: reveal-rise 0.7s var(--web-ease) both;
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.landing .reveal.in[data-delay="1"] {
  animation-delay: 0.1s;
}

.landing .reveal.in[data-delay="2"] {
  animation-delay: 0.2s;
}

.landing .reveal.in[data-delay="3"] {
  animation-delay: 0.3s;
}

.landing .reveal.in[data-delay="4"] {
  animation-delay: 0.4s;
}

.landing .reveal.in[data-delay="5"] {
  animation-delay: 0.5s;
}

.landing .section h2.reveal.in {
  animation: unmask 0.9s var(--web-ease) both;
}

@keyframes unmask {
  from {
    clip-path: inset(0 0 100% 0);
    translate: 0 22px;
  }
  to {
    clip-path: inset(-10% 0 -10% 0);
    translate: 0 0;
  }
}
/* Bright in the middle of the screen, dim at its edges: content comes into focus as it passes (scroll-driven). */
@supports (animation-timeline: view()) {
  .landing .focus {
    animation: focus linear both;
    animation-timeline: view();
  }
  @keyframes focus {
    0% {
      opacity: 0.45;
    }
    14% {
      opacity: 1;
    }
    88% {
      opacity: 1;
    }
    100% {
      opacity: 0.45;
    }
  }
}
/* Pill buttons. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), background 0.2s, color 0.2s;
  white-space: nowrap;
}

.pill-lg {
  padding: 15px 28px;
  font-size: 15.5px;
}

/* The primary pill (F24): on hover its gradient shifts and a light sheen sweeps across it; a .magnet one also follows
   the pointer a few pixels (js/landing.js), so the lift is left to the ghost pill. */
.pill-primary {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--web-cta);
  background-size: 200% 100%;
  box-shadow: 0 10px 26px -10px rgba(245, 130, 32, 0.8);
  will-change: transform;
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), background-position 0.6s var(--web-ease);
}

.pill-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
}

.pill-primary:hover {
  color: #fff;
  background-position: 100% 0;
  box-shadow: 0 16px 34px -12px rgba(245, 130, 32, 0.95);
}

.pill-primary:not(.magnet):hover {
  transform: translateY(-2px);
}

.pill-primary:hover::after {
  transition: transform 0.7s var(--web-ease);
  transform: translateX(120%) skewX(-20deg);
}

.pill-ghost {
  color: var(--bs-emphasis-color);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pill-ghost:hover {
  color: var(--bs-emphasis-color);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* The hero. */
.hero {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(56px, 10vw, 110px) 0 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-mark-lg {
  width: 96px;
  height: 96px;
  margin-bottom: 30px;
}

.hero-mark-lg img, .hero-mark-lg .puls-tile {
  border-radius: 22px;
}

/* The hero's mark sends out the same orange ring as a busy specialist's avatar (the delegation card and the Werk item). */
.hero-mark-lg .puls-tile {
  animation: ring 1.8s var(--web-ease) infinite;
}

/* Inside the app icon only the green source pulses; the glow crossing the rings is the logo's. */
.hero-mark .puls-glow {
  animation: none;
}

.hero-mark:hover .puls-source {
  animation-duration: 1.4s;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bs-primary-text-emphasis);
  background: rgba(245, 130, 32, 0.1);
  border: 1px solid rgba(245, 130, 32, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.04;
  color: var(--bs-emphasis-color);
  margin: 0 0 22px;
  text-wrap: balance;
  animation: rise 0.7s var(--web-ease) both;
}

.gradient-text {
  background: linear-gradient(100deg, var(--bs-primary) 10%, #f7b267 50%, var(--bs-success-text-emphasis) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--bs-secondary-color);
  max-width: 640px;
  margin: 0 0 34px;
  text-wrap: balance;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---- The hero's motion (F24): the headline word by word, the definition as the eyebrow, the "Nuut" pill, a proof
   line and keywords under the buttons. The gradient line comes in as one piece without the blur: a filter on text that
   is clipped to a background makes the browser drop the text. ---- */
.hero h1 {
  animation: none;
}

.hero h1 .w {
  display: inline-block;
  animation: word 0.8s var(--web-ease) both;
  animation-delay: calc(0.25s + var(--i) * 90ms);
}

@keyframes word {
  from {
    opacity: 0;
    translate: 0 18px;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
.hero h1 .gradient-text.w {
  animation-name: word-plain;
}

@keyframes word-plain {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.hero .gradient-text {
  background-size: 200% 100%;
  animation: sheen 6s linear infinite;
}

@keyframes sheen {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.hero .eyebrow {
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 600;
  font-size: 13px;
  animation: rise 0.7s 0.1s var(--web-ease) both;
}

.hero .lead {
  margin-bottom: 32px;
  animation: rise 0.7s 0.9s var(--web-ease) both;
}

.hero .hero-actions {
  animation: rise 0.7s 1.05s var(--web-ease) both;
}

.hero .news-pill {
  color: var(--bs-body-color);
}

.hero .news-pill i {
  font-style: normal;
  color: var(--bs-primary);
  transition: translate 0.25s var(--web-spring);
}

.hero .news-pill:hover i {
  translate: 3px 0;
}

.proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--bs-secondary-color);
  animation: rise 0.7s 1.15s var(--web-ease) both;
}

.proof .ic {
  color: var(--bs-success-text-emphasis);
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--bs-tertiary-color);
  font-weight: 600;
  letter-spacing: 0.3px;
  animation: rise 0.7s 1.25s var(--web-ease) both;
}

/* ---- The app in the page (F24, Components/LandingDemo.razor): a three-panel frame that lies tilted back and flattens
   as it scrolls up into view (scroll-driven where the browser can; js sets --p elsewhere). The pieces inside are the
   app's own classes; the frame is demo-*. ---- */
.showcase {
  max-width: 1080px;
  margin: 36px auto 0;
  padding: 10px;
  border-radius: 26px;
  scroll-margin-top: 96px;
  background: linear-gradient(160deg, rgba(245, 130, 32, 0.35), rgba(255, 255, 255, 0.06) 40%, rgba(56, 180, 73, 0.3));
  box-shadow: 0 40px 100px -40px rgba(245, 130, 32, 0.45);
  animation: rise 0.9s 1.2s var(--web-ease) both;
}

.showcase {
  --p: 0;
  transform: perspective(1400px) rotateX(calc(16deg * (1 - var(--p)))) scale(calc(0.94 + 0.06 * var(--p)));
  transform-origin: 50% 0;
  will-change: transform;
}

@supports (animation-timeline: view()) {
  .showcase {
    transform: none;
    animation: flatten linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 85%;
  }
  @keyframes flatten {
    from {
      transform: perspective(1400px) rotateX(16deg) scale(0.94);
      opacity: 0.7;
    }
    to {
      transform: perspective(1400px) rotateX(0) scale(1);
      opacity: 1;
    }
  }
}
.showcase-hint {
  text-align: center;
  color: var(--bs-tertiary-color);
  font-size: 12px;
  margin: 14px 0 0;
  letter-spacing: 0.4px;
}

.replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bs-body-color);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s, color 0.2s, transform 0.25s var(--web-spring);
}

.replay:hover {
  color: var(--bs-emphasis-color);
  border-color: rgba(245, 130, 32, 0.5);
  transform: translateY(-1px);
}

.replay .ic {
  color: var(--bs-primary);
}

.demo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 250px;
  min-height: 440px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bs-body-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  text-align: left;
}

.demo-side, .demo-work {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  background: var(--bs-tertiary-bg);
  min-width: 0;
}

.demo-work {
  background: rgba(255, 255, 255, 0.02);
  border-left: 1px solid var(--bs-border-color);
  padding: 0;
  gap: 0;
}

.demo-work .work-head {
  padding: 14px 12px 10px;
}

.demo-work .work-body {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-logo {
  height: 26px;
  align-self: flex-start;
  margin-bottom: 6px;
}

.demo-new {
  background: var(--web-cta);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 10px;
}

.demo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  margin-top: 8px;
}

.demo-chat-item {
  color: var(--bs-secondary-color);
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.3s, color 0.3s;
}

.demo-chat-item.active {
  background: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 16px;
  min-width: 0;
}

.demo-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
}

.demo .user-message {
  max-width: 78%;
  padding: 9px 14px;
  border-radius: 18px 18px 5px 18px;
}

.demo .delegation {
  padding: 11px 14px;
  border-radius: 16px;
  margin: 0;
}

.demo .delegation-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.demo .delegation-agent {
  font-size: 12.5px;
}

.demo .work-item {
  padding: 12px;
}

.demo-answer {
  color: var(--bs-body-color);
  line-height: 1.65;
  min-height: 1em;
  animation: rise 0.4s var(--web-ease) both;
}

.demo-answer b {
  color: var(--bs-emphasis-color);
}

.demo-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--bs-primary);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 0.9s steps(1) infinite;
}

.demo-source {
  color: var(--bs-success-text-emphasis);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: rise 0.3s var(--web-ease) both;
}

.demo-composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-emphasis-color);
  background: rgba(37, 41, 45, 0.9);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 9px 9px 9px 14px;
  min-height: 44px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.demo-composer.focus {
  border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-body-bg));
  box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.12);
}

.demo-composer .text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-composer .text:empty::before {
  content: "Boodskap aan Puls";
  color: var(--bs-tertiary-color);
}

.demo-composer .send {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 14px;
  animation: none;
}

.demo-composer .send.go {
  animation: breathe 2.4s var(--web-ease) infinite;
}

/* Sections. */
.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 120px) 0 0;
  text-align: center;
  scroll-margin-top: 90px;
}

.section h2, .cta h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--bs-emphasis-color);
  margin: 0 0 40px;
  text-wrap: balance;
}

.section h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--bs-emphasis-color);
  margin: 0 0 8px;
}

.section p {
  color: var(--bs-secondary-color);
  margin: 0;
}

.landing .sub {
  color: var(--bs-secondary-color);
  max-width: 58ch;
  margin: -22px auto 38px;
  font-size: 16px;
  text-wrap: balance;
}

/* ---- Cards (F24): one surface for Hoe dit werk, the bento and (step 4) the prices. A spotlight follows the pointer
   (chat.js sets --mx/--my) and a .feature card tilts a little toward it (--rx/--ry/--ty). ---- */
.landing .card {
  position: relative;
  isolation: isolate;
  background: color-mix(in srgb, var(--bs-secondary-bg) 80%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(8px);
  transition: transform 0.3s var(--web-ease), border-color 0.3s, box-shadow 0.3s;
}

.landing .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 130, 32, 0.14), transparent 60%);
  transition: opacity 0.3s var(--web-ease);
}

.landing .card:hover {
  border-color: rgba(245, 130, 32, 0.35);
  box-shadow: 0 24px 50px -24px rgba(245, 130, 32, 0.4);
}

.landing .card:hover::after {
  opacity: 1;
}

.landing .feature {
  transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(var(--ty, 0));
  transition: transform 0.25s var(--web-ease), border-color 0.3s, box-shadow 0.3s;
}

.landing .num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-weight: 800;
  color: #fff;
  background: var(--web-cta);
  box-shadow: 0 10px 22px -10px rgba(245, 130, 32, 0.9);
}

.landing .answer {
  color: var(--bs-body-color);
  line-height: 1.65;
}

.landing .answer b {
  color: var(--bs-emphasis-color);
}

.landing .card .user-message, .landing .panel .user-message, .landing .mini .user-message {
  align-self: flex-end;
  max-width: 90%;
  padding: 7px 11px;
  font-size: 12px;
  border-radius: 14px 14px 4px 14px;
}

.landing .card .delegation, .landing .panel .delegation {
  padding: 9px 11px;
  border-radius: 14px;
  margin: 0;
  font-size: 12px;
}

.landing .card .delegation-avatar, .landing .panel .delegation-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.landing .card .delegation-agent, .landing .panel .delegation-agent {
  font-size: 12px;
}

/* Hoe dit werk: three cards in one row, so the section fits a screen; the stage sits above each card's words. */
.stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
  margin-bottom: 8px;
  perspective: 1200px;
}

.stack-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 18px 24px;
  background: color-mix(in srgb, var(--bs-secondary-bg) 92%, transparent);
}

.stack-card > div:first-child {
  order: 2;
  padding: 0 6px;
}

.stack-card .num {
  margin-bottom: 12px;
}

.stack-card h3 {
  font-size: 17px;
}

.stack-card p {
  font-size: 14px;
}

.stage {
  position: relative;
  height: 180px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(400px 200px at 50% 110%, rgba(245, 130, 32, 0.12), transparent 70%), var(--bs-body-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.stage .source {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bs-success-text-emphasis);
  box-shadow: 0 0 0 6px rgba(56, 180, 73, 0.18), 0 0 30px rgba(56, 180, 73, 0.8);
  animation: source-beat 3.6s ease-in-out infinite;
}

.stage .r {
  position: absolute;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 130, 32, 0.45);
  opacity: 0;
  animation: pulse-ring 4.2s cubic-bezier(0.25, 0.6, 0.3, 1) infinite;
}

.stage .r:nth-child(2) {
  animation-delay: 1.4s;
}

.stage .r:nth-child(3) {
  animation-delay: 2.8s;
}

.stage .mini {
  position: relative;
  width: min(300px, 90%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
}

.stage-2 .mini .delegation {
  margin-top: 56px;
}

.stage-3 .mini {
  gap: 6px;
  font-size: 11px;
}

.stage-3 .mini .user-message {
  padding: 5px 9px;
  font-size: 11px;
}

.stage-3 .mini .delegation {
  padding: 6px 9px;
}

.stage-3 .mini .delegation-avatar {
  width: 22px;
  height: 22px;
}

.stage .line {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.stage-3 .line {
  animation: grow 1.4s var(--web-ease) both;
  transform-origin: left;
}

@keyframes grow {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}
/* In die app, pinned: the chips light up as you scroll and the frame's screen changes with them. */
.pin {
  position: relative;
  height: 200vh;
  text-align: left;
}

.pin-inner {
  position: sticky;
  top: max(84px, 50vh - 260px);
  height: min(100vh - 110px, 520px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.chips button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bs-body-color);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--web-spring), box-shadow 0.25s;
}

.chips button .ic {
  width: 14px;
  height: 14px;
  color: var(--bs-primary);
}

.chips button.active {
  color: #fff;
  background: var(--web-cta);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(245, 130, 32, 0.9);
}

.chips button.active .ic {
  color: #fff;
}

.pin-text h3 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--bs-emphasis-color);
  margin: 0 0 10px;
}

.pin-text p {
  color: var(--bs-secondary-color);
  max-width: 46ch;
  font-size: 16px;
}

.pin-frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bs-body-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 100px -40px rgba(245, 130, 32, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  font-size: 12.5px;
}

.panel {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  translate: 0 18px;
  scale: 0.98;
  transition: opacity 0.5s var(--web-ease), translate 0.5s var(--web-ease), scale 0.5s var(--web-ease);
  pointer-events: none;
}

.panel.active {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.panel .attach {
  align-self: flex-end;
  font-size: 11px;
  padding: 3px 10px;
}

.panel .meter {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 11px;
  font-weight: 800;
  color: var(--bs-emphasis-color);
  background: rgba(245, 130, 32, 0.1);
  border: 1px solid rgba(245, 130, 32, 0.35);
  font-variant-numeric: tabular-nums;
}

.panel .meter .ic {
  color: var(--bs-primary);
}

.panel .meter small {
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.panel .cost-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--bs-secondary-color);
}

.panel .cost-row strong {
  color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums;
}

.panel .commit {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.panel .commit code {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--bs-primary-text-emphasis);
}

.panel .commit span {
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.panel .commit small {
  margin-left: auto;
  color: var(--bs-tertiary-color);
  white-space: nowrap;
}

/* Kenmerke as a bento: six tiles, two of them tall, one wide; each tile shows a little of what it says. */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "a a b" "c d b" "c e f";
  gap: 16px;
  text-align: left;
  perspective: 1200px;
}

.t-a {
  grid-area: a;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: center;
}

.t-b {
  grid-area: b;
}

.t-c {
  grid-area: c;
}

.t-d {
  grid-area: d;
}

.t-e {
  grid-area: e;
}

.t-f {
  grid-area: f;
}

.bento .card {
  padding: 24px;
}

.bento .work-step {
  animation: tick 6s linear infinite both;
}

.bento .work-step:nth-child(2) {
  animation-delay: 1.2s;
}

.bento .work-step:nth-child(3) {
  animation-delay: 2.4s;
}

.bento .work-step:nth-child(4) {
  animation-delay: 3.6s;
}

@keyframes tick {
  0%, 100% {
    opacity: 0.35;
  }
  20%, 70% {
    opacity: 1;
  }
}
.srcs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.srcs span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  color: var(--bs-body-color);
}

.srcs i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-success-text-emphasis));
}

.panel .srcs {
  margin-top: 0;
}

.big {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums;
  margin: 14px 0 6px;
  line-height: 1;
}

.landing .card p.small {
  font-size: 12.5px;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
  margin-top: 16px;
}

.bars i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(var(--bs-primary), var(--web-primary-deep));
  opacity: 0.85;
  transform-origin: bottom;
  animation: grow-y 1s var(--web-ease) both;
  height: var(--h);
}

.bars i:nth-child(odd) {
  background: linear-gradient(var(--bs-success-text-emphasis), var(--bs-success));
}

.bars i:nth-child(2) {
  animation-delay: 0.1s;
}

.bars i:nth-child(3) {
  animation-delay: 0.2s;
}

.bars i:nth-child(4) {
  animation-delay: 0.3s;
}

.bars i:nth-child(5) {
  animation-delay: 0.4s;
}

.bars i:nth-child(6) {
  animation-delay: 0.5s;
}

.bars i:nth-child(7) {
  animation-delay: 0.6s;
}

@keyframes grow-y {
  from {
    scale: 1 0;
  }
  to {
    scale: 1 1;
  }
}
/* In the Koste panel and the Koste tile the chart takes all the room that is left. */
.panel .bars-fill {
  flex: 1;
  height: auto;
  min-height: 120px;
  margin-top: 6px;
  gap: 8px;
}

.t-c {
  display: flex;
  flex-direction: column;
}

.t-c .bars-fill {
  flex: 1;
  height: auto;
  min-height: 100px;
  margin-top: 14px;
  gap: 7px;
}

/* The marquee of what a specialist can hold. */
.marquee {
  margin: 56px auto 0;
  max-width: 1120px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: marquee 48s linear infinite;
}

.track.rev {
  animation-direction: reverse;
  animation-duration: 56s;
}

.marquee:hover .track, .marquee.paused .track {
  animation-play-state: paused;
}

.marquee-pause {
  display: block;
  margin: 40px auto -28px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bs-secondary-color);
  font-size: 12px;
  font-weight: 600;
  transition: color 0.2s, border-color 0.2s;
}

.marquee-pause:hover, .marquee-pause[aria-pressed=true] {
  color: var(--bs-emphasis-color);
  border-color: rgba(245, 130, 32, 0.5);
}

@keyframes marquee {
  to {
    translate: -50% 0;
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--bs-font-monospace);
  color: var(--bs-primary-text-emphasis);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bs-border-color);
  white-space: nowrap;
}

.tag.set {
  font-family: inherit;
  font-size: 13px;
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.feature-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: 18px;
  background: rgba(245, 130, 32, 0.12);
  border: 1px solid rgba(245, 130, 32, 0.25);
  position: relative;
}

.feature-icon::after {
  content: "";
  position: absolute;
  inset: 11px;
  background: var(--bs-primary);
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

/* Syfers: a band with the measured numbers; the brand's pulse rings behind its right half. */
.stats-band {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 56px);
  text-align: left;
  background: color-mix(in srgb, var(--bs-secondary-bg) 70%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: center;
  isolation: isolate;
}

.stats-band .pulse-bg {
  inset: auto;
  left: 74%;
  top: 50%;
  translate: -50% -50%;
  width: 900px;
  aspect-ratio: 1;
  z-index: -1;
  overflow: visible;
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}

.stats-band .pulse-bg span {
  width: 22%;
  border-color: rgba(245, 130, 32, 0.32);
  animation-duration: 9s;
}

.stats-band .pulse-bg::before {
  width: 36%;
}

.stats-band .source {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bs-success-text-emphasis);
  box-shadow: 0 0 0 6px rgba(56, 180, 73, 0.18), 0 0 30px rgba(56, 180, 73, 0.8);
  animation: source-beat 3.6s ease-in-out infinite;
}

.stats-band h2 {
  margin-bottom: 10px;
}

.stats-band > div > p {
  color: var(--bs-secondary-color);
  max-width: 42ch;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat {
  background: rgba(28, 31, 34, 0.74);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat b {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--bs-emphasis-color);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat b .unit {
  font-size: 0.5em;
  color: var(--bs-secondary-color);
  font-weight: 700;
  letter-spacing: 0;
}

.stat > span {
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}

.stat small {
  color: var(--bs-tertiary-color);
  font-size: 12px;
}

/* Pryse: three of the same cards, the examples counting up. */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
  align-items: stretch;
  perspective: 1200px;
}

.example {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: var(--bs-secondary-color);
}

.example strong {
  color: var(--bs-emphasis-color);
  font-variant-numeric: tabular-nums;
}

/* Vrae: an accordion with some presence (js/landing.js faq() opens one at a time). */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.q {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--bs-secondary-bg) 80%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 0 22px 0 26px;
  transition: border-color 0.3s, transform 0.3s var(--web-ease), box-shadow 0.3s, background 0.3s;
}

.q::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--web-cta);
  transform: scaleY(0);
  transition: transform 0.4s var(--web-spring);
}

.q::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 130, 32, 0.14), transparent 60%);
  transition: opacity 0.3s var(--web-ease);
}

.q:hover {
  transform: translateX(4px);
  border-color: rgba(245, 130, 32, 0.3);
}

.q:hover::after {
  opacity: 1;
}

.q.open {
  transform: none;
  border-color: rgba(245, 130, 32, 0.45);
  background: color-mix(in srgb, var(--bs-secondary-bg) 94%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 48px -26px rgba(245, 130, 32, 0.5);
}

.q.open::before {
  transform: scaleY(1);
}

.q button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  background: none;
  border: 0;
  color: var(--bs-emphasis-color);
  font-weight: 700;
  text-align: left;
  font-size: 15.5px;
  transition: color 0.2s;
}

.q button .k {
  font: 600 11px var(--bs-font-monospace);
  letter-spacing: 1px;
  color: var(--bs-tertiary-color);
  flex: none;
  width: 24px;
  transition: color 0.25s;
}

.q.open button .k, .q:hover button .k {
  color: var(--bs-primary-text-emphasis);
}

.q button .t {
  flex: 1;
  min-width: 0;
}

.q button::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 130, 32, 0.12);
  border: 1px solid rgba(245, 130, 32, 0.25);
  color: var(--bs-primary);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  transition: transform 0.45s var(--web-spring), background 0.3s, color 0.3s, border-color 0.3s;
}

.q:hover button::after {
  background: rgba(245, 130, 32, 0.2);
}

.q.open button::after {
  transform: rotate(135deg);
  background: var(--web-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(245, 130, 32, 0.9);
}

.q .body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--web-ease);
}

.q.open .body {
  grid-template-rows: 1fr;
}

.q .body > div {
  overflow: hidden;
}

.q .body p {
  padding: 0 0 20px 38px;
  color: var(--bs-secondary-color);
  max-width: 62ch;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 0.35s var(--web-ease), translate 0.35s var(--web-ease);
}

.q.open .body p {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.15s;
}

/* The way in, with the brand's heartbeat behind it, and the footer. */
.cta {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  margin: clamp(70px, 10vw, 120px) auto 0;
  padding: clamp(40px, 6vw, 64px) 24px;
  text-align: center;
  border-radius: 28px;
  background: color-mix(in srgb, var(--bs-secondary-bg) 70%, transparent);
  border: 1px solid rgba(245, 130, 32, 0.2);
}

.cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  width: 700px;
  height: 500px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 130, 32, 0.26), transparent 65%);
  animation: heartbeat 3.6s ease-in-out infinite;
  pointer-events: none;
}

.cta h2 {
  position: relative;
  margin-bottom: 26px;
}

.cta .pill {
  position: relative;
}

.landing-footer {
  max-width: 1120px;
  margin: 60px auto 0;
  padding: 26px 0 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  color: var(--bs-secondary-color);
  border-top: 1px solid var(--bs-border-color);
  font-size: 14px;
}

.landing-footer-link {
  color: var(--bs-body-color);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.landing-footer-copy {
  margin-left: auto;
  color: var(--bs-tertiary-color);
}

.motion-pill {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  border: 1px solid rgba(245, 130, 32, 0.4);
  background: rgba(35, 39, 43, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(245, 130, 32, 0.45);
}

.motion-pill .ic {
  color: var(--bs-primary);
}

.motion-pill span {
  color: var(--bs-secondary-color);
  font-weight: 500;
}

/* Phones and tablets. */
@media (max-width: 900px) {
  .demo {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-side, .demo-work {
    display: none;
  }
  .showcase {
    transform: none !important;
    animation: rise 0.9s 1.2s var(--web-ease) both !important;
  }
  .stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage {
    height: 160px;
  }
  .pin {
    height: auto;
  }
  .pin-inner {
    position: static;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .pin-frame {
    aspect-ratio: auto;
    min-height: 320px;
  }
  .panel {
    position: relative;
    display: none;
  }
  .panel.active {
    display: flex;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }
  .bento .card {
    grid-area: auto;
  }
  .t-a {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .landing-links {
    display: none;
  }
  .landing-nav {
    padding-left: 16px;
  }
  .hero h1 {
    letter-spacing: -1.2px;
  }
}
/* The landing page's line icons, as masks (painted orange by .feature-icon). */
.i-search {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5 21 21'/></svg>");
}

.i-file {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h8l5 5v13H6z'/><path d='M14 3v5h5M9 13h7M9 17h7'/></svg>");
}

.i-clock {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}

.i-chart {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20V4M16 20v-7M22 20H2'/></svg>");
}

.i-pulse {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12h4l3-7 6 14 3-7h4'/></svg>");
}

.i-coin {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15 9.5c-.6-1-1.7-1.5-3-1.5-1.7 0-3 .9-3 2s1.3 1.7 3 2 3 .9 3 2-1.3 2-3 2c-1.3 0-2.4-.5-3-1.5M12 6v2M12 16v2'/></svg>");
}

/* ---- The three panels (F20): sidebar, chat, Werk. From xl (1200px) the Werk panel is a fourth column that folds away
   (.work-hidden); below it, a Bootstrap offcanvas that slides in from the right (out of the grid, so nothing moves). ---- */
@media (min-width: 1200px) {
  .app {
    grid-template-columns: var(--sidebar-w, 280px) 8px minmax(0, 1fr) var(--work-w, 330px);
  }
  .sidebar-hidden .app {
    grid-template-columns: 0 0 minmax(0, 1fr) var(--work-w, 330px);
  }
  .work-hidden .app {
    grid-template-columns: var(--sidebar-w, 280px) 8px minmax(0, 1fr) 0;
  }
  .sidebar-hidden.work-hidden .app {
    grid-template-columns: 0 0 minmax(0, 1fr) 0;
  }
  .work.offcanvas-xl {
    display: flex;
    flex-direction: column;
    visibility: visible;
  }
  /* Its column is 0 wide when folded, so its border would stick out by 1px and give the whole page scrollbars. */
  .work-hidden .work {
    visibility: hidden;
    border: 0;
  }
}
.work {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--bs-body-color);
  border-left: 1px solid var(--bs-border-color);
  /* A gradient, not a colour: Bootstrap makes an offcanvas's background-color transparent at its breakpoint. */
  background-image: linear-gradient(color-mix(in srgb, var(--bs-tertiary-bg) 88%, transparent), color-mix(in srgb, var(--bs-tertiary-bg) 88%, transparent));
}

@media (max-width: 1199.98px) {
  .work.offcanvas-xl {
    --bs-offcanvas-width: min(360px, 90vw);
    --bs-offcanvas-transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    background-color: var(--bs-tertiary-bg);
  }
}
.work-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 12px 20px;
  border-bottom: 1px solid var(--bs-border-color);
}

.work-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--bs-emphasis-color);
}

.work-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
  border-radius: 999px;
  padding: 1px 8px;
}

.work-head .icon {
  margin-left: auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--bs-secondary-color);
}

.work-head .icon + .icon {
  margin-left: 0;
}

.work-head .icon:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

.work-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-gutter: stable;
}

.work-item {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: rise 0.4s var(--web-ease) both;
}

.work-item.running {
  border: 1px solid transparent;
  background: linear-gradient(var(--bs-secondary-bg), var(--bs-secondary-bg)) padding-box, conic-gradient(from var(--angle), var(--bs-primary), var(--bs-success-text-emphasis), var(--bs-primary)) border-box;
  animation: rise 0.4s var(--web-ease) both, spin 2.6s linear infinite;
}

.work-item.running .work-avatar {
  animation: ring 1.8s var(--web-ease) infinite;
}

.work-status {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.work-item.running .work-status {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.work-item.failed .work-status {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.work-steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.work-steps::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--bs-primary), var(--bs-success-text-emphasis));
  opacity: 0.45;
}

.work-step {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  min-width: 0;
  animation: rise 0.3s var(--web-ease) both;
}

.work-step-mark {
  font-weight: 700;
  color: var(--bs-success-text-emphasis);
  width: 12px;
  flex: none;
}

.work-step.waiting, .work-step.waiting .work-step-mark {
  color: var(--bs-primary-text-emphasis);
}

.work-step.failed .work-step-mark {
  color: var(--bs-danger);
}

.work-step-name {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  flex: none;
}

.work-step-args {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--bs-tertiary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* F30 step 6b: a minion the specialist handed a page to, nested under its step. */
.work-step.minion {
  align-items: flex-start;
}

.work-steps.nested {
  padding-left: 10px;
  margin-top: 2px;
}

.work-steps.nested::before {
  opacity: 0.25;
}

.toolset-chip.model {
  background: var(--bs-primary-bg-subtle, var(--bs-success-bg-subtle));
  color: var(--bs-primary-text-emphasis, var(--bs-link-color));
}

.delegation.minion {
  margin-left: 12px;
}

.delegation.minion .delegation-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
  background: linear-gradient(135deg, var(--bs-success), var(--bs-success-text-emphasis));
  color: var(--web-on-primary);
}

/* Below lg the Werk tab sits over the chat's top right: the messages start under it. */
@media (max-width: 991.98px) {
  .messages {
    padding-top: 64px;
  }
}
/* ---- The sidebar's contents (F20 step 4). ---- */
/* A line icon in the text colour: .ic plus one of the .i-* icons (their --icon). */
.ic {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.side-search kbd, .search-dialog kbd {
  margin-left: auto;
  font: 600 11px var(--bs-font-sans-serif);
  color: var(--bs-tertiary-color);
  background: rgba(var(--web-overlay-rgb), 0.06);
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  padding: 1px 6px;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--bs-body-color);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.side-link:hover {
  background: rgba(var(--web-overlay-rgb), 0.06);
  color: var(--bs-emphasis-color);
}

.side-link .ic {
  color: var(--bs-secondary-color);
}

.side-link:hover .ic {
  color: var(--bs-primary);
}

.sidebar-label {
  padding-top: 14px;
}

.sidebar-label-row .icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 16px;
  color: var(--bs-secondary-color);
}

.chat-item .item-menu {
  opacity: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--bs-secondary-color);
}

.chat-item:hover .item-menu, .chat-item.active .item-menu, .item-menu[aria-expanded=true] {
  opacity: 1;
}

.chat-item .item-menu:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

/* The chat menus (Bootstrap dropdowns), in the theme. */
.sidebar .dropdown-menu {
  --bs-dropdown-bg: var(--web-menu-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(var(--web-overlay-rgb), .07);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .2);
  --bs-dropdown-divider-bg: var(--bs-border-color);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 40px -12px rgba(var(--bs-black-rgb), 0.7);
  font-size: 14px;
  min-width: 210px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 7px 10px;
}

.dropdown-item .ic {
  color: var(--bs-secondary-color);
}

.dropdown-item:hover .ic {
  color: var(--bs-primary);
}

.dropdown-item.danger, .dropdown-item.danger .ic {
  color: var(--bs-danger);
}

/* The footer: a profile card, then the settings. */
.side-footer {
  margin: 0 -14px -16px;
  background: var(--web-sidebar-foot);
}

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--web-on-primary);
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-success-text-emphasis));
  flex: none;
}

.profile-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.profile-who strong {
  color: var(--bs-emphasis-color);
  font-size: 14px;
}

.profile-who small {
  color: var(--bs-secondary-color);
  font-size: 11.5px;
}

/* The chat search (Components/ChatSearch.razor). */
.search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(var(--web-backdrop-rgb), 0.6);
  backdrop-filter: blur(4px);
  animation: fade 0.2s ease both;
}

.search-dialog {
  position: fixed;
  z-index: 1051;
  top: min(14vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 100vw - 32px);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  border-radius: 18px;
  overflow: hidden;
  background: var(--web-dialog-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 30px 80px -20px rgba(var(--bs-black-rgb), 0.8), 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
  animation: pop 0.25s var(--web-spring) both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.98);
  }
}
.search-result .ic {
  color: var(--bs-secondary-color);
}

.search-result.selected {
  background: rgba(var(--bs-primary-rgb), 0.12);
}

.search-result.selected .ic {
  color: var(--bs-primary);
}

.i-compass {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m15.5 8.5-2 5-5 2 2-5z'/></svg>");
}

.i-sparkle {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v4M12 17v4M3 12h4M17 12h4M6.5 6.5l2.5 2.5M15 15l2.5 2.5M6.5 17.5 9 15M15 9l2.5-2.5'/></svg>");
}

.i-folder {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h6l2 2h10v11H3z'/></svg>");
}

.i-archive {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4h18v5H3zM5 9v11h14V9M10 13h4'/></svg>");
}

.i-chat {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/></svg>");
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 6px;
}

/* The sidebar's icons. */
.i-home {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11 12 4l9 7'/><path d='M5 10v10h14V10'/></svg>");
}

.i-info {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5.5'/><circle cx='12' cy='7.6' r='.6' fill='black'/></svg>");
}

.chat-title.muted {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.chat-heading .item-menu {
  opacity: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--bs-secondary-color);
}

.chat-heading .item-menu:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

.header-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-body-color);
  background: rgba(var(--web-overlay-rgb), 0.04);
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.header-button:hover, .header-button[aria-expanded=true] {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background: rgba(var(--web-overlay-rgb), 0.07);
}

.header-button .ic {
  color: var(--bs-primary);
}

.pill-plus {
  height: 36px;
  padding: 0 15px;
  font-size: 13px;
  color: var(--web-on-primary);
  background: var(--web-cta);
  box-shadow: 0 8px 20px -10px rgba(var(--bs-primary-rgb), 0.8);
}

.pill-plus:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(var(--bs-primary-rgb), 0.95);
}

.dropdown-item.active, .dropdown-item:active {
  background: rgba(var(--bs-primary-rgb), 0.14);
  color: var(--bs-emphasis-color);
}

.dropdown-item.active .ic {
  color: var(--bs-primary);
}

/* Every menu in the app, in the theme (the sidebar's rule, for the top bar too). */
.app .dropdown-menu {
  --bs-dropdown-bg: var(--web-menu-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(var(--web-overlay-rgb), .07);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .2);
  --bs-dropdown-divider-bg: var(--bs-border-color);
  --bs-dropdown-header-color: var(--bs-tertiary-color);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 40px -12px rgba(var(--bs-black-rgb), 0.7);
  font-size: 14px;
  min-width: 210px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .messages {
    padding-top: clamp(20px, 4vw, 44px);
  }
}
.toast-pill .ic {
  color: var(--bs-primary);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}
.i-check {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
}

.i-user {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/></svg>");
}

.locate-button .ic {
  color: var(--bs-primary);
}

/* The message box in the middle of an empty chat, at a width of its own. */
.composer-centred {
  width: min(680px, 100%);
  padding: 6px 0 0;
  background: none;
  animation: rise 0.6s 0.1s var(--web-ease) both;
}

.composer-centred > * {
  max-width: none;
}

.tool-button .ic {
  width: 17px;
  height: 17px;
}

.tool-button-label .ic {
  color: var(--bs-primary);
}

.composer .send, .composer .stop {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.dropup .dropdown-menu {
  margin-bottom: 8px !important;
}

.app .composer .dropdown-menu {
  --bs-dropdown-bg: var(--web-menu-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(var(--web-overlay-rgb), .07);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
}

@media (max-width: 600px) {
  .tool-button-label {
    font-size: 0;
    gap: 0;
  }
  .tool-button-label .ic {
    margin: 0;
  }
  .model-button {
    font-size: 12px;
  }
}
/* The composer's icons. */
.i-plus {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}

/* ---- Message actions and sources (F20 step 7). ---- */
.message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: -6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.turn:hover .message-actions, .message-actions:focus-within, .turn:last-child .message-actions {
  opacity: 1;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bs-secondary-color);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.action:hover {
  background: rgba(var(--web-overlay-rgb), 0.07);
  color: var(--bs-emphasis-color);
}

.action .ic {
  width: 15px;
  height: 15px;
}

.i-refresh {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.3-5.7L20 8M20 3v5h-5'/></svg>");
}

/* ---- The empty chat and the message box (F20 step 6). ---- */
.news-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-body-color);
  background: rgba(var(--web-overlay-rgb), 0.04);
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.2s, color 0.2s;
  animation: rise 0.6s var(--web-ease) both;
}

.news-pill:hover {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.5);
}

.news-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--web-on-primary);
  background: var(--web-cta);
  border-radius: 999px;
  padding: 3px 9px;
}

/* The composer in the middle of an empty chat. */
.topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 26px;
  animation: rise 0.6s 0.16s var(--web-ease) both;
}

.topic {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-body-color);
  background: rgba(var(--web-overlay-rgb), 0.04);
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.25s var(--web-spring);
}

.topic:hover {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.5);
  background: rgba(var(--bs-primary-rgb), 0.08);
  transform: translateY(-1px);
}

.side-link.active {
  background: rgba(var(--web-overlay-rgb), 0.07);
  color: var(--bs-emphasis-color);
}

.side-link.active .ic {
  color: var(--bs-primary);
}

.usage-meter .ic {
  color: var(--bs-primary);
}

.about {
  max-width: 640px;
  margin: 0 auto 22px !important;
  text-wrap: balance;
}

/* ---- Verken and Studio (F20 step 8): pages in the app's shell. ---- */
.page-view {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 0 40px;
  animation: rise 0.5s var(--web-ease) both;
}

.page-head {
  margin-bottom: 8px;
}

.page-head .eyebrow {
  margin-bottom: 14px;
}

.page-head h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--bs-emphasis-color);
  margin: 0 0 8px;
}

.page-head p {
  color: var(--bs-secondary-color);
  margin: 0 0 18px;
}

.page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.page-tabs a, .page-tabs button {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-body-color);
  text-decoration: none;
  background: rgba(var(--web-overlay-rgb), 0.04);
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.page-tabs a:hover, .page-tabs button:hover {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.page-tabs button.active {
  color: var(--web-on-primary);
  background: var(--web-cta);
  border-color: transparent;
}

.page-section {
  margin-top: 26px;
  scroll-margin-top: 20px;
}

.page-section h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--bs-emphasis-color);
  margin: 0 0 14px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  text-align: left;
  border-radius: 16px;
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  transition: transform 0.25s var(--web-spring), border-color 0.2s, box-shadow 0.25s;
}

.template-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  box-shadow: 0 18px 36px -18px rgba(var(--bs-primary-rgb), 0.45);
}

.template-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  background: rgba(var(--bs-primary-rgb), 0.12);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  color: var(--bs-primary);
}

.template-icon .ic {
  width: 18px;
  height: 18px;
}

.template-card strong {
  color: var(--bs-emphasis-color);
  font-size: 15px;
}

.template-text {
  color: var(--bs-secondary-color);
  font-size: 13px;
  line-height: 1.5;
}

.template-card small {
  color: var(--bs-tertiary-color);
  font-size: 11.5px;
  margin-top: 2px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  min-height: 110px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.2s, transform 0.25s var(--web-spring);
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.project-card .ic {
  color: var(--bs-primary);
}

.project-card strong {
  color: var(--bs-emphasis-color);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card small {
  color: var(--bs-tertiary-color);
  font-size: 12px;
  margin-top: auto;
}

.project-new {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: none;
}

.project-new .ic {
  width: 22px;
  height: 22px;
}

.i-github {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21'/></svg>");
}

.pill .ic {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .pricing, .stats-band, .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats-band .pulse-bg {
    left: 50%;
    top: 70%;
  }
}
/* The eval pages' shared styles, in their cascade order, so a site lists this one name and not six: what several of
   the studio's components draw and no one component holds, and what a site draws too. A component's own rules sit
   beside it, in its X.razor.scss (CL58). The pages' addresses are on every site, so every site lists it. */
.store-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-secondary-color);
}

.store-pill.up .dot {
  background: var(--web-live-dot);
}

.store-pill.down .dot {
  background: var(--bs-danger);
}

.store-banner {
  border-color: var(--bs-danger);
}

.store-banner p {
  margin: 6px 0 0;
  color: var(--bs-secondary-color);
}

.run-table tbody tr.selected td {
  background: rgba(var(--web-overlay-rgb), 0.06);
  color: var(--bs-emphasis-color);
}

.run-panel .danger {
  color: var(--bs-danger);
}

.manual-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-emphasis-color);
}

.manual-head kbd {
  margin-left: auto;
}

.conv-head .row-cost.small {
  margin-left: auto;
}

@keyframes pill-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
}
@media (max-width: 991.98px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .conv-row {
    grid-template-columns: 1fr;
  }
}
.trend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trend.small {
  margin: 2px 0 6px;
}

.trend.small .chart {
  padding: 6px 8px;
  background: none;
  border: 0;
  animation: none;
}

.trend.small .trend-svg {
  height: 54px;
}

.trend-panel .chart-head {
  gap: 8px;
}

.trend-grid > .trend-panel {
  justify-content: space-between;
}

@keyframes reveal {
  from {
    width: 0;
  }
}
.trend-point {
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  animation: fade 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 120ms + 1s);
}

.trend-point.here {
  stroke-width: 11;
}

.trend.small .trend-point {
  stroke-width: 5;
}

.trend-point:hover, .trend-point.hovered {
  filter: brightness(1.25);
  stroke-width: 10;
}

.mode-rate .rate-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.trend-delta.up {
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
}

.trend-delta.down {
  color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) :is(.trend-reveal, .trend-point) {
    animation: none;
  }
}
.run-report {
  margin-top: 6px;
}

.run-report h1 {
  font-size: 16px;
  margin: 10px 0 4px;
  color: var(--bs-emphasis-color);
}

.run-report h2 {
  font-size: 14px;
  margin: 14px 0 6px;
  color: var(--bs-primary-text-emphasis);
}

.run-report table {
  width: 100%;
}

.run-transcript {
  max-height: 70vh;
  overflow: auto;
  padding-right: 8px;
}

.run-transcript h1 {
  font-size: 16px;
  margin: 14px 0 4px;
  color: var(--bs-emphasis-color);
}

.run-transcript h2 {
  font-size: 14px;
  margin: 12px 0 6px;
  color: var(--bs-primary-text-emphasis);
}

.run-transcript h3 {
  font-size: 13.5px;
  margin: 10px 0 4px;
}

.run-transcript em {
  color: var(--bs-secondary-color);
}

/* Two columns: the work in the main one, the saved runs as a scrolling list on the right (Louis: it will get long). */
.admin-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.admin-col-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.admin-col-side {
  position: sticky;
  top: 0;
}

.runs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* CL26 (Louis: "make it fancy and human readable"): the Evals page's card. The name and what it proves; the latest run
   as a scorecard, a ring per mode; the runs before it down a timeline of dots, a bar per mode; what it checks in a
   fold. A run's tag and its dot share a colour: green recorded (the model answered), orange replay, grey re-score. */
.eval-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 20px 22px;
}

.status-pill.never-run {
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
}

.eval-trend {
  font-size: 13px;
  align-self: flex-start;
}

.eval-mode .donut {
  width: 112px;
  height: 112px;
}

.eval-tl-mode .rate-track {
  display: inline-block;
  width: 84px;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.eval-tl-mode .muted {
  font-size: 11.5px;
  white-space: nowrap;
}

.eval-kind.rule {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.eval-kind.model {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

@media (max-width: 575.98px) {
  .eval-card {
    padding: 16px;
  }
  .eval-checks-body {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .eval-checks-body dd {
    margin-bottom: 8px;
  }
  .eval-cost {
    margin-left: 0;
  }
  .eval-score-modes {
    justify-content: space-around;
    gap: 14px;
    padding: 0;
  }
  .eval-mode {
    min-width: 0;
  }
  .eval-mode .donut {
    width: 96px;
    height: 96px;
  }
  .eval-tl-mode {
    gap: 6px;
  }
  .eval-tl-mode .rate-track {
    width: 48px;
  }
}
.eval-list-item.selected {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  border-left-color: var(--bs-primary);
}

.check-script {
  margin: 0;
  font-size: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.running {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.status-pill.failed {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.runs-head .num, .run-row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.run-row.selected {
  background: var(--bs-primary-bg-subtle);
}

.fold-note {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--bs-secondary-color);
  margin-left: 4px;
}

.fold:not([open]) > .fold-head .fold-note::before {
  content: "— ";
}

.category-card h4 .muted {
  font-weight: 400;
  font-size: 12px;
  margin-left: auto;
}

.category-line-name .muted {
  font-size: 11.5px;
  margin-left: auto;
}

.trend.compact .trend-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.trend.compact .trend-values > span {
  flex-wrap: wrap;
}

.trend.compact .trend-panel {
  padding: 8px 10px 10px;
  background: none;
}

.trend.compact .trend-svg {
  height: 64px;
}

.trend.compact .chart-head {
  gap: 6px;
  font-size: 12px;
}

.trend.compact .chart-title > strong {
  font-weight: 600;
  font-size: 12px;
  color: var(--bs-secondary-color);
}

.trend.compact .trend-top {
  display: none;
}

.trend.compact > .chart-head {
  display: none;
}

@media (max-width: 1199.98px) {
  .admin-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-col-side {
    position: static;
  }
  .runs-list {
    max-height: none;
  }
}
/* A segmented control (the repeats): buttons in a pill, the chosen one lit; no native dropdown. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bs-body-bg);
}

.segmented button {
  background: transparent;
  border: 0;
  color: var(--bs-secondary-color);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.segmented button + button {
  border-left: 1px solid var(--bs-border-color);
}

.segmented button:hover:not(:disabled) {
  color: var(--bs-emphasis-color);
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.segmented button.active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* A check's card rolls up and down: its header is the summary, with the chip and the last cost; a chevron turns. */
/* F31: one fold for every check card (Louis), not a fold per card. */
/* The live run's conversations, rendered by the chat's TurnView; while a run goes the page is one column. */
.admin-cols.single {
  grid-template-columns: minmax(0, 1fr);
}

.live-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0 6px;
  border-top: 1px solid var(--bs-border-color);
}

.live-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary-color);
  font-size: 13px;
}

.live-chat .user-message {
  max-width: 70%;
}

/* The live run as a tree (F27): mode → conversation → turn, each a details node with its figures as chips. */
.tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.tree-node {
  border-left: 2px solid var(--bs-border-color);
  margin-left: 4px;
  padding-left: 10px;
}

.tree-node[open] {
  border-left-color: rgba(var(--bs-primary-rgb), 0.45);
}

.tree-node > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  padding: 7px 8px;
  border-radius: 10px;
  user-select: none;
}

.tree-node > summary::-webkit-details-marker {
  display: none;
}

.tree-node > summary:hover {
  background: rgba(var(--web-overlay-rgb), 0.04);
}

.tree-node > summary .chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--bs-secondary-color);
  border-bottom: 2px solid var(--bs-secondary-color);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--web-ease);
  margin-right: 2px;
}

.tree-node[open] > summary .chevron {
  transform: rotate(45deg);
}

.tree-mode > summary strong {
  color: var(--bs-primary-text-emphasis);
  font-size: 15px;
}

.tree-meta {
  color: var(--bs-tertiary-color);
  font-size: 12.5px;
}

.chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.chip.ok {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.chip.bad {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

/* A guess: neither right nor wrong, but not an answer (F31: a price without its source). */
.chip.warn {
  background: rgba(var(--bs-primary-rgb), 0.14);
  color: var(--bs-primary-text-emphasis);
}

.chip.busy {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.chip.hosts {
  white-space: normal;
  font-weight: 500;
}

.tree-turn-body .user-message {
  max-width: 70%;
}

.run-tabs a.active {
  color: var(--web-on-primary);
  background: var(--web-cta);
  border-color: transparent;
}

/* The studio's rules that lived with the admin's (F27, CL27): what several of its components share and no one
   component holds (CL58, step 4). */
/* ---- The studio's rules that lived with the admin's (F27, CL27, F53.2), kept here until CL58's step 4 moves them
   beside the studio's components; the admin frame's own are in AdminShell.razor.scss since step 3. ---- */
.admin-details summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  font-weight: 600;
  padding: 6px 0;
}

.admin-markdown {
  font-size: 13.5px;
}

.admin-markdown table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
}

.admin-markdown th, .admin-markdown td {
  border: 1px solid var(--bs-border-color);
  padding: 5px 9px;
}

.admin-pre {
  background: var(--web-code-bg);
  border-radius: 10px;
  padding: 12px;
  font: 12px/1.5 var(--bs-font-monospace);
  max-height: 420px;
  overflow: auto;
}

.run-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.run-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary-color);
  font-size: 13px;
}

.run-controls select {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 9px;
  padding: 5px 10px;
  font: inherit;
}

.run-panel .work-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.run-panel.running .work-status {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.run-panel.failed .work-status {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.run-log {
  min-height: 80px;
  white-space: pre-wrap;
}

/* The run's progress as a table (F27, Louis: "bigger and more detailed"): a row per turn, a summary row per conversation. */
.run-table {
  font-size: 13px;
  margin: 6px 0 10px;
}

.run-table td.hosts {
  font-size: 12px;
  color: var(--bs-secondary-color);
  max-width: 360px;
  word-break: break-word;
}

.run-table tr.summary td {
  background: rgba(var(--web-overlay-rgb), 0.03);
  color: var(--bs-emphasis-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.run-table tr.mode td {
  color: var(--bs-primary-text-emphasis);
  padding-top: 12px;
}

.run-table tr.failed td {
  color: var(--bs-danger);
}

.run-table tbody tr {
  cursor: default;
}

.summary-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-table .rate-track {
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: 6px;
  margin-right: 8px;
  border-radius: 3px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.run-log {
  max-height: none;
  font-size: 12.5px;
}

/* CL27: the Prompts page's table, one row a prompt, its file under its name. */
.prompts {
  overflow-x: auto;
}

/* F53.2: the strip that says a run is going, on every admin page; the whole line is the link to where it is followed. */
.admin-main .live-run-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 12px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
  font-size: 13px;
  text-decoration: none;
}

.admin-main .live-run-strip:hover {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.65);
}

.lvl.in {
  animation: zoom-in 0.4s var(--web-ease) both;
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoom-out {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(1.01);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tiles.small {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--bs-body-color);
  font: inherit;
  animation: rise 0.5s var(--web-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform 0.25s var(--web-spring), border-color 0.25s, box-shadow 0.25s;
}

button.tile {
  cursor: pointer;
}

button.tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  box-shadow: var(--web-glow);
}

.tile-value.model {
  font-size: 15px;
  letter-spacing: 0;
}

.chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 12px 16px 14px;
  animation: rise 0.5s var(--web-ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.chart-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-head.lead strong {
  font-size: 16px;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.turn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  background: none;
  border: 0;
  padding: 4px 2px 8px;
  color: var(--bs-body-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.turn-head {
  cursor: default;
  padding: 6px 8px 8px;
}

.turn-head:hover {
  background: none;
}

/* F31: a row's ways on are its buttons only (Louis): Speel af opens the chats, the link goes into the costs. */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.turn-head .row-actions {
  margin-left: 4px;
}

.turn-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bs-primary-text-emphasis);
  background: none;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.45);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.turn-open:hover, .turn-open:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.14);
}

.turn-open.quiet {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.turn-open.quiet:hover, .turn-open.quiet:focus-visible {
  color: var(--bs-primary-text-emphasis);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background: rgba(var(--bs-primary-rgb), 0.08);
}

.row-cost.small {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.turn-head .turn-cost {
  margin-left: auto;
}

.explorer-q {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-emphasis-color);
}

.explorer-q .muted {
  margin-right: 8px;
  font-size: 12px;
}

.xreplay .turn {
  margin-bottom: 0;
}

.xreplay .user-message {
  max-width: 70%;
}

/* The modes side by side at every level (Louis), in the run's order; one under the other when the screen is narrow. */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 20px;
  align-items: start;
}

.compare-head .muted {
  font-weight: 400;
  font-size: 12.5px;
  margin-left: auto;
}

.explorer-think {
  white-space: pre-wrap;
  color: var(--bs-secondary-color);
  font-size: 13px;
  border-left: 2px solid var(--bs-border-color);
  margin: 6px 0;
  padding: 2px 10px;
}

.explorer-calls {
  font-size: 12.5px;
  padding-left: 20px;
}

/* Taller cards (Louis), all the same: the rings in the middle of the room under the card's head. */
.chart-pair > .chart {
  min-height: 320px;
  padding: 16px 18px 20px;
}

.chart-pair > .chart > .donuts {
  flex: 1;
  align-items: center;
  padding: 14px 0 6px;
}

/* A chart's title explains itself on hover or focus (Louis): what it shows, good, bad and why. The card it sits in rises
   above its neighbours while the note is open (a grid item takes a z-index), so the next card can't cover it. */
.chart-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: help;
  border-radius: 6px;
  outline: none;
}

.chart:has(.chart-title:hover, .chart-title:focus-visible) {
  z-index: 5;
}

/* A section that rolls up (Louis): its head, a chevron that turns, folds it. */
.fold {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fold > .fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--bs-emphasis-color);
  padding: 4px 2px;
  border-radius: 8px;
}

.fold > .fold-head::-webkit-details-marker {
  display: none;
}

.fold > .fold-head:hover {
  color: var(--bs-primary-text-emphasis);
}

.fold-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bs-secondary-color);
  border-bottom: 2px solid var(--bs-secondary-color);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--web-ease);
}

.fold[open] > .fold-head .fold-chevron {
  transform: rotate(45deg);
}

.donut {
  width: 136px;
  height: 136px;
  transform: rotate(0deg);
}

@keyframes sweep {
  from {
    stroke-dasharray: 0 100;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) .explorer * {
    animation: none !important;
    transition: none !important;
  }
}
.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  font-size: 13.5px;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--bs-primary-text-emphasis);
  cursor: pointer;
  text-decoration: underline;
}

.agreement-bar .rate-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.calibration-verdict.short {
  color: var(--bs-primary-text-emphasis);
}

.studio-draft.active {
  border-color: var(--bs-primary);
}