/* Extra styles beyond Tailwind */

/* Smooth height transitions on textarea */
#msg-input { transition: height 0.1s ease; }

/* Message bubbles */
.msg-bubble { animation: fadeInUp 0.15s ease; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chat list active item */
.chat-item.active { background: #f0fdf4; border-left: 4px solid #22c55e; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }

/* Pulse animation for recording */
@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.animate-pulse { animation: pulse-red 1s ease-in-out infinite; }

/* Avatar colors – cycle through palette */
.avatar:nth-child(odd)  { background-color: #818cf8; }
.avatar:nth-child(even) { background-color: #f472b6; }

/* Mobile: hide sidebar when chat is open */
@media (max-width: 767px) {
  #app { position: relative; }
}

/* ── PWA / safe-area (iPhone notch, Dynamic Island, home bar) ── */
#app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent layout shift on iOS when keyboard opens */
@supports (-webkit-touch-callout: none) {
  #messages-container { padding-bottom: env(safe-area-inset-bottom); }
}

/* Full-height on iOS standalone (avoids 100vh quirk) */
@supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
}

/* Typing indicator dots */
.typing-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

/* iOS auto-zooms on inputs smaller than 16px — prevent by enforcing 16px */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; }
}