:root {
  --navy: #1a2744;
  --navy-light: #243358;
  --gold: #c9a84c;
  --white: #ffffff;
  --grey-50: #f8f8f8;
  --grey-100: #f0f0f0;
  --grey-200: #e0e0e0;
  --grey-400: #9ca3af;
  --grey-600: #4b5563;
  --charcoal: #2d2d2d;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f8f8f8;
  color: #2d2d2d;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, textarea, input {
  font-family: inherit;
}

a {
  text-decoration: none;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.typing-dot:nth-child(1) { animation: blink 1.4s infinite 0s; }
.typing-dot:nth-child(2) { animation: blink 1.4s infinite 0.2s; }
.typing-dot:nth-child(3) { animation: blink 1.4s infinite 0.4s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-otto, .msg-user { animation: fadeUp 0.2s ease-out; }