.story-page--chat-v2{
  --chat-line:rgba(255,255,255,.12);
  --chat-panel:rgba(13,14,39,.88);
  --chat-agent:rgba(38,35,70,.92);
  --chat-muted:#bcb7cc;
  background:
    radial-gradient(900px 520px at 10% 8%,rgba(106,54,205,.22),transparent 68%),
    radial-gradient(760px 480px at 92% 18%,rgba(255,101,129,.14),transparent 70%),
    linear-gradient(155deg,#020715 0%,#090820 56%,#14091d 100%);
}

.story-page--chat-v2 .form-shell{
  width:min(calc(100% - 48px),1460px)!important;
  padding-bottom:42px;
}

.story-page--chat-v2 .form-top{
  margin-bottom:24px;
}

.form-card--chat{
  width:980px;
  max-width:100%;
  justify-self:center;
  margin:0 auto;
  padding:0;
  overflow:visible;
  border-color:rgba(189,112,255,.24);
  border-radius:8px;
  background:linear-gradient(155deg,rgba(19,20,50,.97),rgba(9,10,30,.96));
  box-shadow:0 32px 90px rgba(0,0,0,.36);
  backdrop-filter:blur(20px);
}

.chat-agent-head{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:14px;
  min-height:82px;
  padding:14px 20px;
  border-bottom:1px solid var(--chat-line);
  background:rgba(255,255,255,.025);
}

.chat-agent-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,168,112,.4);
  border-radius:50%;
  color:#ffd4a9;
  background:linear-gradient(145deg,rgba(202,65,255,.24),rgba(255,131,74,.18));
  box-shadow:0 0 26px rgba(255,100,183,.16);
  font-size:1.35rem;
}

