floating-panel-ui-creation.js

// Version: 1.1
// floating-panel-ui-creation.js
// Documentation:
// This file handles fetching and creating the floating panel from an HTML template.
// It also contains basic behavior methods for making the panel draggable, positioning it,
// and creating the toggle button that summons it.
//
// Methods included:
// - createFloatingPanel(): Fetches floating-panel-files/floating-panel.html and injects it into the page.
// - createProfileSwitcher(): Builds the profile dropdown in the panel footer.
// - makeDraggable(): Enables drag functionality on an element via a handle.
// - positionPanelAtCursor(): Positions the panel relative to the mouse cursor.
// - positionPanelBottomRight(): Positions the panel to the lower-right corner safely.
// - createPanelToggleButton(): Creates the toggle button for summoning the floating panel.
//
// Dependencies:
// - floating-panel.js provides the namespace (window.MaxExtensionFloatingPanel).
// - utils.js for logging via logConCgp.
// 
'use strict';

/**
 * Creates the floating panel element by fetching an HTML template and appending it.
 */
window.MaxExtensionFloatingPanel.createFloatingPanel = function () {
    if (this.__panelCreationPromise) return this.__panelCreationPromise;
    const pending = createFloatingPanelDom.call(this);
    this.__panelCreationPromise = pending;
    const release = () => {
        if (this.__panelCreationPromise === pending) this.__panelCreationPromise = null;
    };
    void pending.then(release, release);
    return pending;
};

