/* Small overrides on top of Bootstrap */

/* --- Cookie consent banner ----------------------------------------------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  padding: 0.75rem 1rem;
  background: #1a1608;
  color: #fffef8;
  border-top: 2px solid #f5c518;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.2);
}
.cookie-consent-inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cookie-consent-text {
  font-size: 0.85rem;
  flex: 1 1 18rem;
  color: #f1f3f5;
}
.cookie-consent-text a {
  color: #f5c518;
}
.cookie-consent-accept {
  flex-shrink: 0;
}


body.bg-body-secondary {
  background: linear-gradient(180deg, #353a45 0%, #6f7683 50%, #dee2e6 100%) !important;
}

/* --- App navbar -----------------------------------------------------------
   Soft diagonal gradient instead of a flat primary slab, with a glassy
   brand icon and a clean two-line title/subtitle. */
.app-navbar {
  background: linear-gradient(135deg, #1f2c4a 0%, #2f4a8a 45%, #4d76c4 100%);
  border-bottom: 3px solid rgba(255, 255, 255, 0.18);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* PWA install — header + disclaimer; hidden when already running as installed app. */
html:not(.pwa-standalone) #btn-install-app {
  display: inline-flex !important;
}

html.pwa-standalone #btn-install-app,
html.pwa-standalone #btn-disclaimer-install,
html.pwa-standalone #install-app-hint {
  display: none !important;
}

.app-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #fff;
}

.app-navbar-brand:hover,
.app-navbar-brand:focus {
  color: #fff;
  text-decoration: none;
}

.app-navbar-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28),
              0 1px 2px rgba(0, 0, 0, 0.15);
}
.app-navbar-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.app-navbar-title {
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-size: 1.15rem;
  color: #fff;
}

.app-navbar-subtitle {
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
  margin-top: 0.1rem;
}

/* Header actions — pill shape (Premium badge uses the same rounded-pill look). */
.app-nav-btn {
  border-radius: 50rem !important;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  font-weight: 600;
}

/* Default navbar (non–consumer-app): light pills on the blue gradient bar. */
.app-nav-btn.btn-light {
  font-weight: 600;
  color: #1f2c4a;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.app-nav-btn.btn-light:hover,
.app-nav-btn.btn-light:focus {
  background-color: #fff;
  color: #1f2c4a;
  border-color: #fff;
}

@media (max-width: 575.98px) {
  .app-navbar-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.55rem;
  }
  .app-navbar-title {
    font-size: 1rem;
  }
  .app-navbar-subtitle {
    font-size: 0.72rem;
  }
}

/* The chat thread grows naturally with the page — no internal scrollbox.
   The page itself scrolls instead, so the buttons below the textarea sit
   at the bottom of the chat in document flow rather than being pinned to
   the viewport. */
.thread {
  /* No max-height / overflow — let it grow. */
}

/* Hide the conversation pane until there is at least one message (no empty box). */
.thread.thread-empty {
  display: none !important;
}

.new-patient-guide-target {
  position: relative;
}

.new-patient-guide-target-random {
  display: inline-block;
}

.opening-guide-target {
  position: relative;
}

.opening-guide-target-mic,
.opening-guide-target-suggest,
.opening-guide-target-send,
.opening-guide-target-trainer {
  display: inline-block;
}

.opening-guide-callout {
  position: absolute;
  z-index: 4;
  max-width: 18rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid rgba(13, 110, 253, 0.6);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 247, 255, 0.98) 100%);
  color: #0f2f6b;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow:
    0 0 0 0.18rem rgba(13, 110, 253, 0.12),
    0 0.55rem 1.2rem rgba(15, 23, 42, 0.18);
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.opening-guide-callout::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.opening-guide-callout-text {
  display: block;
  animation: new-patient-callout-flash 3.8s ease-in-out 1;
}

.opening-guide-callout-hidden {
  opacity: 0;
  pointer-events: none;
}

.opening-guide-callout-textarea {
  top: -3.35rem;
  left: 0.55rem;
  transform: translateY(0);
}

