:root {
	--d-cgpt-accent-color: #00de8c;
	--d-cgpt-secondary-color: #cff2e5;
	--d-cgpt-faded-accent-color: #cff2e5;

	--d-cgpt-accent-icon-invert: 83%;
	--d-cgpt-accent-icon-sepia: 29%;
	--d-cgpt-accent-icon-saturate: 5497%;
	--d-cgpt-accent-icon-hue: 102deg;
	--d-cgpt-accent-icon-brightness: 90%;
	--d-cgpt-accent-icon-contrast: 101%;
}

:root[data-duo-theme="dark"] {
	--d-cgpt-accent-color: #00ffa1;
	--d-cgpt-secondary-color: #0e0e0e;
	--d-cgpt-faded-accent-color: #3d554c;

	--d-cgpt-accent-icon-invert: 99%;
	--d-cgpt-accent-icon-sepia: 74%;
	--d-cgpt-accent-icon-saturate: 4779%;
	--d-cgpt-accent-icon-hue: 76deg;
	--d-cgpt-accent-icon-brightness: 97%;
	--d-cgpt-accent-icon-contrast: 117%;
}

/* disable pull-down-to-refresh */
html,
body {
    overscroll-behavior-y: contain;
}

.d-cgpt-tab {
	position: relative;
}

.d-cgpt-tab > a > span {
	border: 2px solid rgb(var(--color-snow)) !important;
    background-color: unset !important;
	border-radius: 12px !important;
}

.d-cgpt-tab > a > span:hover {
	background-color: rgb(var(--color-polar)) !important; 
	border: 2px solid rgb(var(--color-polar)) !important;
}

.d-cgpt-tab > .d-cgpt-active > span {
	border: 2px solid var(--d-cgpt-accent-color) !important;
    background-color: var(--d-cgpt-secondary-color) !important;
}

.d-cgpt-tab > .d-cgpt-active > span span {
	color: var(--d-cgpt-accent-color) !important;
}

.d-cgpt-tab-mobile .d-cgpt-beta {
	rotate: unset;
    bottom: -3px;
    top: unset;
    left: 0px;
    right: 0px;
    border-radius: unset;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 100%;
	padding: unset;
    justify-content: center;
}

.d-cgpt-beta {
	background-color: var(--d-cgpt-accent-color);
    border: 2px solid var(--d-cgpt-accent-color) !important;
    width: fit-content;
    padding: 0px 10px;
    color: var(--d-cgpt-secondary-color);
    font-weight: bold;
    font-size: 11px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -17px;
    z-index: 10;
    margin: auto;
    height: 16px;
    display: flex;
    align-items: center;
    rotate: 90deg;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.d-cgpt-prompt {
	position: fixed;
	bottom: 0;
	height: 90px;
	width: 100%;
	z-index: 1000;
	transition: 0.3s;
}

.d-cgpt-prompt-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    background: rgb(var(--color-snow));
    border: 2px solid rgb(var(--color-swan));
    border-radius: 16px;
    max-width: 700px;
    margin: auto;
	transition: 0.2s;
}

.d-cgpt-prompt > div {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80px;
	max-width: 700px;
    margin: auto;
	background: rgb(var(--color-snow));
    border: 2px solid rgb(var(--color-swan));
	border-radius: 16px;
	padding: 0 20px;
	display: flex;
    align-items: center;
    column-gap: 30px;
	position: relative;
}

.d-cgpt-prompt > div > input {
	width: 100%;
	height: 50px;
	background-color: unset;
    border-color: white;
    border: unset;
    border-bottom: 1px solid white;
    border-radius: unset;
	color: rgb(var(--color-eel));
	padding: 0 10px;
}

.d-cgpt-prompt > div > button {
	height: 40px;
	border-radius: 5px;
	padding: 0 10px;
	background-color: var(--d-cgpt-accent-color);
    border: 1px solid var(--d-cgpt-accent-color);
    color: var(--d-cgpt-secondary-color);
	cursor: pointer;
}

.d-cgpt-prompt-icon {
	cursor: pointer;
}

