/* ============================================================
   WINDOWS — Window chrome, titlebar, body, resize handles
   ============================================================ */

/* ---- WINDOW BASE ---- */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 260px;
  border: 1px solid var(--win-border, rgba(28,80,160,0.36));
  border-radius: var(--radius-win);
  background: var(--win-bg, linear-gradient(180deg, #f5fbff, #eaf3ff));
  box-shadow: var(--shadow-window);
  overflow: hidden;
  /* NO transition on position/size */
  will-change: transform;
  /* Full opacity — glassmorphism removed */
  opacity: 1;
}

/* Default app accent tokens */
.window {
  --win-border:      rgba(28,80,160,0.36);
  --win-bg:          linear-gradient(180deg, #f5fbff, #eaf3ff);
  --win-title-bg:    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(220,235,255,0.92) 45%, rgba(90,155,240,0.80) 100%);
  --win-title-color: #0f2a50;
  --win-body-bg:     transparent;
}

/* Opening animation */
.window.opening {
  animation: window-open 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes window-open {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  65%  { opacity: 1; transform: translateY(-4px) scale(1.004); }
  to   { opacity: 1; transform: none; }
}

/* Dragging — suppress ALL transitions so movement is instant */
.window.dragging,
.window.resizing {
  transition: none !important;
  box-shadow: 0 32px 80px rgba(10,30,80,0.55), 0 1px 0 rgba(255,255,255,0.7) inset;
  border-color: rgba(30,93,191,0.62);
}

/* Inactive */
.window.inactive {
  opacity: 0.96;
  filter: saturate(0.95);
}

/* ---- TITLE BAR — taller, more presence ---- */
.window-titlebar {
  height: 46px;
  display: grid;
  /* 3 columns: spacer (same width as controls), center title wrap, right controls */
  grid-template-columns: 144px 1fr 144px;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid rgba(28,80,160,0.22);
  background: var(--win-title-bg);
  color: var(--win-title-color);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 3l2.6 2.6L13 7.2v3.3h3.3l1.6-1.6L20.5 12l-2.6 2.6-1.6-1.6H13v3.3l1.6 1.6L12 20.5l-2.6-2.6 1.6-1.6H7.7l-1.6 1.6L3.5 12l2.6-2.6 1.6 1.6H11V7.2L9.4 5.6z' fill='%23f0f6ff' stroke='%230e2540' stroke-width='0.9'/%3E%3C/svg%3E") 12 12, move;
  user-select: none;
  touch-action: none;
}

.window-titlebar:active {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 3l2.6 2.6L13 7.2v3.3h3.3l1.6-1.6L20.5 12l-2.6 2.6-1.6-1.6H13v3.3l1.6 1.6L12 20.5l-2.6-2.6 1.6-1.6H7.7l-1.6 1.6L3.5 12l2.6-2.6 1.6 1.6H11V7.2L9.4 5.6z' fill='%23f0f6ff' stroke='%230e2540' stroke-width='0.9'/%3E%3C/svg%3E") 12 12, grabbing;
}

.window-title-spacer {
  /* Empty div to balance the grid so title is perfectly centered */
  width: 100%;
}

.window-title-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Center the icon and text */
  gap: 10px;
  padding: 0;
}

.window-app-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--win-icon-bg, rgba(255,255,255,0.5));
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.window-app-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--win-icon-color, #1a3d6a);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.window-title {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--win-title-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Window control buttons — always-visible semantic colors */
.window-controls {
  display: inline-flex;
  align-self: stretch;
  border-left: 1px solid rgba(28,80,160,0.12);
  width: 144px; /* 3 buttons * 48px */
}

.win-btn {
  width: 48px;
  min-height: 100%;
  border: 0;
  border-left: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  transition: background 80ms ease, opacity 80ms ease;
}

.win-btn:first-child { border-left: 0; }

.win-btn svg {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}

/* Minimise — bright amber, always visible */
.win-btn-min {
  color: #ff9d00;
}
.win-btn-min:hover {
  background: rgba(255,160,0,0.16);
  color: #ffb84d;
}

/* Maximise/Restore — bright cobalt blue */
.win-btn-max {
  color: #3b82f6;
}
.win-btn-max:hover {
  background: rgba(59,130,246,0.13);
  color: #60a5fa;
}

/* Close — pure crimson, unmissable */
.win-btn-close {
  color: #ef4444;
}
.win-btn-close:hover {
  background: rgba(239,68,68,0.13);
  color: #f87171;
}

/* Dim controls on inactive windows, restore on hover */
.window.inactive .win-btn {
  opacity: 0.32;
}
.window.inactive .win-btn:hover {
  opacity: 1;
}


/* ---- WINDOW BODY ---- */
.window-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--win-body-bg);
  container-type: inline-size;
}

/* ---- RESIZE HANDLES ---- */
.resize-handle {
  position: absolute;
  z-index: 4;
  touch-action: none;
}

.resize-handle-n, .resize-handle-s { left: 10px; right: 10px; height: 8px; }
.resize-handle-e, .resize-handle-w { top: 10px; bottom: 10px; width: 8px; }
.resize-handle-n { top: -4px;    cursor: ns-resize; }
.resize-handle-e { right: -4px;  cursor: ew-resize; }
.resize-handle-s { bottom: -4px; cursor: ns-resize; }
.resize-handle-w { left: -4px;   cursor: ew-resize; }