.opening-guide-callout-textarea::after {
  left: 1.35rem;
  top: 100%;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-top: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 1px 0 rgba(13, 110, 253, 0.45));
}

.opening-guide-callout-suggest {
  left: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
}

.opening-guide-callout-suggest::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(-1px 0 0 rgba(13, 110, 253, 0.45));
}

.opening-guide-callout-mic {
  left: 50%;
  top: calc(100% + 0.75rem);
  transform: translateX(-50%);
}

.opening-guide-callout-mic::after {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 -1px 0 rgba(13, 110, 253, 0.45));
}

.opening-guide-callout-send {
  left: 50%;
  bottom: calc(100% + 0.75rem);
  transform: translateX(-50%);
}

.opening-guide-callout-send::after {
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 1px 0 rgba(13, 110, 253, 0.45));
}

.opening-guide-callout-trainer {
  right: 0;
  bottom: calc(100% + 0.75rem);
  transform: translateY(0);
  max-width: 19rem;
}

.opening-guide-callout-trainer::after {
  right: 1.1rem;
  top: 100%;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 1px 0 rgba(13, 110, 253, 0.45));
}

.opening-guide-callout-textarea.opening-guide-callout-hidden {
  transform: translateY(-8px);
}

.opening-guide-callout-suggest.opening-guide-callout-hidden {
  transform: translateY(-50%) translateX(10px);
}

.opening-guide-callout-mic.opening-guide-callout-hidden {
  transform: translateX(-50%) translateY(8px);
}

.opening-guide-callout-send.opening-guide-callout-hidden {
  transform: translateX(-50%) translateY(-8px);
}

.opening-guide-callout-trainer:not(.opening-guide-callout-hidden) {
  cursor: pointer;
}

.opening-guide-callout-trainer.opening-guide-callout-hidden {
  transform: translateY(-8px);
}

.new-patient-callout {
  position: absolute;
  z-index: 3;
  max-width: 16rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid rgba(13, 110, 253, 0.6);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 247, 255, 0.98) 100%);
  color: #0f2f6b;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow:
    0 0 0 0.18rem rgba(13, 110, 253, 0.12),
    0 0.55rem 1.2rem rgba(15, 23, 42, 0.18);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.new-patient-callout::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.new-patient-callout-text {
  display: block;
  animation: new-patient-callout-flash 3.8s ease-in-out 1;
}

.new-patient-callout.new-patient-callout-hidden {
  opacity: 0;
  pointer-events: none;
}

.new-patient-callout-textarea.new-patient-callout-hidden {
  transform: translateY(-8px);
}

.new-patient-callout-random.new-patient-callout-hidden {
  transform: translateY(-50%) translateX(10px);
}

.new-patient-callout-textarea {
  top: -2.85rem;
  right: 0.55rem;
}

.new-patient-callout-textarea::after {
  right: 1.35rem;
  top: 100%;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-top: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 1px 0 rgba(13, 110, 253, 0.45));
}

.new-patient-callout-random {
  left: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
}

.new-patient-callout-random::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-right: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(-1px 0 0 rgba(13, 110, 253, 0.45));
}

@keyframes new-patient-callout-flash {
  0%, 100% {
    color: #0f2f6b;
    text-shadow: none;
    opacity: 1;
  }
  10%, 30%, 50% {
    color: #c62828;
    text-shadow: 0 0 0.5rem rgba(198, 40, 40, 0.28);
    opacity: 1;
  }
  20%, 40% {
    color: #0f2f6b;
    text-shadow: none;
    opacity: 0.85;
  }
}

.chat-compose-wrap {
  position: sticky;
  bottom: 0;
  z-index: 15;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.96) 70%,
    rgba(255, 255, 255, 0.9) 100%
  );
  border-top: 1px solid rgba(13, 110, 253, 0.12);
  box-shadow: 0 -0.35rem 0.9rem rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(6px);
  transition: padding-bottom 0.25s ease;
}

