/* ==========================================================================
   Теггер в историях (/modules/story-tagger)
   ==========================================================================
   A direct transfer of the approved composer: the premium banner, three numbered
   steps down the left, and the phone preview holding the summary and the publish
   button on the right.

   The palette lives in --st-* variables scoped to .story-page rather than in the
   product's own tokens — the same reason as /pricing: this page was designed as
   its own thing and must not drift when the shared tokens are tuned. It is set
   in the panel's own faces, not the design's Inter.
   ========================================================================== */

.story-page {
  --st-surface: #ffffff;
  --st-surface-soft: #faf9ff;
  --st-surface-muted: #f2f3f6;
  --st-text: #202127;
  --st-muted: #7d8190;
  --st-muted-2: #a4a7b2;
  --st-line: #e5e6eb;
  --st-line-strong: #d9dae2;
  --st-primary: #8b68ff;
  --st-primary-strong: #7653ed;
  --st-primary-soft: #eee9ff;
  --st-primary-soft-2: #f5f2ff;
  --st-green: #1d9b75;
  --st-green-soft: #e9f7f2;
  --st-amber: #c97a20;
  --st-amber-soft: #fff3e2;
  --st-red: #df5361;
  --st-red-soft: #fff0f2;
  --st-blue-soft: #edf4ff;
  --st-blue-text: #37659e;
  --st-shadow-sm: 0 1px 2px rgba(31, 27, 45, .03), 0 7px 22px rgba(40, 34, 63, .05);
  --st-shadow-md: 0 18px 45px rgba(56, 42, 100, .12);

  color: var(--st-text);
  font-size: 14px;
  line-height: 1.45;
}

html.dark .story-page {
  --st-surface: #191a20;
  --st-surface-soft: #201d2b;
  --st-surface-muted: #24252c;
  --st-text: #f5f5f7;
  --st-muted: #a0a3af;
  --st-muted-2: #777b88;
  --st-line: #303139;
  --st-line-strong: #3b3d47;
  --st-primary-soft: #2c2547;
  --st-primary-soft-2: #231f35;
  --st-green-soft: #17372e;
  --st-amber-soft: #3c2a18;
  --st-red-soft: #3c2026;
  --st-blue-soft: #1d2d47;
  --st-blue-text: #8eb6ef;
  --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, .16), 0 10px 26px rgba(0, 0, 0, .14);
  --st-shadow-md: 0 18px 45px rgba(0, 0, 0, .35);
}

.story-page * { box-sizing: border-box; }
.story-page button,
.story-page input,
.story-page textarea { font: inherit; }
/* Applies to this page's own buttons only. Anything borrowed from the panel — the step
   nav, the primary and secondary buttons — is left alone: this rule is more specific
   than their own class, and every colour they use is built on currentColor, so forcing
   `inherit` here silently repainted all of them. */
/* .fancy-select-trigger is excluded for the same reason: initFancySelects replaces
   every borrowed <select class="dm-select"> with a <button class="input
   fancy-select-trigger">, whose whole visible box IS its border — `border: 0` here
   left the account picker's filters as bare text on all four other module pages'
   worth of chrome. */
.story-page button:not([class*="dm-"]):not(.fancy-select-trigger) { color: inherit; border: 0; }
.story-page svg { display: block; }

/* The step nav is the panel's own component, borrowed whole from the other module
   pages. Nothing here restates its colours or type — mass-dm.css is the only place
   they are defined, so this nav and Прогрев's cannot drift apart. Only the gap below
   it is this page's business. */
.story-page .dm-workflow-nav { margin-bottom: 18px; }
/* Three steps, not the base rule's four. Without this the buttons sit in a 4-column
   grid while the marker is sized and placed from the button it covers, so the fill
   lands a quarter of the row away from the text it is supposed to be behind. */
.dm-workflow-nav-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The dividers between steps are the panel's too, in a column that has its own gap. */
.story-page .dm-workflow-divider { height: 4.4rem; }

.st-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-icon-sm { width: 15px; height: 15px; }

/* Nothing on this page is usable without the component, and the locked banner
   above already says why. */
