/**
 * Manic Pixels Web OS — Window Chrome
 * Visual glassmorphism inspirado no Puter.
 * Usa exclusivamente var(--mp-*) — re-skinning dinâmico automático.
 * Sprint 2 · WP-5 (itens 22–25): minimized-bar, save buttons, readonly badge
 */

/* ── Workspace ────────────────────────────────────────────────────────────── */

#mp-workspace {
  position: fixed;
  inset: 0;
  bottom: var(--mp-taskbar-height, 44px); /* Sprint 3 sobrescreve conforme posição */
  overflow: hidden;
  z-index: 0;
}

/* ── Janela — container ───────────────────────────────────────────────────── */

.mp-window {
  position: absolute;
  display: flex;
  flex-direction: column;

  background:        var(--mp-window-bg);
  border:            var(--mp-window-border-width) solid var(--mp-window-border);
  border-radius:     var(--mp-window-radius);
  box-shadow:        var(--mp-window-shadow);

  /* Containment evita reflows em cascata */
  contain: layout paint;
  overflow: hidden;

  /* Transições suaves de sombra e opacidade */
  transition:
    box-shadow 0.18s ease,
    opacity    0.18s ease;

  /* Sem GPU layer por padrão */
  will-change: auto;

  min-width:  200px;
  min-height: 140px;

  /* Evita que o texto da titlebar seja selecionado durante drag */
  -webkit-user-select: none;
  user-select: none;
}

/* ── Aero Glass — implementação fiel ao Windows 7 DWM ───────────────────────
   Pipeline exato do W7:
     1. backdrop-filter: blur() → borra o que está atrás da janela
     2. background: rgba(accent, tint-opacity) → cor de acento misturada sobre o blur
        (este tint é sempre visível independente do fundo, inclusive cor sólida escura)
     3. Apenas o CHROME (titlebar + bordas) é glass. O BODY é opaco — igual ao W7.
   ─────────────────────────────────────────────────────────────────────────── */
.mp-window.glass-on {
  backdrop-filter:         blur(var(--mp-window-blur)) saturate(var(--mp-aero-saturation, 160%));
  -webkit-backdrop-filter: blur(var(--mp-window-blur)) saturate(var(--mp-aero-saturation, 160%));

  /* Tint da cor de acento — exatamente como o DWM do W7.
     Funciona em qualquer fundo (inclusive escuro sólido) porque o tint
     sempre aparece, independente do que o blur capturou atrás. */
  background: rgba(var(--mp-accent-rgb), var(--mp-glass-tint-opacity, 0.35)) !important;

  /* Borda com acento + highlight superior (reflexo de luz — marca visual do W7) */
  border-color: rgba(var(--mp-accent-rgb), 0.70) !important;
  box-shadow:
    var(--mp-window-shadow),
    inset 0  1px 0 rgba(255, 255, 255, 0.55),   /* reflexo de luz no topo */
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset  1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.10);
}

/* Titlebar: transparent → herda o tint de acento do container.
   Aplicado a focada E inativa — ambas mostram o glass uniformemente.
   (diferença ativo/inativo vem do opacity: 0.88 na janela inativa, não do chrome) */
.mp-window.glass-on .mp-titlebar,
.mp-window.glass-on:not(.focused) .mp-titlebar {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

/* Text-shadow para legibilidade sobre o tint colorido */
.mp-window.glass-on .mp-window-title {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.80), 0 0 10px rgba(0, 0, 0, 0.50);
}

/* Body: OPACO — como no W7 (área client nunca é glass, só o chrome é) */
.mp-window.glass-on .mp-window-body {
  background: var(--mp-window-bg-solid) !important;
}

/* Janela em drag — cursor e elevação */
.mp-window.mp-dragging {
  cursor: grabbing !important;
  box-shadow:
    var(--mp-window-shadow),
    0 20px 60px rgba(0, 0, 0, 0.45);
  opacity: 0.96;
  transition: none;
}

/* Janela focada — acento sutil + GPU layer */
.mp-window.focused {
  box-shadow:
    var(--mp-window-shadow),
    0 0 0 1px rgba(var(--mp-accent-rgb), 0.25);
  will-change: transform;
}

/* Janela focada COM glass — acento de foco + highlights do Aero */
.mp-window.focused.glass-on {
  box-shadow:
    var(--mp-window-shadow),
    0 0 0 1px rgba(var(--mp-accent-rgb), 0.45),
    inset 0  1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset  1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12);
  will-change: transform;
}