/* Reserve room for the suggest/mic guide bubbles that hang below the button
   row so they aren't clipped by the bottom edge of the panel. */
.chat-compose-wrap.compose-guide-room {
  padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

#chat-form {
  margin-bottom: 0;
}

#supervisor-status:empty {
  display: none;
}

.bubble {
  position: relative;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.85rem;
  /* Reserve room at the bottom-right for the bubble action buttons so long
     text never tucks underneath them. */
  padding-bottom: 2.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  white-space: pre-wrap;
}

.bubble-actions {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bubble-speak,
.bubble-feedback-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease,
    background-color 0.15s ease, transform 0.1s ease;
}

.bubble-speak:hover,
.bubble-feedback-avatar:hover {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.bubble-speak:active,
.bubble-feedback-avatar:active {
  transform: scale(0.95);
}

.bubble-speak:focus-visible,
.bubble-feedback-avatar:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.bubble-speak.speaking {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Free tier: voice is paid-only, so the button reads as muted/locked. */
.bubble-speak-locked {
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.7;
}

.bubble-speak-locked:hover {
  opacity: 1;
}

.bubble-speak.loading {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  cursor: wait;
}

.bubble-speak.loading svg {
  animation: bubble-speak-pulse 1.1s ease-in-out infinite;
}

@keyframes bubble-speak-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.bubble-speak svg,
.bubble-feedback-avatar svg {
  display: block;
}

.bubble-speak.read-aloud-guide::after {
  content: attr(data-guide-text);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  transform: translateX(-50%);
  min-width: 10.5rem;
  max-width: 13rem;
  padding: 0.65rem 0.8rem;
  border: 2px solid rgba(13, 110, 253, 0.6);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 247, 255, 0.98) 100%);
  color: #0f2f6b;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow:
    0 0 0 0.18rem rgba(13, 110, 253, 0.12),
    0 0.55rem 1.2rem rgba(15, 23, 42, 0.18);
  animation: new-patient-callout-flash 3.8s ease-in-out 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 4;
}

.bubble-speak.read-aloud-guide::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.05rem);
  transform: translateX(-50%);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 1px 0 rgba(13, 110, 253, 0.45));
  pointer-events: none;
  z-index: 4;
}

/* Coach help bubble — points at the coach icon after the first reply. The
   button normally clips its contents, so allow overflow while the bubble shows. */
.bubble-coach-btn.coach-guide {
  overflow: visible;
}

.bubble-coach-btn.coach-guide::after {
  content: attr(data-guide-text);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  transform: translateX(-50%);
  min-width: 10.5rem;
  max-width: 13rem;
  padding: 0.65rem 0.8rem;
  border: 2px solid rgba(13, 110, 253, 0.6);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(240, 247, 255, 0.98) 100%);
  color: #0f2f6b;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow:
    0 0 0 0.18rem rgba(13, 110, 253, 0.12),
    0 0.55rem 1.2rem rgba(15, 23, 42, 0.18);
  animation: new-patient-callout-flash 3.8s ease-in-out 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 4;
}

.bubble-coach-btn.coach-guide::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.05rem);
  transform: translateX(-50%);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.7rem solid rgba(244, 249, 255, 0.99);
  filter: drop-shadow(0 1px 0 rgba(13, 110, 253, 0.45));
  pointer-events: none;
  z-index: 4;
}

.bubble-feedback-avatar {
  width: 2.2rem;
  height: 2.2rem;
  overflow: hidden;
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 0.12rem 0.35rem rgba(15, 23, 42, 0.14);
}

.bubble-feedback-avatar:hover {
  background: #fff;
  border-color: rgba(13, 110, 253, 0.4);
  transform: scale(1.06);
}

.bubble-feedback-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.popover .trainer-popover-body {
  max-width: min(26rem, 70vw);
  font-size: 0.9rem;
  line-height: 1.4;
}

.popover .trainer-popover-heading {
  font-weight: 700;
  color: #7c3b00;
  margin-bottom: 0.35rem;
}

