/* Settings → Copilot (copilot-settings.js). Light first; .dark has its own
   values. The save button is lime with black text. */
.crm-cps {
  --cps-ink: #0f172a;
  --cps-muted: #64748b;
  --cps-line: #e2e8f0;
  --cps-card: #ffffff;
  --cps-soft: #f8fafc;
  --cps-lime: #d4fb08;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 16px 24px 48px;
  color: var(--cps-ink);
}
.dark .crm-cps {
  --cps-ink: #f1f5f9;
  --cps-muted: #94a3b8;
  --cps-line: #334155;
  --cps-card: #111827;
  --cps-soft: #0b1220;
}
.crm-cps__page { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.crm-cps__head { display: flex; flex-direction: column; gap: 6px; }
.crm-cps__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--cps-ink); }
.crm-cps__sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cps-muted); }
.crm-cps__dim { color: var(--cps-muted); font-size: 14px; }
.crm-cps__note {
  margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: var(--cps-soft); border: 1px solid var(--cps-line); color: var(--cps-muted);
}

.crm-cps__card {
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px; border-radius: 8px;
  background: var(--cps-card); border: 1px solid var(--cps-line);
}
.crm-cps__field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.crm-cps__label { font-size: 14px; font-weight: 600; color: var(--cps-ink); }
.crm-cps__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cps-muted); }
.crm-cps__input {
  width: 100%; margin: 0; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--cps-line); background: var(--cps-soft);
  color: var(--cps-ink); font: inherit; font-size: 14px; line-height: 1.7;
  resize: vertical; box-shadow: none; outline: none;
  /* Each line takes the direction of its own first letter: Arabic lines on
     the right, English lines on the left, whatever the dashboard's language. */
  unicode-bidi: plaintext;
  text-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* The platform gives every textarea a short fixed height; a field's own
   number of lines is its height here. */
.crm-cps textarea.crm-cps__input { height: calc(var(--rows, 3) * 1.7em + 22px); min-height: 44px; }
.crm-cps__input:focus { border-color: var(--cps-lime); box-shadow: 0 0 0 3px rgba(163, 230, 53, .2); background: var(--cps-card); }
.crm-cps__input:disabled { opacity: .75; cursor: not-allowed; }
.crm-cps__input::placeholder { color: var(--cps-muted); opacity: .7; }
.crm-cps__count { align-self: flex-end; font-size: 11.5px; color: var(--cps-muted); font-variant-numeric: tabular-nums; }
.crm-cps__count.is-full { color: #dc2626; }

.crm-cps__rules {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 8px;
  background: var(--cps-soft); border: 1px solid var(--cps-line);
}
.crm-cps__rules i { color: #4d7c0f; font-size: 16px; line-height: 1.4; }
.dark .crm-cps__rules i { color: var(--cps-lime); }
.crm-cps__rules p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cps-muted); }

.crm-cps__bar { display: flex; align-items: center; gap: 12px; }
.crm-cps__save {
  height: 38px; padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--cps-lime); color: #000 !important; font-weight: 600; font-size: 14px;
}
.crm-cps__save:hover:not(:disabled) { background: #c6ec00; }
.crm-cps__save:disabled { opacity: .5; cursor: default; }
.crm-cps__status { font-size: 13px; color: var(--cps-muted); }
.crm-cps__status.is-ok { color: #15803d; }
.crm-cps__status.is-error { color: #dc2626; }
.dark .crm-cps__status.is-ok { color: var(--cps-lime); }

/* The row in Settings: our icon sized like the platform's. */
aside .crm-cps__rowicon { font-size: 14px; line-height: 1; display: inline-grid; place-items: center; width: 16px; height: 16px; }
aside .crm-cps__rowicon svg { width: 14px; height: 14px; }

/* The platform puts a margin under every input, with a selector of six :not()s
   that nothing short of !important outranks; the counter belongs right under the field. */
.crm-cps .crm-cps__input { margin: 0 !important; }