:root {
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bubble-user: linear-gradient(135deg, #f43f5e, #ec4899);
  --bubble-gf: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  overflow: hidden;
}

textarea {
  font: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Scrollbar */
#messagesArea::-webkit-scrollbar {
  width: 4px;
}
#messagesArea::-webkit-scrollbar-track {
  background: transparent;
}
#messagesArea::-webkit-scrollbar-thumb {
  background: rgba(244, 63, 94, 0.3);
  border-radius: 2px;
}

/* Message animations */
@keyframes slideInUser {
  from { opacity: 0; transform: translateY(10px) translateX(10px); }
  to { opacity: 1; transform: translateY(0) translateX(0); }
}
@keyframes slideInGf {
  from { opacity: 0; transform: translateY(10px) translateX(-10px); }
  to { opacity: 1; transform: translateY(0) translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.msg-user {
  animation: slideInUser 0.3s ease-out;
}
.msg-gf {
  animation: slideInGf 0.3s ease-out;
}

/* Typing indicator */
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}
.typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(251, 113, 133, 0.7);
  animation: dotBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Toast */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}

.toast-enter {
  animation: toastIn 0.3s ease-out;
}
.toast-exit {
  animation: toastOut 0.3s ease-in forwards;
}

/* Textarea auto-grow */
textarea {
  max-height: 120px;
  field-sizing: content;
}

/* Pulse on voice playing */
@keyframes voicePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.voice-playing {
  animation: voicePulse 0.8s ease-in-out infinite;
}

/* Mobile keyboard fix */
@supports (height: 100dvh) {
  body { height: 100dvh; }
  #app { height: 100dvh; }
}