/* ── Main content ── */

.main-content {
  flex: 1;
  min-width: 0;
  /* No width cap — fill all the room beside the nav sidebar at every width
     (incl. wide / secondary monitors). The desktop side-by-side layout still
     kicks in at >=1200px; below that the chat just fills full-width stacked. */
  max-width: none;
  margin: 0 auto;
  padding: 20px 40px 40px;
  transition: padding 0.22s ease;
}

/* ── Welcome header ── */

.main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.welcome-text h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}

.welcome-text p {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--text);
}

.notification-bell {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 8px;
}

.notification-bell svg {
  width: 35px;
  height: 35px;
  display: block;
}

/* ── Tracy AI card ── */

.tracy-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 72px;
}

.tracy-row > .tracy-card {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.tracy-card {
  position: relative;
  background: var(--tracy-bg);
  border-radius: 40px;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-bottom: 72px;
  /* Dynamic height set by myportal.js so the whole chat (greeting OR active
     conversation) always fits in the first viewport without scrolling. JS
     measures `viewport - card.offsetTop - bottomGap` on load + resize and
     sets --chat-card-h. The min-height fallback covers the brief window
     before the JS first fires. */
  height: var(--chat-card-h, auto);
  min-height: 480px;
}

/* ── Tracy's notes sidebar ── */

.tracy-notes {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tracy-notes__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--card-border);
}

.tracy-notes__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tracy-notes__title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.tracy-notes__subtitle {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 540px;
}

