/* ============================================================
   HOME DESKTOP  —  the netrunner draggable-window homepage
   (loaded only on "/"). scoped under .netdesk.
   ============================================================ */

.netdesk { position: relative; padding: 0.5rem 0 3rem; min-width: 0; }

.netdesk .hero h1 { font-family: var(--f-hero); font-size: clamp(48px, 8vw, 96px); margin: 0; color: var(--c-primary); line-height: 0.9; }
.netdesk .hero .sub { font-family: var(--f-body); font-size: 16px; opacity: 0.85; margin: 0.3rem 0 0.9rem; }
.netdesk .statusbar { display: flex; gap: 1.2rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--c-secondary); margin-bottom: 1.2rem; opacity: 0.9; }
.netdesk .statusbar .dot { width: 8px; height: 8px; border-radius: 50%; background: #43b581; box-shadow: 0 0 6px #43b581; display: inline-block; margin-right: 4px; }

/* dock — summon any window */
.netdesk .dock-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-secondary); margin: 0 0 0.4rem; opacity: 0.8; }
.netdesk .dock { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.netdesk .dock.toys-dock .chip { border-color: rgba(var(--c-accent-rgb), 0.4); }
.netdesk .chip { font-family: var(--f-mono); font-size: 11.5px; cursor: pointer; padding: 0.35rem 0.7rem; color: var(--c-text);
    background: rgba(8,8,18,0.6); border: 1px solid rgba(var(--c-primary-rgb), 0.35); transition: all .14s ease; user-select: none; }
.netdesk .chip:hover { color: var(--c-primary); border-color: var(--c-primary); }
/* open/pressed window button — tinted glow in the purple accent instead of a
   solid pink fill (which clashed with the dark text) */
.netdesk .chip.on { color: var(--c-secondary); background: rgba(var(--c-secondary-rgb), 0.16); border-color: var(--c-secondary);
    text-shadow: 0 0 6px rgba(var(--c-secondary-rgb), 0.7);
    box-shadow: 0 0 10px rgba(var(--c-secondary-rgb), 0.4), inset 0 0 12px rgba(var(--c-secondary-rgb), 0.12); }
.netdesk .chip.on:hover { color: var(--c-secondary); border-color: var(--c-secondary); }
.netdesk .chip.on .k { opacity: 1; }
.netdesk .chip .k { margin-right: 0.35rem; opacity: 0.8; }
.netdesk .chip.reset { border-color: rgba(var(--c-secondary-rgb), 0.5); color: var(--c-secondary); }

/* desktop holds the draggable windows. window *positions* are spread to fill
   the monitor width by JS (layoutDesktop) — sizes stay fixed, only the x
   coordinates scale outward on wider screens. */
.netdesk .desktop { position: relative; min-height: 600px; }

/* let the home use the full width (it's a desktop) instead of the centered,
   max-width container every other page uses. scoped to the home via :has(). */
.bin-container:has(.netdesk) { max-width: none; padding-top: 14px; padding-left: 24px; padding-right: 24px; }

/* ---- universal window (every block is one) ---- */
.netdesk .win { position: absolute; width: 320px; background: rgba(8,8,18,0.94); z-index: 10; display: none; flex-direction: column;
    border: 1px solid rgba(var(--c-primary-rgb), 0.5); box-shadow: 0 0 20px rgba(var(--c-primary-rgb), 0.3); }

/* first-load flash guard: the default-open windows are absolutely positioned but
   only get their left/top from JS (layoutDesktop). until that first pass runs,
   keep them invisible so they don't paint stacked at the desktop's top-left
   corner on a cold load. home-desktop.js adds .nd-ready after the first layout.
   (visibility:hidden — not display — so JS can still measure offsetWidth.) */
.netdesk .desktop:not(.nd-ready) .win.open,
.netdesk .desktop:not(.nd-ready) .gmus.gmus-docked { visibility: hidden; }

/* the global music player, adopted into the desktop on home as the 'music' window
   (relocated + positioned/dragged by home-desktop.js). drop the fixed floating
   chrome so the window manager can place it like any other card — its size and the
   inner controls keep the shared .gmus styling, so it looks identical. */
.netdesk .desktop .gmus.gmus-docked { position: absolute; right: auto; bottom: auto; z-index: 10; width: 320px; }
.gmus.gmus-docked .gmus-min { display: none; } /* docked windows are close-only, like the rest */

/* fixed per-window widths — the JS layout ONLY moves windows, it never resizes
   them, so each card's size is defined here and stays constant. */
.netdesk #win-about    { width: 460px; }
.netdesk #win-echos    { width: 360px; }  /* narrow + tall centerpiece */
.netdesk #win-skills   { width: 396px; }
.netdesk #win-recently { width: 320px; }  /* games — narrower */
.netdesk #win-discord  { width: 288px; }  /* discord — narrowest */
.netdesk .win.open { display: flex; animation: nd-pop .16s ease; }
.netdesk .win.small { width: 196px; }
@keyframes nd-pop { from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none} }
.netdesk .win::before, .netdesk .win::after { content:""; position:absolute; width:7px; height:7px; border:1px solid var(--c-secondary); opacity:.6; pointer-events:none; }
.netdesk .win::before { left:-1px; bottom:-1px; border-top:none; border-right:none; }
.netdesk .win::after { right:-1px; bottom:-1px; border-top:none; border-left:none; }
.netdesk .win-bar { display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.55rem; cursor:move; user-select:none;
    background: rgba(var(--c-primary-rgb), 0.16); border-bottom:1px solid rgba(var(--c-primary-rgb),0.4);
    font-family:var(--f-mono); font-size:11px; letter-spacing:1px; color:var(--c-primary); text-transform:uppercase; }
