/* ── „Zapytaj o cokolwiek": pulpit bento z generatywnym UI ──
   Osobny moduł (CSS+JS) ładowany przez landing. Zero zmian w script.js. */

/* ── Scena v2: pulpit — fotograficzny kadr pod białymi kaflami,
   jak talia kart i sekcja bezpieczeństwa ── */
.ask-v2 {
  position: relative;
  overflow: hidden;
  max-width: 60rem;
  margin: 1.5rem auto 0;
  padding: 1.1rem;
  background: var(--bg-tint); /* baza pod fotografią (zanim się wczyta) */
  border-radius: var(--radius-xl);
}

.ask-v2 > .av-bento,
.ask-v2 > .av-input,
.ask-v2 > .av-pills { position: relative; z-index: 1; }

.av-bento {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  height: 26rem;
}

.av-c-wyplata     { grid-column: 1 / 3; grid-row: 1 / 3; }
.av-c-subskrypcje { grid-column: 3;     grid-row: 1; }
.av-c-wspolne     { grid-column: 4;     grid-row: 1; }
.av-c-vat         { grid-column: 3;     grid-row: 2; }
.av-c-poduszka    { grid-column: 4;     grid-row: 2; }

/* płaski kadr — bez obrysu i cienia, jak reszta strony */
.av-card {
  position: relative; /* kotwica dla szkieletu strumieniowania */
  display: flex;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-md);
  transition: opacity 0.32s ease, transform 0.32s var(--ease-quint);
  will-change: clip-path;
}

/* NAMYSŁ: kadr „oddycha", zanim odpowie */
.av-card.is-warm { transform: scale(1.012); }

/* USTĘPOWANIE: treść kadru gaśnie miękko, zanim cokolwiek się przesunie —
   layout zmienia się dopiero na niewidocznej treści (zero mignięć) */
.av-body { transition: opacity 0.18s ease; }
.av-card.is-yielding .av-body { opacity: 0; }

/* kafle ustępują miejsca stagger-em (JS nadaje --hide-delay) */
.av-card.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition-delay: var(--hide-delay, 0s);
}

.av-card.is-expanded {
  position: absolute;
  inset: 0;
  z-index: 5;
  grid-column: 1 / -1;
  grid-row: 1 / -1; /* span całego pulpitu → inset:0 wypełnia bento */
  /* gniazdowany narożnik: promień powłoki (2.75rem) − padding (1.1rem) —
     ta sama wartość co RAD_REST w zapytaj-v2.js */
  border-radius: 1.65rem;
}

/* SZKIELET STRUMIENIOWANIA: pulsujące linie, jak odpowiedź, która się pisze */
.av-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: 2.2rem 2.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.av-ghost.is-on { opacity: 1; }

.av-ghost i {
  display: block;
  height: 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  animation: av-ghost-pulse 1.1s ease-in-out infinite;
}

.av-ghost i:nth-child(1) { width: 30%; }
.av-ghost i:nth-child(2) { width: 58%; animation-delay: 0.14s; }
.av-ghost i:nth-child(3) { width: 44%; animation-delay: 0.28s; }

@keyframes av-ghost-pulse { 50% { opacity: 0.4; } }

/* ── Treść kadru ── */
.av-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem; }

.is-expanded .av-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 2.4rem;
  padding: 1.9rem 2.2rem;
}

