/* SPDX-FileCopyrightText: 西安市第二十六中学 牛彦凯 */
/* SPDX-License-Identifier: MIT */

/* ============================================================
   blooming.css — Code:Blooming 全局样式
   Dark / Light × 16 accent = 32 主题组合
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ui-scale:1;
  --inverse-ui-scale:1;
  --taskbar-height:48px;
  --taskbar-total-height:var(--taskbar-height);
  --safe-area-top:env(safe-area-inset-top,0px);
  --safe-area-right:env(safe-area-inset-right,0px);
  --safe-area-bottom:env(safe-area-inset-bottom,0px);
  --safe-area-left:env(safe-area-inset-left,0px);
}
html,body{height:100%;overflow:hidden;font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover)}
::selection{background:var(--accent);color:#fff}

/* ============================================================
   THEME: base tokens — dark (default)
   ============================================================ */
:root,[data-theme="dark"]{
  --bg-desktop:#0a0a0a;
  --bg-primary:#1a1a1a;
  --bg-secondary:#242424;
  --bg-tertiary:#2e2e2e;
  --bg-elevated:#333;
  --text-primary:#e5e5e5;
  --text-secondary:#999;
  --text-disabled:#555;
  --border:#3a3a3a;
  --border-subtle:#2a2a2a;
  --shadow:rgba(0,0,0,.55);
  --overlay:transparent;
  --scrollbar:#444;
  --scrollbar-hover:#666;
  --window-bg:#1e1e1e;
  --titlebar-bg:#252525;
  --taskbar-bg:rgba(20,20,20,.88);
  --menu-bg:rgba(32,32,32,.96);
  --input-bg:#2a2a2a;
  --hover:rgba(255,255,255,.06);
  --active:rgba(255,255,255,.09);
  --danger:#e5484d;
  --success:#30a46c;
  --warning:#f5a623;
}

/* ---- light ---- */
[data-theme="light"]{
  --bg-desktop:#e0e0e0;
  --bg-primary:#f5f5f5;
  --bg-secondary:#fff;
  --bg-tertiary:#eaeaea;
  --bg-elevated:#fff;
  --text-primary:#1a1a1a;
  --text-secondary:#666;
  --text-disabled:#aaa;
  --border:#d4d4d4;
  --border-subtle:#e5e5e5;
  --shadow:rgba(0,0,0,.18);
  --overlay:transparent;
  --scrollbar:#c0c0c0;
  --scrollbar-hover:#999;
  --window-bg:#fff;
  --titlebar-bg:#f0f0f0;
  --taskbar-bg:rgba(240,240,240,.92);
  --menu-bg:rgba(255,255,255,.96);
  --input-bg:#fff;
  --hover:rgba(0,0,0,.04);
  --active:rgba(0,0,0,.07);
  --danger:#e5484d;
  --success:#30a46c;
  --warning:#f5a623;
}

/* ============================================================
   ACCENT — 16 colors
   ============================================================ */
