/* ================================================================
   v42.6.3 — Messages hub ≈ macOS iMessage (dark)
   Conversation list, centered thread header, bubble chrome, composer.
   ================================================================ */

html body .msg-view,
html[data-app-theme="dark"] body .msg-view {
  background: #000 !important;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    system-ui, sans-serif;
}

html body .msg-split.msg-split-2col {
  background: #000 !important;
  position: relative;
  z-index: 1;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Left pane — conversation list (solid + scroll host; never transparent) */
html body .msg-left-pane,
html[data-app-theme="dark"] body .msg-left-pane {
  width: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #1c1c1e !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  z-index: 1 !important;
}

html body .msg-left-header {
  flex: 0 0 auto !important;
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: #1c1c1e !important;
  position: relative;
  z-index: 2;
}

/* Single scroll surface for recent threads. */
html body .msg-left-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #1c1c1e !important;
  position: relative;
  z-index: 1;
}

/* [hidden] must beat author display:flex/grid rules (chip row / menus / mount) */
html body .msg-chip-row[hidden],
html body .msg-range-custom-pop[hidden],
html body .msg-status-bar[hidden],
html body #lc-mount[hidden],
html body .msg-composer-plus-menu[hidden],
html body .msg-emoji-panel[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Campaign mount must never paint over the thread list */
html body .msg-view[data-msg-tab="threads"] #lc-mount,
html body #lc-mount[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* Campaign tab = filtered inbox (same split as Threads). Builder uses campaign-edit. */
html body .msg-view[data-msg-tab="campaign"] .msg-split {
  display: grid !important;
  position: relative;
  z-index: 1;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html body .msg-view[data-msg-tab="campaign"] #lc-mount,
html body .msg-view[data-msg-tab="campaign"] #lc-back-to-inbox {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html body .msg-view[data-msg-tab="campaign-edit"] .msg-split {
  display: none !important;
}
html body .msg-view[data-msg-tab="campaign-edit"] #lc-mount {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html body .msg-view[data-msg-tab="threads"] .msg-split {
  display: grid !important;
  position: relative;
  z-index: 1;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

html body .msg-title { display: none !important; }

html body .msg-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  position: relative;
}

html body .msg-search-icon {
  position: absolute;
  left: 12px;
  color: rgba(235, 235, 245, 0.4);
  pointer-events: none;
  z-index: 1;
}

html body .msg-search,
html[data-app-theme="dark"] body .msg-search {
  flex: 1 1 auto !important;
  height: 32px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 10px !important;
  border: none !important;
  background: rgba(118, 118, 128, 0.24) !important;
  color: #f5f5f7 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

html body .msg-search::placeholder {
  color: rgba(235, 235, 245, 0.4) !important;
}

html body .msg-search:focus,
html[data-app-theme="dark"] body .msg-search:focus {
  background: rgba(118, 118, 128, 0.32) !important;
  border: none !important;
  outline: none !important;
}

html body .msg-filter-toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--totaly-blue-500, var(--brand-blue-pure, #2196F3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
html body .msg-filter-toggle:hover { background: rgba(33, 150, 243, 0.12); }
html body .msg-filter-toggle[aria-expanded="true"] { background: rgba(33, 150, 243, 0.18); }

/* Compose new message (manual phone) — square+pencil like iMessage */
html body .msg-compose-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.24);
  color: #f5f5f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
html body .msg-compose-btn:hover {
  background: rgba(118, 118, 128, 0.36);
  color: #fff;
}

/* New Message — To: bar in the thread pane */
html body .msg-new-compose {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #000;
}
html body .msg-new-compose-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px;
  padding: 0 6px 0 14px;
  min-height: 36px;
  border-radius: 999px;
  background: #2c2c2e;
  border: 1px solid rgba(84, 84, 88, 0.55);
}
html body .msg-new-compose-label {
  flex: 0 0 auto;
  color: rgba(235, 235, 245, 0.55);
  font-size: 14px;
  font-weight: 500;
}
html body .msg-new-compose-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: #f5f5f7;
  font-size: 15px;
  padding: 8px 0;
  outline: none;
}
html body .msg-new-compose-input::placeholder {
  color: rgba(235, 235, 245, 0.35);
}
html body .msg-new-compose-add {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 4px;
  border: none;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.28);
  color: #f5f5f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
html body .msg-new-compose-add:hover {
  background: #0a84ff;
  color: #fff;
}

html body .msg-chip-row--filters {
  margin-top: 8px;
  gap: 6px;
}

/* Thread rows — iMessage list cell. Scroll is owned by .msg-left-scroll. */
html body .msg-threads-list {
  background: #1c1c1e !important;
  flex: none !important;
  overflow: visible !important;
  position: relative;
  z-index: 0;
}