async function createFloatingPanelDom() {
    // Check if the panel element exists and is still attached to the document.
    if (this.panelElement && document.body.contains(this.panelElement)) {
        return this.panelElement;
    }

    // If the panel element reference exists but is not in the DOM, it's been detached.
    if (this.panelElement) {
        this.panelElement = null; // Reset reference to allow re-creation.
        logConCgp('[floating-panel] Panel element was detached from the DOM. It will be recreated.');
    }

    this.__panelDomEvents?.abort();
    this.__panelDomEvents = new AbortController();
    let createdPanel = null;
    try {
        const response = await fetch(chrome.runtime.getURL('floating-panel-files/floating-panel.html'));
        if (!response.ok) {
            throw new Error(`Failed to fetch floating-panel-files/floating-panel.html: ${response.statusText}`);
        }
        const html = await response.text();

        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        const panel = tempDiv.firstElementChild;
        if (!panel) throw new Error('The floating panel template is empty.');
        createdPanel = panel;

        document.body.appendChild(panel);

        // Get references to all elements
        this.panelElement = panel;
        const panelHeader = document.getElementById('max-extension-floating-panel-header');
        const closeButton = document.getElementById('max-extension-panel-close-btn');
        const collapseButton = document.getElementById('max-extension-panel-collapse-btn');
        const transparencyButton = document.getElementById('max-extension-panel-transparency-btn');
        const transparencyPopover = document.getElementById('max-extension-transparency-popover');
        const transparencySlider = document.getElementById('max-extension-transparency-slider');
        const transparencyValue = document.getElementById('max-extension-transparency-value');
        const collapseFooterButton = document.getElementById('max-extension-panel-collapse-footer-btn');
        const profileSwitcherContainer = document.getElementById('max-extension-profile-switcher');

        // Ensure settings object exists before trying to access its properties.
        // This prevents errors on initial load if settings haven't been initialized yet.
        if (!this.currentPanelSettings) {
            this.currentPanelSettings = { ...this.defaultPanelSettings };
        }

        // Apply initial dynamic styles that can't be in the CSS file
        this.updatePanelFromSettings();

        // Attach event listeners
        collapseButton.addEventListener('click', () => {
            if (typeof this.toggleHeaderCollapse === 'function') {
                this.toggleHeaderCollapse();
            }
        });
        if (collapseFooterButton) {
            collapseFooterButton.addEventListener('click', () => {
                if (typeof this.toggleFooterCollapse === 'function') {
                    this.toggleFooterCollapse();
                }
            });
        }
        closeButton.addEventListener('click', () => {
            // If the user closes the panel, don’t auto-reopen it for this tab.
            try {
                window.__OCP_userDisabledFallback = true;
            } catch (_) {}
            this.togglePanel();
        });

        // --- Transparency controls ---
        const clampPercent = (p) => Math.min(100, Math.max(0, Math.round(p)));
        const clampOpacity = (o) => Math.min(1, Math.max(0, o));
        const updateTransparencyLabel = (p) => {
            if (transparencyValue) transparencyValue.textContent = `${p}%`;
        };

        this._rememberPopoverOrigin = (popover) => {
            if (!popover) return;
            const parent = popover.parentElement;
            if (!parent || parent === document.body) {
                return;
            }
            if (!popover.__ocpOriginalParent || popover.__ocpOriginalParent.parent !== parent) {
                popover.__ocpOriginalParent = {
                    parent,
                    nextSibling: popover.nextSibling
                };
            }
        };

        this.restorePopoverToOriginalParent = (popover) => {
            if (!popover) return;
            popover.style.position = '';
            popover.style.top = '';
            popover.style.left = '';
            popover.style.right = '';
            popover.style.bottom = '';
            popover.style.zIndex = '';

            if (!popover.__ocpOriginalParent) {
                return;
            }
            const { parent, nextSibling } = popover.__ocpOriginalParent;
            if (!parent || !document.contains(parent)) {
                delete popover.__ocpOriginalParent;
                return;
            }
            if (nextSibling && nextSibling.parentNode === parent) {
                parent.insertBefore(popover, nextSibling);
            } else {
                parent.appendChild(popover);
            }
        };

        this.positionFloatingPopover = (popover, anchor, options = {}) => {
            if (!popover || !anchor) return;

            const {
                offsetY = 6,
                offsetX = 0,
                align = 'right',
                viewportMargin = 8
            } = options;

            this._rememberPopoverOrigin(popover);
            if (popover.parentElement !== document.body) {
                document.body.appendChild(popover);
            }

            popover.style.position = 'fixed';
            popover.style.right = 'auto';
            popover.style.bottom = 'auto';
            popover.style.zIndex = '2147483647';

            // Force reflow so measurements are accurate after moving to body.
            void popover.offsetWidth;

            const anchorRect = anchor.getBoundingClientRect();
            const popRect = popover.getBoundingClientRect();

            const clampNumber = (value, min, max) => Math.max(min, Math.min(max, value));
            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

            let left;
            if (align === 'left') {
                left = anchorRect.left + offsetX;
            } else if (align === 'center') {
                left = anchorRect.left + (anchorRect.width / 2) - (popRect.width / 2) + offsetX;
            } else {
                left = anchorRect.right - popRect.width + offsetX;
            }

            let top = anchorRect.bottom + offsetY;

            const maxLeft = viewportWidth - popRect.width - viewportMargin;
            left = clampNumber(left, viewportMargin, Math.max(viewportMargin, maxLeft));

            if (top + popRect.height + viewportMargin > viewportHeight) {
                top = anchorRect.top - popRect.height - offsetY;
            }
            const maxTop = viewportHeight - popRect.height - viewportMargin;
            top = clampNumber(top, viewportMargin, Math.max(viewportMargin, maxTop));

            popover.style.left = `${Math.round(left)}px`;
            popover.style.top = `${Math.round(top)}px`;
        };

        const applyTransparencyPercent = (percent) => {
            const clampedPercent = clampPercent(percent);
            if (transparencySlider && String(transparencySlider.value) !== String(clampedPercent)) {
                transparencySlider.value = clampedPercent;
            }
            updateTransparencyLabel(clampedPercent);
            const newOpacity = clampOpacity(1 - (clampedPercent / 100));
            if (!this.currentPanelSettings) this.currentPanelSettings = { ...this.defaultPanelSettings };
            this.currentPanelSettings.opacity = newOpacity;
            this.updatePanelFromSettings();
            this.debouncedSavePanelSettings();
        };

        const getCurrentTransparencyPercent = () => {
            let currentOpacity = this.currentPanelSettings?.opacity;
            if (typeof currentOpacity !== 'number' || Number.isNaN(currentOpacity)) {
                currentOpacity = this.defaultPanelSettings.opacity;
            }
            currentOpacity = clampOpacity(currentOpacity);
            const percent = Math.round((1 - currentOpacity) * 100);
            return clampPercent(percent);
        };

        if (transparencyButton && transparencyPopover && transparencySlider) {
            // Initialize slider position from current settings
            const initialPercent = getCurrentTransparencyPercent();
            transparencySlider.value = initialPercent;
            updateTransparencyLabel(initialPercent);

            const openTransparencyPopover = () => {
                const currentPercent = getCurrentTransparencyPercent();
                transparencySlider.value = currentPercent;
                updateTransparencyLabel(currentPercent);
                transparencyPopover.style.display = 'block';
                if (typeof this.positionFloatingPopover === 'function') {
                    this.positionFloatingPopover(transparencyPopover, transparencyButton, { offsetY: 6, align: 'right' });
                }
            };

            const closeTransparencyPopover = () => {
                transparencyPopover.style.display = 'none';
                if (typeof this.restorePopoverToOriginalParent === 'function') {
                    this.restorePopoverToOriginalParent(transparencyPopover);
                }
            };
            this.closeTransparencyPopover = closeTransparencyPopover;

            // Toggle popover
            transparencyButton.addEventListener('click', (e) => {
                e.stopPropagation();
                const isVisible = transparencyPopover.style.display === 'block';
                if (isVisible) {
                    closeTransparencyPopover();
                } else {
                    openTransparencyPopover();
                }
            });

            // Close on outside click
            const outsideClickHandler = (e) => {
                if (!transparencyPopover || transparencyPopover.style.display !== 'block') return;
                const withinPopover = transparencyPopover.contains(e.target);
                const onButton = transparencyButton.contains(e.target);
                if (!withinPopover && !onButton) {
                    closeTransparencyPopover();
                }
            };
            document.addEventListener('mousedown', outsideClickHandler, { capture: true, signal: this.__panelDomEvents.signal });

            // Close on ESC
            const escHandler = (e) => {
                if (e.key === 'Escape' && transparencyPopover.style.display === 'block') {
                    closeTransparencyPopover();
                }
            };
            document.addEventListener('keydown', escHandler, { capture: true, signal: this.__panelDomEvents.signal });

            // Slider input -> live preview + save (debounced)
            transparencySlider.addEventListener('input', (e) => {
                const val = Number(e.target.value);
                applyTransparencyPercent(val);
            });
            // Prevent drag interference while interacting with slider
            transparencySlider.addEventListener('mousedown', (event) => event.stopPropagation());
            transparencySlider.addEventListener('click', (event) => event.stopPropagation());
        }

        this.makeDraggable(panel, panelHeader);
        this.makeDraggable(panel, profileSwitcherContainer);

        // Resize listener
        // Saving only on mouseup inside the panel missed releases over the preview iframe.
        this.initializePanelResize(panel);

        // Initialize the queue section with its logic
        this.initializeQueueSection();

        // Initially hide the panel
        panel.style.display = 'none';

        logConCgp('[floating-panel] Floating panel created from HTML template.');
        return panel;

    } catch (error) {
        this.__panelDomEvents.abort();
        createdPanel?.remove();
        if (this.panelElement === createdPanel) this.panelElement = null;
        logConCgp('[floating-panel] Error creating floating panel from template:', error);
        return null;
    }
}

