dialog.content-popup-dialog {
    box-sizing: border-box;
    width: min(800px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: #202124;
    background: #fff;
    box-shadow: 0 20px 80px rgb(0 0 0 / 25%);
    overflow: hidden;
}

.content-popup-dialog::backdrop { background: rgb(0 0 0 / 60%); }
dialog.content-popup-dialog[open] { display: flex; flex-direction: column; }

.content-popup-dialog .content-popup-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.content-popup-dialog .content-popup-header h2 {
    min-width: 0;
    margin: 0;
    color: inherit;
    font: 600 18px/1.4 system-ui, sans-serif;
    overflow-wrap: anywhere;
}

.content-popup-dialog button.content-popup-close {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #202124;
    background: #f3f4f6;
    font: 28px/1 system-ui, sans-serif;
    cursor: pointer;
}

.content-popup-dialog button.content-popup-close:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.content-popup-dialog .content-popup-frame {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: min(640px, calc(100dvh - 140px));
    margin: 0;
    border: 0;
    background: #fff;
}

.content-popup-dialog .content-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    color: #202124;
    background: #fff;
    font: 16px/1.6 system-ui, sans-serif;
    overflow-wrap: anywhere;
}
.content-popup-dialog .content-popup-message { margin: 0; padding: 24px; font: inherit; color: inherit; }
.content-popup-dialog .content-popup-body .post-content { min-width: 0; color: inherit; font: inherit; }
.content-popup-dialog .content-popup-body :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote) { color: inherit; }
.content-popup-dialog .content-popup-body :is(img, video, iframe) { max-width: 100%; }

@media (max-width: 480px) {
    dialog.content-popup-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    .content-popup-dialog .content-popup-header { gap: 8px; padding: 8px; }
    .content-popup-dialog .content-popup-header h2 { font-size: 16px; }
    .content-popup-dialog .content-popup-frame { height: calc(100dvh - 88px); }
}
.popup-embed-wrap { width: 100%; margin: 0; padding: 0; }
.post-content.popup-embed-content { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 24px; }
.popup-embed-content > :first-child { margin-top: 0; }