/* Thread rows as grey contact cards on the near-black pane. */
html body .msg-thread-row,
html[data-app-theme="dark"] body .msg-thread-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px 10px 12px !important;
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.65) !important;
  background: #2c2c2e !important;
  text-decoration: none !important;
  cursor: pointer !important;
  min-height: 68px;
  box-sizing: border-box;
}

html body .msg-thread-row:hover,
html[data-app-theme="dark"] body .msg-thread-row:hover {
  background: #3a3a3c !important;
}

html body .msg-thread-row.is-active,
html[data-app-theme="dark"] body .msg-thread-row.is-active {
  background: #3a3a3c !important;
}

html body .msg-thread-avatar,
html body .msg-thread-header-avatar {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: rgba(235, 235, 245, 0.85) !important;
  background: #636366 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

html body .msg-thread-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .msg-thread-row1 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html body .msg-thread-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.01em;
}

html body .msg-thread-time {
  flex: 0 0 auto !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(235, 235, 245, 0.45) !important;
}

html body .msg-thread-row2 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body .msg-thread-preview,
html body .msg-preview-prefix {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(235, 235, 245, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .msg-thread-row.is-unread .msg-thread-name {
  font-weight: 700 !important;
}
html body .msg-thread-row.is-unread .msg-thread-preview {
  color: rgba(235, 235, 245, 0.72) !important;
  font-weight: 500 !important;
}

html body .msg-unread-dot {
  flex: 0 0 auto !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #0a84ff !important;
  margin-left: auto !important;
}

html body .msg-outreach-count {
  flex: 0 0 auto !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.32);
  color: rgba(235, 235, 245, 0.85);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html body .msg-thread-row.is-unread .msg-outreach-count {
  background: rgba(10, 132, 255, 0.22);
  color: #0a84ff;
}

html body .msg-campaign-edit-btn {
  display: none !important;
}

html body .msg-tab-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border-radius: 8px;
  color: rgba(235, 235, 245, 0.55);
  cursor: pointer;
}
html body .msg-tab-settings:hover,
html body .msg-tab.is-active .msg-tab-settings {
  color: #0a84ff;
  background: rgba(10, 132, 255, 0.12);
}
html body .msg-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .msg-empty-campaign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 20px !important;
  text-align: left;
}
html body .msg-empty-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #f5f5f7;
}
html body .msg-empty-copy,
html body .msg-empty-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(235, 235, 245, 0.55);
  max-width: 320px;
}
html body .msg-campaign-settings-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: rgba(10, 132, 255, 0.18);
  color: #0a84ff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
html body .msg-campaign-settings-cta:hover {
  background: rgba(10, 132, 255, 0.28);
}

html body .lcp-start-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: #0a84ff;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html body .lcp-start-btn:hover {
  filter: brightness(1.08);
}
html body .lcp-start-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
html body .stl-start-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(235, 235, 245, 0.55);
}

html body .lc-back-to-inbox {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.55);
  background: #1c1c1e;
}
html body .lc-back-btn {
  border: none;
  background: transparent;
  color: #0a84ff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}

html body .msg-thread-row3,
html body .msg-speed-reply-badge,
html body .msg-speed-reply-send,
html body .msg-speed-reply-main,
html body .msg-speed-reply-name,
html body .msg-speed-reply-sub,
html body .msg-speed-reply-row1,
html body .msg-speed-reply-time {
  display: none !important;
}

/* Right pane — conversation */
html body .msg-right-pane,
html body .msg-thread-pane,
html[data-app-theme="dark"] body .msg-right-pane {
  background: #000 !important;
}

html body .msg-empty-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  color: rgba(235, 235, 245, 0.55);
}
html body .msg-empty-large .msg-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(235, 235, 245, 0.7);
}
html body .msg-empty-large .msg-empty-sub {
  font-size: 13px;
  color: rgba(235, 235, 245, 0.4);
}
html body .msg-empty-emoji { display: none !important; }