.chat-agent-copy{display:grid;gap:3px;min-width:0}
.chat-agent-copy strong{font-size:1.02rem;color:#fff}
.chat-agent-copy span{display:flex;align-items:center;gap:7px;color:var(--chat-muted);font-size:.83rem}
.chat-agent-copy i{width:7px;height:7px;border-radius:50%;background:#63e6a5;box-shadow:0 0 12px rgba(99,230,165,.65)}
.chat-agent-step{padding:8px 11px;border:1px solid var(--chat-line);border-radius:999px;color:#d8d2e3;font-size:.78rem;font-weight:800;white-space:nowrap}

.chat-welcome{
  width:min(76%,660px);
  margin:28px 28px 10px;
  padding:20px 22px;
  border:1px solid var(--chat-line);
  border-radius:8px 8px 8px 2px;
  background:var(--chat-agent);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.chat-welcome h1{margin:0;color:#fff;font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.18}
.chat-welcome p{margin:9px 0 0;color:var(--chat-muted);line-height:1.55}

.form-card--chat .progress-line{
  height:5px;
  margin:22px 28px 10px;
  background:rgba(255,255,255,.07);
}

.form-card--chat .story-form{padding:14px 28px 28px}

.chat-history{display:grid;gap:12px;margin-bottom:22px}
.chat-history__title{margin:0;color:#bfa9d8;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.chat-history__turns{display:grid;gap:14px}
.chat-history__archive{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:12px}
.chat-history__archive summary{width:max-content;max-width:100%;cursor:pointer;color:#c9c1d5;font-size:.83rem;font-weight:800}
.chat-history__archive[open] summary{margin-bottom:14px;color:#fff}
.chat-turn{display:grid;gap:8px}
.chat-bubble{margin:0;padding:13px 15px;line-height:1.46}
.chat-bubble--agent{justify-self:start;max-width:72%;border:1px solid var(--chat-line);border-radius:8px 8px 8px 2px;background:var(--chat-agent);color:#e9e5f0}
.chat-bubble--user{justify-self:end;max-width:70%;border:1px solid rgba(255,121,201,.28);border-radius:8px 8px 2px 8px;background:linear-gradient(135deg,rgba(183,59,246,.24),rgba(255,105,117,.18));color:#fff;font-weight:750}
.chat-bubble--user span{display:block;margin-bottom:3px;color:#ff9ed7;font-size:.68rem;font-weight:900;text-transform:uppercase}

.wizard--chat{display:grid;gap:18px}
.wizard--chat .wizstep{gap:18px}
.wizard--chat .field{gap:10px;transition:opacity .24s ease,transform .24s ease}
.wizard--chat .field__prompt{
  justify-self:start;
  width:min(76%,680px);
  padding:17px 19px;
  border:1px solid var(--chat-line);
  border-radius:8px 8px 8px 2px;
  background:var(--chat-agent);
  box-shadow:0 12px 26px rgba(0,0,0,.13);
}
.wizard--chat .field__label{font-size:1.05rem;line-height:1.42}
.wizard--chat .field__hint{color:var(--chat-muted);font-size:.9rem}
.wizard--chat .field__input,
.wizard--chat .ac-wrap{
  justify-self:end;
  width:min(72%,620px);
}
.wizard--chat .field__input{
  min-height:56px;
  border-radius:8px 8px 2px 8px;
  border-color:rgba(255,122,202,.28);
  background:linear-gradient(135deg,rgba(147,63,218,.15),rgba(255,107,122,.1));
}
.wizard--chat .ac-wrap .field__input{width:100%}
.wizard--chat .ac-list{border-radius:8px;background:#17142f}

.chat-typing{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-self:start;
  min-height:38px;
  padding:9px 13px;
  color:#afa8be;
  font-size:.78rem;
}
.chat-typing i{display:inline-flex;gap:4px}
.chat-typing i span{width:5px;height:5px;border-radius:50%;background:#d98bff;animation:chat-dot 1s ease-in-out infinite}
.chat-typing i span:nth-child(2){animation-delay:.12s}.chat-typing i span:nth-child(3){animation-delay:.24s}
@keyframes chat-dot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-4px);opacity:1}}

.chat-enhanced .wizard--chat .field{opacity:0;transform:translateY(8px);pointer-events:none}
.chat-enhanced .wizard--chat .field.chat-field--active,
.chat-enhanced .wizard--chat .field.chat-field--done{opacity:1;transform:none;pointer-events:auto}
.chat-enhanced .wizard--chat .field__input,
.chat-enhanced .wizard--chat .ac-wrap{opacity:0;transform:translateY(5px);transition:opacity .2s ease,transform .2s ease}
.chat-enhanced .wizard--chat .field.chat-field--ready .field__input,
.chat-enhanced .wizard--chat .field.chat-field--ready .ac-wrap{opacity:1;transform:none}

.form-card--chat .actions{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07)}
.form-card--chat .actions .btn{min-width:210px;border-radius:8px}
.form-card--chat .actions .btn::after{content:"  →"}
.form-card--chat .teaser-card{
  width:min(88%,760px);
  justify-self:start;
  border-radius:8px 8px 8px 2px;
  background:linear-gradient(145deg,rgba(76,43,104,.88),rgba(37,29,62,.92));
}
.form-card--chat .teaser-clues p{border-radius:8px}
.form-card--chat .teaser-actions .btn{
  border-radius:8px;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.055);
  color:#fff;
}
.form-card--chat .teaser-actions .btn:hover,
.form-card--chat .teaser-actions .btn:focus-visible{border-color:rgba(255,132,211,.48);background:rgba(255,132,211,.1)}

.chat-outgoing{animation:chat-outgoing .24s ease both}
@keyframes chat-outgoing{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:720px){
  .story-page--chat-v2 .form-shell{width:calc(100% - 28px)!important;padding-bottom:26px}
  .story-page--chat-v2 .form-top{width:100%;margin:10px 0 16px}
  .form-card--chat{border-radius:8px}
  .chat-agent-head{grid-template-columns:44px 1fr auto;gap:10px;min-height:70px;padding:11px 12px}
  .chat-agent-avatar{width:44px;height:44px;font-size:1.05rem}
  .chat-agent-step{max-width:84px;padding:7px 8px;overflow:hidden;text-overflow:ellipsis;font-size:.68rem}
  .chat-welcome{width:calc(100% - 28px);margin:18px 14px 6px;padding:16px}
  .chat-welcome h1{font-size:1.25rem}
  .chat-welcome p{font-size:.88rem}
  .form-card--chat .progress-line{margin:18px 14px 7px}
  .form-card--chat .story-form{padding:12px 14px 18px}
  .chat-bubble--agent,.chat-bubble--user{max-width:88%;font-size:.88rem}
  .wizard--chat .field__prompt{width:90%;padding:15px}
  .wizard--chat .field__label{font-size:.98rem}
  .wizard--chat .field__hint{font-size:.83rem}
  .wizard--chat .field__input,.wizard--chat .ac-wrap{width:88%}
  .form-card--chat .teaser-card{width:94%;padding:18px}
  .form-card--chat .actions{justify-content:stretch}
  .form-card--chat .actions .btn{width:100%;min-width:0}
}

@media(prefers-reduced-motion:reduce){
  .chat-typing i span{animation:none}
  .chat-enhanced .wizard--chat .field,
  .chat-enhanced .wizard--chat .field__input,
  .chat-enhanced .wizard--chat .ac-wrap{transition:none}
}