makethisbetter 1.5.0 → 1.5.2

package/src/popup/clarify.ts

@@ -2,25 +2,34 @@ import type { ShadowContainer } from '../widget/shadow'
 import type { I18nMessages } from '../i18n'
 import type { ApiClient } from '../api/client'
 import type { ClarifyMessage } from '../types'
-import { BRAND_COLOR } from '../styles'
 
 const POLL_INTERVAL_MS = 2000
 const DONE_DELAY_MS = 2000
+// Give up polling after this long with no assistant reply so the card never
+// spins forever (e.g. a backend job that silently died).
+const POLL_TIMEOUT_MS = 45000
 
 interface ClarifyCardOptions {
   feedbackId: string
   apiClient: ApiClient
   messages: I18nMessages
   onDone: () => void
+  x?: number
+  y?: number
 }
 
+const CARD_WIDTH = 346
+const CARD_HEIGHT = 320
+
 export class ClarifyCard {
   private el: HTMLDivElement
   private messagesEl!: HTMLDivElement
-  private inputEl!: HTMLInputElement
+  private inputEl!: HTMLTextAreaElement
   private sendBtn!: HTMLButtonElement
   private pollTimer: ReturnType<typeof setInterval> | null = null
+  private pollDeadline = 0
   private doneTimer: ReturnType<typeof setTimeout> | null = null
+  private streamingBubble: HTMLDivElement | null = null
   private feedbackId: string
   private apiClient: ApiClient
   private onDone: () => void
@@ -33,9 +42,8 @@ export class ClarifyCard {
     this.onDone = opts.onDone
 
     this.el = shadow.el<HTMLDivElement>('div', 'mtb-clarify')
-    this.el.style.right = '20px'
-    this.el.style.bottom = '20px'
     this.el.innerHTML = this.buildHTML(opts.messages)
+    this.positionCard(opts.x, opts.y)
     shadow.append(this.el)
 
     this.messagesEl = this.el.querySelector('.mtb-clarify-messages')!
@@ -46,39 +54,78 @@ export class ClarifyCard {
     this.startConversation()
   }
 
+  // Anchors the card near the annotation point, clamped to the viewport so it
+  // never overflows a screen edge (mirrors CommentPopup.positionPopup).
+  private positionCard(x?: number, y?: number): void {
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    const margin = 12
+
+    if (x === undefined || y === undefined) {
+      this.el.style.left = `${Math.max(margin, (vw - CARD_WIDTH) / 2)}px`
+      this.el.style.top = `${Math.max(margin, (vh - CARD_HEIGHT) / 2)}px`
+      return
+    }
+
+    let left = x + 12
+    let top = y + 12
+    if (left + CARD_WIDTH > vw - margin) left = x - CARD_WIDTH - 12
+    if (left < margin) left = margin
+    if (top + CARD_HEIGHT > vh - margin) top = vh - CARD_HEIGHT - margin
+    if (top < margin) top = margin
+
+    this.el.style.left = `${left}px`
+    this.el.style.top = `${top}px`
+  }
+
   private buildHTML(m: I18nMessages): string {
     return `
       <div class="mtb-clarify-header">
-        <div class="mtb-clarify-icon">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${BRAND_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        <span class="mtb-clarify-icon">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6L12 3z"/>
           </svg>
+        </span>
+        <div class="mtb-clarify-titles">
+          <div class="mtb-clarify-title">${escapeHtml(m.clarify.title)}</div>
+          <div class="mtb-clarify-subtitle">${escapeHtml(m.clarify.subtitle)}</div>
         </div>
-        <button class="mtb-clarify-skip">${escapeHtml(m.clarify.skip)}</button>
+        <button class="mtb-clarify-close" type="button" title="${escapeHtml(m.clarify.skip)}" aria-label="${escapeHtml(m.clarify.skip)}">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
       </div>
       <div class="mtb-clarify-messages"></div>
       <div class="mtb-clarify-footer">
-        <input class="mtb-clarify-input" type="text" placeholder="${escapeHtml(m.clarify.placeholder)}" />
-        <button class="mtb-clarify-send" disabled>${escapeHtml(m.clarify.send)}</button>
+        <textarea class="mtb-clarify-input" rows="2" placeholder="${escapeHtml(m.clarify.placeholder)}"></textarea>
+        <div class="mtb-clarify-actions">
+          <button class="mtb-clarify-skip" type="button">${escapeHtml(m.clarify.skip)}</button>
+          <button class="mtb-clarify-send" type="button">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="22" y1="2" x2="11" y2="13"/>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+            </svg>
+            <span>${escapeHtml(m.clarify.send)}</span>
+          </button>
+        </div>
       </div>
     `
   }
 
   private bindEvents(m: I18nMessages): void {
-    this.el.querySelector('.mtb-clarify-skip')!.addEventListener('click', () => {
+    const skip = () => {
       this.stopPolling()
       this.onDone()
-    })
-
-    this.inputEl.addEventListener('input', () => {
-      const hasText = this.inputEl.value.trim().length > 0
-      this.sendBtn.disabled = !hasText || this.sending
-    })
+    }
+    this.el.querySelector('.mtb-clarify-skip')!.addEventListener('click', skip)
+    this.el.querySelector('.mtb-clarify-close')!.addEventListener('click', skip)
 
     this.inputEl.addEventListener('keydown', (e: KeyboardEvent) => {
       // keyCode 229: IME composition fallback for browsers without isComposing
       if (e.isComposing || e.keyCode === 229) return
-      if (e.key === 'Enter') {
+      // Enter sends; Shift+Enter inserts a newline in the textarea.
+      if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault()
         this.sendMessage(m)
       }
@@ -89,22 +136,11 @@ export class ClarifyCard {
 
   private async startConversation(): Promise<void> {
     this.showThinking()
-    try {
-      const res = await this.apiClient.startClarification(this.feedbackId)
-      if (this.destroyed) return
-      this.renderConversation(res.messages, res.done)
-      if (res.done) {
-        this.handleDone()
-      } else {
-        this.startPolling()
-      }
-    } catch {
-      if (this.destroyed) return
-      this.onDone()
-    }
+    await this.runTurn(undefined)
   }
 
   private async sendMessage(m: I18nMessages): Promise<void> {
+    void m
     const text = this.inputEl.value.trim()
     if (!text || this.sending) return
 
@@ -118,27 +154,67 @@ export class ClarifyCard {
     this.showThinking()
 
     try {
-      const res = await this.apiClient.startClarification(this.feedbackId, text)
+      await this.runTurn(text)
+    } finally {
+      this.sending = false
+      this.inputEl.disabled = false
+      this.sendBtn.disabled = false
+      this.inputEl.focus()
+    }
+  }
+
+  // Streams the assistant reply; falls back to POST + polling if the backend
+  // doesn't support SSE (older server) or the stream errors mid-flight.
+  private async runTurn(message: string | undefined): Promise<void> {
+    try {
+      const result = await this.apiClient.streamClarification(
+        this.feedbackId,
+        message,
+        (text) => this.appendStreamDelta(text),
+      )
+      if (this.destroyed) return
+      this.endStreamingBubble()
+      this.renderConversation(result.messages, result.done)
+      if (result.done) this.handleDone()
+      else this.startPolling()
+    } catch {
+      if (this.destroyed) return
+      this.endStreamingBubble()
+      await this.runTurnViaPolling(message)
+    }
+  }
+
+  private async runTurnViaPolling(message: string | undefined): Promise<void> {
+    try {
+      const res = await this.apiClient.startClarification(this.feedbackId, message)
       if (this.destroyed) return
       this.renderConversation(res.messages, res.done)
-      if (res.done) {
-        this.handleDone()
-      } else {
-        this.startPolling()
-      }
+      if (res.done) this.handleDone()
+      else this.startPolling()
     } catch {
       if (this.destroyed) return
       this.onDone()
-    } finally {
-      this.sending = false
-      this.inputEl.disabled = false
-      this.sendBtn.disabled = this.inputEl.value.trim().length === 0
-      this.inputEl.focus()
     }
   }
 
+  private appendStreamDelta(text: string): void {
+    if (!this.streamingBubble) {
+      this.removeThinking()
+      this.streamingBubble = document.createElement('div')
+      this.streamingBubble.className = 'mtb-clarify-bubble mtb-clarify-ai'
+      this.messagesEl.appendChild(this.streamingBubble)
+    }
+    this.streamingBubble.textContent = (this.streamingBubble.textContent ?? '') + text
+    this.messagesEl.scrollTop = this.messagesEl.scrollHeight
+  }
+
+  private endStreamingBubble(): void {
+    this.streamingBubble = null
+  }
+
   private startPolling(): void {
     this.stopPolling()
+    this.pollDeadline = Date.now() + POLL_TIMEOUT_MS
     this.pollTimer = setInterval(() => this.poll(), POLL_INTERVAL_MS)
   }
 
@@ -150,6 +226,11 @@ export class ClarifyCard {
   }
 
   private async poll(): Promise<void> {
+    if (Date.now() > this.pollDeadline) {
+      this.stopPolling()
+      this.handleDone()
+      return
+    }
     try {
       const res = await this.apiClient.getClarification(this.feedbackId)
       if (this.destroyed) return
@@ -195,6 +276,7 @@ export class ClarifyCard {
   }
 
   private showThinking(): void {
+    if (this.messagesEl.querySelector('.mtb-clarify-thinking')) return
     const dots = document.createElement('div')
     dots.className = 'mtb-clarify-bubble mtb-clarify-ai mtb-clarify-thinking'
     dots.innerHTML = '<span class="mtb-dot"></span><span class="mtb-dot"></span><span class="mtb-dot"></span>'
@@ -202,6 +284,10 @@ export class ClarifyCard {
     this.messagesEl.scrollTop = this.messagesEl.scrollHeight
   }
 
+  private removeThinking(): void {
+    this.messagesEl.querySelector('.mtb-clarify-thinking')?.remove()
+  }
+
   destroy(): void {
     this.destroyed = true
     this.stopPolling()

package/src/screenshot/capture.test.ts

@@ -1,28 +1,30 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { toPng } from 'html-to-image'
+import { toJpeg } from 'html-to-image'
 import { captureScreenshot } from './capture'
 import type { Annotation } from '../types'
 
 vi.mock('html-to-image', () => ({
-  toPng: vi.fn(async () => 'data:image/png;base64,AA=='),
+  toJpeg: vi.fn(async () => 'data:image/jpeg;base64,/9j/AA=='),
 }))
 
-const toPngMock = vi.mocked(toPng)
+const toJpegMock = vi.mocked(toJpeg)
 
 describe('captureScreenshot', () => {
   afterEach(() => {
     document.body.innerHTML = ''
-    toPngMock.mockClear()
+    toJpegMock.mockClear()
   })
 
-  it('captures a png blob', async () => {
+  it('captures a compressed jpeg blob', async () => {
     const blob = await captureScreenshot()
 
     expect(blob).toBeInstanceOf(Blob)
-    expect(blob?.type).toBe('image/png')
-    expect(toPngMock).toHaveBeenCalledWith(
+    expect(blob?.type).toBe('image/jpeg')
+    expect(toJpegMock).toHaveBeenCalledWith(
       document.body,
       expect.objectContaining({
+        quality: 0.85,
+        pixelRatio: 1,
         cacheBust: true,
         skipAutoScale: false,
       }),
@@ -31,9 +33,9 @@ describe('captureScreenshot', () => {
 
   it('mounts pin annotations during capture and removes them after capture', async () => {
     let captureText = ''
-    toPngMock.mockImplementationOnce(async () => {
+    toJpegMock.mockImplementationOnce(async () => {
       captureText = document.querySelector<HTMLElement>('[data-mtb-capture-annotations]')?.textContent ?? ''
-      return 'data:image/png;base64,AA=='
+      return 'data:image/jpeg;base64,/9j/AA=='
     })
 
     const annotation: Annotation = { type: 'pin', x: 40, y: 60 }
@@ -45,9 +47,9 @@ describe('captureScreenshot', () => {
 
   it('mounts draw annotations during capture', async () => {
     let drawPath: string | null = null
-    toPngMock.mockImplementationOnce(async () => {
+    toJpegMock.mockImplementationOnce(async () => {
       drawPath = document.querySelector('[data-mtb-capture-annotations] path')?.getAttribute('d') ?? null
-      return 'data:image/png;base64,AA=='
+      return 'data:image/jpeg;base64,/9j/AA=='
     })
 
     const annotation: Annotation = { type: 'draw', x: 50, y: 50, drawPath: 'M 10 10 L 90 90' }
@@ -57,7 +59,7 @@ describe('captureScreenshot', () => {
   })
 
   it('returns null and cleans up if capture fails', async () => {
-    toPngMock.mockRejectedValueOnce(new Error('capture failed'))
+    toJpegMock.mockRejectedValueOnce(new Error('capture failed'))
 
     const annotation: Annotation = { type: 'pin', x: 40, y: 60 }
     const blob = await captureScreenshot([annotation])

package/src/screenshot/capture.ts

@@ -1,11 +1,17 @@
-import { toPng } from 'html-to-image'
+import { toJpeg } from 'html-to-image'
 import type { Annotation } from '../types'
 
+// Capture at CSS pixels (pixelRatio 1) as JPEG to keep the upload small: on
+// retina screens the default devicePixelRatio would quadruple the pixel count,
+// and the model downscales past ~1568px anyway.
 export async function captureScreenshot(annotations: Annotation[] = []): Promise<Blob | null> {
   const annotationLayer = mountCaptureAnnotations(annotations)
 
   try {
-    const dataUrl = await toPng(document.body, {
+    const dataUrl = await toJpeg(document.body, {
+      quality: 0.85,
+      pixelRatio: 1,
+      backgroundColor: '#ffffff',
       cacheBust: true,
       skipAutoScale: false,
       filter: (node) => {

package/src/styles/widget.css

@@ -934,142 +934,191 @@
 .mtb-clarify {
   position: fixed;
   z-index: 2147483645;
-  width: 320px;
+  width: 346px;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
+  border-radius: 14px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
   display: flex;
   flex-direction: column;
-  animation: mtbSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: mtbSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow: hidden;
 }
 
 .mtb-clarify-header {
-  padding: 10px 13px;
+  padding: 11px 13px 11px 14px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 9px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 }
 
 .mtb-clarify-icon {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  background: rgba(5, 150, 105, 0.08);
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  background: linear-gradient(140deg, #10b981, #059669);
+  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.mtb-clarify-skip {
+.mtb-clarify-titles {
+  flex: 1;
+  min-width: 0;
+}
+
+.mtb-clarify-title {
+  font-size: 12.5px;
+  font-weight: 650;
+  line-height: 1.2;
+  color: #191a1c;
+}
+
+.mtb-clarify-subtitle {
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.42);
+}
+
+.mtb-clarify-close {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
-  font-family: inherit;
+  padding: 3px;
+  color: rgba(0, 0, 0, 0.38);
+  display: flex;
   transition: color 0.12s;
 }
 
-.mtb-clarify-skip:hover {
+.mtb-clarify-close:hover {
   color: rgba(0, 0, 0, 0.7);
 }
 
 .mtb-clarify-messages {
   flex: 1;
-  max-height: 240px;
+  max-height: 250px;
   overflow-y: auto;
-  padding: 12px 13px;
+  padding: 13px 13px 5px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 9px;
 }
 
 .mtb-clarify-bubble {
-  max-width: 85%;
-  padding: 8px 12px;
-  border-radius: 12px;
-  font-size: 13px;
+  max-width: 82%;
+  padding: 9px 12px;
+  font-size: 12.5px;
   line-height: 1.5;
-  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .mtb-clarify-ai {
   align-self: flex-start;
-  background: #f3f4f6;
+  background: #ffffff;
   color: #191a1c;
-  border-bottom-left-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.09);
+  border-radius: 13px 13px 13px 4px;
 }
 
 .mtb-clarify-user {
   align-self: flex-end;
   background: #059669;
   color: #fff;
-  border-bottom-right-radius: 4px;
+  border: 1px solid #059669;
+  border-radius: 13px 13px 4px 13px;
 }
 
 .mtb-clarify-thinking {
   display: flex;
   align-items: center;
-  gap: 3px;
-  padding: 10px 16px;
+  gap: 4px;
+  padding: 11px 14px;
 }
 
 .mtb-clarify-thinking .mtb-dot {
-  background: #9ca3af;
+  width: 6px;
+  height: 6px;
+  background: rgba(5, 150, 105, 0.7);
 }
 
 .mtb-clarify-footer {
-  padding: 10px 13px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 3px 13px 13px;
   display: flex;
-  gap: 8px;
+  flex-direction: column;
 }
 
 .mtb-clarify-input {
-  flex: 1;
-  height: 32px;
-  padding: 0 10px;
+  width: 100%;
+  height: 52px;
+  padding: 9px 11px;
   border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
+  border-radius: 9px;
   font-family: inherit;
-  font-size: 12.5px;
+  font-size: 13px;
+  line-height: 1.5;
   color: #191a1c;
   outline: none;
-  background: #fff;
-  transition: border-color 0.12s, box-shadow 0.12s;
+  background: #fafafa;
+  resize: none;
+  box-sizing: border-box;
+  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
 }
 
 .mtb-clarify-input:focus {
   border-color: #10b981;
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
+  background: #fff;
 }
 
 .mtb-clarify-input::placeholder {
   color: rgba(0, 0, 0, 0.34);
 }
 
-.mtb-clarify-send {
-  height: 32px;
+.mtb-clarify-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 9px;
+}
+
+.mtb-clarify-skip {
+  flex: 0 0 auto;
+  height: 34px;
   padding: 0 14px;
-  border: none;
-  border-radius: 8px;
-  background: #d1d5db;
-  color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 9px;
+  background: #fff;
   cursor: pointer;
   font-family: inherit;
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 12.5px;
+  font-weight: 550;
+  color: rgba(0, 0, 0, 0.55);
   transition: background 0.12s;
-  flex-shrink: 0;
 }
 
-.mtb-clarify-send:not(:disabled) {
+.mtb-clarify-skip:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.mtb-clarify-send {
+  flex: 1;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  border-radius: 9px;
   background: #059669;
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  transition: background 0.12s;
 }
 
 .mtb-clarify-send:not(:disabled):hover {
@@ -1077,6 +1126,7 @@
 }
 
 .mtb-clarify-send:disabled {
+  background: rgba(0, 0, 0, 0.15);
   cursor: not-allowed;
 }
 
@@ -1090,20 +1140,35 @@
   border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 
-:host([data-mtb-theme="dark"]) .mtb-clarify-footer {
-  border-top-color: rgba(255, 255, 255, 0.1);
+:host([data-mtb-theme="dark"]) .mtb-clarify-title {
+  color: #f9fafb;
 }
 
-:host([data-mtb-theme="dark"]) .mtb-clarify-skip {
+:host([data-mtb-theme="dark"]) .mtb-clarify-subtitle {
   color: rgba(255, 255, 255, 0.45);
 }
 
-:host([data-mtb-theme="dark"]) .mtb-clarify-skip:hover {
+:host([data-mtb-theme="dark"]) .mtb-clarify-close {
+  color: rgba(255, 255, 255, 0.45);
+}
+
+:host([data-mtb-theme="dark"]) .mtb-clarify-close:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+:host([data-mtb-theme="dark"]) .mtb-clarify-skip {
+  background: #1f2327;
+  border-color: rgba(255, 255, 255, 0.14);
   color: rgba(255, 255, 255, 0.7);
 }
 
+:host([data-mtb-theme="dark"]) .mtb-clarify-skip:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
 :host([data-mtb-theme="dark"]) .mtb-clarify-ai {
   background: #1f2327;
+  border-color: rgba(255, 255, 255, 0.12);
   color: #f9fafb;
 }
 
@@ -1124,20 +1189,35 @@
     border-bottom-color: rgba(255, 255, 255, 0.1);
   }
 
-  :host([data-mtb-theme="auto"]) .mtb-clarify-footer {
-    border-top-color: rgba(255, 255, 255, 0.1);
+  :host([data-mtb-theme="auto"]) .mtb-clarify-title {
+    color: #f9fafb;
   }
 
-  :host([data-mtb-theme="auto"]) .mtb-clarify-skip {
+  :host([data-mtb-theme="auto"]) .mtb-clarify-subtitle {
     color: rgba(255, 255, 255, 0.45);
   }
 
-  :host([data-mtb-theme="auto"]) .mtb-clarify-skip:hover {
+  :host([data-mtb-theme="auto"]) .mtb-clarify-close {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  :host([data-mtb-theme="auto"]) .mtb-clarify-close:hover {
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  :host([data-mtb-theme="auto"]) .mtb-clarify-skip {
+    background: #1f2327;
+    border-color: rgba(255, 255, 255, 0.14);
     color: rgba(255, 255, 255, 0.7);
   }
 
+  :host([data-mtb-theme="auto"]) .mtb-clarify-skip:hover {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
   :host([data-mtb-theme="auto"]) .mtb-clarify-ai {
     background: #1f2327;
+    border-color: rgba(255, 255, 255, 0.12);
     color: #f9fafb;
   }