.story-page[data-locked] .story-workspace,
.story-page[data-locked] .dm-workflow-nav { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------- the premium banner */

.story-page .premium-alert {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  margin-bottom: 18px;
  background: linear-gradient(110deg, #eee8ff 0%, #faf8ff 56%, #f4efff 100%);
  border: 1px solid rgba(139, 104, 255, .28);
  border-radius: 18px;
}
html.dark .story-page .premium-alert {
  background: linear-gradient(110deg, #2a2244 0%, #201d2b 60%, #28203f 100%);
}
.story-page .premium-alert::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -50px;
  top: -82px;
  background: radial-gradient(circle, rgba(139, 104, 255, .22), transparent 68%);
  pointer-events: none;
}
.premium-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--st-primary-strong);
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(139, 104, 255, .18);
  border-radius: 13px;
}
html.dark .premium-icon { background: rgba(255, 255, 255, .06); }
.story-page .premium-alert strong { display: block; font-size: 14px; margin-bottom: 3px; }
.story-page .premium-alert p { margin: 0; color: var(--st-muted); font-size: 12.5px; }
.premium-label {
  position: relative;
  z-index: 1;
  padding: 7px 10px;
  color: var(--st-primary-strong);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(139, 104, 255, .18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
html.dark .premium-label { background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------- the layout */

.story-workspace {
  display: grid;
  /* Те же 278px, что у .accounts-aside и .dm-workspace: колонка была самой широкой
     в панели (370px) и выбивалась из всех остальных разделов. Телефон внутри неё
     остаётся прежним — он 152px и в эту ширину входит с запасом, так что сужение
     колонки его не трогает. */
  grid-template-columns: minmax(0, 1fr) 278px;
  gap: 18px;
  align-items: start;
}
/* No gap: the labelled divider between two steps is what provides the space, exactly
   as in .dm-main-column. A gap here would add 18px on each side of every divider. */
.story-page .form-column { display: grid; gap: 0; min-width: 0; }
.story-page .form-column > .story-section + .story-section { margin-top: 18px; }
.story-page .preview-column {
  position: sticky;
  /* Clear of the sticky step nav, the same 4rem .dm-aside uses everywhere else —
     at 16px the card slid under the nav as soon as the page scrolled. */
  top: 4rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

.story-page .card {
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  /* The panel's own step-card radius and lift. */
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
}
.story-section {
  position: relative;
  padding: 0;
  /* Same offset .dm-section-card uses, so «Продолжить» never lands a card under the
     sticky nav. */
  scroll-margin-top: 4.4rem;
  transition: border-color .18s var(--ease, ease), box-shadow .18s var(--ease, ease);
}
/* .dm-section-card подрезает полоску своим overflow: hidden. Эта страница его
   позволить не может — он обрезал бы выпадающие списки, которые открываются внутри
   карточки. Скругление самой полоске не помогает: при высоте 3px браузер ужимает
   радиус до этих же 3px, и на фоне угла карточки в 24px полоска остаётся прямой —
   торчит из скругления слева и справа.
   Поэтому полоска растянута на всю карточку и берёт её радиус, а сам градиент рисуется
   лентой в 3px по верхнему краю: фон элемента подрезается его собственным border-radius
   ровно так же, как overflow: hidden подрезал бы вложенную полоску, и та же кривая угла
   получается без overflow. Элемент прозрачный везде, кроме ленты, но перекрывает
   карточку целиком — отсюда pointer-events: none, иначе он съел бы клики. */
.story-section::before {
  inset: 0;
  height: auto;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: 100% 3px;
  pointer-events: none;
}

/* Метка шага, верхняя полоска и подсветка текущей карточки объявлены один раз —
   в pages/automation/mass-dm.css рядом с .dm-section-card, где .story-section
   перечислена в тех же селекторах. Здесь остаётся только то, что у этой страницы
   действительно своё. */

/* The section header is the panel's own .dm-section-head, markup and all (icon,
   title/description, badge) — nothing redeclared here except the rounded top, which
   the component gets from its card's overflow and this page cannot use: overflow
   would clip the filter dropdowns the account picker opens inside the card. */
.story-page .dm-section-head { border-radius: 23px 23px 0 0; }
.story-section-body { padding: 1rem; }
.story-page .field { margin-bottom: 17px; }
.story-page .field:last-child { margin-bottom: 0; }
.story-page .label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.story-page label,
.story-page .field-label { font-weight: 600; font-size: 13px; }
.story-page .hint,
.story-page .counter { color: var(--st-muted); font-size: 11px; font-weight: 400; }

/* :not(.fancy-select-trigger) throughout — the fancy select's trigger also carries
   `.input`, and it belongs to the borrowed picker, so it must keep the app's own
   field metrics (2.5rem / 10px radius), not this page's taller 44px / 13px ones. */
.story-page .input:not(.fancy-select-trigger),
.story-page .textarea {
  width: 100%;
  border: 1px solid var(--st-line);
  background: var(--st-surface);
  color: var(--st-text);
  border-radius: 13px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.story-page .input:not(.fancy-select-trigger) { height: 44px; padding: 0 13px; }
.story-page .textarea { min-height: 94px; resize: vertical; padding: 12px 13px; }
.story-page .input:not(.fancy-select-trigger):focus,
.story-page .textarea:focus {
  border-color: rgba(139, 104, 255, .8);
  box-shadow: 0 0 0 3px rgba(139, 104, 255, .13);
}
.story-page .input::placeholder,
.story-page .textarea::placeholder { color: var(--st-muted-2); }

/* --------------------------------------------------------- account picker */

/* The grid itself, the toolbar above it and the cards in it are the panel's own
   components (mass-dm.css, `flat executor picker`) — loaded on every page, so nothing
   is redeclared here. What follows is only what this page's own narrower column and
   its own base rules change about them. */

/* The page sets font-size:14px/line-height:1.45 on itself, and the borrowed controls
   size themselves off `font: inherit` — which meant the search field and the four
   filters came out a size smaller here than the identical controls on every other
   module page. The picker keeps the app's own type scale instead. */
.story-page [data-story-account-picker] { font-size: 1rem; line-height: normal; }
/* .story-page label is 13px/600 for the field labels — a card IS a <label>, so it
   inherits that and every line inside it comes out bold. Hand it back to the
   component's own metrics. */
.story-page label.dm-account-card { font-weight: 400; font-size: inherit; }
/* The account can be picked but has no Premium: not an error (nothing is broken),
   not ready either. The base component only knows the first two. */
.dm-account-dot.is-warn { background: var(--st-amber); box-shadow: 0 0 0 3px var(--st-amber-soft); }
/* The name and its Premium badge on one line, only the name ellipsising. */
.story-page .dm-account-copy strong { display: flex; align-items: center; gap: 6px; }
.st-account-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.story-page .dm-account-copy .premium-badge { flex: 0 0 auto; }
.story-page .dm-account-groups {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--st-muted-2);
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-avatar {
  overflow: hidden;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #f0a763, #d85e82);
  border-radius: 12px;
  font-weight: 700;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  color: var(--st-primary-strong);
  background: var(--st-primary-soft);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.account-warning {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 12px;
  color: var(--st-red);
  background: var(--st-red-soft);
  border: 1px solid color-mix(in srgb, var(--st-red) 24%, transparent);
  border-radius: 12px;
  font-size: 12px;
}
.account-warning.visible { display: flex; }

.story-empty {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  color: var(--st-muted);
  background: var(--st-surface-soft);
  border: 1px dashed var(--st-line-strong);
  border-radius: 16px;
}
.story-empty strong { display: block; color: var(--st-text); font-size: 13px; }
.story-empty p { margin: 3px 0 0; font-size: 12px; }
.story-empty .dm-secondary-btn { margin-left: auto; flex: 0 0 auto; }

/* ---------------------------------------------------------------- upload */

.upload-zone {
  position: relative;
  min-height: 184px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1.5px dashed #cfc7ed;
  border-radius: 16px;
  background: var(--st-primary-soft-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
html.dark .upload-zone { border-color: #4a4166; }
.upload-zone:hover,
.upload-zone.dragging { border-color: var(--st-primary); background: var(--st-primary-soft); }
.upload-zone.has-media { padding: 0; overflow: hidden; border-style: solid; background: #141414; }
.upload-inner { max-width: 360px; }
.upload-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  color: var(--st-primary-strong);
  background: var(--st-surface);
  border: 1px solid rgba(139, 104, 255, .18);
  border-radius: 14px;
  box-shadow: var(--st-shadow-sm);
}
.upload-inner strong { display: block; font-size: 14px; }
.upload-inner p { margin: 5px 0 0; color: var(--st-muted); font-size: 12px; }
.media-preview { display: none; width: 100%; height: 250px; object-fit: cover; }
.upload-zone.has-media .upload-inner { display: none; }
.replace-media {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(16, 16, 18, .68);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 12px;
}
.upload-zone.has-media .replace-media { display: flex; }

/* -------------------------------------------------------------- mentions */

.mentions-box {
  border: 1px solid var(--st-line);
  border-radius: 16px;
  overflow: hidden;
}
.mention-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--st-surface);
}
.mention-input-row .input { flex: 1; border: 0; box-shadow: none; padding-left: 4px; }
.mention-input-row .input:focus { box-shadow: none; }
/* .dm-primary-btn, sized to sit inside the input row rather than stand alone. */
.st-add-btn { min-height: 2.2rem; padding: 0 0.9rem; font-size: 0.78rem; }
.mention-list {
  min-height: 84px;
  max-height: 210px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  padding: 12px;
  background: var(--st-surface-soft);
  border-top: 1px solid var(--st-line);
}
.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  padding: 0 7px 0 5px;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: 999px;
  font-size: 11.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.mention-chip .mini-avatar {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #a982ff, #6b5de8);
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
}
.mention-chip button {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--st-muted);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
}
.mention-chip button:hover { color: var(--st-red); background: var(--st-red-soft); }
.mention-empty { width: 100%; margin: auto; color: var(--st-muted-2); text-align: center; font-size: 12px; }
.mention-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}
.story-page .text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: var(--st-primary-strong);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.story-page .text-btn-muted { color: var(--st-muted); }

.info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 11px;
  padding: 11px 12px;
  color: var(--st-blue-text);
  background: var(--st-blue-soft);
  border-radius: 12px;
  font-size: 11.5px;
}

/* ------------------------------------------------------- choices/switches */

.story-page .choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.choice-card { margin: 0; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card span {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--st-line);
  border-radius: 13px;
  background: var(--st-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, background .16s ease;
}
.choice-card span strong { font-size: 12px; font-weight: 600; }
.choice-card span small { color: var(--st-muted); font-size: 10px; }
.choice-card input:checked + span {
  border-color: var(--st-primary);
  background: var(--st-primary-soft-2);
  box-shadow: inset 0 0 0 1px var(--st-primary);
}
.choice-card input:focus-visible + span { box-shadow: 0 0 0 3px rgba(139, 104, 255, .2); }

.story-page .switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--st-line);
}
.story-page .switch-row:first-child { border-top: 0; padding-top: 0; }
.switch-copy strong { display: block; font-size: 13px; font-weight: 600; }
.switch-copy span { display: block; margin-top: 2px; color: var(--st-muted); font-size: 11.5px; }
.story-page .switch {
  position: relative;
  width: 44px;
  height: 25px;
  flex: 0 0 auto;
  margin: 0;
}
.story-page .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--st-line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: .18s ease;
}
.switch-slider::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: .18s ease;
}
.story-page .switch input:checked + .switch-slider { background: var(--st-primary); }
.story-page .switch input:checked + .switch-slider::before { transform: translateX(19px); }
.story-page .switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 3px rgba(139, 104, 255, .22); }

