/* OE – MCP Chat Animation
 *
 * Base styles describe the FINAL state. script.js toggles the modifier
 * classes to play the loop. No background: the block sits on the hero
 * navy (--oe-color-secondary), so the hub, wires and sources are tuned
 * for that, while the chat card is white.
 */

.oe-block-mcp-chat-animation {
  --oe-mcp-chat-animation-hub-size: calc(var(--oe-sizing-xlarge) + var(--oe-spacing-medium));
  --oe-mcp-chat-animation-on-navy: color-mix(in srgb, var(--oe-color-primary-4) 75%, transparent);
  --oe-mcp-chat-animation-line: color-mix(in srgb, var(--oe-color-primary-4) 22%, transparent);
  --oe-mcp-chat-animation-line-on: color-mix(in srgb, var(--oe-color-primary) 70%, transparent);
  --oe-mcp-chat-animation-fade: 0.5s;
  --oe-mcp-chat-animation-answer-fade: 0.6s;

  container: oe-mcp-chat-animation / inline-size;
  position: relative;
  box-sizing: border-box;
  max-width: var(--oe-width-fixed-100);
  background: transparent;
}

.oe-block-mcp-chat-animation *,
.oe-block-mcp-chat-animation *::before,
.oe-block-mcp-chat-animation *::after {
  box-sizing: border-box;
}

/* Resets: two classes deep so theme and editor element styles don't win */
.oe-block-mcp-chat-animation p,
.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__sources,
.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source {
  margin: 0;
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__sources {
  padding: 0;
  list-style: none;
}

/* Screen-reader-only copy of the question (the visible one is typed out) */
.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__sr {
  position: absolute;
  width: var(--oe-spacing-5xsmall);
  height: var(--oe-spacing-5xsmall);
  margin: calc(var(--oe-spacing-5xsmall) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Layout: chat | hub | sources ---------- */

.oe-block-mcp-chat-animation__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) var(--oe-mcp-chat-animation-hub-size) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(var(--oe-spacing-medium), 3cqi, var(--oe-spacing-large));
}

/* Wires and travelling dots, measured and drawn by script.js */
.oe-block-mcp-chat-animation__wires {
  position: absolute;
  inset: 0;
  width: var(--oe-width-fixed-100);
  height: var(--oe-width-fixed-100);
  overflow: visible;
  pointer-events: none;
}

.oe-block-mcp-chat-animation__wire {
  fill: none;
  stroke: var(--oe-mcp-chat-animation-line);
  stroke-width: var(--oe-spacing-4xsmall);
  transition: stroke var(--oe-mcp-chat-animation-fade);
}

.oe-block-mcp-chat-animation__wire--on {
  stroke: var(--oe-mcp-chat-animation-line-on);
}

.oe-block-mcp-chat-animation__dot {
  fill: var(--oe-color-primary-4);
  r: var(--oe-spacing-2xsmall);
}

/* ---------- Chat card ---------- */

.oe-block-mcp-chat-animation__chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-base);
  min-width: 0;
  padding: var(--oe-spacing-medium);
  border-radius: var(--oe-border-radius-large);
  background: var(--oe-color-primary-4);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__question {
  align-self: flex-end;
  max-width: 90%;
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border-radius: var(--oe-border-radius-large) var(--oe-border-radius-large) var(--oe-border-radius-small) var(--oe-border-radius-large);
  background: var(--oe-color-heritage-blue);
  font-size: var(--oe-sm);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-primary-4);
  overflow-wrap: anywhere;
}

/* The hidden full copy and the typed copy share one cell */
.oe-block-mcp-chat-animation__question-text {
  display: grid;
}

.oe-block-mcp-chat-animation__question-ghost,
.oe-block-mcp-chat-animation__question-live {
  grid-area: 1 / 1;
}

.oe-block-mcp-chat-animation__question-ghost {
  visibility: hidden;
}

/* Caret takes no width, so the typed text wraps exactly like the full copy */
.oe-block-mcp-chat-animation__caret {
  display: none;
  width: var(--oe-spacing-3xsmall);
  height: 1em;
  margin-left: var(--oe-spacing-5xsmall);
  margin-right: calc((var(--oe-spacing-3xsmall) + var(--oe-spacing-5xsmall)) * -1);
  background: var(--oe-color-primary);
  vertical-align: text-bottom;
}

