/* previews.css — GENERATED from legacy.css by previews_extract.js. Do not edit by hand.
   The nf-* notification/broadcast preview subsystem (iOS/Telegram/email device
   mockups + broadcast console), un-scoped from body.legacy and ds-token-translated,
   so notifications/announcements/notify_preview keep their device previews after
   migrating off legacy. These intentionally mimic real devices, not the admin DS. */

.nf-tabs { display:flex; gap:8px; margin-bottom:18px; }

.nf-grid {
  display:grid;
  grid-template-columns:296px minmax(340px,1fr) 330px;
  gap:16px;
  align-items:start;
}

.nf-bc-grid {
  display:grid;
  grid-template-columns:minmax(400px,1fr) 330px;
  gap:16px;
  align-items:start;
  margin-bottom:16px;
}

@media (max-width:1280px) {
.nf-grid { grid-template-columns:270px 1fr; }
.nf-grid .nf-pv { grid-column:1 / -1; position:static; }
.nf-bc-grid { grid-template-columns:1fr; }
}

.nf-list { display:flex; flex-direction:column; gap:6px; }

.nf-item {
  text-align:left;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:11px 13px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
  font-family:var(--font);
  color:var(--text2);
  width:100%;
}

.nf-item:hover { border-color:var(--borderStrong); }

.nf-item.is-on { border-color:var(--accent); background:rgba(255,255,255,.07); box-shadow:0 0 0 3px var(--accent12); }

.nf-item__name { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--text); }

.nf-item__dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--ok); }

.nf-item.is-inactive .nf-item__dot { background:var(--text3); }

.nf-item.is-inactive .nf-item__name { color:var(--text3); }

.nf-item__trig { font-size:11px; color:var(--text3); margin-top:3px; line-height:1.35; }

.nf-item__key { font-family:var(--mono); font-size:10px; color:var(--text3); opacity:.8; margin-top:2px; }

.nf-ed-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }

.nf-ed-head h2 { font-size:16px; margin:0; }

.nf-trig { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text3); margin-bottom:14px; }

.nf-trig svg { width:13px; height:13px; flex:0 0 13px; }

.nf-phs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }

.nf-ph {
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  color:var(--text2);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:3px 9px;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}

.nf-ph:hover { border-color:var(--accent); color:var(--text); }

.nf-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; }

.nf-switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--text2); margin-left:auto; user-select:none; }

.nf-switch__tr { width:34px; height:20px; border-radius:var(--r-pill); background:var(--surfaceRaised); border:1px solid var(--borderStrong); position:relative; transition:background .2s, border-color .2s; }

.nf-switch__tr::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--text2); transition:left .2s, background .2s; }

.nf-switch.is-on .nf-switch__tr { background:color-mix(in srgb, var(--accent) 45%, var(--bg)); border-color:var(--accent); }

.nf-switch.is-on .nf-switch__tr::after { left:16px; background:#fff; }

.nf-test { display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }

.nf-test input { flex:1; font-family:var(--mono); font-size:12px; }

.nf-ch-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 12px; }

@media (max-width:900px) {
.nf-ch-grid { grid-template-columns:1fr; }
}

.nf-ch {
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg);
  padding:10px 12px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}

.nf-ch:hover { border-color:var(--borderStrong); }

.nf-ch.is-on { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent12); }

.nf-ch.is-disabled { opacity:.45; cursor:not-allowed; }

.nf-ch__box { width:16px; height:16px; border-radius:4px; border:1px solid var(--borderStrong); flex:0 0 16px; margin-top:2px; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }

.nf-ch.is-on .nf-ch__box { background:var(--accent); border-color:var(--accent); }

.nf-ch__box svg { display:none; width:10px; height:10px; }

.nf-ch.is-on .nf-ch__box svg { display:block; }

.nf-ch__name { font-weight:700; font-size:13px; color:var(--text); }

.nf-ch__hint { font-size:11px; color:var(--text3); line-height:1.35; margin-top:1px; }

.nf-pv { position:sticky; top:18px; }

.nf-pv-tabs { display:flex; gap:4px; margin-bottom:10px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; }

.nf-pv-tab { flex:1; text-align:center; font:600 11px var(--font); color:var(--text3); padding:5px 0; border-radius:var(--r-pill); cursor:pointer; border:0; background:transparent; transition:color .15s, background .15s; }

.nf-pv-tab.is-on { background:rgba(255,255,255,.07); color:var(--text); box-shadow:inset 0 0 0 1px var(--borderStrong); }

.nf-pv-brand { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text3); margin-bottom:10px; justify-content:center; }

