/*************************************************************************
* ADOBE CONFIDENTIAL
* ___________________
*
*  Copyright 2015 Adobe Systems Incorporated
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any.  The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and are protected by all applicable intellectual property laws,
* including trade secret and or copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
**************************************************************************/
const regularFontURL=chrome.runtime.getURL("browser/css/fonts/AdobeClean-Regular.otf"),boldFontURL=chrome.runtime.getURL("browser/css/fonts/AdobeClean-Bold.otf");export const FAB_INLINE_STYLES=`\n    .acrobat-button-container {\n        position: fixed;\n        right: 0;\n        bottom: 36px;\n        z-index: 2147483646;\n        visibility: visible !important;\n        pointer-events: all;\n        opacity: 1;\n        display: flex;\n        align-items: center;\n        transition: opacity 0.3s ease-in-out;\n    }\n\n    @media print {\n        .acrobat-button-container {\n            display: none !important;\n        }\n    }\n\n    .acrobat-button {\n        position: relative;\n        background: white;\n        display: flex;\n        align-items: center;\n        pointer-events: all;\n        touch-action: none;\n        box-shadow: 0px 2px 8px 0px #00000029;\n        height: 34px;\n        width: 34px;\n        border: 1px solid transparent;\n        background-clip: padding-box, border-box;\n        background-origin: border-box;\n        background-image: linear-gradient(white, white),\n                        linear-gradient(95.85deg, #D73220 0%, #D92361 33%, #7155FA 100%);\n        border-radius: 18px;\n        justify-content: right;\n        margin-right: var(--fab-margin-right, 28px);\n        overflow: hidden;\n    }\n\n    .acrobat-button-container-transparent {\n        opacity: 0.4 !important;\n        transition: opacity 0.3s ease-in-out;\n    }\n\n    .acrobat-button-container-transparent:hover,\n    .acrobat-button-container-transparent:focus,\n    .acrobat-button-container-transparent:active {\n        opacity: 1;\n    }\n\n    .acrobat-button > svg {\n        flex-shrink: 0;\n        margin: 4px 5px 5px 5px;\n        width: 22px;\n        height: 22px;\n        pointer-events: none;\n        fill: #b40000;\n    }\n    .acrobat-button:has(.close-btn.open),\n    .expand-acrobat-button {\n        width: 64px;\n    }\n\n    .disabled {\n        background: #B1B1B1;\n    }\n\n    .tooltip-text {\n        width: 160px;\n        visibility: hidden;\n        opacity: 0;\n        background-color: #FFFFFF;\n        color: #292929;\n        border-radius: 7px;\n        padding: 4px 1px 5px 9px;\n        position: absolute;\n        z-index: 1;\n        right: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: 10px;\n        transition: opacity 0.3s, visibility 0s linear 2s;\n        font-size: 12px;\n        line-height: 15px;\n        font-family: 'adobe-clean', Adobe Clean, sans-serif;\n        filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.12));\n    }\n\n    .tooltip-text::after {\n       content: '';\n       position: absolute;\n       top: 50%;\n       left: 100%;\n       transform: translateY(-50%);\n       border-width: 6px;\n       border-style: solid;\n       border-color: transparent transparent transparent #fff;\n    }\n\n    .show-tooltip {\n        visibility: visible;\n        opacity: 1;\n        line-height: 1.5;\n        font-family: 'adobe-clean', Adobe Clean, sans-serif;\n        transition: opacity 0.3s;\n        transition-delay: 500ms;\n    }\n\n    .close-btn {\n        position: relative;\n        display: none;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .close-btn svg {\n        fill: #464646;\n    }\n\n    .close-btn.showCloseButton {\n        opacity: 1;\n        display: flex;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n        padding: 2px;\n    }\n\n    .fab-view-settings-dialog {\n        display: none;\n        position: absolute;\n        bottom: 40px;\n        z-index: 1;\n    }\n\n    .close-btn:hover {\n        background: #E6E6E6;\n        border-radius: 50%; /* Keep original circular hover */\n        cursor: pointer;\n    }\n\n    .fab-view-settings-dialog.showDialog {\n        display: block;\n    }\n    .close-btn .burger-icon {\n        display: inline;\n        margin-bottom: 2px;\n    }\n    .close-btn .close-icon {\n        display: none;\n    }\n    .close-btn.open .burger-icon {\n        display: none;\n    }\n    .close-btn.open .close-icon {\n        display: inline;\n    }\n    .tooltip-text .tooltip-text-content {\n        font-weight: bold;\n    }\n    .tooltip-text .tooltip-sub-text-text {\n        font-style: italic;\n        font-size: 11px;\n    }\n\n    /* Icon container styles - replaces iframe */\n    .icon-container {\n        width: 33px;\n        height: 34px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: grab;\n        pointer-events: all;\n        flex-shrink: 0;\n        background: transparent;\n        border: none;\n    }\n\n    .icon-container:active {\n        cursor: grabbing;\n    }\n\n    .fab-svg-icon {\n        width: 22px;\n        height: 22px;\n        padding: 5px 5px 5px 6px;\n        pointer-events: none;\n        fill: #b40000;\n    }\n\n    .draggable-handle {\n        display: none;\n        position: absolute;\n        right: var(--drag-handle-right, 12px);\n        cursor: grab;\n    }\n    .draggable-handle-visible {\n        display: flex;\n    }\n\n    /* Font face declarations - for proper font loading in Shadow DOM */\n    @font-face {\n        font-family: 'adobe-clean';\n        font-weight: 400;\n        src: url('${regularFontURL}') format('opentype');\n    }\n    @font-face {\n        font-family: 'adobe-clean';\n        font-weight: 700;\n        src: url('${boldFontURL}') format('opentype');\n    }\n    @font-face {\n        font-family: 'AdobeClean-Regular';\n        src: url('${regularFontURL}') format('opentype');\n    }\n    @font-face {\n        font-family: 'AdobeClean-Bold';\n        src: url('${boldFontURL}') format('opentype');\n    }\n    body {\n        font-family: 'AdobeClean-Regular', adobe-clean, "Adobe Clean", sans-serif;\n    }\n\n    .dialog-container {\n        width: 166px;\n        background-color: #ffffff;\n        border-radius: 4px;\n        border: 1px solid #B1B1B1;\n        box-shadow: 0px 1px 4px 0px #00000026;\n        z-index: 1000;\n        padding: 4px;\n        position: relative;\n        margin: 4px 0px;\n    }\n\n    .menu {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .menu .menu_item {\n        cursor: pointer;\n        font-family: 'AdobeClean-Regular', adobe-clean, "Adobe Clean", sans-serif;\n        align-content: center;\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 18.2px;\n        text-align: left;\n        color: #222222;\n        padding: 0px 12px;\n        height: 32px;\n        width: 140px;\n    }\n\n    .menu .menu_item:hover {\n        background-color: #eaeaea;\n    }\n\n    .preferences {\n        font-size: 12px;\n        font-weight: 400;\n        line-height: 18.2px;\n        text-align: left;\n        color: #464646;\n    }\n\n    .divider {\n        border-top: 1px solid #E6E6E6;\n    }\n\n    /* React-specific wrappers - minimal */\n    .fab-root {\n        font-family: 'adobe-clean', Adobe Clean, sans-serif;\n    }\n\n    button.close-btn {\n        background: transparent;\n        border: none;\n        cursor: pointer;\n        padding: 0;\n        z-index: 10; /* Ensure clickable above all other elements */\n        pointer-events: auto;\n    }\n\n    /* FAB Action Pills - From Figma Design */\n    .fab-pills-container {\n        position: absolute;\n        bottom: 42px; /* FAB height (34px) + gap (8px) = 42px */\n        right: var(--fab-margin-right, 28px);\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        align-items: flex-end;\n        width: 142px;\n        z-index: 1;\n    }\n\n    .fab-pills-container.pills-below {\n        bottom: auto;\n        top: 42px; /* Same gap when positioned below */\n    }\n\n    /* Extend hover area using ::after pseudo-element - doesn't affect visual layout */\n    .fab-pills-container::after {\n        content: '';\n        position: absolute;\n        top: 100%; /* Start right after the pills content */\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: transparent;\n        pointer-events: auto;\n    }\n\n    .fab-pills-container.pills-below::after {\n        top: auto;\n        bottom: 100%; /* Start right before the pills when positioned below */\n    }\n\n    /* FTE Header - First Time Experience (56px with close button) */\n    .fab-fte-header {\n        position: relative;\n        width: 142px;\n        min-height: 56px;\n        background: #FFFFFF;\n        border-radius: 12px;\n        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n    }\n\n    .fab-fte-background {\n        position: absolute;\n        left: -13px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 183.33px;\n        height: 126.82px;\n        background: url('${chrome.runtime.getURL("browser/images/fab-header-background.svg")}') no-repeat center;\n        background-size: cover;\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    .fab-fte-close {\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 24px;\n        height: 24px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: transparent;\n        border: none;\n        cursor: pointer;\n        z-index: 2;\n        color: #222222;\n        padding: 0;\n    }\n\n    .fab-fte-close:hover {\n        background: rgba(0, 0, 0, 0.05);\n        border-radius: 12px;\n    }\n\n    .fab-fte-close svg {\n        width: 8px;\n        height: 8px;\n    }\n\n    .fab-fte-text {\n        position: relative;\n        width: 102px;\n        font-family: 'AdobeClean-Bold', adobe-clean, sans-serif;\n        font-weight: 400; /* Use Bold font file directly, not synthetic bold */\n        font-size: 12px;\n        line-height: 16px;\n        color: #222222; /* Figma spec color */\n        z-index: 1;\n        white-space: normal;\n        word-wrap: break-word;\n        margin-left: 16px;\n        margin-right: auto;\n        box-sizing: border-box;\n        -webkit-font-smoothing: subpixel-antialiased; /* Better font rendering */\n        -moz-osx-font-smoothing: auto;\n    }\n\n    /* Hover Header - Normal state (24px without close button) */\n    .fab-hover-header {\n        position: relative;\n        width: 142px;\n        min-height: 24px;\n        background: #FFFFFF; /* White background to show the colorful SVG and text */\n        border-radius: 12px;\n        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);\n        overflow: hidden;\n    }\n\n    .fab-hover-background {\n        position: absolute;\n        left: -27px;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 212.63px;\n        height: 147.09px;\n        background: url('${chrome.runtime.getURL("browser/images/fab-header-background.svg")}') no-repeat center;\n        background-size: cover;\n        pointer-events: none;\n        z-index: 0;\n    }\n\n    .fab-hover-text {\n        position: relative;\n        width: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: 'AdobeClean-Bold', adobe-clean, sans-serif;\n        font-weight: 400; /* Use Bold font file directly, not synthetic bold */\n        font-size: 12px;\n        line-height: 15px;\n        color: #222222; /* Figma spec color */\n        z-index: 1;\n        white-space: normal;\n        padding: 4px 9px;\n        box-sizing: border-box;\n        -webkit-font-smoothing: subpixel-antialiased; /* Better font rendering */\n        -moz-osx-font-smoothing: auto;\n    }\n\n    /* Individual Pill Buttons */\n    .fab-pill-button {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 0;\n        width: 142px;\n        min-height: 24px; /* Min height, allows growth with content */\n        background: #FFFFFF;\n        border: none;\n        border-radius: 12px;\n        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);\n        cursor: pointer;\n        padding: 0;\n        transition: background 0.2s ease;\n        overflow: visible;\n    }\n\n    .fab-pill-button:hover {\n        background: #D5D5D5;\n    }\n\n    .fab-pill-button:hover .fab-pill-label,\n    .fab-pill-button:hover .fab-pill-icon {\n        color: #000000; /* Hover state color from Figma Alias/content/neutral/hover */\n    }\n\n    .fab-pill-button:active {\n        background: #F4F4F4;\n    }\n\n    .fab-pill-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 4px 7px 4px 10px; /* Exact Figma specs: top right bottom left */\n        flex-shrink: 0;\n        box-sizing: border-box;\n    }\n\n    .fab-pill-icon img {\n        width: 16px;\n        height: 16px;\n        display: block;\n        flex-shrink: 0;\n        /* SVG icons with currentColor fill will inherit color from parent */\n        filter: brightness(0) saturate(100%) invert(13%) sepia(0%) saturate(0%) hue-rotate(196deg) brightness(97%) contrast(97%); /* #222222 */\n    }\n\n    .fab-pill-button:hover .fab-pill-icon img {\n        filter: brightness(0) saturate(100%); /* #000000 on hover */\n    }\n\n    .fab-pill-label {\n        display: flex;\n        align-items: center;\n        font-family: 'AdobeClean-Bold', adobe-clean, sans-serif;\n        font-weight: 400; /* Use Bold font file directly, not synthetic bold */\n        font-size: 12px;\n        line-height: 15px; /* 1.252 * 12px = 15.024px */\n        color: #222222; /* Default text color from Figma Alias/content/neutral/default */\n        padding: 4px 9px 5px 0; /* Reduced right padding to prevent wrapping */\n        text-align: left;\n        white-space: normal; /* Allow text wrapping for multi-line content */\n        box-sizing: border-box;\n        flex: 1;\n        overflow: visible;\n        -webkit-font-smoothing: subpixel-antialiased; /* Better font rendering */\n        -moz-osx-font-smoothing: auto;\n    }\n`;