.d-cgpt-prompt > div > button:hover, .d-cgpt-prompt-icon:hover {
	opacity: 0.8;
}

.d-cgpt-prompt > div > img:first-child {
	width: 30px;
}

.d-cgpt-prompt > div > img:last-child {
	width: 20px;
}

.d-cgpt-explain-button-wrapper {
	display: flex;
    align-items: center;
    column-gap: 15px;
}

.d-cgpt-explain-button-enabled {
	--web-ui_button-background-color: var(--d-cgpt-secondary-color) !important;
	--__internal__background-color: var(--d-cgpt-secondary-color) !important;
	--__internal__background-color-disabled: var(--d-cgpt-secondary-color) !important;
	--web-ui_button-border-color: var(--d-cgpt-accent-color) !important;
	--__internal__border-color: var(--d-cgpt-accent-color) !important;
	color: var(--d-cgpt-accent-color) !important;
	background: var(--d-cgpt-secondary-color) !important;
	background-color: var(--d-cgpt-secondary-color) !important;
	border-color: var(--d-cgpt-accent-color) !important;
	cursor: pointer !important;
}

.d-cgpt-explain-button-enabled:hover {
	opacity: 0.8;
}

.d-cgpt-explain-button-disabled {
    --__internal__background-color-disabled: var(--web-ui_button-background-color-disabled, rgb(var(--color-swan))) !important;
    --__internal__background-color: var(--web-ui_button-background-color-disabled, rgb(var(--color-swan))) !important;
	--__internal__color-disabled: var(--web-ui_button-color-disabled, rgb(var(--color-hare))) !important;
	--__internal__color: var(--web-ui_button-color-disabled, rgb(var(--color-hare))) !important;
	--__internal__border-color: unset !important;
	color: var(--__internal__color-disabled) !important;
	transform: translateY(var(--__internal__lip-width)) translateZ(0);
	outline: none;
	cursor: default !important;
	background: none;
	border-color: transparent;
	border-radius: var(--__internal__border-radius);
    border-style: solid;
    border-width: 0 0 var(--__internal__lip-width);
	pointer-events: none !important;
}

.d-cgpt-explain-area {
	max-width: 45%;
	min-width: 500px;
	border: 1px solid rgb(var(--color-swan));
	background-color: rgb(var(--color-snow));
	border-radius: 16px;
	padding: 20px;
	padding-bottom: 40px;
	min-height: 400px;
	position: relative;
	z-index: 1000;
}

.d-cgpt-explain-area-closed {
	right: -390px !important;
}

.d-cgpt-explain-area > div {
	padding: 10px 25px;
}

.d-cgpt-explain-bottom {
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    width: fit-content;
    margin: auto;
	display: flex;
    align-items: center;
    column-gap: 10px;
}

.d-cgpt-explain-bottom > div {
    border-radius: 16px;
    padding: 5px 15px !important;
    background-color: var(--d-cgpt-faded-accent-color);
    border: 1px solid var(--d-cgpt-accent-color);
    color: var(--d-cgpt-accent-color);
	width: fit-content;
}

.d-cgpt-explain-bottom > div > span {
	font-size: 12px;
	font-weight: bold;
}

.d-cgpt-explain-tokens {
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.d-cgpt-explain-tokens > img {
    width: 14px;
}

.d-cgpt-explain-header {

}

.d-cgpt-explain-header > h3 {
	font-size: 25px;
	cursor: text;
}

.d-cgpt-explain-content {
    text-align: left;
    white-space: pre-wrap; /* Preserves whitespace and wraps text */
    cursor: text;
    max-height: 350px;
    overflow: auto;
    word-wrap: break-word; /* Ensures long words are broken and wrapped */
    overflow-wrap: break-word; /* Prevents text overflow */
}

.d-cgpt-explain-content p, .d-cgpt-explain-content h1, .d-cgpt-explain-content h2, .d-cgpt-explain-content h3 {
	margin: unset;
}

.d-cgpt-explain-content ul, .d-cgpt-explain-content ol {
    margin: 0;
    padding: 0 30px;
}

.d-cgpt-explain-content li {
	margin: -5px 0;
}

.d-cgpt-explain-content ul {
	list-style: disc;
}

.d-cgpt-explain-content ol {
	list-style: decimal;
	
}

.d-cgpt-popup {

}

.d-cgpt-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.d-cgpt-popup-container {
    max-width: 500px;
    max-height: 660px;
	background: rgb(var(--color-snow));
    border: 2px solid rgb(var(--color-swan));
	border-radius: 16px;
	color: rgb(var(--color-eel));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 1000;
	overflow: hidden;
}

.d-cgpt-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
    padding: 15px 20px;
    font-size: 22px;
	border-bottom: 2px solid rgb(var(--color-swan));
}

