/* Comment → DM rules editor.
 *
 * Only what Tailwind utilities cannot say: the dialog's own geometry, the
 * keyword chips, and the small state marks. Every colour is a platform token,
 * so dark mode and the account's brand colour are inherited rather than
 * restated - the same reason comments-toggle.js borrows classes instead of
 * writing styles.
 */

.crm-adm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 45%);
}

/* No `background` here on purpose. It used to be
 * `var(--color-background, rgb(var(--n-background, 255 255 255)))`, and neither
 * variable is defined where an injected node can see it, so every dialog fell
 * through to the literal white — under a dark theme that is near-white text on
 * white, i.e. an empty box. The surface is `bg-n-solid-2` in the markup
 * instead: the class the platform's own panels use, which is dark here and
 * light there without this file having an opinion. Measured, not guessed. */
.crm-adm-dialog {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 28%);
}

.crm-adm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 20px 20px;
}

/* A rule is a stack of fields; the grid keeps the two short ones side by side
   on a wide dialog and lets them fall under each other on a narrow one. */
.crm-adm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.crm-adm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border-radius: 8px;
}

.crm-adm-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 2px 4px 2px 9px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 999px;
}

.crm-adm-chip button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  opacity: 0.55;
}

.crm-adm-chip button:hover { opacity: 1; }

.crm-adm-chipinput {
  flex: 1 1 90px;
  min-width: 90px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
}

/* The dialog is long; a rule collapses to its title line so a page with eight
   rules is still a list rather than a scroll. */
.crm-adm-rule[data-open="0"] .crm-adm-rulebody { display: none; }

.crm-adm-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}

.crm-adm-rule[data-open="1"] .crm-adm-caret { transform: rotate(90deg); }

.crm-adm-textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

.crm-adm-count {
  font-variant-numeric: tabular-nums;
}

[dir="rtl"] .crm-adm-chip { padding: 2px 9px 2px 4px; }
[dir="rtl"] .crm-adm-rule[data-open="1"] .crm-adm-caret { transform: rotate(-90deg); }

/* ---- the rule, read as a sentence -------------------------------------
 *
 * The steps are numbered and everything belonging to a step is indented under
 * its number, because the first version of this editor was a stack of labelled
 * boxes and the owner's verdict was that he could not tell what the settings
 * DID. The fields were all there; the order they happen in was not.
 *
 * Written here rather than with Tailwind's ml-7/pl-7: this overlay is loaded
 * beside a COMPILED bundle, and a utility class nobody used at build time was
 * purged out of it. A class that silently does nothing is worse than one line
 * of CSS.
 */
.crm-adm-step {
  line-height: 1.25rem;
}

.crm-adm-indent {
  padding-inline-start: 1.75rem;
}

.crm-adm-wordings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline-start: 1.75rem;
}

.crm-adm-wordings textarea { flex: 1; }

/* ---- which posts a rule listens to ------------------------------------
 *
 * Was a <select multiple>, which on a plain click only ever ADDS to the
 * selection — removing one, or picking a second, wants Cmd/Ctrl+click and
 * nothing says so. Tick boxes instead: what is on is visible, and the same
 * click that turns it on turns it off.
 */
.crm-adm-posts {
  display: flex;
  flex-direction: column;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--crm-weak, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  padding: 4px;
}

.crm-adm-post {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
}

.crm-adm-post:hover { background: rgba(127, 127, 127, 0.12); }

.crm-adm-post input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: rgb(var(--brand-color, 33 150 243));
  cursor: pointer;
}

/* "Every post" is a state, not a choice — it reads as a line of text until
 * posts are ticked, when it becomes the way back to the default. */
.crm-adm-post-all {
  font-size: 12px;
  border-bottom: 1px solid var(--crm-weak, rgba(0, 0, 0, 0.08));
  border-radius: 7px 7px 0 0;
  margin-bottom: 2px;
}

.crm-adm-post-all[data-active="1"] {
  cursor: default;
  font-weight: 500;
}

.crm-adm-post-all[data-active="1"]:hover { background: none; }

/* The three ways a rule can choose its posts. Radios rather than a dropdown:
 * they are different enough that seeing all three beside their one-line
 * explanation IS the explanation. */
