/* v352: round drawer button keeps its glow but no longer floats (Signals tile keeps glow and float). */
/* v345 button (part 1); v346 panel (part 2); v348 white glass and bigger icons (parts 5 and 6); v347 sections (part 3), plain look; the white glass look comes in part 5). Held from members (gate key app_drawer). */
#apd{position:fixed;right:calc(14px + 52px + 10px);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:8;width:52px;height:52px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:var(--acc);cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05)),color-mix(in srgb,var(--card) 60%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3)}
#apd[hidden]{display:none}
#apd svg{width:26px;height:26px;fill:currentColor;stroke:none}
#apd:active{transform:scale(.94)}
html.drwopen #apd,body:has(.ov) #apd{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){#apd:active{transform:none}}
html.apdopen #apd{opacity:0;pointer-events:none}
#apdp{position:fixed;inset:0;z-index:40}
.apd-sc{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.apd-sh{position:absolute;top:0;right:0;bottom:0;width:50%;min-width:220px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card,#1a1c1f);color:var(--tx,inherit);border-left:1px solid var(--line,#444);overflow-y:auto}
.apd-hd{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.apd-x{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line,#444);border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.apd-x .ic{width:20px;height:20px}
.apd-gr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.apd-i{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line,#444);border-radius:16px;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit}
.apd-i:active{transform:scale(.96)}
.apd-ic{display:flex;color:var(--acc)}
.apd-ic .ic{width:28px;height:28px}
.apd-n{font-size:12px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.apd-sec{margin:0 0 14px}
.apd-st{margin:0 0 6px;padding:0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut,inherit);opacity:.8}
/* v348 parts 5 and 6: white glass sheet, dark borders, bigger icons. Same in dark and light (the sheet is always white glass). */
.apd-sc{background:rgba(0,0,0,.45)}
.apd-sh{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.78));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);color:#14161a;border-left:2px solid #14161a;box-shadow:-8px 0 28px rgba(0,0,0,.45)}
.apd-hd b{color:#14161a;font-size:16px}
.apd-x{border:2px solid #14161a;background:rgba(255,255,255,.6);color:#14161a}
.apd-st{color:#14161a;opacity:.7}
.apd-i{border:1.5px solid #14161a;background:rgba(255,255,255,.55);color:#14161a;padding:14px 4px 10px;gap:8px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.apd-i:active{background:rgba(20,22,26,.12)}
.apd-ic{color:#14161a}
.apd-ic .ic{width:38px;height:38px}
.apd-n{font-size:12.5px;font-weight:600;color:#14161a}

/* v349: real glass sheet, own colour per icon (--c set in drawer.js), Signals tile Upcoming with glow and float, button far right with glow and float, gear moves left (html.apdon). */
#apd{right:14px;box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 16px 3px color-mix(in srgb,var(--acc) 60%,transparent)}
html.apdon #prof{display:none!important}
@keyframes apdgl{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 10px 1px color-mix(in srgb,var(--acc) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}50%{box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 24px 6px color-mix(in srgb,var(--acc) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}}
.apd-sc{background:rgba(0,0,0,.22)}
.apd-sh{background:linear-gradient(160deg,rgba(255,255,255,.52),rgba(255,255,255,.30));-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);border-left:1.5px solid rgba(255,255,255,.7);box-shadow:-8px 0 28px rgba(0,0,0,.35),inset 1px 0 0 rgba(255,255,255,.6)}
.apd-hd b,.apd-st,.apd-n{color:#0b0d10}
.apd-st{opacity:.85;font-weight:800}
.apd-x{border:1.5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.35);color:#0b0d10}
.apd-i{position:relative;border:1.5px solid color-mix(in srgb,var(--c) 70%,#fff 30%);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,rgba(255,255,255,.6)),color-mix(in srgb,var(--c) 8%,rgba(255,255,255,.4)));box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 8px rgba(0,0,0,.12)}
.apd-i:active{background:color-mix(in srgb,var(--c) 30%,rgba(255,255,255,.5))}
.apd-ic{color:var(--c)}
.apd-up{animation:apdtf 3s ease-in-out infinite,apdtg 2.4s ease-in-out infinite;cursor:default}
.apd-up:active{transform:none}
.apd-chip{position:absolute;top:5px;right:5px;padding:1px 6px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 80%,transparent)}
@keyframes apdtf{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes apdtg{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 8px 0 color-mix(in srgb,var(--c) 55%,transparent)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 20px 5px color-mix(in srgb,var(--c) 80%,transparent)}}
@media(prefers-reduced-motion:reduce){.apd-up{animation:apdtg 2.4s ease-in-out infinite}}
@keyframes apdgls{0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 10px 1px color-mix(in srgb,var(--acc) 50%,transparent)}50%{box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 22px 5px color-mix(in srgb,var(--acc) 70%,transparent)}}

/* v350: clear glass sheet (see-through, strong blur), text follows the phone light or dark, profile line, Hold to log out at the bottom. */
.apd-sc{background:rgba(0,0,0,.10)}
.apd-sh{background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(32px) saturate(210%);backdrop-filter:blur(32px) saturate(210%);border-left:1px solid rgba(255,255,255,.6);color:var(--tx,#14161a);box-shadow:-8px 0 28px rgba(0,0,0,.28),inset 1px 0 0 rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.apd-hd b,.apd-st{color:var(--tx,#14161a);text-shadow:0 1px 6px color-mix(in srgb,var(--bg,#fff) 70%,transparent)}
.apd-x{border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.18);color:var(--tx,#14161a)}
.apd-i{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,rgba(255,255,255,.34)),color-mix(in srgb,var(--c) 6%,rgba(255,255,255,.18)))}
.apd-n{color:var(--tx,#14161a);text-shadow:0 1px 6px color-mix(in srgb,var(--bg,#fff) 70%,transparent)}
.apd-bd{flex:1 0 auto}
.apd-me{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-width:0}
.apd-me .av{width:36px;height:36px;font-size:15px;flex:none}
.apd-me div{min-width:0}.apd-me b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--tx,#14161a)}
.apd-me small{display:block;font-size:12px;color:var(--mut,inherit)}
.apd-ft{flex:none;margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.5)}

/* v354: slower, smooth drawer. Sheet slides in from the right (0.55 s, soft ease-out) and out (0.45 s); the dark scrim fades. Reduced motion: short fade only. */
.apd-sc{animation:apdsci .55s ease both}
.apd-sh{animation:apdshi .55s cubic-bezier(.22,.8,.24,1) both;will-change:transform}
#apdp.apd-out{pointer-events:none}
#apdp.apd-out .apd-sc{animation:apdsco .45s ease both}
#apdp.apd-out .apd-sh{animation:apdsho .45s cubic-bezier(.45,0,.55,1) both}
@keyframes apdsci{from{opacity:0}to{opacity:1}}
@keyframes apdsco{from{opacity:1}to{opacity:0}}
@keyframes apdshi{from{transform:translateX(104%)}to{transform:translateX(0)}}
@keyframes apdsho{from{transform:translateX(0)}to{transform:translateX(104%)}}
@media(prefers-reduced-motion:reduce){.apd-sc,.apd-sh,#apdp.apd-out .apd-sc,#apdp.apd-out .apd-sh{animation-duration:.2s}.apd-sh{animation-name:apdsci}#apdp.apd-out .apd-sh{animation-name:apdsco}}

/* v370: slow close when Log out is tapped in the drawer (0.9 s sheet, 0.9 s scrim). */
#apdp.apd-out.apd-slow .apd-sc{animation:apdsco .9s ease both}
#apdp.apd-out.apd-slow .apd-sh{animation:apdsho .9s cubic-bezier(.45,0,.55,1) both}