/* preview.css — оформление превью-блоков (видит только PREVIEW_TG_IDS).
   .pv-block — секция нового блока (наследует .section), .pv-badge — плашка «превью». */

.pv-slot { min-width: 0; }
.pv-slot:empty { display: none; }
.pv-plugin:empty { display: none; }

.pv-block {
  border: 1px dashed rgba(44, 129, 242, 0.35);
  min-width: 0;
  overflow-wrap: break-word;
}
.pv-block .section-label { flex-wrap: wrap; row-gap: 6px; }
.pv-title { flex: 1 1 auto; min-width: 0; }

.pv-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px; line-height: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}

.pv-note { font-size: 13px; line-height: 18px; color: var(--fg-3); margin: 8px 0 0; }
.pv-author { font-size: 13px; line-height: 18px; color: var(--fg-3); margin: 8px 0 0; }

.pv-more { margin-top: 12px; border-top: 1px solid var(--divider); padding-top: 10px; }
.pv-more > summary {
  cursor: pointer; list-style: none;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--accent);
}
.pv-more > summary::-webkit-details-marker { display: none; }
.pv-more[open] > summary { margin-bottom: 8px; }
.pv-alt { margin: 0 0 12px; }
.pv-alt:last-child { margin-bottom: 0; }
.pv-alt .pv-alt-author { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--fg-2); margin-bottom: 4px; }

.pv-planet { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card); }
.pv-planet-head { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--fg-1); margin-bottom: 4px; }

.pv-error { font-size: 14px; color: var(--fg-3); margin: 0; }

/* Вкладка «Инструменты» (слот tools). Третья кнопка таб-бара есть только у превью:
   класс .has-tools ставит app.js, у остальных таб-бар прежний. */
.tab-bar.has-tools .tab-btn { min-width: 0; padding: 10px 6px; font-size: 14px; white-space: nowrap; }
/* На 320 px три подписи по 14 px не помещаются — «Инструменты» обрезалось. */
@media (max-width: 359px) {
  .tab-bar.has-tools .tab-btn { padding: 10px 2px; font-size: 12px; letter-spacing: -0.01em; }
}
.pv-tools-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.pv-tools-title { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--fg-1); }
.pv-tools-empty { display: none; }

/* Категории вкладки «Инструменты» (Preview.GROUPS): плашка <details class="pv-group">,
   в заголовке — эмодзи, название и мелко перечень блоков внутри. Размеры не анимируются. */
.pv-group {
  margin: 0 0 12px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.pv-group-head {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 12px 14px;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.pv-group-head::-webkit-details-marker { display: none; }
/* Признак открытости — круглая стрелка, как у сворачиваемых секций основного экрана. */
.pv-group-head::after {
  content: '⌄'; flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--panel); color: var(--fg-2);
  font-size: 16px; font-weight: 600; line-height: 1;
}
.pv-group[open] > .pv-group-head::after { transform: rotate(180deg); }
.pv-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-lg); }
.pv-group-emoji { flex-shrink: 0; font-size: 20px; line-height: 22px; }
.pv-group-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pv-group-title { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--fg-1); }
.pv-group-list { font-size: 12px; line-height: 16px; color: var(--fg-3); overflow-wrap: anywhere; }
.pv-group-body { padding: 0 8px 8px; min-width: 0; }
.pv-group-body .pv-block { margin-bottom: 8px; }
.pv-group-empty { padding: 0 6px 6px; }
#pv-tools[hidden] + .pv-tools-empty,
#pv-tools:empty + .pv-tools-empty { display: block; }

@media print {
  .pv-block { border: none; }
  .pv-group-head::after { display: none; }
  .pv-badge { display: none; }
}