/* purple-Screen Neomorphic Theme */
body {
  background-color: #111111; /* Terminal black background */
  color: #a43bde; /* Terminal purple text */
  border-color: #a43bde;
  margin: 0;
  font-family: "Courier New", Courier, monospace; /* Terminal font */
}

.neumorphic {
  background: #000000; /* Black terminal background */
  border-radius: 15px;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border for unselected */
  box-shadow:
    10px 10px 20px rgba(126, 45, 171, 0.3),
    -10px -10px 20px rgba(0, 0, 0, 0.3);
}

.neumorphic:focus {
  border-color: #a43bde; /* Bright purple border when focused */
  outline: none; /* Remove default outline */
}

.neumorphic-button {
  background-color: #000000;
  color: #a43bde;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border for unselected */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 10px;
  box-shadow:
    10px 10px 20px rgba(126, 45, 171, 0.3),
    -10px -10px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.neumorphic-button:hover,
.neumorphic-button.active {
  background-color: #000000;
  border-color: #a43bde; /* Bright purple border for active/selected */
  box-shadow:
    10px 10px 30px rgba(126, 45, 171, 0.5),
    -10px -10px 30px rgba(0, 0, 0, 0.5);
}

.neumorphic-input {
  background-color: #000000;
  color: #a43bde;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border for unselected */
  padding: 15px;
  border-radius: 10px;
  box-shadow:
    10px 10px 20px rgba(126, 45, 171, 0.3),
    -10px -10px 20px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  width: 100%;
  font-family: "Courier New", Courier, monospace;
  transition: border-color 0.3s;
}

.neumorphic-input:focus,
.neumorphic-input:active {
  border-color: #a43bde; /* Bright purple border when focused */
  outline: none; /* Remove default outline */
}

.neumorphic-input::placeholder {
  color: #a43bde;
}

.tab-content {
  display: none;
  height: calc(100vh - 70px); /* Full screen minus space for navigation */
  padding: 0;
  margin: 0;
  overflow-y: auto;
  background-color: #111111; /* purple-screen background */
  font-family: "Courier New", Courier, monospace;
}

.tab-content.active {
  display: block;
  border-color: #a43bde;
}

.full-screen {
  width: 100%;
  height: 100%;
}

/* Bottom navigation bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #000000;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(126, 45, 171, 0.5);
}

.bottom-nav button {
  background-color: #000000;
  color: #a43bde;
  padding: 10px;
  font-size: 16px;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border */
  border-radius: 10px;
  flex-grow: 1;
  box-shadow:
    5px 5px 15px rgba(126, 45, 171, 0.3),
    -5px -5px 15px rgba(0, 0, 0, 0.2);
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.bottom-nav button.active {
  background-color: #a43bde;
  color: #000000;
  border-color: #a43bde; /* Bright purple border for selected */
}

.bottom-nav button:hover {
  border-color: #a43bde; /* Bright purple border on hover */
}

/* Floating Pop-out Button */
.floating-popout-button {
  position: fixed;
  bottom: 120px; /* 50px above the navigation */
  right: 15px;
  background-color: #000000;
  color: #a43bde;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border */
  padding: 15px;
  border-radius: 50%;
  box-shadow:
    5px 5px 15px rgba(126, 45, 171, 0.3),
    -5px -5px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 20px;
  transition: border-color 0.3s ease;
}

.floating-popout-button:hover {
  border-color: #a43bde; /* Bright purple border on hover */
}

/* Full-width conversation bubbles */
.message-bubble {
  background-color: #000000;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  width: 100%;
  color: #a43bde;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border */
  box-shadow:
    5px 5px 15px rgba(126, 45, 171, 0.3),
    -5px -5px 15px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease;
  font-family: "Courier New", Courier, monospace;
}

.message-bubble.message-left,
.message-bubble.message-right {
  font-family: "Courier New", Courier, monospace;
}

.message-bubble:hover {
  border-color: #a43bde; /* Bright purple border on hover */
}

.message-bubble:active {
  border-color: #a43bde; /* Bright purple border when focused */
  outline: none; /* Remove default outline */
}

/* purple terminal styling for code */
pre {
  background-color: #111111;
  color: #a43bde;
  padding: 15px;
  border-radius: 8px;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border */
  font-family: "Courier New", Courier, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow:
    5px 5px 15px rgba(126, 45, 171, 0.3),
    -5px -5px 15px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease;
}

pre:hover {
  border-color: #a43bde; /* Bright purple border on hover */
}

pre:active {
  border-color: #a43bde; /* Bright purple border when focused */
  outline: none; /* Remove default outline */
}

/* Full-screen preview with white background */
#previewPane {
  background-color: #000000;
  width: 100%;
  height: 100vh;
  border: none;
  overflow-x: hidden; /* Remove horizontal scroll */
  border-radius: 0; /* Remove rounded corners */
  font-family: "Courier New", Courier, monospace;
}

