/* Messaging-only surfaces. CDP/MA and the shared navigation remain untouched.
   Conversation mode owns its fixed-height surface in conversation-workspace.css. */
body.messaging-surface {
  --msg-surface-line: #edf0ee;
  --msg-surface-inset: 24px;
}
body.messaging-surface:not(.conversation-mode) {
  margin: 0;
  padding: 0 16px 150px;
  background: #f5f6f8;
  box-sizing: border-box;
}
.messaging-surface:not(.conversation-mode) > main {
  padding: 0 24px 24px;
  margin: 0;
  max-width: none;
  min-width: 0;
  min-height: 440px;
  border: 1px solid #e6e8ec;
  border-radius: 20px;
  background: #fff;
  box-sizing: border-box;
}
.messaging-surface > main > :is(.top-flow, .ops-top) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 64px;
  padding: 12px var(--msg-surface-inset);
  margin: 0 calc(-1 * var(--msg-surface-inset)) 24px;
  border: 0;
  border-bottom: 1px solid var(--msg-surface-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}
.messaging-surface.conversation-mode > main > .top-flow { margin: 0; }
.messaging-surface > main > :is(.top-flow, .ops-top) .breadcrumb {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #647087;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.messaging-surface > main > :is(.top-flow, .ops-top) .breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.messaging-surface > main > :is(.top-flow, .ops-top) .breadcrumb li { display: flex; align-items: center; padding: 0; margin: 0; }
.messaging-surface > main > :is(.top-flow, .ops-top) .breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid #aab4bf; border-right: 1px solid #aab4bf; transform: rotate(45deg); margin: 0 12px 0 10px; }
.messaging-surface > main > :is(.top-flow, .ops-top) :is(.top-actions, .ops-inline) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.messaging-surface > main > :is(.top-flow, .ops-top) button {
  box-sizing: border-box;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}
.messaging-surface > main > :is(.top-flow, .ops-top) .top-button { border: 1px solid #d9dfe5; background: #fff; color: #30363b; }
.messaging-surface > main > :is(.top-flow, .ops-top) .next-button { border: 1px solid #0d713e; background: #0d713e; color: #fff; }
.messaging-surface > main > :is(.top-flow, .ops-top) .byte-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 20px; background: #edf3f8; color: #52657c; box-sizing: border-box; }
.messaging-surface .conversation-modes { padding: 0; gap: 4px; background: transparent; }
.messaging-surface .conversation-modes button { border: 0; background: transparent; color: #61736a; }
.messaging-surface .conversation-modes button[aria-pressed=true] { background: #edf6f0; color: #0d713e; box-shadow: none; }
.messaging-surface:not(.conversation-mode) :is(.composer-title, .ops-heading h1, #settings-root > header h1) { font-size: 26px; font-weight: 800; line-height: 36px; letter-spacing: -.6px; margin: 0; }
.messaging-surface:not(.conversation-mode) :is(.composer-sub, .ops-heading > div > p, #settings-root > header > p) { font-size: 14px; font-weight: 400; line-height: 22px; color: #687180; margin: 8px 0 0; }
.messaging-surface:not(.conversation-mode) :is(.composer-head, .ops-heading) { padding: 0; align-items: flex-start; gap: 16px; }

/* A single writing surface with an editor / preview divider. */
.messaging-surface.send-page .send-workbench { gap: 0; }
.messaging-surface.send-page .send-editor-workspace {
  padding: 0 24px 0 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.messaging-surface.send-page #preview-card {
  padding: 0 0 0 24px;
  border: 0;
  border-left: 1px solid var(--msg-surface-line);
  border-radius: 0;
  background: transparent;
}
.messaging-surface.aim-page:not(.conversation-mode) .aim-main-grid { gap: 0; }
.messaging-surface.aim-page:not(.conversation-mode) .aim-editor-column { padding-right: 24px; }
.messaging-surface.aim-page:not(.conversation-mode) .aim-editor-column > :is(.aim-composer, .aim-channel-bar, .aim-workflow-bar) {
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid var(--msg-surface-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.messaging-surface.aim-page:not(.conversation-mode) .aim-editor-column > .aim-composer { border-bottom: 0; }
.messaging-surface.aim-page:not(.conversation-mode) .aim-preview-panel .right-card {
  padding: 0 0 0 24px;
  border: 0;
  border-left: 1px solid var(--msg-surface-line);
  border-radius: 0;
  background: transparent;
}

/* Page-level boxes become sections; meaningful metric/chart cards stay intact. */
.messaging-surface.contacts-page .contacts-card,
.messaging-surface.tpl-page:not(.send-page) > main > .tpl-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin-bottom: 24px;
  background: transparent;
}
.messaging-surface.tpl-page #builder > .tpl-card {
  padding: 0 0 24px;
  margin-bottom: 24px;
  border: 0;
  border-bottom: 1px solid var(--msg-surface-line);
  border-radius: 0;
  background: transparent;
}
.messaging-surface.tpl-page #builder > .tpl-card:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.messaging-surface.tpl-page .tpl-builder-grid { gap: 0; }
.messaging-surface.tpl-page .tpl-builder-grid > .tpl-card { border: 0; border-radius: 0; background: transparent; }
.messaging-surface.tpl-page .tpl-builder-grid > .tpl-editor { padding: 0 24px 0 0; }
.messaging-surface.tpl-page .tpl-builder-grid > .tpl-preview { padding: 0 0 0 24px; border-left: 1px solid var(--msg-surface-line); }
.messaging-surface.ops-page > main > .ops-card,
.messaging-surface.ops-page:not([data-view=dashboard]) #ops-content > .ops-card {
  padding: 0 0 24px;
  margin-bottom: 24px;
  border: 0;
  border-bottom: 1px solid var(--msg-surface-line);
  border-radius: 0;
  background: transparent;
}
.messaging-surface.ops-page > main > .ops-card:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.messaging-surface #settings-root { gap: 24px; padding: 0 24px 24px; }
.messaging-surface #settings-root > .ops-top { margin-bottom: 0; }
.messaging-surface #settings-root > .ops-card { margin-bottom: 0; }
.messaging-surface #settings-root > header > .ops-muted:first-child { margin-top: 0; }

/* Follow each existing editor's stacking breakpoint in iframe pixels. */
@media (max-width: 880px) {
  .messaging-surface.send-page .send-editor-workspace { padding: 0; }
  .messaging-surface.send-page #preview-card {
    padding: 24px 0 0;
    margin-top: 24px;
    border-left: 0;
    border-top: 1px solid var(--msg-surface-line);
  }
}
@media (max-width: 740px) {
  body.messaging-surface { --msg-surface-inset: 16px; }
  body.messaging-surface:not(.conversation-mode) { padding: 0 8px 150px; }
  .messaging-surface:not(.conversation-mode) > main { padding: 0 16px 20px; border-radius: 16px; }
  .messaging-surface:not(.conversation-mode) > main > :is(.top-flow, .ops-top) { margin-bottom: 20px; }
  .messaging-surface.send-page .send-editor-workspace,
  .messaging-surface.aim-page:not(.conversation-mode) .aim-editor-column { padding: 0; }
  .messaging-surface.send-page #preview-card,
  .messaging-surface.aim-page:not(.conversation-mode) .aim-preview-panel .right-card {
    padding: 24px 0 0;
    margin-top: 24px;
    border-left: 0;
    border-top: 1px solid var(--msg-surface-line);
  }
  .messaging-surface #settings-root { padding: 0 16px 20px; }
  .messaging-surface #settings-root > .ops-top { margin-bottom: 0; }
  .messaging-surface.tpl-page .tpl-builder-grid > .tpl-editor { padding: 0; }
  .messaging-surface.tpl-page .tpl-builder-grid > .tpl-preview {
    padding: 24px 0 0;
    margin-top: 24px;
    border-left: 0;
    border-top: 1px solid var(--msg-surface-line);
  }
}