/* Share control — DESIGN.md "Warm Precision".
 *
 * The trigger lives on the results summary row because that row is what names
 * the thing being shared. Not on a flight card, which would offer to share one
 * option instead of the curated set, and not in the follow-up composer, which
 * is about continuing the search rather than about the result.
 */

.results-conversation-summary.has-share-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #DED8CC;
  border-radius: 6px;
  background: transparent;
  color: #4B463F;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease-out, color 150ms ease-out;
  animation: share-trigger-in 200ms ease-out;
}

.share-trigger:hover { border-color: #F25C05; color: #F25C05; }
.share-trigger:focus-visible { outline: 2px solid #F25C05; outline-offset: 2px; }
.share-trigger svg { width: 15px; height: 15px; flex: none; }

@keyframes share-trigger-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}

/* Coarse pointers get a real target. */
@media (pointer: coarse) {
  .share-trigger { min-height: 44px; min-width: 44px; padding: 10px; }
}

/* On a phone the summary row scrolls away exactly when the reader has finished
 * reading and might want to send it. Sticking the row keeps one control in
 * reach — deliberately not a floating button over the cards, which is the
 * generic pattern the design system rejects. */
@media (max-width: 767px) {
  .results-conversation-summary.has-share-trigger {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 44px;
    background: rgba(255, 253, 249, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #DED8CC;
  }
  .share-trigger-label { display: none; }
}

/* ------------------------------------------------------------------ panel */

/* Own the box model rather than inheriting whatever reset the host page
 * happens to ship. Without this the popover measures 320px plus its padding
 * and anchors 34px wider than intended. */
.share-panel,
.share-panel *,
.share-trigger,
.share-trigger * {
  box-sizing: border-box;
}

.share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(26, 26, 26, 0.28);
}

@media (min-width: 768px) {
  /* The popover only needs the backdrop for click-outside, not for dimming. */
  .share-backdrop { background: transparent; }
}

.share-panel {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFDF9;
  border: 1px solid #DED8CC;
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
  padding: 16px;
  font-family: inherit;
}

.share-panel-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px 24px 0 0;
  border-bottom: none;
  /* Clears the iPhone home indicator. */
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  animation: share-sheet-in 250ms ease-out;
}

.share-panel-popover {
  width: 320px;
  max-width: calc(100vw - 24px);
  border-radius: 12px;
  animation: share-popover-in 150ms ease-out;
}

@keyframes share-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes share-popover-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.share-grabber {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #DED8CC;
  margin: 0 auto 2px;
}

.share-panel-heading {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  color: #1F4E5B;
}

.share-panel-heading:focus-visible { outline: 2px solid #F25C05; outline-offset: 2px; }

.share-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border: 1px solid #DED8CC;
  border-radius: 6px;
  background: #F7F3EA;
}

.share-preview-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: #1A1A1A; }

.share-url {
  margin: 0;
  padding: 7px 9px;
  border-radius: 6px;
  background: #F7F3EA;
  color: #4B463F;
  font-family: "Courier Prime", ui-monospace, Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-url.is-pending { color: #8A847A; }
.share-url.is-error { color: #C43D2F; }

.share-actions { display: flex; flex-direction: column; gap: 8px; }
.share-row { display: flex; gap: 8px; }
.share-row .share-button { flex: 1; font-size: 12px; padding: 9px 4px; font-weight: 500; }

.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.share-button:focus-visible { outline: 2px solid #F25C05; outline-offset: 2px; }
.share-button-primary { background: #F25C05; color: #fff; }
.share-button-primary:hover { background: #D95104; }
.share-button-primary.is-copied { background: #1B8A5A; }

.share-button-ghost {
  background: transparent;
  border-color: #DED8CC;
  color: #4B463F;
  font-weight: 500;
}
.share-button-ghost:hover { border-color: #F25C05; color: #F25C05; }

.share-button-text {
  background: none;
  border: none;
  min-height: 32px;
  padding: 4px;
  color: #1F4E5B;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.share-button-text.is-copied { color: #1B8A5A; text-decoration: none; }

.share-note { margin: 0; font-size: 11px; line-height: 1.45; color: #8A847A; }

@media (prefers-reduced-motion: reduce) {
  .share-trigger,
  .share-panel-sheet,
  .share-panel-popover { animation: none; }
  .share-button { transition: none; }
}