html body .msg-thread-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  min-height: 64px;
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.65) !important;
  background: rgba(28, 28, 30, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

html body .msg-thread-header-main {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0;
}

html body .msg-thread-header-avatar {
  width: 40px !important;
  height: 40px !important;
  font-size: 15px !important;
}

html body .msg-thread-name-big {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-align: center;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .msg-thread-meta { display: none !important; }

html body .msg-thread-back {
  color: #0a84ff !important;
  background: transparent !important;
}

html body .msg-thread-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 72px;
  justify-content: flex-end;
}

html body .msg-thread-link {
  background: transparent !important;
  color: #0a84ff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 6px !important;
}

html body .msg-thread-close {
  border: none;
  background: transparent;
  color: rgba(235, 235, 245, 0.55);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
html body .msg-thread-close:hover { color: #fff; }

/* Bubbles */
html body .msg-bubble-stream,
html[data-app-theme="dark"] body .msg-bubble-stream {
  background: #000 !important;
  padding: 16px 18px 12px !important;
  gap: 2px !important;
}

html body .msg-date-sep {
  margin: 16px 0 10px !important;
}
html body .msg-date-sep span {
  background: transparent !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(235, 235, 245, 0.45) !important;
}

html body .msg-bubble-row {
  display: flex !important;
  flex-direction: column !important;
  width: fit-content !important;
  max-width: min(72%, 520px) !important;
  margin-bottom: 3px !important;
  min-width: 0 !important;
}
html body .msg-bubble-row.msg-bubble-out {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
html body .msg-bubble-row.msg-bubble-in {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

html body .msg-bubble {
  width: max-content !important;
  max-width: min(100%, 520px) !important;
  min-width: 2.5em !important;
  padding: 8px 14px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  contain: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: pre-wrap !important;
}

html body .msg-bubble-out .msg-bubble {
  background: #0a84ff !important;
  color: #fff !important;
  border-bottom-right-radius: 6px !important;
}

html body .msg-bubble-in .msg-bubble,
html[data-app-theme="dark"] body .msg-bubble-in .msg-bubble {
  background: #3a3a3c !important;
  color: #fff !important;
  border-bottom-left-radius: 6px !important;
}

html body .msg-bubble-foot {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(235, 235, 245, 0.4) !important;
  margin-top: 4px !important;
  margin-right: 4px;
}

/* Composer — iMessage input bar */
html body .msg-composer,
html[data-app-theme="dark"] body .msg-composer {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 8px 12px 12px !important;
  border-top: 0.5px solid rgba(84, 84, 88, 0.65) !important;
  background: rgba(28, 28, 30, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

html body .msg-composer-plus {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--totaly-blue-500, var(--brand-blue-pure, #2196F3));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 2px;
  opacity: 0.85;
}
html body .msg-composer-plus:disabled { opacity: 0.35; }

html body .msg-composer-field {
  flex: 1 1 auto !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  min-width: 0 !important;
}

html body .msg-composer-input,
html[data-app-theme="dark"] body .msg-composer-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 34px !important;
  max-height: 120px !important;
  padding: 8px 72px 8px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(84, 84, 88, 0.8) !important;
  background: #000 !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  resize: none !important;
  text-align: left !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: text !important;
  opacity: 1 !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}
html body .msg-composer-input:disabled,
html[data-app-theme="dark"] body .msg-composer-input:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  color: rgba(235, 235, 245, 0.45) !important;
}

html body .msg-composer-trail {
  position: absolute;
  right: 10px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(235, 235, 245, 0.55);
  pointer-events: auto;
  z-index: 2;
}
html body .msg-composer-mic,
html body .msg-composer-emoji {
  border: none;
  background: transparent;
  color: inherit;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html body .msg-composer-mic:hover,
html body .msg-composer-emoji:hover {
  background: rgba(118, 118, 128, 0.24);
  color: #fff;
}
html body .msg-composer-mic.is-recording {
  color: #ff453a;
  background: rgba(255, 69, 58, 0.18);
}
html body .msg-composer-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 6px;
}
html body .msg-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  background: #2c2c2e;
  border: 1px solid rgba(84, 84, 88, 0.65);
  font-size: 12px;
  color: #f5f5f7;
}
html body .msg-attach-chip-kind {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(235, 235, 245, 0.45);
  font-size: 10px;
  font-weight: 650;
}
html body .msg-attach-chip-x {
  border: none;
  background: transparent;
  color: rgba(235, 235, 245, 0.55);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
html body .msg-composer-plus-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 6px;
  border-radius: 14px;
  background: #2c2c2e;
  border: 1px solid rgba(84, 84, 88, 0.65);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: 20;
}
html body .msg-composer-plus-menu button {
  border: none;
  background: transparent;
  color: #f5f5f7;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
html body .msg-composer-plus-menu button:hover {
  background: rgba(118, 118, 128, 0.28);
}
html body .msg-emoji-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(320px, 78vw);
  max-height: 220px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: #1c1c1e;
  border: 1px solid rgba(84, 84, 88, 0.65);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  z-index: 20;
}
html body .msg-emoji-btn {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1.2;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
}
html body .msg-emoji-btn:hover {
  background: rgba(118, 118, 128, 0.28);
}

html body .msg-composer-input::placeholder {
  color: rgba(235, 235, 245, 0.35) !important;
  text-align: left !important;
}
html body .msg-composer-input:focus {
  border-color: rgba(142, 142, 147, 0.55) !important;
  outline: none !important;
}

html body .msg-composer-send,
html[data-app-theme="dark"] body .msg-composer-send {
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #0a84ff !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  margin-bottom: 2px;
}
html body .msg-composer-send:disabled {
  background: rgba(118, 118, 128, 0.28) !important;
  color: rgba(235, 235, 245, 0.35) !important;
}
html body .msg-composer-send:hover:not(:disabled) {
  background: #0070e0 !important;
}

/* Desktop height chain so campaign stages scroll inside #lc-mount
   (mobile-os.css already does this under 820px). */
html body.route-messages .main-content,
html body.route-messages main#main-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html body.route-messages .msg-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
}

/* Ask FAB sits at bottom-right (z-index 1301) and steals composer clicks.
   Park it while Messages is open; Ask is still reachable from other routes. */
html body.route-messages .floating-chat,
html body.route-messages .floating-chat-toggle {
  display: none !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  html body .msg-left-pane,
  html[data-app-theme="dark"] body .msg-left-pane {
    width: 100% !important;
  }
}

/* ================================================================
   v42.6.5 — Tabs-first chrome + campaign ops + Totaly builder tokens
   ================================================================ */

html body .msg-view {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html body .msg-tabs-bar {
  flex: 0 0 auto !important;
  order: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 8px 14px 0 !important;
  overflow-x: auto !important;
  background: #1c1c1e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  scrollbar-width: none;
}

html body .msg-tab-dashboard {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  color: var(--totaly-blue-400, var(--brand-blue-pure, #1e88e5));
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
html body .msg-tab-dashboard:hover {
  color: var(--totaly-blue-300, #64b5f6);
}

html body .msg-view[data-msg-tab="threads"] > .msg-status-bar,
html body .msg-view[data-msg-tab="campaign"] > .msg-status-bar {
  display: none !important;
}

html body .stl-ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: flex-end;
  padding: var(--space-4) var(--space-8) var(--space-2);
  max-width: 1100px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-body);
}
html body .stl-ops-stat,
html body .stl-ops-machine {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 88px;
}
html body .stl-ops-label {
  font-size: var(--pill-font-size);
  font-family: var(--pill-font);
  font-weight: 600;
  letter-spacing: var(--pill-letter);
  text-transform: uppercase;
  color: var(--fg-muted);
}
html body .stl-ops-val {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-primary);
}
html body .stl-ops-machine .lcp-meta-select {
  min-width: 180px;
}

html body .stl-builder .lcp-mode-toggle,
html body .lcp-mode-toggle {
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-elev-1);
  color: var(--fg-primary);
}
html body .stl-builder .lcp-mode-toggle.is-preview,
html body .lcp-mode-toggle.is-preview {
  background: var(--bg-elev-1);
  border-color: var(--border-strong);
  color: var(--fg-secondary);
}
html body .stl-builder .lcp-mode-toggle.is-active,
html body .lcp-mode-toggle.is-active {
  background: var(--accent-primary-soft-18);
  border-color: var(--brand-blue-pure);
  color: var(--accent-primary-lighter);
}
html body .lcp-mode-toggle:hover { filter: brightness(1.08); }

html body .stl-builder .lcp-sms-toggle {
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill-radius);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-elev-1);
  color: var(--fg-primary);
}
html body .stl-builder .lcp-sms-toggle.is-off {
  background: var(--bg-elev-1);
  border-color: var(--border-strong);
  color: var(--fg-secondary);
}
html body .stl-builder .lcp-sms-toggle.is-on {
  background: var(--status-success);
  border-color: var(--status-success-deep);
  color: var(--fg-inverse);
}
html body .stl-builder .lcp-sms-toggle:hover { filter: brightness(1.08); }
html body .stl-builder .lcp-sms-legend {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--pill-font-size);
  font-family: var(--font-body);
  color: var(--fg-muted);
  max-width: 28rem;
}
html body .stl-builder.is-sms-fallback .stl-phone-composer {
  color: var(--status-success);
  border-color: var(--status-success);
}

/* ================================================================
   Campaign builder — Totaly tokens (type, space, radius, color)
   ================================================================ */

html body .stl-builder,
html body #lc-mount .stl-builder {
  background: var(--bg-app) !important;
  color: var(--fg-primary) !important;
  padding: 0 0 var(--space-8) !important;
  min-height: 0 !important;
  height: auto !important;
  font-family: var(--font-body) !important;
}

html body #lc-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--bg-app);
  position: relative;
  z-index: 0;
}

