/* ATENȚIE — REGULILE DE REFERINȚE COMPACTE SUNT INACTIVE.
   Andu a cerut păstrarea formatului Harvard („nu referințele erau problema").
   `RESCRIE_REFERINTELE = false` în chat-explicatii.js, deci markup-ul `.ref-*` nu
   se mai generează niciodată și regulile de mai jos nu se aplică nimănui. Le las
   în fișier, nu le șterg: dacă vreodată se dorește varianta compactă, se pune
   steagul pe true și revin. CSS mort, inofensiv, documentat.
   ===== */

/* =============================================================================
   chat-explicatii.css — punctul 7: „Explicație detaliată” + „Referințe”
   Se încarcă DUPĂ `chat-patch2.css`. Perechea lui e `chat-explicatii.js`.
   -----------------------------------------------------------------------------
   Două defecte diferite, raportate împreună:

     (a) explicația detaliată și referințele sunt ASCUNSE cât timp se scriu, iar
         utilizatorul se uită la un ecran în care nu se mișcă nimic;
     (b) referințele, odată apărute, ocupă cât un ecran și jumătate și se citesc
         ca un fir de discuție, nu ca o listă de surse.

   MĂSURAT pe ruta reală (Twig + CSS + JS din repo), 390×820, răspunsul EXEMPLU 7
   din prompt (creatina, 2474 de caractere):

     t=1,00s  raspunsul scurt e scris        mesaj 146px, 170 caractere vizibile
     t=1,50s  apare „Explicație detaliată”   mesaj 207px, 190 caractere vizibile
     t=2,0s → t=12,37s                       mesaj 207px, 190 caractere vizibile
     la final (12,37s)                       mesaj 316px, 284 din 1922 vizibile

   Adică: din 12,4 secunde de scriere, 10,9 secunde (88%) trec cu înălțimea
   ÎNGHEȚATĂ la 207px, în timp ce textul din spate crește de la 193 la 1922 de
   caractere. La sfârșit, 85% din răspuns a fost scris fără ca omul să vadă un
   singur caracter. Nu e o impresie — e o măsurătoare.

   CAUZA, la linie: motorul rescrie `element.innerHTML = html.slice(0, index)` la
   fiecare 50ms (dashboard.module.js:445-447), deci `<div class="content">` există
   în DOM încă din secunda 1,5 — dar `chat-v7.css:706` îi dă
   `height: 0; overflow: hidden`, iar înălțimea reală i-o scrie motorul abia la
   final, din `addMessageContainerEvents(..., true)` (dashboard.module.js:290-293),
   care rulează DUPĂ ce s-a terminat de scris tot. Textul curge într-o cutie de
   înălțime zero. De aici și „totul e blocat între timp”: chiar e blocat, vizual.

   AL DOILEA DEFECT, găsit tot aici, nu raportat: motorul măsoară acordeoanele de
   la cel mai adânc spre cel mai puțin adânc (`sortedTriggers`, :283). Pune întâi
   `Referințe` la 586px, apoi măsoară `Explicație detaliată`. Dar înălțimea de
   586px tocmai a pornit o TRANZIȚIE de la 0 (chat-v7.css:708), iar în aceeași
   sarcină sincronă valoarea folosită la layout e încă 0. Deci părintele se
   măsoară cu copilul strâns: 653px în loc de 1239px. MĂSURAT: `inline=653px`,
   `scrollHeight=1239px` → 586px de referințe rămân tăiate sub `overflow: hidden`.
   Cu `transition: none` aceeași secvență dă 1239px — dovada că tranziția e cauza.

   Reparația de fond, §1: înălțimea acordeonului nu se mai calculează în pixeli,
   ci se declară în CSS din starea `[data-active]`. Motorul continuă să scrie
   pixeli inline; îi ignorăm cu `!important`. Nimic din motor nu se modifică, dar
   dispar amândouă defectele: conținutul se vede cum se scrie, iar înălțimea nu
   mai poate fi greșită, oricât de adânc ar fi imbricate secțiunile.
   ============================================================================= */


