diff --git a/src/sass/abstract/_extends.scss b/src/sass/abstract/_extends.scss
index a27a1fc..af95887 100644
--- a/src/sass/abstract/_extends.scss
+++ b/src/sass/abstract/_extends.scss
@@ -27,8 +27,8 @@
 		content: '';
 		position: absolute;
 		width: 100%;
-		height: 2px;
-		bottom: -5px;
+		height: 1.5px;
+		bottom: -4px;
 		left: 0;
 		// right: 0; /* Set right to cover the entire link */
 		background-color: currentColor;
diff --git a/src/sass/abstract/_vars.scss b/src/sass/abstract/_vars.scss
index c7f8d2a..a0f0bb5 100644
--- a/src/sass/abstract/_vars.scss
+++ b/src/sass/abstract/_vars.scss
@@ -9,7 +9,8 @@
 
 	/* ? --- Border-radius --- */
 	--br: 1rem;
-	--br-chat-bubble: calc(var(--br) * 2.55);
+	--br-chat-bubble: calc(var(--br) * 1.9);
+	// --br-chat-bubble: 30px;
 	--br-prompt-textarea: calc(var(--br) * 2.25);
 	--br-btn: calc(var(--br) / 1.1);
 	--br-btn-big: calc(var(--br) * 1.2);
@@ -20,17 +21,17 @@
 	--br-tooltips: var(--br-btn);
 
 	/* ? --- Paddings --- */
-	--p-chat-bubble: 1.5rem;
+	--p-chat-bubble: 1.2rem;
 	--p-contextmenu: 0.8rem;
 	--p-contextmenu-item: 0.9rem 1rem;
 	--p-prompt-textarea: 0.7rem;
 	--p-tooltips: 0.2rem;
-	--p-btn: 0.77rem;
+	--p-btn: 0.7rem;
 	--py-btn: 1rem;
 	--px-btn: 1rem;
 
 	--p-sidebar-nav: 0.5rem;
-	--p-sidebar-nav-a-new-chat: 2rem;
+	--p-sidebar-nav-a-new-chat: 1.8rem;
 	--p-sidebar-nav-a: 0.6rem;
 	--p-dialog: 2rem;
 
@@ -76,7 +77,7 @@
 	--main-surface-secondary: var(--c-surface-2) !important;
 
 	/* ??? */
-	--main-surface-tertiary: var(--c-surface-3);
+	--main-surface-tertiary: var(--c-surface-3) !important;
 
 	/* sidebar collapse btn */
 	--text-quaternary: var(--c-surface-3) !important;
@@ -163,12 +164,11 @@ html.light {
 	/* ? ========== Layout colors ========== */
 	--c-bg-sidebar: var(--c-surface-1);
 	--c-bg-chats-container: hsl(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025));
-	--c-bg-chats-sticky: hsla(var(--accent-hsl) / 0.02);
+	--c-bg-chats-sticky: hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.025) / 0.02);
 
 	/* ? ========== Chat bubbles colors ========== */
 	--c-bg-msg-user: hsla(var(--accent-hsl) / 0.08);
 	--c-bg-msg-gpt: hsl(0 0% 84%);
-	--c-msg-name-user: var(--c-accent);
 
 	/* ? ========== Type message textarea colors ========== */
 	--c-bg-textarea: hsla(0, 0%, calc(var(--surface-l) / 1.05));
@@ -186,7 +186,7 @@ html.light {
 	--c-bg-tooltip: var(--c-accent-light);
 
 	/* ? ========== border colors ========== */
-	--c-border: hsla(var(--txt-hsl) / 0.05);
+	--c-border: hsla(var(--txt-hsl) / 0.08);
 	--c-border-accent: hsla(var(--accent-hsl) / 0.1);
 
 	/* ? ========== btn colors ========== */
@@ -298,12 +298,11 @@ html.dark {
 	/* ? ========== Layout colors ========== */
 	--c-bg-sidebar: var(--c-surface-1);
 	--c-bg-chats-container: hsl(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.076));
-	--c-bg-chats-sticky: hsla(var(--surface-hsl) / 0.02);
+	--c-bg-chats-sticky: hsla(var(--accent-h) var(--surface-s) calc(var(--surface-l) * 1.076) / 0.02);
 
 	/* ? ========== Chat bubbles colors ========== */
 	--c-bg-msg-user: hsla(var(--accent-hsl) / 0.04);
 	--c-bg-msg-gpt: hsla(var(--accent-hsl) / 0.08);
-	--c-msg-name-user: var(--c-accent);
 	// --c-msg-name-gpt: var(--c-green);
 
 	/* ? ========== Type message textarea colors ========== */
@@ -439,15 +438,13 @@ html.dark[data-gptheme='oled'] {
 	// --c-bg-chats-container: var(--c-surface-2);
 	--c-bg-sidebar: black;
 	--c-bg-chats-container: black;
-	--c-bg-chats-sticky: black;
+	--c-bg-chats-sticky: rgba(0, 0, 0, 0.02);
 
 	/* ? ========== Chat bubbles colors ========== */
 	// --c-bg-msg-user: hsla(var(--accent-hsl) / 0.04);
 	// --c-bg-msg-gpt: hsla(var(--accent-hsl) / 0.08);
 	--c-bg-msg-user: hsl(var(--accent-h), calc(var(--surface-s) + 15%), calc(var(--surface-l) + 4%));
 	--c-bg-msg-gpt: hsl(var(--accent-h), calc(var(--surface-s) + 20%), calc(var(--surface-l) + 6%));
-	--c-msg-name-user: var(--c-accent);
-	// --c-msg-name-gpt: var(--c-green);
 
 	/* ? ========== Type message textarea colors ========== */
 	--c-bg-textarea: var(--c-surface-3);
@@ -463,7 +460,7 @@ html.dark[data-gptheme='oled'] {
 	--c-bg-tooltip: var(--c-accent-light);
 
 	/* ? ========== border colors ========== */
-	--c-border: var(--c-surface-3);
+	--c-border: var(--c-surface-2);
 	--c-border-accent: hsla(var(--accent-hsl) / 0.05);
 
 	/* ? ========== btn colors ========== */
diff --git a/src/sass/elements/_btn.scss b/src/sass/elements/_btn.scss
index 2a54334..0aa2de8 100644
--- a/src/sass/elements/_btn.scss
+++ b/src/sass/elements/_btn.scss
@@ -1,5 +1,7 @@
 .btn {
-	background-color: var(--c-bg-btn) !important;
+	// background-color: var(--c-bg-btn) !important;
+	// background-color: hsla(var(--accent-hsl) / 0.18);
+
 	color: var(--c-btn) !important;
 	border-radius: var(--br-btn) !important;
 	border: none !important;
@@ -8,30 +10,46 @@
 		// padding: 1.5rem !important;
 		padding: var(--p-btn) !important;
 	}
-}
 
-/* .btn-primary {
-    background-color: var(--c-bg-btn) !important;
-} */
+	&-primary {
+		background-color: var(--c-bg-btn) !important;
+	}
+	&-secondary {
+		// background-color: hsl(var(--accent-h), calc(var(--accent-s) / 1.8), var(--accent-l)) !important;
+		// background-color: hsl(var(--accent-h), calc(var(--accent-s) * 0.5), 50%) !important;
 
-.btn-danger {
-	background-color: var(--c-danger) !important;
-	color: var(--c-bg-chats-container) !important;
-}
+		// background-color: hsl(var(--accent-h), calc(var(--accent-s) * 0.3), 55%) !important;
+		// color: var(--c-txt) !important;
 
-// .btn-secondary {
-// 	background-color: red !important;
-// }
+		// background-color: transparent !important;
+		color: var(--c-accent) !important;
+		background-color: hsla(var(--accent-hsl) / 0.15) !important;
+		backdrop-filter: blur(5px);
+
+		svg {
+			// color: var(--c-accent) !important;
+			fill: var(--c-accent) !important;
+		}
+		// outline: 2px solid var(--c-accent);
+	}
+	&-danger {
+		background-color: var(--c-danger) !important;
+		color: var(--c-bg-chats-container) !important;
+	}
 
-/* === RIGHT - Scroll Down arrow bg LIGHT  === */
-// html.light main [role="presentation"] button.absolute.rounded-full {
-//     background-color: var(--c-txt) !important;
-// }
+	&-green {
+		background-color: var(--c-accent) !important;
+	}
+
+	&:not(&-secondary, &-danger, &-green) {
+		background-color: var(--c-accent) !important;
+
+		// &:hover {
+		// 	color: var(--c-accent) !important;
+		// }
+	}
+}
 
-/* === RIGHT - Scroll Down arrow bg DARK  === */
-// html.dark main [role="presentation"] button.absolute.rounded-full {
-//     background-color: var(--c-accent) !important;
-// }
 main [role='presentation'] button.absolute.rounded-full {
 	background-color: var(--c-accent) !important;
 	box-shadow: var(--box-shadow-contextmenu);
@@ -48,29 +66,32 @@ main [role='presentation'] button.absolute.rounded-full {
 		min-width: var(--min-w-btn);
 	}
 
-	&:not(.PopoverContent) .btn-neutral {
-		background-color: var(--c-surface-3) !important;
-		color: var(--c-txt) !important;
-	}
-
-	/* ".PopoverContent" je recimo menu od btn u "Shared Link to Chat" 3dots menu (Shared your Name & Delete Link) */
-	&.PopoverContent {
-		.btn-neutral {
-			background-color: transparent !important;
-			color: var(--c-txt) !important;
-		}
-	}
+	// &:not(.PopoverContent) .btn-neutral {
+	// 	background-color: var(--c-surface-3) !important;
+	// 	color: var(--c-txt) !important;
+	// }
+
+	// /* ".PopoverContent" je recimo menu od btn u "Shared Link to Chat" 3dots menu (Shared your Name & Delete Link) */
+	// &.PopoverContent {
+	// 	.btn-neutral {
+	// 		background-color: transparent !important;
+	// 		color: var(--c-txt) !important;
+	// 	}
+	// }
 }
 
 /* === Settings > Tabs === */
 [role='tablist'] button {
-	padding: var(--p-btn) !important;
+	padding: var(--p-btn);
 	background-color: transparent !important;
 
 	&[data-state='active'],
 	&:hover {
 		// TODO Ovo je ok za desktop, ali za manje je bolje surface-1. Takodje dodati horiz gap izmedju
-		background-color: var(--c-surface-3) !important;
+		// background-color: var(--c-surface-3) !important;
+		// @extend .btn-secondary;
+		background-color: var(--c-accent) !important;
+		color: var(--c-on-accent) !important;
 	}
 }
 
@@ -102,7 +123,8 @@ button[role='switch'] {
 /* === Settings > Theme selector drop down */
 button[role='combobox'] {
 	@extend .btn;
-	@extend .btn-neutral;
+	@extend .btn-secondary;
+	font-weight: 500 !important;
 	min-width: var(--min-w-btn);
 
 	/* Theme btn - fix height smaller then other btns */
@@ -113,7 +135,7 @@ button[role='combobox'] {
 /* === ❓ circle btn on bottom right */
 button[id*='headlessui-menu-button'][class*='rounded-full'] {
 	color: var(--c-txt) !important;
-	border: none !important;
+	border: 1x solid var(--c-accent) !important;
 	background-color: var(--c-surface-3) !important;
 }
 
@@ -126,3 +148,15 @@ button[class*='bg-brand-purple'] {
 	background-color: var(--c-accent) !important;
 	color: var(--c-on-accent) !important;
 }
+
+/* "Tell us more" example buttons when clicked on 👎 in GPT chat bubble and the same buttons in "Provide Additional Feedback" when clicked on "More" */
+button.border-token-border-light[class*='hover:bg-token-main-surface-secondary'] {
+	border: 1px solid hsla(var(--accent-hsl) / 0.1) !important;
+	color: var(--c-accent) !important;
+	backdrop-filter: blur(14px);
+
+	&:hover {
+		transform: translateY(-1px);
+		background-color: hsla(var(--accent-hsl) / 0.1) !important;
+	}
+}
diff --git a/src/sass/elements/_dialogs.scss b/src/sass/elements/_dialogs.scss
index 5980a7f..cacf61b 100644
--- a/src/sass/elements/_dialogs.scss
+++ b/src/sass/elements/_dialogs.scss
@@ -156,7 +156,8 @@
 
 		// bg-gradient of link preview
 		.from-token-main-surface-primary {
-			--gradient-color-from: --main-surface-primary;
+			display: none;
+			// --gradient-color-from: var(--main-surface-primary);
 		}
 
 		/* PUBLIC LINK UPDATED - Social platforms in show in footer after the  "🔗 Copy Link" btn */
@@ -274,6 +275,11 @@
 			--border-medium: transparent !important;
 		}
 
+		/* Gradient in dialog header when clicked on GPTs product, but if we add this style here it broke the gradient in "Create Link" dialog bcs there is var(--c-surface-3) (or var(--main-surface-primary) */
+		.from-token-main-surface-primary {
+			--main-surface-primary: var(--c-surface-2) !important;
+		}
+
 		/* Numbers in "Ratings" svg stars */
 		svg.text-green-500 ~ .text-white {
 			color: var(--c-on-accent) !important;
@@ -307,6 +313,14 @@
 			}
 		}
 	}
+
+	&:has(img[alt='Uploaded image']) {
+		padding: 0 !important;
+		img[alt='Uploaded image'] {
+			border-radius: var(--br-contextmenu);
+			outline: 1px solid hsla(var(--accent-hsl) / 0.5);
+		}
+	}
 }
 
 /* ! NOT WORKING - CANNOT OVERWRITE THIS WTF */
