/* Win98 desktop chrome — spec §4.1 + §4.4 (mobile touch/safe-area) */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background: #0a0a0b;
  font-family: 'Pixelated MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
  font-size: 12px;
  color: black;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

/* Keyboard focus — explicit Win98-style dotted outline on interactive elements.
   Default browser ring is too modern for the frame. */
.start-button:focus-visible,
.start-item:focus-visible,
.desktop-icon:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* WinBox + Svelte height cascade fix — GLOBAL (not just .os-window).
   WinBox's `mount: node` moves our Svelte <div use:winbox> into .wb-body.
   That wrapper <div> has no class and default height:auto, which breaks
   the `height: 100%` cascade for every app whose root container wants
   to fill the window (terminal, internet-explorer, etc.). Stretching the
   wrapper universally makes all WinBox content size correctly without
   requiring each window to opt in via a class. */
.winbox .wb-body > div { height: 100%; }

/* ============================================================
   Win98 desktop chrome — spec §4.1, §4.4 (mobile hides chrome)
   ============================================================ */

/* Chrome container — mobile-hide gate.
   `display: contents` makes the wrapper transparent to layout (children hoist
   up to body). Lets us toggle all chrome (icons / taskbar / menu) with one
   media query rather than hiding each element individually. */
.desktop-chrome { display: contents; }

/* Desktop icons — top-left stack */
.desktop-icons {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.desktop-icon {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 11px;
  padding: 4px;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  /* Reset both user-agent button chrome AND 98.css's inherited bevel.
     `appearance: none` kills the UA box-ring; `box-shadow: none` kills
     98.css's four inset shadows that draw the raised-button frame on every
     <button>. `min-width`/`min-height` override 98.css's button minimums
     (75px wide / 23px tall) so the icon shrinks to its content. Without
     these the desktop icons render with a Win98 button frame around each
     one — NOT the flat label-under-icon look. This reset is load-bearing;
     it was missing on v0.2 port and had to be reapplied (see b19fd9f in
     the archive/v0.1 history). */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  font-family: inherit;
}

.desktop-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin-bottom: 4px;
}

.desktop-icon.selected span,
.desktop-icon:hover span {
  background: #000080;
  outline: 1px dotted white;
}

/* Taskbar */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  display: flex;
  align-items: center;
  padding: 2px;
  z-index: 1000;
  box-shadow: inset 0 1px 0 #dfdfdf;
  padding-bottom: env(safe-area-inset-bottom);
}

.start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
  height: 22px;
  font-family: inherit;
}

.start-button:active,
.start-button.open {
  border-color: #808080 #ffffff #ffffff #808080;
}

.start-button img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.system-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px inset #808080;
  font-size: 11px;
  height: 22px;
}

.clock {
  font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
}

/* Tray speaker — ambient loop toggle (Task 19). Flat icon-button, no 98.css
   bevel; the tray's own inset border is chrome enough. */