.popover .trainer-popover-feedback {
  margin-bottom: 0.45rem;
}

.popover .trainer-popover-alt {
  color: #334155;
}

.bubble.therapist {
  border-left: 4px solid #0d6efd;
  background: #eaf2ff;
}

.bubble.patient {
  border-left: 4px solid #198754;
  background: #eaf8ef;
}

/* Blinking caret on a bubble that's currently being typed in. The :after
   pseudo-element sits at the end of the bubble's text flow. */
.bubble.typing::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  margin-left: 0.15ch;
  vertical-align: -0.18em;
  background: currentColor;
  opacity: 0.65;
  animation: bubble-caret-blink 0.95s steps(2, start) infinite;
}

@keyframes bubble-caret-blink {
  to { visibility: hidden; }
}

.bubble.supervisor {
  border-left: 4px solid #fd7e14;
  background: #fff5e9;
}

.supervisor-feedback-card .feedback-heading {
  font-size: 0.98rem;
  font-weight: 700;
  color: #7c3b00;
  margin-bottom: 0.35rem;
}

.supervisor-feedback-card .feedback-therapist-line {
  margin-bottom: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 0.45rem;
  border-left: 3px solid rgba(13, 110, 253, 0.35);
  color: #445168;
  font-size: 0.88rem;
}

.supervisor-feedback-card .feedback-alt {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 0.45rem;
  border-left: 3px solid rgba(25, 135, 84, 0.35);
  font-size: 0.9rem;
}

.bubble .meta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.35rem;
}

.bubble em {
  font-style: italic;
}

.bubble strong {
  font-weight: 600;
}

/* ----- Branded modal header (matches “How it works” purple banner) ----- */
.modal-content.tc-modal-shell {
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid rgba(31, 35, 51, 0.08);
  box-shadow: 0 1.5rem 3rem rgba(31, 35, 51, 0.2);
}

.tc-modal-brand-header {
  background: linear-gradient(120deg, #fff9e0 0%, #fef3c7 50%, #fde68a 100%) !important;
  border-bottom: 2px solid #1a1608 !important;
  align-items: center;
}

.tc-modal-brand-logo {
  border-radius: 0.55rem;
  box-shadow: 0 2px 6px rgba(31, 35, 51, 0.25);
}

.tc-modal-brand-header .modal-title {
  color: #1a1608;
  letter-spacing: -0.01em;
}

.tc-modal-brand-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c5346;
}

.tc-modal-brand-header .modal-title-help {
  text-decoration: underline dotted rgba(26, 22, 8, 0.35);
  cursor: help;
}

.tc-modal-brand-header .btn-close {
  filter: none;
  opacity: 0.75;
}

#modal-app-alert.modal-danger .tc-modal-brand-header {
  background: linear-gradient(120deg, #dc3545 0%, #b02a37 100%) !important;
}

.modal-title-help {
  cursor: help;
  text-decoration: underline dotted rgba(31, 41, 55, 0.35);
  text-underline-offset: 0.18em;
}

#modal-new-patient .modal-content {
  position: relative;
  overflow: hidden;
}

#new-patient-description.conversation-scenario-readonly {
  background-color: var(--bs-secondary-bg);
  cursor: default;
}

#conversation-scenario-picks-row .btn.active {
  font-weight: 600;
}

.new-patient-progress-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(2px);
  z-index: 6;
}

.new-patient-progress-overlay.show {
  display: flex;
  animation: tt-fade-in 0.2s ease-out;
}

.new-patient-progress-card {
  max-width: 20rem;
  width: min(20rem, 100%);
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(13, 110, 253, 0.18);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28);
  text-align: center;
}

.new-patient-progress-card .spinner-border {
  width: 2.65rem;
  height: 2.65rem;
  border-width: 0.28rem;
  margin-bottom: 0.75rem;
}

.new-patient-progress-text {
  color: #2a3f5f;
  font-size: 0.96rem;
  line-height: 1.4;
  font-weight: 600;
}

