/* Gabi AI 1.4 — scoped typography, wrapping, and scenario controls.
   Load AFTER the original ttp-gabi-ai stylesheet. Scenario logic is in assets/js/gabi-ai.js.
   The actual answer classes are gabi-ai__answer, __answer-emoji, __answer-text.
   This file deliberately contains no rule for the unrelated .gabi-option. */

/* Flex/grid children must be able to shrink without clipping their text. */
.gabi-ai .gabi-ai__app,
.gabi-ai .gabi-ai__view,
.gabi-ai .gabi-ai__fieldset,
.gabi-ai .gabi-ai__answers,
.gabi-ai .gabi-ai__result-head > div,
.gabi-ai .gabi-ai__axis,
.gabi-ai .gabi-ai__potential li,
.gabi-ai .gabi-ai__protective-intro > p,
.gabi-ai .gabi-ai__protective-intro > h3,
.gabi-ai .gabi-ai__protective-grid article,
.gabi-ai .gabi-ai__signal-grid > div,
.gabi-ai .gabi-ai__friction-top > p,
.gabi-ai .gabi-ai__friction-top > span,
.gabi-ai .gabi-ai__next-top > p,
.gabi-ai .gabi-ai__week li,
.gabi-ai .gabi-ai__numbers-head > div,
.gabi-ai .gabi-ai__mini-numbers > span,
.gabi-ai .gabi-ai__route > span,
.gabi-ai .gabi-ai__alternate > span {
  min-width: 0;
  max-width: 100%;
}