.schedule-grid {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 13px;
}
.schedule-grid.visible { display: grid; }

/* --------------------------------------------------------------- preview */

.preview-card { overflow: hidden; }
.phone-wrap { padding: 6px 14px 2px; }
.phone {
  position: relative;
  width: 152px;
  height: 324px;
  font-size: 6.4px;
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(circle at 25% 20%, #8c6e89, transparent 35%), linear-gradient(160deg, #463b59, #15131f 68%);
  border: 5px solid #2a2b31;
  border-radius: 26px;
  box-shadow: 0 18px 45px rgba(25, 21, 37, .24);
}
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .18), transparent 24%, transparent 64%, rgba(0, 0, 0, .55));
  pointer-events: none;
}
.story-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.story-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .78);
  text-align: center;
  padding: 2.2em;
}
.story-placeholder .st-icon { width: 3.5em; height: 3.5em; margin: 0 auto 0.9em; }
.story-placeholder span { font-size: 1.1em; }
.story-bars {
  position: absolute;
  z-index: 2;
  left: 1.1em;
  right: 1.1em;
  top: 1em;
  display: flex;
  gap: 0.4em;
}
.story-bars i { flex: 1; height: 0.25em; background: rgba(255, 255, 255, .38); border-radius: 999px; }
.story-bars i:first-child { background: #fff; }
.story-user {
  position: absolute;
  z-index: 2;
  left: 1.2em;
  right: 1.2em;
  top: 2.1em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.story-user .account-avatar { width: 2.8em; height: 2.8em; border-radius: 50%; font-size: 0.9em; }
.story-user strong { font-size: 1em; font-weight: 600; }
.story-user small { display: block; opacity: .78; font-size: 0.8em; }
.story-caption {
  position: absolute;
  z-index: 2;
  left: 1.3em;
  right: 1.3em;
  bottom: 4.8em;
  color: #fff;
  font-size: 1em;
  line-height: 1.35;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .72);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 9.6em;
  overflow: hidden;
}
.story-mentions {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%) rotate(-3deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
}
.story-mentions span {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.8em;
  color: #fff;
  background: rgba(19, 19, 24, .55);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 0.8em;
  font-size: 0.8em;
  font-weight: 600;
  backdrop-filter: blur(5px);
}
.story-reply {
  position: absolute;
  z-index: 2;
  left: 1.5em;
  right: 4.8em;
  bottom: 1.2em;
  height: 2.7em;
  display: flex;
  align-items: center;
  padding: 0 1em;
  color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  font-size: 0.8em;
  /* One line. At this width it was breaking "Ответить на историю…" in half. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-page .summary { padding: 11px 14px 14px; }
.summary-list { display: grid; margin-bottom: 0; }
.summary-row {
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed var(--st-line);
  font-size: 0.74rem;
}
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: var(--st-muted); }
.summary-row strong { max-width: 55%; text-align: right; font-size: 0.74rem; font-weight: 600; }
.summary-divider { height: 1px; margin: 10px 0; background: var(--st-line); }

/* The publish button is .dm-primary-btn.is-full; only the "sending" state is this
   page's own, since no other page has one. */
.story-page [data-publish].is-busy { opacity: 0.7; cursor: progress; }
/* The line under it is .dm-hint — the panel's own small muted note — centred under the
   button. It lost its styling when the bespoke button block around it was deleted and
   came back at the page's full 14px body size and colour. */
.st-publish-help { margin: 0.5rem 0 0; text-align: center; }

/* ------------------------------------------------------------ recent log */

.story-log { display: grid; gap: 2px; }
.story-log-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--st-line);
}
.story-log-row:last-child { border-bottom: 0; padding-bottom: 0; }
.story-log-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--st-muted-2);
}
.story-log-dot.status-published { background: var(--st-green); box-shadow: 0 0 0 4px var(--st-green-soft); }
.story-log-dot.status-failed { background: var(--st-red); box-shadow: 0 0 0 4px var(--st-red-soft); }
.story-log-dot.status-publishing { background: var(--st-primary); box-shadow: 0 0 0 4px var(--st-primary-soft); }
.story-log-dot.status-queued { background: var(--st-amber); box-shadow: 0 0 0 4px var(--st-amber-soft); }
.story-log-main { min-width: 0; flex: 1; }
.story-log-main strong { display: block; font-size: 12.5px; font-weight: 600; }
.story-log-main span {
  display: block;
  margin-top: 2px;
  color: var(--st-muted);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-log-time { flex: 0 0 auto; color: var(--st-muted-2); font-size: 11px; }

/* ------------------------------------------------------------ the dialog */

.story-modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 13, 20, .45);
  backdrop-filter: blur(4px);
}
.story-modal-backdrop[hidden] { display: none; }
.story-modal {
  width: min(440px, 100%);
  padding: 22px;
  background: var(--st-surface, var(--color-surface));
  border: 1px solid var(--st-line, var(--color-border));
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
  animation: st-modal-in .18s ease;
}
@keyframes st-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--st-green);
  background: var(--st-green-soft);
  border-radius: 15px;
}
.story-modal h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.story-modal p { margin: 7px 0 18px; color: var(--st-muted); font-size: 12.5px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; }

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 1180px) {
  .story-page .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .story-page .preview-column { max-height: none; overflow: visible; }
  .story-workspace { grid-template-columns: 1fr; }
  .story-page .preview-column { position: static; order: -1; }
  .preview-card { display: grid; grid-template-columns: 280px 1fr; align-items: center; }
  .phone-wrap { padding-bottom: 18px; }
  .phone { width: 146px; height: 311px; font-size: 6.15px; }
}

