/**
 * Share-ORi initiator UI styles (Phase 3 of ORI #32).
 *
 * Re-uses the existing .modal-overlay / .modal-box scaffolding from
 * styles.css; only the share-specific elements (URL input, copy hint,
 * toolbar pip, per-card redact button) get their own rules here.
 *
 * Kept in its own file per CLAUDE.md file-size discipline — styles.css
 * is already past the soft cap.
 */

#share-overlay .modal-box {
  max-width: 460px;
}

#share-overlay h3 {
  margin: 0 0 8px 0;
}

#share-overlay .share-modal-help {
  font-size: 13px;
  color: var(--muted, #888);
  margin: 0 0 16px 0;
  line-height: 1.4;
}

#share-modal-prestart,
#share-modal-live {
  display: none;
}

#share-modal-url {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* surface-hi is the same inset surface other inputs use in both
     dark and light themes (--input-bg doesn't exist). */
  background: var(--surface-hi);
  color: var(--text);
  box-sizing: border-box;
}

.share-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 8px 0 4px 0;
}
.share-url-row #share-modal-url { flex: 1; }
.share-url-row .btn { white-space: nowrap; }

#share-modal-copied {
  font-size: 12px;
  color: var(--accent, #2a7);
  height: 16px;
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity 120ms ease-in;
}
#share-modal-copied.visible { opacity: 1; }

.share-modal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted, #888);
  margin: 8px 0 16px 0;
}
.share-modal-meta strong {
  color: var(--text, #111);
  font-weight: 600;
}

/* Toolbar "Live to N viewers" pip */
#share-pip {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(229, 57, 53, 0.12);
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
#share-pip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6);
  animation: share-pip-pulse 1.4s infinite;
}
@keyframes share-pip-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(229, 57, 53, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(229, 57, 53, 0);   }
}

/* Participant-mode (Phase 4) — banner that appears while viewing a
   shared session. Hidden by default; .visible toggles it on.
   Colors use the lighter Material palette tints so they're legible
   on ORi's dark theme; the translucent backgrounds + matching
   border keep them readable in light mode too. */
#share-participant-banner {
  display: none;
  padding: 8px 12px;
  background: rgba(33, 150, 243, 0.16);
  color: #64b5f6;
  border-bottom: 1px solid rgba(33, 150, 243, 0.35);
  font-size: 13px;
  text-align: center;
}
#share-participant-banner.visible { display: block; }
#share-participant-banner.paused {
  background: rgba(255, 152, 0, 0.16);
  color: #ffb74d;
  border-bottom-color: rgba(255, 152, 0, 0.35);
}
#share-participant-banner.ended {
  background: rgba(120, 120, 120, 0.18);
  color: #b0bec5;
  border-bottom-color: rgba(120, 120, 120, 0.35);
}
#share-participant-banner.fatal {
  background: rgba(229, 57, 53, 0.16);
  color: #ef9a9a;
  border-bottom-color: rgba(229, 57, 53, 0.35);
}

/* Phase 5 — guest landing overlay (shown on /share/<token> when the
   visitor has no real account JWT). Fullscreen modal-style sheet.
   The .share-landing-overlay-shell variant is used by the guest
   end-of-session splash so it inherits the same fullscreen layout
   without colliding with the landing overlay's id. */
#share-landing-overlay,
.share-landing-overlay-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#share-landing-overlay .share-landing-card,
.share-landing-overlay-shell .share-landing-card {
  background: var(--bg, #fff);
  color: var(--text, #111);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
#share-landing-overlay h2,
.share-landing-overlay-shell h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
}
#share-landing-overlay .share-landing-help,
.share-landing-overlay-shell .share-landing-help {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.45;
}
#share-landing-overlay .share-landing-actions,
.share-landing-overlay-shell .share-landing-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#share-landing-overlay .share-landing-actions .btn,
.share-landing-overlay-shell .share-landing-actions .btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
}
#share-landing-overlay .share-landing-error {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: #c62828;
}

/* Phase 5 — Try-ORi banner shown to guests while in participant mode. */
#share-try-ori-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #fff8e1 0%, #fff3c4 100%);
  color: #6b4f00;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
#share-try-ori-banner .share-try-ori-cta {
  padding: 4px 12px;
  font-size: 13px;
  text-decoration: none;
}

/* Per-card "Remove from shared feed" action */
.bubble .share-redact-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #e0a8a8;
  background: rgba(229, 57, 53, 0.06);
  color: #c62828;
  cursor: pointer;
  margin-left: 6px;
}
.bubble .share-redact-btn:hover {
  background: rgba(229, 57, 53, 0.14);
}