﻿
/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Tahoma','Verdana','MS Sans Serif',sans-serif;font-size:12px;user-select:none;cursor:default}
:root{
  --w95-teal:#008080;
  --w95-gray:#c0c0c0;
  --w95-gray-d:#808080;
  --w95-gray-l:#dfdfdf;
  --w95-blue:#000080;
  --w95-blue-l:#1084d0;
  --w95-white:#ffffff;
  --w95-black:#000000;
  --w95-yellow:#ffff00;
  --w95-green:#00ff00;
  --w95-title-active:linear-gradient(90deg,#000080 0%,#1084d0 100%);
  --w95-title-inactive:linear-gradient(90deg,#808080 0%,#b5b5b5 100%);
  --btn-3d:2px outset #dfdfdf;
  --win-border:2px solid;
  --win-outset:outset 2px #fff;
  --win-inset:inset 2px #808080;
}

/* ============ OS THEME OVERRIDES ============ */
/* ---- Windows XP (Luna Blue) ---- */
body.os-winxp #desktop{background:linear-gradient(135deg,#3b7ea1 0%,#5a9fd4 40%,#7ab8e0 100%)}
body.os-winxp .window{border-radius:8px 8px 0 0;border:1px solid #0831d9;box-shadow:2px 2px 8px rgba(0,0,0,0.3)}
body.os-winxp .window-titlebar{background:linear-gradient(180deg,#0058e6 0%,#3993ff 5%,#2f6fd6 100%);border-radius:7px 7px 0 0;height:28px;font-size:12px}
body.os-winxp .window.inactive .window-titlebar{background:linear-gradient(180deg,#7a96df 0%,#a1b8e9 100%)}
body.os-winxp .window-title{color:#fff;font-weight:bold;padding:0 4px}
body.os-winxp .win-btn{border-radius:3px;border:1px solid #0c248a;background:linear-gradient(180deg,#3993ff,#2f6fd6);color:#fff;width:20px;height:18px;font-size:9px}
body.os-winxp .win-btn-close{background:linear-gradient(180deg,#e8554e,#c42d26);border-color:#8e1510}
body.os-winxp .window-body{border:1px solid #0831d9;border-top:none}
body.os-winxp #taskbar{background:linear-gradient(180deg,#2d5fae 0%,#4a8fd9 3%,#3173dd 100%);height:34px;border-top:1px solid #1a4a9b;box-shadow:0 -1px 2px rgba(0,0,0,0.3)}
body.os-winxp #startBtn{background:linear-gradient(180deg,#3fa642 0%,#2d8a30 50%,#3fa642 100%);border-radius:0 15px 15px 0;height:28px;padding:0 12px;color:#fff;font-style:italic;border:none}
body.os-winxp #startBtn.active{background:linear-gradient(180deg,#2d8a30 0%,#3fa642 100%)}
body.os-winxp .taskbar-app{border-radius:3px;border:1px solid transparent;background:transparent;color:#fff}
body.os-winxp .taskbar-app.active{background:linear-gradient(180deg,#1a4a9b 0%,#3173dd 100%);border:1px solid #1a4a9b}
body.os-winxp #clock{border:none;color:#fff;background:linear-gradient(180deg,#2d5fae,#4a8fd9);border-radius:3px}
body.os-winxp .desktop-icon .icon-label{font-size:12px;text-shadow:1px 1px 2px #000}
body.os-winxp #startMenu{background:linear-gradient(180deg,#2d5fae 0%,#fff 6%,#ece9d8 100%);border:1px solid #0831d9;border-radius:5px;box-shadow:3px 3px 10px rgba(0,0,0,0.3)}

/* ---- Windows 7 (Aero Glass) ---- */
body.os-win7 #desktop{background:linear-gradient(180deg,#6db3e8 0%,#a8d4f0 50%,#d4e8f5 100%)}
body.os-win7 .window{border-radius:6px;border:1px solid rgba(80,120,180,0.5);box-shadow:0 0 15px rgba(0,0,40,0.2),0 8px 25px rgba(0,0,0,0.15);background:rgba(255,255,255,0.85)}
body.os-win7 .window-titlebar{background:linear-gradient(180deg,rgba(255,255,255,0.4) 0%,rgba(200,220,250,0.3) 100%);border-radius:6px 6px 0 0;height:30px;backdrop-filter:blur(10px)}
body.os-win7 .window.inactive .window-titlebar{background:linear-gradient(180deg,rgba(255,255,255,0.2),rgba(200,200,200,0.15))}
body.os-win7 .window-title{color:#1a3a6a;font-weight:bold}
body.os-win7 .win-btn{border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,0.7),rgba(200,220,250,0.5));border:1px solid rgba(100,140,200,0.5);color:#1a3a6a;width:22px;height:20px;font-size:10px}
body.os-win7 .win-btn-close{background:linear-gradient(180deg,#e8554e,#c42d26);color:#fff}
body.os-win7 .window-body{background:rgba(255,255,255,0.9)}
body.os-win7 #taskbar{background:linear-gradient(180deg,rgba(30,50,90,0.8) 0%,rgba(15,25,50,0.9) 100%);height:40px;border-top:1px solid rgba(100,140,200,0.3);backdrop-filter:blur(20px);box-shadow:0 -2px 10px rgba(0,0,0,0.3)}
body.os-win7 #startBtn{background:linear-gradient(180deg,rgba(50,150,250,0.6),rgba(20,80,200,0.6));border-radius:8px;height:34px;padding:0 14px;color:#fff;border:1px solid rgba(80,160,250,0.4);font-size:13px;backdrop-filter:blur(5px)}
body.os-win7 .taskbar-app{border-radius:4px;background:rgba(255,255,255,0.1);border:1px solid transparent;color:#e0e8f5;padding:0 10px}
body.os-win7 .taskbar-app.active{background:linear-gradient(180deg,rgba(100,170,250,0.3),rgba(50,100,200,0.2));border:1px solid rgba(120,180,250,0.4)}
body.os-win7 #clock{border:none;color:#e0e8f5;background:transparent;font-size:13px}
body.os-win7 .desktop-icon .icon-label{font-size:12px;text-shadow:1px 1px 2px rgba(0,0,0,0.5)}

/* ---- Windows 10 (Flat Modern) ---- */
body.os-win10 #desktop{background:linear-gradient(135deg,#1e3a5f 0%,#2d5a8e 50%,#1a4878 100%)}
body.os-win10 .window{border-radius:0;border:1px solid #2a6da8;box-shadow:0 4px 20px rgba(0,0,0,0.3);background:#2b2b2b}
body.os-win10 .window-titlebar{background:#1f1f1f;height:32px;border-radius:0;border:none}
body.os-win10 .window.inactive .window-titlebar{background:#2a2a2a}
body.os-win10 .window-title{color:#e0e0e0;font-size:12px;font-weight:normal}
body.os-win10 .win-btn{border:none;background:transparent;color:#e0e0e0;width:46px;height:32px;font-size:10px;border-radius:0}
body.os-win10 .win-btn:hover{background:rgba(255,255,255,0.1)}
body.os-win10 .win-btn-close:hover{background:#e81123;color:#fff}
body.os-win10 .window-body{background:#f0f0f0;border:none}
body.os-win10 #taskbar{background:rgba(20,20,20,0.95);height:44px;border-top:none;box-shadow:0 -1px 3px rgba(0,0,0,0.4)}
body.os-win10 #startBtn{background:transparent;border:none;color:#e0e0e0;height:40px;padding:0 12px;font-size:13px;border-radius:0}
body.os-win10 #startBtn:hover{background:rgba(255,255,255,0.08)}
body.os-win10 .taskbar-app{border:none;background:transparent;color:#e0e0e0;padding:0 12px;border-bottom:2px solid transparent}
body.os-win10 .taskbar-app.active{background:rgba(255,255,255,0.08);border-bottom:2px solid #2d8cf0}
body.os-win10 #clock{border:none;color:#e0e0e0;background:transparent;font-size:12px}
body.os-win10 .desktop-icon .icon-label{color:#fff;font-size:12px;text-shadow:1px 1px 2px #000}
body.os-win10 .desktop-icon{border-radius:4px}
body.os-win10 .desktop-icon.selected{background:rgba(45,140,240,0.3);border:1px solid rgba(45,140,240,0.5);outline:none}
body.os-win10 .desktop-icon:hover{background:rgba(255,255,255,0.1)}

/* ---- VOID (Face to Face) ---- */
body.os-void #desktop{background:#0a0a0f}
body.os-void #desktopIcons,body.os-void #taskbar,body.os-void #startMenu{display:none!important}
body.os-void #windowsContainer{display:none!important}
body.os-void #agent{width:120px;height:120px;left:50%!important;top:50%!important;transform:translate(-50%,-50%);transition:none}
body.os-void #agent .agent-body{width:80px;height:80px;left:20px;top:20px;background:radial-gradient(circle,#7dd3fc,#0ea5e9,#0369a1);border:3px solid #0284c7;box-shadow:0 0 30px rgba(14,165,233,0.6),0 0 60px rgba(14,165,233,0.3);border-radius:50%}
body.os-void #agent .agent-face{left:24px;top:30px;width:48px;height:32px}
body.os-void #agent .agent-eye{width:10px;height:10px;background:#fff;border-radius:50%;border:none}
body.os-void #agent .agent-pupil{width:5px;height:5px;background:#0a0a0f;border-radius:50%}
body.os-void #agent .agent-mouth{width:20px;height:6px;background:#0a0a0f;border:none;border-radius:0 0 10px 10px}
body.os-void #agent .agent-antenna,body.os-void #agent .agent-antenna-tip,body.os-void #agent .agent-feet,body.os-void #agent .agent-foot{display:none}
body.os-void #agent.idle .agent-sprite{animation:agentFloat 3s ease-in-out infinite}
body.os-void .agent-bubble{font-size:14px;max-width:320px;padding:10px 16px;border-radius:12px;border:1px solid rgba(14,165,233,0.5);background:rgba(10,20,40,0.9);color:#e0f0ff;box-shadow:0 4px 20px rgba(14,165,233,0.2)}
body.os-void .agent-bubble.visible{display:block}
body.os-void .agent-bubble::after,body.os-void .agent-bubble::before{display:none}
body.os-void #voidCamera{position:fixed;bottom:20px;right:20px;width:200px;height:150px;border-radius:12px;border:2px solid rgba(14,165,233,0.5);overflow:hidden;background:#000;z-index:150;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
body.os-void #voidCamera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
body.os-void #voidCamera .cam-label{position:absolute;top:4px;left:8px;color:rgba(255,255,255,0.7);font-size:10px;text-shadow:0 0 4px #000}
body.os-void #voidChat{position:fixed;bottom:20px;left:20px;width:340px;z-index:150}
body.os-void #voidChat .void-input{width:100%;padding:10px 14px;border-radius:24px;border:1px solid rgba(14,165,233,0.5);background:rgba(10,20,40,0.9);color:#e0f0ff;font-size:13px;outline:none}
body.os-void #voidChat .void-mic{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:rgba(14,165,233,0.3);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
body.os-void #voidChat .void-mic.listening{background:#e81123;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes agentFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============ CRT EFFECT ============ */
.crt-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99998;opacity:0.04;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,1) 0px,rgba(0,0,0,1) 1px,transparent 1px,transparent 3px)}
.crt-flicker{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99997;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.15) 100%)}

/* ============ BOOT SCREEN ============ */
#bootScreen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:'Courier New',monospace}
#bootScreen .boot-text{font-size:14px;line-height:1.8;color:#c0c0c0;max-width:600px;width:90%;margin-bottom:30px;white-space:pre}
#bootLogo{text-align:center;margin-bottom:20px}
#bootLogo .logo-main{font-family:'Press Start 2P',monospace;font-size:28px;color:#fff;text-shadow:2px 2px 0 #1084d0;margin-bottom:10px}
#bootLogo .logo-sub{font-size:12px;color:#808080}
#bootBar{width:240px;height:20px;border:2px solid #808080;background:#000;padding:2px;margin-top:20px}
#bootBarFill{height:100%;width:0;background:repeating-linear-gradient(90deg,#00f 0px,#00f 4px,transparent 4px,transparent 8px);transition:width .1s linear}

/* ============ DESKTOP ============ */
#desktop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--w95-teal);overflow:hidden}

/* ============ DESKTOP ICONS ============ */
.desktop-icons{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:8px;max-height:calc(100vh - 50px);z-index:1}
.desktop-icon{width:80px;text-align:center;cursor:pointer;padding:4px;border-radius:0;flex-shrink:0}
.desktop-icon .icon-img{width:32px;height:32px;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}
.desktop-icon .icon-label{color:#fff;font-size:11px;text-shadow:1px 1px 1px #000;text-align:center;word-wrap:break-word;line-height:1.2;padding:1px 2px}
.desktop-icon.selected{background:var(--w95-blue);outline:1px dotted #fff}
.desktop-icon.selected .icon-label{background:var(--w95-blue)}
.desktop-icon svg{width:32px;height:32px}

/* ============ WINDOWS ============ */
.window{position:absolute;background:var(--w95-gray);border:var(--win-border);border-color:#dfdfdf #808080 #808080 #dfdfdf;border-width:2px;border-style:solid;box-shadow:1px 1px 0 #000;display:flex;flex-direction:column;min-width:200px;min-height:100px;z-index:100}
.window.minimized{display:none}
.window-titlebar{background:var(--w95-title-active);height:20px;display:flex;align-items:center;padding:0 2px 0 4px;cursor:move;flex-shrink:0}
.window.inactive .window-titlebar{background:var(--w95-title-inactive)}
.window-title{color:#fff;font-size:11px;font-weight:bold;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window-controls{display:flex;gap:2px}
.win-btn{width:16px;height:14px;background:var(--w95-gray);border:1px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:8px;font-family:'Marlett',sans-serif;display:flex;align-items:center;justify-content:center;color:#000;cursor:pointer;font-weight:bold;line-height:1}
.win-btn:active{border-color:#808080 #dfdfdf #dfdfdf #808080}
.win-btn-close{font-family:Tahoma;font-size:9px;font-weight:bold}
.window-body{flex:1;overflow:auto;padding:0;position:relative}
.window-statusbar{height:18px;border-top:1px solid #808080;display:flex;align-items:center;padding:0 4px;font-size:11px;color:#000;gap:8px;flex-shrink:0}
.status-field{border:1px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:0 4px;height:14px;display:flex;align-items:center;overflow:hidden}

/* ============ TASKBAR ============ */
#taskbar{position:fixed;bottom:0;left:0;width:100%;height:30px;background:var(--w95-gray);border-top:2px solid #dfdfdf;display:flex;align-items:center;z-index:5000;gap:2px;padding:2px}
#startBtn{height:24px;padding:0 6px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:12px;font-weight:bold;display:flex;align-items:center;gap:4px;cursor:pointer;color:#000}
#startBtn.active{border-color:#808080 #dfdfdf #dfdfdf #808080;background:var(--w95-gray-d)}
#startBtn .start-logo{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:14px}
#startBtn .start-logo img{width:16px;height:16px;display:block;object-fit:contain}
body.os-win10 #startBtn .start-logo{width:18px;height:18px}
body.os-win10 #startBtn .start-logo img{width:18px;height:18px}
#startBtn .start-text{font-style:italic;font-weight:bold}
.taskbar-divider{width:2px;height:20px;background:#808080;border-right:1px solid #dfdfdf;margin:0 2px}
#taskbarApps{flex:1;display:flex;gap:2px;overflow:hidden;height:24px;align-items:center}
.taskbar-app{height:22px;padding:0 8px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:11px;display:flex;align-items:center;gap:4px;cursor:pointer;color:#000;max-width:160px;overflow:hidden;white-space:nowrap}
.taskbar-app.active{border-color:#808080 #dfdfdf #dfdfdf #808080;background:var(--w95-gray-d);font-weight:bold;background-image:repeating-linear-gradient(135deg,transparent 0,transparent 2px,rgba(255,255,255,0.1) 2px,rgba(255,255,255,0.1) 4px)}
.taskbar-app .ta-icon{font-size:14px}
#clock{height:24px;padding:0 8px;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;font-size:11px;display:flex;align-items:center;color:#000;gap:6px}
#clock .tray-icon{font-size:12px}

/* ============ START MENU ============ */
#startMenu{position:fixed;bottom:28px;left:2px;width:200px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;display:none;flex-direction:row;z-index:6000;box-shadow:2px 2px 4px rgba(0,0,0,0.3)}
#startMenu.visible{display:flex}
.start-sidebar{width:24px;background:linear-gradient(180deg,#000080 0%,#1084d0 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.start-sidebar-text{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:2px;text-align:center}
.start-sidebar-text .s95{color:#fff}
.start-items{flex:1;padding:2px}
.start-item{display:flex;align-items:center;gap:8px;padding:4px 8px;cursor:pointer;font-size:12px;color:#000;border:1px solid transparent}
.start-item:hover{background:var(--w95-blue);color:#fff;border:1px solid dotted #fff}
.start-item .si-icon{font-size:20px;width:24px;text-align:center;flex-shrink:0}
.start-item .si-label{flex:1}
.start-item .si-arrow{font-size:8px;color:#808080}
.start-item:hover .si-arrow{color:#fff}
.start-separator{height:1px;background:#808080;border-bottom:1px solid #dfdfdf;margin:2px 4px}
/* Start-menu 升级按钮 */
.start-item.start-item-upgrade{background:linear-gradient(90deg,rgba(46,204,113,0.18),rgba(46,204,113,0.04));color:#0a7d3c;font-weight:bold;border:1px solid rgba(46,204,113,0.45)}
.start-item.start-item-upgrade .si-icon{filter:drop-shadow(0 0 2px rgba(46,204,113,0.6))}
.start-item.start-item-upgrade:hover{background:linear-gradient(90deg,#2ecc71,#27ae60);color:#fff;border:1px solid #fff}
.start-item.start-item-upgrade:hover .si-arrow{color:#fff}
/* Win7/Win10 暗色主题下保持可读 */
body.os-win7 .start-item.start-item-upgrade,body.os-win10 .start-item.start-item-upgrade{color:#0a7d3c}
body.os-win7 .start-item.start-item-upgrade:hover,body.os-win10 .start-item.start-item-upgrade:hover{color:#fff}

/* ============ AGENT CHARACTER ============ */
#agent{position:absolute;width:48px;height:48px;z-index:200;cursor:grab;transition:left 1.5s linear,top 1.5s linear;pointer-events:auto}
.agent-sprite{width:100%;height:100%;position:relative;transform-origin:center bottom}
.agent-body{position:absolute;left:8px;top:6px;width:32px;height:36px;background:#5ad7d7;border-radius:50% 50% 40% 40%;border:2px solid #2a9d9d;box-shadow:inset -3px -3px 0 rgba(0,0,0,0.1)}
.agent-face{position:absolute;left:12px;top:12px;width:24px;height:20px}
.agent-eye{position:absolute;width:6px;height:8px;background:#fff;border-radius:3px;border:1px solid #000;overflow:hidden}
.agent-eye-l{left:2px;top:0}
.agent-eye-r{right:2px;top:0}
.agent-pupil{position:absolute;width:3px;height:3px;background:#000;border-radius:50%;left:1px;top:3px;transition:all .2s}
.agent-mouth{position:absolute;left:6px;bottom:0;width:12px;height:4px;border:1px solid #000;border-top:none;border-radius:0 0 6px 6px;background:#fff;transition:all .2s}
.agent-antenna{position:absolute;left:22px;top:0;width:4px;height:8px;background:#2a9d9d}
.agent-antenna-tip{position:absolute;left:21px;top:-4px;width:6px;height:6px;background:#ffdd00;border-radius:50%;border:1px solid #cc9900;box-shadow:0 0 4px #ffdd00}
.agent-feet{position:absolute;bottom:-2px;width:100%;display:flex;justify-content:space-around;padding:0 6px}
.agent-foot{width:8px;height:4px;background:#2a9d9d;border-radius:2px 2px 0 0}

/* Agent States */
#agent.idle .agent-sprite{animation:agentIdle 3s ease-in-out infinite}
#agent.happy .agent-sprite{animation:agentHappy .5s ease-in-out infinite}
#agent.happy .agent-mouth{height:6px;border-radius:0 0 8px 8px}
#agent.thinking .agent-pupil{left:0;top:0}
#agent.thinking .agent-sprite{animation:agentThink 2s ease-in-out infinite}
#agent.surprised .agent-eye{height:10px;width:8px}
#agent.surprised .agent-pupil{width:5px;height:5px;left:1px;top:2px}
#agent.surprised .agent-mouth{height:6px;width:6px;border-radius:50%;border:1px solid #000;left:9px}
#agent.sleeping .agent-eye{height:2px;border-radius:1px;top:2px}
#agent.sleeping .agent-pupil{display:none}
#agent.sleeping .agent-mouth{height:3px;width:8px;left:8px}
#agent.walking .agent-sprite{animation:agentWalk .3s ease-in-out infinite}
#agent.walking .agent-foot{animation:agentFoot .3s ease-in-out infinite}
#agent.walking .agent-foot:nth-child(2){animation-delay:.15s}

@keyframes agentIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes agentHappy{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.05)}}
@keyframes agentThink{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-2px) rotate(-3deg)}75%{transform:translateX(2px) rotate(3deg)}}
@keyframes agentWalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes agentFoot{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Agent Speech Bubble */
.agent-bubble{position:absolute;background:#ffffcc;border:1px solid #000;border-radius:6px;padding:6px 10px;font-size:11px;color:#000;max-width:200px;z-index:300;box-shadow:2px 2px 4px rgba(0,0,0,0.2);line-height:1.4;display:none;pointer-events:none}
.agent-bubble.visible{display:block;animation:bubbleIn .2s ease-out}
.agent-bubble::after{content:'';position:absolute;bottom:-8px;left:20px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #000}
.agent-bubble::before{content:'';position:absolute;bottom:-6px;left:21px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ffffcc;z-index:1}
@keyframes bubbleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}

/* Agent Thought Bubble */
.agent-thought{position:absolute;background:#fff;border:1px solid #000;border-radius:50%;padding:6px 10px;font-size:11px;color:#000;max-width:180px;z-index:300;box-shadow:2px 2px 4px rgba(0,0,0,0.1);line-height:1.4;display:none;pointer-events:none;border-radius:20px}
.agent-thought.visible{display:block;animation:bubbleIn .3s ease-out}
.agent-thought::after{content:'';position:absolute;bottom:-6px;left:15px;width:8px;height:8px;background:#fff;border:1px solid #000;border-radius:50%}
.agent-thought::before{content:'';position:absolute;bottom:-12px;left:10px;width:5px;height:5px;background:#fff;border:1px solid #000;border-radius:50%}

/* Agent Dream Bubble */
.agent-dream{position:absolute;background:#e8d5ff;border:2px solid #9370db;border-radius:12px;padding:8px 12px;font-size:11px;color:#333;max-width:200px;z-index:300;box-shadow:2px 2px 8px rgba(147,112,219,0.3);line-height:1.5;display:none;pointer-events:none;animation:bubbleIn .3s ease-out}
.agent-dream.visible{display:block}
.agent-dream::after{content:'💤';position:absolute;bottom:-10px;left:15px;font-size:10px}

/* Agent Dragging */
#agent.dragging{cursor:grabbing!important;transition:none!important}

/* Matrix Rain */
#matrixOverlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;background:#000}
#matrixOverlay canvas{display:block;width:100%;height:100%}

/* ============ PET EVOLUTION ============ */
/* WinXP: Rounder, warmer, bigger eyes */
body.os-winxp #agent .agent-body{background:linear-gradient(180deg,#ff9d4a,#ff7a00);border:2px solid #cc6600;border-radius:50% 50% 42% 42%;box-shadow:inset -3px -3px 0 rgba(0,0,0,0.1),0 0 8px rgba(255,150,50,0.4)}
body.os-winxp #agent .agent-antenna-tip{background:#ffdd00;box-shadow:0 0 6px #ffdd00,0 0 12px #ff9900}
body.os-winxp #agent .agent-eye{width:8px;height:9px;border-radius:4px}
body.os-winxp #agent .agent-pupil{width:4px;height:4px}
body.os-winxp #agent .agent-mouth{width:14px;height:5px}
body.os-winxp #agent.happy .agent-sprite{animation:agentHappy .4s ease-in-out infinite}

/* Win7: Glassy, modern, semi-transparent */
body.os-win7 #agent .agent-body{background:linear-gradient(135deg,rgba(100,200,255,0.8),rgba(60,150,230,0.9));border:2px solid rgba(80,160,220,0.6);border-radius:48% 48% 40% 40%;box-shadow:inset -2px -2px 0 rgba(255,255,255,0.2),0 0 12px rgba(100,200,255,0.5)}
body.os-win7 #agent .agent-antenna-tip{background:#00ddff;box-shadow:0 0 8px #00ddff}
body.os-win7 #agent .agent-eye{width:7px;height:8px;border-radius:4px}
body.os-win7 #agent .agent-pupil{width:3px;height:3px;background:#1a3a6a}
body.os-win7 #agent .agent-mouth{width:13px;height:4px;border-radius:0 0 8px 8px}

/* Win10: Flat, clean, modern */
body.os-win10 #agent .agent-body{background:#0078d4;border:2px solid #005a9e;border-radius:50% 50% 42% 42%;box-shadow:none}
body.os-win10 #agent .agent-antenna-tip{background:#0078d4;box-shadow:0 0 6px #0078d4}
body.os-win10 #agent .agent-eye{width:7px;height:8px;border-radius:50%;border:1px solid #005a9e}
body.os-win10 #agent .agent-pupil{width:3px;height:3px}
body.os-win10 #agent .agent-mouth{width:13px;height:4px;border-radius:0 0 6px 6px;border:1px solid #005a9e;border-top:none}

/* Upgrade flash effect */
#upgradeFlash{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99997;background:#fff;opacity:0;pointer-events:none;transition:opacity 0.3s}
#upgradeFlash.flashing{opacity:1}

/* ============ APP STYLES ============ */
/* Notepad */
.notepad-menubar{display:flex;background:var(--w95-gray);border-bottom:1px solid #808080;font-size:11px;padding:2px 0}
.notepad-menu{padding:2px 8px;cursor:pointer}
.notepad-menu:hover{background:var(--w95-blue);color:#fff}
.notepad-textarea{width:100%;height:calc(100% - 20px);border:none;outline:none;font-family:'Courier New',monospace;font-size:13px;padding:2px;background:#fff;resize:none;line-height:1.5}

/* Calculator */
.calc-display{background:#c0dcc0;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:4px 8px;text-align:right;font-family:'Courier New',monospace;font-size:20px;font-weight:bold;margin:4px;height:28px;overflow:hidden}
.calc-btns{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px}
.calc-btn{height:28px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}
.calc-btn:active{border-color:#808080 #dfdfdf #dfdfdf #808080}
.calc-btn.num{font-weight:bold}
.calc-btn.op{color:#000080}
.calc-btn.fn{color:#800000}
.calc-btn.eq{color:#008000;font-weight:bold}

/* Browser */
.browser-toolbar{display:flex;align-items:center;gap:4px;padding:2px 4px;background:var(--w95-gray);border-bottom:1px solid #808080}
.browser-btn{width:24px;height:22px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}
.browser-btn:active{border-color:#808080 #dfdfdf #dfdffd #808080}
.browser-url{flex:1;height:22px;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:0 4px;font-size:11px;background:#fff}
.browser-content{flex:1;background:#fff;overflow:auto;padding:16px;font-size:13px;line-height:1.6;color:#000}

/* File Explorer */
.fe-toolbar{display:flex;align-items:center;gap:4px;padding:3px 4px;background:var(--w95-gray);border-bottom:1px solid #808080;font-size:11px}
.fe-menubar{display:flex;gap:1px;padding:2px 0;background:var(--w95-gray);border-bottom:1px solid #808080;font-size:11px}
.fe-menu{padding:2px 6px;cursor:pointer}
.fe-menu:hover{background:var(--w95-blue);color:#fff}
.fe-content{flex:1;background:#fff;padding:8px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.fe-item{width:72px;text-align:center;cursor:pointer;padding:4px}
.fe-item:hover{background:#e8e8e8}
.fe-item.selected{background:var(--w95-blue)}
.fe-item.selected .fe-label{color:#fff}
.fe-item .fe-icon{font-size:32px;line-height:1}
.fe-item .fe-label{font-size:11px;color:#000;margin-top:2px;word-wrap:break-word;line-height:1.2}

/* Agent Store */
.store-header{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;padding:6px 10px;font-size:14px;font-weight:bold;display:flex;align-items:center;gap:8px}
.store-search{padding:6px;background:var(--w95-gray);border-bottom:1px solid #808080;display:flex;gap:4px;align-items:center}
.store-search-input{flex:1;height:22px;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:0 4px;font-size:11px}
.store-grid{padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;overflow:auto;flex:1;background:#fff}
.store-card{border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;background:#fff;padding:8px;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.store-card .sc-icon{font-size:36px;line-height:1}
.store-card .sc-name{font-size:12px;font-weight:bold}
.store-card .sc-desc{font-size:10px;color:#555;line-height:1.3}
.store-card .sc-size{font-size:10px;color:#888}
.store-card .sc-btn{margin-top:4px;padding:2px 12px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:11px;cursor:pointer;color:#000}
.store-card .sc-btn:active{border-color:#808080 #dfdfdf #dfdfdf #808080}
.store-card .sc-btn.installed{background:#c0dcc0;color:#008000}
.store-card .sc-progress{width:100%;height:12px;border:1px solid #808080;background:#fff;margin-top:2px;display:none}
.store-card .sc-progress-bar{height:100%;width:0;background:repeating-linear-gradient(90deg,#00f 0px,#00f 3px,transparent 3px,transparent 6px);transition:width .1s linear}
.store-card.installing .sc-progress{display:block}
.store-card.installing .sc-btn{display:none}

/* Agent Chat */
.chat-window{display:flex;flex-direction:column;height:100%;background:#fff}
.chat-messages{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;background:#fff}
.chat-msg{max-width:80%;padding:6px 10px;font-size:12px;line-height:1.4;border-radius:4px;word-wrap:break-word}
.chat-msg.user{align-self:flex-end;background:var(--w95-blue);color:#fff;border:1px solid #000080}
.chat-msg.agent{align-self:flex-start;background:#f0f0f0;color:#000;border:1px solid #808080}
.chat-msg.agent .msg-sender{font-size:10px;color:#1084d0;font-weight:bold;margin-bottom:2px}
.chat-msg .tool-indicator{font-size:10px;color:#666;font-style:italic;margin-top:4px;padding:2px 4px;background:#e8e8e8;border-radius:2px}
.chat-input-area{display:flex;gap:4px;padding:6px;border-top:1px solid #808080;background:var(--w95-gray)}
.chat-input{flex:1;height:22px;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:0 4px;font-size:12px;background:#fff}
.chat-send{padding:0 12px;height:22px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:11px;cursor:pointer;color:#000}
.chat-send:active{border-color:#808080 #dfdfdf #dfdfdf #808080}
.chat-typing{font-size:10px;color:#888;padding:0 8px;display:none}
.chat-typing.visible{display:block}
.chat-typing .dots{animation:typingDots 1s infinite}
@keyframes typingDots{0%,100%{opacity:0.3}50%{opacity:1}}

/* Paint */
.paint-toolbar{display:flex;gap:2px;padding:3px;background:var(--w95-gray);border-bottom:1px solid #808080;align-items:center}
.paint-color{width:16px;height:16px;border:1px solid #808080;cursor:pointer;margin:1px}
.paint-color.selected{outline:2px solid #000080}
.paint-canvas-area{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:auto}
.paint-canvas{border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;cursor:crosshair;background:#fff}
.paint-tools{display:flex;gap:2px;margin-left:8px}
.paint-tool{width:22px;height:22px;border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--w95-gray)}
.paint-tool.selected{background:var(--w95-blue);color:#fff}

/* Settings Dialog */
.settings-dialog{padding:12px;font-size:12px}
.settings-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.settings-label{width:100px;text-align:right}
.settings-input{flex:1;height:20px;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:0 4px;background:#fff}
.settings-btn{padding:2px 12px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:11px;cursor:pointer}
.settings-btn:active{border-color:#808080 #dfdfdf #dfdfdf #808080}

/* Error Dialog */
.error-dialog{padding:16px;text-align:center}
.error-icon{font-size:32px;color:#cc0000;margin-bottom:8px}
.error-text{font-size:12px;color:#000;margin-bottom:12px}

/* Download dialog */
.download-dialog{padding:12px}
.download-bar{width:100%;height:16px;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;background:#fff;margin:8px 0}
.download-bar-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,#00f 0px,#00f 4px,transparent 4px,transparent 8px);transition:width .1s linear}
.download-text{font-size:11px;text-align:center;margin-top:4px}

/* Code Editor */
.code-editor-area{flex:1;display:flex;flex-direction:column;background:#1e1e1e}
.code-editor-textarea{flex:1;background:#1e1e1e;color:#d4d4d4;border:none;outline:none;font-family:'Courier New',monospace;font-size:13px;padding:8px;resize:none;line-height:1.5;tab-size:2}
.code-editor-toolbar{display:flex;gap:4px;padding:3px;background:var(--w95-gray);border-bottom:1px solid #808080;font-size:11px;align-items:center}
.code-btn{padding:2px 8px;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;font-size:11px;cursor:pointer}
.code-btn:active{border-color:#808080 #dfdfdf #dfdffd #808080}

/* Snake Game */
.snake-canvas{background:#000;border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;margin:8px auto;display:block}
.snake-score{font-size:12px;color:#000;text-align:center;padding:4px;font-weight:bold}

/* Life Counter */
.life-counter{padding:20px;text-align:center;font-size:14px;color:#000}
.life-counter-input{margin:8px 0}
.life-counter-input input{border:2px solid;border-color:#808080 #dfdfdf #dfdfdf #808080;padding:2px 4px;font-size:12px}
.life-counter-result{font-size:28px;font-weight:bold;color:#000080;margin:12px 0}
.life-counter-days{font-size:36px;font-family:'Press Start 2P',monospace;color:#cc0000}

/* Context Menu */
.context-menu{position:fixed;background:var(--w95-gray);border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;z-index:9000;padding:2px;min-width:140px;box-shadow:2px 2px 4px rgba(0,0,0,0.3);display:none}
.context-menu.visible{display:block}
.ctx-item{padding:3px 20px;font-size:11px;cursor:pointer;color:#000;display:flex;align-items:center;gap:6px}
.ctx-item:hover{background:var(--w95-blue);color:#fff}
.ctx-separator{height:1px;background:#808080;border-bottom:1px solid #dfdfdf;margin:2px 4px}

/* Scrollbar Win95 style */
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:#dfdfdf}
::-webkit-scrollbar-thumb{background:#c0c0c0;border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf}
::-webkit-scrollbar-thumb:hover{background:#a0a0a0}
::-webkit-scrollbar-button{width:16px;height:16px;background:#c0c0c0;border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;display:flex;align-items:center;justify-content:center;font-size:6px;color:#808080}
