/* NIELITian OS v2 — Taskbar (fixed overflow, layout, overlap) */
#taskbar{position:absolute;bottom:0;left:0;right:0;height:var(--taskbar-h);background:rgba(8,8,18,0.9);backdrop-filter:blur(18px);display:flex;align-items:center;padding:0 8px;gap:4px;border-top:0.5px solid var(--border);z-index:1000;overflow:hidden;}
#taskbar.tb-top{border-top:none;border-bottom:0.5px solid var(--border);}
#start-btn{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--os-accent),var(--os-accent2));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;transition:opacity .15s,transform .1s;}
#start-btn:hover{opacity:0.88;}
#start-btn:active{transform:scale(0.94);}
#start-btn img{display:block;}
#pinned-apps{display:flex;gap:3px;padding:0 6px;border-right:0.5px solid var(--border);margin-right:4px;flex-shrink:0;}
.tb-pin-btn{width:32px;height:32px;border-radius:7px;background:transparent;border:none;color:rgba(255,255,255,0.6);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tb-pin-btn:hover{background:rgba(255,255,255,0.1);}

/* The only element allowed to shrink/scroll — everything else in the bar
   (start button, pinned apps, workspace switcher, and the whole right-hand
   status cluster) is flex-shrink:0 with its own guaranteed width, so open
   window buttons are what gives way first instead of the clock/tray/osname
   getting compressed into each other. */
#open-apps{display:flex;gap:3px;flex:1 1 0;overflow-x:auto;overflow-y:hidden;min-width:40px;scrollbar-width:none;}
#open-apps::-webkit-scrollbar{display:none;}
.tb-btn{height:34px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.1);color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;flex-shrink:0;max-width:150px;overflow:hidden;}
.tb-btn-label{overflow:hidden;text-overflow:ellipsis;}
.tb-btn i{font-size:14px;flex-shrink:0;}
.tb-btn:hover{background:rgba(255,255,255,0.13);}
.tb-btn.active{background:rgba(79,70,229,0.4);border-color:rgba(79,70,229,0.5);box-shadow:inset 0 -2px 0 var(--os-accent);}

/* Right-hand status cluster: OS name, tray icons, clock — grouped into one
   flex-shrink:0 row so it always reserves its full width and can never be
   overlapped by #open-apps growing, no matter how many windows are open. */
#taskbar-right{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto;padding-left:6px;}
#taskbar-osname{font-size:10px;color:var(--text-muted);padding:0 8px;white-space:nowrap;flex-shrink:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;}
#sys-tray{display:flex;align-items:center;gap:2px;padding:0 4px;flex-shrink:0;}
#sys-tray span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;}
#sys-tray span i{display:block;}
#sys-tray span:hover{background:rgba(255,255,255,0.1);color:var(--text);}
#sys-tray span:active{background:rgba(255,255,255,0.18);}

/* Clock widget — widened so both the time and the full date (e.g. "Fri, Jan 17")
   always fit on one line each with no clipping or crowding into the tray icons
   next to it. Fixed width (not just min-width) so it reserves its own space
   and never gets squeezed regardless of how many taskbar buttons are open. */
#clock-widget{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.3;width:92px;flex-shrink:0;height:34px;padding:0 10px;border-radius:7px;cursor:pointer;transition:background .15s;margin-left:6px;box-sizing:content-box;}
#clock-widget:hover{background:rgba(255,255,255,0.1);}
#clock-widget:active{background:rgba(255,255,255,0.18);}
#clock-time{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;}
#clock-date{font-size:10px;color:var(--text-muted);white-space:nowrap;}
.notif-badge{position:absolute;top:-2px;right:-2px;}

/* Narrow bars (small windows/tablet-width, phone rotated, TV overscan crops,
   etc.) — shed the least-essential elements first instead of letting text
   truncate into overlap. Order: OS name label, then pinned apps row. */
@media (max-width: 620px){
  #taskbar-osname{display:none;}
}
@media (max-width: 460px){
  #pinned-apps{display:none;}
}

/* Skin-aware taskbar styles — compact docks (macOS/Android/iOS) hide the
   non-essential elements (OS name label, workspace pills) that a real dock
   or nav bar of that style never shows, instead of cramming everything into
   a narrower bar and letting it overflow/overlap. */
[data-taskbar-style="bottom-dock"] #taskbar{border-radius:16px;margin:0 auto 6px;width:auto;max-width:70%;left:50%;transform:translateX(-50%);bottom:0;}
[data-taskbar-style="bottom-dock"] #taskbar-osname,
[data-taskbar-style="bottom-dock"] .ws-switcher{display:none;}

[data-taskbar-style="bottom-nav"] #taskbar{height:40px;}
[data-taskbar-style="bottom-nav"] #taskbar-osname,
[data-taskbar-style="bottom-nav"] .ws-switcher,
[data-taskbar-style="bottom-nav"] #pinned-apps{display:none;}

[data-taskbar-style="dock"] #taskbar{border-radius:20px;margin:0 20px 8px;width:calc(100% - 40px);}
[data-taskbar-style="dock"] #taskbar-osname{display:none;}