/* Trainer-thinking overlay ("teacher is thinking") shown while supervisor feedback is being generated */
.trainer-thinking-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1080;
  padding: 1rem;
}

.trainer-thinking-overlay.show {
  display: flex;
  animation: tt-fade-in 0.25s ease-out;
}

@keyframes tt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.trainer-thinking-card {
  background: var(--tc-panel-1, #1c1914);
  border-radius: 1rem;
  padding: 1.75rem 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
  max-width: 390px;
  width: 100%;
}

.trainer-thinking-card h3 {
  margin: 0.75rem 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tc-gold, #f5c518);
}

.trainer-thinking-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
}

.trainer-thinking-gif {
  display: block;
  margin: 0 auto;
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.trainer-thinking-svg {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 165px;
}

.trainer-thinking-svg .tt-head {
  transform-origin: 123px 102px;
  animation: tt-head-tilt 2.6s ease-in-out infinite;
}

@keyframes tt-head-tilt {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.trainer-thinking-svg .tt-dot {
  opacity: 0.25;
  animation: tt-dot-pulse 1.2s ease-in-out infinite;
}

.trainer-thinking-svg .tt-dot-2 { animation-delay: 0.18s; }
.trainer-thinking-svg .tt-dot-3 { animation-delay: 0.36s; }

/* Audio-thinking overlay — same modal-style backdrop as the trainer one,
   simpler card with a Bootstrap spinner. Shown while /api/tts is busy. */
.audio-thinking-overlay,
.continue-chat-loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1080;
  padding: 1rem;
}

.audio-thinking-overlay.show,
.continue-chat-loading-overlay.show {
  display: flex;
  animation: tt-fade-in 0.2s ease-out;
}

.audio-thinking-card {
  background: var(--tc-panel-1, #1c1914);
  border-radius: 1rem;
  padding: 1.75rem 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
  max-width: 320px;
  width: 100%;
}

.audio-thinking-card h3 {
  margin: 0.85rem 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tc-gold, #f5c518);
}

.audio-thinking-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

.audio-thinking-spinner .spinner-border {
  width: 3.25rem;
  height: 3.25rem;
  border-width: 0.3rem;
}

/* Keep the thinking cards comfortably inside narrow phone screens. */
@media (max-width: 420px) {
  .trainer-thinking-card,
  .audio-thinking-card,
  .continue-chat-loading-card {
    max-width: 100%;
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .trainer-thinking-gif {
    width: 140px;
    height: 140px;
  }
}

@keyframes tt-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

/* Patient card — generated once per session and pinned to the top of the
   chat area. Image on the left, description always visible on the right.
   It scrolls with the rest of the chat (no sticky positioning) and breathes
   gently / pulses a halo when audio plays (".speaking" toggled from JS). */
.patient-portrait-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.06);
}

.patient-portrait-wrap:not(.d-none) {
  animation: patient-portrait-reveal 0.45s ease-out;
}

/* Image hover zoom is intentionally NOT applied to the inline patient
   card — the description sits right next to the image, so a zoom would
   just obscure the text. The floating mini-avatar (further down) gets
   its own hover zoom + tooltip. */
.patient-portrait-frame {
  transition: transform 0.25s ease;
}

.patient-portrait-frame {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.patient-portrait-frame::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 110, 253, 0.45) 0%, rgba(13, 110, 253, 0) 70%);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.patient-portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
  background: #f3f4f6;
  animation: patient-breathe 5.5s ease-in-out infinite;
  cursor: help;
}

.patient-portrait-frame.speaking::before {
  opacity: 1;
  animation: patient-halo 1.4s ease-in-out infinite;
}

.patient-portrait-frame.speaking .patient-portrait {
  animation: patient-breathe-fast 1.4s ease-in-out infinite;
}

/* Patient description sits to the right of the portrait, always visible.
   Stronger weight + slightly larger size than the surrounding muted small
   text so it reads as the focal piece of patient context. */
