.fc.svelte-7aq3fx {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .fc-loading.svelte-7aq3fx,
  .fc-note.svelte-7aq3fx {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
  }
  /* The live region is for screen readers only: the same text is already on
     screen as the loading line or the slot's note (L3). Taken out of flow so
     an always-mounted element cannot add a row gap to the card. */
  .fc-live.svelte-7aq3fx {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
  .fc-day.svelte-7aq3fx {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .fc-day-summary.svelte-7aq3fx {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    cursor: pointer;
    list-style: revert;
  }
  .fc-day-title.svelte-7aq3fx {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
  }
  .fc-day-meta.svelte-7aq3fx {
    font-size: 11px;
    color: #6b7280;
    display: inline-flex;
    gap: 4px;
  }
  .fc-slot.svelte-7aq3fx {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
  }
  .fc-primary.svelte-7aq3fx {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }
  .fc-time.svelte-7aq3fx {
    font-size: 11px;
    color: #6b7280;
    min-width: 3.2em;
  }
  .fc-wind.svelte-7aq3fx {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
  }
  .fc-arrow.svelte-7aq3fx {
    flex: none;
    color: #1976d2;
  }
  .fc-compass.svelte-7aq3fx {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
  }
  .fc-secondary.svelte-7aq3fx {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 11px;
    color: #4b5563;
  }
  .fc-field.svelte-7aq3fx {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
  }
  .fc-label.svelte-7aq3fx {
    color: #6b7280;
  }
  .fc-num.svelte-7aq3fx {
    font-variant-numeric: tabular-nums;
  }
  .fc-unit.svelte-7aq3fx {
    margin-inline-start: 2px;
    font-size: 0.85em;
    color: #6b7280;
  }
  .fc-na.svelte-7aq3fx {
    color: #9ca3af;
  }
  .fc-actions.svelte-7aq3fx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  /* The rebuild-offer CTA's look (ChatMessages.svelte): one "act on this"
     affordance in a chat bubble. `aria-disabled` rather than `disabled`, so
     the pending label stays readable and focus is not lost mid-window. */
  .fc-show.svelte-7aq3fx {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  .fc-show:hover[aria-disabled='false'].svelte-7aq3fx {
    background: #bbdefb;
  }
  .fc-show[aria-disabled='true'].svelte-7aq3fx {
    cursor: default;
    opacity: 0.7;
  }
  .fc-skeleton.svelte-7aq3fx .fc-bone:where(.svelte-7aq3fx) {
    display: inline-block;
    height: 10px;
    width: 3.5em;
    border-radius: 5px;
    background: #e5e7eb;
    animation: svelte-7aq3fx-fc-pulse 1.2s ease-in-out infinite;
  }
  .fc-skeleton.svelte-7aq3fx .fc-bone-lg:where(.svelte-7aq3fx) {
    height: 16px;
    width: 6em;
  }
  @keyframes svelte-7aq3fx-fc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
  /* The condensed row: primary pair leading, secondary trio trailing, the
     action wrapping under. Forced by `data-density="sheet"`, or chosen by
     the container query when the host is narrower than a side panel. */
  .fc[data-density='sheet'].svelte-7aq3fx .fc-slot:where(.svelte-7aq3fx) {
    grid-template-columns: auto 1fr;
  }
  .fc[data-density='sheet'].svelte-7aq3fx .fc-actions:where(.svelte-7aq3fx) {
    grid-column: 1 / -1;
  }
  @container (max-width: 420px) {
    .fc[data-density='auto'].svelte-7aq3fx .fc-slot:where(.svelte-7aq3fx) {
      grid-template-columns: auto 1fr;
    }
    .fc[data-density='auto'].svelte-7aq3fx .fc-actions:where(.svelte-7aq3fx) {
      grid-column: 1 / -1;
    }
  }
  html.dark .fc-slot.svelte-7aq3fx {
    background: #1f2937;
    border-color: #374151;
  }
  html.dark .fc-wind.svelte-7aq3fx {
    color: #f9fafb;
  }
  html.dark .fc-day-title.svelte-7aq3fx,
  html.dark .fc-compass.svelte-7aq3fx {
    color: #e5e7eb;
  }
  html.dark .fc-secondary.svelte-7aq3fx {
    color: #d1d5db;
  }


  .intent-options.svelte-82wj0v {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  /* The tool widgets' pill, restated because a Svelte style block is scoped
     to its component: the same look as the disambiguation pills the tool
     loop rendered, so an ask reads as the same kind of choice. */
  .widget-pill.svelte-82wj0v {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.3;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    max-width: 100%;
    text-align: start;
  }
  .widget-action.svelte-82wj0v {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
  }
  .widget-action.svelte-82wj0v:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #d1d5db;
  }
  .widget-pill.svelte-82wj0v:disabled {
    cursor: default;
    opacity: 0.6;
  }
  .widget-pill.chosen.svelte-82wj0v {
    border-color: #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    opacity: 1;
  }
  .intent-note.svelte-82wj0v {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: #6b7280;
  }
  /* Plan 3 (K-C): a widget's own component stacks above its caption. */
  .intent-widget.svelte-82wj0v {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Plan 5 (U7): the tiles' column count reads the WIDGET's width. */
    container-type: inline-size;
  }
  /* Plan 5 (U7, K-H): the yacht tiles — two columns at the rail and sheet
     widths, three above 480 px of widget width. The grid flows in the
     inline direction, so the step's `dir` lays a Hebrew grid right to left. */
  .yacht-tiles.svelte-82wj0v {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
  }
  @container (min-width: 480px) {
    .yacht-tiles.svelte-82wj0v {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .yacht-tile.svelte-82wj0v {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    text-align: start;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    min-width: 0;
  }
  .yacht-tile.svelte-82wj0v:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #d1d5db;
  }
  .yacht-tile.svelte-82wj0v:disabled {
    cursor: default;
    opacity: 0.6;
  }
  .yacht-tile.picked.svelte-82wj0v {
    border-color: #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    opacity: 1;
  }
  .dark .yacht-tile.svelte-82wj0v {
    background: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
  }
  .yacht-tile-image.svelte-82wj0v {
    display: block;
    aspect-ratio: 18 / 17;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f4f6;
  }
  .yacht-tile-image.svelte-82wj0v img:where(.svelte-82wj0v) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .yacht-tile-placeholder.svelte-82wj0v {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
  }
  .yacht-tile-name.svelte-82wj0v {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .yacht-tile-line.svelte-82wj0v {
    color: #6b7280;
    overflow-wrap: anywhere;
  }
  .yacht-tile.picked.svelte-82wj0v .yacht-tile-line:where(.svelte-82wj0v) {
    color: inherit;
  }
  /* Plan 5 (U9, R42): the haven list — one row per haven, the number, the
     name, the night's score pill, the distance and the eye button. The rows
     flow in the step's `dir`, so a Hebrew step lays each row right to left. */
  .haven-list.svelte-82wj0v {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
  }
  .haven-row.svelte-82wj0v {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    min-width: 0;
  }
  /* "You have looked at this one" — a trail through the list, deliberately
     quieter than `.picked` on the yacht tiles, which marks a CHOICE. Opening a
     haven chooses nothing. */
  .haven-row.opened.svelte-82wj0v {
    border-color: #bfdbfe;
    background: #eff6ff;
  }
  /* The reference: the haven the question was about, set above the numbered
     alternatives and ruled off from them. Indented by the width the numbers
     occupy so the two name columns line up. */
  .haven-reference.svelte-82wj0v {
    padding-inline-start: calc(6px + 1.25em + 6px);
    border-bottom: 1px solid #e5e7eb;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: 5px;
    margin-bottom: 2px;
  }
  /* The caveat a press earned, under the row that earned it. */
  .haven-note.svelte-82wj0v {
    margin: -2px 0 2px;
    padding-inline: 6px;
    color: #6b7280;
    font-size: 12px;
  }
  /* Announced, never shown: the notes above are the visible copy. */
  .haven-live.svelte-82wj0v {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .haven-number.svelte-82wj0v {
    flex: none;
    min-width: 1.25em;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
  }
  .haven-name.svelte-82wj0v {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
  }
  .haven-score.svelte-82wj0v {
    flex: none;
    padding: 1px 6px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  /* The map's own pill bands (WeatherScorePill: green ≥ 55, amber ≥ 30). */
  .haven-score-green.svelte-82wj0v { background: #22c55e; }
  .haven-score-amber.svelte-82wj0v { background: #f59e0b; }
  .haven-score-red.svelte-82wj0v { background: #ef4444; }
  .haven-dist.svelte-82wj0v {
    flex: none;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
  }
  .haven-eye.svelte-82wj0v {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: none;
    color: #1976d2;
    cursor: pointer;
  }
  .haven-eye.svelte-82wj0v:disabled {
    cursor: default;
    opacity: 0.5;
  }
  .haven-eye.svelte-82wj0v .material-symbols-outlined:where(.svelte-82wj0v) {
    font-size: 18px;
  }
  .haven-more.svelte-82wj0v {
    align-self: flex-start;
  }
  .dark .haven-number.svelte-82wj0v,
  .dark .haven-dist.svelte-82wj0v,
  .dark .haven-note.svelte-82wj0v {
    color: #9ca3af;
  }
  .dark .haven-row.opened.svelte-82wj0v {
    border-color: #1e3a8a;
    background: #172554;
  }
  .dark .haven-reference.svelte-82wj0v {
    border-bottom-color: #374151;
  }
  /* Plan 4 (K-F): the results row. Pills WRAP, never scroll sideways, and a
     name is never ellipsised — the row grows at the bottom-sheet width. */
  .results-pills.svelte-82wj0v {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
  }
  .results-pill.svelte-82wj0v {
    white-space: normal;
    max-width: 100%;
    text-align: start;
    align-items: flex-start;
  }
  .results-pill-lines.svelte-82wj0v {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
  }
  .results-pill-detail.svelte-82wj0v {
    font-size: 10px;
    color: #6b7280;
  }
  .results-skeleton-pill.svelte-82wj0v {
    width: 96px;
    height: 22px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: svelte-82wj0v-results-shimmer 1.2s ease-in-out infinite;
  }
  @keyframes svelte-82wj0v-results-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }
  .results-actions.svelte-82wj0v {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .results-actions.svelte-82wj0v .widget-pill:where(.svelte-82wj0v) {
    min-height: 32px;
    padding: 4px 12px;
  }
  .results-actions.svelte-82wj0v .widget-success:where(.svelte-82wj0v) {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
  }
  .results-actions.svelte-82wj0v .widget-success:where(.svelte-82wj0v) svg {
    width: 14px;
    height: 14px;
    color: #16a34a;
  }
  .results-offmap-hint.svelte-82wj0v {
    margin-top: 0;
    flex-basis: 100%;
  }
  .dark .results-pill-detail.svelte-82wj0v {
    color: #9ca3af;
  }
  /* The rebuild-offer CTA's look (ChatMessages.svelte): one "act on this"
     affordance in a chat bubble. */
  .report-btn.svelte-82wj0v {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1.5px solid #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .report-btn.svelte-82wj0v:hover:not(:disabled) {
    background: #bbdefb;
  }
  .report-btn.svelte-82wj0v:disabled {
    cursor: default;
    opacity: 0.8;
  }
  /* U7 (AI-budgets plan) — the wall reads as the chat's own bubble, not as
     an error: nothing failed, the budget simply ran out. */
  .budget-wall.svelte-82wj0v {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
  }
  .dark .budget-wall.svelte-82wj0v {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }
  .credits-link.svelte-82wj0v {
    display: inline-block;
    margin-top: 0.125rem;
    font-size: 12px;
    text-decoration: underline;
    opacity: 0.85;
  }
  .credits-link.svelte-82wj0v:hover {
    opacity: 1;
  }
  /* The confirmation after a granted bump: the positive tint the rest of the
     app uses for "this worked", so the receipt does not read as a refusal. */
  .budget-confirmation.svelte-82wj0v {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
  }
  .dark .budget-confirmation.svelte-82wj0v {
    background: #064e3b;
    border-color: #065f46;
    color: #d1fae5;
  }


  .widget-pill.svelte-p01qlr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.2;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
  }

  .widget-pill.svelte-p01qlr > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .widget-pill.svelte-p01qlr svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #6b7280;
  }

  .widget-icon-img.svelte-p01qlr {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .widget-action.svelte-p01qlr {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
  }

  .widget-action.svelte-p01qlr:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
  }

  /* ── The inert treatment (plan 3, U11, K-J) ──────────────────────────────
     Shared by every branch whose action retired. It is deliberately NOT a
     button and deliberately has no hover, focus or pointer affordance: the
     block says what the visitor did, and says the action is gone, and offers
     nothing to press. Muted against the live pills beside it so the two are
     told apart at a glance rather than by trying them. */
  .widget-inert.svelte-p01qlr {
    cursor: default;
    background: transparent;
    border-style: dashed;
    border-color: #e5e7eb;
    color: #9ca3af;
  }

  .widget-inert.svelte-p01qlr svg {
    color: #d1d5db;
  }

  .widget-inert.svelte-p01qlr .widget-icon-img:where(.svelte-p01qlr) {
    opacity: 0.5;
  }

  .widget-inert-note.svelte-p01qlr {
    font-size: 10px;
    font-style: italic;
    color: #9ca3af;
  }

  .product-card-inert.svelte-p01qlr {
    cursor: default;
    background: #fafafa;
    border-style: dashed;
    color: #9ca3af;
  }

  .product-card-inert.svelte-p01qlr .product-card-title:where(.svelte-p01qlr),
  .product-card-inert.svelte-p01qlr .product-card-desc:where(.svelte-p01qlr),
  .product-card-inert.svelte-p01qlr .product-card-price:where(.svelte-p01qlr) {
    color: #9ca3af;
  }

  .product-card-inert.svelte-p01qlr img {
    opacity: 0.6;
  }

  .widget-success.svelte-p01qlr {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
  }

  .widget-success.svelte-p01qlr svg {
    color: #16a34a;
  }

  .widget-mat-icon.svelte-p01qlr {
    font-size: 16px;
    flex-shrink: 0;
    color: #6b7280;
  }

  .widget-pill-multiline.svelte-p01qlr {
    max-width: 260px;
  }

  .widget-pill-multiline.svelte-p01qlr svg {
    width: 20px;
    height: 20px;
  }

  .widget-pill-multiline.svelte-p01qlr .widget-icon-img:where(.svelte-p01qlr) {
    width: 22px;
    height: 22px;
  }

  .widget-pill-lines.svelte-p01qlr {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.3;
    text-align: left;
  }

  .widget-pill-lines.svelte-p01qlr > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .widget-pill-subtitle.svelte-p01qlr {
    font-size: 10px;
    color: #9ca3af;
  }

  .widget-loc-num.svelte-p01qlr {
    font-size: 1em;
    font-weight: 600;
    color: #6b7280;
    margin-right: -2px;
    flex-shrink: 0;
  }

  .widget-loc-glow.svelte-p01qlr {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 4px 1px rgba(245, 158, 11, 0.6);
    flex-shrink: 0;
    margin-right: -1px;
  }

  /* Plan 4 U7 (R27) — the facility glyph: small, coloured like water, and
     sitting between the kind icon and the name so it reads as a qualifier of
     the kind ("marina · fresh water") rather than as the kind itself. */
  .widget-loc-facility.svelte-p01qlr {
    font-size: 14px;
    color: #0284c7;
    flex-shrink: 0;
    margin-left: -4px;
  }

  /* ── Product Cards: Single (horizontal) ── */
  .product-card-single.svelte-p01qlr {
    display: flex;
    flex-direction: row;
    max-width: 260px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    text-align: left;
  }

  .product-single-img.svelte-p01qlr {
    width: 72px;
    height: 72px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f3f4f6;
    border-radius: 9px 0 0 9px;
  }

  .product-single-placeholder.svelte-p01qlr {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 9px 0 0 9px;
  }

  .product-single-placeholder.svelte-p01qlr svg {
    width: 24px;
    height: 24px;
    color: #d1d5db;
  }

  /* ── Product Cards: Multi (scrollable) ── */
  .product-cards-scroll.svelte-p01qlr {
    position: relative;
    max-width: 88%;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }

  .product-cards-track.svelte-p01qlr {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }

  .product-cards-track.svelte-p01qlr::-webkit-scrollbar {
    height: 3px;
  }

  .product-cards-track.svelte-p01qlr::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
  }

  .product-card.svelte-p01qlr {
    flex-shrink: 0;
    width: 112px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
  }

  .product-card-img.svelte-p01qlr {
    width: 100%;
    height: 72px;
    object-fit: cover;
    background: #f3f4f6;
  }

  .product-card-placeholder.svelte-p01qlr {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
  }

  .product-card-placeholder.svelte-p01qlr svg {
    width: 24px;
    height: 24px;
    color: #d1d5db;
  }

  /* ── Shared product card parts ── */
  .product-card-body.svelte-p01qlr {
    padding: 5px 7px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 0;
  }

  .product-card-title.svelte-p01qlr {
    font-size: 10.5px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-desc.svelte-p01qlr {
    font-size: 9.5px;
    color: #6b7280;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-price.svelte-p01qlr {
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
    margin-top: 2px;
  }

  .product-card-per.svelte-p01qlr {
    font-size: 9px;
    font-weight: 400;
    color: #9ca3af;
  }


  .form-card.svelte-7zgxvb {
    width: 88%;
    border-radius: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform-origin: top center;
  }

  .form-header.svelte-7zgxvb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
  }

  .header-icon.svelte-7zgxvb {
    width: 16px;
    height: 16px;
    color: #3b82f6;
    flex-shrink: 0;
  }

  .header-title.svelte-7zgxvb {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
  }

  /* Location chips */
  .location-chips.svelte-7zgxvb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .loc-chip.svelte-7zgxvb {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 500;
    background: #e0e7ff;
    color: #3730a3;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chip-icon.svelte-7zgxvb {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .loc-arrow.svelte-7zgxvb {
    font-size: 10px;
    color: #94a3b8;
  }

  .loc-badge.svelte-7zgxvb {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 9999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
  }

  /* Form rows */
  .form-row.svelte-7zgxvb {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .form-row-pair.svelte-7zgxvb {
    flex-direction: row;
    gap: 8px;
  }

  .form-row-pair.svelte-7zgxvb > .field:where(.svelte-7zgxvb) {
    flex: 1;
  }

  /* Fields */
  .field.svelte-7zgxvb {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Label row with icon + text + info button */
  .field-label-row.svelte-7zgxvb {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .label-icon.svelte-7zgxvb {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .field-input.svelte-7zgxvb {
    padding: 4px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    background: white;
    color: #334155;
    outline: none;
  }

  .field-input.svelte-7zgxvb:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  /* Textarea for other preferences */
  .field-textarea.svelte-7zgxvb {
    padding: 4px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    background: white;
    color: #334155;
    outline: none;
    resize: none;
    width: 100%;
    height: 78px; /* 5 lines at 11px font + padding */
    overflow-y: auto;
    scrollbar-width: thin;
    font-family: inherit;
    line-height: 1.4;
  }

  .field-textarea.svelte-7zgxvb:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }

  .field-textarea.svelte-7zgxvb::placeholder {
    color: #94a3b8;
  }

  .field-textarea.svelte-7zgxvb::-webkit-scrollbar {
    width: 4px;
  }

  .field-textarea.svelte-7zgxvb::-webkit-scrollbar-track {
    background: transparent;
  }

  .field-textarea.svelte-7zgxvb::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
  }

  /* Range slider */
  .range-wrapper.svelte-7zgxvb {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
  }

  .range-thumb-value.svelte-7zgxvb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
  }

  .field-range.svelte-7zgxvb {
    width: 100%;
    height: 4px;
    appearance: none;
    background: linear-gradient(
      to right,
      #3b82f6 var(--val),
      #e2e8f0 var(--val)
    );
    border-radius: 2px;
    outline: none;
    margin: 0;
  }

  .field-range.svelte-7zgxvb::-webkit-slider-thumb {
    appearance: none;
    width: 36px;
    height: 24px;
    border-radius: 4px;
    background: #3b82f6;
    cursor: pointer;
    border: 1px solid #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition:
      transform 0.1s,
      box-shadow 0.1s,
      background 0.1s;
  }

  .field-range.svelte-7zgxvb::-moz-range-thumb {
    width: 36px;
    height: 24px;
    border-radius: 4px;
    background: #3b82f6;
    cursor: pointer;
    border: 1px solid #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition:
      transform 0.1s,
      box-shadow 0.1s,
      background 0.1s;
  }

  .field-range.svelte-7zgxvb::-webkit-slider-thumb:hover {
    background: #2563eb;
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  }

  .field-range.svelte-7zgxvb::-webkit-slider-thumb:active {
    background: #1d4ed8;
    transform: scale(0.95);
  }

  .field-range.svelte-7zgxvb::-moz-range-thumb:hover {
    background: #2563eb;
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  }

  .field-range.svelte-7zgxvb::-moz-range-thumb:active {
    background: #1d4ed8;
    transform: scale(0.95);
  }

  .range-labels.svelte-7zgxvb {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 500;
    color: #94a3b8;
    margin-top: -6px;
  }

  /* Toggle group */
  .toggle-group.svelte-7zgxvb {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
  }

  .toggle-btn.svelte-7zgxvb {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
  }

  .toggle-btn.svelte-7zgxvb:hover {
    border-color: #93c5fd;
    background: #f8fafc;
  }

  .toggle-btn.active.svelte-7zgxvb {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
  }

  .opt-icon.svelte-7zgxvb {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .toggle-btn.active.svelte-7zgxvb .opt-icon:where(.svelte-7zgxvb) {
    filter: none;
  }

  .opt-icon-svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .toggle-btn.active.svelte-7zgxvb .opt-icon-svg {
    color: white;
  }

  /* Stepper */
  .stepper.svelte-7zgxvb {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    overflow: hidden;
    width: fit-content;
  }

  .stepper-btn.svelte-7zgxvb {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
  }

  .stepper-btn.svelte-7zgxvb:hover:not(:disabled) {
    background: #f1f5f9;
  }

  .stepper-btn.svelte-7zgxvb:disabled {
    color: #cbd5e1;
    cursor: default;
  }

  .stepper-val.svelte-7zgxvb {
    min-width: 24px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #334155;
  }

  /* Submit button */
  .submit-btn.svelte-7zgxvb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px 0;
    border-radius: 8px;
    border: none;
    background: #3b82f6;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 2px;
  }

  .submit-btn.svelte-7zgxvb:hover {
    background: #2563eb;
  }

  .submit-btn.svelte-7zgxvb svg:where(.svelte-7zgxvb) {
    width: 14px;
    height: 14px;
  }

  /* Collapsed summary view */
  .collapsed-card.svelte-7zgxvb {
    padding: 8px 12px;
  }
  .collapsed-header.svelte-7zgxvb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .collapsed-icon.svelte-7zgxvb {
    width: 14px;
    height: 14px;
    color: #1976d2;
    flex-shrink: 0;
  }
  .collapsed-title.svelte-7zgxvb {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    flex: 1;
  }
  .collapsed-edit-btn.svelte-7zgxvb {
    background: none;
    border: none;
    color: #1976d2;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
  }
  .collapsed-edit-btn.svelte-7zgxvb:hover {
    background: #e3f2fd;
  }
  .collapsed-chips.svelte-7zgxvb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .collapsed-chip.svelte-7zgxvb {
    background: #f0f4f8;
    color: #555;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
  }

  /* ─── U8: centered-overlay presentation ─── */
  /* Card inside the portaled overlay: centered by the backdrop's flex,
     capped height with internal scroll for short viewports. Overrides
     .form-card's width: 88% (declared later in this block, so it wins). */
  .overlay-card.svelte-7zgxvb {
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Header affordance: minimize (overlay) / re-open centered (inline) */
  .header-mode-btn.svelte-7zgxvb {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 2px;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
  }
  .header-mode-btn.svelte-7zgxvb:hover {
    background: #f1f5f9;
    color: #334155;
  }
  .header-mode-icon.svelte-7zgxvb {
    font-size: 16px;
    line-height: 1;
  }

  /* In-stream anchor shown while the overlay is open */
  .form-stub.svelte-7zgxvb {
    width: 88%;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: start;
    font: inherit;
  }
  .form-stub.svelte-7zgxvb:hover {
    background: #f8fafc;
  }
  .form-stub-title.svelte-7zgxvb {
    font-size: 12px;
    font-weight: 600;
    color: #333;
  }
  .form-stub-hint.svelte-7zgxvb {
    font-size: 11px;
    color: #94a3b8;
    margin-inline-start: auto;
  }


  .form-card.svelte-1p64244 {
    width: 88%;
    border-radius: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .form-header.svelte-1p64244 {
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
  }

  .header-title.svelte-1p64244 {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
  }

  .pref-buttons.svelte-1p64244 {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .submit-btn.svelte-1p64244 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    border-radius: 8px;
    border: none;
    background: #3b82f6;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }

  .submit-btn.svelte-1p64244:hover {
    background: #2563eb;
  }

  .summary-chip.svelte-1p64244 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
  }


  .route-buttons-bar.svelte-kh8m82 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
    width: 88%;
  }
  .route-card-row.svelte-kh8m82 {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .route-select-btn.svelte-kh8m82 {
    flex: 1;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1.5px solid #1976d2;
    background: white;
    color: #1976d2;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .route-select-btn.svelte-kh8m82:hover {
    background: #e3f2fd;
  }
  .route-select-btn.selected.svelte-kh8m82 {
    background: #1976d2;
    color: white;
  }
  .route-name.svelte-kh8m82 {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .route-score.svelte-kh8m82 {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 9999px;
    background: rgba(25, 118, 210, 0.1);
    color: inherit;
    min-width: 28px;
    text-align: center;
  }
  .route-select-btn.selected.svelte-kh8m82 .route-score:where(.svelte-kh8m82) {
    background: rgba(255, 255, 255, 0.25);
  }
  .route-like-btn.svelte-kh8m82 {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .route-like-btn.svelte-kh8m82:hover:not(:disabled) {
    border-color: #f43f5e;
    background: #fff1f2;
    color: #f43f5e;
  }
  .route-like-btn.liked.svelte-kh8m82 {
    border-color: #f43f5e;
    background: #fff1f2;
    color: #f43f5e;
    cursor: default;
  }
  .heart-icon.svelte-kh8m82 {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  .route-like-btn.liked.svelte-kh8m82 .heart-icon:where(.svelte-kh8m82) {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  .paging-bar.svelte-kh8m82 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    -webkit-user-select: none;
    user-select: none;
  }
  .page-btn.svelte-kh8m82 {
    padding: 5px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #1976d2;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-user-select: none;
    user-select: none;
  }
  .page-btn.svelte-kh8m82:hover:not(:disabled) {
    background: #e3f2fd;
  }
  .page-btn.svelte-kh8m82:disabled {
    color: #cbd5e1;
    cursor: default;
  }
  .page-label.svelte-kh8m82 {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
  }

  /* ─── U5: Builder-card timestamp chip (historical cards only) ─── */
  .builder-card-timestamp.svelte-kh8m82 {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 4px;
    font-style: italic;
  }

  /* ─── U5: Reopen-candidates CTA (historical cards) ─── */
  .reopen-cta-btn.svelte-kh8m82 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1.5px solid #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .reopen-cta-btn.svelte-kh8m82:hover {
    background: #bbdefb;
  }
  .reopen-cta-icon.svelte-kh8m82 {
    font-size: 16px;
    line-height: 1;
  }

  /* ─── U6 (2026-07-16 plan): rebuild-offer CTA — same look as the
       reopen-candidates CTA above (both are single "act on this chip"
       affordances in a chat bubble). ─── */
  .rebuild-offer-btn.svelte-kh8m82 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1.5px solid #1976d2;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .rebuild-offer-btn.svelte-kh8m82:hover {
    background: #bbdefb;
  }
  .rebuild-offer-icon.svelte-kh8m82 {
    font-size: 16px;
    line-height: 1;
  }

  @keyframes svelte-kh8m82-blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  .greeting-cursor.svelte-kh8m82 {
    animation: svelte-kh8m82-blink-cursor 0.7s step-end infinite;
    font-weight: 300;
    color: #9ca3af;
    margin-left: 1px;
  }
  @keyframes svelte-kh8m82-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .msg-in.svelte-kh8m82 {
    animation: svelte-kh8m82-msg-in 0.2s ease-out;
  }
  .chat-markdown.svelte-kh8m82 .markdown-body {
    font-size: inherit;
  }
  .chat-markdown.svelte-kh8m82 p {
    margin: 0.25em 0;
  }
  .chat-markdown.svelte-kh8m82 p:first-child {
    margin-top: 0;
  }
  .chat-markdown.svelte-kh8m82 p:last-child {
    margin-bottom: 0;
  }
  .chat-markdown.svelte-kh8m82 ul,
  .chat-markdown.svelte-kh8m82 ol {
    margin: 0.25em 0;
    padding-left: 1.2em;
  }
  .chat-markdown.svelte-kh8m82 li {
    margin: 0.1em 0;
  }
  .chat-markdown.svelte-kh8m82 code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
  }
  .chat-markdown.svelte-kh8m82 pre {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.5em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.25em 0;
  }
  .chat-markdown.svelte-kh8m82 pre code {
    background: none;
    padding: 0;
  }
  .chat-markdown.svelte-kh8m82 a {
    color: inherit;
    text-decoration: underline;
  }
  .chat-markdown.svelte-kh8m82 strong {
    font-weight: 600;
  }

  /* ─── Inline location chips ─── */
  .chat-markdown.svelte-kh8m82 .inline-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    border-radius: 7px;
    font-size: 0.9em;
    line-height: inherit;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    cursor: pointer;
    vertical-align: baseline;
    transition: background-color 0.15s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
    margin: 2px 0 0;
  }
  .chat-markdown.svelte-kh8m82 .inline-location-chip:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
  }
  .chat-markdown.svelte-kh8m82 .iloc-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
  }

  /* ─── Tool spinner ─── */
  .tool-spinner.svelte-kh8m82 {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
  .tool-spinner-ring.svelte-kh8m82 {
    position: absolute;
    inset: 0;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: svelte-kh8m82-tool-spin 0.8s linear infinite;
  }
  .tool-spinner-icon.svelte-kh8m82 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
  }
  .tool-spinner-icon.svelte-kh8m82 svg {
    width: 14px;
    height: 14px;
  }
  @keyframes svelte-kh8m82-tool-spin {
    to { transform: rotate(360deg); }
  }

  /* ─── Show more / collapse ─── */
  .msg-collapsed.svelte-kh8m82 {
    max-height: 120px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }
  .show-more-btn.svelte-kh8m82 {
    margin-top: 2px;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .show-more-btn.svelte-kh8m82:hover { color: #374151; }


  /* Smooth shape transition for the pill (border-radius + transform) */
  .pill-container.svelte-12gboxw {
    transition: border-radius 500ms ease, transform 150ms ease;
  }

  /* Smooth width expansion for the middle section */
  .pill-middle.svelte-12gboxw {
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Text input fade-in after the expansion starts */
  @keyframes svelte-12gboxw-text-reveal {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .animate-text-reveal.svelte-12gboxw {
    animation: svelte-12gboxw-text-reveal 200ms ease-out 120ms both;
  }

  /* Styled thin scrollbar for textarea overflow */
  .chat-textarea.svelte-12gboxw {
    overflow-y: auto;
    transition: height 200ms ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }
  .chat-textarea.svelte-12gboxw::-webkit-scrollbar {
    width: 4px;
  }
  .chat-textarea.svelte-12gboxw::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
  }

  /* Smooth background-color transition on the right button */
  .pill-right-btn.svelte-12gboxw {
    transition: background-color 400ms ease, transform 150ms ease, opacity 400ms ease;
  }

  .path-send.svelte-12gboxw {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The dropdown wrapper. Its own scroll region either way, so a long list
     scrolls inside the room the host gave it rather than growing the host. */
  .chat-composer-dropdown.svelte-12gboxw {
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  }
  .dark .chat-composer-dropdown.svelte-12gboxw {
    background: rgba(31, 41, 55, 0.98);
  }
  .chat-composer-dropdown.is-above.svelte-12gboxw {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
  }
  .chat-composer-dropdown.is-below.svelte-12gboxw {
    position: relative;
    margin-top: 6px;
    transition: height 200ms ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .chat-composer-dropdown.is-below.svelte-12gboxw {
      transition: none;
    }
  }


  /* Brief highlight pulse applied to the offending row when a banner line is
     tapped. The class is removed after 1.5s so the row settles back to its
     normal styling. */
  .flash-highlight {
    animation: svelte-m9g6mf-flash-highlight-anim 1.5s ease-out;
    border-radius: 4px;
  }
  @keyframes svelte-m9g6mf-flash-highlight-anim {
    0%   { background-color: rgba(254, 202, 202, 0.9); }
    50%  { background-color: rgba(254, 202, 202, 0.5); }
    100% { background-color: transparent; }
  }


  /* ─── Sidebar button tooltips ─── */
  .sidebar-btn-tooltip.svelte-9hhnqb {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(2px);
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
    z-index: 10;
  }
  .sidebar-btn-tooltip.svelte-9hhnqb::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.9);
  }
  .sidebar-btn.svelte-9hhnqb:hover .sidebar-btn-tooltip:where(.svelte-9hhnqb) {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease-out 0.35s, transform 0.2s ease-out 0.35s;
  }


  .chatbot-highlight {
    background-color: rgba(250, 204, 21, 0.4);
    border-radius: 4px;
    transition: background-color 0.5s ease-out;
    animation: svelte-o5na36-chatbot-highlight-fade 4s ease-out forwards;
  }

  @keyframes svelte-o5na36-chatbot-highlight-fade {
    0% { background-color: rgba(250, 204, 21, 0.4); }
    70% { background-color: rgba(250, 204, 21, 0.4); }
    100% { background-color: transparent; }
  }


  .tippy-box[data-theme~='fm'] {
    background-color: var(--color-fm-red);
    color: white;
    border-radius: 4px;
    padding: 3px 9px;
  }