/* Minimal custom CSS - Tailwind handles most styling */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Toast animation */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* Custom scrollbar for chat - Minecraft style */
.chat-messages::-webkit-scrollbar {
  width: 10px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.6);
  border-radius: 2px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.8);
}

/* Chat message styling - Minecraft console style */
.chat-message {
  padding: 4px 0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Chat message types */
.chat-message.system {
  color: #aaaaaa;
}

.chat-message.error {
  color: #ff5555;
}

.chat-message.success {
  color: #55ff55;
}

.chat-message.info {
  color: #55ffff;
}

.chat-message.warning {
  color: #ffff55;
}

/* Action bar styling - Minecraft HUD style */
#actionBar {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
}

/* Smooth transitions */
button, input, .card {
  transition: all 0.2s ease;
}

/* Enter key hint animation */
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.chat-messages:empty::before {
  content: "No messages yet. Waiting for server data...";
  display: block;
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 20px;
}
