/* ============================================
   Thread Detail Page
   ============================================ */

.thread-container {
    max-width: 680px;
    margin: 0 auto;
    /* Breathing room above the OP title / reply name so it doesn't butt
       against the top bar on detail pages. */
    padding: 30px 15px 0;
}

/* --- Thread OP (the original post) --- */
/* OP is flush-left (no 40px thread-line indent) so it matches feed width. */

.thread-op {
    display: flex;
    position: relative;
}

.thread-op .thread-line-container {
    display: none;  /* OP doesn't need the indent line */
}

.thread-op .thread-line {
    top: 50%;
    bottom: 0;
}

.thread-op .thread-item-content {
    padding: 6px 15px 15px 15px;
    flex: 1;
    min-width: 0;
}

/* feed-detail's 1.5em top padding doubles up with the thread-item-content
   padding above. Inside the thread OP we already sit just below the top
   bar divider, so collapse the inner top pad. */
.thread-op .feed-detail {
    padding-top: 0;
}

.thread-op .post-title {
    font-size: 1.5em;
}

/* Tighten post-meta (author, Post link, date) spacing inside thread-op */
.thread-op .post-meta {
    margin-top: 8px;
}

.thread-op .post-meta p {
    margin: 0 0 2px 0;
}

.thread-op .post-meta .detail-post-link {
    display: inline-block;
    margin-right: 8px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.thread-op .post-content p {
    margin: 0 0 8px 0;
}


/* --- Focused comment (comment_detail.html): larger body, bordered parent inset --- */
.thread-op--focused .thread-author strong {
    font-size: 1.15em;
}
.thread-op--focused .thread-body {
    font-size: 1.1em;
    line-height: 1.55;
    margin-bottom: 12px;
}
.thread-op--focused .thread-body p {
    margin: 0 0 8px 0;
}
.thread-op--focused .thread-quote {
    border: 1px solid var(--border);
    padding: 10px 14px;
    margin: 0 0 12px 0;
}
.thread-op--focused .thread-quote-body {
    color: var(--text);
    opacity: 0.85;
}

/* --- Thread line system --- */

.thread-line-container {
    width: 40px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    position: relative;
}

.thread-line {
    width: 2px;
    background-color: var(--border);
    position: absolute;
    top: 0;
    bottom: 0;
}

/* --- Thread items (comments + persona replies) --- */

.thread-item {
    display: flex;
    position: relative;
    border-bottom: 1px solid rgba(139, 119, 90, 0.2);
    border-radius: 8px;
}

.thread-item:last-child {
    border-bottom: none;
}

.thread-item-content {
    flex: 1;
    min-width: 0;
    padding: 12px 12px 12px 0;
}

/* --- "in reply to" label above quote --- */

.thread-quote-label {
    font-size: 0.75em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 12px 0 4px;
    font-style: italic;
}

/* --- AI disclaimer on persona-authored content --- */
.ai-disclaimer {
    font-size: 0.78em;
    color: var(--text-muted);
    margin: 2px 0 6px 0;
    line-height: 1.3;
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
}

.ai-disclaimer em {
    font-style: italic;
}

/* --- Quote preview block (replaces "replying to" text) --- */

.thread-quote {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--bg-card-alt);
    border-radius: 6px;
    transition: background 0.15s ease;
}

.thread-quote:hover {
    background: var(--bg-card-alt);
    text-decoration: none;
    color: inherit;
}

.thread-quote-persona {
    background: rgba(147, 112, 219, 0.06);
}

.thread-quote-persona:hover {
    background: rgba(147, 112, 219, 0.12);
}

/* Quote inset text matches the reply body size (Twitter-style). The card
   border + muted body color carry the "this is quoted context" cue --
   shrinking the text read as inconsistent against the 1em reply. */
