/* ================================================================
   Mobile "native app" layer (< 768px)
   - compact app bar, edge-to-edge cards, horizontal chip scrollers
   - floating glass bottom tab bar with a centre action button
   - preview & download as a draggable bottom sheet
   ================================================================ */

/* Theme icon in the tab bar (rendered on every size, the bar itself is mobile-only) */
[data-bs-theme="dark"] .zx-ic-sun,
[data-bs-theme="light"] .zx-ic-moon{display:none}

@media (max-width:767.98px){
  :root{
    --tabbar-h:68px;
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-t:env(safe-area-inset-top,0px);
  }

  html{scroll-padding-top:76px}
  main{z-index:auto} /* let the bottom sheet stack above the tab bar */
  body{
    padding-bottom:calc(var(--tabbar-h) + 34px + var(--safe-b));
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing:antialiased;
  }
  a,button,label{-webkit-tap-highlight-color:transparent}
  .zx-tabbar,.zx-fab,.zx-tab,.zx-chip,.qr-type{-webkit-user-select:none;user-select:none}

  /* ---------- app bar ---------- */
  .zx-appbar{padding:calc(10px + var(--safe-t)) 0 10px}
  .zx-appbar .container{flex-wrap:nowrap}
  .zx-appbar .navbar-brand{margin:0;font-size:.9rem}
  .zx-appbar .navbar-brand .fs-6{font-size:.82rem!important;letter-spacing:.28em}
  .zx-appbar .zx-domain-chip{padding:5px 11px;font-size:10.5px}

  /* ---------- page rhythm ---------- */
  .container{padding-inline:14px}
  .zx-hero{padding-top:22px;padding-bottom:18px}
  .zx-hero h1{font-size:1.72rem;margin:10px 0 8px}
  .zx-hero p{font-size:.9rem;line-height:1.85}
  .zx-hero-pills{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
    margin-inline:-14px;padding-inline:14px;margin-top:14px;
  }
  .zx-hero-pills::-webkit-scrollbar{display:none}
  .zx-hero-pills span{flex:none;white-space:nowrap;scroll-snap-align:start}

  .card{border-radius:24px}
  .card:hover{transform:none}
  #qrForm>.col-lg-7>.card>.card-body{padding:20px 16px!important}
  .zx-step{margin-bottom:14px}
  .zx-step h2{font-size:1.08rem}
  .zx-step-num{width:28px;height:28px}
  .zx-divider{margin:28px 0}

  /* 16px inputs stop iOS from zooming on focus */
  .form-control,.form-select,.zx-color input[type=text]{font-size:16px}
  .form-control,.form-select{height:52px;border-radius:14px}
  textarea.form-control{min-height:110px}

  .qr-types{gap:8px}
  .qr-type{padding:14px 4px;border-radius:16px;font-size:12.5px}
  .qr-type:active{transform:scale(.96)}
  .zx-chip{padding:9px 14px}
  .zx-chip:active{transform:scale(.96)}
  .zx-choice-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
  .zx-choice-row::-webkit-scrollbar{display:none}
  .zx-choice-row>*{flex:none}
  .zx-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
  .zx-presets::-webkit-scrollbar{display:none}
  .zx-preset{flex:none;width:40px;height:40px}
  .zx-preset::after{inset:11px}
  .btn{min-height:46px}
  .form-range{height:1.6rem}

  /* docs */
  .zx-doc-section{padding-top:36px}
  .zx-endpoint{padding:10px 12px;gap:10px;flex-wrap:nowrap}
  .zx-endpoint code{font-size:12px;word-break:normal;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .zx-endpoint .btn{min-height:34px;padding:6px 14px}
  .nav-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:18px}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tabs .nav-link{white-space:nowrap}

  /* footer */
  .zx-footer{margin-top:44px;text-align:center;padding-bottom:18px}
  .zx-footer-bottom{flex-direction:column;justify-content:center}

  .zx-toasts{
    bottom:calc(var(--tabbar-h) + 30px + var(--safe-b))!important;
    left:0;right:0;display:flex;justify-content:center;z-index:1070;
  }

  /* ============================================================
     BOTTOM TAB BAR
     ============================================================ */
  .zx-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:1050;
    padding:0 12px calc(10px + var(--safe-b));
    pointer-events:none;
  }
  .zx-tabbar::before{ /* fade the content that scrolls under the bar */
    content:'';position:absolute;inset:auto 0 0 0;height:calc(var(--tabbar-h) + 40px + var(--safe-b));
    background:linear-gradient(to top,var(--bg-canvas) 35%,transparent);pointer-events:none;opacity:.85;
  }
  .zx-tabbar-inner{
    pointer-events:auto;position:relative;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    height:var(--tabbar-h);padding:0 4px;border-radius:26px;
    background:color-mix(in srgb,var(--bg-raised) 74%,transparent);
    -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
    border:1px solid var(--border-default);
    box-shadow:0 22px 44px -14px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
  }
  [data-bs-theme="light"] .zx-tabbar-inner{
    background:color-mix(in srgb,#fff 80%,transparent);
    box-shadow:0 18px 40px -16px rgba(11,46,59,.35),0 2px 8px rgba(11,20,20,.06),inset 0 1px 0 #fff;
  }
  .zx-tabbar-inner::after{ /* brand hairline along the top edge */
    content:'';position:absolute;top:-1px;inset-inline:28px;height:1px;background:var(--grad-hairline);
  }

  .zx-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    height:100%;padding:0;border:0;background:none;cursor:pointer;
    color:var(--fg-muted);text-decoration:none;font-family:var(--zx-font-fa);
    font-size:10.5px;font-weight:500;line-height:1;
    transition:color var(--zx-d-base) var(--zx-ease);
  }
  .zx-tab-ic{
    position:relative;display:grid;place-items:center;width:54px;height:30px;border-radius:999px;
    transition:transform var(--zx-d-fast) var(--zx-ease);
  }
  .zx-tab-ic::before{ /* Material-style active indicator that grows from the centre */
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent);
    transform:scaleX(.35);opacity:0;
    transition:transform var(--zx-d-slow) var(--zx-ease-out),opacity var(--zx-d-base) var(--zx-ease);
  }
  .zx-tab-ic .ic{position:relative;width:22px;height:22px;stroke-width:1.7}
  .zx-tab:active .zx-tab-ic{transform:scale(.86)}
  .zx-tab.active{color:var(--fg-brand)}
  .zx-tab.active .zx-tab-lbl{font-weight:700}
  .zx-tab.active .zx-tab-ic::before{transform:none;opacity:1}
  .zx-tab.active .zx-tab-ic .ic{animation:zx-pop .45s var(--zx-ease-out);stroke-width:2}
  @keyframes zx-pop{0%{transform:scale(.7)}55%{transform:scale(1.14)}100%{transform:scale(1)}}

  /* Centre action button — sits in a "notch" above the bar */
  .zx-fab{
    justify-self:center;position:relative;margin-top:-34px;
    width:62px;height:62px;border-radius:50%;padding:0;border:0;cursor:pointer;
    display:grid;place-items:center;color:#fff;text-decoration:none;
    background:var(--grad-brand);background-size:170% 170%;background-position:20% 50%;
    box-shadow:0 0 0 6px var(--bg-canvas),0 16px 30px -8px rgba(43,163,154,.8),inset 0 1px 0 rgba(255,255,255,.3);
    transition:transform var(--zx-d-fast) var(--zx-ease),background-position var(--zx-d-slow) var(--zx-ease);
  }
  .zx-fab:active{transform:scale(.9)}
  .zx-fab:hover{background-position:85% 50%}
  .zx-fab-inner{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
  .zx-fab .ic{width:28px;height:28px;stroke-width:1.9}
  .zx-fab #fabImg{width:40px;height:40px;border-radius:9px;background:#fff;padding:3px;object-fit:contain;
    box-shadow:0 2px 6px rgba(0,0,0,.25);animation:zx-pop .45s var(--zx-ease-out)}
  .zx-fab.has-img .zx-fab-icon{display:none}
  .zx-fab.is-ready::before{ /* breathing ring once a code is ready */
    content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);
    animation:zx-ring 2.4s var(--zx-ease-out) infinite;pointer-events:none;
  }
  @keyframes zx-ring{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.45);opacity:0}}
  .zx-fab-dot{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
    background:var(--zx-aurum-400);box-shadow:0 0 0 2.5px var(--bg-canvas)}
  .zx-fab-dot[hidden]{display:none}

  /* ============================================================
     PREVIEW BOTTOM SHEET
     ============================================================ */
  .zx-sheet-col{
    position:fixed;left:0;right:0;bottom:0;z-index:1065;
    width:100%;max-width:none;margin:0!important;padding:0!important;
    transform:translateY(calc(100% + 24px));
    transition:transform .46s var(--zx-ease-out);will-change:transform;
  }
  .zx-sheet-col.is-dragging{transition:none}
  body.sheet-open .zx-sheet-col{transform:translateY(var(--drag,0px))}
  .zx-sheet-col .card{
    border-radius:28px 28px 0 0;border-bottom:0;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
    background-color:var(--bg-raised);padding-bottom:var(--safe-b);
    box-shadow:0 -24px 60px -12px rgba(0,0,0,.55);
  }
  .zx-sheet-col .card-body{padding:4px 18px 24px!important}
  .zx-sheet-grab{position:sticky;top:0;z-index:3;display:flex;justify-content:center;padding:12px 0 8px;
    background:var(--bg-raised);touch-action:none;cursor:grab}
  .zx-sheet-grab span{width:44px;height:5px;border-radius:3px;background:var(--border-strong)}
  .zx-sheet-close{width:36px;height:36px}
  .zx-preview{max-width:290px;margin-inline:auto;padding:14px;border-radius:22px}

  .zx-sheet-backdrop{
    display:block;position:fixed;inset:0;z-index:1060;
    background:var(--bg-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;transition:opacity .35s var(--zx-ease);
  }
  body.sheet-open .zx-sheet-backdrop{opacity:1;pointer-events:auto}
  body.sheet-open{overflow:hidden}
}

/* Installed to the home screen: drop browser-ish chrome */
@media (display-mode:standalone) and (max-width:767.98px){
  .zx-appbar .zx-domain-chip{display:none!important}
}