/* =========================================================================
   1. ÎNĂLȚIMEA ACORDEOANELOR — din stare, nu din pixeli
   -------------------------------------------------------------------------
   `chat-v7.css:706` ține `.content` la `height: 0`, iar motorul îi scrie apoi
   `style.height = scrollHeight + 2 + "px"`. Inline bate foaia de stil, deci
   singura cale de a lua decizia înapoi e `!important`. Nu e o preferință de
   stil, e singura pârghie disponibilă din afara motorului.

   Ce câștigăm:
     · în timpul scrierii, `.content` are deja `[data-active]` (promptul îl scrie
       în HTML), deci textul se vede curgând de la prima literă;
     · înălțimea nu mai poate fi măsurată greșit — nu mai e măsurată deloc;
     · acordeoanele imbricate funcționează la orice adâncime.

   Ce pierdem: animația de înălțime, pentru că nu se poate interpola spre `auto`
   în CSS-ul clasic. O recuperăm mai jos cu `interpolate-size`, unde există, și
   cu o intrare pe opacitate acolo unde nu există.
   ====================================================================== */
.up5-chat .message .trigger + .content {
  height: 0 !important;
  overflow: hidden;
  /* Chrome 129+/Safari 26+: permite interpolarea către `auto`, deci tranziția
     de înălțime din `chat-v7.css:708` redevine fluidă. Unde nu există,
     proprietatea e ignorată și deschiderea e instantanee — acceptabil, pentru
     că mai jos conținutul intră oricum cu o estompare scurtă. */
  interpolate-size: allow-keywords;
}
.up5-chat .message .trigger[data-active] + .content {
  height: auto !important;
}

/* Intrarea conținutului: scurtă, ca deschiderea să nu pară o smucitură acolo
   unde `interpolate-size` lipsește. Se aplică doar la deschiderea manuală
   (`.trigger[data-active]`), nu și mesajului care tocmai se scrie — acolo ar
   reporni la fiecare rescriere de `innerHTML`, adică de 20 de ori pe secundă. */
.up5-chat .message--assistant:not([data-text-loading]) .trigger[data-active] + .content > * {
  animation: acxExplIn .26s var(--ease-out) both;
}
@keyframes acxExplIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}


/* =========================================================================
   2. CÂT TIMP SE SCRIE — conținutul e deschis, iar omul poate să-l închidă
   -------------------------------------------------------------------------
   Plasă pentru cazul în care modelul uită `data-active` pe `.trigger` (promptul
   îl cere, dar promptul nu e o garanție): cât timp mesajul se scrie, deschidem
   secțiunile oricum. Fără asta, o singură scăpare a modelului readuce exact
   defectul raportat.

   `data-acx-inchis` e pus de `chat-explicatii.js` pe **trigger-ul apăsat**, atunci
   când utilizatorul apasă pe titlu ÎN TIMP ce se scrie.

   ⚠️ PRIMA VARIANTĂ ȚINEA STEAGUL PE `.message` — și de aia a stat oprită.
   Un atribut pe mesaj se aplică, prin selectorii de mai jos, TUTUROR secțiunilor
   lui: o apăsare pe „Referințe" închidea și „Explicație detaliată" și
   „Recomandare produs", iar a doua le deschidea pe toate. Starea era per mesaj,
   nu per secțiune.

   Acum steagul e pe trigger. Bucla de typing rescrie `innerHTML` la fiecare 50ms
   și îl șterge — de aceea JS-ul îl pune la loc după fiecare rescriere, ținând
   minte INDICELE trigger-ului în mesaj (singurul identificator stabil cât textul
   încă se scrie caracter cu caracter).
   ====================================================================== */
