/* STITCHO mobile navigation rails — fixed against document scroll, no jumping on route changes. */
@media(max-width:820px){
 html{scroll-padding-top:72px;scroll-padding-bottom:92px}
 body{overflow-x:clip}
 #stitchoMobileTop{
  display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  width:100%!important;height:62px!important;min-height:62px!important;max-height:62px!important;
  margin:0!important;padding:7px 12px!important;box-sizing:border-box!important;
  justify-items:center!important;align-items:center!important;
  background:#111110f5!important;border-bottom:1px solid #49372b!important;
  z-index:920!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transform:translateZ(0)!important;-webkit-transform:translateZ(0)!important;
  backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;
  animation:none!important;transition:none!important;contain:layout style;
 }
 #stitchoMobileTop #stitchoOpenMenu{grid-column:1!important;grid-row:1!important;justify-self:start!important}
 #stitchoMobileTop button.stitcho-header-logo{
  grid-column:2!important;grid-row:1!important;justify-self:center!important;align-self:center!important;
  width:min(160px,calc(100vw - 155px))!important;min-width:0!important;height:47px!important;
  max-width:100%!important;flex:none!important;transform:none!important;
  background:transparent!important;box-shadow:none!important;
 }
 #stitchoMobileTop .stitcho-header-logo img{max-width:100%!important;width:145px!important;height:43px!important;object-fit:contain!important;transform:none!important}
 #stitchoMobileTop .stitcho-header-logo::after{animation:none!important;opacity:.35!important}
 #stitchoMobileTop #stitchoNoticeBell{
  grid-column:3!important;grid-row:1!important;justify-self:end!important;
  position:relative!important;width:43px!important;height:43px!important;
  min-width:43px!important;max-width:43px!important;
  background:transparent!important;border:1px solid #ff7900!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;transform:none!important;
 }
 #stitchoMobileTop #stitchoNoticeBell svg{width:23px!important;height:23px!important}
 #stitchoMobileTop #stitchoNoticeCount{
  position:absolute!important;top:-5px!important;right:-5px!important;
  font:700 10px Inter,Arial,sans-serif!important;min-width:17px!important;height:17px!important;
  padding:2px!important;border-radius:999px!important;background:#ff7900!important;color:#fff!important;
  display:grid!important;place-items:center!important;
 }
 #stitchoMobileTop #stitchoNoticeCount[hidden]{display:none!important}
 #stitchoMobileTop>span{display:none!important}
 .app main{padding-top:77px!important;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important}
 body.stitcho-messages-page main{padding-top:62px!important;padding-bottom:0!important}
 body.stitcho-messages-page #panel>.wa-shell{
   bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;
   height:calc(100dvh - 130px - env(safe-area-inset-bottom,0px))!important;
 }
 #stitchoDock{
  position:fixed!important;bottom:0!important;left:0!important;right:0!important;
  width:100%!important;height:calc(68px + env(safe-area-inset-bottom,0px))!important;
  padding:7px max(12px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px))!important;
  background:#191715f7!important;border-top:1px solid #544536!important;box-shadow:0 -14px 36px #0007!important;
  z-index:905!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;
  align-items:center!important;justify-items:stretch!important;backdrop-filter:none!important;
  transform:translateZ(0)!important;animation:none!important;transition:none!important;
 }
 #stitchoDock[hidden]{display:none!important}
 #stitchoDock button{
   position:relative!important;width:100%!important;height:48px!important;min-height:48px!important;
   display:grid!important;place-items:center!important;padding:0!important;margin:0!important;
   border:1px solid #41382f!important;border-radius:13px!important;background:#27231e!important;
   color:#ccc6bf!important;box-shadow:none!important;transform:none!important;
 }
 #stitchoDock button[aria-current="page"]{color:#ff8a28!important;background:#34271c!important;border-color:#ff7900!important}
 #stitchoDock button:focus-visible{outline:2px solid #ffa45f!important;outline-offset:2px!important}
 #stitchoDock button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
 #stitchoDock .st-dock-dot{position:absolute!important;bottom:3px!important;left:calc(50% - 2px)!important;width:4px!important;height:4px!important;border-radius:50%!important;background:#ff7900!important}
 #stitchoDockSettings{margin:18px 0!important;padding:16px!important;border:1px solid #604a39!important;border-radius:15px!important;background:#22201e!important}
 #stitchoDockSettings .st-dock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #stitchoDockSettings .st-dock-slot label{display:block;margin:0 0 6px;font-size:12px;color:#d5cec6}
 #stitchoDockSettings select{width:100%;max-width:100%;padding:11px 6px;border:1px solid #675344;background:#191816;color:#fff;border-radius:10px;font-size:12px}
 #stitchoDockSettings .st-dock-settings-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
 #stitchoDockSettings .st-dock-settings-actions button{width:auto!important;min-height:40px!important;border-radius:10px!important;padding:9px 14px!important}
 #stitchoDockSettings .st-dock-settings-actions button.st-dock-secondary{background:#37302a!important;color:#f0e7dc!important;border:1px solid #615344!important}
}
@media(min-width:821px){#stitchoDock{display:none!important}}
@media(prefers-reduced-motion:reduce){#stitchoDock,#stitchoMobileTop{scroll-behavior:auto!important}}

/* Keep Marketing Intelligence's refresh label wholly inside its orange capsule.
   Stack heading and button on small viewports rather than shrinking text into clipping. */
@media(max-width:820px){
 #panel .mi-title{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-start!important;gap:9px!important;min-width:0!important;width:100%!important;
  max-width:100%!important;box-sizing:border-box!important;margin:0 0 12px!important;
 }
 #panel .mi-title>div{width:100%!important;min-width:0!important;max-width:100%!important}
 #panel .mi-title h2{max-width:100%!important;overflow-wrap:normal!important}
 #panel .mi-title #miRefresh{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  align-self:flex-end!important;flex:0 0 auto!important;white-space:nowrap!important;
  text-align:center!important;width:auto!important;min-width:122px!important;
  max-width:calc(100% - 4px)!important;box-sizing:border-box!important;
  min-height:42px!important;padding:10px 16px!important;margin:0!important;
  border-radius:13px!important;line-height:1.25!important;letter-spacing:0!important;
  font-size:12px!important;font-weight:750!important;overflow:visible!important;
 }
}