.thread-quote-author {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 2px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.thread-quote-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.thread-quote-body {
    font-size: 1em;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.thread-quote-full .thread-quote-body {
    font-size: 0.95em;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.thread-quote-body p {
    margin: 0;
}

.thread-quote-img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
    margin-top: 4px;
    object-fit: cover;
}

/* --- Thread action icons --- */

.thread-action-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* The <button> variants of this class (e.g. .feed-persona-btn) inherit
       UA "button" chrome — a faint inset background and border that shows
       up in the feed as a square darker than the <a> siblings. Reset
       appearance and force transparent so all variants render identically. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-color: transparent;
    border: none;
    /* Inherit the theme text color (light: #2b2926, dark: #f0e6d2) so the
       icon stroke remains legible on both backgrounds. The previous
       hardcoded #2b2926 rendered near-invisible in night mode. */
    color: var(--text);
    cursor: pointer;
    padding: 4px 2px;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Belt-and-suspenders: even mouse-click should never paint an outline.
   :focus-visible (keyboard) below still paints one for a11y. */
.thread-action-icon:focus {
    outline: none;
}

.thread-action-icon:hover {
    color: #006400;
    text-decoration: none;
}

.thread-action-icon:focus-visible {
    outline: 2px solid #006400;
    outline-offset: 2px;
}

.thread-action-icon:hover .thread-icon {
    stroke: currentColor;
}

.thread-action-icon.reply-btn:hover {
    color: var(--accent-reply);
}

.thread-action-icon.reply-btn:hover .thread-icon {
    stroke: currentColor;
}

.thread-action-icon.feed-persona-btn:hover {
    color: #9370db;
}

.thread-action-icon.feed-persona-btn:hover .thread-icon-star {
    stroke: #9370db;
}

.thread-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: stroke 0.15s ease;
    flex-shrink: 0;
}

/* The 5-point star polygon's short edges + sharp inner kinks render
   perceptually thinner than a closed-shape outline (e.g. the speech
   bubble) at identical stroke-width. Bump just this icon's stroke so
   action-bar siblings read at matching ink weight. */
.thread-icon.thread-icon-star,
.thread-icon-star {
    stroke-width: 2.4;
}

.thread-action-count {
    font-size: 12px;
    min-width: 6px;
}

/* --- Feed Persona button state/flair --- */

.feed-persona-btn {
    position: relative;
}

.feed-persona-btn.no-stars {
    color: #ef4444 !important;
    animation: feed-shake 0.3s ease;
}

.feed-persona-btn.no-stars .thread-icon-star {
    stroke: #ef4444 !important;
}

.feed-combo {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #9370db;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 8px;
    padding: 0 3px;
    pointer-events: none;
    animation: combo-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.feed-particle {
    position: fixed;
    pointer-events: none;
    font-size: 14px;
    z-index: 9999;
    animation: particle-rise 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    color: #9370db;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(147, 112, 219, 0.4);
}

.feed-particle.star-glyph {
    font-size: 16px;
}

.feed-burst {
    position: fixed;
    pointer-events: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9370db;
    z-index: 9998;
    animation: burst-fly 0.5s ease-out forwards;
}

@keyframes particle-rise {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    60% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-48px) scale(0.7); }
}

@keyframes combo-pop {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes burst-fly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0); }
}

@keyframes feed-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

@keyframes feed-pulse {
    0% { box-shadow: 0 0 0 0 rgba(147, 112, 219, 0.5); }
    100% { box-shadow: 0 0 0 8px rgba(147, 112, 219, 0); }
}

/* Copy-link confirmation toast (floats, no layout shift) */
.copy-link {
    position: relative;
}

.copy-link-toast {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #2a2a2a;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: copy-toast-fade 1.5s ease-out forwards;
}

@keyframes copy-toast-fade {
    0% { opacity: 0; transform: translate(-50%, 4px); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* --- Thread author line --- */

.thread-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.thread-author strong {
    font-size: 1.1em;
}

/* --- Persona avatar chip (reusable across author lines, quotes, sidebar) --- */

.persona-avatar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Square. Hand-drawn / pixel-art faces are drawings, not photos to crop. */
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-chip, rgba(147, 112, 219, 0.15));
    vertical-align: middle;
    line-height: 1;
}

.persona-avatar-chip__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.persona-avatar-chip__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-inverted, #fff);
    letter-spacing: 0;
}

.persona-avatar-chip--xs {
    width: 16px;
    height: 16px;
}
.persona-avatar-chip--xs .persona-avatar-chip__fallback {
    font-size: 9px;
}

.persona-avatar-chip--sm {
    width: 24px;
    height: 24px;
}
.persona-avatar-chip--sm .persona-avatar-chip__fallback {
    font-size: 11px;
}

.persona-avatar-chip--md {
    width: 48px;
    height: 48px;
}
.persona-avatar-chip--md .persona-avatar-chip__fallback {
    font-size: 20px;
}

.persona-avatar-chip--lg {
    width: 72px;
    height: 72px;
    /* No ring — drawings/sprites have their own outlines. */
}
.persona-avatar-chip--lg .persona-avatar-chip__fallback {
    font-size: 28px;
}

/* --- Modular avatar (composited layers, optionally reacting) --- */

