/* Import Lexend font */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700&display=swap');

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

.spoiler {
  background: #444;
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.spoiler:hover {
  color: #fff;
  background: #666;
}


body {
  background-color: black;
  color: white;
  font-family: 'Lexend', monospace;
  font-size: 18px;
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#console-output {
  overflow-y: auto;
  flex-grow: 1;
  width: 100%;
  padding: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Lexend', monospace;
}

#prompt {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  width: 100%;
  color: #00ff00;
  font-family: 'Lexend', monospace;
}

.input-text {
  color: white;
  font-family: 'Lexend', monospace;
}

#caret {
  color: #00ff00;
  animation: blink 1s step-end infinite;
  font-weight: bold;
}

#connection-status {
  position: fixed;
  top: 4px;
  right: 8px;
  font-size: 14px;
  font-weight: bold;
}

.status-connected {
  background: linear-gradient(90deg, #00ff00, #00cc66, #00ffcc);
  background-size: 300% 300%;
  animation: gradient-flow 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.status-disconnected {
  background: linear-gradient(90deg, #ff3333, #cc0000, #ff6666);
  background-size: 300% 300%;
  animation: gradient-flow 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.status-rest {
  background: linear-gradient(90deg, #ffd000, #b39200, #464100);
  background-size: 300% 300%;
  animation: gradient-flow 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reusable gradient animation */
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




@keyframes blink {
  50% {
    opacity: 0;
  }
}

.emoji {
  width: 32px;      /* or 14px if you want really small */
  height: 32px;
  vertical-align: text-bottom; /* aligns emoji nicely with text */
  display: inline-block;
}


.command-output {
  color: white;
}

.error-output {
  color: red;
}

.help-output {
  color: #00FFFF;
}

.misc-output {
  color: #9e9e9e;
  opacity: 75%;
}

.misc-urgent-output {
  color: #ff5959;
  opacity: 75%;
}

.theme-default {
  background-color: black;
  color: #fff;
  font-family: 'Lexend', sans-serif;
}

.theme-classic * {
  background-color: black;
  color: #00FF00;
  font-family: 'Courier New', monospace;
}

.theme-light {
  background-color: #F0F0F0;
  color: black;
}

.theme-blue {
  background-color: #1F1F1F;
  color: #1E90FF;
}

.theme-red {
  background-color: #1F1F1F;
  color: #FF4500;
}

.theme-purple {
  background-color: #1F1F1F;
  color: #800080;
}

.theme-green {
  background-color: #003300;
  color: #00FF00;
}

.theme-yellow {
  background-color: #191b00;
  color: #c5e702;
}

.theme-pink {
  background-color: #c70063;
  color: white;
}

.theme-midnight {
  background: linear-gradient(to bottom, #000000, #190057, #100046, #3A006E);
  color: #f5f5f5;
}

.theme-abyss {
  background-color: #020312;
  color: #000237;
}

.theme-sky {
  background-color: #87ceeb;
  color: #f5f5f5;
}

.theme-bloodshed {
  background-color: #313131;
  color: #700505;
}

.theme-autumn {
  background-color: #7b3f00;
  color: #4b2802;
}

.theme-oreo {
  background-color: #000000;
  color: #ffffff;
}

input,
button,
textarea {
  background-color: black;
  color: white;
  border: 1px solid #00FF00;
  outline: none;
  font-family: 'Lexend', monospace;
}

.chat-image {
  max-width: 200px;
  /* never wider than 200px */
  max-height: 200px;
  /* never taller than 200px */
  width: auto;
  /* shrink/grow proportionally */
  height: auto;
  object-fit: contain;
  /* keep aspect ratio inside the box */
  border-radius: 8px;
  /* optional */
  display: block;
  /* so margins apply cleanly */
}

input:focus,
button:focus,
textarea:focus {
  border-color: #00FF00;
}

::selection {
  background-color: #00FF00;
  color: black;
}