/**
 * /public_html/posts/assets/xln-onchain.css
 *
 * On-chain verify chip. Matches the posts UI conventions in content-input.css
 * (light theme + [data-theme="dark"]/.app-dark overrides), accented with the
 * Medallion gold (#F9C94C) and purple (#7C3AED).
 */

.xln-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    vertical-align: middle;
}

.xln-chip .iconify {
    flex-shrink: 0;
}

/* Minted — the verify link */
.xln-chip--verified {
    color: #1a1a00;
    background: rgba(249, 201, 76, .16);
    border-color: rgba(249, 201, 76, .55);
}
.xln-chip--verified:hover {
    background: rgba(249, 201, 76, .30);
    border-color: #F9C94C;
    transform: translateY(-1px);
}

/* Pending — minting in progress */
.xln-chip--pending {
    color: #6d28d9;
    background: rgba(124, 58, 237, .10);
    border-color: rgba(124, 58, 237, .30);
    cursor: default;
}
.xln-chip--pending .iconify {
    animation: xln-spin 1s linear infinite;
}

/* Failed — stored off-chain */
.xln-chip--failed {
    color: #b45309;
    background: rgba(180, 83, 9, .08);
    border-color: rgba(180, 83, 9, .25);
    cursor: default;
}

@keyframes xln-spin {
    to { transform: rotate(360deg); }
}

/* ── Dark theme ─────────────────────────────────────────────── */
body[data-theme="dark"] .xln-chip--verified,
.app-dark .xln-chip--verified {
    color: #F9C94C;
    background: rgba(249, 201, 76, .12);
    border-color: rgba(249, 201, 76, .40);
}
body[data-theme="dark"] .xln-chip--verified:hover,
.app-dark .xln-chip--verified:hover {
    background: rgba(249, 201, 76, .22);
}
body[data-theme="dark"] .xln-chip--pending,
.app-dark .xln-chip--pending {
    color: #c4b5fd;
}

/**
 * /public_html/posts/assets/xln-post-polish.css
 *
 * Refinements for the timeline/profile post card + on-chain economy surfacing.
 * LOAD ORDER: after styles.css, content-input.css, and xln-onchain.css so these
 * rules win. Slate-dark feed + Medallion gold (#F9C94C) / purple (#7C3AED).
 */

/* ── On-chain chip: hug its text instead of stretching ─────────────── */
.xln-chip {
    align-self: flex-start;          /* stop a column-flex parent stretching it */
    width: fit-content;
    max-width: max-content;
    padding: 3px 10px;
    letter-spacing: .01em;
}
/* Re-tune the verified chip for the dark feed cards */
.xln-chip--verified {
    color: #F9C94C;
    background: rgba(249, 201, 76, .10);
    border-color: rgba(249, 201, 76, .35);
}
.xln-chip--verified:hover {
    background: rgba(249, 201, 76, .18);
    border-color: rgba(249, 201, 76, .70);
    box-shadow: 0 0 0 3px rgba(249, 201, 76, .08);
    transform: none;                 /* the card handles motion; keep the chip calm */
}

/* ── Reaction row: lay it out and reserve the right edge ───────────── */
.post-reactions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.post-reactions .reaction-btn {
    transition: color .15s ease, transform .15s ease;
}
.post-reactions .reaction-btn:hover {
    transform: translateY(-1px);
}
.post-reactions .reaction-btn:hover .reaction-icon {
    color: #F9C94C;
}

/* ── "XLN generated" pill — the economic signal of the post ────────── */
.post-xln-earned {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;               /* pushed to the right edge of the row */
    padding: 5px 12px;
    border-radius: 999px;
    line-height: 1;
    color: #8b8b9a;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
    cursor: default;
    white-space: nowrap;
}
.post-xln-earned .iconify {
    align-self: center;
    opacity: .5;
    transition: opacity .25s ease;
}
.post-xln-amount {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.post-xln-unit {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .65;
}

/* Active state: this post has actually generated engagement value */
.post-xln-earned.is-active {
    color: #F9C94C;
    background: linear-gradient(135deg, rgba(249, 201, 76, .16), rgba(124, 58, 237, .12));
    border-color: rgba(249, 201, 76, .45);
    box-shadow: 0 0 22px -8px rgba(249, 201, 76, .55);
}
.post-xln-earned.is-active .iconify { opacity: 1; }
.post-xln-earned.is-active .post-xln-unit { opacity: .85; }

/* ── Card-level breathing room (subtle, non-destructive) ───────────── */
.post .post-content {
    line-height: 1.5;
}
.post-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.post-meta > span {
    color: #7e8597;
    font-size: 12.5px;
}

@media (max-width: 600px) {
    .post-xln-amount { font-size: 13px; }
    .post-xln-earned { padding: 4px 10px; }
}

.xln-chip--mint {
  align-self: flex-start; width: fit-content; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid #1f9d55;
  background: linear-gradient(180deg, #1faa5e, #178a4c);
  color: #fff; font: 600 12px/1 'Space Grotesk', Inter, sans-serif;
  transition: filter .15s ease, transform .05s ease;
}
.xln-chip--mint:hover  { filter: brightness(1.08); }
.xln-chip--mint:active { transform: translateY(1px); }
.xln-chip--mint[disabled] { opacity: .7; cursor: default; }
.xln-chip--mint.is-busy .iconify { animation: xln-spin 1s linear infinite; }
@keyframes xln-spin { to { transform: rotate(360deg); } }