diff --git a/ui/suite/chat/chat.css b/ui/suite/chat/chat.css
index c650da3..f528438 100644
--- a/ui/suite/chat/chat.css
+++ b/ui/suite/chat/chat.css
@@ -1,14 +1,11 @@
-/* Chat module styles - including chat layout and projector component */
-
-/* Toast Notifications */
 .toast-container {
     position: fixed;
-    top: 80px;
-    right: 24px;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    z-index: 10002;
+    gap: 10px;
 }
 
 .toast {
@@ -16,84 +13,98 @@
     align-items: center;
     gap: 12px;
     padding: 14px 18px;
-    background: var(--surface, #1a1a24);
-    border: 1px solid var(--border, #2a2a2a);
-    border-radius: 10px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
-    animation: toast-in 0.3s ease;
+    background: var(--surface, var(--card, #1a1a24));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    min-width: 300px;
+    max-width: 450px;
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
 .toast-success {
-    border-color: var(--success, #22c55e);
+    border-left: 4px solid var(--accent, #3b82f6);
 }
 
 .toast-error {
-    border-color: var(--error, #ef4444);
+    border-left: 4px solid var(--error, #ef4444);
 }
 
 .toast-warning {
-    border-color: var(--warning, #f59e0b);
+    border-left: 4px solid var(--warning, #f59e0b);
 }
 
 .toast-info {
-    border-color: var(--accent, #3b82f6);
+    border-left: 4px solid var(--info, #06b6d4);
 }
 
 .toast-icon {
-    font-size: 16px;
-}
-
-.toast-message {
-    font-size: 13px;
-    color: #ffffff;
-}
-
-.toast-close {
-    background: transparent;
-    border: none;
-    color: #888888;
-    font-size: 18px;
-    cursor: pointer;
-    padding: 0;
+    font-size: 20px;
     line-height: 1;
 }
 
+.toast-message {
+    flex: 1;
+    font-size: 14px;
+    color: var(--text, #e5e5e5);
+}
+
+.toast-close {
+    background: none;
+    border: none;
+    color: var(--text-secondary, #888);
+    cursor: pointer;
+    padding: 4px;
+    font-size: 18px;
+    line-height: 1;
+    transition: color 0.15s ease;
+}
+
 .toast-close:hover {
-    color: #ffffff;
+    color: var(--text, #e5e5e5);
 }
 
 .toast-fade-out {
-    opacity: 0;
-    transform: translateX(20px);
-    transition: all 0.3s ease;
+    animation: fadeOut 0.3s ease forwards;
 }
 
-@keyframes toast-in {
+@keyframes fadeOut {
     from {
-        opacity: 0;
-        transform: translateX(20px);
-    }
-
-    to {
-        opacity: 1;
         transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
     }
 }
 
-/* Chat Layout */
+/* Chat Layout - 50% width centered */
 .chat-layout {
     display: flex;
     flex-direction: column;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
+    position: relative;
+    width: 50%;
+    max-width: 800px;
+    min-width: 400px;
+    height: 100%;
+    margin: 0 auto;
     padding: 0;
     box-sizing: border-box;
+    background: var(--bg, #ffffff);
+    border-radius: 8px;
+    overflow: hidden;
 }
 
 /* Connection Status - use shared styles from app.css */
@@ -132,26 +143,24 @@
 
 #messages::-webkit-scrollbar-track {
     background: transparent;
-    border-radius: 3px;
 }
 
 #messages::-webkit-scrollbar-thumb {
-    background: var(--border, rgba(255, 255, 255, 0.2));
+    background: var(--accent, #3b82f6);
     border-radius: 3px;
-    transition: background 0.2s;
 }
 
 #messages::-webkit-scrollbar-thumb:hover {
-    background: var(--accent, #3b82f6);
+    background: var(--accent-hover, #2563eb);
 }
 
-/* Scrollbar markers container */
+/* Scrollbar Markers */
 .scrollbar-markers {
     position: absolute;
-    top: 0;
     right: 2px;
-    width: 8px;
-    height: 100%;
+    top: 0;
+    bottom: 0;
+    width: 6px;
     pointer-events: none;
     z-index: 10;
 }
@@ -159,21 +168,20 @@
 .scrollbar-marker {
     position: absolute;
     right: 0;
-    width: 8px;
-    height: 8px;
-    background: var(--accent, #3b82f6);
-    border-radius: 50%;
+    width: 6px;
+    min-height: 4px;
+    border-radius: 3px;
     cursor: pointer;
     pointer-events: auto;
-    transition: all 0.2s ease;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-    z-index: 11;
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+    opacity: 0.6;
 }
 
 .scrollbar-marker:hover {
-    transform: scale(1.5);
-    background: var(--accent-hover, #2563eb);
-    box-shadow: 0 0 8px var(--accent, #3b82f6);
+    opacity: 1;
+    transform: scaleX(1.5);
 }
 
 .scrollbar-marker.user-marker {
@@ -186,40 +194,39 @@
 
 .scrollbar-marker-tooltip {
     position: absolute;
-    right: 12px;
+    right: 16px;
+    top: 50%;
     transform: translateY(-50%);
-    background: var(--surface, #1a1a24);
-    border: 1px solid var(--border, #2a2a2a);
+    background: var(--surface, var(--card, #1a1a24));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
     border-radius: 6px;
-    padding: 4px 8px;
-    font-size: 11px;
-    color: var(--text, #ffffff);
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text, #e5e5e5);
     white-space: nowrap;
     opacity: 0;
-    visibility: hidden;
-    transition: all 0.2s ease;
     pointer-events: none;
-    z-index: 12;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.2s ease;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .scrollbar-marker:hover .scrollbar-marker-tooltip {
     opacity: 1;
-    visibility: visible;
 }
 
-/* Message Styles */
+/* Message styles */
 .message {
     display: flex;
-    animation: slideIn 0.3s ease;
+    flex-direction: column;
+    max-width: 85%;
+    animation: messageIn 0.3s ease;
 }
 
-@keyframes slideIn {
+@keyframes messageIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }
-
     to {
         opacity: 1;
         transform: translateY(0);
@@ -227,36 +234,31 @@
 }
 
 .message.user {
-    justify-content: flex-end;
+    align-self: flex-end;
 }
 
 .message.bot {
-    justify-content: flex-start;
+    align-self: flex-start;
 }
 
 .message-content {
-    max-width: 80%;
-    padding: 14px 18px;
+    padding: 12px 16px;
     border-radius: 16px;
-    line-height: 1.75;
-    font-size: 14px;
     word-wrap: break-word;
     overflow-wrap: break-word;
 }
 
 .user-message {
-    background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
-    color: var(--chat-fg1, #ffffff) !important;
+    background: var(--accent, #3b82f6);
+    color: white;
     border-bottom-right-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .bot-message {
-    background: var(--chat-color2, var(--surface, var(--card, #2a2a2a)));
-    color: var(--chat-fg2, var(--text)) !important;
+    background: var(--surface, var(--card, #1a1a24));
+    color: var(--text, #e5e5e5);
     border-bottom-left-radius: 4px;
-    border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
 }
 
 .bot-message,
@@ -270,12 +272,11 @@
 .bot-message h2,
 .bot-message h3,
 .bot-message h4 {
-    color: var(--chat-fg2, var(--text)) !important;
+    color: var(--text, #e5e5e5) !important;
 }
 
-/* Markdown content in bot messages */
 .bot-message p {
-    margin: 0 0 8px 0;
+    margin: 0.5em 0;
 }
 
 .bot-message p:last-child {
@@ -283,19 +284,19 @@
 }
 
 .bot-message code {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.3);
     padding: 2px 6px;
     border-radius: 4px;
-    font-family: "Monaco", "Menlo", monospace;
-    font-size: 13px;
+    font-family: "Fira Code", monospace;
+    font-size: 0.9em;
 }
 
 .bot-message pre {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.3);
     padding: 12px;
     border-radius: 8px;
     overflow-x: auto;
-    margin: 8px 0;
+    margin: 0.5em 0;
 }
 
 .bot-message pre code {
@@ -303,11 +304,11 @@
     padding: 0;
 }
 
-/* Footer */
+/* Footer with solid background */
 footer {
     padding: 16px 20px;
     border-top: 1px solid var(--border, var(--border-color, #2a2a2a));
-    background: transparent;
+    background: var(--surface, #f5f5f5);
     position: relative;
 }
 
@@ -351,17 +352,16 @@ footer {
 }
 
 .mention-results::-webkit-scrollbar {
-    width: 4px;
+    width: 6px;
 }
 
 .mention-results::-webkit-scrollbar-track {
     background: transparent;
-    border-radius: 2px;
 }
 
 .mention-results::-webkit-scrollbar-thumb {
     background: var(--accent, #3b82f6);
-    border-radius: 2px;
+    border-radius: 3px;
 }
 
 .mention-results::-webkit-scrollbar-thumb:hover {
@@ -374,12 +374,12 @@ footer {
     gap: 12px;
     padding: 10px 14px;
     cursor: pointer;
-    transition: background 0.15s;
+    transition: background-color 0.15s ease;
 }
 
 .mention-item:hover,
 .mention-item.selected {
-    background: var(--hover, rgba(255, 255, 255, 0.05));
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
 }
 
 .mention-item.disabled {
@@ -388,58 +388,63 @@ footer {
 }
 
 .mention-item-icon {
-    font-size: 20px;
     width: 32px;
     height: 32px;
+    border-radius: 8px;
+    background: var(--accent, #3b82f6);
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--hover, rgba(255, 255, 255, 0.05));
-    border-radius: 8px;
+    font-size: 16px;
+    flex-shrink: 0;
 }
 
 .mention-item-content {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
+    min-width: 0;
 }
 
 .mention-item-name {
     font-size: 14px;
     font-weight: 500;
-    color: var(--text, var(--text-primary, #fff));
+    color: var(--text, #e5e5e5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mention-item-subtitle {
     font-size: 12px;
     color: var(--text-secondary, #888);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mention-item-hint {
-    font-size: 11px;
-    color: var(--text-tertiary, #666);
-    font-style: italic;
+    font-size: 12px;
+    color: var(--text-secondary, #888);
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+    padding: 2px 8px;
+    border-radius: 4px;
 }
 
-/* Mention Tags in Messages */
+/* Mention tag in input */
 .mention-tag {
     display: inline-flex;
     align-items: center;
     gap: 4px;
+    background: var(--accent, #3b82f6);
+    color: white;
     padding: 2px 8px;
-    background: var(--accent-glow, rgba(59, 130, 246, 0.15));
-    border: 1px solid var(--accent, var(--accent-color, #3b82f6));
-    border-radius: 12px;
-    cursor: pointer;
-    transition: all 0.2s;
+    border-radius: 4px;
     font-size: 13px;
-    text-decoration: none;
+    margin-right: 4px;
+    vertical-align: middle;
 }
 
 .mention-tag:hover {
-    background: var(--accent, var(--accent-color, #3b82f6));
-    color: #fff;
+    background: var(--accent-hover, #2563eb);
 }
 
 .mention-icon {
@@ -453,25 +458,21 @@ footer {
 /* Entity Card Tooltip */
 .entity-card-tooltip {
     position: fixed;
-    min-width: 250px;
-    max-width: 320px;
     background: var(--surface, var(--card, #1a1a24));
     border: 1px solid var(--border, var(--border-color, #2a2a2a));
     border-radius: 12px;
+    padding: 16px;
+    min-width: 280px;
+    max-width: 350px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-    padding: 12px;
-    z-index: 1000;
+    z-index: 10000;
     opacity: 0;
-    visibility: hidden;
-    transform: translateY(8px);
-    transition: all 0.2s ease;
     pointer-events: none;
+    transition: opacity 0.2s ease;
 }
 
 .entity-card-tooltip.visible {
     opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
     pointer-events: auto;
 }
 
@@ -483,126 +484,124 @@ footer {
 }
 
 .entity-card-type {
-    font-size: 10px;
+    font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 3px 8px;
     border-radius: 4px;
-    color: #fff;
     background: var(--accent, #3b82f6);
+    color: white;
 }
 
 .entity-card-status {
     font-size: 11px;
-    color: var(--text-secondary, #888);
+    color: var(--success, #22c55e);
 }
 
 .entity-card-title {
     font-size: 16px;
     font-weight: 600;
-    color: var(--text, var(--text-primary, #fff));
+    color: var(--text, #e5e5e5);
     margin-bottom: 8px;
 }
 
 .entity-card-details {
     font-size: 13px;
-    color: var(--text-secondary, #aaa);
+    color: var(--text-secondary, #888);
+    margin-bottom: 12px;
     line-height: 1.5;
 }
 
 .entity-card-actions {
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border, var(--border-color, #2a2a2a));
     display: flex;
     gap: 8px;
 }
 
-.entity-card-btm {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
 .entity-card-btn {
-    padding: 6px 12px;
-    font-size: 12px;
-    font-weight: 500;
-    border: none;
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+    color: var(--text, #e5e5e5);
     border-radius: 6px;
+    font-size: 13px;
     cursor: pointer;
-    background: var(--accent, var(--accent-color, #3b82f6));
-    color: #fff;
-    transition: all 0.2s;
+    transition: all 0.15s ease;
 }
 
 .entity-card-btn:hover {
-    filter: brightness(1.1);
+    background: var(--accent, #3b82f6);
+    border-color: var(--accent, #3b82f6);
+    color: white;
 }
 
 /* Suggestions */
 .suggestions-container {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
     gap: 8px;
     margin-bottom: 12px;
-    animation: slideIn 0.3s ease;
+    padding-bottom: 4px;
 }
 
 .suggestion-chip,
 .suggestion-button {
-    padding: 6px 12px;
-    border-radius: 20px;
-    border: 2px solid var(--chat-color1, #002147);
-    background: var(--chat-color2, #002147);
-    color: var(--chat-fg2, var(--text, #ffffff));
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-    min-height: 30px;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    text-shadow: none;
+    gap: 6px;
+    padding: 8px 14px;
+    background: transparent;
+    border: 1px solid var(--border, var(--border-color, #d0d0d0));
+    border-radius: 20px;
+    color: #333;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+/* Dark theme suggestion buttons */
+[data-theme="dark"] .suggestion-chip,
+[data-theme="dark"] .suggestion-button,
+[data-theme="sentient"] .suggestion-chip,
+[data-theme="sentient"] .suggestion-button {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--border, #2a2a2a);
+    color: var(--text, #e5e5e5);
 }
 
 .suggestion-chip::before,
 .suggestion-button::before {
     content: "";
     position: absolute;
-    inset: 0;
-    background: var(--chat-color1, var(--accent, #3b82f6));
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--accent, #3b82f6);
     opacity: 0;
-    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    border-radius: inherit;
-    z-index: -1;
+    transition: opacity 0.2s ease;
 }
 
 .suggestion-chip:hover,
 .suggestion-button:hover {
-    background: var(--chat-color1, var(--suggestion-color, #4a9eff));
-    color: var(--chat-fg1, #ffffff);
-    border-color: var(--chat-color1, var(--suggestion-color, #6bb3ff));
-    transform: translateY(-2px) scale(1.02);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-    text-shadow: none;
+    border-color: var(--accent, #3b82f6);
+    transform: translateY(-1px);
 }
 
 .suggestion-chip:hover::before,
 .suggestion-button:hover::before {
-    opacity: 1;
+    opacity: 0.1;
 }
 
 .suggestion-chip:active,
 .suggestion-button:active {
     transform: translateY(0);
-    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
 }
 
 /* Hide initial suggestion buttons when dynamic suggestions are displayed */
@@ -614,99 +613,71 @@ footer.has-suggestions .quick-action-chip {
 .input-container,
 form.input-container {
     display: flex;
-    gap: 12px;
     align-items: center;
-    padding: 8px 12px;
-    background: var(--surface, var(--card, #1a1a24));
-    border: 1px solid var(--border, var(--border-color, #2a2a2a));
-    border-radius: 28px;
-    margin: 0;
+    gap: 12px;
+    background: transparent;
+    border: 1px solid var(--border, var(--border-color, #d0d0d0));
+    border-radius: 24px;
+    padding: 8px 16px;
+    transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
 }
 
 .input-container:focus-within {
-    border-color: var(--chat-color1, var(--accent, #3b82f6));
-    box-shadow: 0 0 0 3px
-        color-mix(
-            in srgb,
-            var(--chat-color1, var(--accent, #3b82f6)) 20%,
-            transparent
-        );
+    border-color: var(--accent, #3b82f6);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
 #messageInput {
     flex: 1;
-    padding: 8px 12px;
-    border-radius: 20px;
+    background: none;
     border: none;
-    background: transparent;
-    color: var(--text, inherit);
-    font-size: 15px;
+    color: var(--text, #e5e5e5);
+    font-size: 14px;
     outline: none;
-    transition: all 0.2s;
-    caret-color: var(--accent, #3b82f6);
+    padding: 4px 0;
 }
 
 #messageInput:focus {
     outline: none;
 }
 
-@keyframes cursor-blink {
-    0%,
-    50% {
-        caret-color: var(--accent, #3b82f6);
-    }
-
-    51%,
-    100% {
-        caret-color: transparent;
-    }
-}
-
-#messageInput:focus {
-    animation: cursor-blink 1s step-end infinite;
-}
-
 #messageInput::placeholder {
-    color: #888888;
+    color: var(--text-secondary, #888);
 }
 
 #voiceBtn,
 #sendBtn {
-    width: 44px;
-    height: 44px;
-    min-width: 44px;
-    min-height: 44px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     border: none;
-    background: var(--accent, var(--accent-color, #3b82f6));
-    color: var(--accent-foreground, white);
-    cursor: pointer;
-    display: flex !important;
+    display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 18px;
-    transition: all 0.2s;
-    flex-shrink: 0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 16px;
 }
 
 #sendBtn {
-    background: var(--chat-color1, var(--accent, #3b82f6));
+    background: var(--accent, #3b82f6);
+    color: white;
 }
 
 #voiceBtn {
-    background: var(--surface, var(--secondary-bg, #f9fafb));
-    color: var(--text-primary, #374151);
-    border: 1px solid var(--border, var(--border-color, #e5e7eb));
+    background: var(--surface-hover, rgba(255, 255, 255, 0.1));
+    color: var(--text-secondary, #888);
 }
 
 #voiceBtn:hover,
 #sendBtn:hover {
     transform: scale(1.05);
-    opacity: 0.9;
 }
 
 #sendBtn:hover {
-    background: var(--chat-color1, var(--accent-hover, #2563eb));
+    background: var(--accent-hover, #2563eb);
 }
 
 #voiceBtn:active,
@@ -714,63 +685,58 @@ form.input-container {
     transform: scale(0.95);
 }
 
-/* Dark/Sentient theme overrides */
 [data-theme="dark"] #sendBtn,
 [data-theme="sentient"] #sendBtn {
-    background: var(--chat-color1, #d4f505);
-    color: #ffffff;
+    background: var(--accent, #3b82f6);
 }
 
 [data-theme="dark"] #voiceBtn,
 [data-theme="sentient"] #voiceBtn {
-    background: var(--surface, #1a1a24);
-    color: var(--text-primary, #ffffff);
-    border-color: var(--border, #2a2a3a);
+    background: var(--surface-hover, rgba(255, 255, 255, 0.1));
 }
 
 /* Scroll to Bottom Button */
 .scroll-to-bottom {
-    position: fixed;
+    position: absolute;
     bottom: 100px;
     right: 20px;
-    width: 44px;
-    height: 44px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
-    border: none;
-    background: var(--accent, #3b82f6);
-    color: white;
+    background: var(--surface, var(--card, #1a1a24));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    color: var(--text, #e5e5e5);
     cursor: pointer;
-    display: none;
+    display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
-    z-index: 100;
     opacity: 0;
-    transform: scale(0.8) translateY(10px);
+    pointer-events: none;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 50;
 }
 
 .scroll-to-bottom.visible {
-    display: flex;
     opacity: 1;
-    transform: scale(1) translateY(0);
+    pointer-events: auto;
 }
 
 .scroll-to-bottom:hover {
-    background: var(--accent-hover, #2563eb);
-    transform: scale(1.1);
-    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
+    background: var(--accent, #3b82f6);
+    border-color: var(--accent, #3b82f6);
+    transform: translateY(-2px);
 }
 
 .scroll-to-bottom:active {
-    transform: scale(0.95);
+    transform: translateY(0);
 }
 
-/* Responsive */
 @media (max-width: 768px) {
     .chat-layout {
-        padding: 0;
+        width: 100%;
+        max-width: none;
+        min-width: auto;
     }
 
     .message-content {
@@ -786,77 +752,74 @@ form.input-container {
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.9);
-    z-index: 10000;
+    z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
-    animation: fadeIn 0.2s ease;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
 }
 
 .projector-overlay.hidden {
     display: none;
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
+.projector-overlay:not(.hidden) {
+    opacity: 1;
+    pointer-events: auto;
 }
 
-/* Container */
+/* Projector Container */
 .projector-container {
-    width: 95%;
-    max-width: 1400px;
-    height: 90%;
-    max-height: 900px;
-    background: #1a1a1a;
-    border-radius: 12px;
-    display: flex;
-    flex-direction: column;
+    position: relative;
+    width: 90%;
+    max-width: 1200px;
+    max-height: 90vh;
+    background: var(--surface, var(--card, #1a1a24));
+    border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
 }
 
 .projector-container.fullscreen {
     width: 100%;
     max-width: none;
-    height: 100%;
+    height: 100vh;
     max-height: none;
     border-radius: 0;
 }
 
-/* Header */
+/* Projector Header */
 .projector-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 12px 20px;
-    background: #252525;
-    border-bottom: 1px solid #333;
+    justify-content: space-between;
+    padding: 16px 20px;
+    background: var(--surface-hover, rgba(0, 0, 0, 0.2));
+    border-bottom: 1px solid var(--border, var(--border-color, #2a2a2a));
 }
 
 .projector-title-section {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
 }
 
 .projector-icon {
-    font-size: 20px;
+    font-size: 24px;
 }
 
 .projector-title {
-    color: #fff;
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 600;
+    color: var(--text, #e5e5e5);
     max-width: 400px;
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
 .projector-actions {
@@ -865,44 +828,48 @@ form.input-container {
 }
 
 .projector-btn {
-    background: transparent;
-    border: none;
-    color: #aaa;
-    font-size: 18px;
-    padding: 8px;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+    color: var(--text, #e5e5e5);
     cursor: pointer;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-}
-
-.projector-btn:hover {
-    background: #333;
-    color: #fff;
-}
-
-.projector-btn.close-btn:hover {
-    background: #e74c3c;
-    color: #fff;
-}
-
-/* Content Area */
-.projector-content {
-    flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
-    position: relative;
-    background: #000;
+    transition: all 0.15s ease;
 }
 
-/* Loading */
+.projector-btn:hover {
+    background: var(--surface-active, rgba(255, 255, 255, 0.1));
+    border-color: var(--accent, #3b82f6);
+}
+
+.projector-btn.close-btn:hover {
+    background: var(--error, #ef4444);
+    border-color: var(--error, #ef4444);
+    color: white;
+}
+
+/* Projector Content */
+.projector-content {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: var(--bg, #0a0a0f);
+}
+
+/* Projector Loading */
 .projector-loading {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: #888;
+    color: var(--text-secondary, #888);
 }
 
 .projector-loading.hidden {
@@ -912,8 +879,8 @@ form.input-container {
 .loading-spinner {
     width: 40px;
     height: 40px;
-    border: 3px solid #333;
-    border-top-color: #667eea;
+    border: 3px solid var(--border, var(--border-color, #2a2a2a));
+    border-top-color: var(--accent, #3b82f6);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }
@@ -924,58 +891,57 @@ form.input-container {
     }
 }
 
-/* Video Player */
+/* Projector Media Types */
 .projector-video {
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
+    width: 100%;
+    max-height: 70vh;
+    border-radius: 8px;
+    outline: none;
 }
 
-/* Audio Player */
 .projector-audio {
-    width: 80%;
-    max-width: 600px;
+    width: 100%;
+    max-width: 500px;
 }
 
 .audio-visualizer {
     width: 100%;
-    height: 200px;
-    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+    height: 100px;
+    background: var(--surface, var(--card, #1a1a24));
     border-radius: 8px;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
 }
 
-/* Image Viewer */
 .projector-image {
     max-width: 100%;
-    max-height: 100%;
+    max-height: 70vh;
+    border-radius: 8px;
     object-fit: contain;
-    transition: transform 0.3s ease;
 }
 
-/* PDF Viewer */
 .projector-pdf {
     width: 100%;
-    height: 100%;
+    height: 70vh;
     border: none;
+    border-radius: 8px;
 }
 
-/* Code Viewer */
 .projector-code {
     width: 100%;
-    height: 100%;
+    max-height: 70vh;
     overflow: auto;
-    background: #1e1e1e;
-    padding: 20px;
+    background: var(--surface, var(--card, #1a1a24));
+    border-radius: 8px;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
 }
 
 .projector-code pre {
     margin: 0;
-    font-family: "Fira Code", "Monaco", "Consolas", monospace;
-    font-size: 14px;
-    line-height: 1.5;
-    color: #d4d4d4;
+    padding: 16px;
+    font-family: "Fira Code", monospace;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--text, #e5e5e5);
 }
 
 .projector-code.line-numbers pre {
@@ -987,69 +953,65 @@ form.input-container {
     content: counter(line);
     display: inline-block;
     width: 40px;
-    padding-right: 20px;
-    color: #666;
+    margin-right: 16px;
     text-align: right;
+    color: var(--text-secondary, #888);
+    border-right: 1px solid var(--border, var(--border-color, #2a2a2a));
+    padding-right: 12px;
 }
 
-/* Presentation Viewer */
 .projector-presentation {
     width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height: 70vh;
 }
 
 .slide-container {
-    background: #fff;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    aspect-ratio: 16/9;
-    max-width: 90%;
-    max-height: 90%;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
+    background: var(--surface, var(--card, #1a1a24));
+    border-radius: 8px;
 }
 
 .slide-content {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    padding: 40px;
+    text-align: center;
 }
 
-/* Iframe Viewer */
 .projector-iframe {
     width: 100%;
-    height: 100%;
+    height: 70vh;
     border: none;
-    background: #fff;
+    border-radius: 8px;
+    background: white;
 }
 
-/* Markdown Viewer */
 .projector-markdown {
     width: 100%;
-    height: 100%;
+    max-height: 70vh;
     overflow: auto;
-    padding: 40px;
-    background: #fff;
-    color: #333;
+    padding: 24px;
+    background: var(--surface, var(--card, #1a1a24));
+    border-radius: 8px;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
 }
 
 .projector-markdown h1,
 .projector-markdown h2,
 .projector-markdown h3 {
-    color: #1a1a1a;
-    margin-top: 24px;
-    margin-bottom: 12px;
+    color: var(--text, #e5e5e5);
+    margin-bottom: 16px;
 }
 
 .projector-markdown code {
-    background: #f0f0f0;
+    background: rgba(0, 0, 0, 0.3);
     padding: 2px 6px;
     border-radius: 4px;
-    font-family: monospace;
+    font-family: "Fira Code", monospace;
 }
 
 .projector-markdown pre code {
@@ -1058,11 +1020,11 @@ form.input-container {
     overflow-x: auto;
 }
 
-/* Controls */
+/* Projector Controls */
 .projector-controls {
     padding: 12px 20px;
-    background: #252525;
-    border-top: 1px solid #333;
+    background: var(--surface-hover, rgba(0, 0, 0, 0.2));
+    border-top: 1px solid var(--border, var(--border-color, #2a2a2a));
 }
 
 .media-controls,
@@ -1072,7 +1034,6 @@ form.input-container {
     display: flex;
     align-items: center;
     gap: 12px;
-    flex-wrap: wrap;
 }
 
 .media-controls.hidden,
@@ -1083,36 +1044,38 @@ form.input-container {
 }
 
 .control-btn {
-    background: #333;
-    border: none;
-    color: #fff;
-    padding: 8px 12px;
-    border-radius: 6px;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+    color: var(--text, #e5e5e5);
     cursor: pointer;
-    font-size: 16px;
-    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
 }
 
 .control-btn:hover {
-    background: #444;
+    background: var(--surface-active, rgba(255, 255, 255, 0.1));
 }
 
 .control-btn.active {
-    background: #667eea;
+    background: var(--accent, #3b82f6);
+    border-color: var(--accent, #3b82f6);
 }
 
 .play-btn {
-    font-size: 20px;
-    padding: 8px 16px;
+    width: 44px;
+    height: 44px;
 }
 
-/* Progress Bar */
 .progress-container {
     flex: 1;
     display: flex;
     align-items: center;
     gap: 12px;
-    min-width: 200px;
 }
 
 .progress-bar {
@@ -1120,7 +1083,7 @@ form.input-container {
     height: 6px;
     -webkit-appearance: none;
     appearance: none;
-    background: #444;
+    background: var(--border, var(--border-color, #2a2a2a));
     border-radius: 3px;
     cursor: pointer;
 }
@@ -1129,7 +1092,7 @@ form.input-container {
     -webkit-appearance: none;
     width: 14px;
     height: 14px;
-    background: #667eea;
+    background: var(--accent, #3b82f6);
     border-radius: 50%;
     cursor: pointer;
 }
@@ -1137,27 +1100,27 @@ form.input-container {
 .progress-bar::-moz-range-thumb {
     width: 14px;
     height: 14px;
-    background: #667eea;
+    background: var(--accent, #3b82f6);
     border-radius: 50%;
     cursor: pointer;
     border: none;
 }
 
 .time-display {
-    color: #888;
     font-size: 12px;
-    min-width: 100px;
-    text-align: right;
+    color: var(--text-secondary, #888);
+    min-width: 80px;
+    text-align: center;
+    font-family: "Fira Code", monospace;
 }
 
-/* Volume */
 .volume-slider {
     width: 80px;
-    height: 4px;
+    height: 6px;
     -webkit-appearance: none;
     appearance: none;
-    background: #444;
-    border-radius: 2px;
+    background: var(--border, var(--border-color, #2a2a2a));
+    border-radius: 3px;
     cursor: pointer;
 }
 
@@ -1165,48 +1128,58 @@ form.input-container {
     -webkit-appearance: none;
     width: 12px;
     height: 12px;
-    background: #fff;
+    background: var(--accent, #3b82f6);
     border-radius: 50%;
     cursor: pointer;
 }
 
-/* Speed/Theme Select */
+.volume-slider::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    background: var(--accent, #3b82f6);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+}
+
 .speed-select,
 .theme-select {
-    background: #333;
-    color: #fff;
-    border: none;
-    padding: 6px 10px;
+    padding: 6px 12px;
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
     border-radius: 6px;
+    color: var(--text, #e5e5e5);
+    font-size: 12px;
     cursor: pointer;
 }
 
-/* Slide Info */
 .slide-info,
 .image-info,
 .code-info,
 .zoom-level {
-    color: #888;
-    font-size: 14px;
+    font-size: 12px;
+    color: var(--text-secondary, #888);
 }
 
 .slide-nav input {
-    width: 50px;
-    background: #333;
-    border: none;
-    color: #fff;
-    padding: 6px;
-    border-radius: 4px;
+    width: 60px;
+    padding: 6px 8px;
+    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    border-radius: 6px;
+    color: var(--text, #e5e5e5);
+    font-size: 12px;
     text-align: center;
 }
 
-/* Error State */
+/* Projector Error */
 .projector-error {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: #e74c3c;
+    padding: 40px;
+    color: var(--error, #ef4444);
 }
 
 .projector-error-icon {
@@ -1214,27 +1187,26 @@ form.input-container {
 }
 
 .projector-error-message {
-    font-size: 16px;
-    color: #888;
+    font-size: 14px;
+    text-align: center;
 }
 
-/* Responsive */
 @media (max-width: 768px) {
     .projector-container {
         width: 100%;
-        height: 100%;
         max-width: none;
         max-height: none;
+        height: 100vh;
         border-radius: 0;
     }
 
     .projector-header {
-        padding: 10px 16px;
+        padding: 12px 16px;
     }
 
     .projector-title {
-        max-width: 150px;
         font-size: 14px;
+        max-width: 200px;
     }
 
     .projector-controls {
@@ -1242,11 +1214,11 @@ form.input-container {
     }
 
     .progress-container {
-        min-width: 120px;
+        flex-wrap: wrap;
     }
 
     .time-display {
-        display: none;
+        font-size: 11px;
     }
 
     .volume-slider {
@@ -1254,17 +1226,16 @@ form.input-container {
     }
 }
 
-/* ===== Enhanced Chat Elements ===== */
-
 /* Thinking Indicator */
 .thinking-indicator {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
     padding: 12px 16px;
-    background: var(--surface, rgba(42, 42, 42, 0.8));
+    background: var(--surface, var(--card, #1a1a24));
     border-radius: 16px;
-    animation: fadeIn 0.3s ease;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
+    max-width: 120px;
 }
 
 .thinking-dots {
@@ -1277,25 +1248,28 @@ form.input-container {
     height: 8px;
     background: var(--accent, #3b82f6);
     border-radius: 50%;
-    animation: thinkingBounce 1.4s infinite ease-in-out both;
+    animation: bounce 1.4s infinite ease-in-out;
 }
 
 .thinking-dot:nth-child(1) {
-    animation-delay: -0.32s;
+    animation-delay: 0s;
 }
 
 .thinking-dot:nth-child(2) {
-    animation-delay: -0.16s;
+    animation-delay: 0.2s;
 }
 
-@keyframes thinkingBounce {
+.thinking-dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes bounce {
     0%,
     80%,
     100% {
         transform: scale(0.8);
         opacity: 0.5;
     }
-
     40% {
         transform: scale(1);
         opacity: 1;
@@ -1305,65 +1279,57 @@ form.input-container {
 /* Connection Status */
 .connection-status {
     position: fixed;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 8px 16px;
+    background: var(--warning, #f59e0b);
+    color: #000;
+    font-size: 12px;
+    font-weight: 500;
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 8px;
-    padding: 8px 16px;
-    background: var(--surface, rgba(26, 26, 36, 0.95));
-    backdrop-filter: blur(10px);
-    border: 1px solid var(--border, rgba(42, 42, 42, 0.5));
-    border-radius: 24px;
-    font-size: 13px;
-    color: var(--text, #ffffff);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    z-index: 1000;
-    transition: all 0.3s ease;
+    z-index: 10000;
+    transform: translateY(-100%);
+    transition: transform 0.3s ease;
 }
 
 .connection-status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
+    background: currentColor;
     animation: pulse 2s infinite;
 }
 
-.connection-status.connected .connection-status-dot {
-    background: #22c55e;
-    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+.connection-status.connected {
+    background: var(--success, #22c55e);
 }
 
-.connection-status.disconnected .connection-status-dot {
-    background: #ef4444;
-    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
+.connection-status.connected .connection-status-dot {
     animation: none;
 }
 
-.connection-status.connecting .connection-status-dot {
-    background: #f59e0b;
-    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
+.connection-status.disconnected {
+    background: var(--error, #ef4444);
+    color: white;
 }
 
-/* Message Animations */
-@keyframes messageIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px) scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+.connection-status.disconnected .connection-status-dot {
+    animation: none;
 }
 
+.connection-status.connecting {
+    background: var(--warning, #f59e0b);
+}
+
+/* Light theme message styles */
 .message {
-    animation: messageIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
 }
 
-/* Bot Message Glow Effect */
 .message.bot .message-content {
     position: relative;
 }
@@ -1371,72 +1337,70 @@ form.input-container {
 .message.bot .message-content::before {
     content: "";
     position: absolute;
-    inset: -2px;
-    background: var(--accent-glow, rgba(59, 130, 246, 0.1));
-    border-radius: 18px;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.3s;
+    left: -6px;
+    top: 0;
+    width: 12px;
+    height: 12px;
+    background: inherit;
+    border-left: 1px solid var(--border, var(--border-color, #2a2a2a));
+    border-bottom: 1px solid var(--border, var(--border-color, #2a2a2a));
+    transform: rotate(45deg);
+    border-radius: 0 0 0 4px;
 }
 
 .message.bot:hover .message-content::before {
-    opacity: 1;
+    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
 }
 
-/* Enhanced User Message */
 .message.user .message-content {
-    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2);
+    position: relative;
 }
 
 .message.user:hover .message-content {
-    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
-    transform: translateY(-1px);
-    transition: all 0.2s;
+    background: var(--accent-hover, #2563eb);
 }
 
-/* Smooth Scrolling */
+/* Messages container for light theme */
 #messages {
-    scroll-behavior: smooth;
+    background: transparent;
 }
 
 /* New Message Indicator */
 .new-message-indicator {
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 6px 12px;
+    top: 8px;
+    right: 8px;
+    padding: 4px 12px;
     background: var(--accent, #3b82f6);
     color: white;
-    border-radius: 12px;
     font-size: 12px;
     font-weight: 500;
-    white-space: nowrap;
-    animation: bounce 0.5s ease;
+    border-radius: 12px;
     cursor: pointer;
-    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: all 0.3s ease;
+    z-index: 100;
 }
 
-@keyframes bounce {
-    0%,
-    100% {
-        transform: translateX(-50%) translateY(0);
-    }
+.new-message-indicator.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
 
-    50% {
-        transform: translateX(-50%) translateY(-5px);
-    }
+.new-message-indicator:hover {
+    background: var(--accent-hover, #2563eb);
 }
 
 /* Typing Indicator */
 .typing-indicator {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 4px;
     padding: 8px 12px;
-    background: var(--surface, #2a2a2a);
+    background: var(--surface, var(--card, #1a1a24));
     border-radius: 12px;
-    margin-left: 12px;
+    border: 1px solid var(--border, var(--border-color, #2a2a2a));
 }
 
 .typing-indicator span {
@@ -1444,7 +1408,7 @@ form.input-container {
     height: 6px;
     background: var(--text-secondary, #888);
     border-radius: 50%;
-    animation: typing 1.4s infinite;
+    animation: typing 1.4s infinite ease-in-out;
 }
 
 .typing-indicator span:nth-child(2) {
@@ -1460,9 +1424,10 @@ form.input-container {
     60%,
     100% {
         transform: translateY(0);
+        opacity: 0.4;
     }
-
     30% {
-        transform: translateY(-8px);
+        transform: translateY(-4px);
+        opacity: 1;
     }
 }
diff --git a/ui/suite/css/desktop.css b/ui/suite/css/desktop.css
index 3b7a1f5..b5e9a37 100644
--- a/ui/suite/css/desktop.css
+++ b/ui/suite/css/desktop.css
@@ -283,3 +283,10 @@ body.window-maximized .window-element {
     background-color: var(--surface, #ffffff) !important;
     opacity: 1 !important;
 }
+
+/* Fix theme dropdown background - use surface color to adapt to theme */
+/* This overrides hardcoded black background from other CSS files */
+#themeDropdown,
+select.theme-dropdown {
+    background: var(--surface) !important;
+}
diff --git a/ui/suite/css/theme-sentient.css b/ui/suite/css/theme-sentient.css
index 1885a81..834ff81 100644
--- a/ui/suite/css/theme-sentient.css
+++ b/ui/suite/css/theme-sentient.css
@@ -876,7 +876,7 @@
 [data-theme="sentient"] input,
 [data-theme="sentient"] textarea,
 [data-theme="sentient"] select {
-    background: var(--input-bg);
+    background: var(--surface);
     border: 1px solid var(--input-border);
     color: var(--text);
     border-radius: 8px;
@@ -884,6 +884,12 @@
     transition: all 0.2s ease;
 }
 
+/* Ensure theme dropdown uses surface color in all themes */
+[data-theme="sentient"] select.theme-dropdown,
+[data-theme="sentient"] #themeDropdown {
+    background: var(--surface) !important;
+}
+
 [data-theme="sentient"] input:focus,
 [data-theme="sentient"] textarea:focus,
 [data-theme="sentient"] select:focus {
diff --git a/ui/suite/js/theme-manager.js b/ui/suite/js/theme-manager.js
index e51ed39..43ac643 100644
--- a/ui/suite/js/theme-manager.js
+++ b/ui/suite/js/theme-manager.js
@@ -263,6 +263,22 @@ const ThemeManager = (() => {
           primary: primary,
         });
         updateDropdown();
+
+        // Fix theme dropdown background to use surface color
+        const themeDropdown = document.getElementById("themeDropdown");
+        if (themeDropdown) {
+          const surfaceColor = getComputedStyle(document.documentElement)
+            .getPropertyValue("--surface")
+            .trim();
+          if (surfaceColor) {
+            themeDropdown.style.setProperty(
+              "background",
+              surfaceColor,
+              "important",
+            );
+          }
+        }
+
         subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name }));
       }, 50);
     };