/* LUCA OG — green terminal window chrome */
:root{
  --bg:#000000;
  --fg:#00ff00;           /* all normal terminal text = green */
  --err:#ffffff;          /* errors = white */
  --dim:#00ff00;          /* keep green, maybe lower opacity via css */
  --accent:#00ff00;       /* cursor/ok */
  --frame:#008a00;        /* green frame */
  --frame-hi:#22ff22;     /* highlight for 95-like bevel */
  --frame-lo:#004400;     /* shadow for 95-like bevel */
  --mono:"Lucida Console","Courier New",monospace;
  --win-maxw: 720px;
  --win-minh: 420px;
  --pad: 8px;
}

/* Page */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--mono);}
body{min-height:100vh;}

/* Desktop center (PC) */
#desktop{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Taskbar */
#taskbar{
  position:fixed; left:0; right:0; bottom:0; height:28px;
  background:#001800; color:#9f9; border-top:2px solid var(--frame-hi); border-bottom:2px solid var(--frame-lo);
  display:flex; align-items:center; gap:6px; padding:2px 4px; font-family:Tahoma, Geneva, sans-serif; font-size:12px;
}
.btn95{
  border-left:2px solid var(--frame-hi); border-top:2px solid var(--frame-hi);
  border-right:2px solid var(--frame-lo); border-bottom:2px solid var(--frame-lo);
  background:#002200; padding:2px 8px; cursor:pointer; color:#9f9;
}
.btn95:active{
  border-left:2px solid var(--frame-lo); border-top:2px solid var(--frame-lo);
  border-right:2px solid var(--frame-hi); border-bottom:2px solid var(--frame-hi);
}
#clock{margin-left:auto; min-width:60px; text-align:center; border-left:1px solid var(--frame-lo); padding-left:6px}

/* Start menu */
#startmenu{
  position:fixed; left:4px; bottom:30px; width:180px; background:#002200; color:#9f9;
  border-left:2px solid var(--frame-hi); border-top:2px solid var(--frame-hi); border-right:2px solid var(--frame-lo); border-bottom:2px solid var(--frame-lo);
  display:none;
}
#startmenu ul{list-style:none; margin:0; padding:2px}
#startmenu li{padding:6px 8px; cursor:pointer}
#startmenu li:hover{background:#004400; color:#cfc}

/* Window frame — green look */
.win{
  width:min(var(--win-maxw), 96vw);
  min-height:var(--win-minh);
  max-height:80vh;
  background:#000; color:var(--fg);
  border-left:2px solid var(--frame-hi);
  border-top:2px solid var(--frame-hi);
  border-right:2px solid var(--frame-lo);
  border-bottom:2px solid var(--frame-lo);
  box-shadow:0 0 0 1px #003300, 0 12px 40px rgba(0,255,0,.08);
  display:flex; flex-direction:column;
}
.titlebar{
  background:#003300; color:#cfc; padding:2px 6px;
  display:flex; align-items:center; gap:6px; font-family:Tahoma, Geneva, sans-serif; font-size:12px;
  border-bottom:1px solid #004d00;
}
.titlebar .controls{margin-left:auto; display:flex; gap:2px}
.btnctl{width:18px; height:16px; background:#220000; border-left:2px solid #ff5555; border-top:2px solid #ff5555; border-right:2px solid #660000; border-bottom:2px solid #660000; cursor:pointer}

.content{flex:1; display:flex; flex-direction:column; overflow:hidden; border-top:1px solid #003300;}

/* Terminal area */
#terminal{padding:var(--pad); font-size:14px; line-height:1.35; white-space:pre-wrap; flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling: touch; word-break: break-word; padding-bottom: calc(16px + var(--prompt-h, 44px));}
.line{white-space:pre-wrap; word-break:break-word}
.dim{opacity:.9}
.ok{opacity:1}
.err{color:var(--err) !important} /* errors white */
.cursor::after{content:"█"; color:var(--accent); animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}

/* Prompt */
.promptline{display:flex; gap:1ch; align-items:center; padding:8px 6px; border-top:1px dashed #005500; background:#000; --prompt-h: 44px; min-height: var(--prompt-h);}
#prompt{color:var(--accent)}
#input{
  flex:1; background:#000; border:none; color:var(--fg);
  font:inherit; padding:0; outline:none;

  font-size:16px;
}

/* Clickable commands that look like plain text */
.cmdlink{color:inherit; text-decoration:none; cursor:default}
.cmdlink:hover{filter:none; text-decoration:none}

/* Boot block centering */
.bootblock{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px 0}
.bootcommands{text-align:justify}
.bootcommands::after{content:""; display:inline-block; width:100%}

/* File list & Notepad */
#files{padding:8px; font-size:14px}
#files .row{display:flex; gap:2ch}
#files .name{min-width:16ch}
#padarea{width:100%; height:100%; display:block; background:#001100; color:var(--fg); border:none; outline:none; font:inherit; padding:8px}

/* Mobile: window fullscreen feel */
@media (max-width:700px){
  #desktop{align-items:stretch; justify-content:stretch}
  .win{position:fixed; inset:0 0 28px 0; width:auto; min-height:auto; max-height:none; border-width:2px; border-radius:0}
  .titlebar{position:sticky; top:0; z-index:1}
}
/* fix ASCII boot art */
.bootblock .line{
  white-space: pre;       /* keine Zeilenumbrüche erzwingen */
  word-break: normal;     /* niemals in „Wörtern“ brechen */
  overflow-wrap: normal;  /* dito */
  font-family: var(--mono);
  text-align: left;
  display: inline-block;
}

/* --- Mobile/iOS scaling tweaks --- */
html{ -webkit-text-size-adjust: 100%; }

/* Use the "small viewport" on mobile Safari so the 100vh bug doesn't cut off content */
@supports (height: 100svh){
  body, #desktop{ min-height: 100svh; }
}

/* Safe-area padding for notches */
#desktop{
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}


/* Narrow phones (iPhone width and below) */
@media (max-width: 430px){
  :root{
    --win-maxw: 100vw;
    --win-minh: 60vh;
    --pad: 6px;
  }
  #terminal{ font-size: 12px; line-height:1.3; }
  .titlebar{ font-size: 11px; padding: 2px 4px; }
  .promptline{ padding: 4px; }
}



/* --- Force underline for command links (works reliably on iOS Safari) --- */
a.cmdlink, #terminal a.cmdlink, .bootcommands a.cmdlink{
  text-decoration: underline !important;
  text-underline-offset: 2px;
  -webkit-text-decoration: underline !important;
  cursor: pointer;
}
a.cmdlink:hover{ text-decoration: underline !important; }



