Mock server workflow - first draft

src/styles/campaign-workspace.css

@@ -664,6 +664,36 @@
   width: min(620px, 100%);
 }
 
+
+.template-preview-nav {
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.template-preview-count {
+  color: var(--muted);
+  margin: 0 0.4rem;
+  white-space: nowrap;
+}
+
+.template-preview-attachments {
+  margin-top: 16px;
+}
+
+.template-preview-attachments h3 {
+  margin: 0 0 8px;
+}
+
+.template-preview-attachments .app-table-wrap {
+  max-height: 220px;
+  overflow: scroll;
+  margin-top: 10px;
+}
+
+.template-preview-attachments code {
+  white-space: nowrap;
+}
+
 @media (max-width: 720px) {
   .template-preview-toolbar {
     display: grid;
@@ -802,7 +832,9 @@
 .attachment-sources-table th:nth-child(2),
 .attachment-sources-table td:nth-child(2) { min-width: 200px; }
 .attachment-sources-table th:nth-child(3),
-.attachment-sources-table td:nth-child(3) { width: 207px; }
+.attachment-sources-table td:nth-child(3),
+.attachment-sources-table th:nth-child(4),
+.attachment-sources-table td:nth-child(4) { width: 170px; }
 .attachment-sources-table th:last-child,
 .attachment-sources-table td:last-child { width: 123px; }
 
@@ -1112,7 +1144,7 @@
   flex-wrap: nowrap;
   justify-content: flex-end;
 }
-.version-line button.version-arrow {
+.version-arrow:is(button) {
   border: 0;
   background: transparent;
   padding: 0;
@@ -1120,7 +1152,37 @@
   font: inherit;
 }
 
+.version-arrow:is(button):disabled {
+  opacity: 0.24;
+  pointer-events: none;
+  cursor: default;
+}
+
 /* Overview version history refinements. */
 .version-history-table .current-version-row td {
   font-weight: 700;
 }
+
+.mock-message-detail {
+  margin-top: 16px;
+  border-top: 1px solid var(--line-subtle);
+  padding-top: 16px;
+}
+
+.mock-message-preview,
+.mock-message-raw {
+  width: 100%;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--line-subtle);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.62);
+  color: var(--text-primary);
+  padding: 12px;
+  white-space: pre-wrap;
+}
+
+.mock-message-raw {
+  max-height: 420px;
+  font-size: 0.82rem;
+}