diff --git a/src/sass/elements/_menu.scss b/src/sass/elements/_menu.scss
index 880c9a4..b23d726 100644
--- a/src/sass/elements/_menu.scss
+++ b/src/sass/elements/_menu.scss
@@ -36,61 +36,25 @@
 	}
 }
 
-// TODO check if this broke something else because it is the element hard for targeting
-/* "New Chat" xs in contextmenu in ChatGPT 3.5 */
-[data-radix-popper-content-wrapper] {
-	// .absolute.right-11 {
-	// 	// --svg-w: 24px;
-	// 	// --gap-from-svg: 20px;
-	// 	// right: calc(
-	// 	// 	var(--p-contextmenu) + var(--svg-w) + var(--gap-from-svg)
-	// 	// ) !important; // p-contextmenu = 10px, svg-w = 24px, gap-from-svg = 20px = (10px + 24px + 20px) = 54px. This is calculated spacing of "New Chat" in contextmenu in ChatGPT 3.5 and right edge in contextmenuitem
-	// }
-
-	/* ChatGPT 3.5 contextmenu item that has "New Chat" txt and icon */
-	[role='menuitem']:has(.absolute.right-11) {
-		--text-primary: var(--c-txt); // fix "New Chat 📝" color
-		--anim-duration: 0.3s;
-
-		/* ChatGPT 3.5 contextmenu item ✔️ svg in "GPT-3.5" item, or should be in active model */
-		svg {
-			transition: none !important;
-		}
-
-		/* ChatGPT 3.5 contextmenu item that direclty has "New Chat" txt and icon */
-		.hidden:has(> .absolute.right-11) {
-			@extend %animFadeIn;
-		}
-	}
-}
-
 /* __ MODAL - Choose theme context menu & tooltips?  */
