/* ============================================================
   css/floating-windows.css — macOS/Windows 11 floating page windows
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
/*
   PERFORMANCE: Only opacity + scale are animated — both are GPU-composited
   and never trigger layout or paint. clip-path and filter were removed
   because they force main-thread repaints and cause visible lag.
   JS always sets transform:translate(x,y) for position; animations must
   NOT touch translate individually to avoid conflicts with JS positioning.
   We use a wrapper element (.fw-anim-layer inside .fw-window) for scale
   so the JS translate on .fw-window is never overridden.
*/

/* Open — fade + subtle scale, GPU-only */
@keyframes fw-open-fly {
  0%   { opacity: 0; transform: scale(0.94); }
  60%  { opacity: 1; transform: scale(1.01); }
  100% { opacity: 1; transform: scale(1); }
}

/* Close — fade + shrink, GPU-only */
@keyframes fw-close {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* Minimize — fade + shrink down */
@keyframes fw-minimize {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.88) translateY(10px); }
}

/* Restore from shelf */
@keyframes fw-restore {
  0%   { opacity: 0; transform: scale(0.88) translateY(10px); }
  70%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* Shelf items slide in */
@keyframes fw-shelf-in {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Base Window — POSITION LAYER ONLY ───────────────────── */
/* .fw-window is purely a position anchor (JS translate).
   Visuals, animations, and overflow live on .fw-inner. */

.fw-window {
  position: fixed;
  top: 0; left: 0;   /* JS always sets transform:translate(x,y) for position */
  width: 580px;
  height: 500px;
  min-width: 320px;
  min-height: 240px;
  max-width: 96vw;
  max-height: 94vh;
  /* Promote to compositor layer so JS translate is free */
  will-change: transform;
  z-index: 120;
  /* contain:layout+style (NOT paint/strict) — paint containment would clip
     position:fixed popups (slash menu, icon picker) that are children of body */
  contain: layout style;
}

/* ── Inner layer — VISUAL + ANIMATION LAYER ──────────────── */
/* All styles that were on .fw-window move here so that CSS
   animations (transform: scale) don't fight JS translate. */

.fw-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  background: var(--bg, #ffffff);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.06),
    0 0 0 0.5px rgba(0,0,0,0.04);
  /* Only animate opacity — never box-shadow (triggers paint) */
  will-change: opacity, transform;
}

/* Opening — GPU-only scale+opacity on .fw-inner */
.fw-inner.fw-opening {
  animation: fw-open-fly 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* Closing */
.fw-inner.fw-closing {
  animation: fw-close 0.16s ease-in both;
  pointer-events: none;
}

/* Minimize to shelf */
.fw-inner.fw-minimizing {
  animation: fw-minimize 0.18s ease-in both;
  pointer-events: none;
}

/* Restore from shelf */
.fw-inner.fw-restoring {
  animation: fw-restore 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ── Focus State ──────────────────────────────────────────── */

.fw-window.fw-focused .fw-inner {
  border-color: var(--border, rgba(0,0,0,0.14));
  box-shadow:
    0 16px 48px rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.10),
    0 0 0 0.5px rgba(0,0,0,0.05);
}

.fw-window:not(.fw-focused) .fw-inner {
  box-shadow:
    0 4px 14px rgba(0,0,0,0.07),
    0 1px 3px rgba(0,0,0,0.04);
  opacity: 0.92;
}

/* Maximized state — smooth transition for size/position changes */
.fw-window.fw-maximized {
  transition: width 0.22s cubic-bezier(0.34,1.4,0.64,1),
              height 0.22s cubic-bezier(0.34,1.4,0.64,1),
              transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
  border-radius: 8px;
}
.fw-window.fw-maximized .fw-inner {
  border-radius: 8px;
}

.fw-window:not(.fw-focused) .fw-titlebar {
  opacity: 0.8;
}

/* Dragging — disable text selection & transitions */
.fw-window.fw-is-dragging .fw-inner,
.fw-window.fw-is-resizing .fw-inner {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Title Bar ────────────────────────────────────────────── */

.fw-titlebar {
  height: 40px;
  min-height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 10px 0 8px;
  gap: 6px;
  background: var(--bg-2, #f7f8fa);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.fw-titlebar.fw-dragging {
  cursor: grabbing;
}

/* ── Traffic Lights ───────────────────────────────────────── */

.fw-traffic {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.fw-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 0;
  /* Use transform for hover feedback — GPU composited, zero paint */
  transition: transform 0.08s ease;
  will-change: transform;
}

.fw-traffic:hover .fw-btn:hover {
  transform: scale(1.15);
}

.fw-btn-close    { background: #ff5f57; }
.fw-btn-collapse { background: #febc2e; }
.fw-btn-maximize { background: #28c940; }

/* Glyph overlay — only visible on group hover */
.fw-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  color: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

.fw-btn-close::after    { content: '×'; font-size: 10px; }
.fw-btn-collapse::after { content: '−'; }
.fw-btn-maximize::after { content: '⛶'; font-size: 8px; }
.fw-window.fw-maximized .fw-btn-maximize::after { content: '⧉'; font-size: 8px; }

.fw-traffic:hover .fw-btn::after { opacity: 1; }
.fw-traffic:hover .fw-btn:hover  { filter: brightness(0.88); }

/* ── Title Text ───────────────────────────────────────────── */

.fw-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1f2328);
  white-space: nowrap;
  overflow: hidden;
}

.fw-title span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-title-icon {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Open-in-main button ──────────────────────────────────── */

.fw-btn-open-main {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2, #787774);
  opacity: 0;
  transition: opacity 0.15s, background 0.12s, color 0.12s;
}

.fw-titlebar:hover .fw-btn-open-main,
.fw-window.fw-focused .fw-btn-open-main {
  opacity: 1;
}

.fw-btn-open-main:hover {
  background: var(--hover, rgba(0,0,0,0.06));
  color: var(--text, #1f2328);
}

/* ── Window Body ──────────────────────────────────────────── */

.fw-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Match the real editor scroll */
  scrollbar-width: thin;
  scrollbar-color: var(--border, rgba(0,0,0,0.12)) transparent;
}

.fw-body::-webkit-scrollbar { width: 6px; }
.fw-body::-webkit-scrollbar-thumb {
  background: var(--border, rgba(0,0,0,0.14));
  border-radius: 3px;
}

/* ── Page Cover ───────────────────────────────────────────── */

.fw-cover {
  width: 100%;
  height: 110px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.fw-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cover hover actions — Change cover + Reposition */
.fw-cover-actions {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}

.fw-cover:hover .fw-cover-actions { opacity: 1; }

.fw-cover-btn {
  padding: 3px 8px;
  border-radius: 5px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.1s;
}

.fw-cover-btn:hover { background: rgba(0,0,0,0.72); }

/* ── Page Header (icon + title) ───────────────────────────── */

.fw-page-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 40px 4px;
}

/* Match real editor .page-icon-wrap */
.fw-page-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 4px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.12s;
  overflow: hidden;
}

/* Constrain SVG/img icons that may be large */
.fw-page-icon svg,
.fw-page-icon img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  display: block;
  flex-shrink: 0;
}

.fw-page-icon:hover {
  background: var(--hover, rgba(0,0,0,0.06));
}

/* ── Page Title — matches real .page-title ────────────────── */

.fw-page-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--text, #1f2328);
  outline: none;
  border: none;
  background: transparent;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: inherit;
  line-height: 1.25;
  word-break: break-word;
  white-space: pre-wrap;
}

.fw-page-title:empty::before {
  content: attr(data-placeholder);
  color: var(--text-light, #b6b5b1);
  pointer-events: none;
}

/* ── Blocks container — matches real editor spacing ───────── */

.fw-page-blocks {
  padding: 4px 40px 40px;
}

/* ── Page not found ───────────────────────────────────────── */

.fw-page-missing {
  padding: 48px 40px;
  color: var(--text-2, #787774);
  font-size: 14px;
  text-align: center;
}

/* ── Resize Handles ───────────────────────────────────────── */

.fw-resize-n,
.fw-resize-s,
.fw-resize-e,
.fw-resize-w,
.fw-resize-ne,
.fw-resize-nw,
.fw-resize-se,
.fw-resize-sw {
  position: absolute;
  z-index: 20;
  background: transparent;
  /* Prevent clicks from propagating to window content */
}

.fw-resize-n  { top: 0;    left: 8px;   right: 8px;   height: 5px; cursor: ns-resize; }
.fw-resize-s  { bottom: 0; left: 8px;   right: 8px;   height: 5px; cursor: ns-resize; }
.fw-resize-e  { right: 0;  top: 8px;    bottom: 8px;  width: 5px;  cursor: ew-resize; }
.fw-resize-w  { left: 0;   top: 8px;    bottom: 8px;  width: 5px;  cursor: ew-resize; }
.fw-resize-ne { top: 0;    right: 0;    width: 10px;  height: 10px; cursor: nesw-resize; }
.fw-resize-nw { top: 0;    left: 0;     width: 10px;  height: 10px; cursor: nwse-resize; }
.fw-resize-se { bottom: 0; right: 0;    width: 10px;  height: 10px; cursor: nwse-resize; }
.fw-resize-sw { bottom: 0; left: 0;     width: 10px;  height: 10px; cursor: nesw-resize; }

/* ── Window Shelf ─────────────────────────────────────────── */

#fw-shelf {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  /* Hidden by default — JS sets display:flex when there are minimized windows */
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-2, #f7f8fa);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 300;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

/* Enable pointer events only when visible (JS adds display:flex) */
#fw-shelf[style*="flex"] {
  pointer-events: auto;
}

/* Shelf item (a minimized window) */
.fw-shelf-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 7px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #1f2328);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  transition: background 0.12s;
  position: relative;
  animation: fw-shelf-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.fw-shelf-item:hover {
  background: var(--hover, rgba(0,0,0,0.06));
}

.fw-shelf-icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}

.fw-shelf-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-shelf-close {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2, #787774);
  opacity: 0;
  transition: opacity 0.1s, background 0.1s;
  padding: 0;
}

.fw-shelf-item:hover .fw-shelf-close { opacity: 1; }
.fw-shelf-close:hover { background: rgba(255,60,60,0.15); color: #e03e3e; }

/* ── Dark theme overrides ─────────────────────────────────── */

[data-theme="dark"] .fw-inner {
  background: var(--bg, #191919);
  border-color: var(--border, rgba(255,255,255,0.1));
  box-shadow:
    0 4px 20px rgba(0,0,0,0.45),
    0 1px 6px rgba(0,0,0,0.3),
    0 0 0 0.5px rgba(255,255,255,0.04);
}

[data-theme="dark"] .fw-window.fw-focused .fw-inner {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 6px 20px rgba(0,0,0,0.38),
    0 0 0 0.5px rgba(255,255,255,0.07);
}

[data-theme="dark"] .fw-titlebar {
  background: var(--bg-2, #202020);
  border-bottom-color: var(--border, rgba(255,255,255,0.07));
}

[data-theme="dark"] #fw-shelf {
  background: rgba(30,30,30,0.92);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}

/* Liquid Glass mode */
html[data-visual="liquid-glass"] .fw-inner {
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  background: rgba(255,255,255,0.82);
}

html[data-visual="liquid-glass"][data-theme="dark"] .fw-inner {
  background: rgba(25,25,25,0.88);
}

html[data-visual="liquid-glass"] #fw-shelf {
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  background: rgba(255,255,255,0.72);
}

html[data-visual="liquid-glass"][data-theme="dark"] #fw-shelf {
  background: rgba(25,25,25,0.80);
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fw-window.fw-opening,
  .fw-window.fw-closing,
  .fw-window.fw-minimizing,
  .fw-window.fw-restoring,
  .fw-shelf-item {
    animation: none !important;
  }
  .fw-window {
    transition: none !important;
  }
}