chore: Adjust agent chat code elements (#40230)

## Description

Fixes #39836

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/dabefaab-71a1-41e1-b84a-7fcb115c2c86)
|
![image](https://github.com/user-attachments/assets/f98e5b06-6cb7-499b-8a55-44b358c1af58)
|

## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> 🟣 🟣 🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/14445548010>
> Commit: d93e974ef879e773c24189647f87a0c7ecce977f
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Mon, 14 Apr 2025 12:25:09 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No

app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts

@@ -1301,13 +1301,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdElevation1() {
     const color = this.bdNeutral.clone();
 
-    if (this.seedIsVeryLight) {
+    color.oklch.l -= 0.39;
-      color.oklch.l = 0.13;
-    }
-
-    if (!this.seedIsVeryLight) {
-      color.oklch.l -= 0.75;
-    }
 
     return color;
   }
@@ -1315,7 +1309,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdElevation2() {
     const color = this.bdElevation1.clone();
 
-    color.oklch.l += 0.015;
+    color.oklch.l += 0.07;
 
     return color;
   }
@@ -1323,7 +1317,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdElevation3() {
     const color = this.bdElevation2.clone();
 
-    color.oklch.l += 0.035;
+    color.oklch.l += 0.05;
 
     return color;
   }

app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx

@@ -12,7 +12,7 @@ export const CodeBlock = (props: SyntaxHighlighterProps) => {
 
   return (
     <SyntaxHighlighter
-      className={getTypographyClassName("caption")}
+      className={getTypographyClassName("body") + " wds-codeblock"}
       {...props}
       style={theme.colorMode === "dark" ? darkTheme : lightTheme}
       useInlineStyles

app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx

@@ -35,6 +35,7 @@ export const Code = (props: CodeProps) => {
       >
         <Text size="caption">{match[1]}</Text>
         <Button
+          color="neutral"
           icon={copied ? "check" : "copy"}
           onPress={handleCopy}
           size="small"

app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css

@@ -79,7 +79,6 @@
 
   li {
     margin-bottom: var(--inner-spacing-2);
-    margin-left: 1em;
     position: relative;
     list-style-type: auto;
     letter-spacing: -0.02em;
@@ -92,19 +91,29 @@
   [data-component="code"] {
     background-color: var(--color-bg-elevation-2);
     border-radius: var(--border-radius-elevation-3);
-    outline: var(--border-width-1) solid var(--color-bg-neutral-subtle);
+    outline: var(--border-width-1) solid var(--color-bd-elevation-2);
     margin-bottom: var(--inner-spacing-2);
     overflow: auto;
   }
 
+  [data-component="code"] [class*="wds-codeblock"]::before,
+  [data-component="code"] [class*="wds-codeblock"]::after {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  code:is([class*="language-"]) {
+    font-size: 0.85em;
+  }
   code:not([class*="language-"]) {
+    font-size: 0.85em;
     padding-inline: var(--inner-spacing-1);
     background: var(--color-bg-neutral-subtle);
-    color: var(--color-fg-negative);
+    color: var(--color-fg-accent);
-    border-radius: var(--border-radius-elevation-3);
+    border-radius: calc(var(--border-radius-elevation-3) / 4);
     word-break: break-word;
     white-space: normal;
-    outline: var(--border-width-1) solid var(--color-bg-neutral-soft);
+    outline: var(--border-width-1) solid var(--color-bd-elevation-3);
   }
 
   pre {

app/client/packages/design-system/widgets/src/components/Sidebar/src/constants.ts

@@ -4,5 +4,5 @@ export const SIDEBAR_CONSTANTS = {
     ICON: "var(--sizing-14)",
   },
   KEYBOARD_SHORTCUT: "b",
-  MOBILE_BREAKPOINT: 768,
+  MOBILE_BREAKPOINT: 720,
 } as const;