/* Вкладка «Рассылки», версия 2. Изолированный файл: все селекторы под .ub-root,
   чтобы правки не пересекались с общим style.css. */

.ub-root { --ub-gap: 14px; }

/* ---- шаги ---- */
.ub-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ub-step-nav {
  display: flex; align-items: center; gap: 8px; padding: 7px 13px;
  border: 1px solid var(--border-soft); border-radius: 999px;
  background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .13s;
}
.ub-step-nav:hover { border-color: var(--border); color: var(--text); }
.ub-step-nav.active { border-color: var(--primary); color: #fff; background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(99,102,241,.08)); }
.ub-step-nav .ub-n {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--border-soft); color: var(--text); font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ub-step-nav.active .ub-n { background: var(--primary); color: #fff; }
.ub-step-nav.done .ub-n { background: var(--green); color: #06210f; }

.ub-card { margin-bottom: var(--ub-gap); }
.ub-card > .ub-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap;
}
.ub-card-head h3 { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 9px; }
.ub-card-head .ub-n {
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ub-card-body { padding: 16px; }
.ub-sub { color: var(--muted); font-size: 12.5px; }

/* ---- поля ---- */
.ub-in, .ub-root select.ub-in, .ub-root textarea.ub-in {
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-soft); color: var(--text); outline: none; transition: border-color .13s;
  max-width: 100%;
}
.ub-in:focus { border-color: var(--primary); }
.ub-in[disabled] { opacity: .5; }
.ub-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ub-row + .ub-row { margin-top: 10px; }
.ub-grow { flex: 1 1 240px; min-width: 0; }
.ub-label { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 5px; }
.ub-chk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }

/* ---- шаг 1: база ---- */
.ub-cnt-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding: 11px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-soft);
}
.ub-cnt-num { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ub-cnt-sub { color: var(--muted); font-size: 12px; }

/* ---- шаг 2: текст + предпросмотр рядом ---- */
.ub-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; align-items: start; }
.ub-editor { min-width: 0; }
.ub-text {
  width: 100%; min-height: 150px; resize: vertical; line-height: 1.5;
  font-family: inherit;
}
.ub-fmt { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ub-fmt .btn { padding: 4px 10px; font-size: 12.5px; }

/* палитра */
.ub-pal { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-soft); overflow: hidden; }
.ub-pal-top { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.ub-pal-search { flex: 1 1 160px; min-width: 120px; padding: 6px 10px; font-size: 13px; }
.ub-pal-cats { display: flex; gap: 5px; overflow-x: auto; padding: 8px 10px 0; scrollbar-width: thin; }
.ub-pal-cats::-webkit-scrollbar { height: 5px; }
.ub-pal-cats::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ub-pal-cat {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-soft);
  background: var(--panel); color: var(--muted); font-size: 12.5px; white-space: nowrap;
  cursor: pointer; transition: all .12s;
}
.ub-pal-cat:hover { color: var(--text); }
.ub-pal-cat.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ub-pal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 3px; padding: 10px; max-height: 236px; overflow-y: auto;
}
.ub-pal-grid::-webkit-scrollbar { width: 7px; }
.ub-pal-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ub-emo {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  cursor: pointer; transition: background .12s, transform .12s;
}
.ub-emo:hover { background: var(--panel-2); border-color: var(--border-soft); transform: translateY(-1px); }
.ub-emo img { width: 24px; height: 24px; display: block; }
.ub-pal-empty { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 13px; }
.ub-pal-foot { padding: 0 10px 9px; color: var(--muted); font-size: 11.5px; }

