/* ═══════════════════════════════════════════════════════
   ARIS Modular Window Manager — CSS v5
   Free-floating windows like Windows OS
   ═══════════════════════════════════════════════════════ */

/* ── Taskbar TOP ── */
.mw-taskbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(99,102,241,0.2);
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  z-index: 10000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  overflow: visible;
}
body.modular-mode .mw-taskbar { display: flex; }
body.modular-mode { padding-top: 52px; }

/* ── ARIS Start Button ── */
.mw-start-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(6,182,212,0.1));
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 10px; cursor: pointer; color: var(--accent);
  font-family: var(--font-sans); transition: all 0.2s; flex-shrink: 0;
}
.mw-start-btn:hover { background: rgba(99,102,241,0.2); box-shadow: 0 0 16px rgba(99,102,241,0.3); }
.mw-start-logo { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; animation: mwPulse 3s ease-in-out infinite; }
.mw-start-text { font-size: 18px; font-weight: 900; letter-spacing: 0.08em; background: linear-gradient(135deg,#6366f1,#06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: mwGlow 3s ease-in-out infinite; }
@keyframes mwPulse { 0%,100%{filter:drop-shadow(0 0 4px rgba(99,102,241,0.5));transform:scale(1)} 50%{filter:drop-shadow(0 0 14px rgba(99,102,241,0.8)) drop-shadow(0 0 24px rgba(6,182,212,0.4));transform:scale(1.05)} }
@keyframes mwGlow { 0%,100%{filter:drop-shadow(0 0 2px rgba(99,102,241,0.3))} 50%{filter:drop-shadow(0 0 8px rgba(99,102,241,0.6)) drop-shadow(0 0 16px rgba(6,182,212,0.3))} }

/* ── Taskbar items ── */
.mw-tb-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; height: 38px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; color: var(--text-muted);
  font-size: 12px; font-weight: 500; font-family: var(--font-sans);
  transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.mw-tb-item .mw-tb-icon { font-size: 16px; line-height: 1; }
.mw-tb-item:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.mw-tb-item.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); border-bottom: 2px solid var(--accent); }
.mw-tb-spacer { flex: 1; }
.mw-tb-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; height: 34px; background: none;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; color: var(--text-muted); font-size: 12px;
  font-family: var(--font-sans); transition: all 0.15s; flex-shrink: 0;
}
.mw-tb-btn:hover { border-color: var(--accent); color: var(--accent); }
.mw-tb-btn.locked { border-color: var(--green); color: var(--green); }
.mw-tb-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }

/* ── Sessions dropdown ── */
.mw-sessions-dropdown { position: relative; }
.mw-sessions-menu {
  display: none; position: fixed; top: 54px; left: 60px;
  width: 300px; max-height: 420px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  z-index: 999999; padding: 6px;
}
.mw-sessions-menu.open { display: block; }
.mw-sessions-menu .mw-sess-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--text-secondary); transition: all 0.15s;
  border: none; background: none; width: 100%; text-align: left;
  font-family: var(--font-sans);
}
.mw-sess-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.mw-sess-item.active { background: var(--accent-dim); color: var(--accent); }
.mw-sess-item .sess-icon { font-size: 14px; flex-shrink: 0; }
.mw-sess-item .sess-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-sess-item .sess-date { font-size: 9px; color: var(--text-muted); flex-shrink: 0; }
.mw-tb-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.mw-tb-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }

/* ── Layout Dropdown — HIGH z-index ── */
.mw-layout-dropdown { position: relative; flex-shrink: 0; }
.mw-layout-menu {
  display: none; position: fixed; top: 62px; right: 80px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  min-width: 200px; z-index: 99999; padding: 6px; max-height: 280px; overflow-y: auto;
}
.mw-layout-menu.open { display: block; }
.mw-layout-menu-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: none; background: none;
  color: var(--text-secondary); font-size: 12px; font-family: var(--font-sans);
  cursor: pointer; border-radius: 8px; width: 100%; text-align: left; transition: all 0.12s;
}
.mw-layout-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.mw-layout-menu-item.active { color: var(--accent); background: var(--accent-dim); }
.mw-layout-menu-item .mw-del { margin-left: auto; color: var(--text-muted); font-size: 10px; opacity: 0; transition: opacity 0.12s; }
.mw-layout-menu-item:hover .mw-del { opacity: 1; }
.mw-layout-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Start Menu ── */
.mw-start-menu {
  display: none; position: fixed; top: 62px; left: 0;
  width: 260px; max-height: calc(100vh - 72px);
  background: var(--bg-surface); border: 1px solid rgba(99,102,241,0.2);
  border-radius: 0 0 12px 0; box-shadow: 4px 4px 24px rgba(0,0,0,0.5);
  z-index: 99999; overflow-y: auto; padding: 8px;
}
.mw-start-menu.open { display: block; }