.oe-block-mcp-chat-animation--typing .oe-block-mcp-chat-animation__caret {
  display: inline-block;
}

.oe-block-mcp-chat-animation__answer {
  transition: opacity var(--oe-mcp-chat-animation-answer-fade);
}

.oe-block-mcp-chat-animation__answer--hidden {
  opacity: 0;
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__answer-text {
  font-size: var(--oe-sm);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__answer-text strong {
  color: var(--oe-color-heritage-blue);
}

/* Chart (fixed illustration) */
.oe-block-mcp-chat-animation__chart {
  display: block;
  width: var(--oe-width-fixed-100);
  height: auto;
  margin-top: var(--oe-spacing-small);
  overflow: visible;
}

.oe-block-mcp-chat-animation__chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oe-block-mcp-chat-animation__chart-line--baseline {
  stroke: color-mix(in srgb, var(--oe-color-cool-grey) 70%, var(--oe-color-primary-4));
}

.oe-block-mcp-chat-animation__chart-line--tariff {
  stroke: var(--oe-color-sky-blue);
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__chart-text {
  fill: var(--oe-color-cool-grey);
  font-family: inherit;
  font-size: var(--oe-font-size-xsmall);
}

/* Sky blue fails contrast for small text on white, so the label is navy */
.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__chart-label--tariff {
  fill: var(--oe-color-heritage-blue);
}

.oe-block-mcp-chat-animation__chart-line--baseline,
.oe-block-mcp-chat-animation__chart-label--baseline,
.oe-block-mcp-chat-animation__chart-label--tariff {
  transition: opacity var(--oe-mcp-chat-animation-fade);
}

.oe-block-mcp-chat-animation__chart-part--hidden {
  opacity: 0;
}

/* ---------- MCP hub ---------- */

.oe-block-mcp-chat-animation__hub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: var(--oe-mcp-chat-animation-hub-size);
  height: var(--oe-mcp-chat-animation-hub-size);
  border: var(--oe-spacing-3xsmall) solid color-mix(in srgb, var(--oe-color-primary) 30%, transparent);
  border-radius: var(--oe-border-radius-badge);
  background: color-mix(in srgb, var(--oe-color-sky-blue) 22%, var(--oe-color-secondary));
  transition: border-color var(--oe-mcp-chat-animation-fade);
}

.oe-block-mcp-chat-animation__hub--on {
  border-color: var(--oe-color-primary);
}

.oe-block-mcp-chat-animation__hub-mark {
  position: relative;
  display: block;
  width: var(--oe-sizing-large);
  height: var(--oe-sizing-large);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-color-heritage-blue);
}

.oe-block-mcp-chat-animation__hub-mark::after {
  content: "";
  position: absolute;
  inset: var(--oe-spacing-xsmall);
  border: var(--oe-spacing-3xsmall) solid var(--oe-color-primary);
  border-radius: var(--oe-border-radius-badge);
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__hub-label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--oe-spacing-xsmall);
  transform: translateX(-50%);
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-mcp-chat-animation-on-navy);
  white-space: nowrap;
}

/* ---------- Sources ---------- */

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__sources {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--oe-spacing-small);
  min-width: 0;
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source {
  min-width: 0;
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-mcp-chat-animation-line);
  border-radius: var(--oe-border-radius-base);
  background: transparent;
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-mcp-chat-animation-on-navy);
  overflow-wrap: anywhere;
  transition: border-color var(--oe-mcp-chat-animation-fade), color var(--oe-mcp-chat-animation-fade), background-color var(--oe-mcp-chat-animation-fade);
}

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source--on {
  border-color: var(--oe-color-primary);
  background: color-mix(in srgb, var(--oe-color-sky-blue) 22%, transparent);
  color: var(--oe-color-primary-4);
}

/* ---------- Note under the animation ---------- */

.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__note {
  margin-top: var(--oe-spacing-medium);
  font-size: var(--oe-font-size-xsmall);
  line-height: var(--oe-line-height-large);
  color: color-mix(in srgb, var(--oe-color-primary-4) 60%, transparent);
}