.resize-handle-ne, .resize-handle-se,
.resize-handle-sw, .resize-handle-nw { width: 14px; height: 14px; }

.resize-handle-ne { top: -5px;    right: -5px;  cursor: nesw-resize; }
.resize-handle-se { right: -5px;  bottom: -5px; cursor: nwse-resize; }
.resize-handle-sw { left: -5px;   bottom: -5px; cursor: nesw-resize; }
.resize-handle-nw { top: -5px;    left: -5px;   cursor: nwse-resize; }

/* ============================================================
   APP PERSONALITY TOKENS + ICON COLORS
   ============================================================ */

/* CONSOLE — dark terminal, phosphor green */
.window.app-console {
  --win-border:      rgba(64,172,104,0.50);
  --win-bg:          linear-gradient(180deg, #0b1a11, #08120d);
  --win-title-bg:    linear-gradient(180deg, rgba(40,110,68,0.80), rgba(18,58,36,0.88));
  --win-title-color: #7de8a8;
  --win-icon-bg:     rgba(64,172,104,0.28);
  --win-icon-color:  #7de8a8;
}

/* FILES — warm amber document explorer */
.window.app-files {
  --win-border:      rgba(180,130,40,0.44);
  --win-bg:          linear-gradient(180deg, #fffef7, #f8f1dc);
  --win-title-bg:    linear-gradient(180deg, rgba(255,236,168,0.86), rgba(226,180,70,0.62));
  --win-title-color: #4a2e04;
  --win-icon-bg:     rgba(226,172,48,0.22);
  --win-icon-color:  #9a6010;
}

/* BROWSER — ocean blue chrome */
.window.app-browser {
  --win-border:      rgba(24,100,200,0.38);
  --win-bg:          #ffffff;
  --win-title-bg:    linear-gradient(180deg, rgba(220,238,255,0.90), rgba(130,188,255,0.60));
  --win-title-color: #0a2a5c;
  --win-icon-bg:     rgba(24,100,200,0.16);
  --win-icon-color:  #1464c8;
}

/* PROJECTS — editorial warm ivory with russet accent */
.window.app-projects {
  --win-border:      rgba(170,90,28,0.40);
  --win-bg:          linear-gradient(180deg, #fffdf3, #faf0d8);
  --win-title-bg:    linear-gradient(180deg, rgba(255,218,152,0.84), rgba(210,142,48,0.60));
  --win-title-color: #3a1e04;
  --win-icon-bg:     rgba(210,130,40,0.20);
  --win-icon-color:  #a0530e;
}

/* METRICS — midnight navy data panel */
.window.app-metrics {
  --win-border:      rgba(80,158,240,0.50);
  --win-bg:          linear-gradient(180deg, #0c1d30, #081520);
  --win-title-bg:    linear-gradient(180deg, rgba(40,100,180,0.80), rgba(16,52,110,0.88));
  --win-title-color: #9ad4ff;
  --win-icon-bg:     rgba(80,160,240,0.24);
  --win-icon-color:  #60c0ff;
}

/* NETWORK — deep indigo with electric blue nodes */
.window.app-network {
  --win-border:      rgba(108,128,255,0.48);
  --win-bg:          linear-gradient(180deg, #10182e, #0c1228);
  --win-title-bg:    linear-gradient(180deg, rgba(60,80,200,0.80), rgba(22,36,110,0.88));
  --win-title-color: #aac0ff;
  --win-icon-bg:     rgba(100,128,255,0.22);
  --win-icon-color:  #88aaff;
}

/* SEARCH — warm parchment utility */
.window.app-search {
  --win-border:      rgba(160,110,40,0.38);
  --win-bg:          linear-gradient(180deg, #fffdf7, #f9f4e8);
  --win-title-bg:    linear-gradient(180deg, rgba(248,232,188,0.86), rgba(208,168,72,0.58));
  --win-title-color: #3a2404;
  --win-icon-bg:     rgba(200,150,40,0.20);
  --win-icon-color:  #8c5c10;
}

/* RESUME — clean white with slate header */
.window.app-resume {
  --win-border:      rgba(60,80,120,0.32);
  --win-bg:          #ffffff;
  --win-title-bg:    linear-gradient(180deg, rgba(220,228,248,0.90), rgba(140,168,220,0.62));
  --win-title-color: #0e1e40;
  --win-icon-bg:     rgba(60,80,160,0.16);
  --win-icon-color:  #3050a0;
}

/* NOTES — warm yellow sticky */
.window.app-notes {
  --win-border:      rgba(180,148,16,0.44);
  --win-bg:          linear-gradient(180deg, #fffbcc, #fff89a);
  --win-title-bg:    linear-gradient(180deg, rgba(255,248,136,0.95), rgba(230,210,32,0.68));
  --win-title-color: #3a2c00;
  --win-icon-bg:     rgba(210,180,20,0.28);
  --win-icon-color:  #806000;
}

/* CONTACT — blush rose with magenta accent */
.window.app-contact {
  --win-border:      rgba(200,80,140,0.38);
  --win-bg:          linear-gradient(180deg, #fff5f8, #ffebf2);
  --win-title-bg:    linear-gradient(180deg, rgba(255,210,228,0.88), rgba(220,100,160,0.56));
  --win-title-color: #4e0a28;
  --win-icon-bg:     rgba(210,80,140,0.20);
  --win-icon-color:  #c0306a;
}