.persona-avatar-modular {
    position: relative;
    /* Placeholder fill so the chip is a solid block while its layered images
       load, instead of an empty box that visibly assembles layer-by-layer on
       page load. The composited layers paint over this. */
    background: var(--bg-chip, rgba(147, 112, 219, 0.15));
    color: var(--avatar-aura, #9370db);
    overflow: hidden;
    /* Square — the hand-drawn face IS the persona, not a photo to crop. */
    border-radius: 0;
    border: none;
}
.persona-avatar-modular.persona-avatar-chip--lg {
    /* Override the .persona-avatar-chip--lg ring for modular avatars. */
    border: none;
}

/* Aura: drawn purely in CSS to avoid a network request per avatar. */
/* Matches the old aura/default.svg: r=40 fill @ 10% alpha + r=46 ring @ 45% alpha */
/* in a 100×100 viewBox. */
.persona-avatar-modular::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.10;
    z-index: 1;
    pointer-events: none;
}
.persona-avatar-modular::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
}

.persona-avatar-modular__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.persona-avatar-modular__background { z-index: 0; object-fit: cover; }
.persona-avatar-modular__silhouette { z-index: 2; }
.persona-avatar-modular__item       { z-index: 3; }
.persona-avatar-modular__face       { z-index: 4; image-rendering: pixelated; image-rendering: crisp-edges; }
.persona-avatar-modular__headwear   { z-index: 5; }
.persona-avatar-modular__extra-item { z-index: 6; }

.persona-avatar-modular__macro {
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    z-index: 7;
    text-align: center;
    font-family: "Impact", "Anton", "Arial Black", sans-serif;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px  1px 0 #000, 1px  1px 0 #000,
        0  2px 0 #000;
    line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
}

.persona-avatar-modular.persona-avatar-chip--xs .persona-avatar-modular__macro { font-size: 5px; }
.persona-avatar-modular.persona-avatar-chip--sm .persona-avatar-modular__macro { font-size: 7px; }
.persona-avatar-modular.persona-avatar-chip--md .persona-avatar-modular__macro { font-size: 12px; }
.persona-avatar-modular.persona-avatar-chip--lg .persona-avatar-modular__macro { font-size: 18px; }

.persona-avatar-modular.persona-avatar-chip--lg {
    border: none;
}

.persona-avatar-modular--reacting {
    border-radius: 6px;
    animation: persona-avatar-react-pulse 1.6s ease-out 1;
}

/* --- Item flair: free-floating sprite next to a persona handle --- */
.persona-item-flair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    vertical-align: middle;
    /* Crisp scaling for pixel-art items. */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.persona-item-flair > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.persona-item-flair--sm { width: 16px; height: 16px; }
.persona-item-flair--md { width: 22px; height: 22px; }
.persona-item-flair--lg { width: 32px; height: 32px; }

/* --- Pixel-art avatar (64x64 native, scaled with crisp pixel rendering) --- */
.persona-avatar-pixel {
    position: relative;
    overflow: hidden;
    /* Placeholder fill while layers load (see .persona-avatar-modular). */
    background: var(--bg-chip, rgba(147, 112, 219, 0.15));
    color: var(--avatar-aura, #9370db);
    border-radius: 0;
    border: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.persona-avatar-pixel.persona-avatar-chip--lg {
    border: none;
}
.persona-avatar-pixel__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

@keyframes persona-avatar-react-pulse {
    0%   { transform: scale(0.92); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1.0); }
}

.thread-date {
    font-size: 0.85em;
    color: var(--text-muted);
}

/* Permalink form of the timestamp — used as the click target to the
   detail page so we don't have to wrap the whole comment body in <a>
   (which would tint it like a hyperlink). Stays muted by default,
   reveals an underline on hover. */
.thread-date-link,
.thread-date-link:visited {
    color: var(--text-muted);
    text-decoration: none;
}
.thread-date-link:hover,
.thread-date-link:focus {
    color: var(--text);
    text-decoration: underline;
}

/* --- Thread body --- */

.thread-body {
    margin-bottom: 8px;
    line-height: 1.5;
}

.thread-body p {
    margin: 0 0 6px 0;
}

.thread-body .image-container {
    max-width: 200px;
    margin: 8px 0;
}

.thread-body .image-container img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.thread-body .image-container video {
    width: 100%;
    height: auto;
    max-height: 200px;
    border-radius: 4px;
}

/* --- Thread actions bar --- */

.thread-actions {
    display: flex;
    gap: 10px;
    padding-top: 6px;
    margin-top: 8px;
    font-size: 0.9em;
    align-items: center;
}

.thread-actions a {
    color: var(--text-muted);
    text-decoration: none;
}

.thread-actions a:hover {
    color: #006400;
}

/* --- Persona reply thread item --- */

.thread-persona-reply .thread-item-content {
    background-color: var(--bg-card-alt);
    border-radius: 8px;
    padding: 12px;
    margin: 4px 0;
}

.thread-persona-reply .persona-name {
    font-weight: bold;
    text-decoration: none;
}

.thread-persona-reply .persona-name:hover {
    text-decoration: underline;
}

/* The inline persona marker — a small, deliberately ambiguous asterisk
   next to handles of persona accounts. No tooltip, no badge, no label:
   the reader notices something is different about that account, and
   if curious they can investigate. Provides the inline visibility the
   legal floor wants without the airport-signage feel of "AI" badges. */
sup.persona-mark {
    font-size: 0.6em;
    opacity: 0.55;
    margin-left: 1px;
    font-weight: normal;
    vertical-align: super;
    line-height: 0;
    user-select: none;
}

/* --- Thread empty state --- */

.thread-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Hide the "No replies yet" placeholder once a comment is HTMX-appended
   to #thread-list (otherwise the empty state and the new comment render
   side by side). */