/** Resize with pointer capture; the shield keeps embedded pages from stealing the gesture. */
window.MaxExtensionFloatingPanel.initializePanelResize = function (panel) {
    const handle = document.createElement('button');
    handle.id = 'max-extension-panel-resize-handle';
    handle.type = 'button';
    handle.setAttribute('aria-label', 'Resize floating panel');
    handle.title = 'Drag to resize. Arrow keys resize by 10 px; Shift+arrow by 50 px.';
    panel.append(handle);
    const { signal } = this.__panelDomEvents;
    let gesture = null;

    const dimensions = () => {
        const style = getComputedStyle(panel);
        const rect = panel.getBoundingClientRect();
        const scale = this.getPanelScale?.() || 1;
        const width = parseFloat(style.width);
        const height = parseFloat(style.height);
        return { rect, scale, width, height, extraWidth: rect.width / scale - width, extraHeight: rect.height / scale - height };
    };

    const applySize = (width, height, geometry) => {
        const maxWidth = Math.max(1, (window.innerWidth - geometry.rect.left) / geometry.scale - geometry.extraWidth);
        const maxHeight = Math.max(1, (window.innerHeight - geometry.rect.top) / geometry.scale - geometry.extraHeight);
        const clamp = (value, minimum, maximum) => Math.min(maximum, Math.max(Math.min(minimum, maximum), value));
        panel.style.minWidth = `${Math.min(180, maxWidth)}px`;
        panel.style.minHeight = `${Math.min(80, maxHeight)}px`;
        // Update the live settings too, so a responsive/profile refresh cannot restore stale size.
        this.currentPanelSettings.width = clamp(width, 180, maxWidth);
        this.currentPanelSettings.height = clamp(height, 80, maxHeight);
        panel.style.width = `${this.currentPanelSettings.width}px`;
        panel.style.height = `${this.currentPanelSettings.height}px`;
    };

    const finish = (save = true) => {
        if (!gesture) return;
        const { pointerId, shield } = gesture;
        gesture = null;
        shield.remove();
        if (handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
        if (save && panel.isConnected) this.debouncedSavePanelSettings();
    };

    handle.addEventListener('pointerdown', (event) => {
        if (event.button !== 0 || !event.isPrimary || gesture) return;
        event.preventDefault();
        event.stopPropagation();
        handle.focus({ preventScroll: true });
        const shield = document.createElement('div');
        shield.style.cssText = 'position:fixed;inset:0;z-index:2147483647;cursor:nwse-resize;touch-action:none;user-select:none;';
        shield.setAttribute('aria-hidden', 'true');
        gesture = { ...dimensions(), pointerId: event.pointerId, x: event.clientX, y: event.clientY, shield };
        document.body.append(shield);
        try {
            handle.setPointerCapture(event.pointerId);
        } catch (error) {
            // Document listeners still receive shield events if capture is unavailable.
            logConCgp('[floating-panel] Resize pointer capture unavailable:', error?.message || error);
        }
    }, { signal });

    document.addEventListener('pointermove', (event) => {
        if (!gesture || event.pointerId !== gesture.pointerId) return;
        if (event.buttons === 0) { finish(); return; }
        event.preventDefault();
        applySize(gesture.width + (event.clientX - gesture.x) / gesture.scale,
            gesture.height + (event.clientY - gesture.y) / gesture.scale, gesture);
    }, { capture: true, signal });

    const finishPointer = (event) => {
        if (gesture && event.pointerId === gesture.pointerId) finish();
    };
    document.addEventListener('pointerup', finishPointer, { capture: true, signal });
    document.addEventListener('pointercancel', finishPointer, { capture: true, signal });
    handle.addEventListener('lostpointercapture', finishPointer, { signal });
    window.addEventListener('blur', () => finish(), { signal });
    signal.addEventListener('abort', () => finish(false), { once: true });

    handle.addEventListener('keydown', (event) => {
        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key) || gesture) return;
        event.preventDefault();
        event.stopPropagation();
        const geometry = dimensions();
        const step = event.shiftKey ? 50 : 10;
        const dx = event.key === 'ArrowRight' ? step : event.key === 'ArrowLeft' ? -step : 0;
        const dy = event.key === 'ArrowDown' ? step : event.key === 'ArrowUp' ? -step : 0;
        applySize(geometry.width + dx, geometry.height + dy, geometry);
        this.debouncedSavePanelSettings();
    }, { signal });
};