.patient-portrait-caption {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: #1f2937;
  /* Preserve the line break between SITUATION and OTHER PERSON in the brief. */
  white-space: pre-line;
}

/* Free-tier nudge shown under the icon where a generated face would be. */
.premium-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
  color: var(--bs-primary);
  font-weight: 600;
  text-decoration: none;
}
.premium-note::after {
  content: "→";
}
.premium-note:hover {
  text-decoration: underline;
}

/* --- Mini floating avatar (only visible when the inline card has scrolled
   above the viewport top). Uses position: fixed so it never depends on
   any parent's scroll context — it just floats in the top-right corner
   of the viewport. The full description shows as a Bootstrap tooltip on
   hover, and the image enlarges on hover too. */
.patient-mini-portrait-wrap {
  position: fixed;
  top: 0.75rem;
  right: 1rem;
  z-index: 1030; /* above page content, below Bootstrap modals (1055) */
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
  cursor: help;
  /* Slide / fade in once the inline card scrolls past. */
  animation: patient-portrait-reveal 0.3s ease-out;
}

.patient-mini-portrait-frame,
.patient-mini-portrait {
  width: 96px;
  height: 96px;
}

.patient-mini-portrait-frame::before { inset: -9px; }

/* Hover zoom on the mini avatar — the image (only) scales up so the user
   gets a much better look at the face without losing their place on the
   page. Anchored top-right so it grows down-and-left into the page area
   rather than off-screen. */
.patient-mini-portrait-frame {
  transform-origin: top right;
}
.patient-mini-portrait-wrap:hover .patient-mini-portrait-frame {
  transform: scale(2.1);
}
.patient-mini-portrait-wrap:hover .patient-mini-portrait,
.patient-mini-portrait-wrap:hover .patient-mini-portrait-frame.speaking .patient-mini-portrait {
  animation: none;
}

.patient-mini-portrait-tooltip {
  opacity: 1 !important;
  --bs-tooltip-bg: transparent;
  --bs-tooltip-color: #0f2f6b;
  --bs-tooltip-max-width: min(78vw, 19rem);
}

.patient-mini-portrait-tooltip .tooltip-inner {
  max-width: min(78vw, 19rem);
  padding: 0.65rem 0.8rem;
  border: 2px solid rgba(13, 110, 253, 0.6);
  border-radius: 0.9rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(240, 247, 255, 0.98) 100%
  );
  color: #0f2f6b;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  box-shadow:
    0 0 0 0.18rem rgba(13, 110, 253, 0.12),
    0 0.55rem 1.2rem rgba(15, 23, 42, 0.18);
}

.patient-mini-portrait-tooltip.bs-tooltip-start .tooltip-arrow::before,
.patient-mini-portrait-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: rgba(244, 249, 255, 0.99);
}

.patient-mini-portrait-tooltip.bs-tooltip-end .tooltip-arrow::before,
.patient-mini-portrait-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: rgba(244, 249, 255, 0.99);
}

.patient-mini-portrait-tooltip.bs-tooltip-top .tooltip-arrow::before,
.patient-mini-portrait-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: rgba(244, 249, 255, 0.99);
}

.patient-mini-portrait-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.patient-mini-portrait-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: rgba(244, 249, 255, 0.99);
}

