Fix QuestionSplitView panel widths and message bubble styling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/questions/QuestionSplitView.tsx

@@ -141,8 +141,8 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
     <div className="flex h-[calc(100vh-56px)]">
       {/* Left panel */}
       <div
-        className="w-72 shrink-0 flex flex-col"
-        style={{ borderRight: "2px solid var(--border)" }}
+        className="flex flex-col"
+        style={{ width: "45%", borderRight: "2px solid var(--border)" }}
       >
         {/* Tabs */}
         <div className="flex p-2 gap-1" style={{ borderBottom: "1px solid var(--border)" }}>
@@ -208,7 +208,7 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
       </div>
 
       {/* Right panel */}
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="flex flex-col overflow-hidden" style={{ width: "55%" }}>
         {!detail ? (
           <div className="flex-1 flex items-center justify-center">
             <p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
@@ -260,8 +260,8 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
                     className="max-w-[85%] px-3 py-2 rounded-sm text-sm"
                     style={{
                       alignSelf: isMine ? "flex-end" : "flex-start",
-                      background: isMine ? "#E8F0D8" : "var(--muted)",
-                      border: isMine ? "2px solid var(--border)" : "none",
+                      background: isMine ? "var(--muted)" : "var(--background)",
+                      border: isMine ? "none" : "2px solid #E8F0D8",
                     }}
                   >
                     <p className="text-xs mb-1" style={{ color: "var(--muted-foreground)" }}>