.d-cgpt-popup-header-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    gap: 15px;
}

.d-cgpt-popup-header-close {
	cursor: pointer;
}

.d-cgpt-popup-header-close:hover {
	opacity: 0.8;
}

.d-cgpt-popup-header-close img {
	width: 22px;
}

.d-cgpt-popup-content {
	padding: 15px;
	overflow: auto;
	height: 580px;
}

/* scroll thumb */
.d-cgpt-popup-content::-webkit-scrollbar {
	width: 10px;
}

.d-cgpt-popup-content::-webkit-scrollbar-thumb {
	background-color: rgb(var(--color-swan));
}

.d-cgpt-popup-content::-webkit-scrollbar-thumb:hover {
	background-color: var(--d-cgpt-accent-color);
}

.d-cgpt-popup-content::-webkit-scrollbar-track {
	background-color: rgb(var(--color-snow));
}


/* TODO: merge with d-cgpt-explain-content */

.d-cgpt-markdown p, .d-cgpt-markdown h1, .d-cgpt-markdown h2, .d-cgpt-markdown h3 {
	margin: unset;
}

.d-cgpt-markdown ul, .d-cgpt-markdown ol {
    margin: 0;
    padding: 0 30px;
}

.d-cgpt-markdown li {
	margin: -5px 0;
}

.d-cgpt-markdown ul {
	list-style: disc;
}

.d-cgpt-markdown ol {
	list-style: decimal;
}

.d-cgpt-changelog {

}

.d-cgpt-changelog-demo {
	width: 100%;
	max-width: 400px;
}

.d-cgpt-changelog a {
	color: var(--d-cgpt-accent-color);
}

.d-cgpt-changelog ul, .d-cgpt-changelog ol {

}

.d-cgpt-changelog li {
    line-height: normal;
    padding: 6px 0px;
}

.d-cgpt-changelog p {

}

.d-cgpt-changelog h1 {
	padding: 10px;
    padding-bottom: 20px;
}

.d-cgpt-changelog h3 {
	margin-top: 12px;
	margin-bottom: 8px;
}

.cursor {
	display: inline-block;
	width: 8px;
	background-color: rgb(var(--color-black-text));
    color: rgb(var(--color-snow));
	margin-left: 2px;
	animation: blink 0.8s steps(1) infinite;
  }

  @keyframes blink {
	50% { opacity: 0; }
  }

.d-cgpt-explain-area-closed .d-cgpt-explain-close > img {
	transform: rotate(-180deg) !important;
}

.d-cgpt-explain-close {
	display: none;
	position: absolute;
    left: -42px;
    top: 0;
    bottom: 0;
    align-items: center;
    padding: unset;
	cursor: pointer;
}

.d-cgpt-explain-close-border {
	background-color: rgb(var(--color-swan));
    position: absolute;
    left: 3px;
    right: 0;
    margin: auto;
    height: 95%;
    transition: 0.3s;
    width: 1px;
}

.d-cgpt-explain-close:hover .d-cgpt-explain-close-border, .d-cgpt-explain-close-accent > .d-cgpt-explain-close-border {
	background-color: var(--d-cgpt-accent-color);
}

.d-cgpt-explain-close > img {
    width: 30px;
    border-radius: 50%;
    padding: 2px;
}

