/* ============================================================
   ДИАЛОГ «ПОДЕЛИТЬСЯ» (§6.5). Пара к frontend/share.js.

   Отдельный файл, а не блок в styles.css: над проектом работают параллельно,
   и правки шеринга не должны конфликтовать в общем файле стилей.

   ⚠️ Только переменные из styles.css — тем три (dark / A / B), любой хардкод
   цвета сломается при переключении. Исключение — фирменные цвета мессенджеров:
   они заданы инлайном в share.js, потому что не зависят от темы сайта.

   z-index 140: выше панели пункта (110) и модалок (130). Тост (120) остаётся
   под диалогом — поэтому подтверждение копирования живёт в самой кнопке.
   ============================================================ */

.sh-back{
  position:fixed; inset:0; z-index:140;
  background:var(--scrim);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity var(--dur-fast) var(--ease);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.sh-back.on{opacity:1}
.sh-back[hidden]{display:none}
body.sh-open{overflow:hidden}

.sh-sheet{
  position:relative; width:100%; max-width:520px;
  background:var(--bg-elevated);
  border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);
  border-top:1px solid var(--line);
  box-shadow:var(--shadow-pop);
  padding:12px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(16px);
  transition:transform var(--dur) var(--ease);
  max-height:92vh; overflow-y:auto;
}
.sh-back.on .sh-sheet{transform:translateY(0)}

.sh-grip{
  width:38px; height:4px; margin:0 auto 10px;
  border-radius:var(--r-full); background:var(--line-strong);
}
.sh-sheet h3{
  margin:0 0 14px; font-family:var(--font-display);
  font-size:1.35rem; font-weight:600; color:var(--text);
}
.sh-x{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--text-faint);
  border-radius:var(--r-full);
  transition:background-color var(--dur-fast), color var(--dur-fast);
}
.sh-x:hover{background:var(--surface); color:var(--text)}

/* Превью карточки: показываем, как ссылка будет выглядеть у получателя.
   Это снимает главный вопрос «а что именно я отправляю». */
.sh-card{
  display:flex; gap:12px; align-items:center;
  padding:10px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md);
}
.sh-card-img{
  width:120px; height:63px; flex:none;
  object-fit:cover; border-radius:var(--r-sm); background:var(--bg);
}
.sh-card-txt{min-width:0}
.sh-card-title{
  color:var(--text); font-size:.92rem; line-height:1.35; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sh-card-host{color:var(--text-faint); font-size:.78rem; margin-top:4px}

/* Копирование — главное действие: самая нажимаемая кнопка любого шеринга. */
.sh-copy{display:flex; gap:8px; align-items:stretch}
.sh-url{
  flex:1; min-width:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:0 12px;
  color:var(--text-muted); font-size:.85rem; font-family:var(--font-body);
  text-overflow:ellipsis;
}
.sh-url:focus{outline:none; border-color:var(--line-strong); color:var(--text)}
.sh-copy-btn{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
}
.sh-copy-btn.done{background:var(--success); border-color:var(--success); color:#fff}

.sh-status{
  margin:8px 2px 0; min-height:1.1em;
  font-size:.8rem; color:var(--text-faint);
  opacity:0; transition:opacity var(--dur-fast);
}
.sh-status.on{opacity:1}

/* Ряд каналов. Порядок задан в share.js и продиктован аудиторией. */
.sh-channels{
  display:flex; gap:6px; margin-top:16px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sh-channels::-webkit-scrollbar{display:none}
.sh-ch{
  flex:1 0 auto; min-width:66px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px 4px; border-radius:var(--r-md);
  color:var(--text-muted); font-size:.75rem; text-decoration:none;
  transition:background-color var(--dur-fast), color var(--dur-fast);
}
.sh-ch:hover{background:var(--surface); color:var(--text)}
.sh-ic{
  width:44px; height:44px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.sh-ic-text{font-weight:700; font-size:.95rem; letter-spacing:.02em}

.sh-more{
  width:100%; margin-top:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:none; border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 14px; cursor:pointer;
  color:var(--text-muted); font-family:var(--font-body); font-size:.88rem;
  transition:background-color var(--dur-fast), color var(--dur-fast);
}
.sh-more:hover{background:var(--surface); color:var(--text)}
.sh-more[hidden]{display:none}

.sh-ref{margin:14px 2px 0; font-size:.78rem; line-height:1.45; color:var(--text-faint)}
.sh-ref[hidden]{display:none}

/* Десктоп: не шторка снизу, а обычное окно по центру. */
@media (min-width:700px){
  .sh-back{align-items:center}
  .sh-sheet{
    border-radius:var(--r-lg); border:1px solid var(--line);
    padding:18px 24px 26px; transform:translateY(0) scale(.97);
  }
  .sh-back.on .sh-sheet{transform:translateY(0) scale(1)}
  .sh-grip{display:none}
}

@media (prefers-reduced-motion: reduce){
  .sh-back, .sh-sheet{transition:none}
  .sh-sheet{transform:none}
}