.tracy-notes__stage {
  /* Figma's redesigned header is just title + subtitle — the dynamic stage
     pill is hidden (kept in the DOM so myportal.js can still update it). */
  display: none;
  flex-shrink: 0;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(68, 117, 105, 0.08);
  color: var(--primary);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.tracy-notes__grid {
  display: grid;
  /* minmax(0,1fr), not 1fr — otherwise a nowrap chip's min-content width forces
     the track wider than the panel (grid blowout). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* Each card hugs its own content — don't stretch a short card (e.g. Therapist
     preferences) up to a taller row-mate, which left a big empty box below the
     field. */
  align-items: start;
  /* Pack rows at the top. The grid's default align-content is `stretch`, which —
     in the desktop rail where the grid flex-fills a height-capped column taller
     than its content — would spread the rows apart (huge gaps between cards once
     align-items:start stops the cards filling them). `start` keeps cards tight;
     extra space falls to the bottom / scrolls. */
  align-content: start;
}

.tracy-notes__section {
  /* Allow the cell to shrink below its content so chips ellipsize instead of
     overflowing the panel. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fafafa;
  border-radius: 16px;
  border: 1px solid rgba(68, 117, 105, 0.1);
  transition: border-color 0.15s ease;
}

.tracy-notes__section:hover {
  border-color: rgba(68, 117, 105, 0.28);
}

.tracy-notes__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tracy-notes__section-head h4 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #444846;
}

.tracy-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}

.tracy-notes__list:empty::before {
  content: "Nothing yet";
  color: #bcbcbc;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

.tracy-notes__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(68, 117, 105, 0.5);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  max-width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tracy-notes__chip:hover {
  border-color: var(--primary);
  background: rgba(68, 117, 105, 0.04);
}

/* Chips are tags — clamp long values (Tracy sometimes emits a whole phrase) to
   a single line with an ellipsis so they don't blow the card into tall, ugly
   pills. Full text is on the `title` tooltip. In the narrow PIG/specialty cards
   this kicks in; the full-width Must-haves chips have room and don't. */
.tracy-notes__chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tracy-notes__chip-remove {
  display: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.tracy-notes__chip-remove:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.06);
}

.tracy-notes__add {
  border: 1px dashed var(--card-border);
  background: transparent;
  color: var(--primary);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.tracy-notes__add:hover {
  background: rgba(68, 117, 105, 0.08);
}

.tracy-notes__preference {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
  min-height: 24px;
  display: flex;
  align-items: center;
}

.tracy-notes__preference:empty::before,
.tracy-notes__preference[data-empty="1"]::before {
  content: "Nothing yet";
  color: #bcbcbc;
  font-weight: 400;
}

/* Slice 6: search-preference chips — visually distinct from PIG chips so
 *  user knows these are HARD filters affecting match (not editable text).
 *  Teal accent matches drift card; ✕ button is always visible (not gated
 *  by edit mode like PIG chips), since deleting a filter is the primary
 *  intended action. */
/* Active filters spans the full panel width (not a cramped 1/4-width grid
   cell) so longer structured labels like "Language: Mandarin Chinese" lay out
   as whole pills on one row instead of wrapping their text. */
.tracy-notes__section--filters,
.tracy-notes__section--specialties {
  grid-column: 1 / -1;
}

.tracy-notes__chip--filter {
  background: var(--color-bg-light, #ebf3f1);
  border: 1px solid var(--color-accent, #1f9a73);
  color: var(--color-primary-dark, #03494b);
}
/* Keep each filter chip on a single line; the flex-wrap list wraps whole pills
   to the next row when needed (rather than breaking text mid-chip). */
.tracy-notes__chip--filter .tracy-notes__chip-text {
  white-space: nowrap;
}

.tracy-notes__chip--filter .tracy-notes__chip-remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark, #03494b);
}

.tracy-notes__chip--filter .tracy-notes__chip-remove:hover {
  background: var(--color-accent, #1f9a73);
  color: var(--color-white, #fff);
}

/* Dashed "+ Add filter" pill — inline affordance to add/change filters
   (opens the Edit-filters drawer). Dashed to read as "add", matching the
   header's Edit filters / Clear all buttons. */
.tracy-notes__chip--add {
  padding: 0;
  background: transparent;
  border: 1px dashed var(--card-border);
}
.tracy-notes__chip--add:hover {
  border-color: var(--primary);
  background: rgba(68, 117, 105, 0.06);
}
.tracy-notes__chip--add button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
}

.tracy-notes__filters-help {
  font-size: 12px;
  color: var(--color-text-gray, #6d6f75);
  margin-top: 8px;
  font-style: italic;
}

/* Edit mode: switch on data-mode="edit" */

.tracy-notes[data-mode="edit"] .tracy-notes__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tracy-notes[data-mode="edit"] .tracy-notes__add {
  display: inline-block;
}

.tracy-notes[data-mode="edit"] .tracy-notes__preference {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: text;
}

.tracy-notes[data-mode="edit"] .tracy-notes__preference:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tracy-notes__add-input {
  flex: 1 1 100%;
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

@media (max-width: 1024px) {
  .tracy-notes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tracy-notes {
    padding: 22px 20px;
  }
  .tracy-notes__header {
    flex-direction: column;
    gap: 12px;
  }
  .tracy-notes__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Desktop: notes panel ("Your Matching Profile") sits to the RIGHT of the
   chat card, per Figma (chat + notes in one row, gap 24px). Below this width
   the row stays stacked (chat on top, notes full-width below). The 1200px
   floor keeps the chat usable: the portal sidebar is 232px, so narrower
   viewports don't leave the chat enough room beside a ~450px rail. */
@media (min-width: 1200px) {
  /* Fill the full width beside the nav sidebar (incl. wide / secondary
     monitors) — no centered cap, so the chat card + rail use all the room. */
  .main-content {
    max-width: none;
  }
  .tracy-row {
    flex-direction: row;
    align-items: stretch;
  }
  /* Fixed 75 / 25 split: chat 75%, notes rail 25% (each minus half the 24px
     gap so they total 100%). */
  .tracy-row > .tracy-card {
    flex: 0 0 calc(75% - 12px);
    min-width: 0;
  }
  /* Rail is a fixed ~380px; the chat flex-grows into the rest. Its height is
     capped to the chat card (`--chat-card-h`, sized by sizeTracyCard() to fit
     the first viewport) so the panel never exceeds the screen — the card grid
     scrolls internally instead (see .tracy-notes__grid below). */
  .tracy-notes {
    flex: 0 0 calc(25% - 12px);
    min-width: 0;
    height: var(--chat-card-h, auto);
    overflow: hidden;
    /* Compact spacing so more fits before the grid needs to scroll. */
    padding: 20px 20px;
    gap: 12px;
  }
  .tracy-notes__header {
    padding-bottom: 12px;
  }
  /* In the narrow rail, a 2-column card grid is too cramped (labels wrap, chips
     truncate hard) — stack the cards one per row so each gets the full width.
     Below 1200px the panel is full-width and keeps the 2-column default.
     This grid is the scroll container: the header stays put and the cards
     scroll when they overflow the viewport-capped panel height. */
  .tracy-notes__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Reserve room for the scrollbar so it doesn't overlay the chips. */
    padding-right: 12px;
    scrollbar-gutter: stable;
  }
  .tracy-notes__section {
    padding: 10px 12px;
    gap: 8px;
  }
}

.tracy-restart-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  z-index: 2;
}

.tracy-restart-btn:hover {
  background: #fff;
  transform: rotate(-45deg);
}

.tracy-restart-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tracy-avatar {
  width: 268px;
  height: 268px;
  border-radius: 50%;
  object-fit: cover;
}

.tracy-intro {
  text-align: center;
}

.tracy-intro h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: -0.48px;
  line-height: 40px;
}

.tracy-intro h2 em {
  font-style: italic;
  font-weight: 700;
}

.tracy-intro p {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 40px;
}

.tracy-chatbox {
  width: 100%;
  /* Match the thread — fill the card width instead of a centered 676px pill. */
  max-width: none;
  /* Height is content-driven (the textarea auto-grows); this is just a 1-line floor.
     Rounded-rect (not a full pill) so it still looks right once it grows multi-line. */
  min-height: 52px;
  background: #fff;
  border-radius: 22px;
  display: flex;
  align-items: flex-end; /* buttons stay pinned to the bottom as the textarea grows */
  padding: 7px 12px 7px 22px;
  gap: 10px;
  box-sizing: border-box;
}

.tracy-chatbox textarea {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--text);
  /* Claude/GPT-style auto-grow: starts one line, grows with content (JS sets the height),
     caps at ~5 lines then scrolls. resize:none kills the manual drag handle. */
  resize: none;
  line-height: 1.45;
  max-height: 132px;
  overflow-y: auto;
  padding: 6px 0;
  margin: 0;
}

.tracy-chatbox textarea::placeholder {
  color: rgba(88, 85, 94, 0.5);
  font-weight: 500;
  font-style: normal;
}

.tracy-chatbox-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--send-gradient);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.send-btn img {
  width: 20px;
  height: 20px;
}

/* Chatbox + disclaimer as ONE unit, so the card's flex gap doesn't push the disclaimer
   far below the input — it sits tight under it. */
.tracy-composer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: 100%; /* card is align-items:center — without this the wrapper shrinks + narrows the input */
}

/* AI-reliability disclaimer under the composer (ChatGPT/Claude style) — tiny, low-profile. */
.tracy-disclaimer {
  margin: 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.75;
}

/* ── Info cards row ── */

.info-cards-row {
  display: flex;
  gap: 65px;
}

/* ── Shared card styles ── */

.info-card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.info-card-header {
  background: var(--primary);
  border-bottom: 1px solid rgba(3, 73, 75, 0.36);
  border-radius: 12px 12px 0 0;
  padding: 22px 42px;
  min-height: 79px;
  display: flex;
  align-items: center;
}

.info-card-header h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.info-card-body {
  padding: 24px 32px;
  flex: 1;
}

/* ── Therapists card ── */

.therapists-card {
  flex: 1.3;
  min-width: 0;
}

.therapist-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

/* photo | (name + pronouns + "Why this may be a fit") | CTA. Top-aligned so the reasons sit
   beside the photo instead of stacking below it — keeps the card compact. */
.therapist-entry__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.therapist-entry:hover,
.therapist-entry:focus-visible {
  outline: none;
  background: rgba(68, 117, 105, 0.06);
}

/* Subsequent cards just get a small gap; no separator line — the card
   border (transparent → primary-tinted on hover) does the visual work. */
.therapist-entry + .therapist-entry,
.therapist-entry.has-separator {
  margin-top: 6px;
}

.therapist-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.therapist-photo.rounded-lg {
  border-radius: 15px;
}

.therapist-photo.rounded-md {
  border-radius: 10px;
}

.therapist-info {
  flex: 1;
  min-width: 0;
}

.therapist-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: var(--text);
}

.therapist-pronouns {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.therapist-pronouns svg {
  width: 16px;
  height: 16px;
}

.referred-by {
  font-size: 12px;
  color: #6b7280;
  margin: 2px 0 0;
}

.therapist-credentials {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.42px;
  color: var(--text);
}

.match-badge {
  width: 120px;
  min-width: 120px;
  height: 48px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.match-badge-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #fff;
}

.match-badge-score {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #fff;
  line-height: 1.2;
}

/* Referred state — replaces the green score badge with a yellow status pill
   when this therapist referred the patient out (or when displayed in the
   "Referred Therapist" section). Single-line label, dark text on yellow. */
.match-badge--referred {
  background: #FACC15;
}
.match-badge--referred .match-badge-label {
  color: #0E2A2E;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
}

/* Booked state — therapist the patient already has an appointment with.
   Single-line "Booked" pill (teal) instead of a fabricated matching score. */
.match-badge--booked {
  background: #447569;
}
.match-badge--booked .match-badge-label {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
}

/* GOOD FIT — replaces the raw matching-score number for RAG matches. */
.match-badge--fit .match-badge-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Verified-by-TMind — a quiet trust chip (directory-v2's badge language:
   light tint + dark teal + trailing check), NOT a button-sized block that
   competes with the View Profile CTA beside it. */
.match-badge--verified {
  display: inline-flex;
  vertical-align: 2px;
  width: auto;
  min-width: 0;
  height: 22px;
  padding: 0 10px;
  margin-left: 8px;
  background: #e7f3ee;
  border-radius: 999px;
  flex-direction: row;
}
.match-badge--verified .match-badge-label {
  color: #1c5b5d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.12px;
  white-space: nowrap;
}
.match-badge--verified .match-badge-label::before {
  content: "\2713";
  margin-right: 4px;
}

/* "Why this may be a fit" reason list under each match card. */
.insurance-disclaimer {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(68, 117, 105, 0.07);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* "We don't currently have your insurance" note (none of the matches accept it). */
.insurance-disclaimer--none {
  background: rgba(234, 179, 8, 0.09);
  border-color: rgba(234, 179, 8, 0.5);
  color: #854d0e;
}

/* Divider before the non-accepting "More options" group. */
.insurance-more-divider {
  margin: 14px 0 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Right-side CTA on a match card: "View Profile" button (+ optional "Booked" tag). */
.therapist-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.view-profile-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #447569;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.view-profile-btn:hover {
  background: #356654;
}

/* Reminder under a matches group (chat bubble + home panel). Rendered with the matches,
   never a persisted chat message. */
.matches-cta-hint {
  margin: 10px 0 2px;
  font-size: 12px;
  color: var(--muted);
}

.therapist-reasons {
  /* now lives inside .therapist-info (beside the photo), so no left indent needed */
  margin-top: 8px;
}
.therapist-reasons__title {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.therapist-reasons__list {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
}
.therapist-reasons__list li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* Divider above the "Sessions you've booked" subsection in the matches card. */
.therapist-list-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 4px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.therapist-list-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--card-border);
}

/* Section header that appears between the matched list and the referred list. */
.referred-header {
  margin-top: 24px;
}

/* The [hidden] attribute alone doesn't beat the .info-card-header /
   .info-card-body display rules (class specificity wins over UA styles).
   This selector is specific enough to override them when JS sets `hidden`. */
.info-card-header[hidden],
.info-card-body[hidden] {
  display: none;
}

/* ── Sessions card ── */

.sessions-card {
  flex: 1;
  min-width: 0;
}

/* Figma "upcoming"/"past" card: a #FAFAFA rounded card wrapping the entry row,
   action buttons, and (upcoming) the agreement checkbox. */
.session-card {
  background: #fafafa;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.session-entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.session-calendar {
  width: 56px;
  min-width: 56px;
  height: 56px;
  background: rgba(217, 217, 217, 0.2);
  border: 1px solid #c4c7c5;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.session-calendar-month {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary);
}

.session-calendar-day {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.session-details {
  flex: 1;
  min-width: 0;
}

.session-therapist-name {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}

.session-pronouns {
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: var(--text);
}

.session-time {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Muted pill on a cancelled past-session card: "Cancelled · Refunded $X" /
   "Cancelled · No refund". */
.session-status--cancelled {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 360px;
  background: #f0f0f2;
  color: #6b6b70;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

/* Amber pill on an incomplete past-session card: the therapist marked the
   session "not completed" (no-show / failed session). The card stays visible
   with Report + Receipt so the patient can dispute; money is handled
   manually per the signed policy. */
.session-status--incomplete {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 360px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

/* B27+: hint on a past-session card telling the patient how long they have left
   to report a problem before the guaranteed-report window closes. */
.session-report-window { font-size: 12px; color: #6b7280; margin: 2px 0 0; }

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.btn-meeting,
.btn-reschedule,
.btn-receipt,
.btn-feedback {
  min-height: 36px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 360px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.18s ease;
}

.btn-meeting:hover,
.btn-reschedule:hover,
.btn-receipt:hover,
.btn-feedback:hover {
  opacity: 0.9;
}

.btn-meeting svg,
.btn-reschedule svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Cancel: subdued/destructive — outlined, not a filled primary, so it reads
   as the secondary action next to Join Meeting / Reschedule. */
.btn-cancel {
  min-height: 36px;
  min-width: 80px;
  padding: 8px 14px;
  border-radius: 360px;
  border: 1px solid #d14343;
  background: #fff;
  color: #d14343;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}

.btn-cancel:hover {
  background: #d14343;
  color: #fff;
}

.session-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.session-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.session-checkbox .checkbox-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.session-checkbox .policy-link {
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Section sub-headings inside the Sessions card ("Upcoming Sessions" / "Past
   Sessions"). The card body stacks: subhead → list → subhead-row → list. */
.session-subhead {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.session-subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 32px 0 16px;
}

.session-subhead-row .session-subhead {
  margin: 0;
}

/* ⋮ overflow button on a past-session card → opens a small dropdown menu. */
.session-kebab-wrap {
  position: relative;
  flex-shrink: 0;
}

.session-kebab {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #444846;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 360px;
}

.session-kebab:hover {
  background: rgba(0, 0, 0, 0.04);
}

.session-kebab svg {
  width: 24px;
  height: 24px;
}

.session-kebab-menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 20;
  display: none;
}

.session-kebab-menu.is-open {
  display: block;
}

.session-kebab-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}

.session-kebab-menu-item:hover {
  background: #f3f5f4;
}

/* ── Report-a-problem modal form ── */

.report-question {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px;
}

.report-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.report-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.report-option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.report-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--text);
}

.report-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.report-helper {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}

.report-window-note {
  font-size: 13px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 12px;
}

.report-thanks p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

/* Spacing between stacked session cards in each list. */
#session-list .session-card + .session-card,
#past-session-list .session-card + .session-card {
  margin-top: 16px;
}

/* ── Confidentiality modal ── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.is-visible {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 20px;
  max-width: 720px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--muted);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  color: var(--text);
}

.modal-title {
  margin: 0;
  padding: 32px 56px 20px 32px;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-dark);
  flex-shrink: 0;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px;
  text-align: left;
}

.modal-body h4 {
  margin: 24px 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.modal-body h4:first-child {
  margin-top: 0;
}

.modal-body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.modal-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.modal-body li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 8px;
}

.modal-body li strong {
  font-weight: 600;
}

.modal-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.modal-disclaimer {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  flex: 1;
}

.modal-btn-agree {
  width: 149px;
  min-width: 149px;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.18s ease;
}

.modal-btn-agree:hover:not(:disabled) {
  opacity: 0.9;
}

.modal-btn-agree:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.modal-btn-cancel {
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.modal-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.04);
}

.modal-box--small {
  max-width: 460px;
  width: 90%;
}

.modal-box--small .modal-body {
  padding: 8px 32px 16px;
}

.modal-box--small .modal-footer {
  justify-content: flex-end;
}

/* Reschedule modal — slightly wider than --small to fit the slot grid
   without horizontal cramming. Slot grid styling is conservative: square-
   ish chips, single-select highlights with the primary color. */
.modal-box--reschedule {
  max-width: 540px;
  width: 92%;
}
.modal-box--reschedule .modal-footer {
  justify-content: flex-end;
}
.modal-box--cancel {
  max-width: 460px;
  width: 92%;
}
.modal-box--cancel .modal-footer {
  justify-content: flex-end;
}
.modal-box--cancel #cancel-modal-text {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.reschedule-subtitle {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.reschedule-subtitle span {
  color: var(--text);
  font-weight: 600;
}
/* Reschedule calendar — a compact 3-week (21-cell) window, same rolling-
   stepper pattern as the profile-page booking calendar (.cal-grid et al in
   tmatchProfilePage_styles.css), but scoped under its own .reschedule-cal-*
   classes since this modal has its own tighter footprint. */
.reschedule-cal {
  margin-bottom: 16px;
}
.reschedule-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.reschedule-cal-nav {
  appearance: none;
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.reschedule-cal-nav:hover:not(:disabled) {
  border-color: #447569;
}
.reschedule-cal-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.reschedule-cal-month {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.reschedule-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  row-gap: 2px;
}
.reschedule-cal-daylabel {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 2px 0 4px;
}
.reschedule-cal-cell {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  position: relative;
  font: inherit;
  font-size: 13px;
  color: #9aa5a1;
  cursor: default;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.reschedule-cal-cell.is-available {
  color: #0e2a2e;
  font-weight: 600;
  cursor: pointer;
}
.reschedule-cal-cell.is-available::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #447569;
  transform: translateX(-50%);
}
.reschedule-cal-cell.is-available:hover {
  background: #eef4f1;
}
.reschedule-cal-cell.is-selected {
  background: #447569;
  color: #fff;
}
.reschedule-cal-cell.is-selected::after {
  background: #fff;
}
.reschedule-cal-cell:disabled {
  opacity: 0.35;
  cursor: default;
}
.reschedule-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  min-height: 80px;
  margin-bottom: 12px;
}
.reschedule-slots-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.reschedule-slot {
  appearance: none;
  background: #fff;
  border: 1.5px solid #447569;
  color: #447569;
  padding: 7px 8px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.reschedule-slots {
  border-top: 1px solid var(--card-border, #e5e7eb);
  padding-top: 12px;
}
.reschedule-slot:hover {
  background: #f2f7f5;
}
.reschedule-slot.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.reschedule-error {
  margin: 0;
  color: #b3261e;
  font-size: 13px;
}
.reschedule-notice { font-size: 12px; color: #6b7280; margin: 4px 0 0; }

/* ── Responsive ── */

@media (max-width: 1260px) {
  .main-content {
    padding: 16px 24px 32px;
  }

  .info-cards-row {
    gap: 30px;
  }

  .tracy-card {
    padding: 60px 30px;
  }
}

@media (max-width: 1024px) {
  .info-cards-row {
    flex-direction: column;
    gap: 30px;
  }

  .therapists-card,
  .sessions-card {
    flex: none;
  }

  .session-actions {
    flex-wrap: wrap;
  }

  .btn-meeting,
  .btn-reschedule {
    min-width: 140px;
  }
}

@media (max-width: 900px) {
  .modal-box {
    width: 95%;
  }

  .modal-title {
    padding: 24px 48px 16px 24px;
    font-size: 18px;
  }

  .modal-body {
    padding: 0 24px;
  }

  .modal-footer {
    padding: 16px 24px;
    flex-direction: column;
    gap: 12px;
  }

  .modal-btn-agree {
    width: 100%;
    min-width: 0;
  }

  .main-content {
    padding: 12px 16px 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .welcome-text h1 {
    font-size: 26px;
  }

  .welcome-text p {
    font-size: 14px;
  }

  .tracy-card {
    padding: 50px 20px;
    border-radius: 24px;
    gap: 30px;
  }

  .tracy-avatar {
    width: 180px;
    height: 180px;
  }

  .tracy-chatbox {
    max-width: 100%;
    min-height: 42px;            /* slim when idle */
    padding: 5px 6px 5px 16px;
    border-radius: 20px;
    transition: min-height 0.15s ease, box-shadow 0.15s ease;
  }

  /* Tap to type: the bar thickens a touch + lifts, and rides above the system keyboard —
     the interactive-widget viewport flag shrinks the viewport on focus, and sizeTracyCard
     (listening on resize) reflows the card so the bar sits just above the keyboard. */
  .tracy-chatbox:focus-within {
    min-height: 50px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* 16px keeps iOS from auto-zooming the page when the field is focused. */
  .tracy-chatbox textarea {
    font-size: 16px;
  }

  /* Smaller send button so the idle bar is genuinely thin (always visible now the mic is gone). */
  .send-btn {
    width: 32px;
    height: 32px;
  }
  .send-btn img { width: 17px; height: 17px; }
}

@media (max-width: 600px) {
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }


  .welcome-text h1 {
    font-size: 22px;
  }

  .welcome-text p {
    font-size: 13px;
  }

  .tracy-avatar {
    width: 140px;
    height: 140px;
  }

  .tracy-intro h2,
  .tracy-intro p {
    font-size: 18px;
    line-height: 28px;
  }

  .info-card-header {
    padding: 16px 20px;
    min-height: auto;
  }

  .info-card-header h3 {
    font-size: 20px;
  }

  .info-card-body {
    padding: 20px 16px;
  }

  /* Stack the card on phones: photo + name/reasons on top, full-width button BELOW —
     otherwise the View Profile button steals the width and the name wraps per-letter. */
  .therapist-entry__row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .therapist-photo {
    width: 60px;
    height: 60px;
  }

  .therapist-cta {
    flex-basis: 100%;
    align-items: stretch;
  }

  .view-profile-btn {
    width: 100%;
    text-align: center;
  }

  .match-badge {
    width: 100%;
    min-width: 0;
    height: 38px;
    flex-direction: row;
    gap: 8px;
  }

  .session-actions {
    flex-direction: column;
  }

  .btn-meeting,
  .btn-reschedule {
    width: 100%;
    min-width: 0;
  }

  .session-checkbox .checkbox-label {
    font-size: 15px;
  }

  .notification-bell {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .notification-bell svg {
    width: 28px;
    height: 28px;
  }
}

/* ── Tracy message thread ── */

.tracy-messages {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  /* Fill the card width so the thread + bubbles stretch on wide / secondary
     monitors (the card is centered, so a cap would float the thread narrow). */
  max-width: none;
  /* Flex-grow to fill whatever vertical space is left inside the card
     after avatar/intro/chatbox/CTA. min-height: 0 lets flex shrink it on
     small viewports. No fixed max-height — the card itself is sized to fit
     the viewport, so messages inherit that constraint via flex math. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Reserve room for the scrollbar so it doesn't overlay the bubbles' right edge. */
  padding-right: 12px;
  scrollbar-gutter: stable;
}

.tracy-messages.is-visible {
  display: flex;
}

/* Assistant message: avatar + name row, then bubble */

.tracy-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 6px;
  max-width: 88%;
}

.tracy-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tracy-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.tracy-msg-name {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.tracy-bubble,
.user-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  word-break: break-word;
}

.tracy-msg .tracy-bubble {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: var(--text);
  border-bottom-left-radius: 4px;
}

/* Rich-text styling for markdown rendered inside Tracy bubbles.
   The :not() exclusions are critical — the CTA bubble's action button AND the
   match-card "View Profile" button are also <a>s inside .tracy-bubble, and
   without excluding them they inherit the underlined-link styling (higher
   specificity than the button class) and lose their green-bg + white-text. */
.tracy-bubble a:not(.tracy-cta-btn):not(.view-profile-btn),
.tracy-bubble--summary a:not(.tracy-cta-btn):not(.view-profile-btn) {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.tracy-bubble a:not(.tracy-cta-btn):not(.view-profile-btn):hover,
.tracy-bubble--summary a:not(.tracy-cta-btn):not(.view-profile-btn):hover {
  color: var(--primary-dark, #34594f);
}
.tracy-bubble code,
.tracy-bubble--summary code {
  background: rgba(68, 117, 105, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.tracy-bubble strong,
.tracy-bubble--summary strong {
  font-weight: 600;
}
.tracy-bubble em,
.tracy-bubble--summary em {
  font-style: italic;
}

.user-bubble {
  align-self: flex-end;
  max-width: 88%;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* CTA rendered as its own Tracy message bubble (same avatar/name meta,
   same .tracy-bubble shell) — body is a primary-color pill button instead
   of plain text. Appended when the session reaches `completed`. */
.tracy-msg .tracy-bubble--cta {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.tracy-bubble__cta-text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}
.tracy-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.tracy-cta-btn:hover,
.tracy-cta-btn:focus-visible {
  background: var(--primary-dark, #34594f);
  outline: none;
}
.tracy-cta-btn:active {
  transform: translateY(1px);
}

/* Matches bubble: Tracy's "here are your matches" message rendered after
   the user finishes filling profile. Top-N therapist cards live INSIDE
   the bubble so the match feels like a continuation of the chat instead
   of a separate panel. Reuses the same .therapist-entry markup as the
   "Matched Therapists" section below, so styling stays consistent. */
.tracy-msg--matches {
  /* Fixed, design-width card (~Figma 577 + padding) so the therapist rows stay
     tight — not stretched edge-to-edge with a big empty gap before the badge on
     the now-wider chat. Same width for every matches bubble regardless of cards. */
  width: 100%;
  max-width: 620px;
}
.tracy-msg .tracy-bubble--matches {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tracy-bubble__matches-lead {
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}
.tracy-bubble__matches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tracy-bubble__matches-list .therapist-entry {
  padding: 10px 12px;
  background: transparent;
  border-radius: 12px;
}
.tracy-bubble__matches-list .therapist-entry:focus-visible {
  outline: none;
}
.tracy-bubble__matches-list .therapist-entry.has-separator {
  border-top: 1px solid #ececec;
}

/* Summary-check bubble: rendered as its own Tracy message when the
   single-agent variant emits a non-null `summary`. Visually distinct from
   normal Tracy bubbles so the user reads it as a "recap & confirm" beat
   rather than another conversational turn. */
.tracy-msg .tracy-bubble--summary {
  background: rgba(68, 117, 105, 0.06);
  border: 1px solid rgba(68, 117, 105, 0.22);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tracy-summary-header {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.tracy-summary-text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}
.tracy-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.tracy-summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.tracy-summary-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tracy-summary-chip:active:not(:disabled) {
  transform: translateY(1px);
}
.tracy-summary-chip--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.tracy-summary-chip--primary:hover:not(:disabled),
.tracy-summary-chip--primary:focus-visible:not(:disabled) {
  background: var(--primary-dark, #34594f);
  border-color: var(--primary-dark, #34594f);
  outline: none;
}
.tracy-summary-chip--secondary {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}
.tracy-summary-chip--secondary:hover:not(:disabled),
.tracy-summary-chip--secondary:focus-visible:not(:disabled) {
  background: rgba(68, 117, 105, 0.08);
  outline: none;
}

/* Empty-state banner shown in #therapist-list when matches can't be rendered:
   --cta variant when backend reports profileIncomplete (with action button),
   --info variant when profile is complete but no licensed therapists matched. */
.match-empty-banner {
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 12px 0;
}
.match-empty-banner--cta {
  background: #f4f8f6;
  border: 1px solid #c9ddd4;
}
.match-empty-banner--info {
  background: #f7f7f5;
  border: 1px solid #e2e2dd;
}
/* Honest zero-result state: in-state therapists exist but the patient's
   filters excluded them all. Warm amber, not alarming red. */
.match-empty-banner--filters {
  background: #fdf6ec;
  border: 1px solid #ecd9b8;
}
.match-empty-banner__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.match-filter-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #d8c7a6;
  border-radius: 999px;
  color: #7c5e1e;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.match-filter-remove:hover,
.match-filter-remove:focus-visible {
  background: #f6ead2;
  border-color: #c9b083;
  outline: none;
}
.match-filter-remove:disabled {
  opacity: 0.5;
  cursor: default;
}
.match-filter-remove span {
  font-size: 11px;
  color: #b08a3a;
}
.match-empty-banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-empty-banner__text strong {
  font-weight: 600;
  color: #1f2937;
}
.match-empty-banner__text span {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}
.match-empty-banner__cta {
  align-self: flex-start;
  display: inline-block;
  padding: 9px 18px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.15s ease;
}
.match-empty-banner__cta:hover,
.match-empty-banner__cta:focus-visible {
  background: var(--primary-dark);
  outline: none;
}
@media (min-width: 640px) {
  .match-empty-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* Filters banner keeps a vertical stack so the remove buttons wrap under
     the text instead of being squeezed beside it. */
  .match-empty-banner--filters {
    flex-direction: column;
    align-items: stretch;
  }
  .match-empty-banner__cta {
    align-self: center;
    white-space: nowrap;
  }
}

/* Typing indicator (inside .tracy-msg) */

.tracy-msg--typing .typing-indicator {
  width: 100%;
  box-sizing: border-box;
}

.typing-indicator {
  background: #fff;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  padding: 14px 18px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.typing-dot {
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 50%;
  animation: typing-bounce 1.2s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); }
}

/* Compact layout when chat thread is active — hide redundant hero avatar; Tracy shows per message */

.tracy-card.has-messages {
  /* Padding scales with viewport so phones aren't boxed in by thick green margins
     (≈15px sides, ≈15px top/bottom at 390px) while desktop keeps its roomy 36/40px.
     clamp avoids the media-query cascade tie this rule lost before. */
  /* smaller BOTTOM padding — the disclaimer is the last row and doesn't need a big gutter below it */
  padding: clamp(14px, 4vw, 36px) clamp(12px, 4vw, 40px) 14px;
  gap: clamp(10px, 2.5vw, 20px);
  /* Height is governed by --chat-card-h (set by myportal.js sizeTracyCard).
     Do NOT pin height here, or the dynamic-fit logic gets overridden the
     moment chat goes active. overflow: hidden ensures the inner .tracy-
     messages flex child handles its own scroll instead of the card. */
  overflow: hidden;
}

.tracy-card.has-messages .tracy-avatar,
.tracy-card.has-messages .tracy-intro {
  display: none;
}

.tracy-card.has-messages .tracy-messages {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

/* Disabled input while waiting */

.tracy-chatbox textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Slice 5: Tracy profile-drift card — rendered inline under the most
   recent Tracy bubble when extraction detects patient attributes that
   differ from the stored profile. Uses the app palette (teal accent
   over light-teal bg) to read as part of Tracy 's message stream. */
/* Profile-drift suggestion card. Mirrors the in-chat summary bubble
   (.tracy-bubble--summary) — same teal-tint surface, border, and pill buttons
   (.tracy-summary-chip) — so it reads as part of the same conversation, not a
   foreign element. (The old --color-* tokens are undefined on this page, which
   is why it used to render transparent and blend into the chat.) */
.tracy-drift-card {
  margin: 10px 0 10px 40px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(68, 117, 105, 0.06);
  border: 1px solid rgba(68, 117, 105, 0.22);
  border-radius: 14px;
  font-family: "Inter", sans-serif;
  color: var(--text);
}

.tracy-drift-card__header {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}

.tracy-drift-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tracy-drift-card__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

.tracy-drift-card__item input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px; /* align with the first line of (possibly wrapping) label */
}

.tracy-drift-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}

/* Buttons are the same pills as the summary bubble's Yes / Add-more chips. */
.tracy-drift-card__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.tracy-drift-card__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tracy-drift-card__btn:active:not(:disabled) {
  transform: translateY(1px);
}

.tracy-drift-card__btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.tracy-drift-card__btn--primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.tracy-drift-card__btn--secondary {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}
.tracy-drift-card__btn--secondary:hover:not(:disabled) {
  background: rgba(68, 117, 105, 0.08);
}

.tracy-drift-card__error {
  color: var(--required);
  font-size: 12px;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Quick Check v2 — collectors inside the summary bubble.
   Injected by chat-quick-check-card.js when appendSummaryMessage runs.
   Sits between the summary text and the [Yes / I want to add more] actions.
   ───────────────────────────────────────────────────────────────────────── */
.tracy-qc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border-light);
}

.tracy-qc__loading {
  color: var(--color-text-gray);
  font-size: 13px;
  font-style: italic;
}

.tracy-qc__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tracy-qc__heading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-gray);
}

.tracy-qc__section--required .tracy-qc__heading {
  color: var(--color-primary-dark);
}

.tracy-qc__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tracy-qc__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-dark);
  min-width: 130px;
}

.tracy-qc__input {
  padding: 6px 10px;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  background: var(--color-white);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--color-text-dark);
  min-width: 180px;
}

.tracy-qc__input--state {
  min-width: 150px;
}

.tracy-qc__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(68, 117, 105, 0.15);
}

.tracy-qc__status {
  font-size: 12px;
  color: var(--color-text-gray);
}

.tracy-qc__status--ok {
  color: #2c8a4a;
}

.tracy-qc__status--err {
  color: #c0392b;
}

.tracy-qc__heard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tracy-qc__heard-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(68, 117, 105, 0.10);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 500;
}

/* Availability — collapsed <details> by default, expands to the 7×3 grid. */
.tracy-qc__avail {
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  background: var(--color-white);
}

.tracy-qc__avail > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.tracy-qc__avail > summary::-webkit-details-marker {
  display: none;
}

.tracy-qc__avail > summary::after {
  content: "▾";
  color: var(--color-text-gray);
  font-size: 11px;
  margin-left: 4px;
  transition: transform 0.15s ease;
}

.tracy-qc__avail[open] > summary::after {
  transform: rotate(180deg);
}

.tracy-qc__avail-label {
  font-weight: 500;
  color: var(--color-text-dark);
}

.tracy-qc__avail-count {
  font-size: 12px;
  color: var(--color-text-gray);
}

.tracy-qc__avail-grid {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-border-light);
  font-size: 12px;
}

.tracy-qc__avail-grid th,
.tracy-qc__avail-grid td {
  border: 1px solid var(--color-border-light);
  padding: 4px 6px;
  text-align: center;
}

.tracy-qc__avail-grid thead th {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  font-weight: 500;
  font-size: 11px;
}

.tracy-qc__avail-grid tbody th {
  background: var(--color-bg-light);
  text-align: left;
  font-weight: 500;
  color: var(--color-text-dark);
  font-size: 12px;
  padding: 4px 8px;
}

.tracy-qc__avail-sub {
  color: var(--color-text-gray);
  font-size: 10px;
  font-weight: 400;
}

.tracy-qc__avail-grid input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.tracy-qc__avail-grid label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
}

.tracy-qc__avail-status {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-text-gray);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
  min-height: 18px;
}

/* ══════════════════════════════════════════
   Edit-filters drawer (chat-filter-editor.js)
   Directory-style sectioned filter panel; the manual counterpart to the
   read-only "Active filters" chips. Palette + checkbox style mirror the
   public directory filter panel (public/css/directory.css .filter-*).
   ══════════════════════════════════════════ */
.tfe-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(3, 73, 75, 0.38);
  display: flex;
  justify-content: flex-end;
}
.tfe-overlay[hidden] { display: none; }
body.tfe-open { overflow: hidden; }

.tfe-drawer {
  width: 480px;
  max-width: 92vw;
  height: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 28px rgba(3, 73, 75, 0.18);
  animation: tfe-slide-in 0.18s ease-out;
}
@keyframes tfe-slide-in {
  from { transform: translateX(24px); opacity: 0.6; }
  to   { transform: translateX(0); opacity: 1; }
}

.tfe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.tfe-head h3 {
  margin: 0;
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #000;
}
.tfe-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.tfe-close:hover { color: var(--text); }

.tfe-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 20px 20px;
}

/* Sections within a group are siblings — separated by space, NOT by a rule
   (the rule now marks the GROUP boundary instead, see .tfe-group-divider). The
   title is the subordinate level, so it's smaller than the group label above. */
.tfe-section { padding: 12px 0; }
.tfe-section h4 {
  margin: 0 0 12px;
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #1d2926;
}
.tfe-note {
  margin: -8px 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* Thin divider between the must-have sections and the rest (category labels
   removed per design — only the separation remains). */
.tfe-group-divider {
  margin: 10px 0 16px;
  border-top: 1px solid var(--border);
}

/* ⓘ info affordance: round "i" button + a click/hover popover holding the
   descriptive copy (kept out of the always-on layout so the drawer stays
   scannable). Click-to-toggle works on touch where hover doesn't. */
.tfe-info-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
.tfe-info {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tfe-info:hover { color: var(--primary); }
.tfe-info svg { display: block; }
.tfe-info-bubble {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 240px;
  max-width: 70vw;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(3, 73, 75, 0.16);
  font: 400 12px/1.45 "Inter", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  color: #26312e;
}
.tfe-info-wrap.open .tfe-info-bubble,
.tfe-info-wrap:hover .tfe-info-bubble { display: block; }

/* segmented single-select (gender / type / price / AI) — Figma green pills */
.tfe-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tfe-segment button {
  min-width: 80px;
  border: 1px solid var(--primary);
  background: var(--bg);
  color: var(--primary);
  border-radius: 360px;
  padding: 7px 16px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tfe-segment button:hover { background: rgba(68, 117, 105, 0.08); }
.tfe-segment button[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* checkbox grid (languages / specialties) */
.tfe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
.tfe-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #000;
  cursor: pointer;
}
.tfe-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* insurance searchable combobox */
.tfe-combo { position: relative; }
.tfe-combo-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--bg);
}
.tfe-combo-control:focus-within { border-color: var(--primary); }
/* Selected chips render OUTSIDE / below the search box, not inside it. */
.tfe-combo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tfe-combo-chips:empty { margin-top: 0; }
.tfe-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(68, 117, 105, 0.12);
  color: var(--primary);
  border-radius: 360px;
  padding: 3px 6px 3px 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.tfe-chip-x {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.tfe-chip-x:hover { color: var(--primary-dark); }
.tfe-combo-input {
  flex: 1 1 120px;
  min-width: 120px;
  border: none;
  outline: none;
  background: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #000;
  padding: 4px 2px;
}
.tfe-combo-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(3, 73, 75, 0.16);
  padding: 4px;
}
.tfe-combo-menu[hidden] { display: none; }
.tfe-combo-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #000;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.tfe-combo-opt:hover { background: rgba(68, 117, 105, 0.08); }
.tfe-combo-opt.is-sel { color: var(--primary); font-weight: 500; }
.tfe-combo-check { width: 16px; flex-shrink: 0; color: var(--primary); font-weight: 700; }
.tfe-combo-empty { padding: 12px 10px; font-size: 14px; color: var(--muted); }

.tfe-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
}
.tfe-clear {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 4px;
}
.tfe-clear:hover { color: var(--text); }
.tfe-apply {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tfe-apply:hover:not(:disabled) { background: var(--primary-dark); }
.tfe-apply:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 640px) {
  .tfe-drawer { width: 100vw; max-width: 100vw; }
  .tfe-grid { grid-template-columns: 1fr; }
}

/* Disabled receipt (no invoice for this session) */
.btn-receipt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-receipt:disabled:hover {
  opacity: 0.45;
}

/* Feedback star rating */
.feedback-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.feedback-star input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.feedback-star span {
  font-size: 34px;
  line-height: 1;
  color: #d8dcda;
  cursor: pointer;
  transition: color 0.12s ease;
}
/* row-reverse + sibling selector = hover/checked lights this star and all to its left */
.feedback-star:hover span,
.feedback-star:hover ~ .feedback-star span,
.feedback-star input:checked ~ span,
.feedback-star:has(input:checked) span,
.feedback-star:has(input:checked) ~ .feedback-star span {
  color: #f5b301;
}