.av-lead { display: flex; flex-direction: column; }
.av-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.av-label {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.av-meta { font-size: 0.71875rem; color: var(--ink-muted); }

.av-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.av-c-wyplata .av-num { font-size: 2.1rem; }
.is-expanded .av-num { font-size: 3rem; margin-top: 0.5rem; }

/* rozbudowana odpowiedź + wniosek — tylko w rozwinięciu */
.av-answer { display: none; }
.is-expanded .av-answer {
  display: block;
  margin-top: 0.85rem;
  font-size: 1.03125rem;
  line-height: 1.55;
  color: var(--ink);
}
.av-answer b { color: var(--status-green-text); font-weight: 600; }

.av-note { display: none; }
.is-expanded .av-note {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.05rem;
  font-size: 0.90625rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.av-note::before { content: "✦"; color: var(--status-green-text); flex: 0 0 auto; }

.av-viz { margin-top: auto; padding-top: 0.85rem; }
.is-expanded .av-viz { margin-top: 0; padding-top: 0; }

/* ── Wykresy ── */
.av-donut { width: 4.6rem; height: 4.6rem; transform: rotate(-90deg); flex: 0 0 auto; }
.is-expanded .av-donut { width: 9rem; height: 9rem; margin: 0 auto; }
.av-donut circle { fill: none; stroke-width: 4; }
.av-donut .seg {
  stroke: var(--c);
  stroke-dasharray: var(--len) 100;
  stroke-dashoffset: calc(-1 * var(--off));
}

.av-wyplata-grid { display: flex; align-items: center; gap: 1.3rem; }
.is-expanded .av-wyplata-grid { flex-direction: column; align-items: stretch; gap: 1.5rem; }

.av-bars { display: grid; gap: 0.45rem; flex: 1; }
.is-expanded .av-bars { gap: 0.85rem; }
.av-row {
  display: grid;
  grid-template-columns: 5.8rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78125rem;
}
.is-expanded .av-row { font-size: 0.9375rem; grid-template-columns: 7.5rem 1fr auto; gap: 0.9rem; }
.av-track {
  height: 0.42rem;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  overflow: hidden;
}
.is-expanded .av-track { height: 0.55rem; }
.av-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: var(--radius-pill);
  background: var(--c);
  transform-origin: left center;
}
.av-amt { font-variant-numeric: tabular-nums; font-weight: 600; }

.av-seg-bar {
  display: flex;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-tint);
  margin-top: 0.65rem;
}
.is-expanded .av-seg-bar { height: 1.05rem; margin-top: 0; }
.av-seg-bar i { display: block; height: 100%; width: var(--w); background: var(--c); transform-origin: left center; }

.av-legend { display: grid; gap: 0.45rem; margin-top: 0.5rem; font-size: 0.65625rem; color: var(--ink-muted); }
.is-expanded .av-legend { font-size: 0.9375rem; gap: 0.7rem; margin-top: 1rem; }
.av-legend span { display: flex; align-items: center; gap: 0.45rem; }
.av-legend span b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.av-legend i { width: 0.5rem; height: 0.5rem; border-radius: 3px; background: var(--c); flex: 0 0 auto; }

.av-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.av-li { min-width: 0; }
.av-viz.av-list { margin-top: auto; }
.is-expanded .av-list { gap: 0.1rem; }
.av-li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  padding: 0.22rem 0;
  border-top: 1px solid var(--stone-soft);
}
.is-expanded .av-li { font-size: 1.03125rem; padding: 0.65rem 0; }
.av-li:first-child { border-top: 0; }
.av-li b { font-variant-numeric: tabular-nums; }
.av-li--cut b { color: var(--error); }
.av-li--sum { font-weight: 600; }
.av-li--sum b { color: var(--status-green-text); }

