/* ╔════════════════════════════════════════════════════════════╗
   ║                        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: transparent !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) !important;
    }


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

	[data-type="unified-composer"] .bg-token-bg-primary {
		background-color: rgba(0, 35, 35, 1) !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                    ║
	   ╚════════════════════════════════════════════════════════════╝ */

	/* CODE BLOCK STYLING */
	div.rounded-3xl.bg-token-bg-elevated-secondary:has(#code-block-viewer) {
		background-color: rgba(0, 35, 35, 0.5) !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;
	}

	.content-fade::after,
	.content-fade,
	.bg-token-sidebar-surface-primary,
	.bg-token-sidebar-surface-secondary {
		background-image: linear-gradient(
			to bottom,
			rgba(0, 54, 54, 0) 0%,
			rgba(0, 54, 54, 0.06) 20%,
			rgba(0, 54, 54, 0.18) 45%,
			rgba(0, 54, 54, 0.42) 70%,
			rgba(0, 54, 54, 0.75) 88%,
			rgba(0, 54, 54, 1) 100%
		) !important;
	}

	/* ╔════════════════════════════════════════════════════════════╗
	   ║              FORCE SIDEBAR BACKGROUND COLOR              ║
	   ╚════════════════════════════════════════════════════════════╝ */

	#stage-slideover-sidebar,
	#stage-slideover-sidebar nav,
	#stage-slideover-sidebar nav > aside:first-of-type,
	#stage-slideover-sidebar .bg-token-sidebar-surface-primary,
	#stage-slideover-sidebar .bg-token-sidebar-surface-secondary {
		background-color: #003636 !important;
		background-image: none !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
	}

}