/* Lock page scroll when modal open */
html.asm-locked, html.asm-locked body { overflow: hidden; }
/* Inline control */
.asm-inline { display: flex; gap: 8px; align-items: center; }
.asm-inline-input { flex: 1; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 16px; }
.asm-inline-btn { padding: 10px 14px; border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer; }
.asm-inline-btn.is-disabled-look { opacity: .9; }
/* Modal shell */
.asm-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; }
.asm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.52); }
.asm-dialog { position: relative; background: #fff; width: min(920px, 95vw); max-height: 60vh; border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.28); overflow: hidden; }
/* Header with search */
.asm-header { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #eef0f2; }
.asm-icon { text-align: center; opacity: .6; }
.asm-query { width: 100%; border: 0; outline: none; font-size: 18px; padding: 6px 4px; }
.asm-close { border: 0; background: transparent; font-size: 22px; cursor: pointer; opacity: .6; }
.asm-close:hover { opacity: 1; }
.asm-section { display: grid; grid-template-rows: auto auto 1fr; height: calc(64vh - 60px); }
.asm-section-title { font-size: 13px; font-weight: 700; color: #6b7280; padding: 10px 16px 6px; }
.asm-status { padding: 0 16px 8px; font-size: 14px; color: #6b7280; }
.asm-scroll { overflow: auto; padding: 0 16px 16px; }
.asm-row { display: block; padding: 14px 4px; text-decoration: none; }
.asm-row-title { color: #003366; font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.asm-row-sub { font-weight: 500; color: #4b5051; line-height: 1.6; text-align: left; font-size:14px; }
.asm-sep { height: 1px; background: #edf2f7; margin: 0; }
@media (max-width: 560px){
.asm-dialog { width: 90vw; height: 60vh; }
.asm-row-title { font-size: 17px; }
}
/* Keep page from scrolling when modal open (you already have this) */
html.asm-locked, html.asm-locked body { overflow: hidden; }
/* Make the dialog a flex column so the list can take remaining height */
.asm-dialog{
display: flex; /* <-- ensure flex, not only grid */
flex-direction: column; /* <-- stack header/inputs/status/list */
max-height: 86vh;
overflow: hidden;
}
/* The scrollable area INSIDE the modal */
.asm-results, .asm-scroll{
flex: 1 1 auto; /* <-- fill modal height */
overflow: auto; /* <-- vertical scroll inside */
overscroll-behavior: contain; /* <-- prevent scroll chaining to */
-webkit-overflow-scrolling: touch; /* smoother iOS scroll */
}
/* Optional: show a thin scrollbar inside the modal (WebKit) */
.asm-results::-webkit-scrollbar,
.asm-scroll::-webkit-scrollbar { width: 10px; }
.asm-results::-webkit-scrollbar-thumb,
.asm-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
/* Freeze page when open */
html.asm-locked, html.asm-locked body { overflow: hidden; }
/* Make the inner list the scroll container */
.asm-dialog { display:flex; flex-direction:column; max-height:55vh; overflow:hidden; }
.asm-scroll, .asm-results {
flex:1 1 auto;
overflow:auto;
overscroll-behavior:contain; /* prevent scroll chaining to body */
-webkit-overflow-scrolling:touch;
}
/* Floating close that follows the mouse on the dark backdrop only */
.asm-flyclose{
position: fixed; /* uses viewport coords from mouse event */
left: 0; top: 0;
width: 40px; height: 40px;
border: 0; border-radius: 999px;
background: #ffffff; color:#000000;
font-size: 22px; line-height: 40px; text-align:center;
transform: translate(-50%, -50%); /* center under cursor */
z-index: 1000002; /* above modal/backdrop */
display: none; /* hidden until mouse moves */
pointer-events: auto; cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.asm-flyclose.is-visible{
display: flex; align-items:center; justify-content:center;
}
/* Optional: hide the native cursor over the dark backdrop */
.asm-backdrop { /* cursor: none; */ }
/* Don’t show on touch-only devices */
@media (hover:none){ .asm-flyclose{ display:none !important; } }
.asm-flyclose{ transform: translate(12px, 12px); } /* sits just down-right */
.accordion-content .fav-btn { display:none!important;}