/* JLJAM OS 7.15.3 | iPad bottom dock and independently scrolling Tools drawer.
   Signed-in manager workspace only. No API, booking or message modifications. */
body.clarity7140 #app #clarityToolsDialog:not([hidden]){
  position:fixed!important;inset:0!important;z-index:50000!important;
  overflow:hidden!important;overscroll-behavior:contain!important;touch-action:auto!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer{
  position:absolute!important;inset:0 0 0 auto!important;
  width:min(100%,560px)!important;height:100%!important;height:100dvh!important;
  max-height:100dvh!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  box-sizing:border-box!important;overflow:hidden!important;
  padding:0!important;touch-action:auto!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-head{
  box-sizing:border-box!important;display:flex!important;flex:0 0 auto!important;
  align-items:center!important;gap:12px!important;
  padding:calc(16px + env(safe-area-inset-top)) 22px 12px!important;
  border-bottom:1px solid rgba(211,177,255,.20)!important;
  background:linear-gradient(130deg,rgba(83,50,130,.26),rgba(20,11,37,.18))!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-head>div{min-width:0!important;flex:1 1 auto!important}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-head .cl-eyebrow{
 font:850 clamp(12px,calc(var(--jljam-readable-min,26px) - 11px),17px)/1.25 system-ui!important;
 letter-spacing:.09em!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-head h2{
 font:850 clamp(24px,calc(var(--jljam-readable-min,26px) + 3px),35px)/1.07 system-ui!important;
 letter-spacing:-.035em!important;margin:7px 0 5px!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-head p{
 font:480 clamp(14px,calc(var(--jljam-readable-min,26px) - 10px),19px)/1.35 system-ui!important;
 margin:0!important;max-width:450px!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-close{
 flex:0 0 52px!important;width:52px!important;height:52px!important;min-height:52px!important;
 align-self:flex-start!important;font:500 30px/1 system-ui!important;
}
/* This is the only scroll surface inside the drawer, with iOS momentum scrolling.
   The fixed header is never part of the swipe region. */
body.clarity7140 #app #clarityToolsDialog .cl-drawer-scroll{
 flex:1 1 auto!important;min-height:0!important;max-height:none!important;
 width:100%!important;box-sizing:border-box!important;
 display:block!important;overflow-x:hidden!important;overflow-y:auto!important;
 -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
 overscroll-behavior-y:contain!important;
 padding:6px 22px calc(36px + env(safe-area-inset-bottom))!important;
 scrollbar-width:thin;scrollbar-color:#bc85f270 transparent;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-scroll:focus-visible{
 outline:2px solid #ddbbff!important;outline-offset:-4px!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-section{
 font:850 clamp(14px,calc(var(--jljam-readable-min,26px) - 11px),18px)/1.2 system-ui!important;
 letter-spacing:.09em!important;margin:18px 0 10px!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-feature b,
body.clarity7140 #app #clarityToolsDialog .cl-drawer-grid strong{
 font:800 clamp(19px,calc(var(--jljam-readable-min,26px) - 5px),27px)/1.17 system-ui!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-feature small,
body.clarity7140 #app #clarityToolsDialog .cl-drawer-grid small{
 font:500 clamp(14px,calc(var(--jljam-readable-min,26px) - 10px),19px)/1.24 system-ui!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-grid button{
 min-height:115px!important;overflow-wrap:normal!important;word-break:normal!important;
}
body.clarity7140 #app #clarityToolsDialog .cl-drawer-foot button{
 font:750 clamp(16px,calc(var(--jljam-readable-min,26px) - 8px),22px)/1.18 system-ui!important;
 min-height:54px!important;
}
@media(max-width:760px){
 body.clarity7140 #app #clarityToolsDialog .cl-drawer{width:100%!important}
 body.clarity7140 #app #clarityToolsDialog .cl-drawer-head{padding-inline:17px!important}
 body.clarity7140 #app #clarityToolsDialog .cl-drawer-scroll{padding-inline:17px!important}
 body.clarity7140 #app #clarityToolsDialog .cl-drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* iPads favour the five-item dock over desktop/sidebar or crowded horizontal tabs.
   Wide touch tablets also use this design, even at landscape resolutions. */
@media (min-width:761px) and (max-width:1379px), (min-width:761px) and (hover:none) and (pointer:coarse){
 body.clarity7140.studio7150 #app .studio-rail:not([hidden]),
 body.clarity7140.studio7150 #app #clarityWorkspaceBar:not([hidden]){display:none!important}
 body.clarity7140.studio7150 #app .shell{
  width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;
  margin-inline:auto!important;
  padding-bottom:calc(132px + env(safe-area-inset-bottom))!important;
 }
 body.clarity7140.studio7150 #app .jljam-easy{
  padding-bottom:calc(132px + env(safe-area-inset-bottom))!important;
 }
 body.clarity7140.studio7150 #app .mobile-dock,
 body.clarity7140.studio7150[data-display-mode="browser"] #app .mobile-dock,
 body.clarity7140.studio7150[data-display-mode="standalone"] #app .mobile-dock{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  position:fixed!important;z-index:1200!important;
  left:max(12px,env(safe-area-inset-left))!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:calc(9px + env(safe-area-inset-bottom))!important;
  width:auto!important;max-width:900px!important;margin-inline:auto!important;
  padding:8px!important;gap:7px!important;
  box-sizing:border-box!important;min-height:94px!important;
  border:1px solid #d2aafa99!important;border-radius:26px!important;
  background:linear-gradient(135deg,rgba(43,24,70,.97),rgba(16,11,34,.98))!important;
  backdrop-filter:blur(25px);box-shadow:0 13px 36px #05030ad0,inset 0 1px #ffffff3a!important;
 }
 body.clarity7140.studio7150 #app .mobile-dock button,
 body.clarity7140.studio7150[data-display-mode] #app .mobile-dock button{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  min-height:76px!important;height:76px!important;min-width:0!important;
  padding:7px 2px!important;gap:4px!important;overflow:hidden!important;
  border-radius:18px!important;white-space:nowrap!important;word-break:normal!important;
  font:800 clamp(16px,calc(var(--jljam-readable-min,26px) - 8px),21px)/1.12 system-ui!important;
  touch-action:manipulation!important;
 }
 body.clarity7140.studio7150 #app .mobile-dock button span,
 body.clarity7140.studio7150[data-display-mode] #app .mobile-dock button span{
  font:600 30px/1 system-ui!important;display:block!important;
  min-width:0!important;height:auto!important;margin:0!important;
 }
 body.clarity7140.studio7150 #app .mobile-dock button:focus-visible{
  outline:3px solid #f1d7ff!important;outline-offset:2px!important;
 }
 /* The back/forward floating rail must not overlay the tablet dock. */
 body.clarity7140.studio7150 > #jljamNavRail:not(.jljam-nav-native){display:none!important}
}
@media (min-width:761px) and (max-width:880px){
 body.clarity7140.studio7150 #app .mobile-dock{gap:4px!important;padding:7px!important}
 body.clarity7140.studio7150 #app .mobile-dock button{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){body.clarity7140 #app #clarityToolsDialog .cl-drawer-scroll{scroll-behavior:auto!important}}
/* Keep the same large-tap dock philosophy on iPhone without forcing 26px words into five buttons. */
@media (max-width:760px){
 body.clarity7140.studio7150 #app .mobile-dock button,
 body.clarity7140.studio7150[data-display-mode] #app .mobile-dock button{
  min-height:70px!important;height:70px!important;
  font:800 clamp(12px,3.35vw,15px)/1.12 system-ui!important;
  padding:5px 1px!important;gap:3px!important;white-space:nowrap!important;
 }
 body.clarity7140.studio7150 #app .mobile-dock button span,
 body.clarity7140.studio7150[data-display-mode] #app .mobile-dock button span{
  font:550 27px/1 system-ui!important;height:auto!important;min-width:0!important;
  margin:0!important;
 }
}