@media (max-width: 620px) {
  .story-section { padding: 16px; border-radius: 18px; }
  .story-page .premium-alert { grid-template-columns: auto 1fr; align-items: start; padding: 14px; }
  .premium-label { grid-column: 2; justify-self: start; }
  .preview-card { display: block; }
  .phone { width: 150px; height: 320px; font-size: 6.3px; }
  .story-page .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .schedule-grid { grid-template-columns: 1fr; }
  .mention-input-row { flex-wrap: wrap; }
  .mention-input-row .input {
    width: calc(100% - 4px);
    flex-basis: 100%;
    border-bottom: 1px solid var(--st-line);
    border-radius: 0;
  }
  .st-add-btn { flex: 1; }
  .story-empty { flex-direction: column; align-items: flex-start; }
  .story-empty .dm-secondary-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .story-page *,
  .story-page *::before,
  .story-modal-backdrop * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Редактор слоёв истории.

   Слои лежат поверх картинки прямо в телефоне предпросмотра, а не в отдельном
   окне: перетаскивать имеет смысл там, где видно результат. Координаты слоя —
   доли ширины и высоты холста, поэтому телефон в 152px и итоговые 1080×1920
   показывают одно и то же расположение.
   ========================================================================== */
.story-layers {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Клики проходят сквозь пустое место к самим слоям: пустой холст поверх
     картинки перехватывал бы всё и делал предпросмотр мёртвым. */
  pointer-events: none;
  overflow: hidden;
}
.st-layer {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transform-origin: center;
  touch-action: none;
  user-select: none;
  max-width: none;
}
.st-layer.is-dragging { cursor: grabbing; }
.st-layer.is-selected { outline: 1px dashed rgba(255, 255, 255, .85); outline-offset: 2px; }
.st-layer-text {
  white-space: pre-wrap;
  text-align: center;
  line-height: 1.25;
  font-weight: 700;
  /* Тень как в сборке: без неё белый текст на светлом кадре в предпросмотре
     виден, а в опубликованной истории — нет. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  padding: .28em .45em;
  border-radius: .5em;
}
.st-layer-text.is-plate-dark { background: rgba(0, 0, 0, .59); text-shadow: none; }
.st-layer-text.is-plate-light { background: rgba(255, 255, 255, .9); color: #111; text-shadow: none; }
.st-layer-text.is-plate-accent { background: rgba(139, 92, 246, .92); color: #fff; text-shadow: none; }
.st-layer-img { display: block; width: 100%; height: auto; border-radius: 2px; }

/* ---- панель редактора ---- */
.st-editor {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--st-line, rgba(255, 255, 255, .08));
}
.st-editor-head { display: grid; gap: 2px; margin-bottom: 10px; }
.st-editor-head strong { font-size: 12.5px; }
.st-editor-head span { color: var(--color-text-muted); font-size: 10.5px; line-height: 1.45; }

.st-add-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.st-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 34px; padding: 0 8px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text); font-size: 11px; font-weight: 600;
  transition: border-color var(--transition-fast) var(--ease),
              background var(--transition-fast) var(--ease);
}
.st-add:hover { border-color: var(--color-primary); background: var(--color-surface-muted); }
.st-add .st-icon { width: 13px; height: 13px; }

