/* Marketing — the template studio (marketing-studio.js) and campaigns (marketing-campaigns.js). Tokens only. */

.ms-bar { flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ms-lead { margin: 0; color: var(--text-muted); font-size: 13.5px; flex: 1 1 320px; }
.ms-lead code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }

/* the studio: the editor beside the AI chat / versions */
.ms-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 14px; align-items: start; }
.ms-studio .card { margin: 0; }
.ms-seg { margin: 0; }
.ms-title { overflow-wrap: anywhere; }
.ms-edit { display: grid; gap: 10px; margin-top: 4px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chips .lt-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; }
.ms-html { width: 100%; min-height: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.ms-html:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.ms-preview { display: grid; gap: 8px; margin-top: 4px; }
.ms-edit[hidden], .ms-preview[hidden] { display: none; }
.ms-frame { width: 100%; min-height: 460px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.ms-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.ms-state { margin-right: auto; }
.ms-side { display: grid; gap: 10px; position: sticky; top: 12px; }
.ms-side-body { display: grid; gap: 10px; }
.ms-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 52vh; overflow: auto; }
.ms-msg { border-radius: 10px; padding: 8px 10px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-msg.me { background: var(--primary); color: var(--on-primary); justify-self: end; max-width: 92%; }
.ms-msg.ai { background: var(--surface-2); color: var(--text); max-width: 96%; }
.ms-msg.pending { opacity: .7; }
.ms-msg.failed { border: 1px solid var(--danger); background: var(--danger-bg); }
.ms-who { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }
.ms-chat-empty { color: var(--text-muted); font-size: 13.5px; padding: 8px 2px; }
.ms-ask { display: grid; gap: 6px; }
.ms-ask textarea { width: 100%; font: inherit; font-size: 16px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.ms-ask textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ms-ask-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.ms-ask-foot .pp-link { margin-right: auto; }
.ms-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ms-versions li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* campaigns */
.mc-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mc-h3 { margin: 16px 0 8px; font-size: 14px; font-weight: 800; color: var(--text); }
.mc-lists { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.mc-lists .lt-mode { align-items: center; }
.mc-prev-h { margin-bottom: 6px; }
.mc-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--surface-2); }
.mc-subject { font-weight: 700; color: var(--text); margin-bottom: 8px; overflow-wrap: anywhere; }
.mc-frame { min-height: 380px; }
.mc-optout { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 8px; padding: 10px 12px; }
.mc-people { margin-top: 14px; }
.mc-item { margin-top: 14px; display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.mc-item .card { margin: 0; }
.mc-fact { font-size: 13.5px; color: var(--text); margin: 8px 0 0; overflow-wrap: anywhere; }
.mc-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-hist li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.mc-mail { display: grid; gap: 10px; }
.mc-body { min-height: 260px; border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--surface); color: var(--text); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.mc-body[contenteditable="true"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.mc-body[contenteditable="false"] { background: var(--surface-2); }
.mc-body img { max-width: 100%; height: auto; }
.mc-warn { border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-oo { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }

@media (max-width: 900px) {
  .ms-studio, .mc-item, .mc-new { grid-template-columns: minmax(0, 1fr); }
  .ms-side { position: static; }
}