/* KAMRADEK/OS — Fenster-Chrome, Desktop-Layout, Logo-Sticker, Boot-Sequenz.
   Verhalten in wm.js / boot.js · Tokens aus tokens.css */

/* ---- Fenster-Grundgerüst ---- */

.kos-window {
  position: absolute;
  z-index: var(--z-window);
  display: flex;
  flex-direction: column;
  min-width: 280px;
  background: var(--bg);
  border: 1px solid var(--phos-dim);
  /* Eigene Compositing-Ebene: Ziehen hinterlässt keine Repaint-Spuren (WebKit) */
  will-change: transform;
}

.kos-window.is-focused {
  border-color: var(--phos-mid);
  box-shadow: 0 0 16px var(--phos-glow);
}

.kos-window.is-hidden { display: none; }

.kos-window.is-shaded { height: auto !important; min-height: 0; }
.kos-window.is-shaded > .win-body { display: none; }

/* Default-Positionen (Desktop ≥ 900px) */
#win-main { left: 4%; top: 6%; width: 58%; max-height: 86%; }
/* Terminal: Oberkante mit Luft unterm Logo (top 6% + ~146px Höhe + 56px Abstand),
   Unterkante bündig mit der max. Unterkante von #win-main (6% + 86% = 92%) */
#win-term { left: 64%; top: calc(6% + 202px); width: 32%; height: calc(86% - 202px); }

/* ---- Titelbar: Doppellinien-Deko, bei Fokus invertiert ---- */

.win-titlebar {
  flex: none;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  border-bottom: 1px solid var(--phos-dim);
  color: var(--phos-mid);
  font-size: var(--fs-small);
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background-color: var(--bg-raise);
  background-image:
    linear-gradient(var(--phos-faint), var(--phos-faint)),
    linear-gradient(var(--phos-faint), var(--phos-faint));
  background-size: 100% 1px, 100% 1px;
  background-position: 0 calc(50% - 3px), 0 calc(50% + 3px);
  background-repeat: no-repeat;
}

/* Titel und Buttons decken die Deko-Linien ab */
.win-title {
  background: var(--bg-raise);
  padding: 0 8px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-buttons {
  display: flex;
  gap: 6px;
  margin-left: auto;
  background: var(--bg-raise);
  padding-left: 8px;
}

.kos-window.is-focused > .win-titlebar {
  background: var(--phos-dim);
  color: var(--bg);
}

.kos-window.is-focused > .win-titlebar .win-title,
.kos-window.is-focused > .win-titlebar .win-buttons { background: none; }

.win-btn {
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--phos-dim);
  color: var(--phos);
  cursor: pointer;
}

.win-btn:hover { background: var(--phos); border-color: var(--phos); color: var(--bg); }

.kos-window.is-focused .win-btn { border-color: var(--bg); color: var(--bg); }
.kos-window.is-focused .win-btn:hover { background: var(--bg); color: var(--phos); }

/* ---- Fensterinhalt: scrollt, schmale grüne Scrollbar ---- */

.win-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--phos-dim) var(--bg);
}

.win-body::-webkit-scrollbar { width: 9px; }
.win-body::-webkit-scrollbar-track { background: var(--bg); }
.win-body::-webkit-scrollbar-thumb {
  background: var(--phos-dim);
  border: 2px solid var(--bg);
}

/* ---- Resize-Griff: klassische Schraffur-Ecke unten rechts ---- */

.win-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    var(--phos-dim) 3px 4px
  );
}

.win-resize:hover {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    var(--phos) 3px 4px
  );
}

/* Eingeklappt gibt es nichts zu skalieren — Lasche würde sonst die
   Titelbar-Buttons verdecken */
.kos-window.is-shaded .win-resize { display: none; }

/* ---- Logo-Sticker ---- */