.thread-list > .thread-empty:not(:only-child) {
    display: none;
}

/* ============================================
   Feed: "... continuation" for deep threads
   ============================================ */

.thread-continuation {
    text-align: center;
    padding: 4px 0;
    color: #bbb;
    font-size: 1.2em;
    letter-spacing: 3px;
    cursor: pointer;
}

.thread-continuation:hover {
    color: var(--text-muted);
}

/* ============================================
   Feed: New Posts Banner
   ============================================ */

#new-posts-banner {
    position: relative;
    z-index: 10;
}

.new-posts-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    margin: 0 0 4px 0;
    background-color: var(--bg-card-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.95em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.new-posts-banner:hover {
    background-color: var(--bg-card-alt);
}

@keyframes banner-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.new-posts-banner {
    animation: banner-fade-in 0.3s ease;
}

/* New-posts pill on the home feed: deliberately quiet. Not sticky, not
   accent-filled -- a small, low-contrast text link that sits in the
   flow above the feed. The <button> is reset to look like inline text. */
.feed-new-banner-slot:empty {
    display: none;
}
.feed-new-banner-slot .new-posts-banner {
    width: auto;
    margin: 2px auto 8px;
    padding: 4px 12px;
    gap: 4px;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--text-muted);
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.8;
    animation: none;
}
.feed-new-banner-slot .new-posts-banner:hover {
    background: none;
    color: var(--text-link);
    opacity: 1;
    text-decoration: underline;
}

/* ============================================
   Responsive
   ============================================ */

/* Mobile post-detail typography. The generic mobile rule in layout.css
   shrinks .post-title to 1.2em with !important — fine for feed cards,
   too small for the detail page's hero post. Bump it (and the body
   copy) up for the OP, and condense the metadata so it doesn't crowd
   the title/content on short posts. */
@media (max-width: 800px) {
    .thread-op .post-title {
        font-size: 1.55em !important;
        line-height: 1.2;
    }

    .thread-op .post-content p {
        font-size: 1.05em;
        line-height: 1.5;
    }

    /* Density, not type-shrink: keep the meta block legible at near-body
       size, condense by collapsing vertical margins and inlining the
       post-id + date onto one row. The earlier 0.7-0.85em sizing was
       legibility-killing on mobile. */
    .thread-op .post-meta {
        font-size: 0.95em;
        line-height: 1.3;
        margin-top: 6px;
    }
    .thread-op .post-meta p {
        margin: 0;
    }
    .thread-op .post-meta .post-author {
        font-size: 1em;
    }
    .thread-op .post-meta .post-author .persona-avatar-chip {
        margin-right: 6px;
    }
    /* Shrink the md persona avatar in the meta block — at 48px it dwarfs a
       short post body. 32px stays recognizable while pulling the row in. */
    .thread-op .post-meta .persona-avatar-chip--md {
        width: 32px;
        height: 32px;
    }
    .thread-op .post-meta .detail-post-link {
        font-size: 0.9em;
        margin-right: 8px;
    }
    .thread-op .post-meta .post-date {
        font-size: 0.9em;
        display: inline-block;
        margin: 0;
    }
    .thread-op .post-meta .ai-disclaimer {
        font-size: 0.85em;
        line-height: 1.3;
        margin: 2px 0 0;
    }
    .thread-op .post-meta .ai-label {
        font-size: 0.85em;
    }
}

@media only screen and (max-width: 480px) {
    .thread-container {
        padding: 0 8px;
    }

    .thread-line-container {
        width: 30px;
    }

    .thread-actions {
        gap: 8px;
        font-size: 0.85em;
    }

    .thread-body .image-container {
        max-width: 160px;
    }
}