.gabi-ai .gabi-ai__fieldset legend,
.gabi-ai .gabi-ai__question-hint,
.gabi-ai .gabi-ai__care-note,
.gabi-ai .gabi-ai__result :is(h2, h3, p, li, small, summary),
.gabi-ai .gabi-ai__axis strong,
.gabi-ai .gabi-ai__confidence,
.gabi-ai .gabi-ai__route :is(strong, em),
.gabi-ai .gabi-ai__result-actions button {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

/* Keep the existing selection dot + emoji + full answer grid. */
.gabi-ai button.gabi-ai__answer {
  min-width: 0 !important;
  max-width: 100%;
  height: auto !important;
  min-height: 48px;
  align-items: start;
  color: #2c1820;
  overflow-wrap: anywhere;
  white-space: normal !important;
  word-break: normal;
}

.gabi-ai button.gabi-ai__answer .gabi-ai__answer-text,
.gabi-ai button.gabi-ai__answer .gabi-ai__answer-copy,
.gabi-ai button.gabi-ai__answer .gabi-ai__answer-copy strong,
.gabi-ai button.gabi-ai__answer .gabi-ai__answer-copy small {
  min-width: 0 !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal !important;
  word-break: normal;
}

.gabi-ai button.gabi-ai__answer .gabi-ai__answer-emoji {
  align-self: start;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
}

/* System body text on the result; explicit original Lora headings stay Lora. */
.gabi-ai .gabi-ai__result {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Only text on the verified light surfaces receives the darker ink. */
.gabi-ai .gabi-ai__result-mirror,
.gabi-ai .gabi-ai__personal-note,
.gabi-ai .gabi-ai__secondary-note,
.gabi-ai .gabi-ai__evidence-note,
.gabi-ai .gabi-ai__potential li,
.gabi-ai .gabi-ai__context-note,
.gabi-ai .gabi-ai__protective-grid p,
.gabi-ai .gabi-ai__next-card > p,
.gabi-ai .gabi-ai__definition p,
.gabi-ai .gabi-ai__week li,
.gabi-ai .gabi-ai__note p,
.gabi-ai .gabi-ai__numbers > p,
.gabi-ai .gabi-ai__why > p,
.gabi-ai .gabi-ai__why > ul,
.gabi-ai .gabi-ai__recommendation-copy > p:last-child,
.gabi-ai .gabi-ai__route em {
  color: #2c1820;
  font-weight: 500;
}

.gabi-ai .gabi-ai__axis small,
.gabi-ai .gabi-ai__mini-numbers small,
.gabi-ai .gabi-ai__choice-note,
.gabi-ai .gabi-ai__disclaimer {
  color: #4a1723;
}

/* These narrative fields can contain intentional paragraph breaks safely.
   The renderer must continue inserting text, never untrusted HTML. */
.gabi-ai .gabi-ai__result :is(
  [data-result-mirror], [data-personal-note], [data-ai-note], [data-context],
  [data-protection], [data-cost], [data-agency-question],
  [data-friction-explanation], [data-early-signal], [data-rescue],
  [data-first-step], [data-done], [data-why-summary]
) {
  white-space: pre-line;
}

/* The burgundy card remains light-on-dark, including its explanatory text. */
.gabi-ai .gabi-ai__friction > h3,
.gabi-ai .gabi-ai__friction > p,
.gabi-ai .gabi-ai__friction .gabi-ai__signal-grid p,
.gabi-ai .gabi-ai__friction-top > span {
  color: #fffaf7;
}

.gabi-ai .gabi-ai__friction .gabi-ai__section-label,
.gabi-ai .gabi-ai__friction .gabi-ai__signal-grid small {
  color: #ef79ac;
}

@media (max-width: 760px) {
  .gabi-ai button.gabi-ai__answer {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .gabi-ai .gabi-ai__fieldset legend {
    font-size: 18px;
    line-height: 1.4;
  }

  .gabi-ai .gabi-ai__potential {
    grid-template-columns: minmax(0, 1fr);
  }

  .gabi-ai .gabi-ai__protective-grid p,
  .gabi-ai .gabi-ai__definition p,
  .gabi-ai .gabi-ai__week li,
  .gabi-ai .gabi-ai__note p,
  .gabi-ai .gabi-ai__why > p,
  .gabi-ai .gabi-ai__why > ul,
  .gabi-ai .gabi-ai__friction .gabi-ai__signal-grid p {
    font-size: 14px;
    line-height: 1.6;
  }

  .gabi-ai .gabi-ai__mini-numbers {
    flex-wrap: wrap;
  }

  .gabi-ai .gabi-ai__choice-note,
  .gabi-ai .gabi-ai__disclaimer,
  .gabi-ai .gabi-ai__why > .gabi-ai__why-note,
  .gabi-ai .gabi-ai__route em {
    font-size: 12px;
    line-height: 1.6;
  }
}

@media (max-width: 430px) {
  .gabi-ai .gabi-ai__identity small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  .gabi-ai .gabi-ai__friction-top {
    flex-wrap: wrap;
    gap: 8px;
  }

  .gabi-ai .gabi-ai__friction-top > span {
    max-width: 100%;
    text-align: left;
  }

  .gabi-ai .gabi-ai__next-top {
    align-items: flex-start;
    gap: 10px;
  }

  .gabi-ai .gabi-ai__next-top > span {
    flex: 0 0 auto;
  }
}

/* The original composition is preserved; extra controls stay separate from answers. */
.gabi-ai .gabi-ai__quiz-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.gabi-ai .gabi-ai__quiz-actions .gabi-ai__error { grid-column: 1 / -1; }
.gabi-ai .gabi-ai__quiz-actions .gabi-ai__next { grid-column: 2; }
.gabi-ai .gabi-ai__skip {
  justify-self: start;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #4a1723;
  box-shadow: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.gabi-ai .gabi-ai__answer-reaction,
.gabi-ai .gabi-ai__rest-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 3px solid #ef79ac;
  border-radius: 0 14px 14px 0;
  color: #2c1820;
  background: rgba(239, 121, 172, 0.09);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.gabi-ai .gabi-ai__support {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid rgba(74, 23, 35, 0.18);
  border-radius: 22px;
  background: #fffaf7;
  color: #2c1820;
}
.gabi-ai .gabi-ai__support h3 {
  margin: 9px 0 0;
  font-family: Lora, Georgia, serif;
  font-size: 20px;
  line-height: 1.4;
  color: #4a1723;
}
.gabi-ai .gabi-ai__support ul {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}
.gabi-ai .gabi-ai__support :is(p, li, a, strong) {
  color: #2c1820;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.6;
}
.gabi-ai .gabi-ai__support li > p { margin: 6px 0; }
.gabi-ai .gabi-ai__support a {
  display: inline-block;
  padding: 8px 0;
  color: #4a1723;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gabi-ai [data-answer-clues] li :is(strong, span, small) { display: block; }
.gabi-ai [data-answer-clues] li + li { margin-top: 14px; }
.gabi-ai [data-answer-clues] li strong { font-size: inherit; }
.gabi-ai [data-answer-clues] li small { margin-top: 4px; color: #4a1723; font-size: 12px; }
.gabi-ai :is(button, a, summary):focus-visible {
  outline: 2px solid #4a1723;
  outline-offset: 4px;
}
.gabi-ai .gabi-ai__axis[data-band="descriptive"] { background: rgba(255,255,255,.64); }
.gabi-ai .gabi-ai__result [data-result-confidence] { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 430px) {
  .gabi-ai .gabi-ai__quiz-actions { grid-template-columns: minmax(0, 1fr); }
  .gabi-ai .gabi-ai__quiz-actions .gabi-ai__next { grid-column: 1; }
  .gabi-ai .gabi-ai__next { width: 100%; }
  .gabi-ai .gabi-ai__next > span { white-space: normal; overflow-wrap: anywhere; }
  .gabi-ai .gabi-ai__support { padding: 16px; }
  .gabi-ai .gabi-ai__support h3 { font-size: 18px; }
  .gabi-ai .gabi-ai__axis small { font-size: 11px; }
  .gabi-ai .gabi-ai__axis strong { font-size: 13px; }
}

.gabi-ai .gabi-ai__day-label { display: block; margin-bottom: 5px; color: #4a1723; font-size: inherit; }

.gabi-ai .gabi-ai__day-copy { display: block; min-width: 0; max-width: 100%; grid-column: 2; }

/* A constant, optional invitation after the complete map, independent of answers. */
.gabi-ai .gabi-ai__invitation {
  margin-top: 28px;
  padding: clamp(20px, 3.5vw, 34px);
  border: 1px solid rgba(239, 121, 172, .42);
  border-radius: 24px;
  background: linear-gradient(135deg, #fffaf7, rgba(239, 121, 172, .10));
  color: #2c1820;
  min-width: 0;
}
.gabi-ai .gabi-ai__invitation-author {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 21px;
}
.gabi-ai .gabi-ai__invitation-author img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 2px solid #fff;
  border-radius: 15px;
  object-fit: cover;
}
.gabi-ai .gabi-ai__invitation-author > span { min-width: 0; }
.gabi-ai .gabi-ai__invitation-author strong,
.gabi-ai .gabi-ai__invitation-author small {
  display: block;
  color: #4a1723;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.gabi-ai .gabi-ai__invitation-author strong { font-size: 14px; font-weight: 700; }
.gabi-ai .gabi-ai__invitation-author small { font-size: 12px; font-weight: 500; }
.gabi-ai .gabi-ai__invitation h3 {
  margin: 0 0 13px;
  color: #4a1723;
  font-family: Lora, Georgia, serif;
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.gabi-ai .gabi-ai__invitation-copy {
  max-width: 62ch;
  margin: 0;
  color: #2c1820;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}
.gabi-ai a.gabi-ai__invitation-link,
.gabi-ai a.gabi-ai__invitation-link:visited {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  max-width: 100%;
  margin-top: 22px;
  padding: 12px 19px;
  border: 1px solid #ef79ac;
  border-radius: 14px;
  background: #fff;
  color: #4a1723;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 3px 10px rgba(74, 23, 35, .04);
  transition: background-color .18s ease;
}
.gabi-ai a.gabi-ai__invitation-link > span:first-child { min-width: 0; }
.gabi-ai a.gabi-ai__invitation-link > span:last-child {
  flex-shrink: 0;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.gabi-ai a.gabi-ai__invitation-link:hover,
.gabi-ai a.gabi-ai__invitation-link:active {
  background: #ef79ac;
  color: #4a1723;
  text-decoration: none;
}
.gabi-ai a.gabi-ai__invitation-link:focus-visible { outline: 2px solid #4a1723; outline-offset: 4px; }
.gabi-ai .gabi-ai__invitation-note {
  margin: 12px 0 0;
  color: #4a1723;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
@media (max-width: 430px) {
  .gabi-ai .gabi-ai__invitation { padding: 20px 18px; border-radius: 20px; }
  .gabi-ai .gabi-ai__invitation-copy { font-size: 14px; }
  .gabi-ai a.gabi-ai__invitation-link { width: 100%; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gabi-ai a.gabi-ai__invitation-link { transition: none; }
}