/* =============================================================================
   chat-plan-v7.css — DOAR secțiunea 11.6 din chat-v7.css
   -----------------------------------------------------------------------------
   Îl folosești NUMAI dacă ai modificat deja `chat-v7.css` și nu vrei să-l
   înlocuiești. Se pune DUPĂ el, în aceeași rută. Dacă instalezi `chat-v7.css`
   regenerat (recomandat), fișierul acesta e redundant — NU le pune pe amândouă.

   Finisajele din AFARA §11.6 (cardul de produs, formularele, capul conversației,
   helper-ul uneltelor) sunt și ele aici, în blocul GENERAT de la finalul fișierului
   — nu mai e nimic de aplicat manual. Vezi comentariul de acolo.
   ============================================================================= */

/* ====== 11.6 SERTARUL PLANULUI GRATUIT + LISTA DE CUMPĂRĂTURI COMPACTĂ ======
   Planul de 2 zile e un CÂRLIG de conversie, nu produsul. Măsurat la 390px, în
   starea stabilă: intro 417px + plan pliat 979px + lista 250px împingea cardul
   de cumpărare la peste 1.700px, adică peste două ecrane de telefon. Deci planul
   se strânge într-un sertar (assets/js/chat-plan-v7.js îl construiește), iar
   lista rămâne vizibilă dar compactă — patru rânduri înșirate, nu liste cu
   bulete. Oferta trebuie să încapă pe primul ecran.

   Fără JavaScript nu se pierde nimic: planul se afișează ca înainte, lista tot
   compactă. Sertarul e o îmbunătățire, nu o dependență.
   ========================================================================== */

/* ---------------------------------------------------- sertarul planului */
.up5-chat .message .chat-meal-plan[data-drawer] {
  margin-top: 14px; padding: 0; overflow: hidden;
  background: var(--card-solid); border: 1px solid var(--card-bd);
  border-radius: var(--r-xl); box-shadow: var(--sh-1), var(--inset-hi);
}
.up5-chat .drawer-head {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 3px 12px; width: 100%; min-height: 62px; padding: 13px 15px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast);
}
.up5-chat .drawer-head:hover { background: rgba(255, 255, 255, .022); }
.up5-chat .drawer-head:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .85); outline-offset: -2px; }
.up5-chat .drawer-t {
  grid-column: 1; font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 15.5px; line-height: 1.25; letter-spacing: -.02em;
}
.up5-chat .drawer-sub {
  grid-column: 1; font-size: 12.5px; line-height: 1.35; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* indicatorul: același cerc cu „+" care devine „×" ca la secțiunile pliabile */
.up5-chat .drawer-chev {
  grid-column: 2; grid-row: 1 / -1; justify-self: end;
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .25);
  transition: transform var(--dur-base) var(--ease-press), background var(--dur-base);
}
.up5-chat .drawer-chev::before, .up5-chat .drawer-chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--accent-text); border-radius: 2px;
}
.up5-chat .drawer-chev::before { width: 10px; height: 1.8px; }
.up5-chat .drawer-chev::after { width: 1.8px; height: 10px; }
.up5-chat .drawer-body { height: 0; overflow: hidden; transition: height .34s var(--ease-emph); }
.up5-chat .drawer-inner { padding: 2px 15px 14px; }
/* primul „📅 Ziua 1:" nu mai are nevoie de spațiu propriu deasupra */
.up5-chat .drawer-inner > p:first-child { margin-top: 0; }

/* -------------------------------------------- lista de cumpărături, compactă */
/* ca sertar, padding-ul îl dă capul/corpul — altfel s-ar aduna cu al cardului
   și titlul ar apărea indentat cu 30px, iar cardul mai înalt decât al planului */
