.conversation-suite {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(0.75rem, 2vh, 1.25rem) clamp(1.6rem, 5vw, 4.2rem);
  z-index: 1;
  mix-blend-mode: normal;
}

.conversation-suite__threads {
  position: relative;
  width: min(420px, 38vw);
  height: min(620px, 76vh);
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 28px 65px var(--layer-shadow-thread));
  perspective: 1200px;
}

.conversation-suite__transcripts {
  pointer-events: none;
}

.conversation-suite__transcripts .conversation-thread {
  margin: 0;
  padding: 0;
}

.conversation-suite__transcripts .conversation-transcript {
  list-style: none;
  margin: 0;
  padding: 0;
}

.conversation-suite__transcripts .conversation-transcript li {
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.conversation-suite__transcripts .conversation-transcript__speaker {
  font-weight: 600;
}

.conversation-thread-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
  --thread-path: path('M0,0');
}

.conversation-thread-visual[data-thread="staff-clinician"] {
  transform: translate3d(6%, 18%, 0) scale(0.94) rotate(-2deg);
}

.conversation-thread-visual[data-thread="parent-clinician"] {
  transform: translate3d(0%, -6%, 0) scale(0.92) rotate(3deg);
}

.conversation-thread-visual[data-thread="assistant-clinician"] {
  transform: translate3d(-8%, 26%, 0) scale(0.88) rotate(-4deg);
}

.conversation-suite.is-immersive-active .conversation-thread-visual,
.conversation-suite.is-immersive-active .conversation-bubble {
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity 0.45s ease;
}

.conversation-bubble {
  position: absolute;
  top: 0;
  left: 0;
  offset-path: var(--thread-path);
  offset-distance: var(--offset-distance, 0%);
  offset-rotate: 0deg;
  --bubble-pop-offset-x: 0px;
  --bubble-pop-offset-y: 0px;
  --bubble-pop-offset-z: 0px;
  padding: clamp(0.65rem, 1.6vw, 1rem) clamp(0.75rem, 2vw, 1.4rem);
  border-radius: var(--layer-radius-xl);
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, transparent);
  background: color-mix(in srgb, var(--card-bg) 82%, rgba(255, 255, 255, 0.08));
  box-shadow: var(--layer-shadow-strong);
  max-width: clamp(210px, 20vw, 280px);
  color: var(--text-color);
  display: grid;
  gap: 0.35rem;
  font-size: clamp(0.85rem, 0.9rem + 0.2vw, 1rem);
  letter-spacing: 0.01em;
  opacity: var(--bubble-opacity, 0);
  transform: translate3d(
      calc(var(--bubble-translate-x, -50%) + var(--bubble-pop-offset-x, 0px)),
      calc(var(--bubble-translate-y, -50%) + var(--bubble-pop-offset-y, 0px)),
      var(--bubble-pop-offset-z, 0px)
    )
    scale(var(--bubble-scale, 0.9));
  transform-style: preserve-3d;
  backdrop-filter: blur(16px) saturate(1.15);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: auto;
  clip-path: path("M0 20 Q0 0 20 0 L160 0 Q180 0 190 20 L210 70 Q220 90 210 110 L190 160 Q180 180 160 180 L20 180 Q0 180 0 160 Z");
}

.conversation-suite.has-dynamic-path .conversation-bubble {
  offset-path: none;
  offset-distance: 0;
}

.conversation-bubble p {
  margin: 0;
  line-height: 1.45;
}

.conversation-bubble__speaker {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.18em;
  opacity: 0.75;
}

.conversation-bubble[data-speaker="clinician"] {
  border-color: color-mix(in srgb, var(--accent-dark-base) 40%, transparent);
  background: linear-gradient(
      150deg,
      color-mix(in srgb, var(--card-bg) 92%, rgba(255, 255, 255, 0)),
      color-mix(in srgb, var(--accent-dark-base) 18%, transparent)
    ),
    color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0.1));
}

