/* External HTML preview resources stay blocked until the matching template button is clicked. */
.handrive-html .handrive-html-live-wrap,
.handrive-office .handrive-html-live-wrap {
    position: relative;
}

.handrive-html-live-asset-consent-layer {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.handrive-html-live-asset-consent-item {
    position: absolute;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(360px, calc(100% - 24px));
    padding: 7px 8px 7px 10px;
    border: 1px solid var(--handrive-border, var(--ui-btn-base-border));
    border-radius: var(--handrive-radius-md, 8px);
    background: var(--handrive-surface, var(--ui-btn-base-bg));
    color: var(--handrive-text, var(--ui-btn-base-color));
    box-shadow: var(--site-popup-shadow-common, 0 3px 10px rgba(0, 0, 0, 0.18));
    font: inherit;
    font-size: 13px;
    pointer-events: auto;
}

.handrive-html-live-asset-consent-item.is-anchored {
    right: auto;
    transform: translate(-50%, -50%);
}

.handrive-html-live-asset-consent-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.handrive-html-live-asset-consent-button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 13px;
}

@media (max-width: 520px) {
    .handrive-html-live-asset-consent-item {
        gap: 6px;
        max-width: calc(100% - 16px);
        padding: 5px 6px 5px 8px;
        font-size: 12px;
    }

    .handrive-html-live-asset-consent-button {
        min-height: 28px;
        padding: 3px 8px;
        font-size: 12px;
    }
}
.handrive-popup-modal#handrive-html-navigation-modal {
    z-index: 2147483000;
}

.handrive-popup-modal#handrive-html-navigation-modal[popover] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

#handrive-html-navigation-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.handrive-html-navigation-url {
    font-size: calc(1em - 2px);
}
