/**
 * Modfied version of [termynal.js](https://github.com/ines/termynal/blob/master/termynal.css).
 *
 * @author Ines Montani <ines@ines.io>
 * @version 0.0.1
 * @license MIT
 */
.react-terminal-wrapper {
  width: 100%;
  background: #000000;
  color: #eee;
  font-size: 18px;
  font-family: 'DM Mono', var(--font-mono), Consolas, Menlo, Monaco,
    'Courier New', Courier, monospace;
  border-radius: 4px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden; /* Add this to contain the shine effect */
}

.react-terminal-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, center) var(--mouse-y, center),
    rgba(255, 255, 255, 0.08) 0%,
    /* Reduced from 0.15 */ transparent 65%
  ); /* Adjusted from 70% */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.react-terminal-wrapper:hover::before {
  opacity: 1;
}

.react-terminal {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Important: allows flex child to scroll */
  position: relative;
  z-index: 1; /* Ensure content stays above shine effect */
}

.react-terminal-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.react-terminal-wrapper.react-terminal-light {
  background: #ddd;
  color: #1a1e24;
}

.react-terminal-window-buttons {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Hide window control buttons when terminal is in IDE */
.terminal-no-header .react-terminal-window-buttons {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.react-terminal-window-buttons button {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 0;
}

.react-terminal-window-buttons button.clickable {
  cursor: pointer;
}

.react-terminal-window-buttons button.red-btn {
  background: #d9515d;
}

.react-terminal-window-buttons button.yellow-btn {
  background: #f4c025;
}

.react-terminal-window-buttons button.green-btn {
  background: #3ec930;
}

.react-terminal-wrapper:after {
  content: attr(data-terminal-name);
  position: absolute;
  color: #a2a2a2;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

/* Hide header when terminal is in IDE */
.terminal-no-header:after {
  display: none;
}

.react-terminal-wrapper.react-terminal-light:after {
  color: #d76d77;
}

.react-terminal-line {
  white-space: pre-wrap;
  word-break: break-words;
  position: relative;
  transition: all 0.2s ease;
}

.react-terminal-light .react-terminal-line:before {
  color: #d76d77;
}

.react-terminal-input:before {
  margin-right: 0.75em;
  content: '$';
}

.react-terminal-input[data-terminal-prompt]:before {
  content: attr(data-terminal-prompt);
}

.react-terminal-wrapper:focus-within .react-terminal-active-input .cursor {
  position: relative;
  display: inline-block;
  width: 0.55em;
  height: 1em;
  top: 0.225em;
  background: #fff;
  -webkit-animation: blink 3s infinite;
  animation: blink 3s infinite;
}

/* Cursor animation */

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

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

.terminal-hidden-input {
  position: fixed;
  left: -1000px;
  height: 0;
  width: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}

.react-terminal-line:hover {
  background: rgba(255, 255, 255, 0.03); /* Reduced from 0.05 */
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.05),
    /* Reduced from 30px and 0.1 */ 0 0 40px rgba(255, 255, 255, 0.02); /* Reduced from 60px and 0.05 */
  z-index: 2;
}