.conversation-bubble[data-speaker="staff"] {
  border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
  background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--accent-color) 28%, transparent),
      color-mix(in srgb, var(--card-bg) 85%, rgba(255, 255, 255, 0))
    ),
    color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0.08));
}

.conversation-bubble[data-speaker="parent"] {
  border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
  background: linear-gradient(
      140deg,
      color-mix(in srgb, var(--accent-color) 16%, transparent),
      color-mix(in srgb, var(--card-bg) 88%, rgba(255, 255, 255, 0))
    ),
    color-mix(in srgb, var(--card-bg) 86%, rgba(255, 255, 255, 0.08));
}

.conversation-bubble[data-speaker="assistant"] {
  border-color: color-mix(in srgb, var(--accent-dark-peak) 42%, transparent);
  background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--accent-dark-peak) 25%, transparent),
      color-mix(in srgb, var(--card-bg) 80%, rgba(255, 255, 255, 0))
    ),
    color-mix(in srgb, var(--card-bg) 82%, rgba(255, 255, 255, 0.1));
}

.conversation-suite.is-reduced-motion .conversation-bubble {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 1;
  transform: translate3d(
      calc(-50% + var(--bubble-pop-offset-x, 0px)),
      calc(-50% + var(--bubble-pop-offset-y, 0px)),
      var(--bubble-pop-offset-z, 0px)
    )
    scale(1);
}

.conversation-suite:not(.is-reduced-motion) .conversation-bubble {
  transition: none;
}

.conversation-suite__fallback {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--layer-radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  color: var(--text-color);
  max-width: 720px;
  margin: 0 auto;
}

.conversation-suite__fallback h2 {
  margin-top: 0;
  font-size: clamp(1.2rem, 1.4rem + 0.6vw, 1.75rem);
}

.conversation-suite__fallback article + article {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.conversation-suite__fallback h3 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.conversation-suite__fallback ol {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}

@media (max-width: 1200px) {
  .conversation-suite__threads {
    width: min(480px, 46vw);
    height: min(600px, 72vh);
  }

  .conversation-thread-visual[data-thread="staff-clinician"] {
    transform: translate3d(4%, 16%, 0) scale(0.94) rotate(-2deg);
  }

  .conversation-thread-visual[data-thread="parent-clinician"] {
    transform: translate3d(-2%, -6%, 0) scale(0.9) rotate(3deg);
  }

  .conversation-thread-visual[data-thread="assistant-clinician"] {
    transform: translate3d(-10%, 24%, 0) scale(0.86) rotate(-4deg);
  }
}

@media (max-width: 900px) {
  .conversation-suite {
    justify-content: center;
    padding: clamp(0.75rem, 2vh, 1.25rem) clamp(1rem, 5vw, 2rem);
  }

  .conversation-suite__threads {
    width: min(420px, 70vw);
    height: min(560px, 74vh);
  }

  .conversation-thread-visual[data-thread="staff-clinician"] {
    transform: translate3d(0%, 12%, 0) scale(0.96) rotate(-1deg);
  }

  .conversation-thread-visual[data-thread="parent-clinician"] {
    transform: translate3d(0%, -4%, 0) scale(0.92) rotate(3deg);
  }

  .conversation-thread-visual[data-thread="assistant-clinician"] {
    transform: translate3d(-6%, 22%, 0) scale(0.9) rotate(-3deg);
  }

  .conversation-bubble {
    max-width: min(240px, 70vw);
  }
}

@media (max-width: 640px) {
  .conversation-suite__threads {
    width: 100%;
    height: min(560px, 78vh);
  }

  .conversation-thread-visual {
    transform: translate3d(0, 0, 0) scale(0.94) !important;
  }

  .conversation-bubble {
    max-width: min(260px, 82vw);
    font-size: clamp(0.82rem, 0.76rem + 0.8vw, 0.95rem);
  }

  .conversation-suite.is-reduced-motion .conversation-bubble {
    max-width: min(280px, 86vw);
  }
}