/*
  ===== Base Reset =====
  Normalize spacing and box model across the app
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
  ===== Scrollbar =====
custom scrollbar styling for the terminal body
*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

::-webkit-scrollbar {
  width: 12px;
  background-color: #555;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(129, 129, 129);
}

/*
  ===== Color Utilities =====
  small helpers used inside HTML fragments and responses
*/
.white {
  color: rgb(238, 238, 238);
}

.blue {
  color: #9CEAF3;
}

a {
  text-decoration: none;
  color: rgb(238, 238, 238);
}

/*
  ===== Page Layout =====
  centering for terminal container
*/
body {
  background-color: #1f2330;
  height: 100vh;
  font-family: 'Fira Code', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  ==== walking duck background ====
*/
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 160vw;
  height: 160vh;
  z-index: 0;
  pointer-events: none;
  background-image: url('../img/walking-duck.gif');
  background-repeat: repeat;
  background-size: 360px 365px;
  opacity: 0.08;
  transform: translate(-50%, -50%) rotate(-10deg);
  transform-origin: center;
  background-position: -20vw -20vh;
  animation: duck-walk 40s linear infinite;
  will-change: background-position;
}

@keyframes duck-walk {
  0% { background-position: -20vw -20vh; }
  100% { background-position: 120vw 120vh; }
}


/*
  ===== Terminal Window =====
  Main frame, title bar, and traffic light buttons
*/
.container {
  display: flex;
  flex-direction: column;
  width: 800px;
  height: 600px;
  max-width: calc(100vw - 100px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid gray;
  margin: 20px;
  cursor: text;
  position: relative;
  transform-origin: top center;
  will-change: transform, opacity, filter;
  transition: width 200ms ease, height 200ms ease;
}

.menu {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  width: 100%;
  height: 24px;
  background-color: #424040;
  padding: 0 8px;
  cursor: default;
}

.menu .button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  cursor: pointer;
}

.red {
  background-color: #F5544D;
}

.yellow {
  background-color: #FABD2F;
}

.green {
  background-color: #47D043;
}

div.title {
  flex: 1;
  text-align: center;
}

.menu h1 {
  font-size: 13px;
  color: #9c9c9c;
}

.menu .title a { cursor: pointer; pointer-events: auto; }
.menu a { pointer-events: none; }

.buttons-flex {
  position: absolute;
  display: flex;
  flex-direction: row;
}

@media (max-width: 500px) {
  .buttons-flex {
    position: unset;
    display: flex;
    flex-direction: row;
  }
}

@media (max-width: 330px) {
  .menu h1 {
    display: none;
  }
}

/*
  ===== Terminal Content Area =====
*/
#app {
  display: flex;
  flex-direction: column;
  background-color: #414141;
  width: 100%;
  height: 100%;
  padding: 8px;
  overflow: auto;
}

/* Resize handle at bottom-right */
.resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 45%, #888 45% 55%, transparent 55% 100%),
              linear-gradient(135deg, transparent 0 60%, #666 60% 68%, transparent 68% 100%),
              linear-gradient(135deg, transparent 0 75%, #444 75% 82%, transparent 82% 100%);
  opacity: 0.7;
}


/* red button close/open animation */
.container.hidden {
  display: none;
}

@keyframes terminal-close {
  0% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
  100% { transform: scale(0.9) translateY(-14px); opacity: 0; filter: blur(2px); }
}

@keyframes terminal-open {
  0% { transform: scale(0.9) translateY(-14px); opacity: 0; filter: blur(2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}

.container.closing {
  animation: terminal-close 220ms ease forwards;
}

.container.opening {
  animation: terminal-open 220ms ease forwards;
}

/*
  ===== Text / Typography =====
*/
p {
  font-size: 16px;
  color: rgb(238, 238, 238);
  padding: 8px 0;
}

.startup-block {
  padding-bottom: 0;
  margin-bottom: 0;
}

h2 {
  font-size: 16px;
  color: rgb(238, 238, 238);
}

p.code {
  color: #66C2CD;
  margin-left: 8px;
}

span.text {
  margin-left: 16px;
  color: white;
}

/*
  ===== Prompt Path Line =====
*/
p.path {
  color: #F7FCA0;
}

p.path span {
  color: #6A77D2;
}

p.path span + span {
  color: #9CEAF3;
}

/*
  ===== Status Colors =====
  success / error colors for echoed commands
*/
.success {
  color: #5AD786;
}

.error {
  color: #F78F85;
}

p.response {
  color: rgb(238, 238, 238);
}

/*
  ===== Input =====
  command input inherits terminal look
*/
input {
  border: none;
  background-color: unset;
  color: rgb(238, 238, 238);
  width: 100%;
  font-size: 16px;
  font-family: 'Fira Code', monospace;
}

input:focus {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: unset;
}

/*
  ===== Command Line Rows =====
*/
.type {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.type2 {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

/*
  ===== Icons =====
*/
.icone {
  color: #5AD786;
  padding-right: 8px;
}

.icone.error {
  color: #F78F85;
}

/*
  ===== Blinking Cursor for Startup Typing =====
*/
.cursor {
  display: inline-block;
  width: 8px;
  background: #9CEAF3;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}

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