/* ============================================================
   Bond Co-Signed Letter — Phase 8d (gap-BOND.md §4 Add-On 2)
   Composer-side styling: signer-picker modal, signer chip list,
   the "Co-sign" composer button, and the inbox +N badge.
   ============================================================ */

/* ── Composer "Co-sign" button ─────────────────────────────── */
/* Re-uses the existing .canvas-action-btn surface from bond-compose.css
   for visual parity with Photo / Voice / Seal. The only addition is
   the per-state disabled affordance and a wax-warm accent hue. */
.bondc-cosign-add-btn {
  position: relative;
}
.bondc-cosign-add-btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}
.bondc-cosign-add-btn[data-active="1"] {
  color: #d4a853;
}

/* ── Signer chip list (composer inline + ceremony footer) ──── */
.bondc-cosign-host {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: rgba(243, 230, 196, 0.92);
}
.bondc-cosign-empty {
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(243, 230, 196, 0.55);
  padding: 14px 16px;
  text-align: center;
}
.bondc-cosign-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
}
.bondc-cosign-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(36, 28, 22, 0.55);
  border: 1px solid rgba(212, 175, 100, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.bondc-cosign-chip--awaiting {
  border-color: rgba(212, 175, 100, 0.55);
  background: rgba(60, 40, 18, 0.72);
}
.bondc-cosign-chip--signed {
  border-color: rgba(108, 168, 92, 0.55);
  background: rgba(28, 50, 30, 0.72);
}
.bondc-cosign-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.bondc-cosign-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: rgba(243, 230, 196, 0.95);
}
.bondc-cosign-state {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 230, 196, 0.55);
}
.bondc-cosign-chip--signed .bondc-cosign-state {
  color: rgba(132, 200, 110, 0.85);
}
.bondc-cosign-chip--awaiting .bondc-cosign-state {
  color: rgba(220, 180, 90, 0.92);
}

