/* ============================================================
   Chatter (internals: responses) — DESIGN-responses.md
   Image-page section, thread, box, digest, recent feed, campfire.
   Rides the theme variable contract (--paper2/--ink/--ink-soft/--accent)
   with legacy fallbacks, like take-it-home.css does.
   ============================================================ */

/* ---- section frame ------------------------------------------------ */
/* Colors are pinned here on purpose: the section sits on light paper, but
   the surrounding theme colors headings/links for the dark page chrome —
   without these, the flavor header and author links wash out. */
.chatter-section {
    margin: 1.4rem 0;
    padding: 1rem 1.2rem;
    background: var(--paper2, #f6f0e2);
    border: 1px solid var(--ink-soft, #b9ad97);
    border-radius: 8px;
    color: var(--ink, #3c3429);
}
.chatter-section a { color: var(--accent, #b4533e); }
.chatter-gate-note {
    margin: 0;
    color: var(--ink-soft, #7a6e5c);
    font-style: italic;
}
.chatter-gate-admin { font-style: normal; font-size: .9em; }

/* ---- prompt (§2.2): presence, not marketing ----------------------- */
.chatter-prompt-row { margin-bottom: .6rem; }
.chatter-prompt { margin: 0 0 .3rem; }
.chatter-prompt-name { font-weight: 600; }
.chatter-hint { font-size: .85em; color: var(--ink-soft, #7a6e5c); margin: .3rem 0 0; }

/* ---- header: rotating flavor + plain anchors (§4.1) ---------------- */
.chatter-head {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--ink-soft, #b9ad97);
    padding-bottom: .4rem;
    margin-bottom: .6rem;
}
.chatter-flavor { margin: 0; font-size: 1.15rem; color: var(--ink, #3c3429); }
.chatter-count-anchor { color: var(--ink-soft, #7a6e5c); font-size: .95rem; }
.chatter-follow-btn { margin-left: auto; font-size: .85rem; }
.chatter-follow-btn.is-following { opacity: .85; }

/* ---- thread -------------------------------------------------------- */
.chatter-thread { margin: .4rem 0 1rem; }
.chatter-empty { color: var(--ink-soft, #7a6e5c); font-style: italic; }
.chatter-entry { margin: 0 0 .9rem; }
.chatter-note {
    padding: .5rem .7rem;
    background: var(--paper, #fffdf6);
    border: 1px solid var(--ink-soft, #d8cdb6);
    border-radius: 6px;
    color: var(--ink, #3c3429);
}
a.chatter-author { color: var(--accent, #b4533e); }
/* Her voice, visually hers (§3.2 render) */
.chatter-note.is-host {
    background: var(--paper2, #f2e9d5);
    border-left: 3px solid var(--accent, #b4533e);
}
.chatter-replies { margin: .35rem 0 0 1.6rem; display: grid; gap: .35rem; }

.chatter-note-head {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    flex-wrap: wrap;
    font-size: .88rem;
    margin-bottom: .25rem;
}
.chatter-author { font-weight: 600; }
.chatter-unsigned { font-weight: 400; font-style: italic; color: var(--ink-soft, #7a6e5c); }
.chatter-host-mark { color: var(--accent, #b4533e); font-size: .85em; }
.chatter-time, .chatter-edited { color: var(--ink-soft, #9a8e78); font-size: .85em; }
.chatter-accolade {
    font-size: .8em;
    padding: 0 .45em;
    border: 1px solid var(--accent, #b4533e);
    border-radius: 999px;
    color: var(--accent, #b4533e);
    cursor: help;
}
.chatter-note-body { line-height: 1.55; overflow-wrap: break-word; }

.chatter-note-actions { margin-top: .3rem; font-size: .82rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.chatter-act { color: var(--ink-soft, #7a6e5c); text-decoration: none; }
.chatter-act:hover { color: var(--accent, #b4533e); text-decoration: underline; }
.chatter-act-admin { color: var(--accent, #b4533e); }
.chatter-locked { color: var(--ink-soft, #9a8e78); font-size: .85em; cursor: help; }

/* scar (§4.3): a host reply outliving its parent */
.chatter-scar {
    margin: 0 0 .3rem;
    font-style: italic;
    color: var(--ink-soft, #9a8e78);
    font-size: .9rem;
}

/* admin in-thread tools */
.chatter-admin-tools { margin-top: .4rem; }
.chatter-reply-form textarea, .chatter-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: .35rem;
}
.chatter-accolade-picker { display: flex; gap: .4rem; flex-wrap: wrap; }
.chatter-accolade-btn {
    font-size: .82rem;
    padding: .15rem .6rem;
    border: 1px solid var(--ink-soft, #b9ad97);
    border-radius: 999px;
    background: transparent;
    color: var(--ink, #3c3429);
    cursor: pointer;
}
.chatter-accolade-btn.is-on {
    border-color: var(--accent, #b4533e);
    color: var(--accent, #b4533e);
    font-weight: 600;
}

/* ---- the box -------------------------------------------------------- */
.chatter-box { border-top: 1px dashed var(--ink-soft, #b9ad97); padding-top: .7rem; }
.chatter-signed-notice {
    margin: 0 0 .4rem;
    padding: .35rem .6rem;
    background: var(--paper, #fffdf6);
    border-left: 3px solid var(--accent, #b4533e);
    font-size: .88rem;
}
.chatter-box-label { display: block; font-weight: 600; margin-bottom: .3rem; }
#chatterInput { width: 100%; box-sizing: border-box; }
.chatter-box-tools { display: flex; align-items: center; gap: .7rem; margin: .35rem 0; flex-wrap: wrap; }
.chatter-format-hint { font-size: .8rem; color: var(--ink-soft, #9a8e78); }
.chatter-box-error { color: #a03325; margin: .3rem 0; font-size: .92rem; }
.chatter-box-footer { display: flex; align-items: center; gap: 1rem; }
.chatter-house-link { font-size: .85rem; color: var(--ink-soft, #7a6e5c); }

/* ---- admin bar badge (§6.5) ----------------------------------------- */
.admin-notes-badge {
    display: inline-block;
    margin-right: .8rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--accent, #b4533e);
    color: #fff;
    font-size: .82rem;
    text-decoration: none;
    align-self: center;
}
.admin-notes-badge:hover { filter: brightness(1.1); color: #fff; }

/* ---- digest (§6.5) --------------------------------------------------- */
.chatter-digest .digest-sub { color: var(--ink-soft, #7a6e5c); }
.digest-group { margin: 1.2rem 0; padding-top: .5rem; border-top: 1px solid var(--ink-soft, #d8cdb6); }
.digest-image-title { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; }
.digest-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.digest-note {
    margin: .6rem 0;
    padding: .55rem .75rem;
    background: var(--paper, #fffdf6);
    border: 1px solid var(--ink-soft, #d8cdb6);
    border-radius: 6px;
}
.digest-note-head { display: flex; gap: .6rem; align-items: baseline; font-size: .88rem; margin-bottom: .25rem; }
.digest-note-tools { display: flex; gap: .45rem; align-items: center; margin-top: .45rem; flex-wrap: wrap; }
.digest-status { font-size: .85rem; color: var(--accent, #b4533e); }
.digest-reply-form { margin-top: .45rem; }
.digest-reply-form textarea { width: 100%; box-sizing: border-box; margin-bottom: .3rem; }

/* ---- recent feed (§8.2) ----------------------------------------------- */
/* The feed is a standalone page of text, so it rides the shared .paper-page
   surface (gallery-core.css) rather than carrying its own copy of it —
   otherwise "what paper looks like" lives in two files and drifts. Only the
   feed-specific bits live here. */
.chatter-recent .no-results { color: var(--ink-soft, #7a6e5c); font-style: italic; }

.chatter-recent-list { list-style: none; margin: 0; padding: 0; }
.chatter-recent-item {
    display: flex;
    gap: .8rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--ink-soft, #d8cdb6);
}
.chatter-recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.chatter-recent-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
    background: var(--paper, #fffdf6);
}
.chatter-recent-text { min-width: 0; }
.chatter-recent-meta { font-size: .85rem; color: var(--ink-soft, #7a6e5c); }
.chatter-recent-meta strong { color: var(--ink, #3c3429); font-weight: 600; }
.chatter-recent-snippet {
    margin: .15rem 0 0;
    color: var(--ink, #3c3429);
    line-height: 1.5;
    overflow-wrap: break-word;
}

/* ---- browse-card count icon (§8.3) + campfire (§8.1) ------------------- */
.response-count-chip {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-size: .82rem;
    color: var(--ink-soft, #7a6e5c);
    margin-left: .5rem;
    white-space: nowrap;
}
/* Campfire, quiet edition (2026-07-17): ONE line under the featured card —
   a paper strip, like a caption taped to the frame. No commentary wall.
   2026-07-18: the strip moved up to .featured-rider (landing-page.css) so the
   /random line can share it instead of floating on the dark chrome; the
   campfire is now just a row inside that strip. */
.campfire-line {
    margin: 0;
    padding: .45rem .9rem;
    color: var(--ink, #3c3429);
    font-style: italic;
    text-align: center;
    font-size: .95rem;
}
.campfire-line a { color: var(--accent, #b4533e); }
.campfire-teaser { font-style: italic; }

/* deletion-choice fieldset on Settings (§11) */
.delete-notes-choice { margin: .6rem 0; }
.delete-notes-choice label { display: block; margin: .25rem 0; }