/**
 * Atari ST GEM Desktop Theme
 */

@font-face {
  font-family: 'Atari';
  src: url('../../../fonts/C64_Pro_Mono-STYLE.woff') format('woff');
}

:root {
  --st-white: #FFFFFF;
  --st-black: #000000;
  --st-green: #00AA00;
  --st-dark-green: #006600;
  --st-grey: #AAAAAA;
  --st-light-grey: #CCCCCC;
}

body {
  font-family: 'Atari', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.2;
}

/* ==========================================
   TERMINAL WINDOW
   White GEM window with border
   ========================================== */
.terminal {
  background: var(--st-white);
  border: 1px solid var(--st-black);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* ==========================================
   WINDOW CHROME
   GEM title bar
   ========================================== */
.window-chrome {
  flex-shrink: 0;
}

.title-bar {
  background: var(--st-white);
  border-bottom: 1px solid var(--st-black);
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 2px;
}

.title-btn {
  width: 16px;
  height: 14px;
  border: 1px solid var(--st-black);
  background: var(--st-white);
  margin-right: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.title-btn:hover {
  background: var(--st-light-grey);
}

.full-btn {
  margin-left: auto;
  margin-right: 0;
}

.title-text {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

/* ==========================================
   TERMINAL CONTENT
   Black terminal area
   ========================================== */
.terminal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--st-black);
  color: var(--st-white);
  padding: 8px;
  overflow: hidden;
}

.output {
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
}

.prompt-line {
  /* Appears naturally after output content */
}

.prompt {
  color: var(--st-white);
}

#command-input {
  color: var(--st-white);
}

.cursor {
  width: 8px;
  height: 12px;
  background: var(--st-white);
  animation-duration: 0.6s;
}

/* Colors */
.color-green { color: var(--st-green); }
.color-grey { color: var(--st-grey); }
.color-white { color: var(--st-white); }

/* Scrollbar - GEM style */
.output::-webkit-scrollbar {
  width: 16px;
}

.output::-webkit-scrollbar-track {
  background: var(--st-grey);
  border-left: 1px solid var(--st-black);
}

.output::-webkit-scrollbar-thumb {
  background: var(--st-white);
  border: 1px solid var(--st-black);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 500px) {
  body { font-size: 12px; }
}

@media (max-width: 380px) {
  body { font-size: 10px; }
}