/* Janela inativa — opacidade reduzida conforme efeito */
.mp-window:not(.focused) {
  opacity: 0.88;
}

/* Janela minimizada — oculta o elemento inteiro (P10: corrige chrome visível) */
.mp-window.minimized {
  display: none;
}

/* Janela maximizada — preenche o workspace */
.mp-window.maximized {
  left:          0 !important;
  top:           0 !important;
  width:         100% !important;
  height:        100% !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  border:        none !important;
  transition:    none;
}

/* Janela snapped (meia tela) */
.mp-window.snapped {
  border-radius: 0;
  transition: none;
}

/* Janela suspensa (Tier 2, iframe) — zero custo de rendering, heap vivo */
.mp-window.suspended > .mp-window-body {
  content-visibility: hidden;
}

/* ── Titlebar ─────────────────────────────────────────────────────────────── */

.mp-titlebar {
  display:        flex;
  align-items:    center;
  gap:            4px;
  height:         var(--mp-titlebar-height, 30px);
  padding:        0 6px 0 10px;
  flex-shrink:    0;

  background:     var(--mp-titlebar-bg);
  border-bottom:  1px solid var(--mp-window-border);
  cursor:         default;

  /* Selecionar texto na titlebar é inútil e confuso */
  -webkit-user-select: none;
  user-select:    none;
}

/* Titlebar da janela inativa */
.mp-window:not(.focused) .mp-titlebar {
  background: var(--mp-titlebar-inactive-bg);
}

/* Título da janela */
.mp-window-title {
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;

  font-family:   var(--mp-font-ui);
  font-size:     var(--mp-font-size-sm);
  font-weight:   500;
  color:         var(--mp-titlebar-fg);
  letter-spacing: 0.01em;
  text-align:    center;
}

.mp-window:not(.focused) .mp-window-title {
  color: var(--mp-titlebar-inactive-fg);
}

/* ── Corpo da janela ──────────────────────────────────────────────────────── */

.mp-window-body {
  flex:           1;
  min-height:     0;   /* permite shrink dentro do flex */
  overflow:       hidden;
  position:       relative;

  background:     var(--mp-window-bg-solid);
  color:          var(--mp-menu-fg);
  font-family:    var(--mp-font-ui);
  font-size:      var(--mp-font-size-base);

  /* Textos selecionáveis no corpo */
  -webkit-user-select: text;
  user-select:    text;
}

/* Iframe do Tier 2 preenche o corpo */
.mp-sandbox-frame {
  width:   100%;
  height:  100%;
  border:  none;
  display: block;
}

/* ── Handle de resize (canto inferior direito) ────────────────────────────── */

.mp-resize-se {
  position:   absolute;
  right:      0;
  bottom:     0;
  width:      16px;
  height:     16px;
  cursor:     se-resize;
  z-index:    1;
  /* ícone sutil via gradiente diagonal */
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 55%,
    transparent 70%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0.08) 85%,
    transparent 85%
  );
}

.mp-window.maximized .mp-resize-se,
.mp-window.snapped   .mp-resize-se {
  display: none;
}

/* ── Aero Snap — indicador de posição ────────────────────────────────────── */

#mp-snap-indicator {
  position:       absolute;
  pointer-events: none;
  z-index:        9999;

  background: rgba(var(--mp-accent-rgb), 0.12);
  border:     2px solid rgba(var(--mp-accent-rgb), 0.45);
  border-radius: var(--mp-window-radius);
  backdrop-filter: blur(4px);

  transition: none;
  box-sizing: border-box;
}

/* ── Scrollbar dentro de janelas (SimpleBar override) ────────────────────── */

.mp-window-body [data-simplebar] {
  height: 100%;
}

/* ── Skeleton / loading state ─────────────────────────────────────────────── */

.mp-window-body.mp-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.mp-window-body.mp-loading::after {
  content:       '';
  width:         32px;
  height:        32px;
  border:        2px solid rgba(255, 255, 255, 0.12);
  border-top:    2px solid var(--mp-accent);
  border-radius: 50%;
  animation:     mp-spin 0.7s linear infinite;
}

@keyframes mp-spin {
  to { transform: rotate(360deg); }
}