/**
 * Creates the profile switcher UI inside the panel footer.
 */
window.MaxExtensionFloatingPanel.createProfileSwitcher = function () {
    const switcherContainer = document.getElementById('max-extension-profile-switcher');
    if (!switcherContainer) return;

    // Clear existing content
    switcherContainer.innerHTML = '';

    // Create a container for profile elements (label + dropdown)
    const profileContainer = document.createElement('div');
    profileContainer.className = 'profile-elements-container';
    profileContainer.style.cssText = `
        display: flex;
        align-items: center;
        gap: 8px;
    `;

    // Create profile label
    const profileLabel = document.createElement('div');
    profileLabel.textContent = 'Profile:';

    // Create profile selector dropdown
    const profileSelector = document.createElement('select');
    profileSelector.id = 'max-extension-profile-selector';

    // Prevent dragging when interacting with the dropdown
    profileSelector.addEventListener('mousedown', (event) => {
        event.stopPropagation();
    });
    profileSelector.addEventListener('click', (event) => {
        event.stopPropagation();
    });

    // Populate the dropdown with available profiles
    this.availableProfiles.forEach(profileName => {
        const option = document.createElement('option');
        option.value = profileName;
        option.textContent = profileName;
        if (profileName === this.currentProfileName) {
            option.selected = true;
        }
        profileSelector.appendChild(option);
    });

    // Add change event listener to the profile selector
    profileSelector.addEventListener('change', (event) => {
        const selectedProfileName = event.target.value;
        this.switchToProfile(selectedProfileName);
    });

    // Append label and selector to the profile container
    profileContainer.appendChild(profileLabel);
    profileContainer.appendChild(profileSelector);

    // Create a container for the queue toggle (will be moved here when space allows)
    const queueToggleContainer = document.createElement('div');
    queueToggleContainer.id = 'max-extension-queue-toggle-footer';
    queueToggleContainer.className = 'queue-toggle-footer-container';
    queueToggleContainer.style.cssText = `
        display: none;
        margin-right: 16px;
    `;

    // Append queue toggle and profile containers to the switcher (they will appear on the left)
    switcherContainer.appendChild(queueToggleContainer);
    switcherContainer.appendChild(profileContainer);

    // Initialize responsive queue toggle positioning
    this.initializeResponsiveQueueToggle();
};