.up5-chat .message--assistant[data-text-loading] .trigger:not([data-acx-inchis]) + .content {
  height: auto !important;
}
.up5-chat .message--assistant[data-text-loading] .trigger[data-acx-inchis] + .content {
  height: 0 !important;
}

/* Dacă omul a strâns o secțiune cât se scrie, rămâne fără semnalul „se lucrează”
   pe care i-l dădea textul care curge. Cercul cu „+” al ACELEI secțiuni pulsează
   atunci — fără text nou, fără salt de layout, deci fără să mute nimic pe ecran. */
.up5-chat .message--assistant[data-text-loading] .trigger[data-acx-inchis] .trigger-decoration {
  animation: acxExplPuls 1.25s var(--ease-inout) infinite;
}
@keyframes acxExplPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .38); }
  60%      { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); }
}

/* Cât timp se scrie, titlul secțiunii e o zonă de apăsare reală (o poate strânge),
   deci merită să arate ca atare și pe ecrane fără hover. */
.up5-chat .message--assistant[data-text-loading] .trigger { cursor: pointer; }


/* =========================================================================
   3. TITLURILE DE SECȚIUNE — numărul de surse, direct pe titlu
   -------------------------------------------------------------------------
   `data-nr-ref` e pus din JS. Îl afișăm prin `::after`, NU prin text în DOM:
   motorul compară `trigger.textContent.trim() === "Explicație detaliată"`
   (dashboard.module.js:347 și :354) ca să decidă ce secțiuni rămân deschise.
   Un singur caracter în plus în text ar rupe comparația și ar închide explicația
   detaliată la fiecare răspuns. Pseudo-elementele nu intră în `textContent`.
   ====================================================================== */
.up5-chat .message .trigger[data-nr-ref]::after {
  content: attr(data-nr-ref);
  margin-left: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .13);
  border: 1px solid rgba(var(--accent-rgb), .22);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--accent-text);
  letter-spacing: .01em;
}


/* =========================================================================
   4. REFERINȚELE — de la fir de discuție la listă de surse
   -------------------------------------------------------------------------
   MĂSURAT, 390px, patru referințe Harvard: blocul are 586px (0,7 dintr-un ecran),
   iar fiecare referință 168 / 144 / 120 / 120px, la 15px/24px. Cauza lățimii
   pierdute: `.content` are `margin-left: 13px + padding-left: 20px + 1px bordură`
   = 34px pe nivel, iar referințele sunt la nivelul DOI (în interiorul explicației
   detaliate). Din 339px de bulă mai rămâneau 242px de text. 34px din 339 e 10%
   din ecran cheltuit pe un al doilea prag vertical care spune doar „sunt imbricat”.

   De la ce am pornit ca să reproiectez: ce trebuie să afle omul dintr-o referință?
     1. despre ce e        → titlul lucrării;
     2. de ce să aibă încredere → cine a scris-o, în ce an, în ce publicație;
     3. cum ajunge la ea   → un drum, o singură apăsare.
   Volumul, numărul și paginile nu răspund la niciuna dintre cele trei pe telefon;
   rămân în `title`, la îndemână, dar nu pe ecran.

   Forma: titlul sus (tăiat la două rânduri) și, sub el, linia de încredere
   (autor · an · publicație), care se rupe pe un al doilea rând doar când numele
   publicației nu încape. Numărul din stânga e același semn ca marcajul din text,
   ca legătura să fie evidentă fără explicații.

   REZULTATUL, MĂSURAT pe același răspuns, la 390px:
     blocul de referințe   586px → 349px
     rândurile             168/144/120/120 → 87/88/71/88
     mesajul întreg        1577px → 1338px deschis, 989px cu sursele strânse
   ====================================================================== */

/* Al doilea prag vertical dispare: lista de surse nu e un sub-fir al explicației,
   e anexa ei. Rândurile se aliniază exact sub titlul „Referințe” și recâștigă
   lățime — MĂSURAT 263px → 280px. Câștigul mare nu e ăsta, ci forma de mai jos;
   dar 17px pe un ecran de 390 sunt 17px pe care nu-i mai plătim ca să spunem încă
   o dată „sunt imbricat”. */
