/* v353: responsive contacts list */
@media(max-width:900px){
 body.contactsMobilePage #contactsView{padding-bottom:84px!important;min-height:100dvh!important;overflow-x:hidden!important}
 #contactsView .contactSplit{margin-top:12px!important;min-width:0!important}
 #contactsView .contactTabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;height:auto!important;padding:4px!important;margin:14px!important;gap:4px!important;align-items:center!important;border:1px solid #e2e8f0!important;border-radius:12px!important;background:#f3f5f8!important;box-sizing:border-box!important}
 #contactsView .contactTabs .contactTab{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;width:100%!important;height:42px!important;padding:0 3px!important;font-size:clamp(10px,3.1vw,14px)!important;line-height:1.2!important;border:0!important;border-radius:9px!important;white-space:nowrap!important}
 #contactsView .contactTabs .contactTab.active{border:0!important;background:#153753!important;color:#fff!important}
 #contactsView .contactTabs .contactTab::after{display:none!important;content:none!important}
 #contactsView .contactTabs .contactTab sup{position:static!important;top:auto!important;vertical-align:baseline!important;display:inline-flex!important;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 3px!important;margin:0!important;border-radius:10px;background:#e1e8ef;color:#506177;font-size:9px!important;line-height:18px!important;box-sizing:border-box}
 #contactsView .contactTabs .contactTab.active sup{background:#ffffff26;color:#fff}
 #contactsView .contactSearchRow{height:auto!important;padding:0 14px 14px!important;gap:8px!important}
 #contactsView .contactSearchBox{height:46px!important;padding:0 12px!important;gap:10px!important}
 #contactsView .contactSearchBox input{height:44px!important;min-width:0!important;width:100%!important;font-size:14px!important}
 #contactsView .contactRefreshBtn{height:46px!important;width:46px!important;min-width:46px!important;font-size:26px!important}
 #contactsView #contactListBody.contactRows{padding:8px 14px 18px!important;min-height:0!important}
 #contactsView .contactContactRow{height:auto!important;min-height:84px!important;grid-template-columns:40px minmax(0,1fr) 20px!important;gap:10px!important;padding:12px 8px!important;border:0!important;border-bottom:1px solid #edf0f4!important;border-radius:0!important;box-sizing:border-box!important}
 #contactsView .contactContactRow.active{border-left:0!important;background:#f3f8fc!important;padding-left:8px!important;box-shadow:none!important}
 #contactsView .contactContactRow.active::before{content:none!important;display:none!important}
 #contactsView .contactRowText b{font-size:16px!important;white-space:normal!important;overflow-wrap:anywhere!important}
 #contactsView .contactRowText small{font-size:12px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;margin-top:3px!important}
 #contactsView .contactRowArrow{font-size:24px!important}
 #contactsView .contactJoin{left:16px!important;right:16px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;width:auto!important;height:48px!important;border:0!important;border-radius:14px!important;font-size:15px!important;box-sizing:border-box!important;box-shadow:0 4px 14px #2563df20!important}
 #contactsView:after{height:calc(72px + env(safe-area-inset-bottom,0px))!important}
}
.contactDetailBack354{display:none}
@media(max-width:900px){
 #contactsView.contactDetailOpen354 .contactList{display:none!important}
 #contactsView.contactDetailOpen354 .contactDetail{display:block!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:16px!important;border:0!important;background:white!important}
 #contactsView.contactDetailOpen354 .contactDetailBack354{display:block!important;margin:14px!important;padding:10px 0!important;border:0!important;background:transparent!important;color:#153753!important;font-size:16px!important;font-weight:700!important}
 #contactsView.contactDetailOpen354:after{display:none!important}
 #contactsView .contactDetailHead{display:flex!important;flex-wrap:wrap!important;gap:12px!important;height:auto!important;min-width:0!important;padding:0 0 16px!important}
 #contactsView .contactDetailIdentity{min-width:0!important;flex:1!important}
 #contactsView .contactDetailIdentity b{white-space:normal!important;overflow-wrap:anywhere;font-size:18px!important}
 #contactsView .contactDetailActions{width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important}
 #contactsView .contactDetailActions button{font-size:12px!important;padding:10px!important}
 #contactsView .contactTxnTableWrap{width:100%!important;overflow-x:auto!important}
 #contactsView .contactTxnTable{min-width:580px!important}
}
/* v355: consistent contact-detail actions */
@media(max-width:900px){
 #contactsView .contactDetailActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-top:8px!important}
 #contactsView .contactDetailActions button{display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:100%!important;min-width:0!important;height:42px!important;padding:0 6px!important;border:1px solid #dbe3ec!important;border-radius:10px!important;background:#f3f6f9!important;color:#193a5b!important;font-size:clamp(10px,2.9vw,13px)!important;font-weight:700!important;line-height:1.2!important;white-space:nowrap!important;box-shadow:none!important;transition:background .15s ease,transform .15s ease!important}
 #contactsView .contactDetailActions button.contactDeleteAction{background:#fff0f1!important;color:#dc3545!important;border-color:#ffcbd1!important}
 #contactsView .contactDetailActions button:active{transform:scale(.97)!important}
 #contactsView .contactDetailActions button:focus-visible{outline:2px solid #2563df!important;outline-offset:2px!important}
 #contactsView .contactDetailActions svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 #contactsView .contactTxnEmpty{min-height:220px!important;padding:48px 12px!important;box-sizing:border-box!important;color:#8491a2!important;font-size:14px!important}
 #contactsView .contactTxnEmpty::before{content:'▤';display:block;font-size:42px;line-height:1.4;color:#bcc5d0;margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){#contactsView .contactDetailActions button{transition:none!important}}
/* v356: keep contact form footer inside the mobile viewport */
@media(max-width:900px){
 #contactsView #contactDrawer.open{position:fixed!important;inset:0!important;top:0!important;bottom:auto!important;width:100%!important;max-width:100vw!important;height:100vh!important;height:100dvh!important;max-height:100dvh!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important;box-sizing:border-box!important;padding:0!important;transform:none!important}
 #contactsView #contactDrawer .contactDrawerHead{height:auto!important;min-height:58px!important;box-sizing:border-box!important;padding:16px 52px!important;flex-shrink:0!important}
 #contactsView #contactDrawer #contactForm{height:auto!important;max-height:none!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important;padding:16px 20px 24px!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
 #contactsView #contactDrawer #contactForm>label,#contactsView #contactDrawer .contactPhotoWrap{flex-shrink:0!important}
 #contactsView #contactDrawer #contactDrawerFooter{position:static!important;display:block!important;min-height:0!important;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;border-top:1px solid #e6eaf0!important;background:#fff!important}
 #contactsView #contactDrawer #contactDrawerFooter #contactSaveBtn{height:46px!important;min-height:46px!important;border-radius:12px!important;font-size:15px!important}
}