:root {
  --bg: #0b0f14;
  --panel: #0f141a;
  --text: #d1e0ee;
  --muted: #7a8a99;
  --accent: #62d3a4;
  --prompt: #8fb0ff;
  --red: #ff5f57; 
  --yellow: #febc2e; 
  --green: #28c840;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --pad: 28px;
  --avail-h: calc(100dvh - (var(--pad) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  --titlebar-h: 44px;
}

@media (prefers-color-scheme: light) {
  :root { 
    --bg:#f5f7fb; 
    --panel:#ffffff; 
    --text:#0b0f14; 
    --muted:#4b5a6a; 
    --shadow:0 20px 50px rgba(0,0,0,.1); 
  }
}

html,body { 
  height:100%; 
}

html { 
  -webkit-text-size-adjust: 100%; 
  text-size-adjust: 100%; 
}

body {
  margin:0;
  font:16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--bg);
  color:var(--text);
  padding:var(--pad);
  min-height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  position:relative;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(98,211,164,.08), transparent) no-repeat, var(--bg);
  z-index:-1;
  pointer-events:none;
}

.wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100% - 56px));
  height: min(400px, calc(100vh - 56px));
  box-sizing: border-box;
  touch-action: none;
}

@media (orientation: landscape) and (max-height: 480px) {
  .wrap { 
    width: clamp(360px, calc(100vmin - 56px), 600px); 
  }
}

.window {
  background:var(--panel);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  position: relative;
  min-width: 320px;
  min-height: 200px;
}

.titlebar {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:move;
  user-select:none;
  flex:0 0 auto;
}

.dot { 
  width:12px; 
  height:12px; 
  border-radius:50%; 
  display:inline-block; 
}

.dot.red{background:var(--red)} 
.dot.yellow{background:var(--yellow)} 
.dot.green{background:var(--green)}

.path { 
  margin-left:auto; 
  font-size:.9rem; 
  color:var(--muted) 
}

.screen {
  padding:18px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0; /* Allow screen to shrink smaller than window min-height */
  box-sizing: border-box;
  height: 0; /* Force flex to work properly */
}

@media (orientation: landscape) and (max-height: 480px) {
  .screen { 
    min-height: 0; 
  }
}

.line { 
  white-space:pre-wrap; 
  word-break:break-word; 
}

#terminal {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#terminal.content-fits {
  justify-content: flex-start;
}

#terminal.content-overflows {
  justify-content: flex-end;
  /* Ensure content is properly positioned at bottom */
  align-items: stretch;
}

.cmd  { 
  color:var(--prompt); 
}

.out  { 
  color:var(--accent); 
}

.muted{ 
  color:var(--muted); 
}

a { 
  color:var(--accent); 
  text-decoration:none; 
  border-bottom:1px dashed rgba(98,211,164,.45); 
}

a:hover { 
  border-bottom-color:transparent; 
}

.cursor { 
  display:inline-block; 
  width:10px; 
  height:1.1em; 
  vertical-align:-0.15em; 
  background:var(--text); 
  margin-left:2px; 
  animation:blink 1s steps(1) infinite; 
}

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

.footer { 
  text-align:center; 
  margin-top:14px; 
  color:var(--muted); 
  font-size:.9rem; 
}

/* Resize handles */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 10;
}

.resize-handle.n {
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}

.resize-handle.s {
  bottom: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}

.resize-handle.e {
  top: 0;
  right: -4px;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.resize-handle.w {
  top: 0;
  left: -4px;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.resize-handle.ne {
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.resize-handle.nw {
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.resize-handle.se {
  bottom: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

.resize-handle.sw {
  bottom: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

/* Mobile: disable resize handles */
@media (max-width: 768px) {
  .resize-handle {
    display: none;
  }
}