/* messaging.css — «پیامک و ایمیل» (web/js/messaging.js). */
.ms-tabs { margin: 4px 0 14px; flex-wrap: wrap; }
.ms-body > * + * { margin-top: 14px; }
.ms-logo { width: 38px; height: 38px; flex: none; border-radius: 12px; display: inline-grid; place-items: center; font-weight: 900; font-size: 18px;
  color: var(--br, #2563eb); background: color-mix(in srgb, var(--br, #2563eb) 12%, var(--sf, #fff)); }
.ms-st-hd { display: flex; align-items: center; gap: 10px; }
.ms-acts { gap: 8px; margin-top: 12px; align-items: center; }
.ms-status .kv { margin-top: 12px; }
.ms-fallback { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ln, #e5e7eb); }
.ms-next { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

/* provider picker */
.ms-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 12px 0; }
.ms-prov { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--ln, #e5e7eb); background: var(--sf, #fff);
  color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ms-prov > span:nth-child(2) { flex: 1; min-width: 0; }
.ms-prov small { display: block; color: var(--mu, #64748b); font-size: 12px; margin-top: 2px; }
.ms-prov:hover { border-color: color-mix(in srgb, var(--br, #2563eb) 45%, var(--ln, #e5e7eb)); transform: translateY(-1px); }
.ms-prov.on { border-color: var(--br, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--br, #2563eb) 16%, transparent); }
.ms-prov:focus-visible { outline: 3px solid color-mix(in srgb, var(--br, #2563eb) 45%, transparent); outline-offset: 2px; }
.ms-detail:empty { display: none; }
.ms-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: 6px; }
.ms-guide { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--br, #2563eb) 6%, var(--sf, #fff));
  border: 1px solid color-mix(in srgb, var(--br, #2563eb) 18%, var(--ln, #e5e7eb)); }
.ms-steps { margin: 10px 0; padding-inline-start: 20px; line-height: 2; }
.ms-steps li::marker { color: var(--br, #2563eb); font-weight: 800; }
.ms-links { gap: 8px; margin-top: 8px; }
.ms-form { align-content: start; }
@media (max-width: 820px) { .ms-detail { grid-template-columns: 1fr; } }

/* patterns */
.ms-intro code, .ms-ed code { background: color-mix(in srgb, var(--ink, #0f172a) 6%, transparent); padding: 1px 6px; border-radius: 6px; }
.ms-group-hd { font-size: 15px; margin: 18px 0 8px; }
.ms-group > .card + .card { margin-top: 8px; }
.ms-ev { padding: 0; }
.ms-ev-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; }
.ms-ev-sum::-webkit-details-marker { display: none; }
.ms-ev-sum::after { content: "▾"; color: var(--mu, #64748b); transition: transform .2s; }
.ms-ev[open] > .ms-ev-sum::after { transform: rotate(180deg); }
.ms-ev-st { margin-inline-start: auto; white-space: nowrap; }
.ms-ed, .ms-ev > .ux-form { padding: 0 16px 16px; border-top: 1px solid var(--ln, #e5e7eb); padding-top: 14px; display: grid; gap: 12px; }
.ms-lbl { font-weight: 800; font-size: 13px; }
.ms-rows { display: grid; gap: 8px; }
.ms-row { display: grid; grid-template-columns: auto minmax(90px, .7fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.ms-row:not(:has(.ms-slot)) { grid-template-columns: minmax(90px, .7fr) minmax(0, 2fr) auto; }
.ms-slot { font: 700 12px/1 ui-monospace, monospace; direction: ltr; padding: 6px 8px; border-radius: 8px; color: var(--br, #2563eb);
  background: color-mix(in srgb, var(--br, #2563eb) 10%, var(--sf, #fff)); }
.ms-rtools { display: flex; gap: 2px; }
.ms-rtools .btn { min-width: 30px; padding-inline: 6px; }
.ms-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ms-vars .chip { font-size: 12px; }
.ms-preview { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink, #0f172a) 3%, var(--sf, #fff)); border: 1px dashed var(--ln, #e5e7eb); }
.ms-pv { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ms-pv li { display: flex; gap: 10px; align-items: baseline; }
.ms-pv code { min-width: 70px; font-size: 12px; color: var(--mu, #64748b); }
@media (max-width: 640px) {
  .ms-row, .ms-row:not(:has(.ms-slot)) { grid-template-columns: 1fr auto; }
  .ms-row .ms-val { grid-column: 1 / -1; }
  .ms-slot { justify-self: start; }
}

/* email + log */
.ms-smtp[hidden] { display: none; }
.ms-log { align-items: flex-start; gap: 12px; }
.ms-log > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.ms-log-st { display: grid; justify-items: end; gap: 4px; flex: none; }
.bd-tx { color: var(--bd, #dc2626); }

/* super admin */
.ms-plink + .ms-plink { margin-top: 10px; }
.ms-plink .ux-form { margin-top: 10px; }
.ms-savebar { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; margin-top: 12px; }
.ms-savebar .btn { box-shadow: 0 10px 24px rgba(15, 31, 58, .2); }