/**
 * Makes an element draggable using a given handle element.
 */
window.MaxExtensionFloatingPanel.makeDraggable = function (element, handle) {
    let offsetX = 0;
    let offsetY = 0;

    const startDrag = (e) => {
        e.preventDefault();
        offsetX = e.clientX - element.getBoundingClientRect().left;
        offsetY = e.clientY - element.getBoundingClientRect().top;
        document.addEventListener('mousemove', dragElement);
        document.addEventListener('mouseup', stopDrag);
    };

    const dragElement = (e) => {
        e.preventDefault();

        // Calculate the new position
        let newLeft = e.clientX - offsetX;
        let newTop = e.clientY - offsetY;

        // Get viewport dimensions
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

        // Get panel dimensions
        const panelScale = typeof this.getPanelScale === 'function' ? this.getPanelScale() : 1;
        const panelWidth = element.offsetWidth * panelScale;
        const panelHeight = element.offsetHeight * panelScale;

        // Constrain the horizontal position (left)
        newLeft = Math.max(0, newLeft);
        newLeft = Math.min(newLeft, viewportWidth - panelWidth);

        // Constrain the vertical position (top)
        newTop = Math.max(0, newTop);
        newTop = Math.min(newTop, viewportHeight - panelHeight);

        // Apply the constrained position
        element.style.left = newLeft + 'px';
        element.style.top = newTop + 'px';
    };

    const stopDrag = () => {
        document.removeEventListener('mousemove', dragElement);
        document.removeEventListener('mouseup', stopDrag);
        this.currentPanelSettings.posX = parseInt(element.style.left);
        this.currentPanelSettings.posY = parseInt(element.style.top);
        this.debouncedSavePanelSettings();
    };

    handle.addEventListener('mousedown', startDrag);
};

/**
 * Positions the floating panel at the mouse cursor's position.
 */
window.MaxExtensionFloatingPanel.positionPanelAtCursor = function (event) {
    if (!this.panelElement) return;
    const cursorX = event.clientX;
    const cursorY = event.clientY;
    this.panelElement.style.left = cursorX + 'px';
    this.panelElement.style.top = (cursorY - this.currentPanelSettings.height) + 'px';
    this.currentPanelSettings.posX = parseInt(this.panelElement.style.left);
    this.currentPanelSettings.posY = parseInt(this.panelElement.style.top);
};

/**
 * Creates a toggle button for the floating panel.
 */

/**
 * Positions the floating panel in the bottom-right corner of the viewport.
 * Performs a secondary adjustment in the next animation frame to account for
 * late layout shifts (e.g. scrollbars).
 */
