/* Plaazaa App Shell — pz-shell.css v1.2 (SDK 1.5, optional companion of pz-arena.js).
   Native-app feel for mini apps: locked viewport, top bar + burger drawer, bottom tab bar, bottom sheet, toast.
   Requires pz-ui.css (tokens --pz-*, accent via <html data-accent>, dark mode). */
/* tokens (--pz-*, accents, dark mode) live in pz-ui.css — load pz-ui.css BEFORE this file */
html.pzs,html.pzs body{height:100%;overflow:hidden;overscroll-behavior:none}
html.pzs body{background:var(--pz-bg);color:var(--pz-text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pzs-app{position:fixed;inset:0}
.pzs-bar{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:var(--pz-hdr);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--pz-line)}
.pzs-ib{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;border:0;background:none;color:inherit;cursor:pointer}
.pzs-ib:active{background:var(--pz-soft)}
.pzs-ttl{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pzs-ttl b{font:700 15px Sora,system-ui,sans-serif}.pzs-ttl small{font-size:11px;color:var(--pz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pzs-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.pzs-tabs{position:absolute;inset:0}
.pzs-tab{position:absolute;inset:0;display:none;padding-top:calc(var(--pz-top) + env(safe-area-inset-top));padding-bottom:calc(var(--pz-nav) + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pzs-tab.on{display:block;animation:pzsin .18s ease}
.pzs-tab.full{padding:0;overflow:hidden}
@keyframes pzsin{from{opacity:0;transform:translateY(6px)}}
.pzs-nav{position:absolute;z-index:20;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--pz-hdr);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--pz-line)}
.pzs-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font:600 11px "Noto Sans Thai",system-ui,sans-serif;color:var(--pz-muted);position:relative;border:0;background:none;border-radius:14px;cursor:pointer}
.pzs-nav button i{font-style:normal;font-size:21px;line-height:1;filter:grayscale(1);opacity:.75;position:relative;z-index:1}
.pzs-nav button span{position:relative;z-index:1}
.pzs-nav button.on{color:var(--pz-accent-ink)}.pzs-nav button.on i{filter:none;opacity:1}
.pzs-nav button.on::before{content:"";position:absolute;top:3px;left:50%;width:54px;height:30px;margin-left:-27px;border-radius:16px;background:var(--pz-accent-soft)}
.pzs-nav .pzs-badge{position:absolute;z-index:2;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--pz-danger);color:#fff;font:700 10.5px/18px Sora,sans-serif;text-align:center;padding:0 5px}
.pzs-scrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.pzs-scrim.on{opacity:1;pointer-events:auto}
.pzs-drawer{position:absolute;z-index:41;top:0;bottom:0;left:0;width:78%;max-width:320px;background:var(--pz-card);box-shadow:var(--pz-shadow);display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));transform:translateX(-105%);transition:transform .22s ease}
.pzs-drawer.on{transform:none}
.pzs-dh{display:flex;gap:12px;align-items:center;padding:6px 8px 16px;border-bottom:1px solid var(--pz-line);margin-bottom:8px}
.pzs-dh .lg{width:46px;height:46px;border-radius:15px;background:linear-gradient(150deg,#0c4a6e,#0ea5e9);display:grid;place-items:center;font-size:24px}
.pzs-dh b{font:700 16px Sora,sans-serif;display:block}.pzs-dh small{color:var(--pz-muted);font-size:12px}
.pzs-mi{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:12px;font:600 15px "Noto Sans Thai",system-ui,sans-serif;cursor:pointer;border:0;background:none;color:inherit;text-align:left;width:100%;text-decoration:none}
.pzs-mi:active{background:var(--pz-soft)}.pzs-mi .ic{width:26px;text-align:center;font-size:19px}.pzs-mi em{margin-left:auto;font-style:normal;color:var(--pz-muted);font-size:12.5px}
.pzs-sp{flex:1}
.pzs-sheet{position:absolute;z-index:42;left:0;right:0;bottom:0;max-height:82%;overflow:auto;background:var(--pz-card);border-radius:26px 26px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--pz-shadow);transform:translateY(105%);transition:transform .24s ease}
.pzs-sheet.on{transform:none}
.pzs-grab{width:40px;height:5px;border-radius:3px;background:var(--pz-line);margin:0 auto 12px}
.pzs-sheet h3{font:700 16px Sora,sans-serif;margin-bottom:10px}
.pzs-toast{position:absolute;z-index:60;left:50%;top:calc(var(--pz-top) + env(safe-area-inset-top) + 8px);transform:translateX(-50%);max-width:88%;background:rgba(17,24,39,.94);color:#fff;border-radius:999px;padding:9px 16px;font:600 13px "Noto Sans Thai",system-ui,sans-serif;box-shadow:var(--pz-shadow);animation:pzsin .2s ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pzs-tab.on,.pzs-toast{animation:none}.pzs-drawer,.pzs-sheet,.pzs-scrim{transition:none}}
@media(min-width:760px){.pzs-app{max-width:520px;margin:0 auto;border-left:1px solid var(--pz-line);border-right:1px solid var(--pz-line)}}

/* v1.1 optional parts: no bottom bar → full height; no burger → tighter bar */
.pzs-app.pzs-notabs .pzs-tab{padding-bottom:env(safe-area-inset-bottom)}
.pzs-app.pzs-nomenu .pzs-bar{padding-left:16px}
.pzs-id{display:flex;align-items:center;flex:none;margin-right:-6px}.pzs-id:empty{display:none}