/*
 * Шит «Поделиться» (TASK-146). Светлый, как вся среда мини-аппа: тёмное — только
 * сама карточка-превью внутри (это и есть экспортируемый артефакт, DEC-007).
 * Только токены theme.css — шит переключает тему вместе с приложением.
 */
.gss {
  position: fixed;
  inset: 0;
  z-index: 9500; /* над таб-баром (9000) и шитом «Ещё» (9100–9200) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  transition: background 0.18s ease;
}
.gss.is-open { background: var(--app-scrim, rgba(4, 18, 26, 0.42)); }
.gss[hidden] { display: none; }

.gss-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--glide-card);
  color: var(--glide-text);
  border-radius: var(--app-radius-xl) var(--app-radius-xl) 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.gss.is-open .gss-sheet { transform: none; opacity: 1; }

.gss-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: var(--app-text-lead);
}
.gss-x {
  border: 0;
  background: var(--app-chip-bg);
  color: inherit;
  width: 32px;
  height: 32px;
  border-radius: var(--app-radius-pill);
  font-size: var(--app-text-body);
  cursor: pointer;
}

.gss-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--app-radius-md);
  background: var(--app-chip-bg);
  margin-bottom: 10px;
}
.gss-tab {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 9px 6px;
  border-radius: var(--app-radius-sm);
  font: inherit;
  font-size: var(--app-text-caption);
  font-weight: var(--app-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
}
.gss-tab.is-on { background: var(--glide-card); box-shadow: var(--app-float-shadow); }

.gss-slots {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.gss-slots::-webkit-scrollbar { display: none; }
.gss-slot {
  flex: 0 0 auto;
  border: 1px solid var(--glide-line);
  background: transparent;
  color: inherit;
  padding: 7px 11px;
  border-radius: var(--app-radius-pill);
  font: inherit;
  font-size: var(--app-text-caption);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.gss-slot.is-on {
  border-color: var(--app-cta-fill);
  background: var(--glide-brand-wash);
  font-weight: var(--app-weight-semibold);
}

.gss-slot-picker { margin-bottom: 10px; }
.gss-slot-q {
  margin: 0 0 8px;
  font-size: var(--app-text-body);
  font-weight: var(--app-weight-semibold);
}
.gss-day-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 0 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.gss-day-strip::-webkit-scrollbar { display: none; }
.gss-day-strip__day {
  flex: 0 0 auto;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--glide-line);
  background: var(--app-chip-bg);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gss-day-strip__day span {
  font-size: var(--app-text-kicker);
  color: var(--glide-hint);
  white-space: nowrap;
  line-height: 1.1;
}
.gss-day-strip__day b {
  font-size: var(--app-text-lead);
  font-weight: var(--app-weight-bold);
  line-height: 1.15;
}
.gss-day-strip__day i {
  font-style: normal;
  font-size: var(--app-text-kicker);
  color: var(--glide-ink-teal);
  font-weight: var(--app-weight-semibold);
}
.gss-day-strip__day.is-on {
  background: var(--app-cta-fill);
  border-color: transparent;
}
.gss-day-strip__day.is-on span,
.gss-day-strip__day.is-on b,
.gss-day-strip__day.is-on i {
  color: var(--app-cta-text);
  opacity: 1;
}
.gss-slot-list {
  max-height: min(42vh, 320px);
  overflow-y: auto;
  overflow-anchor: none;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.gss-slot-day {
  margin: 8px 0 2px;
  font-size: var(--app-text-kicker);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glide-hint);
  font-weight: var(--app-weight-semibold);
}
.gss-slot-day:first-child { margin-top: 0; }
.gss-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--glide-line);
  background: var(--app-chip-bg);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gss-slot-row span {
  font-size: var(--app-text-body);
  font-weight: var(--app-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.gss-slot-row em {
  font-size: var(--app-text-caption);
  color: var(--glide-hint);
  font-style: normal;
  text-align: right;
}
.gss-slot-row.is-on {
  border-color: var(--app-cta-fill);
  background: var(--glide-brand-wash);
  scroll-margin-block: 8px;
}

.gss-more-slots {
  display: block;
  width: 100%;
  margin: -4px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--glide-brand);
  font: inherit;
  font-size: var(--app-text-body);
  font-weight: var(--app-weight-semibold);
  text-align: left;
  cursor: pointer;
}

.gss-preview { margin: 0 0 12px; }
.gss-preview-save {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--app-radius-lg);
}
.gss-preview-save:focus-visible {
  outline: 2px solid var(--app-cta-fill);
  outline-offset: 2px;
}
.gss-preview-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}
.gss-preview-duo__tag {
  display: block;
  margin-bottom: 6px;
  font-size: var(--app-text-caption);
  font-weight: var(--app-weight-semibold);
  color: var(--glide-hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gss-preview-duo__col .gss-preview__img {
  width: 100%;
}
.gss-preview__img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--app-radius-lg);
  background: var(--glide-deep);
}
.gss-preview__img--story {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.gss-preview__img--wait { animation: gss-pulse 1.2s ease-in-out infinite; }
@keyframes gss-pulse { 50% { opacity: 0.6; } }
.gss-preview figcaption {
  margin-top: 8px;
  white-space: pre-line;
  font-size: var(--app-text-caption);
  line-height: 1.45;
  color: var(--glide-hint);
}

/* Открытка: живое превью (static/shared/zovi-live.js) в цветах темы мини-аппа. */
.gss-live .zl {
  --zl-surface: var(--app-chip-bg);
  --zl-ink: var(--glide-text);
  --zl-muted: var(--glide-hint);
  --zl-line: var(--glide-line);
  --zl-line-strong: var(--glide-line-strong);
  --zl-accent: var(--app-cta-fill);
  --zl-on-accent: var(--app-cta-text);
  --zl-accent-ink: var(--glide-ink-teal, var(--app-cta-fill));
  --zl-ice: var(--app-cta-fill);
  margin-bottom: 14px;
}

.gss-live--wait {
  min-height: 260px;
  margin-bottom: 14px;
  border-radius: var(--app-radius-lg);
  background: var(--app-chip-bg);
  animation: gss-pulse 1.2s ease-in-out infinite;
}

/* Печатают имена: над клавиатурой — открытка и поля, без вкладок и строки сеанса. */
.zl-typing .gss-tabs,
.zl-typing .gss-slot-sum { display: none; }

.gss-slot-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--glide-line);
  background: var(--app-chip-bg);
}
.gss-slot-sum__when { display: grid; gap: 2px; min-width: 0; }
.gss-slot-sum__when b {
  font-size: var(--app-text-body);
  font-weight: var(--app-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.gss-slot-sum__when em { font-style: normal; font-size: var(--app-text-caption); color: var(--glide-hint); }
.gss-slot-sum__change,
.gss-zlink {
  flex: none;
  border: 0;
  padding: 6px 0;
  background: transparent;
  color: var(--glide-ink-teal, var(--app-cta-fill));
  font: inherit;
  font-size: var(--app-text-caption);
  font-weight: var(--app-weight-semibold);
  cursor: pointer;
}

.gss-zf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gss-zf__f { display: grid; gap: 4px; min-width: 0; }
.gss-zf__f span { font-size: var(--app-text-caption); font-weight: var(--app-weight-semibold); color: var(--glide-hint); }
.gss-zf__f input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--app-radius-md);
  border: 1px solid var(--glide-line-strong, var(--glide-line));
  background: var(--glide-card);
  color: var(--glide-text);
  font: inherit;
  font-size: var(--app-text-lead); /* меньше 16px — iOS приближает страницу при фокусе */
}
.gss-zf__f input:focus { outline: none; border-color: var(--app-cta-fill); }
.gss-zf__hint,
.gss-zf__err { margin: 6px 0 0; font-size: var(--app-text-caption); line-height: 1.35; color: var(--glide-hint); }
.gss-zf__err { color: var(--app-danger); }
.gss-zf__err:empty { display: none; }
.gss-zf ~ .gss-zovi__btn { margin-top: 12px; }
.gss-zovi__btn + .gss-zf__hint { text-align: center; }