.up5-chat .message .chat-shopping[data-drawer] { padding: 0; overflow: hidden; }
.up5-chat .message .chat-shopping {
  margin-top: 12px; padding: 13px 15px 14px;
  background: var(--card-solid); border: 1px solid var(--card-bd);
  border-radius: var(--r-xl); box-shadow: var(--sh-1), var(--inset-hi);
}
.up5-chat .chat-shopping > p:first-child {
  margin: 0; font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 15px; line-height: 1.3; letter-spacing: -.02em;
}
.up5-chat .chat-shopping > p:first-child strong { font-weight: inherit; }
.up5-chat .chat-shopping > p + p {
  margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--fg-2);
}
.up5-chat .chat-shopping > p + p strong {
  color: var(--accent-text); font-weight: 700;
}
/* toleranță: dacă modelul recade în liste cu bulete, rămân compacte */
.up5-chat .chat-shopping ul { margin: 5px 0 0; padding-left: 18px; }
.up5-chat .chat-shopping li { font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.up5-chat .chat-shopping li + li { margin-top: 3px; }

/* ------- cât timp planul „se generează", nimic din livrabil nu se vede încă:
   altfel utilizatorul citește ingredientele unui plan care încă nu există */
.up5-chat .message--assistant[data-text-loading] .chat-shopping,
.up5-chat .message--assistant.chat-meal-plan:not([data-plan-loaded]) .chat-shopping { display: none; }
.up5-chat .message--assistant:not([data-text-loading]):not(.chat-meal-plan) .chat-shopping,
.up5-chat .message--assistant.chat-meal-plan[data-plan-loaded] .chat-shopping {
  animation: acxGenIn .7s var(--ease-emph) .12s both;
}

@media (min-width: 720px) {
  .up5-chat .drawer-head { min-height: 66px; padding: 14px 18px; }
  .up5-chat .drawer-t { font-size: 17px; }
  .up5-chat .drawer-inner { padding: 2px 18px 16px; }
  .up5-chat .message .chat-shopping { padding: 14px 18px 16px; }
  .up5-chat .message .chat-shopping[data-drawer] { padding: 0; }
  .up5-chat .chat-shopping > p:first-child { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .up5-chat .message-container .event-user-form,
  .up5-chat .event-user-form .form > * { animation: none; }
  .up5-chat .drawer-body { transition: none; }
  .up5-chat .drawer-chev { transition: none; }
  .up5-chat .message--assistant:not([data-text-loading]):not(.chat-meal-plan) .chat-shopping,
  .up5-chat .message--assistant.chat-meal-plan[data-plan-loaded] .chat-shopping { animation: none; }
}


/* =============================================================================
   REGULI CARE NU SUNT DIN §11.6, dar TREBUIE să fie aici
   -----------------------------------------------------------------------------
   Extractul ăsta există pentru calea „îmi păstrez chat-v7.css-ul modificat și
   adaug bucata". Ca acea cale să dea ACELAȘI rezultat ca înlocuirea fișierului
   întreg, trebuie să conțină TOT ce s-a schimbat în livrarea asta, nu doar
   sertarele: cardul de produs (era strâns cu 44px pe fiecare rând), intrarea
   animată a formularelor, capul conversației (rezerva loc pentru două butoane,
   a mai rămas unul), indiciul de unealtă, regula care face ca `hidden` din JS
   să și ascundă linkul de detalii, și indicatorul +/× al sertarelor.

   Blocul de mai jos e GENERAT din diferența dintre chat-v7.css livrat acum și
   cel din pachetul anterior, minus ce acoperă deja chat-tools-v7.css și §11.6 —
   adică acoperirea e demonstrată, nu aleasă cu ochiul. Dacă înlocuiești
   chat-v7.css întreg, fișierul ăsta nu-ți trebuie deloc.

   O singură diferență NU se poate transporta printr-un extract: regulile ȘTERSE
   (`.acx-mfav`, `.up5-chat-fav`). Rămân la tine ca CSS mort, inofensiv — markupul
   pe care îl stilizau nu mai există.
   ============================================================================= */
.up5-chat .event-purchase-plan .plan-details-link[hidden] { display: none; }
.up5-chat .event-user-form .form > * { animation: acxRise .4s var(--ease-emph) both; }
.up5-chat .event-user-form .form > *:nth-child(1) { animation-delay: .10s; }
.up5-chat .event-user-form .form > *:nth-child(2) { animation-delay: .15s; }
.up5-chat .event-user-form .form > *:nth-child(3) { animation-delay: .20s; }
.up5-chat .event-user-form .form > *:nth-child(4) { animation-delay: .25s; }
.up5-chat .event-user-form .form > *:nth-child(5) { animation-delay: .30s; }
.up5-chat .event-user-form .form > *:nth-child(6) { animation-delay: .35s; }
.up5-chat .event-user-form .form > *:nth-child(n+7) { animation-delay: .40s; }
.up5-chat .message-container .event-user-form { position: relative; margin-top: 10px; padding: 20px 18px; background: var(--card-solid); border: 1px solid var(--card-bd); border-radius: var(--r-xl); box-shadow: var(--sh-2), var(--inset-hi); animation: acxCardIn .45s var(--ease-emph) both; }
.up5-chat .message-container .message__link { position: relative; display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 14px; background: var(--card-fill); border: 1px solid var(--card-bd); border-radius: var(--r-lg); box-shadow: var(--inset-hi), var(--sh-1); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.up5-chat .message__link__title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: #fff; line-height: 1.3; padding-right: 20px; }
.up5-chat .nt-helper { justify-self: start; text-align: left; padding: 0; cursor: pointer; margin-top: -3px; 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 [data-drawer][data-open="true"] .drawer-chev { transform: rotate(135deg); background: rgba(var(--accent-rgb), .2); }

@media (max-width: 1023.98px) {
  .up5-chat .chatroom-top .grid-x > .cell { padding-right: 64px; }
}

@media (max-width: 719.98px) {
  .up5-chat .chatroom-top .grid-x > .cell { padding: 8px 0; padding-right: 64px; }
}

@media (max-width: 719px) {
  .up5-chat .message__link__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 12px; }
}