/*
 * Bloger — Chat & UI animations
 */

/* =============================================
   1. Message appear (fade-in + slide-up)
   ============================================= */
@keyframes msg-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.msg-appear {
  animation: msg-appear 0.35s ease-out both;
}

/* =============================================
   2. Thinking dots (v0-style bouncing)
   ============================================= */
@keyframes thinking-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.thinking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #f97316;
  display: inline-block;
  animation: thinking-bounce 1.2s ease-in-out infinite;
}

.thinking-dot:nth-child(1) { animation-delay: 0ms; }
.thinking-dot:nth-child(2) { animation-delay: 150ms; }
.thinking-dot:nth-child(3) { animation-delay: 300ms; }

/* =============================================
   3. Streaming cursor blink
   ============================================= */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: #f97316;
  border-radius: 1px;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.8s ease-in-out infinite;
}

/* Streaming text chunks fade in */
#streaming-content > span {
  animation: msg-appear 0.15s ease-out both;
}

/* =============================================
   4. Preview column slide-in
   ============================================= */
@keyframes preview-slide-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 768px) {
  .preview-enter {
    animation: preview-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* =============================================
   5. Chat column squeeze (100% → 50%)
   ============================================= */
@keyframes chat-squeeze {
  from {
    width: 100%;
  }
  to {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .chat-squeeze {
    animation: chat-squeeze 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* =============================================
   6. Chip appear (staggered pop-in)
   ============================================= */
@keyframes chip-pop {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.chip-appear {
  animation: chip-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger chips */
.chip-appear:nth-child(1) { animation-delay: 0ms; }
.chip-appear:nth-child(2) { animation-delay: 80ms; }
.chip-appear:nth-child(3) { animation-delay: 160ms; }
.chip-appear:nth-child(4) { animation-delay: 240ms; }

/* =============================================
   7. Thinking indicator appear
   ============================================= */
@keyframes thinking-appear {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.thinking-appear {
  animation: thinking-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =============================================
   8. Streaming bubble appear
   ============================================= */
@keyframes bubble-appear {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bubble-appear {
  animation: bubble-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =============================================
   9. Welcome screen fade
   ============================================= */
@keyframes welcome-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-appear {
  animation: welcome-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =============================================
   10. View Transitions (browser-native)
   ============================================= */
::view-transition-old(chat-column),
::view-transition-new(chat-column) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(preview-column),
::view-transition-new(preview-column) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================
   11. Timestamp fade-in
   ============================================= */
.msg-appear .text-\[11px\] {
  animation: msg-appear 0.3s ease-out 0.15s both;
}