/* =============================================================================
   chat-tools-v7.css — DOAR stratul vizual al uneltelor de nutriție
   -----------------------------------------------------------------------------
   CÂND ai nevoie de acest fișier:
     Doar dacă ai deja `chat-v7.css` instalat ȘI l-ai modificat local, deci nu
     vrei să-l suprascrii cu versiunea nouă. Atunci păstrezi CSS-ul tău și adaugi
     acest fișier DUPĂ el.

   CÂND NU ai nevoie de el:
     Dacă instalezi `chat-v7.css` din livrarea aceasta (110 KB) — acolo aceste
     reguli sunt deja incluse, ca secțiunea „11.5 UNELTE DE NUTRIȚIE".
     NU le pune de două ori: nu se strică nimic, dar e CSS mort.

   Depinde de token-urile din chat-v7.css (--bg-elev, --card-bd, --accent-rgb,
   --r-sm, --dur-fast, --fg-2, --muted, --hairline, --accent-text), deci se
   încarcă OBLIGATORIU după el.
   ========================================================================== */

/* ================== 11.5 UNELTE DE NUTRIȚIE (mini-formulare) ==================
   Cardul apare când modelul trimite intent-ul `nutrition_tool`: 1-3 câmpuri,
   rezultat calculat în client, instant. Limbajul vizual e cel al cardului de
   cumpărare (aceleași token-uri, aceeași rază, același CTA), dar deliberat mai
   discret: e o unealtă, nu o ofertă. Logica: assets/js/chat-tools-v7.js
   ============================================================================ */
.up5-chat .message-container .nt-card {
  position: relative; margin-top: 0.625rem; padding: 1rem;
  background: var(--card-solid); border: 0.0625rem solid var(--card-bd); border-radius: var(--r-xl);
  box-shadow: var(--sh-1), var(--inset-hi);
  animation: acxCardIn .45s var(--ease-emph) both;
}
.up5-chat .nt-kicker {
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.up5-chat .nt-title {
  margin-top: 0.25rem; font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 1.0625rem; line-height: 1.25; letter-spacing: -.02em;
}
.up5-chat .nt-form { display: grid; gap: 0.75rem; margin-top: 0.875rem; }
.up5-chat .nt-field { display: grid; gap: 0.375rem; }
.up5-chat .nt-label { font-size: 0.78125rem; font-weight: 600; color: var(--muted); }
.up5-chat .nt-input {
  width: 100%; min-height: 2.875rem; background: var(--bg-elev);
  border: 0.0625rem solid var(--card-bd); border-radius: var(--r-sm);
  padding: 0.625rem 0.8125rem; color: #fff; font: inherit; font-size: 1rem; /* 16px = fără zoom pe iOS */
  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .3);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -moz-appearance: textfield;
}
.up5-chat .nt-input::-webkit-outer-spin-button,
.up5-chat .nt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.up5-chat .nt-input:focus-visible {
  outline: none; border-color: rgba(var(--accent-rgb), .6);
  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .3), 0 0 0 0.1875rem rgba(var(--accent-rgb), .18);
}
.up5-chat .nt-input[data-invalid] { border-color: rgba(var(--danger-rgb), .65); animation: acxShake .5s ease-out; }

/* opțiuni scurte = pastile (radio-uri ascunse, eticheta e ținta tactilă) */
.up5-chat .nt-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.up5-chat .nt-chip { position: relative; cursor: pointer; }
.up5-chat .nt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.up5-chat .nt-chip span {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 0.8125rem;
  border: 0.0625rem solid var(--card-bd); background: var(--card-fill); border-radius: 62.4375rem;
  font-size: 0.78125rem; font-weight: 700; color: var(--fg-2);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-base), transform var(--dur-fast) var(--ease-press);
}
.up5-chat .nt-chip:hover span { border-color: rgba(var(--accent-rgb), .45); color: #fff; }
.up5-chat .nt-chip span:active { transform: scale(.96); }
.up5-chat .nt-chip input:checked + span {
  background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .55); color: #fff;
  box-shadow: 0 0.375rem 1.125rem -0.625rem rgba(var(--accent-rgb), .55);
}
.up5-chat .nt-chip input:focus-visible + span { outline: 0.125rem solid rgba(var(--accent-rgb), .85); outline-offset: 0.125rem; }

