/*
 * Account presentation port of the canonical Web App alert. The existing
 * Account modal, focus, callback, locked-notice and secret owners stay intact.
 * Sources: dashboard-controls-overlays.css (shared modal/alert geometry),
 * dashboard-modern-shared.css (theme and browser paint), app-shell.css
 * (presentation tokens, shell actions and modal title). Only selectors are
 * narrowed to this alert; Account's other modal surfaces are unaffected.
 */
@font-face {
    font-family: 'Figtree';
    src: url('/resources/fonts/Figtree-VariableFont_wght.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: optional;
}

/* app-shell.css: /new presentation tokens, scoped to this modal root. */
html body.account-visual #inAppAlertModal {
    --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bg-color: #f9f9f9;
    --text-primary: #121212;
    --text-secondary: #626262;
    --text-tertiary: #737373;
    --accent-color: #121212;
    --accent-rgb: 18, 18, 18;
    --accent-foreground: #f9f9f9;
    --accent-hover: #303030;
    --shell-action-neutral-hover-background: rgba(18, 18, 18, .055);
    --accent-dim: var(--shell-action-neutral-hover-background);
    --panel-bg: rgba(249, 249, 249, .9);
    --card-bg: #f9f9f9;
    --input-bg: rgba(18, 18, 18, .035);
    --border-color: rgba(18, 18, 18, .1);
    --border-strong: rgba(18, 18, 18, .22);
    --new-surface: rgba(249, 249, 249, .86);
    --new-shadow: 0 12px 36px rgba(18, 18, 18, .055), 0 2px 6px rgba(18, 18, 18, .02);
    --new-radius: 24px;
    --new-control-radius: 12px;
    --new-blur: 14px;
    --new-duration: 180ms;
    z-index: 2501;
    padding: 20px;
    background: rgba(255, 255, 255, .56) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 16px;
    letter-spacing: -.01em;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    animation: none;
    will-change: auto;
}

html[data-theme="dark"] body.account-visual #inAppAlertModal {
    --bg-color: #121212;
    --text-primary: #f9f9f9;
    --text-secondary: #b8b8b8;
    --text-tertiary: #a0a0a0;
    --accent-color: #f9f9f9;
    --accent-rgb: 249, 249, 249;
    --accent-foreground: #121212;
    --accent-hover: #ddd;
    --shell-action-neutral-hover-background: rgba(249, 249, 249, .08);
    --panel-bg: rgba(24, 24, 24, .94);
    --card-bg: #1b1b1b;
    --input-bg: rgba(249, 249, 249, .05);
    --border-color: rgba(249, 249, 249, .13);
    --border-strong: rgba(249, 249, 249, .26);
    --new-surface: rgba(24, 24, 24, .9);
    --new-shadow: 0 12px 36px rgba(0, 0, 0, .18);
    background: rgba(5, 5, 5, .46) !important;
}

/* dashboard-controls-overlays.css and app-shell.css: card and content. */
html body.account-visual #inAppAlertModal .in-app-alert-card {
    width: min(540px, 100%);
    max-height: calc(100dvh - 40px);
    border: 1px solid rgba(18, 18, 18, .14);
    border-color: rgba(18, 18, 18, .14) !important;
    border-radius: var(--new-radius);
    /* Override Account's legacy white !important modal-card surface. */
    background: var(--new-surface) !important;
    box-shadow: var(--new-shadow) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

html[data-theme="dark"] body.account-visual #inAppAlertModal .in-app-alert-card {
    border-color: var(--border-color) !important;
}

html body.account-visual #inAppAlertModal .in-app-alert-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 16px;
}

/* app-shell.css: shared modal-title typography. */
html body.account-visual #inAppAlertModal .in-app-alert-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: var(--modal-title-font-size, 20px) !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
    line-height: 1.3 !important;
    color: var(--text-primary);
}

html body.account-visual #inAppAlertModal .in-app-alert-message {
    margin: 8px 0 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

html body.account-visual #inAppAlertModal .in-app-alert-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
}

html body.account-visual #inAppAlertModal .in-app-alert-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    gap: 8px;
}

/* dashboard-late.css: shared mobile overlay and narrow footer insets. */
@media (max-width: 764px) {
    html body.account-visual #inAppAlertModal { padding: 10px; }
}
@media (max-width: 448px) {
    html body.account-visual #inAppAlertModal .in-app-alert-footer {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* The shared shell-action rules are already ported in account-experience.css. */
html body.account-visual #inAppAlertModal .in-app-alert-cancel {
    order: -1;
    margin-inline-end: auto;
}

html body.account-visual #inAppAlertModal button:focus-visible {
    outline-offset: -2px;
}

html body.account-visual #inAppAlertModal :is(input, textarea, [contenteditable="true"], [contenteditable=""], pre, code) {
    -webkit-user-select: text;
    user-select: text;
}

/* app-shell.css: custom widths remain opt-in to the same modal root. */
html body.account-visual #inAppAlertModal[data-width-preset="wide"] { --app-modal-width: 960px; }
html body.account-visual #inAppAlertModal[data-width-preset="medium"] { --app-modal-width: 768px; }
html body.account-visual #inAppAlertModal[data-width-preset="narrow"] { --app-modal-width: 560px; }
html body.account-visual #inAppAlertModal[data-width-preset] > .in-app-alert-card {
    width: min(var(--app-modal-width, 960px), 100%);
}

/* Use one blur owner, matching dashboard-modern-shared.css in each browser. */
html body.account-visual #inAppAlertModal:is(.visible, .is-closing) {
    will-change: opacity;
}

html body.account-visual:not(.browser-safari):not(.browser-webkit) #inAppAlertModal.visible {
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

html body.account-visual:not(.browser-safari):not(.browser-webkit):has(#inAppAlertModal:is(.visible, .is-closing)) #app {
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
}

html body.account-visual:is(.browser-safari, .browser-webkit) #inAppAlertModal {
    background: rgba(8, 8, 12, .58) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity .24s ease, visibility .24s ease !important;
}

html[data-theme="light"] body.account-visual:is(.browser-safari, .browser-webkit) #inAppAlertModal {
    background: rgba(244, 248, 252, .64) !important;
}

html body.account-visual:is(.browser-safari, .browser-webkit):has(#inAppAlertModal:is(.visible, .is-closing)) #app {
    filter: blur(var(--closing-modal-blur, 8px)) saturate(var(--closing-modal-saturation, .95)) !important;
    transform: translateZ(0);
    will-change: filter;
}

@media (prefers-reduced-transparency: reduce) {
    html body.account-visual #inAppAlertModal {
        --new-surface: var(--card-bg) !important;
        --new-blur: 0px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.account-visual #inAppAlertModal,
    html body.account-visual #inAppAlertModal *,
    html body.account-visual #inAppAlertModal::before,
    html body.account-visual #inAppAlertModal::after,
    html body.account-visual #inAppAlertModal *::before,
    html body.account-visual #inAppAlertModal *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}