Improve quote styling

frontend/src/resources/css/_chat.scss

@@ -128,6 +128,23 @@
                 }
             }
 
+            .quote.contextual-content > .quote-inner {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                .reply-username {
+                    font-weight: 600;
+                    color: $color-dark-on-surface;
+                    font-size: 0.85rem;
+                }
+
+                .reply-text {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+
             .chat-messages {
                 flex: 1;
                 padding: 1rem;
@@ -192,30 +209,9 @@
                             white-space: pre-wrap;
                         }
 
-                        .quote.message-reply {
+                        .quote.reply-preview {
                             user-select: none;
                             margin-bottom: 10px;
-
-                            .quote-inner {
-                                display: flex;
-                                flex-direction: column;
-                                gap: 0.2rem;
-
-                                .reply-username {
-                                    font-weight: 600;
-                                    font-size: 0.8rem;
-                                    color: $color-dark-primary;
-                                }
-
-                                .reply-text {
-                                    font-size: 0.85rem;
-                                    color: $color-dark-on-surface-variant;
-                                    overflow: hidden;
-                                    text-overflow: ellipsis;
-                                    white-space: nowrap;
-                                    max-width: 200px;
-                                }
-                            }
                         }
 
                         .message-time {
@@ -289,6 +285,22 @@
                     border-radius: 30px;
                     flex-direction: column;
 
+                    .contextual-preview {
+                        padding: 12px 16px 0 16px;
+                        display: flex;
+                        align-items: flex-start;
+                        gap: 16px;
+        
+                        mdui-icon {
+                            align-self: center;
+                            box-sizing: content-box;
+                        }
+        
+                        .reply-cancel {
+                            margin-left: auto;
+                        }
+                    }
+
                     .chat-input {
                         flex: 1;
                         display: flex;

frontend/src/resources/css/common/_components.scss

@@ -131,6 +131,10 @@ button, input {
     border-radius: 8px;
     overflow: hidden;
 
+    color: $color-dark-on-surface-variant;
+    font-size: 0.9rem;
+    line-height: 1.4;
+
     &.bg-surfaceContainer {
         background-color: $color-dark-secondary-container;
 

frontend/src/ui/components/chat/ChatInputWrapper.tsx

@@ -29,8 +29,9 @@ export function ChatInputWrapper({ onSendMessage, replyTo, replyToVisible, onCle
             <form className="input-group" id="message-form" onSubmit={handleSubmit}>
                 <AnimatedHeight visible={replyToVisible} onFinish={onCloseReply}>
                     {replyTo && (
-                        <div className="reply-preview">
+                        <div className="reply-preview contextual-preview">
-                            <Quote className="reply-content" background="surfaceContainer">
+                            <mdui-icon name="reply" />
+                            <Quote className="reply-content contextual-content" background="surfaceContainer">
                                 <span className="reply-username">{replyTo!.username}</span>
                                 <span className="reply-text">{replyTo!.content}</span>
                             </Quote>

frontend/src/ui/components/chat/Message.tsx

@@ -54,7 +54,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
 
                 {/* Add reply preview if this is a reply */}
                 {message.reply_to && (
-                    <Quote className="message-reply">
+                    <Quote className="reply-preview contextual-content">
                         <span className="reply-username">{message.reply_to.username}</span>
                         <span className="reply-text">{message.reply_to.content}</span>
                     </Quote>