/* =====================================================
   SKintosh OS  —  style.css
   All-gradient terminal aesthetic · Responsive
   ===================================================== */

/* ── Reset & Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --text:        #33ff00;
  --border:      #33ff00;
  --accent:      #00ff88;
  --glow:        rgba(51,255,0,0.35);
  --bg:          transparent;

  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
  --radius:      4px;
  --panel-pad:   14px;

  --topbar-h:    38px;
  --sidebar-w:   270px;
}

/* ── Scrollbars ─────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 3px; opacity: .5; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent); }
*                                { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── CRT Overlay ────────────────────────────────────── */
#scanlines {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.07) 2px,
    rgba(0,0,0,.07) 4px
  );
}
#vignette {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(ellipse at center,
    transparent 52%,
    rgba(0,0,0,.6) 100%
  );
}

/* ── Body / OS Wrapper ──────────────────────────────── */
body {
  font-family:  var(--font-mono);
  font-size:    13px;
  line-height:  1.6;
  color:        var(--text);
  height:       100dvh;
  overflow:     hidden;
  background:   linear-gradient(160deg,#020d00 0%,#041a00 50%,#030a02 100%);
  text-shadow:  0 0 4px var(--glow);
}

#os-wrapper {
  display:        flex;
  flex-direction: column;
  height:         100dvh;
  position:       relative;
  z-index:        1;
}

/* ── Top Bar ────────────────────────────────────────── */
#topbar {
  height:           var(--topbar-h);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 16px;
  border-bottom:    1px solid var(--border);
  background:       rgba(0,0,0,.45);
  backdrop-filter:  blur(8px);
  flex-shrink:      0;
  gap:              12px;
}

#topbar-left   { display: flex; align-items: baseline; gap: 8px; }
#topbar-center { flex: 1; text-align: center; }
#topbar-right  { display: flex; align-items: center; gap: 8px; }

#os-logo       { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.logo-sk       { color: var(--text); }
.logo-intosh   { color: var(--accent); opacity: .8; }
#os-version    { font-size: 10px; opacity: .45; }

#clock {
  font-size:      13px;
  font-weight:    600;
  letter-spacing: .1em;
  color:          var(--text);
  opacity:        .85;
}

/* Sidebar toggle button (shown on mobile, hidden on desktop) */
#sidebar-toggle {
  display:          none;
  align-items:      center;
  justify-content:  center;
  background:       transparent;
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  color:            var(--accent);
  font-size:        15px;
  width:            28px;
  height:           24px;
  cursor:           pointer;
  padding:          0;
  transition:       border-color .2s, color .2s;
}
#sidebar-toggle:hover { border-color: var(--accent); color: var(--text); }

/* ── Layout ─────────────────────────────────────────── */
#layout {
  display:  flex;
  flex:     1;
  overflow: hidden;
}

/* ── Terminal ───────────────────────────────────────── */
#terminal {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  border-right:     1px solid var(--border);
  position:         relative;
  animation:        borderGlow 4s ease-in-out infinite;
  min-width:        0;
}

