/* Additive responsive interface layer. Existing builder rules remain intact. */
#rwResponsiveDock{display:none}
.left button[onclick*="addSection"]{width:100%;border:0;padding:10px;border-radius:8px;background:transparent;color:#aaaeb9;text-align:left;font-size:13px}
.top-actions>*{flex:0 0 auto}
.rwp-shell,.modal-card,.rw-om-card{max-width:calc(100vw - 20px)}
@media (min-width:761px) and (max-width:1180px){
  .app{grid-template-columns:220px minmax(0,1fr) 290px}
  .top{padding:0 10px}.top-actions{gap:5px;overflow-x:auto;flex-wrap:nowrap;max-width:72vw}
  .tool-btn,.publish-btn{padding:8px 10px}.workspace{padding:14px}.inspector-body{padding:12px}
}
@media (max-width:760px),(hover:none) and (pointer:coarse){
  #rwResponsiveDock{position:fixed;display:grid;grid-template-columns:minmax(120px,1.7fr) repeat(3,1fr);left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:10070;padding:6px;border:1px solid #343741;border-radius:14px;background:#0b0d12ee;box-shadow:0 12px 38px #0009}
  #rwResponsiveDock button{min-height:44px;border:0;border-radius:9px;background:transparent;color:#fff;font-weight:800}
  #rwResponsiveDock button:focus-visible{outline:2px solid #8b5cf6}
  body.rw-real-mobile .left,.left{display:flex!important;position:fixed!important;inset:0 auto 0 0!important;z-index:10060!important;width:min(88vw,340px)!important;height:100dvh!important;transform:translateX(-105%)!important;transition:transform .22s ease!important;box-shadow:20px 0 55px #000b!important}
  body.rw-real-mobile .left.rw-v10-open,.left.rw-v10-open{transform:translateX(0)!important}
  .left .brand-head,.left .new-btn,.left .project-bottom,.left #pagesList,.left .group-title,.left button{display:block!important}
  .left>.new-btn{flex:0 0 auto!important;min-height:48px!important;margin:12px!important;text-align:center!important}
  .left-scroll{display:block!important;overflow:auto!important;padding:8px 12px 90px!important}
  .left-scroll button{width:100%!important;margin:2px 0!important;white-space:normal!important;text-align:left!important}
  .top{padding-left:10px!important}.top-actions{padding-right:4px}
  .workspace{padding-bottom:72px!important}
  .inspector{padding-bottom:68px!important}
  .rwp-modal,.modal{padding:6px!important}.rwp-shell{width:100%!important;height:calc(100dvh - 12px)!important;max-height:none!important}
  .rwp-grid,.editor-grid,.rw-order-fields,.rw-stats{grid-template-columns:1fr!important}
  input,select,textarea,button{max-width:100%}
  .top{min-width:0!important;overflow:hidden!important}
  .top-actions{min-width:0!important;width:100%!important;max-width:none!important;overflow-x:auto!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important}
  .top-actions>*{scroll-snap-align:start!important}
  .is-mobile .site-services-slider{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:calc(6px * var(--rw-service-scale,1))!important;overflow:visible!important;padding:0!important}
  .is-mobile .site-service-slide{width:auto!important;min-width:0!important;border-radius:calc(8px * var(--rw-service-scale,1))!important}
  .is-mobile .service-slide-img,.is-mobile .service-slide-placeholder{height:calc(110px * var(--rw-service-scale,1))!important}
  .is-mobile .site-service-slide-body{padding:calc(6px * var(--rw-service-scale,1))!important}
  .is-mobile .site-service-slide-body h3{font-size:calc(12px * var(--rw-service-scale,1))!important;line-height:1.2!important;overflow-wrap:anywhere!important}
  .is-mobile .site-service-slide-body p{font-size:calc(10px * var(--rw-service-scale,1))!important;line-height:1.3!important;overflow-wrap:anywhere!important}
  .rwai-mode.open{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden!important}
  .rwai-side{display:grid!important;grid-template-columns:minmax(150px,.7fr) minmax(210px,1fr)!important;gap:8px!important;padding:8px 10px!important;border-right:0!important;border-bottom:1px solid #273044!important;min-height:0!important}
  .rwai-brand{font-size:16px!important;padding:4px!important}.rwai-sub{font-size:10px!important}
  .rwai-switch{align-self:center!important}.rwai-side-foot{display:none!important}
  .rwai-nav{grid-column:1/-1!important;display:flex!important;gap:6px!important;overflow-x:auto!important;padding-bottom:2px!important;-webkit-overflow-scrolling:touch!important}
  .rwai-nav button{display:block!important;flex:0 0 auto!important;min-height:42px!important;padding:9px 12px!important;white-space:nowrap!important}
  .rwai-main{min-height:0!important;overflow:hidden!important}.rwai-head{min-height:62px!important;padding:8px 10px!important}.rwai-head h2{font-size:17px!important}
  .rwai-content{min-height:0!important;overflow:auto!important;padding:10px!important}.rwai-grid{grid-template-columns:1fr!important;min-height:0!important;gap:12px!important}
  .rwai-card{padding:14px!important}.rwai-messages{min-height:110px!important;max-height:30vh!important}.rwai-textarea{min-height:120px!important}
  .rwai-status{left:10px!important;right:10px!important;bottom:74px!important;max-width:none!important}
}
@media (max-width:420px){
  #rwResponsiveDock{left:4px;right:4px;grid-template-columns:minmax(112px,1.6fr) repeat(3,1fr);font-size:11px}
  #rwResponsiveDock button{padding:4px 3px}
  .top-project{display:none!important}.top-actions{max-width:100vw!important}.tool-btn,.publish-btn{font-size:12px!important;padding:8px 10px!important}
}
#rwV10AuthStatus{min-height:20px;margin:10px 0 0;color:#fbbf24;font:600 13px/1.45 Arial,sans-serif}
#rwV10AuthStatus.rw-auth-error{color:#f87171}
body.rw-auth-checking #codingLoginOverlay{display:flex!important}
body.rw-auth-session #codingLoginOverlay{display:none!important}


/* =====================================================================
   MOBILE RESPONSIVE UX & HEADER/NAVIGATION ISOLATION (<= 768px)
   ===================================================================== */
@media (max-width: 768px) {
  /* Top Bar & Logo Layout */
  header, .top-bar, .header-container, #topBar, .builder-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
    padding: 0 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    background: #121212 !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
  }

  /* Logo branding element */
  .logo, .brand, .brand-logo, #brandLogo {
    flex-shrink: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    margin-right: 8px !important;
  }

  /* Action buttons in header */
  header button, .top-bar button, .header-actions button,
  button[data-action="publish"], button[data-action="ai-builder"],
  .btn-publish, .btn-ai {
    flex-shrink: 0 !important;
    margin-left: 6px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Canvas Typography & Subtext Contrast */
  .hero-heading, .hero h1, .hero h2, [data-section="hero"] h1, [data-section="hero"] h2 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: center !important;
  }

  .hero-subtext, .hero p, [data-section="hero"] p, .subtext, .canvas-subtext {
    color: #E0E0E0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Full-width call-to-action button */
  .hero .btn-primary, [data-section="hero"] .btn-cta, .hero button {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
  }

  /* Bottom Navigation Dock */
  .bottom-nav, .mobile-dock, #bottomNav, .footer-toolbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    width: 100% !important;
    height: 52px !important;
    background: #18191f !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 1000 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .bottom-nav button, .mobile-dock button, #bottomNav button {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #f3f4f6 !important;
    font-size: 10px !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}