.netdesk .win-bar .ttl { flex:1; }
.netdesk .win-bar .x { width:16px; height:16px; display:flex; align-items:center; justify-content:center; line-height:14px; text-align:center; cursor:pointer; background:none; color:var(--c-text); border:1px solid rgba(var(--c-text-rgb),0.3); font-family:var(--f-mono); font-size:11px; }
.netdesk .win-bar .x .pi { font-size:11px; }
.netdesk .win-bar .x:hover { color:var(--c-primary); border-color:var(--c-primary); }
/* the pixel icon that leads each window title bar (matches its dock chip) */
.netdesk .win-bar > .pi, .netdesk .echo-lightbox-bar > .pi { font-size:13px; opacity:0.95; }
.netdesk .win-body { padding:0.85rem; font-size:13px; line-height:1.6; }
.netdesk .win-body.flush { padding:0; }
.netdesk .win-body .mono { font-family:var(--f-mono); font-size:12.5px; }
.netdesk .blink { animation: nd-blink 1s steps(1) infinite; }
@keyframes nd-blink { 50% { opacity:0; } }
.netdesk .dot { width:8px; height:8px; border-radius:50%; background:#43b581; box-shadow:0 0 6px #43b581; display:inline-block; }
.netdesk .tags { display:flex; flex-wrap:wrap; gap:0.35rem; } .netdesk .tag { font-family:var(--f-mono); font-size:10.5px; padding:0.25rem 0.5rem; background:rgba(var(--c-secondary-rgb),0.12); border:1px solid rgba(var(--c-secondary-rgb),0.4); }
.netdesk .lnk { display:block; font-family:var(--f-mono); font-size:12px; padding:2px 0; } .netdesk .lnk:hover { color:var(--c-primary); }
.netdesk .big { font-family:var(--f-mono); font-size:26px; letter-spacing:1px; color:var(--c-accent); }
.netdesk .barmeter { height:6px; background:rgba(var(--c-text-rgb),0.15); margin:4px 0 8px; } .netdesk .barmeter > i { display:block; height:100%; background:var(--c-secondary); box-shadow:0 0 8px var(--c-secondary); }

/* about */
.netdesk .about-body p { margin:0 0 0.6rem; } .netdesk .about-head { display:flex; gap:0.8rem; align-items:flex-start; }
.netdesk .about-av { width:60px; height:60px; flex-shrink:0; object-fit:cover; border:2px solid rgba(var(--c-primary-rgb),0.5); box-shadow:0 0 14px rgba(var(--c-primary-rgb),calc(var(--glow)*0.5)); }
.netdesk .about-contact { margin-top:0.4rem; padding-top:0.55rem; border-top:1px dashed rgba(var(--c-secondary-rgb),0.3); font-size:12px; line-height:1.8; } .netdesk .about-contact .lbl { color:var(--c-secondary); }

/* about card: bigger & roomier than the other windows */
.netdesk #win-about .win-body { padding:1.1rem 1.2rem; font-size:16.5px; line-height:1.75; }
.netdesk #win-about .win-body p { font-size:16.5px; line-height:1.75; }
.netdesk #win-about .about-head { gap:1rem; }
.netdesk #win-about .about-av { width:84px; height:84px; }
.netdesk #win-about .about-contact { font-size:14.5px; padding-top:0.7rem; }

/* games */
.netdesk .games { display:flex; flex-direction:column; gap:0.6rem; }
.netdesk .game { display:flex; gap:0.6rem; align-items:center; }
.netdesk .game .cover { width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:10px; font-weight:bold; color:#05050c; background:var(--c-secondary); transition:box-shadow .16s ease; object-fit:cover; }
.netdesk .game:hover .cover { box-shadow:0 0 14px rgba(var(--c-primary-rgb),var(--glow)); }
.netdesk .game .ginfo { flex:1; min-width:0; font-family:var(--f-mono); font-size:12px; }
.netdesk .game .grow { display:flex; justify-content:space-between; gap:0.5rem; } .netdesk .game .gname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--c-text); text-decoration:none; } .netdesk .game .gname:hover { color:var(--c-primary); } .netdesk .game .ghrs { color:var(--c-accent); flex-shrink:0; }
.netdesk .game .gbar { height:5px; background:rgba(var(--c-text-rgb),0.15); margin:4px 0 2px; } .netdesk .game .gbar > i { display:block; height:100%; background:var(--c-secondary); box-shadow:0 0 6px var(--c-secondary); }
.netdesk .game .gweek { font-size:10px; color:var(--c-primary); opacity:0.85; }

