/* ===================================================================
   FEED PANEL
=================================================================== */

#feed-panel {
  grid-column: 2;
  grid-row: 1;
  display: none;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 8px 0 8px;   /* the social top bar sits at the very top, like the Studio's (owner 2026-09-30) */
  min-height: 0;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
}
#feed-panel.active { display: flex; }
/* While a user's profile is open, the banner image should reach the very top of the central column
   (the global <header> is position:fixed + transparent over it), so drop the 40px header-clearance
   top padding for the profile view only (owner 2026-09-27). */
#feed-panel.profile-at-top { padding-top: 0; }

.tb-post-sop-style {
  padding: 9px 28px;
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--blue); cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.10);
  transition: transform 0.15s;
}
.tb-post-sop-style:hover { transform: scale(1.08); }

/* ── Social top + bottom bars (owner 2026-09-30) ──────────────────────
   The social column now has the Studio's geography: a top card like the working-spaces bar (the social tabs in
   it) and a bottom bar like the Studio's "+ Add a... / Nibs Bin" footer ("Stir writs" in the middle, the storage
   slots on the left). Both are ordinary flex children of #feed-main-col, not floating overlays. The ids are the
   old floating ones, so every existing show/hide (.visible) and active-state path keeps working. */
#feed-float-tabs {
  display: none;
  flex-shrink: 0;
  justify-content: center; align-items: flex-end; gap: 6px;
  padding: 4px 8px 0;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
#feed-float-tabs.visible { display: flex; }
/* The tabs take the Studio's .ws-tab look; only the active underline follows the theme. */
#feed-float-tabs .feed-float-tab.ws-tab { padding: 6px 16px 7px; }
#feed-float-tabs .feed-float-tab.ws-tab.active { border-bottom-color: var(--theme); background: color-mix(in srgb, var(--theme) 8%, transparent); }
/* Owner 2026-09-20: while Llama Mall is the active section, hide the feed's chrome. */
body.llama-active #feed-float-tabs,
body.llama-active #feed-float-post-wrap,
body.llama-active #feed-topspot-period,
body.llama-active #feed-fab-compose { display: none !important; }

#feed-float-post-wrap {
  display: none;
  position: relative; flex-shrink: 0;
  justify-content: center; align-items: center;
  padding: 10px 14px;
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}
#feed-float-post-wrap.visible { display: flex; }
#feed-float-post-btn { padding: 9px 28px; }

/* Feed tabs */
/* Top Spot period filter pills */
.ftp-btn {
  padding: 4px 13px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  border-radius: 14px; border: 1px solid var(--line); background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  cursor: pointer; color: var(--faint);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.ftp-btn:hover { color: var(--dim); border-color: rgba(53,116,196,0.3); }
.ftp-btn.active { color: var(--blue); border-color: rgba(53,116,196,0.5); background: rgba(53,116,196,0.08); }
#feed-tabs {
  /* Legacy flat top bar, superseded by the floating pill bar #feed-float-tabs (shown in
     switchToFeed). Both were fixed at top-center and rendered at once, stacking the same three
     tabs ~6px apart (the doubled menu). Hidden here; #feed-float-tabs is the canonical control
     and feedSetTab() still syncs the active state on both id sets. (owner report 2026-09-18) */
  display: none;
  position: fixed;
  top: 0;
  left: 308px;
  right: 308px;
  height: 32px;
  z-index: 205;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
  padding: 0 10px;
  pointer-events: auto;
}
.feed-tab {
  padding: 6px 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--faint);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s;
}
.feed-tab:hover { color: var(--dim); }
.feed-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Clickable @handle */
.fp-handle-link { cursor: pointer; }
.fp-handle-link:hover .fp-at,
.fp-handle-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Collapsible replies toggle */
.fp-replies-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 14px 6px;
  font-size: 11px; font-weight: 700; color: var(--faint);
  cursor: pointer;
  user-select: none;
  transition: color 0.1s;
}
.fp-replies-toggle:hover { color: var(--blue); }
.fp-replies-toggle .fp-rt-arrow { font-size: 9px; transition: transform 0.15s; }
.fp-replies-toggle.open .fp-rt-arrow { transform: rotate(90deg); }

#feed-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 100px 22px;   /* was 42px on top: the Dee Feed bar now fills that band (owner 2026-09-29) */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  contain: layout style;
  transition: opacity 0.12s ease;
}
#feed-scroll.tab-switching { opacity: 0.4; }
#feed-scroll::-webkit-scrollbar { width: 5px; }
#feed-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
#feed-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), #c084fc);
  width: 0%;
  transition: width 0.15s ease-out;
  z-index: 100;
  pointer-events: none;
  border-radius: 0 1px 1px 0;
}
/* "Put up" (owner 2026-09-20): opaque pill with a label, was a translucent round arrow button. */
#feed-scroll-top { position: absolute; bottom: 16px; right: 16px; padding: 7px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); backdrop-filter: none; color: var(--dim); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: opacity 0.2s, transform 0.2s; opacity: 0; pointer-events: none; transform: translateY(8px); }
#feed-scroll-top:hover { background: var(--card); color: var(--txt); }

/* Collections */
.coll-modal { position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:rgba(10,8,6,0.55);backdrop-filter: none; }
.coll-box { background:var(--glass-bg);backdrop-filter: none;-webkit-backdrop-filter: none;border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 8px 36px rgba(0,0,0,0.22);padding:20px;width:320px;max-width:92vw;max-height:70vh;overflow-y:auto; }
.coll-item { display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 0.12s; }
.coll-item:hover { background:rgba(255,255,255,0.08); }
.coll-item-name { font-size:12px;font-weight:600;color:var(--txt);flex:1; }
.coll-item-count { font-size:10px;color:var(--faint); }
.coll-item-check { font-size:14px;color:var(--blue);width:18px;text-align:center; }
.coll-new-row { display:flex;gap:6px;margin-top:10px; }
.coll-new-row input { flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:11px;color:var(--txt);outline:none; }
.coll-new-row input:focus { border-color:var(--blue); }
.coll-new-row button { padding:7px 12px;border:none;border-radius:8px;background:var(--blue);color:white;font-size:11px;font-weight:700;cursor:pointer; }
.coll-browse-item { padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:background 0.12s; }
.coll-browse-item:hover { background:rgba(255,255,255,0.05); }
.coll-browse-title { font-size:12px;font-weight:700;color:var(--txt); }
.coll-browse-meta { font-size:10px;color:var(--faint);margin-top:2px; }

/* Time filter chips */
.feed-time-chip { padding:3px 8px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--faint);font-size:10px;font-weight:600;cursor:pointer;transition:background 0.12s, color 0.12s, border-color 0.12s; }
.feed-time-chip:hover { border-color:var(--accent);color:var(--accent); }
.feed-time-chip.active { background:var(--accent);border-color:var(--accent);color:#fff; }

/* Compose-at-top bar */
#feed-compose-bar {
  display: none !important;  /* replaced by inline Post Sop injection */
}
#feed-compose-bar:hover { background: rgba(255,255,255,0.72); }
.fcd-avatar {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: white; font-weight: 700;
  text-shadow: none;
}
.fcd-prompt {
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Floating compose button (mobile) */
#feed-fab-compose {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border: none;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(53,116,196,0.4);
  cursor: pointer;
  z-index: 9990;
  transition: transform 0.18s, opacity 0.18s, box-shadow 0.18s;
  align-items: center;
  justify-content: center;
}
#feed-fab-compose:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(53,116,196,0.55); }
#feed-fab-compose.fab-hidden { transform: translateY(80px); opacity: 0; pointer-events: none; }
/* (Owner 2026-10-05: no longer shown on narrow windows: the feed's bottom bar keeps "Stir writs" visible at every
    width now (css/10-responsive.css), and this floating copy sat on top of it.) */

/* Individual post card */
.feed-post {
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--win-radius);
  box-shadow: var(--glass-shadow);
  overflow: visible;
  position: relative;
  margin-top: 6px;
  margin-left: 36px;
}
.feed-post.kb-focus { outline: 2px solid rgba(53,116,196,0.5); outline-offset: -1px; }
.feed-post.fp-active-thread { border-color: rgba(53,116,196,0.25); box-shadow: var(--glass-shadow), 0 0 0 1px rgba(53,116,196,0.08); }
.feed-post.fp-compare-selected { outline: 2px dashed var(--amber); outline-offset: 2px; }
.feed-post::after {
  content: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, transparent 60%);
}

/* POTD  -  entire card gets a subtle golden wash */
.feed-post.potd {
  background: rgba(255, 248, 220, 0.72);
  border-color: rgba(200, 155, 20, 0.35);
  box-shadow: 0 4px 20px rgba(200,150,12,0.10), var(--glass-shadow);
}
.feed-post.potd::after {
  background: linear-gradient(160deg, rgba(255,245,180,0.18) 0%, transparent 60%);
}

