client/src/index.css

@import "tailwindcss";

:root {
  --primary: #a855f7;
  --primary-hover: #9333ea;
  --bg: #09090b;
  --surface: #18181b;
  --surface-hover: #27272a;
  --border: #3f3f46;
  --text: #fafafa;
  --text-secondary: #a1a1aa;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  /* Block only horizontal overflow. The Room view locks itself to 100dvh with
     its own internal scroll regions; the Landing view scrolls normally so its
     form is never clipped on short / landscape phones. */
  overflow-x: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.typing-dot {
  animation: pulse-dot 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.animate-slide-in {
  animation: slideIn 0.2s ease-out;
}