/* Campaign tab: keep stages scrollable and inputs interactive */
html body.route-messages .msg-view[data-msg-tab="campaign"],
html body .msg-view[data-msg-tab="campaign"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
html body.route-messages .msg-view[data-msg-tab="campaign"] #lc-mount,
html body .msg-view[data-msg-tab="campaign"] #lc-mount {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  position: relative;
  z-index: 1;
}
html body .stl-builder,
html body #lc-mount .stl-builder {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 96px !important;
}
html body .stl-builder .stl-stage-body,
html body .stl-builder input.stl-stage-num,
html body .stl-builder .lcp-meta-input,
html body .stl-builder .lcp-meta-select,
html body .stl-builder .lcp-meta-num {
  pointer-events: auto !important;
  opacity: 1 !important;
}
html body .stl-builder .stl-stage-body,
html body .stl-builder input.stl-stage-num {
  background: #2c2c2e !important;
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  color: #f5f5f7 !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
}
html body .stl-builder .stl-stage-body:focus,
html body .stl-builder input.stl-stage-num:focus {
  border-color: rgba(142, 142, 147, 0.65) !important;
  outline: none !important;
}


/* Hide legacy banner / KPI card chrome if present */
html body .stl-builder .stl-banner,
html body .stl-builder .stl-kpi-row { display: none !important; }

