diff --git a/styles/abstract/_dark.scss b/styles/abstract/_dark.scss
index 9d546e9..6e41102 100644
--- a/styles/abstract/_dark.scss
+++ b/styles/abstract/_dark.scss
@@ -81,8 +81,8 @@ body.dark[data-ds-dark-theme] {
     --c-bg-pre: hsla(var(--accent-h) var(--surface-s) var(--surface-l) / 0.8);
 
     /* ? ========== Scrollbar colors ========== */
-    --c-scrollbar-thumb: var(--c-surface-3);
-    --c-scrollbar-track: transparent;
+    // --c-scrollbar-thumb: var(--c-surface-3);
+    // --c-scrollbar-track: transparent;
 
     /* ? ========== border colors ========== */
     --c-border: hsla(var(--txt-hsl) / 0.08);
diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 6bed73c..235743e 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -1,6 +1,6 @@
 :root {
     --message-list-padding-horizontal: 16px;
-    --message-list-max-width: 803px;
+    --message-list-max-width: 800px;
 
     --c-bg-textarea: linear-gradient(145deg, hsla(var(--accent-hsl) / 0.2) 0%, hsla(var(--accent-hsl) / 0.1) 22%, hsla(var(--accent-hsl) / 0.1) 68%, hsla(var(--accent-hsl) / 0.2) 100%);
 
@@ -29,32 +29,6 @@ body {
 
 body,
 page {
-    --ds-rgb-info: var(--ds-rgb-blue-500);
-    --ds-rgb-primary: var(--ds-rgb-blue-500);
-    --ds-rgb-primary-foreground: var(--ds-rgb-white);
-    --ds-rgb-label-1: var(--ds-rgb-neutral-700);
-    --ds-rgb-label-2: var(--ds-rgb-neutral-450);
-    --ds-rgb-label-3: var(--ds-rgb-neutral-400);
-    --ds-rgb-error: var(--ds-rgb-red-500);
-    --ds-rgb-warning: var(--ds-rgb-amber-500);
-    --ds-rgb-success: var(--ds-rgb-green-500);
-    --ds-rgba-transparent: 255 255 255 / 0;
-    --ds-rgb-bg-base: var(--ds-rgb-white);
-    --ds-rgb-elevated: var(--ds-rgb-white);
-    --ds-rgb-track: var(--ds-rgb-neutral-200);
-    --ds-rgb-hover: var(--ds-rgb-neutral-100);
-    --ds-rgb-header: var(--ds-rgb-neutral-50);
-    --ds-rgb-separator: var(--ds-rgb-neutral-100);
-    --ds-rgb-separator-strong: var(--ds-rgb-neutral-200);
-    --ds-rgb-input: var(--ds-rgb-neutral-100);
-    --ds-rgb-input-strong: var(--ds-rgb-neutral-150);
-    --ds-rgb-input-focus: var(--ds-rgb-white);
-    --ds-rgb-link: var(--ds-rgb-primary);
-    --ds-rgb-tag: var(--ds-rgb-neutral-200);
-    --ds-rgb-segmented: var(--ds-rgb-neutral-100);
-    --ds-rgb-segmented-button: var(--ds-rgb-white);
-    --ds-rgb-segmented-separator: var(--ds-rgb-neutral-300);
-    --ds-rgb-thumb: var(--ds-rgb-white);
     // font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Open Sans, sans-serif;
     // font-family: var(--font_family), var(--font_family_default) !important;
     font-family: var(--fontFamily), var(--fontFamilyDefault) !important;
@@ -96,6 +70,77 @@ body {
     --dsr-side-icon-hover: var(--c-accent-hover) !important;
     --dsr-error-fg: var(--c-danger) !important;
     --dsr-local-active-bg: var(--c-surface-2) !important;
+
+
+    // ==================================================
+    // ===================== NEW UI =====================
+    // ==================================================
+    --dsw-alias-bg-base: var(--c-bg-chats-container) !important;
+    --dsw-alias-bg-layer-1: var(--surface-1) !important;
+    --dsw-alias-bg-layer-2: var(--surface-2) !important;
+    --dsw-alias-bg-layer-3: var(--surface-3) !important;
+    --dsw-alias-bg-mask-1: hsla(var(--accent-hsl) / 0.24) !important;
+    --dsw-alias-bg-mask-2: hsla(var(--accent-hsl) / 0.12) !important;
+    --dsw-alias-bg-multi-select: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-bg-skeleton: hsla(var(--accent-hsl) / 0.04) !important;
+    --dsw-alias-border-l1: hsla(var(--accent-hsl) / 0.04) !important;
+    --dsw-alias-border-l2-darkmode-thin: hsla(var(--accent-hsl) / 0.08) !important;
+    --dsw-alias-border-l2: hsla(var(--accent-hsl) / 0.1) !important;
+    --dsw-alias-border-l3: hsla(var(--accent-hsl) / 0.12) !important;
+    --dsw-alias-border-l4: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-brand-primary-invert: var(--c-on-accent) !important;
+    --dsw-alias-brand-primary: var(--c-accent) !important;
+    --dsw-alias-brand-text: var(--c-accent) !important;
+    --dsw-alias-button-contrast-fill: var(--c-accent) !important;
+    --dsw-alias-button-elevated-fill: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-button-floating-fill: var(--c-surface-2) !important;
+    --dsw-alias-button-floating-hover: var(--c-accent-hover) !important;
+    --dsw-alias-button-ghost-active-border: hsla(var(--accent-hsl) / 0.2) !important;
+    --dsw-alias-button-ghost-active-fill: hsla(var(--accent-hsl) / 0.2) !important;
+    --dsw-alias-button-ghost-active-hover: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
+    --dsw-alias-button-primary-hover: var(--c-accent-hover) !important;
+    --dsw-alias-interactive-bg-hover-accent: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-interactive-bg-hover-danger: hsla(var(--danger-hsl) / 0.15) !important;
+    --dsw-alias-interactive-bg-hover: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-interactive-bg-hover: hsla(var(--accent-hsl) / 0.1) !important;
+    --dsw-alias-label-caption: var(--c-subtext-2) !important;
+    // --dsw-alias-label-dimmed: var(--dsw-static-neutral-bluish-200);
+    // --dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-950);
+    --dsw-alias-label-primary-inverted: var(--c-on-accent) !important;
+    --dsw-alias-label-primary: var(--c-txt) !important; // markdown <p> txt too
+    --dsw-alias-label-secondary: var(--c-subtext-2) !important;
+    --dsw-alias-label-tertiary: var(--c-subtext-1) !important;
+    --dsw-alias-markdown-citation: var(--c-accent-hover) !important;
+    --dsw-alias-markdown-code-block-banner: var(--c-bg-pre) !important;
+    --dsw-alias-markdown-code-block: var(--c-bg-pre) !important;
+    // --dsw-alias-markdown-code-segment-selected: var(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-markdown-code-segment-unselected: var(--dsw-static-neutral-bluish-75);
+    // --dsw-alias-markdown-inline-code: var(--dsw-static-neutral-bluish-100);
+    --dsw-alias-markdown-tag: hsla(var(--accent-hsl) / 0.1) !important;
+    --dsw-alias-scrollbar-bg: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-scrollbar-hover: hsla(var(--accent-hsl) / 0.2) !important;
+    --dsw-alias-state-error-primary: var(--c-danger) !important;
+    --dsw-alias-state-error-secondary: var(--c-danger) !important;
+    --dsw-alias-state-success-primary: var(--c-accent) !important;
+    --dsw-alias-state-success-secondary: var(--c-accent) !important;
+    --dsw-alias-state-warn-label: var(--c-warning) !important;
+    --dsw-alias-state-warn-primary: var(--c-warning) !important;
+    --dsw-alias-state-warn-secondary: var(--c-warning) !important;
+    --dsw-alias-state-warn-tertiary: var(--c-warning) !important;
+    // --dsw-alias-toast-bg: var(--c-accent-hover) !important;
+    --dsw-alias-tooltip-bg: var(--c-accent-hover) !important;
+    --dsw-specific-bubble: hsla(var(--accent-hsl) / 0.1) !important;
+    --dsw-specific-input-major: var(--c-subtext-2) !important;
+    // --dsw-specific-menu: var(--dsw-alias-bg-layer-3);
+    --dsw-specific-selector: hsla(var(--accent-hsl) / 0.1) !important;
+    --dsw-specific-sidebar-fill: var(--c-bg-sidebar) !important;
+    --dsw-specific-sidebar-nav-item-active-accent: hsla(var(--c-accent-hsl) / 0.2) !important;
+    --dsw-specific-sidebar-nav-item-active: var(--c-surface-2) !important;
+    --dsw-specific-sidebar-nav-item-hover: var(--c-surface-2) !important;
+    // --dsw-specific-tip: var(--dsw-static-neutral-150);
+
+
 }
 
 /* DARK */
@@ -134,31 +179,31 @@ body[data-ds-dark-theme] {
     // --dsr-local-active-bg: var(--c-surface-2) !important;
 }
 
-body,
-page,
-.ds-theme {
-    --ds-input-height-l: 42px;
-    --ds-input-height-m: 34px;
-    --ds-input-height-s: 30px;
-    --ds-input-height-xs: 26px;
-    --ds-font-weight-strong: 600;
-    --ds-font-size-l: 16px;
-    --ds-line-height-l: 28px;
-    --ds-font-size-m: 14px;
-    --ds-line-height-m: 25px;
-    --ds-font-size-sp: 13px;
-    --ds-line-height-sp: 23px;
-    --ds-font-size-s: 12px;
-    --ds-line-height-s: 21px;
-    --ds-font-size-xsp: 11px;
-    --ds-line-height-xsp: 19.5px;
-    --ds-font-size-xs: 10px;
-    --ds-line-height-xs: 18px;
-    --ds-ease-in-out: cubic-bezier(.4, 0, .2, 1);
-    --ds-ease-in: cubic-bezier(.4, 0, 1, 1);
-    --ds-ease-out: cubic-bezier(0, 0, .2, 1);
-    --ds-font-family-code: Menlo, "Roboto Mono", "Courier New", Courier, monospace, "Inter", sans-serif;
-    --ds-transition-duration: .2s;
-    --ds-transition-duration-fast: .1s;
-    --ds-transition-duration-slow: .3s;
-}
\ No newline at end of file
+// body,
+// page,
+// .ds-theme {
+//     --ds-input-height-l: 42px;
+//     --ds-input-height-m: 34px;
+//     --ds-input-height-s: 30px;
+//     --ds-input-height-xs: 26px;
+//     --ds-font-weight-strong: 600;
+//     --ds-font-size-l: 16px;
+//     --ds-line-height-l: 28px;
+//     --ds-font-size-m: 14px;
+//     --ds-line-height-m: 25px;
+//     --ds-font-size-sp: 13px;
+//     --ds-line-height-sp: 23px;
+//     --ds-font-size-s: 12px;
+//     --ds-line-height-s: 21px;
+//     --ds-font-size-xsp: 11px;
+//     --ds-line-height-xsp: 19.5px;
+//     --ds-font-size-xs: 10px;
+//     --ds-line-height-xs: 18px;
+//     --ds-ease-in-out: cubic-bezier(.4, 0, .2, 1);
+//     --ds-ease-in: cubic-bezier(.4, 0, 1, 1);
+//     --ds-ease-out: cubic-bezier(0, 0, .2, 1);
+//     --ds-font-family-code: Menlo, "Roboto Mono", "Courier New", Courier, monospace, "Inter", sans-serif;
+//     --ds-transition-duration: .2s;
+//     --ds-transition-duration-fast: .1s;
+//     --ds-transition-duration-slow: .3s;
+// }
\ No newline at end of file
diff --git a/styles/abstract/_light.scss b/styles/abstract/_light.scss
index 6356071..c14ce6f 100644
--- a/styles/abstract/_light.scss
+++ b/styles/abstract/_light.scss
@@ -74,8 +74,8 @@ body.light {
     --c-bg-pre: hsla(var(--accent-h) var(--surface-s) var(--surface-l) / 0.8);
 
     /* ? ========== Scrollbar colors =======s=== */
-    --c-scrollbar-thumb: var(--c-surface-3);
-    --c-scrollbar-track: transparent;
+    // --c-scrollbar-thumb: var(--c-surface-3);
+    // --c-scrollbar-track: transparent;
 
     /* ? ========== border colors ========== */
     --c-border: hsla(var(--txt-hsl) / 0.08);
diff --git a/styles/abstract/_mixins.scss b/styles/abstract/_mixins.scss
index 7018cb8..76af55c 100644
--- a/styles/abstract/_mixins.scss
+++ b/styles/abstract/_mixins.scss
@@ -6,6 +6,8 @@
 @mixin bg-accent-inverse($txt: var(--c-accent), $bg: var(--c-accent-hover)) {
     color: $txt !important;
     background-color: $bg !important;
+    // color: if($txt, $txt, var(--c-accent)) !important;
+    // background-color: if($bg, $bg, var(--c-accent-hover)) !important;
 }
 
 @mixin bg-danger($txt: var(--c-on-accent), $bg: var(--c-danger)) {
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index f0844ad..6ce2c29 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -5,19 +5,24 @@
     --cards-grid-template: repeat(auto-fit, minmax(7rem, 1fr));
 
     /* ? --- Custom Fonts --- */
-    --fontFamilyDefault: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Open Sans, sans-serif;
-    --fontFamily: var(--font_family_default);
+    --fontFamilyDefault: "quote-cjk-patch", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --fontFamily: var(--fontFamilyDefault);
     --fontSize: 16px;
     --letterSpacing: initial;
     --lineHeight: 28;
 
+    --ds-font-family: var(--fontFamily) !important; // override DS font-family
+
     --displayThinkingProcess: none;
 
     /* ? --- Custom Widths --- */
     --defaultWidthChats: 800px;
+    // --defaultWidthChats: var(--message-list-max-width);
     --maxWidthChats: var(--defaultWidthChats);
     --maxWidthTextarea: var(--defaultWidthChats);
 
+    // --message-list-max-width: var(--maxWidthChats) !important;
+
     /* ? --- DSX floating roller btn --- */
     --roller-top: calc(var(--h-header) + 0.5rem);
     --roller-right: 1rem;
@@ -30,7 +35,7 @@
 
     /* ? --- Border-radius --- */
     --br: 1rem;
-    --br-chat-bubble: calc(var(--br) * 1.9);
+    --br-chat-bubble: calc(var(--br) * 2.4);
     // --br-chat-bubble: 30px;
     // --br-prompt-textarea: calc(var(--br) * 0.2);
     --br-btn: calc(var(--br) * 0.9);
@@ -41,7 +46,7 @@
     --br-scrollbar: 50vw;
 
     /* ? --- Paddings --- */
-    --p-chat-bubble: 2rem;
+    --p-chat-bubble: 1.25rem;
     // --p-contextmenu: 0.8rem;
     // --p-contextmenu-item: 0.9rem 1rem;
     // --p-prompt-textarea: 0.7rem;
@@ -52,6 +57,10 @@
     --mb-chat-bubble: 3rem;
 
     --c-bg-textarea: linear-gradient(145deg, hsla(var(--accent-hsl) / 0.2) 0%, hsla(var(--accent-hsl) / 0.1) 22%, hsla(var(--accent-hsl) / 0.1) 68%, hsla(var(--accent-hsl) / 0.2) 100%);
+    --c-scrollbar-thumb: hsla(var(--accent-hsl) / 0.15);
+    --c-scrollbar-thumb-hover: hsla(var(--accent-hsl) / 0.2);
+    --c-scrollbar-track: transparent;
+    --c-scrollbar-corner: var(--c-scrollbar-thumb);
 
 
     @include dev('md') {
diff --git a/styles/components/_btn.scss b/styles/components/_btn.scss
index 49d58ed..b0561b9 100644
--- a/styles/components/_btn.scss
+++ b/styles/components/_btn.scss
@@ -90,4 +90,13 @@ button {
 
 	&--square {}
 
+}
+
+/* Btn primary, e.g. "Send" btn showed when User msg in edit state */
+._75c2572._122d2a2 {
+	@include bg_accent;
+
+	&:hover {
+		@include bg-accent-inverse;
+	}
 }
\ No newline at end of file
diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss
index 8015eda..38ee0b4 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -1,8 +1,6 @@
 /* Right chat wrapper main div */
 ._3919b83 {
 
-    // --message-list-max-width: --w_chat_gpt !important;
-
     /* "⚠️ Length limit reached. DeepSeek can only read the first 7%" */
     ._69505e8 {
         @include bg-warning-inverse;
@@ -22,164 +20,169 @@
 
 /* User chat bubble */
 .fbb737a4 {
-    // font-size: calc((var(--fontSize) / 16) * 1rem) !important;
-    // --ds-font-size-l: var(--font_size) !important;
-    /* Large font size equals the base font size converted to rem */
-    // --ds-font-size-l: calc(var(--font_size) * 1rem / 16) !important;
-
     background-color: var(--c-bg-msg-user) !important;
     color: var(--c-txt) !important;
-    padding: calc(var(--p-chat-bubble) * 0.4) calc(var(--p-chat-bubble) * 0.75) !important;
+    padding: var(--p-chat-bubble) !important;
     border-radius: var(--br-chat-bubble) !important;
+    width: max-content !important;
     // line-height: calc(var(--line_height) / 16) !important;
-    // width: var(--w_chat_user) !important;
-    // width: max-content !important;
-    // width: var(--max_w_chat_user) !important;
-    // max-width: var(--w_chat_user) !important;
+    // max-width: var(--maxWidthChats) !important;
 }
 
-/* User chat bubble in edit state */
-._9663006._3111eee {
-
-    /* <textarea> parent */
-    .ds-textarea {
-        --shadow-offset: 1px;
-        // max-width: calc(100% - 48px);
-        // min-height: 100px;
-        // max-height: 268px;
-        --ds-textarea-color: hsla(var(--accent-hsl) / 0.05) !important;
-        --ds-textarea-border: hsla(var(--accent-hsl) / 0.12) !important;
-        --ds-textarea-focus-color: hsla(var(--accent-hsl) / 0.08) !important;
-        --ds-textarea-focus-border-color: hsla(var(--accent-hsl) / 0.14) !important;
-        // --ds-textarea-font-size: calc((var(--fontSize) / 16) * 1rem) !important;
-        // --ds-textarea-line-height: calc((var(--line_height) / 16) * 0.88) !important;
-        --ds-textarea-line-height: calc((var(--lineHeight) / 16) * 0.88) !important;
-        --ds-textarea-padding: calc(var(--p-chat-bubble) * 0.85) !important;
-        --ds-textarea-border-radius: calc(var(--br-chat-bubble) * 0.75) !important;
-        caret-color: var(--c-accent);
-        color: var(--c-accent) !important;
-        background-color: hsla(var(--accent-hsl) / 0.05) !important;
-        box-shadow: 0 0 0 var(--shadow-offset) hsla(var(--accent-hsl) / 0.15) !important;
-
-        &--focused {
-            --shadow-offset: 2px;
+
+/* User chat very parent */
+._9663006 {
+    /*  Gap on top from GPT user bubble: sum of:
+        16px - this ._9663006 mb
+        28px - user footer icons height, 
+        6px - user footer icons mt  */
+    margin-top: calc(16px + 28px + 6px) !important; // 
+
+    /* User chat bubble in edit state */
+    &._3111eee {
+
+        /* <textarea> parent */
+        .ds-textarea {
+            --shadow-offset: 1px;
+            --ds-textarea-color: hsla(var(--accent-hsl) / 0.05) !important;
+            --ds-textarea-border: hsla(var(--accent-hsl) / 0.12) !important;
+            --ds-textarea-focus-color: hsla(var(--accent-hsl) / 0.08) !important;
+            --ds-textarea-focus-border-color: hsla(var(--accent-hsl) / 0.14) !important;
+            --ds-textarea-line-height: calc((var(--lineHeight) / 16) * 0.88) !important;
+            --ds-textarea-padding: calc(var(--p-chat-bubble) * 0.85) !important;
+            --ds-textarea-border-radius: calc(var(--br-chat-bubble) * 0.75) !important;
+            caret-color: var(--c-accent);
+            color: var(--c-accent) !important;
+            background-color: hsla(var(--accent-hsl) / 0.05) !important;
+            box-shadow: 0 0 0 var(--shadow-offset) hsla(var(--accent-hsl) / 0.15) !important;
+
+            &--focused {
+                --shadow-offset: 2px;
+            }
         }
     }
 }
 
+
 /* GPT chat bubble */
 ._4f9bf79 {
-    --p-left: 2rem; // padding-left gde je svg logo (originalno je 48px)
-    // font-size: calc((var(--fontSize) / 16) * 1rem) !important;
-    // line-height: calc(var(--line_height) / 16) !important;
     background-color: var(--c-bg-msg-gpt);
     color: var(--c-txt) !important;
-    padding: var(--p-chat-bubble) calc(var(--p-chat-bubble) + var(--p-left)) !important;
+    padding: var(--p-chat-bubble) !important;
     border-radius: var(--br-chat-bubble) !important;
-    // width: var(--w_chat_gpt) !important;
 
     @include dev('md') {
         --br-chat-bubble: calc(var(--br) * 1.2);
         padding: var(--p-chat-bubble) !important;
     }
 
+    /* Thinking very top parent */
+    ._7d763a7 {
 
-    /* Logo on the left */
-    ._7eb2358._58dfa60 {
-        top: var(--p-chat-bubble) !important;
-        translate: 50%;
-        background-color: hsla(var(--accent-hsl) / 0.15) !important;
-        border-color: hsla(var(--accent-hsl) / 0.2) !important;
-        box-shadow: none !important;
+        /* "Read X web pages" */
+        .ffdab56b.ddbfd84f {
+            transition: transform 0.25s $easeInOutQuad;
 
-        @include dev('md') {
-            display: none !important;
-        }
+            &:hover {
+                transform: scale(0.96);
+            }
 
+            &:before {
+                opacity: 1 !important;
 
-        svg {
-            path {
-                fill: var(--c-accent) !important;
             }
+
         }
-    }
 
 
-    /* 
-    - Thinking time note: "Thought for X seconds"
-    - Search result note: "Found X results" */
-    ._58a6d71 {
-        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.15s $easeOutCubic;
+        /* "Thought for X seconds" */
+        ._245c867 {
 
-        &:hover {
-            @include bg-accent-inverse;
-            transform: scale(1.02);
+            /* "Thought for X seconds" bg */
+            &::after,
+            &::before {
+                border-radius: 50vw !important;
+                background-color: var(--c-bg-msg-gpt) !important;
+                backdrop-filter: blur(2rem) !important;
+            }
+
+            &::before {
+                background-color: transparent !important;
+            }
+
+            & .c99b79f8 {
+                // background: var(--dsw-linear-gradient-think);
+                background: none !important;
+            }
         }
     }
 
     /* Thinking text parent (with "Thought for X seconds" note) */
     ._48edb25 {
 
-        // &:hover,
-        // &:focus {
-        //     --displayThinkingProcess: block !important;
-        // }
-
         /* Thinking process texts */
-        .e1675d8b {
+        .ds-think-content {
             --thinking-p-left: 13px; // this is from ds deafult
             display: var(--displayThinkingProcess) !important;
+            color: var(--c-subtext-2) !important;
+            transition: font-size 0.15s ease-in-out,
+                line-height 0.15s ease-in-out;
 
             &:not(:empty) {
                 @extend .fadeIn;
             }
 
-            color: var(--c-subtext-2) !important;
-            // font-size: calc(((var(--fontSize) / 16) * 1rem) * 0.8) !important;
-            // line-height: calc((var(--line_height) / 16) * 0.8) !important;
-            line-height: calc((var(--lineHeight) / 16) * 0.88) !important;
-            transition: font-size 0.15s ease-in-out,
-            line-height 0.15s ease-in-out;
-
             /* Thinking border on the left */
             ._9ecc93a {
                 border-color: currentColor !important;
                 opacity: 0.6;
             }
 
-            /* Thinking <p> texts */
-            /*  p.ba94db8a:not(:empty) {
-                position: relative;
-
-                &::before {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 0.5rem;
-                    height: 0.5rem;
-                    background-color: currentColor;
-                    // transform: translate(-50%, 50%);
-                    // transform: translate(calc((var(--thinking-p-left) * -1) - 50%), 50%);
-                    transform: translate(-1rem, 50%);
-                    border-radius: 50vw;
-                }
-            } */
+            .ds-markdown {
+                font-size: calc(calc((var(--fontSize) / 16) * 1rem) * 0.85) !important;
+                line-height: calc((var(--lineHeight) / 16) * 0.85) !important;
+            }
         }
+
+        // /* Thinking process texts */
+        // .e1675d8b {
+        //     --thinking-p-left: 13px; // this is from ds deafult
+        //     display: var(--displayThinkingProcess) !important;
+
+        //     &:not(:empty) {
+        //         @extend .fadeIn;
+        //     }
+
+        //     color: var(--c-subtext-2) !important;
+        //     // font-size: calc(calc((var(--fontSize) / 16) * 1rem) * 0.75) !important;
+        //     // line-height: calc((var(--lineHeight) / 16) * 0.5) !important;
+        //     transition: font-size 0.15s ease-in-out,
+        //     line-height 0.15s ease-in-out;
+
+        //     /* Thinking border on the left */
+        //     ._9ecc93a {
+        //         border-color: currentColor !important;
+        //         opacity: 0.6;
+        //     }
+        // }
     }
-}
 
-/* TODO: za oba chat-bubble srediti max-widthh jer moram parente ustv da menjam:     --message-list-max-width */
+    /* Shirmer animation on "Thought" txt while thinking */
+    .e4b3a110 .cac31b5e {
+        background: linear-gradient(90deg, hsla(var(--accent-hsl)/ 0) 0%, hsla(var(--accent-hsl)/ .7) 54.51%, hsla(var(--accent-hsl)/ 0) 109.02%);
+    }
 
-/* user wrapper i assistent wrapper */
-._9663006,
-._4f9bf79 {
-    margin-bottom: var(--mb-chat-bubble) !important;
-}
 
-/* User chat-bubble wrapper, remove padding for consistent and same spacing between chat-bubbles */
-._9663006 {
-    padding: 0 !important;
+    /* SOURCES - "X Web Pages"  */
+    ._972436e {
+        background-color: hsla(var(--accent-hsl) / 0.12) !important;
+        transition: transform 0.25s $easeInOutQuad;
+
+        &:hover {
+            transform: scale(0.972);
+        }
+    }
+
 }
 
 /* "New chat" floating btn. Not working when scoped into chats main layout... */
@@ -197,51 +200,42 @@
 }
 
 
-/* 
-    .fbb737a4 - user chat bubble
-    ._4f9bf79 - gpt chat bubble
-    .ds-markdown - markdown
-    ._77cefa5 - prompt field
-*/
-.fbb737a4,
-._4f9bf79,
-.ds-markdown,
-._77cefa5 {
-    /*     
-    --ds-font-size-l: calc(var(--font_size) * 1rem / 16) !important;
-    --ds-font-size-m: calc((var(--font_size) - 2) * 1rem / 16) !important;
-
-    --ds-line-height-l: calc(var(--font_size) * 1rem / 16) !important;
-    --ds-line-height-m: calc((var(--font_size) - 4) * 1rem / 16) !important; */
-
-
-    --ds-font-size-l: calc(var(--fontSize) * 1rem / 16) !important;
-    --ds-font-size-m: calc((var(--fontSize) - 2) * 1rem / 16) !important;
-
-    --ds-line-height-l: calc(var(--lineHeight) * 1rem / 16) !important;
-    --ds-line-height-m: calc((var(--lineHeight) - 4) * 1rem / 16) !important;
-    // line-height: calc(var(--line_height) / 16) !important;
-    transition: font-size 0.15s ease-in-out, line-height 0.15s ease-in-out;
-
-    .md-code-block {
-        // 11px default
-        --ds-font-size-xsp: calc((var(--fontSize) - 5) * 1rem / 16) !important;
-    }
-
-    // when in edit state for user chat bubble
-    .ds-textarea {
-        --ds-textarea-font-size: calc(var(--fontSize) * 1rem / 16) !important;
-    }
+/* ============ CUSTOM WIDTH ============  */
+/* Very top chats parent which has strange padding */
+._8f60047 ._0f72b0b {
+    // padding: 0 calc((100% - var(--message-list-max-width)) / 2);
+    padding: 0 5vw !important;
 }
 
 /* Chats list parent */
 .dad65929 {
     // --message-list-max-width: 800px;
-    --message-list-max-width: var(--maxWidthChats) !important;
+    // --message-list-max-width: var(--maxWidthChats) !important;
+    margin: 0 auto !important; // very important because sometimes chats are very small width??? and also, in some scenarios they arent centered ??
+    width: 100%; // very important because sometimes chats are very small width???
+    max-width: var(--maxWidthChats) !important;
+    // width: var(--maxWidthChats) !important; // nah, this makes chats to overflow in some case scenarios so width: 100% fix it??
 }
 
-/* textarea prompt parent */
+/* Chatbox parent */
 .aaff8b8f {
     --message-list-max-width: var(--maxWidthTextarea) !important;
-    max-width: var(--message-list-max-width);
+    max-width: var(--maxWidthTextarea);
+}
+
+/* ============ CUSTOM FONTS ============  */
+
+/* 
+    .fbb737a4 - user chat bubble
+    ._4f9bf79 - gpt chat bubble
+    .ds-markdown - markdown
+    ._77cefa5 - chatbox
+*/
+.fbb737a4,
+._4f9bf79,
+._77cefa5,
+.ds-markdown {
+    font-family: var(--fontFamily), var(--fontFamilyDefault) !important;
+    font-size: calc((var(--fontSize) / 16) * 1rem) !important;
+    line-height: calc(var(--lineHeight) / 16) !important;
 }
\ No newline at end of file
diff --git a/styles/elements/_right--markdown.scss b/styles/elements/_right--markdown.scss
index 7ce94ac..b62e124 100644
--- a/styles/elements/_right--markdown.scss
+++ b/styles/elements/_right--markdown.scss
@@ -57,73 +57,7 @@
     }
 
 
-    /* Markdown code block */
-    .md-code-block {
-        border-radius: var(--br-btn) !important;
-        padding: 0.5rem !important;
-        background: var(--c-bg-pre) !important;
-        box-shadow: color-mix(in srgb, var(--c-bg-pre) 90%, black 10%) 0px 7px 16px 0px; // on hover: 0 12 32 0
-        border: color-mix(in srgb, hsla(var(--accent-hsl) / 0.12) 50%, black 2%) 1px solid;
-
-        /* _____ MD HEADER _____ */
-        /* Markdown code block header wrapper  */
-        &-banner-wrap,
-        &-banner {
-            // background-color: transparent !important;
-            background-color: var(--c-bg-pre) !important;
-            backdrop-filter: blur(1rem);
-        }
-
-        // &-banner-wrap {
-        //     background-color: transparent !important;
-        // }
-
-        /* Markdown code block header sticky */
-        &-banner {
-            // background-color: hsla(var(--accent-hsl) / 0.00) !important;
-            // background-color: transparent !important;
-            border-radius: var(--br-btn) !important;
-            // backdrop-filter: blur(5px);
-            background-color: var(--c-bg-pre) !important;
-            align-items: center;
-            padding: 0.2rem 0.8rem !important;
-
-            /* Code-block action button header */
-            ._121d384 {
-                .ds-button:hover {
-                    --ds-button-hover-color: var(--c-accent) !important;
-                }
-            }
-        }
-
-        /* Markdown code block header: code language */
-        &-infostring {
-            color: var(--c-subtext-2) !important;
-            font-family: var(--ds-font-family-code) !important;
-            font-weight: bold;
-            line-height: 1 !important;
-        }
-
-        /* Footer of code block, for example: "▶️ Run HTML" part */
-        &-footer {
-            // @include bg-accent-inverse;
-            border-radius: var(--br-btn);
-            background-color: hsla(var(--accent-hsl) / 0.0) !important;
 
-            span:has(> .ds-icon) {
-                // color: var(--c-on-accent) !important;
-                // background-color: var(--c-accent) !important;
-                // border-radius: 2rem;
-
-                @extend .ds-button--primary;
-                transition: transform 0.25s $easeOutCubic;
-
-                &:hover {
-                    transform: translateY(-0.08rem);
-                }
-            }
-        }
-    }
 
     /* Markdown code block header: Copy btn */
     &-code-copy-button {
@@ -146,6 +80,71 @@
     }
 }
 
+/* Markdown code block */
+.md-code-block {
+    border-radius: var(--br-btn) !important;
+    padding: 0.5rem !important;
+    background: var(--c-bg-pre) !important;
+    box-shadow: color-mix(in srgb, var(--c-bg-pre) 90%, black 10%) 0px 7px 16px 0px; // on hover: 0 12 32 0
+    border: color-mix(in srgb, hsla(var(--accent-hsl) / 0.12) 50%, black 2%) 1px solid;
+
+    /* _____ MD HEADER _____ */
+    /* Markdown code block header wrapper  */
+    &-banner-wrap,
+    &-banner {
+        // background-color: transparent !important;
+        background-color: var(--c-bg-pre) !important;
+        backdrop-filter: blur(1rem);
+        border-radius: 50vw !important;
+    }
+
+    // &-banner-wrap {
+    //     background-color: transparent !important;
+    // }
+
+    /* Markdown code block header sticky */
+    &-banner {
+        border-radius: 50vw !important;
+        background-color: var(--c-bg-pre) !important;
+        align-items: center;
+
+        /* Code-block action button header */
+        ._121d384 {
+            .ds-button:hover {
+                --ds-button-hover-color: var(--c-accent) !important;
+            }
+        }
+    }
+
+    /* Markdown code block header: code language */
+    &-infostring {
+        color: var(--c-subtext-2) !important;
+        font-family: var(--ds-font-family-code) !important;
+        font-weight: bold;
+        line-height: 1 !important;
+    }
+
+    /* Footer of code block, for example: "▶️ Run HTML" part */
+    &-footer {
+        // @include bg-accent-inverse;
+        border-radius: var(--br-btn);
+        background-color: hsla(var(--accent-hsl) / 0.0) !important;
+
+        span:has(> .ds-icon) {
+            // color: var(--c-on-accent) !important;
+            // background-color: var(--c-accent) !important;
+            // border-radius: 2rem;
+
+            @extend .ds-button--primary;
+            transition: transform 0.25s $easeOutCubic;
+
+            &:hover {
+                transform: translateY(-0.08rem);
+            }
+        }
+    }
+}
+
 body.light .ds-markdown {
     .md-code-block-infostring {
         color: var(--c-on-accent) !important;
diff --git a/styles/elements/_right--sticky.scss b/styles/elements/_right--sticky.scss
index c15c45f..fdf1824 100644
--- a/styles/elements/_right--sticky.scss
+++ b/styles/elements/_right--sticky.scss
@@ -4,7 +4,6 @@
     /* Sticky header */
     ._2be88ba {
         background-color: var(--c-bg-chats-container) !important;
-        // background: var(--c-bg-chats-sticky) !important;
 
         /* Icons when breakpoint is to 'md' so sidebar and new chat icon are moved to sticky header and doesnt have color */
         .ds-icon {
@@ -16,9 +15,9 @@
         }
 
         /* Sticky header: chat title */
-        .d8ed659a {
-            @include bg-accent-inverse;
-            outline: hsla(var(--accent-hsl) / 0.2) solid 1px !important;
+        .afa34042 {
+            @include bg-accent-inverse($bg: hsla(var(--accent-hsl) / 0.1));
+            outline: hsla(var(--accent-hsl) / 0.1) solid 1px !important;
 
             &:hover {
                 box-shadow: inset 0 0 10px 2px hsla(var(--accent-hsl) / 0.2) !important;
diff --git a/styles/elements/_right--textarea.scss b/styles/elements/_right--textarea.scss
index 00c1b8b..521f72b 100644
--- a/styles/elements/_right--textarea.scss
+++ b/styles/elements/_right--textarea.scss
@@ -2,15 +2,15 @@
 ._77cefa5:has(#chat-input) {
 
     background: var(--c-bg-textarea) !important;
-    box-shadow: inset 0 0 1px 1px hsla(var(--accent-hsl) / 0.08) !important;
+    // box-shadow: inset 0 0 1px 1px hsla(var(--accent-hsl) / 0.08) !important;
     backdrop-filter: blur(18px);
-    border: none !important;
+    // border: none !important;
     border-radius: calc(var(--br) * 1.9) !important;
 
     /* Textarea */
     #chat-input {
         color: var(--c-txt) !important;
-        padding: 0.5rem;
+        // padding: 1.2rem;
 
         &::placeholder {
             color: var(--c-subtext-2) !important;
@@ -32,47 +32,19 @@
         box-shadow: none !important;
     }
 
-    /* Textarea footer where buttons are */
-    // .ec4f5d61 {}
-
     /* "DeepThink R1" and "Search" btn */
-    [role="button"]._3172d9f {
-        --ds-button-color: hsl(var(--accent-hsl) / 0.15) !important;
-        --button-text-color: var(--c-accent) !important;
-        --button-border-color: hsla(var(--accent-hsl) / 0.08) !important;
-        // --button-border-color: transparent !important;
-        --ds-button-hover-color: var(--c-accent-hover) !important;
-        transition: transform ease-in-out 0.2s, background-color 0.2s ease-in-out;
-        font-weight: 500 !important;
+    ._70150b8 {
+        color: var(--c-accent) !important;
 
         .ds-icon {
             color: currentColor !important;
-
-            svg path {
-                stroke: currentColor !important;
-            }
-        }
-
-        &:hover {
-            --ds-button-color: var(--c-accent-hover) !important;
-            color: var(--c-accent) !important;
-            transform: translateY(-0.08rem);
         }
 
-
-        /* "DeepThink (R1)" and "Search" btn when selected */
-        // &[style*="--ds-button-color: transparent;"] {
-        &[style*="--ds-button-color: #DBEAFE"],
-        &[style*="--ds-button-color: rgba(77, 107, 254, 0.40)"] {
-            // --ds-button-color: hsla(var(--accent-hsl) / 0.2) !important;
-            --ds-button-color: var(--c-accent) !important;
-            --button-text-color: var(--c-on-accent) !important;
-
-            &:hover {
-                // --ds-button-color: var(--c-on-accent) !important;
-                color: var(--c-on-accent) !important;
-            }
-
+        // Active/selected button state
+        &._76f196b {
+            border-color: var(--dsw-alias-button-ghost-active-border);
+            background: var(--dsw-alias-button-ghost-active-fill);
+            color: var(--dsw-alias-brand-text);
         }
     }
 
@@ -83,63 +55,6 @@
             // color: var(--c-on-accent) !important;
         }
     }
-
-    /* Icon of image when attached image */
-    // .ds-icon.b3a5d6c1:has(svg>path[fill="#9AD2EC"]) {
-    //     // svg path {
-    //     //     stroke: initial !important;
-    //     // }
-
-    //     path[fill="white"] {
-    //         fill: var(--c-accent) !important;
-    //     }
-
-    //     path[fill="#9AD2EC"] {
-    //         fill: hsla(var(--accent-hsl) / 0.15) !important;
-    //     }
-
-    //     path[fill="#4579C7"] {
-    //         fill: hsla(var(--accent-hsl) / 0.9) !important;
-    //     }
-    // }
-    // .ds-icon.b3a5d6c1 {
-    //     svg path {
-    //         fill: initial !important;
-    //     }
-    // }
-
-    /* Attached items */
-    // .cd190a50 {
-    //     --dsr-input-bg: hsla(var(--accent-hsl) / 0.15) !important;
-    //     transition: ease-in-out 0.25s, background-color 0.25s ease-in-out 0s;
-    //     border: hsla(var(--accent-hsl) / 0.1) 2px solid !important;
-
-    //     &:hover {
-    //         --dsr-input-bg: hsla(var(--accent-hsl) / 0.2) !important;
-    //         box-shadow: none !important;
-    //         transform: translateY(-0.08rem);
-    //     }
-
-    //     /* Attached closed btn when hovered */
-    //     [role="img"] {
-    //         .b2b9d30d {
-    //             box-shadow: none !important;
-    //             @include bg-accent;
-
-    //             .ds-icon {
-    //                 svg path {
-    //                     fill: currentColor !important;
-    //                 }
-    //             }
-    //         }
-    //     }
-
-    //     /* Attached info data: file type and size (e.g. PNG 162.3KB) */
-    //     .ee357eab {
-    //         color: var(--c-subtext-2) !important;
-    //     }
-    // }
-
 }
 
 /* Attached item and in prompt field and in chats layout */
@@ -192,4 +107,16 @@
     //     background-color: rgb(var(--ds-rgb-slate-250));
     //     color: #fafafa;
     // }
-}
\ No newline at end of file
+}
+
+/* Very top parent of chatbox with child that have black gradient and strange width */
+._871cbca {
+    margin: auto 0 !important; // original: margin: auto 32px 0 !important;
+}
+
+/* Scrolldown btn  */
+// ._090c426._00d3b42, ._090c426._6894dc3 {
+//     border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+//     color: var(--dsw-alias-label-primary);
+//     background-color: var(--dsw-alias-button-floating-fill);
+// }
\ No newline at end of file
diff --git a/styles/elements/_sidebar.scss b/styles/elements/_sidebar.scss
index e4850e8..000fd20 100644
--- a/styles/elements/_sidebar.scss
+++ b/styles/elements/_sidebar.scss
@@ -1,42 +1,42 @@
 /* Button "New chat" in sidebar: parent */
 ._5a8ac7a {
-    --local-button: var(--dsr-main) !important;
-    --local-button-hover: var(--c-accent-hover) !important;
-    --local-button-text: var(--c-on-accent) !important;
-
-    margin: 0 auto !important;
-    width: 80% !important;
-    height: fit-content !important;
-    transition: transform ease 0.15s;
-
-    /* Button "New chat" */
-    .c7dddcde {
-        width: 100% !important;
-        justify-content: center;
-        padding: calc(var(--p-btn) * 1.1) !important;
-        text-transform: uppercase;
-    }
+    --dsw-alias-label-caption: currentColor !important; // CTRL + J ::after
+    background-color: var(--c-accent) !important;
+    color: var(--c-on-accent) !important;
+    // text-transform: uppercase;
+    box-shadow: none !important;
+    transition: background-color ease 0.15s, color ease 0.15s;
 
     &:hover {
-        --local-button-text: var(--c-accent) !important;
-        transform: translateY(0.08rem);
+        color: var(--c-accent) !important;
+        background-color: hsla(var(--accent-hsl) / 0.2) !important;
     }
 }
 
-/* Sidebar */
+/* Sidebar collapseed floating element */
+.e5bf614e {
+    background-color: hsla(var(--accent-hsl) / 0.1) !important;
+    border-color: hsla(var(--accent-hsl) / 0.1) !important;
+    color: var(--c-accent) !important;
+}
+
+/* Sidebar wrapper */
 .dc04ec1d {
 
-    /* Sidebar icon for collapsing sidebar for 'sm' size screens */
-    .a9564e8a {
-        color: var(--c-accent) !important;
+    /* Sidebar */
+    .b8812f16 {
+        background-color: var(--c-bg-sidebar) !important;
+        border: none !important;
     }
 
+    /* Sidebar scroll area where links are */
+    ._3586175.ds-scroll-area {
+        margin-top: 2rem !important;
+    }
 
-    /* deepseek icon log only (when sidebar is collapsed) */
-    .a7f3a288 {
-        .ds-icon {
-            color: var(--c-accent) !important;
-        }
+    /* Sidebar icon for collapsing sidebar for 'sm' size screens */
+    .a9564e8a {
+        color: var(--c-accent) !important;
     }
 
     /* "deepseek" text logo in sidebar */
@@ -50,44 +50,36 @@
     ._48cdfc1 {
         @extend %date-pill;
     }
+}
 
-    /* Sidebar chat-item link */
-    ._83421f9 {
-        transition: $trans;
-
-        /* Active link item */
-        &.b64fb9ae {
-            --dsr-local-active-bg: var(--c-surface-2) !important;
-            box-shadow: 0 0 1px 2px hsla(var(--accent-hsl) / 0.1) inset !important;
-        }
-
-        &:not(&.b64fb9ae):hover {
-            background-color: var(--c-surface-2) !important;
-            transform: translateY(-0.08rem);
-        }
+/* Sidebar chat-item link */
+._546d736 {
+    transition: $trans;
+    color: var(--c-txt) !important;
 
-        /* Overlay fade where 3dots are */
-        .eaaaba55 {
-            background: linear-gradient(90deg, transparent 0%, var(--dsr-side-bg) 60%) !important;
-        }
-
-        /* Overlay fade where 3dots are */
-        &:not(&.b64fb9ae):hover,
-        &.b64fb9ae {
-            .eaaaba55 {
-                --dsr-side-bg: var(--c-surface-2) !important;
-            }
-        }
+    // Active link item
+    &.b64fb9ae {
+        background-color: var(--c-surface-2) !important;
+        box-shadow: 0 0 1px 2px hsla(var(--accent-hsl) / 0.1) inset !important;
     }
 
-    /* "Get App" link in sidebar */
-    .a1e75851 {
-        border-color: var(--c-border) !important;
+    // Hover non activer link
+    &:not(&.b64fb9ae):hover {
+        background-color: var(--c-surface-2) !important;
+        transform: translateY(-0.08rem);
+    }
 
+    // Overlay fade where 3dots are
+    ._254829d {
+        // background: linear-gradient(90deg, hsla(var(--accent-hsl) / 0) 0%, hsla(var(--accent-hsl) / .5) 20.23%, hsla(var(--accent-hsl)) 40.62%) !important;
+        background: linear-gradient(90deg, transparent 0%, var(--c-surface-2) 60%) !important;
     }
 
-    /* Bg when hovered mobile icon in sidebar */
-    .b91228e4:hover {
-        background-color: var(--c-accent-hover) !important;
+    // Overlay fade where 3dots are
+    &:not(&.b64fb9ae):hover,
+    &.b64fb9ae {
+        .eaaaba55 {
+            --c-bg-sidebar: var(--c-surface-2) !important;
+        }
     }
 }
\ No newline at end of file
diff --git a/styles/global/_base.scss b/styles/global/_base.scss
index 781707e..e949e44 100644
--- a/styles/global/_base.scss
+++ b/styles/global/_base.scss
@@ -18,7 +18,8 @@ body {
 	color: var(--c-txt) !important;
 }
 
-a[href] {
+/* ._546d736 is sidebar link */
+a[href]:not(._546d736) {
 	color: var(--c-accent) !important;
 	// @extend %link_hover_underlined;
 }
\ No newline at end of file
diff --git a/styles/global/_scrollbars.scss b/styles/global/_scrollbars.scss
index 09a4727..4960f70 100644
--- a/styles/global/_scrollbars.scss
+++ b/styles/global/_scrollbars.scss
@@ -1,41 +1,86 @@
-*,
-html {
-    // scrollbar-color: var(--main-surface-tertiary) transparent;
-    // scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track) !important;
-    // scrollbar-width: thin !important;
-    scrollbar-color: unset !important;
-    scrollbar-width: unset !important;
-}
+// *,
+// html {
+//     // scrollbar-color: var(--main-surface-tertiary) transparent;
+//     // scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track) !important;
+//     // scrollbar-width: thin !important;
+//     scrollbar-color: unset !important;
+//     scrollbar-width: unset !important;
+// }
 
-/* WebKit/Blink browsers (Chrome, Edge, Safari, etc.) */
-::-webkit-scrollbar {
-    width: var(--w-scrollbar) !important; // desired scrollbar width 
-    // height: 0 !important; // desired scrollbar height
-    height: var(--w-scrollbar) !important; // desired scrollbar height
-    cursor: grab;
-}
+// /* WebKit/Blink browsers (Chrome, Edge, Safari, etc.) */
+// ::-webkit-scrollbar {
+//     width: var(--w-scrollbar) !important; // desired scrollbar width 
+//     // height: 0 !important; // desired scrollbar height
+//     height: var(--w-scrollbar) !important; // desired scrollbar height
+//     cursor: grab;
+// }
 
-/* scrollbar thumb */
-::-webkit-scrollbar-thumb,
-scrollbar-thumb {
-    background-color: var(--c-scrollbar-thumb) !important; // scrollbar thumb color
-    border-radius: var(--br-scrollbar) !important; // roundness of the thumb
-    cursor: grab;
-}
+// /* scrollbar thumb */
+// ::-webkit-scrollbar-thumb,
+// scrollbar-thumb {
+//     background-color: var(--c-scrollbar-thumb) !important; // scrollbar thumb color
+//     border-radius: var(--br-scrollbar) !important; // roundness of the thumb
+//     cursor: grab;
+// }
 
-/* scrollbar track */
-::-webkit-scrollbar-track,
-scrollbar-track-piece {
-    background-color: var(--c-scrollbar-track) !important; // scrollbar track color
-    border-radius: var(--br-scrollbar) !important;
-}
+// /* scrollbar track */
+// ::-webkit-scrollbar-track,
+// scrollbar-track-piece {
+//     background-color: var(--c-scrollbar-track) !important; // scrollbar track color
+//     border-radius: var(--br-scrollbar) !important;
+// }
+
+// /* scrollbar-color for For Firefox */
+// @-moz-document url-prefix() {
+
+//     html,
+//     * {
+//         scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track) !important; // second parameter (transparent) is for bg-thumb
+//         scrollbar-width: thin !important;
+//     }
+// }
+
+@use 'sass:map';
+$scrollbar-sizes: (
+    thin: 4px,
+    normal: 8px,
+    thick: 12px
+);
+
+
+// Dynamic scrollbar mixin
+@mixin scrollbar($size: normal) {
+    $width: map.get($scrollbar-sizes, $size);
 
-/* scrollbar-color for For Firefox */
-@-moz-document url-prefix() {
+    scrollbar-width: if($size ==thin, thin, auto);
+    scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
 
-    html,
-    * {
-        scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track) !important; // second parameter (transparent) is for bg-thumb
-        scrollbar-width: thin !important;
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
     }
+
+    &::-webkit-scrollbar-track {
+        background: var(--c-scrollbar-track);
+        border-radius: calc(#{$width} / 2);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--c-scrollbar-thumb);
+        border-radius: calc(#{$width} / 2);
+        transition: background 0.15s ease;
+
+        &:hover {
+            background: var(--c-scrollbar-thumb-hover);
+        }
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: var(--c-scrollbar-corner);
+    }
+}
+
+// Apply globally
+html {
+    @include scrollbar();
 }
\ No newline at end of file