/* Кадр — дизайн-система панели (content/panel-spec.md). Предпросмотр Telegram — в preview/telegram.css. */

:root {
  --bg: #F6F5F3;
  --surface: #FFFFFF;
  --surface-2: #EFEEEC;
  --border: #D5D3D0;
  --text-1: #202127;
  --text-2: #555861;
  --text-3: #6D7079;
  --accent: #6546C7;
  --accent-hover: #5434B4;
  --success: #237A49;
  --danger: #BE343E;
  --danger-hover: #A92832;
  --danger-active: #94212B;
  --warning: #8D600D;
  --focus: #8060DE;
  --stage: #E7E5E2;
  --on-accent: #FFFFFF;
  --on-danger: #FFFFFF;
  --accent-soft: #F0EBFD;
  --success-soft: #EAF5EE;
  --danger-soft: #FCEDEF;
  --warning-soft: #FCF3DE;
  --info-bg: #EFEEEC;
  --scrim: #20212766;
  --phone-frame: #303136;
  --shadow-1: 0 2px 6px #2021270A;
  --shadow-2: 0 8px 24px #20212714;
  --shadow-3: 0 20px 56px #20212724;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nav-w: 240px;
  --radius-card: 16px;
  --radius-btn: 10px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #141518;
  --surface: #1D1F24;
  --surface-2: #282B32;
  --border: #424650;
  --text-1: #F3F4F6;
  --text-2: #BEC2CC;
  --text-3: #959BA8;
  --accent: #B4A0FF;
  --accent-hover: #C5B7FF;
  --success: #79D7A1;
  --danger: #FF929A;
  --danger-hover: #FFADB3;
  --danger-active: #FFBEC3;
  --warning: #E8BE68;
  --focus: #C7B8FF;
  --stage: #101114;
  --on-accent: #191322;
  --on-danger: #2A1115;
  --accent-soft: #302844;
  --success-soft: #20362B;
  --danger-soft: #3C252A;
  --warning-soft: #3A3222;
  --info-bg: #282B32;
  --scrim: #00000099;
  --phone-frame: #393C43;
  --shadow-1: 0 2px 6px #00000033;
  --shadow-2: 0 8px 24px #00000066;
  --shadow-3: 0 20px 56px #00000099;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-1);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
h2 { font-size: 18px; line-height: 26px; font-weight: 600; }
.display { font-size: 32px; line-height: 40px; font-weight: 600; }
.small { font-size: 13px; line-height: 20px; }
.caption { font-size: 12px; line-height: 16px; font-weight: 500; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--mono); font-size: 13px; line-height: 20px; }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.warning-text { color: var(--warning); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.lucide { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }
.icon-16 svg.lucide, svg.lucide.i16 { width: 16px; height: 16px; }
.i18 { width: 18px !important; height: 18px !important; }
.i14 { width: 14px !important; height: 14px !important; }
.i22 { width: 22px !important; height: 22px !important; }
.i40 { width: 40px !important; height: 40px !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ---------- Каркас ---------- */
.shell { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; padding-top: var(--app-top, 0px); }
.shell.nav-collapsed { --nav-w: 64px; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: var(--app-top, 0px); height: calc(100vh - var(--app-top, 0px)); padding: 0 12px 12px; overflow: hidden; }
.sidebar .brand { height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 12px; font-weight: 600; font-size: 18px; }
.sidebar .brand img { width: 28px; height: 28px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; color: var(--text-1); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); }
.nav a:active, .nav a.active { background: var(--accent-soft); color: var(--accent); }
.sidebar .spacer { flex: 1; }
.sidebar > .btn { justify-content: flex-start; padding: 0 12px; }
.nav-collapsed .sidebar > .btn { justify-content: center; padding: 0; }
.sidebar .me { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; }
.sidebar .me .avatar { width: 28px; height: 28px; }
.nav-collapsed .sidebar .brand span, .nav-collapsed .nav a span, .nav-collapsed .sidebar .me .small, .nav-collapsed .sidebar > .btn span { display: none; }
.nav-collapsed .nav a, .nav-collapsed .sidebar .me, .nav-collapsed .sidebar .brand { justify-content: center; padding: 0; }
.main { min-width: 0; }
.page { max-width: 1440px; margin: 0 auto; padding: 32px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabbar { display: none; }
.fab { display: none; }

@media (max-width: 1099px) {
  .shell { --nav-w: 64px; }
  .sidebar .brand span, .nav a span, .sidebar .me .small, .sidebar .collapse, .sidebar > .btn span { display: none; }
  .nav a, .sidebar .me, .sidebar .brand, .sidebar > .btn { justify-content: center; padding: 0; }
}
@media (max-width: 767px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .page { padding: 16px 16px calc(92px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; line-height: 28px; }
  .display { font-size: 28px; line-height: 36px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border); z-index: 30; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); text-decoration: none; font-size: 11px; line-height: 14px; font-weight: 500; }
  .tabbar a.active { color: var(--accent); }
  .fab { display: flex; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 999px; background: var(--accent); color: var(--on-accent); border: 0; align-items: center; justify-content: center; box-shadow: var(--shadow-2); z-index: 31; cursor: pointer; }
  input, textarea, select, .richtext { font-size: 16px; line-height: 24px; }
}

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-btn); border: 1px solid transparent; font-weight: 600; font-size: 14px; line-height: 20px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 120ms ease-out; }
.btn svg.lucide { width: 18px; height: 18px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; line-height: 18px; }
.btn.sm svg.lucide { width: 16px; height: 16px; }
.btn.lg { height: 48px; padding: 0 20px; }
.btn.lg svg.lucide { width: 20px; height: 20px; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:active { background: var(--accent-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 20%, transparent); }
.btn.secondary { background: var(--surface); color: var(--text-1); border-color: var(--border); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.secondary:active { background: var(--accent-soft); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text-1); }
.btn.ghost:active { background: var(--accent-soft); color: var(--accent); }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.danger:hover { background: var(--danger-hover); }
.btn.danger:active { background: var(--danger-active); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--text-3); border-color: var(--border); cursor: not-allowed; }
.btn.ghost:disabled { background: transparent; border-color: transparent; }
.btn.icon { width: 40px; padding: 0; }
.btn.icon.sm { width: 32px; }
.btn .spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* На телефоне зона касания любого компактного элемента — не меньше 44×44 (визуальный размер не меняем). */
@media (max-width: 767px) {
  .btn, .toolbar button, .segments button, .kb-btn, .kb-add, .chip button, .media-item .remove, .tabs button, .kb-row .grip, .btn.icon.sm { position: relative; }
  .btn.sm::after, .toolbar button::after, .segments button::after, .kb-btn::after, .kb-add::after, .chip button::after, .media-item .remove::after, .kb-row .grip::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  .toolbar { gap: 8px; }
}