.d-cgpt-explain-close:hover > img, .d-cgpt-explain-close-accent > img {
	filter: invert(var(--d-cgpt-accent-icon-invert)) sepia(var(--d-cgpt-accent-icon-sepia)) saturate(var(--d-cgpt-accent-icon-saturate)) hue-rotate(var(--d-cgpt-accent-icon-hue)) brightness(var(--d-cgpt-accent-icon-brightness)) contrast(var(--d-cgpt-accent-icon-contrast)) !important;
	background-color: black !important;
}

.d-cgpt-speech-bubble {
	position: absolute;
    z-index: 10;
    width: 100%;
}

.d-cgpt-speech-bubble > div {
	background: rgb(var(--color-snow));
    border: 2px solid rgb(var(--color-swan));
	border-radius: 16px;
	padding: 0 20px;
	margin: auto;
	max-width: 600px;
	position: relative;
}

.d-cgpt-speech-bubble textarea {
	width: 100%;
	height: 60px;
	background-color: unset;
    border-color: white;
    border: unset;
    border-radius: unset;
	color: rgb(var(--color-eel));
	padding: 10px;
}

.d-cgpt-speech-bubble-tip {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid rgb(var(--color-swan));
	transform: rotate(180deg);
    top: unset;
    left: unset;
    right: 58px;
}

.d-cgpt-speech-bubble-mobile {
	display: unset !important;
	bottom: 60px !important;
}

.d-cgpt-speech-bubble-mobile .d-cgpt-speech-bubble-tip {
	display: none;
}

.d-cgpt-swipe-icon {
	position: absolute;
	z-index: 100;
    display: flex;
    align-items: center;
    flex-direction: column;
	gap: 4px;
    top: 90px;
    right: 30px;
	cursor: pointer;
	display: none;
}

.d-cgpt-swipe-icon > img {
    width: 25px;
}

.d-cgpt-swipe-icon > span {
	font-size: 11px;
	color: var(--d-cgpt-accent-color);
}

.d-cgpt-settings-container {
	display: flex;
	flex-direction: column;
	padding: unset;
}

.d-cgpt-settings-container .d-cgpt-settings {
	padding: 8px 0;
	gap: 48px;
}

.d-cgpt-settings-container .d-cgpt-settings > label {
    -webkit-font-smoothing: antialiased;
    font: var(--text-heading-weight-small) var(--text-heading-size-small) / var(--text-heading-line-height-small) din-round, sans-serif;
    letter-spacing: var(--text-heading-letter-spacing-small);
    text-transform: var(--text-heading-casing-small);
}

.d-cgpt-settings-container .d-cgpt-settings > label > div {
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: rgb(var(--color-wolf));
    font: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-line-height) din-round, sans-serif;
    letter-spacing: var(--text-caption-letter-spacing);
    margin-top: 2px;
    text-transform: var(--text-caption-casing);
}

.d-cgpt-settings-container .d-cgpt-settings-group > h3 {
	margin: 15px 0 3px;
}

.d-cgpt-settings-container .d-cgpt-custom-checkbox-ball {
    height: 29px;
    width: 28px;
    margin-top: -1px;
}

.d-cgpt-settings-container .d-cgpt-custom-checkbox-back {
	width: 50px;
}

.d-cgpt-bug-report {
	width: fit-content !important;
	height: fit-content !important;
}

.d-cgpt-bug-report img {
    width: 26px;
	height: 26px;
	background-color: unset !important;
}

.d-cgpt-free-tag {
    position: absolute;
    bottom: -13px;
    background-color: white;
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 11px;
    left: -3px;
    right: 0;
    width: fit-content;
    background-color: rgb(var(--color-swan));
    color: rgb(var(--color-eel));
    font-weight: bold;
}

.d-cgpt-context-menu {
    position: absolute;
    top: 100px;
    background-color: rgb(var(--color-snow));
	border: 2px solid rgb(var(--color-swan));
	border-radius: var(--web-ui_card-border-radius, 12px);
	border-bottom-width: 4px;
	overflow: hidden;
}

.d-cgpt-context-menu > a {
	color: var(--d-cgpt-accent-color);
}

.d-cgpt-context-menu > a, .d-cgpt-context-menu > div {
	display: flex;
    align-items: center;
    gap: 10px;
}

.d-cgpt-context-menu > a img, .d-cgpt-context-menu > div img {
	width: 20px;
}