.nf-pv-brand .seg { display:flex; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-pill); padding:2px; }

.nf-pv-brand .seg button { border:0; background:transparent; border-radius:var(--r-pill); font:600 11px var(--font); color:var(--text3); padding:3px 10px; cursor:pointer; }

.nf-pv-brand .seg button.is-on { background:rgba(255,255,255,.07); color:var(--text); }

.nf-phone {
  width:300px; margin:0 auto;
  border-radius:44px;
  border:1px solid var(--borderStrong);
  background:#000;
  padding:9px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}

.nf-screen {
  border-radius:36px; overflow:hidden; position:relative; height:560px;
  display:flex; flex-direction:column;
  background:radial-gradient(140% 90% at 80% 0%, #0E1B33 0%, #060B18 55%, #02050C 100%);
}

.nf-island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:86px; height:24px; border-radius:14px; background:#000; z-index:5; }

.nf-status { display:flex; justify-content:space-between; align-items:center; padding:12px 22px 0; font:600 12px var(--font); color:#EAF0F8; position:relative; z-index:2; }

.nf-cap { position:absolute; bottom:0; left:0; right:0; text-align:center; font:500 10px var(--font); color:rgba(255,255,255,.4); padding:10px; letter-spacing:.04em; }

.nf-clock { text-align:center; margin-top:44px; color:#EAF0F8; }

.nf-clock b { font-size:56px; font-weight:700; letter-spacing:-.01em; line-height:1; display:block; }

.nf-clock span { display:block; font-size:13px; color:rgba(234,240,248,.75); margin-top:4px; }

.nf-notif {
  margin:26px 10px 0;
  background:rgba(28,34,48,.72);
  backdrop-filter:blur(18px);
  border-radius:18px; padding:11px 12px;
  display:flex; gap:10px;
  border:1px solid rgba(255,255,255,.06);
}

.nf-notif__icon { width:36px; height:36px; border-radius:9px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; font:800 16px var(--font); }

.nf-notif__b { min-width:0; flex:1; }

.nf-notif__top { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:rgba(234,240,248,.6); }

.nf-notif__top b { font-weight:600; color:rgba(234,240,248,.85); text-transform:uppercase; font-size:10px; letter-spacing:.03em; }

.nf-notif__title { font-weight:700; font-size:13px; color:#F2F6FB; margin-top:1px; word-wrap:break-word; }

.nf-notif__text { font-size:12.5px; line-height:1.35; color:rgba(234,240,248,.85); word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

.nf-tg { display:flex; flex-direction:column; height:100%; background:#0B1220; }

.nf-tg__bar { display:flex; align-items:center; gap:10px; padding:40px 14px 10px; background:rgba(16,23,38,.9); border-bottom:1px solid rgba(255,255,255,.06); }

.nf-tg__ava { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 13px var(--font); color:#fff; flex:0 0 32px; }

.nf-tg__name { font-weight:700; font-size:13px; color:#F2F6FB; line-height:1.2; }

.nf-tg__name span { display:block; font-weight:500; font-size:11px; color:#63A8E0; }

.nf-tg__flow { flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }

.nf-tg__bubble { max-width:86%; background:#182233; border-radius:14px 14px 14px 4px; padding:9px 11px; font-size:13px; line-height:1.4; color:#EAF0F8; white-space:pre-wrap; word-wrap:break-word; }

.nf-tg__bubble b { display:block; margin-bottom:4px; }

.nf-tg__time { font-size:10px; color:rgba(234,240,248,.45); text-align:right; margin-top:4px; }

.nf-tg__input { margin:0 10px 34px; background:#141D2E; border-radius:18px; padding:8px 14px; font-size:12px; color:rgba(234,240,248,.4); }

.nf-em { display:flex; flex-direction:column; height:100%; background:#0A0F1A; }

.nf-em__hdr { padding:42px 16px 12px; border-bottom:1px solid rgba(255,255,255,.07); }

.nf-em__from { font-size:11px; color:rgba(234,240,248,.55); }

.nf-em__from b { color:#EAF0F8; font-weight:600; }

.nf-em__subj { font-weight:700; font-size:14px; color:#F2F6FB; margin-top:5px; line-height:1.3; }

.nf-em__body { flex:1; overflow:hidden; padding:14px 14px 40px; }

.nf-em__card { background:#0D1526; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px 16px; }

.nf-em__brand { display:flex; align-items:center; gap:8px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); font-weight:800; font-size:13px; color:#F2F6FB; }

.nf-em__title { font-size:15px; font-weight:800; color:#F2F6FB; margin-bottom:8px; line-height:1.3; }

.nf-em__p { font-size:12.5px; line-height:1.5; color:rgba(234,240,248,.8); margin-bottom:8px; word-wrap:break-word; }

.nf-em__cta { display:inline-block; margin-top:6px; border-radius:9px; padding:8px 16px; font:700 12px var(--font); color:#fff; }

.nf-sub { border-bottom:1px dotted rgba(234,240,248,.5); }

.nf-st { min-width:180px; }

.nf-st__row { display:grid; grid-template-columns:56px 1fr 84px; gap:8px; align-items:center; margin:3px 0; font-size:11px; }

.nf-st__lb { color:var(--text3); font-weight:600; }

.nf-st__nums { color:var(--text2); text-align:right; font-family:var(--mono); font-size:10.5px; white-space:nowrap; }

.nf-bar { height:4px; border-radius:2px; background:var(--surfaceRaised); overflow:hidden; }

.nf-bar i { display:block; height:100%; border-radius:2px; background:var(--ok); }

.nf-bar.is-warn i { background:var(--warn); }

.nf-wp { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text3); margin-bottom:14px; }

.nf-wp i { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(65,194,140,.6); flex:0 0 8px; }

.nf-wp.is-off i { background:var(--danger); box-shadow:0 0 8px rgba(226,98,92,.6); }

.nf-btns { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }

.nf-btnrow { display:flex; gap:8px; width:100%; }

.nf-btnrow input { flex:1; font-size:13px; }

.nf-btnrow .btn { padding:5px 11px; }

.nf-i18nline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.nf-pv-brand .seg button.is-empty { opacity:.45; }

.nf-noloc {
  margin:auto 24px; text-align:center;
  font:500 13px/1.5 var(--font); color:rgba(234,240,248,.6);
  border:1px dashed rgba(255,255,255,.18); border-radius:14px; padding:18px 14px;
}

.nf-tg__btns { display:flex; flex-direction:column; gap:3px; max-width:86%; }

.nf-tg__btn {
  background:rgba(99,168,224,.14);
  color:#63A8E0;
  border-radius:9px;
  text-align:center;
  font:600 12.5px var(--font);
  padding:7px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.nf-em__cta { margin-top:8px; }

.nf-eng { display:grid; grid-template-columns:56px 1fr 84px; gap:8px; align-items:center; margin:3px 0; font-size:11px; }

.nf-eng__lb { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── «Карточки чата» — превью server-driven storeflow-карточек ─────────────
   Мокап сообщений чата поддержки как в приложении: НЕ ds-ить (nf-* скоуп). */

.nf-sfhead { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }

.nf-sfgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.nf-sfmsg {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nf-sfmsg__head { display:flex; align-items:baseline; gap:8px; }
.nf-sfmsg__op { font-weight:700; font-size:12px; color:var(--text2); }
.nf-sfmsg__time { font-size:10px; color:var(--text3); }

.nf-sfcard {
  border:1px solid var(--borderStrong);
  border-radius:var(--r-md);
  padding:12px;
  background:var(--surfaceRaised);
}
.nf-sfcard--warning {
  border-color:color-mix(in srgb, var(--warn) 55%, transparent);
  background:var(--warn12);
}
.nf-sfcard--success {
  border-color:color-mix(in srgb, var(--ok) 55%, transparent);
  background:var(--ok12);
}

.nf-sfcard__title { font-weight:700; font-size:13px; color:var(--text); }
.nf-sfcard--warning .nf-sfcard__title { color:var(--warn-ink); }
.nf-sfcard--success .nf-sfcard__title { color:var(--ok-ink); }
.nf-sfcard__body { font-size:12px; color:var(--text2); line-height:1.45; margin-top:5px; }
.nf-sfcard__btns { display:flex; flex-direction:column; gap:6px; margin-top:10px; }

.nf-sfbtn {
  display:block;
  text-align:center;
  padding:7px 12px;
  border-radius:var(--r-sm);
  font-size:12px;
  font-weight:700;
  background:var(--accent);
  color:var(--accentText);
  border:1px solid transparent;
}
.nf-sfbtn--secondary {
  background:transparent;
  color:var(--text);
  border-color:var(--borderStrong);
  font-weight:600;
}

.nf-sfmsg__meta {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  border-top:1px dashed var(--border);
  padding-top:8px;
  font-size:11px;
  color:var(--text3);
}
.nf-sfmsg__meta b { color:var(--text2); font-size:11px; }
.nf-sfmsg__trig { margin-top:2px; line-height:1.35; }

.nf-sfed { margin-bottom:16px; }
.nf-sfed__title { font-weight:700; font-size:14px; }
.nf-sfed__f { display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:12px; color:var(--text2); }