Doc compose: X close button inside Cc and Bcc fields

Adds a per-field X (24x24 SVG, opacity 0.4 → 1 + accent on hover)
absolute-positioned at the right edge of each Cc/Bcc field. Click
hides both rows, clears their inputs, and restores the Cc opener
on the To row. Inputs get padding-right:32px so the close button
doesn't overlap typed text.

static/js/document.js

@@ -3860,11 +3860,13 @@ import * as Modals from './modalManager.js';
             <label>Cc</label>
             <input type="text" id="doc-email-cc" placeholder="cc@example.com" autocomplete="off" />
             <div id="doc-email-cc-suggestions" class="email-autocomplete" style="display:none"></div>
+            <button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
           </div>
           <div class="email-field" id="doc-email-bcc-row" style="display:none;position:relative">
             <label>Bcc</label>
             <input type="text" id="doc-email-bcc" placeholder="bcc@example.com" autocomplete="off" />
             <div id="doc-email-bcc-suggestions" class="email-autocomplete" style="display:none"></div>
+            <button type="button" class="email-cc-close" data-cc-close title="Hide Cc/Bcc" aria-label="Hide Cc/Bcc"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
           </div>
           <div class="email-field"><label>Subject</label><input type="text" id="doc-email-subject" placeholder="Subject" /></div>
           <div id="doc-email-attachments" class="email-attachments" style="display:none"></div>
@@ -4489,6 +4491,25 @@ import * as Modals from './modalManager.js';
       _syncEmailHeaderSummary();
     });
 
+    // Cc/Bcc close — X buttons inside the Cc and Bcc fields hide both
+    // rows + clear their inputs + restore the Cc opener on the To row.
+    document.querySelectorAll('[data-cc-close]').forEach(closeBtn => {
+      closeBtn.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        const ccRow = document.getElementById('doc-email-cc-row');
+        const bccRow = document.getElementById('doc-email-bcc-row');
+        const ccInput = document.getElementById('doc-email-cc');
+        const bccInput = document.getElementById('doc-email-bcc');
+        if (ccRow) ccRow.style.display = 'none';
+        if (bccRow) bccRow.style.display = 'none';
+        if (ccInput) ccInput.value = '';
+        if (bccInput) bccInput.value = '';
+        const ccToggle = document.getElementById('doc-email-show-cc');
+        if (ccToggle) ccToggle.style.display = '';
+        _syncEmailHeaderSummary();
+      });
+    });
+
     // Autocomplete for To / Cc / Bcc — typed fragment after the last
     // comma triggers contact search; Enter / Tab / click on a suggestion
     // appends "<email>, " so the user can keep typing more recipients.
@@ -8527,6 +8548,19 @@ import * as Modals from './modalManager.js';
     // `body:has(.doc-editor-pane.doc-fullscreen) .doc-divider-collapse` slides
     // it into a forced-inside position). Hiding the divider here would hide
     // the chevron with it.
+
+    // Hide the tab bar during the layout shift so any in-flight smooth
+    // scroll / reflow doesn't visibly "fly" the active tab across the
+    // pane as it expands. Restored after the layout settles.
+    const tabBar = document.getElementById('doc-tab-bar');
+    if (tabBar) {
+      tabBar.style.visibility = 'hidden';
+      clearTimeout(tabBar._fsHideTimer);
+      tabBar._fsHideTimer = setTimeout(() => {
+        tabBar.style.visibility = '';
+      }, 240);
+    }
+
     if (pane.classList.contains('doc-fullscreen')) {
       pane.classList.remove('doc-fullscreen');
       if (container) container.style.display = '';

static/style.css

@@ -30110,8 +30110,25 @@ body.doc-find-active mark.doc-find-mark.current {
   position: absolute; right: 6px; top: calc(50% + 8px); transform: translateY(-50%);
   z-index: 2;
 }
+/* X close button inside Cc / Bcc fields. */
+.email-field .email-cc-close {
+  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
+  background: none; border: none; color: var(--fg);
+  opacity: 0.4; cursor: pointer;
+  width: 22px; height: 22px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 4px;
+  padding: 0;
+  z-index: 2;
+}
+.email-field .email-cc-close:hover {
+  opacity: 1;
+  color: var(--accent, var(--red));
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
 .email-field input { padding-right: 60px; }
-.email-field #doc-email-cc, .email-field #doc-email-bcc, .email-field #doc-email-subject { padding-right: 8px; }
+.email-field #doc-email-cc, .email-field #doc-email-bcc { padding-right: 32px; }
+.email-field #doc-email-subject { padding-right: 8px; }
 
 .doc-email-actions {
   display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px;
@@ -34088,6 +34105,12 @@ body.notes-mobile-mode.notes-drag-mode .note-card-pin.active {
 .cal-quickadd-hint .qa-hint-accent { color: var(--accent, var(--red)); }
 /* ↵ enter glyph in the hint — makes it obvious the field submits on Enter. */
 .cal-quickadd-hint .qa-hint-enter { vertical-align: -2px; color: var(--accent, var(--red)); opacity: 0.8; }
+/* Cycling example text fades out before swap, then fades back in. */
+.cal-quickadd-hint .qa-hint-example {
+  display: inline-block;
+  transition: opacity 0.18s ease;
+}
+.cal-quickadd-hint .qa-hint-example.qa-hint-fade { opacity: 0; }
 /* Matching ↵ hint at the right of the event title while it's empty; hidden once
    editing (the ✓ Done button takes over then). */
 /* Title placeholder overlay: the prompt text with a ↵ enter glyph right after