@media (max-width: 575.98px) {
  /* Smaller portrait on phones so the description has room next to it. */
  .patient-portrait-frame,
  .patient-portrait {
    width: 72px;
    height: 72px;
  }
  .patient-portrait-frame::before { inset: -8px; }

  .patient-portrait-wrap {
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
  }
  .patient-portrait-caption {
    font-size: 0.85rem;
    line-height: 1.35;
  }
  /* Mini floating avatar — even smaller on phones, with a gentler hover
     zoom so it doesn't punch off the right edge. */
  .patient-mini-portrait-frame,
  .patient-mini-portrait {
    width: 72px;
    height: 72px;
  }
  .patient-mini-portrait-frame::before { inset: -7px; }
  .patient-mini-portrait-wrap:hover .patient-mini-portrait-frame {
    transform: scale(1.65);
  }

  /* Patient-description textarea: on narrow phone screens text wraps to many
     more lines than on desktop, so the default rows="9" can still hide the
     top of a Surprise me scenario behind the textarea's own scrollbar.
     Bumping the min-height to a viewport-relative value lets the user see
     the whole scenario at a glance. */
  #new-patient-description {
    min-height: 36vh;
  }

  .new-patient-callout {
    max-width: min(78vw, 18rem);
    font-size: 0.78rem;
  }

  .bubble-speak.read-aloud-guide::after {
    min-width: 9rem;
    max-width: min(58vw, 12rem);
    font-size: 0.76rem;
  }

  .opening-guide-callout {
    max-width: min(78vw, 18rem);
    font-size: 0.78rem;
  }

  .new-patient-callout-textarea {
    top: -3.35rem;
    left: 0;
    right: auto;
  }

  .new-patient-callout-textarea::after {
    left: 1.25rem;
    right: auto;
  }

  .new-patient-callout-random {
    left: 0;
    top: calc(100% + 0.65rem);
    transform: none;
  }

  .new-patient-callout-random::after {
    left: 1.1rem;
    right: auto;
    top: auto;
    bottom: 100%;
    transform: none;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.7rem solid rgba(244, 249, 255, 0.99);
    border-top: 0;
    filter: drop-shadow(0 -1px 0 rgba(13, 110, 253, 0.45));
  }

  .new-patient-callout-random.new-patient-callout-hidden {
    transform: translateY(8px);
  }

  .opening-guide-callout-textarea {
    top: -3.8rem;
    left: 0;
    right: auto;
  }

  .opening-guide-callout-textarea::after {
    left: 1.25rem;
    right: auto;
  }

  .opening-guide-callout-suggest,
  .opening-guide-callout-mic,
  .opening-guide-callout-send {
    left: 0;
    top: calc(100% + 0.65rem);
    bottom: auto;
    transform: none;
  }

  .opening-guide-callout-suggest::after,
  .opening-guide-callout-mic::after,
  .opening-guide-callout-send::after {
    left: 1.1rem;
    right: auto;
    top: auto;
    bottom: 100%;
    transform: none;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.7rem solid rgba(244, 249, 255, 0.99);
    border-top: 0;
    filter: drop-shadow(0 -1px 0 rgba(13, 110, 253, 0.45));
  }

  .opening-guide-callout-suggest.opening-guide-callout-hidden,
  .opening-guide-callout-mic.opening-guide-callout-hidden,
  .opening-guide-callout-send.opening-guide-callout-hidden {
    transform: translateY(8px);
  }

  .opening-guide-callout-trainer {
    left: 0;
    right: auto;
    top: calc(100% + 0.65rem);
    bottom: auto;
    transform: none;
    max-width: min(78vw, 18rem);
  }

  .opening-guide-callout-trainer::after {
    left: 1.1rem;
    right: auto;
    top: auto;
    bottom: 100%;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.7rem solid rgba(244, 249, 255, 0.99);
    border-top: 0;
    filter: drop-shadow(0 -1px 0 rgba(13, 110, 253, 0.45));
  }

  .opening-guide-callout-trainer.opening-guide-callout-hidden {
    transform: translateY(8px);
  }

  .chat-compose-wrap {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .chat-compose-wrap.compose-guide-room {
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }
}

@keyframes patient-portrait-reveal {
  from { opacity: 0; transform: scale(1.35); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes patient-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

@keyframes patient-breathe-fast {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

@keyframes patient-halo {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

/* --- Suggested-response cards --------------------------------------------
   Each option in the "?" modal is a full-width outline button that wraps
   long text. Keep them visually distinct so they read like cards rather
   than a row of equal-height pills. */
.suggestion-btn {
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  padding: 0.75rem 1rem;
  border-width: 2px;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.suggestion-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

.suggestion-btn:active {
  transform: translateY(0);
}