From af7d56ea96a849220edd21de07a02c52ded163c5 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 14:08:23 +0200
Subject: [PATCH 01/15] fix(sidebar): Update sidebar bg and different link
 states styles with 3dots option

---
 styles/abstract/_ds.scss      | 73 +++++++++++++++++++++++++++
 styles/elements/_sidebar.scss | 92 ++++++++++++++++++++++++-----------
 2 files changed, 137 insertions(+), 28 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 6bed73c..f8db203 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -96,6 +96,79 @@ 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(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-bg-mask-1: rgba(0, 0, 0, .24);
+    // --dsw-alias-bg-mask-2: rgba(0, 0, 0, .12);
+    // --dsw-alias-bg-multi-select: var(--dsw-static-neutral-bluish-50);
+    // --dsw-alias-bg-skeleton: rgba(0, 0, 0, .04);
+    // --dsw-alias-border-inverted2: transparent;
+    // --dsw-alias-border-inverted: transparent;
+    // --dsw-alias-border-l1: rgba(0, 0, 0, .04);
+    // --dsw-alias-border-l2-darkmode-thin: rgba(0, 0, 0, .1);
+    // --dsw-alias-border-l2: rgba(0, 0, 0, .1);
+    // --dsw-alias-border-l3: rgba(0, 0, 0, .12);
+    // --dsw-alias-border-l4: rgba(0, 0, 0, .16);
+    // --dsw-alias-brand-primary-invert: var(--dsw-static-deepseek-500);
+    // --dsw-alias-brand-primary: var(--dsw-static-deepseek-500);
+    // --dsw-alias-brand-text: var(--dsw-static-deepseek-500);
+    // --dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-700);
+    // --dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-75);
+    // --dsw-alias-button-ghost-active-border: var(--dsw-static-deepseek-300);
+    // --dsw-alias-button-ghost-active-fill: var(--dsw-static-deepseek-50);
+    // --dsw-alias-button-ghost-active-hover: var(--dsw-static-deepseek-100);
+    // --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
+    // --dsw-alias-button-primary-hover: var(--dsw-static-deepseek-450);
+    // --dsw-alias-interactive-bg-hover-accent: rgba(38, 49, 72, .14);
+    // --dsw-alias-interactive-bg-hover-danger: rgba(236, 19, 19, .05);
+    // --dsw-alias-interactive-bg-hover: rgba(38, 49, 72, .06);
+    // --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-400);
+    // --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(--dsw-static-neutral-bluish-00);
+    // --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-1000);
+    // --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-700);
+    // --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-500);
+    // --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-100);
+    // --dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-50);
+    // --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
+    // --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: var(--dsw-static-neutral-bluish-75);
+    // --dsw-alias-scrollbar-bg: var(--dsw-static-neutral-200);
+    // --dsw-alias-scrollbar-hover: var(--dsw-static-neutral-250);
+    // --dsw-alias-state-error-primary: var(--dsw-static-red-600);
+    // --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
+    // --dsw-alias-state-success-primary: var(--dsw-static-green-500);
+    // --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
+    // --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
+    // --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
+    // --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
+    // --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-100);
+    // --dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-800);
+    // --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-850);
+    // --dsw-specific-bubble: var(--dsw-static-deepseek-50);
+    // --dsw-specific-input-major: var(--dsw-static-neutral-bluish-00);
+    // --dsw-specific-menu: var(--dsw-alias-bg-layer-3);
+    // --dsw-specific-selector: var(--dsw-static-neutral-bluish-75);
+
+    --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 */
diff --git a/styles/elements/_sidebar.scss b/styles/elements/_sidebar.scss
index e4850e8..b3904d4 100644
--- a/styles/elements/_sidebar.scss
+++ b/styles/elements/_sidebar.scss
@@ -23,9 +23,14 @@
     }
 }
 
-/* Sidebar */
+/* Sidebar wrapper */
 .dc04ec1d {
 
+    /* Sidebar */
+    .b8812f16 {
+        // background-color: var(--c-bg-sidebar) !important;
+    }
+
     /* Sidebar icon for collapsing sidebar for 'sm' size screens */
     .a9564e8a {
         color: var(--c-accent) !important;
@@ -52,33 +57,33 @@
     }
 
     /* 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);
-        }
-
-        /* 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;
-            }
-        }
-    }
+    // ._546d736 {
+    //     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);
+    //     }
+
+    //     /* Overlay fade where 3dots are */
+    //     ._254829d {
+    //         background: linear-gradient(90deg, transparent 0%, var(--c-bg-sidebar) 60%) !important;
+    //     }
+
+    //     /* Overlay fade where 3dots are */
+    //     &:not(&.b64fb9ae):hover,
+    //     &.b64fb9ae {
+    //         .eaaaba55 {
+    //             --c-bg-sidebar: var(--c-surface-2) !important;
+    //         }
+    //     }
+    // }
 
     /* "Get App" link in sidebar */
     .a1e75851 {
@@ -90,4 +95,35 @@
     .b91228e4:hover {
         background-color: var(--c-accent-hover) !important;
     }
+}
+
+/* Sidebar chat-item link */
+._546d736 {
+    transition: $trans;
+
+    // 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;
+    }
+
+    // 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;
+    }
+
+    // Overlay fade where 3dots are
+    &:not(&.b64fb9ae):hover,
+    &.b64fb9ae {
+        .eaaaba55 {
+            --c-bg-sidebar: var(--c-surface-2) !important;
+        }
+    }
 }
