:root { --bg:#0b0b0c; --card:#16161a; --text:#eaeaea; --muted:#9aa0a6; --accent:#4b9cff; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
#app { max-width:720px; margin:0 auto; padding:16px; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
h1 { font-size:18px; margin:0; }
#finishBtn { background:#2a2a2e; border:1px solid #333; color:var(--text); border-radius:10px; padding:8px 12px; cursor:pointer; }
#chat { background:var(--card); border:1px solid #2a2a2e; border-radius:14px; min-height:300px; padding:12px; overflow:auto; }
.bubble { max-width:80%; padding:10px 12px; border-radius:14px; margin:8px 0; white-space:pre-wrap; word-wrap:break-word; }
.bubble.user { background:#233; margin-left:auto; border-top-right-radius:4px; }
.bubble.assistant { background:#1f1f25; margin-right:auto; border-top-left-radius:4px; }
form { display:flex; gap:8px; margin-top:8px; }
#input { flex:1; resize:vertical; min-height:44px; background:#15151a; color:var(--text); border:1px solid #2a2a2e; border-radius:10px; padding:10px; }
#sendBtn { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:10px 16px; cursor:pointer; }
#sendBtn:disabled, #input:disabled { opacity:0.6; cursor:not-allowed; }

/* Typing indicator */
.bubble.typing { opacity: 0.8; }
.bubble.typing .dots {
  display: inline-flex;
  gap: 4px;
  font-weight: 600;
  letter-spacing: 2px;
}
.bubble.typing .dots span {
  display: inline-block;
  animation: blink 1.2s infinite;
}
.bubble.typing .dots span:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0% { opacity: 0.2; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-1px); }
  60% { opacity: 0.2; transform: translateY(0); }
  100% { opacity: 0.2; transform: translateY(0); }
}

/* Typing indicator - equalizer wave */
.bubble.typing {
  opacity: 0.9;
  background: #1b1b21;
  display: flex;
  align-items: center;
}
.typing-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.typing-wrap .hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  user-select: none;
}

/* 5 animated bars */
.bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 16px;           /* container height */
}
.bars span {
  display: inline-block;
  width: 4px;
  height: 6px;            /* min height */
  background: currentColor;
  border-radius: 2px;
  opacity: 0.85;
  animation: barPulse 1000ms ease-in-out infinite;
  transform-origin: center bottom;
}

/* staggered delays so it "waves" */
.bars span:nth-child(1) { animation-delay: 0ms; }
.bars span:nth-child(2) { animation-delay: 100ms; }
.bars span:nth-child(3) { animation-delay: 200ms; }
.bars span:nth-child(4) { animation-delay: 300ms; }
.bars span:nth-child(5) { animation-delay: 400ms; }

@keyframes barPulse {
  0%   { height: 6px;   opacity: 0.5; transform: translateY(0) scaleY(1); }
  25%  { height: 16px;  opacity: 1;   transform: translateY(-1px) scaleY(1.2); }
  50%  { height: 10px;  opacity: 0.8; transform: translateY(0) scaleY(0.9); }
  75%  { height: 14px;  opacity: 0.95;transform: translateY(-0.5px) scaleY(1.1); }
  100% { height: 6px;   opacity: 0.5; transform: translateY(0) scaleY(1); }
}

#chat {
  max-height: 500px;   /* or 100% of iframe height minus input area */
  overflow-y: auto;
}