/* ==========================================================================
   share-modal.css — Orcheum CANONICAL "Share conversation" component (shared)
   --------------------------------------------------------------------------
   One reusable, presentation-agnostic modal. The host owns nothing but the
   trigger; the component owns the overlay, the card, and every state. Values
   come from the design-token layer (styles/tokens.css). Faithful to the
   approved Figma frame (New Chat - Share, node 470:1246).
   ========================================================================== */

/* ------------------------------- overlay -------------------------------- */
/* Blurs and dims the page behind; keeps the card sharp and centered above. */
.oc-share {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(36, 37, 45, 0.12);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.oc-share.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease;
}

/* -------------------------------- card ---------------------------------- */
.oc-share__card {
  position: relative;
  width: 399px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 22px 24px;
  background: var(--color-cream-50);
  border-radius: 16px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(8px) scale(0.985);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.oc-share.is-open .oc-share__card { transform: none; }

.oc-share__inner {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

/* ------------------------------- header --------------------------------- */
.oc-share__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oc-share__title {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-normal);
  font-size: 24px;
  line-height: 1.15;
  color: var(--color-foreground);
}
.oc-share__desc {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

/* ------------------------------ close (X) ------------------------------- */
.oc-share__close {
  position: absolute;
  top: 17px;
  right: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease;
}
.oc-share__close:hover { background: var(--color-card-background); }
.oc-share__close img { width: 16px; height: 16px; display: block; }

/* --------------------------- preview card host -------------------------- */
.oc-share__preview-host {
  width: 100%;
  min-width: 0;
}
.oc-share__preview-host .oc-prev {
  width: 100%;
}

/* -------------------------------- footer -------------------------------- */
.oc-share__foot {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.oc-share__rule {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-card-border);
  margin: 0;
}
.oc-share__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.oc-share__link-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.oc-share__link-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12px;
  line-height: 1.2;
  color: #000;
}
.oc-share__link-note {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-text-secondary);
}
.oc-share__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* --------------------------- action buttons ----------------------------- */
.oc-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 29px;
  border: 0;
  border-radius: 6.762px;
  background: var(--color-button-secondary-bg);
  -webkit-backdrop-filter: blur(13.524px);
  backdrop-filter: blur(13.524px);
  color: var(--color-foreground);
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, opacity 140ms ease;
}
.oc-share__btn:hover { background: rgba(213, 218, 220, 0.9); }
.oc-share__btn img { width: 16px; height: 16px; display: block; }

.oc-share__btn--copy { padding: 4px 6.762px 4px 8px; }
.oc-share__btn--copy span {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: 12.5px;
  line-height: 1;
  padding: 0 3.381px;
}
.oc-share__btn--delete { padding: 8px 6px; }

/* Revoked / not-shared state: copy is unavailable. */
.oc-share.is-unshared .oc-share__btn--copy {
  opacity: 0.45;
  pointer-events: none;
}

/* ------------------------- reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oc-share,
  .oc-share__card { transition: opacity 120ms ease; }
  .oc-share__card { transform: none; }
}

/* ---------------------------- tablet ------------------------------------ */
@media (max-width: 768px) {
  .oc-share {
    padding: 12px;
    align-items: flex-end;
  }
  .oc-share__card {
    width: 100%;
    max-width: 399px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------- narrow screens ---------------------------- */
@media (max-width: 440px) {
  .oc-share { padding: 0; }
  .oc-share__card {
    border-radius: 16px 16px 0 0;
    padding: 20px 18px;
    max-height: 100vh;
  }
  .oc-share__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .oc-share__actions { width: 100%; }
  .oc-share__btn--copy { flex: 1 1 auto; }
}