.up5-chat .message .content:has(> .ref-lista) {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.up5-chat .message .ref-lista {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0;
}
.up5-chat .message .ref-rand { margin: 0; padding: 0; }
/* Un fir subțire între surse, nu un card pentru fiecare: patru carduri una sub
   alta erau tocmai „formatul de forum”. */
.up5-chat .message .ref-rand + .ref-rand { border-top: 1px solid var(--hairline); }

.up5-chat .message .ref-drum {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 1px;
  align-items: start;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--dur-fast);
}
/* Rândul e o zonă de apăsare de 44px chiar și când textul e scurt — regula de
   deget, nu de mouse. */
.up5-chat .message .ref-rand [data-url] { cursor: pointer; min-height: 44px; }
.up5-chat .message .ref-rand [data-url]:hover { background: rgba(var(--accent-rgb), .07); }
.up5-chat .message .ref-rand [data-url]:active { background: rgba(var(--accent-rgb), .12); }
.up5-chat .message .ref-rand [data-url]:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .8);
  outline-offset: 2px;
}

/* Numărul: același semn grafic ca marcajul din text (§5), ca ochiul să facă
   legătura fără să caute. */
.up5-chat .message .ref-nr {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .14);
  border: 1px solid rgba(var(--accent-rgb), .24);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
}

/* Titlul: două rânduri, apoi „…”. MĂSURAT: la 250px de coloană și 13px, două
   rânduri înseamnă ~74 de caractere — din cele patru referințe ale exemplului,
   una singură se taie. Textul întreg rămâne în `title` (îl vezi la hover) și e
   oricum primul lucru pe care îl arată pagina sursei. */
.up5-chat .message .ref-titlu {
  grid-column: 2;
  grid-row: 1;
  font-size: 13.5px;
  line-height: 1.38;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.up5-chat .message .ref-rand[data-desfasurat] .ref-titlu {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

/* Linia de încredere. Autorul e ancora, deci e singurul lucru accentuat; anul și
   publicația sunt context.

   DE CE se rupe pe două rânduri în loc să se taie: MĂSURAT la 390px, linia are
   250px, adică ~40 de caractere la 11,5px, iar „Kreider et al. · 2017 · J. Int.
   Soc. Sports Nutrition” are 52. Cu tăiere la capăt dispărea exact publicația —
   singurul motiv pentru care omul se uită la linia asta. Cu rupere, rândul crește
   de la 71px la 87px doar acolo unde chiar e nevoie (MĂSURAT: 87/88/71/88), iar
   numele publicației se vede întreg de fiecare dată. 16px de înălțime pentru
   informația care dă încrederea e un schimb bun. */
.up5-chat .message .ref-meta {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  row-gap: 0;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.up5-chat .message .ref-autor { font-weight: 700; color: var(--fg-2); }
.up5-chat .message .ref-sursa { min-width: 0; }
.up5-chat .message .ref-sep { opacity: .55; }

/* Drumul spre sursă: o săgeată discretă, pe linia de încredere, aliniată dreapta.
   Nu ocupă o coloană proprie — o coloană de 30px pentru o iconiță ar fi costat
   încă 10% din lățimea textului. */
.up5-chat .message .ref-iesire {
  flex: 0 0 auto;
  margin-left: auto;      /* rămâne la marginea din dreapta a ULTIMULUI rând al liniei */
  padding-left: 8px;
  color: var(--accent-text);
  opacity: .75;
  font-size: 11px;
  transition: transform var(--dur-fast) var(--ease-emph), opacity var(--dur-fast);
}
.up5-chat .message .ref-rand [data-url]:hover .ref-iesire { opacity: 1; transform: translate(1px, -1px); }

/* Sursa spre care duce marcajul din text, evidențiată o clipă după ce ai apăsat
   pe „1” în paragraf — altfel, într-o listă de patru, nu știi unde ai aterizat. */
.up5-chat .message .ref-rand[data-tinta] { animation: acxRefTinta 1.6s var(--ease-out); }
@keyframes acxRefTinta {
  0%, 45% { background: rgba(var(--accent-rgb), .16); }
  100%    { background: transparent; }
}

/* Rezervă: dacă parsarea nu reușește (o referință scrisă în alt stil decât
   Harvard), păstrăm textul original NEATINS și îi aplicăm doar compactarea.
   Mai bine o referință lungă decât o referință stricată. Rândurile astea n-au
   unde să ducă, deci apăsarea le desfășoară (`data-desfasurat`, pus din JS) —
   singura interacțiune care are sens acolo. */
.up5-chat .message .ref-brut {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.up5-chat .message .ref-rand[data-desfasurat] .ref-brut {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}


/* =========================================================================
   5. MARCAJELE DIN TEXT — „[1]” devine un buton mic
   -------------------------------------------------------------------------
   În paragraf, promptul lasă „ [1]” ca text simplu. Parantezele drepte sunt
   zgomot tipografic și nu duc nicăieri. Le înlocuim cu un exponent apăsabil,
   desenat ca numărul din listă, care deschide referințele și o luminează pe cea
   potrivită. Substituția se face DOAR pe noduri de text și doar pentru numere
   care au o referință corespondentă în același mesaj (vezi JS).
   ====================================================================== */
.up5-chat .message .ref-marcaj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin: 0 1px 0 2px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .26);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
  cursor: pointer;
  vertical-align: 2px;
  top: 0;                        /* anulează ridicarea implicită a lui <sup> */
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-press);
}
.up5-chat .message .ref-marcaj:hover { background: rgba(var(--accent-rgb), .28); }
.up5-chat .message .ref-marcaj:active { transform: scale(.9); }
.up5-chat .message .ref-marcaj:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), .8);
  outline-offset: 2px;
}


