/* Reset and base styles */
* {
  box-sizing: border-box;
}

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

body {
  background: #000;
  color: #0f0;
}

/* Terminal container */
#terminal {
  height: calc(100% - 24px);
  width: 100%;
}

/* Status bar (tmux-style) */
#statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: #1a1a2e;
  color: #00ff00;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  border-top: 1px solid #333;
}

#statusbar .status-room {
  color: #ffff00;
  font-weight: bold;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statusbar .status-sep {
  color: #444;
}

#statusbar .status-score {
  color: #00ffff;
}

#statusbar .status-users {
  color: #00ff00;
}

#statusbar .status-audio {
  color: #ff00ff;
  animation: pulse 1s infinite;
}

#statusbar .status-time {
  margin-left: auto;
  color: #888;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hidden {
  display: none !important;
}

/* Terminal customization */
.terminal {
  --background: #0a0a0a;
  --color: #00ff00;
  --font: 'Courier New', Courier, monospace;
  --size: 16px;
  --animation: terminal-blink;
}

.terminal .terminal-output {
  padding: 10px;
}

/* Room theme support - these get dynamically updated */
.terminal.themed {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Prompt styling */
.terminal .cmd .prompt {
  color: #00ffff;
}

/* Command input */
.terminal .cmd .cursor {
  background-color: #00ff00;
}

/* Links in terminal */
.terminal a {
  color: #ffff00;
  text-decoration: underline;
}

.terminal a:hover {
  color: #ffffff;
}

/* System messages */
.terminal .system-message {
  color: #888;
  font-style: italic;
}

/* Presence messages */
.terminal .presence-enter {
  color: #00ff00;
}

.terminal .presence-leave {
  color: #ff6600;
}

/* Chat messages */
.terminal .chat-username {
  color: #00ffff;
  font-weight: bold;
}

.terminal .chat-message {
  color: #ffffff;
}

/* Error messages */
.terminal .error {
  color: #ff4444;
}

/* Room description */
.terminal .room-name {
  color: #ffff00;
  font-weight: bold;
  font-size: 1.1em;
}

.terminal .room-description {
  color: #cccccc;
  margin: 10px 0;
}

.terminal .room-exits {
  color: #00ffff;
}

.terminal .room-items {
  color: #ff00ff;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .terminal {
    --size: 14px;
  }

  .terminal .terminal-output {
    padding: 5px;
  }
}

/* Welcome banner */
.terminal .banner {
  color: #00ff00;
  white-space: pre;
  font-family: monospace;
}

/* CRT effects (optional) */
body.crt-enabled {
  overflow: hidden;
}

body.crt-enabled::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    transparent 50%,
    rgba(0, 0, 0, 0.1) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 9999;
}

body.crt-enabled::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

body.crt-enabled #terminal {
  text-shadow: 0 0 2px currentColor;
}

/* Flicker animation for CRT */
@keyframes flicker {
  0% { opacity: 0.97; }
  5% { opacity: 0.95; }
  10% { opacity: 0.97; }
  15% { opacity: 0.94; }
  20% { opacity: 0.98; }
  25% { opacity: 0.96; }
  30% { opacity: 0.97; }
  35% { opacity: 0.95; }
  40% { opacity: 0.98; }
  45% { opacity: 0.96; }
  50% { opacity: 0.97; }
  55% { opacity: 0.95; }
  60% { opacity: 0.98; }
  65% { opacity: 0.96; }
  70% { opacity: 0.97; }
  75% { opacity: 0.94; }
  80% { opacity: 0.98; }
  85% { opacity: 0.96; }
  90% { opacity: 0.97; }
  95% { opacity: 0.95; }
  100% { opacity: 0.98; }
}

body.crt-enabled .terminal {
  animation: flicker 0.15s infinite;
}