/* ============================================================
   anketa — one question at a time, centered stage
   ============================================================ */

.ank-nav{
  position:fixed; top:0; left:0; right:0; z-index:50; padding:18px 0;
}
.ank-nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.ank-back{
  display:inline-flex; align-items:center; gap:8px; font-size:0.88rem; color:var(--text-dim);
  transition:color .25s var(--ease-liquid);
}
.ank-back:hover{ color:var(--text); }
.ank-back svg{ width:16px; height:16px; }

/* ---------- centered stage ---------- */
.ank-shell{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:110px 24px 60px;
}
.ank-stage{
  width:100%; max-width:600px;
  display:flex; flex-direction:column; align-items:center; gap:30px;
}

/* progress dots */
.qa-dots{ display:flex; align-items:center; gap:8px; }
.qa-dot{
  width:7px; height:7px; border-radius:4px; background:var(--border-strong);
  transition:background .45s var(--ease-liquid), width .45s var(--ease-liquid), opacity .45s var(--ease-liquid);
}
.qa-dot.done{ background:var(--accent-2); opacity:0.85; }
.qa-dot.active{ background:var(--accent); width:22px; box-shadow:0 0 12px var(--accent-line); }

/* animated question headline */
.qa-question-wrap{
  width:100%; min-height:96px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.qa-question{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem, 4.2vw, 2.35rem);
  letter-spacing:-0.02em; line-height:1.22; max-width:19ch;
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
  transition:opacity .55s var(--ease-liquid), transform .55s var(--ease-liquid), filter .55s var(--ease-liquid);
}
.qa-question.qa-out{ opacity:0; transform:translateY(-22px) scale(0.96); filter:blur(9px); }
.qa-question.qa-in-start{ opacity:0; transform:translateY(22px) scale(0.96); filter:blur(9px); }
.qa-question .qa-optional-tag{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; margin-top:10px;
}

/* composer area (reused visual language across question / done states) */
.qa-composer-area{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
  transition:opacity .5s var(--ease-liquid), transform .5s var(--ease-liquid), filter .5s var(--ease-liquid);
}
.qa-composer-area.qa-out{ opacity:0; transform:translateY(-14px) scale(0.98); filter:blur(6px); }
.qa-composer-area.qa-in-start{ opacity:0; transform:translateY(14px) scale(0.98); filter:blur(6px); }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; }
.chip{
  padding:10px 18px; border-radius:999px; font-size:0.88rem; font-weight:500;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text);
  transition:transform .35s var(--ease-liquid), border-color .3s, background .3s;
}
.chip:hover{ border-color:var(--accent-line); background:var(--accent-dim); transform:translateY(-2px); }
.chip:active{ transform:scale(0.96); }

.composer-box{
  width:100%; border-radius:26px; border:1px solid var(--border-strong);
  background:rgba(20,20,22,0.72);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.07);
  padding:8px 8px 8px 22px;
  display:flex; align-items:flex-end; gap:10px;
  transition:border-color .35s var(--ease-liquid), box-shadow .35s var(--ease-liquid), transform .3s var(--ease-spring);
}
.composer-box:focus-within{
  border-color:var(--accent-line);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.75), 0 0 0 3px var(--accent-dim), inset 0 1px 0 rgba(255,255,255,0.07);
}
.composer-box.qa-pulse{ transform:scale(1.015); border-color:var(--accent-line); }

.composer-textarea{
  flex:1; background:transparent; border:none; outline:none; resize:none;
  color:var(--text); font-family:var(--font-body); font-size:1.05rem; line-height:1.5;
  padding:13px 0; min-height:24px; max-height:160px; text-align:left;
}
.composer-textarea::placeholder{ color:var(--text-faint); }

.send-btn{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; margin-bottom:4px;
  display:flex; align-items:center; justify-content:center; border:none;
  background:var(--surface-3); color:var(--text-faint);
  transition:background .35s var(--ease-liquid), color .35s var(--ease-liquid), transform .3s var(--ease-spring);
}
.send-btn svg{ width:18px; height:18px; transition:transform .3s var(--ease-spring); }
.send-btn.ready{
  background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:#180b04;
  box-shadow:0 8px 20px -8px rgba(255,106,43,0.65);
}
.send-btn.sent{ transform:scale(1.12); }
.send-btn:active{ transform:scale(0.9); }

.skip-row{ min-height:20px; }
.skip-link{ font-size:0.82rem; color:var(--text-faint); transition:color .25s; }
.skip-link:hover{ color:var(--text-dim); }

.composer-hint{
  text-align:center; font-size:0.74rem; color:var(--text-faint); font-family:var(--font-mono);
}

/* ---------- done / summary state ---------- */
.qa-done{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
  transition:opacity .55s var(--ease-liquid), transform .55s var(--ease-liquid), filter .55s var(--ease-liquid);
}
.qa-done.qa-in-start{ opacity:0; transform:translateY(22px) scale(0.96); filter:blur(9px); }
.qa-check{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px -12px rgba(255,106,43,0.65);
}
.qa-check svg{ width:26px; height:26px; color:#180b04; }
.qa-done h2{ font-size:clamp(1.6rem, 4vw, 2.1rem); }
.qa-done .lead{ max-width:44ch; text-align:center; margin:0 auto; }

.summary-card{
  width:100%; margin-top:6px; padding:20px 22px; border-radius:20px; text-align:left;
  background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:0 24px 50px -30px rgba(0,0,0,0.7);
}
.summary-row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--border); font-size:0.88rem; }
.summary-row:first-child{ border-top:none; }
.summary-row span:first-child{ color:var(--text-faint); font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto; }
.summary-row span:last-child{ text-align:right; color:var(--text); }

.final-actions{ display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; justify-content:center; }

@media (max-width:640px){
  .ank-shell{ padding:96px 18px 40px; }
  .composer-box{ padding:6px 6px 6px 16px; }
}