.gss-zdone { display: grid; gap: 10px; }
.gss-zdone__t { margin: 0; font-size: var(--app-text-body); font-weight: var(--app-weight-semibold); }
.gss-zdone__how { margin: -4px 0 0; font-size: var(--app-text-caption); line-height: 1.4; color: var(--glide-hint); }
.gss-zlink--inline { padding: 0; font-size: inherit; }
.gss-zdone__more { display: flex; justify-content: space-between; gap: 12px; }
.gss-channels.gss-channels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gss-channels--3 .gss-ch { padding: 12px 4px; font-size: var(--app-text-caption); }

.gss-zovi__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--app-radius-md);
  background: var(--app-cta-fill);
  color: var(--app-cta-text);
  font: inherit;
  font-size: var(--app-text-body);
  font-weight: var(--app-weight-semibold);
  text-align: center;
  cursor: pointer;
}
.gss-zovi__btn:disabled { opacity: 0.45; cursor: default; }

.gss-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.gss-ch {
  border: 1px solid var(--glide-line);
  background: var(--glide-card);
  color: inherit;
  padding: 10px 2px;
  border-radius: var(--app-radius-md);
  font: inherit;
  font-size: var(--app-text-kicker);
  line-height: 1.2;
  font-weight: var(--app-weight-semibold);
  cursor: pointer;
}
.gss-ch:disabled { opacity: 0.5; }
.gss-ch--tg {
  background: var(--app-brand-telegram);
  border-color: var(--app-brand-telegram);
  color: var(--app-brand-telegram-on);
}
.gss-ch--story {
  border-color: var(--app-cta-fill);
  color: var(--glide-ink-teal, var(--app-cta-fill));
}
.gss-ch--image {
  border-color: var(--glide-line);
  color: var(--glide-ink-teal, var(--app-cta-fill));
}
.gss-note { margin: 10px 0 0; font-size: var(--app-text-caption); color: var(--glide-hint); text-align: center; }

.gss-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border-radius: var(--app-radius-md);
  background: var(--glide-text);
  color: var(--glide-card);
  font-size: var(--app-text-caption);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.gss-toast.is-on { opacity: 1; }