/* OE – AI Scenario Assistant
 *
 * Sits on a navy section (e.g. oe-section-primary): light text, a slightly
 * darker chat panel. Layout: picker | chat; narrow: picker buttons in two
 * columns above the chat. Stages fade up in turn once script.js adds .is-on;
 * the hidden start state applies only under .is-js, so it reads without JS.
 */

.oe-block-ai-scenario-assistant {
  --oe-ai-scenario-assistant-text: var(--oe-color-primary-4);
  --oe-ai-scenario-assistant-soft: color-mix(in srgb, var(--oe-color-primary-4) 82%, transparent);
  --oe-ai-scenario-assistant-muted: color-mix(in srgb, var(--oe-color-primary-4) 68%, transparent);
  --oe-ai-scenario-assistant-line: color-mix(in srgb, var(--oe-color-primary-4) 14%, transparent);
  --oe-ai-scenario-assistant-line-strong: color-mix(in srgb, var(--oe-color-primary-4) 30%, transparent);
  --oe-ai-scenario-assistant-fill: color-mix(in srgb, var(--oe-color-primary-4) 5%, transparent);
  --oe-ai-scenario-assistant-panel: color-mix(in srgb, var(--oe-color-secondary) 82%, black);
  --oe-ai-scenario-assistant-accent: var(--oe-color-primary);
  --oe-ai-scenario-assistant-light: var(--oe-color-secondary-9-300);
  /* Hex exception, this block only (user-approved 2026-10-07 for the prototype's
     colours): the scenario pink has no --oe-* token */
  --oe-ai-scenario-assistant-pink: #E8B3D6;
  container: oe-ai-scenario-assistant / inline-size;
  color: var(--oe-ai-scenario-assistant-text);
}

.oe-block-ai-scenario-assistant *,
.oe-block-ai-scenario-assistant *::before,
.oe-block-ai-scenario-assistant *::after {
  box-sizing: border-box;
}

.oe-block-ai-scenario-assistant__layout {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: var(--oe-spacing-large);
  align-items: start;
}

/* ---------- Picker ---------- */

/* Stays in view while the (long) chat scrolls past, stopping at the bottom of the block */
.oe-block-ai-scenario-assistant__picker {
  position: sticky;
  top: var(--oe-spacing-4xlarge);
  align-self: start;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__pick-label {
  margin: 0;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-ai-scenario-assistant-soft);
}

.oe-block-ai-scenario-assistant__pick-list {
  display: grid;
  gap: var(--oe-spacing-xsmall);
  margin-top: var(--oe-spacing-small);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__pick {
  display: block;
  width: 100%;
  min-height: var(--oe-sizing-xlarge);
  margin: 0;
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line-strong);
  border-radius: var(--oe-border-radius-small);
  background: transparent;
  color: var(--oe-ai-scenario-assistant-text);
  font-family: inherit;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__pick:hover {
  background: var(--oe-color-trans-light-10);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__pick:focus-visible {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-ai-scenario-assistant-light);
  outline-offset: var(--oe-spacing-3xsmall);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__pick[aria-pressed="true"] {
  border-color: var(--oe-ai-scenario-assistant-accent);
  background: var(--oe-ai-scenario-assistant-accent);
}

.oe-block-ai-scenario-assistant__pick-sub {
  display: block;
  margin-top: var(--oe-spacing-3xsmall);
  font-size: var(--oe-font-size-xsmall);
  font-weight: 400;
  color: var(--oe-ai-scenario-assistant-muted);
}

[aria-pressed="true"] .oe-block-ai-scenario-assistant__pick-sub {
  color: var(--oe-ai-scenario-assistant-text);
}

/* ---------- Chat panel ---------- */

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__chat {
  margin: 0;
  padding: var(--oe-spacing-medium);
  border: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-ai-scenario-assistant-panel);
}

.oe-block-ai-scenario-assistant__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  padding-bottom: var(--oe-spacing-base);
  border-bottom: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line);
}

.oe-block-ai-scenario-assistant__live-dot {
  width: var(--oe-spacing-small);
  height: var(--oe-spacing-small);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-ai-scenario-assistant-accent);
  box-shadow: 0 0 0 var(--oe-spacing-2xsmall) color-mix(in srgb, var(--oe-ai-scenario-assistant-accent) 20%, transparent);
}

.oe-block-ai-scenario-assistant__name {
  font-size: var(--oe-font-size-base);
}

.oe-block-ai-scenario-assistant__sub {
  font-size: var(--oe-font-size-small);
  color: var(--oe-ai-scenario-assistant-muted);
}

/* Reserve height so switching scenarios doesn't make the page jump */
.oe-block-ai-scenario-assistant__body {
  min-height: calc(var(--oe-spacing-5xlarge) * 3);
}

