/* =========================================================================== ChiroVision Mobile Drawers - phone-only edge drawer overlay (Design 1) Applies below 768 px width. Desktop + tablet layouts stay completely untouched. Pattern: full-screen X-ray/tool content, three semi-transparent drawers that slide in from the LEFT, RIGHT, and BOTTOM edges. A tiny live pill floats on the X-ray to show current state without opening any drawer. =========================================================================== */ .cv-md-shell { display: none; } /* hidden by default (desktop / tablet) */ .cv-md-edge-tab { display: none; } .cv-md-drawer { display: none; } .cv-md-live-pill { display: none; } @media (max-width: 768px) { /* Pages opt-in by setting data-cv-mobile-drawers="1" on . When set, activate the drawer shell + hide the existing compact tool header + hide the "Range of Motion Comparison"-style multi-slot desktop layouts. */ body[data-cv-mobile-drawers="1"] .cv-tool-header { display: none !important; } body[data-cv-mobile-drawers="1"] .cv-legacy-header { display: none !important; } /* Hide the desktop multi-slot layout on phone. Show ONE image at a time. The comparison viewer (single "Image 1" main panel) is what remains. Any element the page wants to preserve on phone can add data-cv-keep-mobile. */ body[data-cv-mobile-drawers="1"] .thumbnail-row, body[data-cv-mobile-drawers="1"] .thumbnails, body[data-cv-mobile-drawers="1"] .slot-grid, body[data-cv-mobile-drawers="1"] .thumbs-grid, body[data-cv-mobile-drawers="1"] .comparison-title, body[data-cv-mobile-drawers="1"] .comparison-header, body[data-cv-mobile-drawers="1"] .phase-selector, body[data-cv-mobile-drawers="1"] .phase-controls, body[data-cv-mobile-drawers="1"] .cmp-import-row, body[data-cv-mobile-drawers="1"] .four-panel-grid, body[data-cv-mobile-drawers="1"] .comparison-image-panel:not(:first-of-type), body[data-cv-mobile-drawers="1"] .instructions, body[data-cv-mobile-drawers="1"] .how-to, body[data-cv-mobile-drawers="1"] .info-section, body[data-cv-mobile-drawers="1"] .actions-row, body[data-cv-mobile-drawers="1"] #cmp-actions, body[data-cv-mobile-drawers="1"] button[onclick*="printReport"], body[data-cv-mobile-drawers="1"] button[onclick*="downloadComparison"], body[data-cv-mobile-drawers="1"] button[onclick*="clearAll"], body[data-cv-mobile-drawers="1"] button[onclick*="saveAsPDF"] { display: none !important; } /* Any element explicitly opted-in gets to stay */ body[data-cv-mobile-drawers="1"] [data-cv-keep-mobile] { display: revert !important; } /* Show the drawer shell */ body[data-cv-mobile-drawers="1"] .cv-md-shell { display: block; } body[data-cv-mobile-drawers="1"] .cv-md-edge-tab { display: block; } body[data-cv-mobile-drawers="1"] .cv-md-live-pill { display: inline-flex; } /* Edge tabs - small cyan tabs that hint where drawers pull from */ .cv-md-edge-tab { position: fixed; z-index: 10500; background: rgba(110,231,245,0.35); border: 1px solid rgba(110,231,245,0.5); box-shadow: 0 0 10px rgba(110,231,245,0.3); backdrop-filter: blur(4px); cursor: pointer; -webkit-tap-highlight-color: transparent; } .cv-md-tab-left, .cv-md-tab-right { top: 42%; width: 5px; height: 60px; border-radius: 3px; } .cv-md-tab-left { left: 0; border-radius: 0 3px 3px 0; } .cv-md-tab-right { right: 0; border-radius: 3px 0 0 3px; } .cv-md-tab-bottom { left: 50%; transform: translateX(-50%); bottom: 6px; width: 40px; height: 4px; border-radius: 2px; } /* Live measurement / state pill - always visible while X-ray shows */ .cv-md-live-pill { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); padding: 4px 12px; background: rgba(15,23,42,0.45); border: 1px solid rgba(110,231,245,0.35); border-radius: 999px; backdrop-filter: blur(6px); color: rgba(255,255,255,0.90); font-size: 11px; font-weight: 600; z-index: 10450; box-shadow: 0 4px 12px rgba(0,0,0,0.35); pointer-events: none; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cv-md-live-pill .val { color: #6ee7f5; font-family: Georgia, serif; font-weight: 700; } /* --- Drawer containers --------------------------------------------- */ .cv-md-drawer { display: flex; flex-direction: column; position: fixed; z-index: 10600; color: #fff; padding: 48px 14px 16px; gap: 10px; transition: transform .28s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } body[data-cv-mobile-drawers="1"] .cv-md-drawer.left, body[data-cv-mobile-drawers="1"] .cv-md-drawer.right, body[data-cv-mobile-drawers="1"] .cv-md-drawer.bottom { display: flex; } .cv-md-drawer.left { top: 0; bottom: 0; left: 0; width: 72%; max-width: 320px; background: linear-gradient(105deg, rgba(15,23,42,0.72) 0%, rgba(2,6,23,0.55) 100%); border-right: 1px solid rgba(110,231,245,0.4); border-radius: 0 22px 22px 0; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 6px 0 24px rgba(0,0,0,0.5); transform: translateX(-105%); } .cv-md-drawer.right { top: 0; bottom: 0; right: 0; width: 72%; max-width: 320px; background: linear-gradient(255deg, rgba(15,23,42,0.85) 0%, rgba(2,6,23,0.72) 100%); border-left: 1px solid rgba(110,231,245,0.4); border-radius: 22px 0 0 22px; backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); box-shadow: -6px 0 24px rgba(0,0,0,0.5); transform: translateX(105%); } .cv-md-drawer.bottom { left: 0; right: 0; bottom: 0; max-height: 62vh; padding: 12px 14px 18px; background: linear-gradient(0deg, rgba(15,23,42,0.85) 0%, rgba(2,6,23,0.55) 100%); border-top: 1px solid rgba(110,231,245,0.35); border-radius: 20px 20px 0 0; backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); box-shadow: 0 -8px 24px rgba(0,0,0,0.55); transform: translateY(105%); } .cv-md-drawer.open { transform: translate(0, 0) !important; } .cv-md-drawer .cv-md-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #fff; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cv-md-drawer.bottom .cv-md-close { top: 6px; right: 12px; } .cv-md-drawer .cv-md-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.35); border-radius: 999px; align-self: center; margin-bottom: 6px; } .cv-md-drawer.left .cv-md-handle, .cv-md-drawer.right .cv-md-handle { display: none; } .cv-md-drawer .cv-md-sect { color: #6ee7f5; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; margin-top: 8px; margin-bottom: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .cv-md-drawer .cv-md-row { display: flex; gap: 5px; flex-wrap: wrap; } .cv-md-drawer .cv-md-row.stack { flex-direction: column; } .cv-md-drawer .cv-md-row.stack > * { width: 100%; justify-content: center; } /* Semi-transparent button tiers */ .cv-md-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(15,23,42,0.35); color: #e5e7eb; font: inherit; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(6px); white-space: nowrap; cursor: pointer; } .cv-md-btn.primary { color: #6ee7f5; background: rgba(110,231,245,0.20); border-color: rgba(110,231,245,0.65); box-shadow: 0 0 12px rgba(110,231,245,0.15); } .cv-md-btn.mint { color: #86efac; background: rgba(134,239,172,0.20); border-color: rgba(134,239,172,0.65); } .cv-md-btn.rose { color: #fda4af; background: rgba(244,114,182,0.16); border-color: rgba(244,114,182,0.55); } .cv-md-btn.secondary { background: rgba(15,23,42,0.50); border-color: rgba(255,255,255,0.28); } .cv-md-btn.ghost { background: rgba(15,23,42,0.18); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.75); } /* Patient identity block inside the right drawer */ .cv-md-drawer .cv-md-ptname { color: #fff; font-family: Georgia, serif; font-size: 15px; font-weight: 700; } .cv-md-drawer .cv-md-ptsub { color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; } /* Filmstrip in the bottom drawer */ .cv-md-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; -webkit-overflow-scrolling: touch; } .cv-md-strip-item { flex-shrink: 0; width: 56px; text-align: center; color: rgba(255,255,255,0.75); font-size: 9.5px; } .cv-md-strip-thumb { width: 56px; height: 44px; border-radius: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: #6ee7f5; font-family: Georgia, serif; font-size: 18px; font-weight: 700; margin-bottom: 3px; } .cv-md-strip-item.active .cv-md-strip-thumb { border-color: #6ee7f5; box-shadow: 0 0 0 1px rgba(110,231,245,0.35), 0 0 10px rgba(110,231,245,0.35); } /* Backdrop click-catcher when a drawer is open */ .cv-md-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 10550; display: none; } body[data-cv-mobile-drawers="1"].cv-md-drawer-open .cv-md-scrim { display: block; } }