/* ---- menubar ---- */
#menubar { position:fixed; top:0; left:0; right:0; height:30px; z-index:600; display:flex; align-items:center; padding:0 14px; font-size:13.5px; gap:18px; transition:opacity .3s; }
#menubar .mb-logo { font-weight:800; cursor:pointer; padding:2px 8px; border-radius:5px; }
#menubar .mb-app { font-weight:700; }
#menubar .mb-right { margin-left:auto; display:flex; gap:16px; align-items:center; }
#menubar .mb-item { cursor:pointer; padding:2px 6px; border-radius:5px; }
#menubar .mb-item:hover, #menubar .mb-logo:hover { background:rgba(120,120,128,.22); }
#menubar .kira-dot { width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #7dd3fc, var(--accent)); box-shadow:0 0 7px var(--accent); cursor:pointer; }

.menu-pop { position:fixed; top:34px; left:10px; z-index:650; min-width:210px; border-radius:10px; padding:5px; box-shadow:var(--shadow); }
.menu-pop .mi { padding:6px 12px; border-radius:6px; font-size:13.5px; cursor:pointer; }
.menu-pop .mi:hover { background:var(--accent); color:#fff; }
.menu-pop hr { border:none; border-top:1px solid var(--border); margin:4px 8px; }

/* ---- desktop ---- */
#desktop { position:fixed; inset:var(--chrome-t) 0 var(--chrome-b) 0; z-index:5; }
#sleep { position:fixed; inset:0; z-index:990; background:#000; opacity:0; pointer-events:none; transition:opacity .8s; }
#sleep.on { opacity:1; pointer-events:auto; }

/* ---- context menu ---- */
#ctxmenu { position:fixed; z-index:700; min-width:190px; border-radius:10px; padding:5px; display:none; box-shadow:var(--shadow); }
#ctxmenu .mi { padding:6px 12px; border-radius:6px; font-size:13.5px; cursor:pointer; }
#ctxmenu .mi:hover { background:var(--accent); color:#fff; }

/* ---- dock ---- */
#dock { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); z-index:600; display:flex; align-items:flex-end; gap:6px; padding:7px 10px; border-radius:20px; transition:opacity .3s; }
#dock .dicon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; position:relative; transition:transform .15s, margin .15s; transform-origin:bottom; }
#dock .dicon svg { width:44px; height:44px; -webkit-box-reflect:below 1px linear-gradient(transparent 65%, rgba(255,255,255,.18)); }
#dock .dicon .tip { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.75); color:#fff; font-size:12px; padding:4px 10px; border-radius:7px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; }
#dock .dicon:hover .tip { opacity:1; }
#dock .dicon.running::after { content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--text); }
#dock .dicon.bounce { animation:bounce .5s 2; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-18px)} }

/* ---- windows ---- */
.window { position:absolute; min-width:280px; min-height:180px; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); background:var(--glass-strong); backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); border:1px solid var(--border); }
.window.focused { box-shadow:0 24px 70px rgba(0,0,0,.4); }
.window .titlebar { height:34px; display:flex; align-items:center; padding:0 12px; gap:8px; flex:0 0 auto; cursor:default; }
.window .tl { display:flex; gap:7px; }
.window .tl span { width:12px; height:12px; border-radius:50%; cursor:pointer; border:.5px solid rgba(0,0,0,.15); }
.window .tl .c { background:#ff5f57; } .window .tl .m { background:#febc2e; } .window .tl .x { background:#28c840; }
.window:not(.focused) .tl span { background:rgba(120,120,128,.4); }
.window .wtitle { flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--text-dim); margin-right:52px; pointer-events:none; }
.window .win-body { flex:1; overflow:auto; position:relative; }
.window .rsz { position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; z-index:5; }
.window.opening { animation:winopen .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes winopen { from{transform:scale(.85); opacity:0} to{transform:scale(1); opacity:1} }

/* mission control layout */
body.mission .window { transition:transform .45s cubic-bezier(.3,.9,.3,1), opacity .45s; cursor:pointer; }
body.mission .window .win-body { pointer-events:none; }