/* ==UserStyle==
@name           ChatGPT
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

    html, body {
        height: 100% !important;
        background-image: url("https://images.unsplash.com/photo-1485470733090-0aae1788d5af?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8NGslMjBtb3VudGFpbnxlbnwwfHwwfHx8MA%3D%") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        overflow: hidden !important;
    }

    /* React root */
    #__next {
        background: transparent !important;
        height: 100% !important;
    }

    /* Main scrolling container */
    main {
        background: transparent !important;
        overflow-y: auto !important;
    }
}

@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

    /* Assistant message bubble */
    div[data-message-author-role="assistant"] {
        padding: 12px 16px !important;
        border-radius: 14px !important;
        margin: 8px 0 !important;

        /* Bubble effect without changing colors */
        border: 1px solid rgba(17, 190, 191, 0.8) !important;
        background-color: rgba(0, 54, 54, 0.7);
    }

}

.content-fade::after {
    background: none !important;
}

@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

    /* Target the ChatGPT prompt (composer) background */
    [data-type="unified-composer"] .bg-token-bg-primary,
    #prompt-textarea,
    .ProseMirror {
        background-color: #003636 !important;
    }

    /* Also ensure the textarea wrapper reflects the new color */
    .wcDTda_prosemirror-parent {
        background-color: #003636 !important;
    }

}

@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

    /* make the main chat area and messages wider */
    .max-w-\(--thread-content-max-width\) {
        max-width: 85vw !important;
        width:    85vw !important;
    }

    /* if the sidebar is present, subtract its width (about 16rem) */
    body:has(aside) .max-w-\(--thread-content-max-width\) {
        max-width: calc(85vw - 16rem) !important;
        width:    calc(85vw - 16rem) !important;
    }

    /* prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }
}

@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

    /* The actual sidebar container */
    aside {
        background-color: #003636 !important;
        background-image: none !important;
    }

    /* EVERYTHING inside the sidebar */
    aside *,
    aside *::before,
    aside *::after {
        background-color: #003636 !important;
        background-image: none !important;
    }
    

}

@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

    /* Chat history container itself */
    #history,
    [data-testid="history"],
    [role="list"] {
        background-color: #003636 !important;
    }

    /* Individual chat items */
    #history > *,
    [data-testid="history"] > *,
    [role="list"] > * {
        background-color: #003636 !important;
    }

    /* Scroll container that wraps history */
    div:has(> #history) {
        background-color: #003636 !important;
    }
    
        /* Sidebar header (ChatGPT logo + collapse button) */
    #sidebar-header {
        background-color: #003636 !important;
        background-image: none !important;
    }

    /* Anything inside the sidebar header */
    #sidebar-header *,
    #sidebar-header *::before,
    #sidebar-header *::after {
        background-color: #003636 !important;
        background-image: none !important;
    }
    
    
    /* Wrapper under sidebar header */
    .touch\:px-1\.5.px-2 {
        background-color: #003636 !important;
        background-image: none !important;
    }

    /* Anything inside it */
    .touch\:px-1\.5.px-2 *,
    .touch\:px-1\.5.px-2 *::before,
    .touch\:px-1\.5.px-2 *::after {
        background-color: #003636 !important;
        background-image: none !important;
    }

    
        /* Apps / Projects wrapper */
    div[class^="pb-["] {
        background-color: #003636 !important;
    }

    /* Apps & Projects rows */
    .__menu-item[data-sidebar-item="true"] {
        background-color: #003636 !important;
        background-image: none !important;
    }

    /* Apps button specifically */
    [data-testid="apps-button"] {
        background-color: #003636 !important;
    }

    /* Inner contents (icon + text) */
    .__menu-item *,
    .__menu-item *::before,
    .__menu-item *::after {
        background-color: #003636 !important;
        background-image: none !important;
    }
    
    
    /* Sidebar root */
    #stage-slideover-sidebar {
        --sidebar-bg: #003636 !important;
        background-color: #003636 !important;
    }
    
    
    /* Main sidebar */
    #stage-slideover-sidebar {
        --sidebar-bg: #003636 !important;
        background-color: #003636 !important;
    }

    /* Sidebar elevated surfaces (account section, sticky footer) */
    #stage-slideover-sidebar {
        --bg-elevated-secondary: #003636 !important;
    }

    /* Kill the shadow/fade edge */
    #stage-slideover-sidebar .shadow-sharp-edge-bottom {
        box-shadow: none !important;
    }
    
    
}