/* --- iPhone safe-area + tap improvements for Start/Taskbar --- */
#taskbar, #start { position: fixed; z-index: 1000; }
#start { left: 4px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
#startmenu { position: fixed; left: 4px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); z-index: 1001; }

#taskbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: calc(30px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (hover: none) and (pointer: coarse) {
  #start { min-height: 44px; min-width: 96px; }
}

/* ensure clickable */
#start, #startmenu { pointer-events: auto; }


/* ================= MOBILE PORTRAIT LAYOUT (iPhone-friendly) ================= */
@media (orientation: portrait) and (max-width: 540px) {
  /* Make text a bit larger for readability */
  body { font-size: 16px; line-height: 1.35; }

  /* Taskbar & Start */
  #taskbar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: calc(44px + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px calc(env(safe-area-inset-bottom, 0px)) 8px;
    display: flex; align-items: center; gap: 8px;
    z-index: 1000;
  }
  #start {
    position: fixed;
    left: 8px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: 36px; min-width: 96px;
    z-index: 1001;
  }
  #startmenu {
    position: fixed;
    left: 4vw; right: 4vw;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    max-height: min(70vh, 520px);
    overflow: auto;
    z-index: 1002;
  }
  #startmenu ul { padding: 6px; }
  #startmenu li { padding: 10px 12px; font-size: 16px; }

  /* Generic window goes full-bleed (leaves 8px margin) */
  .win {
    position: fixed;
    left: 8px; right: 8px;
    top: max(8px, env(safe-area-inset-top, 0px));
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    width: auto; height: auto;
    max-height: none; min-height: unset;
    border-radius: 12px;
  }
  .win .titlebar {
    padding: 6px 10px;
    font-size: 14px;
  }
  .win .controls .btnctl {
    width: 22px; height: 18px;
  }
  .win .content {
    padding: 10px;
    overflow: auto;
  }

  /* Terminal tweaks */
  #terminal { font-size: 16px; }
  #input { font-size: 16px; padding: 8px 6px; }
  #prompt { font-size: 16px; }

  /* Calculator window specific overrides */
  #calc-win {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; height: auto !important;
    max-height: none !important;
    border-radius: 12px !important;
  }
  #calc-win .calc-titlebar { padding: 6px 10px; font-size: 14px; }
  #calc-win .calc-btnctl { width: 22px; height: 18px; }
}


/* Terminal scroll container adjustments */
#terminal{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px; /* ensure last line isn't behind prompt */
  word-break: break-word;
}

/* Keep prompt visible; provide stable height */
.promptline{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 1;
}


@media (orientation: portrait) and (max-width: 540px) {
  #terminal{ padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}


@media (orientation: portrait) and (max-width: 540px) {
  #terminal{ padding-bottom: calc(16px + var(--prompt-h, 44px) + env(safe-area-inset-bottom, 0px)); }
}