.oe-block-ai-scenario-assistant__thread[hidden] {
  display: none;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__you {
  max-width: 88%;
  margin: var(--oe-spacing-medium) 0 0 auto;
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border-radius: var(--oe-border-radius-base) var(--oe-border-radius-base) var(--oe-border-radius-xsmall) var(--oe-border-radius-base);
  background: var(--oe-color-sky-blue);
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-large);
}

.oe-block-ai-scenario-assistant__typing {
  display: none;
}

.is-js .oe-block-ai-scenario-assistant__typing {
  display: inline-flex;
  gap: var(--oe-spacing-2xsmall);
  margin-top: var(--oe-spacing-base);
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border-radius: var(--oe-border-radius-base) var(--oe-border-radius-base) var(--oe-border-radius-base) var(--oe-border-radius-xsmall);
  background: var(--oe-color-trans-light-10);
}

.is-js .oe-block-ai-scenario-assistant__typing.is-done {
  display: none;
}

.oe-block-ai-scenario-assistant__typing span {
  width: var(--oe-spacing-xsmall);
  height: var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-ai-scenario-assistant-soft);
  animation: oe-ai-scenario-assistant-dot 1s ease-in-out infinite;
}

.oe-block-ai-scenario-assistant__typing span:nth-child(2) { animation-delay: .15s; }
.oe-block-ai-scenario-assistant__typing span:nth-child(3) { animation-delay: .3s; }

.oe-block-ai-scenario-assistant__ai {
  margin-top: var(--oe-spacing-base);
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-large);
  color: color-mix(in srgb, var(--oe-color-primary-4) 90%, transparent);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__answer {
  margin: 0;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oe-spacing-2xsmall);
  margin: var(--oe-spacing-small) 0 0;
  padding: 0;
  list-style: none;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__sources li {
  margin: 0;
  padding: var(--oe-spacing-3xsmall) var(--oe-spacing-xsmall);
  border: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line-strong);
  border-radius: var(--oe-border-radius-small);
  font-size: var(--oe-font-size-xsmall);
  color: var(--oe-ai-scenario-assistant-soft);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__label {
  margin: var(--oe-spacing-base) 0 var(--oe-spacing-xsmall);
  font-size: var(--oe-font-size-small);
  color: var(--oe-ai-scenario-assistant-light);
}

/* Inputs table */
.oe-block-ai-scenario-assistant__table-wrap {
  border: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line);
  border-radius: var(--oe-border-radius-small);
  overflow: hidden;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--oe-font-size-small);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table th,
.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table td {
  padding: var(--oe-spacing-xsmall) var(--oe-spacing-small);
  border: 0;
  text-align: left;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table th {
  font-weight: 500;
  color: var(--oe-ai-scenario-assistant-muted);
  background: var(--oe-ai-scenario-assistant-fill);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table td {
  border-top: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line);
  color: var(--oe-ai-scenario-assistant-text);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table td.oe-block-ai-scenario-assistant__change {
  color: var(--oe-ai-scenario-assistant-light);
}

/* Results: chart + figures */
.oe-block-ai-scenario-assistant__results {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--oe-spacing-small);
  align-items: stretch;
}

.oe-block-ai-scenario-assistant__chart,
.oe-block-ai-scenario-assistant__figure {
  padding: var(--oe-spacing-small);
  border: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line);
  border-radius: var(--oe-border-radius-small);
  background: var(--oe-ai-scenario-assistant-fill);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__chart-title {
  margin: 0;
  font-size: var(--oe-font-size-small);
  color: var(--oe-ai-scenario-assistant-text);
}

.oe-block-ai-scenario-assistant__svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--oe-spacing-xsmall);
}

.oe-block-ai-scenario-assistant__grid {
  stroke: var(--oe-color-primary-4);
  stroke-opacity: .1;
}

.oe-block-ai-scenario-assistant__axis {
  font-family: inherit;
  font-size: var(--oe-font-size-2xsmall);
  fill: var(--oe-ai-scenario-assistant-muted);
}

