/* Step2Step — Styles Overrides v11 */

/*
  Root cause: .step .title ha flex:1 ma MANCA min-width:0
  → in un flex container, senza min-width:0 il testo non va mai a capo
  → la fix chiave è min-width:0 sul title
  v8: rimosso overflow-x:hidden da .step (era la causa del testo tagliato)
  v10: wrapLatexProse usa inline math per title/reasoning → nessun display block wide;
       overflow-x:hidden sul reasoning come safety net per casi edge.
*/

/* 1. Step container: word-wrap solo — NO overflow clipping */
.step {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* 2. Flex row del titolo: align top così il badge numero
      resta in cima quando il title va su più righe */
.step .top {
  align-items: flex-start !important;
}

/* 3. Titolo: min-width:0 è la fix critica — permette al
      flex item di restringersi e al testo di andare a capo */
.step .title {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* 4. Reasoning box: testo a capo come paragrafo, nessun slider.
      NON usare overflow-x:hidden — taglia il testo invece di wrapparlo.
      word-break + overflow-wrap garantiscono il wrap senza scrollbar. */
.step .reasoning {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
  border-left: none !important;
}

/* 5. hc-body: rimuove il cap max-height:9999px
      che taglia le risposte molto lunghe */
.history-card.hc-open .hc-body {
  max-height: none !important;
  overflow: visible !important;
}

/*
  6. Formule KaTeX nel box math dedicato: scrollbar INVISIBILE.
     Il contenuto non è tagliato, nessun righello appare,
     su mobile si può scorrere con il dito.
*/
.step .math,
.step .math .katex-display,
.step .katex-display {
  overflow-x: auto !important;
  max-width: 100% !important;
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* IE/Edge */
}

.step .math::-webkit-scrollbar,
.step .math .katex-display::-webkit-scrollbar,
.step .katex-display::-webkit-scrollbar {
  display: none !important;               /* Chrome/Safari */
}

/* 7. Geometry diagram block */
.geo-diagram {
  margin: 12px 0 !important;
  text-align: center !important;
  background: var(--paper-2) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.geo-diagram svg {
  max-width: 100% !important;
  height: auto !important;
}