.tray-speaker {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

/* Start menu — spec §4.4 */
.start-menu {
  position: fixed;
  bottom: 28px;
  left: 2px;
  width: 200px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  z-index: 1001;
  padding: 2px;
}

.start-menu[hidden] { display: none !important; }

.start-menu-items { display: flex; flex-direction: column; }

.start-item {
  background: #c0c0c0;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

.start-item:hover {
  background: #000080;
  color: white;
}

.start-menu hr {
  border: none;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 2px 0;
}

/* About Ink dialog — Win98 Properties dialog layout: header row with
   product icon + name/sub/version, vocabulary block, contract row mirror,
   credits, OK button. Authentic pattern from Notepad/MSPaint "About". */
.about-ink {
  height: 100%;
  background: #c0c0c0;
  padding: 14px 18px 12px;
  font-family: 'Pixelated MS Sans Serif', 'VT323', monospace;
  font-size: 12px;
  color: #000;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}
.about-ink .about-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 2px;
}
.about-ink .about-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  image-rendering: -webkit-optimize-contrast;
  margin-top: 2px;
}
.about-ink .about-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.about-ink .about-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 2px;
  letter-spacing: 0.04em;
}
.about-ink .about-sub {
  margin: 0 0 2px;
  font-style: italic;
  color: #333;
}
.about-ink .about-version {
  margin: 0;
  color: #555;
  font-size: 11px;
}
.about-ink hr {
  border: 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 10px 0;
  width: 100%;
}
.about-ink .about-line { margin: 2px 0; }
.about-ink .about-heading { margin: 4px 0 6px; font-weight: bold; }
.about-ink .about-credit {
  margin: 1px 0;
  font-size: 11px;
  color: #222;
}
.about-ink a, .about-ink a:visited { color: #000080; }

/* Contract row — mirrors the terminal's $INKED token row but minimal:
   label + sunken CA field + raised copy button. Pre-launch the field
   reads "— not live yet —" and copy is disabled. */
.about-ink .about-contract {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.about-ink .about-contract-label {
  flex: 0 0 auto;
  width: 72px;
}
.about-ink .about-contract-ca {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Lucida Console', Consolas, monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: #ffffff;
  border: 2px solid;
  border-color: #808080 #ffffff #ffffff #808080; /* sunken input */
  color: #202020;
}
.about-ink .about-contract-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 11px;
  padding: 2px 10px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff; /* raised button */
  background: #c0c0c0;
  cursor: pointer;
  color: #000;
}
.about-ink .about-contract-btn:active {
  border-color: #808080 #ffffff #ffffff #808080;
}
.about-ink .about-contract-btn:disabled {
  color: #808080;
  cursor: default;
  text-shadow: 1px 1px 0 #ffffff;
}

/* OK button row — right-justified, Win98 raised button. margin-top:auto
   pushes it to the bottom of the flex column so a short About still
   shows OK at the lower edge of the window, not floating mid-pane. */
.about-ink .about-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 12px;
}
.about-ink .about-ok {
  font: inherit;
  font-size: 11px;
  min-width: 75px;
  padding: 4px 16px;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff; /* raised button */
  background: #c0c0c0;
  cursor: pointer;
  color: #000;
}
.about-ink .about-ok:active {
  border-color: #808080 #ffffff #ffffff #808080;
}
.about-ink .about-ok:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* Buy window (Money Printer) */
.buy { padding: 12px; display: flex; flex-direction: column; gap: 10px; font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif; font-size: 11px; height: 100%; box-sizing: border-box; background: #c0c0c0; }
.buy-row { display: flex; align-items: center; gap: 8px; }
.buy-contract { flex: 1; font-family: 'Lucida Console', Consolas, monospace; font-size: 11px; padding: 3px 6px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-row button { font: inherit; padding: 3px 12px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; cursor: pointer; min-width: 72px; }
.buy-row button:active { border-color: #808080 #fff #fff #808080; }
.buy-status { font-size: 11px; color: #505050; min-height: 14px; }

/* Internet Explorer window */
.ie { display: flex; flex-direction: column; height: 100%; background: #c0c0c0; font-family: 'Pixelated MS Sans Serif', Tahoma, sans-serif; font-size: 11px; box-sizing: border-box; }
.ie-toolbar { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid #808080; }
.ie-tb-btn { font: inherit; padding: 3px 10px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; color: #505050; min-width: 62px; }
.ie-address { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid #808080; }
.ie-address-label { font-weight: 700; }
.ie-address-input { flex: 1; font-family: 'Lucida Console', Consolas, monospace; font-size: 12px; padding: 2px 4px; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ie-go { font: inherit; padding: 2px 14px; border: 2px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; cursor: pointer; }
.ie-go:active { border-color: #808080 #fff #fff #808080; }
.ie-content { flex: 1; padding: 28px 24px; background: #fff; color: #000; overflow: auto; }
.ie-home-title { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; }
.ie-home-body { font-size: 12px; line-height: 1.45; margin-bottom: 6px; color: #303030; }
.ie-status { padding: 3px 8px; border-top: 1px solid #808080; background: #c0c0c0; color: #404040; font-size: 10px; }

/* ============================================================
   Phone-OS mode — spec §4 (hard requirement). Icon grid becomes a home
   screen, windows go full-screen (max:true, see winboxParams in
   src/lib/actions/winbox.ts), taskbar becomes a bottom dock, ticker
   pins to the top edge.
   ============================================================ */
@media (max-width: 768px) {
  .desktop-icons {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 6px;
    padding: 34px 12px 60px;
    width: 100%;
    box-sizing: border-box;
  }
  .desktop-icon { width: auto; }
  .desktop-icon img { width: 44px; height: 44px; }
  .taskbar {
    position: fixed; bottom: 0; left: 0; right: 0; height: 44px;
    /* Overrides the desktop z-index:1000 (which keeps the dock above
       *floating* windows). On mobile every window is max:true — full
       viewport — so a dock that still out-ranked it would permanently
       cover the window's own close button (.bb-ticker-pin, a taskbar
       descendant pinned to the top edge, sits in that exact strip). At
       z-index:1 the dock — and the ticker nested inside it — correctly
       draws *under* an open window; closing the window uncovers it
       again since nothing else competes for that space at rest. */
    z-index: 1;
  }
  .taskbar button, .taskbar .start-button { min-height: 40px; }
  .system-tray .clock { display: none; }   /* dock space: ticker + badge win over clock */
  .tray-speaker { min-width: 40px; font-size: 18px; }
  .start-item { min-height: 40px; }
  /* The menu is anchored above the dock (bottom:44px below) and rows just
     grew to 40px — a full 18-item menu can now run taller than the
     viewport. Scroll the items internally, capped to the space above the
     dock, so the bottom entries (Shut Down...) stay reachable instead of
     hiding behind the taskbar. */
  .start-menu-items {
    overflow-y: auto;
    max-height: calc(100vh - 44px - 12px);
  }
  .bb-ticker-pin {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; justify-content: center; padding: 3px;
    background: #111013; border-bottom: 1px solid #3a2a2c;
  }
  /* Start menu pops up from the dock — dock grew from 28px to 44px above,
     so the menu's anchor must grow with it or it overlaps the dock. */
  .start-menu { bottom: 44px; }
}
@media (min-width: 769px) {
  .bb-ticker-pin { display: contents; }

  /* Bound the icon column to the space above the taskbar (28px height +
     2px border-top, see .taskbar above) and wrap Win98-style into a second
     column once it fills up. Without this, an unbounded single column runs
     the last icon (Recycle Bin) under the taskbar at common desktop sizes
     (e.g. 1440x900), where clicks land on Start instead of the icon. */
  .desktop-icons {
    flex-wrap: wrap;
    max-height: calc(100vh - 12px - 30px);
    align-content: flex-start;
  }
}