/* Progressive HTML platform layer — native dialog, popover, view transitions */

/* --- Native <dialog> modals (upgraded from div overlays) --- */
dialog.crm-native-dialog {
    border: none;
    padding: 1rem;
    margin: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    max-width: 100vw;
    max-height: 100vh;
}

dialog.crm-native-dialog:not([open]) {
    display: none !important;
}

dialog.crm-native-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

dialog.crm-native-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* --- Popover API (help menu, section settings) --- */
[popover].crm-popover-panel {
    margin: 0;
    padding: 0.25rem 0;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    background: #020617;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}

[popover].crm-popover-panel:not(:popover-open) {
    display: none;
}

/* Legacy fallback: hidden class still works when popover unsupported */
.crm-popover-legacy.hidden {
    display: none !important;
}

/* --- View Transitions (tab switches) --- */
@supports (view-transition-name: none) {
    .tab-content {
        view-transition-name: crm-tab-panel;
    }

    ::view-transition-old(crm-tab-panel),
    ::view-transition-new(crm-tab-panel) {
        animation-duration: 0.18s;
        animation-timing-function: ease-out;
    }

    ::view-transition-old(crm-tab-panel) {
        animation-name: crm-tab-fade-out;
    }

    ::view-transition-new(crm-tab-panel) {
        animation-name: crm-tab-fade-in;
    }
}

@keyframes crm-tab-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(4px); }
}

@keyframes crm-tab-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Declarative Shadow DOM web components --- */
grok-hint-chip {
    display: inline-flex;
    vertical-align: middle;
}