html body .stl-top {
  padding: var(--space-5) var(--space-8) var(--space-2);
  max-width: 1100px;
  margin: 0 auto;
}
html body .stl-top-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
html body .stl-top-title {
  margin: 0;
  font-size: var(--space-6);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
html body .stl-top-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 640px;
  font-family: var(--font-body);
}
html body .stl-top-kpis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
html body .stl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--pill-radius);
  background: var(--accent-primary-soft-08);
  border: 1px solid var(--border-card);
  color: var(--fg-secondary);
  font-size: var(--pill-font-size);
  font-family: var(--pill-font);
}
html body .stl-pill b {
  color: var(--fg-primary);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
html body .stl-pill.is-bad b { color: var(--status-danger); }

html body .lcp-status-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--pill-radius);
  font-size: var(--pill-font-size);
  font-family: var(--pill-font);
  font-weight: 650;
  letter-spacing: var(--pill-letter);
  text-transform: uppercase;
}
html body .lcp-status-dryrun {
  color: var(--fg-secondary) !important;
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border-card) !important;
}
html body .lcp-status-live {
  color: var(--accent-primary-lighter) !important;
  background: var(--accent-primary-soft-14) !important;
  border: 1px solid var(--accent-primary-soft-28) !important;
}
html body .lcp-status-paused {
  color: var(--fg-muted) !important;
  background: var(--bg-elev-1) !important;
  border: 1px solid var(--border-card) !important;
}

html body .stl-builder .lcp-delete-btn {
  margin-left: auto;
  border: none !important;
  background: transparent !important;
  color: var(--status-danger) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-body) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-lg);
}
html body .stl-builder .lcp-delete-btn:hover {
  background: var(--accent-hover-soft-14) !important;
}

/* Meta strip — Name/Source/max on row 1; Mode/SMS/Start on one controls row */
html body .stl-builder .stl-meta {
  max-width: 1100px;
  margin: var(--space-2) auto var(--space-5) !important;
  padding: var(--space-2) var(--space-8) !important;
  border: none !important;
  background: transparent !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
  font-family: var(--font-body);
}
html body .stl-builder .stl-meta-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 0 !important;
  font-size: var(--text-sm);
  min-width: 0;
}
html body .stl-builder .stl-meta-controls {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: start;
}
html body .stl-builder .stl-meta-controls .stl-meta-row,
html body .stl-builder .stl-sms-row,
html body .stl-builder .stl-schedule-row,
html body .stl-builder .stl-mode-row {
  grid-column: auto;
  align-items: stretch !important;
}
/* iMessage-style To: bar for Source = Add manually (full meta width) */
html body .stl-builder .stl-to-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px 6px 14px;
  border-radius: 12px;
  border: 1px solid rgba(84, 84, 88, 0.65);
  background: var(--bg-card, #2c2c2e);
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-body);
}
html body .stl-builder .stl-to-bar.is-hidden {
  display: none !important;
}
html body .stl-builder .stl-to-label {
  flex: 0 0 auto;
  color: rgba(235, 235, 245, 0.55);
  font-size: var(--text-sm);
  font-weight: 500;
}
html body .stl-builder .stl-to-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
html body .stl-builder .stl-to-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.14);
  color: #0a84ff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
html body .stl-builder .stl-to-chip-label {
  white-space: nowrap;
}
html body .stl-builder .stl-to-chip-remove {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #0a84ff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
}
html body .stl-builder .stl-to-chip-remove:hover {
  opacity: 1;
  background: rgba(10, 132, 255, 0.2);
}
html body .stl-builder .stl-to-input {
  flex: 1 1 120px;
  min-width: 120px;
  border: none;
  background: transparent;
  color: #f5f5f7;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  padding: 6px 0;
  outline: none;
}
html body .stl-builder .stl-to-input::placeholder {
  color: rgba(235, 235, 245, 0.35);
}
html body .stl-builder .stl-to-add {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: none;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.28);
  color: #f5f5f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
