/* 작성중 표시: 높이를 미리 확보해서 나타나도 화면이 들썩이지 않는다 */
.typing {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 24px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  pointer-events: none;
}
.typing.on { opacity: 1; transform: none; }

.typing-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 통통 튀는 젤리 점 3개 */
.dots { display: flex; gap: 5px; align-items: flex-end; height: 14px; flex: none; }
.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, #fff, var(--c) 60%);
  animation: dotBounce 1.1s ease-in-out infinite;
}
.dots i:nth-child(1) { --c: var(--jelly-green); }
.dots i:nth-child(2) { --c: var(--jelly-blue); animation-delay: 0.15s; }
.dots i:nth-child(3) { --c: var(--jelly-pink); animation-delay: 0.3s; }

@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-8px) scale(0.92, 1.1); }
  45% { transform: translateY(0) scale(1.15, 0.85); }
}