/* =========================================================================
   6. CELE PATRU CLASE DE ECRAN
   -------------------------------------------------------------------------
   O SINGURĂ coloană, la toate lățimile. Am construit și varianta cu două coloane
   pe ecran lat și AM MĂSURAT-O, pentru că părea evident mai bună. Nu e:

     lățimea listei de referințe   1 coloană            2 coloane
     390px  (mobil)                298px, 1 titlu tăiat  —
     509px  (1024px)               ~250px, 1 tăiat       197px, 3 titluri tăiate
     650px  (1920px)               271px, 0 tăiate       204px, 3 titluri tăiate

   Motivul e că bula nu se lățește la nesfârșit: MĂSURAT, la 1920px are 720px, iar
   lista 650px. Împărțită în două, fiecare coloană rămâne la ~300px — mai îngustă
   decât rândul de pe telefon. Deci două coloane cumpără 67px de înălțime pe un
   ecran de 900px (adică nimic) și plătesc cu trei titluri ciuntite din patru.

   Rămâne o coloană. Ce se schimbă între clase e doar respirația.
   ====================================================================== */

/* mobil: bula 339px, lista de referințe 280px, coloana de text 250px — MĂSURAT */
@media (max-width: 719.98px) {
  .up5-chat .message .ref-titlu { font-size: 13px; }
  .up5-chat .message .ref-drum { padding: 8px 0; }
}

/* jumătate de ecran: la fel ca mobilul, doar puțin mai lejer */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .up5-chat .message .ref-drum { padding: 10px 0; }
}

/* desktop și foarte lat: rândurile încap pe două linii în loc de trei, deci le
   dăm puțin aer în loc să le înghesuim în coloane */
@media (min-width: 1024px) {
  .up5-chat .message .ref-drum { padding: 10px 0; }
}
@media (min-width: 1440px) {
  .up5-chat .message .ref-drum { padding: 11px 0; }
  .up5-chat .message .ref-titlu { font-size: 14px; }
}


