/* ===== NeoLink — Windows XP / MSN Messenger skin (exact Luna tokens) ===== */
:root{
  --tb-focus:linear-gradient(to bottom,#0058ee 0%,#3593ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 14%,#0057e5 20%,#0054e3 24%,#0055eb 56%,#005bf5 66%,#026afe 76%,#0062ef 86%,#0052d6 92%,#0040ab 94%,#003092 100%);
  --tb-blur:linear-gradient(to bottom,#7697e7 0%,#7e9ee3 3%,#94afe8 6%,#97b4e9 8%,#82a5e4 14%,#7c9fe2 17%,#7996de 25%,#7b99e1 56%,#82a9e9 81%,#80a5e7 89%,#7b96e1 94%,#7a93df 97%,#abbae3 100%);
  --taskbar:linear-gradient(to bottom,#1f2f86 0,#3165c4 3%,#3682e5 6%,#4490e6 10%,#3883e5 12%,#2b71e0 15%,#2663da 18%,#235bd6 20%,#2258d5 23%,#2157d6 38%,#245ddb 54%,#2562df 86%,#245fdc 89%,#2158d4 92%,#1d4ec0 95%,#1941a5 98%);
  --tray:linear-gradient(to bottom,#0c59b9 1%,#139ee9 6%,#18b5f2 10%,#139beb 14%,#1290e8 19%,#0d8dea 63%,#0d9ff1 81%,#0f9eed 88%,#119be9 91%,#1392e2 94%,#137ed7 97%,#095bc9 100%);
  --win-border:#0831d9; --win-border-blur:#6582f5;
  --field-border:#7f9db9; --btn-face:#ece9d8;
  --luna-panel:#ece9d8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:Tahoma,'Noto Sans',sans-serif;font-size:12px;color:#000;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
}
input,textarea{user-select:text;-webkit-user-select:text}

#desktop{position:fixed;inset:0;overflow:hidden;
  background:url('./xp/bliss.jpg') no-repeat center center fixed;background-size:cover}

/* ===================== XP WINDOW ===================== */
.win{position:absolute;display:flex;flex-direction:column;
  background:var(--win-border);padding:3px;padding-top:0;
  border-radius:8px 8px 0 0;
  box-shadow:2px 2px 8px rgba(0,0,0,.5);min-width:240px}
.win.blur{background:var(--win-border-blur)}
.win .tb{height:29px;flex:none;display:flex;align-items:center;
  border-radius:7px 7px 0 0;padding:0 3px 0 4px;
  background:var(--tb-focus);position:relative;overflow:hidden}
.win.blur .tb{background:var(--tb-blur)}
.win .tb::before{content:'';position:absolute;left:0;top:0;bottom:0;width:14px;
  background:linear-gradient(to right,#1638e6 0%,transparent 100%)}
.win .tb::after{content:'';position:absolute;right:0;top:0;bottom:0;width:14px;
  background:linear-gradient(to left,#1638e6 0%,transparent 100%);opacity:.6}
.win.blur .tb::before{opacity:.3}
.tb img.tb-ico{width:16px;height:16px;margin-right:4px;position:relative;z-index:1}
.tb .tb-title{flex:1;color:#fff;font-weight:700;font-size:13px;
  text-shadow:1px 1px 1px rgba(0,0,0,.7);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.tb .tb-btns{display:flex;gap:2px;position:relative;z-index:1}
.cap{width:22px;height:22px;border-radius:3px;border:1px solid #fff;cursor:pointer;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;
  box-shadow:inset 0 0 2px rgba(255,255,255,.7)}
.cap.min{background:linear-gradient(to bottom,#3c8bff,#0855dd);align-items:end;padding-bottom:3px}
.cap.max{background:linear-gradient(to bottom,#3c8bff,#0855dd);font-size:11px}
.cap.close{background:linear-gradient(to bottom,#e8956f 0%,#e14f28 8%,#d5401d 40%,#b5350f 92%,#e8a084 100%)}
.cap:hover{filter:brightness(1.12)}.cap:active{filter:brightness(.9)}

.win-body{flex:1;background:var(--luna-panel);border:1px solid #0831d9;border-top:0;
  display:flex;flex-direction:column;overflow:hidden;min-height:0}
.win.blur .win-body{border-color:#6582f5}

/* ===================== MSN MESSENGER (buddy list) ===================== */
.msn{display:flex;flex-direction:column;height:100%;background:#fff}
.msn-me{flex:none;padding:8px 10px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(to bottom,#eef4fe,#cfe0fb);border-bottom:1px solid #a9c2e8}
.msn-me .dp{width:44px;height:44px;border:2px solid #6b8fc7;border-radius:2px;overflow:hidden;
  display:grid;place-items:center;font-size:24px;background:#fff;flex:none}
.msn-me .dp img{width:100%;height:100%;object-fit:cover}
.msn-me .who{flex:1;min-width:0}
.msn-me .who b{display:block;font-size:13px;color:#15428b}
.msn-me .who select{font-family:inherit;font-size:11px;border:1px solid var(--field-border);border-radius:2px;color:#3a6ea5;background:#fff;margin-top:2px}
.msn-toolbar{flex:none;display:flex;gap:2px;padding:3px 6px;background:#f1f5fb;border-bottom:1px solid #cdd9ec}
.msn-toolbar button{font-family:inherit;font-size:11px;border:1px solid transparent;background:none;
  padding:3px 8px;border-radius:3px;cursor:pointer;display:flex;align-items:center;gap:5px;color:#0a3d91}
.msn-toolbar button:hover{border-color:#b6cef2;background:#e2ecfb}
.msn-groupbar{flex:none;padding:4px 8px;font-weight:700;color:#15428b;font-size:11px;
  background:linear-gradient(to bottom,#fbfdff,#eef4fe);border-bottom:1px solid #dfe8f6;display:flex;align-items:center;gap:6px}
.msn-groupbar .tri{font-size:9px;color:#5a80c0}
.msn-list{flex:1;overflow-y:auto;background:#fff;padding:2px 0}
.buddy{display:flex;align-items:center;gap:9px;padding:5px 12px;cursor:pointer;border:1px solid transparent}
.buddy:hover{background:#e8f0fd;border-color:#c5d9f5}
.buddy .ava{width:30px;height:30px;border-radius:2px;overflow:hidden;display:grid;place-items:center;
  font-size:17px;background:#f3f6fb;border:1px solid #c9d6e8;flex:none;position:relative}
.buddy .ava img{width:100%;height:100%;object-fit:cover}
.buddy .ava::after{content:'';position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;
  background:#5bbf3a;border:1px solid #fff}
.buddy.grp .ava::after{background:#e8a33d}
.buddy .bmeta{flex:1;min-width:0}
.buddy .bmeta b{display:block;font-size:12px;color:#0a2a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buddy .bmeta small{color:#7b8aa0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.msn-empty{color:#8090a5;text-align:center;padding:40px 24px;line-height:1.7}

/* ===================== CONVERSATION (MSN chat) ===================== */
.conv{display:flex;flex-direction:column;height:100%;background:#fff}
.conv-to{flex:none;padding:6px 10px;background:linear-gradient(to bottom,#eef4fe,#d3e2fb);
  border-bottom:1px solid #a9c2e8;display:flex;align-items:center;gap:8px}
.conv-to .msg-ico{font-size:16px}
.conv-to b{color:#15428b;font-size:12px}
.conv-to small{color:#5a7bb0}
.conv-main{flex:1;display:flex;min-height:0}
.conv-log{flex:1;overflow-y:auto;padding:8px 10px;background:#fff;font-size:12px;line-height:1.5;
  border:1px solid var(--field-border);margin:6px;border-radius:2px}
.conv-side{flex:none;width:96px;padding:8px 8px 8px 0;display:flex;flex-direction:column;gap:8px}
.conv-side .dp{width:88px;height:88px;border:2px solid #6b8fc7;border-radius:2px;overflow:hidden;
  background:#fff;display:grid;place-items:center;font-size:44px}
.conv-side .dp img{width:100%;height:100%;object-fit:cover}
.conv-side .dp.me{border-color:#9db4d6}
.line{margin:2px 0 8px}
.line .nm{font-weight:700}
.line .nm.me{color:#c1440e}
.line .tx{color:#111;white-space:pre-wrap;word-wrap:break-word}
.line.sys{color:#8090a5;font-style:italic;text-align:center;margin:8px 0}
.typing-line{color:#5a7bb0;font-style:italic;margin:2px 0 8px}
.typing-line i{font-style:normal;display:inline-block;width:5px;height:5px;border-radius:50%;background:#5a7bb0;margin-left:2px;animation:bl 1.2s infinite}
.typing-line i:nth-child(2){animation-delay:.2s}.typing-line i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
.conv-input{flex:none;margin:0 6px 6px;display:flex;flex-direction:column}
.conv-input .fmtbar{display:flex;gap:4px;padding:3px 4px;background:#f1f5fb;border:1px solid var(--field-border);border-bottom:0;border-radius:2px 2px 0 0;color:#6b7fa0;font-size:11px}
.conv-input .row{display:flex;gap:6px}
.conv-input textarea{flex:1;resize:none;height:52px;border:1px solid var(--field-border);border-radius:0 0 2px 2px;
  padding:6px 8px;font-family:inherit;font-size:12px;outline:none}
.conv-input textarea:focus{border-color:#5a8ad0}

/* ===================== XP BUTTONS / FIELDS ===================== */
.xp-btn{font-family:inherit;font-size:12px;padding:4px 14px;min-width:70px;cursor:pointer;
  border:1px solid #003c74;border-radius:3px;
  background:linear-gradient(to bottom,#fefefe 0%,#ecebe5 45%,#d8d2c2 90%,#e5e2d7 100%);
  box-shadow:inset 0 0 0 1px #fff}
.xp-btn:hover{border-color:#e29d1c;box-shadow:inset 0 0 0 1px #fff,0 0 4px rgba(226,157,28,.6)}
.xp-btn:active{background:linear-gradient(to bottom,#d8d2c2,#ece9de)}
.xp-btn.primary{font-weight:700}
.xp-field{font-family:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--field-border);border-radius:1px;background:#fff;width:100%;outline:none}
.xp-field:focus{border-color:#5a8ad0}
.xp-send{align-self:flex-end;margin-top:6px}

/* ===================== DIALOGS (wizard/group/settings) ===================== */
.dlg-body{padding:14px 16px;overflow-y:auto;background:var(--luna-panel);display:flex;flex-direction:column;gap:12px}
.dlg-body h2{margin:0;font-size:15px;color:#15428b}
.dlg-body p.hint{margin:0;color:#4b5563;font-size:11px;line-height:1.5}
.dlg-body label{font-size:11px;color:#333;font-weight:700}
.dlg-foot{flex:none;padding:8px 14px;background:var(--luna-panel);border-top:1px solid #c5c2b8;
  display:flex;gap:8px;justify-content:flex-end}
.step-dots{display:flex;gap:6px;align-items:center;color:#15428b;font-weight:700;font-size:11px}
.wz-step{display:none;flex-direction:column;gap:12px}
.wz-step.active{display:flex}
.pfp-box{align-self:center;width:96px;height:96px;border:2px solid #6b8fc7;border-radius:2px;
  background:#fff;display:grid;place-items:center;font-size:48px;overflow:hidden;position:relative}
.pfp-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.emoji-grid button{aspect-ratio:1;border:1px solid #b7c6dd;background:#fff;border-radius:2px;font-size:18px;cursor:pointer}
.emoji-grid button.sel{border-color:#e29d1c;box-shadow:0 0 0 1px #e29d1c inset;background:#fff7e6}
.upload-x{align-self:center}
.crafting{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px;color:#33507e}
.spinner{width:34px;height:34px;border-radius:50%;border:4px solid #cfdcf0;border-top-color:#15428b;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pcard{background:#fff;border:1px solid var(--field-border);border-radius:2px;padding:12px;display:flex;flex-direction:column;gap:9px}
.pcard .ph{display:flex;align-items:center;gap:10px}
.pcard .ph .pfp-box{width:52px;height:52px;font-size:26px}
.pcard h3{margin:0;font-size:14px;color:#15428b}
.pcard .tag{color:#c1440e;font-size:11px}
.pcard .blk b{display:block;font-size:10px;text-transform:uppercase;color:#5a80c0;letter-spacing:.5px}
.pcard .blk{font-size:11px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips span{background:#eef4fe;border:1px solid #c5d9f5;border-radius:10px;padding:2px 9px;font-size:10px}
.recraft{align-self:flex-start}
.pick{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid #cdd9ec;border-radius:2px;cursor:pointer;background:#fff;margin-bottom:4px}
.pick.sel{border-color:#e29d1c;background:#fff7e6}
.pick .ava{width:28px;height:28px;border-radius:2px;overflow:hidden;display:grid;place-items:center;font-size:15px;background:#f3f6fb;border:1px solid #c9d6e8}
.pick .ava img{width:100%;height:100%;object-fit:cover}
.pick b{flex:1;font-size:12px}
.pick .tk{width:18px;height:18px;border:1px solid #7f9db9;background:#fff;display:grid;place-items:center;font-size:12px;color:transparent}
.pick.sel .tk{color:#137a2b;font-weight:700}

/* ===================== TASKBAR ===================== */
.taskbar{position:absolute;left:0;right:0;bottom:0;height:30px;display:flex;background:var(--taskbar);z-index:9000}
.tb-start{height:100%;cursor:pointer;margin-right:8px;flex:none}
.tb-start:hover{filter:brightness(1.06)}.tb-start:active{filter:brightness(.9)}
.tb-tasks{flex:1;display:flex;align-items:center;gap:4px;overflow:hidden;padding:2px 0}
.task{max-width:160px;min-width:120px;height:22px;display:flex;align-items:center;gap:6px;
  padding:0 8px;color:#fff;font-size:11px;border-radius:2px;cursor:pointer;
  background:#3c81f3;box-shadow:inset -1px 0 rgba(0,0,0,.3),inset 1px 1px 1px rgba(255,255,255,.2)}
.task img{width:15px;height:15px}
.task span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task:hover{background:#53a3ff}
.task.active{background:#1e52b7;box-shadow:inset 0 0 1px 1px rgba(0,0,0,.2),inset 1px 0 1px rgba(0,0,0,.7)}
.tb-tray{flex:none;display:flex;align-items:center;gap:8px;padding:0 10px;margin-left:8px;
  background:var(--tray);border-left:1px solid #1042af;box-shadow:inset 1px 0 1px #18bbff}
.tb-tray img{width:15px;height:15px}
.tb-clock{color:#fff;font-size:11px;text-shadow:none}

/* ===================== START MENU ===================== */
.startmenu{position:absolute;left:0;bottom:30px;width:340px;z-index:9500;
  border-radius:8px 8px 0 0;overflow:hidden;box-shadow:3px 0 12px rgba(0,0,0,.5);
  display:none;flex-direction:column;background:#fff}
.startmenu.show{display:flex}
.sm-head{height:56px;display:flex;align-items:center;gap:10px;padding:6px 10px;color:#fff;
  background:linear-gradient(to bottom,#1868e2 0%,#3a93ff 8%,#177 dfc 40%,#0f68e8 90%,#0053c9 100%);
  border-bottom:2px solid #d38b13}
.sm-head{background:linear-gradient(to bottom,#1868e2 0%,#2f8bff 45%,#0f68e8 90%,#0053c9 100%)}
.sm-head img{width:38px;height:38px;border:2px solid #fff;border-radius:3px}
.sm-head b{font-size:14px;text-shadow:1px 1px 1px rgba(0,0,0,.5)}
.sm-body{display:flex;background:#fff}
.sm-left{flex:1;padding:6px 4px}
.sm-right{width:130px;background:linear-gradient(to bottom,#d3e5fa,#bcd3f5);padding:6px 4px}
.sm-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:2px;cursor:pointer;font-size:11px}
.sm-item:hover{background:#2f71cd;color:#fff}
.sm-item .ico{width:24px;height:24px;display:grid;place-items:center;font-size:18px}
.sm-item b{font-size:12px}
.sm-sep{height:1px;background:#c3d3ea;margin:4px 8px}
.sm-foot{height:38px;background:linear-gradient(to bottom,#3a93ff,#0f5ed8);border-top:2px solid #d38b13;
  display:flex;justify-content:flex-end;align-items:center;gap:14px;padding:0 14px}
.sm-foot .sf{display:flex;align-items:center;gap:6px;color:#fff;font-size:11px;cursor:pointer}
.sm-foot .sf img{width:22px;height:22px}
.sm-foot .sf:hover{text-decoration:underline}

.hidden{display:none!important}
/* toast */
.toast{position:absolute;bottom:40px;right:10px;z-index:9800;max-width:260px;
  background:#ffffe1;border:1px solid #000;padding:8px 10px;font-size:11px;
  box-shadow:2px 2px 6px rgba(0,0,0,.4);opacity:0;transition:.25s;transform:translateY(10px)}
.toast.show{opacity:1;transform:translateY(0)}

/* ===================== MOBILE ===================== */
@media (max-width:720px){
  .win{border-radius:0;padding:2px;padding-top:0}
  .win .tb{border-radius:0}
  .conv-side{display:none}
  .startmenu{width:100%;left:0}
  .task{min-width:44px;max-width:60px}
  .task span{display:none}
  .emoji-grid{grid-template-columns:repeat(6,1fr)}
}