/* Abhishek Portfolio — vanilla CSS — desktop OS — 0xAbhi13 */
:root{
  --bg:#050510;
  --menu:28px;
  --dock-h:72px;
  --radius:14px;
  --line:rgba(255,255,255,0.08);
  --accent:#8b5cf6;
}
*{box-sizing:border-box}
html,body{font-family:Inter,system-ui,sans-serif}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* Boot — online Lottie + shimmer — 3s */
#bootScreen{transition:opacity .6s cubic-bezier(0.16,1,0.3,1)}
#bootScreen.hide{opacity:0;pointer-events:none}
#bootBar{transition:width 0.4s cubic-bezier(0.16,1,0.3,1);position:relative;overflow:hidden}
#bootBar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);transform:translateX(-100%);animation:shimmer 1.2s infinite}
/* All icons — Ask Abhi style animations for every icon */
@keyframes iconPulseGlow{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(0,0,0,0.35)) drop-shadow(0 0 12px rgba(139,92,246,0.18))}
  50%{filter:drop-shadow(0 12px 24px rgba(0,0,0,0.45)) drop-shadow(0 0 28px rgba(236,72,153,0.35))}
}
@keyframes iconGradientShift{
  0%{filter:hue-rotate(0deg) drop-shadow(0 8px 16px rgba(0,0,0,0.35))}
  50%{filter:hue-rotate(12deg) drop-shadow(0 8px 20px rgba(0,0,0,0.4))}
  100%{filter:hue-rotate(0deg) drop-shadow(0 8px 16px rgba(0,0,0,0.35))}
}
.desktop-icon-img img, .dock-btn img, #mobileGrid img, .phone-device .rounded-xl img, #windowLayer .card img {
  animation: iconPulseGlow 2.8s ease-in-out infinite, iconGradientShift 8s linear infinite;
  will-change:transform,filter;
  transform-origin:center;
}
.desktop-icon:hover img, .dock-btn:hover img, #mobileGrid button:hover img {
  animation: iconPulseGlow 1.4s ease-in-out infinite, iconBounce 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.desktop-icon:active img{transform:scale(0.92)}
#desktopIdentity{/* static centered — no float per request */}
#desktopIdentity h1{
  font-family:Syne, Inter, sans-serif;
  color:#ffffff;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.6)) drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}
#wallpaper img{will-change:transform}
#particleCanvas{pointer-events:none}
#phoneWallpaper img{will-change:transform}
#phoneParticleCanvas{pointer-events:none}

/* Desktop icons */
.desktop-icon{width:86px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:10px;cursor:pointer;user-select:none;border:1px solid transparent}
.desktop-icon:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.08)}
.desktop-icon:active{transform:scale(0.98)}
.desktop-icon-img{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12)}
.desktop-icon-label{font-size:11px;line-height:1.1;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,0.8);word-break:break-word}
.desktop-icon.is-open .desktop-icon-img{outline:2px solid rgba(255,255,255,0.5)}
.desktop-icon.is-selected{background:rgba(139,92,246,0.14); border-color:rgba(139,92,246,0.4)}
@media(max-width:640px){.desktop-icon{width:70px} .desktop-icon-img{width:40px;height:40px}}

/* Windows — macOS / Windows 11 grade motion: open / close / minimize */
@keyframes windowIn{
  0%{opacity:0;transform:scale(0.96) translateY(10px);filter:blur(3px)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
@keyframes windowOut{
  0%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
  100%{opacity:0;transform:scale(0.95) translateY(8px);filter:blur(3px)}
}
@keyframes windowMin{
  0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateY(72px) scale(0.86);filter:blur(3px)}
}
.window.is-closing{animation:windowOut 0.18s cubic-bezier(0.4,0,1,1) both !important;pointer-events:none}
.window.is-minimizing{animation:windowMin 0.26s cubic-bezier(0.4,0,1,1) both !important;pointer-events:none;transform-origin:50% 100%}
.window.no-anim{animation:none !important}
@keyframes iconBounce{
  0%{transform:scale(1)}
  30%{transform:scale(0.88) rotate(-2deg)}
  60%{transform:scale(1.08) rotate(1deg)}
  100%{transform:scale(1)}
}
@keyframes wallpaperPan{
  0%{transform:scale(1.05) translate(0,0)}
  100%{transform:scale(1.12) translate(-12px,-8px)}
}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-20px,-16px) scale(1.05)}
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(200%)}
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes dockFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 20px rgba(139,92,246,0.15)}
  50%{box-shadow:0 0 36px rgba(139,92,246,0.35)}
}
@keyframes askPulse{
  0%,100%{transform:scale(1); filter:brightness(1) drop-shadow(0 4px 12px rgba(236,72,153,0.25))}
  50%{transform:scale(1.06); filter:brightness(1.12) drop-shadow(0 8px 20px rgba(236,72,153,0.45)) drop-shadow(0 0 16px rgba(139,92,246,0.5))}
}
@keyframes askSparkle{
  0%,100%{filter:drop-shadow(0 0 6px rgba(236,72,153,0.5))}
  50%{filter:drop-shadow(0 0 14px rgba(139,92,246,0.7))}
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}
.icon-bounce{animation:iconBounce 0.4s cubic-bezier(0.34,1.56,0.64,1) !important}
.askabhi-icon{animation:askPulse 2.2s ease-in-out infinite, askSparkle 3s ease-in-out infinite; will-change:transform,filter}
.desktop-icon:hover img:not(.askabhi-icon){transform:translateY(-2px) scale(1.04); filter:brightness(1.08)}
#dock .dock-btn:hover img:not(.askabhi-icon){transform:translateY(-1px) scale(1.05)}
/* subtle idle for all icons */
.desktop-icon-img img{transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), filter 0.25s}
#dock .dock-btn img{transition:transform 0.2s, filter 0.2s}
.window{position:absolute;background:#1e1e2e;border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.4);display:flex;flex-direction:column;pointer-events:auto;min-width:360px;min-height:260px;animation:windowIn 0.3s cubic-bezier(0.16,1,0.3,1) both;will-change:transform,opacity; min-height:0}
.window.is-maximized{animation:none}
.window.is-focused{box-shadow:0 28px 72px rgba(0,0,0,0.65), 0 0 0 1px rgba(139,92,246,0.25)}
.window.is-minimized{display:none}
.window.is-maximized{border-radius:0}
.window-header{height:36px;display:flex;align-items:center;gap:0;padding:0 0 0 14px;background:rgba(20,20,35,0.92);border-bottom:1px solid var(--line);cursor:grab;user-select:none; overflow:hidden}
.window-header:active{cursor:grabbing}
.traffic{width:46px;height:36px;display:grid;place-items:center;font-size:13px;font-weight:400;border:none;background:transparent;color:rgba(255,255,255,0.85);transition:background 0.15s,color 0.15s; cursor:pointer; flex-shrink:0}
.traffic:hover{background:rgba(255,255,255,0.08); color:white}
.traffic.close{font-size:15px}
.traffic.close:hover{background:#e81123; color:white}
.traffic.min:hover{background:rgba(255,255,255,0.08)}
.traffic.max:hover{background:rgba(255,255,255,0.08)}
.traffic:active{transform:none}
.back-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:6px;color:rgba(255,255,255,0.7);transition:background 0.15s,color 0.15s;flex-shrink:0;margin-right:2px;border:none;background:transparent;cursor:pointer}
.back-btn:hover{background:rgba(255,255,255,0.08);color:white}
.back-btn:active{transform:scale(0.92)}
.back-btn.opacity-30{opacity:0.3}
.window-title{flex:1;text-align:left;font-size:12px;font-weight:600;opacity:0.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; letter-spacing:0.01em}
.window-content{flex:1;overflow:auto;background:#121225;color:#e8e8ef;position:relative; min-height:0; min-width:0}
.window-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize; z-index:5}
.window-resize-handle{position:absolute; z-index:5; touch-action:none}
.window-resize-n{top:0; left:8px; right:8px; height:10px; cursor:ns-resize}
.window-resize-s{bottom:0; left:8px; right:8px; height:10px; cursor:ns-resize}
.window-resize-e{top:8px; right:0; bottom:8px; width:10px; cursor:ew-resize}
.window-resize-w{top:8px; left:0; bottom:8px; width:10px; cursor:ew-resize}
.window-resize-ne{top:0; right:0; width:12px; height:12px; cursor:nesw-resize}
.window-resize-nw{top:0; left:0; width:12px; height:12px; cursor:nwse-resize}
.window-resize-se{right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize}
.window-resize-sw{left:0; bottom:0; width:12px; height:12px; cursor:nesw-resize}
.window.is-resizing{user-select:none}
.window.is-resizing .window-content{pointer-events:none}
/* visual hint on hover */
.window-resize-handle:hover{background:rgba(139,92,246,0.08)}
.window.is-maximized .window-resize-handle,
.window.is-maximized .window-resize{display:none !important}
@media(max-width:768px){
  .window-resize-n,.window-resize-s{height:10px}
  .window-resize-e,.window-resize-w{width:10px}
  .window-resize-se{width:18px;height:18px}
}

/* Dock */
#dock .dock-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
#dock .dock-btn{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);transition:transform .15s, background .15s}
#dock .dock-btn:hover{transform:translateY(-4px) scale(1.08);background:rgba(255,255,255,0.12)}
#dock .dock-btn.is-open{background:rgba(255,255,255,0.14)}
#dock .dock-btn.is-special{width:110px;height:44px;border-radius:12px;background:linear-gradient(135deg, #7c3aed, #4f46e5);display:flex;flex-direction:row;gap:6px;padding:0 10px;font-size:11px;font-weight:600}
#dock .dock-dot{width:4px;height:4px;border-radius:50%;background:white;opacity:0;transition:opacity .15s}
#dock .dock-dot.on{opacity:1}
@media(max-width:640px){#dock{bottom:8px;padding:6px 8px;gap:6px} #dock .dock-btn{width:42px;height:42px} #dock .dock-btn.is-special{width:96px;height:40px}}

/* Apps common */
.app-pad{padding:20px}
.card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px}
.card-hover:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
.chip{font-size:10px;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.06)}
.chip-live{background:rgba(34,197,94,0.15);color:#86efac;border-color:rgba(34,197,94,0.25)}
.grid-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media(max-width:640px){.grid-projects{grid-template-columns:1fr}}
/* Project thumbnails — fully responsive: phones → tablets → desktop → large */
.proj-cover{width:100%;aspect-ratio:16/10;max-height:220px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1f2937,#000);}
.proj-cover .proj-thumb{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;opacity:.85;transition:opacity .25s, transform .35s;}
.card-hover:hover .proj-thumb{opacity:1;transform:scale(1.02);}
@media(max-width:640px){
  .proj-cover{aspect-ratio:16/10;max-height:200px;}
  .grid-projects .card{margin:0;}
  .grid-projects img{image-rendering:auto;}
}
@media(min-width:641px) and (max-width:1023px){
  .proj-cover{max-height:210px;}
}
@media(min-width:1536px){
  .proj-cover{max-height:240px;}
}
@media(prefers-reduced-motion:reduce){
  .card-hover:hover .proj-thumb{transform:none;}
}

/* Spotlight */
#spotlightResults .item{padding:8px 10px;border-radius:8px;display:flex;align-items:center;justify-content:space-between}
#spotlightResults .item:hover{background:rgba(255,255,255,0.08)}
#spotlightResults .cat{font-size:10px;letter-spacing:0.08em;opacity:0.5;text-transform:uppercase;margin:10px 0 4px;padding:0 8px}

/* ===== Universal Responsive — Phone / Tablet / Desktop / Large ===== */
/* Extra small phones 320-374 */
@media(max-width:374px){
  #desktopIdentity h1{font-size:1.9rem !important}
  #desktopIdentity p{font-size:10px !important}
  .desktop-icon{width:62px}
  .desktop-icon-img img{width:48px !important;height:48px !important}
  .window{min-width:280px !important;min-height:220px !important}
  .card{padding:12px}
  .grid-projects{gap:10px}
  #dock{padding:4px 6px;gap:4px}
  #dock .dock-btn{width:38px !important;height:38px !important}
}
/* Small phones 375-639 */
@media(min-width:375px) and (max-width:639px){
  .window{min-width:320px !important}
}
/* Tablets 768-1023 — hybrid: show desktop but optimize windows */
@media(min-width:768px) and (max-width:1023px){
  #desktopIcons{gap:8px !important}
  .desktop-icon{width:76px}
  .window{max-width:92vw;max-height:78vh}
  .grid-projects{grid-template-columns:repeat(2,1fr) !important}
  #dock{max-width:92vw;overflow:auto}
}
/* Desktop 1024-1279 */
@media(min-width:1024px) and (max-width:1279px){
  .grid-projects{grid-template-columns:repeat(2,1fr) !important}
}
/* Large desktop 1536+ */
@media(min-width:1536px){
  #desktopIcons{left:24px !important;gap:16px !important}
  .window{max-width:960px}
  .grid-projects{grid-template-columns:repeat(3,1fr) !important}
}
/* Phone frame always */
@media(max-width:768px){
  #desktopIdentity{top:34%;}
  #desktopIdentity h1{font-size:2.2rem}
  #desktopIdentity p{font-size:11px}
  #windowLayer .window{left:6px!important;right:6px!important;width:auto!important;min-width:0 !important;top:34px!important;height:calc(100% - 74px)!important;min-height:0 !important}
  #windowLayer .window.is-maximized{left:0 !important;right:0 !important;top:28px !important;height:calc(100% - 28px) !important}
  #dock{max-width:calc(100% - 12px);overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #dock::-webkit-scrollbar{display:none}
  .window-header{height:36px}
  .window-content{font-size:15px}
}
/* Show phone layout only on <768 */
@media(max-width:768px){
  #desktopIcons{display:none !important}
  #mobileLayout{display:flex!important}
}
@media(min-width:769px){
  #mobileLayout{display:none !important}
}
/* Spotlight responsive */
@media(max-width:640px){
  #spotlight{padding:8px;align-items:flex-start;padding-top:8vh}
  #spotlight > div{max-width:100% !important;max-height:72vh !important}
}
/* Prevent iOS zoom on Ask Abhi input */
#askInput{font-size:16px !important}
@media(min-width:640px){#askInput{font-size:14px !important}}
/* Ask Abhi bubbles responsive */
#askMsgs{scrollbar-width:thin}
#askMsgs .max-w-\[88\%\]{max-width:88% !important}
@media(min-width:640px){#askMsgs .max-w-\[88\%\]{max-width:75% !important}}
/* Fluid typography */
html{font-size:15px}
@media(min-width:768px){html{font-size:16px}}
@media(min-width:1280px){html{font-size:16px}}

/* ===== Taskbar — Windows-style with animations ===== */
#taskbar{
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  animation:taskbarIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes taskbarIn{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}
.taskbar-item{
  animation:taskbarItemIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
  will-change:transform,opacity;
}
@keyframes taskbarItemIn{
  from{opacity:0; transform:scale(0.85) translateY(4px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}
#taskbarApps{scrollbar-width:none; -ms-overflow-style:none}
#taskbarApps::-webkit-scrollbar{display:none}
.taskbar-item:hover{transform:translateY(-1px)}
.taskbar-item:active{transform:scale(0.96)}
#taskbarApps .taskbar-item:nth-child(1){animation-delay:0.05s}
#taskbarApps .taskbar-item:nth-child(2){animation-delay:0.1s}
#taskbarApps .taskbar-item:nth-child(3){animation-delay:0.15s}
#taskbarApps .taskbar-item:nth-child(4){animation-delay:0.2s}
#taskbarApps .taskbar-item:nth-child(5){animation-delay:0.25s}
#askStarters{grid-template-columns:1fr}
@media(min-width:640px){#askStarters{grid-template-columns:repeat(2,1fr) !important}}
#askStarters button{min-height:64px; align-items:center; flex-shrink:0; overflow:visible}
#askStarters button span{min-width:0}
#askStarters button .line-clamp-2{display:block; white-space:normal; overflow:visible; -webkit-line-clamp:unset}

/* ===== Phone Wallpaper & Phone Animations — PC parity ===== */
.phone-device{isolation:auto; background:#050510}
#phoneWallpaper{border-radius:0; will-change:transform; z-index:0}
.phone-device > .flex-1{position:relative; z-index:1}
#phoneWallpaper{pointer-events:none}
@media(min-width:640px){#phoneWallpaper{border-radius:0 0 38px 38px}}
@media(max-width:639px){#phoneWallpaper{border-radius:0}}
#phoneWallpaper img{will-change:transform}
@keyframes phoneHeroIn{
  0%{opacity:0; transform:translateY(14px) scale(0.96); filter:blur(6px)}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}
@keyframes phoneFadeUp{
  0%{opacity:0; transform:translateY(10px)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes phoneGridIn{
  0%{opacity:0; transform:translateY(10px) scale(0.92)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
#mobileGrid{align-content:start !important; align-items:start !important; flex:none !important;}
#mobileGrid button{min-width:0; width:100%;}
#mobileGrid button{animation:phoneGridIn 0.52s cubic-bezier(0.16,1,0.3,1) both; will-change:transform,opacity}
#mobileGrid button:nth-child(1){animation-delay:0.62s}
#mobileGrid button:nth-child(2){animation-delay:0.68s}
#mobileGrid button:nth-child(3){animation-delay:0.74s}
#mobileGrid button:nth-child(4){animation-delay:0.80s}
#mobileGrid button:nth-child(5){animation-delay:0.86s}
#mobileGrid button:nth-child(6){animation-delay:0.92s}
#mobileGrid button:nth-child(7){animation-delay:0.98s}
#mobileGrid button:nth-child(8){animation-delay:1.04s}
#mobileGrid button img{transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), filter 0.25s}
#mobileGrid button:active{transform:scale(0.94)}
#mobileGrid button:active img{transform:scale(0.9)}
/* Phone icons hover glow stronger like PC */
#mobileGrid button:hover img{filter:brightness(1.12) drop-shadow(0 8px 18px rgba(139,92,246,0.35))}
/* Phone device subtle entry */
@keyframes phoneDeviceIn{
  0%{opacity:0; transform:translateY(18px) scale(0.98); filter:blur(8px)}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}
.phone-device{animation:phoneDeviceIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.05s both}
@media(max-width:639px){
  .phone-device{animation:none}
}
/* Phone section popup — refined spring pop for EVERY app */
@keyframes mobilePopIn{
  0%{opacity:0; transform:translateY(44px) scale(0.94); filter:blur(12px)}
  45%{opacity:1; transform:translateY(-6px) scale(1.03); filter:blur(0)}
  70%{transform:translateY(3px) scale(0.995); filter:blur(0)}
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}
@keyframes mobilePopOut{
  0%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
  100%{opacity:0; transform:translateY(24px) scale(0.97); filter:blur(8px)}
}
@keyframes mobilePopInContent{
  0%{opacity:0; transform:translateY(14px)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes mobilePopHeader{
  0%{opacity:0; transform:translateY(-8px)}
  100%{opacity:1; transform:translateY(0)}
}
#mobileAppView{will-change:transform,opacity,filter; transform-origin:center bottom}
#mobileAppView.mobile-pop-in{animation:mobilePopIn 0.48s cubic-bezier(0.34,1.56,0.64,1) both}
#mobileAppView.mobile-pop-out{animation:mobilePopOut 0.28s cubic-bezier(0.4,0,1,1) both}
#mobileAppView.mobile-pop-in #mobileAppContent{animation:mobilePopInContent 0.42s cubic-bezier(0.16,1,0.3,1) 0.1s both}
#mobileAppView.mobile-pop-in .flex.items-center.justify-between{animation:mobilePopHeader 0.36s ease 0.06s both}
/* Stagger cards inside phone sections on every open */
#mobileAppView.mobile-pop-in .card{animation:mobilePopInContent 0.4s cubic-bezier(0.16,1,0.3,1) both}
#mobileAppView.mobile-pop-in .card:nth-child(1){animation-delay:0.12s}
#mobileAppView.mobile-pop-in .card:nth-child(2){animation-delay:0.16s}
#mobileAppView.mobile-pop-in .card:nth-child(3){animation-delay:0.20s}
#mobileAppView.mobile-pop-in .card:nth-child(4){animation-delay:0.24s}
/* Phone Ask button — entrance only, no floating per request */
.phone-ask-btn{animation:phoneFadeUp 0.6s ease 0.55s both}
/* ===== Phone home — perfect fit, no big empty gap ===== */
#mobileLayout .phone-device > .flex-1{min-height:0}
#mobileGrid{flex:none !important; width:100%}
/* Profile button — double-click to open, no page-zoom on double-tap */
.phone-profile-btn{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
/* Time widget */
#phoneWidgetTime{font-variant-numeric:tabular-nums}
#phoneWidgetDate{letter-spacing:0.02em}
/* Short screens: compact widget + hero + grid so everything fits without scroll */
@media(max-width:768px) and (max-height:740px){
  #phoneWidgetTime{font-size:48px !important}
  #mobileLayout .phone-profile-btn{width:88px !important; height:88px !important}
  #mobileLayout .phone-profile-btn .phone-profile-frame{width:88px !important; height:88px !important}
  #mobileLayout .phone-device h1{font-size:24px !important}
  #mobileLayout .phone-device .phone-ask-btn{padding:10px !important}
  #mobileGrid{row-gap:12px !important}
  #mobileGrid button img{width:46px !important; height:46px !important}
}
@media(max-width:768px) and (max-height:640px){
  #phoneWidgetTime{font-size:40px !important}
  #phoneWidgetDate{font-size:12px !important}
  #mobileLayout .phone-profile-btn{width:76px !important; height:76px !important}
  #mobileLayout .phone-profile-btn .phone-profile-frame{width:76px !important; height:76px !important}
  #mobileLayout .phone-device h1{font-size:22px !important}
  #mobileGrid{row-gap:10px !important}
  #mobileGrid button img{width:42px !important; height:42px !important}
}
/* Tall screens: keep content centered, footer tight — no expanding empty space */
/* ===== Profile picture zoom viewer ===== */
@keyframes profileZoomIn{
  0%{opacity:0; transform:scale(0.7) translateY(16px); filter:blur(8px)}
  60%{opacity:1; transform:scale(1.03) translateY(-2px); filter:blur(0)}
  100%{opacity:1; transform:scale(1) translateY(0); filter:blur(0)}
}
#profileViewer.flex .profile-viewer-card{animation:profileZoomIn 0.38s cubic-bezier(0.16,1,0.3,1) both}
#profileViewer.hidden{display:none !important}
#profileViewer.flex{display:flex !important}
/* Ensure music bar on phone sits above wallpaper correctly with backdrop separation */
#musicBarMobile{backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15)}

/* Ask Abhi — professional UI polish + collapsing icons fix — scrolling fixed */
#askMsgs{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.12) transparent; overflow:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; flex:1 1 auto !important}
#askMsgs > .flex{min-width:0}
#askMsgs .w-8, #askMsgs .w-6, #askMsgs .w-10{flex-shrink:0 !important; flex-grow:0 !important; flex-basis:auto !important}
#askMsgs i, #askMsgs svg{flex-shrink:0 !important; display:block !important}
#askMsgs::-webkit-scrollbar{width:5px;height:5px}
#askMsgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:999px}
#askMsgs::-webkit-scrollbar-track{background:transparent}
#askInput{transition:border-color .2s, background .2s, box-shadow .2s; min-width:0}
#askInput:focus{border-color:rgba(139,92,246,0.35); background:rgba(255,255,255,0.07); box-shadow:0 0 0 2px rgba(139,92,246,0.15)}
#askStarters{grid-template-columns:1fr}
@media(min-width:640px){#askStarters{grid-template-columns:repeat(2,1fr) !important}}
#askStarters button{will-change:transform,box-shadow; min-width:0; overflow:hidden}
#askStarters button > span:first-child{flex:0 0 36px !important; width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; max-width:36px !important; max-height:36px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; flex-shrink:0 !important}
#askStarters button > span:first-child i{width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; flex-shrink:0 !important; display:block !important}
#askStarters button > span:last-child{flex:0 0 28px !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important}
.card img.w-24{flex:0 0 96px !important; width:96px !important; min-width:96px !important; max-width:96px !important; height:64px !important; min-height:64px !important; max-height:64px !important; flex-shrink:0 !important; display:block !important}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)}}
#askMsgs .msg-user{animation:msgIn .24s cubic-bezier(0.16,1,0.3,1)}

/* ===== Search + Header/Taskbar — never collapse ===== */
@keyframes searchPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes searchRing{0%{box-shadow:0 0 0 0 rgba(139,92,246,0.35)}100%{box-shadow:0 0 0 10px rgba(139,92,246,0)}}
#taskbar button[aria-label="Search"]{animation:searchRing 2.8s ease-in-out infinite}
#taskbar button[aria-label="Search"]:hover{animation:none}
#taskbar button[aria-label="Search"] svg{transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1)}
#taskbar button[aria-label="Search"]:hover svg{transform:scale(1.1) rotate(-6deg)}
#taskbar button[aria-label="Search"]:active svg{transform:scale(0.92)}
#menuBar button[aria-label="Search"]:hover svg{transform:scale(1.08)}
#spotlight .w-8{animation:searchPulse 2.2s ease-in-out infinite}

/* HARD LOCK — header + taskbar buttons: no flex shrink, no 0-width */
#menuBar, #taskbar { min-width:0; }
#menuBar > div, #taskbar > div { min-width:0; }
#menuBar button.icon-btn{
  flex:0 0 28px !important;
  width:28px !important; height:28px !important;
  min-width:28px !important; min-height:28px !important;
  max-width:28px !important; max-height:28px !important;
  display:grid !important; place-items:center !important;
  flex-shrink:0 !important; flex-grow:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:8px !important;
}
#menuBar button.icon-btn svg{
  width:16px !important; height:16px !important;
  min-width:16px !important; min-height:16px !important;
  display:block !important; flex:none !important;
}
#taskbar .taskbar-start{
  flex:0 0 36px !important;
  width:36px !important; height:36px !important;
  min-width:36px !important; min-height:36px !important;
  max-width:36px !important; max-height:36px !important;
  display:grid !important; place-items:center !important;
  flex-shrink:0 !important;
  border-radius:12px !important;
}
#taskbar .taskbar-start svg{ width:18px !important; height:18px !important; display:block !important; flex:none !important; }
#taskbar button.taskbar-search{
  flex:0 0 38px !important;
  width:38px !important; height:38px !important;
  min-width:38px !important; min-height:38px !important;
  max-width:38px !important; max-height:38px !important;
  display:grid !important; place-items:center !important;
  flex-shrink:0 !important;
  border-radius:12px !important;
}
#taskbar button.taskbar-search svg{ width:18px !important; height:18px !important; display:block !important; flex:none !important; }
#taskbar .taskbar-pill{
  flex-shrink:0 !important; display:flex !important; align-items:center !important;
  white-space:nowrap !important; min-width:0;
}
#taskbar .taskbar-pill svg{ flex:none !important; display:block !important; width:14px !important; height:14px !important; }
#taskbar .taskbar-0x{
  flex:0 0 36px !important;
  width:36px !important; height:36px !important;
  min-width:36px !important; min-height:36px !important;
  display:grid !important; place-items:center !important;
  flex-shrink:0 !important; margin-right:2px !important;
}
#spotlight .spotlight-icon{
  flex:0 0 32px !important; width:32px !important; height:32px !important;
  min-width:32px !important; min-height:32px !important;
  display:grid !important; place-items:center !important;
  flex-shrink:0 !important;
}
#spotlight .spotlight-icon svg{ width:16px !important; height:16px !important; display:block !important; }
#menuBar #menuTime{ flex-shrink:0 !important; white-space:nowrap !important; }
.taskbar-item img, #taskbarApps img, #mobileGrid img { flex:none !important; flex-shrink:0 !important; display:block !important; }
.taskbar-item img{ width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; }
/* Never let any flex item collapse to 0 */
#menuBar *, #taskbar * { min-width:0; }
#menuBar button, #taskbar button { min-width:0; }

/* Utilities */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08)}

/* ===== Events.app — reuses OS window language (no new design system) ===== */
.events-app{min-height:0}
.event-dot{font-size:9px;width:14px;text-align:center;color:rgba(255,255,255,0.35);flex-shrink:0}
.event-dot.on{color:#fbbf24}
.event-cover img{display:block}
@keyframes eventSwitchIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.event-switch{animation:eventSwitchIn 0.22s cubic-bezier(0.16,1,0.3,1) both}
.event-info{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden}
.event-info summary{cursor:pointer;padding:10px 12px;font-size:13px;font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
.event-info summary::-webkit-details-marker{display:none}
.event-info summary:hover{background:rgba(255,255,255,0.04)}
.event-info-body{padding:2px 0 6px}
.event-person{padding:8px 12px;border-top:1px solid var(--line)}
.event-person-name{font-size:13px;font-weight:600;line-height:1.3}
.event-person-role{font-size:12px;color:rgba(255,255,255,0.6);margin-top:1px}

/* ===== Events photo viewer — OS-style modal (same header/controls as windows) ===== */
#eventViewer.hidden{display:none !important}
#eventViewer{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.event-viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.event-viewer{position:relative;width:min(920px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);background:#1e1e2e;border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.4);display:flex;flex-direction:column;animation:windowIn 0.22s cubic-bezier(0.16,1,0.3,1) both}
.event-viewer .window-header{flex-shrink:0}
.event-viewer .traffic svg{width:14px;height:14px;display:block}
.event-viewer-body{position:relative;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:0;touch-action:pan-y}
.event-viewer-img{width:100%;height:auto;max-height:58vh;max-height:58dvh;object-fit:contain;background:#000;user-select:none;-webkit-user-drag:none}
.event-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.85);cursor:pointer;transition:background 0.15s;z-index:2}
.event-nav-arrow:hover{background:rgba(255,255,255,0.15)}
.event-nav-arrow:active{transform:translateY(-50%) scale(0.94)}
.event-nav-arrow:first-child{left:10px}
.event-nav-arrow:last-child{right:10px}
.event-viewer-footer{flex-shrink:0;border-top:1px solid var(--line);background:rgba(20,20,35,0.92);padding:10px 12px}
.event-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.event-thumb{flex:0 0 auto;width:64px;height:44px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);opacity:0.55;padding:0;background:rgba(255,255,255,0.04);cursor:pointer;transition:opacity 0.15s,border-color 0.15s}
.event-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.event-thumb:hover{opacity:0.85}
.event-thumb.active{opacity:1;border-color:rgba(139,92,246,0.6);box-shadow:0 0 0 1px rgba(139,92,246,0.6)}
@media(max-width:640px){
  #eventViewer{padding:8px}
  .event-viewer{border-radius:12px}
  .event-viewer-img{max-height:50vh;max-height:50dvh}
  .event-nav-arrow{width:44px;height:44px}
  .event-nav-arrow:first-child{left:6px}
  .event-nav-arrow:last-child{right:6px}
  .event-thumb{width:72px;height:50px}
}
@media (prefers-reduced-motion: reduce){
  .event-switch,.event-viewer{animation:none !important}
  .event-cover img{transition:none !important}
}