.fp-repost-banner {
  padding: 4px 14px 0 58px;
  font-size: 10px;
  color: var(--faint);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.fp-repost-banner:hover { color: var(--blue); }
.fp-repost-banner .fp-repush-ico { width: 12px; height: 12px; vertical-align: -2px; }
.fp-friend-liked { padding: 4px 14px 0 58px; font-size: 10px; color: var(--amber); letter-spacing: 0.02em; }
.fp-chain-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(53,116,196,0.08);
  border: 1px solid rgba(53,116,196,0.2);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.fp-chain-badge:hover { background: rgba(53,116,196,0.15); }

/* Post header: meta only (avatar is absolute-positioned via fp-avatar-col) */
.fp-header {
  display: flex;
  align-items: flex-start;
  padding: 10px 14px 0 58px;
  min-height: 40px;
  position: relative;
}
/* Avatar box  -  80x80, positioned absolute via fp-avatar-col */
.fp-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 8px;
  background: var(--glass-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.fp-avatar {
  width: 68px; height: 68px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: white;
  text-shadow: none;
}
/* .fp-online-dot removed (owner 2026-09-20): replaced by the hover "online / nil / no" line. */
.fp-avatar-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: absolute; left: -28px; top: 10px; z-index: 3; }
.fp-avatar-underlay { text-align: center; margin-top: 4px; width: 80px; }
.fp-avatar-title { font-size: 9px; font-weight: 600; color: var(--dim); letter-spacing: 0.04em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-avatar-level { font-size: 10px; font-weight: 700; color: var(--blue); letter-spacing: 0.06em; }
.fp-avatar-posts { font-size: 8px; color: var(--faint); letter-spacing: 0.04em; }
.fp-meta { flex: 1; min-width: 0; }
/* Username on top, then handle + time row below at 60% opacity */
.fp-display-name {
  font-size: 12px; font-weight: 700;
  color: var(--txt);
  letter-spacing: 0.02em;
  display: block;
}
.fp-handle {
  font-size: 10px; font-weight: 600;
  color: var(--txt);
  opacity: 0.6;
  letter-spacing: 0.02em;
  display: inline;
}
.fp-handle .fp-at { color: var(--blue); opacity: 1; }
.fp-time {
  font-size: 10px;
  color: var(--faint);
  opacity: 0.6;
  margin-left: 6px;
  display: inline;
}
.fp-edited-badge {
  font-size: 9px;
  color: var(--faint);
  opacity: 0.7;
  margin-left: 4px;
  cursor: pointer;
  font-style: italic;
}
.fp-edited-badge:hover { text-decoration: underline; }

/* "To: Borg-robot" (owner 2026-10-02): an answer to a bot's post. Sits left of the post-type label with a clear gap,
   so the two never read as one field; the bot pill next to the @handle was removed. */
.fp-to-bot {
  font-size: 10px;
  font-weight: 700;
  color: var(--author-dark, var(--dim));
  opacity: 0.8;
  margin-right: 4px;   /* + the footer flex gap and the label padding: about 18px apart */
  white-space: nowrap;
}
/* Pushed right with the type label (which normally takes the auto margin itself), keeping the gap. */
:is(#feed-scroll,#pp-posts-list) .fp-actions .fp-to-bot { margin-left: auto; }
:is(#feed-scroll,#pp-posts-list) .fp-actions .fp-to-bot + .fp-type-label { margin-left: 0; }

.fp-velocity {
  font-size: 10px;
  margin-left: 4px;
  color: var(--dim);
}
.fp-velocity-hot {
  color: var(--gold);
  animation: fpHotPulse 1.5s infinite;
}

/* Gallery view */
#feed-scroll.feed-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  align-content: start;
}
#feed-scroll.feed-gallery .feed-post {
  margin-top: 0;
}
#feed-scroll.feed-gallery .fp-header,
#feed-scroll.feed-gallery .fp-actions,
#feed-scroll.feed-gallery .fp-note,
#feed-scroll.feed-gallery .fp-image-wrap,
#feed-scroll.feed-gallery .fp-reply-section,
#feed-scroll.feed-gallery .fp-chain-badge,
#feed-scroll.feed-gallery .fp-repost-banner,
#feed-scroll.feed-gallery .fp-tags,
#feed-scroll.feed-gallery .fp-sig { display: none; }
#feed-scroll.feed-gallery .fp-palindrome {
  font-size: 10px;
  padding: 12px 10px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#feed-scroll.feed-gallery .feed-post { cursor: pointer; }
@media (max-width: 480px) {
  #feed-scroll.feed-gallery { grid-template-columns: 1fr; }
}

#feed-gallery-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--faint);
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.12s;
}
#feed-gallery-toggle:hover { color: var(--dim); }
#feed-gallery-toggle.active { color: var(--blue); }

#feed-new-posts-badge {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  margin: 0 auto 8px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(53,116,196,0.3);
  transition: transform 0.15s;
  width: fit-content;
}
#feed-new-posts-badge:hover { transform: scale(1.05); }
#feed-latency-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.fcc-topic-hints span:hover { opacity: 0.8; }

/* Palindrome body  -  indented past avatar */
.fp-palindrome {
  padding: 10px 14px 8px 58px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--txt);
  line-height: 1.6;
  text-align: left;
}
/* Quote-inside-post display */
.fp-quote-wrapper {
  margin: 6px 14px 6px 52px;
  border: 0;
  border-radius: 8px;
  background: rgba(119,100,71,0.06);
  padding: 7px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.fp-quote-avatar {
  width: 20px; height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: white;
  text-shadow: none;
}
.fp-quote-body { flex: 1; min-width: 0; }
/* Quote header (owner 2026-09-27): username first, @handle to its RIGHT (normal posts stack handle UNDER
   the name; quotes read inline to stay compact). */
.fp-quote-header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fp-quote-name { font-size: 12px; font-weight: 700; color: var(--txt); }
.fp-quote-handle { font-size: 10px; font-weight: 700; color: var(--blue); }
.fp-quote-text {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  color: var(--dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reaction bar */
/* ── Feed post hover → show reaction bar ─────────────────────────── */
.feed-post { position: relative; }
.fp-rx-hover-bar {
  position: absolute;
  bottom: 38px;        /* sits just above the action row */
  right: 10px;
  display: none;
  align-items: center;
  gap: 2px;
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  padding: 3px 6px;
  z-index: 10;
  pointer-events: none;
}
.feed-post:hover .fp-rx-hover-bar { display: flex; pointer-events: auto; }
.fp-reply-item:hover .fp-rx-hover-bar { display: flex; pointer-events: auto; }
.fp-rx-hbtn {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  border-radius: 50%;
  border: none; background: transparent;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
  user-select: none;
}
.fp-rx-hbtn:hover   { transform: scale(1.25); background: rgba(255,255,255,0.55); }
.fp-rx-hbtn:active  { transform: scale(0.88); }
.fp-rx-hbtn.fp-rx-dots { font-size: 13px; color: var(--dim); }
/* Golden hue filter  -  applied to all reaction emojis permanently */
.fp-rx-hbtn:not(.fp-rx-dots) { filter: sepia(0.85) saturate(2.8) hue-rotate(-8deg) brightness(1.06); text-shadow: 0 0 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.45) !important; }
.fp-reaction .fp-rx-emoji    { filter: sepia(0.85) saturate(2.8) hue-rotate(-8deg) brightness(1.06); text-shadow: 0 0 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.45) !important; }
.fp-rx-hbtn-active  { background: rgba(53,116,196,0.12); box-shadow: inset 0 0 0 1px rgba(53,116,196,0.35); border-radius: 50%; }
.fp-rx-hbtn-count {
  position: absolute;
  bottom: -2px; right: -2px;
  font-size: 9px; font-weight: 800;
  color: var(--blue);
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 0 3px;
  line-height: 14px;
  pointer-events: none;
}

/* E-aegis signature block (below post content, above reactions) */
.fp-sig {
  padding: 4px 14px 6px 100px;
  border-top: 1px solid var(--divider, rgba(128,128,128,0.15));
  margin-top: 4px;
}
.fp-sig-text {
  font-size: 10px;
  color: var(--txt);
  opacity: 0.55;
  line-height: 1.35;
  white-space: pre-line;
  max-height: 28px;
  overflow: hidden;
}
.fp-sig-image {
  max-width: 350px;
  height: 20px;
  display: block;
  margin-top: 2px;
  border-radius: 2px;
}
/* Sig settings preview */
.sig-preview {
  background: var(--glass-bg, #1a1a2e);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 6px;
  min-height: 42px;
}

/* Reactions: inline within action strip, right-aligned */
.fp-reactions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
  align-items: center;
}
.fp-actions-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.fp-rx-inline-trigger {
  font-size: 16px;
  padding: 2px 6px;
  opacity: 0.6;
  transition: opacity 0.12s, transform 0.1s;
}
.fp-rx-inline-trigger:hover { opacity: 1; transform: scale(1.15); }
.fp-reaction {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid transparent;    /* no border by default */
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  user-select: none;
}
.fp-reaction:hover  { background: rgba(53,116,196,0.08); border-color: rgba(53,116,196,0.18); color: var(--txt); transform: scale(1.05); }
.fp-reaction:active { transform: scale(0.95); }
.fp-reaction.active, .fp-reaction.fp-reaction-mine { background: rgba(53,116,196,0.12); border-color: rgba(53,116,196,0.30); color: var(--blue); }
.fp-reaction .fp-rx-emoji { font-size: 13px; line-height: 1; }
.fp-reaction .fp-rx-count { font-size: 10px; color: var(--faint); }
.fp-reaction.active .fp-rx-count, .fp-reaction.fp-reaction-mine .fp-rx-count { color: var(--blue); }
.fp-rx-label { display: none; }  /* hidden by default; name shown only in tooltip */

/* Reaction overflow popup ("+n more") */
.fp-rxmore-popup {
  display: none; position: fixed;
  background: var(--bg);   /* opaque popup (owner 2026-09-21) */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  padding: 4px 0;
  min-width: 160px; z-index: 9400;
}
.fp-rxmore-popup.open { display: block; }
.fp-rxmore-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; cursor: pointer; font-size: 13px;
  transition: background 0.1s;
}
.fp-rxmore-item:hover { background: rgba(53,116,196,0.07); }
.fp-rxmore-btn { font-size: 13px; letter-spacing: 0.1em; color: var(--faint); }

/* Tooltip showing palindromic label on hover */
.fp-reaction::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%; transform: translateX(-50%);
  background: rgba(30,28,26,0.88);
  color: #fff;
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10002;
}
.fp-reaction:hover::after { opacity: 1; }


/* ── Reply thread (unfurlable internal scroll) ──────────────────── */
.fp-thread {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(175,170,163,0.20);
  background: rgba(235,232,228,0.25);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.fp-thread.open { display: flex; }
.fp-thread-scroll {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,155,148,0.3) transparent;
}
.fp-thread-scroll::-webkit-scrollbar { width: 4px; }
.fp-thread-scroll::-webkit-scrollbar-thumb { background: rgba(160,155,148,0.3); border-radius: 2px; }

/* Reply compose at top of thread */
.fp-thread-compose {
  border-bottom: 1px solid rgba(175,170,163,0.18);
  padding: 8px 12px;
  background: rgba(255,255,255,0.30);
}

/* Action buttons redesign */
.fp-action-btn.fp-reply-icon,
.fp-action-btn.fp-repost-icon {
  display: flex; align-items: center; gap: 5px;
  font-size: 15px; padding: 4px 10px;
}
.fp-action-btn.fp-reply-icon .fp-reply-count,
.fp-action-btn.fp-repost-icon .fp-repost-count {
  font-size: 10px; color: var(--faint);
}
.fp-action-btn.fp-reply-icon.open { color: var(--blue); }
.fp-action-btn.fp-repost-icon.reposted { color: var(--green); }
.fp-action-btn.fp-domod-btn {
  font-size: 10px; color: var(--faint);
  border: 1px dashed rgba(160,155,148,0.4);
  border-radius: 6px; padding: 3px 8px;
}
.fp-action-btn.fp-domod-btn:hover { color: var(--amber); border-color: var(--amber); background: rgba(154,110,24,0.06); }
.fp-action-btn.fp-delete-btn {
  font-size: 12px; color: var(--faint);
  border: 1px solid transparent; border-radius: 6px; padding: 3px 7px;
}
.fp-action-btn.fp-delete-btn:hover { color: var(--red); border-color: rgba(184,48,48,0.35); background: rgba(184,48,48,0.06); }

/* Repost chooser popup */
.fp-repost-menu {
  position: absolute; bottom: 100%; left: 0;
  background: var(--bg);   /* opaque menu (owner 2026-09-21) */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  padding: 6px 0;
  min-width: 160px;
  display: none; z-index: 500;
}
.fp-repost-menu.open { display: block; }
.fp-repost-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 600; color: var(--dim);
  cursor: pointer; transition: background 0.1s;
}
.fp-repost-menu-item:hover { background: rgba(53,116,196,0.07); color: var(--txt); }

/* Thread (post + its replies) spacing */
.feed-post {
  border-radius: 10px;
  background: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}
.fp-skeleton { opacity: 0.6; }
.fp-skel-circle {
  width: 32px; height: 32px; border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, rgba(255,255,255,0.4) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: fpSkelShimmer 1.2s infinite;
}
.fp-skel-line {
  height: 10px; border-radius: 4px; margin-bottom: 6px;
  background: linear-gradient(90deg, var(--line) 25%, rgba(255,255,255,0.4) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: fpSkelShimmer 1.2s infinite;
}
.fp-skel-line.short { height: 8px; }
@keyframes fpSkelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Full picker  -  horizontal single row, emoji-only */
#feed-rx-picker {
  position: fixed;
  z-index: 9000;
  /* Owner 2026-09-25: was 0.98 alpha, which still read as see-through over the busy video-bg.
     Fully opaque now so the emoji-choosing panel is solid. */
  background: rgb(245, 242, 238);
  border: 1px solid rgba(180, 175, 168, 0.5);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  padding: 7px 10px;
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  max-width: min(96vw, 400px);
  overflow: visible;   /* allow ::after tooltips to spill out */
}
#feed-rx-picker.open { display: flex; }
.rx-picker-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: none; background: transparent;
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.1s, background 0.1s;
  user-select: none;
}
.rx-picker-item:hover  { transform: scale(1.30); background: rgba(255,255,255,0.55); }
.rx-picker-item:active { transform: scale(0.88); }
/* Golden hue  -  matches hover-bar and chip emoji filter */
.rx-picker-item { filter: sepia(0.85) saturate(2.8) hue-rotate(-8deg) brightness(1.06); text-shadow: 0 0 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.45) !important; }
/* Tooltip on hover */
.rx-picker-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%; transform: translateX(-50%);
  background: rgba(30,28,26,0.88);
  color: #fff;
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10001;
}
.rx-picker-item:hover::after { opacity: 1; }

/* Post action row */
.fp-actions {
  display: flex;
  gap: 2px;
  padding: 0 10px 10px 58px;
  border-top: 1px solid rgba(175,170,163,0.20);
  padding-top: 6px;
  margin-top: 2px;
}
.fp-action-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none; background: transparent;
  cursor: pointer;
  font-size: 11px; font-weight: 600;
  color: var(--dim);
  transition: background 0.12s, color 0.12s;
}
.fp-action-btn:hover { background: rgba(0,0,0,0.05); color: var(--txt); }
.fp-action-btn.active { color: var(--blue); }
.fp-action-btn.fp-like-btn.active { color: rgba(180,60,60,0.85); }
.fp-action-btn.fp-like-btn:hover  { color: rgba(180,60,60,0.75); }

/* Reply thread indent */
.fp-replies {
  border-top: 1px solid rgba(175,170,163,0.25);
  background: rgba(240,237,233,0.25);
}

.fp-thread-faces {
  display: inline-flex; margin-right: 4px;
}
.fp-thread-face {
  width: 14px; height: 14px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 7px; font-weight: 800;
  color: #fff; margin-right: -4px; border: 1.5px solid var(--card);
}
.fp-thread-faces .fp-thread-face:last-child { margin-right: 0; }
.fp-thread-connector {
  height: 10px;
  margin: 0 18px;
  background: rgba(220,216,210,0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: 1px solid rgba(255,255,255,0.6);
  border-right: 1px solid rgba(255,255,255,0.6);
  position: relative;
  z-index: 0;
}
.fp-thread.open {
  padding: 8px 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(230,227,222,0.18);
}
.fp-reply-item {
  background: rgba(252,250,247,0.75);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(200,196,190,0.4);
  border-radius: 10px;
  padding: 8px 12px 8px 12px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  position: relative;
  /* Sub-replies are slightly narrower via margin-left in their container */
}
.fp-reply-item:last-child { border-bottom: none; }
.fp-reply-popular { border-color: rgba(154,110,24,0.25); background: rgba(154,110,24,0.03); }
.fp-reply-avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: white;
  text-shadow: none;
  margin-top: 2px;
}
.fp-reply-body { flex: 1; min-width: 0; }
.fp-reply-handle { font-size: 11px; font-weight: 700; color: var(--txt); }
.fp-reply-handle .fp-at { color: var(--blue); }
.fp-reply-time { font-size: 10px; color: var(--faint); opacity: 0.6; margin-left: 6px; }
.fp-reply-text {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  color: var(--txt);
  margin-top: 3px;
  letter-spacing: 0.05em;
}

/* Reply compose box (segment-like) */
.fp-reply-compose {
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(175,170,163,0.25);
  background: rgba(240,237,233,0.20);
  display: none;
}
.fp-reply-compose.open { display: block; }
.fp-rc-inner {
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
/* Segment-like palindrome display inside reply compose */
.fp-rc-display {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 7px 10px;
  gap: 4px;
  align-items: center;
  min-height: 36px;
  cursor: text;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em;
}
.fp-rc-left  { color: var(--blue);  text-align: right; }
.fp-rc-sep   { color: var(--faint); font-size: 10px; padding: 0 4px; }
.fp-rc-right { color: var(--amber); text-align: left; }
.fp-rc-empty { color: var(--faint); font-size: 11px; text-align: center; }
/* Mini suggest strip */
.fp-rc-suggest {
  border-top: 1px solid var(--line);
  max-height: 120px;
  overflow-y: auto;
  display: none;
}
.fp-rc-suggest.has-results { display: block; }
.fp-rc-sug-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px; font-weight: 600;
  font-family: var(--mono);
  transition: background 0.1s;
}
.fp-rc-sug-item:hover { background: rgba(53,116,196,0.08); }
.fp-rc-sug-l { color: var(--blue);  text-align: right; font-size: 11px; }
.fp-rc-sug-a { color: var(--faint); font-size: 10px; padding: 0 4px; }
.fp-rc-sug-r { color: var(--amber); text-align: left;  font-size: 11px; }
/* Reply compose footer */
.fp-qr-row {
  display: flex; gap: 4px; padding: 4px 10px 2px; flex-wrap: wrap;
}
.fp-qr-chip {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(53,116,196,0.04);
  color: var(--dim); cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.fp-qr-chip:hover { background: rgba(53,116,196,0.12); border-color: var(--blue); color: var(--blue); }
.fp-rc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 6px;
  border-top: 1px solid var(--line);
  gap: 6px;
}
.fp-rc-hint { font-size: 10px; color: var(--faint); flex: 1; }
.fp-rc-post-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(53,116,196,0.35);
  background: rgba(53,116,196,0.10);
  color: var(--blue);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.fp-rc-post-btn:hover { background: rgba(53,116,196,0.20); }
.fp-rc-post-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Feed compose mini-cell ─────────────────────────────────────────── */
.fc-cell {
  display: grid;
  /* minmax(0, 1fr), not 1fr (owner 2026-10-03): the middle buttons ALWAYS sit in the middle of the Segment, however
     narrow a deeply indented reply gets. A bare 1fr has an auto minimum, so one half's longer text widened its own
     track and pushed the middle off centre. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.05em;
  cursor: text;
  outline: none;
  border-bottom: 1px solid rgba(175,170,163,0.18);
  transition: background 0.12s;
  position: relative;
}
.fc-cell:focus { background: rgba(255,255,255,0.55); }
.fc-cell-left  { text-align: right; color: var(--blue);  min-width: 0; }
.fc-cell-sep-btn {
  color: var(--faint); font-size: 14px; padding: 0 8px; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer; border-radius: 50%;
  transition: color 0.1s, background 0.1s;
  line-height: 1;
}
.fc-cell-sep-btn:hover { color: var(--blue); background: rgba(53,116,196,0.10); }
.fc-cell-right { text-align: left;  color: var(--amber); min-width: 0; }
.fc-cell-empty { color: var(--faint); font-size: 11px; font-family: var(--ui);
                 letter-spacing: 0; text-align: center; grid-column: 1/-1; user-select: none; }
.fc-cell.fc-active-left  .fc-cell-left  { background: rgba(53,116,196,0.07); border-radius: 3px; padding-top: 1px; padding-bottom: 1px; }   /* side padding: 21px spot room, css/06 */
.fc-cell.fc-active-right .fc-cell-right { background: rgba(220,140,60,0.09);  border-radius: 3px; padding-top: 1px; padding-bottom: 1px; }
/* Owner 2026-09-25: the 3 social PalSegment cells (Bust Sub reply, Graffiti F-far-G, Krapedy Hydepark) must
   be VISUALLY IDENTICAL to a Studio segment. Verified line-by-line by three models: match the Studio active-
   segment chrome (.seg-box.active + .seg-box-body pad + #cell-view type), and shed the feed's 13px/600/0.05em
   container type + every per-cell box override. (Palindrome letters were already 15px/400 via .cell-char.) */
.fc-cell.pal-seg {
  min-height: 0;
  padding: 4px 8px 8px 8px;
  border: 1px solid rgba(53,116,196,0.70);
  border-radius: 10px;
  background: rgb(248,251,255);
  box-shadow: 0 2px 16px rgba(53,116,196,0.15);
  font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: normal;
  text-align: left; overflow: hidden;
}
.fc-cell.pal-seg:focus { background: rgb(248,251,255); box-shadow: 0 2px 16px rgba(53,116,196,0.15); border-color: rgba(53,116,196,0.70); }
.fc-cell.pal-seg.fc-active-left  .fc-cell-left,
.fc-cell.pal-seg.fc-active-right .fc-cell-right { background: none; border-radius: 0; padding-top: 0; padding-bottom: 0; }
/* (The "unified" preview row under the post card is retired, owner 2026-10-05: a connected card joins in place.) */
/* ── Inline compose card (expands below compose bar) ── */
#feed-compose-card {
  display: none !important;  /* replaced by inline compose slot */
  flex-direction: column;
  gap: 0;
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0;
  box-shadow: var(--glass-shadow);
  margin-top: -4px;
  flex-shrink: 0;
}
#feed-compose-card.open { display: none !important; }  /* disabled */
.fcc-pal-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 8px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.05em;
  min-height: 42px;
}
.fcc-pal-left  { color: var(--blue);  text-align: right; }
.fcc-pal-sep   { color: var(--faint); font-size: 11px; }
.fcc-pal-right { color: var(--amber); text-align: left; }
.fcc-pal-empty { color: var(--faint); font-size: 11px; text-align: center; font-family: var(--ui); letter-spacing: 0; }
.fcc-caption-row {
  padding: 0 14px 8px 58px;
  border-top: 1px solid rgba(175,170,163,0.20);
  padding-top: 8px;
}
.fcc-caption-row input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  font-size: 12px;
  color: var(--txt);
  padding: 3px 0 4px;
  font-family: var(--ui);
}
.fcc-caption-row input::placeholder { color: var(--faint); }
.fcc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 10px;
  gap: 8px;
  border-top: 1px solid rgba(175,170,163,0.20);
}
.fcc-pick-btn {
  font-size: 10px; color: var(--dim);
  background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.fcc-pick-btn:hover { border-color: var(--blue); color: var(--blue); }
.fcc-post-btn {
  padding: 5px 18px;
  border-radius: 8px;
  border: 1px solid rgba(53,116,196,0.40);
  background: rgba(53,116,196,0.12);
  color: var(--blue);
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background 0.12s;
}
.fcc-post-btn:hover { background: rgba(53,116,196,0.22); }
.fcc-post-btn:disabled { opacity: 0.4; cursor: default; }
.fcc-suggest-strip {
  border-top: 1px solid var(--line);
  max-height: 160px;
  overflow-y: auto;
  display: none;
}
.fcc-suggest-strip.open { display: block; }
.fcc-sug-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 11px; font-weight: 600;
  font-family: var(--mono);
  transition: background 0.1s;
  letter-spacing: 0.04em;
}
.fcc-sug-item:hover { background: rgba(53,116,196,0.08); }
.fcc-sug-l { color: var(--blue);  text-align: right; }
.fcc-sug-a { color: var(--faint); font-size: 10px; padding: 0 4px; }
.fcc-sug-r { color: var(--amber); text-align: left; }

/* ── Profile setup modal ── */
#feed-profile-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.62);   /* owner 2026-09-25: proper modal dim (was 0.22, busy bg bled through) */
  backdrop-filter: none;
}
#feed-profile-modal.open { display: flex; }
.fpm-box {
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  padding: 28px 32px 24px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fpm-title {
  font-size: 14px; font-weight: 700;
  color: var(--txt); letter-spacing: 0.03em;
}
.fpm-subtitle {
  font-size: 11px; color: var(--dim);
  margin-top: -12px;
  line-height: 1.5;
}
.fpm-row { display: flex; flex-direction: column; gap: 5px; }
.fpm-label { font-size: 10px; font-weight: 700; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.fpm-input {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 13px;
  color: var(--txt);
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--ui);
}
.fpm-input:focus { border-color: var(--blue); }
.fpm-pal-cell {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 13px;
  color: var(--txt);
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--mono);
  font-weight: 600;
  cursor: text;
  min-height: 34px;
  display: flex;
  align-items: center;
  user-select: none;
  letter-spacing: 0.04em;
}
.fpm-pal-cell:focus { border-color: var(--blue); }
.fpm-pal-cell .fpm-ch { display: inline; }

.fpm-caret-main {
  display: inline-block; width: 0; height: 17px;
  border-left: 2px solid var(--blue); margin-right: -2px;
  vertical-align: middle; animation: blink 1s step-end infinite;
}
.fpm-caret-sec {
  display: inline-block; width: 0; height: 13px;
  border-left: 2px solid var(--blue); margin-right: -2px;
  opacity: 0.5; vertical-align: middle; animation: blink-mirror 2s step-end infinite;
}
.fpm-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.40);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.fpm-preview-avatar {
  width: 38px; height: 38px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: white;
  text-shadow: none;
  transition: background 0.2s;
}
.fpm-preview-handle { font-size: 13px; font-weight: 700; color: var(--txt); }
.fpm-preview-handle .fp-at { color: var(--blue); }
.fpm-color-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fpm-color-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
}
.fpm-color-swatch:hover { transform: scale(1.15); }
.fpm-color-swatch.selected { border-color: var(--txt); }
.fpm-save-btn {
  padding: 8px 0;
  border-radius: 10px;
  border: none;
  background: rgba(53,116,196,0.15);
  color: var(--blue);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
  letter-spacing: 0.04em;
}
.fpm-save-btn:hover { background: rgba(53,116,196,0.28); }

/* ── Profile modal: wide two-column layout when claim panel is present ── */
.fpm-box.fpm-wide {
  width: auto;
  max-width: 680px;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.fpm-left {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px 28px 24px;
  width: 300px; flex-shrink: 0;
}
.fpm-claim-panel {
  width: 300px; flex-shrink: 0;
  border-left: 1px solid var(--glass-border);
  display: flex; flex-direction: column;
  max-height: 480px;
}
.fpm-claim-title {
  font-size: 10px; font-weight: 700;
  color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.fpm-claim-search {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: none; border-bottom: 1px solid var(--glass-border);
  padding: 7px 12px; font-size: 12px;
  color: var(--txt); outline: none;
  font-family: var(--ui);
}
.fpm-claim-search::placeholder { color: var(--faint); }
.fpm-claim-list {
  overflow-y: auto; flex: 1;
  padding: 6px 0;
}
.fpm-claim-item {
  display: flex; align-items: center; gap: 0;
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  font-family: var(--mono);
  cursor: pointer;
  color: var(--txt);
  transition: background 0.1s, color 0.1s;
  user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpm-claim-item:hover:not(.fpm-claim-taken) { background: rgba(53,116,196,0.09); color: var(--blue); }
.fpm-claim-item.fpm-claim-taken {
  color: var(--faint); cursor: default;
  text-decoration: line-through;
}
.fpm-claim-at { color: var(--blue); margin-right: 1px; font-weight: 800; }
.fpm-claim-item.fpm-claim-taken .fpm-claim-at { color: var(--faint); }

/* ── Pricing modal ───────────────────────────────────────────────── */
#pricing-modal {
  display: none; position: fixed; inset: 0; z-index: 10500;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); backdrop-filter: none;
  padding: 16px; overflow-y: auto;
}
#pricing-modal.open { display: flex; align-items: flex-start; }
/* margin:auto centres the box when it fits and lets a taller one (cards stacked on a phone) scroll from its
   top: with align-items:center the title and close button were cut off above the scroll area. */
#pricing-modal.open > .pricing-box { margin: auto; }
.pricing-box {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); border-radius: 24px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.24);
  padding: 40px 36px 32px; max-width: 860px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.pricing-close {
  position: absolute; top: 16px; right: 18px;
  border: none; background: transparent; font-size: 16px;
  color: var(--faint); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.pricing-close:hover { color: var(--txt); background: rgba(0,0,0,0.06); }
.pricing-title { font-size: 24px; font-weight: 900; color: var(--txt); margin-bottom: 8px; text-align: center; }
.pricing-subtitle { font-size: 12px; color: var(--dim); text-align: center; max-width: 440px; line-height: 1.6; margin-bottom: 28px; }
.pricing-cards { display: flex; gap: 16px; align-items: stretch; width: 100%; }
@media (max-width: 680px) { .pricing-cards { flex-direction: column; } }
.pricing-card {
  flex: 1; border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 0;
  cursor: pointer; transition: transform 0.13s, box-shadow 0.13s;
  background: rgba(255,255,255,0.35); position: relative;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.pricing-card-featured {
  background: rgba(53,116,196,0.07);
  border-color: rgba(53,116,196,0.30);
  box-shadow: 0 8px 28px rgba(53,116,196,0.10);
}
.pricing-card-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 12px; border-radius: 20px; white-space: nowrap;
}
.pricing-card-name { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.pricing-card-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.pricing-amount { font-size: 36px; font-weight: 900; color: var(--txt); line-height: 1; font-family: var(--mono); }
.pricing-cents { font-size: 22px; }
.pricing-period { font-size: 11px; color: var(--faint); font-weight: 600; margin-left: 4px; }
.pricing-card-note { font-size: 11px; color: var(--faint); font-style: italic; margin-bottom: 16px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.pricing-features li { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 7px; }
.pricing-features li::before { content: '✓'; color: var(--blue); font-weight: 800; font-size: 10px; flex-shrink: 0; }
.pricing-cta {
  width: 100%; padding: 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.6); color: var(--txt);
}
.pricing-cta:hover { background: rgba(255,255,255,0.9); }
.pricing-cta-featured { background: var(--blue); color: #fff; border-color: transparent; }
.pricing-cta-featured:hover { background: #2a5eb0; }
.pricing-waiver { display: flex; gap: 8px; align-items: flex-start; max-width: 560px; margin: 22px auto 0; font-size: 11px; line-height: 1.5; color: var(--dim); cursor: pointer; border-radius: 8px; padding: 6px 8px; }
.pricing-waiver input { margin-top: 2px; flex-shrink: 0; }
.pricing-waiver-need { animation: pricing-waiver-pulse 0.9s ease 2; outline: 2px solid var(--blue); }
@keyframes pricing-waiver-pulse { 50% { background: rgba(58, 110, 200, 0.14); } }
.pricing-legal { margin-top: 10px; font-size: 11px; color: var(--faint, var(--dim)); text-align: center; }
.pricing-legal a { color: var(--blue); }
.pricing-footer { margin-top: 20px; font-size: 10px; color: var(--faint); font-style: italic; letter-spacing: 0.04em; }



/* Profile hover popup */
#fp-profile-hover {
  position: fixed; z-index: 9200;
  background: var(--card);   /* opaque, matching every other menu (owner 2026-09-22; was translucent --glass-bg) */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 14px 16px 12px; width: 240px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.12s;
}
#fp-profile-hover.visible { opacity: 1; pointer-events: auto; }
.fp-hover-avatar {
  width: 44px; height: 44px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff; flex-shrink: 0;
  cursor: pointer;
}
.fp-hover-name { font-size: 13px; font-weight: 800; color: var(--txt); cursor: pointer; }
.fp-hover-name:hover { text-decoration: underline; }
.fp-hover-handle { font-size: 11px; color: var(--blue); cursor: pointer; margin-top: 1px; }
.fp-hover-handle:hover { text-decoration: underline; }
.fp-hover-bio { font-size: 11px; color: var(--dim); margin-top: 6px; font-style: italic; line-height: 1.5; }
.fp-hover-stats { font-size: 10px; color: var(--faint); margin-top: 8px; }
.fp-hover-mutual { font-weight: 700; color: var(--dim); }
.fp-hover-latest { font-size: 10px; color: var(--dim); margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--glass-border); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fp-display-name { font-weight: 800; color: var(--txt); margin-right: 2px; }


/* Profile page + Setup subpage rules moved to css/18-profile.css (owner 2026-09-27 redesign). */
#auth-identity:hover {
  background: rgba(53,116,196,0.08);
  border-color: var(--glass-border);
}
/* Bottom-left "me" nav is highlighted while the profile section is open (owner 2026-09-27) */
#auth-identity.nav-active {
  background: rgba(53,116,196,0.14);
  border-color: rgba(53,116,196,0.45);
}

#profile-page,
#llama-mall-page {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  flex-direction: column;
  scrollbar-width: thin;
}

/* ── Post options (⋯) popup ───────────────────────────────────────────── */
.fp-options-btn {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: var(--faint); line-height: 1;
  padding: 2px 6px; border-radius: 6px;
  opacity: 0; transition: opacity 0.05s; z-index: 3;
}
.feed-post:hover > .fp-card-clip .fp-options-btn,
.fp-reply-item:hover > .fp-card-clip .fp-options-btn,
.fp-options-btn:focus { opacity: 1; }
.fp-options-btn:hover { color: var(--dim); background: rgba(0,0,0,0.05); }

#fp-options-popup {
  display: none; position: fixed; z-index: 9500;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 4px 0; min-width: 180px;
}
#fp-options-popup.open { display: block; }
.fp-opt-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; font-size: 12px; font-weight: 600;
  color: var(--dim); cursor: pointer; transition: background 0.1s;
}
.fp-opt-item:hover { background: rgba(53,116,196,0.07); color: var(--txt); }
.fp-opt-item.danger { color: var(--red); }
.fp-opt-item.danger:hover { background: rgba(184,48,48,0.07); }
.fp-opt-sep { height: 1px; background: var(--line); margin: 3px 0; }

#seg-ctx-menu {
  position: fixed; z-index: 9999;
  background: var(--bg);   /* owner 2026-09-21: opaque, was translucent glass */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  padding: 4px 0; min-width: 160px;
  display: none;
}
#seg-ctx-menu.open { display: block; }
.seg-ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: var(--dim); cursor: pointer; transition: background 0.1s;
}
.seg-ctx-item:hover { background: rgba(53,116,196,0.07); color: var(--txt); }
.seg-ctx-item.danger { color: var(--red); }
.seg-ctx-item.danger:hover { background: rgba(184,48,48,0.07); }
.seg-ctx-sep { height: 1px; background: var(--line); margin: 3px 0; }

/* Notifications modal */
/* Keyboard shortcut reference rows */
.kbd-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 0; font-size: 11px; color: var(--dim);
  flex-wrap: wrap;
}
.kbd-row span { margin-left: 2px; color: var(--dim); }
.kbd-row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(170,165,158,0.55);
  border-bottom-width: 2px; border-radius: 4px;
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  color: var(--txt); padding: 1px 6px; min-width: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08); white-space: nowrap;
}

/* "Notif (if on)" (owner 2026-10-05): a floating window styled like the Wordbank (#vocab-panel): same opaque
   glass surface, border, radius, shadow and .lcw-header/.lcw-title header. It grows with its content and stops
   52px above the viewport bottom (the Wordbank's margin) instead of running edge to edge; a click outside it
   hides it (js/08c-notifications.js). */
#notif-modal {
  display: none; position: fixed; top: 52px; right: 8px;
  width: 320px; z-index: 9600;
  max-height: calc(100vh - 104px);
}
#notif-modal.open { display: flex; }
.notif-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--win-radius);
  box-shadow: var(--glass-shadow);
  width: 100%; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.notif-box > .lcw-header { cursor: default; border-bottom-color: var(--line); flex-shrink: 0; }
.notif-box > .lcw-header .fsm-close { justify-self: end; }
.notif-filter-chip { font-size: 10px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--faint); cursor: pointer; white-space: nowrap; transition: background 0.1s, color 0.1s, border-color 0.1s; }
.notif-filter-chip.active { background: rgba(53,116,196,0.12); border-color: rgba(53,116,196,0.3); color: var(--blue); font-weight: 700; }
.notif-filter-chip:hover { border-color: var(--blue); }
#notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex; gap: 10px; padding: 10px 14px; align-items: center;
  border-bottom: 1px solid rgba(175,170,163,0.15);
  transition: background 0.1s; position: relative;
}
.notif-item:hover { background: rgba(255,255,255,0.4); }
.notif-item:hover .notif-dismiss { opacity: 1; }
.notif-read { opacity: 0.55; }
.notif-dismiss {
  opacity: 0; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; color: var(--faint);
  font-size: 12px; padding: 4px 6px; border-radius: 4px; transition: opacity 0.15s;
}
.notif-dismiss:hover { color: var(--txt); background: rgba(0,0,0,0.06); }
.notif-avatar {
  width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.notif-body { display: flex; flex-direction: column; gap: 2px; font-size: 11px; min-width: 0; }
.notif-handle { font-weight: 700; color: var(--blue); }
.notif-msg { color: var(--dim); }
.notif-time { font-size: 10px; color: var(--faint); margin-top: 2px; }

/* Feed cell separator with unify/flip buttons */
.fc-cell-sep-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 0 6px; flex-shrink: 0;
}
.fc-cell-sep-dot {
  font-size: 18px; color: var(--dim); cursor: pointer; line-height: 1;
  padding: 2px 4px; border-radius: 4px; transition: color 0.1s;
  user-select: none;
}
.fc-cell-sep-dot:hover { color: var(--blue); }
.fc-cell-action-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--faint); padding: 6px 10px;
  border-radius: 4px; line-height: 1; transition: color 0.1s, background 0.1s;
}
.fc-cell-action-btn:hover { color: var(--blue); background: rgba(53,116,196,0.08); }


/* ── Wordbank B (second, independently-tuned wordbank) ─────────── */
#wb2-body { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
#wb2-edge-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.wb2-edge-label { font-size: 10px; font-weight: 700; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; }
#wb2-edge {
  flex: 1; font-size: 11px; font-weight: 600; border: none;
  background: transparent; color: var(--dim); cursor: pointer; outline: none;
  font-family: var(--sans);
}
#wb2-cat-row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-bottom: 1px solid var(--line);
  flex-shrink: 0; background: rgba(255,255,255,0.2);
}
#wb2-search { flex: 1; }
#wb2-cat { max-width: 90px; }
#wb2-entry-list { flex: 1; overflow-y: auto; scrollbar-width: thin; }
#wb2-entry-list .entry-card { padding: 4px 10px; font-size: 11px; }
.wb2-suggest-banner {
  padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--blue); background: rgba(53,116,196,0.07);
  border-bottom: 1px solid rgba(53,116,196,0.15);
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.wb2-suggest-banner button {
  border: none; background: transparent; cursor: pointer; font-size: 10px; color: var(--faint);
}
.wb2-suggest-banner button:hover { color: var(--red); }
.wb2-empty { padding: 20px 10px; text-align: center; font-size: 11px; color: var(--faint); }
.wb-reshuffle-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; font-size: 11px; color: var(--faint); padding: 1px 6px;
  line-height: 1.3; transition: color 0.12s, border-color 0.12s;
}
.wb-reshuffle-btn:hover { color: var(--blue); border-color: rgba(53,116,196,0.4); }
.wb-reshuffle-btn:active { transform: scale(0.95); }


/* POTD locked letters  -  golden color + highlight */
.cell-char.potd-locked {
  --potd-gold: #c8960c;
  color: var(--potd-gold) !important;
}
.cell-char.potd-locked {
  background: rgba(200,150,12,0.18);
  border-radius: 2px;
  padding: 0 1px;
  box-shadow: inset 0 -1px 0 rgba(200,150,12,0.5);
}


/* The compose slot itself is styled in css/19-compose.css (owner 2026-09-28). */
.mention-dropdown {
  display: none; position: absolute; bottom: 100%; left: 14px; right: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-height: 160px; overflow-y: auto;
  z-index: 100;
}
.mention-dropdown.open { display: block; }
.mention-item {
  padding: 6px 12px; font-size: 11px; cursor: pointer; color: var(--txt);
}
.mention-item:hover, .mention-item.active { background: rgba(53,116,196,0.12); }
.mention-item .fp-at { color: var(--blue); font-weight: 600; }
.feed-slot-ai-label {
  display: none;  /* hidden until image is selected */
  align-items: center; gap: 4px; cursor: pointer; position: relative;
}
.feed-slot-ai-label.visible { display: flex; }
.feed-slot-ai-tooltip {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  width: 220px; background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); border-radius: 10px;
  padding: 8px 12px; font-size: 10px; color: var(--dim); line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 100;
}
.feed-slot-ai-label:hover .feed-slot-ai-tooltip { opacity: 1; }
/* ── Auth modal ───────────────────────────────────────────────────── */
#auth-modal {
  display: none; position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75); backdrop-filter: none;
}
#auth-modal.open { display: flex; }
.auth-box {
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  padding: 36px 40px 32px; width: 360px; max-width: 92vw;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-align: center;
}
.auth-logo { font-size: 36px; margin-bottom: 14px; line-height: 1; }
.auth-title { font-size: 18px; font-weight: 800; color: var(--txt); margin-bottom: 8px; }
.auth-subtitle { font-size: 12px; color: var(--dim); line-height: 1.6; margin-bottom: 18px; }
#auth-email-input, #auth-handle-input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px; background: rgba(255,255,255,0.6);
  outline: none; color: var(--txt); font-family: var(--sans);
  transition: border-color 0.12s;
  box-sizing: border-box; margin-bottom: 10px;
}
#auth-email-input:focus, #auth-handle-input:focus { border-color: rgba(53,116,196,0.5); }
#auth-send-btn, #auth-handle-btn {
  width: 100%; padding: 11px; border: none; border-radius: 10px;
  background: rgba(53,116,196,0.85); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.12s, transform 0.1s;
}
#auth-send-btn:hover, #auth-handle-btn:hover:not(:disabled) { background: rgba(53,116,196,1); }
#auth-handle-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.auth-error { font-size: 11px; color: var(--red); min-height: 16px; margin-top: 6px; }
.auth-hint  { font-size: 10px; color: var(--faint); margin-top: -4px; margin-bottom: 10px; }
.auth-devhint {
  background: rgba(154,110,24,0.08); border: 1px solid rgba(154,110,24,0.25);
  border-radius: 8px; padding: 8px 12px; font-size: 11px; color: var(--dim);
  line-height: 1.5; margin-top: 8px; text-align: left;
}
.auth-handle-wrap { display: flex; align-items: center; gap: 0; width: 100%; }
.auth-at { font-size: 14px; font-weight: 700; color: var(--blue); padding: 0 4px 0 2px; }
.auth-handle-wrap input { flex: 1; margin-bottom: 0; }

#feed-settings-modal {
  display: none; position: fixed; inset: 0;
  z-index: 9500; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.22); backdrop-filter: none;
}
#feed-settings-modal.open { display: flex; }
.fsm-box {
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  padding: 24px 28px; width: 340px;
  display: flex; flex-direction: column; gap: 0;
}
.fsm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fsm-title { font-size: 15px; font-weight: 800; color: var(--txt); }
.fsm-close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: var(--faint); padding: 2px 6px; border-radius: 4px; }
.fsm-close:hover { color: var(--txt); background: rgba(0,0,0,0.06); }
.fsm-section { margin-bottom: 16px; }
.fsm-section-title { font-size: 10px; font-weight: 700; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.fsm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid rgba(175,170,163,0.15);
  font-size: 12px; font-weight: 600; color: var(--dim); cursor: pointer;
}
.fsm-row input[type=checkbox] { accent-color: var(--blue); width: 14px; height: 14px; flex-shrink: 0; }
.fsm-row select { margin-left: auto; border: 1px solid var(--line); border-radius: 4px; background: transparent; font-size: 11px; padding: 2px 4px; color: var(--txt); }
.fsm-row span { flex: 1; }

/* Compact feed mode */
.feed-compact .feed-post { margin-bottom: 4px; }
.feed-compact .fp-avatar-wrap { width: 54px; height: 54px; }
.feed-compact .fp-avatar { width: 38px; height: 38px; font-size: 14px; }
.feed-compact .fp-header { padding-left: 36px; }
.feed-compact .fp-palindrome { font-size: 12px; padding: 6px 14px 5px 36px; }
.feed-compact .fp-sig { display: none; }
.feed-compact .fp-reactions { padding: 3px 14px 4px 36px; }
.feed-compact .fp-actions { padding-top: 3px; padding-bottom: 6px; }

/* ── Caption/note under post palindrome ── */
.fp-note {
  padding: 0 14px 8px 58px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
  font-style: italic;
}
.fp-tag {
  color: var(--accent);
  cursor: pointer;
  font-style: normal;
  font-weight: 600;
}
.fp-tag:hover { text-decoration: underline; }
.fp-mention {
  color: var(--accent);
  cursor: pointer;
  font-style: normal;
}
.fp-mention:hover { text-decoration: underline; }
.fp-tags {
  padding: 0 14px 6px 58px;
  font-size: 11px;
}
.fp-tag-chip {
  display: inline-block;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 8px;
  margin-right: 4px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  font-size: 10px;
}
.fp-tag-chip:hover { background: var(--accent); color: var(--bg); }

/* AI badge corner */
.fp-ai-badge {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 10px; font-weight: 700;
  color: var(--faint);
  opacity: 0.55;
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
}
/* Image display */
.fp-image-wrap { padding: 0 14px 8px 58px; min-height: 80px; }
.fp-image { width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; display: block; opacity: 0; transition: opacity 0.3s ease-in; aspect-ratio: 16/9; }
.fp-image.loaded { opacity: 1; aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) {
  .fp-image, .feed-post, .fp-velocity-hot, [style*="animation"] { animation: none !important; transition: none !important; }
  .fp-image { opacity: 1; }
}
.fp-image-hidden {
  margin: 0 14px 8px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  transition: background 0.12s;
}
.fp-image-hidden:hover { background: rgba(255,255,255,0.45); }
/* Compose card image/AI controls */
.fcc-attach-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px 0 58px;
  font-size: 11px; color: var(--dim);
}
.fcc-attach-row label { cursor: pointer; display: flex; align-items: center; gap: 5px; }
.fcc-attach-row input[type=checkbox] { accent-color: var(--blue); }

/* ── Header Feed toggle button ── */
#btn-feed-header {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(175,170,163,0.40);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font-weight: 700;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#btn-feed-header:hover { background: rgba(255,255,255,0.6); color: var(--txt); }
#btn-feed-header.active {
  background: rgba(53,116,196,0.10);
  border-color: rgba(53,116,196,0.35);
  color: var(--blue);
}

/* Reaction picker popup */

/* ── Stale @handle rendering (Phase 2) ─────────────────────────────── */
/* Applied when a @handle in post text is no longer the user's current handle */
.stale-mention {
  color: var(--red, #b83030);
  font-weight: 600;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
/* Active @handle link in post text */
.mention-link {
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.mention-link:hover {
  text-decoration: underline;
}

/* ── Post's OP badge (Phase 3) ─────────────────────────────────────── */
.fp-op-badge {
  display: inline; font: inherit; font-size: 10px; font-weight: 400; margin-right: 5px;
  line-height: 1.3; letter-spacing: .02em; color: var(--fp-quiet, var(--faint));
  padding: 0; border: 0; background: none; border-radius: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.12s;
}
.fp-op-badge:hover { color: var(--blue); text-decoration: underline; }

/* ── @mention dropdown (Phase 3) ──────────────────────────────────── */
.mention-item:hover,
.mention-item-selected {
  background: rgba(255,255,255,0.18);
}

/* ── Phase 4: Tiara button ──────────────────────────────────────────── */
.fp-tiara-btn {
  font-size: 13px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  color: var(--dim);
  transition: color 0.12s, background 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.fp-tiara-btn:hover {
  background: rgba(200,150,12,0.1);
  border-color: rgba(200,150,12,0.4);
  color: #c8960c;
}
.fp-tiara-count {
  font-size: 10px;
  font-weight: 700;
  color: #c8960c;
}

/* ── Phase 4j: Letter hover highlight ──────────────────────────────── */
/* cursor: text (owner 2026-09-29): the letters used the default arrow while the gaps between them showed the
   text cursor, so moving across a post flickered between the two. Linked words keep their own pointer. */
.fp-letter { display: inline; cursor: text; border-radius: 2px; }
.fp-word-link .fp-letter { cursor: inherit; }
.fp-letter-hi {
  background: rgba(53,116,196,0.22);
  color: var(--blue);
  border-radius: 2px;
}
/* Selection mirror-highlight (owner 2026-09-27): the selected run reads as the native selection; its
   MIRROR run gets a distinct amber tint so the two are never confused. Overlap (center-crossing) shows
   the selected fill plus an amber outline. The selected run itself keeps the browser's native selection
   colour, so .fp-sel-self needs no fill; it exists only so overlap can be detected. */
.fp-sel-mirror {
  background: rgba(201,138,18,0.28);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201,138,18,0.55);
}
.fp-sel-self.fp-sel-mirror { box-shadow: inset 0 0 0 1px rgba(201,138,18,0.7); }

/* ── Phase 4g: Mural Alarum ─────────────────────────────────────────── */
.feed-mural-alarum {
  padding: 10px 14px;
  background: rgba(200,150,12,0.08);
  border: 1px solid rgba(200,150,12,0.28);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  flex-shrink: 0;
}
.feed-mural-label {
  font-weight: 800;
  color: #c8960c;
  margin-right: 6px;
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
}
.feed-mural-text {
  font-family: var(--mono);
  color: var(--txt);
}

/* ── Phase 4h: Nib's bin hover ──────────────────────────────────────── */
.tb-trash-hover {
  background: rgba(184,48,48,0.15) !important;
  border-color: rgba(184,48,48,0.5) !important;
  color: var(--red, #b83030) !important;
  transform: scale(1.15);
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}

/* ── Phase 5c: Mod bar (Set a Yates) ──────────────────────────────── */
.fp-mod-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px 12px 6px;
  border-top: 1px solid rgba(200,150,12,0.20);
  background: rgba(200,150,12,0.04);
}
.fp-mod-reward-btn {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(200,150,12,0.35);
  border-radius: 10px;
  background: transparent;
  color: #c8960c;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.1s;
}
.fp-mod-reward-btn:hover { background: rgba(200,150,12,0.12); }
.fp-rewards-display { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0 2px; }
.fp-reward-tag {
  font-size: 10px; padding: 2px 9px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(200,150,12,0.12), rgba(180,120,20,0.08));
  border: 1px solid rgba(200,150,12,0.3); color: #c8960c;
  font-weight: 700; letter-spacing: 0.02em;
}
.fp-mod-del-btn {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(184,48,48,0.35);
  border-radius: 10px;
  background: transparent;
  color: var(--red, #b83030);
  cursor: pointer;
  font-weight: 600;
  margin-left: auto;
  transition: background 0.1s;
}
.fp-mod-del-btn:hover { background: rgba(184,48,48,0.1); }

/* ── Phase 9: Feed sidebar ──────────────────────────────────────────── */
#feed-panel.active {
  flex-direction: row;
  overflow: hidden;
}
#feed-sidebar {
  width: 160px;
  min-width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 6px;
  border-right: 1px solid var(--line);
  background: var(--glass-bg);
  overflow-y: auto;
  scrollbar-width: none;
}
/* Owner 2026-09-20: the "Space caps" header sits flush at the top of the menu (full-bleed, same bg,
   bottom border) like the Wordbank header, instead of reading as a detached box inset in the panel. */
#feed-sidebar > .lcw-header {
  position: static;
  margin: -8px -8px 4px;
  padding: 9px 13px;   /* the same header as the other panels, so collapsing never changes its height */
  background: var(--glass-bg);
  border-bottom: 1px solid var(--line);
}
/* Fixed left column in feed mode (owner 2026-09-27): "Space caps" is sized to its content (no empty lower
   half) and the relocated Mojo M panel stacks UNDER it as a sibling. The stack itself is click-through so
   the empty strip below the panels never swallows clicks. */
#feed-panel.active #feed-left-stack {
  position: fixed;
  left: 8px; top: 52px; bottom: 52px;
  width: 284px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#feed-panel.active #feed-left-stack > * { pointer-events: auto; }
/* Mojo M takes all the height Space caps leaves (owner 2026-09-29): collapse Space caps and it grows. */
#feed-panel.active #feed-left-stack > #mojo-panel { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; }
#feed-panel.active #feed-left-stack > #mojo-panel.open { flex: 1 1 0; min-height: 140px; }   /* basis 0: leftovers only, never squeezes Space caps */
#feed-panel.active #feed-left-stack > #mojo-panel.open .lcw-body { max-height: none; flex: 1 1 auto; min-height: 0; }
#feed-panel.active #feed-sidebar {
  position: static;
  flex: 0 1 auto;
  min-height: 0;
  width: 284px; min-width: 284px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--win-radius);
  box-shadow: var(--glass-shadow);
  padding: 8px 8px;
  box-sizing: border-box;
  overflow-y: auto;
}
#feed-sidebar.collapsed > *:not(.lcw-header) { display: none; }
#feed-sidebar.collapsed { padding: 0; }
/* Collapsed Space caps keeps its full header (owner 2026-09-29): it used to shrink to a thin line, because
   the open state's negative margins pulled the header out of a panel that no longer had padding. */
#feed-sidebar.collapsed > .lcw-header { margin: 0; border-bottom-color: transparent; }
#feed-panel.active #feed-sidebar.collapsed { flex-shrink: 0; }
#feed-panel.active #feed-sidebar.collapsed { width: 284px; min-width: 284px; padding: 0; bottom: auto; }
body.feed-active #left-col > .left-col-win { display: none !important; }
body.feed-active #subtab-bar { display: none !important; }
body.feed-active #working-spaces-bar { display: none !important; }
#feed-sidebar::-webkit-scrollbar { display: none; }
#feed-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.fsd-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 8px 4px;
  white-space: nowrap;
}
.fsd-section-label:first-child { padding-top: 4px; }
.fsd-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  min-height: 28px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsd-item:hover { background: rgba(255,255,255,0.14); color: var(--txt); }
/* The sidebar is a fixed-height flex column: an item must never shrink below its content, or a two-line one
   ("Garden / One Drag") overlaps the next (owner 2026-10-05). The list scrolls instead. */
#feed-sidebar > .fsd-item { flex-shrink: 0; }
.fsd-item.active {
  background: rgba(53,116,196,0.12);
  color: var(--blue);
  font-weight: 700;
}
.fsd-item.has-unread::after, .feed-tab.has-unread::after, .feed-float-tab.has-unread::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.fsd-item, .feed-tab, .feed-float-tab { position: relative; }
/* Feed panel fills vertically in feed view */
#feed-panel.active { display: flex; }
/* (Narrow widths, owner 2026-10-05: the sidebar is no longer hidden below 540px, which left phones with no way to
    reach the social spaces; it becomes a slide-in drawer instead, css/10-responsive.css.) */
/* Two-column feed list on wide screens (owner 2026-09-26). The left list of feeds packs its .fsd-item
   buttons two-per-row when the viewport is wide enough to warrant it; section labels, the header and the
   dynamic sections (online/trending/activity/friends/contributors) span the full width. Narrow viewports
   (and the collapsed sidebar) keep the single-column flex layout above. */
@media (min-width: 1000px) {
  /* Two columns WITHIN the existing 284px width (no width change -> the main column's offset is unchanged,
     so the sidebar never overlaps the feed/profile area). */
  #feed-panel.active #feed-sidebar:not(.collapsed) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 1px 3px;
  }
  #feed-panel.active #feed-sidebar:not(.collapsed) > .lcw-header,
  #feed-panel.active #feed-sidebar:not(.collapsed) > .fsd-section-label,
  #feed-panel.active #feed-sidebar:not(.collapsed) > div[id^="fsd-"] {
    grid-column: 1 / -1;
  }
}

/* Self-title ("Sail alias:") shown under the display name on post cards. */
.fp-user-title {
  font-size: 10px; font-weight: 600; color: var(--faint);
  font-style: italic; margin-left: 4px;
}

/* ── Phase 8: Rap Spar modal ────────────────────────────────────────── */
.rap-timer-btn {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  font-family: var(--mono);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.rap-timer-btn:hover { background: rgba(255,255,255,0.14); }
.rap-timer-btn.active {
  background: rgba(53,116,196,0.12);
  border-color: rgba(53,116,196,0.5);
  color: var(--blue);
}
.rap-target-item {
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--txt);
  cursor: pointer;
  transition: background 0.08s;
}
.rap-target-item:hover { background: rgba(255,255,255,0.18); }

/* ── Post type label in card header ─────────────────────────────────── */
.fp-type-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(53,116,196,0.10);
  border: 1px solid rgba(53,116,196,0.25);
  color: var(--blue);
  vertical-align: middle;
  white-space: nowrap;
  margin-right: 2px;
}

/* ── Phase 8: Rap battle card ───────────────────────────────────────── */
.rap-battle-card {
  border: 1px solid rgba(88,72,160,0.35);
  /* inherits glass-bg from .feed-post -- no extra tint */
}
/* "@<challenger>: Paraded a rap!" over an accepted rap still waiting for its first response (owner 2026-10-05) */
.rap-paraded { padding: 8px 14px 0; font-size: 12px; font-weight: 700; color: var(--dim); }
.rap-paraded .rap-handle { color: var(--amber); }
/* Rap card header: participants flank the "Versus rev." label, all centered */
.rap-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(88,72,160,0.18);
}
.rap-participant {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.rap-avatar {
  width: 30px; height: 30px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.rap-handle {
  font-size: 11px; font-weight: 700;
  font-family: var(--mono); color: var(--txt);
}
.rap-versus {
  font-size: 10px; font-weight: 800;
  color: var(--faint); letter-spacing: 0.06em;
  flex-shrink: 0;
  padding: 0 4px;
}
.rap-round-indicator {
  padding: 5px 14px;
  font-size: 10px; font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05em;
}
.rap-conclusion {
  padding: 7px 14px;
  font-size: 12px; font-weight: 700;
  color: var(--txt);
  text-align: center;
  background: rgba(88,72,160,0.08);
}
.rap-disses { padding: 4px 0; }
/* Round section */
.rap-round-section {
  border: 1px solid rgba(88,72,160,0.22);
  border-radius: 10px;
  margin: 6px 8px;
  overflow: hidden;
}
.rap-round-title {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--faint);
  padding: 6px 12px 3px;
  border-bottom: 1px solid rgba(88,72,160,0.12);
}
/* Diss rows: left = challenger, right = challenged */
.rap-diss-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(88,72,160,0.07);
  position: relative;
}
.rap-diss-row:last-child { border-bottom: none; }
.rap-diss-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  width: 60px;
}
.rap-diss-identity .rap-handle {
  font-size: 9px;
  text-align: center;
  color: var(--faint);
  word-break: break-all;
  white-space: normal;
}
/* Display name inside diss identity columns -- never truncated */
.rap-display-name {
  font-size: 9px; font-weight: 700;
  color: var(--txt);
  text-align: center;
  word-break: break-word;
  white-space: normal;
}
/* Header participant name+handle meta block -- never truncated */
.rap-participant-meta {
  display: flex; flex-direction: column; gap: 1px;
}
.rap-participant-meta .rap-display-name {
  font-size: 11px; text-align: left;
  word-break: break-word; white-space: normal;
}
.rap-participant-meta .rap-handle { font-size: 10px; color: var(--faint); white-space: normal; }
/* Diss reaction row -- mirrors fp-reactions */
.rap-diss-rx {
  margin-top: 5px;
  display: flex; flex-wrap: wrap; gap: 3px;
  min-height: 0;
}

/* Subcomment section */
.rap-sc-bar {
  padding: 5px 12px;
  border-top: 1px solid rgba(88,72,160,0.15);
}
.rap-sc-toggle {
  background: transparent; border: none; cursor: pointer;
  font-size: 11px; color: var(--faint);
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 6px;
  transition: color 0.1s, background 0.1s;
}
.rap-sc-toggle:hover { color: var(--txt); background: rgba(88,72,160,0.08); }
.rap-sc-toggle.open { color: var(--blue); }
.rap-sc-list {
  border-top: 1px solid rgba(88,72,160,0.10);
  padding: 4px 0;
}
.rap-sc-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 12px;
}
.rap-sc-avatar {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.rap-sc-body { flex: 1; min-width: 0; }
.rap-sc-handle {
  font-size: 11px; font-weight: 700;
  font-family: var(--mono); color: var(--txt); margin-right: 5px;
}
.rap-sc-time { font-size: 10px; color: var(--faint); }
.rap-sc-text { font-size: 12px; color: var(--txt); margin-top: 2px; }
.rap-sc-compose {
  display: flex; gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid rgba(88,72,160,0.10);
  margin-top: 2px;
}
.rap-sc-input {
  flex: 1; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg2); color: var(--txt);
  font-size: 12px; padding: 5px 10px; outline: none;
}
.rap-sc-input:focus { border-color: rgba(88,72,160,0.5); }
.rap-sc-post-btn {
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid rgba(88,72,160,0.4);
  background: rgba(88,72,160,0.1); color: var(--txt);
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.rap-sc-post-btn:hover { background: rgba(88,72,160,0.2); }
.rap-diss-text {
  font-family: var(--mono); font-size: 12px;
  color: var(--txt); line-height: 1.5;
  margin-bottom: 4px;
}
.rap-diss-text-right { text-align: right; }
.rap-vote-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.rap-vote-btn {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.rap-ko { color: #c8960c; border-color: rgba(200,150,12,0.35); }
.rap-ko:hover { background: rgba(200,150,12,0.12); }
.rap-ok { color: var(--dim); }
.rap-ok:hover { background: rgba(255,255,255,0.12); }
.rap-vote-count { font-size: 10px; font-weight: 600; }
.rap-see-refs {
  font-size: 10px; color: var(--faint);
  cursor: pointer; text-decoration: underline dotted;
  margin-left: auto;
}

/* ── Phase 10: Collab live card ─────────────────────────────────────── */
.collab-live-card {
  border: 1px solid rgba(46,122,80,0.35);
  background: rgba(46,122,80,0.04);
}
.collab-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2e7a50;
  animation: collab-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes collab-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

/* ── Phase 4b: Poll lop ─────────────────────────────────────────────── */
.fp-poll-options {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fp-poll-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  color: var(--txt);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
  font-family: var(--sans);
}
.fp-poll-btn:hover { background: rgba(53,116,196,0.08); border-color: rgba(53,116,196,0.35); }
.fp-poll-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  margin-left: 12px;
  flex-shrink: 0;
}

/* ── Phase 4f: Lob Obol card ────────────────────────────────────────── */
.lob-card {
  border: 1px solid rgba(122,48,112,0.3);
  background: rgba(122,48,112,0.04);
}
/* Ex-Must-Use red tint: entries that had Must Use stripped via shelf click */
.suggest-item.ex-must-use {
  background: rgba(200, 60, 50, 0.10) !important;
  border-left: 3px solid rgba(200, 60, 50, 0.6);
}
.suggest-item.ex-must-use .si-left,
.suggest-item.ex-must-use .si-right { color: rgba(220, 130, 120, 0.95); }
/* Must Use POSITIVE green tint: entries currently in the Must Use category that
   appear in the Wordbank as a matching suggestion. Lighter than the green used
   for the connect-button so it reads as "background tint" not "active state".
   Applied to both .suggest-item (suggest-mode list) and .entry-card (default
   wordbank list). Sorted to the top of the list unless Mess'em is active. */
/* Must Use rows: marked by the wash only. The 3px left-edge bar was removed (owner 2026-09-29: an entry's left
   edge must look exactly like its right edge). */
.suggest-item.mu-active,
.entry-card.mu-active {
  background: rgba(58, 122, 74, 0.08) !important;
}

/* Definition hover popup (2s delay) */
#def-hover-popup {
  position: fixed;
  display: none;
  max-width: 320px;
  padding: 8px 12px;
  background: var(--bg2, #1e1e1e);
  color: var(--txt, #e8e8e8);
  border: 1px solid var(--line, #444);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Compose-cell right-click menu (Split a connected cell back into two, owner 2026-09-27). */
.fcc-ctx-menu {
  position: fixed;
  z-index: 3000;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  padding: 4px;
  min-width: 120px;
}
.fcc-ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--txt);
  font-size: 12px;
  cursor: pointer;
}
.fcc-ctx-item:hover { background: var(--accent); color: #fff; }

/* Global avatars (owner 2026-09-27): _palApplyAvatar (js/10e-utils-tabs.js) sets the image as a background and
   adds this class so the initials text (kept for fallback + screen readers) is not painted over the image. */
.pal-av-img { color: transparent !important; }

/* A connected Segment (js/09c-feed-compose-ui.js _feedCellJoin, owner 2026-09-29) is one field spanning the cell. */
.fc-cell > .fc-connected { grid-column: 1 / -1; min-width: 0; text-align: center; }   /* centres the inline [spot][field][spot] run (css/06) */
/* With the Segment grips (js/03g-seg-shell.js) at both far edges: two equal outer columns, so the middle stays centred. */
.fc-cell.has-grip { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.fc-cell.has-grip > .fc-connected { grid-column: 2 / -2; }
.fc-cell > .fc-connected .cell-connected-field { text-align: center; font: inherit; line-height: 1.6; }

/* Reaction picker (owner 2026-09-30): one rectangular grid, 10 across, ordered by similarity (js/08b
   FEED_REACTION_GROUPS); "Tiara it!" (moderators) sits in its own row under it. */
#feed-rx-picker .rx-picker-grid { display: grid; grid-template-columns: repeat(10, 36px); gap: 2px; justify-content: center; width: 100%; }
#feed-rx-picker .rx-picker-row.rx-picker-tiara { display: flex; justify-content: center; width: 100%; border-top: 1px solid var(--line); margin-top: 3px; padding-top: 3px; }

/* ── Storage slots (owner 2026-09-30, js/04g-seg-slots.js) ──────────────
   Five parking places at the LEFT of both bottom bars, mirroring the Nibs Bin on the Studio bar's right. An empty
   slot is a faint tray with an arrow dropping in; a full one holds a small Segment chip with its two centre dots
   (merged when connected) on the tray (owner 2026-10-03: a wordless "store it here"). */
.seg-slots {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.seg-slot {
  width: 30px; height: 30px; padding: 0; border-radius: 9px; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--faint) 60%, transparent); background: transparent;
  color: var(--faint); transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.seg-slot .seg-slot-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.seg-slot.filled { cursor: pointer; border-style: solid; border-color: color-mix(in srgb, var(--theme) 55%, var(--line)); background: color-mix(in srgb, var(--theme) 8%, transparent); color: var(--theme); }
.seg-slot.filled .seg-slot-ico { opacity: 1; }
.seg-slot.filled .seg-slot-ico .dot { fill: currentColor; stroke: none; }
.seg-slot.filled:hover { transform: scale(1.1); }
.seg-slot.seg-slot-over { border-style: solid; border-color: var(--theme); background: color-mix(in srgb, var(--theme) 14%, transparent); transform: scale(1.12); }
/* Hover popup: the stored palindrome as plain text around the two centre dots. Nothing in it is clickable. */
#seg-slot-pop {
  position: fixed; z-index: 9800; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 16px));
  padding: 8px 14px; border-radius: 12px; font-size: 14px; color: var(--txt);
  background: var(--card); border: 1px solid var(--glass-border); box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
#seg-slot-pop .sl, #seg-slot-ghost .sl { text-align: right; overflow-wrap: anywhere; }
#seg-slot-pop .sr, #seg-slot-ghost .sr { text-align: left; overflow-wrap: anywhere; }
.slot-dots { position: relative; display: inline-block; width: 16px; height: 6px; flex-shrink: 0; }
.slot-dots i { position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--cdot-rest, #bbb); }
.slot-dots i:first-child { left: 0; }
.slot-dots i:last-child { right: 0; }
.slot-dots.merged i { left: 5px; right: auto; background: var(--green, #3a7050); }
/* Ghost of the palindrome over the writing box it would go into (hover), the box's own text faded under it. */
#seg-slot-ghost {
  position: fixed; z-index: 9700; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; color: var(--theme); opacity: 0.85;
  border: 2px dashed color-mix(in srgb, var(--theme) 55%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.slot-previewing > * { opacity: 0.25; }
/* The box a slot just filled flashes once. */
@keyframes slot-landed-glow { 0% { box-shadow: 0 0 0 0 transparent; } 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.slot-landed { animation: slot-landed-glow 0.9s ease-out 1; }
/* (The writing boxes' grip is now the shared Segment grip inside the box: .seg-grip, css/09-segments.css.) */

/* ── Thread view (owner 2026-10-02; js/10i-thread-view.js) ─────────────────────────────────────────────────────
   The central area shows one post with its whole thread; the feed's own bars step aside and "← Back cab" sits at
   the top left, always in reach while scrolling the thread. */
body.thread-view #feed-tabs,
body.thread-view #feed-time-bar,
body.thread-view #feed-sort-bar,
body.thread-view #feed-float-tabs { display: none !important; }
.thread-back-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-start; padding: 6px 0 8px; }
.thread-back-btn {
  background: rgba(0,0,0,0.42); border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #fff;
  padding: 6px 14px; border-radius: 999px; transition: background 0.12s;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.thread-back-btn:hover { background: rgba(0,0,0,0.62); }
.fp-reply-item.thread-focus { outline: 2px solid var(--theme); outline-offset: 2px; border-radius: 12px; }
/* A post's "#number" is a link to its address: keep the quiet number look. */
a.fp-postnum { color: inherit; text-decoration: none; }
a.fp-postnum:hover { text-decoration: underline; }

/* ── "Notif, if on" (owner 2026-10-02): each notification as a one-line mini post (avatar, name, @handle, text cut
   off with an ellipsis so the row never grows). ───────────────────────────────────────────────────────────── */
.notif-item.notif-post { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0; }
.notif-item.notif-post .notif-body { flex: 1; min-width: 0; }
.notif-item.notif-post .notif-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.notif-item.notif-post .notif-name { font-weight: 700; font-size: 12px; color: var(--txt); overflow: hidden; text-overflow: ellipsis; }
.notif-item.notif-post .notif-handle { font-size: 11px; color: var(--faint); font-weight: 500; }
.notif-item.notif-post .notif-msg { display: block; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Match the reaction trigger's hover feedback (owner 2026-10-06). */
:is(.fp-bust-sub, .fp-repost-icon, .fp-options-btn) { transition: transform 0.15s, color 0.12s; }
:is(.fp-bust-sub, .fp-repost-icon, .fp-options-btn):hover { transform: scale(1.15); }

/* Quoted post: its Replies / Repush / reaction / options buttons grow on hover like the post's own (owner 2026-10-06). */
.fp-quote-actions .fp-action-btn { transition: transform 0.15s, color 0.12s, opacity 0.12s; }
.fp-quote-actions .fp-action-btn:not([disabled]):hover { transform: scale(1.15); }