.up5-chat .nt-err { display: none; font-size: 0.78125rem; font-weight: 600; color: #ffb3b3; }
.up5-chat .nt-err[data-on] { display: block; }
.up5-chat .nt-go { width: 100%; min-height: 3rem; font-weight: 800; font-size: 0.9375rem; }

/* ---- după calcul: formularul se strânge într-un rând-sumar, rezultatul urcă */
.up5-chat .nt-summary { display: none; }
.up5-chat .nt-card[data-done] .nt-form { display: none; }
.up5-chat .nt-card[data-done] .nt-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
  margin-top: 0.75rem; padding: 0.5625rem 0.75rem; border-radius: var(--r-sm);
  background: var(--bg-elev); border: 0.0625rem solid var(--hairline);
  font-size: 0.78125rem; color: var(--fg-2);
}
.up5-chat .nt-summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up5-chat .nt-edit {
  flex: 0 0 auto; min-height: 2rem; padding: 0.375rem 0.6875rem; border-radius: 62.4375rem; cursor: pointer;
  border: 0.0625rem solid var(--card-bd); background: transparent;
  font-size: 0.75rem; font-weight: 700; color: var(--accent-text);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.up5-chat .nt-edit:hover { border-color: rgba(var(--accent-rgb), .5); color: #fff; }
.up5-chat .nt-edit:focus-visible { outline: 0.125rem solid rgba(var(--accent-rgb), .85); outline-offset: 0.125rem; }

/* punte pentru un câmp pe care utilizatorul nu POATE să-l știe (caloriile lui
   zilnice): un link discret sub input, nu un al doilea buton care să concureze
   cu CTA-ul cardului. */
.up5-chat .nt-helper {
  /* `.nt-field` e grid, deci alinierea pe orizontală se face cu justify-self;
     `align-self: flex-start` nu are efect aici. Fără margin-top: gap-ul grilei
     (6px) dă deja distanța, altfel se dublează. */
  justify-self: start; text-align: left; padding: 0; cursor: pointer;
  margin-top: -0.1875rem; /* îl lipim de inputul lui, ca să nu pară eticheta câmpului următor */
  border: 0; background: none; font: inherit;
  font-size: 0.78125rem; color: var(--fg-2);
  text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .5);
  text-underline-offset: 0.1875rem;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.up5-chat .nt-helper:hover { color: var(--accent-text); text-decoration-color: rgba(var(--accent-rgb), .6); }
.up5-chat .nt-helper:focus-visible { outline: 0.125rem solid rgba(var(--accent-rgb), .85); outline-offset: 0.125rem; border-radius: 0.25rem; }

.up5-chat .nt-result { display: none; }
.up5-chat .nt-card[data-done] .nt-result {
  display: block; margin-top: 1rem; padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--hairline);
  animation: ntIn .45s var(--ease-emph) both;
}
@keyframes ntIn { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }
.up5-chat .nt-hero { display: flex; flex-direction: column; gap: 0.125rem; outline: none; }
.up5-chat .nt-hero b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6875rem; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #2FCBFF, #CF5CFF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.up5-chat .nt-hero span { font-size: 0.78125rem; font-weight: 600; color: var(--muted); }
.up5-chat .nt-line { margin: 0.625rem 0 0; font-size: 0.84375rem; line-height: 1.5; color: var(--fg-2); }
.up5-chat .nt-line b { color: #fff; font-weight: 700; }
/* cazul în care NU dăm cifră, fiindcă ar fi greșită (nu doar imprecisă):
   ia locul blocului cu numărul, deci trebuie să aibă greutatea lui vizuală,
   fără să arate ca o eroare — nu utilizatorul a greșit ceva. */
.up5-chat .nt-notice {
  margin: 0 0 0.75rem; padding: 0.8125rem 0.9375rem;
  border: 0.0625rem solid var(--card-bd); border-left: 0.1875rem solid rgba(var(--accent-rgb), .75);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 0.875rem; line-height: 1.6; color: var(--fg-body);
}
.up5-chat .nt-notice b { color: #fff; }

.up5-chat .nt-caveat {
  margin: 0.75rem 0 0; padding-top: 0.625rem; border-top: 0.0625rem solid var(--hairline);
  font-size: 0.71875rem; line-height: 1.45; color: var(--dim);
}
/* pașii următori — aceleași pastile ca sugestiile din chat */
.up5-chat .nt-next { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-top: 0.875rem; }
.up5-chat .nt-nextq {
  min-height: 2.375rem; padding: 0.5rem 0.75rem; border-radius: 62.4375rem; cursor: pointer;
  border: 0.0625rem solid var(--card-bd); background: var(--card-fill);
  font-size: 0.78125rem; font-weight: 600; color: var(--fg-2); text-align: left;
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-press);
}
.up5-chat .nt-nextq:hover { border-color: rgba(var(--accent-rgb), .45); color: #fff; }
.up5-chat .nt-nextq:active { transform: scale(.97); }
.up5-chat .nt-nextq:focus-visible { outline: 0.125rem solid rgba(var(--accent-rgb), .85); outline-offset: 0.125rem; }

@media (min-width: 720px) {
  .up5-chat .message-container .nt-card { padding: 1.125rem 1.25rem; }
  .up5-chat .nt-title { font-size: 1.1875rem; }
  /* pe lat, câmpurile numerice stau două pe rând; alegerile rămân pe rând întreg */
  .up5-chat .nt-form { grid-template-columns: 1fr 1fr; }
  .up5-chat .nt-field:has(.nt-chips), .up5-chat .nt-err, .up5-chat .nt-go { grid-column: 1 / -1; }
  .up5-chat .nt-go { max-width: 20rem; }
  .up5-chat .nt-hero b { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .up5-chat .message-container .nt-card { animation: none; }
  .up5-chat .nt-card[data-done] .nt-result { animation: none; }
  .up5-chat .nt-input[data-invalid] { animation: none; }
  .up5-chat .nt-chip span:active, .up5-chat .nt-nextq:active { transform: none; }
}


/* ============================ OFERTA DE PLAN ================================
   Cardul „numerele în farfurie" (data-js="event-plan-offer", șablon în
   chat.html.twig): follow-up după rezultatele legate de mâncare — răspunsul
   caloric (intent plan_offer) și unealta de macros. Moștenește .nt-card;
   aici doar rândul de butoane și linkul de abonament. Mostra gratuită e CTA-ul
   plin (pasul fără frecare); abonamentul e al doilea, dar la fel de citeț —
   ambele drumuri se văd dintr-o privire, exact premisa cardului. */
.up5-chat .nt-offer-btns {
  display: grid;
  gap: 0.625rem;
  margin-top: 0.875rem;
}
.up5-chat .nt-offer .nt-offer-demo {
  width: 100%;
  min-height: 3rem;
  font-weight: 800;
  font-size: 0.9375rem;
}
.up5-chat .nt-offer .nt-offer-abo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.625rem 1rem;
  border: 0.0625rem solid rgba(var(--accent-rgb), 0.45);
  border-radius: 62.4375rem;
  font-size: 0.90625rem;
  font-weight: 700;
  color: var(--fg-2, #B9BDC9);
  text-align: center;
  transition: border-color var(--dur-fast, .15s), color var(--dur-fast, .15s);
}
.up5-chat .nt-offer .nt-offer-abo:hover {
  border-color: rgba(var(--accent-rgb), 0.8);
  color: #fff;
}
.up5-chat .nt-offer .nt-offer-abo:focus-visible {
  outline: 0.125rem solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 0.125rem;
}