html body .stl-builder .stl-to-add:hover:not(:disabled) {
  background: #0a84ff;
  color: #fff;
}
html body .stl-builder .stl-to-add:disabled {
  opacity: 0.4;
  cursor: default;
}
html body .stl-builder .stl-to-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: rgba(235, 235, 245, 0.4);
  font-variant-numeric: tabular-nums;
}
html body .stl-builder .stl-meta-label {
  color: var(--fg-muted) !important;
  font-size: var(--pill-font-size) !important;
  font-family: var(--font-body) !important;
}
html body .stl-builder .stl-meta-val {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
html body .stl-builder .lcp-mode-toggle,
html body .stl-builder .lcp-sms-toggle {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .stl-builder .lcp-meta-input,
html body .stl-builder .lcp-meta-select,
html body .stl-builder .lcp-meta-num {
  text-align: left !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  background: var(--bg-card, #2c2c2e) !important;
  color: #f5f5f7 !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-variant-numeric: tabular-nums;
}
html body .stl-builder .lcp-meta-input:focus,
html body .stl-builder .lcp-meta-select:focus,
html body .stl-builder .lcp-meta-num:focus {
  border-color: rgba(142, 142, 147, 0.75) !important;
  background: #3a3a3c !important;
}
html body .stl-builder [data-schedule-start] {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 900px) {
  html body .stl-builder .stl-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body .stl-builder .stl-meta-controls {
    grid-template-columns: 1fr;
  }
}

/* Stage timeline */
html body .stl-builder .stl-stages {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-5) !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-8) !important;
}

html body .stl-builder .stl-stage {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 260px;
  gap: var(--space-4) var(--space-5);
  align-items: stretch;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

html body .stl-stage-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-2);
}
/* Rail badge only — must NOT share class with wait/window inputs */
html body .stl-stage-rail .stl-stage-index {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #3a3a3c !important;
  border: none !important;
  color: #f5f5f7 !important;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(118, 118, 128, 0.18);
  flex: 0 0 auto;
}
html body .stl-stage-rail::after {
  content: "";
  flex: 1 1 auto;
  width: 2px;
  margin-top: var(--space-3);
  background: var(--border-card);
  border-radius: var(--space-2);
  min-height: 40px;
}
html body .stl-stage:last-of-type .stl-stage-rail::after { display: none; }

html body .stl-stage-compose {
  background: #1c1c1e !important;
  border: 1px solid rgba(84, 84, 88, 0.55) !important;
  border-radius: 16px !important;
  padding: var(--space-4) var(--space-5) var(--space-4);
  min-width: 0;
  box-shadow: none;
}

html body .stl-builder .stl-stage-head {
  margin-bottom: var(--space-3) !important;
}
html body .stl-builder .stl-stage-title {
  font-size: var(--text-base) !important;
  font-weight: 650 !important;
  font-family: var(--font-display) !important;
  color: var(--fg-primary) !important;
}
html body .stl-builder .stl-stage-key {
  color: var(--fg-muted) !important;
  font-size: var(--pill-font-size) !important;
}
html body .stl-builder .stl-stage-approval.is-unapproved {
  color: var(--fg-secondary) !important;
  background: var(--bg-elev-1) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
}
html body .stl-builder .stl-stage-approval.is-approved {
  color: var(--accent-primary-light) !important;
  background: var(--accent-primary-soft-12) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

html body .stl-builder .stl-stage-field-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  color: var(--fg-muted) !important;
}

html body .stl-builder .stl-stage-body {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-card) !important;
  background: var(--bg-elev-2) !important;
  color: var(--fg-primary) !important;
  font-size: var(--text-base) !important;
  font-family: var(--font-body) !important;
  line-height: 1.4 !important;
  min-height: 96px !important;
  padding: var(--space-3) var(--space-4) !important;
}
html body .stl-builder .stl-stage-body:focus {
  border-color: rgba(142, 142, 147, 0.75) !important;
  background: var(--bg-elev-2) !important;
  box-shadow: 0 0 0 3px rgba(118, 118, 128, 0.18);
}

html body .stl-builder .stl-stage-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-2) !important;
}
html body .stl-builder .stl-wait-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
  gap: 10px 12px !important;
  margin-top: 10px;
}
html body .stl-builder .stl-wait-row .stl-stage-inline {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0;
}
html body .stl-builder .stl-stage-inline-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--pill-font-size) !important;
  font-family: var(--font-body) !important;
  color: rgba(235, 235, 245, 0.55) !important;
  background: transparent !important;
  border: none !important;
}
/* Timing inputs — full cell fields, not 28px rail circles */
html body .stl-builder input.stl-stage-num {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 2.25rem !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  background: #2c2c2e !important;
  color: #f5f5f7 !important;
  font-variant-numeric: tabular-nums;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
  appearance: textfield;
  -moz-appearance: textfield;
}
html body .stl-builder input.stl-stage-num:focus {
  border-color: rgba(142, 142, 147, 0.75) !important;
  background: #3a3a3c !important;
  outline: none !important;
}