/* ── Placeholder para apps pendentes ─────────────────────────────────────── */

.mp-app-placeholder,
.mp-app-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  height:          100%;
  font-family:     var(--mp-font-ui);
  font-size:       var(--mp-font-size-sm);
  padding:         24px;
  text-align:      center;
  -webkit-user-select: none;
  user-select:     none;
}

.mp-app-placeholder { color: rgba(255, 255, 255, 0.28); }
.mp-app-error       { color: var(--mp-btn-close-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   WP-5 — Sessão 3: itens 22, 23, 24, 25
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Item 23 — Barra de janelas minimizadas ──────────────────────────────── */

#mp-min-bar {
  position:        fixed;
  bottom:          var(--mp-taskbar-height, 44px);
  left:            0;
  right:           0;
  min-height:      36px;
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             4px;
  padding:         4px 8px;
  background:      rgba(10, 10, 18, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top:      1px solid rgba(255, 255, 255, 0.07);
  z-index:         9980;
  pointer-events:  auto;
  box-sizing:      border-box;

  /* Oculto quando vazio (sem filhos) */
  &:empty {
    display: none;
  }
}

/* Fallback para browsers sem :empty suporte completo */
#mp-min-bar:not(:has(.mp-min-tile)) {
  display: none;
}

.mp-min-tile {
  display:         flex;
  align-items:     center;
  gap:             6px;
  padding:         0 6px 0 6px;
  height:          28px;
  min-width:       120px;
  max-width:       200px;
  background:      rgba(255, 255, 255, 0.07);
  border:          1px solid rgba(255, 255, 255, 0.10);
  border-radius:   6px;
  cursor:          default;
  flex-shrink:     0;
  user-select:     none;
  transition:      background 0.12s;

  font-family:     var(--mp-font-ui, system-ui, sans-serif);
  font-size:       11px;
  color:           rgba(255, 255, 255, 0.70);
}

.mp-min-tile:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mp-min-tile-icon {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  object-fit:  contain;
}

.mp-min-tile-icon-emoji {
  font-size:   13px;
  line-height: 1;
  flex-shrink: 0;
}

.mp-min-tile-name {
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  min-width:     0;
}

.mp-min-tile-btns {
  display:     flex;
  align-items: center;
  gap:         2px;
  flex-shrink: 0;
  margin-left: 4px;
}

.mp-min-tile-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  border:          none;
  border-radius:   4px;
  background:      transparent;
  color:           rgba(255, 255, 255, 0.40);
  cursor:          pointer;
  font-size:       10px;
  line-height:     1;
  padding:         0;
  transition:      background 0.10s, color 0.10s;
}

.mp-min-tile-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color:      rgba(255, 255, 255, 0.85);
}

/* ── Item 24 — Botões Salvar / Salvar-como no chrome ─────────────────────── */

.mp-btn-save {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border:          none;
  border-radius:   4px;
  background:      transparent;
  color:           rgba(255, 255, 255, 0.55);
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
  transition:      background 0.10s, color 0.10s;
  position:        relative;
}

.mp-btn-save svg {
  width:  12px;
  height: 12px;
}

.mp-btn-save:hover {
  background: rgba(255, 255, 255, 0.10);
  color:      rgba(255, 255, 255, 0.90);
}

.mp-btn-save:active {
  background: rgba(var(--mp-accent-rgb), 0.20);
  color:      var(--mp-accent, #3daee9);
}

/* Separador fino entre botões de save e botões de sistema */
.mp-window-controls-sep {
  display:    inline-block;
  width:      1px;
  height:     14px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin:     0 2px;
  align-self: center;
}

/* ── Item 25 — Badge "somente leitura" no titlebar ───────────────────────── */

.mp-titlebar-badge--readonly {
  display:         inline-flex;
  align-items:     center;
  flex-shrink:     0;
  padding:         1px 6px;
  border-radius:   3px;
  background:      rgba(240, 160, 0, 0.18);
  border:          1px solid rgba(240, 160, 0, 0.35);
  color:           rgba(240, 185, 60, 0.90);
  font-family:     var(--mp-font-ui, system-ui, sans-serif);
  font-size:       9px;
  font-weight:     600;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  white-space:     nowrap;
  user-select:     none;
  cursor:          default;
}

.mp-window.glass-on .mp-titlebar-badge--readonly {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.80);
}