/* ╔════════════════════════════════════════════════════════════╗
   ║                        USERCONTENT                         ║
   ╚════════════════════════════════════════════════════════════╝ */
/* userContent.css */
@-moz-document url(about:newtab), url("about:home") {
  html {
    --newtab-background-color: transparent !important;
    --newtab-background-color-secondary: transparent !important;
    background: transparent !important;
  }

  body {
    background: transparent !important;
  }
}


/* ╔════════════════════════════════════════════════════════════╗
   ║                        CHATGPT                             ║
   ╚════════════════════════════════════════════════════════════╝ */
@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {

	/* ╔════════════════════════════════════════════════════════════╗
	   ║                     PAGE BACKGROUND                       ║
	   ╚════════════════════════════════════════════════════════════╝ */

	html,
	body {
		min-height: 100% !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		background: transparent !important;
	}

	body::before {
		content: "" !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: -1 !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%3D") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	#__next {
		background: transparent !important;
		min-height: 100% !important;
		height: auto !important;
	}

	main {
		background: transparent !important;
		min-height: auto !important;
		height: auto !important;
		overflow: visible !important;
		padding-top: 0 !important;
	}


    /* ╔════════════════════════════════════════════════════════════╗
       ║                  ASSISTANT MESSAGE BUBBLES               ║
       ╚════════════════════════════════════════════════════════════╝ */

    div[data-message-author-role="assistant"] {
        margin: 8px 0 !important;
        padding: 12px 16px !important;
        border: 1px solid rgba(17, 190, 191, 0.8) !important;
        border-radius: 14px !important;
        background-color: rgba(0, 54, 54, 0.7) !important;
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                     COMPOSER / PROMPT                    ║
       ╚════════════════════════════════════════════════════════════╝ */

    [data-type="unified-composer"] .bg-token-bg-primary,
    #prompt-textarea,
    .ProseMirror,
    .wcDTda_prosemirror-parent,
    .bg-token-main-surface-tertiary {
        background-color: #003636 !important;
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                    MAIN CHAT WIDTH                       ║
       ╚════════════════════════════════════════════════════════════╝ */

    .max-w-\(--thread-content-max-width\) {
        width: 85vw !important;
        max-width: 85vw !important;
    }

    body:has(aside) .max-w-\(--thread-content-max-width\) {
        width: calc(85vw - 16rem) !important;
        max-width: calc(85vw - 16rem) !important;
    }

    body {
        overflow-x: hidden !important;
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                    SIDEBAR FOUNDATION                    ║
       ╚════════════════════════════════════════════════════════════╝ */

    aside,
    #stage-slideover-sidebar {
        background-color: #003636 !important;
        background-image: none !important;
        --sidebar-bg: #003636 !important;
        --bg-elevated-secondary: #003636 !important;
    }

    #stage-slideover-sidebar .shadow-sharp-edge-bottom {
        box-shadow: none !important;
    }

    #sidebar-header,
    .touch\:px-1\.5.px-2 {
        background-color: #003636 !important;
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                     SIDEBAR ITEMS                        ║
       ╚════════════════════════════════════════════════════════════╝ */

    .__menu-item[data-sidebar-item="true"] {
        background-color: #003636 !important;
        border-radius: 10px !important;
    }

    .__menu-item[data-sidebar-item="true"]:hover {
        background-color: #004344 !important;
    }

    a[data-sidebar-item="true"] > div.flex.min-w-0.grow.items-center.gap-2\.5 {
        border-radius: 10px !important;
    }

    a[data-sidebar-item="true"]:hover:not([data-active]) > div.flex.min-w-0.grow.items-center.gap-2\.5 {
        background-color: #004344 !important;
    }

    .__menu-item[data-sidebar-item="true"][data-active] {
        background-color: #008282 !important;
        border-radius: 10px !important;
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                    ACCOUNT / PROFILE                     ║
       ╚════════════════════════════════════════════════════════════╝ */

    [data-testid="accounts-profile-button"] {
        background-color: #003636 !important;
        border-radius: 10px !important;
    }

    [data-testid="accounts-profile-button"]:hover {
        background-color: #004344 !important;
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                     HEADER STYLING                       ║
       ╚════════════════════════════════════════════════════════════╝ */

    header,
    [data-testid="conversation-header"] {
        background-color: #003636 !important;
        background-image: none !important;
        backdrop-filter: none !important;
    }

    @media (min-width: 1024px) {
        header,
        [data-testid="conversation-header"] {
            background-color: transparent !important;
            background-image: none !important;
            backdrop-filter: none !important;
        }
    }


    /* ╔════════════════════════════════════════════════════════════╗
       ║                    CODE BLOCK STYLING                    ║
       ╚════════════════════════════════════════════════════════════╝ */

    pre {
        padding: 0 !important;
        background: none !important;
        border-radius: 14px !important;
        overflow: visible !important;
    }

    pre > div {
        background-color: #002323 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    pre > div > div:first-child {
        background-color: #002323 !important;
        border-top-left-radius: 14px !important;
        border-top-right-radius: 14px !important;
    }

    pre code {
        display: block !important;
        padding: 14px !important;
        background-color: #002323 !important;
    }

    code:not(pre code) {
        padding: 0.15em 0.35em !important;
        border-radius: 6px !important;
        background-color: #002323 !important;
    }

    pre div,
    pre span {
        background-color: #002323 !important;
    }

	/* ╔════════════════════════════════════════════════════════════╗
	   ║                 REMOVE BOTTOM GREY / BLUR                 ║
	   ╚════════════════════════════════════════════════════════════╝ */

	.content-fade::after,
	.content-fade,
	.bg-token-bg-elevated-secondary,
	.bg-token-bg-primary,
	.bg-token-main-surface-primary,
	.bg-token-main-surface-secondary,
	.bg-token-sidebar-surface-primary,
	.bg-token-sidebar-surface-secondary {
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* Composer / bottom dock wrappers */
	[data-type="unified-composer"],
	[data-type="unified-composer"] > div,
	form:has(#prompt-textarea),
	form:has(.ProseMirror) {
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
	}
}