/* MDReasoning brand tokens (Version B). Every component imports this file so the
   variables exist inside each component's shadow root (Webflow renders code components
   in a Shadow DOM, so page styles cannot restyle them). Change brand values here. */
:host,
.mdr-root {
  --mdr-font: "Figtree", system-ui, -apple-system, sans-serif;
  --mdr-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --mdr-ink: #161514;
  --mdr-ink-ui: #262626;
  --mdr-muted: #586164;
  --mdr-muted-warm: #6b665f;
  --mdr-placeholder: #586164;

  --mdr-surface: #ffffff;
  --mdr-warm: #f4f0ea;
  --mdr-warm-2: #eae3da;
  --mdr-paper: #fcfaf7;
  --mdr-bubble: #f1ece5;
  --mdr-bubble-cool: #eff5f7;
  --mdr-line: #e6dfd5;
  --mdr-line-cool: #dee6e9;

  --mdr-teal: #0c806d;
  --mdr-teal-dark: #145847;
  --mdr-mint: #97ddca;
  --mdr-mint-50: #dcf7ef;
  --mdr-pine: #004441;
  --mdr-pine-50: #e2f5f1;

  --mdr-amber-50: #fbf0dc;
  --mdr-amber: #8a5a06;
  --mdr-amber-dot: #e0a33c;
  --mdr-rust-50: #fbe8e4;
  --mdr-rust: #a13223;

  --mdr-shadow-card: 0 28px 56px -14px rgba(0, 0, 0, 0.28);
  --mdr-shadow-window: 0 24px 56px -8px rgba(0, 69, 65, 0.08), 0 1px 2px rgba(38, 38, 38, 0.05);
  --mdr-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

.mdr-root {
  font-family: var(--mdr-font);
  color: var(--mdr-ink);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.mdr-root *,
.mdr-root *::before,
.mdr-root *::after {
  box-sizing: border-box;
}

/* Typing reveal: width is measured in JS and animated linearly. */
.mdr-type {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.mdr-type__clip {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.mdr-type__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  background: var(--mdr-teal);
  opacity: 0;
  transition: opacity 160ms linear;
}
.mdr-type--caret .mdr-type__caret {
  opacity: 1;
  animation: mdr-blink 1s steps(1) infinite;
}
@keyframes mdr-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdr-root *,
  .mdr-root *::before,
  .mdr-root *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Wrapping typing reveal (narrow containers). Ghost copy reserves the final height. */
.mdr-type-wrap {
  position: relative;
  display: block;
}
.mdr-type-wrap__ghost {
  visibility: hidden;
}
.mdr-type-wrap__live {
  position: absolute;
  inset: 0;
}
.mdr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mdr-cta {
  container-type: inline-size;
  width: 640px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--mdr-ink-ui);
}

.mdr-cta__composer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  min-height: 64px;
  background: var(--mdr-surface);
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.3);
}
.mdr-cta__query {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  line-height: 24px;
}
.mdr-cta__send {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--mdr-bubble-cool);
  color: #a4aeb2;
  transition: background-color 200ms linear, color 200ms linear;
}
.mdr-cta__send[data-active="true"] {
  background: var(--mdr-teal);
  color: #ffffff;
}

.mdr-cta__results {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--mdr-ease), transform 500ms var(--mdr-ease);
}
.mdr-cta__results[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.mdr-cta__results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 12px;
  font-size: 13px;
}
.mdr-cta__results-head strong {
  font-weight: 600;
}
.mdr-cta__results-head span {
  font-family: var(--mdr-font-mono);
  font-size: 11px;
  color: var(--mdr-muted);
}
.mdr-cta__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--mdr-line-cool);
  font-size: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms var(--mdr-ease), transform 300ms var(--mdr-ease);
}
.mdr-cta__results[data-visible="true"] .mdr-cta__row {
  opacity: 1;
  transform: none;
}
.mdr-cta__initials {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--mdr-pine-50);
  color: var(--mdr-teal-dark);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.mdr-cta__name {
  flex: 1;
  font-weight: 500;
}
.mdr-cta__tag {
  background: var(--mdr-bubble-cool);
  color: #394042;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
}

/* Narrow containers (mobile): smaller type, query wraps, tighter rows. */
@container (max-width: 440px) {
  .mdr-cta__composer {
    gap: 10px;
    padding: 12px 12px 12px 14px;
  }
  .mdr-cta__query {
    font-size: 15px;
    line-height: 22px;
  }
  .mdr-cta__results-head {
    padding: 12px 14px 10px;
    font-size: 12px;
  }
  .mdr-cta__row {
    padding: 10px 14px;
    gap: 10px;
    font-size: 13px;
  }
}