/* Ubuntu Web — window chrome (GNOME/Yaru client-side decorations). */

#workspaces {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
}
#workspaces.animate { transition: transform 0.32s cubic-bezier(0.25, 0.9, 0.3, 1); }
/* the strip and workspaces are transparent to clicks so desktop icons / wallpaper
 * below stay reachable; windows themselves re-enable pointer events */
#workspaces, .workspace { pointer-events: none; }
.workspace > * { pointer-events: auto; }
.workspace > .snap-preview { pointer-events: none; }
.workspace {
  position: relative;
  height: 100%;
  flex: none;
  overflow: hidden;
}

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--win-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-win);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  overflow: visible;
  min-width: 200px;
  min-height: 120px;
  transition: box-shadow 0.15s ease, opacity 0.18s ease;
}
.window.focused { box-shadow: var(--shadow-win-focus); }
.window.animating { transition: left 0.22s cubic-bezier(0.25,0.9,0.3,1), top 0.22s cubic-bezier(0.25,0.9,0.3,1), width 0.22s cubic-bezier(0.25,0.9,0.3,1), height 0.22s cubic-bezier(0.25,0.9,0.3,1), box-shadow 0.15s ease; }
.window.maximized, .window.snapped { border-radius: 0; }
.window.maximized .titlebar, .window.snapped .titlebar { border-radius: 0; }

.window.opening { animation: win-open 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05); }
@keyframes win-open {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
.window.closing {
  animation: win-close 0.18s ease forwards;
  pointer-events: none;
}
@keyframes win-close {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.88); }
}
.window.minimizing {
  animation: win-minimize 0.24s cubic-bezier(0.4, 0, 0.9, 0.6) forwards;
  pointer-events: none;
}
@keyframes win-minimize {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--min-tx, -400px), var(--min-ty, 0)) scale(0.05); }
}
.window.minimized { display: none; }
.window.unminimizing { animation: win-unminimize 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.05); }
@keyframes win-unminimize {
  from { opacity: 0; transform: translate(var(--min-tx, -400px), var(--min-ty, 0)) scale(0.05); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* ---------- titlebar / headerbar ---------- */
.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  flex: none;
  padding: 0 8px;
  background: var(--headerbar-bg);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--border);
  cursor: default;
  position: relative;
}
.window:not(.focused) .titlebar { background: var(--headerbar-backdrop); }
.window:not(.focused) .titlebar .header-title { color: var(--fg-faint); }
.window:not(.focused) .window-controls .winbtn { opacity: 0.6; }

.header-left, .header-right { display: flex; align-items: center; gap: 6px; flex: none; }
.header-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  pointer-events: none;
}
.header-title .title-sub { font-weight: 400; font-size: 11.5px; color: var(--fg-dim); }

/* window control buttons — Yaru circular buttons */
.window-controls { display: flex; align-items: center; gap: 7px; flex: none; margin-left: 6px; }
.winbtn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--btn-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg);
  transition: background 0.12s ease;
  padding: 0;
}
.winbtn svg { width: 15px; height: 15px; display: block; }
.winbtn:hover { background: var(--btn-hover); }
.winbtn:active { background: var(--btn-active); }
.winbtn-close { background: var(--accent); color: #fff; }
.winbtn-close:hover { background: var(--accent-hover); }
.winbtn-close:active { background: var(--accent-active); }

/* dark chrome (Terminal-style) */
.window.dark-chrome { background: #2d2233; }
.window.dark-chrome .titlebar {
  background: linear-gradient(#3d2f45, #362a3d);
  border-bottom-color: rgba(0,0,0,0.4);
}
.window.dark-chrome:not(.focused) .titlebar { background: #302636; }
.window.dark-chrome .header-title { color: rgba(255,255,255,0.92); }
.window.dark-chrome:not(.focused) .header-title { color: rgba(255,255,255,0.45); }
.window.dark-chrome .winbtn { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }
.window.dark-chrome .winbtn:hover { background: rgba(255,255,255,0.2); }
.window.dark-chrome .winbtn-close { background: var(--accent); color: #fff; }
.window.dark-chrome .winbtn-close:hover { background: var(--accent-hover); }

/* ---------- content ---------- */
.window-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  display: flex;
  flex-direction: column;
}
.window.maximized .window-content, .window.snapped .window-content { border-radius: 0; }

/* ---------- resize handles ---------- */
.resize-handle { position: absolute; z-index: 5; }
.rh-n { top: -5px; left: 8px; right: 8px; height: 8px; cursor: n-resize; }
.rh-s { bottom: -5px; left: 8px; right: 8px; height: 8px; cursor: s-resize; }
.rh-e { right: -5px; top: 8px; bottom: 8px; width: 8px; cursor: e-resize; }
.rh-w { left: -5px; top: 8px; bottom: 8px; width: 8px; cursor: w-resize; }
.rh-ne { top: -6px; right: -6px; width: 14px; height: 14px; cursor: ne-resize; }
.rh-nw { top: -6px; left: -6px; width: 14px; height: 14px; cursor: nw-resize; }
.rh-se { bottom: -6px; right: -6px; width: 14px; height: 14px; cursor: se-resize; }
.rh-sw { bottom: -6px; left: -6px; width: 14px; height: 14px; cursor: sw-resize; }
.window.maximized .resize-handle, .window.snapped .resize-handle { display: none; }

body.dragging-window, body.dragging-window * { cursor: grabbing !important; }
body.dragging-window .window, body.resizing-window .window { transition: none; }
body.dragging-window iframe, body.resizing-window iframe { pointer-events: none; }

/* ---------- snap preview ---------- */
.snap-preview {
  position: absolute;
  z-index: 4000;
  background: rgba(var(--accent-rgb), 0.22);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.98);
  transition: all 0.16s cubic-bezier(0.25, 0.9, 0.3, 1);
  pointer-events: none;
}
.snap-preview.show { opacity: 1; transform: scale(1); }