fix: DM reactions + eradicate broken CSS variable opacity modifiers

Server-side: handleReactionAdd/Remove now check dm_messages table when
message isn't found in server messages, enabling DM emoji reactions
via the same unified client event path.

Client-side: replaced all remaining broken opacity modifiers on CSS
variables (border-border-soft/50, bg-accent-rose/10, bg-surface-*/N,
etc.) with explicit rgba values. Tailwind can't decompose var() for
opacity, causing fallback to currentColor. Fixes 16 files across
error boxes, table borders, surface tints, and input separators.

packages/web/src/components/chat/FriendsPage.tsx

@@ -161,7 +161,7 @@ export function FriendsPage() {
               </button>
             </form>
             {addStatus && (
-              <div className={`text-sm p-3 rounded-lg border ${addStatus.type === 'success' ? 'text-txt-positive border-status-online/20 bg-status-online/5' : 'text-txt-danger border-accent-rose/20 bg-accent-rose/5'}`}>
+              <div className={`text-sm p-3 rounded-lg border ${addStatus.type === 'success' ? 'text-txt-positive border-[rgba(134,239,172,0.20)] bg-[rgba(134,239,172,0.05)]' : 'text-txt-danger border-[rgba(253,164,175,0.20)] bg-[rgba(253,164,175,0.05)]'}`}>
                 {addStatus.message}
               </div>
             )}

packages/web/src/components/chat/MarkdownRenderer.tsx

@@ -203,7 +203,7 @@ function buildComponents(): Components {
     ),
     thead: ({ children }) => <thead className="border-b border-border-soft">{children}</thead>,
     tbody: ({ children }) => <tbody>{children}</tbody>,
-    tr: ({ children }) => <tr className="border-b border-border-soft/50">{children}</tr>,
+    tr: ({ children }) => <tr className="border-b border-white/[0.06]">{children}</tr>,
     th: ({ children }) => <th className="px-3 py-1.5 text-left text-txt-primary font-semibold">{children}</th>,
     td: ({ children }) => <td className="px-3 py-1.5">{children}</td>,
   };

packages/web/src/components/chat/Message.tsx

@@ -286,7 +286,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
                       key={att.id}
                       href={`/api/uploads/${att.filename}`}
                       download={att.originalName}
-                      className="flex items-center gap-3 p-4 bg-surface-channel/50 rounded-lg border border-border-hard hover:bg-interactive-hover transition-all max-w-[400px] mt-1 group/att"
+                      className="flex items-center gap-3 p-4 bg-[rgba(26,26,35,0.50)] rounded-lg border border-border-hard hover:bg-interactive-hover transition-all max-w-[400px] mt-1 group/att"
                     >
                       <div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors">
                         <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">

packages/web/src/components/chat/MessageInput.tsx

@@ -230,7 +230,7 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
   return (
     <div data-pip-obstacle="bottom" className="px-3 pb-3 flex-shrink-0 md:absolute md:bottom-3 md:left-3 md:right-3 md:z-[110] md:px-0 md:pb-0 md:glass-bubble md:rounded-[14px]">
       {replyTo && (
-        <div className="bg-interactive-hover rounded-t-lg px-4 py-2 flex items-center justify-between border-b border-border-hard/50">
+        <div className="bg-interactive-hover rounded-t-lg px-4 py-2 flex items-center justify-between border-b border-white/[0.06]">
           <div className="flex items-center gap-1 text-[14px] text-txt-message truncate">
             <span className="opacity-60">Replying to</span>
             <span className="font-bold">{replyTo.user.displayName ?? replyTo.user.username}</span>
@@ -261,7 +261,7 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) {
 
         {/* File previews */}
         {files.length > 0 && (
-          <div className="p-4 flex flex-wrap gap-4 bg-surface-channel/30">
+          <div className="p-4 flex flex-wrap gap-4 bg-[rgba(26,26,35,0.30)]">
             {files.map((file, i) => (
               <div key={i} className="relative group bg-surface-channel rounded-lg p-2 max-w-[200px] shadow-elevation-low border border-border-hard">
                 {file.type.startsWith('image/') ? (

packages/web/src/components/chat/TypingIndicator.tsx

@@ -32,7 +32,7 @@ export function TypingIndicator({ channelId }: TypingIndicatorProps) {
   return (
     <div className="h-[24px] px-4 flex items-center text-[12px] text-txt-primary font-medium select-none pointer-events-none">
       <div className="flex items-center gap-2">
-        <div className="flex gap-[2px] bg-surface-elevated/20 rounded-full px-2 py-1">
+        <div className="flex gap-[2px] bg-[rgba(37,37,48,0.20)] rounded-full px-2 py-1">
           <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '0ms', animationDuration: '0.8s' }} />
           <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '150ms', animationDuration: '0.8s' }} />
           <div className="w-[5px] h-[5px] bg-txt-message rounded-full animate-bounce" style={{ animationDelay: '300ms', animationDuration: '0.8s' }} />