/* discord card (live) */
.netdesk .dc-head { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.netdesk .dc-id { min-width:0; }
.netdesk .dc-av { width:40px; height:40px; border:2px solid rgba(var(--c-primary-rgb),0.5); flex-shrink:0; }
.netdesk .dc-name { font-family:var(--f-mono); font-size:13px; font-weight:bold; }
.netdesk .dc-status { display:flex; align-items:center; gap:0.4rem; font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--c-secondary); }
.netdesk .dc-dot { width:8px; height:8px; background:#747f8d; display:inline-block; }
.netdesk .dc-dot.online { background:#43b581; box-shadow:0 0 6px rgba(67,181,129,0.6); }
.netdesk .dc-dot.idle { background:#faa61a; box-shadow:0 0 6px rgba(250,166,26,0.6); }
.netdesk .dc-dot.dnd { background:#f04747; box-shadow:0 0 6px rgba(240,71,71,0.6); }
.netdesk .dc-act { margin-top:0.5rem; padding-top:0.5rem; border-top:1px dashed rgba(var(--c-secondary-rgb),0.3); color:var(--c-accent); font-size:11px; font-family:var(--f-mono); }
.netdesk .dc-act:empty { display:none; }

/* custom status — blocky red-orange chip sitting to the RIGHT of the username,
   wired back to it with a circuit trace + node on its left */
.netdesk .dc-custom { display:inline-block; position:relative; overflow:visible; font-family:var(--f-mono); font-size:11px; color:var(--c-text);
    margin:0 0 0 26px; padding:4px 9px; max-width:140px; word-break:break-word;
    background:rgba(255,88,44,0.14); border:1px solid rgba(255,88,44,0.6); border-radius:0;
    box-shadow:0 0 10px rgba(255,88,44,0.28), inset 0 0 14px rgba(255,88,44,0.07); }
.netdesk .dc-custom:empty { display:none; }
/* horizontal circuit trace running left toward the username */
.netdesk .dc-custom::before { content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%); width:18px; height:2px;
    background:rgba(255,88,44,0.8); box-shadow:0 0 6px rgba(255,88,44,0.7); }
/* circuit node (pad) at the end of the trace */
.netdesk .dc-custom::after { content:""; position:absolute; right:calc(100% + 16px); top:50%; transform:translateY(-50%); width:7px; height:7px;
    background:var(--c-bg); border:2px solid rgba(255,88,44,0.9); box-shadow:0 0 7px rgba(255,88,44,0.65); }
.netdesk .dc-custom .em { margin-right:5px; }

/* rich activity cards */
.netdesk .dc-acts { display:flex; flex-direction:column; gap:0.55rem; margin-top:0.55rem; }
.netdesk .dc-acts:empty { display:none; }
.netdesk .dc-card { display:flex; gap:0.6rem; padding-top:0.55rem; border-top:1px dashed rgba(var(--c-secondary-rgb),0.3); font-family:var(--f-mono); text-decoration:none; }
.netdesk a.dc-card:hover .t1 { color:var(--c-accent); }
.netdesk .dc-card .art-wrap { position:relative; flex-shrink:0; }
.netdesk .dc-card .art { width:54px; height:54px; display:block; object-fit:cover; border:1px solid rgba(var(--c-primary-rgb),0.4); background:rgba(var(--c-text-rgb),0.05); }
.netdesk .dc-card .art-small { position:absolute; right:-5px; bottom:-5px; width:22px; height:22px; border-radius:50%; border:2px solid var(--c-bg); object-fit:cover; background:var(--c-bg); }
.netdesk .dc-card .meta { flex:1; min-width:0; font-size:11.5px; line-height:1.5; }
.netdesk .dc-card .verb { color:var(--c-secondary); font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.netdesk .dc-card .t1 { color:var(--c-primary); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s ease; }
.netdesk .dc-card .t2, .netdesk .dc-card .t3 { color:var(--c-text); opacity:0.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.netdesk .dc-prog { margin-top:5px; }
.netdesk .dc-prog .pbar { height:4px; background:rgba(var(--c-text-rgb),0.15); }
.netdesk .dc-prog .pbar > i { display:block; height:100%; width:0; background:var(--c-secondary); box-shadow:0 0 6px var(--c-secondary); transition:width 1s linear; }
.netdesk .dc-prog .ptime { display:flex; justify-content:space-between; font-size:9px; opacity:0.7; margin-top:2px; }

/* toys */
.netdesk .toy canvas { display:block; width:100%; background:#02040a; } .netdesk .toy canvas:focus { outline:1px solid var(--c-primary); }
.netdesk .void-answer { font-family:var(--f-mono); font-size:12px; color:var(--c-secondary); min-height:38px; margin-top:0.5rem; line-height:1.5; }
.netdesk .pads { display:flex; gap:4px; } .netdesk .pad { flex:1; height:42px; cursor:pointer; border:1px solid rgba(var(--c-primary-rgb),0.5); background:rgba(var(--c-primary-rgb),0.1); } .netdesk .pad:active { background:var(--c-primary); }
.netdesk .dial-row { display:flex; align-items:center; justify-content:space-between; font-family:var(--f-mono); font-size:11px; margin-bottom:6px; } .netdesk .dial-row input { width:55%; accent-color:var(--c-primary); }
.netdesk .swatchset { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; } .netdesk .swatch { width:24px; height:24px; cursor:pointer; border:1px solid rgba(var(--c-text-rgb),0.3); } .netdesk .swatch:hover { transform:scale(1.12); }
/* palette.shift colour pickers */
.netdesk .pick-row { display:flex; align-items:center; justify-content:space-between; font-family:var(--f-mono); font-size:11px; letter-spacing:1px; margin-bottom:5px; color:var(--c-text); }
.netdesk .pick-row input[type="color"] { width:46px; height:22px; padding:0; cursor:pointer; background:transparent; border:1px solid rgba(var(--c-text-rgb),0.3); }
.netdesk .pick-row input[type="color"]::-webkit-color-swatch-wrapper { padding:2px; }
.netdesk .pick-row input[type="color"]::-webkit-color-swatch { border:none; }
.netdesk .pal-actions { display:flex; gap:6px; margin-top:9px; }
.netdesk .pal-actions .btn-neon { flex:1; font-size:11px; padding:0.35rem 0.4rem; letter-spacing:1px; }
.netdesk .btn-neon.ghost { color:var(--c-secondary); border-color:rgba(var(--c-secondary-rgb),0.5); }
.netdesk .btn-neon.ghost:hover { background:var(--c-secondary); color:var(--c-bg); box-shadow:0 0 calc(18px * var(--glow)) rgba(var(--c-secondary-rgb), var(--glow)); }
.netdesk .hint { font-family:var(--f-mono); font-size:10px; opacity:0.55; margin-top:5px; }
.netdesk .btn-neon { font-family: var(--f-mono); font-size: 14px; cursor: pointer; letter-spacing: 2px; padding: 0.8rem 1.6rem; color: var(--c-primary); background: transparent; border: 1px solid var(--c-primary); transition: all 0.18s ease; }
.netdesk .btn-neon:hover { background: var(--c-primary); color: var(--c-bg); box-shadow: 0 0 calc(18px * var(--glow)) rgba(var(--c-primary-rgb), var(--glow)); }

/* echos of the void (guestbook) */
.netdesk .echo-top { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:0.6rem; padding-bottom:0.55rem; border-bottom:1px dashed rgba(var(--c-secondary-rgb),0.3); }
.netdesk .echo-count { font-family:var(--f-mono); font-size:11px; color:var(--c-secondary); letter-spacing:1px; }
.netdesk .echo-controls { display:flex; gap:0.35rem; }
.netdesk .echo-btn { font-family:var(--f-mono); font-size:11px; cursor:pointer; padding:0.3rem 0.7rem; color:var(--c-text); background:rgba(var(--c-primary-rgb),0.1); border:1px solid rgba(var(--c-primary-rgb),0.5); }
.netdesk .echo-btn:hover { color:var(--c-primary); border-color:var(--c-primary); box-shadow:0 0 8px rgba(var(--c-primary-rgb),calc(var(--glow)*0.5)); }
.netdesk .echo-btn.playing { color:var(--c-bg); background:var(--c-primary); border-color:var(--c-primary); }
.netdesk .echo-btn.ghost { background:none; padding:0.3rem 0.55rem; }
/* the feed grows with its content and scrolls once it gets long */
.netdesk .echo-feed { max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.7rem; padding-right:6px; }
.netdesk .echo { border-left:2px solid rgba(var(--c-secondary-rgb),0.5); padding:1px 0 2px 8px; animation:tin .25s ease; cursor:pointer; transition:background .15s ease, box-shadow .15s ease; }
.netdesk .echo:hover { border-left-color:var(--c-primary); background:rgba(var(--c-primary-rgb),0.05); }
.netdesk .echo.echo-live { border-left-color:var(--c-accent); background:rgba(var(--c-accent-rgb),0.1); box-shadow:0 0 16px rgba(var(--c-accent-rgb),calc(var(--glow)*0.45)); }
.netdesk .echo .who { font-family:var(--f-mono); font-size:11px; color:var(--c-primary); }
.netdesk .echo .who .idx { color:var(--c-text); opacity:0.35; margin-right:5px; }
.netdesk .echo .who .when { color:var(--c-text); opacity:0.4; margin-left:6px; font-size:10px; }
.netdesk .echo .msg { font-size:12.5px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.netdesk .echo-pager { display:flex; align-items:center; justify-content:center; gap:0.6rem; font-family:var(--f-mono); font-size:11px; margin-bottom:0.7rem; }
.netdesk .echo-pager:empty { display:none; }
.netdesk .echo-pager button { font-family:var(--f-mono); font-size:11px; cursor:pointer; padding:0.25rem 0.6rem; color:var(--c-text); background:rgba(var(--c-primary-rgb),0.1); border:1px solid rgba(var(--c-primary-rgb),0.5); }
.netdesk .echo-pager button:hover:not(:disabled) { color:var(--c-primary); border-color:var(--c-primary); }
.netdesk .echo-pager button:disabled { opacity:0.3; cursor:default; }
.netdesk .echo-pager .pg { color:var(--c-secondary); }
.netdesk .echo-in { width:100%; box-sizing:border-box; background:rgba(var(--c-text-rgb),0.06); border:1px solid rgba(var(--c-primary-rgb),0.35);
    color:var(--c-text); font-family:var(--f-mono); font-size:12px; padding:0.4rem 0.5rem; margin-bottom:0.4rem; }
.netdesk .echo-in:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 8px rgba(var(--c-primary-rgb),calc(var(--glow)*0.6)); }
.netdesk .echo-area { resize:vertical; min-height:46px; }
.netdesk .echo-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .netdesk .echo-row .hint { margin-top:0; }

/* ===== contact window ===== */
.netdesk .contact-win .win-body { display:flex; flex-direction:column; }
.netdesk .contact-intro { font-family:var(--f-mono); font-size:11px; line-height:1.5; color:var(--c-secondary);
    opacity:0.85; margin-bottom:0.6rem; }
.netdesk .contact-in { width:100%; box-sizing:border-box; background:rgba(var(--c-text-rgb),0.06);
    border:1px solid rgba(var(--c-primary-rgb),0.35); color:var(--c-text); font-family:var(--f-mono);
    font-size:12px; padding:0.45rem 0.55rem; margin-bottom:0.45rem; }
.netdesk .contact-in:focus { outline:none; border-color:var(--c-primary);
    box-shadow:0 0 8px rgba(var(--c-primary-rgb),calc(var(--glow)*0.6)); }
.netdesk .contact-in::placeholder { color:rgba(var(--c-text-rgb),0.4); }
.netdesk .contact-area { resize:vertical; min-height:84px; }
.netdesk .contact-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.netdesk .contact-row .hint { margin-top:0; flex:1; min-width:0; }
.netdesk .contact-row .btn-neon { flex:none; font-size:11px; padding:0.35rem 0.9rem; }
.netdesk .contact-row .btn-neon[disabled] { opacity:0.55; cursor:wait; }

/* ===== pictochat window (strip + pad styling lives in pictochat.css) ===== */
.netdesk #win-chat { width:340px; }
.netdesk .chat-body { display:flex; flex-direction:column; position:relative; }
/* status line — compact, live pulse */
.netdesk .chat-stats { display:flex; align-items:center; gap:0.55rem; font-family:var(--f-mono); font-size:10px;
    margin-bottom:0.6rem; letter-spacing:0.02em; }
.netdesk .chat-stat { white-space:nowrap; display:inline-flex; align-items:center; }
.netdesk .chat-stat.live { color:var(--c-text); }
.netdesk .chat-stat.chat-clk { cursor:pointer; }
.netdesk .chat-stat.chat-clk:hover #chatConnected { color:var(--c-primary); }
/* "who's online" popover, anchored under the connected count */
.netdesk .chat-who { position:absolute; z-index:40; top:1.5rem; left:0; min-width:150px; max-width:230px;
    max-height:190px; overflow-y:auto; padding:0.45rem; background:var(--c-bg);
    border:1px solid rgba(var(--c-primary-rgb),0.5); box-shadow:0 0 16px rgba(var(--c-primary-rgb),0.25);
    font-family:var(--f-mono); font-size:11px; }
.netdesk .chat-who-h { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--c-secondary);
    opacity:0.85; margin-bottom:0.35rem; }
.netdesk .chat-who-row { padding:2px 4px; color:var(--c-text); display:flex; align-items:center; gap:0.4rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.netdesk .chat-who-row::before { content:"\25B8"; color:var(--c-primary); font-size:9px; }
.netdesk .chat-who-empty { padding:2px 4px; color:var(--c-text); opacity:0.5; }
.netdesk .chat-stat.dim { color:var(--c-text); opacity:0.42; }
.netdesk .chat-stat.dim:empty { display:none; }
.netdesk .chat-stat.dim::before { content:"·"; margin-right:0.55rem; opacity:0.6; }
.netdesk .chat-dot { width:7px; height:7px; border-radius:50%; background:#43b581; display:inline-block;
    margin-right:6px; animation:chat-pulse 2.4s ease-in-out infinite; }
.netdesk .chat-dot.off { background:#747f8d; animation:none; }
@keyframes chat-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(67,181,129,0.55); }
    60% { box-shadow:0 0 0 5px rgba(67,181,129,0); }
}
.netdesk .chat-feed { max-height:340px; min-height:140px; overflow-y:auto; margin-bottom:0.55rem; padding-right:6px; }
/* composer — one tidy row; the draw pad is opt-in */
.netdesk .chat-compose { display:flex; flex-direction:column; gap:0.4rem; }
.netdesk .chat-inrow { display:flex; align-items:flex-end; gap:0.35rem; }
.netdesk .chat-in { flex:1; min-width:0; box-sizing:border-box; background:rgba(var(--c-text-rgb),0.06);
    border:1px solid rgba(var(--c-primary-rgb),0.3); color:var(--c-text); font-family:var(--f-mono);
    font-size:11.5px; line-height:1.35; padding:0.28rem 0.55rem; transition:border-color .14s ease, box-shadow .14s ease;
    resize:none; overflow-y:auto; max-height:96px; display:block; }
.netdesk .chat-in:focus { outline:none; border-color:var(--c-primary);
    box-shadow:0 0 8px rgba(var(--c-primary-rgb),calc(var(--glow)*0.55)); }
.netdesk .chat-in::placeholder { color:rgba(var(--c-text-rgb),0.4); }
.netdesk .chat-in[disabled] { opacity:0.55; }
.netdesk .chat-icbtn { flex:none; width:30px; height:28px; display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; background:rgba(var(--c-text-rgb),0.06); border:1px solid rgba(var(--c-primary-rgb),0.3);
    color:var(--c-text); font-size:12px; transition:all .14s ease; }
.netdesk .chat-icbtn:hover { border-color:var(--c-primary); color:var(--c-primary); }
.netdesk .chat-icbtn.on { color:var(--c-bg); background:var(--c-primary); border-color:var(--c-primary); }
.netdesk .chat-send { background:rgba(var(--c-primary-rgb),0.14); border-color:rgba(var(--c-primary-rgb),0.6);
    color:var(--c-primary); }
.netdesk .chat-send:hover { background:var(--c-primary); color:var(--c-bg);
    box-shadow:0 0 10px rgba(var(--c-primary-rgb),calc(var(--glow)*0.7)); }
.netdesk .chat-send[disabled], .netdesk .chat-icbtn[disabled] { opacity:0.5; cursor:wait; }
.netdesk .chat-draw { display:flex; flex-direction:column; gap:0.4rem; animation:nd-pop .14s ease; }
.netdesk .chat-draw[hidden] { display:none; }
.netdesk .chat-asrow { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-top:0.55rem;
    padding-top:0.45rem; border-top:1px solid rgba(var(--c-text-rgb),0.08); }
.netdesk .chat-asrow .hint { margin-top:0; }
.netdesk .chat-asrow #chatAs { color:var(--c-secondary); }
.netdesk .chat-history-link { font-family:var(--f-mono); font-size:10.5px; color:var(--c-primary); text-decoration:none;
    white-space:nowrap; opacity:0.85; transition:opacity .14s ease; }
.netdesk .chat-history-link:hover { opacity:1; text-shadow:0 0 6px rgba(var(--c-primary-rgb),calc(var(--glow)*0.8)); }

/* floated thumbnail inside an echo — text wraps around it */
.netdesk .echo-img { float:right; width:62px; height:62px; object-fit:cover; margin:2px 0 4px 9px; cursor:zoom-in;
    border:1px solid rgba(var(--c-secondary-rgb),0.6); box-shadow:0 0 8px rgba(var(--c-secondary-rgb),calc(var(--glow)*0.4));
    transition:box-shadow .15s ease, border-color .15s ease; }
.netdesk .echo-img:hover { border-color:var(--c-primary); box-shadow:0 0 14px rgba(var(--c-primary-rgb),calc(var(--glow)*0.7)); }

/* name + attach-image on one row (name shrinks, button hugs the right) */
.netdesk .echo-namerow { display:flex; align-items:center; gap:0.5rem; }
.netdesk .echo-namerow .echo-in { flex:1; width:auto; min-width:0; margin-bottom:0.4rem; }
.netdesk .echo-file { flex:none; display:inline-flex; align-items:center; gap:0.4rem; white-space:nowrap; font-family:var(--f-mono); font-size:11px; cursor:pointer;
    margin-bottom:0.4rem; padding:0.4rem 0.7rem; color:var(--c-text); background:rgba(var(--c-secondary-rgb),0.08); border:1px solid rgba(var(--c-secondary-rgb),0.45); transition:all .14s ease; }
.netdesk .echo-file:hover { color:var(--c-secondary); border-color:var(--c-secondary); box-shadow:0 0 8px rgba(var(--c-secondary-rgb),calc(var(--glow)*0.5)); }
.netdesk .echo-file input { display:none; }
.netdesk .echo-preview { position:relative; flex:none; margin-bottom:0.4rem; }
.netdesk .echo-preview img { width:40px; height:40px; object-fit:cover; display:block; border:1px solid rgba(var(--c-primary-rgb),0.6); }
.netdesk .echo-preview-x { position:absolute; top:-7px; right:-7px; width:16px; height:16px; line-height:13px; text-align:center; cursor:pointer; padding:0;
    background:var(--c-bg); color:var(--c-primary); border:1px solid var(--c-primary); font-family:var(--f-mono); font-size:11px; }
.netdesk .echo-preview-x:hover { color:var(--c-secondary); border-color:var(--c-secondary); }

/* enlarged image viewer (lightbox styled like a window) */
.netdesk .echo-lightbox, .echo-lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
    background:rgba(2,2,8,0.85); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:24px; }
.echo-lightbox.open { display:flex; animation:tin .18s ease; }
.echo-lightbox-frame { display:flex; flex-direction:column; max-width:92vw; max-height:92vh; background:rgba(8,8,18,0.97);
    border:1px solid rgba(var(--c-primary-rgb),0.75); box-shadow:0 0 44px rgba(var(--c-primary-rgb),calc(var(--glow,0.45)*0.8)); }
.echo-lightbox-bar { display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0.65rem; font-family:var(--f-mono);
    font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--c-primary);
    border-bottom:1px solid rgba(var(--c-primary-rgb),0.4); background:rgba(var(--c-primary-rgb),0.12); }
.echo-lightbox-bar .x { width:18px; height:18px; display:flex; align-items:center; justify-content:center; line-height:15px; text-align:center; cursor:pointer; padding:0; background:none;
    color:var(--c-text); border:1px solid rgba(var(--c-text-rgb),0.3); font-family:var(--f-mono); font-size:12px; }
.echo-lightbox-bar .x .pi { font-size:12px; }
.echo-lightbox-bar .x:hover { color:var(--c-primary); border-color:var(--c-primary); }
.echo-lightbox img { display:block; max-width:92vw; max-height:calc(92vh - 36px); object-fit:contain; }

/* ---- music window (now_playing.mp3) ---- */
.netdesk .mus-row { display:flex; align-items:center; gap:0.8rem; margin-bottom:0.7rem; }
.netdesk .mus-meta { min-width:0; }
.netdesk .mus-title { font-family:var(--f-head,var(--f-mono)); font-size:15px; color:var(--c-primary); text-shadow:0 0 8px rgba(var(--c-primary-rgb),0.5); }
.netdesk .mus-artist { font-size:11px; opacity:0.7; letter-spacing:1px; text-transform:uppercase; }

/* time bar */
.netdesk .mus-prog { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.7rem; }
.netdesk .mus-t { font-size:10px; color:var(--c-accent); min-width:30px; text-align:center; opacity:0.85; }
.netdesk .mus-bar { position:relative; flex:1; height:7px; background:rgba(var(--c-text-rgb),0.1); border:1px solid rgba(var(--c-primary-rgb),0.3); cursor:pointer; }
.netdesk .mus-bar-fill { position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg, var(--c-secondary), var(--c-primary)); box-shadow:0 0 8px rgba(var(--c-primary-rgb),0.6); }
.netdesk .mus-bar-head { position:absolute; top:50%; left:0; width:11px; height:11px; transform:translate(-50%,-50%); background:var(--c-primary); box-shadow:0 0 8px var(--c-primary); }
.netdesk .mus-bar:hover .mus-bar-head { background:var(--c-accent); box-shadow:0 0 10px var(--c-accent); }

/* controls: icon button + fun stepped volume meter */
.netdesk .mus-controls { display:flex; align-items:center; gap:0.6rem; }
.netdesk .mus-icon { width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; cursor:pointer;
    color:var(--c-primary); background:rgba(var(--c-primary-rgb),0.1); border:1px solid var(--c-primary);
    box-shadow:0 0 10px rgba(var(--c-primary-rgb),0.3); transition:all .14s ease; }
.netdesk .mus-icon:hover { background:var(--c-primary); color:var(--c-bg); box-shadow:0 0 18px rgba(var(--c-primary-rgb),0.65); }
.netdesk .mus-icon.playing { color:var(--c-secondary); border-color:var(--c-secondary); box-shadow:0 0 10px rgba(var(--c-secondary-rgb),0.4); }
.netdesk .mus-icon.playing:hover { background:var(--c-secondary); color:var(--c-bg); }
.netdesk .mus-vol-ico { font-size:9px; opacity:0.55; letter-spacing:1px; }
.netdesk .mus-vol-val { font-size:11px; color:var(--c-accent); min-width:34px; text-align:right; }

/* horizontal neon volume fader */
.netdesk .mus-fader { position:relative; flex:1; min-width:0; height:10px; cursor:pointer; user-select:none;
    background:rgba(var(--c-text-rgb),0.1); border:1px solid rgba(var(--c-primary-rgb),0.35);
    background-image:repeating-linear-gradient(90deg, transparent 0 9px, rgba(var(--c-primary-rgb),0.12) 9px 10px); }
.netdesk .mus-fader-fill { position:absolute; left:0; top:0; bottom:0; width:25%;
    background:linear-gradient(90deg, var(--c-secondary), var(--c-primary)); box-shadow:0 0 8px rgba(var(--c-primary-rgb),0.6); }
.netdesk .mus-fader-cap { position:absolute; top:50%; left:25%; width:6px; height:22px; transform:translate(-50%,-50%);
    background:var(--c-primary); box-shadow:0 0 10px var(--c-primary); transition:transform .1s ease, background .1s ease, box-shadow .1s ease; }
.netdesk .mus-fader:hover .mus-fader-cap { transform:translate(-50%,-50%) scaleY(1.18); background:var(--c-accent); box-shadow:0 0 14px var(--c-accent); }

/* ---- overrides for global site.css rules so the desktop renders cleanly ---- */
/* site.css applies a pink text-shadow to all body text + 22px paragraphs + makes
   every <canvas> position:absolute. neutralize those inside the desktop. */
.netdesk { text-shadow: none; }
.netdesk p { font-size: 13px; margin: 0; text-shadow: none; }
.netdesk .win-body p { font-size: 13px; line-height: 1.6; }
.netdesk .win-body, .netdesk .mono, .netdesk .hint { text-shadow: none; }
.netdesk .toy canvas, .netdesk .win-body canvas { position: static; display: block; width: 100%; height: auto; }
.netdesk #mtx { height: 92px; }
.netdesk #snake { height: 200px; }
/* keep the neon hero glowing despite the reset above */
.netdesk .hero h1.neon { text-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--c-primary-rgb), var(--glow)), 0 0 calc(22px * var(--glow)) rgba(var(--c-primary-rgb), calc(var(--glow) * 0.55)); }