\ No newline at end of file

From 9e7ffa46aefa5d18c4483ff4772d6dfadd915cbe Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 14:59:45 +0200
Subject: [PATCH 02/15] fix(sidebar): Improve `New chat` btn and floating
 sidebar collapsed styles

---
 styles/abstract/_ds.scss      | 57 +++++++---------------
 styles/elements/_sidebar.scss | 89 +++++++++--------------------------
 2 files changed, 38 insertions(+), 108 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index f8db203..009f4a7 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -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;
@@ -102,9 +76,9 @@ body {
     // ===================== NEW UI =====================
     // ==================================================
     // --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-00);
-    // --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00);
-    // --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00);
-    // --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00);
+    --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: rgba(0, 0, 0, .24);
     // --dsw-alias-bg-mask-2: rgba(0, 0, 0, .12);
     // --dsw-alias-bg-multi-select: var(--dsw-static-neutral-bluish-50);
@@ -116,28 +90,29 @@ body {
     // --dsw-alias-border-l2: rgba(0, 0, 0, .1);
     // --dsw-alias-border-l3: rgba(0, 0, 0, .12);
     // --dsw-alias-border-l4: rgba(0, 0, 0, .16);
-    // --dsw-alias-brand-primary-invert: var(--dsw-static-deepseek-500);
-    // --dsw-alias-brand-primary: var(--dsw-static-deepseek-500);
-    // --dsw-alias-brand-text: var(--dsw-static-deepseek-500);
+    --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(--dsw-static-neutral-bluish-700);
-    // --dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-00);
-    // --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-00);
-    // --dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-75);
+    --dsw-alias-button-elevated-fill: hsla(var(--accent-hsl) / 0.15) !important;
+    --dsw-alias-button-floating-fill: var(--surface-2) !important;
+    --dsw-alias-button-floating-hover: var(--c-accent-hover) !important;
     // --dsw-alias-button-ghost-active-border: var(--dsw-static-deepseek-300);
     // --dsw-alias-button-ghost-active-fill: var(--dsw-static-deepseek-50);
     // --dsw-alias-button-ghost-active-hover: var(--dsw-static-deepseek-100);
-    // --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
+    --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
     // --dsw-alias-button-primary-hover: var(--dsw-static-deepseek-450);
     // --dsw-alias-interactive-bg-hover-accent: rgba(38, 49, 72, .14);
     // --dsw-alias-interactive-bg-hover-danger: rgba(236, 19, 19, .05);
-    // --dsw-alias-interactive-bg-hover: rgba(38, 49, 72, .06);
-    // --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-400);
+    // --dsw-alias-interactive-bg-hover: var(--c-accent-hover) !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(--dsw-static-neutral-bluish-00);
-    // --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-1000);
-    // --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-700);
-    // --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-500);
+    --dsw-alias-label-primary: var(--c-accent) !important;
+    --dsw-alias-label-secondary: var(--c-subtext-2) !important;
+    --dsw-alias-label-tertiary: var(--c-subtext-1) !important;
     // --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-100);
     // --dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-50);
     // --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
diff --git a/styles/elements/_sidebar.scss b/styles/elements/_sidebar.scss
index b3904d4..a7c805e 100644
--- a/styles/elements/_sidebar.scss
+++ b/styles/elements/_sidebar.scss
@@ -1,34 +1,37 @@
 /* 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 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 */
     .b8812f16 {
-        // background-color: var(--c-bg-sidebar) !important;
+        background-color: var(--c-bg-sidebar) !important;
+        border: none !important;
+    }
+
+    /* Sidebar scroll area where links are */
+    ._3586175.ds-scroll-area {
+        margin-top: 2rem !important;
     }
 
     /* Sidebar icon for collapsing sidebar for 'sm' size screens */
@@ -36,14 +39,6 @@
         color: var(--c-accent) !important;
     }
 
-
-    /* deepseek icon log only (when sidebar is collapsed) */
-    .a7f3a288 {
-        .ds-icon {
-            color: var(--c-accent) !important;
-        }
-    }
-
     /* "deepseek" text logo in sidebar */
     .e066abb8 svg {
         color: var(--c-accent) !important;
@@ -55,46 +50,6 @@
     ._48cdfc1 {
         @extend %date-pill;
     }
-
-    /* Sidebar chat-item link */
-    // ._546d736 {
-    //     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);
-    //     }
-
-    //     /* Overlay fade where 3dots are */
-    //     ._254829d {
-    //         background: linear-gradient(90deg, transparent 0%, var(--c-bg-sidebar) 60%) !important;
-    //     }
-
-    //     /* Overlay fade where 3dots are */
-    //     &:not(&.b64fb9ae):hover,
-    //     &.b64fb9ae {
-    //         .eaaaba55 {
-    //             --c-bg-sidebar: var(--c-surface-2) !important;
-    //         }
-    //     }
-    // }
-
-    /* "Get App" link in sidebar */
-    .a1e75851 {
-        border-color: var(--c-border) !important;
-
-    }
-
-    /* Bg when hovered mobile icon in sidebar */
-    .b91228e4:hover {
-        background-color: var(--c-accent-hover) !important;
-    }
 }
 
 /* Sidebar chat-item link */

From acc66536d3c19fc8b029021da27dc52fd1fcdf69 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 15:07:13 +0200
Subject: [PATCH 03/15] refactor: Override new Deepseek css variables

---
 styles/abstract/_ds.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 009f4a7..e36c593 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -79,17 +79,17 @@ body {
     --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: rgba(0, 0, 0, .24);
-    // --dsw-alias-bg-mask-2: rgba(0, 0, 0, .12);
-    // --dsw-alias-bg-multi-select: var(--dsw-static-neutral-bluish-50);
-    // --dsw-alias-bg-skeleton: rgba(0, 0, 0, .04);
+    --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-inverted2: transparent;
     // --dsw-alias-border-inverted: transparent;
-    // --dsw-alias-border-l1: rgba(0, 0, 0, .04);
-    // --dsw-alias-border-l2-darkmode-thin: rgba(0, 0, 0, .1);
-    // --dsw-alias-border-l2: rgba(0, 0, 0, .1);
-    // --dsw-alias-border-l3: rgba(0, 0, 0, .12);
-    // --dsw-alias-border-l4: rgba(0, 0, 0, .16);
+    --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;
@@ -135,7 +135,7 @@ body {
     // --dsw-specific-bubble: var(--dsw-static-deepseek-50);
     // --dsw-specific-input-major: var(--dsw-static-neutral-bluish-00);
     // --dsw-specific-menu: var(--dsw-alias-bg-layer-3);
-    // --dsw-specific-selector: var(--dsw-static-neutral-bluish-75);
+    --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;

From ed98c5a47eea3eca287bb30a8bcc66ce59041e54 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 16:24:14 +0200
Subject: [PATCH 04/15] fix(sidebar): Update sidebar link color from accent to
 classic text color

---
 styles/abstract/_ds.scss      | 2 +-
 styles/elements/_sidebar.scss | 1 +
 styles/global/_base.scss      | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index e36c593..0435f49 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -110,7 +110,7 @@ body {
     // --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(--dsw-static-neutral-bluish-00);
-    --dsw-alias-label-primary: var(--c-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(--dsw-static-neutral-bluish-100);
diff --git a/styles/elements/_sidebar.scss b/styles/elements/_sidebar.scss
index a7c805e..000fd20 100644
--- a/styles/elements/_sidebar.scss
+++ b/styles/elements/_sidebar.scss
@@ -55,6 +55,7 @@
 /* Sidebar chat-item link */
 ._546d736 {
     transition: $trans;
+    color: var(--c-txt) !important;
 
     // Active link item
     &.b64fb9ae {
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

From bd69fa6447b6b5b3d074ff45a4db418058a2212f Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 16:51:31 +0200
Subject: [PATCH 05/15] fix(chats/custom-width): Resolve custom chats width
 issues caused by Deepseek updates

- Fix broken custom chats width behavior introduced by recent Deepseek changes
- Adjust user chat width to use `max-content` for improved flexibility
- Ensure maximum chat width is controlled by the custom chat width slider

Changes summary:
- Fixed an issue where custom chat widths were broken due to recent changes by Deepseek. Additionally, updated the user chat width behavior to use `max-content` for better responsiveness, while keeping the maximum width adjustable via the custom chat width slider.
---
 styles/abstract/_ds.scss          |  2 +-
 styles/abstract/_root.scss        |  4 ++--
 styles/elements/_right--main.scss | 20 ++++++++++++++------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 0435f49..a900750 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%);
 
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index f0844ad..7f0dff8 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -30,7 +30,7 @@
 
     /* ? --- Border-radius --- */
     --br: 1rem;
-    --br-chat-bubble: calc(var(--br) * 1.9);
+    --br-chat-bubble: calc(var(--br) * 2.2);
     // --br-chat-bubble: 30px;
     // --br-prompt-textarea: calc(var(--br) * 0.2);
     --br-btn: calc(var(--br) * 0.9);
@@ -41,7 +41,7 @@
     --br-scrollbar: 50vw;
 
     /* ? --- Paddings --- */
-    --p-chat-bubble: 2rem;
+    --p-chat-bubble: 1.8rem;
     // --p-contextmenu: 0.8rem;
     // --p-contextmenu-item: 0.9rem 1rem;
     // --p-prompt-textarea: 0.7rem;
diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss
index 8015eda..a9d2570 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -29,13 +29,13 @@
 
     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;
     // 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;
+    width: max-content !important;
+    max-width: var(--maxWidthChats) !important;
 }
 
 /* User chat bubble in edit state */
@@ -74,7 +74,7 @@
     // 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;
 
@@ -237,11 +237,19 @@
 /* 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;
+    max-width: var(--maxWidthChats) !important;
 }
 
 /* textarea prompt parent */
 .aaff8b8f {
     --message-list-max-width: var(--maxWidthTextarea) !important;
-    max-width: var(--message-list-max-width);
+    max-width: var(--maxWidthTextarea);
+}
+
+
+._8f60047 ._0f72b0b {
+    // padding: 0 calc((100% - var(--message-list-max-width)) / 2);
+    padding: 0 5vw !important;
 }
\ No newline at end of file

From cb8623afedf469d155b8cf45aa1aad1af1012745 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 18:02:11 +0200
Subject: [PATCH 06/15] fix(chatbox): Adjust chatbox action buttons and custom
 width behavior

- Fix styling issues for chatbox action buttons (Deepseek and Search buttons), including wrapper background and alignment
- Resolve custom width inconsistencies for chats, particularly when using the search feature
- Ensure proper width handling by defining width for very parent elements that previously only had `max-width`

Changes summary:
- Fixed the styling of the Deepseek and Search buttons in the chatbox, improving their appearance and alignment. Additionally, resolved issues with custom chat widths, especially when using the search feature, by ensuring parent elements have a defined width instead of relying solely on `max-width`.
---
 styles/abstract/_ds.scss              |  12 +--
 styles/abstract/_root.scss            |   4 +-
 styles/elements/_right--main.scss     |   3 +-
 styles/elements/_right--textarea.scss | 122 ++++++--------------------
 4 files changed, 36 insertions(+), 105 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index a900750..878d49d 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -75,7 +75,7 @@ body {
     // ==================================================
     // ===================== NEW UI =====================
     // ==================================================
-    // --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-00);
+    --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;
@@ -93,13 +93,13 @@ body {
     --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(--dsw-static-neutral-bluish-700);
+    --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(--surface-2) !important;
     --dsw-alias-button-floating-hover: var(--c-accent-hover) !important;
-    // --dsw-alias-button-ghost-active-border: var(--dsw-static-deepseek-300);
-    // --dsw-alias-button-ghost-active-fill: var(--dsw-static-deepseek-50);
-    // --dsw-alias-button-ghost-active-hover: var(--dsw-static-deepseek-100);
+    --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(--dsw-static-deepseek-450);
     // --dsw-alias-interactive-bg-hover-accent: rgba(38, 49, 72, .14);
@@ -109,7 +109,7 @@ body {
     --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(--dsw-static-neutral-bluish-00);
+    --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;
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index 7f0dff8..6d55743 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -30,7 +30,7 @@
 
     /* ? --- Border-radius --- */
     --br: 1rem;
-    --br-chat-bubble: calc(var(--br) * 2.2);
+    --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 +41,7 @@
     --br-scrollbar: 50vw;
 
     /* ? --- Paddings --- */
-    --p-chat-bubble: 1.8rem;
+    --p-chat-bubble: 1.5rem;
     // --p-contextmenu: 0.8rem;
     // --p-contextmenu-item: 0.9rem 1rem;
     // --p-prompt-textarea: 0.7rem;
diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss
index a9d2570..c6ca3c4 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -35,7 +35,7 @@
     // width: var(--w_chat_user) !important;
     // width: var(--max_w_chat_user) !important;
     width: max-content !important;
-    max-width: var(--maxWidthChats) !important;
+    // max-width: var(--maxWidthChats) !important;
 }
 
 /* User chat bubble in edit state */
@@ -240,6 +240,7 @@
     // --message-list-max-width: var(--maxWidthChats) !important;
     margin: 0 auto !important;
     max-width: var(--maxWidthChats) !important;
+    width: var(--maxWidthChats) !important;
 }
 
 /* textarea prompt parent */
diff --git a/styles/elements/_right--textarea.scss b/styles/elements/_right--textarea.scss
index 00c1b8b..d28df97 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,19 @@
     //     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;
+}
+
+// .d72636e2 {
+//     z-index: -1;
+//     /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--dsw-alias-bg-base) 24%, var(--dsw-alias-bg-base) 100%); */
+//     align-self: flex-end;
+//     /* width: calc(100% + 16px); */
+//     height: 126px;
+//     position: absolute;
+//     bottom: 0;
+// }
\ No newline at end of file

From a8efb0d76cb451784d4a00cf8a2f14773a2fc8bb Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 19:32:31 +0200
Subject: [PATCH 07/15] fix(chats): Adjust styling for `Thought for X seconds`
 title and process

- Fix the style of chat elements related to the "Thought for X seconds" title and process
- Ensure consistent typography, spacing, and alignment for improved readability
- Address any visual inconsistencies in the display of these elements

Changes summary:
- Resolved styling issues with the "Thought for X seconds" title and process within chats. The changes ensure consistent typography, spacing, and alignment, improving the overall readability and visual presentation of these elements.
---
 styles/abstract/_ds.scss          |  10 +-
 styles/abstract/_root.scss        |   2 +
 styles/components/_btn.scss       |   9 ++
 styles/elements/_right--main.scss | 163 ++++++++----------------------
 4 files changed, 58 insertions(+), 126 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 878d49d..710d299 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -83,8 +83,6 @@ body {
     --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-inverted2: transparent;
-    // --dsw-alias-border-inverted: transparent;
     --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;
@@ -101,7 +99,7 @@ body {
     --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(--dsw-static-deepseek-450);
+    --dsw-alias-button-primary-hover: var(--c-accent-hover) !important;
     // --dsw-alias-interactive-bg-hover-accent: rgba(38, 49, 72, .14);
     // --dsw-alias-interactive-bg-hover-danger: rgba(236, 19, 19, .05);
     // --dsw-alias-interactive-bg-hover: var(--c-accent-hover) !important;
@@ -113,15 +111,15 @@ body {
     --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(--dsw-static-neutral-bluish-100);
+    --dsw-alias-markdown-citation: var(--c-accent-hover) !important;
     // --dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-50);
     // --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
     // --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: var(--dsw-static-neutral-bluish-75);
-    // --dsw-alias-scrollbar-bg: var(--dsw-static-neutral-200);
-    // --dsw-alias-scrollbar-hover: var(--dsw-static-neutral-250);
+    // --dsw-alias-scrollbar-bg: red !important;
+    // --dsw-alias-scrollbar-hover: blue !important;
     // --dsw-alias-state-error-primary: var(--dsw-static-red-600);
     // --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
     // --dsw-alias-state-success-primary: var(--dsw-static-green-500);
diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index 6d55743..272b9f9 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -11,6 +11,8 @@
     --letterSpacing: initial;
     --lineHeight: 28;
 
+    --ds-font-family: var(--fontFamily) !important; // override DS font-family
+
     --displayThinkingProcess: none;
 
     /* ? --- Custom Widths --- */
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 c6ca3c4..029d0da 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,19 +20,12 @@
 
 /* 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: var(--p-chat-bubble) !important;
     border-radius: var(--br-chat-bubble) !important;
-    // line-height: calc(var(--line_height) / 16) !important;
-    // width: var(--w_chat_user) !important;
-    // width: var(--max_w_chat_user) !important;
     width: max-content !important;
+    // line-height: calc(var(--line_height) / 16) !important;
     // max-width: var(--maxWidthChats) !important;
 }
 
@@ -44,15 +35,10 @@
     /* <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;
@@ -69,62 +55,46 @@
 
 /* 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) !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;
 
-        @include dev('md') {
-            display: none !important;
-        }
 
+        /* "Thought for X seconds" */
+        ._245c867 {
 
-        svg {
-            path {
-                fill: var(--c-accent) !important;
+            /* "Thought for X seconds" bg */
+            &::after,
+            &::before {
+                border-radius: 50vw !important;
+                background-color: var(--c-bg-msg-gpt) !important;
+                backdrop-filter: blur(2rem) !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;
+            &::before {
+                background-color: transparent !important;
+            }
 
-        &:hover {
-            @include bg-accent-inverse;
-            transform: scale(1.02);
+            & .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 {
             --thinking-p-left: 13px; // this is from ds deafult
@@ -135,9 +105,7 @@
             }
 
             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;
+            line-height: calc((var(--lineHeight) / 16) * 0.5) !important;
             transition: font-size 0.15s ease-in-out,
             line-height 0.15s ease-in-out;
 
@@ -146,40 +114,14 @@
                 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;
-                }
-            } */
         }
     }
-}
 
-/* TODO: za oba chat-bubble srediti max-widthh jer moram parente ustv da menjam:     --message-list-max-width */
-
-/* user wrapper i assistent wrapper */
-._9663006,
-._4f9bf79 {
-    margin-bottom: var(--mb-chat-bubble) !important;
-}
+    /* SOURCES - "X Web Pages"  */
+    ._972436e {
+        background-color: hsla(var(--accent-hsl) / 0.12) !important;
+    }
 
-/* User chat-bubble wrapper, remove padding for consistent and same spacing between chat-bubbles */
-._9663006 {
-    padding: 0 !important;
 }
 
 /* "New chat" floating btn. Not working when scoped into chats main layout... */
@@ -197,41 +139,11 @@
 }
 
 
-/* 
-    .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 */
@@ -243,14 +155,25 @@
     width: var(--maxWidthChats) !important;
 }
 
-/* textarea prompt parent */
+/* Chatbox parent */
 .aaff8b8f {
     --message-list-max-width: var(--maxWidthTextarea) !important;
     max-width: var(--maxWidthTextarea);
 }
 
+/* ============ CUSTOM FONTS ============  */
 
-._8f60047 ._0f72b0b {
-    // padding: 0 calc((100% - var(--message-list-max-width)) / 2);
-    padding: 0 5vw !important;
+/* 
+    .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

From 3f8b5fa2da0840c39a5f9419b3e874126bd39d9c Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 20:00:19 +0200
Subject: [PATCH 08/15] fix(chats): Improve chats gap and markdown header
 banned style

---
 styles/elements/_right--main.scss     |  51 ++++++----
 styles/elements/_right--markdown.scss | 131 +++++++++++++-------------
 2 files changed, 96 insertions(+), 86 deletions(-)

diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss
index 029d0da..eb6a1f9 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -29,30 +29,41 @@
     // max-width: var(--maxWidthChats) !important;
 }
 
-/* User chat bubble in edit state */
-._9663006._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;
+
+/* 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 {
     background-color: var(--c-bg-msg-gpt);
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;

From ce1ed69538d38be4379e0db2450d34eb8d0abb20 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 20:08:18 +0200
Subject: [PATCH 09/15] refactor(scrollbars): Remove custom scrollbar styles
 and only override Deepseek's scrollbar backgrounds

- Remove custom scrollbar styles previously applied to chats
- Override only Deepseek's scrollbar background colors to ensure consistency with the extension's theme
- Maintain default browser scrollbar behavior for other properties

Changes summary:
- Removed custom scrollbar styles from chats and now only override Deepseek's scrollbar background colors. This ensures a consistent appearance with the extension's theme while preserving the default browser scrollbar behavior for other properties.
---
 styles/abstract/_ds.scss | 4 ++--
 styles/index.scss        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 710d299..20cda9c 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -118,8 +118,8 @@ body {
     // --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: var(--dsw-static-neutral-bluish-75);
-    // --dsw-alias-scrollbar-bg: red !important;
-    // --dsw-alias-scrollbar-hover: blue !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(--dsw-static-red-600);
     // --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
     // --dsw-alias-state-success-primary: var(--dsw-static-green-500);
diff --git a/styles/index.scss b/styles/index.scss
index 6868613..7abb9be 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -11,7 +11,7 @@
 // @import 'dev/_mixins';
 
 @import 'global/_base';
-@import 'global/_scrollbars';
+// @import 'global/_scrollbars';
 
 @import 'components/_skeleton';
 @import 'components/_icons';

From b39b38fc7eb9a13a0418a8a011186a7b4d11539d Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 20:22:49 +0200
Subject: [PATCH 10/15] refactor: Override Deepseek warning and danger vars and
 tweak chat title style

---
 styles/abstract/_ds.scss            | 20 ++++++++++----------
 styles/elements/_right--sticky.scss |  3 +--
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 20cda9c..1ad47aa 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -120,18 +120,18 @@ body {
     // --dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-75);
     --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(--dsw-static-red-600);
-    // --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
-    // --dsw-alias-state-success-primary: var(--dsw-static-green-500);
-    // --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
-    // --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
-    // --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
-    // --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
-    // --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-100);
+    --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(--dsw-static-neutral-bluish-800);
     // --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-850);
     // --dsw-specific-bubble: var(--dsw-static-deepseek-50);
-    // --dsw-specific-input-major: var(--dsw-static-neutral-bluish-00);
+    --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;
 
@@ -140,8 +140,8 @@ body {
     --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 */
diff --git a/styles/elements/_right--sticky.scss b/styles/elements/_right--sticky.scss
index c15c45f..559a2d3 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,7 +15,7 @@
         }
 
         /* Sticky header: chat title */
-        .d8ed659a {
+        .afa34042 {
             @include bg-accent-inverse;
             outline: hsla(var(--accent-hsl) / 0.2) solid 1px !important;
 

From 3c93de5e8d157d13aa854083398dde2d8fbac061 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 20:43:07 +0200
Subject: [PATCH 11/15] fix(chats/custom-widths): Resolve overlapping and small
 width issues for custom chats widths

- Fix overlapping chats caused by very parent width being set to `maxWidthChats`
- Set the width of chats to `100%` to prevent overflow on smaller screens when resetting widths
- Address cases where chats had very small widths, particularly during search scenarios
- Ensure consistent and responsive chat widths across all use cases

Changes summary:
- Fixed overlapping chats by ensuring the very parent width is no longer fixed at `maxWidthChats`. Chats now default to `100%` width, preventing overflow on smaller screens. Additionally, resolved issues with very small chat widths during search scenarios, ensuring consistent and responsive behavior in all cases.
---
 styles/abstract/_root.scss        | 3 +++
 styles/elements/_right--main.scss | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index 272b9f9..15b1c81 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -17,9 +17,12 @@
 
     /* ? --- 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;
diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss
index eb6a1f9..3f41864 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -161,9 +161,10 @@
 .dad65929 {
     // --message-list-max-width: 800px;
     // --message-list-max-width: var(--maxWidthChats) !important;
-    margin: 0 auto !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;
+    // width: var(--maxWidthChats) !important; // nah, this makes chats to overflow in some case scenarios so width: 100% fix it??
 }
 
 /* Chatbox parent */

From f4a999b1e9d33a62947f0b1453911e63cad37bda Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 23:10:57 +0200
Subject: [PATCH 12/15] fix(scrolldown): Update css var to fix broken
 scrolldown background color

---
 styles/abstract/_ds.scss              |  2 +-
 styles/elements/_right--textarea.scss | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/styles/abstract/_ds.scss b/styles/abstract/_ds.scss
index 1ad47aa..6c2690f 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -93,7 +93,7 @@ body {
     --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(--surface-2) !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;
diff --git a/styles/elements/_right--textarea.scss b/styles/elements/_right--textarea.scss
index d28df97..521f72b 100644
--- a/styles/elements/_right--textarea.scss
+++ b/styles/elements/_right--textarea.scss
@@ -114,12 +114,9 @@
     margin: auto 0 !important; // original: margin: auto 32px 0 !important;
 }
 
-// .d72636e2 {
-//     z-index: -1;
-//     /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--dsw-alias-bg-base) 24%, var(--dsw-alias-bg-base) 100%); */
-//     align-self: flex-end;
-//     /* width: calc(100% + 16px); */
-//     height: 126px;
-//     position: absolute;
-//     bottom: 0;
+/* 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

From 62d56ed3b15638ab8f1a3bd7af20d7babb6706d2 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Wed, 3 Sep 2025 23:54:58 +0200
Subject: [PATCH 13/15] feat(chats/thinking): Decrease font size and
 line-height for thinking process text, add hover animations to source links

- Decrease the font size and line-height of the "Thinking process" text for improved readability and compactness
- Add hover animations to source links such as "Read X web pages" and "X Web Pages" for better interactivity
- Ensure smooth transitions and consistent styling for hover effects

Changes summary:
- Reduced the font size and line-height of the "Thinking process" text to make it more compact and easier to read. Added hover animations to source links like "Read X web pages" and "X Web Pages" to enhance interactivity and provide a smoother user experience.
---
 styles/elements/_right--main.scss | 56 +++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/styles/elements/_right--main.scss b/styles/elements/_right--main.scss
index 3f41864..17d8083 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -79,6 +79,20 @@
     /* Thinking very top parent */
     ._7d763a7 {
 
+        /* "Read X web pages" */
+        .ffdab56b.ddbfd84f {
+            transition: transform 0.25s $easeInOutQuad;
+
+            &:hover {
+                transform: scale(0.96);
+            }
+
+            &:before {
+                opacity: 1 !important;
+
+            }
+
+        }
 
 
         /* "Thought for X seconds" */
@@ -107,30 +121,60 @@
     ._48edb25 {
 
         /* 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;
-            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;
             }
+
+            .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;
+        //     }
+        // }
     }
 
     /* SOURCES - "X Web Pages"  */
     ._972436e {
         background-color: hsla(var(--accent-hsl) / 0.12) !important;
+        transition: transform 0.25s $easeInOutQuad;
+
+        &:hover {
+            transform: scale(0.972);
+        }
     }
 
 }

From 6b69cf9d819314afeab48c025b6cc11371df463d Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Thu, 4 Sep 2025 13:45:10 +0200
Subject: [PATCH 14/15] refactor: Rewrite CSS variables for markdown, tooltips,
 and update chat title background

- Refactor CSS variables related to markdown styling for better maintainability and consistency
- Update tooltip-specific CSS variables to improve reusability and alignment with the design system
- Adjust the chat title background to enhance visual clarity and match the updated theme

Changes summary:
- Rewrote several CSS variables related to markdown and tooltips to improve code maintainability and ensure consistency across the application. Additionally, updated the chat title background to align with the refreshed design and provide better visual clarity.
---
 styles/abstract/_dark.scss          |  4 +-
 styles/abstract/_ds.scss            | 77 ++++++++++++++---------------
 styles/abstract/_light.scss         |  4 +-
 styles/abstract/_mixins.scss        |  2 +
 styles/abstract/_root.scss          |  8 +--
 styles/elements/_right--sticky.scss |  4 +-
 styles/index.scss                   |  2 +-
 7 files changed, 52 insertions(+), 49 deletions(-)

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 6c2690f..235743e 100644
--- a/styles/abstract/_ds.scss
+++ b/styles/abstract/_ds.scss
@@ -100,9 +100,9 @@ body {
     --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: rgba(38, 49, 72, .14);
-    // --dsw-alias-interactive-bg-hover-danger: rgba(236, 19, 19, .05);
-    // --dsw-alias-interactive-bg-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);
@@ -112,12 +112,12 @@ body {
     --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(--dsw-static-neutral-bluish-50);
-    // --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
+    --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: var(--dsw-static-neutral-bluish-75);
+    --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;
@@ -128,20 +128,19 @@ body {
     --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(--dsw-static-neutral-bluish-800);
-    // --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-850);
-    // --dsw-specific-bubble: var(--dsw-static-deepseek-50);
+    // --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 */
@@ -180,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 15b1c81..45dc6e7 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -5,8 +5,8 @@
     --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;
@@ -46,7 +46,7 @@
     --br-scrollbar: 50vw;
 
     /* ? --- Paddings --- */
-    --p-chat-bubble: 1.5rem;
+    --p-chat-bubble: 1.25rem;
     // --p-contextmenu: 0.8rem;
     // --p-contextmenu-item: 0.9rem 1rem;
     // --p-prompt-textarea: 0.7rem;
@@ -57,6 +57,8 @@
     --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-track: transparent;
 
 
     @include dev('md') {
diff --git a/styles/elements/_right--sticky.scss b/styles/elements/_right--sticky.scss
index 559a2d3..fdf1824 100644
--- a/styles/elements/_right--sticky.scss
+++ b/styles/elements/_right--sticky.scss
@@ -16,8 +16,8 @@
 
         /* Sticky header: chat title */
         .afa34042 {
-            @include bg-accent-inverse;
-            outline: hsla(var(--accent-hsl) / 0.2) solid 1px !important;
+            @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/index.scss b/styles/index.scss
index 7abb9be..6868613 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -11,7 +11,7 @@
 // @import 'dev/_mixins';
 
 @import 'global/_base';
-// @import 'global/_scrollbars';
+@import 'global/_scrollbars';
 
 @import 'components/_skeleton';
 @import 'components/_icons';

From dad66c4d48bd862eff5cd280f6e36f77601573f9 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Thu, 4 Sep 2025 14:28:14 +0200
Subject: [PATCH 15/15] refactor: Add custom scrollbar style to remove ugly
 default for some elements (e.g. Custom Settings)

---
 styles/abstract/_root.scss        |   2 +
 styles/elements/_right--main.scss |   6 ++
 styles/global/_scrollbars.scss    | 113 +++++++++++++++++++++---------
 3 files changed, 87 insertions(+), 34 deletions(-)

diff --git a/styles/abstract/_root.scss b/styles/abstract/_root.scss
index 45dc6e7..6ce2c29 100644
--- a/styles/abstract/_root.scss
+++ b/styles/abstract/_root.scss
@@ -58,7 +58,9 @@
 
     --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/elements/_right--main.scss b/styles/elements/_right--main.scss
index 17d8083..38ee0b4 100644
--- a/styles/elements/_right--main.scss
+++ b/styles/elements/_right--main.scss
@@ -167,6 +167,12 @@
         // }
     }
 
+    /* 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%);
+    }
+
+
     /* SOURCES - "X Web Pages"  */
     ._972436e {
         background-color: hsla(var(--accent-hsl) / 0.12) !important;
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