/*
  Wortic macOS UI Kit — Window
  wm-window — chrome de janela desktop: title bar unificada, traffic
  lights, corpo, variantes de vibrancy/transparência/fullscreen/utility.

  Liquid Glass 2026: cantos ~22px, sombra de janela em camadas
  (hairline ring + contato + ambiente profundo) e edge highlight de
  vidro desenhado por ::after sobre todo o chrome.
*/

@layer components {
  .wm-window {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    background: var(--wm-surface-base);
    border-radius: var(--wm-radius-window-xl, 22px);
    overflow: hidden;
    color: var(--wm-label-primary);
    /* Sombra macOS real: ring hairline + contato + ambiente em camadas */
    box-shadow: var(
      --wm-shadow-window,
      var(--wm-shadow-ring),
      0 0 0 0.5px hsl(var(--wm-shadow-color) / 0.06),
      0 2px 6px hsl(var(--wm-shadow-color) / 0.05),
      0 18px 50px -12px hsl(var(--wm-shadow-color) / 0.22),
      var(--wm-shadow-4)
    );
  }

  /* Edge highlight de vidro — acima de todos os filhos, sem capturar
     eventos. Dá a borda interna clara do Liquid Glass. */
  .wm-window::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    box-shadow: inset 0 0 0 0.5px
      color-mix(in srgb, var(--wm-material-glass-border) 80%, transparent);
  }

  .wm-window--floating {
    box-shadow: var(--wm-shadow-ring),
      0 1px 3px hsl(var(--wm-shadow-color) / 0.07),
      0 10px 32px -8px hsl(var(--wm-shadow-color) / 0.2),
      var(--wm-shadow-3);
  }

  /* ---------- Title Bar ---------- */

  .wm-titlebar {
    flex: none;
    display: flex;
    align-items: center;
    height: 44px;
    padding-inline: var(--wm-space-7);
    gap: var(--wm-space-6);
    /* Specular de topo (2-4%) sobre o material de vidro */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0) 55%
      ),
      var(--wm-material-toolbar-bg);
    backdrop-filter: blur(var(--wm-material-blur-strong, 40px))
      saturate(var(--wm-material-saturate-strong, 1.9));
    -webkit-backdrop-filter: blur(var(--wm-material-blur-strong, 40px))
      saturate(var(--wm-material-saturate-strong, 1.9));
    border-bottom: var(--wm-border-width-hairline) solid
      color-mix(in srgb, var(--wm-separator) 85%, transparent);
    box-shadow: inset 0 1px 0
      color-mix(in srgb, var(--wm-material-glass-border) 55%, transparent);
    -webkit-app-region: drag;
  }
  .wm-titlebar :is(button, input, select, a, [role="button"]) {
    -webkit-app-region: no-drag;
  }

  /* Unified title bar: title bar + toolbar content share one surface,
     sem separador entre eles (padrão macOS moderno). */
  .wm-titlebar--unified {
    border-bottom: none;
  }

  .wm-titlebar__traffic-lights {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
  }

  .wm-traffic-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    position: relative;
    transition: filter var(--wm-duration-fast) var(--wm-ease-standard);
  }
  /* Bezel + especular: gradiente radial fino, nunca círculo chapado */
  .wm-traffic-light::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15),
      inset 0 1px 1px rgba(255, 255, 255, 0.4),
      inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  }
  /* Traffic lights macOS — EXCEÇÃO documentada (ver auditoria.md "A
     exceção do hex"): estas nove cores (três raios de gradiente por
     luz) são as cores de SISTEMA do macOS para fechar/minimizar/zoom.
     Não são cor de tema nem de marca — trocar por token de superfície
     quebraria o reconhecimento do padrão (que é literalmente "sinal de
     trânsito" universal em qualquer app macOS). */
  .wm-traffic-light--close {
    background: radial-gradient(
      circle at 32% 28%,
      #ff9d95 0%,
      #ff5f57 55%,
      #eb4a41 100%
    );
  }
  .wm-traffic-light--minimize {
    background: radial-gradient(
      circle at 32% 28%,
      #ffd970 0%,
      #febc2e 55%,
      #efa81f 100%
    );
  }
  .wm-traffic-light--zoom {
    background: radial-gradient(
      circle at 32% 28%,
      #7ce996 0%,
      #28c840 55%,
      #1fae37 100%
    );
  }
  .wm-traffic-light:active {
    filter: brightness(0.85) saturate(1.15);
  }

  .wm-titlebar__traffic-lights.is-inactive .wm-traffic-light {
    background: var(--wm-fill-primary);
  }
  .wm-titlebar__traffic-lights.is-inactive .wm-traffic-light::after {
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }

  .wm-traffic-light .wm-icon {
    width: 7px;
    height: 7px;
    opacity: 0;
    color: rgba(0, 0, 0, 0.55);
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-titlebar__traffic-lights:hover .wm-traffic-light .wm-icon,
  .wm-titlebar__traffic-lights:focus-within .wm-traffic-light .wm-icon {
    opacity: 1;
  }

  .wm-titlebar__title {
    flex: 1 1 auto;
    text-align: center;
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Quando há toolbar de verdade, o título alinha à esquerda junto dos
     traffic lights e o conteúdo da toolbar ocupa o resto. */
  .wm-titlebar--leading .wm-titlebar__title {
    text-align: start;
    flex: none;
  }

  /* ---------- Window body ---------- */

  .wm-window__body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    background: var(--wm-surface-base);
  }

  .wm-window__divider {
    flex: none;
    width: var(--wm-border-width-hairline);
    background: color-mix(in srgb, var(--wm-separator) 85%, transparent);
  }

  /* ---------- Variants ---------- */

  .wm-window--utility {
    border-radius: var(--wm-radius-panel);
  }
  .wm-window--utility .wm-titlebar {
    height: 32px;
    padding-inline: var(--wm-space-5);
  }
  .wm-window--utility .wm-titlebar__title {
    font-size: var(--wm-font-size-caption);
  }

  .wm-window--inactive {
    box-shadow: var(--wm-shadow-ring),
      0 1px 3px hsl(var(--wm-shadow-color) / 0.06),
      0 10px 30px -10px hsl(var(--wm-shadow-color) / 0.14);
  }
  .wm-window--inactive .wm-titlebar__title {
    color: var(--wm-label-tertiary);
  }

  .wm-window--fullscreen {
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .wm-window--fullscreen::after {
    display: none;
  }

  .wm-window--transparent .wm-window__body {
    background: transparent;
  }
}