.logo-sticker {
  position: absolute;
  z-index: var(--z-sticker);
  /* Vierte Ecke des gedachten Rechtecks: Oberkante bündig mit #win-main (top 6%),
     rechte Kante bündig mit #win-term (left 64% + width 32% = 96% → right 4%) */
  right: 4%;
  top: 6%;
  width: 144px;
  height: auto; /* Quelle auf Inhalt beschnitten (67×68) — Grün liegt exakt an den Kanten */
  image-rendering: pixelated; /* kleine Quelle: bewusst grob skaliert (Retro) */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 0 8px var(--phos-glow));
  /* Eigene Compositing-Ebene: Ziehen hinterlässt keine Repaint-Spuren (WebKit) */
  will-change: transform;
}

.logo-sticker.is-dragging {
  cursor: grabbing;
}

/* P3-Theme: grünes Logo-PNG auf Bernstein umfärben */
:root[data-theme="amber"] .logo-sticker {
  filter: hue-rotate(-58deg) saturate(1.35) drop-shadow(0 0 8px var(--phos-glow));
}

/* Früher: Logo-drop-shadow beim Ziehen aus gegen Safari-Schlieren. Ursache war
   die entfernte Röhren-Wölbung — ohne Warp sauber, Pause entfernt. */

.logo-sticker.is-spinning {
  animation: sticker-spin 0.8s cubic-bezier(0.3, 0.1, 0.25, 1);
}

@keyframes sticker-spin {
  50%  { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---- Boot-Sequenz ---- */

.boot {
  /* läuft jetzt IM Röhrenschirm (in .crt-screen): von der Blende gerahmt und
     unter den CRT-Effekten — Scanlines/Vignette/Glas liegen darüber. */
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-fx) - 1);
  background: var(--bg);
  color: var(--phos);
  padding: 4vh 5vw;
  overflow: hidden;
}

.boot[hidden] { display: none; }

/* Mobil (Blende schmal, Seite scrollt): Boot wieder als Viewport-Overlay */
@media (max-width: 900px) {
  .boot { position: fixed; }
}

.boot-line {
  white-space: pre-wrap;
  min-height: 1.35em; /* Leerzeilen nicht kollabieren lassen */
}

.boot-bright { color: var(--phos-bright); }
.boot-dim    { color: var(--phos-dim); }
.boot-amber  { color: var(--amber); }

.boot-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--phos);
  animation: boot-blink 0.9s steps(1) infinite;
}

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

.boot-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3vh;
  text-align: center;
  color: var(--phos-dim);
  font-size: var(--fs-small);
}

/* Ausblenden mit kurzem Einschalt-Blitzen */
.boot.is-done {
  animation: boot-flash 0.32s ease-out forwards;
  pointer-events: none;
}

.boot.is-done > * { visibility: hidden; }

@keyframes boot-flash {
  0%   { opacity: 1;    background: var(--bg-room); }
  25%  { opacity: 0.95; background: var(--phos-dim); }
  100% { opacity: 0;    background: var(--phos-bright); }
}

/* ---- Mobil: Fenster gestapelt, kein Drag ---- */

@media (max-width: 900px) {
  .kos-window {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0;
    margin: 10px;
  }

  #win-term .win-body { height: min(55vh, 440px); height: min(55dvh, 440px); } /* dvh: Tastatur verdeckt die Eingabe nicht */

  .win-btn { width: 40px; height: 40px; } /* fingerfreundliches Touch-Ziel */

  .win-titlebar {
    cursor: default;
    touch-action: auto;
  }

  /* Mobil kein Sticker: er überlagerte die Titelbar-Buttons des Hauptfensters
     und ist ohne Drag ohnehin nur Deko */
  .logo-sticker { display: none; }

  /* Mobil kein Resize — Fenster sind statisch gestapelt */
  .win-resize { display: none; }

  .boot { font-size: var(--fs-small); padding: 3vh 4vw; }
}

/* ---- Reduzierte Bewegung: keine Animationen, Funktion bleibt ---- */

@media (prefers-reduced-motion: reduce) {
  .logo-sticker { transition: none; }
  .logo-sticker.is-dragging { transform: none; }
  .logo-sticker.is-spinning { animation: none; }
  .boot-cursor { animation: none; }
  .boot.is-done { animation: none; opacity: 0; }
}