/* Cloud Design v1.2.12 - mobile baseline + navigation repair */ /* Safe sizing / overflow baseline */ html{max-width:100%;overflow-x:hidden} body{max-width:100%;overflow-x:clip} main,.dashboard-main,.dashboard-grid,.dashboard-shell,.panel,.card{min-width:0} img,svg,video,canvas{max-width:100%} button,a,input,textarea,select{touch-action:manipulation} /* Mobile navigation is controlled by mobile-v1212.js. It is intentionally detached from header stacking at runtime and mounted under . */ @media(max-width:1060px){ .site-header{z-index:3000} .menu-btn{ display:block!important; position:relative; z-index:3200; width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; flex:0 0 44px; border-radius:14px!important; -webkit-tap-highlight-color:transparent; } .menu-btn span{width:17px;height:1.5px;left:13px!important;border-radius:2px} .menu-btn span:first-child{top:17px} .menu-btn span:last-child{top:24px} .menu-btn.active span:first-child{top:21px} .menu-btn.active span:last-child{top:21px} .mobile-menu{ display:block!important; position:fixed!important; z-index:2900!important; top:var(--cd-mobile-menu-top,var(--header))!important; left:0!important; right:0!important; bottom:0!important; width:100%!important; height:auto!important; padding:10px 12px max(12px,env(safe-area-inset-bottom))!important; margin:0!important; overflow:auto!important; overscroll-behavior:contain; background:color-mix(in srgb,var(--bg) 86%,transparent)!important; backdrop-filter:blur(24px) saturate(1.15)!important; -webkit-backdrop-filter:blur(24px) saturate(1.15)!important; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px); transition:opacity .2s ease,transform .2s ease,visibility .2s step-end; } .mobile-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .2s ease,transform .2s ease,visibility 0s; } .mobile-menu-inner{ width:min(100%,660px)!important; max-width:660px!important; min-height:0; margin:0 auto!important; padding:10px!important; display:grid!important; gap:6px!important; border:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important; border-radius:22px!important; background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,var(--accent) 1%),color-mix(in srgb,var(--surface2) 100%,transparent))!important; box-shadow:0 24px 70px rgba(0,0,0,.28)!important; } .mobile-menu a:not(.primary-btn), .mobile-menu .mobile-logout-button{ min-height:48px!important; display:flex!important; align-items:center!important; width:100%!important; padding:11px 13px!important; margin:0!important; border:0!important; border-radius:13px!important; font-size:.98rem!important; line-height:1.25!important; font-weight:650!important; text-align:left!important; text-decoration:none!important; white-space:normal!important; } .mobile-menu a:not(.primary-btn):hover, .mobile-menu a:not(.primary-btn):focus-visible{background:rgba(var(--accent-rgb),.08)!important} .mobile-menu .mobile-account{ min-height:60px!important; gap:11px!important; padding:9px 11px!important; border:1px solid var(--line)!important; background:var(--soft)!important; } .mobile-menu .mobile-account span:last-child{min-width:0;display:grid} .mobile-menu .mobile-account b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem} .mobile-menu .mobile-account small{color:var(--muted);font-size:.72rem;margin-top:3px} .mobile-notifications-link{justify-content:space-between} .mobile-logout-form{margin:0!important;width:100%!important} .mobile-menu .mobile-logout-button{color:#ff929f!important;background:rgba(255,92,110,.035)!important;border:1px solid rgba(255,92,110,.14)!important} .mobile-menu-cta{ min-height:50px!important; width:100%!important; margin:8px 0 0!important; justify-content:center!important; text-align:center!important; } html.cd-mobile-menu-open,body.cd-mobile-menu-open{overflow:hidden!important;overscroll-behavior:none} } /* Header fit: authenticated header must still fit on narrow phones. */ @media(max-width:720px){ .site-header{height:64px!important} .header-inner{height:64px!important;gap:6px!important} .header-actions{gap:4px!important;min-width:0} .site-header .brand.brand-exact{ width:158px!important;min-width:158px!important;max-width:158px!important;flex-basis:158px!important;height:42px!important } .site-header .brand-exact-image{width:158px!important;max-height:42px!important} .icon-btn,.notification-button{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:13px!important} } @media(max-width:520px){ .site-header .brand.brand-exact{ width:145px!important;min-width:145px!important;max-width:145px!important;flex-basis:145px!important;height:40px!important } .site-header .brand-exact-image{width:145px!important;max-height:40px!important} .account-chip{display:none!important} .header-actions{margin-left:auto} } @media(max-width:390px){ .container.header-inner{width:calc(100% - 16px)!important} .site-header .brand.brand-exact{ width:128px!important;min-width:128px!important;max-width:128px!important;flex-basis:128px!important;height:38px!important } .site-header .brand-exact-image{width:128px!important;max-height:38px!important} .icon-btn,.notification-button,.menu-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important} .menu-btn span{left:11px!important} } /* Notification popover must never render outside phone viewport. */ @media(max-width:720px){ .notification-center{position:static!important} .notification-popover{ position:fixed!important; z-index:3300!important; top:calc(64px + 8px)!important; left:10px!important; right:10px!important; width:auto!important; max-width:none!important; max-height:calc(100svh - 84px)!important; overflow:auto!important; border-radius:20px!important; } .notification-popover-head,.notification-popover-foot{position:sticky;z-index:2;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(14px)} .notification-popover-head{top:0} .notification-popover-foot{bottom:0} .notification-popover-item a{min-width:0} .notification-popover-item b,.notification-popover-item span{overflow-wrap:anywhere} } /* Public pages */ @media(max-width:720px){ .container,.narrow{width:min(100% - 24px,1280px)!important} .hero,.page-hero{overflow:hidden} .hero{padding-top:calc(64px + 40px)!important} .page-hero{padding-top:calc(64px + 42px)!important;padding-bottom:44px!important} .page-hero h1,.hero h1,.case-hero h1{overflow-wrap:anywhere;hyphens:auto} .page-hero h1{font-size:clamp(2.45rem,12vw,3.7rem)!important;line-height:.98!important} .hero h1{font-size:clamp(2.75rem,13.5vw,4rem)!important} .hero-copy,.page-hero .lead{font-size:1rem!important;line-height:1.58!important} .section{padding:64px 0!important} .section-tight{padding:42px 0!important} .section-head{margin-bottom:24px!important} .service-grid,.case-grid,.price-grid,.feature-grid{grid-template-columns:1fr!important;gap:12px!important} .service-card,.price-card,.feature-card{padding:20px!important} .case-card{min-height:270px!important} .cta-panel{padding:24px 20px!important} .hero-actions,.cta-panel .inline-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important} .hero-actions>* ,.cta-panel .inline-actions>*{width:100%!important;justify-content:center!important} .trust-grid{grid-template-columns:1fr 1fr!important} .trust-item{padding:17px 13px!important} .split{grid-template-columns:1fr!important;gap:24px!important} .feature-line{grid-template-columns:1fr!important} .footer-grid{grid-template-columns:1fr!important;gap:24px!important} .footer-bottom{display:grid!important;gap:7px!important} .footer-brand-exact,.footer-brand-exact .brand-exact-image{width:min(230px,100%)!important;height:auto!important} } @media(max-width:430px){ .container,.narrow{width:calc(100% - 20px)!important} .trust-grid{grid-template-columns:1fr!important} .trust-item{border-right:0!important;border-bottom:1px solid var(--line)!important} .trust-item:last-child{border-bottom:0!important} } /* Forms/auth: 16px fields prevent iOS zoom and buttons become proper touch targets. */ @media(max-width:720px){ input,textarea,select,.cd-select-trigger{font-size:16px!important} input,select,.cd-select-trigger{min-height:48px!important} textarea{min-height:100px} .primary-btn,.ghost-btn,.text-btn{min-height:46px;white-space:normal!important;text-align:center} .form-grid.two,.form-grid.three,.settings-grid,.settings-grid.two,.settings-grid.three{grid-template-columns:1fr!important} .auth-wrap{padding:calc(64px + 24px) 0 38px!important;place-items:start center!important} .auth-card,.auth-card-v128,.password-change-card-v126{width:100%!important;padding:20px!important;border-radius:20px!important} .auth-card h1{font-size:2.05rem!important} .auth-mode-tabs-v128{grid-template-columns:1fr 1fr;gap:5px} .auth-mode-tabs-v128 a{min-height:44px;display:grid;place-items:center;text-align:center} .quick-method-grid-v128{grid-template-columns:1fr!important} .recovery-steps-v128{grid-template-columns:1fr!important} .password-change-links-v126{grid-template-columns:1fr!important} .backup-codes{grid-template-columns:1fr!important} } @media(max-width:390px){ .auth-mode-tabs-v128{grid-template-columns:1fr!important} } /* Dashboard / staff / owner */ @media(max-width:900px){ .dashboard-grid{grid-template-columns:1fr!important} .dashboard-main{width:100%;min-width:0} } @media(max-width:720px){ .dashboard-shell{padding:calc(64px + 14px) 0 52px!important} .side-nav,.side-nav-final{ position:sticky!important;top:70px!important;z-index:100!important; display:flex!important;flex-wrap:nowrap!important;gap:5px!important; width:100%!important;max-width:100%!important; padding:6px!important;margin-bottom:16px!important; overflow-x:auto!important;overflow-y:hidden!important; scrollbar-width:none;-webkit-overflow-scrolling:touch; border-radius:16px!important; } .side-nav::-webkit-scrollbar,.side-nav-final::-webkit-scrollbar{display:none} .side-nav a,.side-nav-final a,.side-nav-final form{flex:0 0 auto!important;min-width:max-content!important} .side-nav-final .side-nav-logout-v126{display:none!important} .dashboard-head,.owner-settings-head,.project-editor-head-final,.project-admin-head-final{display:grid!important;gap:12px!important;align-items:start!important} .dashboard-head h1{font-size:2rem!important;overflow-wrap:anywhere} .dashboard-head>.inline-actions,.owner-actions .inline-actions,.staff-topline{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important} .dashboard-head>.inline-actions>*,.owner-actions .inline-actions>*,.staff-topline>*{width:100%!important} .metric-grid,.visitor-summary-final{grid-template-columns:1fr 1fr!important;gap:9px!important} .metric-card,.visitor-summary-final .card{padding:15px!important;border-radius:18px!important} .visitor-summary-final b{font-size:2rem!important} .panel,.settings-section,.project-form-section-final,.inbox-shell-v110{padding:16px!important;border-radius:20px!important} .settings-jumpbar{top:70px!important;max-width:100%;overflow-x:auto!important} .owner-security-note,.settings-switch-grid,.integration-health-grid{grid-template-columns:1fr!important} .owner-lock-badge{white-space:normal!important;justify-self:start!important} .owner-savebar,.project-savebar-final{position:static!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important} .owner-savebar .primary-btn,.project-savebar-final>*{width:100%!important} .project-quick-guide-final{grid-template-columns:1fr!important} .project-search-final{display:grid!important;grid-template-columns:1fr!important} .project-search-final>*{width:100%!important} .project-row-final,.project-row{grid-template-columns:1fr!important} .project-row-actions-final,.message-row-actions-v110{display:grid!important;grid-template-columns:1fr!important;width:100%!important} .project-row-actions-final>*,.message-row-actions-v110>*{width:100%!important} .project-form-section-head-final{gap:12px!important} .project-form-section-head-final>span{width:34px;height:34px;flex-basis:34px} .profile-layout,.profile-side-column{grid-template-columns:1fr!important} .avatar-editor{display:grid!important;grid-template-columns:auto 1fr;align-items:start!important} .profile-form-actions{display:grid!important;grid-template-columns:1fr!important} .profile-form-actions>*{width:100%!important} } @media(max-width:430px){ .metric-grid,.visitor-summary-final{grid-template-columns:1fr!important} .avatar-editor{grid-template-columns:1fr!important} } /* Tables and dense data: scroll the table, never the entire page. */ @media(max-width:720px){ .table-wrap,.analytics-table,.backup-table{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;border-radius:16px!important} .table-wrap table,.analytics-table table,.backup-table table{min-width:620px} th,td{padding:11px 12px!important;white-space:nowrap} } /* Chat/inbox */ @media(max-width:920px){ .chat-board-v110{grid-template-columns:1fr!important;min-height:0!important;border-radius:22px!important;overflow:hidden!important} .chat-thread-v110{order:1!important;min-width:0!important} .chat-context-v110{order:2!important} .chat-side-v110{order:3!important} } @media(max-width:720px){ .chat-board-v110{margin-inline:-2px} .chat-thread-head-v110{padding:15px!important;display:grid!important;gap:10px!important} .thread-actions-v110{justify-content:flex-start!important;display:grid!important;grid-template-columns:1fr 1fr;width:100%} .thread-actions-v110>*{width:100%!important} .chat-messages-v110{padding:14px!important;min-height:42svh!important;max-height:none!important;gap:10px!important} .chat-bubble-v110{max-width:94%!important;padding:12px 13px!important;border-radius:18px!important} .chat-bubble-v110.mine{margin-left:auto} .chat-meta-v110{gap:9px;margin-bottom:8px} .chat-meta-avatar{width:32px;height:32px} .message-actions-v110{gap:7px} .message-actions-v110 button,.message-actions-v110 a{min-height:38px} .chat-compose-v112,.chat-compose-v110{padding:11px!important} .composer-shell-v112{border-radius:18px!important} .composer-shell-v112 textarea{min-height:72px!important;padding:13px 13px 9px!important} .composer-toolbar-v112{grid-template-columns:1fr!important;padding:8px!important} .composer-tools-v112{grid-template-columns:repeat(3,minmax(0,1fr))!important} .composer-send-v112{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important} .composer-file-chip-v112{max-width:100%!important;min-width:0} .composer-submit-v112{min-width:96px!important} .composer-popover-v112,.composer-popover-v112.quick{position:fixed!important;left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:auto!important;max-height:60svh!important;overflow:auto!important;z-index:3600!important} .chat-context-v110,.chat-side-v110{padding:14px!important} .mini-kpi-grid-v110{grid-template-columns:1fr 1fr!important} .message-row-v110{padding:14px!important;border-radius:18px!important} .message-row-top-v110{align-items:flex-start!important;flex-direction:column!important;gap:6px!important} } @media(max-width:430px){ .thread-actions-v110{grid-template-columns:1fr!important} .composer-tools-v112{grid-template-columns:repeat(3,1fr)!important} .mini-kpi-grid-v110{grid-template-columns:1fr!important} } /* Custom select portal */ @media(max-width:720px){ .cd-select-portal{ z-index:5000!important; max-width:calc(100vw - 16px)!important; border-radius:16px!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .cd-select-option{min-height:46px!important;font-size:.95rem!important;padding:11px 13px!important} } /* Site dialogs */ @media(max-width:720px){ .cd-dialog-root-v1210{padding:12px!important;align-items:flex-end!important} .cd-dialog-card-v1210{width:100%!important;max-width:none!important;max-height:calc(100svh - 24px)!important;overflow:auto!important;border-radius:22px!important;padding:20px!important} .cd-dialog-top-v1210{gap:12px!important} .cd-dialog-icon-v1210{width:42px!important;height:42px!important;flex-basis:42px!important} .cd-dialog-title-v1210{font-size:1.25rem!important} .cd-dialog-actions-v1210{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important} .cd-dialog-btn-v1210{width:100%!important;min-height:48px!important} } @media(max-width:390px){ .cd-dialog-actions-v1210{grid-template-columns:1fr!important} } /* Guest chat */ @media(max-width:720px){ .guest-chat{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important} .guest-chat-fab{width:100%!important;justify-content:center!important;height:48px!important} .guest-chat-panel{position:fixed!important;inset:72px 8px max(8px,env(safe-area-inset-bottom)) 8px!important;width:auto!important;height:auto!important;max-height:none!important;border-radius:20px!important} .guest-chat-messages{min-height:0!important} .guest-chat-panel form input,.guest-chat-panel form textarea{font-size:16px!important} } /* Light theme mobile surfaces */ @media(max-width:1060px){ html[data-theme="light"] .mobile-menu{background:rgba(242,245,251,.90)!important} html[data-theme="light"] .mobile-menu-inner{background:#fff!important;box-shadow:0 24px 70px rgba(40,52,82,.17)!important} } @media(prefers-reduced-motion:reduce){ .mobile-menu{transition:none!important} }