Adjusted the bold button, added italics, and fixed the broken emoji box.

apps/web/src/lib/chatMessageFormat.ts

@@ -3,6 +3,7 @@ export type ChatTextSeg = {
   mention?: boolean;
   hit?: boolean;
   bold?: boolean;
+  italic?: boolean;
   link?: string;
   /** deep CRM link */
   crm?: { kind: 'person' | 'deal' | 'ticket'; id: string };
@@ -13,6 +14,7 @@ const URL_RE =
   /https?:\/\/[^\s<>"'`]+|(?:www\.)[^\s<>"'`]+/gi;
 const CRM_RE = /mento:\/\/(person|deal|ticket)\/([A-Za-z0-9_-]+)/gi;
 const BOLD_RE = /\*([^*\n]+)\*/g;
+const ITALIC_RE = /_([^_\n]+)_/g;
 const LIST_LINE_RE = /^\s*[-•]\s+/;
 
 function escapeRegExp(s: string) {
@@ -85,6 +87,15 @@ function parseInline(
     });
   }
 
+  for (const m of raw.matchAll(ITALIC_RE)) {
+    const start = m.index ?? 0;
+    marks.push({
+      start,
+      end: start + m[0].length,
+      seg: { text: m[1], italic: true },
+    });
+  }
+
   marks.sort((a, b) => a.start - b.start || b.end - a.end);
   const chosen: Mark[] = [];
   let cursor = 0;
@@ -110,7 +121,7 @@ function applyHighlight(parts: ChatTextSeg[], q: string): ChatTextSeg[] {
   if (!qLower) return parts;
   const out: ChatTextSeg[] = [];
   for (const part of parts) {
-    if (part.mention || part.link || part.crm || part.bold) {
+    if (part.mention || part.link || part.crm || part.bold || part.italic) {
       out.push(part);
       continue;
     }
@@ -134,7 +145,7 @@ function applyHighlight(parts: ChatTextSeg[], q: string): ChatTextSeg[] {
 }
 
 /**
- * فرمت سبک شبیه تلگرام: *پررنگ*، لیست با - ، لینک http، mento://person|deal|ticket/id
+ * فرمت سبک شبیه تلگرام: *پررنگ*، _ایتالیک_، لیست با - ، لینک http، mento://…
  */
 export function parseChatMessageText(
   content: string,

apps/web/src/views/ConversationsView.vue

@@ -712,6 +712,10 @@ function formatDraftBold() {
   wrapDraftSelection('*', '*');
 }
 
+function formatDraftItalic() {
+  wrapDraftSelection('_', '_');
+}
+
 function formatDraftList() {
   const el = draftInputEl.value;
   const value = draft.value;
@@ -2141,10 +2145,12 @@ onUnmounted(() => {
                       :class="{ crm: Boolean(seg.crm) }"
                       @click.stop="openCrmSeg(seg)"
                     >
-                      <strong v-if="seg.bold">{{ seg.text }}</strong>
+                      <strong v-if="seg.bold"><em v-if="seg.italic">{{ seg.text }}</em><template v-else>{{ seg.text }}</template></strong>
+                      <em v-else-if="seg.italic">{{ seg.text }}</em>
                       <template v-else>{{ seg.text }}</template>
                     </button>
                     <strong v-else-if="seg.bold">{{ seg.text }}</strong>
+                    <em v-else-if="seg.italic">{{ seg.text }}</em>
                     <template v-else>{{ seg.text }}</template>
                   </template>
                 </p>
@@ -2246,8 +2252,11 @@ onUnmounted(() => {
               <button type="button" class="rec-stop" @click="toggleVoiceRecord">توقف</button>
             </div>
             <div class="fmt-bar">
-              <button type="button" class="fmt-btn" title="پررنگ (*متن*)" @click="formatDraftBold">
-                <strong>ب</strong>
+              <button type="button" class="fmt-btn fmt-b" title="پررنگ (*متن*)" @click="formatDraftBold">
+                B
+              </button>
+              <button type="button" class="fmt-btn fmt-i" title="ایتالیک (_متن_)" @click="formatDraftItalic">
+                I
               </button>
               <button type="button" class="fmt-btn" title="لیست" @click="formatDraftList">
                 <UiIcon name="list" :size="14" />
@@ -3066,21 +3075,37 @@ onUnmounted(() => {
 }
 .react-quick {
   display: flex;
-  gap: 0.25rem;
-  padding: 0.35rem 0.5rem 0.15rem;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.15rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.25rem 0.2rem 0.35rem;
   border-bottom: 1px solid var(--line);
-  margin-bottom: 0.15rem;
+  margin: 0 0 0.15rem;
+  overflow: hidden;
 }
 .react-quick-btn {
-  border: none;
-  background: transparent;
-  font-size: 1.15rem;
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 2.4rem;
+  height: 2.2rem;
+  border: none !important;
+  background: transparent !important;
+  font-size: 1.05rem;
+  line-height: 1;
   cursor: pointer;
-  padding: 0.2rem;
+  padding: 0 !important;
   border-radius: 8px;
+  display: grid !important;
+  place-items: center;
+  color: inherit !important;
+  gap: 0 !important;
 }
-.react-quick-btn:hover {
-  background: rgba(13, 148, 136, 0.12);
+.react-quick-btn:hover,
+.react-quick-btn:active {
+  background: rgba(13, 148, 136, 0.12) !important;
 }
 .fmt-bar {
   display: flex;
@@ -3100,6 +3125,20 @@ onUnmounted(() => {
   font: inherit;
   font-size: 0.8rem;
 }
+.fmt-btn.fmt-b {
+  font-weight: 800;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 0.95rem;
+}
+.fmt-btn.fmt-i {
+  font-style: italic;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+.msg-text em {
+  font-style: italic;
+}
 .crm-kind-tabs {
   display: flex;
   gap: 0.35rem;
@@ -3843,6 +3882,7 @@ onUnmounted(() => {
   z-index: 1210;
   min-width: 11rem;
   max-width: min(18rem, calc(100vw - 1.5rem));
+  width: max-content;
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
@@ -3851,6 +3891,8 @@ onUnmounted(() => {
   background: #fff;
   border: 1px solid #e2e8f0;
   box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
+  overflow: hidden;
+  box-sizing: border-box;
 }
 .msg-menu.sheet {
   left: 50%;
@@ -3863,7 +3905,7 @@ onUnmounted(() => {
   padding: 0.45rem;
   border-radius: 18px;
 }
-.msg-menu button {
+.msg-menu > button {
   display: flex;
   align-items: center;
   gap: 0.45rem;
@@ -3876,11 +3918,11 @@ onUnmounted(() => {
   color: #0f172a;
   text-align: right;
 }
-.msg-menu button:hover,
-.msg-menu button:active {
+.msg-menu > button:hover,
+.msg-menu > button:active {
   background: #f8fafc;
 }
-.msg-menu button.danger {
+.msg-menu > button.danger {
   color: #dc2626;
 }
 .reply-quote {