/* ---- предпросмотр: имитация чата Telegram ---- */
.ub-preview-wrap { position: sticky; top: 8px; }
.ub-phone {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: #0e1420;
}
.ub-phone-bar {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  background: var(--panel-2); border-bottom: 1px solid var(--border-soft);
}
.ub-phone-ava {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px;
}
.ub-phone-title { font-size: 13px; font-weight: 600; }
.ub-phone-sub { font-size: 11px; color: var(--muted); }
.ub-phone-body {
  padding: 16px 12px 18px; min-height: 190px; max-height: 460px; overflow-y: auto;
  background:
    radial-gradient(420px 300px at 18% 8%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(360px 320px at 88% 84%, rgba(139,92,246,.12), transparent 62%),
    #0b111c;
}
.ub-bubble {
  max-width: 92%; padding: 9px 12px 7px; border-radius: 14px 14px 14px 5px;
  background: var(--panel); border: 1px solid var(--border-soft);
  font-size: 14px; line-height: 1.48; word-break: break-word; white-space: pre-wrap;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.9);
}
.ub-bubble img.ub-ce { width: 19px; height: 19px; vertical-align: -4px; display: inline-block; }
.ub-bubble .ub-time { float: right; font-size: 10.5px; color: var(--muted); margin: 6px 0 0 10px; }
.ub-bubble-empty { color: var(--muted); font-style: italic; }
/* кнопки инлайн-клавиатуры под пузырём — как в Telegram */
.ub-kb { max-width: 92%; margin-top: 3px; display: flex; flex-direction: column; gap: 3px; }
.ub-kb-row { display: flex; gap: 3px; }
.ub-kb-btn {
  flex: 1; text-align: center; padding: 8px 10px; border-radius: 9px;
  background: rgba(99,102,241,.16); border: 1px solid rgba(99,102,241,.3);
  color: var(--primary-2); font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ub-prev-note { margin-top: 9px; font-size: 11.5px; color: var(--muted); }
.ub-prev-err { margin-top: 9px; font-size: 12px; color: var(--amber); }

/* ---- режимы кампании ---- */
.ub-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ub-mode {
  text-align: left; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-soft); background: var(--panel); color: var(--text);
  transition: all .13s;
}
.ub-mode:hover { border-color: var(--border); }
.ub-mode.active { border-color: var(--primary); background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(99,102,241,.04)); }
.ub-mode b { display: block; font-size: 13.5px; font-weight: 620; margin-bottom: 3px; }
.ub-mode span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; }

/* ---- шаг 4: отправка ---- */
.ub-send-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.12), transparent 70%);
  border: 1px solid var(--border-soft);
}
.ub-send-bar .btn-primary { padding: 10px 20px; font-weight: 600; }
.ub-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ub-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ub-check .ub-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.ub-check.ok { color: var(--text); }
.ub-check.ok .ub-dot { background: var(--green); }
.ub-check.warn .ub-dot { background: var(--amber); }

.ub-prog-track { height: 9px; background: var(--border-soft); border-radius: 6px; margin-top: 11px; overflow: hidden; }
.ub-prog-fill { height: 100%; background: var(--green); transition: width .3s; }
.ub-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.ub-stat { padding: 11px 13px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-soft); }
.ub-stat .k { color: var(--muted); font-size: 11.5px; }
.ub-stat .val { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- мобильная (обязательна работа на 360px) ---- */
@media (max-width: 900px) {
  .ub-compose { grid-template-columns: minmax(0, 1fr); }
  .ub-preview-wrap { position: static; }
}
@media (max-width: 560px) {
  .ub-card-body { padding: 13px; }
  .ub-steps { gap: 6px; }
  .ub-step-nav { padding: 6px 10px; font-size: 12px; }
  .ub-row > .ub-in, .ub-row > select.ub-in { flex: 1 1 100%; }
  .ub-row .btn { flex: 1 1 auto; justify-content: center; }
  .ub-pal-grid { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); max-height: 200px; }
  .ub-modes { grid-template-columns: minmax(0, 1fr); }
  .ub-send-bar { padding: 12px; }
  .ub-send-bar .btn, .ub-send-bar .ub-in { flex: 1 1 100%; justify-content: center; }
  .ub-bubble, .ub-kb { max-width: 100%; }
  .ub-cnt-num { font-size: 22px; }
}