/* -- Window component --------------------------------------------
   A desktop-style window: a non-modal <dialog> with a title bar (icon,
   title, minimize / maximize / close), moved by dragging the bar, raised to
   the front on click, resized natively. Chrome styles after Windows, macOS,
   Linux (GNOME) and a retro 9x look. The controls are a
   <form method="dialog">, so the × closes the window without script. */

@layer components {
  /* the area windows live in: positioned, clipped - a desktop */
  .window-desktop {
    position: relative;
    overflow: hidden;
    min-height: 18rem;
    border-radius: var(--radius-lg);
    background:
      radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--foreground) 12%, transparent) 1px, transparent 0) 0 0 / 1.25rem 1.25rem,
      var(--muted);
    isolation: isolate;
  }

  .window {
    /* the UA dialog defaults (centered, padded, bordered) - replaced */
    --_titlebar: 2.25rem;
    --_ctl: 2.75rem;
    position: absolute;
    inset: auto;
    left: var(--window-x, 2rem);
    top: var(--window-y, 2rem);
    box-sizing: border-box;
    width: var(--window-w, 24rem);
    height: var(--window-h, auto);
    max-width: none;
    max-height: none;
    min-width: 12rem;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: box-shadow 150ms;

    &[open] { display: flex; }

    /* native resize handle, bottom-right */
    &[data-resizable] {
      resize: both;
      min-height: calc(var(--_titlebar) + 4rem);
    }

    /* -- Title bar ---------------------------------------------------- */
    & > .window-titlebar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex: none;
      height: var(--_titlebar);
      padding-inline-start: 0.75rem;
      background: var(--muted);
      border-bottom: 1px solid var(--border);
      cursor: default;
      user-select: none;
      touch-action: none;

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: -2px;
      }
    }

    & .window-icon {
      flex: none;
      width: 1rem;
      height: 1rem;
      object-fit: contain;
      color: var(--muted-foreground);
    }

    & .window-title {
      flex: 1;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 500;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* -- Controls: CSS-drawn glyphs --------------------------------------- */
    & .window-controls {
      display: flex;
      align-self: stretch;
      flex: none;
      margin: 0;
    }

    & .window-controls > button {
      position: relative;
      box-sizing: border-box;
      width: var(--_ctl);
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--foreground);
      cursor: default;
      transition: background-color 120ms, color 120ms;

      &::before,
      &::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        box-sizing: border-box;
      }

      &:hover { background: color-mix(in oklch, var(--foreground) 10%, transparent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    }

    /* minimize: a bar */
    & .window-minimize::before {
      width: 0.625rem;
      height: 1px;
      background: currentColor;
    }
    /* maximize: a box; restore (while maximized): two boxes */
    & .window-maximize::before {
      width: 0.625rem;
      height: 0.625rem;
      border: 1px solid currentColor;
      border-radius: 1px;
    }
    &[data-maximized] .window-maximize {
      &::before { translate: -40% -60%; width: 0.5rem; height: 0.5rem; }
      &::after {
        translate: -65% -35%;
        width: 0.5rem;
        height: 0.5rem;
        border: 1px solid currentColor;
        border-radius: 1px;
        background: var(--muted);
      }
    }
    /* close: an × */
    & .window-close {
      &::before,
      &::after {
        width: 0.75rem;
        height: 1px;
        background: currentColor;
        rotate: 45deg;
      }
      &::after { rotate: -45deg; }
    }
    /* Windows chrome: the × turns red with a white glyph. Stated through
       .window-controls > so it outranks the shared control hover (a light
       tint) - otherwise the white glyph landed on light grey. The other
       chromes style their own close button. */
    &:not([data-chrome="mac"], [data-chrome="linux"], [data-chrome="retro"]) .window-controls > .window-close:hover {
      background: oklch(0.58 0.21 27);
      color: oklch(0.99 0 0);
    }

    /* -- Toolbar: an app's menubar / buttons under the title bar -------- */
    & > .window-toolbar {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex: none;
      min-height: 2.25rem;
      padding: 0.125rem 0.375rem;
      border-bottom: 1px solid var(--border);
      background: var(--background);
      overflow-x: auto;
    }

    /* -- Body / status bar -------------------------------------------- */
    & > .window-body {
      flex: 1;
      min-height: 0;
      padding: 1rem;
      overflow: auto;
      overscroll-behavior: contain;
    }
    & > .window-body[data-flush] { padding: 0; }

    & > .window-statusbar {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: none;
      padding: 0.25rem 0.75rem;
      border-top: 1px solid var(--border);
      background: var(--muted);
      color: var(--muted-foreground);
      font-size: 0.75rem;
    }

    /* -- Active / inactive ---------------------------------------------- */
    &:not([data-active]) {
      box-shadow: var(--shadow-sm);
      & > .window-titlebar { color: var(--muted-foreground); }
    }

    /* -- Maximized: fill the desktop; minimized: rolled up to the bar -- */
    &[data-maximized] {
      inset: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      border-width: 0;
      resize: none;
      box-shadow: none;
    }
    &[data-minimized] {
      height: auto;
      min-height: 0;
      resize: none;
      & > :not(.window-titlebar) { display: none; }
      & > .window-titlebar { border-bottom: 0; }
    }
    &[data-dragging] { transition: none; }

    /* -- Chrome: macOS - traffic lights on the left, centred title ------- */
    &[data-chrome="mac"] {
      --_ctl: 1.25rem;
      & > .window-titlebar { padding-inline: 0.75rem; }
      & .window-controls {
        order: -1;
        align-self: center;
        gap: 0.5rem;
        margin-inline-end: 0.25rem;
      }
      & .window-controls > button {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 999px;
        color: oklch(0.3 0.05 30 / 0);
        &:hover { background: var(--_light); }
        &::before,
        &::after { scale: 0.7; }
      }
      /* the glyphs appear when the pointer is over the lights */
      & .window-controls:hover > button { color: oklch(0.3 0.05 30 / 0.8); }
      & .window-close { order: 1; --_light: oklch(0.68 0.2 25); }
      & .window-minimize { order: 2; --_light: oklch(0.82 0.16 85); }
      & .window-maximize { order: 3; --_light: oklch(0.74 0.17 145); }
      & .window-controls > button { background: var(--_light); }
      & .window-close:hover { color: oklch(0.3 0.05 30 / 0.8); }
      & .window-title { text-align: center; }
      /* the icon sits beside the centred title */
      & .window-icon { order: 1; }
      & .window-title { order: 0; }
      &[data-maximized] .window-maximize::after { background: var(--_light); }
      &:not([data-active]) .window-controls:not(:hover) > button { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); }
    }

    /* -- Chrome: Linux (GNOME) - round grey buttons on the right --------- */
    &[data-chrome="linux"] {
      --_ctl: 1.5rem;
      & > .window-titlebar { padding-inline-end: 0.5rem; }
      & .window-title { text-align: center; font-weight: 600; }
      & .window-controls { align-self: center; gap: 0.5rem; }
      & .window-controls > button {
        width: var(--_ctl);
        height: var(--_ctl);
        border-radius: 999px;
        background: color-mix(in oklch, var(--foreground) 9%, transparent);
        &::before,
        &::after { scale: 0.8; }
        &:hover { background: color-mix(in oklch, var(--foreground) 16%, transparent); }
      }
      & .window-close:hover { background: color-mix(in oklch, var(--foreground) 16%, transparent); color: var(--foreground); }
      &[data-maximized] .window-maximize::after { background: transparent; }
    }

    /* -- Chrome: retro - a bevelled 9x window with a gradient title ------ */
    &[data-chrome="retro"] {
      --_face: oklch(0.8 0 0);
      --_hi: oklch(1 0 0);
      --_lo: oklch(0.5 0 0);
      --_ctl: 1.125rem;
      padding: 3px;
      border: 0;
      border-radius: 0;
      background: var(--_face);
      color: oklch(0.15 0 0);
      box-shadow:
        inset -1px -1px 0 oklch(0.1 0 0), inset 1px 1px 0 var(--_face),
        inset -2px -2px 0 var(--_lo), inset 2px 2px 0 var(--_hi);
      & > .window-titlebar {
        height: 1.375rem;
        padding-inline: 0.25rem 0.125rem;
        gap: 0.25rem;
        border: 0;
        background: linear-gradient(90deg, oklch(0.3 0.16 264), oklch(0.62 0.12 240));
        color: oklch(1 0 0);
      }
      & .window-icon { color: inherit; }
      & .window-title { font-weight: 700; font-size: 0.75rem; }
      & .window-controls { align-self: center; gap: 2px; }
      & .window-controls > button {
        width: calc(var(--_ctl) + 2px);
        height: var(--_ctl);
        background: var(--_face);
        color: oklch(0.1 0 0);
        box-shadow:
          inset -1px -1px 0 oklch(0.1 0 0), inset 1px 1px 0 var(--_hi),
          inset -2px -2px 0 var(--_lo);
        &:hover { background: var(--_face); color: oklch(0.1 0 0); }
        &:active { box-shadow: inset 1px 1px 0 oklch(0.1 0 0), inset -1px -1px 0 var(--_hi), inset 2px 2px 0 var(--_lo); }
        &::before,
        &::after { scale: 0.75; }
      }
      & .window-close { margin-inline-start: 2px; }
      & .window-minimize::before { height: 2px; translate: -50% 150%; }
      & .window-maximize::before { border-top-width: 2px; }
      & .window-close::before,
      & .window-close::after { height: 2px; }
      &[data-maximized] .window-maximize::after { background: var(--_face); border-top-width: 2px; }
      & > .window-body {
        margin-top: 2px;
        background: oklch(1 0 0);
        box-shadow: inset 1px 1px 0 var(--_lo), inset -1px -1px 0 var(--_hi), inset 2px 2px 0 oklch(0.1 0 0);
      }
      & > .window-toolbar {
        margin-top: 2px;
        border: 0;
        background: var(--_face);
        color: oklch(0.15 0 0);
      }
      & > .window-statusbar {
        margin-top: 2px;
        border: 0;
        background: var(--_face);
        color: oklch(0.15 0 0);
        box-shadow: inset 1px 1px 0 var(--_lo), inset -1px -1px 0 var(--_hi);
      }
      &:not([data-active]) > .window-titlebar {
        background: linear-gradient(90deg, oklch(0.55 0 0), oklch(0.72 0 0));
        color: oklch(0.85 0 0);
      }
      &[data-maximized] { padding: 3px; }
    }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .window,
    .window .window-controls > button { transition: none; }
  }

  @media (prefers-contrast: more) {
    .window { border-color: var(--foreground); }
    .window > .window-titlebar { border-bottom-color: var(--foreground); }
    .window:not([data-active]) > .window-titlebar { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .window { border: 1px solid CanvasText; }
    .window[data-active] > .window-titlebar {
      background: Highlight;
      color: HighlightText;
      forced-color-adjust: none;
    }
    .window .window-controls > button::before,
    .window .window-controls > button::after { border-color: ButtonText; }
  }
}