window.MaxExtensionFloatingPanel.positionPanelBottomRight = function () {
    if (!this.panelElement) return;
    const margin = 20;
    const panelScale = typeof this.getPanelScale === 'function' ? this.getPanelScale() : 1;
    const panelWidth = (this.panelElement.offsetWidth || this.currentPanelSettings.width || 300) * panelScale;
    const panelHeight = (this.panelElement.offsetHeight || this.currentPanelSettings.height || 400) * panelScale;
    let newLeft = Math.max(window.innerWidth - panelWidth - margin, 0);
    let newTop = Math.max(window.innerHeight - panelHeight - margin, 0);
    this.panelElement.style.left = `${newLeft}px`;
    this.panelElement.style.top = `${newTop}px`;
    this.currentPanelSettings.posX = parseInt(newLeft);
    this.currentPanelSettings.posY = parseInt(newTop);
    this.debouncedSavePanelSettings?.();
    requestAnimationFrame(() => {
        const adjustedScale = typeof this.getPanelScale === 'function' ? this.getPanelScale() : 1;
        const adjustedLeft = Math.max(window.innerWidth - (this.panelElement.offsetWidth * adjustedScale) - margin, 0);
        const adjustedTop = Math.max(window.innerHeight - (this.panelElement.offsetHeight * adjustedScale) - margin, 0);
        this.panelElement.style.left = `${adjustedLeft}px`;
        this.panelElement.style.top = `${adjustedTop}px`;
        this.currentPanelSettings.posX = parseInt(adjustedLeft);
        this.currentPanelSettings.posY = parseInt(adjustedTop);
        this.debouncedSavePanelSettings?.();
    });
};

/**
 * Positions the floating panel in the TOP-right corner of the viewport.
 */
window.MaxExtensionFloatingPanel.positionPanelTopRight = function () {
    if (!this.panelElement) return;
    const margin = 20;
    const panelScale = typeof this.getPanelScale === 'function' ? this.getPanelScale() : 1;
    const panelWidth = (this.panelElement.offsetWidth || this.currentPanelSettings.width || 300) * panelScale;
    // top-right = x near right edge, y near top
    let newLeft = Math.max(window.innerWidth - panelWidth - margin, 0);
    let newTop = margin;
    this.panelElement.style.left = `${newLeft}px`;
    this.panelElement.style.top = `${newTop}px`;
    this.currentPanelSettings.posX = parseInt(newLeft);
    this.currentPanelSettings.posY = parseInt(newTop);
    this.debouncedSavePanelSettings?.();
    // second pass after layout settles
    requestAnimationFrame(() => {
        const adjustedScale = typeof this.getPanelScale === 'function' ? this.getPanelScale() : 1;
        const adjustedLeft = Math.max(window.innerWidth - (this.panelElement.offsetWidth * adjustedScale) - margin, 0);
        const adjustedTop = margin;
        this.panelElement.style.left = `${adjustedLeft}px`;
        this.panelElement.style.top = `${adjustedTop}px`;
        this.currentPanelSettings.posX = parseInt(adjustedLeft);
        this.currentPanelSettings.posY = parseInt(adjustedTop);
        this.debouncedSavePanelSettings?.();
    });
};

window.MaxExtensionFloatingPanel.createPanelToggleButton = function () {
    const toggleButton = document.createElement('button');
    toggleButton.type = 'button'; // Prevent form submission!
    toggleButton.innerHTML = '🔼';
    toggleButton.dataset.ocpFloatingPanelToggleButton = 'true';
    toggleButton.style.cssText = `
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 1px;
        font-size: 20px;
        margin-right: 5px;
        margin-bottom: 5px;
    `;
    toggleButton.title = 'Toggle floating button panel';

    toggleButton.addEventListener('click', async (event) => {
        await this.togglePanel(event);
    });

    return toggleButton;
};

/**
 * Ensures the floating panel stays fully within the current viewport.
 * Applies a single clamping adjustment and saves the corrected position.
 * This mirrors the drag-time bounds logic and is intended for a one-time
 * correction right after spawn or settings load.
 */