/* ---------- Поля ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-weight: 500; font-size: 14px; line-height: 20px; }
.input, textarea.input, select.input { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-1); width: 100%; }
textarea.input { height: auto; min-height: 120px; padding: 12px; resize: vertical; }
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--text-3); }
.input:focus { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.input:disabled { background: var(--surface-2); color: var(--text-3); }
.field.error .input { border-color: var(--danger); }
.hint { font-size: 13px; line-height: 20px; color: var(--text-2); }
.error-text { font-size: 13px; line-height: 20px; color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.error-text svg.lucide { width: 16px; height: 16px; margin-top: 2px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > .btn, .section > .btn { align-self: flex-start; }
.stack.tight { gap: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) { .grid-2 { grid-template-columns: 1fr; } }

/* чекбокс и переключатель */
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; color: var(--on-accent); }
.check .box svg.lucide { width: 14px; height: 14px; opacity: 0; }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box svg.lucide { opacity: 1; }
.check:hover .box { border-color: var(--accent); }
.check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }
.check input:disabled + .box { background: var(--surface-2); border-color: var(--border); color: var(--text-3); }
.check .text { display: flex; flex-direction: column; }
.check .text .hint { margin-top: 0; }
.switch .box { width: 36px; height: 22px; border-radius: 999px; position: relative; margin-top: 1px; }
.switch .box::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--text-3); transition: transform 120ms ease-out, background 120ms ease-out; }
.switch input:checked + .box::after { transform: translateX(14px); background: var(--on-accent); }
.switch .box svg { display: none; }