[data-accent="blue"]   {--accent:#0078d7;--accent-hover:#1a8ae8;--accent-active:#005a9e;--accent-subtle:rgba(0,120,215,.12)}
[data-accent="purple"] {--accent:#8b5cf6;--accent-hover:#9d74f7;--accent-active:#7240f5;--accent-subtle:rgba(139,92,246,.12)}
[data-accent="pink"]   {--accent:#ec4899;--accent-hover:#f06cae;--accent-active:#d63384;--accent-subtle:rgba(236,72,153,.12)}
[data-accent="red"]    {--accent:#ef4444;--accent-hover:#f26969;--accent-active:#dc2626;--accent-subtle:rgba(239,68,68,.12)}
[data-accent="orange"] {--accent:#f97316;--accent-hover:#fb8f3c;--accent-active:#ea580c;--accent-subtle:rgba(249,115,22,.12)}
[data-accent="amber"]  {--accent:#f59e0b;--accent-hover:#f7b32b;--accent-active:#d97706;--accent-subtle:rgba(245,158,11,.12)}
[data-accent="yellow"] {--accent:#eab308;--accent-hover:#efc12e;--accent-active:#ca8a04;--accent-subtle:rgba(234,179,8,.12)}
[data-accent="lime"]   {--accent:#84cc16;--accent-hover:#9dd63c;--accent-active:#65a30d;--accent-subtle:rgba(132,204,22,.12)}
[data-accent="green"]  {--accent:#22c55e;--accent-hover:#4ad077;--accent-active:#16a34a;--accent-subtle:rgba(34,197,94,.12)}
[data-accent="emerald"]{--accent:#10b981;--accent-hover:#34c697;--accent-active:#059669;--accent-subtle:rgba(16,185,129,.12)}
[data-accent="teal"]   {--accent:#14b8a6;--accent-hover:#38c5b5;--accent-active:#0d9488;--accent-subtle:rgba(20,184,166,.12)}
[data-accent="cyan"]   {--accent:#06b6d4;--accent-hover:#2ac3dd;--accent-active:#0891b2;--accent-subtle:rgba(6,182,212,.12)}
[data-accent="sky"]    {--accent:#0ea5e9;--accent-hover:#34b5ed;--accent-active:#0284c7;--accent-subtle:rgba(14,165,233,.12)}
[data-accent="indigo"] {--accent:#6366f1;--accent-hover:#8183f4;--accent-active:#4f46e5;--accent-subtle:rgba(99,102,241,.12)}
[data-accent="violet"] {--accent:#7c3aed;--accent-hover:#9560f1;--accent-active:#6d28d9;--accent-subtle:rgba(124,58,237,.12)}
[data-accent="rose"]   {--accent:#f43f5e;--accent-hover:#f66578;--accent-active:#e11d48;--accent-subtle:rgba(244,63,94,.12)}

/* ============================================================
   BOOT SPLASH
   ============================================================ */
#boot-splash{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;
  background:#040810;color:#f4f8fb;transition:opacity .4s;
}
#boot-splash.fade-out{opacity:0;pointer-events:none}
.boot-splash-backdrop{
  position:absolute;inset:0;
  background-image:var(--boot-splash-image, none),radial-gradient(circle at 22% 18%, rgba(48,123,160,.34), transparent 38%),linear-gradient(160deg, rgba(4,10,18,.28), rgba(3,8,14,.84));
  background-size:cover,auto,auto;background-position:center,center,center;
  transform:scale(1.04);filter:saturate(1.06) contrast(1.02);
}
.boot-splash-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(4,8,14,.18), rgba(4,8,14,.72))}
.boot-splash-panel{
  position:relative;z-index:1;width:min(440px,calc(100vw - 40px));padding:30px 30px 24px;
  border-radius:28px;background:rgba(6,12,20,.52);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.32);backdrop-filter:blur(18px) saturate(1.2);
}
.boot-kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(240,247,255,.76)}
.boot-logo{margin-top:16px;display:flex;align-items:center;gap:14px}
.boot-logo-mark{width:72px;height:72px;object-fit:contain;flex:none;border-radius:20px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.24))}
.boot-title{font-size:2rem;font-weight:700;letter-spacing:.02em}
.boot-subtitle{margin-top:4px;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(235,243,255,.74)}
.boot-version{margin-top:4px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(235,243,255,.72)}
.boot-tagline{margin-top:14px;font-size:.9rem;color:rgba(238,244,252,.78)}
.boot-bar{width:100%;height:4px;background:rgba(255,255,255,.12);border-radius:999px;margin-top:24px;overflow:hidden}
.boot-bar-fill{width:0%;height:100%;background:linear-gradient(90deg, rgba(255,255,255,.2), var(--accent));border-radius:999px;transition:width .3s}
.boot-status{margin-top:12px;font-size:.84rem;color:rgba(235,243,255,.76)}

/* ============================================================
   DESKTOP
   ============================================================ */
.desktop{position:fixed;inset:0;background:transparent}
.wallpaper{position:absolute;inset:0;background:var(--bg-desktop);z-index:0}
.desktop-icons{position:absolute;inset:var(--safe-area-top) var(--safe-area-right) var(--taskbar-total-height) var(--safe-area-left);z-index:1;display:grid;grid-template-rows:repeat(auto-fill,90px);grid-auto-flow:column;grid-auto-columns:80px;align-content:start;padding:12px;gap:8px;pointer-events:none}
.desktop-icon{pointer-events:auto}
.windows-layer{position:absolute;inset:var(--safe-area-top) var(--safe-area-right) var(--taskbar-total-height) var(--safe-area-left);pointer-events:none}
.windows-layer .window{pointer-events:auto}

/* ---- desktop icon ---- */
.desktop-icon{
  width:80px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px;border-radius:6px;cursor:default;user-select:none;
  text-decoration:none;color:var(--text-primary);
}
.desktop-icon:hover{background:var(--hover)}
.desktop-icon.selected{background:var(--accent-subtle)}
.desktop-icon i{font-size:2rem;color:var(--accent)}
.desktop-icon span{font-size:.75rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:72px;line-height:1.2;
  text-shadow:0 1px 3px var(--shadow)}

/* Wallpaper-adaptive desktop icon colors */
#desktop-icons.wallpaper-dark .desktop-icon{color:#fff}
#desktop-icons.wallpaper-dark .desktop-icon i{color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
#desktop-icons.wallpaper-dark .desktop-icon span{text-shadow:0 1px 6px rgba(0,0,0,1),0 0 12px rgba(0,0,0,.8)}
#desktop-icons.wallpaper-dark .desktop-icon:hover{background:rgba(0,0,0,.3)}
#desktop-icons.wallpaper-dark .desktop-icon.selected{background:rgba(0,0,0,.4)}
#desktop-icons.wallpaper-light .desktop-icon{color:#1a1a1a}
#desktop-icons.wallpaper-light .desktop-icon i{color:var(--accent)}
#desktop-icons.wallpaper-light .desktop-icon span{text-shadow:0 1px 3px rgba(255,255,255,1),0 0 8px rgba(255,255,255,.9)}
#desktop-icons.wallpaper-light .desktop-icon:hover{background:rgba(255,255,255,.4)}
#desktop-icons.wallpaper-light .desktop-icon.selected{background:rgba(255,255,255,.5)}

/* ============================================================
   WINDOW
   ============================================================ */
.window{
  position:absolute;display:flex;flex-direction:column;
  min-width:320px;min-height:200px;
  background:var(--window-bg);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
  box-shadow:0 8px 32px var(--shadow);
  transition:box-shadow .15s;
}
body.material-effects-enabled .window{
  background:rgba(10,14,22,.34);border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 56px rgba(0,0,0,.22);backdrop-filter:blur(32px) saturate(1.32);
  -webkit-backdrop-filter:blur(32px) saturate(1.32);
}
[data-theme="light"] body.material-effects-enabled .window{
  background:rgba(250,252,255,.38);border-color:rgba(20,28,44,.16);
}
body.material-effects-enabled .window:not([data-app="agent"]) .window-body{background:rgba(12,18,28,.1)}
[data-theme="light"] body.material-effects-enabled .window:not([data-app="agent"]) .window-body{background:rgba(255,255,255,.16)}
.window.focused{box-shadow:0 12px 48px var(--shadow);border-color:var(--accent)}
.window.maximized{border-radius:0;border:none;left:calc(-1 * var(--safe-area-left))!important;top:0!important;width:calc(100% + var(--safe-area-left) + var(--safe-area-right))!important;height:100%!important;max-width:none!important;max-height:none!important}
.window.snapped[data-snap-side="top"]{border-radius:0;border:none;left:calc(-1 * var(--safe-area-left))!important;top:0!important;width:calc(100% + var(--safe-area-left) + var(--safe-area-right))!important;height:100%!important;max-width:none!important;max-height:none!important}
.window.minimized{display:none}
.window.snapped{border-radius:0;transition:none}
.window.wm-dragging,.window.wm-resizing{transition:none}

/* titlebar */
.window-titlebar{
  display:flex;align-items:center;height:36px;padding:0 8px;
  background:var(--titlebar-bg);user-select:none;flex-shrink:0;
  -webkit-app-region:drag;
  touch-action:none;
}
body.material-effects-enabled .window-titlebar{
  background:rgba(7,11,18,.14);backdrop-filter:blur(28px) saturate(1.24);
  -webkit-backdrop-filter:blur(28px) saturate(1.24);
}
[data-theme="light"] body.material-effects-enabled .window-titlebar{background:rgba(255,255,255,.2)}
.window.focused .window-titlebar{background:var(--bg-secondary)}
body.material-effects-enabled .window.focused .window-titlebar{background:rgba(12,18,28,.2)}
[data-theme="light"] body.material-effects-enabled .window.focused .window-titlebar{background:rgba(255,255,255,.28)}
.window-titlebar-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--accent);margin-right:6px}
.window-title{flex:1;font-size:.8rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window.focused .window-title{color:var(--text-primary)}

/* window controls */
.window-controls{display:flex;gap:0;-webkit-app-region:no-drag;touch-action:manipulation}
.window-ctrl{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--text-secondary);transition:background .1s;touch-action:manipulation}
.window-ctrl:hover{background:var(--hover);color:var(--text-primary)}
.window-ctrl.close:hover{background:#e5484d;color:#fff}

/* window body */
.window-body{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;position:relative;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* resize handles */
.window-resize{position:absolute;z-index:10;touch-action:none}
.window-resize.n{top:-4px;left:8px;right:8px;height:8px;cursor:n-resize}
.window-resize.s{bottom:-4px;left:8px;right:8px;height:8px;cursor:s-resize}
.window-resize.w{left:-4px;top:8px;bottom:8px;width:8px;cursor:w-resize}
.window-resize.e{right:-4px;top:8px;bottom:8px;width:8px;cursor:e-resize}
.window-resize.nw{top:-4px;left:-4px;width:12px;height:12px;cursor:nw-resize}
.window-resize.ne{top:-4px;right:-4px;width:12px;height:12px;cursor:ne-resize}
.window-resize.sw{bottom:-4px;left:-4px;width:12px;height:12px;cursor:sw-resize}
.window-resize.se{bottom:-4px;right:-4px;width:12px;height:12px;cursor:se-resize}

/* snap preview */
.snap-preview{
  position:fixed;z-index:999998;background:var(--accent-subtle);
  border:2px solid var(--accent);border-radius:8px;
  pointer-events:none;transition:all .15s ease-out;
}

/* ============================================================
   TASKBAR
   ============================================================ */
.taskbar{
  position:fixed;bottom:0;left:var(--safe-area-left);right:var(--safe-area-right);height:var(--taskbar-total-height);z-index:999990;
  display:flex;align-items:center;padding:0 4px;
  background:var(--taskbar-bg);backdrop-filter:blur(20px);
  border-top:1px solid var(--border-subtle);
}
.taskbar.taskbar-acrylic{
  background:rgba(30,30,30,.55);backdrop-filter:blur(40px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .taskbar.taskbar-acrylic{
  background:rgba(245,245,245,.55);border-top:1px solid rgba(0,0,0,.06);
}
.taskbar.taskbar-transparent{
  background:transparent;backdrop-filter:none;border-top:none;
}
.taskbar-start{
  width:44px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:1.1rem;color:var(--accent);
}
.taskbar-start:hover{background:var(--hover)}
.taskbar-start.active{background:var(--accent-subtle)}
.taskbar-apps{flex:1;display:flex;gap:2px;padding:0 4px;overflow:hidden;position:relative}
.taskbar-apps-scroll{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.taskbar-apps-scroll::-webkit-scrollbar{display:none}
.taskbar-app{
  height:40px;min-width:44px;max-width:180px;padding:0 12px;display:flex;align-items:center;gap:6px;
  border-radius:6px;font-size:.8rem;color:var(--text-secondary);
  white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;
}
.taskbar-app span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taskbar-app:hover{background:var(--hover);color:var(--text-primary)}
.taskbar-app.active{background:var(--active);color:var(--text-primary)}
.taskbar-app.focused{color:var(--text-primary)}
.taskbar-app.focused::after{
  content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;background:var(--accent);border-radius:2px;
}
.taskbar-app i{font-size:.9rem}
.tray-clock{font-size:.8rem;color:var(--text-secondary);padding:0 12px;white-space:nowrap;align-self:center}

/* ============================================================
   START MENU
   ============================================================ */
.start-menu{
  position:fixed;bottom:calc(var(--taskbar-total-height) + 4px);left:calc(var(--safe-area-left) + 4px);z-index:999991;
  width:min(340px, calc(100vw - 8px - var(--safe-area-left) - var(--safe-area-right)));max-height:70vh;display:flex;flex-direction:column;
  background:var(--menu-bg);backdrop-filter:blur(24px);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 48px var(--shadow);overflow:hidden;
}
.start-menu-header{
  padding:16px 20px;font-size:1rem;font-weight:600;color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
}
.start-menu-brand{display:flex;align-items:center;gap:10px;min-width:0}
.start-menu-brand-mark{width:28px;height:28px;object-fit:contain;border-radius:8px;flex:none}
.start-menu-brand-title{font-size:1rem;font-weight:600;line-height:1.1}
.start-menu-brand-subtitle{margin-top:3px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.start-menu-list{flex:1;overflow-y:auto;padding:8px}
.start-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:6px;cursor:default;color:var(--text-primary);
}
.start-menu-item:hover{background:var(--hover)}
.start-menu-item i{width:24px;text-align:center;font-size:1rem;color:var(--accent)}
.start-menu-item span{font-size:.85rem}
.start-menu-footer{
  padding:8px 12px;border-top:1px solid var(--border-subtle);display:flex;gap:4px;
}
.start-footer-btn{
  flex:1;padding:8px;border-radius:6px;font-size:.8rem;color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.start-footer-btn:hover{background:var(--hover);color:var(--text-primary)}

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.ctx-menu{
  position:fixed;z-index:999999;min-width:180px;
  background:var(--menu-bg);backdrop-filter:blur(24px);
  border:1px solid var(--border);border-radius:8px;
  box-shadow:0 6px 24px var(--shadow);padding:4px;
  overflow:hidden;
}
.ctx-item{
  display:flex;align-items:center;gap:10px;padding:7px 14px;
  border-radius:5px;cursor:default;font-size:.85rem;color:var(--text-primary);
  white-space:nowrap;
}
.ctx-item:hover{background:var(--accent);color:#fff}
.ctx-item:hover i{color:#fff}
.ctx-item.disabled{color:var(--text-disabled);pointer-events:none}
.ctx-item i{width:18px;text-align:center;font-size:.8rem;color:var(--text-secondary)}
.ctx-item .shortcut{margin-left:auto;font-size:.75rem;color:var(--text-disabled)}
.ctx-sep{height:1px;background:var(--border-subtle);margin:4px 8px}

/* ============================================================
   APP: TERMINAL
   ============================================================ */
.terminal-container{
  display:flex;flex-direction:column;height:100%;
  background:#0e0e0e;color:#d4d4d4;font-family:"Cascadia Code","Fira Code","JetBrains Mono",Consolas,monospace;
  font-size:13px;line-height:1.5;
}
.terminal-output{
  flex:1;overflow-y:auto;padding:8px 12px;white-space:pre-wrap;word-break:break-all;user-select:text;
}
.terminal-input-line{
  display:flex;align-items:center;padding:4px 12px 8px;flex-shrink:0;
}
.terminal-prompt{color:#50fa7b;margin-right:6px;white-space:nowrap}
.terminal-input{
  flex:1;background:none;border:none;outline:none;color:#d4d4d4;
  font:inherit;caret-color:#50fa7b;
}
.term-stdout{color:#d4d4d4}
.term-stderr{color:#e5484d}
.term-info{color:#50fa7b}
.term-bold{font-weight:700}

/* terminal light mode */
[data-theme="light"] .terminal-container{background:#fff;color:#1e1e1e}
[data-theme="light"] .terminal-input{color:#1e1e1e;caret-color:#16a34a}
[data-theme="light"] .terminal-prompt{color:#16a34a}
[data-theme="light"] .term-stdout{color:#1e1e1e}
[data-theme="light"] .term-stderr{color:#dc2626}
[data-theme="light"] .term-info{color:#16a34a}

/* ============================================================
   APP: FILE MANAGER
   ============================================================ */
.fm{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.fm-toolbar{
  display:flex;align-items:center;gap:4px;padding:6px 8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.fm-toolbar button{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:.85rem;color:var(--text-secondary);
}
.fm-toolbar button:hover{background:var(--hover);color:var(--text-primary)}
.fm-path{
  flex:1;height:30px;padding:0 10px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:6px;font-size:.8rem;color:var(--text-primary);
}
.fm-body{flex:1;display:flex;overflow:hidden}
.fm-sidebar{
  width:180px;border-right:1px solid var(--border);padding:8px;overflow-y:auto;flex-shrink:0;
}
.fm-sidebar-item{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;
  font-size:.8rem;color:var(--text-secondary);cursor:default;
}
.fm-sidebar-item:hover{background:var(--hover);color:var(--text-primary)}
.fm-sidebar-item.active{background:var(--accent-subtle);color:var(--accent)}
.fm-sidebar-item i{width:18px;text-align:center}
.fm-list{flex:1;overflow-y:auto;padding:4px}
.fm-item{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:5px;
  font-size:.8rem;cursor:default;
}
.fm-item:hover{background:var(--hover)}
.fm-item.selected{background:var(--accent-subtle)}
.fm-item i{width:20px;text-align:center;font-size:.95rem}
.fm-item .fm-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-item .fm-size{color:var(--text-secondary);font-size:.75rem;min-width:60px;text-align:right}
.fm-item .fm-date{color:var(--text-secondary);font-size:.75rem;min-width:100px;text-align:right}
.fm-empty{padding:40px;text-align:center;color:var(--text-disabled);font-size:.85rem}

/* ============================================================
   APP: TEXT EDITOR (Monaco host)
   ============================================================ */
.editor-container{display:flex;flex-direction:column;height:100%;background:var(--bg-primary)}
.editor-toolbar{
  display:flex;align-items:center;gap:4px;padding:4px 8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.editor-toolbar button{
  height:28px;padding:0 10px;border-radius:5px;font-size:.8rem;
  color:var(--text-secondary);display:flex;align-items:center;gap:4px;
}
.editor-toolbar button:hover{background:var(--hover);color:var(--text-primary)}
.editor-toolbar .editor-filename{
  flex:1;font-size:.8rem;color:var(--text-secondary);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
.editor-mount{flex:1;overflow:hidden}

/* ============================================================
   APP: BLOOMING IDE
   ============================================================ */
.blooming-ide{display:grid;grid-template-rows:auto minmax(0,1fr) clamp(136px,28%,240px);height:100%;min-width:0;min-height:0;overflow:hidden;background:var(--bg-primary);color:var(--text-primary)}
.blooming-toolbar{
  position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;
  min-width:0;touch-action:manipulation;
  background:color-mix(in srgb, var(--bg-primary) 90%, transparent);
}
.blooming-toolbar .bl-btn{height:30px;padding:0 12px;display:flex;align-items:center;gap:6px;font-size:.78rem;touch-action:manipulation}
.blooming-agent-indicator{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;font-size:.72rem;
  background:rgba(59,130,246,.12);color:#2563eb;border:1px solid rgba(59,130,246,.2)
}
.blooming-agent-indicator[hidden]{display:none}
.blooming-agent-indicator i{animation:blooming-agent-spin 1s linear infinite}
.blooming-file{
  flex:1;min-width:0;font-size:.78rem;color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;
}
.blooming-status{
  flex-shrink:0;padding:5px 10px;border-radius:999px;font-size:.72rem;
  background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);
}
.blooming-status[data-tone="ok"]{background:rgba(16,185,129,.14);color:#10b981;border-color:rgba(16,185,129,.2)}
.blooming-status[data-tone="warning"]{background:rgba(245,158,11,.14);color:#d97706;border-color:rgba(245,158,11,.2)}
.blooming-status[data-tone="error"]{background:rgba(239,68,68,.14);color:#ef4444;border-color:rgba(239,68,68,.2)}
.blooming-status[data-tone="running"]{background:rgba(59,130,246,.14);color:#3b82f6;border-color:rgba(59,130,246,.2)}
.blooming-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);min-width:0;min-height:0;overflow:hidden}
.blooming-editor-shell{display:flex;min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--border);background:var(--bg-primary)}
.blooming-editor-mount{height:100%;min-width:0;min-height:0;flex:1}
.blooming-sidepane{
  display:grid;grid-template-rows:minmax(140px,1fr) minmax(120px,.8fr) minmax(180px,1fr);
  min-width:0;min-height:0;overflow:hidden;background:color-mix(in srgb, var(--bg-secondary) 92%, transparent);
}
.blooming-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-bottom:1px solid var(--border)}
.blooming-panel:last-child{border-bottom:none}
.blooming-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-width:0;padding:9px 12px;font-size:.76rem;font-weight:600;color:var(--text-secondary);
  border-bottom:1px solid var(--border);letter-spacing:.02em;text-transform:uppercase;
}
.blooming-count{
  padding:2px 8px;border-radius:999px;background:var(--bg-tertiary);font-size:.68rem;color:var(--text-secondary)
}
.blooming-diagnostics,.blooming-symbols,.blooming-trace{min-width:0;min-height:0;padding:8px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.blooming-trace{flex:1 1 0}
.blooming-list-item,.blooming-trace-item{
  text-align:left;padding:9px 10px;border-radius:8px;border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg-primary) 88%, transparent);display:flex;flex-direction:column;gap:4px;
}
.blooming-list-item:hover,.blooming-trace-item:hover{background:var(--hover)}
.blooming-trace-item.active{border-color:var(--accent);background:var(--accent-subtle)}
.blooming-error{border-color:rgba(239,68,68,.22)}
.blooming-warning{border-color:rgba(245,158,11,.22)}
.blooming-list-title{font-size:.78rem;color:var(--text-primary);line-height:1.35;word-break:break-word}
.blooming-list-meta{font-size:.7rem;color:var(--text-secondary)}
.blooming-trace-detail{
  margin:0;max-width:100%;padding:10px 12px;min-width:0;min-height:0;height:180px;max-height:180px;flex:0 0 180px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-top:1px solid var(--border);
  background:var(--bg-primary);font-size:.72rem;color:var(--text-secondary);font-family:"Cascadia Code","Fira Code","JetBrains Mono",Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
}
.blooming-console{min-width:0;min-height:0;overflow:hidden;border-top:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg-secondary)}
.blooming-console-output{flex:1;min-width:0;min-height:0;overflow:auto;padding:10px 12px;font-family:"Cascadia Code","Fira Code","JetBrains Mono",Consolas,monospace;font-size:.76rem}
.blooming-console-line{white-space:pre-wrap;word-break:break-word;padding:2px 0;color:var(--text-primary)}
.blooming-console-line.agent{color:#2563eb}
.blooming-console-line.error{color:#ef4444}
.blooming-console-line.result{color:var(--accent)}
.blooming-empty{padding:18px 14px;color:var(--text-disabled);font-size:.76rem;line-height:1.5}
.blooming-active-line{background:rgba(59,130,246,.12)}
.blooming-active-glyph{background:linear-gradient(180deg,#3b82f6,#06b6d4);border-radius:999px}
.blooming-breakpoint-glyph{
  background:radial-gradient(circle at 35% 35%, #fca5a5 0, #ef4444 55%, #b91c1c 100%);
  border-radius:50%;
  width:12px !important;
  height:12px !important;
  margin-left:4px;
  margin-top:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 10px rgba(239,68,68,.28);
}

@keyframes blooming-agent-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@media (max-width: 980px){
  .blooming-ide{grid-template-rows:auto minmax(0,1fr) minmax(120px,32%)}
  .blooming-workbench{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(220px,40vh)}
  .blooming-sidepane{grid-template-rows:repeat(3,minmax(0,1fr));max-height:none}
  .blooming-toolbar{flex-wrap:wrap}
  .blooming-file{order:10;flex-basis:100%;padding:0}
}

/* ============================================================
   APP: SETTINGS
   ============================================================ */
.settings{display:flex;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.settings-nav{
  width:200px;border-right:1px solid var(--border);padding:12px 8px;
  overflow-y:auto;flex-shrink:0;
}
.settings-nav-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;
  font-size:.85rem;color:var(--text-secondary);cursor:default;
}
.settings-nav-item:hover{background:var(--hover);color:var(--text-primary)}
.settings-nav-item.active{background:var(--accent-subtle);color:var(--accent)}
.settings-nav-item i{width:20px;text-align:center}
.settings-panel{flex:1;overflow-y:auto;padding:20px 28px}
.settings-section{margin-bottom:28px}
.settings-section h3{font-size:.95rem;font-weight:600;margin-bottom:12px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.settings-row label{font-size:.85rem;color:var(--text-secondary)}

/* toggle switch */
.toggle{
  width:40px;height:22px;border-radius:11px;background:var(--bg-tertiary);
  position:relative;cursor:pointer;transition:background .2s;border:1px solid var(--border);
}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s;
}
.toggle.on::after{transform:translateX(18px)}

/* color swatches */
.accent-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.accent-swatch{
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:border-color .15s,transform .15s;
}
.accent-swatch:hover{transform:scale(1.15)}
.accent-swatch.active{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-primary)}

/* ============================================================
   APP: ACTIVITY MONITOR
   ============================================================ */
.monitor{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.monitor-tabs{
  display:flex;border-bottom:1px solid var(--border);padding:0 8px;flex-shrink:0;
}
.monitor-tab{
  padding:10px 16px;font-size:.8rem;color:var(--text-secondary);
  border-bottom:2px solid transparent;cursor:default;
}
.monitor-tab:hover{color:var(--text-primary)}
.monitor-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.monitor-body{flex:1;overflow-y:auto;padding:8px}
.monitor-table{width:100%;border-collapse:collapse;font-size:.8rem}
.monitor-table th{
  text-align:left;padding:6px 10px;color:var(--text-secondary);font-weight:500;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-primary);
}
.monitor-table td{padding:6px 10px;border-bottom:1px solid var(--border-subtle)}
.monitor-stat{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
}
.monitor-stat-label{font-size:.8rem;color:var(--text-secondary);width:100px}
.monitor-stat-bar{flex:1;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}
.monitor-stat-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.monitor-stat-value{font-size:.8rem;width:60px;text-align:right}

/* ============================================================
   APP: BLOOMING DROP (file import)
   ============================================================ */
.drop-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;background:var(--bg-primary);color:var(--text-secondary);
  padding:40px;gap:16px;
}
.drop-zone.dragover{background:var(--accent-subtle);border:2px dashed var(--accent)}
.drop-zone i{font-size:3rem;color:var(--accent)}
.drop-zone p{font-size:.9rem}
.drop-zone .drop-btn{
  padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;
  font-size:.85rem;font-weight:500;
}
.drop-zone .drop-btn:hover{background:var(--accent-hover)}
.drop-progress{
  width:100%;max-width:400px;margin-top:12px;
}
.drop-progress .progress-item{
  display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.8rem;
}
.drop-progress .progress-bar{flex:1;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}
.drop-progress .progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .2s}

/* ============================================================
   APP: SOFTWARE MANAGER
   ============================================================ */
.store{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.store-header{
  padding:12px 16px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;gap:8px;flex-shrink:0;
}
.store-search{
  flex:1;height:32px;padding:0 12px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:8px;font-size:.8rem;color:var(--text-primary);
}
.store-search::placeholder{color:var(--text-disabled)}
.store-body{flex:1;overflow-y:auto;padding:12px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.store-card{
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;
  padding:16px;display:flex;flex-direction:column;gap:8px;
}
.store-card-header{display:flex;align-items:center;gap:10px}
.store-card-icon{width:40px;height:40px;border-radius:8px;background:var(--accent-subtle);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--accent)}
.store-card-info{flex:1}
.store-card-name{font-size:.9rem;font-weight:600}
.store-card-ver{font-size:.75rem;color:var(--text-secondary)}
.store-card-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.4}
.store-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.store-card-size{font-size:.75rem;color:var(--text-disabled)}
.store-card-btn{
  padding:6px 16px;border-radius:6px;font-size:.8rem;font-weight:500;position:relative;overflow:hidden;min-width:128px;min-height:38px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.store-card-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--accent) var(--store-progress,0%),transparent 0);opacity:.18;pointer-events:none}
.store-card-btn > *{position:relative;z-index:1}
.store-card-btn-label{white-space:nowrap}
.store-card-btn-meta{font-size:.68rem;opacity:.85;white-space:nowrap}
.store-card-btn.install{background:var(--accent);color:#fff}
.store-card-btn.install:hover{background:var(--accent-hover)}
.store-card-btn.installed{background:var(--bg-tertiary);color:var(--text-secondary)}
.store-card-btn.installing{background:var(--bg-tertiary);color:var(--accent);cursor:wait}
.store-card-btn.install-failed{background:color-mix(in srgb, var(--danger) 18%, var(--bg-tertiary));color:var(--danger)}

/* ============================================================
   APP: TOOL GUI (generic bioinformatics tool interface)
   ============================================================ */
.tg{display:flex;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.tg-sidebar{width:200px;border-right:1px solid var(--border);padding:16px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;gap:16px}
.tg-info{text-align:center}
.tg-presets{display:flex;flex-direction:column;gap:4px}
.tg-preset{padding:6px 10px;border-radius:5px;font-size:.8rem;text-align:left;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border)}
.tg-preset:hover{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent)}
.tg-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tg-form{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.tg-row{display:flex;align-items:center;gap:8px}
.tg-row label{font-size:.8rem;color:var(--text-secondary);min-width:70px}
.tg-input{flex:1;height:30px;padding:0 10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;font-size:.8rem;color:var(--text-primary)}
.tg-output-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tg-output-header{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;border-bottom:1px solid var(--border-subtle)}
.tg-terminal{flex:1;overflow-y:auto;padding:8px 12px;margin:0;background:#0e0e0e;color:#d4d4d4;font-family:"Cascadia Code","Fira Code",Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-all}

/* ============================================================
   APP: MEDIA VIEWER
   ============================================================ */
.media-viewer{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.media-toolbar{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.media-toolbar button{
  height:28px;padding:0 10px;border-radius:5px;font-size:.8rem;
  color:var(--text-secondary);display:flex;align-items:center;gap:4px;
}
.media-toolbar button:hover{background:var(--hover);color:var(--text-primary)}
.media-filename{flex:1;font-size:.8rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;background:#0e0e0e}
.media-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-disabled);font-size:.9rem}
.media-image{max-width:100%;max-height:100%;object-fit:contain}
.media-video{max-width:100%;max-height:100%;object-fit:contain;background:#000}
.media-audio-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ============================================================
   APP: 3D SEQUENCE VIEWER
   ============================================================ */
.viewer3d{display:flex;flex-direction:column;height:100%;background:#0e0e0e;color:#d4d4d4}
.viewer3d-toolbar{
  display:flex;align-items:center;gap:4px;padding:6px 8px;
  border-bottom:1px solid #333;flex-shrink:0;
}
.viewer3d-toolbar button{
  height:28px;padding:0 10px;border-radius:5px;font-size:.8rem;
  color:#999;display:flex;align-items:center;gap:4px;
}
.viewer3d-toolbar button:hover{background:rgba(255,255,255,.08);color:#ddd}
.viewer3d-canvas{flex:1;overflow:hidden;position:relative}
.viewer3d-info{
  position:absolute;bottom:8px;left:8px;font-size:.75rem;color:#666;
  pointer-events:none;
}

/* ============================================================
   SHARED UI COMPONENTS
   ============================================================ */
/* dialog/modal */
.bl-dialog-overlay{
  position:fixed;inset:0;z-index:999995;background:var(--overlay);
  display:flex;align-items:center;justify-content:center;
}
.bl-dialog{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 48px var(--shadow);min-width:320px;max-width:90vw;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.bl-dialog-header{padding:16px 20px;font-size:.95rem;font-weight:600;border-bottom:1px solid var(--border-subtle)}
.bl-dialog-body{padding:16px 20px;overflow-y:auto;font-size:.85rem;line-height:1.6}
.bl-dialog-footer{padding:12px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border-subtle)}
.bl-btn{
  padding:7px 18px;border-radius:6px;font-size:.8rem;font-weight:500;
  transition:background .12s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.bl-btn-primary{background:var(--accent);color:#fff}
.bl-btn-primary:hover{background:var(--accent-hover)}
.bl-btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}
.bl-btn-secondary:hover{background:var(--hover)}
.bl-btn-danger{background:#ef4444;color:#fff}
.bl-btn-danger:hover{background:#dc2626}
.bl-btn:disabled{opacity:.5;cursor:not-allowed}
.system-update-widget{
  position:fixed;
  right:calc(var(--safe-area-right) + 12px);
  bottom:calc(var(--taskbar-total-height) + 12px);
  width:min(320px, calc(100vw - 24px - var(--safe-area-left) - var(--safe-area-right)));
  z-index:90;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card-bg) 88%, transparent);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 40px #00000022;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:opacity .18s ease, transform .18s ease;
}
.system-update-widget.hidden{opacity:0;transform:translateY(8px);pointer-events:none}
.system-update-widget[data-tone="success"]{border-color:color-mix(in srgb, var(--accent) 42%, var(--border))}
.system-update-widget[data-tone="error"]{border-color:color-mix(in srgb, #ef4444 55%, var(--border))}
.system-update-eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.system-update-versions{display:flex;justify-content:space-between;gap:12px;font-size:.76rem;color:var(--text-secondary)}
.system-update-status{font-size:.84rem;line-height:1.45;color:var(--text-primary)}
.system-update-progress{height:6px;border-radius:999px;background:color-mix(in srgb, var(--bg-secondary) 72%, transparent);overflow:hidden}
.system-update-progress-fill{height:100%;width:0;background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white));border-radius:inherit;transition:width .18s ease}
.system-update-action{align-self:flex-end}

/* ---- OPFSFilePicker ---- */
.fp-item{
  display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;
  font-size:.8rem;cursor:default;
}
.fp-item:hover{background:var(--hover)}
.fp-item.selected{background:var(--accent-subtle)}
.fp-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.anim-fade{animation:fadeIn .15s ease-out}
.anim-slide-up{animation:slideUp .2s ease-out}
.anim-slide-down{animation:slideDown .2s ease-out}
body.wm-pointer-active{touch-action:none;overscroll-behavior:none}

.start-menu-list,.settings-nav,.settings-panel,.fm-sidebar,.fm-list,.monitor-body,.store-body,.brw-sidebar-body,.brw-settings-body,.agent-conv-list,.agent-messages,.agent-tool-card-body,.terminal-output,.media-content,.igv-container,.igv-cli-output{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---- Distraction Dimmer (focus mode) — black overlay ---- */
.dimmer-overlay{
  position:fixed;inset:0;z-index:9000;pointer-events:none;visibility:hidden;opacity:0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.02), transparent 18%),
    linear-gradient(180deg, rgba(7,10,16,.16), rgba(0,0,0,.74));
  transition:opacity .24s ease, visibility 0s linear .24s;
}
body.dimmer-active.dimmer-has-focus .dimmer-overlay{visibility:visible;opacity:var(--dimmer-opacity,0.5);transition-delay:0s}
body.dimmer-active .window.focused{z-index:9001 !important}

/* ---- responsive: small viewport ---- */
@media(max-width:768px), (pointer:coarse){
  .window{min-width:0;min-height:0;max-width:calc(100vw - 16px);max-height:calc(100vh - 56px)}
  .window-titlebar{height:48px;padding:0 10px}
  .window-titlebar-icon{width:24px;height:24px;font-size:1rem}
  .window-title{font-size:.9rem}
  .window-ctrl{width:44px;height:48px;font-size:.85rem}
  .window-resize.n{top:-10px;left:0;right:0;height:20px}
  .window-resize.s{bottom:-10px;left:0;right:0;height:20px}
  .window-resize.w{left:-10px;top:0;bottom:0;width:20px}
  .window-resize.e{right:-10px;top:0;bottom:0;width:20px}
  .window-resize.nw{top:-10px;left:-10px;width:28px;height:28px}
  .window-resize.ne{top:-10px;right:-10px;width:28px;height:28px}
  .window-resize.sw{bottom:-10px;left:-10px;width:28px;height:28px}
  .window-resize.se{bottom:-10px;right:-10px;width:28px;height:28px}
  .system-update-widget{right:calc(var(--safe-area-right) + 8px);bottom:calc(var(--taskbar-total-height) + 8px);width:min(320px, calc(100vw - 16px - var(--safe-area-left) - var(--safe-area-right)))}
  .fm-sidebar{display:none}
  .settings-nav{width:140px}
  .brw-sidebar{width:100%!important}
}

@media(max-width:640px){
  .start-menu{left:var(--safe-area-left);right:var(--safe-area-right);bottom:calc(var(--taskbar-total-height) + 4px);width:auto;max-height:60vh;border-radius:10px 10px 0 0}
}

/* ============================================================
   APP: BROWSER
   ============================================================ */
.brw{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);color:var(--text-primary);position:relative;overflow:hidden}
.brw-tabs{
  display:flex;align-items:center;gap:0;padding:0 4px;
  border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-secondary);min-height:34px;
}
.brw-tab-list{display:flex;flex:1;overflow-x:auto;gap:1px}
.brw-tab{
  display:flex;align-items:center;gap:4px;padding:5px 10px;font-size:.75rem;
  border-radius:6px 6px 0 0;cursor:default;max-width:180px;min-width:60px;
  color:var(--text-secondary);background:var(--bg-primary);border:1px solid transparent;
  border-bottom:none;position:relative;
}
.brw-tab.active{color:var(--text-primary);background:var(--bg-primary);border-color:var(--border)}
.brw-tab:hover{background:var(--hover)}
.brw-tab-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brw-tab-close{width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-size:.6rem;color:var(--text-disabled);flex-shrink:0}
.brw-tab-close:hover{background:var(--hover);color:var(--text-primary)}
.brw-tab-add{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:.7rem;color:var(--text-secondary);flex-shrink:0}
.brw-tab-add:hover{background:var(--hover);color:var(--text-primary)}
.brw-toolbar{
  display:flex;align-items:center;gap:4px;padding:4px 8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.brw-toolbar button{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;font-size:.8rem;color:var(--text-secondary);flex-shrink:0;
}
.brw-toolbar button:hover{background:var(--hover);color:var(--text-primary)}
.brw-url{
  flex:1;height:28px;padding:0 10px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--text-primary);
}
.brw-url:focus{border-color:var(--accent);outline:none}
.brw-content{flex:1;position:relative;overflow:hidden}
.brw-frame{width:100%;height:100%;border:none;background:#fff}
.brw-sidebar{
  position:absolute;right:0;top:0;bottom:0;width:280px;
  background:var(--bg-secondary);border-left:1px solid var(--border);
  display:flex;flex-direction:column;z-index:10;transition:transform .15s;
}
.brw-sidebar-hidden{transform:translateX(100%);pointer-events:none}
.brw-sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border);font-size:.85rem;font-weight:600;
}
.brw-sidebar-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:.7rem;color:var(--text-secondary)}
.brw-sidebar-close:hover{background:var(--hover);color:var(--text-primary)}
.brw-sidebar-body{flex:1;overflow-y:auto;padding:8px}
.brw-sidebar-toggle{
  width:100%;padding:6px;margin-bottom:6px;border-radius:5px;
  background:var(--bg-tertiary);color:var(--text-secondary);font-size:.75rem;cursor:pointer;text-align:center;
}
.brw-sidebar-toggle:hover{background:var(--hover);color:var(--text-primary)}
.brw-sidebar-item{
  padding:6px 8px;border-radius:5px;cursor:default;font-size:.75rem;
  display:flex;flex-direction:column;gap:2px;position:relative;
}
.brw-sidebar-item:hover{background:var(--hover)}
.brw-sidebar-item-name{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brw-sidebar-item-url{color:var(--text-disabled);font-size:.65rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brw-sidebar-del{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:.6rem;color:var(--text-disabled);opacity:0}
.brw-sidebar-item:hover .brw-sidebar-del{opacity:1}
.brw-sidebar-del:hover{background:var(--hover);color:#e5484d}
.brw-settings-panel{
  position:absolute;right:0;top:0;bottom:0;width:280px;
  background:var(--bg-secondary);border-left:1px solid var(--border);
  display:flex;flex-direction:column;z-index:10;transition:transform .15s;
}
.brw-settings-panel.brw-sidebar-hidden{transform:translateX(100%);pointer-events:none}
.brw-settings-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:.7rem;color:var(--text-secondary)}
.brw-settings-close:hover{background:var(--hover);color:var(--text-primary)}
.brw-settings-body{flex:1;overflow-y:auto;padding:8px}

/* ============================================================
   APP: IGV GENOME BROWSER
   ============================================================ */
.igv-app{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);color:var(--text-primary)}
.igv-toolbar{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;
}
.igv-label{font-size:.75rem;color:var(--text-secondary)}
.igv-genome{
  height:28px;padding:0 8px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:5px;font-size:.75rem;color:var(--text-primary);
}
.igv-locus{
  width:200px;height:28px;padding:0 8px;background:var(--input-bg);
  border:1px solid var(--border);border-radius:5px;font-size:.75rem;color:var(--text-primary);
}
.igv-locus:focus,.igv-genome:focus{border-color:var(--accent);outline:none}
.igv-toolbar button{
  height:28px;padding:0 10px;display:flex;align-items:center;gap:4px;
  border-radius:5px;font-size:.75rem;color:var(--text-secondary);
}
.igv-toolbar button:hover{background:var(--hover);color:var(--text-primary)}
.igv-go{background:var(--accent)!important;color:#fff!important;font-weight:600}
.igv-go:hover{opacity:.85}
.igv-container{flex:1;overflow:auto;min-height:0}
.igv-cli{
  border-top:1px solid var(--border);display:flex;flex-direction:column;
  height:140px;background:var(--bg-secondary);flex-shrink:0;
}
.igv-cli-hidden{display:none!important}
.igv-cli-output{flex:1;overflow-y:auto;padding:6px 10px;font-family:'Cascadia Code','Fira Code',monospace;font-size:.72rem;color:var(--text-secondary);white-space:pre-wrap}
.igv-cli-input-row{display:flex;align-items:center;gap:4px;padding:4px 10px;border-top:1px solid var(--border)}
.igv-cli-prompt{font-family:'Cascadia Code','Fira Code',monospace;font-size:.72rem;color:var(--accent)}
.igv-cli-input{
  flex:1;height:24px;padding:0 6px;background:transparent;border:none;
  font-family:'Cascadia Code','Fira Code',monospace;font-size:.72rem;color:var(--text-primary);outline:none;
}

/* ---- Material mode: app roots should not hide the window glass ---- */
body.material-effects-enabled .window:not([data-app="agent"]) .window-body > :is(.fm,.editor-container,.settings,.monitor,.drop-zone,.store,.tg,.media-viewer,.brw,.igv-app){
  background:color-mix(in srgb, var(--bg-primary) 42%, transparent) !important;
}
[data-theme="light"] body.material-effects-enabled .window:not([data-app="agent"]) .window-body > :is(.fm,.editor-container,.settings,.monitor,.drop-zone,.store,.tg,.media-viewer,.brw,.igv-app){
  background:color-mix(in srgb, var(--bg-primary) 56%, transparent) !important;
}
body.material-effects-enabled .window:not([data-app="agent"]) .window-body > :is(.terminal-container,.viewer3d){
  background:rgba(6,10,16,.34) !important;
}
[data-theme="light"] body.material-effects-enabled .window:not([data-app="agent"]) .window-body > .terminal-container{
  background:rgba(255,255,255,.24) !important;
}
body.material-effects-enabled .window:not([data-app="agent"]) :is(.tg-terminal,.media-content,.brw-tabs,.brw-toolbar,.brw-sidebar,.brw-settings-panel,.igv-cli){
  background:color-mix(in srgb, var(--bg-secondary) 46%, transparent) !important;
}
[data-theme="light"] body.material-effects-enabled .window:not([data-app="agent"]) :is(.tg-terminal,.media-content,.brw-tabs,.brw-toolbar,.brw-sidebar,.brw-settings-panel,.igv-cli){
  background:color-mix(in srgb, var(--bg-secondary) 58%, transparent) !important;
}
body.material-effects-enabled .window:not([data-app="agent"]) .monitor-table th{
  background:color-mix(in srgb, var(--bg-primary) 40%, transparent) !important;
}
body.material-effects-enabled .window:not([data-app="agent"]) .media-video{
  background:rgba(0,0,0,.18);
}

/* ===== AI Agent App ===== */
.agent-layout{display:flex;height:100%;overflow:hidden;color:var(--text-primary)}
.agent-sidebar{
  width:220px;border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
  background:var(--bg-primary)
}
.agent-sidebar-header{padding:10px 8px 6px}
.agent-new-btn{width:100%;justify-content:center;gap:6px}
.agent-conv-list{flex:1;overflow-y:auto;padding:4px 6px}
.agent-conv-item{
  padding:7px 8px;border-radius:6px;cursor:pointer;font-size:.8rem;
  display:flex;align-items:center;gap:4px;color:var(--text-primary);
  transition:background .12s
}
.agent-conv-item:hover{background:var(--hover)}
.agent-conv-item.active{background:var(--accent-subtle);color:var(--accent)}
.agent-conv-item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-conv-del{opacity:0;transition:opacity .12s;padding:2px 5px;font-size:.7rem}
.agent-conv-item:hover .agent-conv-del{opacity:1}
.agent-skills-section{
  border-top:1px solid var(--border);padding:8px 6px;flex-shrink:0
}
.agent-skills-header{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:4px
}
.agent-skill-list{display:flex;flex-direction:column;gap:2px}
.agent-skill-item{
  font-size:.76rem;padding:3px 6px;border-radius:4px;
  display:flex;align-items:center;justify-content:space-between;color:var(--text-primary)
}
.agent-skill-item:hover{background:var(--hover)}
.agent-icon-btn{
  background:none;border:none;cursor:pointer;color:var(--text-secondary);
  padding:2px 5px;border-radius:4px;font-size:.8rem;transition:color .12s
}
.agent-icon-btn:hover{color:var(--text-primary);background:var(--hover)}
.agent-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.agent-topbar{
  display:flex;align-items:center;gap:8px;padding:6px 14px;
  border-bottom:1px solid var(--border);flex-shrink:0;min-height:36px
}
.agent-conv-title{font-weight:600;font-size:.88rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-status-badge{
  font-size:.72rem;padding:2px 8px;border-radius:10px;
  background:var(--bg-secondary);color:var(--text-secondary);white-space:nowrap
}
.agent-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;min-height:0
}
.agent-welcome{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin:auto;padding:32px 24px;max-width:380px
}
.agent-presets{
  display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px
}
.agent-preset-btn{
  width:100%;text-align:left;font-size:.82rem;padding:9px 12px;line-height:1.35;
  white-space:normal;word-break:break-word
}
.agent-preset-btn:hover{filter:brightness(1.05)}
.agent-working{
  align-self:flex-start;display:flex;align-items:center;gap:8px;
  font-size:.8rem;color:var(--text-secondary);padding:8px 4px;flex-shrink:0;
  animation:agentWorkingPulse 1.2s ease-in-out infinite
}
@keyframes agentWorkingPulse{0%,100%{opacity:.5}50%{opacity:1}}
.agent-run-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  display:inline-block;margin-right:7px;flex-shrink:0;animation:agentRunBlink 1s steps(2,start) infinite}
@keyframes agentRunBlink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
.window.agent-running .window-titlebar-icon{animation:agentRunBlink 1s steps(2,start) infinite}
.agent-msg-user{
  align-self:flex-end;max-width:75%;background:var(--accent);color:#fff;
  border-radius:14px 14px 4px 14px;padding:9px 14px;white-space:pre-wrap;
  word-break:break-word;font-size:.88rem;line-height:1.5;flex-shrink:0
}
.agent-msg-assistant{
  align-self:flex-start;max-width:82%;background:var(--bg-tertiary);
  border:1px solid var(--border);
  border-radius:4px 14px 14px 14px;padding:10px 14px;
  word-break:break-word;font-size:.88rem;line-height:1.6;color:var(--text-primary);flex-shrink:0
}
.agent-msg-assistant p{margin:.3em 0}
.agent-msg-assistant h3,.agent-msg-assistant h4{margin:.5em 0 .2em;font-weight:600}

/* ===== 3D 序列查看器 ===== */
.v3d-wrap{display:flex;width:100%;height:100%;min-height:0}
.v3d-stage{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;
  background:radial-gradient(circle at 50% 32%,#1b2230 0%,#0c0f16 70%)}
.v3d-canvas{display:block;width:100%;height:100%;touch-action:none}
.v3d-status{position:absolute;left:10px;bottom:10px;padding:5px 12px;
  background:rgba(0,0,0,.55);color:#e8edf5;font-size:.74rem;border-radius:6px;
  pointer-events:none;backdrop-filter:blur(4px);max-width:80%}
.v3d-tip{position:absolute;left:10px;top:10px;padding:10px 14px;
  background:rgba(12,16,24,.9);color:#e8edf5;font-size:.78rem;line-height:1.7;
  border-radius:8px;pointer-events:none;display:none;max-width:260px;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.v3d-panel{flex:0 0 282px;width:282px;border-left:1px solid var(--border);
  background:var(--bg-primary);display:flex;flex-direction:column;gap:12px;
  padding:14px;overflow-y:auto}
.v3d-panel h3{margin:0;font-size:.98rem;font-weight:700}
.v3d-card{background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.v3d-card .v3d-card-title{font-weight:600;font-size:.82rem;color:var(--text-secondary)}
.v3d-modes{display:flex;gap:12px;flex-wrap:wrap}
.v3d-modes label{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:.82rem}
.v3d-region-row{display:flex;align-items:center;gap:6px}
.v3d-region-row input{width:74px;height:30px;padding:0 8px;
  background:var(--input-bg);border:1px solid var(--border);border-radius:5px;
  color:var(--text-primary);font-size:.8rem}
.v3d-legend{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:.72rem;line-height:1.4}
.v3d-legend span{display:flex;align-items:center;gap:5px}
.v3d-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0}
.v3d-help{font-size:.7rem;color:var(--text-secondary);line-height:1.6;
  border-top:1px dashed var(--border);padding-top:8px}
@media (max-width:760px){
  .v3d-wrap{flex-direction:column}
  .v3d-panel{flex:0 0 auto;width:auto;border-left:none;border-top:1px solid var(--border);max-height:46%}
}
.agent-msg-assistant pre{background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:8px 10px;overflow-x:auto;margin:.4em 0}
.agent-msg-assistant code{font-family:'Cascadia Code','Fira Code',monospace;font-size:.82em;background:var(--bg-primary);padding:1px 4px;border-radius:3px}
.agent-msg-assistant pre code{background:none;padding:0;font-size:.8rem}
.agent-msg-assistant ul,.agent-msg-assistant ol{margin:.3em 0;padding-left:1.4em}
.agent-msg-assistant blockquote{margin:.3em 0;padding-left:.8em;border-left:3px solid var(--accent);color:var(--text-secondary)}
.agent-msg-assistant a{color:var(--accent);text-decoration:none}
.agent-msg-assistant a:hover{text-decoration:underline}
.agent-tool-card{
  background:var(--bg-secondary);border:1px solid var(--border);
  border-radius:8px;font-size:.78rem;align-self:flex-start;
  max-width:90%;overflow:hidden;flex-shrink:0
}
.agent-tool-card-header{
  padding:7px 10px;cursor:pointer;display:flex;align-items:center;
  gap:6px;font-family:'Cascadia Code','Fira Code',monospace;
  user-select:none;color:var(--text-primary)
}
.agent-tool-card-header:hover{background:var(--hover)}
.agent-tool-toggle{transition:transform .18s}
.agent-tool-card.expanded .agent-tool-toggle{transform:rotate(180deg)}
.agent-tool-card-body{
  padding:8px 10px;border-top:1px solid var(--border);display:none;
  font-family:'Cascadia Code','Fira Code',monospace;font-size:.74rem;
  white-space:pre-wrap;word-break:break-all;color:var(--text-secondary);
  max-height:300px;overflow-y:auto
}
.agent-tool-card.expanded .agent-tool-card-body{display:block}
.agent-tool-section{margin-bottom:6px;color:var(--text-primary)}
.agent-input-area{
  border-top:1px solid var(--border);padding:10px 12px;
  display:flex;align-items:flex-end;gap:8px;flex-shrink:0
}
.agent-input{
  flex:1;min-height:52px;max-height:200px;resize:none;
  background:var(--bg-secondary);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;color:var(--text-primary);
  font-family:inherit;font-size:.88rem;line-height:1.5;outline:none;
  transition:border-color .15s
}
.agent-input:focus{border-color:var(--accent)}
.agent-input-btns{display:flex;flex-direction:column;gap:4px}
.agent-send-btn,.agent-stop-btn{
  width:36px;height:36px;border-radius:8px;padding:0;
  display:flex;align-items:center;justify-content:center
}