.oe-block-ai-scenario-assistant__line {
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oe-block-ai-scenario-assistant__line--base { stroke: var(--oe-ai-scenario-assistant-light); }

.oe-block-ai-scenario-assistant__line--scn {
  stroke: var(--oe-ai-scenario-assistant-pink);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* The scenario line draws in when its stage appears */
.is-js .oe-block-ai-scenario-assistant__stage:not(.is-on) .oe-block-ai-scenario-assistant__line--scn {
  stroke-dashoffset: 1;
}

.is-js .oe-block-ai-scenario-assistant__stage.is-on .oe-block-ai-scenario-assistant__line--scn {
  transition: stroke-dashoffset 1.2s ease .2s;
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oe-spacing-small);
  margin: var(--oe-spacing-2xsmall) 0 0;
  font-size: var(--oe-font-size-xsmall);
  color: var(--oe-ai-scenario-assistant-soft);
}

.oe-block-ai-scenario-assistant__key::before {
  content: "";
  display: inline-block;
  width: var(--oe-spacing-small);
  height: var(--oe-spacing-3xsmall);
  margin-right: var(--oe-spacing-2xsmall);
  border-radius: var(--oe-border-radius-xsmall);
  vertical-align: middle;
  background: var(--oe-ai-scenario-assistant-light);
}

.oe-block-ai-scenario-assistant__key--scn::before {
  background: var(--oe-ai-scenario-assistant-pink);
}

.oe-block-ai-scenario-assistant__figures {
  display: grid;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-ai-scenario-assistant__figure-label {
  display: block;
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-ai-scenario-assistant-muted);
}

.oe-block-ai-scenario-assistant__figure-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--oe-spacing-xsmall);
  margin-top: var(--oe-spacing-2xsmall);
  font-size: var(--oe-font-size-medium);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-ai-scenario-assistant-pink);
}

.oe-block-ai-scenario-assistant__figure-from {
  font-size: var(--oe-font-size-xsmall);
  color: var(--oe-ai-scenario-assistant-muted);
}

/* Illustrative (not clickable) buttons */
.oe-block-ai-scenario-assistant__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--oe-spacing-xsmall);
  margin-top: var(--oe-spacing-base);
}

.oe-block-ai-scenario-assistant__fake {
  display: inline-flex;
  align-items: center;
  min-height: var(--oe-sizing-large);
  padding: 0 var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line-strong);
  border-radius: var(--oe-border-radius-small);
  font-size: var(--oe-font-size-small);
}

.oe-block-ai-scenario-assistant__fake--primary {
  border-color: var(--oe-ai-scenario-assistant-accent);
  background: var(--oe-ai-scenario-assistant-accent);
}

.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__note,
.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__caption {
  margin: var(--oe-spacing-small) 0 0;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-large);
  color: var(--oe-ai-scenario-assistant-muted);
}

.oe-block-ai-scenario-assistant__note .oe-text-500 {
  color: var(--oe-ai-scenario-assistant-soft);
}

/* Screen-reader status ("… scenario shown"); two classes beat theme <p> margins */
.oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__status {
  position: absolute;
  width: var(--oe-spacing-5xsmall);
  height: var(--oe-spacing-5xsmall);
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Staged reveal ---------- */

.is-js .oe-block-ai-scenario-assistant__stage {
  opacity: 0;
  transform: translateY(var(--oe-spacing-xsmall));
  transition: opacity .45s ease, transform .45s ease;
}

.is-js .oe-block-ai-scenario-assistant__stage.is-on {
  opacity: 1;
  transform: none;
}

/* ---------- Narrow widths ---------- */

@container oe-ai-scenario-assistant (max-width: 60rem) {
  .oe-block-ai-scenario-assistant__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .oe-block-ai-scenario-assistant__picker {
    position: static;
  }

  .oe-block-ai-scenario-assistant__pick-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container oe-ai-scenario-assistant (max-width: 40rem) {
  .oe-block-ai-scenario-assistant__results {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Inputs table: each row becomes "Heading: value" pairs instead of scrolling sideways */
  .oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table thead {
    position: absolute;
    width: var(--oe-spacing-5xsmall);
    height: var(--oe-spacing-5xsmall);
    overflow: hidden;
    clip-path: inset(50%);
  }

  .oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table tr {
    display: block;
    padding: var(--oe-spacing-xsmall) 0;
    border-top: var(--oe-spacing-5xsmall) solid var(--oe-ai-scenario-assistant-line);
  }

  .oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table tr:first-child {
    border-top: 0;
  }

  .oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table td {
    display: flex;
    gap: var(--oe-spacing-xsmall);
    padding: var(--oe-spacing-3xsmall) var(--oe-spacing-small);
    border-top: 0;
  }

  .oe-block-ai-scenario-assistant .oe-block-ai-scenario-assistant__table td::before {
    content: attr(data-label) ":";
    flex: 0 0 40%;
    color: var(--oe-ai-scenario-assistant-muted);
  }
}

@container oe-ai-scenario-assistant (max-width: 28rem) {
  .oe-block-ai-scenario-assistant__pick-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Animation ---------- */

@keyframes oe-ai-scenario-assistant-dot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(calc(-1 * var(--oe-spacing-3xsmall))); }
}

.oe-block-ai-scenario-assistant--static .oe-block-ai-scenario-assistant__stage,
.oe-block-ai-scenario-assistant--static .oe-block-ai-scenario-assistant__line--scn {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-ai-scenario-assistant *,
  .oe-block-ai-scenario-assistant *::before,
  .oe-block-ai-scenario-assistant *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}