/* FaithPot Community — Comments
   Scoped, self-contained, theme-friendly. All classes prefixed .fp-cmt- */

.fp-comments-wrap {
    --fp-c-border:  #e6e8ec;
    --fp-c-muted:   #6b7280;
    --fp-c-text:    #1f2937;
    --fp-c-accent:  #0a5e9e;
    --fp-c-accent-hover: #084b80;
    --fp-c-accent-bg: #e7f1fa;
    --fp-c-bg-soft: #f7f8fa;
    --fp-c-radius:  10px;

    /* No max-width: inherit the theme's content container so the block
       aligns with reactions, share, article body, etc. */
    width: 100%;
    margin: 2.5em 0 1em;
    padding: 1.25em 0 0;
    border-top: 1px solid var(--fp-c-border);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fp-c-text);
    box-sizing: border-box;
}
.fp-comments-wrap *,
.fp-comments-wrap *::before,
.fp-comments-wrap *::after { box-sizing: border-box; }

.fp-sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Header ─────────────────────────────────────────────────────── */
.fp-cmt-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 1em;
}
.fp-cmt-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.fp-cmt-count {
    color: var(--fp-c-muted);
    font-weight: 500;
}
.fp-cmt-sort-select {
    appearance: none;
    background: var(--fp-c-bg-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236b7280' d='M2 4l4 4 4-4z'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--fp-c-border);
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    font: inherit;
    color: var(--fp-c-text);
    cursor: pointer;
}
.fp-cmt-sort-select:focus-visible {
    outline: 2px solid var(--fp-c-accent);
    outline-offset: 1px;
}

/* ── Composer ───────────────────────────────────────────────────── */
.fp-cmt-composer {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: var(--fp-c-bg-soft);
    border-radius: var(--fp-c-radius);
    margin-bottom: 1.25em;
}
.fp-cmt-composer-body { flex: 1; min-width: 0; }
.fp-cmt-avatar {
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef0f4;
}
.fp-cmt-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.fp-cmt-input {
    width: 100%;
    border: 1px solid var(--fp-c-border);
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
    color: var(--fp-c-text);
    background: #fff;
    resize: none;
    max-height: 280px;
    overflow-y: auto;
    line-height: 1.5;
    display: block;
    /* Reset any theme appearance/spin-button styling */
    -webkit-appearance: none;
            appearance: none;
    scrollbar-width: thin;
    scrollbar-color: #c8ccd2 transparent;
}
.fp-cmt-input::-webkit-scrollbar         { width: 8px; height: 8px; }
.fp-cmt-input::-webkit-scrollbar-track   { background: transparent; }
.fp-cmt-input::-webkit-scrollbar-thumb   { background: #c8ccd2; border-radius: 4px; }
.fp-cmt-input::-webkit-scrollbar-button,
.fp-cmt-input::-webkit-scrollbar-corner  { display: none; width: 0; height: 0; }
/* Block theme-injected pseudo-elements (e.g. decorative arrows) */
.fp-cmt-input::-webkit-inner-spin-button,
.fp-cmt-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; display: none; }
.fp-cmt-input:focus-visible,
.fp-cmt-input:focus {
    outline: none;
    border-color: var(--fp-c-accent);
    box-shadow: 0 0 0 3px var(--fp-c-accent-bg);
}
.fp-cmt-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.fp-cmt-composer-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
    gap: 10px;
}
.fp-cmt-hint {
    font-size: 12px;
    color: var(--fp-c-muted);
    min-height: 1em;
}
.fp-cmt-hint.is-error { color: var(--fp-c-accent); }
.fp-cmt-submit {
    background: var(--fp-c-accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 7px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.fp-cmt-submit:hover:not(:disabled) { background: var(--fp-c-accent-hover); }
.fp-cmt-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.fp-cmt-submit:focus-visible {
    outline: 2px solid var(--fp-c-accent);
    outline-offset: 2px;
}

/* ── List ───────────────────────────────────────────────────────── */
.fp-cmt-list { display: flex; flex-direction: column; gap: 1.1em; }
.fp-cmt-thread { display: flex; flex-direction: column; gap: .6em; }
.fp-cmt-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.fp-cmt-body {
    flex: 1; min-width: 0;
    background: var(--fp-c-bg-soft);
    border-radius: var(--fp-c-radius);
    padding: 9px 12px 10px;
}
.fp-cmt-meta {
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    margin-bottom: 2px;
}
.fp-cmt-name { font-weight: 600; color: var(--fp-c-text); }
.fp-cmt-time { color: var(--fp-c-muted); font-size: 12px; }
.fp-cmt-edited { color: var(--fp-c-muted); font-size: 12px; font-style: italic; }

.fp-cmt-content {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    color: var(--fp-c-text);
}
.fp-cmt-content a {
    color: var(--fp-c-accent);
    text-decoration: underline;
    word-break: break-all;
}

/* Actions */
.fp-cmt-actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px;
    font-size: 13px;
}
.fp-cmt-btn {
    background: transparent;
    border: 0;
    padding: 4px 2px;
    color: var(--fp-c-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 4px;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.fp-cmt-btn:hover { color: var(--fp-c-text); }
.fp-cmt-btn:focus { outline: none; }
.fp-cmt-btn:focus-visible { outline: 2px solid var(--fp-c-accent); outline-offset: 2px; }

/* Neutralize theme button hover styles (background, shadow, border, underline)
   on our text-style action buttons across every interactive state. */
.fp-comments-wrap .fp-cmt-btn,
.fp-comments-wrap .fp-cmt-btn:hover,
.fp-comments-wrap .fp-cmt-btn:focus,
.fp-comments-wrap .fp-cmt-btn:active,
.fp-comments-wrap .fp-cmt-reply-toggle,
.fp-comments-wrap .fp-cmt-reply-toggle:hover,
.fp-comments-wrap .fp-cmt-reply-toggle:focus,
.fp-comments-wrap .fp-cmt-reply-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    text-decoration: none !important;
    filter: none !important;
    transform: none;
}

/* Owner-only buttons: SSR renders them for everyone, hidden by default. */
/* JS reveals them by adding data-mine="1" to items whose data-owner matches
   the current viewer (or all items when the viewer is a moderator).  */
.fp-cmt-item .fp-cmt-edit-btn,
.fp-cmt-item .fp-cmt-delete-btn { display: none; }
.fp-cmt-item[data-mine="1"][data-can-edit="1"] .fp-cmt-edit-btn { display: inline-flex; }
.fp-cmt-item[data-mine="1"] .fp-cmt-delete-btn { display: inline-flex; }

.fp-cmt-love-btn.is-loved { color: var(--fp-c-accent); }
.fp-cmt-love-btn.is-loved .fp-cmt-love-icon { fill: var(--fp-c-accent); }
.fp-cmt-love-icon {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    transition: transform .12s ease;
}
.fp-cmt-love-btn.is-loved .fp-cmt-love-icon { stroke: var(--fp-c-accent); fill: var(--fp-c-accent); }
.fp-cmt-love-btn.fp-pulse .fp-cmt-love-icon { transform: scale(1.3); }
.fp-cmt-love-count { font-variant-numeric: tabular-nums; }
/* Hide the count span entirely when it's 0 so no gap remains beside the icon. */
.fp-cmt-love-count:empty { display: none; }

/* Deleted */
.fp-cmt-item.is-deleted .fp-cmt-content { color: var(--fp-c-muted); font-style: italic; }
.fp-cmt-item.is-deleted .fp-cmt-actions,
.fp-cmt-item.is-deleted .fp-cmt-meta .fp-cmt-edited { display: none; }

/* Replies */
.fp-cmt-replies {
    margin-left: 46px;
    display: flex; flex-direction: column;
    gap: .6em;
    border-left: 2px solid var(--fp-c-border);
    padding-left: 12px;
}
.fp-cmt-replies.is-collapsed { display: none; }
.fp-cmt-replies .fp-cmt-avatar { width: 28px; height: 28px; flex-basis: 28px; }

/* Sub-replies (child-of-child, 2-level visual tree) */
.fp-cmt-subreplies {
    display: flex; flex-direction: column;
    gap: .6em;
    margin-top: .6em;
    margin-left: 38px;
    border-left: 2px solid var(--fp-c-border);
    padding-left: 12px;
}
.fp-cmt-subreplies .fp-cmt-avatar { width: 26px; height: 26px; flex-basis: 26px; }

/* Reply collapse toggle */
.fp-cmt-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 46px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: var(--fp-c-accent);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease;
}
.fp-cmt-reply-toggle:hover { color: var(--fp-c-accent-hover); }
.fp-cmt-reply-toggle:focus { outline: none; -webkit-tap-highlight-color: transparent; }
.fp-cmt-reply-toggle:focus-visible { outline: 2px solid var(--fp-c-accent); outline-offset: 2px; border-radius: 3px; }
.fp-cmt-toggle-icon {
    width: 12px; height: 12px;
    transition: transform .15s ease;
}
.fp-cmt-reply-toggle[aria-expanded="true"] .fp-cmt-toggle-icon {
    transform: rotate(180deg);
}

/* Reply form */
.fp-cmt-reply-form {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.fp-cmt-reply-form .fp-cmt-input { min-height: 34px; }
.fp-cmt-reply-actions {
    display: flex; gap: 6px; justify-content: flex-end;
    margin-top: 6px;
}
.fp-cmt-reply-cancel {
    background: transparent;
    border: 1px solid var(--fp-c-border);
    color: var(--fp-c-muted);
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    cursor: pointer;
}
.fp-cmt-reply-cancel:hover { color: var(--fp-c-text); }

/* Edit form */
.fp-cmt-edit-form {
    display: flex; flex-direction: column; gap: 6px;
}
.fp-cmt-edit-actions {
    display: flex; gap: 6px; justify-content: flex-end;
}

/* Skeleton & states */
.fp-cmt-skeleton-item {
    height: 58px;
    border-radius: var(--fp-c-radius);
    background: linear-gradient(90deg, #eef0f4 0%, #f7f8fa 50%, #eef0f4 100%);
    background-size: 200% 100%;
    animation: fp-cmt-skel 1.2s ease-in-out infinite;
    margin-bottom: 10px;
}
@keyframes fp-cmt-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.fp-cmt-empty {
    text-align: center;
    color: var(--fp-c-muted);
    padding: 2em 0;
    font-size: .95em;
}
/* Silent shell — collapse when there's no message (only errors populate it). */
.fp-cmt-empty:empty { display: none; }

.fp-cmt-loadmore-wrap { text-align: center; margin-top: 1em; }
.fp-cmt-loadmore {
    background: transparent;
    border: 1px solid var(--fp-c-border);
    border-radius: 20px;
    padding: 7px 18px;
    color: var(--fp-c-text);
    font: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
.fp-cmt-loadmore:hover { background: var(--fp-c-bg-soft); }

/* Pending/spam notice on new comment */
.fp-cmt-pending {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #92400e;
}

/* Toast */
.fp-cmt-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background: rgba(17,24,39,.95);
    color: #fff;
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 2147483600;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.fp-cmt-toast.fp-show { opacity: 1; }
.fp-cmt-toast.is-error { background: var(--fp-c-accent); }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .fp-comments-wrap { padding-top: 1em; }
    .fp-cmt-replies,
    .fp-cmt-reply-toggle { margin-left: 22px; }
    .fp-cmt-replies { padding-left: 10px; }
    .fp-cmt-subreplies { margin-left: 22px; padding-left: 10px; }
    .fp-cmt-avatar { width: 32px; height: 32px; flex-basis: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp-cmt-skeleton-item { animation: none; }
    .fp-cmt-love-icon { transition: none; }
}