.rv-viewer-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rv-polish-space-3, 12px);
    min-height: var(--rv-polish-touch-target, 44px);
    padding: var(--rv-polish-space-3, 12px);
    border: 1px solid var(--rv-role-border, rgba(176, 167, 201, 0.22));
    border-radius: var(--rv-polish-radius-panel, 8px);
    color: var(--rv-role-text, #F6F3F8);
    background: var(--rv-role-surface-strong, rgba(56, 50, 75, 0.78));
    box-shadow: var(--rv-polish-shadow-panel, 0 24px 60px rgba(20, 14, 24, 0.5));
    font: var(--rv-type-body, 700 0.95rem/1.45 'Nunito', sans-serif);
}

.rv-viewer-status--stacked {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-width: min(380px, calc(100vw - 32px));
    text-align: center;
}

.rv-viewer-status[data-state="loading"] {
    border-color: rgba(56, 208, 198, 0.32);
}

.rv-viewer-status[data-state="error"] {
    border-color: rgba(255, 96, 104, 0.34);
}

.rv-viewer-status__icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--rv-role-action, #38D0C6);
    font: var(--rv-type-meta, 900 0.68rem/1.2 'Nunito', sans-serif);
    letter-spacing: 0;
}

.rv-viewer-status__media {
    width: min(190px, 55vw);
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid var(--rv-role-border, rgba(176, 167, 201, 0.22));
    border-radius: var(--rv-polish-radius-panel, 8px);
    background: rgba(246, 243, 248, 0.04);
}

.rv-viewer-status__copy {
    display: grid;
    min-width: 0;
    gap: var(--rv-polish-space-1, 4px);
}

.rv-viewer-status__label {
    font: var(--rv-type-card-title, 900 0.95rem/1.2 'Nunito', sans-serif);
    color: var(--rv-role-text, #F6F3F8);
}

.rv-viewer-status__detail {
    font: var(--rv-type-caption, 800 0.75rem/1.3 'Nunito', sans-serif);
    color: var(--rv-role-text-soft, rgba(246, 243, 248, 0.72));
}

.rv-viewer-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rv-polish-space-2, 8px);
    min-width: var(--rv-polish-touch-target, 44px);
    min-height: var(--rv-polish-touch-target, 44px);
    padding: 0 var(--rv-polish-space-4, 16px);
    border: 1px solid var(--rv-role-border, rgba(176, 167, 201, 0.22));
    border-radius: var(--rv-polish-radius-control, 8px);
    color: var(--rv-button-secondary-fg, #F6F3F8);
    background: var(--rv-button-secondary-bg, rgba(246, 243, 248, 0.08));
    font: var(--rv-type-button, 900 0.82rem/1 'Nunito', sans-serif);
    letter-spacing: 0;
    cursor: pointer;
}

.rv-viewer-tool-button[data-variant="primary"] {
    color: var(--rv-button-primary-fg, #140E18);
    background: var(--rv-button-primary-bg, #38D0C6);
    border-color: rgba(246, 243, 248, 0.2);
}

.rv-viewer-tool-button[data-variant="quiet"] {
    color: var(--rv-button-quiet-fg, rgba(246, 243, 248, 0.72));
    background: var(--rv-button-quiet-bg, transparent);
    border-color: transparent;
}

.rv-viewer-tool-button:focus-visible {
    outline: 3px solid rgba(56, 208, 198, 0.42);
    outline-offset: 2px;
}

.rv-viewer-overlay,
.rv-viewer-loading-overlay,
.rv-viewer-error-overlay {
    position: absolute;
    inset: var(--rv-polish-space-3, 12px);
    z-index: 80;
    display: grid;
    place-items: center;
    padding: var(--rv-polish-space-4, 16px);
    border: 1px solid var(--rv-role-border, rgba(176, 167, 201, 0.22));
    border-radius: var(--rv-polish-radius-panel, 8px);
    color: var(--rv-role-text, #F6F3F8);
    background:
        radial-gradient(circle at 18% 0%, rgba(56, 208, 198, 0.14), transparent 34%),
        rgba(20, 14, 24, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

.rv-viewer-error-overlay {
    border-color: rgba(255, 96, 104, 0.34);
}

.rv-viewer-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rv-polish-space-2, 8px);
}

.rv-viewer-status--stacked .rv-viewer-action-row {
    justify-content: center;
}

@media (max-width: 480px) {
    .rv-viewer-status {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rv-viewer-action-row {
        justify-content: stretch;
    }

    .rv-viewer-action-row > * {
        flex: 1 1 auto;
    }
}