/* 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-poc {
  container-type: inline-size;
  position: relative;
  width: 600px;
  max-width: 100%;
  padding-bottom: 96px; /* room for the care-gap notification overlap */
  font-size: 15px;
  line-height: 22px;
  color: var(--mdr-ink-ui);
}

.mdr-poc__window {
  width: 100%;
  background: var(--mdr-surface);
  border: 1px solid var(--mdr-line-cool);
  border-radius: 20px;
  box-shadow: var(--mdr-shadow-window);
  overflow: hidden;
}

.mdr-poc__patient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mdr-line-cool);
}
.mdr-poc__initials {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--mdr-pine-50);
  color: var(--mdr-teal-dark);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.mdr-poc__patient-text {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 16px;
  color: var(--mdr-muted);
}
.mdr-poc__patient-text strong {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--mdr-ink-ui);
}

/* Messages area keeps a fixed height so the window never jumps between steps. */
.mdr-poc__messages {
  height: 202px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
}
.mdr-poc__question {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 350ms var(--mdr-ease), transform 450ms var(--mdr-ease);
}
.mdr-poc__question[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.mdr-poc__bubble {
  background: var(--mdr-bubble-cool);
  border-radius: 14px 14px 4px 14px;
  padding: 11px 16px;
}

.mdr-poc__answer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms var(--mdr-ease), transform 350ms var(--mdr-ease);
}
.mdr-poc__answer[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.mdr-poc__avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--mdr-pine);
  display: grid;
  place-items: center;
}
.mdr-poc__answer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.mdr-poc__answer-text {
  margin: 0;
  line-height: 23px;
  color: var(--mdr-ink-ui);
  transition: color 300ms linear;
}
.mdr-poc__answer-text[data-muted="true"] {
  color: var(--mdr-muted);
}
.mdr-poc__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--mdr-line-cool);
  border-radius: 8px;
  background: #f7fbfc;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #394042;
  opacity: 0;
  transition: opacity 350ms linear;
}
.mdr-poc__source[data-visible="true"] {
  opacity: 1;
}

/* Composer */
.mdr-poc__composer-wrap {
  padding: 0 22px 22px;
  transition: opacity 300ms linear;
}
.mdr-poc__window[data-dim="true"] .mdr-poc__composer-wrap {
  opacity: 0.4;
}
.mdr-poc__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--mdr-line-cool);
  border-radius: 12px;
  padding: 8px 8px 8px 14px;
}
.mdr-poc__input {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 22px;
  font-size: 14px;
}
.mdr-poc__placeholder,
.mdr-poc__typed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  transition: opacity 250ms linear;
}
.mdr-poc__placeholder {
  color: var(--mdr-placeholder);
}
.mdr-poc__typed {
  color: var(--mdr-ink-ui);
}
.mdr-poc__placeholder[data-visible="false"],
.mdr-poc__typed[data-visible="false"] {
  opacity: 0;
}
.mdr-poc__send {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--mdr-bubble-cool);
  color: #a4aeb2;
  transition: background-color 200ms linear, color 200ms linear;
}
.mdr-poc__send[data-active="true"] {
  background: var(--mdr-teal);
  color: #ffffff;
}

/* Care-gap notification */
.mdr-poc__notice {
  position: absolute;
  left: auto;
  right: -24px;
  width: 400px;
  max-width: calc(100% - 56px);
  bottom: 24px;
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--mdr-surface);
  border: 1px solid var(--mdr-line-cool);
  border-radius: 16px;
  box-shadow: 0 28px 48px -6px rgba(0, 51, 48, 0.16), 0 2px 6px rgba(0, 51, 48, 0.06);
  opacity: 0;
  transform: translateY(44px);
  pointer-events: none;
  transition: opacity 400ms var(--mdr-ease), transform 600ms var(--mdr-ease);
}
.mdr-poc__notice[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.mdr-poc__notice-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mdr-amber-50);
  display: grid;
  place-items: center;
}
.mdr-poc__notice-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--mdr-muted);
}
.mdr-poc__notice-body strong {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--mdr-ink-ui);
}
.mdr-poc__notice-label {
  font-family: var(--mdr-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdr-amber);
}
.mdr-poc__notice-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
}
.mdr-poc__btn {
  border-radius: 8px;
  border: 1px solid var(--mdr-line-cool);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #394042;
}
.mdr-poc__btn--primary {
  background: var(--mdr-teal);
  border-color: var(--mdr-teal);
  color: #ffffff;
}

@container (max-width: 520px) {
  .mdr-poc__notice {
    left: 24px;
    right: 0;
    width: auto;
    max-width: none;
  }
}