/* === Base console container === */
.sconsole {
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 18.75rem; /* 300px = 18.75rem */
  min-height: 10rem; /* 200px = 12.5rem */
  border-radius: 0.5rem; /* 8px */
  border: 0.125rem solid #1e1e1e; /* 2px */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  background-size: cover;
}

.sconsole:active {
  box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.25);
  transform: scale(1.01);
}

/* === Inner console area === */
#consoleParent {
  flex: 1;
  overflow-y: auto;
  height: auto !important;
  padding: 0.75rem; /* 12px */
}

/* === Input area === */
#consoleInput {
  width: 100%;
  outline: none;
  border: none;
  background: transparent;
  font-family: monospace;
  font-size: 1rem; /* 16px */
}

/* === Optional resize indicator (bottom-right corner) === */
.sconsole::after {
  content: "";
  position: absolute;
  bottom: 0.25rem; /* 4px */
  right: 0.25rem;
  width: 0.625rem; /* 10px */
  height: 0.625rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 0.125rem,
    transparent 0.125rem,
    transparent 0.25rem
  );
  pointer-events: none;
}