-div[data-radix-popper-content-wrapper] {
+[data-radix-popper-content-wrapper] {
 	z-index: calc(var(--z-modal) + 50) !important;
-	// z-index: 200 !important;
 
 	/* "Custom Instructions" dialog */
 	&:has([role='dialog']) {
 		/* "Custom Instructions" dialog context menu visible on textarea focus */
 		[role='dialog'] {
 			--box-shadow: var(--box-shadow-contextmenu) !important;
-			// box-shadow: var(--box-shadow-contextmenu) !important;
 		}
-	}
 
-	/* Mora not role=menu da ne bih selektovala i onaj contextmenu u sidebar kad se klikne na prompt listitem 3 dots za opcije i div[data-radix-popper-content-wrapper]:has([role='tooltip']) da ne bih selektovala tooltip */
-	// &:not(
-	// 		div[data-radix-popper-content-wrapper]:has(div[role='menu']),
-	// 		div[data-radix-popper-content-wrapper]:has([role='tooltip'])
-	// 	) {
-	// 	@extend %animFadeInClipPath;
-	// }
+		/* Small div rotated to simulate chevron on notification bubbles */
+		// .h-3.w-3.rotate-45.transform.rounded-br-sm.bg-gray-900 {
+		// 	background-color: var(--c-surface-3) !important;
+		// }
+	}
 
 	/* Context menu bg */
-	// .bg-white {
-	// .bg-token-popover-surface-primary
 	[role='listbox'] {
-		// background-color: var(--c-bg-contextmenu) !important;
 		padding: var(--p-contextmenu) !important;
 		border-radius: var(--br-contextmenu) !important;
 		box-shadow: var(--box-shadow-contextmenu) !important;
@@ -113,14 +77,14 @@ div[data-radix-popper-content-wrapper] {
 		margin-bottom: 4px;
 		overflow: visible !important;
 		outline: none !important;
-	}
 
-	/* MODAL - Choose theme context menuitem hover */
-	[data-radix-collection-item][data-state='unchecked'] {
-		&:hover {
-			// background-color: var(--c-surface-2) !important;
-			background-color: var(--c-bg-contextmenu-item) !important;
-			outline: none !important; // TODO this is temp fix. This ecause there were somewhite uglu outline on hover. But this also breaks :focus-visible accessibility style...
+		/* MODAL - Choose theme context menuitem hover */
+		&[data-state='unchecked'] {
+			&:hover {
+				// background-color: var(--c-surface-2) !important;
+				background-color: var(--c-bg-contextmenu-item) !important;
+				outline: none !important; // TODO this is temp fix. This ecause there were somewhite uglu outline on hover. But this also breaks :focus-visible accessibility style...
+			}
 		}
 	}
 
@@ -129,13 +93,27 @@ div[data-radix-popper-content-wrapper] {
 		background-color: var(--c-bg-btn) !important;
 		color: var(--c-on-accent) !important;
 	}
-}
 
-// .data-radix-popper-content-wrapper {
-// 	// z-index: calc(var(--z-modal) + 200) !important;
-// 	z-index: 200 !important;
-// }
+	/* "Parent of "Models ℹ️" heading in contextmenu in ChatGPT 3.5" */
+	[data-radix-menu-content]:has(a[href^="https://help.openai.com/"])
+	{
+		/* "Models ℹ️ heading in contextmenu in ChatGPT 3.5" */
+		div:has(>a[href^="https://help.openai.com/"])
+		{
+			margin-bottom: 0.5rem;
+		}
 
+		/* ChatGPT 3.5 contextmenu item */
+		[role='menuitem'] {
+			span:has(> svg) {
+				background-color: hsla(var(--accent-hsl) / 0.11) !important;
+				svg {
+					color: var(--c-accent);
+				}
+			}
+		}
+	}
+}
 /* [role='menu'] for contextmenu */
 .popover {
 	--main-surface-primary: var(--c-surface-2) !important;
diff --git a/src/sass/elements/_modal.scss b/src/sass/elements/_modal.scss
index 818d487..cff11a2 100644
--- a/src/sass/elements/_modal.scss
+++ b/src/sass/elements/_modal.scss
@@ -1,5 +1,6 @@
 /* ___  MODAL Background */
-.absolute.inset-0 .fixed.inset-0 {
+.absolute.inset-0 .fixed.inset-0,
+.fixed.inset-0[class*='bg-black/90'] {
 	background-color: var(--c-bg-modal) !important;
 	backdrop-filter: blur(var(--blur-modal)) !important;
 	z-index: var(--z-modal);
diff --git a/src/sass/elements/_prose.scss b/src/sass/elements/_prose.scss
index 917ca2f..46f6083 100644
--- a/src/sass/elements/_prose.scss
+++ b/src/sass/elements/_prose.scss
@@ -64,12 +64,16 @@
 	li {
 		/* Ordered list item number (li::before) */
 		--text-tertiary: var(--c-accent) !important;
-		// --text-tertiary: var(--c-subtext-2) !important;
 	}
 
 	/* Markdown Links rendered in GPT answers */
 	a {
-		@extend %link_hover_underlined;
+		color: var(--c-accent) !important;
+
+		&[href] {
+			@extend %link_hover_underlined;
+		}
+		// color: var(--c-accent) !important;
 	}
 
 	/* Style Markdown Checkboxes */
diff --git a/src/sass/elements/_right--limit-reaches.scss b/src/sass/elements/_right--limit-reaches.scss
new file mode 100644
index 0000000..674ad66
--- /dev/null
+++ b/src/sass/elements/_right--limit-reaches.scss
@@ -0,0 +1,13 @@
+main [role='presentation'] {
+	.absolute.bottom-full.left-0.right-0 {
+		// border: 2px solid red !important;
+
+		.flex.w-full.items-start.rounded-2xl.border.border-token-border-light.bg-token-main-surface-primary.text-token-text-primary:has(
+				button
+			) {
+			background-color: hsla(var(--accent-hsl) / 0.1) !important;
+			backdrop-filter: blur(30px);
+			border-color: hsla(var(--accent-hsl) / 0.1) !important;
+		}
+	}
+}
diff --git a/src/sass/elements/_right--main.scss b/src/sass/elements/_right--main.scss
index fd116de..963402b 100644
--- a/src/sass/elements/_right--main.scss
+++ b/src/sass/elements/_right--main.scss
@@ -19,14 +19,18 @@ main [role='presentation'] {
 }
 
 /* === RIGHT - Chats - Gap from heading and svg icons ===*/
-main [data-message-author-role='user'],
-main [data-message-author-role='assistant'] {
-	margin-top: var(--mt-chat-txt) !important;
-	margin-bottom: var(--mb-chat-txt) !important;
-}
+// main [data-message-author-role='user'],
+// main [data-message-author-role='assistant'] {
+// 	margin-top: var(--mt-chat-txt) !important;
+// 	margin-bottom: var(--mb-chat-txt) !important;
+// }
 
 /* @ === RIGHT - CHATS BUBBLES ===*/
 main [data-testid^='conversation-turn-'] {
+	/* Edit icon in user chat for example. Edit state user chat bg  */
+	--main-surface-tertiary: var(--c-surface-3) !important;
+	// --main-surface-tertiary: hsla(var(--accent-hsl) / 0.5) !important;
+
 	--c-avatar: var(--avatar-color);
 	margin-bottom: var(--mb-chat-bubble) !important;
 
@@ -40,53 +44,7 @@ main [data-testid^='conversation-turn-'] {
 	}
 
 	/* RIGHT - CHATS BUBBLES DIV */
-	// .group {
-
 	& > div:first-child > div:first-child {
-		// & > div > div {
-		--pt-multiplier: 1.6;
-		padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble)
-			var(--p-chat-bubble) !important;
-		border-radius: var(--br-chat-bubble) !important;
-		letter-spacing: 0.3px;
-		line-height: 1.8 !important;
-
-		@include dev(mob) {
-			--pt-multiplier: 1.4;
-		}
-
-		/* Left chat content parent 
-		! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
-		/* 
-			0.75rem = gap-3 = gap between profile svg/img and right content
-			2.25rem = w-9 = gpt profile svg parent width */
-		.relative.flex.w-full.flex-col {
-			--svg-w: 2.25rem;
-			--svg-gap: 0.75rem;
-
-			width: calc(
-				100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble)
-			) !important; // more consistent width (right chat bubble spacing = left spacing)
-
-			span[data-state] {
-				display: flex;
-				place-items: center;
-			}
-
-			@include dev(mob) {
-				--svg-w: 24px;
-				// --moveToLeft: var(--svg-gap);
-				// --moveToLeft: var(--svg-w);
-				--moveToLeft: calc(var(--svg-w) + (var(--svg-gap) / 1.5));
-
-				/* Markdown parent - actually message content, without logo and User/ChatGPT name */
-				.flex-col.gap-1.md\:gap-3 {
-					transform: translateX(calc(var(--moveToLeft) * -1));
-					width: calc(100% + var(--moveToLeft) + var(--p-chat-bubble)) !important;
-				}
-			}
-		}
-
 		/* "Was this response better or worse? 👍👎" el when clicked on regenerate answer btn  */
 		.bg-token-main-surface-secondary:has(button[title^='This response was']) {
 			background-color: transparent !important;
@@ -125,111 +83,150 @@ main [data-testid^='conversation-turn-'] {
 		}
 	}
 
-	/* RIGHT - CHATS USER/GPT NAMES */
-	.font-semibold.select-none {
-		text-transform: uppercase;
-		color: var(--c-accent);
-	}
-
 	/*  Chat bubble footer SVG icons - edit, read aloud, copy, regenerate, bad response */
-	.self-end button svg {
-		color: var(--c-accent) !important;
+	[class*='empty:hidden'] {
+		button svg {
+			color: var(--c-accent);
+		}
 	}
 
 	/* @ RIGHT - CHATS BUBBLES - USER  */
-	// There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select and like this for that case scenario
 	&:has([data-message-author-role='user']) {
 		/*  RIGHT - CHATS BUBBLE BG */
-		// .group {
-		// & > div > div {
-		& > div:first-child > div:first-child {
+		// & > div:first-child > div:first-child {
+		/* ? gpt4o - User message */
+		[class*='bg-[#f4f4f4]'] {
 			background-color: var(--c-bg-msg-user);
-			outline: 2px solid transparent !important;
+			padding: var(--p-chat-bubble) calc(var(--p-chat-bubble) * 1.2);
+			border-radius: var(--br-chat-bubble) !important;
 		}
+		// }
 
-		[data-message-author-role='user'] > div.font-medium.text-token-text-tertiary:has(svg.shrink-0) {
-			--p: 1rem;
-			background-color: hsla(var(--accent-hsl) / 0.1) !important;
-			color: var(--c-subtext-1) !important;
-			// color: var(--c-accent) !important;
-			border-radius: 1rem;
-			border: none !important;
-			padding: var(--p);
-
-			svg {
-				margin-right: 0.5rem;
-				// color: var(--c-accent) !important;
-				// background-color: hsla(var(--accent-hsl) / 0.13) !important;
-				// border-radius: 5px;
-			}
+		/* Flex-end the Reply in user chat bubble */
+		[data-message-author-role='user'] {
+			align-items: flex-end !important;
 		}
 
-		/* "Replying to:" text content, like bloquoted text */
-		// .border-l-2.overflow-y-auto {
-		// 	--p: 1rem;
-		// 	background-color: hsla(var(--accent-hsl) / 0.1) !important;
-		// 	border-radius: 1rem;
-		// 	border: none !important;
-		// 	padding: var(--p);
-		// 	padding-left: calc(var(--p) * 1.5);
-		// 	position: relative;
-
-		// 	/* Simulate the border-left but more modern, inside the "Replying to:" content */
-		// 	&::before {
-		// 		content: '';
-		// 		position: absolute;
-		// 		top: 50%;
-		// 		left: calc(var(--p) / 1.5);
-		// 		// left: 0;
-		// 		// background-color: var(--c-accent);
-		// 		background-color: hsla(var(--accent-hsl) / 0.6) !important;
-		// 		width: 4px;
-		// 		// height: calc(100% - (var(--p) * 2.5));
-		// 		height: calc(100% - (var(--p) * 2.8));
-		// 		border-radius: 5px;
-		// 		transform: translateY(-50%);
-		// 	}
-		// }
+		/* Reply in msg */
+		div:has(> svg + .line-clamp-3) {
+			position: relative;
+			align-items: flex-end !important;
+			padding: 5px 10px;
+			background-color: hsla(var(--accent-hsl) / 0.15);
+			color: var(--c-accent);
+			border-radius: var(--br-btn);
+			border-left: 5px solid var(--c-accent);
+
+			/* &::after {
+				content: '';
+				position: absolute;
+				height: 50%;
+				width: 3px;
+				background-color: var(--c-accent);
+				left: 8px;
+				border-radius: 5px;
+				top: 50%;
+				transform: translate(-50%, -50%);
+			} */
+		}
 	}
-	/* User chat bubble - Edit state. There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select and like this for that case scenario */
-	&:has(textarea) {
-		// .group {
-		& > div:first-child > div:first-child {
-			background-color: var(--c-bg-chats-container) !important;
-			box-shadow: var(--box-shadow-textarea);
-			outline: 2px solid hsla(var(--accent-hsl) / 0.1) !important;
-			transition: outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-
-			/* === User/ChatGPT name === */
-			.font-semibold.select-none {
-				color: var(--c-msg-name-user);
-			}
 
-			textarea {
-				@extend %animFadeIn;
-				color: var(--c-subtext-2) !important;
-				padding: 0.5rem 0;
-			}
-
-			/* Parent of buttons: "Save & Submit" and "Cancel" */
-			.text-center.mt-2.flex.justify-center {
-				@extend %animFadeIn;
-			}
+	/* User chat bubble - Edit state.
+	There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select and like this for that case scenario */
+	div:has(> textarea) {
+		// .bg-token-main-surface-tertiary:has(> textarea) {
+		--main-surface-tertiary: hsla(var(--accent-hsl) / 0.13) !important;
+		padding: var(--p-chat-bubble) !important;
 
-			.btn-neutral {
-				background-color: var(--c-surface-3) !important;
-				color: var(--c-txt) !important;
-			}
+		/* Make the text in edit textarea to be the full-width */
+		textarea {
+			width: 100%;
 		}
 	}
 
 	/* @ RIGHT - CHATS BUBBLES - GPT */
 	&:has([data-message-author-role='assistant']) {
 		/*   RIGHT - CHATS BUBBLE BG  */
-		// .group {
-		// & > div > div {
 		& > div:first-child > div:first-child {
 			background-color: var(--c-bg-msg-gpt);
+
+			--pt-multiplier: 1.3;
+			padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble)
+				var(--p-chat-bubble) !important;
+			// padding: var(--p-chat-bubble);
+			border-radius: var(--br-chat-bubble) !important;
+			letter-spacing: 0.3px;
+			line-height: 1.8 !important;
+
+			@include dev(mob) {
+				--pt-multiplier: 1.4;
+			}
+
+			/* Left chat content parent 
+		! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
+			/* 
+			0.75rem = gap-3 = gap between profile svg/img and right content
+			2.25rem = w-9 = gpt profile svg parent width */
+
+			/* ! TODO - BY COMMENTING THIS WE FIX MUPLIPLE BUGS IN GPT CHAT LIKE LINKS WRAPPED IN MANY ROWS AND TOOLTIP FOR "REPLY" OR LINK PREVIEW TOOLTIP NOT POSITIONING CORRECTLY. BUT IF WE REMOVE THIS, THEN GPT CHAT'S BUBBLE WIDTH LOOKS SO ODD!!! WITH MARKDOWN/<PRE> ELEMENTS RENDERED THO
+			This mostly happend bcs of this:
+
+		````  span[data-state] {
+		```		  display: flex;
+		````	  place-items: center;
+		```    } */
+			/* There are more elements with the same class like the "Tell us more" parent when we click on dislike button in GPT chat */
+			.agent-turn.relative.flex.w-full.flex-col {
+				// border: 2px solid red !important;
+				--svg-w: 2.25rem;
+				--svg-gap: 0.75rem;
+
+				width: calc(
+					100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble)
+				) !important; // more consistent width (right chat bubble spacing = left spacing)
+
+				/* This break links in markdown making them wrapped */
+				/* span[data-state] {
+					display: flex;
+					place-items: center;
+				} */
+
+				@include dev(mob) {
+					--svg-w: 24px;
+					// --moveToLeft: var(--svg-gap);
+					// --moveToLeft: var(--svg-w);
+					--moveToLeft: calc(var(--svg-w) + (var(--svg-gap) / 1.5));
+
+					/* Markdown parent - actually message content, without logo and User/ChatGPT name */
+					.flex-col.gap-1.md\:gap-3 {
+						transform: translateX(calc(var(--moveToLeft) * -1));
+						width: calc(100% + var(--moveToLeft) + var(--p-chat-bubble)) !important;
+					}
+				}
+			}
+
+			/* "Tell us more" example buttons when clicked on 👎 in GPT chat bubble  - MOVED TO _btn.scss */
+			/* button.border-token-border-light {
+				// border: 1px solid var(--c-subtext-2) !important;
+				border: 1px solid hsla(var(--accent-hsl) / 0.1) !important;
+				color: var(--c-accent) !important;
+
+				&:hover {
+					transform: translateY(-1px);
+					background-color: hsla(var(--accent-hsl) / 0.1) !important;
+				}
+			} */
+
+			/* Parent of "Tell us more" example buttons when clicked on 👎 in GPT chat bubble*/
+			[class*='min-h-[96px] w-full'] {
+				border: 1px solid hsla(var(--accent-hsl) / 0.1) !important;
+				border-radius: var(--br-contextmenu);
+				background-color: hsla(var(--accent-hsl) / 0.05);
+
+				// .relative.flex.w-full.flex-col {
+				// 	width: 100% !important;
+				// }
+			}
 		}
 
 		/* Response 1 or Response 2 chat bubble when we have to choose 1 answer */
@@ -257,20 +254,41 @@ main [data-testid^='conversation-turn-'] {
 				font-weight: bold;
 			}
 		}
+
+		.overflow-hidden:has(> .divide-y) {
+			.from-token-main-surface-secondary {
+				--gradient-color-from: var(--c-surface-2) !important;
+
+				svg {
+					color: var(--c-accent) !important;
+				}
+			}
+
+			a {
+				border-radius: var(--br-btn);
+			}
+		}
 	}
 }
 
-/* Collapse sidebar btn - hover state*/
-main {
-	[class*='fixed left-0 top-1/2']:has(button) {
-		.rounded-full {
-			transition: background-color 0.2s ease-in-out;
+/* "Searched x sites" Links wrapper! */
+html.dark main [data-testid^='conversation-turn-']:has([data-message-author-role='assistant']) {
+	.overflow-hidden:has(> .divide-y) {
+		.from-token-main-surface-secondary {
+			--gradient-color-from: var(--c-surface-3) !important;
 		}
-
-		&:hover {
-			.rounded-full {
-				background-color: var(--c-accent) !important;
-			}
+		a:hover {
+			background-color: var(--c-surface-3);
+		}
+	}
+}
+html[data-gptheme='oled'] main [data-testid^='conversation-turn-']:has([data-message-author-role='assistant']) {
+	.overflow-hidden:has(> .divide-y) {
+		.from-token-main-surface-secondary {
+			--gradient-color-from: var(--c-surface-2) !important;
+		}
+		a:hover {
+			background-color: var(--c-surface-2);
 		}
 	}
 }
diff --git a/src/sass/elements/_right--new-chat.scss b/src/sass/elements/_right--new-chat.scss
index 5aaa80b..2cca9e0 100644
--- a/src/sass/elements/_right--new-chat.scss
+++ b/src/sass/elements/_right--new-chat.scss
@@ -1,37 +1,12 @@
-/* === RIGHT - NEW CHAT - 4 BIG BTNS === */
-
-main form .grow {
-	/* recimo gap izmedju new chat example buttons*/
-	.gap-2 {
-		gap: 0.8rem !important;
-	}
-
-	.btn {
-		padding: 1.5rem !important;
-		background-color: var(--c-surface-2) !important;
-		color: var(--c-txt) !important;
-		border-radius: var(--br-btn-big) !important;
-		overflow: hidden; // Mora jer kad se hoveruje .btn, onda se  .bg-gradient-to-l radius ne uklapa s ovim, manji je i onda .btn cudno izgleda sa desne strane, ovaj ga overflowuje
-
-		/* Gradient bg visible on hover */
-		.bg-gradient-to-l {
-			--gradient-color-from: var(--c-surface-3) !important;
-			// --tw-gradient-from: var(--c-surface-3) var(--tw-gradient-from-position) !important;
-
-			/* Button SVG parent ❌ 
-			No more .bg-token-surface-primary class, now is .bg-token-main-surface-primary */
-			// .bg-token-surface-primary {
-			.bg-token-main-surface-primary {
-				// --surface-secondary: var(--c-surface-2) !important;
-				background-color: var(--c-accent) !important;
-				border-radius: 100vw !important;
-				padding: 0.5rem !important;
-
-				/* SVG icon*/
-				svg {
-					color: var(--c-on-accent) !important;
-				}
-			}
+// /* === RIGHT - NEW CHAT - 4 BIG BTNS === */
+/* New chat prompt examples - card buttons with prompt pregenerated */
+main [role='presentation'] {
+	button.relative.flex.w-40.flex-col.rounded-2xl.border-token-border-light {
+		--clr: hsla(var(--accent-hsl) / 0.08);
+		border: 1px solid var(--clr) !important;
+
+		&:hover {
+			background-color: var(--clr) !important;
 		}
 	}
 }
diff --git a/src/sass/elements/_right--sticky.scss b/src/sass/elements/_right--sticky.scss
index dac19de..b6f475b 100644
--- a/src/sass/elements/_right--sticky.scss
+++ b/src/sass/elements/_right--sticky.scss
@@ -28,6 +28,12 @@ main .sticky {
 			color: var(--c-on-accent) !important;
 		}
 	}
+
+	.btn-secondary {
+		svg {
+			color: var(--c-accent) !important;
+		}
+	}
 }
 
 /* Sticky header for smaller screens. Remove border-bottom */
diff --git a/src/sass/elements/_right--textarea.scss b/src/sass/elements/_right--textarea.scss
index 03ef002..02ad455 100644
--- a/src/sass/elements/_right--textarea.scss
+++ b/src/sass/elements/_right--textarea.scss
@@ -1,66 +1,131 @@
 /* ===  RIGHT - TEXTAREA PARENT, message type and send button */
-// main form .overflow-hidden:has(textarea#prompt-textarea) {
-main form [class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea) {
-	padding: var(--p-prompt-textarea) !important;
-	// background-color: transparent !important;
-	// background-color: var(--c-bg-chats-container) !important;
-	background-color: var(--c-bg-textarea) !important;
-	border-radius: var(--br-prompt-textarea) !important;
-	// border: 3px solid var(--c-border-textarea);
-	border: none !important;
-	box-shadow: var(--box-shadow-textarea);
-	transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-	// box-shadow: var(--box-shadow-contextmenu) !important;
-
-	&:has(textarea#prompt-textarea:focus) {
-		// box-shadow: var(--box-shadow-contextmenu) !important;
-		// border-color: transparent !important;
-		box-shadow: none !important;
-	}
+// main form [class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea) {
+main form {
+	// gpt4o textarea prompt
+	div[class*='bg-[#f4f4f4]']:has(textarea#prompt-textarea),
 
-	textarea::placeholder {
-		color: var(--c-placeholder-textarea) !important;
-	}
+	// Guest/3.5 textarea prompt
+	div[class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea),
 
-	/* Send button */
-	button[data-testid='send-button'] {
-		background-color: var(--c-accent) !important;
-		color: var(--c-txt) !important;
-		border-color: var(--c-accent) !important;
-		border-radius: 100vw !important;
-		padding: 2px;
-		right: 1.3rem !important;
-		bottom: 1.2rem !important;
-
-		&[disabled] {
-			opacity: 0.5 !important;
+	// Textare when clicked on "Temporary Chat" toggle
+	div[class*='bg-black']:has(textarea#prompt-textarea) {
+		padding: var(--p-prompt-textarea) !important;
+		background-color: var(--c-bg-textarea) !important;
+		border-radius: var(--br-prompt-textarea) !important;
+		border: none !important;
+		box-shadow: var(--box-shadow-textarea);
+		transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+
+		&:has(textarea#prompt-textarea:focus) {
+			box-shadow: none !important;
+		}
+		/* In "temporary chat" textarea is black so the color and caret-color are white, so this fix that */
+		textarea {
+			color: var(--c-txt);
+			caret-color: currentColor;
+		}
+		textarea::placeholder {
+			color: var(--c-placeholder-textarea) !important;
 		}
 
-		svg {
-			color: var(--c-on-accent) !important;
+		/* Send button */
+		// guest/3.5 send button
+		button[data-testid='send-button'],
+		// 4o send button 
+		button.rounded-full {
+			background-color: var(--c-accent) !important;
+			color: var(--c-txt) !important;
+			border-color: var(--c-accent) !important;
+			border-radius: 100vw !important;
+			padding: 2px;
+
+			&[disabled] {
+				opacity: 0.5 !important;
+			}
+
+			svg {
+				color: var(--c-on-accent) !important;
+			}
 		}
-	}
 
-	.absolute:has(button[aria-label='Stop generating']) {
-		right: 1.3rem !important;
-		bottom: 0.9rem !important;
-	}
-	button[aria-label='Stop generating'] {
-		border-color: var(--c-accent);
-		padding: 0.38rem !important;
+		/* "Reply" in msg textarea */
+		.bg-token-main-surface-primary.divide-y {
+			background-color: var(--c-surface-3);
+			border-color: var(--c-accent);
+			border-radius: calc(var(--br-prompt-textarea) / 1.5) !important;
+			padding: 0.8rem;
+		}
+
+		/* Attached files background */
+		.bg-token-main-surface-primary:not(.divide-y) {
+			border: 1px solid hsla(var(--accent-hsl) / 0.1) !important;
+			background-color: hsla(var(--accent-hsl) / 0.12) !important;
+			color: var(--c-accent) !important;
+		}
+
+		/* 📎 "Attach files" button parent oof parent which has items-end */
+		// div:has(& > div[type='button'][aria-haspopup='dialog']:has(button[aria-label='Attach files'])) {
+		div[type='button'][aria-haspopup='dialog']:has(button[aria-label='Attach files']) {
+			margin-bottom: calc(var(--p-prompt-textarea) / 2);
+		}
 
-		svg {
-			color: var(--c-accent);
-			transform: scale(1.07);
+		/* 📎 Attach files svg */
+		button[aria-label='Attach files'] svg {
+			color: var(--c-accent) !important;
+		}
+		/* 🖼️ "Attach Files" - attached image wrapper */
+		div[type='button'][aria-haspopup='dialog'] {
+			/* "Attach Files" attached image */
+			span.bg-cover {
+				border-radius: 10px !important;
+			}
 		}
 	}
 
-	/* "Reply" in msg textarea */
-	.bg-token-main-surface-secondary {
-		background-color: var(--c-surface-3);
-		border-color: var(--c-accent);
-		border-radius: calc(var(--br-prompt-textarea) / 1.5) !important;
-		padding: 0.8rem;
+	/* @mentions in textarea */
+	.absolute.bottom-16.z-10 {
+		.popover {
+			backdrop-filter: blur(30px) !important;
+			border: hsla(var(--accent-hsl) / 0.5);
+			background-color: hsla(var(--accent-hsl) / 0.12) !important;
+			box-shadow: var(--box-shadow-textarea);
+		}
+
+		/* @mentions - Search GPTs */
+		input {
+			// background-color: hsla(var(--accent-hsl) / 0.1) !important;
+			background-color: transparent !important;
+			border: 1px solid hsla(var(--accent-hsl) / 0.4) !important;
+			border-radius: var(--br-btn) !important;
+			color: var(--c-accent) !important;
+			margin-bottom: 1rem;
+			padding: var(--p-btn) !important;
+		}
+
+		// .bg-token-main-surface-primary {
+		// }
+
+		/* @mentions - GPTs list, scrollable product parent */
+		.max-h-40.overflow-y-auto {
+			& > div:not(:last-child) {
+				margin-bottom: 0.5rem;
+			}
+		}
+		/* @mentions - Active GPTs item */
+		.bg-token-main-surface-secondary {
+			background-color: var(--c-accent) !important;
+			color: var(--c-on-accent) !important;
+
+			[class*='text-'] {
+				color: currentColor !important;
+			}
+		}
+
+		[class*='hover:bg-token-main-surface-secondary']:not(.bg-token-main-surface-secondary) {
+			&:hover {
+				background-color: hsla(var(--accent-hsl) / 0.1) !important;
+			}
+		}
 	}
 }
 
@@ -69,15 +134,9 @@ main div[role='presentation'] div.w-full:has(form) {
 	margin-top: 0.5rem !important;
 }
 
-/* === RIGHT - TEXTAREA PARENT ===*/
-main div.flex.w-full.items-center > div {
-	box-shadow: none;
-	border: none;
-}
-
-html.dark[data-gptheme='oled'] main form [class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea) {
+html.dark[data-gptheme='oled'] main form div[class*='bg-[#f4f4f4]']:has(textarea#prompt-textarea) {
 	/* "Reply" in msg textarea */
-	.bg-token-main-surface-secondary {
+	.bg-token-main-surface-primary {
 		background-color: var(--c-surface-2);
 	}
 }
diff --git a/src/sass/elements/_sidebar.scss b/src/sass/elements/_sidebar.scss
index 06128c3..d4050ee 100644
--- a/src/sass/elements/_sidebar.scss
+++ b/src/sass/elements/_sidebar.scss
@@ -1,39 +1,38 @@
 /* Sidebar bg-color */
 .bg-token-sidebar-surface-primary:has(nav[aria-label='Chat history']) {
-	/* --surface-primary fix dark/black color for a:hover states */
-	// --surface-primary: var(--c-surface-2) !important;
-	// --surface-primary: red !important;
 	color: var(--c-txt) !important;
-	// background-color: var(--c-bg-sidebar) !important;
 
 	/* Fix white txt on "NEW CHAT" in sidebar for light especially */
 	nav a > * {
 		color: var(--c-txt) !important;
 	}
+
+	/* "New Chat" link (first in nav in sidebar) */
+	nav a[href='/'] {
+		border: 2px solid var(--c-surface-2);
+		padding: var(--p-sidebar-nav-a-new-chat) !important;
+		text-transform: uppercase;
+	}
+
+	/* "Explore GPTs" link parents - Ne mozemo dodati direkt n ovaj lnk jer kad dodamo vise GPTs producta u ovu listu da bude iznad "Explore GPTs" onda ono nema margin-top vec samo ovaj link, a mi zelimo parent da ima */
+	nav .sticky + div:has(a[href^='/gpts']) {
+		margin-top: 0.8rem;
+	}
 }
 
 nav[aria-label='Chat history'] {
 	padding: var(--p-sidebar-nav) !important;
 
-	// ! Strange black rectangle (.bg-black class) over "New Chat" btn when on links: https://chat.openai.com/gpts/discovery and https://chat.openai.com/g/g-UBYTKWkPj
-	/* .sticky.bg-black:has(a[href='/']) {
-		background-color: var(--c-bg-sidebar);
-		padding-bottom: 1rem !important;
-	} */
-
-	/* Parent of "NEW CHAT" btn */
-	.sticky {
+	/* TODO - maybe remove? Parent of "NEW CHAT" btn */
+	.sticky:has(a[href='/']) {
 		background-color: var(--c-bg-sidebar) !important;
-		backdrop-filter: blur(0px) !important;
-		margin-bottom: 0.5rem !important;
-		padding-bottom: 0.5rem;
+		// backdrop-filter: blur(0px) !important;
 	}
 
-	/* CLEAR CHATS div - Visible when unchecked "Chat learning & Training" in Settings */
+	/* TODO 4o REMOVED THIS i think - CLEAR CHATS div - Visible when unchecked "Chat learning & Training" in Settings */
 	.absolute.left-0.top-0.overflow-hidden {
 		background-color: var(--c-bg-sidebar) !important;
 		overflow-y: scroll;
-
 		min-height: 50vh !important;
 
 		.bg-gradient-to-t {
@@ -79,13 +78,6 @@ nav[aria-label='Chat history'] {
 
 		transition: background-color 0.3s ease-in-out;
 
-		/* "New Chat" link (first in nav in sidebar) */
-		&[href='/'] {
-			border: 2px solid var(--c-surface-2);
-			padding: var(--p-sidebar-nav-a-new-chat) !important;
-			text-transform: uppercase;
-		}
-
 		/* "Upgrade" link in nav bg */
 		span.rounded-full.border-token-border-light {
 			border-color: transparent !important;
diff --git a/src/sass/elements/_tooltips.scss b/src/sass/elements/_tooltips.scss
index 84317ae..403ae45 100644
--- a/src/sass/elements/_tooltips.scss
+++ b/src/sass/elements/_tooltips.scss
@@ -1,24 +1,54 @@
-/* === TOOLTIPS arrow div bg color === */
+/* === TOOLTIPS arrow div bg color === 
+	- Classic tooltips
+	- Tooltip with searched links in GPT chat bubble
+	- Tooltip when hover on "Attach Files" button in prompt textarea
+	- Tooltip when hover on ❌ in attached images in prompt textarea
+*/
 div[data-radix-popper-content-wrapper]:has([role='tooltip']) {
 	@extend %animFadeIn;
+	padding: var(--p-tooltips) !important;
 
-	/* Tooltip and triangle bg */
-	// .bg-black not existing anymore, it is .bg-gray-950 now, but I select it via <div> tag
-
-	div {
+	/* Basic tooltip & tooltip with searched links in GPT chat bubble */
+	.bg-gray-950 {
 		background-color: var(--c-bg-tooltip) !important;
-		padding: var(--p-tooltips) !important;
+		// border: 2px solid greenyellow !important;
+
+		[class*='text-'] {
+			color: var(--c-txt) !important;
+			// color: greenyellow !important;
+		}
 	}
-}
 
-/* === TOOLTIPS text color === */
-html.light div[data-radix-popper-content-wrapper]:has([role='tooltip']) {
-	[class*='text-'] {
-		color: var(--c-txt) !important;
+	/* Tooltip with small buttons (when hover on "Attach Files" button in prompt textarea) */
+	.bg-token-main-surface-primary {
+		// border: 2px solid red !important;
+		--main-surface-primary: var(--c-surface-3) !important;
+		// background-color: var(--main-surface-primary) !important;
+
+		[class*='text-'] {
+			color: var(--c-txt) !important;
+			// color: red !important;
+		}
 	}
+
+	/* Links in tooltips shown when hovered on some search "Link" in GPT chat bubble */
+	// &:has(a[href^='http']) {
+	// 	a[href^='http'] {
+	// 		color: currentColor !important;
+	// 	}
+	// }
 }
+
 html.dark div[data-radix-popper-content-wrapper]:has([role='tooltip']) {
-	[class*='text-'] {
-		color: var(--c-on-accent) !important;
+	.bg-gray-950 {
+		[class*='text-'] {
+			color: var(--c-on-accent) !important;
+		}
 	}
+
+	// &:has(a[href^='http']) {
+	// 	a[href^='http'] {
+	// 		color: var(--c-on-accent) !important;
+	// 	}
+	// }
 }
diff --git a/src/sass/elements/_transitions.scss b/src/sass/elements/_transitions.scss
index 57991d1..8b8adda 100644
--- a/src/sass/elements/_transitions.scss
+++ b/src/sass/elements/_transitions.scss
@@ -61,20 +61,28 @@ button:not(
 	}
 }
 
-.btn {
+/* .btn that IS NOT DISABLED, like "Create" on GPTs page */
+.btn:not(.cursor-not-allowed) {
 	will-change: transform, opacity;
 
 	// transition: transform 0.4s $easeOutBack, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out !important;
 	transition: transform 0.2s $easeInOutQuad, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out,
 		color 0.3s ease-in-out !important;
 
+	/* [class*='-translate-y-1/2']) je btn ❌ u attached image*/
+	// &:is(:hover, :active):not(.absolute.right-1.top-1.rounded-full) {
+	// &:is(:hover, :active):not([class*='-translate-y-1/2']) {
 	&:is(:hover, :active) {
 		transform: translateY(-2px);
 		opacity: 0.8;
 	}
+
+	// &:not(&-secondary, &-danger, &-green):is(:hover, :active) {
+	// 	color: var(--c-accent) !important;
+	// }
 }
 
-/* dialog buttons */
+/* ! TODO - DELETE due to GPT4o! - New dialog buttons */
 [role='dialog'] {
 	/* ".PopoverContent" je recimo menu od btn u "Shared Link to Chat" 3dots menu (Shared your Name & Delete Link) */
 	&.PopoverContent {
@@ -94,105 +102,105 @@ button[role='switch'] {
 	}
 }
 
-/* ___ New Chat big buttons */
-main form .grow .btn {
-	// transition: .4s $easeOutBack, background-color .3s ease-in-out opacity .3s ease-in-out;
-
-	/* Gradient bg visible on hover */
-	.bg-gradient-to-l {
-		transition: all 0.3s ease-in-out;
-
-		/* Button SVG parent wrapper */
-		span[data-state] {
-			overflow: hidden;
-			padding: 4px; // because svg btn looks cut off in firefox, so add a little space around
-
-			/* Button w/ SVG */
-			// .bg-token-surface-primary { this class doesnt exist anymore...
-			.bg-token-main-surface-primary {
-				transform: translateY(120%) scale(0.5);
-				transition: transform 0.5s $easeOutBack;
-			}
-		}
-	}
-
-	&:hover {
-		background-color: var(--c-surface-3) !important;
-		transform: translateY(-4px);
-
-		.bg-gradient-to-l {
-			span[data-state] {
-				/* Button w/ SVG */
-				// .bg-token-surface-primary {
-				.bg-token-main-surface-primary {
-					transform: translateY(0%) scale(1);
-					opacity: 1 !important;
-				}
-			}
-		}
-	}
-}
-
-/* ___ Textarea send message send-button */
-[data-testid='send-button']:not([disabled]) {
+/* TODO REMOVED due to GPT4o! New Chat big buttons */
+// main form .grow .btn {
+// 	// transition: .4s $easeOutBack, background-color .3s ease-in-out opacity .3s ease-in-out;
+
+// 	/* Gradient bg visible on hover */
+// 	.bg-gradient-to-l {
+// 		transition: all 0.3s ease-in-out;
+
+// 		/* Button SVG parent wrapper */
+// 		span[data-state] {
+// 			overflow: hidden;
+// 			padding: 4px; // because svg btn looks cut off in firefox, so add a little space around
+
+// 			/* Button w/ SVG */
+// 			// .bg-token-surface-primary { this class doesnt exist anymore...
+// 			.bg-token-main-surface-primary {
+// 				transform: translateY(120%) scale(0.5);
+// 				transition: transform 0.5s $easeOutBack;
+// 			}
+// 		}
+// 	}
+
+// 	&:hover {
+// 		background-color: var(--c-surface-3) !important;
+// 		transform: translateY(-4px);
+
+// 		.bg-gradient-to-l {
+// 			span[data-state] {
+// 				/* Button w/ SVG */
+// 				// .bg-token-surface-primary {
+// 				.bg-token-main-surface-primary {
+// 					transform: translateY(0%) scale(1);
+// 					opacity: 1 !important;
+// 				}
+// 			}
+// 		}
+// 	}
+// }
+
+/* TODO REMOVED due to GPT4o! Textarea send message send-button */
+/* [data-testid='send-button']:not([disabled]) {
 	transition: transform 0.4s $easeOutBack, opacity 0.3s ease-in-out;
 
 	&:hover {
 		transform: translateY(-10%);
 	}
-}
-
-/* ___ Chat Bubbles */
-main [data-testid^='conversation-turn-'] {
-	// .group {
-	& > div:first-child > div:first-child {
-		&:hover {
-			/* Bubble message footer (icons wrapper) */
-			div[class*='empty:hidden'] {
-				.self-end {
-					transform: translateY(0);
-					opacity: 1;
-
-					/* Bubble message footer (svg icons) */
-					button svg {
-						transform: scale(1);
-					}
-				}
-			}
-		}
-
-		/* Bubble message footer */
-		div[class*='empty:hidden'] {
-			overflow-y: clip;
-			// padding-inline: 10px; // to make counter answer (<2/4>) visible when this is overflow-hidden, we need to add padding-inline, or we can use overflow-y: clip; And overflow is "important" for translate transition
-
-			/* Bubble message footer (icons wrapper) */
-			.self-end {
-				transform: translateY(100%);
-				opacity: 0;
-				transition: transform 0.4s $easeOutBack, opacity 0.3s ease;
-
-				/* Bubble message footer (svg icons) */
-				button svg {
-					transform: translateY(0px);
-					transition: transform 0.4s $easeOutBack, opacity 0.3s ease-in-out;
-
-					&:hover {
-						opacity: 0.7;
-						transform: translateY(-2px);
-					}
-				}
-			}
-
-			@include dev(mob) {
-				.self-end {
-					transform: translateY(0%) !important;
-					opacity: 1 !important;
-				}
-			}
-		}
-	}
-}
+} */
+
+/* TODO - See if this still exists, i think there is no more .self-end ___ Chat Bubbles */
+// main [data-testid^='conversation-turn-'] {
+// 	// .group {
+// 	& > div:first-child > div:first-child {
+// 		&:hover {
+// 			/* Bubble message footer (icons wrapper) */
+// 			div[class*='empty:hidden'] {
+// 				.self-end {
+// 					transform: translateY(0);
+// 					opacity: 1;
+
+// 					/* Bubble message footer (svg icons) */
+// 					button svg {
+// 						transform: scale(1);
+// 					}
+// 				}
+// 			}
+// 		}
+
+// 		/* Bubble message footer */
+// 		div[class*='empty:hidden'] {
+// 			overflow-y: clip;
+// 			// padding-inline: 10px; // to make counter answer (<2/4>) visible when this is overflow-hidden, we need to add padding-inline, or we can use overflow-y: clip; And overflow is "important" for translate transition
+
+// 			/* Bubble message footer (icons wrapper) */
+// 			.self-end {
+// 				transform: translateY(100%);
+// 				opacity: 0;
+// 				transition: transform 0.4s $easeOutBack, opacity 0.3s ease;
+
+// 				/* Bubble message footer (svg icons) */
+// 				button svg {
+// 					transform: translateY(0px);
+// 					transition: transform 0.4s $easeOutBack, opacity 0.3s ease-in-out;
+
+// 					&:hover {
+// 						opacity: 0.7;
+// 						transform: translateY(-2px);
+// 					}
+// 				}
+// 			}
+
+// 			@include dev(mob) {
+// 				.self-end {
+// 					transform: translateY(0%) !important;
+// 					opacity: 1 !important;
+// 				}
+// 			}
+// 		}
+// 	}
+// }
 
 /* "Copy code" btn */
 pre {
@@ -215,8 +223,9 @@ html.light pre button:has(svg):hover {
 	--c-bg-pre-header-btn-color: var(--c-on-accent) !important;
 }
 
-/* ___ Scroll down button */
-main [role='presentation'] button.absolute.rounded-full {
+/* ___ Scroll down button 
+[class*='-translate-y-1/2'] je btn ❌ u attached image */
+main [role='presentation'] button.absolute.rounded-full:not([class*='-translate-y-1/2']) {
 	transition: transform 0.4s $easeOutBack, opacity 0.3s ease-in-out;
 
 	&:hover {
diff --git a/src/sass/global/_colors-bgs.scss b/src/sass/global/_colors-bgs.scss
index 3c588e7..148070b 100644
--- a/src/sass/global/_colors-bgs.scss
+++ b/src/sass/global/_colors-bgs.scss
@@ -6,7 +6,7 @@
  */
 .bg-gray-900,
 .bg-white {
-	background-color: var(--c-surface-1) !important;
+	background-color: var(--c-surface-2) !important;
 	// background-color: red !important;
 }
 
@@ -89,10 +89,13 @@
 	color: var(--c-on-accent) !important;
 }
 
-/* TOS - "This content may violate content policy..." (red) & "This content may violate our Terms of Use or usage policies." (orange) warnings. Also alert in "Share Link to Chat" dialog shown sometimes */
+/* Errors and TOS - "This content may violate content policy..." (red) & "This content may violate our Terms of Use or usage policies." (orange) warnings. Also alert in "Share Link to Chat" dialog shown sometimes.
+This content may violate our Terms of Use or usage policies. is bg-orange-400 now !!!
+- bg-token-surface-error is a error: "We are sorry, but you do not have access to GPT interactions." shown when we do not have access to GPTs products */
 // [class*='bg-red-500/10'],
 [class*='bg-red-500'],
-[class*='bg-orange-500/10'] {
+[class*='bg-orange-400'],
+[class*='bg-token-surface-error'] {
 	background-color: hsla(var(--danger-hsl) / 0.11) !important;
 	color: var(--c-danger) !important;
 	// background-color: var(--c-danger) !important;
@@ -165,10 +168,21 @@
 	// background-color: var(--c-surface-3) !important;
 }
 
-.from-token-main-surface-primary {
-	--main-surface-primary: var(--c-surface-2) !important;
-}
+/* 
+- Gradient before "Create Link" in "Share Link to Public" dialog
+- Gradient before "Open link" icon in "Search x sites" dropdown link items in GPT's chat
+- Gradient in dialog header when clicked on GPTs product, but if we add this style here it broke the gradient in "Create Link" dialog bcs there is var(--c-surface-3) (or var(--main-surface-primary)
+ */
+// .from-token-main-surface-primary {
+// 	--main-surface-primary: var(--c-surface-2) !important;
+// }
 
+/* .bg-token-main-surface-tertiary {
+	&:hover {
+		--main-surface-tertiary: greenyellow !important;
+		background-color: red !important;
+	}
+} */
 /* 
 - When clicked on dropdown in Settings > Language list
 - "Conversation Starters" example bubbles in dialog in GPTs page when clicked on product */
@@ -179,3 +193,10 @@
 // 		background-color: var(--c-surface-2) !important;
 // 	}
 // }
+
+.bg-token-main-surface-secondary {
+	background-color: var(--c-surface-2) !important;
+}
+// .bg-token-main-surface-tertiary {
+// 	background-color: var(--c-surface-1) !important;
+// }
diff --git a/src/sass/index.scss b/src/sass/index.scss
index 583bb4a..8069335 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -36,9 +36,13 @@
 @import 'elements/_right--new-chat';
 @import 'elements/_right--sticky';
 @import 'elements/_right--textarea';
+@import 'elements/_right--limit-reaches';
 @import 'pages/_shared-links';
 @import 'pages/_gpt-store';
 @import 'elements/_transitions';
 
+// @import 'layouts/_old-ui';
+@import 'layouts/_old-ui-index';
+
 @import 'gpthemes/_gpth-v2';
 @import 'gpthemes/theme-manager/_gpth-settings';
diff --git a/src/sass/layouts/_old-ui-index.scss b/src/sass/layouts/_old-ui-index.scss
new file mode 100644
index 0000000..7774025
--- /dev/null
+++ b/src/sass/layouts/_old-ui-index.scss
@@ -0,0 +1,4 @@
+@import 'old-ui/_new-chat';
+@import 'old-ui/_chat-bubbles';
+@import 'old-ui/_prompt-textarea';
+@import 'old-ui/_sidebar-collapse-btn';
diff --git a/src/sass/layouts/_old-ui.scss b/src/sass/layouts/_old-ui.scss
new file mode 100644
index 0000000..68925aa
--- /dev/null
+++ b/src/sass/layouts/_old-ui.scss
@@ -0,0 +1,383 @@
+// main [data-testid^='conversation-turn-'] {
+// 	&:has([data-message-author-role='user']) {
+// 		// [class*='lg:max-w-[40rem]']:not([class*='bg-[#f4f4f4]']) {
+// 		&:not(.lg\:max-w-\[40rem\].bg-\[\#f4f4f4\]) {
+// 			// border: 2px solid red !important;
+// 		}
+
+// 		// 	background-color: var(--c-bg-msg-user);
+// 		// 	padding: var(--p-chat-bubble) calc(var(--p-chat-bubble) * 1.2);
+// 		// 	border-radius: var(--br-chat-bubble) !important;
+// 	}
+// }
+
+// [data-message-author-role='user'] {
+//     align-items: flex-start !important;
+// }
+// [class*='lg:max-w-[40rem]'] {
+// 	background-color: var(--c-bg-msg-user);
+// 	padding: var(--p-chat-bubble) calc(var(--p-chat-bubble) * 1.2);
+// 	border-radius: var(--br-chat-bubble) !important;
+// }
+
+// main:has(div[class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea)) {
+// 	box-shadow: inset 0 0 0 10px red !important;
+// }
+// main:has(form div[class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea)) {
+// 	border: 10px solid orange !important;
+// }
+
+/* ? Unique selector for detecting the UI with the old design vs new one (gpt4o)
+- [data-testid='send-button'] is used for detecting the UI with the old design vs new one (gpt4o).
+- The problem is while gpt generating the answer this selector is gone, but the [aria-lab`el='Stop generating'] is visible now (stop btn), so we use this selector too! 
+- This could causes many problems if ChatGPT add those attributes to the new 4o desgin too! Then the old design and the new design would be merged together. */
+main:has(button[data-testid='send-button']),
+main:has(button[aria-label='Stop generating']) {
+	// main:where(form div[class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea)) {
+	// border: 10px solid orange !important;
+
+	/* @ CHAT BUBBLES  */
+	[data-testid^='conversation-turn-'] {
+		[data-message-author-role='user'],
+		[data-message-author-role='assistant'] {
+			margin-top: var(--mt-chat-txt) !important;
+			margin-bottom: var(--mb-chat-txt) !important;
+		}
+		/* Horizontal gap from chat bubble to screen-edge */
+		& > div {
+			/* Original is px-4 or 1rem */
+			@include dev(mob) {
+				padding-left: 0.45rem;
+				padding-right: 0.45rem;
+			}
+		}
+
+		/* Chat bubbles - BOTH and user and gpt */
+		& > div:first-child > div:first-child {
+			--pt-multiplier: 1.2;
+			padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble)
+				var(--p-chat-bubble) !important;
+			border-radius: var(--br-chat-bubble) !important;
+			letter-spacing: 0.3px;
+			line-height: 1.8 !important;
+
+			@include dev(mob) {
+				--pt-multiplier: 1;
+			}
+
+			/* Left chat content parent 
+			! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
+			/* 
+				0.75rem = gap-3 = gap between profile svg/img and right content
+				2.25rem = w-9 = gpt profile svg parent width */
+			.relative.flex.w-full.flex-col {
+				--svg-w: 2.25rem;
+				--svg-gap: 0.75rem;
+
+				width: calc(
+					100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble)
+				) !important; // more consistent width (right chat bubble spacing = left spacing)
+
+				@include dev(mob) {
+					--svg-w: 24px;
+					--moveToLeft: calc(var(--svg-w) + (var(--svg-gap) / 1.5));
+
+					/* Markdown parent - actually message content, without logo and User/ChatGPT name */
+					.flex-col.gap-1.md\:gap-3 {
+						transform: translateX(calc(var(--moveToLeft) * -1));
+						width: calc(100% + var(--moveToLeft) + var(--p-chat-bubble)) !important;
+					}
+				}
+			}
+		}
+		&:has([data-message-author-role='user']) {
+			/* Chat bubble */
+
+			& > div:first-child > div:first-child {
+				background-color: var(--c-bg-msg-user);
+				outline: 2px solid transparent !important;
+			}
+
+			/* Flex-end the Reply in user chat bubble */
+			[data-message-author-role='user'] {
+				align-items: flex-start !important;
+
+				& > [class*='max-w-[90%]'] {
+					max-width: 100% !important;
+				}
+			}
+
+			/* Uploaded image parent */
+			.w-full.mt-1 {
+				margin: 0 !important;
+				.bg-token-main-surface-secondary {
+					border-radius: var(--br-contextmenu) !important;
+				}
+			}
+			/* Uploaded image */
+			button:has(img[alt='Uploaded image']) {
+				img[alt='Uploaded image'] {
+					border-radius: var(--br-contextmenu) !important;
+					margin: 0 !important;
+				}
+			}
+		}
+
+		/* User chat bubble - Edit state. There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select like this for that case scenario */
+		[class^='group/conversation-turn']:has(textarea) {
+			/* === User/ChatGPT name === */
+			.font-semibold.select-none + div .max-w-full {
+				background-color: var(--c-bg-chats-container) !important;
+				margin-top: 1rem;
+				box-shadow: var(--box-shadow-textarea);
+				border-radius: var(--br-chat-bubble) !important;
+				outline: 2px solid hsla(var(--accent-hsl) / 0.1) !important;
+				transition: outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+				textarea {
+					@extend %animFadeIn;
+					color: var(--c-subtext-2) !important;
+					padding: 0.5rem 0;
+				}
+
+				/* Parent of buttons: "Save & Submit" and "Cancel" */
+				.text-center.mt-2.flex.justify-center {
+					@extend %animFadeIn;
+				}
+			}
+		}
+
+		/* RIGHT - CHATS USER/GPT NAMES */
+		.font-semibold.select-none {
+			text-transform: uppercase;
+			color: var(--c-accent);
+		}
+	}
+
+	/* @ PROMPT TEXTAREA  */
+	// Guest/3.5 textarea prompt
+	form div[class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea) {
+		/* Guest/3.5 - "Send button" */
+		button[data-testid='send-button'] {
+			right: 1.3rem !important;
+			bottom: 1.3rem !important;
+		}
+
+		/* "Stop generating" btn */
+		.absolute:has(button[aria-label='Stop generating']) {
+			// right: 1.3rem !important;
+			bottom: 0.9rem !important;
+
+			button[aria-label='Stop generating'] {
+				svg {
+					color: var(--c-accent);
+				}
+			}
+		}
+
+		/* Guest/3.5 - Attach files button */
+		// .absolute[type='button'][aria-haspopup='dialog']:has(button[aria-label='Attach files']) {
+		// 	bottom: 1.5rem !important;
+		// }
+	}
+
+	/* @ NEW CHAT BIH BUTTONS */
+	form .grow {
+		/* recimo gap izmedju new chat example buttons*/
+		.gap-2 {
+			gap: 0.8rem !important;
+		}
+		[class*='grid-cols-[repeat(auto-fit,minmax(250px,1fr))]'] {
+			.btn {
+				padding: 1.5rem !important;
+				background-color: var(--c-surface-2) !important;
+				color: var(--c-txt) !important;
+				border-radius: var(--br-btn-big) !important;
+				overflow: hidden; // Mora jer kad se hoveruje .btn, onda se  .bg-gradient-to-l radius ne uklapa s ovim, manji je i onda .btn cudno izgleda sa desne strane, ovaj ga overflowuje
+
+				/* Gradient bg visible on hover */
+				.bg-gradient-to-l {
+					--gradient-color-from: var(--c-surface-3) !important;
+					transition: all 0.3s ease-in-out;
+
+					/* Button SVG parent ❌ */
+					.bg-token-main-surface-primary {
+						background-color: var(--c-accent) !important;
+						border-radius: 100vw !important;
+						padding: 0.5rem !important;
+
+						/* SVG icon*/
+						svg {
+							color: var(--c-on-accent) !important;
+						}
+					}
+
+					/* Button SVG parent wrapper */
+					span[data-state] {
+						overflow: hidden;
+						padding: 4px; // because svg btn looks cut off in firefox, so add a little space around
+
+						/* Button w/ SVG */
+						.bg-token-main-surface-primary {
+							transform: translateY(120%) scale(0.5);
+							transition: transform 0.5s $easeOutBack;
+						}
+					}
+				}
+
+				&:hover {
+					background-color: var(--c-surface-3) !important;
+					transform: translateY(-4px);
+
+					.bg-gradient-to-l {
+						span[data-state] {
+							/* Button w/ SVG */
+							// .bg-token-surface-primary {
+							.bg-token-main-surface-primary {
+								transform: translateY(0%) scale(1);
+								opacity: 1 !important;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/* @ Collapse sidebar btn - hover state*/
+	[class*='fixed left-0 top-1/2']:has(button) {
+		.rounded-full {
+			transition: background-color 0.2s ease-in-out;
+		}
+
+		&:hover {
+			.rounded-full {
+				background-color: var(--c-accent) !important;
+			}
+		}
+	}
+}
+
+/* @ OLD design selector to target design on non-textarea and send/stop button page 
+! WARNING: THIS CAN BREAK AND NEW-UI WEBSITE IF THEY ADD .font-semibold.select-none inside the [data-testid^='conversation-turn-']
+*/
+main:has([data-testid^='conversation-turn-'] .font-semibold.select-none) {
+	// border: 20px solid red !important;
+
+	[data-testid^='conversation-turn-'] {
+		[data-message-author-role='user'],
+		[data-message-author-role='assistant'] {
+			margin-top: var(--mt-chat-txt) !important;
+			margin-bottom: var(--mb-chat-txt) !important;
+		}
+		/* Horizontal gap from chat bubble to screen-edge */
+		& > div {
+			/* Original is px-4 or 1rem */
+			@include dev(mob) {
+				padding-left: 0.45rem;
+				padding-right: 0.45rem;
+			}
+		}
+
+		/* Chat bubbles - BOTH and user and gpt */
+		& > div:first-child > div:first-child {
+			--pt-multiplier: 1.2;
+			padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble)
+				var(--p-chat-bubble) !important;
+			border-radius: var(--br-chat-bubble) !important;
+			letter-spacing: 0.3px;
+			line-height: 1.8 !important;
+
+			@include dev(mob) {
+				--pt-multiplier: 1;
+			}
+
+			/* Left chat content parent 
+			! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
+			/* 
+				0.75rem = gap-3 = gap between profile svg/img and right content
+				2.25rem = w-9 = gpt profile svg parent width */
+			.relative.flex.w-full.flex-col {
+				--svg-w: 2.25rem;
+				--svg-gap: 0.75rem;
+
+				width: calc(
+					100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble)
+				) !important; // more consistent width (right chat bubble spacing = left spacing)
+
+				@include dev(mob) {
+					--svg-w: 24px;
+					--moveToLeft: calc(var(--svg-w) + (var(--svg-gap) / 1.5));
+
+					/* Markdown parent - actually message content, without logo and User/ChatGPT name */
+					.flex-col.gap-1.md\:gap-3 {
+						transform: translateX(calc(var(--moveToLeft) * -1));
+						width: calc(100% + var(--moveToLeft) + var(--p-chat-bubble)) !important;
+					}
+				}
+			}
+		}
+		&:has([data-message-author-role='user']) {
+			/* Chat bubble */
+
+			& > div:first-child > div:first-child {
+				background-color: var(--c-bg-msg-user);
+				outline: 2px solid transparent !important;
+			}
+
+			/* Flex-end the Reply in user chat bubble */
+			[data-message-author-role='user'] {
+				align-items: flex-start !important;
+
+				& > [class*='max-w-[90%]'] {
+					max-width: 100% !important;
+				}
+			}
+
+			/* Uploaded image parent */
+			.w-full.mt-1 {
+				margin: 0 !important;
+				.bg-token-main-surface-secondary {
+					border-radius: var(--br-contextmenu) !important;
+				}
+			}
+			/* Uploaded image */
+			button:has(img[alt='Uploaded image']) {
+				img[alt='Uploaded image'] {
+					border-radius: var(--br-contextmenu) !important;
+					margin: 0 !important;
+				}
+			}
+		}
+
+		/* User chat bubble - Edit state. There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select like this for that case scenario */
+		[class^='group/conversation-turn']:has(textarea) {
+			/* === User/ChatGPT name === */
+			.font-semibold.select-none + div .max-w-full {
+				background-color: var(--c-bg-chats-container) !important;
+				margin-top: 1rem;
+				box-shadow: var(--box-shadow-textarea);
+				border-radius: var(--br-chat-bubble) !important;
+				outline: 2px solid hsla(var(--accent-hsl) / 0.1) !important;
+				transition: outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+				textarea {
+					@extend %animFadeIn;
+					color: var(--c-subtext-2) !important;
+					padding: 0.5rem 0;
+				}
+
+				/* Parent of buttons: "Save & Submit" and "Cancel" */
+				.text-center.mt-2.flex.justify-center {
+					@extend %animFadeIn;
+				}
+			}
+		}
+
+		/* RIGHT - CHATS USER/GPT NAMES */
+		.font-semibold.select-none {
+			text-transform: uppercase;
+			color: var(--c-accent);
+		}
+	}
+}
diff --git a/src/sass/layouts/old-ui/_chat-bubbles.scss b/src/sass/layouts/old-ui/_chat-bubbles.scss
new file mode 100644
index 0000000..9d1111a
--- /dev/null
+++ b/src/sass/layouts/old-ui/_chat-bubbles.scss
@@ -0,0 +1,244 @@
+main:has(button[data-testid='send-button']),
+main:has(button[aria-label='Stop generating']) {
+	/* @ CHAT BUBBLES  */
+	[data-testid^='conversation-turn-'] {
+		[data-message-author-role='user'],
+		[data-message-author-role='assistant'] {
+			margin-top: var(--mt-chat-txt) !important;
+			margin-bottom: var(--mb-chat-txt) !important;
+		}
+		/* Horizontal gap from chat bubble to screen-edge */
+		& > div {
+			/* Original is px-4 or 1rem */
+			@include dev(mob) {
+				padding-left: 0.45rem;
+				padding-right: 0.45rem;
+			}
+		}
+
+		/* Chat bubbles - BOTH and user and gpt */
+		& > div:first-child > div:first-child {
+			--pt-multiplier: 1.2;
+			padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble)
+				var(--p-chat-bubble) !important;
+			border-radius: var(--br-chat-bubble) !important;
+			letter-spacing: 0.3px;
+			line-height: 1.8 !important;
+
+			@include dev(mob) {
+				--pt-multiplier: 1;
+			}
+
+			/* Left chat content parent 
+			! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
+			/* 
+				0.75rem = gap-3 = gap between profile svg/img and right content
+				2.25rem = w-9 = gpt profile svg parent width */
+			.relative.flex.w-full.flex-col {
+				--svg-w: 2.25rem;
+				--svg-gap: 0.75rem;
+
+				width: calc(
+					100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble)
+				) !important; // more consistent width (right chat bubble spacing = left spacing)
+
+				@include dev(mob) {
+					--svg-w: 24px;
+					--moveToLeft: calc(var(--svg-w) + (var(--svg-gap) / 1.5));
+
+					/* Markdown parent - actually message content, without logo and User/ChatGPT name */
+					.flex-col.gap-1.md\:gap-3 {
+						transform: translateX(calc(var(--moveToLeft) * -1));
+						width: calc(100% + var(--moveToLeft) + var(--p-chat-bubble)) !important;
+					}
+				}
+			}
+		}
+		&:has([data-message-author-role='user']) {
+			/* Chat bubble */
+
+			& > div:first-child > div:first-child {
+				background-color: var(--c-bg-msg-user);
+				outline: 2px solid transparent !important;
+			}
+
+			/* Flex-end the Reply in user chat bubble */
+			[data-message-author-role='user'] {
+				align-items: flex-start !important;
+
+				& > [class*='max-w-[90%]'] {
+					max-width: 100% !important;
+				}
+			}
+
+			/* Uploaded image parent */
+			.w-full.mt-1 {
+				margin: 0 !important;
+				.bg-token-main-surface-secondary {
+					border-radius: var(--br-contextmenu) !important;
+				}
+			}
+			/* Uploaded image */
+			button:has(img[alt='Uploaded image']) {
+				img[alt='Uploaded image'] {
+					border-radius: var(--br-contextmenu) !important;
+					margin: 0 !important;
+				}
+			}
+		}
+
+		/* User chat bubble - Edit state. There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select like this for that case scenario */
+		[class^='group/conversation-turn']:has(textarea) {
+			/* === User/ChatGPT name === */
+			.font-semibold.select-none + div .max-w-full {
+				background-color: var(--c-bg-chats-container) !important;
+				margin-top: 1rem;
+				box-shadow: var(--box-shadow-textarea);
+				border-radius: var(--br-chat-bubble) !important;
+				outline: 2px solid hsla(var(--accent-hsl) / 0.1) !important;
+				transition: outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+				textarea {
+					@extend %animFadeIn;
+					color: var(--c-subtext-2) !important;
+					padding: 0.5rem 0;
+				}
+
+				/* Parent of buttons: "Save & Submit" and "Cancel" */
+				.text-center.mt-2.flex.justify-center {
+					@extend %animFadeIn;
+				}
+			}
+		}
+
+		/* RIGHT - CHATS USER/GPT NAMES */
+		.font-semibold.select-none {
+			text-transform: uppercase;
+			color: var(--c-accent);
+		}
+	}
+}
+
+/* @ OLD design selector to target design on non-textarea and send/stop button page 
+! WARNING: THIS CAN BREAK AND NEW-UI WEBSITE IF THEY ADD .font-semibold.select-none inside the [data-testid^='conversation-turn-']
+*/
+main:has([data-testid^='conversation-turn-'] .font-semibold.select-none) {
+	// border: 20px solid red !important;
+
+	[data-testid^='conversation-turn-'] {
+		[data-message-author-role='user'],
+		[data-message-author-role='assistant'] {
+			margin-top: var(--mt-chat-txt) !important;
+			margin-bottom: var(--mb-chat-txt) !important;
+		}
+		/* Horizontal gap from chat bubble to screen-edge */
+		& > div {
+			/* Original is px-4 or 1rem */
+			@include dev(mob) {
+				padding-left: 0.45rem;
+				padding-right: 0.45rem;
+			}
+		}
+
+		/* Chat bubbles - BOTH and user and gpt */
+		& > div:first-child > div:first-child {
+			--pt-multiplier: 1.2;
+			padding: calc(var(--p-chat-bubble) * var(--pt-multiplier)) var(--p-chat-bubble) var(--p-chat-bubble)
+				var(--p-chat-bubble) !important;
+			border-radius: var(--br-chat-bubble) !important;
+			letter-spacing: 0.3px;
+			line-height: 1.8 !important;
+
+			@include dev(mob) {
+				--pt-multiplier: 1;
+			}
+
+			/* Left chat content parent 
+			! Adding fixed width prevent content overflowing on the right side of chat bubble when there is some markdown (<pre>) element shown with scrolling horizontally */
+			/* 
+				0.75rem = gap-3 = gap between profile svg/img and right content
+				2.25rem = w-9 = gpt profile svg parent width */
+			.relative.flex.w-full.flex-col {
+				--svg-w: 2.25rem;
+				--svg-gap: 0.75rem;
+
+				width: calc(
+					100% - var(--svg-w) - var(--svg-gap) - var(--p-chat-bubble)
+				) !important; // more consistent width (right chat bubble spacing = left spacing)
+
+				@include dev(mob) {
+					--svg-w: 24px;
+					--moveToLeft: calc(var(--svg-w) + (var(--svg-gap) / 1.5));
+
+					/* Markdown parent - actually message content, without logo and User/ChatGPT name */
+					.flex-col.gap-1.md\:gap-3 {
+						transform: translateX(calc(var(--moveToLeft) * -1));
+						width: calc(100% + var(--moveToLeft) + var(--p-chat-bubble)) !important;
+					}
+				}
+			}
+		}
+		&:has([data-message-author-role='user']) {
+			/* Chat bubble */
+
+			& > div:first-child > div:first-child {
+				background-color: var(--c-bg-msg-user);
+				outline: 2px solid transparent !important;
+			}
+
+			/* Flex-end the Reply in user chat bubble */
+			[data-message-author-role='user'] {
+				align-items: flex-start !important;
+
+				& > [class*='max-w-[90%]'] {
+					max-width: 100% !important;
+				}
+			}
+
+			/* Uploaded image parent */
+			.w-full.mt-1 {
+				margin: 0 !important;
+				.bg-token-main-surface-secondary {
+					border-radius: var(--br-contextmenu) !important;
+				}
+			}
+			/* Uploaded image */
+			button:has(img[alt='Uploaded image']) {
+				img[alt='Uploaded image'] {
+					border-radius: var(--br-contextmenu) !important;
+					margin: 0 !important;
+				}
+			}
+		}
+
+		/* User chat bubble - Edit state. There is no [data-message-author-role="user"] when we clicked on "Edit Prompt", so we need select like this for that case scenario */
+		[class^='group/conversation-turn']:has(textarea) {
+			/* === User/ChatGPT name === */
+			.font-semibold.select-none + div .max-w-full {
+				background-color: var(--c-bg-chats-container) !important;
+				margin-top: 1rem;
+				box-shadow: var(--box-shadow-textarea);
+				border-radius: var(--br-chat-bubble) !important;
+				outline: 2px solid hsla(var(--accent-hsl) / 0.1) !important;
+				transition: outline 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+				textarea {
+					@extend %animFadeIn;
+					color: var(--c-subtext-2) !important;
+					padding: 0.5rem 0;
+				}
+
+				/* Parent of buttons: "Save & Submit" and "Cancel" */
+				.text-center.mt-2.flex.justify-center {
+					@extend %animFadeIn;
+				}
+			}
+		}
+
+		/* RIGHT - CHATS USER/GPT NAMES */
+		.font-semibold.select-none {
+			text-transform: uppercase;
+			color: var(--c-accent);
+		}
+	}
+}
diff --git a/src/sass/layouts/old-ui/_new-chat.scss b/src/sass/layouts/old-ui/_new-chat.scss
new file mode 100644
index 0000000..cdf7f79
--- /dev/null
+++ b/src/sass/layouts/old-ui/_new-chat.scss
@@ -0,0 +1,65 @@
+main:has(button[data-testid='send-button']),
+main:has(button[aria-label='Stop generating']) {
+	/* @ NEW CHAT BIH BUTTONS */
+	form .grow {
+		/* recimo gap izmedju new chat example buttons*/
+		.gap-2 {
+			gap: 0.8rem !important;
+		}
+		[class*='grid-cols-[repeat(auto-fit,minmax(250px,1fr))]'] {
+			.btn {
+				padding: 1.5rem !important;
+				background-color: var(--c-surface-2) !important;
+				color: var(--c-txt) !important;
+				border-radius: var(--br-btn-big) !important;
+				overflow: hidden; // Mora jer kad se hoveruje .btn, onda se  .bg-gradient-to-l radius ne uklapa s ovim, manji je i onda .btn cudno izgleda sa desne strane, ovaj ga overflowuje
+
+				/* Gradient bg visible on hover */
+				.bg-gradient-to-l {
+					--gradient-color-from: var(--c-surface-3) !important;
+					transition: all 0.3s ease-in-out;
+
+					/* Button SVG parent ❌ */
+					.bg-token-main-surface-primary {
+						background-color: var(--c-accent) !important;
+						border-radius: 100vw !important;
+						padding: 0.5rem !important;
+
+						/* SVG icon*/
+						svg {
+							color: var(--c-on-accent) !important;
+						}
+					}
+
+					/* Button SVG parent wrapper */
+					span[data-state] {
+						overflow: hidden;
+						padding: 4px; // because svg btn looks cut off in firefox, so add a little space around
+
+						/* Button w/ SVG */
+						.bg-token-main-surface-primary {
+							transform: translateY(120%) scale(0.5);
+							transition: transform 0.5s $easeOutBack;
+						}
+					}
+				}
+
+				&:hover {
+					background-color: var(--c-surface-3) !important;
+					transform: translateY(-4px);
+
+					.bg-gradient-to-l {
+						span[data-state] {
+							/* Button w/ SVG */
+							// .bg-token-surface-primary {
+							.bg-token-main-surface-primary {
+								transform: translateY(0%) scale(1);
+								opacity: 1 !important;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/sass/layouts/old-ui/_prompt-textarea.scss b/src/sass/layouts/old-ui/_prompt-textarea.scss
new file mode 100644
index 0000000..79836a1
--- /dev/null
+++ b/src/sass/layouts/old-ui/_prompt-textarea.scss
@@ -0,0 +1,29 @@
+main:has(button[data-testid='send-button']),
+main:has(button[aria-label='Stop generating']) {
+	/* @ PROMPT TEXTAREA  */
+	// Guest/3.5 textarea prompt
+	form div[class*='[&:has(textarea:focus)]']:has(textarea#prompt-textarea) {
+		/* Guest/3.5 - "Send button" */
+		button[data-testid='send-button'] {
+			right: 1.3rem !important;
+			bottom: 1.3rem !important;
+		}
+
+		/* "Stop generating" btn */
+		.absolute:has(button[aria-label='Stop generating']) {
+			// right: 1.3rem !important;
+			bottom: 0.9rem !important;
+
+			button[aria-label='Stop generating'] {
+				svg {
+					color: var(--c-accent);
+				}
+			}
+		}
+
+		/* Guest/3.5 - Attach files button */
+		// .absolute[type='button'][aria-haspopup='dialog']:has(button[aria-label='Attach files']) {
+		// 	bottom: 1.5rem !important;
+		// }
+	}
+}
diff --git a/src/sass/layouts/old-ui/_sidebar-collapse-btn.scss b/src/sass/layouts/old-ui/_sidebar-collapse-btn.scss
new file mode 100644
index 0000000..3d395e1
--- /dev/null
+++ b/src/sass/layouts/old-ui/_sidebar-collapse-btn.scss
@@ -0,0 +1,15 @@
+main:has(button[data-testid='send-button']),
+main:has(button[aria-label='Stop generating']) {
+	/* @ Collapse sidebar btn - hover state*/
+	[class*='fixed left-0 top-1/2']:has(button) {
+		.rounded-full {
+			transition: background-color 0.2s ease-in-out;
+		}
+
+		&:hover {
+			.rounded-full {
+				background-color: var(--c-accent) !important;
+			}
+		}
+	}
+}
diff --git a/src/sass/pages/_gpt-store.scss b/src/sass/pages/_gpt-store.scss
index 5aa0596..14e9f08 100644
--- a/src/sass/pages/_gpt-store.scss
+++ b/src/sass/pages/_gpt-store.scss
@@ -1,12 +1,10 @@
 main:has(.sticky [href='/gpts/editor']) {
-	// /* Main Cards (big) */
-	// .rounded-xl {
-	// 	border-radius: var(--br-btn-big) !important;
-	// }
-	// /* Search query list cards. Input search */
-	// .rounded-lg {
-	// 	border-radius: var(--br-btn) !important;
-	// }
+	/* Notification on the top of the GPTs Store page (before the sticky header): "GPTs will be coming to free users over the next few weeks. Stay tuned!" */
+	.bg-token-main-surface-tertiary[class*='h-[52px] w-full'] {
+		background-color: hsla(var(--accent-hsl) / 0.07) !important;
+		border-bottom: 1px solid hsla(var(--accent-hsl) / 0.04);
+		color: var(--c-accent);
+	}
 	/* Sticky header tags aka "Top Picks", "DALLE", "Writing", etc */
 	.sticky {
 		[class*='md:rounded-none'],
@@ -58,11 +56,13 @@ main:has(.sticky [href='/gpts/editor']) {
 	}
 	/* Section visible on search query */
 	[id*='headlessui-popover-panel-'] {
+		// border: 1px solid red !important;
 		// --main-surface-primary: var(--c-surface-2) !important;
 		--br-search-query-section: calc(var(--br-btn) * 1.2) !important;
 
 		/* Added to visually remove unstickness search query section from input search */
-		transform: translateY(-5px);
+		transform: translateY(-3px);
+		padding-top: 10px;
 
 		border-radius: 0 0 var(--br-search-query-section) var(--br-search-query-section) !important;
 
@@ -75,10 +75,6 @@ main:has(.sticky [href='/gpts/editor']) {
 				color: var(--c-on-accent) !important;
 				// color: red !important;
 			}
-
-			// &:hover {
-			// 	background-color: var(--c-surface-3) !important;
-			// }
 		}
 	}