/* ==UserStyle==
@name         StretchGPT: Extra Wide ChatGPT Conversations
@version      6.5
@author       m1kethai
@description  A set of ChatGPT enhancements that allows you to expand/resize the width of the main chat area, along with several additional configurable features for tweaking other key aspects of the UI, applying classy color customizations, and hiding some annoying elements.
@namespace    https://userstyles.world/style/9821/stretchgpt-extra-wide-chatgpt-conversations
@preprocessor less
@var select   stretchFactor             "🧘 Stretch Factor" {
    "⛔ Disabled":     "0",
    "🤏 Conservative": "1",
    "✨ Roomy":        "2",
    "👹 Spacious*":    "3",
    "🫨 Unrestricted": "4"
}
@var checkbox enableChatBubbleStretch   "🗯️ Expand user message bubbles to max available width" 0
@var checkbox hideDisclaimer            "⚠️ Hide disclaimer @ bottom (\"ChatGPT can make mistakes...\")" 0
@var checkbox enableColorization        "🔓 Unlock color customization options" 0
@var checkbox enableColorizeComposer    "🌈 Colorize: Composer/prompt input components" 1
@var checkbox enableColorizeBubble      "🌈 Colorize: User message bubbles" 1
@var checkbox enableColorizeBubbleAndBg "+ Full message BG [option above must be enabled]" 0
@var select   colorPreset               "🎨 Color Preset:" {
    "Absinthe*":            "#76b583",
    "Aged Sage":            "#8da572",
    "Akira":                "#840000",
    "Amaretto":             "#ab6f60",
    "Ancient Gold":         "#b59410",
    "Aztek":                "#293432",
    "Black Pearl":          "#1e272c",
    "Black Sabbath":        "#220022",
    "Blue Moss":            "#5D737E",
    "Cardamom":             "#aaaa77",
    "Caviar":               "#292a2d",
    "Chrysanthemum":        "#c35458",
    "Cyber Grape":          "#58427C",
    "Cyprus":               "#545a3e",
    "Dark and Stormy":      "#353f51",
    "Deep Jungle":          "#1A2421",
    "Deep Space":           "#2D3142",
    "Dusty Turquoise":      "#5a8a89",
    "Earl Grey":            "#a6978a",
    "Emerald":              "#0f380f",
    "FF06B5":               "#FF06B5",
    "Gameboy Teal":         "#0ABFBC",
    "Japanese Violet":      "#5B3256",
    "Lobster Bisque":       "#FFDAB9",
    "Obsidian Ash":         "#343434",
    "Prince":               "#4b384c",
    "Purple Haze":          "#807396",
    "Raichu":               "#fc8c2c",
    "Sailor Moon":          "#ffee00",
    "Sakura Bloom":         "#ff7b9c",
    "Sanguine":             "#6c110e",
    "Sapphired":            "#5b82a6",
    "Sharp Indigo":         "#48007c",
    "Steampunk Leather":    "#6f3b34",
    "Super Blue Lavender": "#5a5b9f",
    "Tokyo Midnight":       "#1a1a2e",
    "Wasabi":               "#afd77f",
    "Wasabi Peanut":        "#b4c79c",
}

==/UserStyle== */
@-moz-document domain("chatgpt.com") {
    html {
        /* ===== BREAKPOINTS & SELECTORS ===== */
        #set-breakpoints() {
            @sm: ~"screen and (min-width: 0px) and (max-width: 767px)";
            @sm-max: ~"screen and (max-width: 767px)";
            @md: ~"screen and (min-width: 768px) and (max-width: 1023px)";
            @md-up: ~"screen and (min-width: 768px)";
            @md-max: ~"screen and (max-width: 1023px)";
            @lg: ~"screen and (min-width: 1024px) and (max-width: 1535px)";
            @lg-up: ~"screen and (min-width: 1024px)";
            @lg-max: ~"screen and (max-width: 1535px)";
            @xl: ~"screen and (min-width: 1536px) and (max-width: 2047px)";
            @xl-up: ~"screen and (min-width: 1536px)";
            @xl-max: ~"screen and (max-width: 2047px)";
            @xxl: ~"screen and (min-width: 2048px) and (max-width: 2559px)";
            @xxl-up: ~"screen and (min-width: 2048px)";
            @xxl-max: ~"screen and (max-width: 2559px)";
            @xxxl: ~"screen and (min-width: 2560px)";
            @mobile: @sm-max;
            @desktop: @md-up;
        }
        #set-selectors() {
            @-sidebar:               .flex-shrink-0.overflow-x-hidden.bg-token-sidebar-surface-primary;
            @-header:                .sticky.top-0.z-10;
            @-chat:                  .composer-parent;
            @-chat__entry:           @{-chat} article:has(.group\/conversation-turn);
            @-chat__entry__outer:    @{-chat__entry} > div;
            @-chat__entry__inner:    @{-chat__entry__outer} > div;
            @-chat__entry--user:     @{-chat__entry}:not(:has(.agent-turn));
            @-chat__entry--gpt:      @{-chat__entry}:has(div[data-message-author-role="assistant"]);
            @-chat__prompt:          #composer-background;
            @-chat__footer:          @{-chat} div div.md\:px-\[60px\];
            @-composer-view__footer: @{-chat} .text-token-text-secondary.empty\:hidden.md\:px-\[60px\].lg\:absolute;

            @-sm--chat:              @{-header} ~ main div.flex-1.overflow-hidden;
            @-sm--chat__entry:       .text-message;
            @-sm--chat__entry--user: .text-message[data-message-author-role="user"];
            @-sm--chat__entry--gpt:  .text-message[data-message-author-role="assistant"];
            @-sm--chat__footer:      @{-sm--chat} ~ div.w-full;
        }
        #set-breakpoints();
        #set-selectors();

        /* ===== CORE FUNCTIONALITY/STRETCH ===== */
        & when (@stretchFactor >=1) {
            div.group\/conversation-turn {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            @{-chat__entry__inner} {
                @sfWidths: {
                    conservative: 85%, 80%, 70%;
                    roomy: 95%, 90%, 80%;
                    spacious: 97%, 90%, 90%;
                    unrestricted: 98%, 99%, 99%;
                }
                @viewportWidths: if(
                    @stretchFactor =1, @sfWidths[conservative], if(
                    @stretchFactor =2, @sfWidths[roomy], if(
                    @stretchFactor =3, @sfWidths[spacious], @sfWidths[unrestricted]
                )));

                --mw: 100%;
                @media @md {
                    --mw: max(48rem, extract(@viewportWidths, 1)) !important;
                } @media @lg {
                    --mw: extract(@viewportWidths, 2) !important;
                } @media @xl-up {
                    --mw: extract(@viewportWidths, 3) !important;
                }
                max-width: var(--mw);
            }
        }

        /* ===== STRETCH USER MESSAGE BUBBLES ===== */
        & when (@enableChatBubbleStretch =1) {
            --user-chat-width: 100% !important;
        }

        /* ===== HIDE DISCLAIMER ===== */
        & when(@hideDisclaimer =1) {
            @{-composer-view__footer},
            @{-chat__footer},
            @{-sm--chat__footer} {
                div.min-h-8 {
                    display: none !important;
                }
                padding-bottom: 0.75rem;
            }
        }

        /* ===== COLORIZATION ===== */
        .colorLib() {
            .defaults(dark) {
                @colors: {
                    @bg: #212121; @text: #ececec;
                }
            }
            .defaults(light) {
                @colors: {
                    @bg: white; @text: #0d0d0d;
                }
            }

            .bgTint(@theme, @base) {
                @sat: round(saturation(@blended));
                @blended: if(
                    @theme =light,
                    mix(@base, @colorPreset, 90%),
                    if(
                        luma(@colorPreset) < 5%,
                        @colorPreset,
                        mix(@base, @colorPreset, 70%)
                    )
                );
                @faded: fadeout(@blended,
                    if(@sat <= 55%, 0%,
                        if(@sat < 70%, 40%,
                            if(@sat < 90%, 50%,
                                60%
                            )
                        )
                    ), relative
                );
                @result: if(@theme =light, @blended, @faded);
            }

            /* Set text/foreground color to a dark or light preset to maximize contrast against the @bgc (threshold - 43%) */
            // TODO - add option to directly use @colorPreset as the FG color if it passes the accessible contrast threshold
            .accessibleFg(@bgc, @l: #ececec, @d: #0d0d0d) {
                @result: contrast(@bgc, @l, @d);
            }
        }

        .colorize(@theme: dark) {
            @baseColors: .colorLib.defaults(@theme)[];
            @tintedBg: .colorLib.bgTint(@theme, @baseColors[@bg])[];
            @accessibleText: .colorLib.accessibleFg(@tintedBg)[];

            .apply() {
                background-color: @tintedBg !important;
                color: @accessibleText !important;
            }

            @{-chat__prompt} when (@enableColorizeComposer =1) {
                .apply();
                button.rounded-full {
                    &[disabled] {
                        color: fadeout(@accessibleText, 65%);
                        background-color: fadeout(@accessibleText, 85%) !important;
                    }
                    &:not([disabled]) {
                        color: @accessibleText;
                        background-color: inherit;
                    }
                }
            }

            & when (@enableColorizeBubble =1) {
                @-msg-bubble: .relative.rounded-3xl;
                @media @sm-max {
                    @{-sm--chat__entry--user} {
                        @{-msg-bubble} {.apply()}
                    }
                }
                @media @md-up {
                    @{-chat__entry--user} {
                        & when (@enableCo...