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;
+}

src/styles/components.css

@@ -550,3 +550,60 @@
   justify-content: flex-end;
   margin-top: 1.1rem;
 }
+
+/* Collapsible cards */
+.card-collapsible .card-header {
+  gap: 12px;
+}
+.card-collapsible .card-actions {
+  align-items: center;
+}
+.card-collapse-toggle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #c9c3b9;
+  border-radius: 999px;
+  background: linear-gradient(#ffffff, #f1efeb);
+  color: #4f4a43;
+  cursor: pointer;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 1px rgba(0,0,0,.05);
+  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+.card-collapse-toggle:hover {
+  border-color: #aaa299;
+  background: linear-gradient(#ffffff, #e8e5df);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 2px 5px rgba(0,0,0,.08);
+}
+.card-collapse-toggle:focus-visible {
+  outline: 3px solid rgba(82, 130, 177, .22);
+  outline-offset: 2px;
+}
+.card-collapse-toggle svg {
+  transition: transform .22s ease;
+}
+.card-collapsible.is-collapsed .card-collapse-toggle svg {
+  transform: rotate(-180deg);
+}
+.card-collapse-region {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows .24s ease, opacity .18s ease;
+}
+.card-collapsible.is-collapsed .card-collapse-region {
+  display: none;
+}
+.card-collapse-region > .card-body {
+  min-height: 0;
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  .card-collapse-toggle,
+  .card-collapse-toggle svg,
+  .card-collapse-region {
+    transition: none;
+  }
+}