/* ═══ FREE-FLOATING WINDOWS ═══ */
body.modular-mode .sidebar { display: none !important; }
body.modular-mode .main-content {
  position: relative; width: 100%; height: calc(100vh - 62px);
  overflow: hidden; display: block;
}

body.modular-mode .panel.mw-window {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 1px rgba(99,102,241,0.3);
  background: var(--bg-base);
  transition: box-shadow 0.15s;
  min-width: 320px; min-height: 200px;
}
body.modular-mode .panel.mw-window > .panel-body { overflow-y: auto !important; flex: 1 1 0 !important; min-height: 0 !important; }
body.modular-mode #panel-hr.mw-window { overflow: hidden !important; }
body.modular-mode #panel-hr.mw-window > div { flex: 1; min-height: 0; display: flex; overflow: hidden; }
body.modular-mode #panel-hr.mw-window > div > div:last-child { overflow-y: auto !important; flex: 1; min-height: 0; }
body.modular-mode .panel.mw-window:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.5), 0 0 2px rgba(99,102,241,0.4);
}
body.modular-mode .panel.mw-window.mw-focused {
  box-shadow: 0 8px 36px rgba(0,0,0,0.6), 0 0 4px rgba(99,102,241,0.5);
  border-color: rgba(99,102,241,0.4);
}

/* ── Window title bar ── */
.mw-titlebar {
  display: none; height: 40px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
  padding: 0 12px; align-items: center; gap: 6px;
  flex-shrink: 0; user-select: none; cursor: grab;
}
.mw-titlebar:active { cursor: grabbing; }
body.modular-mode .mw-titlebar { display: flex; }
.mw-titlebar-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-win-btn { width: 36px; height: 30px; border: none; border-radius: 5px; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px; line-height: 1; transition: all 0.12s; padding: 0; }
.mw-win-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.mw-win-btn.close:hover { background: rgba(239,68,68,0.3); color: #ef4444; }

/* ── Resize corners ── */
.mw-resize-corner {
  position: absolute; width: 12px; height: 12px; z-index: 5;
}
.mw-resize-corner.se { bottom: 0; right: 0; cursor: se-resize; }
.mw-resize-corner.sw { bottom: 0; left: 0; cursor: sw-resize; }
.mw-resize-corner.ne { top: 32px; right: 0; cursor: ne-resize; }
.mw-resize-corner.nw { top: 32px; left: 0; cursor: nw-resize; }
/* Edge resize */
.mw-resize-edge { position: absolute; z-index: 4; }
.mw-resize-edge.n { top: 0; left: 12px; right: 12px; height: 4px; cursor: n-resize; }
.mw-resize-edge.s { bottom: 0; left: 12px; right: 12px; height: 4px; cursor: s-resize; }
.mw-resize-edge.e { top: 32px; right: 0; bottom: 12px; width: 4px; cursor: e-resize; }
.mw-resize-edge.w { top: 32px; left: 0; bottom: 12px; width: 4px; cursor: w-resize; }

/* ── Fullscreen ── */
body.modular-mode .panel.mw-fullscreen {
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  border-radius: 0 !important; border: none !important;
  z-index: 9000 !important;
}

/* ── Lock ── */
body.modular-mode.mw-locked .mw-titlebar { cursor: default; }
body.modular-mode.mw-locked .mw-resize-corner,
body.modular-mode.mw-locked .mw-resize-edge { pointer-events: none; }

/* ── Hide sidebar footer ── */
body.modular-mode #sidebarFooter { display: none; }

/* ── HR Chat ── */
body.modular-mode #hrArisChat { resize: both; overflow: auto; min-width: 280px; min-height: 200px; max-width: 600px; max-height: 500px; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .mw-taskbar, .mw-titlebar, .mw-start-menu, .mw-resize-corner, .mw-resize-edge { display: none !important; }
  body.modular-mode { padding-top: 0; }
  body.modular-mode .sidebar { display: flex !important; }
  body.modular-mode .main-content { position: relative; display: flex; flex-direction: column; height: 100vh; }
  body.modular-mode .panel.mw-window { position: relative !important; width: 100% !important; height: auto !important; top: auto !important; left: auto !important; border-radius: 0 !important; }
  body.modular-mode #sidebarFooter { display: flex; }
  body.modular-mode #hrArisChat { resize: none; }
}