/* v12 • Responsive layout, accessible back navigation, OS safe areas. */
:root{--ma-bottom-safe:env(safe-area-inset-bottom,0px);--ma-top-safe:env(safe-area-inset-top,0px)}
html{min-width:0;width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;width:100%;overflow-x:clip}
.app-shell{min-height:100vh;min-height:100dvh;min-width:0}
.app-main-wrap,.content-row,#main-content{min-width:0}
img,svg,video,canvas{max-width:100%}
#main-content{overflow-wrap:anywhere}
#main-content input,#main-content textarea,#main-content select{max-width:100%}
#main-content .v3-card,#main-content .v10-panel,#main-content .v10-record{min-width:0}
/* Visible on detail pages on both desktop and mobile. */
.v12-back{display:flex;gap:7px;align-items:center;justify-content:center;flex-shrink:0;min-height:42px;padding:0 12px;border:1px solid #d9e7de;border-radius:12px;background:#f6faf7;color:#1d5a40;font-size:13px;font-weight:750}
.v12-back[hidden]{display:none!important}
.v12-back svg{width:17px;height:17px}
.v12-back:focus-visible{outline:3px solid #0075aa;outline-offset:2px}
.topbar .v12-back{margin-right:12px}
/* Nested dialogs always scroll, rather than being cut off by small viewports. */
.modal-panel{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.modal-body{overflow-wrap:anywhere}
@media(max-width:760px){
 .app-main-wrap{min-width:0;width:100%}
 .content-row{min-height:calc(100dvh - 62px);grid-template-columns:minmax(0,1fr)}
 .topbar{min-height:60px;height:60px;padding:0 14px;gap:7px;box-sizing:border-box}
 .topbar-actions{margin-left:auto;display:flex;align-items:center;gap:5px;min-width:0}
 .topbar .v12-back{min-width:42px;height:42px;padding:0 8px;margin-right:1px}
 .topbar .v12-back .v12-back-label{display:none}
 .topbar .mobile-brand{min-width:0}
 .mobile-bottom-nav{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;
  display:flex!important;align-items:center;justify-content:space-around;
  width:100%;height:calc(70px + var(--ma-bottom-safe))!important;
  min-height:70px;box-sizing:border-box;
  padding:5px max(8px,env(safe-area-inset-right,0px)) calc(7px + var(--ma-bottom-safe)) max(8px,env(safe-area-inset-left,0px))!important;
  z-index:30;overflow:visible;background:#fff;border-top:1px solid #e2e9e4;
 }
 .mobile-bottom-nav button{flex:1 1 0;min-width:0;min-height:46px;padding:3px 2px;touch-action:manipulation;gap:3px}
 .mobile-bottom-nav button small{display:block;max-width:100%;font-size:10px;line-height:1.2;white-space:nowrap}
 .mobile-bottom-nav button .svg-icon,.mobile-bottom-nav button svg{width:21px;height:21px;flex-shrink:0}
 .mobile-bottom-nav .mobile-create{height:50px;min-height:50px;width:50px;max-width:54px;flex:0 0 50px;margin-top:-14px;position:relative;z-index:1}
 .main-content{padding-bottom:calc(112px + var(--ma-bottom-safe))!important;min-width:0;width:100%;max-width:100%;}
 .v8-services,.v10-panel,.v3-card,.v8-service-card{min-width:0;max-width:100%}
 .v8-services-grid,.v8-actions,.v3-grid,.post-grid,.v10-metrics{min-width:0}
 .v7-chat-log{height:clamp(240px,43dvh,480px);min-height:240px}
 .modal-backdrop{padding:0;align-items:flex-end}
 .modal-panel{max-height:calc(100dvh - 12px - var(--ma-top-safe));border-radius:22px 22px 0 0;padding-bottom:var(--ma-bottom-safe)}
 .toast-root{bottom:calc(86px + var(--ma-bottom-safe));z-index:60}
 .auth-scene,.auth-form-area{min-width:0}
 .auth-form-area{padding-bottom:calc(35px + var(--ma-bottom-safe))}
}
@media(max-width:360px){.mobile-bottom-nav button small{font-size:9px}.topbar-actions .icon-button{width:34px;min-width:34px}.mobile-bottom-nav{padding-left:4px!important;padding-right:4px!important}}
@media(min-width:761px){.mobile-bottom-nav{display:none!important}}
@media(prefers-reduced-motion:reduce){.mobile-bottom-nav,.v12-back{transition:none!important}}