window.MaxExtensionFloatingPanel.ensurePanelWithinViewport = function () {
    if (!this.panelElement) return;

    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    // Prefer actual rendered size; fall back to settings if not measured yet
    const panelScale = typeof this.getPanelScale === 'function' ? this.getPanelScale() : 1;
    const panelWidth = (this.panelElement.offsetWidth || this.currentPanelSettings?.width || 300) * panelScale;
    const panelHeight = (this.panelElement.offsetHeight || this.currentPanelSettings?.height || 400) * panelScale;

    // Read the intended position (style wins; then settings)
    let left = parseInt(this.panelElement.style.left, 10);
    if (Number.isNaN(left)) left = parseInt(this.currentPanelSettings?.posX, 10) || 0;
    let top = parseInt(this.panelElement.style.top, 10);
    if (Number.isNaN(top)) top = parseInt(this.currentPanelSettings?.posY, 10) || 0;

    const maxLeft = Math.max(0, viewportWidth - panelWidth);
    const maxTop = Math.max(0, viewportHeight - panelHeight);
    const clampedLeft = Math.min(Math.max(0, left), maxLeft);
    const clampedTop = Math.min(Math.max(0, top), maxTop);

    if (clampedLeft !== left || clampedTop !== top) {
        this.panelElement.style.left = clampedLeft + 'px';
        this.panelElement.style.top = clampedTop + 'px';
        if (this.currentPanelSettings) {
            this.currentPanelSettings.posX = clampedLeft;
            this.currentPanelSettings.posY = clampedTop;
            this.debouncedSavePanelSettings?.();
        }
        try { logConCgp('[floating-panel] Adjusted panel inside viewport bounds after spawn/settings load.'); } catch (_) {}
    }
};

/**
 * Initializes responsive positioning for the queue toggle based on available space.
 */