/* ---- live web terminal window ---- */
.netdesk .term-win { width:820px; max-width:92vw; }
.netdesk .win-bar .win-actions { display:flex; align-items:center; gap:0.35rem; }
.netdesk .win-bar .win-act { width:16px; height:16px; display:flex; align-items:center; justify-content:center; line-height:14px; text-align:center; cursor:pointer; background:none; color:var(--c-text); border:1px solid rgba(var(--c-text-rgb),0.3); font-family:var(--f-mono); font-size:11px; }
.netdesk .win-bar .win-act:hover { color:var(--c-secondary); border-color:var(--c-secondary); }
.netdesk .term-body { padding:0; }
.netdesk .term-stage { position:relative; width:100%; height:480px; max-height:78vh; background:#04060d; overflow:hidden; }
.netdesk .term-frame { display:block; width:100%; height:100%; border:0; background:#04060d; }
.netdesk .term-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.9rem;
    background:#04060d; font-family:var(--f-mono); color:var(--c-secondary); font-size:13px; letter-spacing:0.5px; text-align:center; padding:1rem; }
.netdesk .term-spinner { width:26px; height:26px; border:2px solid rgba(var(--c-secondary-rgb),0.25); border-top-color:var(--c-secondary); border-radius:50%;
    animation:nd-spin .8s linear infinite; box-shadow:0 0 10px rgba(var(--c-secondary-rgb),0.4); }
@keyframes nd-spin { to { transform:rotate(360deg); } }
.netdesk .term-retry { font-size:12px; padding:0.45rem 1.1rem; }

@media (max-width: 820px) {
    .netdesk .desktop { display:flex; flex-direction:column; gap:0.8rem; min-height:auto; }
    /* mobile stacks windows statically and needs no JS positioning, so don't
       hold them hidden behind the .nd-ready gate */
    .netdesk .desktop:not(.nd-ready) .win.open,
    .netdesk .desktop:not(.nd-ready) .gmus.gmus-docked { visibility:visible; }
    .netdesk .win.open { position:static !important; width:auto !important; margin-bottom:0; left:auto !important; top:auto !important; }
    /* the clock floats outside .desktop, so the flex `gap` doesn't space it from
       the about window below — give it its own margin to match the column gap */
    .netdesk > .win.open { margin-bottom:0.8rem; }
    /* the adopted music player joins the static column too */
    .netdesk .desktop .gmus.gmus-docked { position:static !important; width:auto !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; z-index:auto; }
    .netdesk .win.small.open { width:auto !important; }
    .netdesk .term-stage { height:60vh; }
    .bin-container:has(.netdesk) { padding-left:15px; padding-right:15px; }
}