/**
 * Trust Wallet / TokenPocket in-app browsers: backdrop-filter often triggers
 * black GPU compositing glitches on tab switches. Focusing inputs (soft
 * keyboard resize) can also flash black tiles; see overrides below.
 * html.wallet-webview-compat is set synchronously from public-head when those
 * clients are detected.
 */
html.wallet-webview-compat *,
html.wallet-webview-compat *::before,
html.wallet-webview-compat *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Replace glass blur with nearly opaque surfaces */
html.wallet-webview-compat .theme-dark .navbar {
    background: rgba(10, 10, 10, 0.98) !important;
}

html.wallet-webview-compat .theme-light .navbar {
    background: rgba(255, 255, 255, 0.98) !important;
}

html.wallet-webview-compat .theme-dark .mobile-menu {
    background: rgba(8, 6, 16, 0.98) !important;
}

html.wallet-webview-compat .theme-light .mobile-menu {
    background: rgba(255, 255, 255, 0.98) !important;
}

/*
 * Cabinet mobile drawer: fixed + translateX(-100%) keeps a large composited layer
 * just off the left edge. Soft keyboard (input focus) resizes the visual viewport
 * and some Android WebViews briefly paint that layer as black tiles. Fade the
 * closed drawer out of the compositor; keep open state unchanged.
 */
html.wallet-webview-compat .mobile-menu {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition:
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease !important;
    opacity: 0;
    pointer-events: none;
}

html.wallet-webview-compat .mobile-menu.active {
    opacity: 1;
    pointer-events: auto;
}

html.wallet-webview-compat body.theme-dark .sidebar {
    background: rgba(14, 12, 22, 0.98) !important;
}

html.wallet-webview-compat body.theme-light .sidebar {
    background: rgba(255, 255, 255, 0.98) !important;
}

html.wallet-webview-compat .wenoso-web3-modal.modal {
    background: rgba(4, 2, 12, 0.92) !important;
}

html.wallet-webview-compat .theme-light .wenoso-web3-modal.modal {
    background: rgba(15, 23, 42, 0.88) !important;
}

html.wallet-webview-compat .wenoso-ref-glass-panel {
    background: rgba(12, 12, 18, 0.94) !important;
}

html.wallet-webview-compat .theme-light .wenoso-ref-glass-panel {
    background: rgba(248, 250, 252, 0.98) !important;
}

html.wallet-webview-compat .wenoso-ref-hero {
    background: rgba(10, 10, 14, 0.95) !important;
}

html.wallet-webview-compat .theme-light .wenoso-ref-hero {
    background: rgba(255, 255, 255, 0.98) !important;
}

html.wallet-webview-compat .wenoso-ref-modal {
    background: rgba(7, 5, 18, 0.95) !important;
}

/*
 * Investment profit cards: fact row icons use color-mix() in gradients. On some
 * Android WebViews (Trust Wallet / TokenPocket), focusing an input and resizing
 * for the soft keyboard can briefly composite those layers as solid black tiles
 * on the left icon column. Use plain var() gradients here only in compat mode.
 */
html.wallet-webview-compat .wenoso-inv-profit-card__fact-icon {
    background: linear-gradient(145deg, var(--inv-accent2), var(--inv-accent)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 6px 16px rgba(0, 0, 0, 0.28) !important;
}

/* Number inputs: ensure native steppers never paint as stray black rects */
html.wallet-webview-compat input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

html.wallet-webview-compat input[type="number"]::-webkit-outer-spin-button,
html.wallet-webview-compat input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

html.wallet-webview-compat input,
html.wallet-webview-compat textarea,
html.wallet-webview-compat select {
    -webkit-tap-highlight-color: transparent;
}

/* Drop focus glow rings that can flicker during keyboard transitions */
html.wallet-webview-compat .wenoso-inv-profit-card__amount-input:focus,
html.wallet-webview-compat .wenoso-web3-modal input:focus,
html.wallet-webview-compat .wenoso-web3-modal textarea:focus,
html.wallet-webview-compat .wenoso-web3-modal select:focus {
    box-shadow: none !important;
}