.av-spark { width: 100%; height: 2.8rem; }
.is-expanded .av-spark { height: 10rem; }
.av-spark svg { display: block; width: 100%; height: 100%; }
.av-spark .area { fill: var(--status-green-bg); }
.av-spark .line {
  fill: none;
  stroke: var(--status-green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ── GENEROWANIE: treść buduje się etapami (grupy data-g="1..5") ──
   Rozwinięty kadr startuje z niewidoczną treścią; klasa .is-genned
   odsłania grupy kaskadą, wykresy rysują się (dasharray/scaleX). */
.av-card.is-expanded [data-g] {
  opacity: 0;
  transform: translateY(9px);
}

.av-card.is-expanded [data-g="3"] { transform: none; } /* wykres nie skacze — rysuje się */

.av-card.is-expanded.is-genned [data-g] {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.55s var(--ease-quint);
}

.av-card.is-expanded.is-genned [data-g="1"] { transition-delay: 0.05s; }
.av-card.is-expanded.is-genned [data-g="2"] { transition-delay: 0.22s; }
.av-card.is-expanded.is-genned [data-g="3"] { transition-delay: 0.42s; }
.av-card.is-expanded.is-genned [data-g="4"] { transition-delay: 0.85s; }
.av-card.is-expanded.is-genned [data-g="5"] { transition-delay: 1.1s; }

/* donut kreśli łuki */
.av-card.is-expanded .av-donut .seg { stroke-dasharray: 0 100; }
.av-card.is-expanded.is-genned .av-donut .seg {
  stroke-dasharray: var(--len) 100;
  transition: stroke-dasharray 0.75s var(--ease-quint) 0.5s;
}

/* słupki wyrastają */
.av-card.is-expanded .av-fill,
.av-card.is-expanded .av-seg-bar i { transform: scaleX(0); }
.av-card.is-expanded.is-genned .av-fill,
.av-card.is-expanded.is-genned .av-seg-bar i {
  transform: scaleX(1);
  transition: transform 0.6s var(--ease-quint);
}
.av-card.is-expanded.is-genned .av-row:nth-child(1) .av-fill { transition-delay: 0.5s; }
.av-card.is-expanded.is-genned .av-row:nth-child(2) .av-fill { transition-delay: 0.58s; }
.av-card.is-expanded.is-genned .av-row:nth-child(3) .av-fill { transition-delay: 0.66s; }
.av-card.is-expanded.is-genned .av-row:nth-child(4) .av-fill { transition-delay: 0.74s; }
.av-card.is-expanded.is-genned .av-seg-bar i:nth-child(1) { transition-delay: 0.5s; }
.av-card.is-expanded.is-genned .av-seg-bar i:nth-child(2) { transition-delay: 0.62s; }
.av-card.is-expanded.is-genned .av-seg-bar i:nth-child(3) { transition-delay: 0.74s; }

/* lista wjeżdża wierszami */
.av-card.is-expanded [data-g="3"].av-list .av-li { opacity: 0; transform: translateY(7px); }
.av-card.is-expanded.is-genned [data-g="3"].av-list .av-li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.45s var(--ease-quint);
}
.av-card.is-expanded.is-genned .av-li:nth-child(1) { transition-delay: 0.48s; }
.av-card.is-expanded.is-genned .av-li:nth-child(2) { transition-delay: 0.56s; }
.av-card.is-expanded.is-genned .av-li:nth-child(3) { transition-delay: 0.64s; }
.av-card.is-expanded.is-genned .av-li:nth-child(4) { transition-delay: 0.72s; }

/* sparkline: linia i pole odsłaniają się wipe'em od lewej — trik
   stroke-dasharray + pathLength łamie się w Chrome przy non-scaling-stroke */
.av-card.is-expanded .av-spark svg { clip-path: inset(0 100% 0 0); }
.av-card.is-expanded.is-genned .av-spark svg {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s var(--ease-quint) 0.5s;
}

/* ── Wejście AI ── */
.av-input {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.8rem 1.05rem;
  background: var(--surface);
  border-radius: var(--radius-md);
}

.av-spark-ic { color: var(--status-green-text); font-size: 1rem; transition: transform 0.3s var(--ease-spring); }
.av-input.is-thinking .av-spark-ic { animation: av-spark-pulse 0.9s ease-in-out infinite; }

@keyframes av-spark-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.6; }
}

.av-text { flex: 1; font-size: 0.9375rem; color: var(--ink); min-height: 1.2em; }
/* PORT: the placeholder is copy, so it comes from the i18n bundle through
   --av-placeholder (set on .ask-v2). The draft's Polish string stays as the
   fallback, which keeps this file readable next to apps/web-v2. */
.av-text:empty::before { content: var(--av-placeholder, "Zapytaj o swoje pieniądze…"); color: var(--ink-muted); }

.av-caret {
  width: 2px;
  height: 1.1em;
  background: var(--ink);
  animation: av-caret 1.1s steps(2) infinite;
  transition: opacity 0.25s ease;
}
.av-caret.is-off { opacity: 0; animation: none; }
@keyframes av-caret { 50% { opacity: 0; } }

.av-send {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream-on-dark);
  font-size: 0.9rem;
}
.av-send.is-sent { animation: av-send-pulse 0.4s var(--ease-spring); }

@keyframes av-send-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(0.82); }
  100% { transform: scale(1); }
}

/* powrót do pulpitu — pojawia się, gdy odpowiedź zakrywa kafle */
.av-back {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-spring), color 0.3s ease;
}
.av-back svg { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }
.av-back:hover { color: var(--ink); }
.av-back:active { transform: scale(0.94); }
.ask-v2.has-open .av-back { opacity: 1; pointer-events: auto; transform: none; }