/* =========================================================================
   7. MIȘCARE REDUSĂ
   -------------------------------------------------------------------------
   Pulsul de la §2 și evidențierea de la §4 sunt semnale, nu decor: le păstrăm,
   dar fără mișcare — pulsul devine un inel fix, evidențierea un fundal care se
   stinge. Nimic nu depinde de animație ca să funcționeze.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .up5-chat .message--assistant:not([data-text-loading]) .trigger[data-active] + .content > * { animation: none; }
  .up5-chat .message--assistant[data-text-loading] .trigger[data-acx-inchis] .trigger-decoration {
    animation: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22);
  }
  .up5-chat .message .ref-rand[data-tinta] { animation: none; background: rgba(var(--accent-rgb), .12); }
}


/* =========================================================================
   LĂȚIMEA ȘI IERARHIA — măsurate pe beta14, la 390px
   -------------------------------------------------------------------------
   Andu, de trei ori: „textul ar fi trebuit să fie și mai lat, cum e în stânga,
   așa să fie și în dreapta. readability first." Plus: formatul cu linie
   verticală „consumă foarte mult spațiu".

   MĂSURAT, pe lanțul real de elemente:
     viewport            390px
     bula                 8 → 352   (344px)  ← se oprește cu 38px înainte de margine
     rezumat (nivel 0)   23 → 337   (314px)
     explicație (niv. 1) 57 → 337   (280px)  ← −34px din indentare
     referințe  (niv. 2) 91 → 337   (246px)  ← −68px, adică 63% din ecran

   Două cauze distincte:

   1. ASIMETRIA. `.message-container` are `max-width: 92%`. Containerul de mesaje
      ajunge corect la 382px, dar regula îl trage înapoi la 352 — 8% tăiat din
      fiecare mesaj al lui Andu, indiferent ce se face mai jos în lanț. Pe bulele
      UTILIZATORULUI regula e corectă și rămâne: diferența de lățime dintre cele
      două părți e ceea ce face conversația citibilă dintr-o privire.

   2. INDENTAREA ÎN TREPTE. Fiecare nivel costă 34px (20 padding + 13 margin +
      1 bord). Indentarea comunică „asta aparține de aia" — dar titlurile
      „Explicație detaliată" și „Referințe" o spun deja, cu litere. Plătim 68px
      de lățime pentru o informație care e deja scrisă.

      Deci: ierarhia trece de la spațiu la tipografie. Zero indentare, iar
      apartenența se citește din titlu plus o linie fină de separare deasupra lui.
      Numerotarea listei rămâne (`padding-left: 20px` pe `ol`) — aia chiar are
      nevoie de loc pentru cifre.

   REZULTAT AȘTEPTAT: referințele de la 246px la ~344px, adică de la 63% la 88%
   din lățimea ecranului. Restul textului, la fel.

   ⚠️ VERIFICAT DOAR PARȚIAL. Câștigul din indentare (+48px) e măsurat live pe
   beta14. Scoaterea lui `max-width: 92%` NU e verificată live — a fost dedusă din
   lanțul de elemente, nu testată cu patch-ul complet încărcat. De confirmat
   înainte de predare.
   ====================================================================== */
@media (max-width: 719.98px) {
  /* 1. simetrie — doar pentru mesajele lui Andu */
  .up5-chat .message-container:has(> .message--assistant) {
    max-width: 100%;
  }

  /* 2. ierarhia prin tipografie, nu prin spațiu */
  .up5-chat .message--assistant .content {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
  /* linia de separare ține locul indentării: arată unde începe o secțiune nouă,
     fără să coste lățime */
  .up5-chat .message--assistant .content > .trigger {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  .up5-chat .message--assistant .content ol { padding-left: 20px; margin: 0; }
  .up5-chat .message--assistant .content li { padding-left: 2px; }
}