/* Fake window title bar */
#term-titlebar {
  display:          flex;
  align-items:      center;
  gap:              6px;
  padding:          7px 14px;
  border-bottom:    1px solid var(--border);
  background:       rgba(0,0,0,.3);
  flex-shrink:      0;
}
.tbdot            { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.td-red           { background: #ff5f57; }
.td-yellow        { background: #ffbd2e; }
.td-green         { background: #28c941; }
#term-title       { margin-left: 10px; font-size: 11px; opacity: .5; letter-spacing: .08em; }

/* Output — THIS is the scrolling container */
#output {
  flex:             1;
  overflow-y:       auto;
  overflow-x:       hidden;
  padding:          14px 18px 6px;
  scroll-behavior:  smooth;
  overscroll-behavior: contain;
}

/* ── Line types ──────────────────────────────────────── */
.line {
  white-space:  pre-wrap;
  word-break:   break-all;
  animation:    fadeSlide .1s ease-out both;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.line.sep          { color: var(--border); opacity: .4; }
.line.dim          { opacity: .5; }
.line.err          { color: #ff4466; text-shadow: 0 0 6px rgba(255,60,80,.5); }
.line.warn         { color: #ffa500; }
.line.success      { color: #00ff88; }
.line.info-row     { opacity: .85; }
.line.edit-line    { color: var(--accent); opacity: .85; }
.line.brand        { color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.line.section-head { color: var(--accent); opacity: .7; font-size: 11px; }
.line.accent-text  { color: var(--accent); }
.line.spacer       { min-height: 6px; }

/* Inline spans */
.prompt-echo  { color: var(--accent); opacity: .7; }
.cmd-echo     { color: var(--text); }
.cmd-name     { color: var(--accent); }
.ls-dir       { color: var(--accent); font-weight: 600; }
.ls-file      { color: var(--text); }
.accent       { color: var(--accent); }
.success-text { color: #00ff88; }
.err          { color: #ff4466; }
.stat-label   { color: var(--accent); font-weight: 600; font-size: 11px; }
.bar-fill     { color: var(--text); }
.bar-empty    { color: var(--border); opacity: .3; }

/* Input Row */
#input-row {
  display:      flex;
  align-items:  center;
  padding:      8px 18px 12px;
  border-top:   1px solid rgba(255,255,255,.06);
  flex-shrink:  0;
  gap:          6px;
  background:   rgba(0,0,0,.2);
}

#prompt {
  color:        var(--accent);
  font-weight:  700;
  white-space:  nowrap;
  font-size:    13px;
  text-shadow:  0 0 6px var(--glow);
  flex-shrink:  0;
  max-width:    55%;
  overflow:     hidden;
  text-overflow:ellipsis;
}

#cmdline {
  flex:         1;
  background:   transparent;
  border:       none;
  outline:      none;
  font-family:  var(--font-mono);
  font-size:    13px;
  color:        var(--text);
  text-shadow:  0 0 4px var(--glow);
  caret-color:  var(--accent);
  min-width:    0;
}
#cmdline::placeholder { color: var(--text); opacity: .18; }

/* Blinking cursor block */
#cursor-blink {
  width:        8px;
  height:       15px;
  background:   var(--text);
  opacity:      .8;
  flex-shrink:  0;
  animation:    blink .9s step-end infinite;
}
@keyframes blink {
  0%,100% { opacity: .8; }
  50%     { opacity: 0; }
}

/* ── Glow Border Animation ──────────────────────────── */
@keyframes borderGlow {
  0%,100% { box-shadow: 0 0 6px var(--glow); }
  50%     { box-shadow: 0 0 20px var(--glow); }
}

/* ── Sidebar ────────────────────────────────────────── */
#sidebar {
  width:          var(--sidebar-w);
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  overflow-y:     auto;
  padding:        10px 10px 16px;
  gap:            10px;
  background:     rgba(0,0,0,.25);
  transition:     transform .25s ease;
}

/* Mobile sidebar overlay */
#sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    199;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
}
#sidebar-overlay.visible { display: block; }

/* ── Panels ──────────────────────────────────────────── */
.panel {
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  background:    rgba(0,0,0,.2);
  box-shadow:    0 0 14px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.18);
  transition:    border-color .3s;
}
.panel:hover { border-color: var(--accent); }

.panel-head {
  padding:        7px var(--panel-pad);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .12em;
  color:          var(--accent);
  border-bottom:  1px solid var(--border);
  background:     rgba(0,0,0,.3);
  display:        flex;
  align-items:    center;
  gap:            6px;
}
.panel-icon { opacity: .7; }

/* Stats */
#sys-stats {
  padding:    10px var(--panel-pad);
  font-size:  12px;
  line-height:1.7;
  white-space:pre-wrap;
}

/* File tree */
#live-tree {
  padding:    10px var(--panel-pad);
  font-size:  11.5px;
  line-height:1.6;
  white-space:pre;
  overflow-x: auto;
}
.tree-root { color: var(--accent); font-weight: 700; }

/* ── Theme Transitions ──────────────────────────────── */
body, #terminal, .panel, #topbar, #sidebar {
  transition:
    color .25s,
    background .25s,
    border-color .25s,
    text-shadow .25s,
    box-shadow .25s;
}

/* ── Selection ──────────────────────────────────────── */
::selection { background: var(--accent); color: #000; }

/* ── Responsive ─────────────────────────────────────── */

/* Tablet — narrower sidebar */
@media (max-width: 900px) {
  :root { --sidebar-w: 230px; }
  body  { font-size: 12px; }
}

/* Mobile — sidebar slides in as drawer */
@media (max-width: 680px) {
  :root { --sidebar-w: 82vw; }

  body { font-size: 12px; }

  /* Show the toggle button */
  #sidebar-toggle { display: flex; }

  /* Sidebar becomes a fixed drawer */
  #sidebar {
    position:   fixed;
    top:        var(--topbar-h);
    right:      0;
    bottom:     0;
    width:      var(--sidebar-w);
    z-index:    200;
    transform:  translateX(110%);
    box-shadow: -4px 0 30px rgba(0,0,0,.7);
    background: rgba(5,5,5,.96);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--border);
    overflow-y: auto;
  }

  #sidebar.open {
    transform: translateX(0);
  }

  /* Terminal takes full width */
  #terminal {
    border-right: none;
  }

  /* Smaller input prompt on mobile */
  #prompt {
    font-size:  11px;
    max-width:  45%;
  }

  #cmdline {
    font-size: 12px;
  }

  /* Slightly slimmer output padding */
  #output {
    padding: 10px 12px 4px;
  }

  #input-row {
    padding: 6px 12px 10px;
  }

  /* Brand ASCII art — smaller on tiny screens */
  .line.brand {
    font-size:      9px;
    letter-spacing: 0;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .line.brand { display: none; }
  body { font-size: 11px; }
}