/* Facebook and Twitter share buttons */
.social-share {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.play-button {
  background-color: #000000;
  color: #a43bde;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border for unselected */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 10px;
  box-shadow:
    10px 10px 20px rgba(126, 45, 171, 0.3),
    -10px -10px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.play-button:hover,
.play-button.active {
  background-color: #000000;
  border-color: #a43bde; /* Bright purple border for active/selected */
  box-shadow:
    10px 10px 30px rgba(126, 45, 171, 0.5),
    -10px -10px 30px rgba(0, 0, 0, 0.5);
}

.social-share a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #a43bde;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(126, 45, 171, 0.3); /* Light purple border */
  box-shadow:
    5px 5px 15px rgba(126, 45, 171, 0.3),
    -5px -5px 15px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  font-size: 24px;
  transition: border-color 0.3s ease;
}

.social-share a:hover {
  border-color: #a43bde; /* Bright purple border on hover */
  background-color: #ed41ff;
  color: #000000;
}

/* Spinner and text styling */
#spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none;
  flex-direction: column;
}

#spinner {
  border: 4px solid rgba(126, 45, 171, 0.3);
  border-radius: 50%;
  border-top: 4px solid #a43bde;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

#timer,
#charCount {
  margin-top: 10px;
  font-size: 18px;
  color: #a43bde;
  display: none; /* Initially hidden */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Icons for Facebook and Twitter */
.facebook-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M22.675 0H1.325C.595 0 0 .588 0 1.318v21.363C0 23.41.595 24 1.325 24H12.82v-9.294H9.692V11.09h3.128V8.413c0-3.1 1.892-4.788 4.656-4.788 1.324 0 2.464.098 2.796.143v3.24l-1.917.001c-1.504 0-1.795.715-1.795 1.763v2.309h3.59l-.467 3.615h-3.123V24h6.116c.73 0 1.325-.59 1.325-1.319V1.318C24 .588 23.405 0 22.675 0z%22/%3E%3C/svg%3E")
    no-repeat center;
  filter: invert(22%) sepia(87%) saturate(4514%) hue-rotate(269deg)
    brightness(89%) contrast(94%);
  width: 20px; /* 50% smaller */
  height: 20px; /* 50% smaller */
  border-radius: 50%; /* Make it round */
  background-size: contain;
}

.twitter-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M23.954 4.569c-.885.392-1.83.656-2.825.775 1.014-.611 1.794-1.574 2.163-2.724-.949.564-2.005.974-3.127 1.195-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124-4.087-.205-7.713-2.165-10.141-5.144-.423.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.099-.807-.026-1.566-.248-2.229-.616v.062c0 2.385 1.697 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.6 3.419-1.68 1.319-3.809 2.104-6.102 2.104-.39 0-.779-.023-1.17-.069 2.179 1.397 4.768 2.211 7.557 2.211 9.054 0 14.004-7.496 14.004-13.986 0-.21 0-.423-.015-.635.961-.689 1.8-1.56 2.457-2.548l-.047-.02z%22/%3E%3C/svg%3E")
    no-repeat center;
  filter: invert(22%) sepia(87%) saturate(4514%) hue-rotate(269deg)
    brightness(89%) contrast(94%);
  width: 20px; /* 50% smaller */
  height: 20px; /* 50% smaller */
  border-radius: 50%; /* Make it round */
  background-size: contain;
}