diff --git a/pos/static/css/chat.css b/pos/static/css/chat.css
index 9981054..c7892fc 100644
--- a/pos/static/css/chat.css
+++ b/pos/static/css/chat.css
@@ -7,7 +7,7 @@
 
 .chat-fab {
   position: fixed;
-  bottom: 72px;            /* above F-keys footer */
+  bottom: 140px;           /* above cart FAB and F-keys footer */
   right: var(--space-5);
   z-index: 8000;
   width: 52px;
@@ -28,7 +28,7 @@
 
 .chat-fab:hover {
   transform: scale(1.08);
-  background: var(--color-accent-hover);
+  background: var(--color-primary-hover, #e5952f);
 }
 
 .chat-fab.has-unread::after {
@@ -46,7 +46,7 @@
 
 .chat-panel {
   position: fixed;
-  bottom: 72px;
+  bottom: 200px;
   right: var(--space-5);
   z-index: 8001;
   width: 400px;
@@ -54,7 +54,7 @@
   max-height: calc(100vh - 100px);
   display: flex;
   flex-direction: column;
-  background: var(--color-bg-surface);
+  background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
@@ -121,7 +121,7 @@
   max-width: 85%;
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm, 0.875rem);
   line-height: 1.45;
   word-wrap: break-word;
 }
@@ -130,14 +130,14 @@
   align-self: flex-end;
   background: var(--color-accent);
   color: #fff;
-  border-bottom-right-radius: var(--radius-xs);
+  border-bottom-right-radius: var(--radius-sm, 4px);
 }
 
 .chat-msg.ai {
   align-self: flex-start;
-  background: var(--color-bg-muted);
+  background: var(--color-surface-2, rgba(255,255,255,0.06));
   color: var(--color-text-primary);
-  border-bottom-left-radius: var(--radius-xs);
+  border-bottom-left-radius: var(--radius-sm, 4px);
 }
 
 /* ─── Typing Indicator ─── */
@@ -147,9 +147,9 @@
   display: none;
   gap: 4px;
   padding: var(--space-2) var(--space-3);
-  background: var(--color-bg-muted);
+  background: var(--color-surface-2, rgba(255,255,255,0.06));
   border-radius: var(--radius-lg);
-  border-bottom-left-radius: var(--radius-xs);
+  border-bottom-left-radius: var(--radius-sm, 4px);
 }
 
 .chat-typing.visible { display: flex; }
@@ -179,7 +179,7 @@
 }
 
 .chat-part-card {
-  background: var(--color-bg-surface);
+  background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-2) var(--space-3);
@@ -195,19 +195,19 @@
 
 .chat-part-card .part-number {
   font-family: var(--font-mono);
-  font-size: var(--text-xs);
+  font-size: var(--text-caption, 0.75rem);
   color: var(--color-accent);
   font-weight: var(--font-weight-semibold);
 }
 
 .chat-part-card .part-name {
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm, 0.875rem);
   color: var(--color-text-primary);
   margin-top: 2px;
 }
 
 .chat-part-card .part-stock {
-  font-size: var(--text-xs);
+  font-size: var(--text-caption, 0.75rem);
   color: var(--color-text-muted);
   margin-top: 2px;
 }
@@ -233,7 +233,7 @@
   border-radius: var(--radius-md);
   background: var(--color-bg-base);
   color: var(--color-text-primary);
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm, 0.875rem);
   font-family: var(--font-body);
   resize: none;
   outline: none;
@@ -265,7 +265,7 @@
   transition: background var(--duration-fast) var(--ease-in-out);
 }
 
-.chat-send-btn:hover { background: var(--color-accent-hover); }
+.chat-send-btn:hover { background: var(--color-primary-hover, #e5952f); }
 .chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* ─── Vehicle Info Banner ─── */
@@ -277,7 +277,7 @@
   border: 1px solid var(--color-accent);
   border-left: 3px solid var(--color-accent);
   border-radius: var(--radius-md);
-  font-size: var(--text-xs);
+  font-size: var(--text-caption, 0.75rem);
   color: var(--color-text-secondary);
 }