.crm-adm-scope {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
}

.crm-adm-scope:hover { background: rgba(127, 127, 127, 0.10); }

.crm-adm-scope input[type="radio"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: rgb(var(--brand-color, 33 150 243));
  cursor: pointer;
}

/* Tokens you press instead of tokens you memorise. {{mention}} in particular
 * is worth a button: it is the difference between a reply the commenter is
 * notified about and one they never see again. */
.crm-adm-token {
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--crm-weak, rgba(0, 0, 0, 0.12));
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}

.crm-adm-token:hover {
  opacity: 1;
  background: rgba(127, 127, 127, 0.12);
}

/* Worked examples under the match mode in force.
 *
 * The three modes are not separable by their names — "any / all / exactly" reads
 * obvious and is not, which is how a rule sat on "All of the words" answering
 * nothing. A comment and a verdict beside it settles in one glance what a
 * sentence of explanation does not. */
.crm-adm-examples {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.09);
}

.crm-adm-example {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
}

.crm-adm-example-mark {
  flex-shrink: 0;
  font-weight: 700;
  width: 12px;
}

.crm-adm-example-mark.is-yes { color: #15a34a; }
.crm-adm-example-mark.is-no { color: #b4b8bd; }

.crm-adm-example-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.crm-adm-example-verdict {
  flex-shrink: 0;
  opacity: 0.6;
  font-size: 11px;
}

.crm-adm-example-note {
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.75;
  padding-top: 4px;
  margin-top: 3px;
  border-top: 1px solid rgba(127, 127, 127, 0.18);
}

/* ==== ManyChat's shape (owner, 2026-09-29) =====================================
   The rules as a list of rows; one rule at a time as numbered step cards with a
   phone beside them showing what the customer sees. Respond's tokens: hairlines,
   8px corners, lime primary with Facebook blue under the pointer. */
.crm-adm-mc {
  --mc-line: rgba(53, 60, 69, .16);
  --mc-line-on: rgba(53, 60, 69, .32);
  --mc-ink: #282e34;
  --mc-muted: #626f7f;
  --mc-card: #ffffff;
  --mc-ground: #f5f6f7;
  --mc-fb: #1877f2;
  --mc-ease: .15s cubic-bezier(.4, 0, .2, 1);
  width: min(760px, 100%);
  height: min(88vh, 900px);
  background: var(--mc-card);
  color: var(--mc-ink);
}
.dark .crm-adm-mc {
  --mc-line: #2c3138;
  --mc-line-on: #3c434c;
  --mc-ink: #e8eaed;
  --mc-muted: #9aa3af;
  --mc-card: #1b1e23;
  --mc-ground: #15181c;
}
.crm-adm-mc.is-editing { width: min(1160px, 100%); }

/* head */
.crm-adm-top { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--mc-line); }
.crm-adm-top-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-adm-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; font-weight: 600; }
.crm-adm-crumb-root { padding: 0; border: 0; background: none; font: inherit; color: var(--mc-muted); cursor: pointer; }
.crm-adm-crumb-root:disabled { color: var(--mc-ink); cursor: default; }
.crm-adm-crumb-root:not(:disabled):hover { color: var(--mc-fb); }
.crm-adm-crumb-sep { color: var(--mc-muted); }
.crm-adm-crumb-here { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-adm-top-sub { font-size: 14px; color: var(--mc-muted); }
.crm-adm-inboxpick { width: auto !important; height: 32px; }
.crm-adm-x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--mc-muted); cursor: pointer; transition: background-color var(--mc-ease); }
.crm-adm-x:hover { background: var(--mc-ground); }

.crm-adm-mc .crm-adm-body { padding: 16px 20px 20px; background: var(--mc-card); }
.crm-adm-mc.is-editing .crm-adm-body { padding: 0; background: var(--mc-ground); overflow: hidden; display: flex; }