html body .stl-builder .stl-stage-save {
  border: none !important;
  border-radius: var(--pill-radius) !important;
  background: #3a3a3c !important;
  color: var(--fg-inverse) !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  padding: var(--space-2) var(--space-4) !important;
}
html body .stl-builder .stl-stage-save:hover {
  background: #48484a !important;
}
html body .stl-stage-delay-hint {
  margin-left: auto;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--fg-muted);
}

/* Phone preview */
html body .stl-stage-phone {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
html body .stl-phone-bezel {
  width: 100%;
  max-width: 240px;
  background: #000 !important;
  border: 2px solid rgba(84, 84, 88, 0.65) !important;
  border-radius: 28px !important;
  padding: var(--space-3) var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  min-height: 280px;
}
html body .stl-phone-notch {
  width: 72px;
  height: 6px;
  border-radius: var(--pill-radius);
  background: var(--surface-charcoal);
  margin: var(--space-2) auto var(--space-3);
}
html body .stl-phone-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-3);
}
html body .stl-phone-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--pill-radius);
  background: var(--bg-elev-1);
  color: var(--fg-primary);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .stl-phone-name {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--fg-primary);
}
html body .stl-phone-thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2);
  min-height: 140px;
}
html body .stl-phone-time {
  align-self: center;
  font-size: var(--pill-font-size);
  font-family: var(--font-body);
  color: var(--fg-muted);
}
html body .stl-builder .stl-stage-preview-wrap {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  justify-content: flex-end;
}
html body .stl-builder .stl-stage-preview-label { display: none !important; }
html body .stl-builder .stl-stage-preview-bubble,
html body .stl-builder .stl-stage-preview-bubble.msg-bubble {
  background: #0a84ff !important;
  color: var(--fg-inverse) !important;
  border-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--space-2) !important;
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-body) !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  box-shadow: none !important;
}
html body .stl-phone-composer {
  margin-top: var(--space-2);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

html body .stl-builder .stl-controls {
  max-width: 1100px;
  margin: var(--space-8) auto 0;
  padding: 0 var(--space-8);
  border: none !important;
  background: transparent !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
html body .stl-builder .stl-approve-all {
  display: none !important;
  border: none !important;
  border-radius: var(--pill-radius) !important;
  background: var(--accent-primary-soft-18) !important;
  color: var(--brand-blue-pure) !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  padding: var(--space-3) var(--space-5) !important;
}
html body .stl-builder .stl-kill-note {
  color: var(--fg-muted) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-body) !important;
}

/* iMessage attachments on the campaign builder */
html body .stl-attach {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
html body .stl-attach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
html body .stl-attach-btn {
  border: 1px solid var(--border-card);
  background: var(--bg-elev-2);
  color: var(--fg-primary);
  border-radius: var(--pill-radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}
html body .stl-attach-btn:hover {
  border-color: var(--brand-blue-pure);
  background: var(--accent-primary-soft-12);
}
html body .stl-attach-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
html body .stl-attach-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-card);
  background: var(--bg-elev-2);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
html body .stl-attach-chip-kind {
  text-transform: uppercase;
  letter-spacing: var(--pill-letter);
  font-size: var(--pill-font-size);
  font-weight: 700;
  color: var(--accent-primary-light);
}
html body .stl-attach-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-primary);
}
html body .stl-attach-chip-open {
  color: var(--accent-primary-light);
  text-decoration: none;
  font-weight: 600;
}
html body .stl-attach-chip-remove {
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--text-base);
  cursor: pointer;
  line-height: 1;
}
html body .stl-attach-hint {
  margin: 0;
  font-size: var(--pill-font-size);
  font-family: var(--font-body);
  color: var(--fg-muted);
}
html body .stl-phone-media {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  width: 100%;
}
html body .stl-phone-image,
html body .stl-phone-video {
  max-width: 100%;
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--space-2);
  display: block;
}
html body .stl-phone-voice,
html body .stl-phone-file {
  background: var(--brand-blue-pure);
  color: var(--fg-inverse);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  width: 100%;
}
html body .stl-phone-voice audio {
  width: 100%;
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  html body .stl-builder .stl-stage {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }
  html body .stl-stage-phone {
    grid-column: 2;
  }
  html body .stl-phone-bezel {
    max-width: 100%;
    min-height: 200px;
  }
}