.st-props {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 11px;
  border-radius: 12px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}
.st-prop { display: grid; gap: 4px; min-width: 0; }
.st-prop.is-wide { grid-column: 1 / -1; }
.st-prop > span { color: var(--color-text-faint); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.st-prop input[type="range"] { width: 100%; }
.st-prop input[type="color"] { width: 100%; height: 28px; padding: 2px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.st-prop .dm-textarea { font-size: 12px; }

.st-plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.st-plates button {
  min-height: 26px; cursor: pointer; padding: 0 4px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text-muted);
  font-size: 9.5px; font-weight: 700;
}
.st-plates button.is-on { border-color: var(--color-primary); color: var(--color-text); background: var(--color-primary-bg); }

.st-prop-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.st-layer-del {
  cursor: pointer; padding: 5px 10px;
  border: 1px solid var(--color-danger-border, var(--color-border)); border-radius: 999px;
  background: transparent; color: var(--color-danger-text); font-size: 10.5px; font-weight: 700;
}
.st-layer-del:hover { background: var(--color-danger-bg); }

.st-editor-note {
  margin: 10px 0 0; padding: 8px 10px;
  border-radius: 10px; background: var(--color-warning-bg);
  color: var(--color-warning-text); font-size: 10.5px; line-height: 1.45;
}

/* Редактор без выбранного фото: виден, но неактивен. Скрывать его целиком нельзя —
   тогда на вопрос «как добавить текст на историю» на экране нет ответа. */
.st-editor.is-locked .st-add { opacity: .45; cursor: not-allowed; }
.st-editor.is-locked .st-add:hover { border-color: var(--color-border); background: var(--color-surface); }

/* Шапка блока: заголовок слева, знак вопроса справа. Инструкция ушла в модалку —
   в узкой колонке она занимала больше места, чем сам редактор. */
.st-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-help-btn {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 22px; height: 22px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 50%;
  background: var(--color-surface); color: var(--color-text-muted);
  transition: color var(--transition-fast) var(--ease),
              border-color var(--transition-fast) var(--ease);
}
.st-help-btn svg { width: 13px; height: 13px; }
.st-help-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

.st-help-list {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: grid; gap: 9px; text-align: left;
}
.st-help-list li {
  position: relative; padding-left: 26px;
  color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5;
}
/* Нумерация своя, а не браузерная: шаги должны читаться как порядок действий,
   а стандартный маркер списка в модалке теряется. */
.st-help-list { counter-reset: st-help; }
.st-help-list li::before {
  counter-increment: st-help; content: counter(st-help);
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-primary-bg);
  color: var(--color-primary-hover); font-size: 10px; font-weight: 800;
}

