/* ==========================================================================
   sources.css — Orcheum CANONICAL source-citation system
   --------------------------------------------------------------------------
   ONE reusable, data-driven system for inline provenance in an answer:
     .oc-src-pill   → an inline source pill, generated from citation data and
                      inserted into rich answer text (never authored by hand)
     .oc-src-card   → the floating source preview card (title, excerpt, domain,
                      favicon/fallback, prev/next + current/total, open action,
                      unavailable fallback)
   Source of truth: Figma "New Chat — Default" (464:1167) — Link-normal
   (464:1137), Link-hover (464:1138), Website card view (464:1166).

   Provenance labels the answer; it never competes with it (Constitution 4.5 /
   8.1). The pill follows text rhythm; the card is chrome that recedes until the
   reader reaches for it (8.2). Presentation-agnostic: the pill lives wherever
   the marker sat; the card is a body-level popover anchored to the pill and
   repositions to stay on-screen. Values come from tokens (7.3).
   ========================================================================== */

:root {
  /* muted provenance ink — matches card/foreground (colors.css) */
  --src-ink:        #61686b;
  --src-ink-soft:   rgba(97, 104, 107, 0.8);

  /* pill surfaces — Link-normal / Link-hover */
  --src-pill-bg:        #eeeeeb;
  --src-pill-bg-hover:  #dcdedb;
  --src-pill-bg-active: #d2d5d1;
  --src-pill-radius:    9px;

  /* preview card — Website card view */
  --src-card-bg:      #ededea;
  --src-card-radius:  8px;
  --src-card-shadow:  0 3.38px 10.145px rgba(0, 0, 0, 0.04);
  --src-card-blur:    35.5px;
  --src-divider:      rgba(50, 47, 47, 0.08);
  --src-wash:         rgba(50, 47, 47, 0.06);

  /* References toggle accent (the mint "on" disc) */
  --src-toggle-bg:     #eeeeeb;
  --src-toggle-accent: #c3e8d0;
  --src-toggle-off:    #cbcec9;

  /* reuse the composer's canonical muted focus ring where present */
  --src-focus-ring: var(--oc-focus-ring-muted, 0 0 0 1.69px #ffffff, 0 0 0 3.38px #61686b);
}

/* ============================ Inline source pill ========================= */
/* Generated from citation data and dropped inline in flowing text. It follows
   the surrounding line, wraps with it, and truncates a long domain rather than
   forcing the line to grow. */
.oc-src-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  max-width: min(220px, 100%);
  margin: 0 1px;
  padding: 3px 6px 4px;
  border: 0;
  border-radius: var(--src-pill-radius);
  background: var(--src-pill-bg);
  color: var(--src-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast, 0.16s) var(--ease-standard, ease),
              box-shadow var(--duration-fast, 0.16s) var(--ease-standard, ease);
}
.oc-src-pill__icon {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--src-ink);
}
.oc-src-pill__icon svg { width: 100%; height: 100%; display: block; }
.oc-src-pill__favicon {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: cover;
  display: block;
}
.oc-src-pill__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-src-pill:hover           { background: var(--src-pill-bg-hover); }
.oc-src-pill:active          { background: var(--src-pill-bg-active); }
.oc-src-pill[aria-expanded="true"] { background: var(--src-pill-bg-hover); }
.oc-src-pill:focus-visible   { outline: none; box-shadow: var(--src-focus-ring); }

/* unavailable / preview-less source — still readable, still openable if it has
   a url; just visibly quieter. Color is never the sole signal (aria carries it). */
.oc-src-pill.is-unavailable { opacity: 0.62; }

/* References toggled OFF → inline pills collapse out of the text (the text
   simply closes up). Applied to whatever container the system mounted into. */
.oc-src-hidden .oc-src-pill { display: none; }

/* ============================ Preview card =============================== */
.oc-src-card {
  position: fixed;
  z-index: 1200;
  box-sizing: border-box;
  width: 260px;
  max-width: calc(100vw - 24px);
  padding: 9px 8px 8px;
  background: var(--src-card-bg);
  border-radius: var(--src-card-radius);
  box-shadow: var(--src-card-shadow);
  -webkit-backdrop-filter: blur(var(--src-card-blur));
  backdrop-filter: blur(var(--src-card-blur));
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.16s var(--ease-standard, ease),
              transform 0.16s var(--ease-standard, ease);
}
.oc-src-card * { box-sizing: border-box; }
.oc-src-card.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.oc-src-card.is-above { transform-origin: bottom left; }
.oc-src-card:not(.is-open).is-above { transform: translateY(-4px) scale(0.985); }

/* header: prev/next + current/total. Present only when a passage cites >1 source */
.oc-src-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px;
}
.oc-src-card__nav { display: flex; align-items: center; gap: 6px; }
.oc-src-card__navbtn {
  width: 18px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--src-ink);
  cursor: pointer;
  transition: background var(--duration-fast, 0.16s) var(--ease-standard, ease),
              opacity var(--duration-fast, 0.16s) var(--ease-standard, ease);
}
.oc-src-card__navbtn svg { width: 12px; height: 12px; display: block; }
.oc-src-card__navbtn:hover { background: var(--src-wash); }
.oc-src-card__navbtn:focus-visible { outline: none; box-shadow: var(--src-focus-ring); }
.oc-src-card__navbtn:disabled { opacity: 0.32; cursor: default; }
.oc-src-card__count {
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  color: var(--src-ink);
  white-space: nowrap;
}
.oc-src-card__divider {
  height: 1px;
  background: var(--src-divider);
  margin: 9px 0;
}

/* body — the opening action lives here (the whole body is the source link) */
.oc-src-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 3px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  outline: none;
}
a.oc-src-card__body { cursor: pointer; }
.oc-src-card__body:focus-visible { box-shadow: var(--src-focus-ring); }
.oc-src-card__title {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--src-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.oc-src-card__body:hover .oc-src-card__title { text-decoration: underline; }
.oc-src-card__excerpt {
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: -0.1px;
  color: var(--src-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oc-src-card__site {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.oc-src-card__favicon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.oc-src-card__dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: block;
}
.oc-src-card__domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: -0.1px;
  color: var(--src-ink-soft);
}
.oc-src-card__open {
  margin-left: auto;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--src-ink-soft);
  opacity: 0.7;
  transition: opacity var(--duration-fast, 0.16s) var(--ease-standard, ease);
}
.oc-src-card__open svg { width: 100%; height: 100%; display: block; }
a.oc-src-card__body:hover .oc-src-card__open { opacity: 1; }

/* preview-unavailable fallback — keeps the domain, drops title/excerpt */
.oc-src-card__fallback {
  font-weight: 500;
  font-size: 11px;
  line-height: 15px;
  color: var(--src-ink-soft);
}

/* ========================= Reduced motion =============================== */
@media (prefers-reduced-motion: reduce) {
  .oc-src-card { transition: opacity 0.001ms; transform: none !important; }
  .oc-src-card:not(.is-open) { transform: none !important; }
}