/* Opt-in native-dialog adapter for the original Basic Info Hub shell.
 * Basic overlays retain their established markup, styling and runtime.
 * Never applies to pages, navigation docks, players or the Queue bottom sheet. */
.oya-modal { --oya-modal-width: 420px; --oya-modal-radius: 30px; }
.oya-modal--compact { --oya-modal-width: 380px; }
.oya-modal--wide { --oya-modal-width: var(--oya-picker-width, 700px); }
dialog.oya-modal { position: fixed; inset: 0; width: min(88vw, var(--oya-modal-width)); max-width: none; height: fit-content; max-height: min(85dvh, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); margin: auto; padding: 0; border: 0; border-radius: var(--oya-modal-radius); background: transparent; overflow: visible; }
dialog.oya-modal:not([open]) { display: none !important; }
dialog.oya-modal::backdrop { background: rgba(0,0,0,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.oya-modal .oya-modal__surface { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0; max-height: inherit; padding: 30px 25px !important; border: 1px solid rgba(0,0,0,.02) !important; border-radius: var(--oya-modal-radius) !important; background: #fff !important; box-shadow: 0 15px 40px rgba(0,0,0,.12) !important; transform: none !important; overflow: hidden !important; }
.oya-modal .oya-modal__header { box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 0 !important; flex: 0 0 auto; width: 100%; min-height: 0; padding: 0 0 15px !important; margin: 0 0 20px !important; border-bottom: 1px solid #f1f5f9 !important; }
.oya-modal .oya-modal__icon { display: grid !important; place-items: center; flex: 0 0 40px; width: 40px !important; height: 40px !important; margin: 0 15px 0 0 !important; border-radius: 14px !important; background: rgba(12,192,223,.08) !important; }
.oya-modal .oya-modal__icon img { width: 22px; height: 22px; }
.oya-modal .oya-modal__titles { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.oya-modal .oya-modal__title { font: 700 16px/1.2 var(--font-main), sans-serif !important; color: #0f172a !important; text-align: left !important; margin: 0 !important; max-width: none !important; }
.oya-modal .oya-modal__close { position: static !important; inset: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; box-sizing: border-box !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #8e8f94 !important; font: 400 24px/1 var(--font-main), sans-serif !important; letter-spacing: normal !important; text-indent: 0 !important; transform: none !important; box-shadow: none !important; cursor: pointer !important; transition: color .2s ease-in-out, background-color .2s ease-in-out !important; }
.oya-modal .oya-modal__close:hover, .oya-modal .oya-modal__close:active { color: #ef4444 !important; background: #fef2f2 !important; transform: none !important; }
.oya-modal .oya-modal__close:focus-visible { outline: 2px solid #087f91 !important; outline-offset: 3px !important; }
.oya-modal .oya-modal__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0 !important; overflow: hidden; }
.oya-modal .oya-modal__scroll { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; margin-bottom: 0 !important; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none !important; }
.oya-modal .oya-modal__scroll::-webkit-scrollbar { display: none !important; }
.oya-modal .oya-modal__footer { flex: 0 0 auto; }
/* Privacy retains its existing panel/gate logic; only the visible panel header is sticky. */
#oya-consent-dialog .oya-modal__header { position: sticky; top: 0; z-index: 1; background: #fff; }
#oya-consent-dialog .oya-modal__scroll { padding: 0; }
.oya-legal-dialog { color: #263539; font: 15px/1.5 system-ui; }
.oya-modal .oya-legal-document { display: block; width: 100%; height: min(45dvh, 500px); min-height: 0; border: 0; }
html:has(dialog.oya-modal[open]), body:has(dialog.oya-modal[open]) { overflow: hidden !important; }
body:has(dialog.oya-modal[open]) .oya-nav-scroll-region { overflow-y: hidden !important; }