.d-cgpt-context-menu > a .external-link-icon {
    width: 14px;
    opacity: 0.7;
    position: absolute;
    right: 10px;
}

.d-cgpt-context-menu-button img {
	width: 16px !important;
}

.d-cgpt-context-menu > a:hover, .d-cgpt-context-menu-button:hover {
	background-color: var(--web-ui_card-color-hover, rgb(var(--color-polar)));
	cursor: pointer;
}

.d-cgpt-context-menu > div, .d-cgpt-context-menu > a {
	padding: 10px;
}

.d-cgpt-context-menu > div:not(:last-child), .d-cgpt-context-menu > a {
    border-bottom: 2px solid rgb(var(--color-swan));
}

.d-cgpt-button-inactive {
	opacity: 0.5;
	pointer-events: none;
}

.d-cgpt-button-active {
	color: var(--web-ui_card-color-checked, rgb(var(--color-whale))) !important;
	border-color: var(--web-ui_card-border-color-checked, rgb(var(--color-blue-jay))) !important;
	background-color: var(--web-ui_card-background-color-checked, rgb(var(--color-iguana))) !important;
}

.d-cgpt-button-active img {
	filter: invert(59%) sepia(83%) saturate(1850%) hue-rotate(168deg) brightness(95%) contrast(104%);
}

.d-cgpt-stat-entries {
	display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    width: 500px;
}

@media screen and (max-width: 1150px) {
	.d-cgpt-explain-area {
		position: absolute;
		background-color: rgb(var(--color-snow));
		height: 85%;
		right: 0;
		width: 450px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		padding: 20px 0px;
		transition: 0.3s;
		max-width: unset important;
		min-width: unset !important;
	}

	.d-cgpt-explain-close {
		display: flex;
	}

	.d-cgpt-explain-content {
		max-height: 84%;
		font-size: 17px;
	}
}

@media screen and (min-width: 1150px) {
	.d-cgpt-explain-area {
		right: unset !important;
	}
}

@media screen and (max-width: 700px) {
	.d-cgpt-explain-area {
		max-width: unset;
		min-width: unset;
		width: 100%;
		border-radius: 16px;
		padding-top: 30px;
		bottom: 100px;
		z-index: 10;
	}

	.d-cgpt-explain-area-closed {
		right: 0 !important;
		bottom: -700px !important;
	}

	.d-cgpt-explain-bottom {
		/* bottom: unset;
    	top: -28px; */
		/* display: none; */
	}

	.d-cgpt-explain-close {
		/* left: 0;
		right: 0;
		top: -25px;
		bottom: unset; */
		display: none;
	}

	.d-cgpt-explain-close-border {
		height: 1px;
		width: 95%;
		left: 0;
		top: 24px;
	}

	.d-cgpt-explain-close > img {
	    margin: auto;
    	transform: rotate(90deg);
	}

	.d-cgpt-explain-area-closed .d-cgpt-explain-close > img {
		transform: rotate(-90deg) !important;
	}
	
	.d-cgpt-speech-bubble {
		display: none;
	}

	.d-cgpt-swipe-icon {
		display: flex;
	}


	a.d-cgpt-active {
		border: 2px solid var(--d-cgpt-accent-color) !important;
		background-color: var(--d-cgpt-secondary-color) !important;
		border-radius: 8px;
	}

	a.d-cgpt {
		border: 2px solid var(--color-snow) !important;
	}

	.d-cgpt-context-menu {
		top: 70px;
	}
}

@media screen and (min-width: 700px) {
	.d-cgpt-explain-area-wrapper {
		display: flex !important;
		align-items: center;
		column-gap: 50px;
	}
}

@media screen and (max-width: 550px) {
	.d-cgpt-explain-content {
		font-size: 16px;
	}

	.d-cgpt-explain-header > h3 {
		font-size: 20px;
	}

	.d-cgpt-explain-header {
		text-align: left;
	}

	.d-cgpt-stat-entries {
		width: 90%;
	}

	.d-cgpt-stat-entries > div {
		margin: auto !important;
		width: 100% !important;
	}
}