v0.3.0

frontend/src/components/Message.css

@@ -14,6 +14,44 @@
   font-weight: 500;
 }
 
+.system-message {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-style: italic;
+  margin: 6px 0;
+  padding: 0 24px;
+}
+
+[data-theme="dark"] .system-message {
+  color: var(--text-secondary);
+}
+
+.msg-link {
+  color: var(--primary);
+  text-decoration: underline;
+  word-break: break-all;
+}
+.msg-link:hover {
+  opacity: 0.8;
+}
+
+/* Own bubble (primary background) — link must be white */
+.msg-bubble.out .msg-link {
+  color: white;
+  text-decoration: underline;
+  opacity: 0.9;
+}
+.msg-bubble.out .msg-link:hover {
+  opacity: 1;
+}
+
+/* Incoming bubble — link should be a dark/contrasting tone, not the same blue as bubble */
+.msg-bubble.in .msg-link {
+  color: var(--primary-dark, #1565c0);
+  text-decoration: underline;
+}
+
 .message-wrapper {
   display: flex;
   align-items: flex-end;
@@ -137,6 +175,13 @@
   position: relative;
 }
 
+@media (max-width: 767px) {
+  .msg-bubble {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+}
+
 .msg-bubble.out {
   background: var(--primary);
   color: white;
@@ -144,7 +189,7 @@
 }
 
 .msg-bubble.in {
-  background: white;
+  background: var(--bubble-in);
   color: var(--text-primary);
   border-bottom-left-radius: 4px;
   box-shadow: var(--shadow-sm);
@@ -264,3 +309,19 @@
 .out .link-preview { background: rgba(255,255,255,0.15); }
 .out .link-title { color: white; }
 .out .link-desc { color: rgba(255,255,255,0.8); }
+
+/* Emoji-only messages: no bubble background, large size */
+.msg-bubble.emoji-only {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 2px 4px;
+}
+.msg-bubble.emoji-only::after { display: none; }
+
+.msg-text.emoji-msg {
+  font-size: 48px;
+  line-height: 1.1;
+  margin: 0;
+  user-select: text;
+}