:root{
  --bg:#0b0e12;
  --surface:#11151b;
  --card:#181d25;
  --card-line:#262d38;
  --text:#e9edf2;
  --muted:#8b95a4;
  --line:#1f2630;
  --doc:#43d39e;
  --doc-bg:#14241e;
  --doc-line:#1e3d31;
  --verified:#3b9cf5;
  --accent:#f7a21b;
  --accent-2:#f57c00;
  --user-bg:#251d13;
  --user-line:#45331a;
  --live:#e5322d;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Nunito Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5;
  display:flex; justify-content:center;
}
.chat{
  width:100%; max-width:760px; height:100%;
  display:flex; flex-direction:column; background:var(--surface);
}

/* header */
header{
  flex-shrink:0; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:12px 16px;
}
.avatar{
  position:relative; width:48px; height:48px; flex-shrink:0;
  border-radius:50%; background:var(--card);
}
.avatar svg,.avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.avatar::after{
  content:""; position:absolute; right:0; bottom:1px; width:12px; height:12px;
  border-radius:50%; background:var(--doc); border:2px solid var(--surface);
}
.who{flex:1; min-width:0}
.who b{display:flex; align-items:center; gap:6px; font-size:17px; font-weight:800}
.who small{font-size:13px; color:var(--muted)}
.check{width:15px; height:15px; flex-shrink:0}
.status{
  display:flex; align-items:center; gap:7px;
  background:var(--live); color:#fff; font-size:12px; font-weight:900; letter-spacing:1px;
  padding:6px 12px; border-radius:6px;
}
.status::before{content:""; width:8px; height:8px; border-radius:50%; background:#ffb3b0; animation:blinkdot 1.4s infinite !important}

.section{
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  font-size:13px; font-weight:800; letter-spacing:2px; color:var(--muted);
}
.section::before{content:""; width:8px; height:8px; border-radius:50%; background:#5a1e1e}

/* feed */
.feed{flex:1; overflow-y:auto; padding:18px 16px 28px}
.pill{
  display:table; margin:2px auto 18px; padding:3px 12px;
  font-size:12px; font-weight:700; color:var(--muted);
  background:var(--card); border:1px solid var(--card-line); border-radius:999px;
}
.progress{display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--muted); font-size:12px; font-weight:700}
.progress .bar{flex:1; height:4px; background:var(--card); border-radius:2px; overflow:hidden}
.progress .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .6s ease}

.row{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; animation:in .3s ease-out}
.row .mini{width:44px; height:44px; border-radius:50%; flex-shrink:0; overflow:hidden; background:var(--card)}
.row .mini svg,.row .mini img{width:100%; height:100%; object-fit:cover; display:block}
.bubble{
  max-width:86%; background:var(--doc-bg); border:1px solid var(--doc-line);
  padding:10px 16px 12px; border-radius:12px;
}
.bubble .name{display:flex; align-items:center; gap:6px; font-weight:800; font-size:15px; color:var(--doc); margin-bottom:2px}
.bubble p{margin:0 0 6px}
.bubble p:last-child{margin-bottom:0}
.bubble strong{font-weight:800}

/* typing indicator — dots jump upward */
.typing{display:flex; align-items:center; gap:6px; padding:6px 0 4px; min-height:24px}
.typing span{
  display:block; width:9px; height:9px; border-radius:50%;
  background:var(--doc); opacity:.35;
  animation:jump 1s infinite ease-in-out !important;
  animation-iteration-count:infinite !important;
  animation-duration:1s !important;
}
.typing span:nth-child(2){animation-delay:.16s !important}
.typing span:nth-child(3){animation-delay:.32s !important}

/* user */
.urow{display:flex; gap:12px; justify-content:flex-end; align-items:flex-start; margin:4px 0 18px; animation:in .25s ease-out}
.user{
  max-width:78%; background:var(--user-bg); border:1px solid var(--user-line);
  padding:10px 16px 12px; border-radius:12px;
}
.user .name{font-weight:800; font-size:15px; color:var(--accent); margin-bottom:2px}
.uava{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:#6fdcb6; color:#0b0e12; font-weight:900; display:grid; place-items:center;
}

/* answer options */
.options{display:flex; flex-direction:column; gap:10px; width:min(100%,540px); margin:6px 0 14px auto}
.opt{
  font:inherit; font-size:15px; text-align:left; cursor:pointer;
  background:var(--card); color:var(--text);
  border:1px solid var(--card-line); border-radius:12px;
  padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  opacity:0; animation:in .3s ease-out forwards;
  transition:border-color .15s, background .15s, transform .15s;
}
.opt::after{
  content:""; width:8px; height:8px; flex-shrink:0;
  border-right:2px solid var(--accent); border-top:2px solid var(--accent);
  transform:rotate(45deg);
}
.opt:hover{border-color:var(--accent); background:#1f2129; transform:translateX(-2px)}
.opt:focus-visible,.cta:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.opt.start{align-self:flex-end; font-weight:800; color:var(--accent)}

.cta{
  display:flex; justify-content:center; align-items:center;
  margin:10px 0 12px; padding:17px 20px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#111; text-decoration:none; font-weight:900; font-size:17px; letter-spacing:.6px;
  border-radius:999px; animation:in .35s ease-out, glow 2.2s .8s infinite;
}
.cta:hover{filter:brightness(1.08)}

@keyframes in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes jump{0%,60%,100%{transform:translateY(0); opacity:.35} 30%{transform:translateY(-8px); opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(247,162,27,.5)} 60%{box-shadow:0 0 0 12px rgba(247,162,27,0)}}
@keyframes blinkdot{0%,100%{opacity:1} 50%{opacity:.25}}

@media (max-width:480px){
  .feed{padding:14px 10px 22px}
  .options{width:100%}
  .row .mini,.uava{width:38px; height:38px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition:none!important}
  .opt{opacity:1}
}