:root{
 --wpt-accent:#0b7be3;
 --wpt-bg-soft:#eaf5ff;
 --wpt-sep:#bfe0ff;
 --wpt-text:#0068D6;
 --wpt-width:auto;
		--wpt-header-h:0px;
}

 /* ========== Mobile/Tablet:Menubar ล่าง (ค่าเริ่มต้น) ========== */
 .wpt-sidebar{
 position:fixed;
 left:0;
 right:0;
 bottom:0;
 z-index:10;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:0;
 background:#eaf5ff;
 border-top:1px solid #e5e7eb;
 box-shadow:0 -10px 30px rgba(0,0,0,.07);
 border-top-left-radius:16px;
 border-top-right-radius:16px;
 padding-bottom:env(safe-area-inset-bottom,0);
}

 .wpt-sidebar-item{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:6px;
 text-decoration:none;
 color:#0068D6 !important;
 font-weight:700;
 font-size:13px;
 padding:12px 8px;
 transition:background .2s ease,transform .12s ease;
 border-right:1px solid #bfe0ff;
}

 .wpt-sidebar-item:first-child{
 border-top-left-radius:16px;
}

 .wpt-sidebar-item:last-child{
 border-top-right-radius:16px;
 border-right:none;
}

 .wpt-sidebar-item img,
 .wpt-sidebar-item svg{
 width:24px;
 height:24px;
 object-fit:contain;
}

 .wpt-sidebar-item:is(:hover,:focus-visible){
 background:#bfe0ff;
 color:#111827;
 outline:none;
}

 /* ========== Desktop:แปลงเป็นแผงแนวตั้งชิดขวาแบบในภาพ ========== */
 @media (min-width:1024px){
 .wpt-sidebar{
 top:30%;
 right:calc(0px + env(safe-area-inset-right));
 bottom:auto;
 left:auto;
 position:fixed;
 transform:translateY(-50%);/* โชว์กลางๆ ก่อน */
 will-change:top;
 transition:top .12s ease;
 background:var(--wpt-bg-soft);
 border:1px solid var(--wpt-accent);
 border-radius:16px 0 0 16px;
 box-shadow:0 12px 36px rgba(11,123,227,.18);
 display:flex;
 flex-direction:column;
 gap:0;
 padding:0;
 z-index:10;
}
 .wpt-sidebar.wpt-ready{transform:none;}

 .wpt-sidebar-item{
 flex-direction:column;
 align-items:center;
 gap:8px;
 padding:16px 14px;
 color:var(--wpt-text);
 border-top:1px solid var(--wpt-sep);
 border-right:none;
 border-left:none;
 border-bottom:none;
 border-radius:0;
 background:#eaf5ff;
}

 .wpt-sidebar-item:first-child{
 border-top:none;
}

 .wpt-sidebar-item:last-child{
 border-top-right-radius:0;
 border-bottom-left-radius:16px;

}

 .wpt-sidebar-item img{
 width:32px;
 height:32px;
}

 .wpt-sidebar-item span{
 font-size:14px;
 letter-spacing:.2px;
}

 .wpt-sidebar-item:is(:hover,:focus-visible){
 background:#bfe0ff;
}
}