/* ============================================================================
   26-news-share-sheet.css  (v11.626)
   In-app "send to a friend" share bottom sheet — Instagram/Depop style, slides
   up from the bottom. Editorial-dark, single lavender accent. Used by the News
   feed/reader share button (js/44-news-share-sheet.js). Transform+opacity only
   (120Hz/ProMotion). Dark-mode only.
   ========================================================================== */

.shelfd-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.001);
  transition: background 280ms ease;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-share-overlay.is-open { background: rgba(0, 0, 0, 0.58); }

body.shelfd-share-sheet-open { overflow: hidden; }

.shelfd-share-sheet {
  width: 100%;
  max-width: 640px;
  height: 66vh;
  display: flex;
  flex-direction: column;
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.6);
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translate3d(0, 100%, 0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overscroll-behavior: contain;
}
.shelfd-share-overlay.is-open .shelfd-share-sheet { transform: translate3d(0, 0, 0); }

/* ---- grab zone (drag-to-dismiss) ---- */
.shelfd-share-grabzone {
  flex: 0 0 auto;
  padding: 10px 18px 6px;
  touch-action: none;
  cursor: grab;
}
.shelfd-share-grab {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 auto 12px;
}

/* ---- article preview ---- */
.shelfd-share-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.shelfd-share-grabzone .shelfd-share-preview { padding-bottom: 0; border-bottom: 0; }
.shelfd-share-preview-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #1a1a1d;
}
.shelfd-share-preview-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shelfd-share-preview-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f4f4f5;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelfd-share-preview-source {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #a78bfa;
  text-transform: uppercase;
}

/* ---- search ---- */
.shelfd-share-search-row { flex: 0 0 auto; padding: 12px 18px 8px; }
.shelfd-share-search {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #1a1a1d;
  color: #f4f4f5;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 0 14px;
  outline: none;
}
.shelfd-share-search::placeholder { color: rgba(255, 255, 255, 0.4); }

/* ---- recipients grid (scrolls) ---- */
.shelfd-share-people {
  flex: 1 1 auto;
  min-height: 110px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 12px 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 4px;
  align-content: start;
}
.shelfd-share-person {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border-radius: 12px;
}
.shelfd-share-avatar-wrap {
  position: relative;
  width: 62px;
  height: 62px;
}
.shelfd-share-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  background: #1e2028;
  display: block;
  transition: transform 160ms ease;
}
.shelfd-share-person.is-selected .shelfd-share-avatar {
  transform: scale(0.9);
  box-shadow: 0 0 0 2px #161618, 0 0 0 4px #a78bfa;
}
.shelfd-share-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a78bfa;
  border: 2px solid #161618;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.22, 1.4, 0.4, 1);
}
.shelfd-share-person.is-selected .shelfd-share-check { opacity: 1; transform: scale(1); }
.shelfd-share-check svg { width: 13px; height: 13px; fill: none; stroke: #0c0c0e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.shelfd-share-name {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: #d9d9dc;
  max-width: 74px;
  text-align: center;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelfd-share-person.is-selected .shelfd-share-name { color: #fff; }
.shelfd-share-name-verify { color: #a78bfa; margin-left: 2px; }

.shelfd-share-empty {
  grid-column: 1 / -1;
  padding: 26px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* ---- footer (send + external actions) ---- */
.shelfd-share-footer {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px 18px 4px;
}

/* optional message attached to the share — appears with the Send button. */
.shelfd-share-note {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #1a1a1d;
  color: #f4f4f5;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 13px 14px;
  margin-bottom: 10px;
  outline: none;
  max-height: 48px;
  opacity: 1;
  transition: opacity 200ms ease, max-height 240ms ease, margin 240ms ease, padding 240ms ease;
}
.shelfd-share-note::placeholder { color: rgba(255, 255, 255, 0.6); }
.shelfd-share-note[hidden] {
  display: block !important;          /* animate the collapse instead of snapping */
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.shelfd-share-send {
  appearance: none;
  border: 0;
  width: 100%;
  height: 48px;
  border-radius: 13px;
  background: #a78bfa;
  color: #15101f;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-bottom: 12px;
  max-height: 48px;
  opacity: 1;
  transition: opacity 200ms ease, max-height 240ms ease, margin 240ms ease, transform 120ms ease;
}
.shelfd-share-send:active { transform: scale(0.985); }
.shelfd-share-send[hidden] {
  display: block !important;       /* animate out instead of snapping */
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
  overflow: hidden;
}
.shelfd-share-send:disabled { opacity: 0.5; cursor: default; }
.shelfd-share-send.is-sending { opacity: 0.7; cursor: default; }

.shelfd-share-actions {
  display: flex;
  gap: 8px;
  justify-content: space-around;
  padding-bottom: 6px;
}
.shelfd-share-action {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  flex: 1 1 0;
  max-width: 96px;
}
.shelfd-share-action-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1a1a1d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelfd-share-action:active .shelfd-share-action-icon { background: #232327; }
.shelfd-share-action-icon svg { width: 23px; height: 23px; fill: none; stroke: #e8e8ea; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.shelfd-share-action-label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: #c7c7ca;
}

@media (prefers-reduced-motion: reduce) {
  .shelfd-share-overlay,
  .shelfd-share-sheet,
  .shelfd-share-avatar,
  .shelfd-share-check { transition: none !important; }
}