/*
 * NoblePDF V5.6.0.2 — Responsive Workspace
 * Built on V5.5.2.3 production-safe fidelity renderer.
 * This layer intentionally does NOT replace the existing V5.4 touch/pen/pinch engine.
 * It reorganises the existing NoblePDF controls using the measured responsive model:
 *   Wide >= 1024px | Compact 640-1023px | Phone < 640px
 */
:root{
  --np-safe-top:env(safe-area-inset-top,0px);
  --np-safe-right:env(safe-area-inset-right,0px);
  --np-safe-bottom:env(safe-area-inset-bottom,0px);
  --np-safe-left:env(safe-area-inset-left,0px);
  --np-dock-height:64px;
  --np-accent:#5f57e8;
  --np-border:#dfe3ea;
}
html,body,#app{min-width:0}
body.np-compact,body.np-phone{overscroll-behavior:none}
#np-mobile-dock{display:none}

/* 1024px is the measured major wide -> compact transition. */
@media(max-width:1023px){
  .topbar{height:64px;min-height:64px;padding:7px max(10px,var(--np-safe-right)) 7px max(10px,var(--np-safe-left));gap:10px;flex-wrap:nowrap}
  .document-name{max-width:min(28vw,230px)}
  .local-badge{display:none!important}
  .version-pill{display:none!important}
  .topbar-right{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:1px}
  .topbar-right::-webkit-scrollbar{display:none}
  .topbar .btn{min-height:44px;height:44px;flex:0 0 auto}

  .commandbar{height:54px;min-height:54px;padding:5px max(7px,var(--np-safe-left));gap:5px;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:none}
  .commandbar::-webkit-scrollbar{display:none}
  .commandbar button,.command-file{min-width:44px;height:44px;flex:0 0 auto}
  .context-toolbar{min-width:max-content;max-width:none;flex:0 0 auto;overflow:visible!important}
  .context-toolbar-group{flex:0 0 auto}
  .zoom-group{margin-left:0}
  .context-zoom-separator{display:block}
  #pagesToggleBtn,#propertiesToggleBtn{display:flex!important}

  /* Compact mode gives the document almost the whole width. */
  .editor-layout{height:calc(100dvh - 118px);grid-template-columns:70px minmax(0,1fr)!important}
  .pages-panel,.properties-panel{display:none!important}
  .stage{min-width:0;padding:14px 14px calc(var(--np-dock-height) + 30px + var(--np-safe-bottom));justify-content:flex-start!important}
  .page-viewport{margin-left:auto!important;margin-right:auto!important}
  .editor-statusbar{display:none!important}

  /* Reuse the editor's existing native tablet panel classes/functions. */
  .pages-panel.tablet-open,.properties-panel.tablet-open{display:block!important;position:fixed!important;z-index:220!important;background:#fff!important;overflow:hidden!important;box-shadow:0 24px 70px rgba(17,24,39,.24)!important;border:1px solid var(--np-border)!important}
  .pages-panel.tablet-open{top:76px!important;left:max(10px,var(--np-safe-left))!important;bottom:calc(var(--np-dock-height) + 18px + var(--np-safe-bottom))!important;width:min(340px,calc(100vw - 20px))!important;border-radius:18px!important}
  .pages-panel.tablet-open .thumb-list{height:calc(100% - 52px)!important}
  .properties-panel.tablet-open{top:76px!important;right:max(10px,var(--np-safe-right))!important;bottom:calc(var(--np-dock-height) + 18px + var(--np-safe-bottom))!important;left:auto!important;width:min(370px,calc(100vw - 20px))!important;max-height:none!important;border-radius:18px!important}
  .properties-panel.tablet-open .properties-body{height:calc(100% - 52px)!important;max-height:none!important}
  .pages-panel.tablet-open .tablet-panel-close,.properties-panel.tablet-open .tablet-panel-close{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px!important;min-height:44px!important}
  .tablet-panel-scrim{z-index:210!important}

  #np-mobile-dock{position:fixed;display:flex;z-index:205;left:max(8px,var(--np-safe-left));right:max(8px,var(--np-safe-right));bottom:max(8px,var(--np-safe-bottom));height:var(--np-dock-height);align-items:center;justify-content:center;gap:5px;padding:7px;border:1px solid rgba(27,35,55,.11);border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 14px 42px rgba(17,24,39,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  #np-mobile-dock button{height:48px;min-width:48px;border:0;border-radius:11px;background:transparent;color:#39445a;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;font:700 11px/1 Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;white-space:nowrap}
  #np-mobile-dock button:hover,#np-mobile-dock button:focus-visible{background:#f1f0ff;color:#5048d8;outline:none}
  #np-mobile-dock .np-icon{font-size:18px;line-height:1}
  #np-mobile-dock .np-export{margin-left:auto;min-width:104px;background:linear-gradient(135deg,#6a57f4,#4f5df4);color:#fff;box-shadow:0 7px 18px rgba(80,73,223,.18)}
  #np-mobile-dock .np-export:hover{background:linear-gradient(135deg,#6350ed,#4654e9);color:#fff}
  body.keyboard-open #np-mobile-dock{display:none!important}
  body.keyboard-open .stage{padding-bottom:18px}
}

/* 640px is the measured compact -> phone transition. */
@media(max-width:639px){
  :root{--np-dock-height:62px}
  .topbar{height:58px;min-height:58px;padding:6px max(8px,var(--np-safe-right)) 6px max(8px,var(--np-safe-left));gap:7px}
  .logo{flex:0 0 auto}.logo b{display:none!important}.logo span{width:40px;height:40px;border-radius:11px}
  .document-name{display:none!important}
  .topbar-right{gap:5px}
  .topbar-right #saveProjectBtn,.topbar-right label:has(#openProjectInput),.topbar-right #exportBtn{display:none!important}
  .topbar-right .btn{font-size:11px!important;min-width:44px;padding:0 10px}

  .commandbar{height:56px;min-height:56px;padding-inline:max(5px,var(--np-safe-left));gap:3px}
  .commandbar>.separator{display:none}
  .context-toolbar{order:1}
  .zoom-group{order:2}
  .tablet-panel-actions{order:3}
  .context-default-tools #quickImageBtn,.context-default-tools #quickDrawBtn,.context-default-tools #quickSignBtn{display:flex!important}
  .context-default-tools button{min-width:48px!important;padding-inline:10px!important}
  .context-font{min-width:132px!important;max-width:150px!important}
  .context-toolbar button{min-height:44px}
  #pagesToggleBtn{display:none!important} /* quick Pages already exists in the phone tool strip */
  #propertiesToggleBtn{display:flex!important}

  .editor-layout{height:calc(100dvh - 114px);grid-template-columns:minmax(0,1fr)!important}
  .tool-rail{display:none!important}
  .stage{padding:8px 6px calc(var(--np-dock-height) + 24px + var(--np-safe-bottom))!important;width:100%;min-width:0}
  .page-viewport{max-width:none!important}
  .welcome-card{max-width:calc(100vw - 22px);padding:28px 18px;margin:26px auto!important;border-radius:16px}
  .welcome-card h1{font-size:25px}.welcome-card p{font-size:11.5px}

  .pages-panel.tablet-open,.properties-panel.tablet-open{top:auto!important;left:max(7px,var(--np-safe-left))!important;right:max(7px,var(--np-safe-right))!important;bottom:calc(var(--np-dock-height) + 14px + var(--np-safe-bottom))!important;width:auto!important;max-height:min(72dvh,650px)!important;border-radius:20px 20px 14px 14px!important}
  .pages-panel.tablet-open .thumb-list,.properties-panel.tablet-open .properties-body{height:auto!important;max-height:calc(min(72dvh,650px) - 52px)!important}

  #np-mobile-dock{left:max(6px,var(--np-safe-left));right:max(6px,var(--np-safe-right));bottom:max(6px,var(--np-safe-bottom));padding:6px;gap:2px;border-radius:15px}
  #np-mobile-dock button{min-width:44px;height:48px;padding:0 8px;font-size:10px;gap:4px}
  #np-mobile-dock button .np-label{display:none}
  #np-mobile-dock .np-export{min-width:84px;margin-left:2px}
  #np-mobile-dock .np-export .np-label{display:inline}

  .editor-more-menu{position:fixed!important;z-index:230!important;top:auto!important;left:max(7px,var(--np-safe-left))!important;right:max(7px,var(--np-safe-right))!important;bottom:calc(var(--np-dock-height) + 14px + var(--np-safe-bottom))!important;width:auto!important;max-height:68dvh!important;overflow:auto!important;grid-template-columns:1fr!important;border-radius:18px 18px 13px 13px!important}
  .modal-backdrop{padding:max(8px,var(--np-safe-top)) max(8px,var(--np-safe-right)) calc(8px + var(--np-safe-bottom)) max(8px,var(--np-safe-left))!important}
  .modal{max-height:calc(100dvh - 16px)!important}
}

@media(orientation:landscape) and (max-height:600px) and (max-width:1023px){
  :root{--np-dock-height:54px}
  .topbar{height:52px;min-height:52px}.commandbar{height:50px;min-height:50px}
  .editor-layout{height:calc(100dvh - 102px)}
  #np-mobile-dock{height:54px}
  #np-mobile-dock button{height:42px}
  .stage{padding-bottom:calc(var(--np-dock-height) + 20px + var(--np-safe-bottom))!important}
}

@media(prefers-reduced-motion:reduce){
  #np-mobile-dock,.pages-panel.tablet-open,.properties-panel.tablet-open{scroll-behavior:auto!important;transition:none!important}
}