☰

ChatGpt Material Dark With Wide Mode and Customization

Experience ChatGPT with a sleek Material Dark theme. Enjoy a distraction-free, immersive AI interaction on chat.openai.com.

  1. 		/* ==UserStyle==
  2. @name           ChatGpt Material Dark With Wide Mode and Customization
  3. @namespace      ameer-jamal.github.io/
  4. @version        2.2.88
  5. @description    Experience ChatGPT with a sleek Material Dark theme. Enjoy a distraction-free, immersive AI interaction on chat.openai.com.
  6. @author         Ameer Jamal
  7. @license        CC BY-ND 4.0
  8. @preprocessor   less
  9.  
  10. @var color userInputTextColor "User Input Text Color" rgb(105,187,197)
  11. @var color userInputBackgroundColor "User Input Background" #000000
  12. @var color userInputBubbleColor "User Input Background Bubble" rgba(0,0,0,0)
  13. @var color gptOutputBackgroundColor "GPT Output Background" #2b404c61
  14. @var color gptMainBodyOutputTextColor "GPT Main Body Output Text Color" #C0C0C0
  15. @var color codeKeyWordsOutput "GPT Code Keywords Color" #E8922E
  16. @var color headingOutput "GPT Headings" #fff
  17. @var color boldOutput "GPT Bold words" #e5fdff
  18. @var color linksOutput "GPT links" #53b7ff
  19. @var color verticalChatLines "Paragraph line split color" #2fffd2
  20. @var color lineColor "Line work/borders color" rgba(255, 255, 255, .2)
  21.  
  22. @var checkbox   wideMode  "GPT Wide Mode" 1
  23. @var checkbox   hideAddTeams "Hide Add Teams in chat history" 1
  24. @var checkbox   noTextWrap "Show Full Chat Descriptions (No Text Wrap)" 0
  25. @var number     textInputBarMaxHeight "Adjust the max height of text input (px)"     ['px', 350, 1, null, 1]
  26.  
  27. ==/UserStyle== */
  28. 		/*
  29.  * License: Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0)
  30.  * 
  31.  * You are free to:
  32.  * - Share — copy and redistribute the material in any medium or format.
  33.  * 
  34.  * Under the following terms:
  35.  * - Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
  36.  *   You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
  37.  * - No Derivatives — If you remix, transform, or build upon the material, you may not distribute the modified material.
  38.  * - No Commercial Use — You may not use t
  39.  * For the full license text, visit https://creativecommons.org/licenses/by-nd/4.0/
  40.  * For any questions or concerns, please reach out to the original author.
  41.  
  42. */
  43. 		@-moz-document regexp("https://chat.openai.com(/.*)?"),
  44. 		regexp("https://auth.openai.com(/.*)?"),
  45. 		regexp("https://auth0.openai.com(/.*)?"),
  46. 		regexp("https://chatgpt.com(/.*)?") {
  47.  
  48. 			@import (css) url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
  49. 			@import (css) url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
  50. 			@import (css) url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
  51. 			@import (css) url('href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  52.  
  53. 			:root {
  54. 				--futuristic-gradient: linear-gradient(to right, #0f2027c4, #203a43b0, #2c5364cf);
  55. 				--darker-futristic-gradient: linear-gradient(to right, #245062c4, #203a43b0, #000000cf);
  56. 				/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  57. 				--chat-background-gradient: linear-gradient(180deg, rgb(32 33 35 / 0%), rgb(32 33 35) 58.85%);
  58. 				--user-input-background: @userInputBackgroundColor;
  59. 				--main-chat-border-color: rgba(137, 126, 109, 0.35);
  60. 				--deep-space: linear-gradient(to left, #000, #434343cc);
  61. 				--deep-space-to-top-transparent: linear-gradient(to top, #4343434f, #0D0D0D);
  62.  
  63. 				--alerts: linear-gradient(to right, #ff512ff0, #f09819f0);
  64.  
  65. 				--code-background: #1E1E1E;
  66. 				--code-topbar: radial-gradient(circle at -5.9%, #2c5364 0%, #00283a 15.9%, #1E1E1E 24.5%, #1E1E1E 100%);
  67.  
  68. 				--table-header: linear-gradient(to right, @gptOutputBackgroundColor 0%, @gptOutputBackgroundColor 20%, transparent 50%, @gptOutputBackgroundColor 80%, @gptOutputBackgroundColor 100%);
  69. 				--table-hover: #ffffff30;
  70.  
  71. 				--selected-chat-gradient: linear-gradient(to right, @gptOutputBackgroundColor , #0D0D0D 100%);
  72. 				--canvas-top-bar-gradient: linear-gradient(to right, #0D0D0D, @gptOutputBackgroundColor);
  73. 				--chat-history-list: #C0C0C0;
  74. 				--sidebar-surface-secondary: #676767a6;
  75.  
  76. 				/*Highlight selected chat not used in favor of --sidebar-surface-tertiary*/
  77. 				/* Alternative user input text color: #B0C4DE */
  78. 				--user-input-text: @userInputTextColor;
  79. 				--text-secondary: @userInputTextColor;
  80. 				--message-surface: @userInputBubbleColor;
  81. 				--user-input-text-less-transparent: rgba(@userInputTextColor, 0.4);
  82.  
  83. 				--main-body-output-text-color: @gptMainBodyOutputTextColor;
  84. 				--code-key-words: @codeKeyWordsOutput;
  85. 				--heading-output: @headingOutput;
  86. 				--bold-output: @boldOutput;
  87. 				--links-output: @linksOutput;
  88. 				--line-color: @lineColor;
  89. 				--vertical-chat-lines: @verticalChatLines;
  90. 				--sidebar-surface-primary: @userInputBackgroundColor;
  91. 				--bg-elevated-secondary: @userInputBackgroundColor
  92. 			}
  93.  
  94. 			/*********************************************************************************/
  95. 			/**************HOME PAGE WHEN NEW CHAT STARTING **********************************/
  96. 			/*logo*/
  97. 			.mb-3.h-12.w-12 {
  98. 				filter: invert(1);
  99. 			}
  100.  
  101. 			/*Auto prompts on home screen*/
  102. 			button.btn.relative.btn-neutral.group.w-full.whitespace-nowrap.rounded-xl.px-4.py-3.text-left.text-token-text-primary.md\:whitespace-normal:hover {
  103. 				background: var(--futuristic-gradient)!important;
  104. 				border-radius: 10px;
  105. 			}
  106.  
  107. 			/* Keyframes for red to white background transition */
  108. 			@keyframes redPulseBG {
  109. 				0% {
  110. 					background-color: #585858;
  111. 				}
  112.  
  113. 				50% {
  114. 					background-color: #979797;
  115. 				}
  116.  
  117. 				100% {
  118. 					background-color: #585858;
  119. 				}
  120. 			}
  121.  
  122. 			/* Input box send message animation */
  123. 			@keyframes heartbeat {
  124. 				0% {
  125. 					transform: scale(1);
  126. 				}
  127.  
  128. 				14% {
  129. 					transform: scale(1.1);
  130. 				}
  131.  
  132. 				28% {
  133. 					transform: scale(1);
  134. 				}
  135.  
  136. 				42% {
  137. 					transform: scale(1.1);
  138. 				}
  139.  
  140. 				70% {
  141. 					transform: scale(1);
  142. 				}
  143. 			}
  144.  
  145. 			/* Stop Generating button */
  146. 			button[aria-label*="Stop"] {
  147. 				animation: heartbeat 4s ease-in-out infinite;
  148.  
  149. 				background: #cf2500eb !important;
  150. 			}
  151.  
  152. 			/* Stop Generating button */
  153. 			button[aria-label*="Stop"] {
  154. 				background: #cf2500eb !important;
  155. 			}
  156.  
  157.  
  158. 			/* Send to GPT button */
  159. 			button[data-testid="send-button"]:not(:disabled) {
  160. 				transition: background 2s ease-in-out;
  161. 			}
  162.  
  163. 			/* Send to GPT button on hover */
  164. 			button[data-testid="send-button"]:not(:disabled):hover {
  165. 				transition: background 0.5s ease-in-out;
  166. 				background: var(--user-input-text);
  167. 				animation: heartbeat 4s ease-in-out infinite;
  168. 				filter: saturate(1.5) contrast(1.5);
  169. 			}
  170.  
  171. 			/* Talk with GPT */
  172. 			button[data-testid="composer-speech-button"] {
  173. 				background: var(--user-input-text);
  174. 			}
  175.  
  176. 			[data-testid="share-chat-button"] {
  177. 				color: var(--user-input-background)
  178. 			}
  179.  
  180. 			/* Attachments button */
  181. 			button.flex.items-center.justify-center.text-token-text-primary {
  182. 				transition: background 0.5s ease-in-out;
  183. 				/* Add transition for background */
  184. 			}
  185.  
  186. 			/* Buttons in input box */
  187. 			button.flex.h-full.min-w-8.items-center.justify-center.p-2 {
  188. 				padding: 15px
  189. 			}
  190.  
  191. 			/*Speach Button*/
  192. 			button.relative.flex.h-9.items-center.justify-center.rounded-full.bg-black.text-white.transition-colors.focus-visible\:outline-none.focus-visible\:outline-black.disabled\:text-gray-50.disabled\:opacity-30.can-hover\:hover\:opacity-70.dark\:bg-white.dark\:text-black.w-9 {
  193. 				background: var(--user-input-text);
  194. 				filter: saturate(0.9);
  195. 			}
  196.  
  197. 			button.relative.flex.h-9.items-center.justify-center.rounded-full.bg-black.text-white.transition-colors.focus-visible\:outline-none.focus-visible\:outline-black.disabled\:text-gray-50.disabled\:opacity-30.can-hover\:hover\:opacity-70.dark\:bg-white.dark\:text-black.w-9:hover {
  198. 				filter: saturate(1.5), brightness(4)contrast(4);
  199. 			}
  200.  
  201. 			/* Attachments button on hover */
  202. 			button.flex.items-center.justify-center.text-token-text-primary:hover {
  203. 				background: var(--user-input-text) !important;
  204. 				animation: heartbeat 2s ease-in-out infinite;
  205. 				filter: saturate(1.5) contrast(1.5);
  206. 			}
  207.  
  208. 			/* SVG inside the attachments button on hover */
  209. 			button.flex.items-center.justify-center.text-token-text-primary:hover svg {
  210. 				filter: invert(1);
  211. 				transform: scale(1.2);
  212. 				transition: transform 0.5s ease-in-out;
  213. 			}
  214.  
  215. 			.align-center.flex.h-full.w-full.flex-col.justify-center.self-center.px-2.pb-2.md\:pb-\[8vh\] {
  216. 				background: var(--user-input-background) !important;
  217. 			}
  218.  
  219. 			circle.origin-\[50\%_50\%\].-rotate-90.transition-\[stroke-dashoffset\] {
  220. 				stroke: var(--user-input-text);
  221. 				filter: saturate(3) brightness(3) contrast(200%);
  222. 			}
  223.  
  224. 			/*Xs for images attached*/
  225. 			button.absolute.right-1.top-1.-translate-y-1\/2.translate-x-1\/2.rounded-full.border.border-token-border-heavy.bg-token-main-surface-secondary.p-0\.5.text-token-text-primary.transition-colors.hover\:opacity-100.group-hover\:opacity-100.md\:opacity-0 {
  226. 				color: var(--user-input-text) !important;
  227. 				filter: saturate(3) brightness(3) contrast(200%);
  228. 			}
  229.  
  230. 			/* Input Dialog Bottom Bar */
  231. 			.relative.flex.w-full.items-end.py-3.pl-3 {
  232. 				background: var(--user-input-background);
  233. 				border: 1px solid var(--user-input-text-less-transparent);
  234.  
  235. 				border-radius: 30px;
  236. 				padding-left: 20px;
  237. 				padding-right: 20px;
  238. 			}
  239.  
  240. 			.align-center.flex.h-full.w-full.flex-col.justify-center.self-center.px-2.pb-2.md\:pb-\[8vh\] {
  241. 				background: var(--user-input-background);
  242. 			}
  243.  
  244. 			/* current Model */
  245. 			.draggable.no-draggable-children.sticky.top-0.p-3.mb-1\.5.flex.items-center.justify-between.z-10.h-header-height.font-semibold.bg-token-main-surface-primary.max-md\:hidden {
  246. 				background: linear-gradient( to bottom,
  247. 				rgb(0, 0, 0), /* Darker at the top */
  248. 				rgba(0, 0, 0, 0.0)/* Fully transparent at the bottom */
  249. 				);
  250. 				backdrop-filter: blur(1px);
  251. 			}
  252.  
  253. 			/* current Model Text*/
  254. 			[data-testid="model-switcher-dropdown-button"] {
  255. 				color: var(--user-input-text);
  256. 				filter: saturate(0.7) contrast(1.1);
  257. 			}
  258.  
  259. 			[data-testid="model-switcher-dropdown-button"] .text-token-text-tertiary {
  260. 				color: var(--user-input-text);
  261. 				filter: hue-rotate(90deg);
  262. 			}
  263.  
  264.  
  265. 			.draggable.no-draggable-children.sticky.top-0.p-3.mb-1\.5.items-center.h-header-height.font-semibold.bg-token-main-surface-primary.z-30.mx-auto.flex.w-full.justify-center.gap-2.whitespace-nowrap.pt-\[1\.125rem\] {
  266. 				background: linear-gradient( to bottom,
  267. 				rgb(0, 0, 0), /* Darker at the top */
  268. 				rgba(0, 0, 0, 0.0)/* Fully transparent at the bottom */
  269. 				);
  270. 				backdrop-filter: blur(1px);
  271. 				/* Apply blur effect */
  272. 			}
  273.  
  274. 			.pb-64 {
  275. 				padding-bottom: 0px !important;
  276. 			}
  277.  
  278. 			/*********************************************************************************/
  279. 			/* replace bg color */
  280. 			.dark body,
  281. 			.dark html {
  282. 				background-color: rgba(18, 18, 18, 1);
  283. 			}
  284.  
  285.  
  286. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden {
  287. 				background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
  288. 			}
  289.  
  290. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div.flex.items-center.justify-center.gap-1.border-b.border-black\/10.bg-gray-50.p-3.text-gray-500.dark\:border-gray-900\/50.dark\:bg-gray-700.dark\:text-gray-300 {
  291. 				background-color: rgba(18, 18, 18);
  292. 			}
  293.  
  294. 			/* First launch new chat suggested chat buttons */
  295. 			.dark .btn-neutral {
  296. 				background: var(--code-background);
  297. 			}
  298.  
  299. 			/*change the background of model type*/
  300. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > header > div {
  301. 				backdrop-filter: blur(4px) saturate(100%);
  302. 				-webkit-backdrop-filter: blur(1px) saturate(200%);
  303. 				background-color: rgba(18, 18, 18, 0.2);
  304. 				color: rgb(255, 255, 255);
  305. 			}
  306.  
  307. 			.mt-5 {
  308. 				padding-top: 1.25rem;
  309. 				margin-top: 0;
  310. 				box-sizing: border-box;
  311. 			}
  312.  
  313.  
  314. 			/* code section styling */
  315. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div > div > pre > div > div.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
  316. 				background: #1c1d1f;
  317. 			}
  318.  
  319. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div > div > pre > div > div.p-4.overflow-y-auto {
  320. 				background: #1c1d1f;
  321. 			}
  322.  
  323. 			/*********************************************************************************/
  324. 			/* Code top bar */
  325. 			.flex.items-center.text-token-text-secondary.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-\[5px\].h-9.bg-token-sidebar-surface-primary.dark\:bg-token-main-surface-secondary.select-none {
  326. 				color: #d5d5d5 !important;
  327. 				font-family: 'Fira Code', monospace !important;
  328. 				font-size: 18px;
  329. 				font-weight: bold;
  330. 				background: var(--code-topbar) !important;
  331. 				border-bottom: 0.1px solid #fff9;
  332. 				letter-spacing: 4px;
  333. 				font-variant: small-caps;
  334. 			}
  335.  
  336. 			/*Code background*/
  337. 			.p-4.overflow-y-auto {
  338. 				background: var(--code-background);
  339. 			}
  340.  
  341. 			/* Code snippet font and settings*/
  342. 			code,
  343. 			border- pre,
  344. 			kbd,
  345. 			samp {
  346. 				letter-spacing: 0.5px;
  347. 				font-variant-ligatures: contextual;
  348. 				text-rendering: optimizeLegibility;
  349. 				-webkit-font-smoothing: antialiased;
  350. 				/* for Chrome, Safari */
  351. 				-moz-osx-font-smoothing: grayscale;
  352. 				/* for Firefox */
  353. 			}
  354.  
  355. 			/*Code copy button*/
  356. 			button.flex.gap-1.items-center.select-none.px-4.py-1 {
  357. 				color: white;
  358. 				font-size: 1.2em;
  359. 				font-weight: bold;
  360. 			}
  361.  
  362. 			.icon-xs {
  363. 				height: 1.2rem;
  364. 				width: 1.2rem;
  365. 			}
  366.  
  367. 			code,
  368. 			pre {
  369. 				font-family: 'Fira Code', monospace !important;
  370. 			}
  371.  
  372.  
  373.  
  374. 			/* fading cursor */
  375. 			@-webkit-keyframes fade {
  376. 				0% {
  377. 					opacity: 0;
  378. 				}
  379.  
  380. 				100% {
  381. 					opacity: 1;
  382. 				}
  383. 			}
  384.  
  385. 			@keyframes fade {
  386. 				0% {
  387. 					opacity: 0;
  388. 				}
  389.  
  390. 				100% {
  391. 					opacity: 1;
  392. 				}
  393. 			}
  394.  
  395. 			.result-streaming > :not(ol):not(ul):not(pre):last-child:after,
  396. 			.result-streaming > ol:last-child li:last-child:after,
  397. 			.result-streaming > pre:last-child code:after,
  398. 			.result-streaming > ul:last-child li:last-child:after {
  399. 				-webkit-animation: fade 1s ease-in-out infinite;
  400. 				animation: fade 1s ease-in-out infinite;
  401. 				content: "▋";
  402. 				margin-left: .25rem;
  403. 				vertical-align: baseline;
  404. 			}
  405.  
  406.  
  407.  
  408. 			/* load chat animation*/
  409. 			@keyframes fade-in {
  410. 				0% {
  411. 					opacity: 0;
  412. 				}
  413.  
  414. 				100% {
  415. 					opacity: 1;
  416. 				}
  417. 			}
  418.  
  419. 			@keyframes fade-out {
  420. 				0% {
  421. 					opacity: 1;
  422. 				}
  423.  
  424. 				100% {
  425. 					opacity: 0;
  426. 				}
  427. 			}
  428.  
  429. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div {
  430. 				animation: fade-in 0.25s ease-in forwards;
  431. 				opacity: 0;
  432. 			}
  433.  
  434. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div.fade-out {
  435. 				animation: fade-out 0.25s ease-out forwards;
  436. 			}
  437.  
  438.  
  439. 			/* scroll smoothly */
  440. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div {
  441. 				scroll-behavior: smooth;
  442. 			}
  443.  
  444.  
  445. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.bottom-0.left-0.w-full.border-t.md\:border-t-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:bg-vert-light-gradient.bg-white.dark\:bg-gray-800.md\:\!bg-transparent.dark\:md\:bg-vert-dark-gradient.pt-2.md\:pl-2.md\:w-\[calc\(100\%-\.5rem\)\] > form > div > div.flex.flex-col.w-full.py-\[10px\].flex-grow.md\:py-4.md\:pl-4.relative.border.border-black\/10.bg-white.dark\:border-gray-900\/50.dark\:text-white.dark\:bg-gray-700.rounded-xl.shadow-xs.dark\:shadow-xs {
  446. 				backdrop-filter: blur(5px) saturate(100%);
  447. 				-webkit-backdrop-filter: blur(1px) saturate(200%);
  448. 				background-color: rgba(18, 18, 18, 0.2);
  449. 				border-radius: 12px;
  450. 				border: 1px solid rgba(67, 69, 71, .7);
  451. 				color: rgb(255, 255, 255);
  452. 			}
  453.  
  454. 			/*********************************************************************************/
  455. 			/*Send a message Box*/
  456. 			.dark .dark\:bg-gray-700 {
  457. 				backdrop-filter: blur(5px) saturate(100%);
  458. 				-webkit-backdrop-filter: blur(1px) saturate(200%);
  459. 				background-color: rgba(18, 18, 18, 0.2);
  460. 				border-radius: 12px;
  461. 				border: 1px solid rgba(67, 69, 71, .7);
  462. 				color: rgb(255, 255, 255);
  463. 			}
  464.  
  465.  
  466. 			/*********************************************************************************/
  467. 			/* regenerate response */
  468. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.bottom-0.left-0.w-full.border-t.md\:border-t-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:bg-vert-light-gradient.bg-white.dark\:bg-gray-800.md\:\!bg-transparent.dark\:md\:bg-vert-dark-gradient.pt-2.md\:pl-2.md\:w-\[calc\(100\%-\.5rem\)\] > form > div > div:nth-child(1) > div > button {
  469. 				backdrop-filter: blur(5px) saturate(100%);
  470. 				-webkit-backdrop-filter: blur(1px) saturate(200%);
  471. 				background-color: rgba(18, 18, 18, 0.2);
  472. 				border-radius: 122px;
  473. 				border: 1px solid rgba(54, 55, 57, .7);
  474. 				color: rgb(255, 255, 255);
  475. 			}
  476.  
  477. 			.rounded-sm {
  478. 				border-radius: 122px;
  479. 			}
  480.  
  481.  
  482. 			/*********************************************************************************/
  483. 			/*Chat input */
  484. 			.dark .dark\:bg-gray-800 {
  485. 				--tw-bg-opacity: 1;
  486. 				color: var(--user-input-text) !important;
  487.  
  488. 				background: var(--user-input-background);
  489. 				/* fallback for old browsers */
  490. 				background: -webkit-linear-gradient(to bottom, #434343, var(--user-input-background));
  491. 				/* Chrome 10-25, Safari 5.1-6 */
  492. 				background: var(--user-input)!important;
  493. 			}
  494.  
  495. 			/* Ensure all image divs in user input and images remain transparent */
  496. 			[data-message-author-role="user"] img,
  497. 			[data-message-author-role="user"] div[class*="image"],
  498. 			[data-message-author-role="user"] div.overflow-hidden {
  499. 				background: transparent !important;
  500. 			}
  501.  
  502.  
  503. 			.dark .dark\:bg-gray-800:last-child {
  504. 				background: var(--user-input-background)!important;
  505. 			}
  506.  
  507.  
  508. 			/*Chat output */
  509. 			.dark .dark\:bg-\[\#444654\] {
  510. 				--tw-bg-opacity: 1;
  511. 				background: var(--user-input-background);
  512. 			}
  513.  
  514. 			/*The word ChatGpt in output*/
  515. 			.agent-turn .font-semibold.select-none {
  516. 				color: var(--main-body-output-text-color) !important;
  517. 			}
  518.  
  519. 			/*Chat Background*/
  520. 			.dark .dark\:md\:bg-vert-dark-gradient {
  521. 				background-image: var(--chat-background-gradient)
  522. 			}
  523.  
  524. 			/*Background Base*/
  525. 			[class*="react-scroll-to-bottom--css-"] {
  526. 				background: var(--user-input-background) !important;
  527. 			}
  528.  
  529. 			.sticky.top-0.z-\[9\].w-full {
  530. 				background: #00000017;
  531. 			}
  532.  
  533. 			/* Model icons */
  534. 			.\[\&_svg\]\:h-full.\[\&_svg\]\:w-full.h-4.w-4.text-token-text-primary {
  535. 				border: initial !important
  536. 			}
  537.  
  538. 			/*Gpt Output Background*/
  539. 			.w-full.text-token-text-primary:nth-child(odd):not(svg,
  540. 			button) {
  541. 				background: var(--user-input-background) !important;
  542. 			}
  543.  
  544. 			.w-full.text-token-text-primary:last-child:not(svg,
  545. 			button) {
  546. 				background: var(--user-input-background) !important;
  547. 			}
  548.  
  549. 			/*sidebar underlying color*/
  550. 			.screen-arch\:sticky.screen-arch\:top-\[var\(--sticky-title-offset\)\].z-20.text-token-text-primary.screen-arch\:-me-2.screen-arch\:h-10.screen-arch\:min-w-\[50cqw\].screen-arch\:-translate-x-2.screen-arch\:bg-\[var\(--sidebar-surface\)\].screen-arch\:py-1.screen-arch\:text-token-text-secondary.overflow-clip.ps-2.pt-7.text-xs.font-semibold.break-all.text-ellipsis.select-none {
  551. 				background: var(--user-input-background) !important;
  552. 			}
  553.  
  554. 			[data-discover="true"] {
  555. 				transition: background-color 0.2s ease-in;
  556. 				background: var(--user-input-background) !important;
  557. 				font-size: 16px;
  558. 				border-bottom: 0;
  559. 			}
  560.  
  561. 			[data-discover="true"]:hover {
  562. 				background: var(--selected-chat-gradient) !important;
  563. 			}
  564.  
  565. 			/*Input box bottom middle to right*/
  566. 			.relative.z-\[1\].flex.max-w-full.flex-1.flex-col.h-full.max-xs\:\[--force-hide-label\:none\] {
  567. 				background: var(--user-input-background) !important;
  568. 				border-radius: 20px;
  569. 			}
  570.  
  571. 			.relative.flex.w-full.items-end.px-3.py-3 {
  572. 				background: var(--user-input-background) !important;
  573. 			}
  574.  
  575. 			.border-token-border-xlight.flex.w-full.cursor-text.flex-col.items-center.justify-center.rounded-\[28px\].border.bg-clip-padding.contain-inline-size.overflow-clip.shadow-sm.sm\:shadow-lg.dark\:shadow-none\!.bg-token-main-surface-primary.dark\:bg-\[\#303030\] {
  576. 				border: 1px solid var(--line-color);
  577. 			}
  578.  
  579. 			/*Add File button*/
  580. 			.btn.relative.p-0.text-black.dark\:text-white svg {
  581. 				transition: background-color 0.3s ease, border-color 0.3s ease;
  582. 			}
  583.  
  584. 			.btn.relative.p-0.text-black.dark\:text-white svg:hover {
  585. 				color: var(--user-input-text);
  586. 				animation: heartbeat 2s ease-in-out infinite;
  587. 			}
  588.  
  589.  
  590. 			button.absolute.bottom-1\.5.right-2.rounded-lg.border.border-black.bg-black.p-0\.5.text-white.transition-colors.enabled\:bg-black.disabled\:text-gray-400.disabled\:opacity-10.dark\:border-white.dark\:bg-white.dark\:hover\:bg-white.md\:bottom-3.md\:right-3:hover {
  591. 				transition: background-color 0.3s ease, border-color 0.3s ease;
  592. 			}
  593.  
  594. 			button.absolute.bottom-1\.5.right-2.rounded-lg.border.border-black.bg-black.p-0\.5.text-white.transition-colors.enabled\:bg-black.disabled\:text-gray-400.disabled\:opacity-10.dark\:border-white.dark\:bg-white.dark\:hover\:bg-white.md\:bottom-3.md\:right-3:not(:disabled):hover {
  595.  
  596. 				animation: heartbeat 2s ease-in-out infinite;
  597. 				background: var(--user-input-text);
  598. 				border-color: var(--user-input-text);
  599. 			}
  600.  
  601. 			/** Chat input text */
  602. 			.dark .dark\:prose-invert {
  603. 				--tw-prose-headings: var(--heading-output) !important;
  604. 				--tw-prose-body: var(--main-body-output-text-color) !important;
  605. 				--tw-prose-bold: var(--bold-output) !important;
  606. 				--tw-prose-code: var(--code-key-words) !important;
  607. 				--tw-prose-links: var(--links-output) !important;
  608. 				--tw-prose-quotes: #ffc7f8;
  609. 				--tw-prose-hr: var(--vertical-chat-lines) !important;
  610. 			}
  611.  
  612. 			/** Chat input links */
  613. 			.markdown a {
  614. 				color: var(--links-output) !important;
  615. 			}
  616.  
  617. 			/*********************************************************************************/
  618. 			/*Recent Chat background*/
  619. 			.dark .dark\:bg-gray-900 {
  620. 				background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
  621. 			}
  622.  
  623. 			/*Recent Chat background Hover*/
  624. 			.dark .dark\:bg-gray-900:hover {
  625. 				background: var(--deep-space);
  626. 			}
  627.  
  628.  
  629. 			/*********************************************************************************/
  630. 			/*Chat border seperation between AI and user*/
  631. 			.dark .dark\:border-gray-900\/50 {
  632. 				border-color: var(--main-chat-border-color)
  633. 			}
  634.  
  635. 			#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div > div > div.w-full.h-48.flex-shrink-0 {
  636. 				background-color: rgba(18, 18, 18, var(--tw-bg-opacity));
  637. 			}
  638.  
  639.  
  640. 			#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].md\:flex-col.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div {
  641. 				font-size: 26px
  642. 			}
  643.  
  644. 			.flex-1.overflow-hidden.\@container\/thread.translate-y-\[2rem\].-mt-\[2rem\].pb-\[1\.5rem\] {
  645. 				padding-bottom: 0;
  646. 			}
  647.  
  648. 			/*********************************************************************************/
  649. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > a:hover {
  650. 				box-shadow: 1px 1px 10px rgba(38, 198, 218, 0.9);
  651. 			}
  652.  
  653.  
  654. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 {
  655. 				width: 8px!important;
  656. 			}
  657.  
  658. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > a {
  659. 				padding-right: 7.3rem;
  660. 				border-color: var(--user-input-background);
  661. 			}
  662.  
  663. 			/*********************************************************************************/
  664. 			/* hide sidebar icon */
  665. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > span {
  666. 				background: var(--futuristic-gradient);
  667. 				border-radius: 10px;
  668. 				font-size: 0.9rem;
  669. 				transition: box-shadow 0.3s;
  670. 				text-align: center;
  671. 			}
  672.  
  673.  
  674.  
  675. 			/*Beautify issue so damn annoying*/
  676. 			a.flex.px-3.min-h-\[44px\].py-1.gap-3.transition-colors.duration-200.dark\:text-white.cursor-pointer.text-sm.rounded-md.border.dark\:border-white\/20.gizmo\:min-h-0.hover\:bg-gray-500\/10.h-11.gizmo\:h-10.gizmo\:rounded-lg.gizmo\:border-\[rgba\(0\,
  677. 			0\,
  678. 			0\,
  679. 			0\.1\)\].w-11.flex-shrink-0.items-center.justify-center.bg-white.dark\:bg-transparent {
  680. 				border: var(--user-input-background);
  681. 			}
  682.  
  683. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div > nav > div.mb-1.flex.flex-row.gap-2 > span:hover {
  684. 				box-shadow: 1px 1px 10px rgba(38, 198, 218, 0.9);
  685. 			}
  686.  
  687. 			a.no-draggable.group.rounded-lg.active\:opacity-90.bg-\[var\(--item-background-color\)\].h-9.text-sm.screen-arch\:relative.screen-arch\:bg-transparent.screen-arch\:py-\[7px\].flex.items-center.gap-2\.5.p-2 {
  688. 				background: var(--user-input-background) !important;
  689. 			}
  690.  
  691.  
  692. 			/*********************************************************************************/
  693. 			/* Current Selected Chat*/
  694. 			.bg-gray-800 {
  695. 				background: var(--futuristic-gradient);
  696.  
  697. 				box-shadow: 1px 1px 0 rgba(38, 198, 218, 0);
  698. 				transition: background 0.1s;
  699. 			}
  700.  
  701. 			.hover\:bg-\[\#2A2B32\]:hover {
  702. 				background: var(--deep-space);
  703. 			}
  704.  
  705. 			.from-gray-800 {
  706. 				--tw-gradient-from: rgba(18, 18, 18, 0) var(--tw-gradient-from-position);
  707. 				--tw-gradient-to: rgba(52, 53, 65, 0) var(--tw-gradient-to-position);
  708. 				--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  709. 			}
  710.  
  711. 			.from-gray-900 {
  712. 				--tw-gradient-from: rgba(32, 33, 35) var(--tw-gradient-from-position);
  713. 				--tw-gradient-to: rgba(32, 33, 35, 0) var(--tw-gradient-to-position);
  714. 				--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  715. 			}
  716.  
  717. 			.group:hover .group-hover\:from-\[\#2A2B32\] {
  718. 				--tw-gradient-from: #0000 var(--tw-gradient-from-position);
  719. 				--tw-gradient-to: rgba(42, 43, 50, 0) var(--tw-gradient-to-position);
  720. 				--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  721. 			}
  722.  
  723. 			.hover\:bg-gray-800:hover {
  724. 				--tw-bg-opacity: 1;
  725. 				background-color: rgba(50, 50, 52, var(--tw-bg-opacity));
  726. 			}
  727.  
  728.  
  729. 			#__next > div > div.dark.hidden.bg-gray-900.md\:fixed.md\:inset-y-0.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a.flex.py-3.px-3.items-center.gap-3.rounded-md.hover\:bg-gray-500\/10.transition-colors.duration-200.text-white.cursor-pointer.text-sm.mb-2.flex-shrink-0.border.border-white\/20:hover {
  730. 				opacity: 90%
  731. 			}
  732.  
  733.  
  734. 			#__next > div > div.dark.hidden.bg-gray-900.md\:fixed.md\:inset-y-0.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a.flex.py-3.px-3.items-center.gap-3.rounded-md.hover\:bg-gray-500\/10.transition-colors.duration-200.text-white.cursor-pointer.text-sm.mb-2.flex-shrink-0.border.border-white\/20 span {
  735. 				color: white;
  736. 				font-size: 18px;
  737. 				font-weight: 100;
  738. 			}
  739.  
  740. 			#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].md\:flex-col.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 {
  741. 				color: white;
  742. 				font-size: 18px;
  743. 				font-weight: 400;
  744. 			}
  745.  
  746. 			.flex.flex-1.grow.basis-auto.flex-col.overflow-hidden {
  747. 				background: var(--user-input-background);
  748. 				color: var(--text-secondary)
  749. 			}
  750.  
  751.  
  752. 			body {
  753. 				font-family: 'Open Sans', sans-serif;
  754. 			}
  755.  
  756. 			::-moz-selection {
  757. 				/* Code for Firefox */
  758. 				background: #c2c2ce2b;
  759. 			}
  760.  
  761. 			::selection {
  762. 				background: #c2c2ce2b;
  763. 			}
  764.  
  765. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.flex-1.overflow-hidden > div > div > div {
  766. 				padding-top: 5px;
  767. 				margin-left: 5px;
  768. 				font-family: 'Roboto', sans-serif;
  769. 			}
  770.  
  771. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 > div > div > div {
  772. 				padding-left: 5px;
  773. 				width: 300px !important;
  774. 				background: transparent;
  775. 				padding-top: 5px;
  776. 				font-family: 'JetBrains Mono', sans-serif;
  777. 			}
  778.  
  779. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 {
  780. 				width: 300px !important;
  781. 			}
  782.  
  783. 			/*********************************************************************************/
  784. 			/*All Chat history general  background of the chat history behind elements */
  785. 			nav[aria-label="Chat history"] {
  786. 				background: var(--user-input-background);
  787. 				font-family: "Montserrat", sans-serif;
  788. 				font-optical-sizing: auto;
  789. 				font-weight: 600;
  790. 				font-style: normal;
  791. 			}
  792.  
  793. 			/* Highlighted Current Selected Chat May 24*/
  794. 			.bg-token-sidebar-surface-secondary {
  795. 				background: var(--darker-futristic-gradient)
  796. 			}
  797.  
  798. 			/*All Chat history*/
  799. 			/*Chat history list*/
  800. 			.relative.grow.overflow-hidden.whitespace-nowrap {
  801. 				color: var(--chat-history-list);
  802. 			}
  803.  
  804. 			li.relative .group.relative.rounded-lg.active\:opacity-90.hover\:bg-token-sidebar-surface-secondary:hover {
  805. 				background: var(--deep-space);
  806. 			}
  807.  
  808. 			.group.relative.rounded-lg.active\:opacity-90.bg-token-sidebar-surface-tertiary {
  809. 				background: var(--futuristic-gradient) !important;
  810. 			}
  811.  
  812. 			/*Explore gpts and Add team workspace*/
  813. 			.text-sm {
  814. 				color: var(--chat-history-list);
  815. 			}
  816.  
  817.  
  818. 			/*Username*/
  819. 			.relative.-top-px.grow.-space-y-px.truncate.text-left.text-token-text-primary {
  820. 				color: var(--chat-history-list) !important;
  821. 				border: none !important;
  822. 				background: transparent!important;
  823. 			}
  824.  
  825. 			.flex.w-full.items-center.gap-2.rounded-lg.p-2.text-sm.hover\:bg-token-sidebar-surface-secondary.group-ui-open\:bg-token-sidebar-surface-secondary:hover {
  826. 				background: var(--futuristic-gradient);
  827. 			}
  828.  
  829. 			.flex.w-full.items-center.gap-2.rounded-lg.p-2.text-sm.hover\:bg-token-sidebar-surface-secondary.group-ui-open\:bg-token-sidebar-surface-secondary[aria-expanded="true"] {
  830. 				background: var(--futuristic-gradient);
  831. 			}
  832.  
  833. 			/*The word chat gpt top left*/
  834. 			.grow.overflow-hidden.text-ellipsis.whitespace-nowrap.text-sm.text-token-text-primary {
  835. 				color: var(--chat-history-list) !important;
  836. 				border: none !important;
  837. 			}
  838.  
  839. 			/*Chat History Buttons fix */
  840. 			button.text-token-text-primary {
  841. 				color: var(--chat-history-list);
  842. 				border: none !important;
  843. 				background: transparent !important;
  844. 			}
  845.  
  846. 			button.text-token-text-primary[aria-haspopup="menu"] {
  847. 				background: transparent !important;
  848. 			}
  849.  
  850. 			/*username bottom left*/
  851. 			.relative.-top-px.grow.-space-y-px.overflow-hidden.text-ellipsis.whitespace-nowrap.text-left.text-token-text-primary {
  852. 				background: var(--text-token-tertiary) !important;
  853. 			}
  854.  
  855. 			/*chat gpt text in button top left*/
  856. 			.grow.overflow-hidden.text-ellipsis.whitespace-nowrap.text-sm.text-token-text-primary {
  857. 				background: transparent !important;
  858. 			}
  859.  
  860. 			/*chat gpt button top left (New Chat)*/
  861. 			.bg-token-sidebar-surface-primary {
  862. 				background: var(--user-input-background) !important;
  863. 			}
  864.  
  865. 			.juice\:sticky.juice\:top-0.juice\:z-20.juice\:bg-token-sidebar-surface-primary {
  866. 				position: -webkit-sticky;
  867. 				/* For Safari */
  868. 				background-color: var(--user-input-background);
  869. 			}
  870.  
  871. 			/*Hover over chat gpt text in button top left (New Chat)*/
  872. 			.group.flex.h-10.items-center.gap-2.rounded-lg.bg-token-sidebar-surface-primary.px-2.font-medium:hover {
  873. 				background: var(--futuristic-gradient) !important;
  874. 			}
  875.  
  876.  
  877. 			/*Recent Chat background Hover For Day/Times Updated*/
  878. 			span.flex.h-9.items-center {
  879. 				background: var(--user-input-background) !important;
  880. 			}
  881.  
  882. 			a.flex.h-10.w-full.items-center.gap-2.rounded-lg.px-2.font-medium.text-token-text-primary.hover\:bg-token-sidebar-surface-secondary {
  883. 				background-color: var(--user-input-background) !important;
  884. 			}
  885.  
  886. 			/*GPTS Button top left in chat history*/
  887. 			a.flex.h-10.w-full.items-center.gap-2.rounded-lg.px-2.font-medium.text-token-text-primary.hover\:bg-token-sidebar-surface-secondary:hover {
  888. 				background: var(--futuristic-gradient) !important;
  889. 			}
  890.  
  891. 			/*********************************************************************************/
  892. 			#__next > div > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.flex-1.overflow-hidden > div {
  893. 				background: var(--user-input-background);
  894. 			}
  895.  
  896. 			\/75 {
  897. 				background-color: rgb(185 185 185 / 25%);
  898. 			}
  899.  
  900. 			#headlessui-dialog-panel-\:r8\: {
  901. 				backdrop-filter: blur(5px) saturate(100%);
  902. 				-webkit-backdrop-filter: blur(1px) saturate(100%);
  903. 				background-color: rgba(18, 18, 18, 0.2);
  904. 				border-radius: 12px;
  905. 				border: 1px solid rgba(67, 69, 71, .7);
  906. 				color: rgb(255, 255, 255);
  907. 			}
  908.  
  909. 			/*********************************************************************************/
  910. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(4) > span > span.rounded-md.bg-yellow-200.py-0\.5.px-1\.5.text-xs.font-medium.uppercase.text-gray-800 {
  911. 				display: none;
  912. 			}
  913.  
  914. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(3) {
  915. 				font-size: 0;
  916. 				width: 60px;
  917. 			}
  918.  
  919. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(4) {
  920. 				font-size: 0;
  921. 				width: 60px;
  922. 			}
  923.  
  924. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(5) {
  925. 				font-size: 0;
  926. 				width: 60px;
  927. 			}
  928.  
  929. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(6) {
  930. 				font-size: 0;
  931. 				width: 60px;
  932. 			}
  933.  
  934. 			/* .result-streaming {display: none;} */
  935. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div > nav > a:nth-child(7) {
  936. 				font-size: 0;
  937. 				width: 60px;
  938. 			}
  939.  
  940. 			.h-4 w-4 {
  941. 				display: none;
  942. 			}
  943.  
  944. 			/*hide disclaimer and version */
  945. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.bottom-0.left-0.w-full.border-t.md\:border-t-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:bg-vert-light-gradient.bg-white.dark\:bg-gray-800.md\:\!bg-transparent.dark\:md\:bg-vert-dark-gradient.pt-2.md\:-left-2 > div > span {
  946. 				display: none;
  947. 			}
  948.  
  949. 			/* Double click on chat to rename chat */
  950. 			.absolute.bottom-0.left-\[7px\].right-2.top-0.flex.items-center.bg-token-sidebar-surface-secondary {
  951. 				background: var(--user-input-background)
  952. 			}
  953.  
  954. 			/* chatgpt title */
  955. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.flex.h-full.max-w-full.flex-1.flex-col > main > div.flex-1.overflow-hidden > div > div > div > div.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100 > h1 {
  956. 				font-size: 0px;
  957. 			}
  958.  
  959. 			#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.flex.h-full.max-w-full.flex-1.flex-col > main > div.flex-1.overflow-hidden > div > div > div > div.text-gray-800.w-full.md\:max-w-2xl.lg\:max-w-3xl.md\:h-full.md\:flex.md\:flex-col.px-6.dark\:text-gray-100 > div {
  960. 				display: none;
  961. 			}
  962.  
  963. 			/* Chat history backgroud plus remove gradient*/
  964. 			.bg-gradient-to-l {
  965. 				display: none;
  966. 			}
  967.  
  968. 			.bg-gray-900 {
  969. 				background-color: transparent;
  970. 			}
  971.  
  972. 			/* What can I help you with*/
  973. 			.grid.min-h-\[74px\].grid-cols-1.items-center.justify-end {
  974. 				color: var(--user-input-text)
  975. 			}
  976.  
  977.  
  978. 			/*********************************************************************************/
  979. 			/*2023 Novemeber update in progress*/
  980. 			/*Stick top*/
  981. 			.sticky.top-0.flex.items-center.justify-between.z-10.h-14 {
  982. 				background: linear-gradient(to right, black, rgba(0, 0, 0, 0) 50%, black);
  983. 			}
  984.  
  985. 			/*Text Area to enter chat*/
  986. 			textarea#prompt-textarea {
  987. 				background: var(--deep-space) !important;
  988. 				max-height: @textInputBarMaxHeight !important;
  989. 				border-top: none !important;
  990. 				border-radius: 30px !important;
  991. 				padding: 15px !important;
  992. 			}
  993.  
  994. 			.w-full.md\:pt-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:w-\[calc\(100\%-\.5rem\)\].juice\:w-full {
  995. 				background: var(--user-input-background);
  996. 				padding-bottom: 10px
  997. 			}
  998.  
  999. 			/* Black background underneath the inpujt box */
  1000. 			.md\:pt-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.w-full {
  1001. 				background: var(--user-input-background);
  1002. 			}
  1003.  
  1004. 			div#radix {
  1005. 				background: #00000085 !important;
  1006. 			}
  1007.  
  1008. 			/*Gpt input*/
  1009. 			.text-token-text-primary:not(svg,
  1010. 			button,
  1011. 			a,
  1012. 			.flex,
  1013. 			h3,
  1014. 			.default-browser) {
  1015. 				background: var(--selected-chat-gradient) !important;
  1016. 			}
  1017.  
  1018. 			article:not(:last-child) {
  1019. 				border-bottom: solid rgba(@lineColor, .2) 1px;
  1020. 			}
  1021.  
  1022.  
  1023. 			/*Gpt input background*/
  1024. 			div#composer-background {
  1025. 				background: var(--user-input-background) !important;
  1026. 				border: 1px solid rgba(@lineColor, 0.3);
  1027. 			}
  1028.  
  1029. 			.flex.flex-col.text-sm.md\:pb-9 {
  1030. 				background: var(--user-input-background);
  1031. 			}
  1032.  
  1033. 			.flex.flex-col.gap-2.pb-2.text-token-text-primary.text-sm.juice\:mt-5 {
  1034. 				border-top: none !important;
  1035. 			}
  1036.  
  1037. 			.flex.flex-col.gap-3.sm\:flex-row-reverse.mt-5.sm\:mt-4 {
  1038. 				background: transparent !important;
  1039. 				margin-top: 25px;
  1040. 			}
  1041.  
  1042. 			.font-semibold.text-token-text-primary {
  1043. 				border-top: none !important;
  1044. 			}
  1045.  
  1046. 			.text-token-text-primary {
  1047. 				color: var(--user-input-text) !important;
  1048. 				/*input Color?*/
  1049. 			}
  1050.  
  1051. 			/*Gpt main screen input Welcome Screen */
  1052. 			.flex.h-full.flex-col.items-center.justify-center.text-token-text-primary {
  1053. 				background: var(--user-input-background) !important;
  1054. 			}
  1055.  
  1056. 			.flex.h-full.flex-col.overflow-y-auto {
  1057. 				background: var(--user-input-background) !important;
  1058. 			}
  1059.  
  1060. 			.p-2 {
  1061. 				padding-right: 2rem
  1062. 			}
  1063.  
  1064. 			.py-2\.5:not(:last-child) {
  1065. 				color: white;
  1066. 			}
  1067.  
  1068.  
  1069. 			/*Icon in more text*/
  1070. 			.icon-md {
  1071. 				stroke: white;
  1072. 				stroke-width: 0px;
  1073. 			}
  1074.  
  1075. 			/*Disclamer text*/
  1076. 			.relative.px-2.py-2.text-center.text-xs.text-gray-600.dark\:text-gray-300.md\:px-\[60px\] {
  1077. 				color: var(--user-input-background);
  1078. 			}
  1079.  
  1080. 			.gizmo .markdown > :not(pre),
  1081. 			.gizmo .markdown > :not(pre) > :not(a) {
  1082. 				color: var(--main-body-output-text-color);
  1083. 			}
  1084.  
  1085. 			.markdown h1,
  1086. 			.markdown h2,
  1087. 			.markdown h3,
  1088. 			.markdown h4,
  1089. 			.markdown h4,
  1090. 			.markdown h4 {
  1091. 				color: var(--heading-output) !important;
  1092. 			}
  1093.  
  1094. 			.prose :where(strong):not(:where([class~=not-prose] *)) {
  1095. 				color: var(--bold-output) !important;
  1096. 			}
  1097.  
  1098. 			/*********************************************************************************/
  1099. 			/* Current Chat edit or "remove" current chat buttons*/
  1100. 			button.p-1.hover\:text-white svg {
  1101. 				stroke: #cacaca;
  1102. 			}
  1103.  
  1104. 			button.p-1.hover\:text-white svg:hover {
  1105. 				stroke: white;
  1106. 			}
  1107.  
  1108. 			.p-1 {
  1109. 				padding: 0.01rem
  1110. 			}
  1111.  
  1112. 			button.flex.items-center.justify-center.text-token-text-primary.transition.hover\:text-token-text-secondary.radix-state-open\:text-token-text-secondary:has(svg.icon-md) {
  1113. 				background: transparent !important
  1114. 			}
  1115.  
  1116. 			.radix-state-open\:bg-\[\#f5f5f5\][data-state=open] {
  1117. 				background-color: rgb(107 107 107 / 54%);
  1118. 			}
  1119.  
  1120. 			/*********************************************************************************/
  1121. 			/*Alerts*/
  1122. 			div[role="alert"] {
  1123. 				background: var(--alerts);
  1124. 				border: transparent;
  1125. 			}
  1126.  
  1127. 			.border-white\/20 {
  1128. 				border-color: transparent
  1129. 			}
  1130.  
  1131. 			/*********************************************************************************/
  1132. 			/*Select GPT version menu*/
  1133. 			.popover[role="menu"] {
  1134. 				background: #0e0e0ea1 !important;
  1135. 				backdrop-filter: blur(4px);
  1136. 			}
  1137.  
  1138. 			.draggable.no-draggable-children {
  1139. 				background: var(--user-input-background) !important;
  1140. 			}
  1141.  
  1142.  
  1143. 			.group.flex.cursor-pointer.items-center.gap-1.rounded-xl.py-2.px-3.text-lg.font-medium:hover {
  1144. 				background: var(--futuristic-gradient);
  1145. 			}
  1146.  
  1147. 			.group.flex.cursor-pointer.items-center.gap-1.rounded-xl.py-2.px-3.text-lg.font-medium[data-state="open"] {
  1148. 				background: var(--futuristic-gradient);
  1149. 			}
  1150.  
  1151. 			[role="menuitem"]:hover {
  1152. 				background: var(--deep-space);
  1153. 			}
  1154.  
  1155. 			[role="menuitem"]:hover:last-child {
  1156. 				background: var(--futuristic-gradient);
  1157. 			}
  1158.  
  1159.  
  1160. 			/*GPT Settings*/
  1161. 			[role="tablist"] {
  1162. 				padding: 0 !important;
  1163. 				margin: 1vh;
  1164. 			}
  1165.  
  1166. 			.m-2.md\:m-0.md\:px-4.md\:pl-6.md\:pt-4.flex.flex-shrink-0.flex-wrap.md\:ml-\[-8px\].md\:min-w-\[180px\].max-w-\[200px\].flex-col.gap-2 {
  1167. 				padding-left: 0.5rem;
  1168. 				height: 100%;
  1169. 				overflow: auto;
  1170. 			}
  1171.  
  1172. 			h2[as="h3"].text-token-text-primary {
  1173. 				color: white !important;
  1174. 				border-top: 0;
  1175. 			}
  1176.  
  1177. 			div[role="dialog"] {
  1178. 				background: #31313180;
  1179. 				backdrop-filter: blur(3px);
  1180. 			}
  1181.  
  1182. 			div[role="dialog"] button:hover {
  1183. 				background: #c6c6c6b3;
  1184. 			}
  1185.  
  1186.  
  1187. 			div[role="dialog"] [type="button"][role="tab"][aria-selected="true"] {
  1188. 				background: #c6c6c647 !important;
  1189. 			}
  1190.  
  1191. 			div[role="dialog"] [type="button"][role="tab"][aria-selected="false"]:hover {
  1192. 				background: #c6c6c699 !important;
  1193. 			}
  1194.  
  1195. 			div[role="dialog"] .text-token-text-primary {
  1196. 				color: #cacaca !important;
  1197. 				border: none !important;
  1198. 				background: transparent !important;
  1199. 			}
  1200.  
  1201. 			div[role="dialog"] .focus-none.flex.h-full.flex-col.items-center.justify-start.outline-none {
  1202. 				background: #ea000000;
  1203. 			}
  1204.  
  1205. 			div[role="dialog"] .focus-none.flex.h-full.flex-col.items-center.justify-start.outline-none .relative:not(button) {
  1206. 				background: initial;
  1207. 			}
  1208.  
  1209.  
  1210.  
  1211.  
  1212.  
  1213. 			/*********************************************************************************/
  1214. 			/*GPTs*/
  1215. 			.sticky.top-14.z-10.-ml-4.mb-12.w-screen.bg-token-main-surface-primary.py-2.text-sm.md\:ml-0.md\:w-full.md\:pb-0 {
  1216. 				background: rgba(0, 0, 0, .77);
  1217. 			}
  1218.  
  1219. 			input.z-10.w-full.rounded-xl.border.border-token-border-light.bg-token-main-surface-primary.py-2.pr-3.font-normal.outline-0.delay-100.md\:h-14.h-12.text-base.pl-12 {
  1220. 				background: rgba(0, 0, 0, .77);
  1221. 				outline: 1px #ffffff42 solid;
  1222. 			}
  1223.  
  1224. 			div#headlessui-popover-panel-\:rk\: {
  1225. 				background: black;
  1226. 				outline: 1px #ffffff42 solid;
  1227. 			}
  1228.  
  1229. 			.relative.flex.flex-grow.flex-col.gap-4.overflow-y-auto.px-6.pb-20.pt-16 {
  1230. 				background: black;
  1231. 			}
  1232.  
  1233. 			/*Home before chat*/
  1234. 			.text-base.my-auto.mx-auto.px-3.md\:px-4.w-full.md\:px-5.lg\:px-4.xl\:px-5.h-full {
  1235. 				background: var(--user-input-background);
  1236. 			}
  1237.  
  1238. 			._prosemirror-parent_11fu7_1.text-token-text-primary.max-h-\[25dvh\].max-h-52.overflow-auto.\[scrollbar-width\:thin\].default-browser {
  1239. 				background: transparent !important;
  1240. 			}
  1241.  
  1242. 			/*********************************************************************************/
  1243. 			/*Before login*/
  1244. 			.relative.hidden.flex-1.flex-col.justify-center.px-5.pt-8.md\:flex.md\:px-6.md\:py-[22px].lg\:px-8 {
  1245. 				background: radial-gradient(@gptOutputBackgroundColor , #0000) !important;
  1246. 				color: rgb(0 255 246) !important;
  1247. 			}
  1248.  
  1249. 			[data-testid="login-button"],
  1250. 			button.relative.flex.h-12.items-center.justify-center.rounded-md.text-center.text-base.font-medium.bg-\[\#3C46FF\].text-\[\#fff\].hover\:bg-\[\#0000FF\],
  1251. 			.continue-btn,
  1252. 			._button-login-id {
  1253. 				border: none;
  1254. 				background: radial-gradient(#810af8, #3300c7c4);
  1255. 				transition: background 0.3s ease, transform 0.3s ease;
  1256. 				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  1257. 			}
  1258.  
  1259. 			.social-btn {
  1260. 				border: none;
  1261. 				color: white;
  1262. 				background: linear-gradient(to right, #112d33, #3b0059)
  1263. 			}
  1264.  
  1265. 			[data-testid="login-button"]:hover,
  1266. 			button.relative.flex.h-12.items-center.justify-center.rounded-md.text-center.text-base.font-medium.bg-\[\#3C46FF\].text-\[\#fff\].hover\:bg-\[\#0000FF\]:hover,
  1267. 			.continue-btn:hover,
  1268. 			.social-btn:hover,
  1269. 			[data-provider="windowslive"]:hover,
  1270. 			[data-provider="google"]:hover,
  1271. 			[data-provider="apple"]:hover,
  1272. 			._button-login-id:hover {
  1273. 				border: none;
  1274. 				background: linear-gradient(45deg, #3cceff, #b300ff);
  1275. 				box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  1276. 				animation: heartbeat 4s infinite;
  1277. 			}
  1278.  
  1279. 			main.main-container,
  1280. 			.oai-header,
  1281. 			.oai-footer,
  1282. 			.login-container {
  1283. 				background: var(--user-input-background);
  1284. 				color: white;
  1285. 			}
  1286.  
  1287. 			.oai-header img {
  1288. 				filter: invert(1);
  1289. 			}
  1290.  
  1291. 			h1.title {
  1292. 				color: white;
  1293. 			}
  1294.  
  1295. 			label.email-label {
  1296. 				filter: invert(1);
  1297. 			}
  1298.  
  1299. 			input.email-input {
  1300. 				filter: invert(1);
  1301. 			}
  1302.  
  1303. 			._prompt-box-outer {
  1304. 				filter: invert(1);
  1305. 			}
  1306.  
  1307. 			/* Icons in dropdown gpt type */
  1308. 			.bg-token-main-surface-secondary {
  1309. 				background-color: transparent !important
  1310. 			}
  1311.  
  1312.  
  1313.  
  1314. 			.dark .dark\:bg-token-main-surface-secondary {
  1315. 				background-color: transparent !important
  1316. 			}
  1317.  
  1318. 			/*Side bar glitch of background of white smear when trying to select a chat or hover over */
  1319. 			.absolute.bottom-0.top-0.to-transparent.ltr\:right-0.ltr\:bg-gradient-to-l.rtl\:left-0.rtl\:bg-gradient-to-r.from-token-sidebar-surface-secondary.w-20.from-60\%.juice\:w-10 {
  1320. 				background: transparent;
  1321. 			}
  1322.  
  1323. 			.ltr\:bg-gradient-to-l:where([dir=ltr],
  1324. 			[dir=ltr] *) {
  1325. 				background: transparent;
  1326. 			}
  1327.  
  1328. 			/*Projects background on sidebar bug*/
  1329. 			.z-20.screen-arch\:sticky.screen-arch\:top-\[var\(--sticky-title-offset\)\].select-none.overflow-clip.text-ellipsis.break-all.pl-2.pt-7.text-xs.font-semibold.text-token-text-primary.screen-arch\:-mr-2.screen-arch\:h-10.screen-arch\:min-w-\[50cqw\].screen-arch\:-translate-x-2.screen-arch\:bg-\[var\(--sidebar-surface\)\].screen-arch\:py-1.screen-arch\:text-token-text-secondary {
  1330. 				background: transparent !important;
  1331. 			}
  1332.  
  1333. 			[title="Sora"] {
  1334. 				background: transparent !important;
  1335. 			}
  1336.  
  1337. 			.max-w-md.text-center.text-sm.font-normal.text-token-text-primary {
  1338. 				background: transparent !important;
  1339. 			}
  1340.  
  1341. 			/*********************************************************************************/
  1342. 			/*Scroll Bars*/
  1343. 			/* Hide the entire scrollbar by default */
  1344. 			::-webkit-scrollbar {
  1345. 				opacity: 0;
  1346. 				transition: opacity 0.5s;
  1347. 			}
  1348.  
  1349. 			/* The width for vertical and height for horizontal scrollbars */
  1350. 			::-webkit-scrollbar:vertical {
  1351. 				width: 10px;
  1352. 			}
  1353.  
  1354. 			::-webkit-scrollbar:horizontal {
  1355. 				height: 10px;
  1356. 			}
  1357.  
  1358. 			/* Show the entire scrollbar on hover over the body or any scrollable container */
  1359. 			body:hover::-webkit-scrollbar,
  1360. 			.scrollable-container:hover::-webkit-scrollbar {
  1361. 				opacity: 1;
  1362. 			}
  1363.  
  1364. 			/* The draggable scrolling handle */
  1365. 			::-webkit-scrollbar-thumb {
  1366. 				background: var(--futuristic-gradient);
  1367. 				border-radius: 5px;
  1368. 			}
  1369.  
  1370. 			* {
  1371. 				--sidebar-mask: transparent !important;
  1372. 				scrollbar-color: var(--futuristic-gradient) !important;
  1373. 			}
  1374.  
  1375. 			/* The empty space “below” the scrollbar bar */
  1376. 			::-webkit-scrollbar-track {
  1377. 				background-color: transparent;
  1378. 			}
  1379.  
  1380. 			/*Image issues for shopping*/
  1381. 			.mix-blend-darken {
  1382. 				mix-blend-mode: normal;
  1383. 			}
  1384.  
  1385. 			/*********************************************************************************/
  1386. 			/*Highlighing text*/
  1387. 			*:not(.cm-content.cm-lineWrapping)::selection {
  1388. 				background-color: white !important;
  1389. 				color: blue !important;
  1390. 			}
  1391.  
  1392. 			*:not(.cm-content.cm-lineWrapping)::-moz-selection {
  1393. 				background-color: white !important;
  1394. 				color: blue !important;
  1395. 			}
  1396.  
  1397. 			*:not(.cm-content.cm-lineWrapping)-webkit-selection {
  1398. 				background-color: white !important;
  1399. 				color: blue !important;
  1400. 			}
  1401.  
  1402. 			/*********************************************************************************/
  1403. 			/* Applicable only for keepchatgpt userscript  */
  1404. 			div#kcg {
  1405. 				background: var(--user-input-background) !important;
  1406. 			}
  1407.  
  1408. 			/*********************************************************************************/
  1409. 			/* Applicable only for Grepper save to grepper in code boxs */
  1410. 			.open_grepper_editor.gpt_grepper_add_answer_trigger {
  1411. 				top: 2px !important;
  1412. 				right: 230px !important;
  1413. 				color: #d5d5d5 !important;
  1414. 				font-size: 18px !important;
  1415. 				font-weight: bold;
  1416. 				background: var(--code-topbar);
  1417. 				letter-spacing: 1px;
  1418. 			}
  1419.  
  1420. 			/*********************************************************************************/
  1421. 			/* Applicable only for ChatGPT Chat Organizer - Folders Extension https://chrome.google.com/webstore/detail/chatgpt-chat-organizer-fo/eaoimfbcncfnjkojlfjinakmflglmegk?hl=en-GB  */
  1422. 			.popup-container.fixed.top-0.left-0.w-screen.h-screen.flex.items-center.justify-center.z-50 {
  1423. 				background-color: rgba(69, 69, 69, .69) !important;
  1424. 			}
  1425.  
  1426. 			.groups-div-extension {
  1427. 				color: var(--chat-history-list);
  1428. 			}
  1429.  
  1430. 			.p-4.bg-gray-900.rounded-md.shadow-md {
  1431. 				background: var(--user-input-background);
  1432. 				margin-bottom: 3%;
  1433. 				text-align: center;
  1434. 				line-height: 1.5;
  1435. 			}
  1436.  
  1437. 			.pb-2.border-b.border-gray-300.cursor-pointer.px-1 {
  1438. 				transition: border-radius .5s ease, color 0.5s ease, background 0.5s ease;
  1439. 				padding: 8px;
  1440. 			}
  1441.  
  1442. 			.pb-2.border-b.border-gray-300.cursor-pointer.px-1:hover {
  1443. 				color: white;
  1444. 				background: var(--futuristic-gradient);
  1445. 				border-radius: 55px;
  1446. 			}
  1447.  
  1448.  
  1449. 			a.flex.py-1.px-3.items-center.gap-1.relative.rounded-md.break-all.mb-2 {
  1450. 				display: none;
  1451. 			}
  1452.  
  1453. 			/********************* Tables *************************/
  1454. 			.tableContainer.horzScrollShadows {
  1455. 				background: transparent;
  1456. 				border: 0;
  1457. 			}
  1458.  
  1459. 			article table {
  1460. 				width: 100%;
  1461. 				border-collapse: collapse;
  1462. 				font-family: 'Segoe UI', sans-serif;
  1463. 				color: white;
  1464. 			}
  1465.  
  1466. 			article thead {
  1467. 				background: var(--table-header);
  1468. 			}
  1469.  
  1470. 			article thead th {
  1471. 				text-align: left;
  1472. 				padding: 12px 16px;
  1473. 				border: 1px solid var(--line-color);
  1474. 				font-weight: 600;
  1475. 				letter-spacing: 0.5px;
  1476. 			}
  1477.  
  1478. 			article tbody td {
  1479. 				padding: 12px 16px;
  1480. 				border: 1px solid var(--line-color);
  1481. 			}
  1482.  
  1483. 			article tbody tr:nth-child(even) {
  1484. 				background: var(--user-input);
  1485. 			}
  1486.  
  1487. 			article tbody tr:hover {
  1488. 				background: var(--table-hover);
  1489. 				transition: background-color 0.3s ease;
  1490. 			}
  1491.  
  1492. 			/*********************************************************************************/
  1493. 			/*New Chat Input Text Color ?? */
  1494. 			.empty\:hidden {
  1495. 				color: var(--user-input-text) !important;
  1496. 			}
  1497.  
  1498. 			/*********************************************************************************/
  1499. 			/*Send Button*/
  1500. 			svg.icon-sm.m-1.md\:m-0 {
  1501. 				margin: .5rem;
  1502. 			}
  1503.  
  1504. 			/*********************************************************************************/
  1505. 			/************************************GPT Canvas************************************/
  1506. 			/*********************************************************************************/
  1507. 			.flex.w-full.min-w-0.items-center.justify-between.gap-2.self-start.border-token-border-light.px-4.transition-colors.duration-700.border-token-border-light.py-3.text-sm.font-medium.text-token-text-secondary {
  1508. 				background: var(--user-input-background) !important;
  1509. 			}
  1510.  
  1511. 			header.\@container.flex.h-14.flex-none.items-center.justify-between.gap-1.px-3 {
  1512. 				background: var(--user-input-background);
  1513. 			}
  1514.  
  1515. 			span.text-sm.text-token-text-primary.truncate {
  1516. 				border-top: none;
  1517. 				background: transparent !important;
  1518. 			}
  1519.  
  1520. 			header.flex.items-center.justify-between.p-3.h-14 {
  1521. 				height: 50px;
  1522. 				background: var(--canvas-top-bar-gradient) !important
  1523. 			}
  1524.  
  1525. 			.flex.justify-start.pt-2.h-full {
  1526. 				padding: 0;
  1527. 			}
  1528.  
  1529. 			.cm-content.cm-lineWrapping {
  1530. 				font-family: 'Fira Code', monospace !important;
  1531. 				background: var(--code-background);
  1532. 			}
  1533.  
  1534. 			svg.icon-sm.mr-0\.5.text-token-text-tertiary {
  1535. 				background: #2F2F2F !important;
  1536. 				margin: 0;
  1537. 				border: none;
  1538. 			}
  1539.  
  1540. 			textarea.w-full.resize-none.border-0.bg-transparent.px-1.py-0.pr-2.text-token-text-primary.outline-0.placeholder\:text-token-text-secondary.focus\:ring-0.focus-visible\:ring-0 {
  1541. 				background: #3E3E3E !important;
  1542. 				border: none;
  1543. 			}
  1544.  
  1545. 			.cm-gutters {
  1546. 				background: black !important;
  1547. 			}
  1548.  
  1549. 			.absolute.bottom-0.z-20.h-24.w-full.transition-colors {
  1550. 				background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0)) !important;
  1551. 			}
  1552.  
  1553. 			/*Safety text bottom*/
  1554. 			.relative.mt-auto.flex.min-h-8.w-full.items-center.justify-center.p-2.text-center.text-xs.text-token-text-secondary.md\:px-\[60px\] {
  1555. 				color: var(--user-input-background);
  1556. 			}
  1557.  
  1558. 			.composer-parent {
  1559. 				background: var(--user-input-background);
  1560. 			}
  1561.  
  1562. 			/*********************************************************************************/
  1563. 			/************************************WIDE MODE************************************/
  1564. 			/*********************************************************************************/
  1565. 			& when (@wideMode =1) {
  1566. 				.md\:max-w-3xl, /* Common medium breakpoint limit */
  1567. 				.lg\:max-w-3xl, /* Common large breakpoint limit */
  1568. 				.\!max-w-3xl, /* Another variation seen */
  1569. 				.xl\:max-w-\[48rem\], /* Common extra-large breakpoint limit (48rem = 768px) */
  1570. 				.gizmo .xl\:max-w-\[48rem\], /* Sometimes nested */
  1571. 				/* Target the direct parent containers of message groups */
  1572. 				div[class*="react-scroll-to-bottom"] > div > div > .mx-auto,
  1573. 				/* Target the main content area wrapper if others fail */
  1574. 				main .w-full .mx-auto {
  1575. 					max-width: 95% !important;
  1576. 				}
  1577.  
  1578. 				.prose {
  1579. 					max-width: none !important;
  1580. 					/* Allow prose to fill its widened container */
  1581. 				}
  1582. 			}
  1583.  
  1584. 			/************************************Hide Add Teams Advertisment************************************/
  1585. 			& when (@hideAddTeams =1) {
  1586. 				a.group.flex.gap-2.p-2\.5.text-sm.cursor-pointer.focus\:ring-0.radix-disabled\:pointer-events-none.radix-disabled\:opacity-50.hover\:bg-token-sidebar-surface-secondary.m-0.rounded-lg.px-2 {
  1587. 					display: none;
  1588. 					height: 0px;
  1589. 				}
  1590.  
  1591. 				/*Warning text*/
  1592. 				.relative.px-2.py-2.text-center.text-xs.text-token-text-secondary.md\:px-\[60px\] {
  1593. 					color: transparent;
  1594. 					display: none;
  1595. 				}
  1596.  
  1597. 				.w-full.translate-y-4.px-2.py-2.text-center.text-xs.text-token-text-secondary.empty\:hidden.xs\:translate-y-8.md\:px-\[60px\].\@lg\/thread\:absolute.\@lg\/thread\:bottom-0.\@lg\/thread\:left-0 {
  1598. 					color: transparent;
  1599. 					display: none;
  1600. 				}
  1601. 			}
  1602. 		}
  1603.  
  1604.  
  1605. 		/******************************* Display No Text Wrap ********************************/
  1606. 		& when (@noTextWrap =1) {
  1607. 			.whitespace-nowrap {
  1608. 				white-space: normal;
  1609. 			}
  1610.  
  1611. 			a.p-2 {
  1612. 				padding-right: 0;
  1613. 			}
  1614.  
  1615. 			.p-2 {
  1616. 				padding: 0;
  1617. 			}
  1618.  
  1619. 			li.relative {
  1620. 				margin-bottom: 7px;
  1621. 			}
  1622.  
  1623. 			.no-draggable.group.rounded-lg.active\:opacity-90.bg-\[var\(--item-background-color\)\].h-9.text-sm.relative {
  1624. 				--item-background-color: #000 !important;
  1625. 			}
  1626.  
  1627. 			.mt-5 {
  1628. 				padding-top: 0rem;
  1629. 				margin-top: 0;
  1630. 				box-sizing: border-box;
  1631. 			}
  1632. 		}