/* ---------- Tablet: same layout, a little tighter ---------- */

@container oe-mcp-chat-animation (max-width: 56rem) {
  .oe-block-mcp-chat-animation__chat {
    padding: var(--oe-spacing-base);
  }

  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source {
    padding: var(--oe-spacing-xsmall) var(--oe-spacing-small);
    font-size: var(--oe-sm);
  }
}

/* Narrow column (e.g. the right half of the hero on a laptop): keep the
   side-by-side layout, just more compact */
@container oe-mcp-chat-animation (max-width: 40rem) {
  /* Give the chat card more of the width, so the question isn't cramped */
  .oe-block-mcp-chat-animation__stage {
    grid-template-columns: minmax(0, 2.2fr) var(--oe-mcp-chat-animation-hub-size) minmax(0, 1fr);
    column-gap: var(--oe-spacing-base);
  }

  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__question {
    max-width: var(--oe-width-fixed-100);
  }

  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__sources {
    gap: var(--oe-spacing-xsmall);
  }

  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source {
    padding: var(--oe-spacing-xsmall);
  }
}

/* ---------- Phone: stack chat, hub, sources; wires run vertically ---------- */

@container oe-mcp-chat-animation (max-width: 28rem) {
  .oe-block-mcp-chat-animation__stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--oe-spacing-xlarge);
  }

  .oe-block-mcp-chat-animation__chat {
    justify-self: stretch;
  }

  /* Label sits beside the hub, so the wires below it stay clear */
  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__hub-label {
    top: 50%;
    left: 100%;
    max-width: var(--oe-width-fixed-3xsmall);
    margin-top: 0;
    margin-left: var(--oe-spacing-small);
    transform: translateY(-50%);
    white-space: normal;
  }

  /* Sources stack (no squashing at 320–375px); wires use the left gutter */
  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__sources {
    gap: var(--oe-spacing-small);
    justify-self: stretch;
    padding-left: var(--oe-spacing-large);
  }

  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source {
    padding: var(--oe-spacing-small) var(--oe-spacing-base);
  }
}

/* ---------- Caret blink (motion only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .oe-block-mcp-chat-animation--typing .oe-block-mcp-chat-animation__caret {
    animation: oe-block-mcp-chat-animation-blink 1s steps(1) infinite;
  }

  .oe-block-mcp-chat-animation--paused .oe-block-mcp-chat-animation__caret {
    animation-play-state: paused;
  }
}

@keyframes oe-block-mcp-chat-animation-blink {
  50% { opacity: 0; }
}

/* ---------- Pause toggle (same pattern as oe-mcp-workflow-animation) ---------- */

/* Invisible tap area over the whole block: tap to pause, tap again to resume */
.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__pause-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Mouse users pause by hovering instead, so clicks pass through */
@media (hover: hover) {
  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__pause-area {
    cursor: default;
    pointer-events: none;
  }
}

/* Visually hidden but still focusable: Tab to it, then Space or Enter */
.oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__pause-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--oe-spacing-5xsmall);
  height: var(--oe-spacing-5xsmall);
  margin: calc(var(--oe-spacing-5xsmall) * -1);
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  appearance: none;
}

/* --oe-color-primary rather than sky blue: it keeps 3:1+ on the hero navy */
.oe-block-mcp-chat-animation:has(.oe-block-mcp-chat-animation__pause-toggle:focus-visible) {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-color-primary);
  outline-offset: var(--oe-spacing-xsmall);
  border-radius: var(--oe-border-radius-large);
}

/* ---------- Reduced motion: final state, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__pause-area,
  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__pause-toggle {
    display: none;
  }

  .oe-block-mcp-chat-animation__wire,
  .oe-block-mcp-chat-animation__answer,
  .oe-block-mcp-chat-animation__hub,
  .oe-block-mcp-chat-animation .oe-block-mcp-chat-animation__source,
  .oe-block-mcp-chat-animation__chart-line--baseline,
  .oe-block-mcp-chat-animation__chart-label--baseline,
  .oe-block-mcp-chat-animation__chart-label--tariff {
    transition: none;
  }
}