/* Mobile breathing room: the fixed shortcut dock must never crowd or cover
   the last card/control. Exclude the full-screen WhatsApp conversation view,
   which manages its own independent composer viewport. */
@media(max-width:820px){
 html{scroll-padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))!important}
 body:not(.stitcho-messages-page) .app main{
  padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))!important;
 }
 body.stitcho-broadcast-page .app main{
  padding-bottom:calc(144px + env(safe-area-inset-bottom,0px))!important;
 }
 /* The review page has two primary actions, aligned without wrapping. */
 #panel .power-row.wa-review-actions{
  display:grid!important;
  grid-template-columns:minmax(92px,0.60fr) minmax(0,1.4fr)!important;
  gap:12px!important;
  align-items:stretch!important;
  width:100%!important;
  margin:16px 0 8px!important;
 }
 #panel .power-row.wa-review-actions #broadcastPrev{
  grid-column:1!important;width:100%!important;min-width:0!important;
  margin:0!important;min-height:48px!important;
  white-space:nowrap!important;border-radius:13px!important;
 }
 #panel .power-row.wa-review-actions #bSave{
  grid-column:2!important;width:100%!important;min-width:0!important;
  max-width:100%!important;margin:0!important;padding:12px 10px!important;
  min-height:48px!important;border-radius:13px!important;
  font-size:clamp(12px,3.5vw,15px)!important;
  white-space:nowrap!important;
 }
 #panel .power-row.wa-review-actions #broadcastNext{display:none!important}
 /* Extra separation from the floating footer on Step 6. */
 body.stitcho-broadcast-page #panel .wa-simple-review{
  margin-top:16px!important;margin-bottom:32px!important;
 }
 body.stitcho-broadcast-page #panel .wa-simple-review .wa-control-actions{
  margin-bottom:22px!important;
 }
}