/* MZZ interaction layer: fixed application shell, crisp surfaces and fast feedback. */
:root {
  --app-fast: 110ms;
  --app-normal: 165ms;
  --app-ease: cubic-bezier(.2,.75,.25,1);
  --native-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 0 rgba(0,0,0,.34);
  --native-radius: 12px;
  --native-radius-lg: 17px;
}

html,body{width:100%;height:100%;min-height:0;overflow:hidden!important}
body{padding:0!important}
.app-shell{height:100dvh;min-height:0!important;overflow:hidden!important}
.workspace{height:100%;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr);overflow:hidden!important}
.workspace>main{min-width:0;min-height:0;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.workspace>main::-webkit-scrollbar,.rail-nav::-webkit-scrollbar,.thread-list::-webkit-scrollbar,.message-stream::-webkit-scrollbar{width:8px;height:8px}
.workspace>main::-webkit-scrollbar-thumb,.thread-list::-webkit-scrollbar-thumb,.message-stream::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:rgba(255,255,255,.16);background-clip:padding-box}
.workspace>main::-webkit-scrollbar-track,.thread-list::-webkit-scrollbar-track,.message-stream::-webkit-scrollbar-track{background:transparent}

/* Fast navigation without web-page-like cascading entrances. */
.screen.active{animation:app-view-in var(--app-normal) var(--app-ease) both!important}
.screen.active>*{animation:none!important}
@keyframes app-view-in{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}
body.route-changing .topbar h1{animation:app-title-in var(--app-normal) var(--app-ease) both}
@keyframes app-title-in{from{opacity:.35;transform:translateX(-3px)}to{opacity:1;transform:none}}

/* A slim activity rail reads like an application task, not a page refresh. */
.topbar{position:relative!important;flex:none}
.topbar::after{content:"";position:absolute;z-index:5;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;opacity:0;transform:scaleX(.05);transform-origin:left;background:linear-gradient(90deg,#806cf2,#b5a8ff);box-shadow:0 0 12px rgba(128,108,242,.48);transition:opacity 100ms ease}
body.app-is-loading .topbar::after{opacity:1;animation:app-progress 1.05s var(--app-ease) 1 forwards}
@keyframes app-progress{0%{transform:scaleX(.04)}55%{transform:scaleX(.72)}100%{transform:scaleX(.94)}}
.app-is-loading .topbar h1{opacity:1!important}

/* Controls respond immediately and settle without floaty website motion. */
button,a,.listing-card,.network-card,.store-directory-card,.store-ops-card,.money-card,.account-card,.settings-card{
  transition:color var(--app-fast) ease,background-color var(--app-fast) ease,border-color var(--app-fast) ease,box-shadow var(--app-normal) ease,opacity var(--app-fast) ease,transform var(--app-fast) var(--app-ease)!important
}
:where(button,a,[role="button"]){-webkit-user-select:none;user-select:none;touch-action:manipulation}
:where(button,.solid-button,.outline-button,.text-button,.filter):active{transform:scale(.982)!important;transition-duration:55ms!important}
:where(.nav-link,.account-link,.mobile-dock button):active{background:rgba(128,108,242,.16)!important}
.solid-button{background:#806cf2!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.3)!important}
.solid-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.outline-button,.text-button,.filter{box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}

/* Panels belong to one workspace instead of appearing as floating web cards. */
:where(.home-command,.home-pulse>*,.listing-card,.network-hero,.network-tools,.network-card,.resell-command,.resell-flow,.resell-toolbar,.resell-empty,.directory-hero,.directory-tools,.store-directory-card,.store-ops-card,.money-summary,.money-card,.account-card,.settings-card,.empty-state){box-shadow:var(--native-shadow)!important}
:where(.listing-card,.network-card,.store-directory-card,.store-ops-card):hover{border-color:rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 18px rgba(0,0,0,.18)!important;transform:translateY(-1px)!important}

.nav-link.active{transition-duration:90ms!important}
.nav-link .ui-icon,.mobile-dock .ui-icon{transition:transform var(--app-normal) var(--app-ease),color var(--app-fast) ease}
.nav-link.active .ui-icon,.mobile-dock button.active .ui-icon{transform:scale(1.06);color:#fff}
.notification-button:active,.avatar-button:active,.icon-button:active{transform:scale(.92)!important}

:where(input,select,textarea){transition:border-color var(--app-fast) ease,box-shadow var(--app-fast) ease,background-color var(--app-fast) ease!important}
:where(input,select,textarea):focus{box-shadow:0 0 0 2px rgba(128,108,242,.2),inset 0 1px 2px rgba(0,0,0,.2)!important}

dialog[open]{animation-duration:180ms!important}
#toast,#toast:popover-open{transition:opacity var(--app-normal) ease,transform var(--app-normal) var(--app-ease)!important}

@media(min-width:761px){
  .app-shell{height:calc(100dvh - 16px)!important;min-height:0!important;margin:8px!important;border-radius:17px!important}
  .rail{inset:8px auto 8px 8px!important;height:auto!important;border-radius:17px 0 0 17px!important}
  .workspace{height:100%!important;min-height:0!important;border-radius:0 17px 17px 0!important}
  .topbar{height:76px!important;min-height:76px!important;padding:15px clamp(24px,3vw,44px)!important}
  .topbar h1{font-size:21px!important}
  .workspace>main{height:auto!important}
  .screen{padding:clamp(22px,3vw,42px)!important}
  body:has(.screen[data-screen="messages"].active) .app-shell,body:has(.screen[data-screen="messages"].active) .workspace{height:calc(100dvh - 16px)!important}
  body:has(.screen[data-screen="messages"].active) .workspace main{height:auto!important}
}

@media(max-width:760px){
  html,body,.app-shell,.workspace{height:100dvh!important;min-height:0!important}
  .workspace{padding-bottom:0!important;grid-template-rows:auto minmax(0,1fr)}
  .workspace>main{height:auto!important;padding-bottom:calc(78px + env(safe-area-inset-bottom));scrollbar-gutter:auto}
  .topbar{position:relative!important;min-height:58px!important;padding:max(7px,env(safe-area-inset-top)) 11px 7px!important;box-shadow:0 1px 0 rgba(255,255,255,.06)!important}
  .screen{padding:11px 11px calc(88px + env(safe-area-inset-bottom))!important}
  .screen.active{animation-duration:145ms!important}
  .mobile-dock{transition:transform 150ms var(--app-ease),border-color 120ms ease,background-color 120ms ease!important}
  .mobile-dock button{transition:color 90ms ease,background-color 90ms ease,border-color 90ms ease,transform 70ms var(--app-ease)!important}
  .mobile-dock button:active{transform:scale(.94)!important}
  .mobile-menu-dialog[open]{animation-duration:210ms!important}
  body:has(.screen[data-screen="messages"].active) .workspace>main{padding-bottom:0!important}
}

@media(prefers-reduced-motion:reduce){.topbar::after{animation:none!important}.screen.active{animation:none!important}}
html[data-reduce-motion="true"] .topbar::after{animation:none!important}