/* Neutral attach chips + save (Speed-to-Lead) */
html body .stl-builder .stl-attach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
html body .stl-builder .stl-attach-btn {
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  background: #2c2c2e !important;
  color: #f5f5f7 !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body .stl-builder .stl-attach-btn:hover {
  background: #3a3a3c !important;
}
html body .stl-builder .stl-stage-save {
  border-radius: 12px !important;
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  background: #3a3a3c !important;
  color: #f5f5f7 !important;
}
html body .stl-builder .stl-phone-bezel {
  background: #000 !important;
  border: 2px solid rgba(84, 84, 88, 0.65) !important;
  border-radius: 28px !important;
}
html body .stl-builder .stl-stage-compose {
  background: #1c1c1e !important;
  border: 1px solid rgba(84, 84, 88, 0.55) !important;
}
html body .stl-builder {
  background: #000 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v42.6.19 — Kill blue chip wash on STL stage chrome
   Global `.composer-chip, [class*="chip"], [class*="tag"]` matches any
   class containing "stage" (s-TAG-e) and paints --chip-bg (#2196F314)
   + --chip-outline. Neutralize wrappers; reassert intentional fills.
   Keep iMessage bubble #0a84ff (authentic, not chrome).
   ═══════════════════════════════════════════════════════════════════ */
html body .stl-builder [class*="stl-stage"],
html body .stl-builder .stl-stage-rail,
html body .stl-builder .stl-stage-phone,
html body .stl-builder .stl-stage-actions,
html body .stl-builder .stl-stage-compose,
html body .stl-builder .stl-stage-head,
html body .stl-builder .stl-stage-field,
html body .stl-builder .stl-stage-row,
html body .stl-builder .stl-wait-row,
html body .stl-stage-rail,
html body .stl-stage-phone,
html body .stl-stage-actions {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Intentional surfaces after the chip-wash kill */
html body .stl-builder .stl-stage-compose,
html body .stl-stage-compose {
  background: #1c1c1e !important;
  background-color: #1c1c1e !important;
  border: 1px solid rgba(84, 84, 88, 0.55) !important;
  border-color: rgba(84, 84, 88, 0.55) !important;
}
html body .stl-builder .stl-phone-bezel,
html body .stl-phone-bezel {
  background: #000 !important;
  background-color: #000 !important;
  border: 2px solid rgba(84, 84, 88, 0.65) !important;
  border-color: rgba(84, 84, 88, 0.65) !important;
}
html body .stl-builder .stl-stage-body,
html body .stl-builder input.stl-stage-num {
  background: #2c2c2e !important;
  background-color: #2c2c2e !important;
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  border-color: rgba(84, 84, 88, 0.65) !important;
}
html body .stl-builder .stl-stage-body {
  background: #1c1c1e !important;
  background-color: #1c1c1e !important;
}
html body .stl-builder .stl-stage-rail .stl-stage-index {
  background: #3a3a3c !important;
  background-color: #3a3a3c !important;
  border: none !important;
  box-shadow: 0 0 0 4px rgba(118, 118, 128, 0.18) !important;
}
html body .stl-stage-rail::after {
  background: rgba(84, 84, 88, 0.65) !important;
  background-color: rgba(84, 84, 88, 0.65) !important;
}
html body .stl-builder .stl-stage-save {
  background: #3a3a3c !important;
  background-color: #3a3a3c !important;
  border: 1px solid rgba(84, 84, 88, 0.65) !important;
  border-color: rgba(84, 84, 88, 0.65) !important;
  color: #f5f5f7 !important;
}
html body .stl-builder .stl-stage-save:hover {
  background: #48484a !important;
  background-color: #48484a !important;
  border-color: rgba(142, 142, 147, 0.55) !important;
  color: #f5f5f7 !important;
}
html body .stl-builder .stl-stage-preview-bubble,
html body .stl-builder .stl-stage-preview-bubble.msg-bubble {
  background: #0a84ff !important;
  background-color: #0a84ff !important;
  border-color: transparent !important;
}

/* ================================================================
   v42.6.33 — Collapse empty global topbar on Messages
   Topbar children are all hidden (topbar-ia + topbar--no-header), but
   legacy height locks still reserved ~44–60px of dead charcoal above
   the campaign tabs. Hide the chrome and reclaim the viewport.
   ================================================================ */
html body.route-messages header.topbar#topbar,
html body.route-messages header.topbar.topbar--no-header,
html body.route-messages header.topbar.topbar--with-pill.topbar--no-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
html body.route-messages header.topbar#topbar::before,
html body.route-messages header.topbar#topbar::after,
html body.route-messages header.topbar::before,
html body.route-messages header.topbar::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}
html body.route-messages #main-content,
html body.route-messages .main-content,
html body.route-messages main#main-content {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
}

/* Status KPI strip: never reserve space on inbox/builder tabs */
html body.route-messages .msg-view[data-msg-tab="threads"] > .msg-status-bar,
html body.route-messages .msg-view[data-msg-tab="campaign"] > .msg-status-bar,
html body.route-messages .msg-view[data-msg-tab="campaign-edit"] > .msg-status-bar,
html body.route-messages .msg-status-bar[hidden],
html body.route-messages #msg-status-bar[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}