/* pigułki pytań — prawdziwe przyciski */
.av-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.85rem; }
.av-pill {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* cel dotykowy; sam krój zostaje mały */
  font-size: 0.8125rem;
  color: var(--ink-muted);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  transition: color 0.3s ease, background-color 0.3s ease, transform 0.25s var(--ease-spring);
}
.av-pill:hover { color: var(--ink); }
.av-pill:active { transform: scale(0.96); }
.av-pill.is-active { color: var(--highlight-ink); background: var(--highlight); }
.av-pill.is-pulse { animation: av-pill-pulse 0.45s var(--ease-spring); }

@keyframes av-pill-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── Mobile: jawne 3 wiersze auto (kotwica 1/-1 dla rozwinięcia działa),
   kafle rosną do treści — nic się nie obcina ── */
@media (max-width: 52rem) {
  .av-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }
  .av-c-wyplata     { grid-column: 1 / 3; grid-row: 1; }
  .av-c-subskrypcje { grid-column: 1;     grid-row: 2; }
  .av-c-wspolne     { grid-column: 2;     grid-row: 2; }
  .av-c-vat         { grid-column: 1;     grid-row: 3; }
  .av-c-poduszka    { grid-column: 2;     grid-row: 3; }
  /* wąskie komórki: meta znika, etykiety list skracają się wielokropkiem */
  .av-card:not(.is-expanded) .av-meta { display: none; }
  .av-li { font-size: 0.71875rem; gap: 0.5rem; }
  .av-li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .av-li b { flex: 0 0 auto; white-space: nowrap; }
  .is-expanded .av-body { grid-template-columns: 1fr; align-items: start; gap: 1.3rem; padding: 1.35rem 1.25rem; }
  .is-expanded .av-li { font-size: 0.9375rem; }

  /* rozwinięty kadr rośnie z treścią: absolute nad bento (o wysokości
     zwiniętych kafli) obcinał wykresy — tu wraca do przepływu siatki */
  .av-card.is-hidden { display: none; }
  .av-card.is-expanded { position: static; inset: auto; grid-column: 1 / -1; grid-row: auto; }
  .is-expanded .av-num { font-size: 2.2rem; }
  .is-expanded .av-donut { width: 7rem; height: 7rem; }
  .is-expanded .av-answer { font-size: 0.96875rem; }
  .is-expanded .av-spark { height: 6.5rem; }

  /* zwinięte kafle: odrobina luzu i czytelniejsza legenda */
  .av-bento { gap: 0.6rem; }
  .av-legend { font-size: 0.71875rem; }
  .av-back { top: 1.45rem; right: 1.45rem; }
  /* nagłówek rozwiniętego kadru nie wchodzi pod przycisk powrotu */
  .is-expanded .av-top { padding-right: 6.6rem; }
  .av-back { padding: 0.4rem 0.75rem; min-height: 44px; font-size: 0.78125rem; }
}

/* na telefonie podmiany są natychmiastowe (JS używa trybu statycznego) —
   wyłączamy przejścia kadrów, żeby nic nie skakało przy zmianie layoutu */
@media (max-width: 52rem) {
  .av-card, .av-body { transition: none !important; animation: none !important; }
  .av-ghost { display: none; }
  .av-card.is-expanded [data-g],
  .av-card.is-expanded.is-genned [data-g],
  .av-card.is-expanded [data-g="3"].av-list .av-li,
  .av-card.is-expanded .av-fill,
  .av-card.is-expanded .av-seg-bar i { opacity: 1; transform: none; transition: none !important; }
  .av-card.is-expanded .av-donut .seg { stroke-dasharray: var(--len) 100; transition: none !important; }
  .av-card.is-expanded .av-spark svg { clip-path: none; }
}

/* ── Reduced motion: statyczny pulpit, podmiana bez animacji ── */
@media (prefers-reduced-motion: reduce) {
  .av-card, .av-body, .ask-stage, .ask-v2 { animation: none !important; transition: none !important; }
  .av-ghost { display: none; }
  .av-card.is-expanded [data-g],
  .av-card.is-expanded.is-genned [data-g],
  .av-card.is-expanded [data-g="3"].av-list .av-li,
  .av-card.is-expanded .av-fill,
  .av-card.is-expanded .av-seg-bar i { opacity: 1; transform: none; transition: none !important; }
  .av-card.is-expanded .av-donut .seg { stroke-dasharray: var(--len) 100; transition: none !important; }
  .av-card.is-expanded .av-spark svg { clip-path: none; }
  .av-caret, .av-input.is-thinking .av-spark-ic { animation: none; }
}