/* ========== WINDOW MANAGER ========== */
.ss-window{position:absolute;z-index:1200;background:var(--surface-solid);border:1px solid var(--border);
  border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.5);display:flex;flex-direction:column;
  min-width:300px;min-height:200px;overflow:hidden}
.ss-window.focused{border-color:var(--border-bright);box-shadow:0 4px 16px rgba(0,0,0,0.5),0 0 0 1px rgba(0,255,136,0.2)}
.ss-window.minimized{display:none}

.ss-window-titlebar{display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;border-bottom:1px solid var(--border);cursor:move;user-select:none;
  background:rgba(0,255,136,0.03);flex-shrink:0}
.ss-window-title{font-family:var(--font-display);font-size:10px;letter-spacing:1.5px;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-window-controls{display:flex;gap:4px;flex-shrink:0}
.ss-win-btn{width:24px;height:24px;border:1px solid var(--border);border-radius:3px;
  background:rgba(255,255,255,0.03);color:var(--text-dim);cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background-color .15s;line-height:1;padding:0}
.ss-win-btn:hover{color:var(--text);border-color:var(--border-bright)}
.ss-win-btn.close:hover{background:rgba(255,51,102,0.15);border-color:rgba(255,51,102,0.3);color:var(--pink)}

.ss-window-body{flex:1;overflow:auto;min-height:0}

/* Resize handles — diagonal 3-dot pattern (functional grip, not decorative stripe) */
.ss-window-resize,.ss-window-resize-bl{position:absolute;bottom:0;width:16px;height:16px}
.ss-window-resize{right:0;cursor:nwse-resize;
  background-image:radial-gradient(circle 1px at 11px 11px,var(--border-bright) 50%,transparent 51%),
    radial-gradient(circle 1px at 8px 11px,var(--border-bright) 50%,transparent 51%),
    radial-gradient(circle 1px at 11px 8px,var(--border-bright) 50%,transparent 51%)}
.ss-window-resize-bl{left:0;cursor:nesw-resize;
  background-image:radial-gradient(circle 1px at 5px 11px,var(--border-bright) 50%,transparent 51%),
    radial-gradient(circle 1px at 8px 11px,var(--border-bright) 50%,transparent 51%),
    radial-gradient(circle 1px at 5px 8px,var(--border-bright) 50%,transparent 51%)}

/* Minimized dock */
.ss-dock{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:1199}
.ss-dock-btn{padding:4px 12px;background:var(--surface-solid);border:1px solid var(--border);
  border-radius:3px;color:var(--text-dim);font-family:var(--font-display);font-size:8px;
  letter-spacing:1px;cursor:pointer;transition:color .15s,border-color .15s}
.ss-dock-btn:hover{color:var(--text);border-color:var(--border-bright)}

/* Focus visibility */
.ss-win-btn:focus-visible,.ss-dock-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .highlight-spotlight{animation:none!important}
  .ss-window{transition:none!important}
}

/* ========== HIGHLIGHT ANIMATIONS ========== */
@keyframes highlight-ping{
  0%{stroke-opacity:0.8;stroke-width:3;fill-opacity:0.15}
  100%{stroke-opacity:0;stroke-width:1;fill-opacity:0}
}
@keyframes spotlight-pulse{
  0%,100%{fill-opacity:0.12;stroke-opacity:0.6}
  50%{fill-opacity:0.06;stroke-opacity:0.3}
}
.highlight-spotlight{animation:spotlight-pulse 3s ease-in-out infinite}
.highlight-label{background:none!important;border:none!important}
.highlight-label-inner{
  width:32px;height:32px;border-radius:50%;
  border:2px solid;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:12px;font-weight:700;
  background:rgba(5,6,15,0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  text-shadow:0 0 8px currentColor}