/* сегменты */
.segments { display: inline-flex; background: var(--surface-2); padding: 4px; border-radius: 10px; gap: 2px; }
.segments button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-weight: 500; font-size: 13px; line-height: 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segments button[aria-pressed="true"] { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-1); }
.segments button svg.lucide { width: 16px; height: 16px; }

/* табы */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--text-2); font-weight: 500; font-size: 13px; line-height: 20px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { background: var(--surface-2); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* чипы */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 20px; font-weight: 500; max-width: 240px; }
.chip .avatar { width: 20px; height: 20px; }
.chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.selected { background: var(--accent-soft); border-color: var(--accent); }
.chip.error { background: var(--danger-soft); border-color: var(--danger); }
.chip button { border: 0; background: transparent; padding: 0; display: inline-flex; cursor: pointer; color: var(--text-2); }
.chip button svg.lucide { width: 16px; height: 16px; }
.chip.plain { padding: 0 10px; }

/* аватар */
.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }

/* бейджи */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge svg.lucide { width: 14px; height: 14px; }
.badge.scheduled { background: var(--accent-soft); color: var(--accent); }
.badge.published { background: var(--success-soft); color: var(--success); }
.badge.failed, .badge.partial { background: var(--danger-soft); color: var(--danger); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }

/* карточки */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; }
.card.clickable { cursor: pointer; transition: box-shadow 120ms ease-out, border-color 120ms ease-out; }
.card.clickable:hover { box-shadow: var(--shadow-1); border-color: var(--text-3); }
.card.clickable:active { background: var(--accent-soft); }
.card h2 { margin-bottom: 12px; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section > h2 { font-size: 18px; line-height: 26px; }
.divider { height: 1px; background: var(--border); margin: 8px 0; }

/* список постов */
.post-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: start; }
.post-card .thumb { width: 64px; height: 64px; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.post-card .meta { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.post-card .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.post-card.published .meta { color: var(--text-3); }
@media (max-width: 767px) { .post-card { grid-template-columns: 48px 1fr auto; gap: 12px; } .post-card .thumb { width: 48px; height: 48px; } }

/* меню (поповер) */
.menu { position: fixed; z-index: 50; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 4px; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; background: transparent; border-radius: 8px; text-align: left; cursor: pointer; color: var(--text-1); }
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--danger); }
.menu button svg.lucide { width: 18px; height: 18px; }

/* тосты */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; width: 360px; max-width: calc(100vw - 32px); }
@media (max-width: 767px) { .toasts { top: calc(16px + env(safe-area-inset-top)); bottom: auto; left: 16px; right: 16px; width: auto; } }
.toast { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-2); display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start; animation: toast-in 180ms ease-out; }
.toast.closing { animation: toast-out 120ms ease-in forwards; }
.toast > svg.lucide { width: 20px; height: 20px; margin-top: 1px; }
.toast .close svg.lucide { width: 16px; height: 16px; }
.toast.success svg.lucide { color: var(--success); }
.toast.error svg.lucide { color: var(--danger); }
.toast.warning svg.lucide { color: var(--warning); }
.toast.info svg.lucide { color: var(--text-2); }
.toast .body { white-space: pre-wrap; word-break: break-word; }
.toast .acts { display: flex; gap: 8px; margin-top: 8px; }
.toast .acts button { font-size: 13px; line-height: 20px; font-weight: 600; }
.toast .close { border: 0; background: transparent; padding: 0; color: var(--text-3); cursor: pointer; display: inline-flex; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 767px) { @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } }

/* модалки */
.scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 80; }
.modal { width: 480px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-3); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal.wide { width: 720px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767px) { .modal .foot { flex-direction: column; } .modal .foot .btn { width: 100%; } }
.modal .chat-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.modal .chat-list .check { min-height: 44px; align-items: center; }

/* пустые состояния и скелетоны */
.empty { padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty > svg.lucide { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 8px; }
.empty h2 { margin: 0; }
.empty p { max-width: 360px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.empty .btn { margin-top: 8px; }
.skeleton { display: flex; flex-direction: column; gap: 8px; }
.skeleton .line { height: 12px; border-radius: 4px; background: var(--surface-2); }
.skeleton .line.w60 { width: 60%; }
.skeleton .line.w30 { width: 30%; }

/* таблицы */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); }
.table td.num, .table th.num { text-align: right; }
.table-wrap { overflow-x: auto; }

/* ---------- Редактор ---------- */
.editor-layout { display: grid; grid-template-columns: minmax(420px, 560px) 1fr; gap: 24px; align-items: start; }
.editor-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.editor-head .status { font-size: 13px; line-height: 20px; color: var(--text-2); }
.actions-card { padding: 0; overflow: hidden; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sticky-actions .note { font-size: 13px; line-height: 20px; color: var(--text-2); flex-basis: 100%; }
/* Сцена занимает всю высоту окна справа и не уезжает при прокрутке конструктора; рамка масштабируется под неё. */
.preview-col { position: sticky; top: calc(var(--app-top, 0px) + var(--bar-h, 0px)); height: calc(100vh - var(--app-top, 0px) - var(--bar-h, 0px)); padding: 16px 0; margin-top: -16px; display: flex; flex-direction: column; }
@media (max-width: 767px) { .preview-col { margin-top: 0; } }
.preview-toggle { display: none; }
@media (max-width: 1099px) { .editor-layout { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .editor-layout { grid-template-columns: 1fr; }
  .preview-col { display: none; }
  .preview-col.sheet { display: flex; flex-direction: column; position: fixed; inset: 0; height: auto; z-index: 70; background: var(--bg); overflow: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); animation: sheet-in 240ms cubic-bezier(0.2, 0, 0, 1); }
  .preview-toggle { display: inline-flex; }
  .actions-card { padding: 0; border: 0; height: 0; overflow: visible; background: transparent; }
  .sticky-actions { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; z-index: 40; border-top: 1px solid var(--border); }
  .editor-col { padding-bottom: 120px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* панель форматирования + редактор */
.richtext-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.richtext-wrap:focus-within { border-color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); }
.toolbar button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.toolbar button:hover { background: var(--surface-2); color: var(--text-1); }
.toolbar button[aria-pressed="true"], .toolbar button:active { background: var(--accent-soft); color: var(--accent); }
.toolbar button svg.lucide { width: 18px; height: 18px; }
.toolbar .sep { width: 1px; height: 20px; background: var(--border); align-self: center; margin: 0 4px; }
.richtext { min-height: 200px; padding: 12px; outline: 0; white-space: pre-wrap; word-break: break-word; }
.richtext.is-empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; position: absolute; }
.richtext { position: relative; }
.richtext b { font-weight: 600; }
.richtext u { text-decoration: underline; }
.richtext s { text-decoration: line-through; }
.richtext .spoiler { background: repeating-linear-gradient(45deg, var(--surface-2) 0 4px, var(--border) 4px 8px); border-radius: 3px; }
.richtext code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); border-radius: 4px; padding: 0 3px; }
.richtext .pre { display: block; font-family: var(--mono); font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin: 4px 0; }
.richtext a { color: var(--accent); }
.richtext .bq { display: block; border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 0 6px 6px 0; margin: 4px 0; }
.richtext .bq.expandable::after { content: " ⌄"; color: var(--accent); }
.richtext ::selection { background: var(--accent-soft); }
.counter { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.counter .num { font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter.over .num { color: var(--danger); }

/* медиа */
.dropzone { min-height: 112px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; }
.dropzone:hover { background: var(--accent-soft); }
.dropzone.active { border: 2px solid var(--accent); background: var(--accent-soft); }
.dropzone svg.lucide { width: 24px; height: 24px; color: var(--text-2); }
.media-list { display: flex; gap: 8px; flex-wrap: wrap; }
.media-item { position: relative; width: 72px; display: flex; flex-direction: column; gap: 4px; }
.media-item .thumb { width: 72px; height: 72px; border-radius: 8px; background: var(--surface-2); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-3); cursor: grab; }
.media-item .thumb img, .media-item .thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-item .name { font-size: 13px; line-height: 20px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item .remove { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.media-item .remove svg.lucide { width: 14px; height: 14px; }
.media-item .progress { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.media-item .progress i { display: block; height: 100%; background: var(--accent); }
.media-item.dragging { opacity: 0.5; }

/* конструктор кнопок */
.kb-rows { display: flex; flex-direction: column; gap: 8px; }
.kb-row { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--surface-2); border-radius: 12px; }
.kb-row .grip { color: var(--text-3); cursor: grab; display: inline-flex; padding: 6px; margin: -6px; }
.kb-row .grip svg.lucide { width: 16px; height: 16px; }
.kb-row .cells { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; min-height: 36px; }
.kb-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; max-width: 100%; }
.kb-btn:hover { box-shadow: var(--shadow-1); }
.kb-btn.selected { border: 2px solid var(--accent); padding: 0 11px; }
.kb-btn svg.lucide { width: 16px; height: 16px; }
.kb-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-btn.primary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.kb-btn.success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.kb-btn.danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.kb-btn.invalid { border: 1px dashed var(--danger); color: var(--danger); }
.kb-btn.dragging { opacity: 0.95; box-shadow: var(--shadow-2); }
.kb-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.kb-btn.drop-before { box-shadow: inset 2px 0 0 var(--accent); }
.kb-btn.drop-after { box-shadow: inset -2px 0 0 var(--accent); }
.kb-add { border: 0; background: transparent; color: var(--text-2); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kb-add:hover { background: var(--surface); color: var(--text-1); }
.kb-add svg.lucide { width: 18px; height: 18px; }
.popover { position: fixed; z-index: 60; width: 360px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-2); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.popover .head { display: flex; align-items: center; justify-content: space-between; }
.popover .head h2 { font-size: 16px; line-height: 24px; }
.style-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.style-picker button { height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; cursor: pointer; }
.style-picker button[aria-pressed="true"] { border: 2px solid var(--accent); }
.style-picker .primary { background: var(--accent-soft); color: var(--accent); }
.style-picker .success { background: var(--success-soft); color: var(--success); }
.style-picker .danger { background: var(--danger-soft); color: var(--danger); }

/* сцена предпросмотра */
.stage { background: var(--stage); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; flex: 1; min-height: 0; transition: background 160ms ease-out; }
@media (max-width: 767px) { .stage { padding: 16px; } }
.stage .controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; flex: none; }
.stage .frame-wrap { width: 100%; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; overflow: visible; }
.stage .frame-box { position: relative; flex: none; }
.stage .chat-switch, .stage .caption, .warnings { flex: none; }
.stage .chat-switch { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.stage .chat-switch:empty { display: none; }
.stage .caption { font-size: 13px; line-height: 20px; color: var(--text-2); text-align: center; margin-top: 16px; }
.stage .chat-switch:not(:empty) + .caption { margin-top: 8px; }
.warnings { width: 100%; background: var(--warning-soft); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.warnings h3 { font-size: 14px; line-height: 20px; font-weight: 600; display: flex; gap: 8px; align-items: center; color: var(--warning); }
.warnings h3 svg.lucide { width: 18px; height: 18px; }
.warnings .item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 20px; }
.warnings .item svg.lucide { width: 16px; height: 16px; margin-top: 2px; }
.warnings .item.error { color: var(--danger); }
.warnings .item.warn { color: var(--text-1); }
.warnings .item.warn svg.lucide { color: var(--warning); }

/* календарь */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.cal-grid .dow { padding: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-cell { min-height: 112px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.cal-cell.other { background: var(--bg); color: var(--text-3); }
.cal-cell.today .d { color: var(--accent); font-weight: 600; }
.cal-cell.drop { background: var(--accent-soft); }
.cal-cell .d { font-size: 12px; line-height: 16px; }
.cal-pill { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; padding: 3px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); cursor: grab; overflow: hidden; white-space: nowrap; }
.cal-pill .avatar { width: 14px; height: 14px; font-size: 8px; }
.cal-pill.published { background: var(--success-soft); color: var(--success); cursor: pointer; }
.cal-pill.failed, .cal-pill.partial { background: var(--danger-soft); color: var(--danger); }
.cal-pill .t { overflow: hidden; text-overflow: ellipsis; }
.cal-week { grid-template-columns: repeat(7, 1fr); }
.cal-week .cal-cell { min-height: 320px; }
@media (max-width: 767px) { .cal-cell { min-height: 72px; padding: 4px; } .cal-pill .t { display: none; } .cal-pill { width: 100%; } }

/* статистика */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 767px) { .stat-tiles { grid-template-columns: 1fr 1fr; } }
.tile .v { font-size: 32px; line-height: 40px; font-weight: 600; }
.tile .l { color: var(--text-2); font-size: 13px; line-height: 20px; display: flex; align-items: center; gap: 4px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; }
.bars .bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bars .bar:hover { background: var(--accent-hover); }
.bars .bar span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-2); white-space: nowrap; display: none; }
.bars .bar:hover span { display: block; }
.funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.funnel .step { background: var(--surface-2); border-radius: 12px; padding: 12px; }
.funnel .step .v { font-size: 24px; line-height: 32px; font-weight: 600; }
.funnel .step .l { font-size: 12px; line-height: 16px; color: var(--text-2); }

/* вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login .card { width: 420px; max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px; }
.login img { width: 48px; height: 48px; }

/* чаты */
.chat-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: start; }
.chat-card .meta { color: var(--text-2); font-size: 13px; line-height: 20px; display: flex; gap: 8px 12px; flex-wrap: wrap; margin-top: 4px; }
.chat-card .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.steps { display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.steps li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.steps li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.steps { padding: 0; margin: 0; }

/* команда */
.team-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.team-row:last-child { border-bottom: 0; }
.copy-box { display: flex; gap: 8px; }
.copy-box .input { font-family: var(--mono); font-size: 13px; }

/* Mini App на ПК: панель окна в правом верхнем углу (под кнопками Telegram в полноэкранном режиме). */
.window-bar { position: fixed; top: calc(var(--app-top, 0px) + 8px); right: 12px; z-index: 45; display: flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-1); }
.window-bar .btn { color: var(--text-2); }
.has-window-bar { --bar-h: 44px; }
.has-window-bar .page { padding-top: calc(32px + var(--bar-h)); }
@media (max-width: 767px) { .has-window-bar .page { padding-top: calc(16px + var(--bar-h)); } }

/* Вкладки в узком окне листаются без системной полосы прокрутки; у краёв — затухание, если есть что листать. */
.tabs { scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.fade-right { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.tabs.fade-left { mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.tabs.fade-left.fade-right { mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }

/* Полосы прокрутки — тонкие и неяркие (Telegram Desktop и Windows показывают их всегда). */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }