/* POSTS — the live broadcast image feed (Extras → Posts). Rose identity, matching the BBS / Extras
   panels. Lives inside a site panel's .site-body. */

/* Rose cap + header accents for the Posts panel. */
.chat-panel[data-room="posts"] { --panel-cap: #d98fb8; }
.chat-panel[data-room="posts"] .panel-icon { color: #d98fb8; }
.chat-panel[data-room="posts"].panel-magenta.focused { border-color: #40365a; box-shadow: 0 0 0 1px rgba(217,143,184,.22), 0 18px 40px -24px rgba(0,0,0,.9); }
.chat-panel[data-room="posts"] .panel-inner { background: #0d0a15; }   /* plum frame, no navy peeking */
.chat-panel[data-room="posts"] .chat-head { background: #141220; border-bottom-color: #241f36; }

.site-body.posts-body { display: flex; flex-direction: column; background: #0d0a15; overflow: hidden; }
/* Rose scrollbars for the feed (overrides the app's global blue-navy scrollbar). */
.posts-stream { scrollbar-width: thin; scrollbar-color: #4a3a5e transparent; }
.posts-stream::-webkit-scrollbar { width: 8px; }
.posts-stream::-webkit-scrollbar-thumb { background: #4a3a5e; border: 2px solid transparent; border-radius: 7px; background-clip: padding-box; }
.posts-stream::-webkit-scrollbar-thumb:hover { background: #5e4a72; border: 2px solid transparent; background-clip: padding-box; }
.posts-stream::-webkit-scrollbar-track { background: transparent; }

/* ---- filter bar (WORLD + active-filter chip + a filter button to type a #tag) ---- */
.posts-filterbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1c1830; }
.posts-chips { flex: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.posts-chips::-webkit-scrollbar { display: none; }
.posts-chip { flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid #3a2e4a; background: transparent;
  color: #b0a0aa; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; white-space: nowrap; transition: border-color .12s, color .12s; }
.posts-chip:hover { border-color: #4a3a5e; color: #e6cddd; }
.posts-chip.on { border-color: #d98fb8; color: #e8b0d0; background: rgba(217,143,184,.08); }
.posts-chip-star { padding: 3px 9px; }
.posts-chip-star.on { border-color: #9a7b1f; color: #f5c542; background: rgba(230,193,74,.1); }
.posts-chip-x { font-size: 9px; opacity: .8; }
.posts-filter-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; cursor: pointer; border: 1px solid #3a2e4a; border-radius: 999px; background: transparent; color: #b0a0aa; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; transition: color .12s, border-color .12s; }
.posts-filter-btn:hover { color: #e8b0d0; border-color: #4a3a5e; }
.posts-filter-btn.on { border-color: #d98fb8; color: #e8b0d0; background: rgba(217,143,184,.08); }
.posts-filter-badge { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #d98fb8; color: #0d0a15; font-size: 9px; font-weight: 700; }
.posts-add { flex: none; width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 5px;
  background: #8f5f7b; color: #0d0a15; font-size: 14px; transition: background .12s; }
.posts-add:hover { background: #a8708e; }
/* Filter panel — slides down when the Filter button is clicked: active #tags (X-off) + add bar + Clear all. */
.posts-filterpanel { position: relative; flex: none; display: flex; flex-direction: column; gap: 8px; max-height: 0; opacity: 0; overflow: hidden; padding: 0 10px;
  border-bottom: 1px solid transparent; transition: max-height .22s ease, opacity .18s ease, padding .22s ease, border-color .22s ease; }
.posts-filterpanel.open { max-height: 260px; opacity: 1; padding: 9px 10px 10px; border-bottom-color: #1c1830; }
.posts-filter-close { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; background: none; border: none; color: #a08a98; font-size: 12px; transition: color .12s; }
.posts-filter-close:hover { color: #e6cddd; }
.posts-filter-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; padding-right: 24px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a2e4a transparent; }
.posts-filter-list::-webkit-scrollbar { width: 8px; }
.posts-filter-list::-webkit-scrollbar-thumb { background: #3a2e4a; border-radius: 4px; }
.posts-filter-empty { color: #7a6a78; font-family: var(--font-mono); font-size: 11px; padding: 2px 0; }
.posts-filter-item { flex: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid #d98fb8; background: rgba(217,143,184,.08); color: #e8b0d0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
.posts-filter-item:hover { background: rgba(217,143,184,.16); }
.posts-filter-item-x { font-size: 9px; opacity: .85; }
.posts-filter-item.is-user { border-color: #57b6e8; background: rgba(87,182,232,.08); color: #9fd6f4; }
.posts-filter-item.is-user:hover { background: rgba(87,182,232,.16); }
.posts-searchrow { display: flex; align-items: center; gap: 6px; }
.posts-filter-in { flex: 1; min-width: 0; height: 26px; padding: 0 10px; background: #0a0812; border: 1px solid #322944; border-radius: 5px; color: #dbe6f2; font-family: var(--font-mono); font-size: 12px; outline: none; }
.posts-filter-in:focus { border-color: #d98fb8; }
.posts-filter-clear { align-self: flex-start; cursor: pointer; background: none; border: none; padding: 0; color: #a08a98; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 2px; }
.posts-filter-clear:hover { color: #e6cddd; }

/* ---- the live stage (scrollable stream, newest at bottom) ---- */
.posts-stage { position: relative; flex: 1; min-height: 0; }
.posts-stream { position: absolute; inset: 0; overflow-y: auto; overflow-anchor: none; will-change: transform; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 14px; }   /* will-change: own GPU layer so scrolling doesn't repaint expensive framing/glow on weaker GPUs. overflow-anchor:none — we manage scroll ourselves. */
/* Dragging an image over the panel → full-panel highlight prompting a drop into a new post. */
.posts-body.posts-stage-drop::after { content: "DROP TO POST"; position: absolute; inset: 6px; z-index: 20; pointer-events: none;
  border: 2px dashed #d98fb8; border-radius: 8px; background: color-mix(in srgb, #d98fb8 12%, rgba(9,9,16,.55)); display: grid; place-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: #e8b0d0; }
.posts-empty { margin: auto; color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; }
/* Gradient fade at the top of the stage (matches the chat panels' msg-fade). */
.posts-fade { position: absolute; top: 0; left: 0; right: 0; height: 14px; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, #0d0a15, transparent); }

/* flex:none is critical — otherwise the fixed-height stream shrinks cards and .post-card's overflow
   clips the description + meta at the bottom. Cards keep their natural height; the stream scrolls. */
.post-card { flex: none; border: 1px solid #241d33; border-radius: 8px; background: #14121e; overflow: hidden; }
@keyframes postSlideUp { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: translateY(0); } }
.post-card.post-in { animation: postSlideUp .6s cubic-bezier(.16, 1, .3, 1); }   /* smooth ease-out as it rises in */
.post-head { display: flex; align-items: center; gap: 9px; padding: 9px 11px 8px; }
.post-idwrap { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.post-name, .post-av { cursor: pointer; }
.post-name:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
.post-hactions { margin-left: auto; align-self: flex-start; flex: none; display: flex; align-items: center; gap: 0; margin-top: -3px; margin-right: -3px; }
.post-crew { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; background: rgba(217,143,184,.14); color: #d98fb8; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; }
.post-hide, .post-block, .post-star { width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; background: none; border: none; border-radius: 5px; color: #6f6274; font-size: 12px; transition: color .12s, background .12s; }
.post-hide:hover { color: #e6cddd; background: rgba(217,143,184,.1); }
.post-block:hover { color: #ff8a8a; background: rgba(255,120,120,.1); }
.post-star:hover { color: #e6c14a; background: rgba(230,193,74,.12); }
.post-star.on { color: #f5c542; text-shadow: 0 0 7px rgba(245,197,66,.6); }   /* bookmarked → yellow glow */
.post-collapsing { overflow: hidden; transition: max-height .3s ease, opacity .28s ease, margin .3s ease; }
.post-av { width: 28px; height: 28px; flex: none; border-radius: 6px; display: grid; place-items: center; background: #1c1730; border: 1px solid #2e2440;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; background-size: cover; background-position: center; }
.post-av.has-img { border-color: #3a2e4a; }
.post-name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); line-height: 1; }
.post-imgwrap { position: relative; background: #05070c; border-top: 1px solid #17121f; border-bottom: 1px solid #17121f; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.post-imgwrap.multi { cursor: pointer; transition: height .26s cubic-bezier(.4,0,.2,1); }   /* card eases to each image's height */
/* Natural size, capped to the panel width / 460px tall, and centered — small images no longer stretch. */
.post-img { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; margin: 0 auto; will-change: transform, opacity;
  transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .26s ease; }
.post-img.post-slide-out { transform: translateX(-100%); opacity: 0; }              /* current image slides fully out to the left */
.post-img.post-slide-pre { transform: translateX(100%); opacity: 0; transition: none; }   /* next image parked off the right edge */
/* Bottom-right "+N" / position badge on multi-image posts. */
.post-imgbadge { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(9,7,14,.72); border: 1px solid rgba(217,143,184,.4); color: #e8b0d0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; pointer-events: none; backdrop-filter: blur(3px); }
/* Pop-out button (top-right of the image) → opens the shared lightbox gallery. */
.post-expand { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(217,143,184,.4);
  border-radius: 6px; background: rgba(9,7,14,.6); color: #e8b0d0; font-size: 12px; opacity: 0; transition: opacity .14s, background .12s; backdrop-filter: blur(3px); }
.post-imgwrap:hover .post-expand { opacity: 1; }
.post-expand:hover { background: rgba(9,7,14,.85); color: #f2cfe2; }
.post-desc { margin: 10px 11px 0; font-size: 14px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; }
/* Cap long descriptions to a few lines with a more / less toggle. */
.post-desc.clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.post-more { margin: 3px 11px 2px; background: none; border: none; cursor: pointer; color: #d98fb8; font-family: var(--font-mono); font-size: 11px; padding: 0; }
.post-more:hover { color: #e8b0d0; }
.post-descwrap { padding-bottom: 4px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 11px 2px; }
.post-tag { cursor: pointer; padding: 2px 8px; border-radius: 999px; border: 1px solid #3a2e4a; background: transparent; color: #a97e96; font-family: var(--font-mono); font-size: 10px; }
.post-tag:hover { border-color: #d98fb8; color: #e8b0d0; }
.post-meta { display: flex; align-items: center; gap: 7px; padding: 8px 11px 11px; }
.post-react { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 4px 9px; border-radius: 5px; border: 1px solid #2e2440;
  background: transparent; color: #ab9ea8; font-family: var(--font-mono); font-size: 11px; transition: border-color .12s, color .12s, background .12s; }
.post-react:hover { border-color: #4a3a5e; color: #e6cddd; }
.post-react .fa-caret-up, .post-react .fa-caret-down { font-size: 17px; line-height: 1; }   /* bigger vote triangles */
.post-react.up.on { border-color: #2c7a52; color: #7fe0a8; background: rgba(75,191,122,.1); }
.post-react.down.on { border-color: #8a3a46; color: #f08a96; background: rgba(230,90,110,.1); }
.post-views { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; }

/* scroll-to-newest control — a circle arrow whenever you're scrolled up; expands to a "N new" pill
   when unseen reveals have landed (no auto-yank while you're reading back). */
.posts-new { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(8px); z-index: 4;
  display: none; align-items: center; justify-content: center; gap: 6px; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #d98fb8; background: #241a30; color: #e8b0d0; font-family: var(--font-mono); font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .15s, transform .15s; }
.posts-new.show { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.posts-new.has-new { width: auto; height: auto; padding: 6px 12px; border-radius: 999px; font-size: 11px; }
.posts-new:not(.has-new) .posts-new-lbl { display: none; }
.posts-new .posts-new-n { font-weight: 700; }

/* ---- bottom bar: ring countdown on the LEFT, upcoming queue on the RIGHT ---- */
.posts-bottom { flex: none; padding: 10px 12px; border-top: 1px solid #1c1830; background: #0a0812; }
.posts-bottom-row { display: flex; align-items: center; gap: 12px; }

/* circle-outline timer with the seconds counting down inside; click to pause. */
.posts-timer { position: relative; flex: none; width: 38px; height: 38px; }
.posts-timer svg { width: 38px; height: 38px; transform: rotate(-90deg); }
.pt-bg { fill: none; stroke: #281f34; stroke-width: 3.5; }
.pt-arc { fill: none; stroke: #d98fb8; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 3px rgba(217,143,184,.6)); }
.pt-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 12px/1 "JetBrains Mono", monospace; color: rgba(217,143,184,.42); pointer-events: none; }

/* queue tiles: a PHOTO icon for the upcoming post (not the author's avatar), with their handle below. */
.posts-queue-row { flex: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; overflow: hidden; }
.posts-qcell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; flex: none; transition: opacity .3s ease, transform .3s ease; }
.posts-qcell.blocked .posts-qtile { filter: grayscale(1) brightness(.5); border-color: #4a2e38; }
.posts-qcell.blocked .posts-qname { color: #6a5560; text-decoration: line-through; }
.posts-qban { position: absolute; top: -3px; right: 0; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #2a1620; border: 1px solid #7a3a4a; color: #ff8a8a; font-size: 9px; }
.posts-qcell.dequeuing { opacity: 0; transform: scale(.55); }   /* revealed → fade the front thumb out */
@keyframes qcellIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.posts-qcell.qcell-in { animation: qcellIn .35s ease; }   /* newly queued → fade in */
.posts-qtile { width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; background: #1a1226; border: 1px solid #3a2e4a; color: #d98fb8; font-size: 17px; background-size: cover; background-position: center; }
.posts-qtile.has-img { border-color: #3a2e4a; }
.posts-qname { font-family: var(--font-mono); font-size: 9.5px; color: #8f8794; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posts-qwait { flex: none; min-width: 44px; height: 44px; padding: 0 12px; display: grid; place-items: center; white-space: nowrap; border: 1px dashed #4a3a5e; border-radius: 6px; color: #a97e96; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.posts-qwait.wide { border: none; font-weight: 400; letter-spacing: .04em; color: #7a6580; }

/* ---- new-post composer — slides in from the RIGHT over the feed (like the BBS directory) ---- */
.posts-composer { position: absolute; inset: 0; z-index: 12; background: #0a0812; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.posts-composer.open { transform: translateX(0); }
/* Full-composer highlight while an image is dragged over the open New Post form. */
.posts-composer.posts-comp-drop::after { content: "DROP IMAGE"; position: absolute; inset: 8px; z-index: 30; pointer-events: none;
  border: 2px dashed #d98fb8; border-radius: 8px; background: color-mix(in srgb, #d98fb8 12%, rgba(9,7,14,.6)); display: grid; place-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: #e8b0d0; }
.posts-comp-head { flex: none; display: flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #e8b0d0; }
.posts-comp-x { margin-left: auto; background: none; border: none; cursor: pointer; color: #a08a98; font-size: 14px; }
.posts-comp-x:hover { color: #e6cddd; }
/* Compact image chooser — short by default; grows just enough to preview the picked image. */
.posts-drop { flex: none; min-height: 92px; display: grid; place-items: center; cursor: pointer; border: 1px dashed #4a3a5e; border-radius: 8px; background: #0a0812; overflow: hidden; transition: border-color .12s, background .12s; }
.posts-drop:hover, .posts-drop.drag { border-color: #d98fb8; }
.posts-drop.drag { background: rgba(217,143,184,.06); }
.posts-drop.has-img { border-style: solid; padding: 0; min-height: 0; }
.posts-drop-in { display: flex; flex-direction: column; align-items: center; gap: 7px; color: #9a8593; font-family: var(--font-mono); font-size: 12px; }
.posts-drop-in i { font-size: 22px; color: #5a4a62; }
.posts-drop-in img { max-width: 100%; max-height: 190px; border-radius: 6px; display: block; }
/* Staged multi-image thumbnails above the drop box, each removable. */
.posts-thumbs { flex: none; display: none; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.posts-thumbs.has { display: flex; }
.posts-thumb { position: relative; width: 62px; height: 62px; border-radius: 6px; overflow: hidden; border: 1px solid #3a2e4a; }
.posts-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.posts-thumb-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 50%; background: rgba(9,7,14,.8); color: #ff9a9a; font-size: 9px; }
.posts-thumb-x:hover { color: #ffbcbc; background: rgba(9,7,14,.95); }
/* Description gets the room — flex-grows to fill the panel. */
.posts-desc { flex: none; height: 150px; }   /* fixed typing area — don't stretch to fill the panel */
.posts-desc, .posts-tagin { background: #0a0812; border: 1px solid #322944; border-radius: 6px; color: #dbe6f2; font-family: var(--font-ui); font-size: 13.5px; padding: 8px 10px; resize: none; }
.posts-desc:focus, .posts-tagin:focus { outline: none; border-color: #d98fb8; }
.posts-vis { display: flex; gap: 6px; }
.posts-vis-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 7px 10px; border-radius: 6px; border: 1px solid #322944; background: #0a0812; color: #8a7a94; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.posts-vis-b:hover { color: #cbb8d6; border-color: #4a3a5a; }
.posts-vis-b.on { border-color: #d98fb8; color: #f0d6e4; background: rgba(217,143,184,.12); }
.posts-comp-foot { display: flex; align-items: center; gap: 10px; }
.posts-comp-msg { flex: 1; color: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; }
.posts-comp-send { cursor: pointer; padding: 7px 16px; border-radius: 6px; border: none; background: #d98fb8; color: #0a1016; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.posts-comp-send:disabled { background: #241a30; color: #6a5a72; cursor: not-allowed; }
.posts-comp-send:not(:disabled):hover { background: #e8b0d0; }

/* Blocked-users rail drawer rows (loaded globally; drawer lives in the chat scene). */
.bl-empty { padding: 16px 14px; font-family: var(--font-mono); font-size: 11px; color: #6a7688; }
.bl-sec-hd { padding: 10px 14px 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #6a7688; text-transform: uppercase; }
.bl-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.04); }
.bl-av { flex: none; width: 30px; height: 30px; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.1); background-color: #0e1420; display: grid; place-items: center; }
.bl-av-i { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.bl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.bl-sub { display: flex; flex-direction: column; gap: 0; }
.bl-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: #6a7688; }
.bl-station { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: #8a94a6; }
.bl-unblock { flex: none; cursor: pointer; padding: 4px 10px; border-radius: 5px; border: 1px solid #7a3a4a; background: rgba(255,120,120,.08); color: #ff9a9a; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; transition: background .12s, color .12s; }
.bl-unblock:hover { background: rgba(255,120,120,.18); color: #ffbcbc; }

/* Reply quote whose original author you've blocked — content scrubbed, muted placeholder. */
.msg-re.msg-re-blocked { --re-bar: #5a4a52; opacity: .7; }
.msg-re.msg-re-blocked .msg-re-t { color: #8a7d84; font-style: italic; }
.msg-re.msg-re-blocked .msg-re-t i { margin-right: 5px; opacity: .8; }