/* =============================================================================
   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: 10px; padding: 16px;
  background: var(--card-solid); border: 1px 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: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
}
.up5-chat .nt-title {
  margin-top: 4px; font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 17px; line-height: 1.25; letter-spacing: -.02em;
}
.up5-chat .nt-form { display: grid; gap: 12px; margin-top: 14px; }
.up5-chat .nt-field { display: grid; gap: 6px; }
.up5-chat .nt-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.up5-chat .nt-input {
  width: 100%; min-height: 46px; background: var(--bg-elev);
  border: 1px solid var(--card-bd); border-radius: var(--r-sm);
  padding: 10px 13px; color: #fff; font: inherit; font-size: 16px; /* 16px = fără zoom pe iOS */
  box-shadow: inset 0 1px 2px 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 1px 2px rgba(0, 0, 0, .3), 0 0 0 3px 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: 7px; }
.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: 40px; padding: 8px 13px;
  border: 1px solid var(--card-bd); background: var(--card-fill); border-radius: 999px;
  font-size: 12.5px; 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 6px 18px -10px rgba(var(--accent-rgb), .55);
}
.up5-chat .nt-chip input:focus-visible + span { outline: 2px solid rgba(var(--accent-rgb), .85); outline-offset: 2px; }

.up5-chat .nt-err { display: none; font-size: 12.5px; font-weight: 600; color: #ffb3b3; }
.up5-chat .nt-err[data-on] { display: block; }
.up5-chat .nt-go { width: 100%; min-height: 48px; font-weight: 800; font-size: 15px; }

/* ---- 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: 10px;
  margin-top: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--bg-elev); border: 1px solid var(--hairline);
  font-size: 12.5px; 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: 32px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-bd); background: transparent;
  font-size: 12px; 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: 2px solid rgba(var(--accent-rgb), .85); outline-offset: 2px; }

/* 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: -3px; /* îl lipim de inputul lui, ca să nu pară eticheta câmpului următor */
  border: 0; background: none; font: inherit;
  font-size: 12.5px; color: var(--fg-2);
  text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .5);
  text-underline-offset: 3px;
  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: 2px solid rgba(var(--accent-rgb), .85); outline-offset: 2px; border-radius: 4px; }

.up5-chat .nt-result { display: none; }
.up5-chat .nt-card[data-done] .nt-result {
  display: block; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  animation: ntIn .45s var(--ease-emph) both;
}
@keyframes ntIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.up5-chat .nt-hero { display: flex; flex-direction: column; gap: 2px; outline: none; }
.up5-chat .nt-hero b {
  font-family: var(--font-display); font-weight: 800; font-size: 27px; 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: 12.5px; font-weight: 600; color: var(--muted); }
.up5-chat .nt-line { margin: 10px 0 0; font-size: 13.5px; 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 12px; padding: 13px 15px;
  border: 1px solid var(--card-bd); border-left: 3px solid rgba(var(--accent-rgb), .75);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 14px; line-height: 1.6; color: var(--fg-body);
}
.up5-chat .nt-notice b { color: #fff; }

.up5-chat .nt-caveat {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline);
  font-size: 11.5px; 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: 7px; margin-top: 14px; }
.up5-chat .nt-nextq {
  min-height: 38px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-bd); background: var(--card-fill);
  font-size: 12.5px; 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: 2px solid rgba(var(--accent-rgb), .85); outline-offset: 2px; }

@media (min-width: 720px) {
  .up5-chat .message-container .nt-card { padding: 18px 20px; }
  .up5-chat .nt-title { font-size: 19px; }
  /* 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: 320px; }
  .up5-chat .nt-hero b { font-size: 30px; }
}
@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; }
}