diff --git a/apps/x/apps/renderer/src/extensions/calendar-block.tsx b/apps/x/apps/renderer/src/extensions/calendar-block.tsx
index f72dc5d4..9f0eec02 100644
--- a/apps/x/apps/renderer/src/extensions/calendar-block.tsx
+++ b/apps/x/apps/renderer/src/extensions/calendar-block.tsx
@@ -9,12 +9,15 @@ function formatTime(dateStr: string): string {
   return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
 }
 
-function getDateParts(dateStr: string): { day: number; month: string; weekday: string } {
+function getDateParts(dateStr: string): { day: number; month: string; weekday: string; isToday: boolean } {
   const d = new Date(dateStr)
+  const now = new Date()
+  const isToday = d.getDate() === now.getDate() && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()
   return {
     day: d.getDate(),
-    month: d.toLocaleDateString([], { month: 'long' }),
-    weekday: d.toLocaleDateString([], { weekday: 'short' }),
+    month: d.toLocaleDateString([], { month: 'short' }).toUpperCase(),
+    weekday: d.toLocaleDateString([], { weekday: 'short' }).toUpperCase(),
+    isToday,
   }
 }
 
@@ -62,7 +65,8 @@ interface ResolvedEvent {
   conferenceLink?: string
 }
 
-const EVENT_BAR_COLOR = '#7ec8c8'
+const GCAL_EVENT_COLOR = '#039be5'
+const GCAL_TODAY_COLOR = '#1a73e8'
 
 function JoinMeetingSplitButton({ onJoinAndNotes, onNotesOnly }: {
   onJoinAndNotes: () => void
@@ -273,11 +277,8 @@ function CalendarBlockView({ node, deleteNode }: { node: { attrs: Record<string,
                     <div className="calendar-block-date-left">
                       {parts ? (
                         <>
-                          <span className="calendar-block-day">{parts.day}</span>
-                          <div className="calendar-block-month-weekday">
-                            <span className="calendar-block-month">{parts.month}</span>
-                            <span className="calendar-block-weekday">{parts.weekday}</span>
-                          </div>
+                          <span className="calendar-block-weekday" style={parts.isToday ? { color: GCAL_TODAY_COLOR } : undefined}>{parts.weekday}</span>
+                          <span className={`calendar-block-day${parts.isToday ? ' calendar-block-day-today' : ''}`}>{parts.day}</span>
                         </>
                       ) : (
                         <span className="calendar-block-day">?</span>
@@ -288,16 +289,13 @@ function CalendarBlockView({ node, deleteNode }: { node: { attrs: Record<string,
                         <div
                           key={event._idx}
                           className={`calendar-block-event ${event.htmlLink ? 'calendar-block-event-clickable' : ''}`}
+                          style={{ backgroundColor: GCAL_EVENT_COLOR }}
                           onMouseDown={(e) => e.stopPropagation()}
                           onClick={(e) => { e.stopPropagation(); handleEventClick(event) }}
                         >
-                          <div
-                            className="calendar-block-event-bar"
-                            style={{ backgroundColor: EVENT_BAR_COLOR }}
-                          />
                           <div className="calendar-block-event-content">
                             <div className="calendar-block-event-title">
-                              {event.summary || 'Untitled event'}
+                              {event.summary || '(No title)'}
                             </div>
                             <div className="calendar-block-event-time">
                               {getTimeRange(event)}
diff --git a/apps/x/apps/renderer/src/extensions/email-block.tsx b/apps/x/apps/renderer/src/extensions/email-block.tsx
index 9be8c72c..3cd4d8fb 100644
--- a/apps/x/apps/renderer/src/extensions/email-block.tsx
+++ b/apps/x/apps/renderer/src/extensions/email-block.tsx
@@ -17,9 +17,6 @@ function formatEmailDate(dateStr: string): string {
   }
 }
 
-function getInitials(name: string): string {
-  return name.split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase()
-}
 
 declare global {
   interface Window {
@@ -152,29 +149,31 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
     ? `https://mail.google.com/mail/u/0/#all/${config.threadId}`
     : null
 
+  const senderName = config.from || 'Unknown'
+
   // --- Render: Draft mode (draft_response present) ---
   if (hasDraft) {
     return (
       <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
-        <div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="email-block-card email-block-card-gmail" onMouseDown={(e) => e.stopPropagation()}>
           <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
             <X size={14} />
           </button>
-          {/* Draft header */}
-          {config.to && (
-            <div className="email-draft-block-header">
+          {/* Draft header – Gmail compose style */}
+          <div className="email-draft-block-header">
+            {config.to && (
               <div className="email-draft-block-field">
                 <span className="email-draft-block-label">To</span>
                 <span className="email-draft-block-value">{config.to}</span>
               </div>
-              {config.subject && (
-                <div className="email-draft-block-field">
-                  <span className="email-draft-block-label">Subject</span>
-                  <span className="email-draft-block-value">{config.subject}</span>
-                </div>
-              )}
-            </div>
-          )}
+            )}
+            {config.subject && (
+              <div className="email-draft-block-field">
+                <span className="email-draft-block-label">Subject</span>
+                <span className="email-draft-block-value">{config.subject}</span>
+              </div>
+            )}
+          </div>
           {/* Editable draft body */}
           <textarea
             ref={bodyRef}
@@ -185,7 +184,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
             placeholder="Write your reply..."
             rows={3}
           />
-          {/* Action buttons */}
+          {/* Action buttons – Gmail style */}
           <div className="email-draft-block-actions">
             {(hasPastSummary || config.latest_email) && (
               <button
@@ -198,7 +197,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
               </button>
             )}
             <button
-              className="email-block-gmail-btn"
+              className="email-block-gmail-btn email-block-gmail-btn-primary"
               onClick={() => {
                 void navigator.clipboard.writeText(draftBody)
                 setCopied(true)
@@ -210,7 +209,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
             </button>
             {gmailUrl && (
               <button
-                className="email-block-gmail-btn"
+                className="email-block-gmail-btn email-block-gmail-btn-primary"
                 onClick={() => {
                   void navigator.clipboard.writeText(draftBody)
                   setCopied(true)
@@ -229,10 +228,12 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
               <div className="email-block-context-section">
                 <div className="email-block-message">
                   <div className="email-block-message-header">
-                    {config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
                     <div className="email-block-sender-info">
-                      {config.from && <div className="email-block-sender-name">{config.from}</div>}
-                      {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
+                      <div className="email-block-sender-row">
+                        {config.from && <div className="email-block-sender-name">{config.from}</div>}
+                        {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
+                      </div>
+                      <div className="email-block-sender-to">to me</div>
                     </div>
                   </div>
                   <div className="email-block-message-body">{config.latest_email}</div>
@@ -254,7 +255,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
   // --- Render: Read mode (no draft_response) ---
   return (
     <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
-      <div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}>
+      <div className="email-block-card email-block-card-gmail" onMouseDown={(e) => e.stopPropagation()}>
         <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
           <X size={14} />
         </button>
@@ -262,15 +263,17 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
         {/* Latest email message */}
         <div className="email-block-message">
           <div className="email-block-message-header">
-            {config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
             <div className="email-block-sender-info">
-              {config.from && <div className="email-block-sender-name">{config.from}</div>}
-              {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
+              <div className="email-block-sender-row">
+                <div className="email-block-sender-name">{senderName}</div>
+                {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
+              </div>
+              <div className="email-block-sender-to">to me</div>
             </div>
           </div>
           <div className="email-block-message-body">{config.latest_email}</div>
         </div>
-        {/* Action buttons */}
+        {/* Action buttons – Gmail style */}
         <div className="email-draft-block-actions">
           {hasPastSummary && (
             <button
@@ -284,7 +287,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
           )}
           {responseMode === 'inline' && (
             <button
-              className="email-block-gmail-btn email-block-generate-btn"
+              className="email-block-gmail-btn email-block-gmail-btn-primary"
               onClick={generateResponse}
               disabled={generating}
             >
@@ -294,7 +297,7 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
           )}
           {responseMode === 'assistant' && (
             <button
-              className="email-block-gmail-btn email-block-generate-btn"
+              className="email-block-gmail-btn email-block-gmail-btn-primary"
               onClick={draftWithAssistant}
             >
               <MessageSquare size={13} />
diff --git a/apps/x/apps/renderer/src/styles/editor.css b/apps/x/apps/renderer/src/styles/editor.css
index efa481c1..9cd2ed8b 100644
--- a/apps/x/apps/renderer/src/styles/editor.css
+++ b/apps/x/apps/renderer/src/styles/editor.css
@@ -859,12 +859,13 @@
   font-size: 13px;
 }
 
-/* Calendar block */
+/* Calendar block – Google Calendar style */
 .tiptap-editor .ProseMirror .calendar-block-title {
   font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: var(--foreground);
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: color-mix(in srgb, var(--foreground) 70%, transparent);
+  letter-spacing: 0.01em;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-loading,
@@ -873,7 +874,7 @@
   align-items: center;
   justify-content: center;
   height: 60px;
-  font-size: 13px;
+  font-size: 14px;
   color: color-mix(in srgb, var(--foreground) 45%, transparent);
 }
 
@@ -897,66 +898,69 @@
 
 .tiptap-editor .ProseMirror .calendar-block-separator {
   border: none;
-  border-top: 1px dashed color-mix(in srgb, var(--foreground) 20%, transparent);
-  margin: 4px 0;
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  margin: 0;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-date-row {
   display: flex;
   align-items: flex-start;
-  gap: 0;
+  gap: 12px;
   padding: 12px 0;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-date-left {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  width: 140px;
-  flex-shrink: 0;
-  padding-top: 4px;
-}
-
-.tiptap-editor .ProseMirror .calendar-block-day {
-  font-size: 28px;
-  font-weight: 300;
-  line-height: 1;
-  color: color-mix(in srgb, var(--foreground) 70%, transparent);
-}
-
-.tiptap-editor .ProseMirror .calendar-block-month-weekday {
   display: flex;
   flex-direction: column;
-  gap: 0;
-}
-
-.tiptap-editor .ProseMirror .calendar-block-month {
-  font-size: 12px;
-  color: color-mix(in srgb, var(--foreground) 50%, transparent);
-  line-height: 1.3;
+  align-items: center;
+  width: 56px;
+  flex-shrink: 0;
+  padding-top: 2px;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-weekday {
-  font-size: 12px;
-  color: color-mix(in srgb, var(--foreground) 40%, transparent);
-  line-height: 1.3;
+  font-size: 11px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+  line-height: 1;
+  letter-spacing: 0.05em;
+  margin-bottom: 2px;
+}
+
+.tiptap-editor .ProseMirror .calendar-block-day {
+  font-size: 26px;
+  font-weight: 400;
+  line-height: 1;
+  color: color-mix(in srgb, var(--foreground) 65%, transparent);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.tiptap-editor .ProseMirror .calendar-block-day-today {
+  background-color: #1a73e8;
+  color: #fff !important;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-events {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 6px;
   flex: 1;
   min-width: 0;
+  padding-top: 4px;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-event {
   display: flex;
   align-items: stretch;
-  gap: 10px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: background-color 0.12s ease;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: filter 0.12s ease;
+  min-height: 0;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-event-clickable {
@@ -964,14 +968,7 @@
 }
 
 .tiptap-editor .ProseMirror .calendar-block-event-clickable:hover {
-  background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
-}
-
-.tiptap-editor .ProseMirror .calendar-block-event-bar {
-  width: 3px;
-  border-radius: 2px;
-  flex-shrink: 0;
-  min-height: 32px;
+  filter: brightness(0.9);
 }
 
 .tiptap-editor .ProseMirror .calendar-block-event-content {
@@ -984,20 +981,22 @@
 .tiptap-editor .ProseMirror .calendar-block-event-title {
   font-size: 14px;
   font-weight: 500;
-  color: var(--foreground);
+  color: #fff;
+  line-height: 1.3;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-event-time {
   font-size: 12px;
-  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.3;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-btn {
   position: relative;
   display: inline-flex;
   align-items: stretch;
-  margin-top: 4px;
-  border-radius: 5px;
+  margin-top: 6px;
+  border-radius: 4px;
   overflow: visible;
 }
 
@@ -1008,17 +1007,17 @@
   padding: 4px 8px 4px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: #7ec8c8;
-  background: color-mix(in srgb, #7ec8c8 12%, transparent);
-  border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
   border-right: none;
-  border-radius: 5px 0 0 5px;
+  border-radius: 4px 0 0 4px;
   cursor: pointer;
   transition: background-color 0.12s ease;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-main:hover {
-  background: color-mix(in srgb, #7ec8c8 22%, transparent);
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-chevron-wrap {
@@ -1031,21 +1030,21 @@
   align-items: center;
   justify-content: center;
   padding: 4px 6px;
-  color: #7ec8c8;
-  background: color-mix(in srgb, #7ec8c8 12%, transparent);
-  border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
-  border-left: 1px solid color-mix(in srgb, #7ec8c8 20%, transparent);
-  border-radius: 0 5px 5px 0;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 0 4px 4px 0;
   cursor: pointer;
   transition: background-color 0.12s ease;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-chevron:hover {
-  background: color-mix(in srgb, #7ec8c8 22%, transparent);
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-chevron-open {
-  border-radius: 0 5px 0 0;
+  border-radius: 0 4px 0 0;
   border-bottom-color: transparent;
 }
 
@@ -1054,10 +1053,11 @@
   top: calc(100% - 1px);
   right: 0;
   z-index: 50;
-  background: color-mix(in srgb, #7ec8c8 12%, transparent);
-  border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
-  border-top: none;
-  border-radius: 0 0 5px 5px;
+  background: #039be5;
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-option {
@@ -1068,7 +1068,7 @@
   padding: 5px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: #7ec8c8;
+  color: #fff;
   background: none;
   border: none;
   cursor: pointer;
@@ -1076,37 +1076,48 @@
 }
 
 .tiptap-editor .ProseMirror .calendar-block-split-option:hover {
-  background: color-mix(in srgb, #7ec8c8 22%, transparent);
+  background: rgba(255, 255, 255, 0.15);
 }
 
 .tiptap-editor .ProseMirror .calendar-block-join-btn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  margin-top: 4px;
+  margin-top: 6px;
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 500;
-  color: #7ec8c8;
-  background: color-mix(in srgb, #7ec8c8 12%, transparent);
-  border: 1px solid color-mix(in srgb, #7ec8c8 25%, transparent);
-  border-radius: 5px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 4px;
   cursor: pointer;
-  transition: background-color 0.12s ease, border-color 0.12s ease;
+  transition: background-color 0.12s ease;
   width: fit-content;
 }
 
 .tiptap-editor .ProseMirror .calendar-block-join-btn:hover {
-  background: color-mix(in srgb, #7ec8c8 22%, transparent);
-  border-color: color-mix(in srgb, #7ec8c8 40%, transparent);
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Email block – Gmail style */
+.tiptap-editor .ProseMirror .email-block-card-gmail {
+  background-color: var(--background, #fff);
+  border: 1px solid #dadce0;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+}
+
+.tiptap-editor .ProseMirror .email-block-card-gmail:hover {
+  background-color: var(--background, #fff);
 }
 
-/* Email block */
 .tiptap-editor .ProseMirror .email-block-subject {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--foreground);
-  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 400;
+  color: #202124;
+  margin-bottom: 16px;
+  line-height: 1.4;
 }
 
 .tiptap-editor .ProseMirror .email-block-loading,
@@ -1116,8 +1127,8 @@
   gap: 6px;
   height: 50px;
   justify-content: center;
-  font-size: 13px;
-  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+  font-size: 14px;
+  color: #5f6368;
 }
 
 .tiptap-editor .ProseMirror .email-block-error,
@@ -1125,13 +1136,13 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  color: color-mix(in srgb, var(--foreground) 55%, transparent);
-  font-size: 13px;
+  color: #5f6368;
+  font-size: 14px;
 }
 
 .tiptap-editor .ProseMirror .email-block-error-msg {
   font-size: 13px;
-  color: #ef4444;
+  color: #d93025;
   padding: 8px 0;
 }
 
@@ -1149,17 +1160,17 @@
   margin-bottom: 6px;
   font-size: 12px;
   font-weight: 500;
-  color: color-mix(in srgb, var(--foreground) 50%, transparent);
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
-  border-radius: 12px;
+  color: #5f6368;
+  background: transparent;
+  border: 1px solid #dadce0;
+  border-radius: 16px;
   cursor: pointer;
   transition: background-color 0.12s ease;
   width: fit-content;
 }
 
 .tiptap-editor .ProseMirror .email-block-thread-toggle:hover {
-  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  background: #f1f3f4;
 }
 
 .tiptap-editor .ProseMirror .email-block-toggle-chevron {
@@ -1171,66 +1182,84 @@
 }
 
 .tiptap-editor .ProseMirror .email-block-message {
-  padding: 8px 0;
+  padding: 0 0 8px;
 }
 
 .tiptap-editor .ProseMirror .email-block-message + .email-block-message {
-  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  border-top: 1px solid #e8eaed;
+  padding-top: 16px;
 }
 
 .tiptap-editor .ProseMirror .email-block-message-header {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
 .tiptap-editor .ProseMirror .email-block-avatar {
-  width: 28px;
-  height: 28px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  background: color-mix(in srgb, var(--primary) 20%, transparent);
-  color: var(--primary);
+  background: #1a73e8;
+  color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 500;
   flex-shrink: 0;
+  letter-spacing: 0.02em;
 }
 
 .tiptap-editor .ProseMirror .email-block-sender-info {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  flex: 1;
+  gap: 1px;
+}
+
+.tiptap-editor .ProseMirror .email-block-sender-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
 }
 
 .tiptap-editor .ProseMirror .email-block-sender-name {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
-  color: var(--foreground);
+  color: #202124;
 }
 
 .tiptap-editor .ProseMirror .email-block-sender-date {
-  font-size: 11px;
-  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+  font-size: 12px;
+  color: #5f6368;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tiptap-editor .ProseMirror .email-block-sender-to {
+  font-size: 12px;
+  color: #5f6368;
 }
 
 .tiptap-editor .ProseMirror .email-block-message-body {
-  font-size: 13px;
-  color: color-mix(in srgb, var(--foreground) 80%, transparent);
+  font-size: 14px;
+  color: #3c4043;
   white-space: pre-wrap;
-  line-height: 1.5;
-  padding-left: 36px;
+  line-height: 1.58;
+  padding-left: 0;
 }
 
 .tiptap-editor .ProseMirror .email-block-context {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e8eaed;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
 
 .tiptap-editor .ProseMirror .email-block-context-section {
@@ -1241,41 +1270,44 @@
 
 .tiptap-editor .ProseMirror .email-block-context-label {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: color-mix(in srgb, var(--foreground) 40%, transparent);
+  letter-spacing: 0.07em;
+  color: #80868b;
 }
 
 .tiptap-editor .ProseMirror .email-block-context-summary {
-  font-size: 13px;
-  color: color-mix(in srgb, var(--foreground) 65%, transparent);
-  line-height: 1.5;
+  font-size: 14px;
+  color: #5f6368;
+  line-height: 1.58;
   white-space: pre-wrap;
-  padding-left: 8px;
-  border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  padding-left: 12px;
+  border-left: 3px solid #e8eaed;
 }
 
+/* Gmail-style action buttons */
 .tiptap-editor .ProseMirror .email-block-gmail-btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  margin-top: 8px;
-  padding: 5px 12px;
-  font-size: 12px;
+  gap: 6px;
+  margin-top: 0;
+  padding: 7px 16px;
+  font-size: 14px;
   font-weight: 500;
-  color: color-mix(in srgb, var(--foreground) 60%, transparent);
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-  border-radius: 6px;
+  color: #5f6368;
+  background: transparent;
+  border: 1px solid #dadce0;
+  border-radius: 18px;
   cursor: pointer;
-  transition: background-color 0.12s ease, color 0.12s ease;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
   width: fit-content;
+  letter-spacing: 0.01em;
 }
 
 .tiptap-editor .ProseMirror .email-block-gmail-btn:hover {
-  background: color-mix(in srgb, var(--foreground) 10%, transparent);
-  color: var(--foreground);
+  background: #f1f3f4;
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+  color: #202124;
 }
 
 .tiptap-editor .ProseMirror .email-block-gmail-btn:disabled {
@@ -1283,14 +1315,16 @@
   cursor: default;
 }
 
-.tiptap-editor .ProseMirror .email-block-generate-btn {
-  color: var(--primary);
-  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
+.tiptap-editor .ProseMirror .email-block-gmail-btn-primary {
+  color: #fff;
+  background: #1a73e8;
+  border-color: #1a73e8;
 }
 
-.tiptap-editor .ProseMirror .email-block-generate-btn:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--primary) 10%, transparent);
-  color: var(--primary);
+.tiptap-editor .ProseMirror .email-block-gmail-btn-primary:hover:not(:disabled) {
+  background: #1765cc;
+  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);
+  color: #fff;
 }
 
 @keyframes email-block-spin {
@@ -1301,12 +1335,12 @@
   animation: email-block-spin 1s linear infinite;
 }
 
-/* Email block split button (generate/assistant) */
+/* Email block split button (generate/assistant) – Gmail style */
 .tiptap-editor .ProseMirror .email-block-response-split {
   position: relative;
   display: inline-flex;
   align-items: stretch;
-  margin-top: 8px;
+  margin-top: 0;
 }
 
 .tiptap-editor .ProseMirror .email-block-response-split > button {
@@ -1316,21 +1350,21 @@
 .tiptap-editor .ProseMirror .email-block-split-main {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  padding: 5px 8px 5px 12px;
-  font-size: 12px;
+  gap: 6px;
+  padding: 7px 8px 7px 16px;
+  font-size: 14px;
   font-weight: 500;
-  color: var(--primary);
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+  color: #fff;
+  background: #1a73e8;
+  border: 1px solid #1a73e8;
   border-right: none;
-  border-radius: 6px 0 0 6px;
+  border-radius: 18px 0 0 18px;
   cursor: pointer;
-  transition: background-color 0.12s ease;
+  transition: background-color 0.15s ease;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-main:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  background: #1765cc;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-main:disabled {
@@ -1342,87 +1376,91 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 5px 6px;
-  color: color-mix(in srgb, var(--foreground) 60%, transparent);
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-  border-left: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
-  border-radius: 0 6px 6px 0;
+  padding: 7px 8px;
+  color: #fff;
+  background: #1a73e8;
+  border: 1px solid #1a73e8;
+  border-left: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0 18px 18px 0;
   cursor: pointer;
-  transition: background-color 0.12s ease;
+  transition: background-color 0.15s ease;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-chevron:hover {
-  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  background: #1765cc;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-chevron-open {
-  border-radius: 0 6px 0 0;
+  border-radius: 0 18px 0 0;
   border-bottom-color: transparent;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-dropdown {
   position: absolute;
-  top: calc(100% - 1px);
+  top: calc(100%);
   right: 0;
   z-index: 50;
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
+  background: #fff;
+  border: 1px solid #dadce0;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 2px 0 rgba(60, 64, 67, 0.3);
+  margin-top: 4px;
+  overflow: hidden;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-option {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
   white-space: nowrap;
-  padding: 5px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: color-mix(in srgb, var(--foreground) 60%, transparent);
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #202124;
   background: none;
   border: none;
-  border-radius: 0 0 6px 6px;
   cursor: pointer;
   transition: background-color 0.12s ease;
 }
 
 .tiptap-editor .ProseMirror .email-block-split-option:hover {
-  background: color-mix(in srgb, var(--foreground) 10%, transparent);
-  color: var(--foreground);
+  background: #f1f3f4;
 }
 
-/* Email draft block */
+/* Email draft block – Gmail compose style */
 .tiptap-editor .ProseMirror .email-draft-block-header {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  gap: 0;
+  margin-bottom: 12px;
+  padding-bottom: 0;
+  border-bottom: none;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-field {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: 14px;
+  padding: 6px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-label {
   font-weight: 500;
   color: color-mix(in srgb, var(--foreground) 45%, transparent);
-  min-width: 50px;
+  min-width: 55px;
+  font-size: 14px;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-value {
   color: var(--foreground);
+  font-size: 14px;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-input {
   flex: 1;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--foreground);
   background: none;
   border: none;
@@ -1432,32 +1470,34 @@
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-input::placeholder {
-  color: color-mix(in srgb, var(--foreground) 30%, transparent);
+  color: color-mix(in srgb, var(--foreground) 35%, transparent);
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-body-input {
   width: 100%;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--foreground);
   background: none;
   border: none;
   outline: none;
-  padding: 4px 0;
+  padding: 8px 0;
   font-family: inherit;
-  line-height: 1.6;
+  line-height: 1.58;
   resize: none;
   overflow: hidden;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
-  color: color-mix(in srgb, var(--foreground) 30%, transparent);
+  color: color-mix(in srgb, var(--foreground) 35%, transparent);
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-actions {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 8px;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e8eaed;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-reply {
@@ -1468,26 +1508,26 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px;
+  padding: 4px 12px;
   margin-bottom: 6px;
   font-size: 12px;
   font-weight: 500;
-  color: color-mix(in srgb, var(--foreground) 50%, transparent);
-  background: color-mix(in srgb, var(--foreground) 5%, transparent);
-  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
-  border-radius: 12px;
+  color: #5f6368;
+  background: transparent;
+  border: 1px solid #dadce0;
+  border-radius: 16px;
   cursor: pointer;
   transition: background-color 0.12s ease;
   width: fit-content;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover {
-  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  background: #f1f3f4;
 }
 
 .tiptap-editor .ProseMirror .email-draft-block-reply-thread {
-  padding: 4px 0 0 8px;
-  border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  padding: 4px 0 0 12px;
+  border-left: 3px solid #e8eaed;
   margin-left: 4px;
 }