/* Global phone frame styles for iPhone XR (CSS viewport sizing) */
:root{--phone-width:414px;--phone-height:896px}
html,body{height:100%;}
body{display:flex;justify-content:center;background:#111;border:none;padding:20px 0}
.app-container, .phone-frame-root{width:100%;max-width:var(--phone-width);height:var(--phone-height);background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45);position:relative}
/* make content inside fit and scroll naturally */
.app-container{margin:0 auto;}
/* ensure safe-area padding on iPhones */
.app-container{padding-bottom:env(safe-area-inset-bottom)}
/* bottom-sheet modal style */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:flex-end;justify-content:center;z-index:2000}
.modal-overlay.active{display:flex}
.modal-card{width:100%;max-width:var(--phone-width);background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);transform:translateY(100%);}
.modal-overlay.active .modal-card{animation:tm-slide-up .28s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes tm-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-card .modal-body{padding:16px;max-height:72vh;overflow:auto}
.modal-card .modal-footer{padding:12px 16px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:8px}
/* make sure clickable outside closes modal visually */
.modal-overlay{cursor:default}