Refine Desktop UI Styling

packages/desktop/src/renderer/App.tsx

@@ -319,7 +319,7 @@ export default function App() {
   return (
     <div className="flex h-screen flex-col bg-xibe-bg text-xibe-text font-sans overflow-hidden">
       {/* Header */}
-      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10 border-b border-xibe-border-subtle">
+      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10">
         <div className="flex items-center gap-3">
           <button
             onClick={() => setLeftPanelOpen((v) => !v)}
@@ -370,7 +370,7 @@ export default function App() {
       <div className="flex flex-1 min-h-0 overflow-hidden relative">
         {/* Left panel: Chat history + settings shortcut */}
         <aside
-          className="shrink-0 bg-xibe-bg flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border-subtle"
+          className="shrink-0 bg-xibe-surface flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out"
           style={{ width: leftPanelOpen ? 240 : 0 }}
         >
             <div className="flex-1 min-h-0 overflow-y-auto p-3">

packages/desktop/src/renderer/components/ChatHistory.tsx

@@ -70,7 +70,7 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
       {/* New chat button */}
       <button
         onClick={onNewChat}
-        className="flex items-center gap-2 rounded-lg bg-xibe-surface px-3 py-2.5 text-xs font-medium text-xibe-text hover:bg-xibe-surface-hover transition-colors mb-4"
+        className="flex items-center gap-2 rounded-lg bg-xibe-surface-raised px-3 py-2.5 text-xs font-medium text-xibe-text hover:bg-xibe-border transition-colors mb-4"
       >
         <Plus className="h-4 w-4 text-xibe-text" />
         New Chat

packages/desktop/src/renderer/components/ChatPanel.tsx

@@ -153,7 +153,7 @@ export default function ChatPanel({
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        className="group flex items-center gap-3 rounded-xl border border-xibe-border-subtle bg-transparent px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface/50 hover:text-xibe-text transition-colors"
+                        className="group flex items-center gap-3 rounded-xl bg-xibe-surface px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors"
                       >
                         <div className="rounded-lg p-1.5 text-xibe-text-dim group-hover:text-xibe-text transition-colors">
                           {q.icon}
@@ -203,7 +203,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl border border-xibe-border-subtle bg-xibe-bg focus-within:border-xibe-border-focus focus-within:ring-1 focus-within:ring-xibe-border-focus transition-all duration-200">
+          <div className="relative flex items-end rounded-3xl border border-xibe-border-subtle bg-xibe-surface focus-within:border-xibe-border-focus focus-within:ring-1 focus-within:ring-xibe-border-focus transition-all duration-200 shadow-sm">
             <textarea
               ref={inputRef}
               value={input}

packages/desktop/src/renderer/components/MessageBubble.tsx

@@ -15,7 +15,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
   if (isUser) {
     return (
       <div className="flex justify-end animate-fade-in w-full group">
-        <div className="max-w-[85%] sm:max-w-[75%] rounded-2xl bg-xibe-surface px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border border-xibe-border-subtle">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-3xl bg-xibe-surface-raised px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -26,11 +26,11 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
     <div className="animate-fade-in flex flex-col w-full group">
       <div className="prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
         prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5
-        prose-pre:my-3 prose-pre:bg-transparent prose-pre:p-0
+        prose-pre:my-3 prose-pre:bg-xibe-surface-raised prose-pre:p-4 prose-pre:rounded-xl
         prose-blockquote:my-4 prose-blockquote:border-l-2 prose-blockquote:border-xibe-border prose-blockquote:pl-4 prose-blockquote:text-xibe-text-dim
         prose-a:text-xibe-text-secondary hover:prose-a:text-xibe-text prose-a:underline prose-a:underline-offset-2
         prose-strong:text-xibe-text prose-strong:font-semibold
-        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-medium prose-code:before:content-none prose-code:after:content-none
+        prose-code:text-xibe-text prose-code:bg-xibe-surface-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-mono prose-code:before:content-none prose-code:after:content-none
         prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h1:font-semibold prose-h2:font-semibold prose-h3:font-semibold">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}

packages/desktop/src/renderer/styles/global.css

@@ -1,13 +1,13 @@
 @import "tailwindcss";
 
 @theme {
-  --color-xibe-bg: #09090b;
-  --color-xibe-surface: #18181b;
-  --color-xibe-surface-raised: #27272a;
-  --color-xibe-surface-hover: #27272a;
-  --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #27272a;
-  --color-xibe-border-focus: #52525b;
+  --color-xibe-bg: #18181b;
+  --color-xibe-surface: #27272a;
+  --color-xibe-surface-raised: #3f3f46;
+  --color-xibe-surface-hover: #3f3f46;
+  --color-xibe-border: #3f3f46;
+  --color-xibe-border-subtle: #3f3f46;
+  --color-xibe-border-focus: #a1a1aa;
   --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;
   --color-xibe-text-secondary: #a1a1aa;