.bondc-cosign-remove {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(243, 230, 196, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bondc-cosign-remove:hover:not(:disabled) {
  background: rgba(122, 31, 24, 0.55);
  color: rgba(255, 252, 248, 0.95);
}
.bondc-cosign-remove:disabled {
  opacity: 0.45;
  cursor: progress;
}
.bondc-cosign-footer {
  margin: 6px 16px 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: rgba(243, 230, 196, 0.6);
  text-align: center;
}
.bondc-cosign-footer--ready {
  color: rgba(132, 200, 110, 0.92);
}

/* ── Wax disc chip + monogram ─────────────────────────────── */
/* Reproduces the procedural-wax aesthetic from the ceremony's
   seal disc at a small chip scale. The radial-gradient hint
   gives the wax a 3D rim; the monogram sits centered. Eight
   color variants mirror SIGNER_WAX_PALETTE in bondCoSign.js. */
.bondc-cosign-wax {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 32%, rgba(255, 220, 180, 0.42) 0%, rgba(0, 0, 0, 0) 60%),
              radial-gradient(circle at 65% 70%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 70%),
              var(--bondc-cosign-wax, #7a1b3a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
              0 2px 4px rgba(0, 0, 0, 0.34);
}
.bondc-cosign-wax--teal     { --bondc-cosign-wax: #0d4d4a; }
.bondc-cosign-wax--burgundy { --bondc-cosign-wax: #7a1b3a; }
.bondc-cosign-wax--forest   { --bondc-cosign-wax: #1e5631; }
.bondc-cosign-wax--royal    { --bondc-cosign-wax: #21306b; }
.bondc-cosign-wax--violet   { --bondc-cosign-wax: #5c2d91; }
.bondc-cosign-wax--gold     { --bondc-cosign-wax: #a07820; }
.bondc-cosign-wax--rose     { --bondc-cosign-wax: #b5495b; }
.bondc-cosign-wax--navy     { --bondc-cosign-wax: #1b3a6b; }

.bondc-cosign-wax-mono {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 245, 224, 0.92);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
}

/* ── Signer-picker modal ──────────────────────────────────── */
.bondc-cosign-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: radial-gradient(ellipse at 50% 35%, rgba(60, 40, 24, 0.45) 0%, rgba(14, 10, 8, 0.85) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: bondcCosignFadeIn 220ms ease-out both;
}
@keyframes bondcCosignFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bondc-cosign-picker-modal {
  width: 100%;
  max-width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(38, 28, 22, 0.97), rgba(20, 14, 10, 0.99));
  border: 1px solid rgba(212, 175, 100, 0.28);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  color: #f4e8c8;
  overflow: hidden;
  font-family: 'Cormorant Garamond', Georgia, serif;
  animation: bondcCosignRise 280ms cubic-bezier(.22,.7,.25,1) both;
}
@keyframes bondcCosignRise {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.bondc-cosign-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(212, 175, 100, 0.16);
}
.bondc-cosign-picker-title {
  font-size: 1.25rem;
  font-style: italic;
  color: rgba(243, 230, 196, 0.95);
}
.bondc-cosign-picker-close {
  background: transparent;
  border: none;
  color: rgba(212, 175, 100, 0.7);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}
.bondc-cosign-picker-close:hover { color: #d4a853; }
.bondc-cosign-picker-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 18px;
}
.bondc-cosign-picker-empty {
  text-align: center;
  font-style: italic;
  color: rgba(243, 230, 196, 0.62);
  padding: 28px 12px;
  line-height: 1.5;
}
.bondc-cosign-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bondc-cosign-picker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(36, 28, 22, 0.55);
  border: 1px solid rgba(212, 175, 100, 0.18);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
  text-align: left;
}
.bondc-cosign-picker-row:hover {
  background: rgba(60, 40, 22, 0.72);
  border-color: rgba(212, 175, 100, 0.45);
  transform: translateY(-1px);
}
.bondc-cosign-picker-name {
  font-size: 1.05rem;
  color: rgba(243, 230, 196, 0.95);
}

/* ── Multi-signer ceremony badge ────────────────────────── */
/* Renders a small "+N" overlay on the seal when the entry has
   more than one signer. Mounted by js/bond-ceremony.js's
   cleaveCoSignedSeals path AFTER mount() returns. Sits in the
   top-right of the seal disc. The single-signer letter NEVER
   shows this badge — visibility is controlled by the
   .bondc-cosign-active class on the host. */
.bondc-host .bondc-cosign-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: linear-gradient(135deg, #d4a853, #b8942e);
  color: #1a1410;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 9;
}

/* Multi-disc wax fan beneath the originator seal (Phase 8d excellence) */
.bondc-host .bondc-cosign-stack {
  position: absolute;
  top: calc(50% - 52px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 4;
}
.bondc-host .bondc-cosign-disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate(var(--cosign-tx, 0), var(--cosign-ty, 0)) rotate(var(--cosign-rot, 0deg)) scale(0.92);
  opacity: 0.88;
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.bondc-host .bondc-cosign-disc svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bondc-host .bondc-cosign-disc--cleaved {
  opacity: 0;
  transform: translate(calc(var(--cosign-tx, 0) + 6px), calc(var(--cosign-ty, 0) - 18px))
    rotate(calc(var(--cosign-rot, 0deg) + 8deg)) scale(0.72);
}
.bondc-host.bondc-static .bondc-cosign-stack { top: calc(0% - 32px); }

/* ── Inbox-stack +N hint (Phase 4 surface, read-only hook) ─ */
/* Tiny gold pip sitting over the wax seal in the inbox card.
   Added by js/bond-inbox-stack.js when entry.signers.length > 1
   without refactoring the stack render path. */
.bondc-cosign-inbox-pip {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a853, #b8942e);
  color: #1a1410;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ── Reduced-motion accommodation ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bondc-cosign-picker-backdrop,
  .bondc-cosign-picker-modal {
    animation-duration: 0.001s !important;
  }
}

/* ── Phone-form factor (≤540px) ────────────────────────── */
@media (max-width: 540px) {
  .bondc-cosign-picker-modal { border-radius: 14px; }
  .bondc-cosign-picker-title { font-size: 1.1rem; }
  .bondc-cosign-chip { padding: 6px 12px 6px 6px; }
}