.irc-log {
  display: flex;
}

.log-content {
  flex: 3;
  padding-left: 10px;
}

pre {
  white-space: pre-wrap; /* Ensures text wraps but preserves newlines and spaces */
  word-wrap: break-word; /* Ensures long words break to avoid overflow */
  /* width: 100%; */ /* Removed to allow flex layout */
  overflow: auto; /* Allows scrolling if content overflows */
}

.content-layout {
  display: flex; /* Arrange children side-by-side */
  gap: 15px; /* Add space between main content and sidebar */
}

.main-content {
  flex-grow: 1; /* Allow main content to take available space */
  min-width: 500px; /* Ensure tabs have enough space */
}

.sidebar-panel {
  width: 300px; /* Fixed width for the sidebar */
  border: 1px solid #888; /* Add a border */
  padding: 10px;
  height: fit-content; /* Adjust height based on content */
}

.sidebar-panel h4 {
  margin-top: 15px;
  margin-bottom: 5px;
  border-bottom: 1px solid #888;
  padding-bottom: 3px;
  font-weight: bold;
}
.sidebar-panel h4:first-of-type {
  margin-top: 0;
}

.sidebar-panel p {
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.scrolling-numbers {
  height: 20px; /* Fixed height */
  overflow: hidden; /* Hide overflowing numbers */
  border: 2px inset #fff; /* XP style inset border */
  background-color: #000; /* Black background */
  color: #0f0; /* Green text */
  font-family: monospace;
  white-space: nowrap; /* Prevent wrapping */
  margin-bottom: 5px;
  padding: 2px 5px;
  box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px grey;
}

.connection-status {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-weight: bold;
}

.status-indicator {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
  border: 1px solid #555;
  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.5);
}

.status-indicator.green {
  background-color: lime;
  border-color: darkgreen;
}

.status-indicator.red {
  background-color: red;
  border-color: darkred;
}

/* Style for the slider to look more like a switch */
input[type="range"]#activation-signal {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 40px; /* Specific width */
  height: 20px; /* Specific height */
  background: #bbb; /* Grey background */
  outline: none;
  border-radius: 10px; /* Rounded edges */
  position: relative;
  border: 2px inset #fff; /* XP style */
  box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px grey;
  vertical-align: middle; /* Align with label */
  margin-left: 5px;
}

input[type="range"]#activation-signal::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Thumb width */
  height: 16px; /* Thumb height */
  background: #777; /* Thumb color */
  border-radius: 50%; /* Circular thumb */
  position: relative;
  z-index: 1;
  border: 1px solid #444;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

input[type="range"]#activation-signal::-moz-range-thumb {
  width: 16px; /* Thumb width */
  height: 16px; /* Thumb height */
  background: #777; /* Thumb color */
  border-radius: 50%; /* Circular thumb */
  border: 1px solid #444; /* Remove default border */
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Add some basic styling for the button */
#hacking-key-button {
  background-color: #d40000; /* Darker Red color */
  color: white;
  border: 2px outset #ff8080;
  padding: 3px 8px;
  font-weight: bold;
  text-shadow: 1px 1px #550000;
  margin-bottom: 5px;
}

#hacking-key-button:active {
  border-style: inset;
  background-color: #a00000;
}

/* Make header full width */
.header {
  width: 100%;
  display: block; /* Ensure it takes full width */
  box-sizing: border-box; /* Include padding in width calculation */
}

.sslslip-tool-panel h4 {
  margin-top: 0;
  margin-bottom: 8px;
  padding-bottom: 4px;
  font-size: 0.95em;
}

.sslslip-tool-panel label {
  display: block; /* Each label on its own line */
  margin-bottom: 3px;
  font-size: 0.85em;
}

.sslslip-tool-panel select,
.sslslip-tool-panel textarea {
  margin-bottom: 8px;
  padding: 3px;
}

.sslslip-tool-panel select {
  transition: color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for color/glow */
}

.sslslip-tool-panel select.target-selected-green {
  color: #0f0; /* Neon green */
  box-shadow: 0 0 5px #0f0;
}

.sslslip-tool-panel select.target-selected-orange {
  color: #ffa500; /* Flashing orange */
  animation: flash-orange 1s infinite;
}

@keyframes flash-orange {
  0%,
  100% {
    color: #ffa500;
    box-shadow: 0 0 5px #ffa500;
  }
  50% {
    color: #ffcc66;
    box-shadow: 0 0 8px #ffa500;
  }
}

.sslslip-tool-panel textarea {
  height: 60px; /* Fixed height for command input */
  resize: none; /* Disable resizing */
  transition: box-shadow 0.3s ease; /* Smooth glow transition */
}

.sslslip-tool-panel textarea:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.7); /* Yellow glow on focus */
}

.sslslip-tool-panel textarea.dangerous-input {
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.8); /* Red glow for dangerous commands */
  animation: flash-red-border 0.5s infinite alternate;
}

@keyframes flash-red-border {
  from {
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
  }
  to {
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
  }
}

#sslslip-execute {
  background-color: #006400; /* Dark Green */
  color: #90ee90; /* Light Green Text */
  border: 2px outset #00ff00;
  padding: 4px 10px;
  font-weight: bold;
  width: 100%;
  margin-bottom: 8px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#sslslip-execute:disabled {
  cursor: url("../image/cursor/callmezippy_squirrelUnavailble.png"), not-allowed;
  text-shadow: none;
  animation: none; /* Disable pulsing when disabled */
}

#sslslip-execute:not(:disabled) {
  animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 3px #0f0;
  }
  50% {
    box-shadow: 0 0 8px #0f0;
  }
  100% {
    box-shadow: 0 0 3px #0f0;
  }
}

#sslslip-execute:not(:disabled):active {
  border-style: inset;
  background-color: #004d00; /* Darker green on click */
  animation: none; /* Stop pulsing during click */
}

.warning-text {
  color: red;
  font-weight: bold;
  font-size: 0.8em;
  text-align: center;
  margin-bottom: 5px;
  text-shadow: 1px 1px #550000;
  display: none; /* Hidden by default */
}

.feedback-text {
  font-size: 0.85em;
  text-align: center;
  margin-bottom: 8px;
  padding: 3px;
  border-radius: 3px;
  display: none; /* Hidden by default */
}

.feedback-text.success {
  background-color: rgba(0, 255, 0, 0.2);
  color: #0f0;
  border: 1px solid #090;
}

.feedback-text.error {
  background-color: rgba(255, 0, 0, 0.2);
  color: #f00;
  border: 1px solid #900;
}

.security-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space out label and icon */
  font-size: 0.85em;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #555; /* Separator line */
}

#security-status-icon {
  font-size: 1.2em; /* Make icon slightly larger */
  transition: color 0.3s ease;
}

#security-status-icon.secure {
  color: lime; /* Green lock */
}

#security-status-icon.vulnerable {
  color: red; /* Red unlocked padlock */
  animation: flash-red-icon 1s infinite;
}

@keyframes flash-red-icon {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Sidebar glow animation */
@keyframes sidebar-glow {
  0% {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
      inset -2px -2px grey, inset 2px 2px #dfdfdf,
      0 0 5px rgba(0, 255, 255, 0.5);
  }
  50% {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
      inset -2px -2px grey, inset 2px 2px #dfdfdf,
      0 0 15px rgba(0, 255, 255, 0.8);
  }
  100% {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
      inset -2px -2px grey, inset 2px 2px #dfdfdf,
      0 0 5px rgba(0, 255, 255, 0.5);
  }
}

.sidebar-panel.processing {
  animation: sidebar-glow 0.5s ease-out;
}