/* foot */
.crm-adm-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--mc-line); background: var(--mc-card); }
.crm-adm-status { flex: 1; font-size: 14px; color: var(--mc-muted); }
.crm-adm-ghost, .crm-adm-primary {
  height: 32px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background-color var(--mc-ease), color var(--mc-ease), border-color var(--mc-ease);
}
.crm-adm-ghost { border: 1px solid var(--mc-line); background: var(--mc-card); color: var(--mc-ink); }
.crm-adm-ghost:hover { background: var(--mc-ground); }
.crm-adm-primary { border: 0; background: #d4fb08; color: #000; }
.crm-adm-primary:hover:not(:disabled) { background: var(--mc-fb); color: #fff; }
.crm-adm-primary:disabled { opacity: .5; cursor: default; }

/* ---- the list of rules ---- */
.crm-adm-listbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.crm-adm-listcount { font-size: 14px; color: var(--mc-muted); }
.crm-adm-rows { border: 1px solid var(--mc-line); border-radius: 8px; overflow: hidden; }
.crm-adm-rows:empty { display: none; }
.crm-adm-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; cursor: pointer;
  border-bottom: 1px solid var(--mc-line); transition: background-color var(--mc-ease);
}
.crm-adm-row:last-child { border-bottom: 0; }
.crm-adm-row:hover, .crm-adm-row:focus-visible { background: var(--mc-ground); outline: none; }
.crm-adm-row-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-adm-row-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-adm-row-sub { font-size: 13px; color: var(--mc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-adm-row-stats { font-size: 13px; color: var(--mc-muted); white-space: nowrap; }
.crm-adm-row-go { font-size: 18px; color: var(--mc-muted); }
[dir="rtl"] .crm-adm-row-go { transform: scaleX(-1); }
.crm-adm-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--mc-muted); }
.crm-adm-empty strong { color: var(--mc-ink); font-weight: 600; }

/* ---- one rule: steps + phone ---- */
.crm-adm-editor { display: flex; flex: 1; min-height: 0; }
.crm-adm-steps { flex: 1; min-width: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.crm-adm-namebox { padding: 0 2px; }
.crm-adm-step-card { background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 8px; }
.crm-adm-step-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.crm-adm-step-no {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #d4fb08; color: #000; font-size: 12px; font-weight: 700;
}
.crm-adm-step-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.crm-adm-step-title { font-size: 15px; font-weight: 600; }
.crm-adm-step-hint { font-size: 13px; color: var(--mc-muted); }
.crm-adm-step-head > button[role="switch"] { margin-top: 5px; }
.crm-adm-step-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px 52px; }
[dir="rtl"] .crm-adm-step-body { padding: 0 52px 16px 16px; }
.crm-adm-step-body:empty, .crm-adm-step-body > [hidden] { display: none; }
.crm-adm-step-body:not(:has(> :not([hidden]))) { display: none; }
.crm-adm-mc .crm-adm-indent { margin-inline-start: 0 !important; padding-inline-start: 0 !important; }
.crm-adm-fields, .crm-adm-words { display: flex; flex-direction: column; gap: 12px; }
.crm-adm-field { display: flex; flex-direction: column; gap: 6px; }
.crm-adm-field-title { font-size: 13px; font-weight: 600; color: var(--mc-muted); }
.crm-adm-field-hint { font-size: 12px; color: var(--mc-muted); }

/* fields in Respond's look */
.crm-adm-mc input:not([type="checkbox"]):not([type="radio"]), .crm-adm-mc textarea, .crm-adm-mc select, .crm-adm-mc .crm-adm-chips {
  background: var(--mc-card) !important; border: 1px solid var(--mc-line) !important; border-radius: 8px !important;
  color: var(--mc-ink); box-shadow: none; outline: 0;
  transition: border-color var(--mc-ease);
}
.crm-adm-mc input:not([type="checkbox"]):not([type="radio"]), .crm-adm-mc select { height: 36px; }
.crm-adm-mc .crm-adm-chips input { border: 0 !important; height: auto; background: transparent !important; }
.crm-adm-mc :is(input, textarea, select):focus, .crm-adm-mc .crm-adm-chips:focus-within { border-color: var(--mc-muted) !important; }

/* any word / specific words */
.crm-adm-seg { display: inline-flex; align-self: flex-start; padding: 2px; border: 1px solid var(--mc-line); border-radius: 8px; background: var(--mc-ground); }
.crm-adm-seg-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font-size: 14px; color: var(--mc-muted); cursor: pointer; transition: background-color var(--mc-ease), color var(--mc-ease); }
.crm-adm-seg-btn.is-on { background: var(--mc-card); color: var(--mc-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }

/* posts as pictures */
.crm-adm-mc .crm-adm-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 260px; padding: 8px; border-color: var(--mc-line); }
.crm-adm-mc .crm-adm-post { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; border: 1px solid transparent; font-size: 12px; position: relative; }
.crm-adm-mc .crm-adm-post:has(input:checked) { border-color: var(--mc-fb); background: rgba(24, 119, 242, .06); }
.crm-adm-post-pic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--mc-ground); }
.crm-adm-mc .crm-adm-post.has-picture input[type="checkbox"] { position: absolute; top: 8px; inset-inline-start: 8px; }
.crm-adm-mc .crm-adm-post .truncate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }

/* extras */
.crm-adm-extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; font-size: 14px; }
.crm-adm-delete { align-self: flex-start; height: 32px; padding: 0 12px; border: 1px solid var(--mc-line); border-radius: 8px; background: var(--mc-card); color: #e5484d; font-size: 14px; cursor: pointer; transition: background-color var(--mc-ease); }
.crm-adm-delete:hover { background: var(--mc-ground); }

/* ---- the phone ---- */
.crm-adm-phone { flex: 0 0 340px; overflow-y: auto; padding: 20px; border-inline-start: 1px solid var(--mc-line); background: var(--mc-card); }
.crm-adm-phone-cap { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--mc-muted); }
.crm-adm-phone-screen {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 18px;
  border: 1px solid var(--mc-line); border-radius: 28px; background: var(--mc-card); min-height: 480px;
}
.crm-adm-phone-post {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; background: var(--mc-ground); color: var(--mc-muted); font-size: 13px; text-align: center; padding: 8px;
}
.crm-adm-phone-post:has(img) { padding: 0; }
.crm-adm-phone-post img { width: 100%; height: 100%; object-fit: cover; }
.crm-adm-phone-comment { font-size: 13px; line-height: 1.4; }
.crm-adm-phone-comment.is-reply { padding-inline-start: 18px; color: var(--mc-muted); }
.crm-adm-phone-comment b { font-weight: 600; color: var(--mc-ink); }
.crm-adm-phone-sep { margin: 8px 0 2px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--mc-muted); }
.crm-adm-bubble { max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-adm-bubble.is-page { align-self: flex-start; background: var(--mc-ground); color: var(--mc-ink); }
.crm-adm-bubble.is-them { align-self: flex-end; background: var(--mc-fb); color: #fff; }
.crm-adm-bubble-btn { display: block; margin: 8px -4px -2px; padding: 6px 8px; border-radius: 10px; background: var(--mc-card); text-align: center; font-weight: 600; color: var(--mc-fb); }

@media (max-width: 900px) {
  .crm-adm-editor { flex-direction: column; overflow-y: auto; }
  .crm-adm-steps { overflow: visible; }
  .crm-adm-phone { flex-basis: auto; border-inline-start: 0; border-top: 1px solid var(--mc-line); }
}
/* the title is a disabled button on the list; it must not read as greyed out */
.crm-adm-crumb-root:disabled { opacity: 1 !important; color: var(--mc-ink) !important; }
/* the platform gives every field a bottom margin; the step's own gap is enough */
.crm-adm-mc :is(input, textarea, select) { margin: 0 !important; }
.crm-adm-phone-post { aspect-ratio: 4 / 3; max-height: 200px; }
.crm-adm-mc .crm-adm-wordings { padding-inline-start: 0; }
.crm-adm-mc:not(.is-editing) { height: auto; }
/* The word box is the frame; the typing line inside it has none (it was drawn
   a second frame by the field rule above, which outweighs a plain class). */
.crm-adm-mc .crm-adm-chips input.crm-adm-chipinput:not([type="checkbox"]):not([type="radio"]) {
  border: 0 !important; background: transparent !important; height: 28px; padding: 0 4px; box-shadow: none !important; outline: 0 !important;
}
.crm-adm-mc .crm-adm-chips { min-height: 36px; padding: 3px 6px; }