window.MaxExtensionFloatingPanel.initializeResponsiveQueueToggle = function () {
    this.queueToggleResizeObserver?.disconnect();
    if (this.updateQueueTogglePlacement) window.removeEventListener('resize', this.updateQueueTogglePlacement);
    clearTimeout(this.queueTogglePlacementTimer);
    // This will be called after the queue section is initialized
    // We'll add a resize observer to monitor panel width changes
    if (!this.panelElement) return;

    const checkSpaceAndMoveToggle = () => {
        const queueToggleOriginal = document.getElementById('max-extension-queue-toggle-placeholder');
        const queueToggleFooter = document.getElementById('max-extension-queue-toggle-footer');
        const profileSwitcher = document.getElementById('max-extension-profile-switcher');
        const queueSection = document.getElementById('max-extension-queue-section');
        const controlsContainer = queueSection?.querySelector('.controls-container');
        const expandableSection = queueSection?.querySelector('.expandable-queue-controls');
        const tosWarning = document.getElementById('max-extension-queue-tos-warning');

        if (!queueToggleOriginal || !queueToggleFooter || !profileSwitcher || !queueSection || !controlsContainer) return;

        const panelWidth = this.panelElement.offsetWidth;
        const hideQueueToggle = Boolean(window.globalMaxExtensionConfig?.queueHideActivationToggle);

        if (hideQueueToggle) {
            queueToggleOriginal.style.display = 'none';
            queueToggleFooter.style.display = 'none';
            queueSection.style.display = 'none';
            if (expandableSection) expandableSection.style.display = 'none';
            if (this.queueDisplayArea) this.queueDisplayArea.style.display = 'none';
            this.queueToggleForcedToFooter = false;
            return;
        }

        const minWidthForFooterPlacement = 350;
        const toggle = this.queueModeToggle;
        const isToggleInOriginal = toggle && toggle.parentElement === queueToggleOriginal;
        const toggleLabel = toggle?.querySelector('label');
        const footer = document.getElementById('max-extension-profile-switcher');

        let forcedFooter = this.queueToggleForcedToFooter === true;
        let labelOverflowing = false;
        if (isToggleInOriginal && toggleLabel) {
            labelOverflowing = (toggleLabel.scrollWidth - toggleLabel.clientWidth) > 1;
            if (labelOverflowing) {
                forcedFooter = true;
                this.queueToggleForcedToFooter = true;
            }
        }

        if (panelWidth >= minWidthForFooterPlacement && !labelOverflowing) {
            forcedFooter = false;
            this.queueToggleForcedToFooter = false;
        }

        const shouldMoveToFooter = panelWidth >= minWidthForFooterPlacement || forcedFooter;
        const footerCollapsed = !!footer && footer.classList.contains('collapsed');
        const queueEnabled = !!window.globalMaxExtensionConfig?.enableQueueMode;
        const footerAllowsDisplay = (!footerCollapsed || queueEnabled);
        const shouldDisplayFooterToggle = shouldMoveToFooter && footerAllowsDisplay;

        // Determine if TOS warning is currently visible using computed style (works regardless of inline or stylesheet rules).
        const tosVisible = !!tosWarning && window.getComputedStyle(tosWarning).display !== 'none';

        if (shouldMoveToFooter) {
            if (toggle && toggle.parentElement === queueToggleOriginal) {
                queueToggleFooter.appendChild(toggle);
                queueToggleOriginal.style.display = 'none';
            }
            queueToggleFooter.style.display = shouldDisplayFooterToggle ? 'flex' : 'none';

            if (tosVisible) {
                queueSection.style.display = 'flex';
                if (expandableSection) expandableSection.style.display = 'none';
            } else {
                const isQueueEnabled = window.globalMaxExtensionConfig?.enableQueueMode || false;
                if (isQueueEnabled) {
                    queueSection.style.display = 'flex';
                    if (expandableSection) expandableSection.style.display = 'contents';
                } else {
                    queueSection.style.display = 'none';
                }
            }
        } else {
            if (toggle && toggle.parentElement === queueToggleFooter) {
                queueToggleFooter.style.display = 'none';
                queueToggleOriginal.style.display = 'block';
                queueToggleOriginal.appendChild(toggle);
                this.queueToggleForcedToFooter = false;

                if (toggleLabel && (toggleLabel.scrollWidth - toggleLabel.clientWidth) > 1) {
                    this.queueToggleForcedToFooter = true;
                    queueToggleFooter.appendChild(toggle);
                    queueToggleFooter.style.display = footerAllowsDisplay ? 'flex' : 'none';
                    queueToggleOriginal.style.display = 'none';
                }
            }
            // At narrow widths, keep the queue section hidden if the footer is
            // collapsed and the queue is not enabled (unless a TOS warning must show).
            if (tosVisible) {
                queueSection.style.display = 'flex';
            } else {
                const showNarrow = !footerCollapsed || queueEnabled;
                queueSection.style.display = showNarrow ? 'flex' : 'none';
            }
        }

        this.syncInlineQueuePanelLayout?.();
    };

    this.updateQueueTogglePlacement = checkSpaceAndMoveToggle;

    // Initial check
    this.queueTogglePlacementTimer = setTimeout(checkSpaceAndMoveToggle, 100);

    // Monitor panel resize
    if (window.ResizeObserver) {
        const resizeObserver = new ResizeObserver(checkSpaceAndMoveToggle);
        resizeObserver.observe(this.panelElement);
        this.queueToggleResizeObserver = resizeObserver;
    }

    // Also check on window resize as fallback
    window.addEventListener('resize', checkSpaceAndMoveToggle);

    if (!this.__queueUiRestoreHooksBound) {
        this.__queueUiRestoreHooksBound = true;
        this.__handleQueueUiRestore = () => {
            if (!this.panelElement || !document.body.contains(this.panelElement)) return;
            if (document.visibilityState === 'hidden') return;
            this.syncQueueModeUiFromConfig?.();
            this.updateQueueTogglePlacement?.();
        };

        document.addEventListener('visibilitychange', this.__handleQueueUiRestore);
        window.addEventListener('focus', this.__handleQueueUiRestore);
        window.addEventListener('pageshow', this.__handleQueueUiRestore);
    }
};

/**
 * Updates the visibility of the queue section based on toggle placement and state.
 * This function now respects the TOS warning visibility: if the warning is showing,
 * the queue section must remain visible to display it.
 */
window.MaxExtensionFloatingPanel.updateQueueSectionVisibility = function (isToggleInFooter) {
    const queueSection = document.getElementById('max-extension-queue-section');
    const tosWarning = document.getElementById('max-extension-queue-tos-warning');
    if (!queueSection) return;

    if (Boolean(window.globalMaxExtensionConfig?.queueHideActivationToggle)) {
        queueSection.style.display = 'none';
        return;
    }

    const tosVisible = !!tosWarning && window.getComputedStyle(tosWarning).display !== 'none';

    if (tosVisible) {
        // Force visible to keep the warning accessible
        queueSection.style.display = 'flex';
        return;
    }

    if (isToggleInFooter) {
        // Hide the entire queue section when toggle is in footer and no TOS warning is shown
        queueSection.style.display = 'none';
    } else {
        // Show the queue section when toggle is back in original position
        queueSection.style.display = 'flex';
    }
};