/* Редактор живёт в блоке «Аккаунт и контент», рядом с загрузкой снимка, а не в
   карточке предпросмотра: справа только показ результата, настройки — в блоках,
   как и всё остальное на этой странице. Сам кадр при этом один — телефон справа,
   и тянут слои именно по нему. */
.story-section .st-editor { margin-top: 0; padding-top: 0; border-top: 0; }
.story-section .st-add-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-section .st-props { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .story-section .st-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Список отметок двигают прямо в предпросмотре: он единственное, что этот модуль
   рисует на самой истории, поэтому и место ему выбирают здесь. */
.story-mentions.is-draggable {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 3;
}
.story-mentions.is-draggable:hover { outline: 1px dashed rgba(255, 255, 255, .5); outline-offset: 3px; }
.story-mentions.is-dragging { cursor: grabbing; outline: 1px dashed rgba(255, 255, 255, .85); outline-offset: 3px; }
/* Утащили за край — показываем это состоянием, а не исчезновением: пропавший из
   предпросмотра список читался бы как «удалился», хотя отметки остаются. */
.story-mentions.is-off { opacity: .35; filter: grayscale(1); }

/* Подсказка про перетаскивание отметок. Появляется вместе с первой добавленной —
   до неё двигать в предпросмотре нечего, и объяснять нечего. */
.mention-drag-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-primary-bg);
  color: var(--color-primary-hover);
  font-size: 11.5px;
  line-height: 1.45;
}
.mention-drag-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }