/* ===== تاسک بار (Taskbar) ===== */
.taskbar{
  position:fixed;
  bottom:16px;
  left:0;
  right:0;
  margin:0 auto;
  width:calc(100% - 32px);
  max-width:420px;
  background:var(--card);
  border-radius:34px;
  box-shadow:0 4px 22px rgba(44,64,51,.10);
  display:flex;
  align-items:center;
  padding:8px 10px;
  z-index:50;
  overflow:hidden;
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
}

.taskbar button{
  flex:1;
  position:relative;
  border:none;
  background:transparent;
  font-family:"UniSIRWAN Ping", 'Noto Kufi Arabic', system-ui, sans-serif;
  color:var(--bark);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 2px;
  border-radius:26px;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  transition:color .65s var(--ease);
}

/* پیلی خشاو — بە شێوەی لیسک دەخشێت و کەمێک درێژ دەبێتەوە */
.taskbar .glide{
  position:absolute;
  top:8px;
  bottom:8px;
  left:0;
  background:var(--leaf);
  border-radius:26px;
  z-index:0;
  will-change:transform, width;
}

.taskbar button > *{
  position:relative;
  z-index:2;
}

/* ئایکۆنی پڕ */
.ic{
  display:grid;
  place-items:center;
  position:relative;
  transition:transform .9s var(--ease);
}

.taskbar button svg{
  width:24px;
  height:24px;
  fill:var(--bark);
  display:block;
  transition:fill .65s var(--ease);
}

.taskbar button.active{color:#fff}
.taskbar button.active svg{fill:#fff}

.taskbar button:active .ic{
  transform:scale(.9);
  transition:transform .28s ease;
}

.taskbar button:focus-visible{
  outline:2px solid var(--bark);
  outline-offset:-3px;
}

.lbl{
  white-space:nowrap;
  letter-spacing:-.1px;
}

@media (prefers-reduced-motion:reduce){
  .taskbar *{transition:none !important}
}