/**
 * Document / email composer — header, guidance, connected tabs, toolbar polish.
 * Loads after momentum; owns tab chrome (§53 defers here).
 */

/* Tool-group tabs: one label per tab (long desktop / short mobile) */
.composer-modal .composer-toolbar-tab-label--short {
  display: none;
}

@media (max-width: 560px) {
  .composer-modal .composer-toolbar-tab-label--long {
    display: none;
  }
  .composer-modal .composer-toolbar-tab-label--short {
    display: inline;
  }
}

/* ── Header ── */
.composer-modal .composer-header.modalHead {
  padding: 10px 14px !important;
  gap: 10px !important;
  align-items: center !important;
  flex-shrink: 0;
}

.composer-modal .composer-header--document-title-inline {
  flex-wrap: nowrap;
}

.composer-modal .composer-header-doc-block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px 14px;
}

.composer-modal .composer-header-doc-title-row {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-modal .composer-header-doc-trailing {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.composer-modal .composer-header-doc-trailing .iconBtn {
  width: 34px !important;
  height: 34px !important;
  flex-shrink: 0;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  color: inherit !important;
}

.composer-modal .composer-header-doc-trailing .iconBtn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

.composer-modal .composer-doc-setup-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 9px !important;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.composer-modal .composer-doc-setup-btn:hover {
  border-color: rgba(148, 163, 184, 0.5) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.composer-modal .composer-doc-setup-btn:focus-visible {
  outline: none;
  border-color: rgba(96, 165, 250, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(59, 130, 246, 0.3);
}

.composer-modal .composer-doc-setup-btn.composer-doc-setup-btn--open {
  border-color: rgba(96, 165, 250, 0.65) !important;
  background: rgba(59, 130, 246, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(59, 130, 246, 0.14);
}

/* Genuinely-disabled state — distinct from the default enabled look */
.composer-modal .composer-doc-setup-btn:disabled,
.composer-modal .composer-doc-setup-btn[disabled],
.composer-modal .composer-doc-setup-btn[aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.composer-modal .composer-header-kicker {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  opacity: 0.88;
}

.composer-modal .composer-doc-title-input {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: min(480px, 52vw);
  width: auto;
  margin: 0;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  color: inherit !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.composer-modal .composer-doc-title-input::placeholder {
  color: rgba(148, 163, 184, 0.85);
  font-weight: 500;
}

.composer-modal .composer-doc-title-input:hover {
  border-color: rgba(148, 163, 184, 0.5) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.composer-modal .composer-doc-title-input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.65) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(59, 130, 246, 0.18);
}

.composer-modal .composer-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.composer-modal .composer-header-actions #saveChangesBtn {
  min-height: 34px;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.composer-modal .composer-header-actions .iconBtn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  color: inherit !important;
}

.composer-modal .composer-header-actions .iconBtn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Context + workflow row */
.composer-modal #composerGuidanceRow.composer-guidance-row {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 5px 14px !important;
  border-bottom: 1px solid #d1d5db !important;
  background: rgba(248, 250, 252, 0.06) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.composer-modal #composerMergeContextChip {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  min-width: 0;
}

.composer-modal #composerFlowChecklist {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.composer-modal .composer-flow-step {
  color: #94a3b8;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.composer-modal .composer-flow-step--done {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
  font-weight: 700;
}

.composer-modal .composer-flow-arrow {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 600;
  user-select: none;
}

/* Momentum dark shell — header + guidance */
body[data-theme="momentum"] .composer-modal .composer-header.modalHead {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mm-surface) 92%, #fff 8%) 0%,
    color-mix(in srgb, var(--mm-bg) 88%, transparent) 100%
  ) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-doc-title-input {
  color: var(--mm-text-primary) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-doc-title-input::placeholder {
  color: var(--mm-text-secondary) !important;
  opacity: 0.85;
}

/* Setup button: clearly-enabled secondary on the dark slate header */
body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn {
  color: var(--mm-text-primary) !important;
  background: color-mix(in srgb, var(--mm-surface) 72%, var(--mm-bg) 28%) !important;
  border-color: color-mix(in srgb, var(--mm-text-secondary) 28%, var(--mm-border)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn:hover {
  color: #fff !important;
  background: color-mix(in srgb, var(--mm-surface) 92%, #fff 8%) !important;
  border-color: color-mix(in srgb, var(--mm-text-secondary) 55%, var(--mm-border)) !important;
}

body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn:focus-visible {
  color: #fff !important;
  border-color: var(--mm-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 3px color-mix(in srgb, var(--mm-accent) 35%, transparent) !important;
}

body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn.composer-doc-setup-btn--open {
  color: #fff !important;
  border-color: var(--mm-accent) !important;
  background: color-mix(in srgb, var(--mm-accent) 22%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 3px color-mix(in srgb, var(--mm-accent) 16%, transparent);
}

body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn:disabled,
body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn[disabled],
body[data-theme="momentum"] .composer-modal .composer-doc-setup-btn[aria-disabled="true"] {
  color: var(--mm-text-secondary) !important;
  opacity: 0.4 !important;
  background: color-mix(in srgb, var(--mm-surface) 30%, transparent) !important;
  border-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal #composerGuidanceRow.composer-guidance-row {
  background: color-mix(in srgb, var(--mm-bg) 55%, transparent) !important;
  border-bottom-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal #composerMergeContextChip {
  color: var(--mm-text-secondary) !important;
}

body[data-theme="momentum"] .composer-modal .composer-flow-step {
  color: var(--mm-text-secondary);
  background: color-mix(in srgb, var(--mm-surface) 40%, transparent);
  border-color: var(--mm-border);
}

body[data-theme="momentum"] .composer-modal .composer-flow-step--done {
  color: #6ee7b7;
  background: color-mix(in srgb, #059669 18%, transparent);
  border-color: color-mix(in srgb, #059669 35%, var(--mm-border));
}

body[data-theme="momentum"] .composer-modal .composer-flow-arrow {
  color: var(--mm-border);
}

body[data-theme="momentum"] .composer-modal .composer-header-actions #saveChangesBtn.primary {
  background: var(--mm-accent) !important;
  border-color: var(--mm-accent) !important;
  color: #fff !important;
}

/* ── Toolbar shell: connected folder tabs + grouped tool row ── */
.composer-modal .composer-toolbar {
  position: relative;
  z-index: 80;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #e8edf3 !important;
  border-bottom: 1px solid #d1d5db !important;
}

.composer-modal .composer-toolbar-tabstrip {
  flex-shrink: 0;
  padding: 0 12px !important;
  margin: 0 !important;
  gap: 0 !important;
  background: #e8edf3 !important;
  border: none !important;
  border-bottom: 1px solid #d1d5db !important;
}

.composer-modal .composer-toolbar-tablist {
  display: flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.composer-modal .composer-toolbar-tab {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 20px !important;
  min-height: 38px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #d1d5db !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
}

.composer-modal .composer-toolbar-tab + .composer-toolbar-tab {
  box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.25);
}

.composer-modal .composer-toolbar-tab:hover {
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.45) !important;
  transform: none !important;
}

.composer-modal .composer-toolbar-tab[aria-selected="true"] {
  z-index: 2;
  margin-bottom: -1px !important;
  padding-bottom: 0 !important;
  min-height: 39px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #fff !important;
  border-top: 2px solid #3b82f6 !important;
  box-shadow: none !important;
}

.composer-modal .composer-toolbar-tab[aria-selected="true"] + .composer-toolbar-tab {
  box-shadow: none;
}

.composer-modal .composer-toolbar-tab[aria-selected="true"]:hover {
  background: #fff !important;
}

.composer-modal .composer-toolbar-tab:focus-visible {
  outline: 2px solid #3b82f6 !important;
  outline-offset: -2px !important;
  z-index: 3;
}

.composer-modal .composer-toolbar-body {
  position: relative;
  z-index: auto;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-top: none !important;
}

/* Dropdowns must paint above canvas / Quill / quick-start — avoid overflow traps */
.composer-modal .composer-toolbar-panel-stack,
.composer-modal .composer-toolbar-panel,
.composer-modal .composer-toolbar-mainrow,
.composer-modal .composer-toolbar-merge-row,
.composer-modal .composer-toolbar-left,
.composer-modal .composer-toolbar-right,
.composer-modal .composer-toolbar-dropdown,
.composer-modal .composer-zoom-label {
  overflow: visible !important;
}

.composer-modal .composer-toolbar-dropdown.open {
  z-index: 90;
}

.composer-modal .composer-toolbar-dropdown-panel.composer-toolbar-dropdown-panel--portaled {
  z-index: 10050 !important;
  pointer-events: auto;
}

.composer-modal .composer-toolbar-panel,
.composer-modal .composer-toolbar-persistent {
  padding: 6px 12px !important;
  background: #fff !important;
}

.composer-modal .composer-toolbar-persistent {
  border-left: 1px solid #e5e7eb !important;
}

.composer-modal .composer-toolbar-mainrow,
.composer-modal .composer-toolbar-merge-row {
  gap: 6px !important;
}

.composer-modal .composer-toolbar-left,
.composer-modal .composer-toolbar-right {
  gap: 4px !important;
}

.composer-modal .composer-toolbar-sep {
  width: 1px;
  height: 18px;
  margin: 0 6px !important;
  border-radius: 1px;
  align-self: center;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #e2e8f0 22%,
    #e2e8f0 78%,
    transparent 100%
  ) !important;
  opacity: 0.85;
}

/* Toolbar buttons — consistent 32px row */
.composer-modal .composer-toolbar .btn.small {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  box-sizing: border-box;
}

.composer-modal .composer-toolbar .btn.small:active:not(:disabled) {
  transform: translateY(0.5px);
}

.composer-modal .composer-toolbar .composer-toolbar-btn--secondary {
  opacity: 0.88;
  font-weight: 500 !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

.composer-modal .composer-toolbar .composer-toolbar-btn--secondary:hover:not(:disabled) {
  opacity: 1;
  color: #475569 !important;
  background: #f1f5f9 !important;
}

.composer-modal .composer-toolbar .composer-toolbar-btn--primary {
  font-weight: 700 !important;
}

.composer-modal .composer-toolbar #previewAsClientBtn.composer-toolbar-btn--primary {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.composer-modal .composer-toolbar #previewAsClientBtn.composer-toolbar-btn--primary:hover:not(:disabled) {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

/* Email compose tools — desktop: flat row; phone: icon row + ⋯ menu */
.composer-modal.composer-modal--email .composer-toolbar-compose-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.composer-modal.composer-modal--email .composer-compose-tool {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.composer-modal.composer-modal--email .composer-compose-tool__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.composer-modal.composer-modal--email .composer-compose-tool__glyph .composer-svg-ico,
.composer-modal.composer-modal--email .composer-compose-tool__glyph .cc-svg-ico {
  display: block;
}

.composer-modal.composer-modal--email .composer-compose-tool__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool,
.composer-modal.composer-modal--email .composer-compose-more-summary {
  gap: 5px !important;
}

.composer-modal.composer-modal--email .composer-compose-more-summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.composer-modal.composer-modal--email .composer-mobile-tools-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.composer-modal.composer-modal--email .composer-mobile-tools-toggle__icon {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
}

.composer-modal.composer-modal--email .composer-mobile-tools-toggle__icon .composer-svg-ico {
  width: 14px;
  height: 14px;
}

.composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__secondary .composer-svg-ico {
  width: 20px;
  height: 20px;
}

.composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__send-icon {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
}

.composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__send-icon .composer-svg-ico {
  width: 18px;
  height: 18px;
}

.composer-modal.composer-modal--email .composer-compose-menu-item {
  gap: 10px;
}

.composer-modal.composer-modal--email #composerToolbarTabCompose,
.composer-modal.composer-modal--email #composerToolbarPanelCompose {
  display: none !important;
}

/* More menu — native <details> (closed by default; no in-flow dropdown panel) */
.composer-modal.composer-modal--email .composer-compose-more-details {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.composer-modal.composer-modal--email .composer-compose-more-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  user-select: none;
}

.composer-modal.composer-modal--email .composer-compose-more-summary::-webkit-details-marker {
  display: none;
}

.composer-modal.composer-modal--email .composer-compose-more-menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: min(220px, 88vw);
  max-height: min(52vh, 340px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  margin: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  z-index: 10060;
}

.composer-modal.composer-modal--email .composer-compose-more-details[open] .composer-compose-more-menu {
  display: flex;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}

/* Email composer: hide mobile-only chrome pieces on desktop */
.composer-modal.composer-modal--email .composer-email-mobile-bottom-bar {
  display: none;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  min-height: 52px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tools-row--primary {
  display: flex;
  align-items: center;
  align-self: center;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-more-details {
  display: flex;
  align-items: center;
  align-self: center;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool,
.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-more-summary {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0f172a !important;
  -webkit-text-fill-color: currentColor !important;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool--primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool__glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  .composer-modal.composer-modal--email .composer-email-mobile-chrome {
    display: block;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
  }

  .composer-modal.composer-modal--email .composer-email-mobile-actions {
    display: flex !important;
  }

  .composer-modal.composer-modal--email #composerToolbarPanelCompose {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EMAIL COMPOSER — MOBILE (≤767px)
   To + Subject + compose actions always visible; Send in top + bottom bars.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .composer-modal.composer-modal--email .composer-email-mobile-bottom-bar,
  .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-bottom-bar {
    display: flex !important;
  }

  .composer-modal.composer-modal--email .composer-email-mobile-chrome,
  .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-chrome {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 28;
  }

  .composer-modal.composer-modal--email #composerEmailMobileChrome #emailHeaderSection,
  .composer-modal.composer-modal--email-mobile-shell #composerEmailMobileChrome #emailHeaderSection {
    display: grid !important;
    gap: 8px !important;
    padding: 10px 12px 6px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    position: static !important;
    top: auto !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection > div:first-child,
  .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection > div:first-child {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection label,
  .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection input#emailTo,
  .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection input#emailTo {
    font-size: 16px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection input#docSubject,
  .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection input#docSubject {
    font-size: 15px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
  }

  .composer-modal.composer-modal--email .composer-email-mobile-actions,
  .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 10px !important;
    min-height: 52px;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .composer-modal.composer-modal--email .composer-compose-tools-row--primary,
  .composer-modal.composer-modal--email-mobile-shell .composer-compose-tools-row--primary {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    min-width: min(100%, 280px);
  }

  .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tools-row--primary {
    display: flex !important;
    flex: 1 1 auto;
    gap: 6px !important;
    min-width: 0;
  }

  .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool,
  .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-more-summary {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: center !important;
    padding: 0 10px !important;
    overflow: visible !important;
    align-self: center !important;
  }

  .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-more-details {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: 2px;
  }

  @media (max-width: 400px) {
    .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool__label,
    .composer-modal.composer-modal--email .composer-compose-more-summary .composer-compose-tool__label {
      display: none !important;
    }

    .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool,
    .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-more-summary {
      gap: 0 !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      border-radius: 50% !important;
    }

    .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool__glyph,
    .composer-modal.composer-modal--email .composer-compose-more-summary .composer-compose-tool__glyph {
      width: 100%;
      height: 100%;
    }

    .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool__glyph .composer-svg-ico {
      width: 18px;
      height: 18px;
    }
  }

  .composer-modal.composer-modal--email #composerToolbarPanelCompose,
  .composer-modal.composer-modal--email #composerToolbarTabCompose {
    display: none !important;
  }

  /* Slim bar: Data tools only — Send is in the bottom bar */
  .composer-modal.composer-modal--email #composerMobileBar.composer-mobile-bar--email {
    padding: 4px 10px !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .composer-modal.composer-modal--email #composerMobileTemplate,
  .composer-modal.composer-modal--email #composerMobileSave,
  .composer-modal.composer-modal--email #composerMobileSend {
    display: none !important;
  }

  .composer-modal.composer-modal--email #composerMobileDrawer .composer-toolbar-tabstrip {
    display: none !important;
  }

  .composer-modal.composer-modal--email.composer--tools-open #composerMobileDrawer {
    max-height: min(32vh, 200px) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .composer-modal.composer-modal--email .composer-email-mobile-bottom-bar,
  .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-bottom-bar {
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__send,
  .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-bottom-bar__send {
    flex: 1 1 auto;
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
  }

  .composer-modal.composer-modal--email .composer-main-column,
  .composer-modal.composer-modal--email-mobile-shell .composer-main-column {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-email-mobile-actions,
  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-actions {
    background: var(--mm-surface) !important;
    border-bottom-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-email-mobile-actions .composer-compose-tool:not(.composer-compose-tool--primary),
  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-actions .composer-compose-tool:not(.composer-compose-tool--primary) {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
    -webkit-text-fill-color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-chrome,
  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell #composerEmailMobileChrome #emailHeaderSection {
    background: var(--mm-surface) !important;
    border-bottom-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection input#emailTo,
  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection input#docSubject {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell .composer-compose-tools-row--primary .composer-compose-tool {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell .composer-compose-tool--primary {
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
    color: #fff !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email-mobile-shell .composer-email-mobile-bottom-bar {
    background: color-mix(in srgb, var(--mm-surface) 96%, transparent) !important;
    border-top-color: var(--mm-border) !important;
  }
}

.composer-modal.composer-modal--email .composer-compose-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
}

.composer-modal.composer-modal--email .composer-compose-menu-item:hover,
.composer-modal.composer-modal--email .composer-compose-menu-item:focus-visible {
  background: rgba(148, 163, 184, 0.14);
  outline: none;
}

.composer-modal.composer-modal--email .composer-compose-menu-item__icon {
  width: 22px;
  flex-shrink: 0;
  font-size: 15px;
  text-align: center;
}

.composer-modal.composer-modal--email .composer-compose-menu-deal {
  padding: 4px 8px 6px;
}

.composer-modal.composer-modal--email .composer-compose-menu-deal .quick-lead-label,
.composer-modal.composer-modal--email .composer-compose-menu-deal label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.composer-modal.composer-modal--email .composer-compose-menu-deal select,
.composer-modal.composer-modal--email .composer-compose-menu-deal .input,
.composer-modal.composer-modal--email .composer-compose-menu-deal .mm-styled-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .composer-modal.composer-modal--email .composer-compose-tools-row--primary,
  .composer-modal.composer-modal--email .composer-compose-more-details {
    display: contents;
  }

  .composer-modal.composer-modal--email .composer-compose-more-summary {
    display: none !important;
  }

  .composer-modal.composer-modal--email .composer-compose-more-menu,
  .composer-modal.composer-modal--email .composer-compose-more-details[open] .composer-compose-more-menu {
    display: contents !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .composer-modal.composer-modal--email .composer-compose-menu-item {
    min-height: 32px !important;
    height: 32px !important;
    width: auto !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    font-size: 12px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  }

  .composer-modal.composer-modal--email .composer-compose-menu-item--emphasis {
    font-weight: 700 !important;
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
  }

  .composer-modal.composer-modal--email .composer-compose-menu-item__icon {
    font-size: 13px;
    width: auto;
  }

  .composer-modal.composer-modal--email .composer-compose-menu-item__label {
    white-space: nowrap;
  }

  .composer-modal.composer-modal--email .composer-compose-menu-deal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
  }
}

/* Track Changes / Comments — pill switch + label */
.composer-modal .composer-track-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 0 4px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

.composer-modal .composer-track-toggle:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 10px !important;
}

.composer-modal .composer-switch__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

.composer-modal .composer-switch {
  --composer-switch-w: 52px;
  --composer-switch-h: 24px;
  --composer-switch-knob: 18px;
  position: relative;
  display: inline-block;
  width: var(--composer-switch-w);
  height: var(--composer-switch-h);
  flex-shrink: 0;
  border-radius: 999px;
  background: #e5e7eb;
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.composer-modal .composer-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--composer-switch-knob);
  height: var(--composer-switch-knob);
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
  z-index: 2;
  pointer-events: none;
}

.composer-modal .composer-switch__text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.composer-modal .composer-switch:not(.composer-switch--on) .composer-switch__text {
  right: 7px;
  left: auto;
  color: #64748b;
}

.composer-modal .composer-switch:not(.composer-switch--on) .composer-switch__knob {
  transform: translateX(0);
}

.composer-modal .composer-switch--on {
  background: linear-gradient(180deg, #9ad47b 0%, #8bcf69 100%);
  border-color: #6fb44e;
  box-shadow: 0 1px 3px rgba(111, 180, 78, 0.25) inset;
}

.composer-modal .composer-switch--on .composer-switch__text {
  left: 7px;
  right: auto;
  color: #214d18;
}

.composer-modal .composer-switch--on .composer-switch__knob {
  transform: translateX(calc(var(--composer-switch-w) - var(--composer-switch-knob) - 6px));
}

.composer-modal .composer-switch--props.composer-switch--on {
  background: linear-gradient(180deg, #bfdbfe 0%, #60a5fa 100%);
  border-color: #3b82f6;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.22) inset;
}

.composer-modal .composer-switch--props.composer-switch--on .composer-switch__text {
  color: #1e3a8a;
}

/* Localhost QA — compact dev chip (toolbar) or normal menu row */
.composer-modal .composer-qa-dev-chip {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px dashed #cbd5e1 !important;
  opacity: 0.92;
}

.composer-modal .composer-qa-dev-chip:hover:not(:disabled) {
  opacity: 1;
  color: #475569 !important;
  background: #f8fafc !important;
  border-style: solid !important;
}

.composer-modal .composer-qa-dev-chip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.composer-modal .composer-more-panel .composer-qa-menu-item {
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  grid-column: auto !important;
}

.composer-modal .composer-more-panel .composer-qa-menu-item .composer-action-item-icon {
  width: auto !important;
  height: auto !important;
  font-size: 14px !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Localhost QA in shortcuts panel (document composer) */
.composer-modal .composer-shortcuts-dev {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

.composer-modal .composer-shortcuts-dev:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
}

.composer-modal .composer-shortcuts-dev .composer-qa-dev-chip {
  margin: 0;
}

/* Document single-row toolbar — momentum + light */
.composer-modal.composer-modal--document .composer-toolbar--document-single {
  gap: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #d1d5db !important;
}

.composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-body,
.composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-panel--unified,
.composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-persistent {
  background: #fff !important;
  border-top: none !important;
}

body[data-theme="momentum"] .composer-modal.composer-modal--document .composer-toolbar--document-single {
  background: var(--mm-surface) !important;
  border-bottom-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-body,
body[data-theme="momentum"] .composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-panel--unified,
body[data-theme="momentum"] .composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-persistent {
  background: var(--mm-surface) !important;
}

body[data-theme="momentum"] .composer-modal.composer-modal--document .composer-toolbar--document-single .composer-toolbar-persistent {
  border-left-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-shortcuts-dev {
  border-top-color: var(--mm-border);
}

/* Momentum toolbar + tabs */
body[data-theme="momentum"] .composer-modal .composer-toolbar {
  background: var(--mm-bg) !important;
  border-bottom-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-tabstrip {
  background: var(--mm-bg) !important;
  border-bottom-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-tab {
  color: var(--mm-text-secondary) !important;
  background: transparent !important;
  border-bottom-color: var(--mm-border) !important;
  border-top: 2px solid transparent !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-tab + .composer-toolbar-tab {
  box-shadow: inset 1px 0 0 var(--mm-border);
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-tab:hover {
  color: var(--mm-text-primary) !important;
  background: color-mix(in srgb, var(--mm-surface) 35%, var(--mm-bg) 65%) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-tab[aria-selected="true"] {
  background: var(--mm-surface) !important;
  color: var(--mm-text-primary) !important;
  border-bottom-color: var(--mm-surface) !important;
  border-top-color: var(--mm-accent) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-body,
body[data-theme="momentum"] .composer-modal .composer-toolbar-panel,
body[data-theme="momentum"] .composer-modal .composer-toolbar-persistent {
  background: var(--mm-surface) !important;
  border-top: none !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-persistent {
  border-left-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-tab:focus-visible {
  outline-color: var(--mm-accent) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar-sep {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--mm-border) 22%,
    var(--mm-border) 78%,
    transparent 100%
  ) !important;
  opacity: 0.9;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar .composer-toolbar-btn--secondary {
  color: var(--mm-text-secondary) !important;
  background: color-mix(in srgb, var(--mm-bg) 50%, transparent) !important;
  border-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-toolbar #previewAsClientBtn.composer-toolbar-btn--primary {
  background: color-mix(in srgb, var(--mm-accent) 14%, var(--mm-surface)) !important;
  border-color: color-mix(in srgb, var(--mm-accent) 35%, var(--mm-border)) !important;
  color: var(--mm-accent) !important;
}

body[data-theme="momentum"] .composer-modal .composer-track-toggle:focus-visible,
body[data-theme="momentum"] .composer-modal .composer-zoom-select:focus-visible {
  outline-color: var(--mm-accent);
}

body[data-theme="momentum"] .composer-modal .composer-switch__label {
  color: var(--mm-text-secondary) !important;
}

body[data-theme="momentum"] .composer-modal .composer-switch:not(.composer-switch--on) {
  background: color-mix(in srgb, var(--mm-bg) 55%, #334155 45%) !important;
  border-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-switch:not(.composer-switch--on) .composer-switch__text {
  color: var(--mm-text-secondary) !important;
}

body[data-theme="momentum"] .composer-modal .composer-switch__knob {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

body[data-theme="momentum"] .composer-modal .composer-qa-dev-chip {
  color: var(--mm-text-secondary) !important;
  border-color: var(--mm-border) !important;
}

body[data-theme="momentum"] .composer-modal .composer-qa-dev-chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mm-surface) 80%, var(--mm-bg)) !important;
  color: var(--mm-text-primary) !important;
}

@media (max-width: 767px) {
  .composer-modal .composer-toolbar-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px !important;
    min-height: 40px !important;
    font-size: 11px !important;
  }

  .composer-modal .composer-toolbar-tab[aria-selected="true"] {
    min-height: 41px !important;
  }

  /* Keep connected tabs on mobile (override gmail pill gap) */
  .composer-modal .composer-toolbar-tablist {
    gap: 0 !important;
  }

  .composer-modal .composer-toolbar-tabstrip {
    background: #e8edf3 !important;
  }

  body[data-theme="momentum"] .composer-modal .composer-toolbar-tabstrip {
    background: var(--mm-bg) !important;
  }
}

/* Light / default theme */
body:not([data-theme="momentum"]) .composer-modal .composer-header.modalHead {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.88) 100%) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body:not([data-theme="momentum"]) .composer-modal .composer-doc-title-input {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body:not([data-theme="momentum"]) .composer-modal .composer-doc-setup-btn {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body:not([data-theme="momentum"]) .composer-modal .composer-doc-setup-btn:hover {
  background: #fff !important;
  border-color: #cbd5e1 !important;
}

body:not([data-theme="momentum"]) .composer-modal .composer-doc-setup-btn.composer-doc-setup-btn--open {
  color: #1d4ed8 !important;
  border-color: rgba(96, 165, 250, 0.65) !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

body:not([data-theme="momentum"]) .composer-modal #composerGuidanceRow.composer-guidance-row {
  background: rgba(248, 250, 252, 0.75) !important;
  border-bottom-color: #e2e8f0 !important;
}

@media (max-width: 720px) {
  .composer-modal .composer-header--document-title-inline {
    flex-wrap: wrap;
  }
  .composer-modal .composer-header-doc-block {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .composer-modal .composer-header-doc-title-row {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .composer-modal .composer-doc-title-input {
    max-width: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* Zoom — aligned to toolbar button height; compact pill fits 120% */
.composer-modal {
  --composer-zoom-select-w: 3.75rem;
}

.composer-modal .composer-zoom-label {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.2;
  overflow: visible;
}

.composer-modal .composer-zoom-label__text {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.composer-modal .composer-zoom-select {
  display: inline-block;
  width: var(--composer-zoom-select-w);
  min-width: 3.5rem;
  max-width: 4rem;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 18px 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  text-align-last: center;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
  overflow: visible;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px 12px;
  border: 1px solid #e2e8f0;
  color: inherit;
}

.composer-modal .composer-zoom-select:hover {
  border-color: #cbd5e1;
}

.composer-modal .composer-zoom-select:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #93c5fd;
}

body[data-theme="momentum"] .composer-modal .composer-zoom-label {
  color: var(--mm-text-secondary) !important;
}

body[data-theme="momentum"] .composer-modal .composer-zoom-select {
  width: var(--composer-zoom-select-w);
  min-width: 3.5rem;
  max-width: 4rem;
  background-color: var(--mm-surface) !important;
  border-color: var(--mm-border) !important;
  color: var(--mm-text-primary) !important;
}

/* Toolbar dropdown panels (Data, More, Save As) — above editor canvas when open */
.composer-modal .composer-toolbar-dropdown-panel,
.composer-modal .composer-data-panel,
.composer-modal .composer-more-panel {
  z-index: 10050;
}

.composer-modal .composer-toolbar-dropdown.open .composer-toolbar-dropdown-panel {
  z-index: 10050 !important;
}

/* Compact email-only More panel */
.composer-modal .composer-more-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: auto;
  min-width: 168px;
  padding: 6px !important;
  border-radius: 10px !important;
}

.composer-modal .composer-more-panel__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.composer-modal .composer-more-panel .composer-action-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
  padding: 8px 10px !important;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.composer-modal .composer-more-panel .composer-action-item-icon {
  width: auto !important;
  height: auto !important;
  font-size: 16px !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.composer-modal .composer-more-panel .composer-action-item-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}

.composer-modal .composer-more-panel .composer-action-item:hover {
  background: rgba(148, 163, 184, 0.12);
}

body[data-theme="momentum"] .composer-modal .composer-more-panel {
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border) !important;
  box-shadow: var(--mm-shadow-md) !important;
}

/* Compact Data dropdown (Data Source + Data Entry) */
.composer-modal .composer-data-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: auto;
  min-width: 168px;
  padding: 6px !important;
  border-radius: 10px !important;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.composer-modal .composer-data-panel__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.composer-modal .composer-data-panel .composer-action-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100%;
  padding: 8px 10px !important;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.composer-modal .composer-data-panel .composer-action-item-icon {
  width: auto !important;
  height: auto !important;
  font-size: 16px !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.composer-modal .composer-data-panel .composer-action-item-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}

.composer-modal .composer-data-panel .composer-action-item:hover {
  background: rgba(148, 163, 184, 0.12);
}

.composer-modal .composer-data-panel .composer-action-item:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

.composer-modal .composer-data-panel .composer-action-item.composer-data-entry--empty {
  opacity: 0.55;
}

.composer-modal .composer-data-panel .composer-action-item.composer-data-entry--missing {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
  font-weight: 700;
}

.composer-modal .composer-data-panel .composer-action-item.composer-data-entry--missing .composer-action-item-label {
  color: #047857;
}

.composer-modal .composer-data-panel .composer-action-item.composer-data-entry--complete {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(20, 184, 166, 0.06) 100%);
}

.composer-modal .composer-data-dropdown--attention .composer-toolbar-trigger {
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.35);
}

body[data-theme="momentum"] .composer-modal .composer-data-panel {
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border) !important;
  box-shadow: var(--mm-shadow-md) !important;
}

body[data-theme="momentum"] .composer-modal .composer-data-panel .composer-action-item:hover {
  background: var(--mm-surface-hover, rgba(148, 163, 184, 0.12)) !important;
}

body[data-theme="momentum"] .composer-modal .composer-data-panel .composer-action-item-label {
  color: var(--mm-text-primary) !important;
}

body[data-theme="momentum"] .composer-modal .composer-data-panel .composer-action-item.composer-data-entry--missing .composer-action-item-label {
  color: var(--mm-accent-success, #34d399) !important;
}

body[data-theme="momentum"] .composer-modal .composer-data-dropdown--attention .composer-toolbar-trigger {
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45) !important;
}

@media (max-width: 767px) {
  .composer-modal.composer--tools-open .composer-data-dropdown {
    display: contents;
  }

  .composer-modal.composer--tools-open .composer-data-panel--drawer-flat {
    display: contents !important;
  }

  .composer-modal.composer--tools-open .composer-data-panel--drawer-flat .composer-data-panel__grid {
    display: contents;
  }

  .composer-modal.composer--tools-open .composer-data-panel--drawer-flat .composer-action-item {
    display: inline-flex !important;
    width: auto !important;
    padding: 5px 9px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  }

  .composer-modal.composer--tools-open .composer-data-panel--drawer-flat .composer-action-item-icon {
    font-size: 14px !important;
  }

  body[data-theme="momentum"] .composer-modal.composer--tools-open .composer-data-panel--drawer-flat .composer-action-item {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .composer-modal .composer-doc-title-input,
  .composer-modal .composer-header.modalHead,
  .composer-modal #composerGuidanceRow.composer-guidance-row {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body:not([data-theme="momentum"]) .composer-modal .composer-doc-title-input {
    background: #fff !important;
  }
}

/* Block jump select in merged & linked fields / data entry drawer headers */
.composer-modal .data-entry-block-nav-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 6px 30px 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%2364748b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.composer-modal .data-entry-block-nav-select:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
  border-color: #60a5fa;
}

/* ═══════════════════════════════════════════════════════════════════════
   DATA ENTRY / FILL FORMS — unified field system
   Scope: .momentum-data-entry-pane (the wrapper rendered for BOTH the left
   "Fill" edge-tab drawer in document mode and the right data drawer).
   Goal: one cohesive look for every block type's fill UI. The pane is built
   from many inline-styled string templates, so the control normalization
   below uses element/attribute selectors with !important to guarantee a
   consistent baseline regardless of any leftover inline styles, while the
   .fill-* helper classes are applied directly in the field builders.
   ───────────────────────────────────────────────────────────────────────
   Design tokens (light / default theme):
     --fill-radius        9px      input + chip corner radius
     --fill-h             38px     control min-height (comfortable tap target)
     --fill-border        #cbd5e1  resting border
     --fill-border-soft   #e2e8f0  section + divider border
     --fill-bg            #ffffff  control background
     --fill-text          #0f172a  typed value color
     --fill-placeholder   #94a3b8  placeholder + empty helper
     --fill-label         #475569  field label
     --fill-accent        #2563eb  focus + active accent
   ═══════════════════════════════════════════════════════════════════════ */
.momentum-data-entry-pane {
  --fill-radius: 9px;
  --fill-h: 38px;
  --fill-border: #cbd5e1;
  --fill-border-soft: #e2e8f0;
  --fill-bg: #ffffff;
  --fill-bg-muted: #f1f5f9;
  --fill-text: #0f172a;
  --fill-placeholder: #94a3b8;
  --fill-label: #475569;
  --fill-help: #64748b;
  --fill-accent: #2563eb;
  --fill-accent-soft: #eff6ff;
  --fill-accent-border: #bfdbfe;
  --fill-danger: #dc2626;
  display: grid;
  gap: 14px;
}

/* ── Control normalization — every text-like input, textarea, select ── */
.momentum-data-entry-pane input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
.momentum-data-entry-pane textarea,
.momentum-data-entry-pane select {
  box-sizing: border-box;
  min-height: var(--fill-h) !important;
  padding: 8px 11px !important;
  border: 1px solid var(--fill-border) !important;
  border-radius: var(--fill-radius) !important;
  background: var(--fill-bg) !important;
  color: var(--fill-text) !important;
  font-size: 13px !important;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

/* Selects keep room for the native chevron we draw */
.momentum-data-entry-pane select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%2364748b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  cursor: pointer;
}

.momentum-data-entry-pane textarea {
  min-height: 76px !important;
  padding: 9px 11px !important;
  line-height: 1.5;
  resize: vertical;
}

/* Friendly placeholders */
.momentum-data-entry-pane input::placeholder,
.momentum-data-entry-pane textarea::placeholder {
  color: var(--fill-placeholder) !important;
  opacity: 1;
}

/* Focus ring — visible, calm, accessible */
.momentum-data-entry-pane input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):focus,
.momentum-data-entry-pane textarea:focus,
.momentum-data-entry-pane select:focus,
.momentum-data-entry-pane input:focus-visible,
.momentum-data-entry-pane textarea:focus-visible,
.momentum-data-entry-pane select:focus-visible {
  border-color: var(--fill-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
  outline: none !important;
}

/* Read-only computed + disabled / live-linked states stay visibly inert */
.momentum-data-entry-pane input[readonly]:not([type="checkbox"]):not([type="radio"]) {
  background: var(--fill-bg-muted) !important;
  color: #475569 !important;
  cursor: default;
}
.momentum-data-entry-pane input:disabled:not([type="checkbox"]):not([type="radio"]),
.momentum-data-entry-pane textarea:disabled,
.momentum-data-entry-pane select:disabled {
  background: var(--fill-bg-muted) !important;
  color: #94a3b8 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Checkboxes + radios — consistent size, accent, hit area */
.momentum-data-entry-pane input[type="checkbox"],
.momentum-data-entry-pane input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--fill-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.momentum-data-entry-pane input[type="checkbox"]:focus-visible,
.momentum-data-entry-pane input[type="radio"]:focus-visible {
  outline: 2px solid var(--fill-accent);
  outline-offset: 2px;
}

/* ── Field wrapper + label ── */
.momentum-data-entry-pane .fill-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.momentum-data-entry-pane .fill-field__label,
.momentum-data-entry-pane .fill-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fill-label);
  letter-spacing: 0.01em;
}
.momentum-data-entry-pane .fill-label--head {
  justify-content: space-between;
}
.momentum-data-entry-pane .fill-required {
  color: var(--fill-danger);
  font-weight: 800;
}
.momentum-data-entry-pane .fill-help {
  font-size: 11px;
  line-height: 1.45;
  color: var(--fill-help);
}
.momentum-data-entry-pane .fill-help--client {
  color: #0e7490;
}

/* ── Block section grouping ── */
.momentum-data-entry-pane .fill-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--fill-border-soft);
  border-radius: 14px;
  background: #fff;
}
.momentum-data-entry-pane .fill-section + .fill-section {
  margin-top: 2px;
}
.momentum-data-entry-pane .fill-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.momentum-data-entry-pane .fill-section__title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
}
.momentum-data-entry-pane .fill-section__subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--fill-help);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.momentum-data-entry-pane .fill-subgroup-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--fill-help);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.momentum-data-entry-pane .fill-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.momentum-data-entry-pane .fill-grid-2 > .fill-span-2 {
  grid-column: 1 / -1;
}

/* ── Choice chips (radio / checkbox option lists) ── */
.momentum-data-entry-pane .fill-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.momentum-data-entry-pane .fill-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--fill-border);
  border-radius: var(--fill-radius);
  background: var(--fill-bg);
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.momentum-data-entry-pane .fill-choice:hover {
  border-color: #93c5fd;
  background: var(--fill-accent-soft);
}
.momentum-data-entry-pane .fill-choice:has(input:checked) {
  border-color: var(--fill-accent);
  background: var(--fill-accent-soft);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px var(--fill-accent);
}
.momentum-data-entry-pane .fill-choice:focus-within {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.momentum-data-entry-pane .fill-choice--bool {
  width: fit-content;
}

/* ── Buttons inside the fill pane ── */
.momentum-data-entry-pane .fill-merge-btn,
.momentum-data-entry-pane .txb-merge-field-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  color: #1d4ed8;
  background: var(--fill-accent-soft);
  border: 1px solid var(--fill-accent-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.momentum-data-entry-pane .fill-merge-btn:hover,
.momentum-data-entry-pane .txb-merge-field-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.momentum-data-entry-pane .fill-add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1.5px dashed #93c5fd;
  border-radius: var(--fill-radius);
  background: var(--fill-accent-soft);
  color: #2563eb;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
}
.momentum-data-entry-pane .fill-add-btn:hover {
  background: #dbeafe;
  border-color: #60a5fa;
}
.momentum-data-entry-pane .fill-remove-btn {
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--fill-danger);
  background: #fff;
  border: 1px solid #fca5a5;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.momentum-data-entry-pane .fill-remove-btn:hover {
  background: #fef2f2;
}

/* ── Empty + totals + info cards ── */
.momentum-data-entry-pane .fill-empty {
  padding: 16px;
  text-align: center;
  color: var(--fill-placeholder);
  font-style: italic;
  font-size: 12px;
  border: 1px dashed var(--fill-border);
  border-radius: var(--fill-radius);
  background: #fafbfc;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-empty {
  background: var(--fill-bg-muted);
}

/* ── Micro column labels (line-item table cells) ── */
.momentum-data-entry-pane .fill-mini-label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-mini-label {
  color: var(--mm-text-muted, #94a3b8);
}

/* ── Line-item / repeatable cards + totals ── */
.momentum-data-entry-pane .fill-li-card {
  padding: 12px;
  border: 1px solid var(--fill-border-soft);
  border-radius: 12px;
  background: #fff;
  position: relative;
}
.momentum-data-entry-pane .fill-totals {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid var(--fill-border-soft);
  border-radius: 12px;
  font-size: 12.5px;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-li-card,
body[data-theme="momentum"] .momentum-data-entry-pane .fill-totals {
  background: var(--mm-surface) !important;
  border-color: var(--mm-border);
}

/* ── Signature signer cards + pill action ── */
.momentum-data-entry-pane .fill-sig-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--fill-border-soft);
  border-radius: 12px;
  background: #fff;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-sig-card {
  background: var(--mm-surface) !important;
  border-color: var(--mm-border);
}
.momentum-data-entry-pane .fill-pill-btn {
  padding: 5px 10px;
  border: 1px solid var(--fill-accent-border);
  background: var(--fill-accent-soft);
  color: #1d4ed8;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.momentum-data-entry-pane .fill-pill-btn:hover { background: #dbeafe; }
.momentum-data-entry-pane .fill-pill-btn--danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
.momentum-data-entry-pane .fill-pill-btn--danger:hover { background: #fee2e2; }

/* ── Sub-panels (payment schedule / preview blocks) ── */
.momentum-data-entry-pane .fill-subpanel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--fill-border-soft);
  border-radius: 12px;
  background: #f8fafc;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-subpanel {
  background: var(--fill-bg-muted);
  border-color: var(--mm-border);
}
.momentum-data-entry-pane .fill-subpanel__title {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.01em;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-subpanel__title {
  color: var(--mm-text-secondary);
}

/* ── Inline note / hint banner ── */
.momentum-data-entry-pane .fill-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  background: #f0f9ff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #1e40af;
}
.momentum-data-entry-pane .fill-note__icon { font-size: 16px; line-height: 1; }
.momentum-data-entry-pane .fill-note--muted {
  border-color: var(--fill-border-soft);
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
}
.momentum-data-entry-pane .fill-note--client {
  border-color: #a5f3fc;
  background: #ecfeff;
  color: #0c4a6e;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-note--client {
  background: color-mix(in srgb, #06b6d4 16%, var(--mm-surface));
  border-color: color-mix(in srgb, #06b6d4 40%, transparent);
  color: var(--mm-text-secondary);
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-note {
  background: color-mix(in srgb, var(--mm-accent, #6366f1) 12%, var(--mm-surface));
  border-color: var(--fill-accent-border);
  color: var(--mm-text-secondary);
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-note--muted {
  background: var(--fill-bg-muted);
  border-color: var(--mm-border);
}

/* ── Field rows (simple merge fields) + block groups ── */
.momentum-data-entry-pane .fill-field-row {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fill-border-soft);
}
.momentum-data-entry-pane .fill-field-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.momentum-data-entry-pane .fill-block-group {
  display: grid;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--fill-border-soft);
}
.momentum-data-entry-pane .fill-block-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.momentum-data-entry-pane .fill-block-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.momentum-data-entry-pane .fill-block-group__title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.01em;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-block-group__title {
  color: var(--mm-text-primary);
}
.momentum-data-entry-pane .fill-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.momentum-data-entry-pane .fill-meta-text {
  font-size: 9px;
  color: var(--fill-help);
}
.momentum-data-entry-pane .fill-meta-token {
  font-size: 10px;
  color: var(--fill-help);
  font-family: ui-monospace, Menlo, monospace;
  word-break: break-all;
}

/* ── Informational block cards (booking / company / questionnaire) ── */
.momentum-data-entry-pane .fill-info-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--fill-border-soft);
  border-radius: 14px;
  background: #fff;
}
.momentum-data-entry-pane .fill-info-card--green { border-color: #bbf7d0; background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%); }
.momentum-data-entry-pane .fill-info-card--blue { border-color: #bfdbfe; background: linear-gradient(145deg, #eff6ff 0%, #ffffff 100%); }
.momentum-data-entry-pane .fill-info-card--violet { border-color: #ddd6fe; background: linear-gradient(145deg, #f5f3ff 0%, #ffffff 100%); }
.momentum-data-entry-pane .fill-info-card__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.momentum-data-entry-pane .fill-info-card--green .fill-info-card__title { color: #065f46; }
.momentum-data-entry-pane .fill-info-card--blue .fill-info-card__title { color: #1d4ed8; }
.momentum-data-entry-pane .fill-info-card--violet .fill-info-card__title { color: #5b21b6; }
.momentum-data-entry-pane .fill-info-card__body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--fill-help);
}
.momentum-data-entry-pane .fill-info-btn {
  justify-self: start;
  padding: 9px 15px;
  border-radius: var(--fill-radius);
  border: 1px solid transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.momentum-data-entry-pane .fill-info-btn:hover { filter: brightness(1.06); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16); }
.momentum-data-entry-pane .fill-info-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.momentum-data-entry-pane .fill-info-btn--green { background: #059669; border-color: #059669; }
.momentum-data-entry-pane .fill-info-btn--blue { background: #2563eb; border-color: #2563eb; }
.momentum-data-entry-pane .fill-info-btn--violet { background: #7c3aed; border-color: #7c3aed; }
body[data-theme="momentum"] .momentum-data-entry-pane .fill-info-card {
  background: var(--mm-surface) !important;
  border-color: var(--mm-border);
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-info-card__body {
  color: var(--mm-text-secondary);
}

/* ── Assignment / mode badges ── */
.momentum-data-entry-pane .fill-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.momentum-data-entry-pane .fill-badge--client { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.momentum-data-entry-pane .fill-badge--team { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.momentum-data-entry-pane .fill-badge--either { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.momentum-data-entry-pane .fill-badge--linked { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.momentum-data-entry-pane .fill-badge--doc { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* ═══════ Momentum theme (adapts light → dark via --mm-* tokens) ═══════ */
body[data-theme="momentum"] .momentum-data-entry-pane {
  --fill-border: color-mix(in srgb, var(--mm-border) 70%, #94a3b8 30%);
  --fill-border-soft: var(--mm-border);
  --fill-bg: color-mix(in srgb, var(--mm-surface) 88%, #fff 12%);
  --fill-bg-muted: color-mix(in srgb, var(--mm-surface) 80%, var(--mm-bg) 20%);
  --fill-text: var(--mm-text-primary);
  --fill-placeholder: var(--mm-text-muted, #94a3b8);
  --fill-label: var(--mm-text-secondary);
  --fill-help: var(--mm-text-muted, #64748b);
  --fill-accent: #60a5fa;
  --fill-accent-soft: color-mix(in srgb, var(--mm-accent, #6366f1) 16%, transparent);
  --fill-accent-border: color-mix(in srgb, var(--mm-accent, #6366f1) 45%, transparent);
}
body[data-theme="momentum"] .momentum-data-entry-pane select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%2394a3b8' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-section,
body[data-theme="momentum"] .momentum-data-entry-pane .fill-choice {
  background: var(--mm-surface) !important;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-section__title {
  color: var(--mm-text-primary);
}
body[data-theme="momentum"] .momentum-data-entry-pane input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):focus,
body[data-theme="momentum"] .momentum-data-entry-pane textarea:focus,
body[data-theme="momentum"] .momentum-data-entry-pane select:focus {
  border-color: var(--fill-accent) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}
body[data-theme="momentum"] .momentum-data-entry-pane .fill-merge-btn,
body[data-theme="momentum"] .momentum-data-entry-pane .txb-merge-field-btn,
body[data-theme="momentum"] .momentum-data-entry-pane .fill-add-btn {
  color: #93c5fd;
  background: var(--fill-accent-soft);
  border-color: var(--fill-accent-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENT COMPOSER — PHONE (≤639px) + body.is-mobile
   Option A: collapsed chrome, tools drawer, maximize document viewport.
   Desktop (≥768px, not .is-mobile): rules below do not apply.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Flex chain: modal → main column → canvas → Quill */
  #composerModal.composer-modal {
    min-height: 0 !important;
  }

  .composer-modal .composer-main-column {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .composer-modal #documentCanvasViewport {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .composer-modal #quillEditor {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .composer-modal #quillEditor .ql-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Quill compact toolbar — see § MOBILE QUILL TOOLBAR below */

  /* Header: title + setup on one row; Save lives in #composerMobileBar */
  .composer-modal .composer-header.modalHead {
    padding: 8px 10px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .composer-modal .composer-header-kicker {
    display: none !important;
  }

  .composer-modal .composer-header--document-title-inline {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .composer-modal .composer-header-doc-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .composer-modal .composer-header-doc-title-row {
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .composer-modal .composer-header-doc-trailing {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }

  .composer-modal .composer-doc-title-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  .composer-modal .composer-doc-setup-btn {
    flex-shrink: 0 !important;
    min-height: 32px !important;
    padding: 0 10px !important;
  }

  .composer-modal .composer-header-doc-trailing .iconBtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    font-size: 14px !important;
  }

  /* Document: ? / ✕ live in title row; header-actions only Save (hidden on phone) */
  .composer-modal.composer-modal--document .composer-header-actions {
    display: none !important;
  }

  .composer-modal.composer-modal--document .composer-header-actions #saveChangesBtn,
  .composer-modal.composer-modal--document .composer-header-actions #saveAsDropdown {
    display: none !important;
  }

  /* Workflow / “Data for…” row — stack; steps scroll horizontally */
  .composer-modal #composerGuidanceRow.composer-guidance-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 4px 10px !important;
  }

  .composer-modal #composerMergeContextChip {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .composer-modal #composerFlowChecklist {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 4px !important;
    max-width: 100% !important;
    padding-bottom: 2px !important;
    scrollbar-width: thin;
  }

  .composer-modal .composer-flow-step,
  .composer-modal .composer-flow-arrow {
    flex-shrink: 0 !important;
  }

  .composer-modal .composer-flow-step {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }

  .composer-modal .composer-flow-arrow {
    font-size: 9px !important;
  }

  /* Tips banner steals vertical space on phone */
  .composer-modal .composer-quick-start {
    display: none !important;
  }

  .composer-modal #mergeModeBanner {
    padding: 6px 36px 6px 10px !important;
  }

  .composer-modal #mergeModeBannerText {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Slim mobile bar */
  #composerMobileBar {
    padding: 5px 8px !important;
    gap: 5px !important;
  }

  #composerMobileBar .btn.small {
    font-size: 11px !important;
    padding: 5px 8px !important;
    min-height: 32px !important;
  }

  /* Tools drawer: hide actions duplicated in the slim bar */
  #composerMobileDrawer #useTemplateBtn {
    display: none !important;
  }

  /* Section workflow nav (HoneyBook-style) */
  .composer-modal .editor-doc-nav-bar {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    min-height: 40px !important;
  }

  .composer-modal .editor-doc-nav-btn {
    min-width: 0 !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  .composer-modal .editor-doc-nav-label {
    max-width: 72px !important;
  }

  .composer-modal .editor-doc-nav-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .composer-modal .editor-doc-nav-section-name {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Fill / Object edge tabs — narrower peek */
  .composer-modal .insert-block-drawer-edge-tab {
    height: 68px !important;
    width: 28px !important;
    --edge-tab-peek: 24px;
    padding: 5px 3px 5px 0 !important;
  }

  .composer-modal .insert-block-drawer-edge-tab--merge-fields {
    height: 80px !important;
  }

  .composer-modal .insert-block-drawer-edge-tab__label {
    font-size: 8px !important;
    letter-spacing: 0.02em !important;
  }
}

/* body.is-mobile: workflow overlap fixes for 640–767px (tablet portrait in mobile mode) */
body.is-mobile .composer-modal #composerGuidanceRow.composer-guidance-row {
  flex-direction: column !important;
  align-items: stretch !important;
}

body.is-mobile .composer-modal #composerMergeContextChip {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.is-mobile .composer-modal #composerFlowChecklist {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

body.is-mobile .composer-modal .composer-main-column,
body.is-mobile .composer-modal #documentCanvasViewport,
body.is-mobile .composer-modal #quillEditor {
  min-height: 0 !important;
}

body.is-mobile .composer-modal #quillEditor .ql-container {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMAIL COMPOSER — PHONE (≤639px) + body.is-mobile
   Collapsed chrome, tools drawer, sticky Send bar, maximize body viewport.
   Desktop (≥768px, not .is-mobile): rules below do not apply.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  #composerModal.composer-modal--email {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Compact header — contact name lives in To: row */
  .composer-modal.composer-modal--email .composer-header.modalHead {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .composer-modal.composer-modal--email .composer-header .modalTitle {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  .composer-modal.composer-modal--email .composer-header-contact-suffix {
    display: none !important;
  }

  .composer-modal.composer-modal--email .composer-header-actions #saveChangesBtn {
    display: none !important;
  }

  .composer-modal.composer-modal--email .composer-header-actions .iconBtn {
    width: 32px !important;
    height: 32px !important;
  }

  /* Tips banner steals vertical space on phone */
  .composer-modal.composer-modal--email .composer-quick-start--email {
    display: none !important;
  }

  /* Workflow chip row — contact/deal context is visible in To: field */
  .composer-modal.composer-modal--email #composerGuidanceRow.composer-guidance-row {
    display: none !important;
  }

  /* Slim top bar: Tools toggle only (Send lives in sticky bottom bar) */
  .composer-modal.composer-modal--email #composerMobileBar.composer-mobile-bar--email {
    padding: 2px 8px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
  }

  .composer-modal.composer-modal--email #composerMobileBar #composerToolsToggle {
    font-size: 10px !important;
    padding: 2px 8px !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
  }

  .composer-modal.composer-modal--email #composerMobileTemplate,
  .composer-modal.composer-modal--email #composerMobileSave,
  .composer-modal.composer-modal--email #composerMobileSend {
    display: none !important;
  }

  /* Share & Send row duplicates bottom bar — keep inside drawer only, never overlap body */
  .composer-modal.composer-modal--email .composer-toolbar-persistent {
    display: none !important;
  }

  /* Email: drawer must not cover Quill toolbar (override max-height:none) */
  .composer-modal.composer-modal--email.composer--tools-open #composerMobileDrawer {
    max-height: min(32vh, 200px) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .composer-modal.composer-modal--email #composerMobileDrawer .composer-toolbar-tabstrip {
    display: none !important;
  }

  /* Hide empty REVIEW section labels when toggles are document-only */
  .composer-modal.composer-modal--email .composer-mobile-section-label {
    padding: 4px 8px 1px !important;
    font-size: 7px !important;
    margin-top: 0 !important;
  }

  /* To / Subject — prominent, pinned under Tools bar (JS moves #emailHeaderSection here) */
  .composer-modal.composer-modal--email #emailHeaderSection,
  .composer-modal.composer-modal--email .composer-email-header--mobile-priority,
  .composer-modal.composer-modal--email-mobile-shell #emailHeaderSection {
    padding: 6px 8px 6px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection label {
    font-size: 11px !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection input {
    font-size: 14px !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection input#emailTo {
    font-size: 16px !important;
    font-weight: 600 !important;
    min-height: 40px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
  }

  .composer-modal.composer-modal--email #emailHeaderSection .email-picker-btn {
    padding: 2px 6px !important;
    font-size: 10px !important;
    min-height: 30px !important;
  }

  .composer-modal.composer-modal--email #toggleCcBccBtn {
    font-size: 10px !important;
    padding: 2px 8px !important;
    min-height: 30px !important;
  }

  .composer-modal.composer-modal--email .composer-email-subject-row {
    padding-top: 4px !important;
    margin-top: 2px !important;
  }

  /* Flex chain: main column → canvas → Quill body */
  .composer-modal.composer-modal--email .composer-main-column {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .composer-modal.composer-modal--email #documentCanvasViewport {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .composer-modal.composer-modal--email #quillEditor {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .composer-modal.composer-modal--email #quillEditor .ql-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Quill compact toolbar — see § MOBILE QUILL TOOLBAR (≤767px) */

  /* Email body — full width on phone (beats styles-master 8.5in / 24px canvas padding) */
  #composerModal.composer-modal--email-mobile-shell.print-layout-mode #documentCanvasViewport,
  .composer-modal.composer-modal--email-mobile-shell.print-layout-mode #documentCanvasViewport {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 6px 8px 12px !important;
    box-sizing: border-box !important;
    background: #e2e8f0 !important;
  }

  #composerModal.composer-modal--email-mobile-shell.print-layout-mode #quillEditor,
  .composer-modal.composer-modal--email-mobile-shell.print-layout-mode #quillEditor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
  }

  .composer-modal.composer-modal--email-mobile-shell #quillEditor .ql-toolbar.ql-snow {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .composer-modal.composer-modal--email-mobile-shell #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-compact {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
  }

  .composer-modal.composer-modal--email-mobile-shell #quillEditor .ql-container.ql-snow {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 0 10px 10px !important;
    background: #ffffff !important;
  }

  .composer-modal.composer-modal--email-mobile-shell #quillEditor .ql-editor {
    min-height: 120px !important;
    padding: 10px 10px !important;
  }

  .composer-modal.composer-modal--email-mobile-shell #quillEditor .ql-editor.ql-blank::before {
    left: 10px !important;
    right: 10px !important;
  }

  /* Sticky bottom Send bar (injected by JS on email + narrow viewport) */
  .composer-email-mobile-bottom-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 10002;
  }

  .composer-email-mobile-bottom-bar__secondary {
    flex: 0 0 auto;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .composer-email-mobile-bottom-bar__send {
    flex: 1 1 auto;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    letter-spacing: 0.01em;
  }

  .composer-email-mobile-bottom-bar__more {
    flex: 0 0 auto;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 16px !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email #emailHeaderSection,
  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-email-header--mobile-priority {
    background: var(--mm-surface) !important;
    border-bottom-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-toolbar-tabstrip {
    padding: 2px 6px 0 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-toolbar-tab {
    padding: 3px 6px !important;
    min-height: 26px !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-toolbar-panel,
  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-toolbar-persistent {
    padding: 2px 8px 3px !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-toolbar .btn.small {
    padding: 3px 6px !important;
    min-height: 28px !important;
    font-size: 10px !important;
  }

  body[data-theme="momentum"] .composer-email-mobile-bottom-bar {
    background: color-mix(in srgb, var(--mm-surface) 96%, transparent) !important;
    border-top-color: var(--mm-border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.22);
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email #emailHeaderSection input#emailTo {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-compose-more-menu {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    box-shadow: var(--mm-shadow-md) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-compose-more-summary {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__secondary {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
    box-shadow: none !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__send {
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
    color: #fff !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-email-mobile-bottom-bar__send .composer-svg-ico {
    stroke: currentColor;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-compose-menu-item {
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-compose-menu-item:hover,
  body[data-theme="momentum"] .composer-modal.composer-modal--email .composer-compose-menu-item:focus-visible {
    background: color-mix(in srgb, var(--mm-accent) 12%, transparent) !important;
  }
}

/* Email composer mobile drawer — compact tabs/buttons (640–767px; phone rules above at ≤639px) */
@media (max-width: 767px) {
  .composer-modal.composer-modal--email .composer-toolbar-tabstrip {
    padding: 2px 6px 0 !important;
  }

  .composer-modal.composer-modal--email .composer-toolbar-tab {
    min-height: 26px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  .composer-modal.composer-modal--email .composer-toolbar-tab[aria-selected="true"] {
    min-height: 27px !important;
  }

  .composer-modal.composer-modal--email.composer--tools-open .composer-toolbar {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* body.is-mobile: email compose viewport for 640–767px tablet portrait */
body.is-mobile .composer-modal.composer-modal--email .composer-main-column,
body.is-mobile .composer-modal.composer-modal--email #documentCanvasViewport,
body.is-mobile .composer-modal.composer-modal--email #quillEditor {
  min-height: 0 !important;
}

body.is-mobile .composer-modal.composer-modal--email #quillEditor .ql-container {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 640–767px + body.is-mobile: same full-width email editor as phone shell */
body.is-mobile #composerModal.composer-modal--email-mobile-shell.print-layout-mode #documentCanvasViewport,
body.is-mobile .composer-modal.composer-modal--email-mobile-shell.print-layout-mode #documentCanvasViewport {
  padding: 6px 8px 12px !important;
  align-items: stretch !important;
}

body.is-mobile #composerModal.composer-modal--email-mobile-shell.print-layout-mode #quillEditor,
body.is-mobile .composer-modal.composer-modal--email-mobile-shell.print-layout-mode #quillEditor {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.is-mobile .composer-modal.composer-modal--email .composer-toolbar-persistent {
  display: none !important;
}

body.is-mobile .composer-modal.composer-modal--email .composer-header-actions #saveChangesBtn {
  display: none !important;
}

body.is-mobile .composer-modal.composer-modal--email .composer-main-column {
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
}

body.is-mobile .composer-modal.composer-modal--email #composerGuidanceRow.composer-guidance-row {
  display: none !important;
}

body.is-mobile .composer-modal.composer-modal--email .composer-toolbar-tab {
  min-height: 26px !important;
  padding: 3px 6px !important;
  font-size: 9px !important;
}

body.is-mobile .composer-modal.composer-modal--email.composer--tools-open .composer-toolbar {
  max-height: none !important;
  overflow: visible !important;
}

body.is-mobile .composer-modal.composer-modal--email #emailHeaderSection,
body.is-mobile .composer-modal.composer-modal--email .composer-email-header--mobile-priority {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}

body.is-mobile .composer-modal.composer-modal--email #emailHeaderSection input#emailTo {
  font-size: 16px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
}

body.is-mobile .composer-email-mobile-bottom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.1);
  z-index: 10002;
}

body.is-mobile .composer-email-mobile-bottom-bar__send {
  flex: 1 1 auto;
  min-height: 48px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.is-mobile .composer-modal.composer-modal--email #composerMobileTemplate,
body.is-mobile .composer-modal.composer-modal--email #composerMobileSave,
body.is-mobile .composer-modal.composer-modal--email #composerMobileSend {
  display: none !important;
}

@media (prefers-reduced-transparency: reduce) {
  .composer-email-mobile-bottom-bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE QUILL TOOLBAR (≤767px) — 3 rows + ⋯ more; width matches editor card
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #composerModal.composer-modal {
    overflow-x: hidden !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-main-column,
  .composer-modal.composer-modal--email-mobile-shell .composer-main-column {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* Stop global .ql-toolbar { flex-wrap: wrap } from stacking every group on its own line */
  .composer-modal #quillEditor > .ql-toolbar.ql-snow.ql-toolbar--mobile-compact {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .composer-modal #quillEditor > .ql-toolbar.ql-snow:not(.ql-toolbar--mobile-compact) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 44px !important;
    -webkit-overflow-scrolling: touch;
  }

  .composer-modal #quillEditor > .ql-toolbar.ql-snow:not(.ql-toolbar--mobile-compact) > .ql-formats {
    flex-shrink: 0;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact > .ql-formats {
    display: none !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact > .ql-toolbar-mobile-row1,
  .composer-modal #quillEditor .ql-toolbar--mobile-compact > .ql-toolbar-mobile-row2,
  .composer-modal #quillEditor .ql-toolbar--mobile-compact > .ql-toolbar-mobile-row3 {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .composer-modal #documentCanvasViewport {
    padding: 8px 10px 12px !important;
    box-sizing: border-box !important;
  }

  .composer-modal.print-layout-mode #documentCanvasViewport {
    padding: 8px 10px 12px !important;
  }

  .composer-modal #quillEditor {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .composer-modal.print-layout-mode #quillEditor {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
  }

  #composerModal.composer-modal--email-mobile-shell.print-layout-mode #quillEditor,
  .composer-modal.composer-modal--email-mobile-shell.print-layout-mode #quillEditor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  #composerModal.composer-modal--email-mobile-shell.print-layout-mode #documentCanvasViewport,
  .composer-modal.composer-modal--email-mobile-shell.print-layout-mode #documentCanvasViewport {
    padding: 6px 8px 12px !important;
    align-items: stretch !important;
  }

  .composer-modal.composer-modal--email-mobile-shell #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-compact {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-compact {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 4px 6px 2px !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: #fff !important;
    overflow: visible !important;
    max-height: none !important;
    flex-shrink: 0 !important;
  }

  .composer-modal #quillEditor .ql-container.ql-snow {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 0 10px 10px !important;
    background: #ffffff !important;
  }

  .composer-modal #quillEditor .ql-toolbar.ql-snow:not(.ql-toolbar--mobile-compact) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 6px !important;
    max-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-row1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-row1::-webkit-scrollbar {
    display: none;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-row2,
  .composer-modal #quillEditor .ql-toolbar-mobile-row3 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-row2::-webkit-scrollbar,
  .composer-modal #quillEditor .ql-toolbar-mobile-row3::-webkit-scrollbar {
    display: none;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-row3 {
    padding-bottom: 2px;
    overflow: visible !important;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more[open] {
    z-index: 10070;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-formats {
    margin-right: 4px !important;
    flex-shrink: 0;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-font {
    width: 4rem !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-size {
    width: 2.85rem !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-header {
    width: 3rem !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-lineheight {
    width: 3.6rem !important;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-row2 .ql-formats {
    margin-right: 2px !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-formats button:not(.ql-picker-label) {
    width: 22px !important;
    height: 22px !important;
    margin: 0 1px !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker-label {
    padding: 2px 4px !important;
    font-size: 11px !important;
  }

  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-font .ql-picker-label::before,
  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-size .ql-picker-label::before,
  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-header .ql-picker-label::before,
  .composer-modal #quillEditor .ql-toolbar--mobile-compact .ql-picker.ql-lineheight .ql-picker-label::before {
    font-size: 11px !important;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more-trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    box-sizing: border-box;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more-trigger::-webkit-details-marker {
    display: none;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more-trigger__icon {
    display: inline-flex;
    line-height: 0;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more-trigger__icon .composer-svg-ico {
    width: 16px;
    height: 16px;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more:not([open]) .ql-toolbar-mobile-more-panel {
    display: none !important;
  }

  .composer-modal #quillEditor .ql-toolbar-mobile-more[open] .ql-toolbar-mobile-more-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10070;
    padding: 6px;
    min-width: min(220px, 88vw);
    max-width: min(280px, 92vw);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  }

  body[data-theme="momentum"] .composer-modal #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-compact,
  body[data-theme="momentum"] .composer-modal #quillEditor .ql-container.ql-snow {
    border-color: var(--mm-border) !important;
    background: var(--mm-surface) !important;
  }

  body[data-theme="momentum"] .composer-modal #quillEditor .ql-toolbar-mobile-more-trigger {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal #quillEditor .ql-toolbar-mobile-more[open] .ql-toolbar-mobile-more-panel {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    box-shadow: var(--mm-shadow-md) !important;
  }
}

/* Document editor: placeholder inset must match layout margins (typed text padding) */
.composer-modal.composer-modal--document #quillEditor .ql-editor.ql-blank::before {
  left: var(--doc-margin-left, 48px) !important;
  right: var(--doc-margin-right, 48px) !important;
  font-style: normal !important;
  color: #94a3b8 !important;
}

.composer-modal.composer-modal--document.print-layout-mode #quillEditor .ql-editor.ql-blank::before {
  top: calc(var(--doc-nav-height, 0px) + var(--doc-margin-top, 48px)) !important;
}

/* Document mobile chrome — phone only (desktop keeps unified toolbar) */
.composer-modal .composer-document-mobile-chrome,
.composer-modal .composer-document-mobile-bottom-bar {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENT COMPOSER — MOBILE SHELL (≤767px, .composer-modal--document-mobile-shell)
   Phases 1–3: viewport, action row, slim Tools bar, bottom Save bar
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .composer-modal.composer-modal--document .composer-document-mobile-chrome,
  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-chrome {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 28;
    overflow: visible !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar {
    display: flex !important;
  }

  .composer-modal.composer-modal--document .composer-document-mobile-bottom-bar {
    display: none;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 10px !important;
    min-height: 52px;
    box-sizing: border-box;
    overflow: visible !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-tools-row--primary {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px !important;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-tool,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    line-height: 1 !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-tool__glyph {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
    margin: 0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-tool__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-details {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    align-self: center;
    margin-left: 2px;
    overflow: visible !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-details[open] {
    z-index: 10070;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-summary {
    list-style: none;
    cursor: pointer;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    user-select: none;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-summary::-webkit-details-marker {
    display: none;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: min(220px, 88vw);
    max-height: min(52vh, 340px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    z-index: 10060;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-details[open] .composer-doc-more-menu {
    display: flex;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10070;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-item:hover,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-item:focus-visible {
    background: rgba(148, 163, 184, 0.14);
    outline: none;
  }

  /* Let ⋯ menus paint over the editor card (parent #quillEditor had overflow:hidden) */
  .composer-modal.composer-modal--document-mobile-shell #quillEditor {
    overflow: visible !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-container.ql-snow {
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileBar.composer-mobile-bar--document {
    padding: 4px 10px !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileBar #composerMobileTemplate,
  .composer-modal.composer-modal--document-mobile-shell #composerMobileBar #composerMobileSave,
  .composer-modal.composer-modal--document-mobile-shell #composerMobileBar #composerMobileSend {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-header-actions {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-header-actions #saveChangesBtn {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-header--document-title-inline {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 10px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-header-doc-title-row {
    flex-wrap: nowrap !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-header-doc-trailing {
    flex-shrink: 0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerGuidanceRow.composer-guidance-row {
    display: none !important;
  }

  /* Phase 5 — status chip hidden on phone (contact + N/3); Tools bar covers data/merge */
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status,
  .composer-modal.composer-modal--document-mobile-shell #composerDocumentMobileStatus {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__btn:hover,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__btn:focus-visible {
    background: #f1f5f9;
    outline: none;
    border-color: #cbd5e1;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__dot--ready {
    background: #10b981;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__dot--warn {
    background: #f59e0b;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__chev {
    flex-shrink: 0;
    font-size: 10px;
    color: #64748b;
    line-height: 1;
  }

  .composer-modal.composer-modal--document-mobile-shell #mergeModeBanner {
    padding: 6px 36px 6px 12px !important;
    gap: 4px 8px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #mergeModeBannerText {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-header-doc-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-title-input {
    min-width: 0 !important;
    width: 100% !important;
    text-overflow: ellipsis !important;
  }

  /* Phase 6 — hide edge rail; Object opens as bottom sheet */
  .composer-modal.composer-modal--document-mobile-shell .insert-block-drawer-edge-rail {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #templateDataScrim {
    z-index: 10001 !important;
    background: rgba(15, 23, 42, 0.48) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* Add object — full-screen on phone (maximize block browsing, light cohesive UI) */
  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: none !important;
    transform: translateY(100%) !important;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    z-index: 10003 !important;
    padding: 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet.insert-block-drawer--open,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet.insert-block-drawer--open {
    transform: translateY(0) !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet > div:first-child,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet > div:first-child {
    flex-shrink: 0 !important;
    padding: 10px 12px 8px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet > div:first-child::before,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet > div:first-child::before {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerTitle,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerTitle {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerSub,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerSub {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerPropsToggleBtn,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerPropsToggleBtn {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet:not(.insert-block-drawer--properties-mode):not(.insert-block-drawer--document-setup-mode) #insertBlockDrawerHubTabs,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet:not(.insert-block-drawer--properties-mode):not(.insert-block-drawer--document-setup-mode) #insertBlockDrawerHubTabs {
    display: flex !important;
    margin-top: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerJumpWrap,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerJumpWrap {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #closeInsertBlockDrawerBtn,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #closeInsertBlockDrawerBtn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 18px !important;
    border: 1px solid #e2e8f0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerBody,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 8px 10px 10px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-stack,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-stack,
  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-layout,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-layout,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 8px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 0 4px !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    background: #ffffff !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail::-webkit-scrollbar,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail::-webkit-scrollbar {
    display: none;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn {
    width: auto !important;
    min-width: 76px !important;
    min-height: 48px !important;
    flex: 0 0 auto !important;
    padding: 6px 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    box-shadow: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn--active,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn--active {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
    box-shadow: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-content-col,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-content-col {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-search-wrap,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-search-wrap {
    max-width: none !important;
    flex-shrink: 0 !important;
    padding: 0 0 6px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-search-input,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-search-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-panel,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-grid,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile__icon,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile__icon {
    padding: 14px 0 12px !important;
    margin-bottom: 8px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile__icon svg,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile__icon svg {
    width: 52px !important;
    height: 52px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-starters-details,
  .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-starters-details {
    margin-bottom: 6px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell.composer--insert-sheet-open #templateDataScrim,
  .composer-modal.composer-modal--document.composer--insert-sheet-open #templateDataScrim {
    display: block !important;
    pointer-events: auto !important;
    z-index: 10002 !important;
    background: rgba(15, 23, 42, 0.42) !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-object-fab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 14px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 10001;
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45);
    cursor: pointer;
    flex-direction: column;
    gap: 0;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-object-fab__icon {
    display: inline-flex;
    line-height: 0;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-object-fab__icon .composer-svg-ico {
    width: 20px;
    height: 20px;
    stroke: #fff;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-object-fab__plus {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    opacity: 0.95;
  }

  .composer-modal.composer-modal--document-mobile-shell.composer--insert-sheet-open .composer-doc-mobile-object-fab {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer .composer-toolbar-persistent {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer #useTemplateBtn,
  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer #composerAiDocumentBtn {
    display: none !important;
  }

  /* Collapsed: no drawer bleed onto Quill formatting bar */
  .composer-modal.composer-modal--document-mobile-shell:not(.composer--tools-open) #composerMobileDrawer {
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell.composer--tools-open #composerMobileDrawer,
  .composer-modal.composer-modal--document-mobile-shell.composer--tools-open .composer-toolbar {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 26 !important;
    contain: layout paint !important;
    max-height: min(34vh, 200px) !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer .composer-toolbar-panel--unified,
  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer .composer-toolbar-mainrow,
  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer .composer-toolbar-unified-tools--doc-mobile-drawer {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-drawer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 10px 10px;
    box-sizing: border-box;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 6px;
    line-height: 1.2;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid > .composer-action-item,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid > .composer-doc-drawer-chip,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid > .composer-doc-drawer-deal,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid > .composer-doc-drawer-zoom {
    min-width: 0;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-deal {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-deal #dealSelector {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    box-sizing: border-box;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid .composer-action-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    position: static !important;
    box-sizing: border-box;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    width: 100% !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    box-sizing: border-box;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-zoom {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    min-height: 44px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-sizing: border-box;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-zoom .composer-zoom-label__text {
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-zoom .composer-zoom-select,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-zoom select {
    flex: 1 1 auto;
    min-height: 36px !important;
    max-width: none !important;
    font-size: 13px !important;
  }

  /* Data panel: stay in drawer grid — block global display:contents overlap rules */
  .composer-modal.composer-modal--document-mobile-shell.composer--tools-open .composer-data-dropdown,
  .composer-modal.composer-modal--document-mobile-shell.composer--tools-open .composer-data-panel--drawer-flat,
  .composer-modal.composer-modal--document-mobile-shell.composer--tools-open .composer-data-panel--drawer-doc-mobile,
  .composer-modal.composer-modal--document-mobile-shell.composer--tools-open .composer-data-panel--drawer-doc-mobile .composer-data-panel__grid {
    display: block !important;
    position: static !important;
    width: 100% !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-data-panel--drawer-doc-mobile .composer-data-panel__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100% !important;
  }

  /* Editor card — full width on phone (beats styles-master 8.5in / 24px canvas padding) */
  #composerModal.composer-modal--document-mobile-shell.print-layout-mode #documentCanvasViewport,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode #documentCanvasViewport {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 6px 8px 12px !important;
    box-sizing: border-box !important;
    background: #e2e8f0 !important;
  }

  #composerModal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-toolbar.ql-snow {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Only stack 3 rows after JS adds .ql-toolbar--mobile-compact (avoid 4+ wrapped lines) */
  .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-compact {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #quillEditor > .ql-toolbar.ql-snow.ql-toolbar--mobile-compact > .ql-formats {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #quillEditor > .ql-toolbar.ql-snow.ql-toolbar--mobile-compact > .ql-toolbar-mobile-row1,
  .composer-modal.composer-modal--document-mobile-shell #quillEditor > .ql-toolbar.ql-snow.ql-toolbar--mobile-compact > .ql-toolbar-mobile-row2,
  .composer-modal.composer-modal--document-mobile-shell #quillEditor > .ql-toolbar.ql-snow.ql-toolbar--mobile-compact > .ql-toolbar-mobile-row3 {
    display: flex !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-container.ql-snow {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }

  #composerModal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor .ql-container,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor .ql-container {
    min-height: auto !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-editor {
    border-radius: 0 0 9px 9px !important;
  }

  /*
   * Placeholder must use the same inset as typed text (layout margins).
   * Global .ql-editor.ql-blank::before { left: 16px } ignores print margins (48px desktop).
   */
  .composer-modal #quillEditor .ql-editor.ql-blank::before {
    left: var(--doc-margin-left, 8px) !important;
    right: var(--doc-margin-right, 8px) !important;
    font-style: normal !important;
    color: #94a3b8 !important;
  }

  .composer-modal.print-layout-mode #quillEditor .ql-editor.ql-blank::before {
    top: calc(var(--doc-nav-height, 0px) + var(--doc-margin-top, 14px)) !important;
  }

  /* Phone: minimal side inset — blocks use nearly full screen width */
  #composerModal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor .ql-editor,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor .ql-editor,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode.doc-mode-web-longform #quillEditor .ql-editor,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode:not(.doc-mode-web-longform) #quillEditor .ql-editor {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 16px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    min-height: min(40vh, 360px) !important;
  }

  #composerModal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor .ql-editor,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode #quillEditor .ql-editor {
    padding-top: calc(var(--doc-nav-height, 0px) + 12px) !important;
  }

  #composerModal.composer-modal--document-mobile-shell.print-layout-mode .ql-editor .line-items-embed,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode .ql-editor .line-items-embed {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #composerModal.composer-modal--document-mobile-shell.print-layout-mode .ql-editor .text-block-shell,
  .composer-modal.composer-modal--document-mobile-shell.print-layout-mode .ql-editor .text-block-shell {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fallback when mobile shell class missing but viewport is phone */
  @media (max-width: 767px) {
    #composerModal.composer-modal--document.print-layout-mode #documentCanvasViewport {
      padding: 6px 8px 12px !important;
    }

    #composerModal.composer-modal--document.print-layout-mode #quillEditor {
      width: 100% !important;
      max-width: 100% !important;
    }

    #composerModal.composer-modal--document.print-layout-mode #quillEditor .ql-container {
      min-height: auto !important;
    }

    #composerModal.composer-modal--document.print-layout-mode #quillEditor .ql-editor {
      min-height: min(40vh, 360px) !important;
    }
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-container.ql-snow {
    border: 1px solid var(--mm-border, #475569) !important;
    border-top: 1px solid color-mix(in srgb, var(--mm-border) 70%, transparent) !important;
    background: var(--mm-surface, #fff) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-editor {
    background: var(--mm-surface, #fff) !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #editorDocNavBar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Formatting strip — always visible below Tools bar / drawer */
  .composer-modal.composer-modal--document-mobile-shell #quillEditor .ql-toolbar.ql-snow.ql-toolbar--mobile-compact {
    position: relative !important;
    z-index: 22 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 #f1f5f9;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-zoom-slot {
    padding: 4px 6px 6px;
    border-top: 1px solid #f1f5f9;
    margin-top: 2px;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-zoom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    width: 100%;
    min-height: 40px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-zoom .composer-zoom-label__text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-zoom .composer-zoom-select,
  .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-zoom select {
    flex: 1 1 auto;
    min-height: 36px !important;
    max-width: none !important;
    font-size: 13px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-retained {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer .composer-toolbar-sep {
    display: none !important;
  }

  .composer-modal.composer-modal--document-mobile-shell #composerMobileDrawer .composer-track-toggle {
    display: none !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell.composer--tools-open #composerMobileDrawer {
    background: var(--mm-surface) !important;
    border-bottom-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__title {
    color: var(--mm-text-muted, #94a3b8) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-section__grid .composer-action-item,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-chip,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-drawer-zoom {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-main-column {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar {
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__secondary .composer-svg-ico {
    width: 20px;
    height: 20px;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__save {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 1 1 auto;
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__save-icon {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
  }

  .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__save-icon .composer-svg-ico {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 400px) {
    .composer-modal.composer-modal--document-mobile-shell .composer-document-tool__label,
    .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-summary .composer-document-tool__label {
      display: none !important;
    }

    .composer-modal.composer-modal--document-mobile-shell .composer-document-tool,
    .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-summary {
      gap: 0 !important;
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      padding: 0 !important;
      border-radius: 50% !important;
    }

    .composer-modal.composer-modal--document-mobile-shell .composer-document-tool__glyph {
      width: 100%;
      height: 100%;
    }

    .composer-modal.composer-modal--document-mobile-shell .composer-document-tool__glyph .composer-svg-ico {
      width: 18px;
      height: 18px;
    }
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-chrome,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-actions {
    background: var(--mm-surface) !important;
    border-bottom-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-tool:not(.composer-document-tool--primary),
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-summary {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-tool--primary {
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
    color: #fff !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    box-shadow: var(--mm-shadow-md) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-item {
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-item:hover,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-more-menu-item:focus-visible {
    background: color-mix(in srgb, var(--mm-accent) 12%, transparent) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar {
    background: color-mix(in srgb, var(--mm-surface) 96%, transparent) !important;
    border-top-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__secondary {
    background: var(--mm-surface) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar__save {
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
    color: #fff !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #composerMobileBar.composer-mobile-bar--document {
    background: var(--mm-surface) !important;
    border-bottom-color: var(--mm-border) !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__btn {
    background: var(--mm-surface-elevated, var(--mm-surface)) !important;
    border-color: var(--mm-border) !important;
    color: var(--mm-text-primary) !important;
    box-shadow: none !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__btn:hover,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-status__btn:focus-visible {
    background: color-mix(in srgb, var(--mm-accent) 10%, var(--mm-surface)) !important;
  }

  /* Momentum: keep Add object picker light on phone (readable tiles, no dark sheet) */
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    box-shadow: none !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet > div:first-child,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet > div:first-child,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerTitle,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerTitle {
    color: #0f172a !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerBody,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet #insertBlockDrawerBody {
    background: #f1f5f9 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-hub,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-hub {
    background: #eef2f7 !important;
    border-color: #d6dee8 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-hub__btn,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-hub__btn {
    color: #475569 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-hub__btn--active,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-drawer-hub__btn--active {
    background: linear-gradient(180deg, #2f6bff 0%, #2563eb 100%) !important;
    color: #fff !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn--active,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-rail-btn--active {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1d4ed8 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .insert-block-tile {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-section,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-section {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-section__title,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-section__title,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-section__intro,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-section__intro {
    color: #475569 !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-settings-toggle,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-settings-toggle {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-settings-toggle__title,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-settings-toggle__title {
    color: #0f172a !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-settings-toggle__desc,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-settings-toggle__desc {
    color: #64748b !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-field__label,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-field__label,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-field__hint,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-field__hint {
    color: #64748b !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-field__input,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-field__input,
  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-audit-out,
  body[data-theme="momentum"] .composer-modal.composer-modal--document #insertBlockDrawer.insert-block-drawer--mobile-sheet .portal-setup-audit-out {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  body[data-theme="momentum"] .composer-modal.composer-modal--document-mobile-shell .composer-doc-mobile-object-fab {
    background: var(--mm-accent) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mm-accent) 45%, transparent) !important;
  }
}

body.is-mobile .composer-modal.composer-modal--document-mobile-shell .composer-main-column {
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}

body.is-mobile .composer-modal.composer-modal--document-mobile-shell .composer-document-mobile-bottom-bar {
  display: flex !important;
}