* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
[hidden] { display: none !important; }
body {
min-height: 100vh;
background: #0b0b0f;
color: #f7f4ff;
font-family: var(--font-ui);
}
.lb-feed-page {
min-height: 100vh;
position: relative;
overflow-x: hidden;
padding: 12px;
}
.lb-feed-page__stars {
position: fixed;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(1px 1px at 16% 20%, rgba(255,255,255,.34), transparent),
radial-gradient(1px 1px at 76% 18%, rgba(255,255,255,.28), transparent),
radial-gradient(1.2px 1.2px at 82% 74%, rgba(255,255,255,.2), transparent),
radial-gradient(1px 1px at 26% 76%, rgba(255,255,255,.22), transparent);
opacity: .4;
}
.lb-feed-page__glow {
position: fixed;
pointer-events: none;
filter: blur(1px);
}
.lb-feed-page__glow--pink {
width: min(68vw, 540px);
height: min(48vw, 360px);
left: -8%;
top: 18%;
background: radial-gradient(circle, rgba(255,79,191,.14), transparent 74%);
}
.lb-feed-page__glow--blue {
width: min(62vw, 500px);
height: min(46vw, 340px);
right: -6%;
bottom: 18%;
background: radial-gradient(circle, rgba(79,102,255,.12), transparent 74%);
}
.lb-feed-shell {
position: relative;
z-index: 1;
width: 100%;
max-width: 680px;
margin: 0 auto;
display: grid;
gap: 14px;
padding-bottom: 24px;
}
.lb-feed-shell > * {
min-width: 0;
}
.lb-thread-view {
position: fixed;
inset: 0;
z-index: 40;
padding: 12px;
background:
radial-gradient(circle at 18% 14%, rgba(255,79,191,.12), transparent 52%),
radial-gradient(circle at 84% 18%, rgba(79,102,255,.12), transparent 48%),
rgba(8,11,20,.92);
}
.lb-thread-view__shell {
position: relative;
z-index: 1;
width: 100%;
max-width: 680px;
margin: 0 auto;
height: calc(100dvh - 24px);
border-radius: 18px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(9,13,23,.9);
box-shadow: 0 16px 38px rgba(5,8,15,.6), 0 0 18px rgba(79,102,255,.16);
backdrop-filter: blur(14px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
}
.lb-thread-view__topbar {
min-height: 56px;
padding: 8px 10px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(255,255,255,.1);
background: rgba(8,12,22,.86);
}
.lb-thread-view__back {
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.94);
font-size: 20px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-thread-view__back:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.46);
box-shadow: 0 0 10px rgba(0,224,211,.18), 0 0 8px rgba(79,102,255,.14);
}
.lb-thread-view__back:focus-visible,
.lb-thread-comment__action:focus-visible,
.lb-thread-comment__menuBtn:focus-visible,
.lb-thread-comment__menuItem:focus-visible,
.lb-thread-compose__toolBtn:focus-visible,
.lb-thread-compose__submit:focus-visible,
.lb-thread-compose__cancelReply:focus-visible,
.lb-thread-compose__remove:focus-visible,
.lb-thread-compose__field textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-thread-view__title {
margin: 0;
justify-self: center;
color: rgba(247,244,255,.98);
font: 700 20px/1.2 var(--font-display);
letter-spacing: -.01em;
}
.lb-thread-view__spacer {
width: 36px;
height: 1px;
}
.lb-thread-view__content {
min-height: 0;
overflow-y: auto;
display: grid;
gap: 12px;
padding: 12px;
}
.lb-thread-view__postWrap .lb-post-card {
margin-top: 0;
}
.lb-thread-view__postWrap .lb-post-card :is(button, a) {
pointer-events: none;
}
.lb-thread-view__postWrap .lb-tea-card {
margin-top: 0;
}
.lb-thread-view__postWrap .lb-tea-card :is(button, a) {
pointer-events: none;
}
.lb-thread-view__postWrap .lb-tea-card .lb-post-card__bodyWrap {
grid-template-columns: minmax(0, 1fr) 34px;
align-items: start;
}
.lb-thread-view__postWrap .lb-tea-card .lb-post-card__contentCol,
.lb-thread-view__postWrap .lb-tea-card .lb-tea-card__media {
min-height: 0;
}
.lb-thread-view__postWrap .lb-tea-card .lb-tea-card__media img {
display: block;
}
/* Exactly two images: explicitly restore the two-column grid contract here
rather than assuming it survives from the base rule inside this scope.
One-image Ghost detail behavior is untouched by this rule. */
.lb-thread-view__postWrap .lb-tea-card .lb-tea-card__media:has(> img:first-child:nth-last-child(2)) {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.lb-thread-view__postWrap .lb-tea-card .lb-tea-card__media:has(> img:first-child:nth-last-child(2)) img {
aspect-ratio: 1 / 1;
height: 100%;
object-fit: cover;
display: block;
}
.lb-thread-comments {
display: grid;
gap: 10px;
}
.lb-thread-comments__title {
margin: 0;
color: rgba(247,244,255,.98);
font: 700 18px/1.2 var(--font-display);
}
.lb-thread-comments__empty {
margin: 0;
color: rgba(247,244,255,.68);
font-size: 13px;
}
.lb-thread-comments__list {
display: grid;
gap: 10px;
}
.lb-thread-comment {
border-radius: 14px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(11,16,27,.84);
padding: 10px;
display: grid;
gap: 9px;
}
/* Feed-only correction: the legacy semi-transparent rgba(11,16,27,.84) above
sits over .lb-thread-view's own translucent pink/blue radial-gradient
layers, and the composite reads greenish/teal on real devices even though
the raw value alone looks like a plain dark navy. Swapping to the exact
opaque token the redesigned card system already uses (.lb-post-card:
#0F1119 / rgba(255,255,255,.07), also the single card-border value
confirmed across the V6/V9–V13 visual-architecture audit) removes that
composited tint instead of trying to re-tune another rgba guess. Scoped
under --v2 (see createThreadCommentMarkup) because profile.css carries an
identical bare .lb-thread-comment rule at equal specificity — without
this marker, whichever stylesheet loads last on a given page would win,
and Own Profile / Public Profile must keep their existing background. */
.lb-thread-comment.lb-thread-comment--v2 {
background: #0F1119;
border-color: rgba(255,255,255,.07);
}
.lb-thread-comment--deleted {
border-color: rgba(247,244,255,.07);
background: rgba(11,16,27,.42);
}
.lb-thread-comment--deleted.lb-thread-comment--v2 {
background: rgba(15,17,25,.42);
}
.lb-thread-comment--deleted > .lb-thread-comment__row {
opacity: .72;
}
.lb-thread-comment__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
align-items: start;
}
.lb-thread-comment__body {
min-width: 0;
}
/* Comment/reply avatar ring normalized (2026-08-31) to the one canonical
Loverbyte ring — .lb-post-card__avatar::before's masked gradient, no teal
— per the avatar-ring dependency contract. Previously a flat teal
box-shadow, independently drifted from profile.css's own copy of this
same rule; both now converge on the identical technique/values. */
.lb-thread-comment__avatar {
position: relative;
width: 36px;
height: 36px;
border-radius: 999px;
flex: 0 0 auto;
background:
radial-gradient(circle at 50% 30%, rgba(247,244,255,.9) 0 18%, transparent 19%),
radial-gradient(circle at 50% 78%, rgba(247,244,255,.9) 0 30%, transparent 31%),
linear-gradient(140deg, rgba(255,79,191,.58), rgba(79,102,255,.58));
}
.lb-thread-comment__avatar::before {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
padding: 2px;
background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.lb-thread-comment--deleted .lb-thread-comment__avatar {
opacity: .45;
filter: grayscale(.35);
}
.lb-thread-comment--reply .lb-thread-comment__avatar {
width: 30px;
height: 30px;
}
.lb-thread-comment__meta {
margin: 0;
color: rgba(247,244,255,.78);
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.lb-thread-comment__meta .lb-author-snapshot {
margin-top: 0;
}
.lb-thread-comment__user {
color: rgba(247,244,255,.96);
font-weight: 700;
}
.lb-thread-comment--deleted .lb-thread-comment__user,
.lb-thread-comment--deleted .lb-thread-comment__time,
.lb-thread-comment--deleted .lb-thread-comment__text {
color: rgba(247,244,255,.48);
}
.lb-thread-comment__dot {
color: rgba(247,244,255,.42);
}
.lb-thread-comment__time {
color: rgba(247,244,255,.6);
}
.lb-thread-comment__text {
margin: 4px 0 0;
/* User-authored content copy is canonical primary white everywhere
(2026-08-31) -- same #FFFFFF as .lb-post-card__body, the known-good
reference. Metadata siblings (__meta/__user/__dot/__time) keep their
own muted values; this rule is content only. */
color: #FFFFFF;
font-size: 16px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.lb-thread-comment__replyAttr {
margin: 3px 0 0;
font-size: 11px;
font-weight: 400;
color: rgba(247,244,255,.44);
letter-spacing: .01em;
}
.lb-thread-comment__replyAttrHandle {
/* Founder correction: was teal (a leftover from the old comment design).
Soft lavender keeps it distinct from ordinary content without borrowing
the pink/blue/teal vocabulary already used for action state. */
color: #D6D0FF;
font-weight: 500;
}
.lb-thread-comment__image {
width: min(220px, 100%);
border-radius: 10px;
border: 1px solid rgba(255,255,255,.12);
object-fit: cover;
display: block;
margin-top: 6px;
cursor: zoom-in;
}
.lb-thread-comment__media {
margin-top: 8px;
}
.lb-thread-comment__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
/* Balances the head row: identity (meta) stays left-weighted, Crushes
status + menu sit together on the right instead of crowding the handle
line — .lb-thread-comment__head's existing space-between already pushes
this to the far edge, no margin-left:auto needed here. */
.lb-thread-comment__headRight {
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
.lb-thread-comment__menuWrap {
position: relative;
align-self: flex-start;
}
/* Compact dot-separated snapshot line, reused as-is from the Byte card's own
identity block (.lb-post-card__snapshotLine / __snapshotChip already carry
the pink/purple/blue dot coloring) — only the base text opacity is nudged
to the exact founder-specified value here, scoped so the post card and
.lb-tea-card keep their own existing shade untouched. */
.lb-thread-comment .lb-post-card__snapshotLine {
margin-top: 2px;
color: rgba(247,244,255,.78);
}
.lb-thread-comment__menuBtn {
width: 24px;
height: 24px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,14,24,.78);
color: rgba(247,244,255,.78);
font-size: 15px;
line-height: 1;
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
}
.lb-thread-comment__menuBtn:hover {
border-color: rgba(0,224,211,.42);
color: rgba(247,244,255,.95);
}
.lb-thread-comment__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 108px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,14,24,.95);
box-shadow: 0 10px 24px rgba(5,8,14,.58);
padding: 4px;
display: grid;
gap: 2px;
z-index: 2;
}
.lb-thread-comment__menuItem {
min-height: 30px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: rgba(247,244,255,.9);
font-size: 12px;
font-weight: 600;
text-align: left;
padding: 0 8px;
cursor: pointer;
}
.lb-thread-comment__menuItem:hover {
border-color: rgba(0,224,211,.3);
background: rgba(12,16,27,.74);
}
.lb-thread-comment__actions {
margin-top: 3px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
/* Plain pearl/neutral text, no permanent color — founder-rejected the old
teal always-on treatment. A restrained underline appears only on
hover/focus, never at rest. This is a restyle only; expansion behavior,
copy, and connector/nesting placement are unchanged. */
.lb-thread-comment__repliesToggle {
margin-top: 2px;
/* Horizontal alignment only: matches .lb-thread-comment__replies' own
connector line position (margin-left:8px + left:10px = 18px) so the
control reads as the entrance into the reply branch below it, not a
flush-left footer label under the rail. */
margin-left: 18px;
width: fit-content;
border: none;
background: transparent;
color: rgba(247,244,255,.7);
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: color .18s ease, text-decoration-color .18s ease;
}
.lb-thread-comment__repliesToggle:hover {
color: rgba(247,244,255,.94);
text-decoration-color: rgba(255,79,191,.6);
}
.lb-thread-comment__repliesToggle:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24);
border-radius: 6px;
}
.lb-thread-comment__action {
min-height: 28px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,14,24,.72);
color: rgba(247,244,255,.84);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 8px;
cursor: pointer;
}
.lb-thread-comment__action:hover {
border-color: rgba(0,224,211,.4);
color: rgba(247,244,255,.96);
}
.lb-thread-comment__action.is-engaged {
border-color: rgba(255,79,191,.44);
box-shadow: 0 0 10px rgba(255,79,191,.16), 0 0 8px rgba(79,102,255,.14);
}
.lb-thread-comment__actionIcon {
font-size: 12px;
line-height: 1;
}
.lb-thread-comment__action .lb-rail-action__iconSvg {
width: 14px;
height: 14px;
display: block;
}
.lb-thread-comment__action .lb-rail-action__iconSvg path {
fill: currentColor;
transition: fill .24s ease;
}
.lb-thread-comment__action--rail.is-engaged {
background:
linear-gradient(rgba(16,22,38,.78), rgba(16,22,38,.78)) padding-box,
linear-gradient(112deg, #61A9FF 0%, #FF72CC 38%, #54E9D8 76%, #FFFFFF 100%) border-box;
border-color: transparent;
color: #fff;
box-shadow:
0 0 0 1px rgba(255,255,255,.12) inset,
0 0 10px rgba(77,150,255,.24),
0 0 11px rgba(255,103,198,.2),
0 0 10px rgba(69,224,209,.18);
text-shadow:
0 0 8px rgba(77,150,255,.28),
0 0 8px rgba(255,103,198,.24),
0 0 8px rgba(69,224,209,.2);
}
.lb-thread-comment__action--rail.is-engaged .lb-rail-action__iconSvg {
filter:
drop-shadow(0 0 6px rgba(77,150,255,.3))
drop-shadow(0 0 7px rgba(255,103,198,.22))
drop-shadow(0 0 6px rgba(69,224,209,.2));
}
.lb-thread-comment__action--rail.is-engaged .lb-thread-comment__actionCount {
color: rgba(255,255,255,.98);
}
.lb-thread-comment__action--signal.is-engaged {
background:
linear-gradient(rgba(16,22,38,.72), rgba(16,22,38,.72)) padding-box,
linear-gradient(112deg, #61A9FF 0%, #FF72CC 38%, #54E9D8 76%, #FFFFFF 100%) border-box;
border-color: transparent;
box-shadow:
0 0 0 1px rgba(255,255,255,.12) inset,
0 0 10px rgba(77,150,255,.24),
0 0 11px rgba(255,103,198,.2),
0 0 10px rgba(69,224,209,.18);
}
.lb-thread-comment__action--signal.is-engaged .lb-signal-action__icon {
color: #fff;
text-shadow:
0 0 7px rgba(77,150,255,.34),
0 0 7px rgba(255,103,198,.24),
0 0 7px rgba(69,224,209,.22);
}
.lb-thread-comment__actionCount {
font-size: 11px;
font-weight: 700;
line-height: 1;
}
/* ===========================================================
V2 comment/reply action rail — Feed-only, scoped under the
additive .lb-thread-comment__actions--v2 marker (founder-
approved isolation: profile.js has its own independent copy
of this markup and never adds this class, so Own Profile /
Public Profile inherit none of the rules below).
Slice 1A: rail geometry, chip tokens, and the three-state
engagement grammar only. Header/snapshot/connector/nesting
are explicitly out of scope for this pass.
=========================================================== */
/* Faithful port of the audited V9 rail mechanism: one flex row,
justify-content: space-between, gap:16px as a FLOOR (not a fixed value —
space-between only ever adds to it), max-width bounding the rail to the
widest proportion V9's own reference examples ever demonstrated (its
widest example, a 430px card, produced a ~412px rail). On any narrower
column the box simply resolves to that column's own width by ordinary
block layout, so the gap compresses on its own — no per-breakpoint
override needed, and none should be added. */
.lb-thread-comment__actions.lb-thread-comment__actions--v2 {
/* The rail is now a direct grid child of .lb-thread-comment (a sibling of
.row, not nested inside its narrower text column) so it can reclaim the
avatar's width — see createThreadCommentMarkup. The grid's own gap:9px
already provides vertical spacing, so the legacy margin-top:3px is reset
here rather than stacking on top of it. */
margin-top: 0;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 400px;
}
/* flex-shrink stays at its default (1) here on purpose — flex: none would
stop a family from ever compressing, which is exactly what caused real
overflow at narrow widths where two content-sized families plus the
floor gap add up to more than the available column. flex-grow: 0 still
keeps a family from stretching to fill extra space on its own. */
.lb-thread-comment__actions--v2 .lb-thread-comment__actionsGroup {
display: flex;
align-items: center;
gap: 7px;
flex-grow: 0;
min-width: 0;
}
/* Two-layer geometry per the audited V9 source: the button is the
transparent 36x44 tap target (V9's own measured value) and carries no
visible styling of its own — .lb-thread-comment__actionChip inside it is
the compact ~30px visible pill. This is why the outer 36px + 7px
intra-family gap read as real breathing room between chips, rather than
the 7px applying directly between tightly-sized visible pills. */
.lb-thread-comment__actions--v2 .lb-thread-comment__action {
min-width: 36px;
min-height: 44px;
padding: 0;
border: none;
background: none;
box-shadow: none;
color: rgba(247,244,255,.8);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Resetting the legacy unscoped .is-engaged rules at the button level so the
outer tap target stays transparent regardless of engagement — the visible
treatment for "viewer" now lives entirely on .actionChip below. */
.lb-thread-comment__actions--v2 .lb-thread-comment__action.is-engaged {
background: none;
box-shadow: none;
text-shadow: none;
border-color: transparent;
}
.lb-thread-comment__actions--v2 .lb-thread-comment__actionChip {
min-width: 30px;
height: 30px;
padding: 0 7px;
border-radius: 999px;
border: 1px solid rgba(228,226,246,.46);
background: #0C101B;
/* Inner lip plus a faint, restrained off-center violet-white bloom, echoing
the approved engagement-pill's specular rim without reading as glossy. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -8px 10px -8px rgba(180,109,255,.1);
/* No color here on purpose: this must inherit from .lb-thread-comment__action
via currentColor, not restate the neutral value itself. Root cause of the
Like/Save viewer-state color never visually applying — this unconditional
color redeclared neutral on every render regardless of .is-engaged,
silently overriding the button's pink/blue before it ever reached the
SVG path's fill:currentColor. Confirmed by toggling .is-engaged live and
reading getComputedStyle on the svg — its color stayed neutral even
though the button's own color correctly changed. */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.lb-thread-comment__actions--v2 .lb-signal-action__icon {
display: block;
transition: opacity .15s ease, filter .15s ease;
}
.lb-thread-comment__actions--v2 .lb-thread-comment__actionCount {
font-size: 11.5px;
font-weight: 700;
line-height: 1;
color: rgba(247,244,255,.82);
font-variant-numeric: tabular-nums;
}
/* NOBODY: quiet emoji, tuned per glyph for recognizability (not one blanket filter) */
.lb-thread-comment__actions--v2 [data-thread-action="tip"].is-quiet .lb-signal-action__icon {
opacity: .72;
filter: grayscale(.65);
}
.lb-thread-comment__actions--v2 [data-thread-action="poke"].is-quiet .lb-signal-action__icon {
opacity: .6;
filter: grayscale(.5);
}
.lb-thread-comment__actions--v2 [data-thread-action="crush"].is-quiet .lb-signal-action__icon {
opacity: .75;
filter: grayscale(.85);
}
/* VIEWER — Like/Save: flat glyph color only, chip shell stays neutral (no
border/glow change) — currentColor carries the pink/blue down to the SVG. */
.lb-thread-comment__actions--v2 [data-thread-action="heart"].is-engaged {
color: #FF4FBF;
}
.lb-thread-comment__actions--v2 [data-thread-action="save"].is-engaged {
color: #4D96FF;
}
/* The legacy unscoped .lb-thread-comment__action--rail.is-engaged
.lb-rail-action__iconSvg rule applies a multi-color drop-shadow glow —
still a descendant match through the new chip layer. Reset it: Like/Save
viewer state must stay glow-free. */
.lb-thread-comment__actions--v2 [data-thread-action="heart"].is-engaged .lb-rail-action__iconSvg,
.lb-thread-comment__actions--v2 [data-thread-action="save"].is-engaged .lb-rail-action__iconSvg {
filter: none;
}
/* The legacy unscoped .lb-thread-comment__action--rail.is-engaged
.lb-thread-comment__actionCount rule (higher specificity, still applies
since .actionCount is still its descendant) would otherwise turn these
counts near-white — counts must stay neutral in every state. */
.lb-thread-comment__actions--v2 [data-thread-action="heart"].is-engaged .lb-thread-comment__actionCount,
.lb-thread-comment__actions--v2 [data-thread-action="save"].is-engaged .lb-thread-comment__actionCount {
color: rgba(247,244,255,.82);
}
/* VIEWER — Tip/Poke/Crush: native emoji + approved brand gradient border +
restrained glow, applied to the visible chip (not the transparent tap target). */
.lb-thread-comment__actions--v2 .lb-thread-comment__action--signal.is-engaged .lb-thread-comment__actionChip {
border-color: transparent;
background:
linear-gradient(#0C101B, #0C101B) padding-box,
linear-gradient(105deg, #FF4FBF, #CF57E8 46%, #4F66FF) border-box;
box-shadow:
0 0 9px rgba(255,79,191,.22),
0 0 15px rgba(180,109,255,.12),
0 1px 0 rgba(255,255,255,.08) inset;
}
.lb-thread-comment__actions--v2 .lb-thread-comment__action--signal.is-engaged .lb-signal-action__icon {
color: inherit;
text-shadow: none;
opacity: 1;
filter: none;
}
.lb-thread-comment__replies {
margin-left: 8px;
padding-left: 24px;
display: grid;
gap: 14px;
position: relative;
}
.lb-thread-comment__replies.is-expanded::before {
content: "";
position: absolute;
left: 10px;
top: 2px;
bottom: 6px;
width: 1px;
border-radius: 999px;
/* Founder correction: was white->teal->blue, a leftover from the old
comment design. Restrained pink->purple->digital-blue, same family as
the engagement rail's viewer-state border, at low opacity — no glow. */
background: linear-gradient(
180deg,
rgba(255,79,191,.2) 0%,
rgba(207,87,232,.16) 50%,
rgba(79,102,255,.14) 100%
);
}
.lb-thread-comment__children {
margin-left: 4px;
padding-left: 20px;
display: grid;
gap: 6px;
position: relative;
margin-top: 6px;
}
.lb-thread-comment__children.is-expanded::before {
content: "";
position: absolute;
left: 6px;
top: 2px;
bottom: 6px;
width: 1px;
border-radius: 999px;
/* Same founder-corrected family as .lb-thread-comment__replies above, one
tier more subtle to match this deeper connector's original restraint. */
background: linear-gradient(
180deg,
rgba(255,79,191,.14) 0%,
rgba(207,87,232,.11) 50%,
rgba(79,102,255,.1) 100%
);
}
.lb-thread-comment__children.is-expanded .lb-thread-comment--reply::before {
content: "";
position: absolute;
left: -20px;
top: 10px;
width: 20px;
height: 12px;
/* Same restrained brand family as the vertical connector it branches off —
a single representative mid-family tone, since a true multi-stop
gradient across an L-shaped border isn't practical here. */
border-left: 1px solid rgba(180,109,255,.16);
border-bottom: 1px solid rgba(180,109,255,.16);
border-bottom-left-radius: 9px;
}
.lb-thread-comment__children .lb-thread-comment__meta {
gap: 4px;
font-size: 11px;
}
.lb-thread-comment__children .lb-author-snapshot {
gap: 3px;
}
.lb-thread-comment__children .lb-author-snapshot__chip {
height: 17px;
padding: 0 5px;
font-size: 9px;
}
.lb-thread-comment--reply {
padding: 6px 0;
position: relative;
border-radius: 6px;
}
.lb-thread-comment--reply:hover {
background: rgba(255,255,255,.025);
}
.lb-thread-comment__replies.is-expanded .lb-thread-comment--reply::before {
content: "";
position: absolute;
left: -24px;
top: 10px;
width: 24px;
height: 12px;
/* Same restrained brand family as the vertical connector it branches off. */
border-left: 1px solid rgba(180,109,255,.18);
border-bottom: 1px solid rgba(180,109,255,.18);
border-bottom-left-radius: 9px;
}
.lb-thread-comment--parent.lb-thread-comment--expanded > .lb-thread-comment__row::after {
content: "";
position: absolute;
left: 13px;
bottom: -20px;
width: 1.5px;
height: 24px;
border-radius: 999px;
background: rgba(255,255,255,.12);
}
.lb-thread-comment--parent > .lb-thread-comment__row {
position: relative;
}
.lb-thread-compose {
border-top: 1px solid rgba(255,255,255,.1);
background: rgba(8,12,22,.92);
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
display: grid;
gap: 8px;
}
.lb-thread-compose__replyTarget {
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(11,16,27,.84);
padding: 8px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
}
.lb-thread-compose__replyTargetBody {
min-width: 0;
display: grid;
gap: 6px;
}
.lb-thread-compose__replyingTo {
margin: 0;
color: rgba(247,244,255,.92);
font-size: 12px;
font-weight: 700;
}
.lb-thread-compose__replyContext {
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(10,14,24,.7);
padding: 7px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}
.lb-thread-compose__replyAvatar {
width: 22px;
height: 22px;
border-radius: 999px;
background:
radial-gradient(circle at 50% 30%, rgba(247,244,255,.9) 0 18%, transparent 19%),
radial-gradient(circle at 50% 78%, rgba(247,244,255,.9) 0 30%, transparent 31%),
linear-gradient(140deg, rgba(255,79,191,.58), rgba(79,102,255,.58));
box-shadow: 0 0 0 2px rgba(10,14,24,.95), 0 0 0 3px rgba(0,224,211,.26);
}
.lb-thread-compose__replyMeta {
min-width: 0;
}
.lb-thread-compose__replyMetaTop {
margin: 0;
color: rgba(247,244,255,.72);
font-size: 11px;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.lb-thread-compose__replyMetaTop .lb-author-snapshot {
margin-top: 0;
}
.lb-thread-compose__replyUser {
color: rgba(247,244,255,.94);
font-weight: 600;
}
.lb-thread-compose__replyDot {
color: rgba(247,244,255,.4);
}
.lb-thread-compose__replyTime {
color: rgba(247,244,255,.56);
}
.lb-thread-compose__replyText {
margin: 2px 0 0;
color: rgba(247,244,255,.84);
font-size: 12px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.lb-thread-compose__replyThumb {
width: 36px;
height: 36px;
border-radius: 7px;
object-fit: cover;
border: 1px solid rgba(255,255,255,.12);
display: block;
}
.lb-thread-compose__cancelReply {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(10,14,24,.86);
color: rgba(247,244,255,.88);
display: grid;
place-items: center;
line-height: 1;
cursor: pointer;
}
.lb-thread-compose__cancelReply:hover {
border-color: rgba(0,224,211,.44);
}
.lb-thread-compose__replyingTo,
.lb-thread-compose__replyMetaTop,
.lb-thread-compose__replyText {
overflow: hidden;
}
.lb-thread-compose__field textarea {
width: 100%;
min-height: 84px;
max-height: 180px;
resize: vertical;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(11,16,27,.86);
color: rgba(247,244,255,.95);
font: 500 16px/1.45 var(--font-ui);
padding: 12px;
outline: none;
}
.lb-thread-compose__field textarea::placeholder {
color: rgba(247,244,255,.52);
}
.lb-thread-compose__field textarea:focus-visible {
border-color: rgba(255,79,191,.54);
}
.lb-thread-compose__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.lb-thread-compose__toolButtons {
display: flex;
align-items: center;
gap: 8px;
}
.lb-thread-compose__toolBtn {
width: 36px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.82);
padding: 0;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-thread-compose__toolBtn:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.45);
box-shadow: 0 0 10px rgba(0,224,211,.16), 0 0 8px rgba(79,102,255,.14);
}
.lb-thread-compose__toolBtn.is-active {
border-color: transparent;
background:
linear-gradient(rgba(13,17,28,.94), rgba(13,17,28,.94)) padding-box,
linear-gradient(120deg, rgba(255,79,191,.88), rgba(79,102,255,.84)) border-box;
}
.lb-thread-compose__meta {
margin: 0;
color: rgba(247,244,255,.6);
font-size: 12px;
text-align: right;
}
.lb-thread-compose__toolHint {
margin: -2px 0 0;
color: rgba(247,244,255,.56);
font-size: 11px;
}
.lb-thread-compose__error {
min-height: 15px;
margin: -2px 0 0;
color: rgba(255,178,230,.92);
font-size: 12px;
}
.lb-thread-compose__preview {
display: flex;
gap: 8px;
}
.lb-thread-compose__thumbWrap {
position: relative;
width: 74px;
height: 74px;
}
.lb-thread-compose__thumb {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
border: 1px solid rgba(255,255,255,.12);
}
.lb-thread-compose__remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(7,10,18,.9);
color: rgba(247,244,255,.9);
font-size: 13px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.lb-thread-compose__foot {
display: flex;
justify-content: flex-end;
}
.lb-thread-compose__submit {
min-width: 110px;
min-height: 40px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(18,22,34,.84);
color: rgba(247,244,255,.72);
font-weight: 700;
font-size: 14px;
letter-spacing: .01em;
cursor: not-allowed;
transition: filter .2s ease, box-shadow .2s ease;
}
.lb-thread-compose__submit:not(:disabled) {
cursor: pointer;
color: #fff;
border-color: transparent;
background: linear-gradient(105deg, #FF4FBF 0%, #D95CE0 42%, #4F66FF 100%);
box-shadow: 0 8px 18px rgba(255,79,191,.22), 0 8px 18px rgba(79,102,255,.2);
}
.lb-thread-compose__submit:not(:disabled):hover {
filter: brightness(1.05);
}
.lb-feed-topbar {
position: sticky;
top: 12px;
z-index: 12;
min-height: 64px;
padding: 10px 12px;
display: flex;
align-items: center;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(8,9,18,.78);
backdrop-filter: blur(14px);
box-shadow: 0 10px 22px rgba(6,9,17,.5), 0 0 18px rgba(79,102,255,.14), 0 0 14px rgba(255,79,191,.1);
}
.lb-feed-topbar__iconBtn {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(14,18,30,.82);
color: rgba(247,244,255,.92);
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .18s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-feed-topbar__iconBtn:hover,
.lb-feed-topbar__bellBtn:hover,
.lb-feed-topbar__signalBtn:hover,
.lb-user-entry__avatarBtn:hover,
.lb-user-entry__trigger:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.45);
box-shadow: 0 0 12px rgba(0,224,211,.18), 0 0 10px rgba(79,102,255,.16);
}
.lb-feed-topbar__iconBtn:focus-visible,
.lb-feed-topbar__bellBtn:focus-visible,
.lb-feed-topbar__signalBtn:focus-visible,
.lb-user-entry__avatarBtn:focus-visible,
.lb-user-entry__trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.12);
}
.lb-week-tabs__tab:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(247,244,255,.22), 0 0 0 4px rgba(247,244,255,.1);
}
.lb-icon-menu {
width: 16px;
height: 12px;
display: inline-block;
background:
linear-gradient(currentColor, currentColor) 0 0 / 16px 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 5px / 16px 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 10px / 16px 2px no-repeat;
color: rgba(230,248,255,.92);
}
.lb-feed-topbar__brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
}
.lb-feed-topbar__brand img {
height: 22px;
width: auto;
display: block;
}
.lb-feed-topbar__actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
.lb-feed-topbar__bellBtn {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(14,18,30,.82);
color: rgba(247,244,255,.94);
display: grid;
place-items: center;
cursor: pointer;
position: relative;
transition: border-color .18s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-feed-topbar__bellBtn::after {
content: "";
position: absolute;
right: 8px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 999px;
background: #00E0D3;
box-shadow: 0 0 8px rgba(0,224,211,.6);
display: none;
}
.lb-feed-notif__badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: linear-gradient(112deg, rgba(255,79,191,.96), rgba(132,89,255,.94));
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 0 8px rgba(255,79,191,.4);
pointer-events: none;
}
.lb-feed-notif {
position: fixed;
inset: 0;
z-index: 300;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.lb-feed-notif[hidden] {
display: none;
}
.lb-feed-notif__backdrop {
position: absolute;
inset: 0;
cursor: default;
}
.lb-feed-notif__sheet {
position: relative;
margin-top: 54px;
margin-right: 12px;
width: 300px;
background: rgba(14,18,30,.96);
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,79,191,.12);
overflow: hidden;
}
.lb-feed-notif__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.lb-feed-notif__title {
margin: 0;
font-size: 13px;
font-weight: 700;
color: rgba(247,244,255,.9);
letter-spacing: .02em;
}
.lb-feed-notif__closeBtn {
background: none;
border: none;
color: rgba(247,244,255,.5);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 2px;
}
.lb-feed-notif__closeBtn:hover {
color: rgba(247,244,255,.9);
}
.lb-feed-notif__list {
list-style: none;
margin: 0;
padding: 6px 0 10px;
}
.lb-feed-notif__item {
padding: 10px 16px;
font-size: 13px;
color: rgba(247,244,255,.82);
line-height: 1.4;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.lb-feed-notif__item:last-child {
border-bottom: none;
}
/* ── Crush notification click affordance ──────────────────────────────────
The message body navigates to the exact Crushed source, but as plain text
it read as passive copy — users assumed only Accept/Decline were live.
Accent the Crush phrase, add a "View" cue, and reveal an underline plus a
row tint on hover/focus. Accept/Decline keep their own treatment. */
.lb-feed-notif__body--crush {
cursor: pointer;
}
/* Only the word "Crush" carries colour — the rest of the sentence stays
neutral. Same ramp as .lb-vibe-card__titleAccent (pink → purple → blue →
teal). Static at rest; one shimmer sweep on hover, borrowing the
background-position technique from .lb-save-shimmer without inheriting its
infinite loop — a drawer full of Crush rows should not strobe. */
.lb-feed-notif__crushWord {
background: linear-gradient(96deg, #FF4FBF 0%, #B46DFF 48%, #4F66FF 76%, #00E0D3 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
}
@keyframes lb-notif-crush-sweep {
from { background-position: 210% 0; }
to { background-position: 0% 0; }
}
.lb-feed-notif__view {
margin-left: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
color: rgba(0,224,211,.86);
white-space: nowrap;
opacity: .85;
transition: opacity .16s ease, transform .16s ease;
display: inline-block;
}
.lb-feed-notif__item:hover .lb-feed-notif__crushWord,
.lb-feed-notif__item:focus-within .lb-feed-notif__crushWord {
background-image: linear-gradient(96deg,
#FF4FBF 0%, #B46DFF 34%, #FFFFFF 50%, #4F66FF 66%, #00E0D3 100%);
background-size: 240% 100%;
background-position: 0% 0;
animation: lb-notif-crush-sweep .85s ease-out 1;
}
.lb-feed-notif__item:hover .lb-feed-notif__view,
.lb-feed-notif__item:focus-within .lb-feed-notif__view {
opacity: 1;
transform: translateX(2px);
}
.lb-feed-notif__item:has(.lb-feed-notif__body--crush):hover {
background: rgba(255,79,191,.06);
}
@media (prefers-reduced-motion: reduce) {
.lb-feed-notif__view { transition: none; }
.lb-feed-notif__item:hover .lb-feed-notif__crushWord,
.lb-feed-notif__item:focus-within .lb-feed-notif__crushWord {
animation: none;
}
}
.lb-feed-notif__item--unread {
color: rgba(247,244,255,.97);
font-weight: 500;
background: linear-gradient(90deg, rgba(255,79,191,.07) 0%, rgba(79,102,255,.05) 100%);
box-shadow: inset 3px 0 0 rgba(255,79,191,.55);
}
@media (prefers-reduced-motion: reduce) {
.lb-feed-notif__item--unread {
background: rgba(255,79,191,.06);
box-shadow: inset 3px 0 0 rgba(255,79,191,.55);
}
}
.lb-feed-notif__item--empty {
color: rgba(247,244,255,.38);
font-style: italic;
}
.lb-feed-notif__crushActions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.lb-feed-notif__crushBtn {
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
flex: 0 0 auto;
}
/* Same canonical primary gradient as .lb-crush-btn--primary — solid fill,
white text, no gradient border — just at this list item's compact size
rather than the full modal-CTA height. */
.lb-feed-notif__crushBtn--accept {
border: none;
background: linear-gradient(105deg, #ff4fbf, #cf57e8 40%, #4f66ff 70%, #00e0d3);
color: #fff;
}
.lb-feed-notif__crushBtn--accept:hover:not(:disabled) { filter: brightness(1.06); }
.lb-feed-notif__crushBtn--decline {
border: 1px solid rgba(255,255,255,.2);
background: rgba(12,16,27,.82);
color: rgba(247,244,255,.85);
}
.lb-feed-notif__crushBtn--decline:hover:not(:disabled) { background: rgba(20,24,34,.9); }
.lb-feed-notif__crushBtn:disabled {
cursor: not-allowed;
opacity: .5;
}
.lb-feed-notif__crushStatus {
display: inline-block;
margin-top: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.lb-feed-notif__crushStatus--matched {
border: 1px solid rgba(255,79,191,.4);
background: rgba(255,79,191,.12);
color: rgba(247,244,255,.94);
}
.lb-feed-notif__crushStatus--declined {
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,14,24,.62);
color: rgba(247,244,255,.6);
}
.lb-icon-bell {
width: 18px;
height: 18px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.lb-feed-topbar__signalBtn {
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(14,18,30,.88);
color: rgba(247,244,255,.92);
padding: 0;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .18s ease, box-shadow .2s ease, transform .16s ease, filter .2s ease;
animation: lbYouUpFloat 5.4s ease-in-out infinite, lbYouUpGlow 4.8s ease-in-out infinite;
}
.lb-icon-youup {
position: relative;
width: 20px;
height: 20px;
display: inline-block;
}
.lb-icon-youup__moon {
position: absolute;
left: 3px;
top: 3px;
width: 13px;
height: 13px;
border-radius: 999px;
background: linear-gradient(140deg, rgba(255,79,191,.96), rgba(79,102,255,.9));
box-shadow: 0 0 10px rgba(255,79,191,.34), 0 0 8px rgba(79,102,255,.3);
}
.lb-icon-youup__moon::after {
content: "";
position: absolute;
left: -2px;
top: 1px;
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(14,18,30,.96);
}
.lb-icon-youup__sparkle {
position: absolute;
width: 4px;
height: 4px;
border-radius: 999px;
background: #00E0D3;
box-shadow: 0 0 8px rgba(0,224,211,.46);
animation: lbYouUpSparkle 3.6s ease-in-out infinite;
}
.lb-icon-youup__sparkle--a {
right: 1px;
top: 0;
}
.lb-icon-youup__sparkle--b {
left: 2px;
bottom: 0;
width: 3px;
height: 3px;
animation-delay: 1.2s;
}
.lb-user-entry {
border-radius: 20px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(10,14,24,.62);
padding: 12px;
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: center;
box-shadow: 0 8px 20px rgba(6,9,16,.48), inset 0 0 0 1px rgba(255,255,255,.02);
}
.lb-user-entry__avatarBtn {
position: relative;
width: 46px;
height: 46px;
border-radius: 999px;
padding: 0;
border: 1px solid rgba(255,255,255,.14);
background: rgba(14,18,30,.84);
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .18s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-user-entry__avatarBtn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
padding: 2px;
background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.lb-user-entry__avatarCore {
width: 34px;
height: 34px;
border-radius: 999px;
background:
radial-gradient(circle at 50% 30%, rgba(247,244,255,.9) 0 18%, transparent 19%),
radial-gradient(circle at 50% 78%, rgba(247,244,255,.9) 0 30%, transparent 31%),
linear-gradient(140deg, rgba(255,79,191,.58), rgba(79,102,255,.58));
}
.lb-user-entry__meta {
min-width: 0;
display: grid;
gap: 7px;
align-content: center;
}
.lb-user-entry__handle {
margin: 0;
color: #F7F4FF;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
line-height: 1.2;
text-transform: lowercase;
text-decoration: none;
width: fit-content;
border-radius: 999px;
transition: color .2s ease;
}
.lb-user-entry__handle:hover,
.lb-user-entry__handle:focus-visible {
outline: none;
color: #FFFFFF;
text-decoration: underline;
text-underline-offset: 3px;
}
.lb-user-entry__trigger {
width: 100%;
min-height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.52);
font-family: var(--font-ui);
font-size: 16px;
text-align: left;
padding: 0 16px;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease, color .2s ease;
}
.lb-user-entry__trigger:focus-visible {
border-color: rgba(0,224,211,.58);
box-shadow: 0 0 0 2px rgba(0,224,211,.18), 0 0 0 4px rgba(0,224,211,.08), 0 0 14px rgba(79,102,255,.18);
}
@media (max-width: 420px) {
.lb-user-entry__handle { font-size: 12px; }
}
.lb-vibe-card {
border-radius: 22px;
border: 1px solid transparent;
background:
linear-gradient(rgba(16,19,30,.9), rgba(16,19,30,.9)) padding-box,
linear-gradient(122deg, rgba(255,79,191,.42), rgba(180,109,255,.36) 58%, rgba(79,102,255,.32)) border-box;
padding: 18px;
box-shadow: 0 10px 26px rgba(7,11,20,.5), inset 0 0 0 1px rgba(255,255,255,.03);
position: relative;
}
.lb-vibe-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(46% 56% at 18% 12%, rgba(255,79,191,.12), transparent 72%),
radial-gradient(60% 62% at 76% 90%, rgba(79,102,255,.12), transparent 74%);
}
.lb-vibe-card > * { position: relative; z-index: 1; }
.lb-vibe-card__kicker {
margin: 0;
color: rgba(247,244,255,.55);
font-size: 11px;
letter-spacing: .05em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 9px;
}
.lb-vibe-card__liveDot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #00E0D3;
box-shadow: 0 0 0 4px rgba(0,224,211,.12), 0 0 8px rgba(0,224,211,.5);
animation: lbLivePulse 2.8s ease-in-out infinite;
}
.lb-vibe-card__liveText {
color: rgba(247,244,255,.62);
letter-spacing: .1em;
font-size: 10px;
}
.lb-vibe-card__title {
margin: 10px 0 0;
font-family: var(--font-display);
font-size: clamp(26px, 5vw, 34px);
letter-spacing: -.02em;
line-height: 1.08;
text-wrap: balance;
}
.lb-vibe-card__titleBase {
color: rgba(247,244,255,.98);
}
.lb-vibe-card__wordplayEa {
display: inline-block;
transform: rotate(-12deg);
transform-origin: 50% 62%;
}
.lb-vibe-card__titleAccent {
background: linear-gradient(96deg, #FF4FBF 0%, #B46DFF 52%, #4F66FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lb-vibe-card__copy {
margin: 6px 0 0;
color: rgba(247,244,255,.76);
font-size: clamp(13px, 2vw, 15px);
line-height: 1.5;
overflow-wrap: anywhere;
}
.lb-vibe-card__tagline {
margin: 8px 0 0;
color: rgba(214,208,255,.92);
font-size: clamp(12px, 2vw, 14px);
font-weight: 600;
line-height: 1.35;
letter-spacing: .01em;
}
.lb-week-tabs {
margin-top: 2px;
position: relative;
}
.lb-week-tabs__scroller {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 1px 6px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.lb-week-tabs__scroller::-webkit-scrollbar { display: none; }
.lb-week-tabs__hint,
.lb-week-tabs__indicator {
display: none;
}
.lb-week-tabs.is-scrollable .lb-week-tabs__hint {
display: block;
margin: 6px 4px 0;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: rgba(247,244,255,.5);
transition: opacity .22s ease;
}
.lb-week-tabs__hintArrow {
color: #FF8AD4;
}
.lb-week-tabs.is-scrollable.has-scrolled .lb-week-tabs__hint {
opacity: .28;
}
.lb-week-tabs.is-scrollable .lb-week-tabs__indicator {
display: block;
height: 3px;
border-radius: 999px;
margin: 8px 2px 0;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.lb-week-tabs.is-scrollable .lb-week-tabs__indicatorThumb {
display: block;
height: 100%;
width: 26%;
border-radius: inherit;
background: linear-gradient(105deg, rgba(255,79,191,.84), rgba(207,87,232,.84) 40%, rgba(79,102,255,.84) 70%, rgba(0,224,211,.84));
box-shadow: 0 0 8px rgba(79,102,255,.24), 0 0 6px rgba(255,79,191,.2);
transform: translateX(0);
transition: transform .14s linear, width .14s linear;
}
.lb-week-tabs__tab {
/* Anchors the activity dot rendered by .has-feed-activity::after. */
position: relative;
height: 42px;
min-width: 56px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(12,16,27,.78);
color: rgba(247,244,255,.88);
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
padding: 0 14px;
cursor: pointer;
white-space: nowrap;
flex: 0 0 auto;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease, color .2s ease, background .2s ease;
}
.lb-week-tabs__tab:hover {
transform: translateY(-1px);
border-color: rgba(247,244,255,.26);
box-shadow: 0 0 10px rgba(247,244,255,.08);
}
.lb-week-tabs__tab.is-active {
border-color: transparent;
background:
linear-gradient(rgba(14,18,31,.95), rgba(14,18,31,.95)) padding-box,
linear-gradient(110deg, rgba(255,79,191,.95), rgba(180,109,255,.92) 50%, rgba(79,102,255,.9)) border-box;
color: #fff;
box-shadow: 0 0 0 1px rgba(255,79,191,.18), 0 8px 16px rgba(79,102,255,.2);
}
.lb-week-tabs__tab--afterhours {
border-color: rgba(255,130,50,.44);
box-shadow: inset 0 0 0 1px rgba(255,100,30,.18), 0 0 8px rgba(255,90,20,.12);
color: rgba(255,200,140,.96);
}
.lb-week-tabs__tab--afterhours:not(.is-active):hover {
border-color: rgba(255,110,30,.62);
box-shadow: inset 0 0 0 1px rgba(255,140,60,.28), 0 0 16px rgba(255,80,20,.22);
color: rgba(255,220,160,1);
}
.lb-week-tabs__tab--afterhours.is-active {
background:
linear-gradient(rgba(14,18,31,.95), rgba(14,18,31,.95)) padding-box,
linear-gradient(112deg, rgba(255,120,40,.98), rgba(220,70,20,.92) 52%, rgba(255,180,60,.88)) border-box;
box-shadow: 0 0 0 1px rgba(255,100,30,.36), 0 0 18px rgba(255,80,20,.28);
color: rgba(255,220,160,1);
}
.lb-week-tabs__tab--youup {
display: inline-flex;
align-items: center;
gap: 7px;
}
.lb-week-tabs__tab--youup .lb-icon-youup {
flex: 0 0 auto;
}
.lb-week-tabs__tab--youup.is-active {
background:
linear-gradient(rgba(14,18,31,.95), rgba(14,18,31,.95)) padding-box,
linear-gradient(110deg, rgba(255,79,191,.95), rgba(180,109,255,.92) 50%, rgba(79,102,255,.9)) border-box;
color: #fff;
box-shadow: 0 0 0 1px rgba(255,79,191,.18), 0 8px 16px rgba(79,102,255,.2);
}
@media (max-width: 760px) {
.lb-week-tabs::before,
.lb-week-tabs::after {
content: "";
position: absolute;
top: 0;
width: 20px;
height: 50px;
pointer-events: none;
opacity: 0;
transition: opacity .22s ease;
z-index: 2;
}
.lb-week-tabs::before {
left: 0;
background: linear-gradient(to right, rgba(11,11,15,.92), rgba(11,11,15,0));
}
.lb-week-tabs::after {
right: 0;
background: linear-gradient(to left, rgba(11,11,15,.92), rgba(11,11,15,0));
}
.lb-week-tabs.is-scrollable:not(.is-at-start)::before {
opacity: .95;
}
.lb-week-tabs.is-scrollable:not(.is-at-end)::after {
opacity: .95;
}
.lb-week-tabs__hint {
display: block;
margin: 6px 4px 0;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: rgba(247,244,255,.5);
transition: opacity .22s ease;
}
.lb-week-tabs.has-scrolled .lb-week-tabs__hint {
opacity: .28;
}
.lb-week-tabs__indicator {
display: block;
height: 3px;
border-radius: 999px;
margin: 8px 2px 0;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.lb-week-tabs__indicatorThumb {
display: block;
height: 100%;
width: 26%;
border-radius: inherit;
background: linear-gradient(105deg, rgba(255,79,191,.84), rgba(207,87,232,.84) 40%, rgba(79,102,255,.84) 70%, rgba(0,224,211,.84));
box-shadow: 0 0 8px rgba(79,102,255,.24), 0 0 6px rgba(255,79,191,.2);
transform: translateX(0);
transition: transform .14s linear, width .14s linear;
}
}
.lb-feed-placeholder {
border-radius: 16px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(10,14,24,.36);
min-height: 108px;
padding: 16px;
}
.lb-feed-placeholder__default {
min-height: 74px;
display: grid;
justify-items: stretch;
align-items: start;
text-align: left;
gap: 10px;
}
.lb-feed-placeholder__title {
margin: 0;
color: rgba(247,244,255,.66);
font-size: 15px;
text-align: center;
}
.lb-feed-placeholder__copy {
margin: 0;
color: rgba(247,244,255,.5);
font-size: 14px;
text-align: center;
}
[data-feed-day-copy] {
display: flex;
flex-direction: column;
gap: 3px;
text-align: left;
}
.lb-lane-theme {
font-size: 14px;
color: rgba(247,244,255,.72);
}
/* Primary emphasis: blue/violet/pink gradient shimmer — adapted from .lb-hero__headlineLine--grad */
.lb-lane-accent {
position: relative;
font-weight: 600;
padding-bottom: 1px;
background: linear-gradient(92deg, #FFB2E6 0%, #FF4FBF 32%, #B968FF 62%, #4F66FF 100%);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: lb-lane-hl-shimmer 6.5s ease-in-out infinite;
}
/* Light-bleed underline — adapted from .lb-hero__hl::after */
.lb-lane-accent::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
border-radius: 1px;
background: linear-gradient(90deg, transparent, rgba(79,102,255,.5) 20%, rgba(255,79,191,.65) 80%, transparent);
box-shadow: 0 0 6px rgba(255,79,191,.35);
opacity: 0.8;
}
@keyframes lb-lane-hl-shimmer {
0%, 100% { background-position: 100% 0; }
50% { background-position: 0% 0; }
}
.lb-lane-sub {
font-size: 13px;
color: rgba(247,244,255,.48);
}
/* Plain pearl/white emphasis — no gradient, no underline. Used for single
words that just need to read clearly against .lb-lane-sub's muted tone. */
.lb-lane-emphasis {
color: #F7F4FF;
font-weight: 600;
}
.lb-lane-countdown {
font-size: 12px;
color: rgba(247,244,255,.5);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* Same light-bleed underline as .lb-lane-accent::after, reused verbatim, but
on plain pearl/white text instead of the gradient fill — restrained
emphasis for the dynamic duration, not another colorful accent. */
.lb-lane-countdown__time {
position: relative;
color: #F7F4FF;
font-weight: 700;
padding-bottom: 1px;
}
.lb-lane-countdown__time::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
border-radius: 1px;
background: linear-gradient(90deg, transparent, rgba(79,102,255,.5) 20%, rgba(255,79,191,.65) 80%, transparent);
box-shadow: 0 0 6px rgba(255,79,191,.35);
opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
.lb-lane-accent { animation: none; background-position: 0% 0; }
}
.lb-feed-placeholder__default > .lb-post-card {
justify-self: stretch;
width: 100%;
max-width: 100%;
}
.lb-feed-placeholder__signals {
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr);
}
.lb-feed-placeholder__signals > .lb-post-card {
width: 100%;
min-width: 0;
}
/* ── Pinned post strip ───────────────────────────────────────────────────── */
.lb-post-card__pinnedStrip {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(247,244,255,.5);
padding: 0 2px 10px;
}
.lb-post-card__pinnedStrip::before {
content: '📌';
font-size: 11px;
filter: hue-rotate(300deg) saturate(2) brightness(1.1);
}
.lb-post-card--pinned {
border-color: rgba(0,224,211,.22);
background:
linear-gradient(rgba(12,16,27,.94), rgba(12,16,27,.94)) padding-box,
linear-gradient(116deg, rgba(0,224,211,.28), rgba(79,102,255,.2), rgba(255,79,191,.18)) border-box;
}
/* ─────────────────────────────────────────────────────────────────────────── */
.lb-post-card {
margin-top: 12px;
width: 100%;
max-width: 100%;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.07);
background: #0F1119;
padding: 14px;
text-align: left;
overflow: hidden;
}
.lb-post-card__head {
display: flex;
align-items: flex-start;
gap: 11px;
}
.lb-post-card__identity {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.lb-post-card__nameRow {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.lb-post-card__author {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
color: inherit;
text-decoration: none;
cursor: pointer;
border-radius: 999px;
transition: box-shadow .2s ease;
}
.lb-post-card__author:hover,
.lb-post-card__author:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.2);
}
.lb-post-card__avatar {
position: relative;
width: 44px;
height: 44px;
border-radius: 999px;
flex: 0 0 auto;
background:
radial-gradient(circle at 50% 30%, rgba(247,244,255,.9) 0 18%, transparent 19%),
radial-gradient(circle at 50% 78%, rgba(247,244,255,.9) 0 30%, transparent 31%),
linear-gradient(140deg, rgba(255,79,191,.58), rgba(79,102,255,.58));
}
.lb-post-card__avatar::before {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
padding: 2px;
background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.lb-post-card__handle {
margin: 0;
color: #F7F4FF;
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 3px;
background-image: linear-gradient(105deg, #FF4FBF, #CF57E8 40%, #4F66FF 70%, #00E0D3);
background-size: 100% 1px;
background-position: 0 calc(100% - 1px);
background-repeat: no-repeat;
}
.lb-post-card__time {
margin: 0 0 0 auto;
color: rgba(247,244,255,.44);
font-size: 12px;
flex: 0 0 auto;
white-space: nowrap;
}
.lb-post-card__crushBadge {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
color: #F7F4FF;
white-space: nowrap;
}
.lb-post-card__crushBadge-icon {
font-size: 11px;
}
.lb-post-card__crushBadge-state {
font-weight: 700;
background: linear-gradient(105deg, #FF4FBF, #CF57E8 38%, #4F66FF 72%, #00E0D3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.lb-post-card__datingStatus {
min-height: 22px;
border-radius: 999px;
border: 1px solid rgba(0,224,211,.28);
background: rgba(11,16,28,.8);
color: rgba(173,255,247,.9);
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
padding: 0 8px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* .lb-post-snapshot / __badge / __chip: shared with .lb-tea-card and thread
comments — kept as the original pill treatment, out of scope for this port. */
.lb-post-snapshot {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
align-self: center;
}
.lb-post-snapshot__badge {
min-height: 22px;
border-radius: 999px;
border: 1px solid rgba(255,79,191,.38);
background: rgba(11,16,28,.8);
color: rgba(255,198,236,.94);
font-size: 11px;
font-weight: 600;
padding: 0 8px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.lb-post-snapshot__badge--closed {
border-color: rgba(255,80,80,.32);
color: rgba(255,180,180,.9);
}
.lb-post-snapshot__chip {
min-height: 20px;
border-radius: 999px;
border: 1px solid rgba(0,224,211,.34);
background: rgba(10,14,24,.7);
color: rgba(247,244,255,.9);
font-size: 10px;
font-weight: 600;
padding: 0 7px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* .lb-post-card__snapshotLine: the V10 compact Dating Snapshot line —
dot-separated plain text, distinct from the pill-based .lb-post-snapshot
above so this port doesn't bleed into the tea-card/thread-comment reuse. */
.lb-post-card__snapshotLine {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 12px;
font-weight: 400;
color: rgba(247,244,255,.8);
letter-spacing: .01em;
}
.lb-post-card__snapshotChip {
white-space: nowrap;
}
.lb-post-card__snapshotChip:not(:first-child)::before {
content: '·';
display: inline-block;
margin: 0 6px;
font-weight: 700;
}
.lb-post-card__snapshotChip:nth-of-type(3n+2)::before {
color: #FF4FBF;
}
.lb-post-card__snapshotChip:nth-of-type(3n)::before {
color: #CF57E8;
}
.lb-post-card__snapshotChip:nth-of-type(3n+1)::before {
color: #4F66FF;
}
.lb-post-card__labels {
margin-top: 11px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lb-post-card__labelChip {
min-height: 22px;
border-radius: 999px;
border: 1px solid rgba(180,109,255,.34);
background: rgba(180,109,255,.05);
color: rgba(247,244,255,.9);
font-size: 11px;
font-weight: 500;
letter-spacing: .02em;
padding: 0 9px;
display: inline-flex;
align-items: center;
}
.lb-post-card__bodyWrap {
margin-top: 11px;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
gap: 10px;
align-items: start;
}
/* Poke/Tip/Crush lives inside the SAME main column as the post text (a grid
child of bodyWrap, rather than a plain sibling after it) so the right
column is free for the rail alone. Ghost Byte shares these exact classes
and its footer is nested inside bodyWrap the same way Normal Byte's is.
Canonical rail geometry (2026-08-30, two-column architecture, revised):
the rail's three controls (--lb-rail-action-height each) plus two equal
gaps between them (--lb-rail-gap) give a calculated minimum vertical
footprint (--lb-rail-zone-min). The 42px touch target stays (kept per
founder direction), but the gap is not a locked product value — the
visual source never specifies a pixel gap for this rail at all, only
color states — so it's set here to 6px, the smallest gap already used
for comparable icon spacing elsewhere on this exact card
(.lb-reaction-chip's own gap), giving a floor of 3×42 + 2×6 = 138px
rather than 150px. That is a real but modest reduction: the dominant
term is the three 42px targets themselves (126px on their own), so gap
alone cannot make the floor small — only shrinking the targets would
meaningfully do that, which is explicitly not being done here.
The earlier two attempts each broke a different requirement because they
put the rail's floor in the wrong place:
- Sharing row 1 with the content column (row 1 = max(content, floor))
kept the footer separation correct but visibly inflated the gap
between reactions and the footer on short posts.
- Pulling the rail out of row 1 entirely (position:absolute, sized to
content's own natural row) kept the card compact but let the rail's
floor overflow past its now-shrunken box, hanging Comment/Save down
into the footer's own row.
The fix: content and the footer keep their own natural, unchanged
heights and gap (row 1 = content, row 2 = footer, with the same 10px gap
between them as before — nothing about the main column's flow changes).
A third, empty row absorbs whatever extra height the rail's floor needs
beyond what content+footer already provide, via a 1fr track and
min-height on the grid container — a standard "sticky footer" grid
pattern. The rail spans all three rows (column 2 only, so it never sits
under the footer's own pills in column 1) and stretches to fill that
combined height exactly. On a short post this means: the visible content
flow is exactly as compact as its own text/reactions/footer require, and
the rail's unavoidable extra reach lands in the empty space *after* the
footer, not between it and the reactions. */
:is(.lb-post-card, .lb-tea-card) .lb-post-card__bodyWrap {
--lb-rail-action-height: 42px;
--lb-rail-gap: 6px;
--lb-rail-zone-min: calc(var(--lb-rail-action-height) * 3 + var(--lb-rail-gap) * 2);
grid-template-rows: max-content max-content minmax(0, 1fr);
row-gap: 0;
min-height: var(--lb-rail-zone-min);
}
:is(.lb-post-card, .lb-tea-card) .lb-post-card__contentCol {
grid-column: 1;
grid-row: 1;
margin-bottom: 10px;
}
:is(.lb-post-card, .lb-tea-card) .lb-post-footer__standardRail {
grid-column: 2;
grid-row: 1 / span 3;
justify-self: end;
/* Stretches to fill the full column-2 span (content + footer + the
trailing filler row), which min-height above guarantees is always at
least --lb-rail-zone-min — so the flex centering below always has
exactly enough room, never more, never less. */
align-self: stretch;
}
:is(.lb-post-card, .lb-tea-card) .lb-post-footer {
grid-column: 1;
grid-row: 2;
align-self: start;
margin-top: 0;
}
.lb-post-card__contentCol {
min-width: 0;
display: grid;
gap: 9px;
padding-right: 2px;
}
.lb-post-card__body {
margin: 0;
color: #FFFFFF;
font-size: 15.5px;
line-height: 1.52;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.lb-post-card__media {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
}
.lb-post-card__media img {
max-width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.12);
cursor: zoom-in;
}
/* Exactly two images: fixed two-column grid of equal square cells so mixed
portrait/landscape pairs align instead of rendering at mismatched heights. */
.lb-post-card__media:has(> img:first-child:nth-last-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
.lb-post-card__media:has(> img:first-child:nth-last-child(2)) img {
aspect-ratio: 1 / 1;
height: 100%;
object-fit: cover;
}
.lb-post-footer {
margin-top: 10px;
display: grid;
gap: 8px;
}
.lb-post-footer__reactions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lb-reaction-chip {
min-height: 38px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(13,18,31,.86);
color: rgba(247,244,255,.9);
padding: 4px 8px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
/* Reaction-chip port (V6/V10 three-state system). Ghost Byte shares
.lb-reaction-chip/--add/is-engaged/--mine-introduced for its own reaction
row and now gets this same flat-dark treatment too, as of the Ghost Byte
Outer Card Port (2026-08-29) — no more Ghost-specific exception. */
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip {
border: 1px solid rgba(228,226,246,.42);
background: #0C101B;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
padding: 0 11px;
}
.lb-reaction-chip:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.38);
box-shadow: 0 0 12px rgba(79,102,255,.16);
}
.lb-reaction-chip.is-engaged {
border-color: rgba(255,79,191,.5);
box-shadow: 0 0 12px rgba(255,79,191,.18), 0 0 12px rgba(79,102,255,.16);
}
/* Owner-only marker: the viewer's own currently active INTRODUCED Reaction
lane -- the one they'd need to remove before introducing another. Reuses
the same teal accent already used for the Reaction system's eligibility
pills (see .lb-crush-btn-adjacent gradient pills in the Crush milestone
views) so it reads as part of the same visual language rather than a new
system. Deliberately subtle: border-color + box-shadow only, no size
change, and placed after .is-engaged so it stays visible even though a
viewer's introduced lane is always also a joined (is-engaged) lane. */
.lb-reaction-chip.lb-reaction-chip--mine-introduced {
border-color: rgba(0,224,211,.62);
box-shadow: 0 0 10px rgba(0,224,211,.4);
}
/* Normal Byte: no standalone teal selected-state. Both signals for "this is
the current viewer's own reaction" — Feed's .is-engaged and Profile/Public
Profile's .lb-reaction-chip--mine-introduced (Feed's reactions can carry
both at once; Profile/Public Profile only ever set the latter, so both
selectors need the full treatment independently) — get the same approved
gradient/glow, overriding the flat pink/teal rules above for this card. */
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip.is-engaged,
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip.lb-reaction-chip--mine-introduced {
border: 1px solid transparent;
background:
linear-gradient(#150F1D, #150F1D) padding-box,
linear-gradient(105deg, #FF4FBF, #CF57E8 40%, #4F66FF 70%, #00E0D3) border-box;
box-shadow:
0 0 20px rgba(255,79,191,.34),
0 0 34px rgba(180,109,255,.16),
0 0 44px rgba(0,224,211,.07);
}
.lb-reaction-chip__emoji {
width: 30px;
height: 30px;
font-size: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip__emoji {
width: auto;
height: auto;
font-size: 15px;
}
.lb-reaction-chip--add {
position: relative;
width: 34px;
justify-content: center;
padding: 0;
border-color: rgba(255,255,255,.2);
background: rgba(10,15,24,.9);
}
/* Founder-supplied: the tiny crisp sparkle from the approved design is a
pseudo-element on the chip itself, not a separate DOM element — missed in
the earlier source inspection because it only walked real .children,
which never includes ::before/::after content. */
.lb-reaction-chip--add::after {
content: '';
position: absolute;
top: -1px;
left: 26%;
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,.95);
box-shadow: 0 0 6px rgba(214,208,255,.9), 0 0 2px rgba(255,255,255,.8);
}
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip--add {
border-color: rgba(255,255,255,.12);
background: rgba(12,16,27,.7);
}
.lb-reaction-chip__plusFace {
position: relative;
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
}
.lb-reaction-chip__face {
color: rgba(247,244,255,.72);
font-size: 15px;
line-height: 1;
}
.lb-reaction-chip__plus {
position: absolute;
right: -5px;
bottom: -5px;
width: 12px;
height: 12px;
border-radius: 999px;
/* Founder correction, exact values pulled from the approved visual
source: a crisp pink->purple->blue->teal gradient RING (border-box),
not a flat teal border with a glow. Teal survives here deliberately as
the gradient's final stop — it's the flat standalone teal border/glow
that was wrong, not teal appearing at all. No box-shadow/text-shadow in
the source — the accent reads as a tiny crisp ring, not a blurred glow. */
border: 1px solid transparent;
background:
linear-gradient(rgb(10,15,24), rgb(10,15,24)) padding-box,
linear-gradient(105deg, rgb(255,79,191), rgb(207,87,232) 40%, rgb(79,102,255) 70%, rgb(0,224,211)) border-box;
color: rgb(247,244,255);
font-size: 9px;
font-weight: 700;
display: grid;
place-items: center;
}
.lb-reaction-chip--sticker {
padding: 4px 8px;
gap: 6px;
position: relative;
overflow: visible;
}
.lb-chip-expand {
position: absolute;
top: -7px;
right: -7px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(11, 16, 27, 0.92);
color: rgba(247, 244, 255, 0.85);
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
z-index: 2;
line-height: 1;
}
.lb-sticker-modal {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(5, 8, 16, 0.74);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.lb-sticker-modal__box {
position: relative;
background: rgba(11, 16, 27, 0.97);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 20px 16px 16px;
display: grid;
gap: 10px;
justify-items: center;
max-width: min(260px, 80vw);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.lb-sticker-modal__img {
width: min(200px, 70vw);
height: auto;
display: block;
border-radius: 8px;
}
.lb-sticker-modal__label {
font-size: 13px;
color: rgba(247, 244, 255, 0.68);
text-align: center;
line-height: 1.35;
word-break: break-word;
}
.lb-sticker-modal__close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: rgba(247, 244, 255, 0.6);
font-size: 22px;
cursor: pointer;
padding: 4px 6px;
line-height: 1;
}
.lb-reaction-chip--sticker img {
width: 30px;
height: 30px;
border-radius: 7px;
object-fit: cover;
display: block;
}
.lb-reaction-chip--sticker .lb-reaction-chip__count {
font-size: 12px;
font-weight: 700;
line-height: 1;
}
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip--sticker .lb-reaction-chip__count {
font-size: 11.5px;
font-weight: 600;
color: rgba(247,244,255,.7);
}
.lb-reaction-chip--imageEmoji img {
width: 18px;
height: 18px;
border-radius: 5px;
object-fit: cover;
display: block;
}
.lb-reaction-chip__count {
font-size: 12px;
font-weight: 700;
line-height: 1;
}
:is(.lb-post-card, .lb-tea-card) .lb-reaction-chip__count {
font-size: 11.5px;
font-weight: 600;
color: rgba(247,244,255,.7);
}
.lb-sticker-preview {
position: fixed;
z-index: 200;
pointer-events: none;
background: rgba(11, 16, 27, 0.94);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 8px;
display: grid;
gap: 5px;
justify-items: center;
width: 120px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.lb-sticker-preview img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
}
.lb-sticker-preview__label {
font-size: 11px;
color: rgba(247, 244, 255, 0.68);
text-align: center;
line-height: 1.3;
word-break: break-word;
}
/* Canonical rail geometry (2026-08-30): one centered vertical cluster of
three equally-spaced controls, confined to the content row (see the
grid-row:1 rule above) — not stretched across the card's full height and
never including the footer row in its alignment box. Shared identically
by Normal Byte and Ghost Byte. */
/* Sized entirely by the absolute-positioned inset:0 override above (its
containing block is the 34px-wide grid column), so no width/justify-self
is needed here — this rule only owns the internal centering of the three
buttons within whatever box that resolves to. */
.lb-post-footer__standardRail {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--lb-rail-gap, 12px);
width: 34px;
}
.lb-rail-action {
width: 34px;
min-height: var(--lb-rail-action-height, 42px);
border-radius: 0;
border: none;
background: transparent;
color: rgba(247,244,255,.72);
padding: 0;
display: grid;
justify-content: center;
justify-items: center;
gap: 3px;
cursor: pointer;
transition: color .2s ease, text-shadow .2s ease, transform .16s ease;
}
.lb-rail-action:hover,
.lb-signal-action:hover {
transform: translateY(-1px);
}
.lb-rail-action:hover {
color: rgba(247,244,255,.95);
text-shadow: 0 0 10px rgba(79,102,255,.24), 0 0 8px rgba(255,79,191,.2);
}
.lb-rail-action__icon {
font-size: 17px;
line-height: 1;
}
.lb-rail-action__iconSvg {
width: 24px;
height: 24px;
display: block;
}
.lb-rail-action__iconSvg path {
fill: currentColor;
transition: fill .24s ease;
}
.lb-rail-action.is-engaged {
color: #fff;
text-shadow:
0 0 10px rgba(77,150,255,.32),
0 0 10px rgba(255,103,198,.28),
0 0 10px rgba(69,224,209,.24);
}
.lb-rail-action.is-engaged .lb-rail-action__iconSvg {
filter:
drop-shadow(0 0 8px rgba(77,150,255,.32))
drop-shadow(0 0 10px rgba(255,103,198,.24))
drop-shadow(0 0 9px rgba(69,224,209,.22));
}
.lb-rail-action.is-engaged .lb-rail-action__count {
color: rgba(255,255,255,.98);
}
/* Engaged treatment for Like/Save is a flat brand color per type, no glow
(per visual source: literal fill="#FF4FBF" / "#4D96FF", no gradient, no
text-shadow). Ghost Byte's prior white+triple-glow gradient fill was
retired at the Ghost Byte Outer Card Port (2026-08-29) for visual parity. */
:is(.lb-post-card, .lb-tea-card) .lb-rail-action[data-action-type="react"].is-engaged {
color: #FF4FBF;
text-shadow: none;
}
:is(.lb-post-card, .lb-tea-card) .lb-rail-action[data-action-type="save"].is-engaged {
color: #4D96FF;
text-shadow: none;
}
:is(.lb-post-card, .lb-tea-card) .lb-rail-action.is-engaged .lb-rail-action__iconSvg {
filter: none;
}
:is(.lb-post-card, .lb-tea-card) .lb-rail-action.is-engaged .lb-rail-action__count {
color: rgba(247,244,255,.8);
}
.lb-rail-action__icon--bookmark {
width: 11px;
height: 14px;
display: inline-block;
border: 1.6px solid currentColor;
border-bottom: none;
border-radius: 2px 2px 0 0;
position: relative;
}
.lb-rail-action__icon--bookmark::after {
content: "";
position: absolute;
left: -1.6px;
right: -1.6px;
bottom: -5px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid currentColor;
}
.lb-rail-action__count {
font-size: 11px;
font-weight: 600;
letter-spacing: .01em;
line-height: 1;
color: rgba(247,244,255,.8);
}
.lb-post-footer__row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.lb-post-footer__row--signals {
margin-top: 1px;
}
.lb-signal-action {
position: relative;
min-height: 40px;
border-radius: 12px;
border: 1px solid rgba(240,238,255,.66);
background: #0C101B;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
color: rgba(247,244,255,.92);
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
transition: box-shadow .2s ease;
}
/* Founder correction: tiny crisp sparkle on the pill's top edge, present in
the approved visual source (found as ::after on this exact pill span —
left position measured consistently at ~23.5% across every pill width
tested there) but absent from the shipped implementation. Visual-only,
no engagement-state logic involved. */
.lb-signal-action::after {
content: '';
position: absolute;
top: -1px;
left: 23.5%;
width: 3px;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,.92);
box-shadow: 0 0 5px rgba(206,198,255,.85);
}
.lb-signal-action__icon {
font-size: 13px;
line-height: 1;
}
.lb-signal-action__label {
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
}
/* Signal count+label ("1 poke", "4 crushes") must stay a single horizontal
unit at every supported width -- the shared rule above has no white-space
control, so at narrow widths the two-word count strings wrap onto a
second line inside the label span. Ghost Byte shares this exact class and
now gets this same compact geometry too, as of the Ghost Byte Outer Card
Port (2026-08-29). */
:is(.lb-post-card, .lb-tea-card) .lb-signal-action {
padding: 0 5px;
gap: 3px;
flex-wrap: nowrap;
min-width: 0;
}
:is(.lb-post-card, .lb-tea-card) .lb-signal-action__icon {
font-size: 12px;
flex: 0 0 auto;
}
:is(.lb-post-card, .lb-tea-card) .lb-signal-action__label {
font-size: 11px;
letter-spacing: -.01em;
white-space: nowrap;
}
.lb-signal-action.is-engaged {
border: 1px solid transparent;
background:
linear-gradient(#150F1D, #150F1D) padding-box,
linear-gradient(105deg, #FF4FBF, #CF57E8 40%, #4F66FF 70%, #00E0D3) border-box;
box-shadow:
0 0 18px rgba(255,79,191,.28),
0 0 30px rgba(0,224,211,.09);
}
.lb-signal-action.is-engaged .lb-signal-action__icon,
.lb-signal-action.is-engaged .lb-signal-action__label {
color: #ffffff;
}
.lb-rail-action:focus-visible,
.lb-signal-action:focus-visible,
.lb-reaction-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24);
}
.lb-tea-empty {
border-radius: 14px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(10,14,24,.54);
padding: 18px 14px;
text-align: center;
}
.lb-tea-empty__title {
margin: 0;
font-size: 14px;
color: rgba(247,244,255,.92);
font-weight: 600;
}
.lb-tea-empty__copy {
margin: 6px 0 12px;
color: rgba(247,244,255,.7);
font-size: 13px;
}
/* V17a asleep-panel treatment (2026-08-30, founder-approved) — scoped to
.lb-tea-empty--closed only (not the shared .lb-tea-empty base) so the
separate "nobody's sent one yet" open-window empty card, which reuses
that base class, is untouched. Retires the old teal outer border/glow
entirely in favor of a neutral pearl hairline + soft drop shadow. */
.lb-tea-empty--closed {
position: relative;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(228,226,246,.16);
background: linear-gradient(180deg, rgba(19,20,32,.94), rgba(11,12,20,.96));
box-shadow: 0 18px 44px -28px rgba(0,0,0,.9);
padding: 26px 32px;
display: grid;
gap: 10px;
justify-items: center;
}
/* Quiet decorative top highlight — a surface reflection, not another
border. z-index 0 keeps it in the same background layer as the zzz
marks, behind the text (which sets z-index:1 below). */
.lb-tea-empty--closed::before {
content: '';
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(228,226,246,.5), rgba(207,87,232,.42), transparent);
z-index: 0;
pointer-events: none;
}
.lb-tea-empty--closed p {
position: relative;
z-index: 1;
}
.lb-tea-empty--closed .lb-tea-empty__title {
font-family: var(--font-ui);
font-weight: 500;
font-size: 15px;
line-height: 1.3;
margin: 0;
}
.lb-tea-empty--closed .lb-tea-empty__copy {
font-family: var(--font-ui);
font-weight: 400;
font-size: 13px;
line-height: 1.4;
color: rgba(247,244,255,.62);
margin: 0;
}
@keyframes lb-snooze-drift {
0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
15% { opacity: 1; }
85% { opacity: .5; }
100% { transform: translate(var(--snooze-dx, 6px), -34px) rotate(var(--snooze-rot, 10deg)); opacity: 0; }
}
/* V17b pearl z-drift (2026-08-30, founder-approved) — recolored off yellow
onto the same neutral pearl family as the hairline/specular above, so the
marks read as animated surface texture rather than a fourth hue. No
text-shadow/glow: a glow reads as another accent, and the brief for
these is specifically "add no new hue." Per-particle color alpha varies
slightly (.13-.20) below for the same subtle staggering the existing
size/timing/position values already give each mark. */
.lb-tea-particle {
position: absolute;
z-index: 0;
font-size: 10px;
font-style: italic;
font-weight: 700;
color: rgba(228,226,246,.16);
pointer-events: none;
user-select: none;
animation: lb-snooze-drift var(--snooze-dur, 5s) ease-in-out infinite;
will-change: transform, opacity;
opacity: 0;
}
.lb-tea-particle--1 {
left: 10%;
bottom: 14%;
font-size: 11px;
color: rgba(228,226,246,.18);
--snooze-dx: 5px;
--snooze-rot: 12deg;
--snooze-dur: 4.8s;
animation-delay: 0s;
}
.lb-tea-particle--2 {
right: 12%;
bottom: 20%;
font-size: 9px;
color: rgba(228,226,246,.14);
--snooze-dx: -4px;
--snooze-rot: -9deg;
--snooze-dur: 5.4s;
animation-delay: 1.8s;
}
.lb-tea-particle--3 {
left: 48%;
bottom: 8%;
font-size: 10px;
color: rgba(228,226,246,.20);
--snooze-dx: 3px;
--snooze-rot: 7deg;
--snooze-dur: 4.4s;
animation-delay: 3.2s;
}
.lb-tea-particle--4 {
left: 24%;
bottom: 20%;
font-size: 12px;
color: rgba(228,226,246,.13);
--snooze-dx: -5px;
--snooze-rot: -11deg;
--snooze-dur: 5.6s;
animation-delay: 1.1s;
}
.lb-tea-particle--5 {
right: 28%;
bottom: 12%;
font-size: 9px;
color: rgba(228,226,246,.15);
--snooze-dx: 4px;
--snooze-rot: 9deg;
--snooze-dur: 4.9s;
animation-delay: 2.2s;
}
.lb-tea-particle--6 {
left: 64%;
bottom: 18%;
font-size: 11px;
color: rgba(228,226,246,.17);
--snooze-dx: -3px;
--snooze-rot: -7deg;
--snooze-dur: 5.2s;
animation-delay: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
.lb-tea-particle {
animation: none;
opacity: 0;
}
}
.lb-tea-empty--open {
position: relative;
overflow: hidden;
}
.lb-tea-empty--open p,
.lb-tea-empty--open button {
position: relative;
z-index: 1;
}
.lb-moon-particle {
position: absolute;
z-index: 0;
font-size: 14px;
color: rgba(255,220,60,.85);
text-shadow: 0 0 10px rgba(255,220,60,.55);
pointer-events: none;
user-select: none;
animation: lb-snooze-drift var(--snooze-dur, 5s) ease-in-out infinite;
will-change: transform, opacity;
opacity: 0;
}
.lb-moon-particle--1 {
left: 8%;
bottom: 18%;
font-size: 15px;
--snooze-dx: 4px;
--snooze-rot: 8deg;
--snooze-dur: 5.2s;
animation-delay: 0s;
}
.lb-moon-particle--2 {
right: 10%;
bottom: 14%;
font-size: 12px;
--snooze-dx: -3px;
--snooze-rot: -6deg;
--snooze-dur: 6s;
animation-delay: 2s;
}
.lb-moon-particle--3 {
left: 44%;
bottom: 10%;
font-size: 11px;
color: rgba(255,220,60,.85);
text-shadow: 0 0 8px rgba(255,220,60,.5);
--snooze-dx: 5px;
--snooze-rot: 11deg;
--snooze-dur: 4.6s;
animation-delay: 3.6s;
}
.lb-moon-particle--4 {
left: 22%;
bottom: 22%;
font-size: 13px;
--snooze-dx: -4px;
--snooze-rot: -10deg;
--snooze-dur: 5.6s;
animation-delay: 0.9s;
}
.lb-moon-particle--5 {
right: 26%;
bottom: 16%;
font-size: 10px;
color: rgba(255,220,60,.85);
text-shadow: 0 0 8px rgba(255,220,60,.5);
--snooze-dx: 3px;
--snooze-rot: 6deg;
--snooze-dur: 4.9s;
animation-delay: 2.4s;
}
.lb-moon-particle--6 {
left: 66%;
bottom: 20%;
font-size: 14px;
--snooze-dx: -5px;
--snooze-rot: -8deg;
--snooze-dur: 5.8s;
animation-delay: 1.5s;
}
@media (prefers-reduced-motion: reduce) {
.lb-moon-particle {
animation: none;
opacity: 0;
}
}
.lb-tea-empty__countdown {
font-family: var(--font-ui);
margin: 0;
font-size: 26px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
display: inline-block;
color: transparent;
-webkit-text-fill-color: transparent;
/* V17a full founder-approved ramp (2026-08-30) — background-image, NOT
the background shorthand, which can reset background-clip and break
the text-paint. display:inline-block above keeps the gradient's paint
box following the actual glyph run instead of stretching across the
grid cell. */
background-image: linear-gradient(96deg, #FF8FD6 0%, #CF57E8 26%, #4F66FF 56%, #00C8D8 84%, #00E0D3 100%);
-webkit-background-clip: text;
background-clip: text;
}
.lb-tea-empty__accent {
/* V17a (2026-08-30): emphasis via weight/opacity only, not another hue —
the countdown above keeps sole ownership of chroma in this panel. */
color: rgba(247,244,255,.9);
font-weight: 600;
}
.lb-tea-empty__cta {
height: 38px;
border-radius: 999px;
border: 1px solid transparent;
background:
linear-gradient(rgba(13,17,29,.98), rgba(13,17,29,.98)) padding-box,
linear-gradient(110deg, rgba(255,79,191,.9), rgba(79,102,255,.88), rgba(0,224,211,.86)) border-box;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 0 16px;
cursor: pointer;
transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.lb-tea-empty__cta:hover {
transform: translateY(-1px);
box-shadow: 0 0 14px rgba(79,102,255,.24), 0 0 12px rgba(255,79,191,.2);
}
.lb-tea-empty__cta:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.12);
}
.lb-tea-feed {
display: grid;
gap: 10px;
}
/* Ghost Byte Outer Card Port (2026-08-29): card surface/border/radius/
padding now match the canonical .lb-post-card treatment exactly (no more
gradient border or drop shadow), while keeping position:relative for the
card's own delete button. */
.lb-tea-card {
position: relative;
margin-top: 12px;
width: 100%;
max-width: 100%;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.07);
background: #0F1119;
padding: 14px;
text-align: left;
overflow: hidden;
}
/* Ghost Byte structural correction (2026-08-29): the header is now built
from the literal Normal Post Card classes (.lb-post-card__head/__author/
__avatar/__identity/__nameRow/__handle/__time above) — no Ghost-specific
header classes remain. The delete button now flows inline in the same
right-side nameRow slot Normal uses for its menu, instead of floating as
an absolutely-positioned card-corner button. */
.lb-tea-card__deleteBtn {
flex: 0 0 auto;
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,.07);
color: rgba(201,214,248,.55);
font-size: 13px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
.lb-tea-card__deleteBtn:hover,
.lb-tea-card__deleteBtn:focus-visible {
background: rgba(255,79,191,.18);
color: rgba(255,79,191,.9);
outline: none;
}
/* Ghost Byte Outer Card Port (2026-08-29): status/expiry line modernized off
flat teal to the same neutral-lavender treatment used elsewhere in this
port — text/timing/live-expiration logic (formatExpiresIn) is unchanged.
Sits as its own restrained line directly beneath the canonical header,
per the structural correction — it does not live inside the header. */
.lb-tea-card__meta {
margin: 8px 0 0;
font-size: 11px;
color: rgba(214,208,255,.75);
}
.lb-tea-card__labels {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lb-tea-card__media {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
}
.lb-tea-card__media img {
max-width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
cursor: zoom-in;
}
/* Exactly two images: fixed two-column grid of equal square cells, same
contract as .lb-post-card__media — see that rule for the full rationale. */
.lb-tea-card__media:has(> img:first-child:nth-last-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
.lb-tea-card__media:has(> img:first-child:nth-last-child(2)) img {
aspect-ratio: 1 / 1;
height: 100%;
object-fit: cover;
}
.lb-signal[hidden] { display: none !important; }
.lb-signal {
position: fixed;
inset: 0;
z-index: 45;
}
.lb-signal__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, .62);
backdrop-filter: blur(4px);
}
.lb-signal__sheet {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 580px);
max-height: min(90vh, 780px);
overflow-y: auto;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
background:
linear-gradient(rgba(15,19,32,.96), rgba(15,19,32,.96)) padding-box,
linear-gradient(112deg, rgba(255,79,191,.34), rgba(79,102,255,.3) 55%, rgba(0,224,211,.26)) border-box;
box-shadow: 0 18px 42px rgba(5,8,16,.58), 0 0 18px rgba(79,102,255,.12), 0 0 14px rgba(255,79,191,.1);
padding: 18px;
display: grid;
gap: 12px;
}
.lb-signal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 2px;
}
.lb-signal__title {
margin: 0;
font-family: var(--font-display);
font-size: 25px;
letter-spacing: -.01em;
color: rgba(247,244,255,.98);
display: inline-flex;
align-items: center;
gap: 8px;
}
.lb-signal__titleBadge {
min-height: 20px;
padding: 0 7px;
border-radius: 999px;
border: 1px solid rgba(0,224,211,.36);
color: rgba(173,255,247,.96);
background: rgba(0,224,211,.08);
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lb-signal__cancelTop {
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.9);
font-size: 20px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.lb-signal__intro {
display: grid;
gap: 10px;
max-width: 52ch;
}
.lb-signal__copy {
margin: 0;
color: rgba(247,244,255,.84);
font-size: 14px;
line-height: 1.6;
}
.lb-signal__example {
margin: 0;
color: rgba(247,244,255,.64);
font-size: 12px;
line-height: 1.5;
font-style: italic;
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
background: rgba(10,14,24,.64);
padding: 10px 11px;
}
.lb-signal__field textarea {
width: 100%;
min-height: 124px;
border-radius: 15px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(11,16,27,.86);
color: rgba(247,244,255,.95);
font: 500 16px/1.48 var(--font-ui);
padding: 13px;
resize: vertical;
}
.lb-signal__field textarea::placeholder {
color: rgba(247,244,255,.54);
}
.lb-signal__field textarea:focus-visible,
.lb-signal__send:focus-visible,
.lb-signal__cancel:focus-visible,
.lb-signal__cancelTop:focus-visible,
.lb-signal__toolBtn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-signal__field textarea:focus-visible {
border-color: rgba(255,79,191,.58);
box-shadow:
0 0 0 2px rgba(0,224,211,.22),
0 0 0 4px rgba(0,224,211,.08),
0 0 14px rgba(255,79,191,.18);
}
.lb-signal__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.lb-signal__toolButtons {
display: inline-flex;
align-items: center;
gap: 8px;
}
.lb-signal__toolBtn {
width: 38px;
height: 38px;
border-radius: 11px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(13,18,31,.86);
color: rgba(247,244,255,.78);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease, color .2s ease;
}
.lb-signal__toolBtn:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.42);
box-shadow: 0 0 12px rgba(79,102,255,.2), 0 0 10px rgba(255,79,191,.14);
}
.lb-signal__toolBtn.is-active {
border-color: rgba(255,79,191,.48);
color: rgba(255,224,244,.98);
box-shadow: 0 0 14px rgba(255,79,191,.2), 0 0 14px rgba(79,102,255,.18);
}
.lb-signal__metaCount {
margin: 0;
color: rgba(247,244,255,.58);
font-size: 12px;
letter-spacing: .02em;
}
.lb-signal__labels {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lb-signal__toolHint {
margin: 0;
color: rgba(247,244,255,.54);
font-size: 12px;
}
.lb-signal__error {
margin: 0;
color: rgba(255,178,230,.92);
font-size: 12px;
min-height: 16px;
}
.lb-signal__preview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 8px;
max-height: 200px;
overflow: hidden;
}
.lb-signal__metaBlock {
display: grid;
gap: 8px;
}
.lb-signal__meta,
.lb-signal__time {
margin: 0;
color: rgba(247,244,255,.66);
font-size: 12px;
}
.lb-signal__expiry {
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(255,79,191,.28);
background: rgba(255,79,191,.08);
color: rgba(255,178,230,.94);
font-size: 12px;
}
.lb-signal__expiryMoon {
color: #00E0D3;
font-size: 11px;
text-shadow: 0 0 8px rgba(0,224,211,.4);
}
.lb-signal__time {
color: rgba(173,255,247,.82);
}
.lb-signal__foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 2px;
}
.lb-signal__send,
.lb-signal__cancel {
min-height: 42px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.lb-signal__send {
min-width: 136px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(18,22,34,.84);
color: rgba(247,244,255,.76);
cursor: not-allowed;
opacity: .88;
}
.lb-signal__send:not(:disabled) {
cursor: pointer;
color: #fff;
border-color: transparent;
background: linear-gradient(105deg, #FF4FBF 0%, #D95CE0 42%, #4F66FF 100%);
box-shadow: 0 8px 20px rgba(255,79,191,.24), 0 8px 20px rgba(79,102,255,.22);
}
.lb-signal__send:not(:disabled):hover {
filter: brightness(1.06);
}
.lb-signal__cancel {
min-width: 96px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(12,16,27,.8);
color: rgba(247,244,255,.9);
}
.lb-reaction-picker[hidden] { display: none !important; }
.lb-reaction-picker {
position: fixed;
inset: 0;
z-index: 47;
}
.lb-reaction-picker__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, .56);
backdrop-filter: blur(4px);
}
.lb-reaction-picker__panel {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 520px);
border-radius: 16px;
border: 1px solid rgba(255,255,255,.12);
background:
linear-gradient(rgba(14,18,31,.96), rgba(14,18,31,.96)) padding-box,
linear-gradient(112deg, rgba(255,79,191,.28), rgba(79,102,255,.26) 56%, rgba(0,224,211,.22)) border-box;
box-shadow: 0 16px 36px rgba(5,8,16,.56), 0 0 16px rgba(79,102,255,.12);
padding: 12px;
display: grid;
gap: 10px;
max-height: min(78vh, 620px);
overflow: hidden;
}
.lb-reaction-picker__head {
display: flex;
align-items: center;
justify-content: space-between;
}
.lb-reaction-picker__title {
margin: 0;
font-size: 16px;
color: rgba(247,244,255,.94);
font-weight: 700;
}
.lb-reaction-picker__close {
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.9);
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.lb-reaction-picker__tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.lb-reaction-picker__tab {
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.76);
color: rgba(247,244,255,.84);
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
}
.lb-reaction-picker__tab.is-active {
border-color: rgba(0,224,211,.42);
color: rgba(247,244,255,.98);
box-shadow: 0 0 0 1px rgba(0,224,211,.2) inset, 0 0 10px rgba(79,102,255,.18);
}
.lb-reaction-picker__grid {
display: grid;
gap: 10px;
min-height: 0;
max-height: calc(min(78vh, 620px) - 64px);
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(0,224,211,.55) rgba(255,255,255,.08);
}
.lb-reaction-picker__grid::-webkit-scrollbar {
width: 8px;
}
.lb-reaction-picker__grid::-webkit-scrollbar-track {
background: rgba(255,255,255,.08);
border-radius: 999px;
}
.lb-reaction-picker__grid::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(0,224,211,.78), rgba(79,102,255,.72));
border-radius: 999px;
border: 1px solid rgba(10,14,24,.55);
}
.lb-reaction-picker__category {
display: grid;
gap: 6px;
}
.lb-reaction-picker__categoryTitle {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(173,255,247,.88);
}
.lb-reaction-picker__categoryRow {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
.lb-reaction-picker__option {
width: 40px;
height: 40px;
min-height: 40px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(12,16,27,.84);
font-size: 20px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
flex: 0 0 auto;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-reaction-picker__option:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.4);
box-shadow: 0 0 10px rgba(79,102,255,.2);
}
.lb-reaction-picker__close:focus-visible,
.lb-reaction-picker__tab:focus-visible,
.lb-reaction-picker__option:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-reaction-picker__optionImage {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
}
.lb-reaction-picker__option--customSticker {
width: 72px;
height: 72px;
min-height: 72px;
padding: 0;
border-radius: 8px;
overflow: hidden;
background: rgba(15,20,32,.92);
}
.lb-reaction-picker__optionImage--customSticker {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
display: block;
}
.lb-tip-modal[hidden] { display: none !important; }
.lb-tip-modal {
position: fixed;
inset: 0;
z-index: 46;
}
.lb-tip-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 8, 16, .62);
backdrop-filter: blur(4px);
}
.lb-tip-modal__sheet {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 460px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,.12);
background:
linear-gradient(rgba(14,18,31,.96), rgba(14,18,31,.96)) padding-box,
linear-gradient(112deg, rgba(255,79,191,.3), rgba(79,102,255,.28) 56%, rgba(0,224,211,.24)) border-box;
box-shadow: 0 18px 40px rgba(5,8,16,.58), 0 0 18px rgba(79,102,255,.12), 0 0 14px rgba(255,79,191,.1);
padding: 16px;
display: grid;
gap: 10px;
}
.lb-tip-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.lb-tip-modal__title {
margin: 0;
color: rgba(247,244,255,.98);
font: 700 22px/1.15 var(--font-display);
}
.lb-tip-modal__close {
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.9);
font-size: 20px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.lb-tip-modal__copy {
margin: 0;
color: rgba(247,244,255,.82);
font-size: 14px;
line-height: 1.5;
}
.lb-tip-modal__repeatNotice {
margin: 0;
display: flex;
align-items: flex-start;
gap: 8px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
background: rgba(10,14,24,.62);
color: rgba(247,244,255,.78);
font-size: 12px;
line-height: 1.45;
padding: 8px 10px;
}
.lb-tip-modal__repeatNotice::before {
content: '';
flex: 0 0 auto;
width: 6px;
height: 6px;
margin-top: 5px;
border-radius: 50%;
background: rgba(0,224,211,.75);
box-shadow: 0 0 6px rgba(0,224,211,.4);
}
.lb-tip-modal__providers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px;
margin-top: 2px;
}
.lb-tip-modal__providerBtn {
width: 100%;
min-height: 40px;
border-radius: 12px;
border: 1.5px solid transparent;
background:
linear-gradient(rgba(9,13,22,.94), rgba(9,13,22,.94)) padding-box,
linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
color: #fff;
font-size: 13px;
font-weight: 700;
text-align: center;
padding: 0 14px;
cursor: pointer;
box-shadow:
0 5px 0 rgba(255,79,191,.32),
0 0 18px rgba(207,87,232,.22),
0 0 12px rgba(79,102,255,.16);
transition: box-shadow .16s ease, transform .12s ease;
}
.lb-tip-modal__providerBtn:disabled {
cursor: not-allowed;
opacity: .5;
filter: grayscale(.4);
box-shadow: none;
transform: none;
}
.lb-tip-modal__providerBtn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow:
0 7px 0 rgba(255,79,191,.4),
0 0 26px rgba(207,87,232,.3),
0 0 18px rgba(79,102,255,.22);
}
.lb-tip-modal__empty {
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
background: rgba(10,14,24,.62);
padding: 10px 12px;
}
.lb-tip-modal__emptyTitle {
margin: 0;
color: rgba(247,244,255,.92);
font-size: 13px;
font-weight: 600;
}
.lb-tip-modal__emptyCopy {
margin: 4px 0 0;
color: rgba(247,244,255,.68);
font-size: 12px;
line-height: 1.45;
}
.lb-tip-modal__sub {
margin: 0;
color: rgba(247,244,255,.72);
font-size: 13px;
font-weight: 500;
}
.lb-tip-modal__note {
margin: 0;
color: rgba(200,203,214,.62);
font-size: 12px;
font-style: italic;
}
.lb-tip-modal__fine {
margin: 4px 0 0;
display: flex;
align-items: flex-start;
gap: 6px;
color: rgba(200,203,214,.66);
font-size: 12px;
line-height: 1.45;
}
.lb-tip-modal__fine::before {
content: '';
flex: 0 0 auto;
width: 5px;
height: 5px;
margin-top: 5px;
border-radius: 50%;
background: rgba(0,224,211,.7);
}
.lb-tip-modal__close:focus-visible,
.lb-tip-modal__providerBtn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-mini-toast[hidden] { display: none !important; }
/* Canonical Toast V18 shell (2026-08-30) -- ported from the founder-approved
reference (claude.ai/code/artifact/472cbded-af8f-49af-a584-d935704793ac).
Visual only: the show/hide class-toggle sequence, timers, and every call
site are unchanged. Placement replaces the old centered-pill/88px
treatment with V18's edge-inset/74px mobile rule; z-index keeps this
surface's existing proven value (10000), not the reference's placeholder. */
.lb-mini-toast {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(74px + env(safe-area-inset-bottom));
box-sizing: border-box;
border-radius: 16px;
border: 1px solid rgba(228,226,246,.16);
background: linear-gradient(180deg, rgba(19,20,32,.96), rgba(11,12,20,.97));
box-shadow: 0 18px 44px -22px rgba(0,0,0,.92);
padding: 13px 15px;
display: grid;
grid-template-columns: 16px minmax(0,1fr);
gap: 11px;
align-items: center;
overflow: hidden;
z-index: 10000;
opacity: 0;
transform: translateY(12px);
transition: opacity 180ms cubic-bezier(.2,.7,.2,1), transform 180ms cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.lb-mini-toast::before {
content: "";
position: absolute;
top: 0; left: 14%; right: 14%;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, rgba(228,226,246,.5), rgba(207,87,232,.42), transparent);
}
.lb-mini-toast.is-two-line { align-items: start; }
.lb-mini-toast.is-two-line .lb-mini-toast__glyph { margin-top: 2px; }
.lb-mini-toast.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 220ms cubic-bezier(.2,.7,.2,1), transform 220ms cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 640px) {
.lb-mini-toast {
left: 50%;
right: auto;
transform: translate(-50%, 12px);
bottom: 24px;
width: min(400px, calc(100vw - 32px));
}
.lb-mini-toast.is-visible { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.lb-mini-toast, .lb-mini-toast.is-visible { transition: opacity 200ms ease; transform: none; }
}
.lb-mini-toast__glyph {
position: relative;
width: 16px;
height: 16px;
display: grid;
place-items: center;
}
.lb-mini-toast__glyph.is-confirm::before,
.lb-mini-toast__glyph.is-blocked::before {
content: "";
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.lb-mini-toast__glyph.is-confirm::before {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300E0D3%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013l4.5%204.5L19%207%22%2F%3E%3C%2Fsvg%3E");
}
.lb-mini-toast__glyph.is-blocked::before {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%28247%2C244%2C255%2C.62%29%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.6%22%2F%3E%3Cpath%20d%3D%22M6.4%2017.6%2017.6%206.4%22%2F%3E%3C%2Fsvg%3E");
}
.lb-mini-toast__glyph.is-loading::before {
content: "";
width: 14px;
height: 14px;
border-radius: 999px;
border: 1.5px solid rgba(228,226,246,.2);
border-top-color: rgba(228,226,246,.85);
animation: lbMiniToastSpin .9s linear infinite;
}
@keyframes lbMiniToastSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.lb-mini-toast__glyph.is-loading::before { animation-duration: 1.8s; }
}
.lb-mini-toast__text {
position: relative;
margin: 0;
text-align: center;
font: 400 13.5px/1.45 'Space Grotesk', var(--font-ui, sans-serif);
color: rgba(247,244,255,.9);
}
.lb-menu[hidden] { display: none; }
.lb-menu {
position: fixed;
inset: 0;
z-index: 50;
}
.lb-menu__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 7, 15, .62);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity .24s ease;
}
.lb-menu__drawer {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: min(88vw, 420px);
border-right: 1px solid transparent;
background:
linear-gradient(rgba(14,18,30,.96), rgba(14,18,30,.96)) padding-box,
linear-gradient(132deg, rgba(255,79,191,.32), rgba(79,102,255,.28) 58%, rgba(0,224,211,.28)) border-box;
box-shadow: 10px 0 28px rgba(5,8,16,.56), 0 0 18px rgba(79,102,255,.16), 0 0 14px rgba(255,79,191,.12);
transform: translateX(-102%);
transition: transform .28s cubic-bezier(.2,.7,.2,1);
border-radius: 0 20px 20px 0;
display: grid;
grid-template-rows: auto 1fr auto;
padding: 14px 12px;
}
.lb-menu.is-open .lb-menu__backdrop { opacity: 1; }
.lb-menu.is-open .lb-menu__drawer { transform: translateX(0); }
.lb-menu__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 4px 4px 10px;
}
.lb-menu__brand {
display: grid;
gap: 4px;
}
.lb-menu__brand img {
height: 20px;
width: auto;
display: block;
}
.lb-menu__brand p {
margin: 0;
color: rgba(247,244,255,.6);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
}
.lb-menu__close {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.9);
font-size: 20px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}
.lb-menu__close:hover,
.lb-menu__item:hover {
transform: translateX(2px);
border-color: rgba(0,224,211,.44);
box-shadow: 0 0 10px rgba(0,224,211,.16), 0 0 8px rgba(79,102,255,.14);
}
.lb-menu__close:focus-visible,
.lb-menu__item:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-menu-identity {
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 12px;
margin: 2px 0 14px;
padding: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
background:
radial-gradient(circle at 18% 20%, rgba(255,79,191,.14), transparent 42%),
rgba(12,16,27,.7);
}
.lb-menu-identity__avatar {
width: 48px;
height: 48px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.14);
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.2), transparent 22%),
linear-gradient(135deg, rgba(255,79,191,.75), rgba(79,102,255,.7) 54%, rgba(0,224,211,.62));
box-shadow: 0 0 14px rgba(255,79,191,.16), 0 0 12px rgba(0,224,211,.1);
}
.lb-menu-identity__avatar.has-photo {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.lb-menu-identity__meta {
display: grid;
gap: 2px;
min-width: 0;
}
.lb-menu-identity__name,
.lb-menu-identity__handle {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-menu-identity__name {
color: rgba(247,244,255,.96);
font-size: 15px;
font-weight: 700;
}
.lb-menu-identity__handle {
color: rgba(247,244,255,.62);
font-size: 13px;
}
.lb-menu-identity__profile {
width: max-content;
color: rgba(173,255,247,.9);
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: color .18s ease, text-shadow .18s ease;
}
.lb-menu-identity__profile:hover,
.lb-menu-identity__profile:focus-visible {
color: #fff;
outline: none;
text-shadow: 0 0 10px rgba(0,224,211,.34);
}
.lb-menu__list {
display: grid;
gap: 8px;
align-content: start;
}
.lb-menu__section {
display: grid;
gap: 8px;
}
.lb-menu__item {
min-height: 48px;
width: 100%;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(12,16,27,.78);
color: rgba(247,244,255,.92);
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center;
gap: 10px;
padding: 0 12px;
text-align: left;
cursor: pointer;
transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
opacity: 0;
transform: translateX(-8px);
}
.lb-menu__item--link {
text-decoration: none;
}
.lb-menu__item--direct {
border-color: rgba(255,79,191,.2);
background:
linear-gradient(rgba(13,18,30,.82), rgba(13,18,30,.82)) padding-box,
linear-gradient(120deg, rgba(255,79,191,.28), rgba(79,102,255,.22), rgba(0,224,211,.2)) border-box;
}
.lb-menu__itemLabel {
font-size: 14px;
line-height: 1.25;
}
.lb-menu__item--toggle[aria-expanded="true"] {
border-color: rgba(255,79,191,.38);
background:
linear-gradient(rgba(13,18,30,.88), rgba(13,18,30,.88)) padding-box,
linear-gradient(120deg, rgba(255,79,191,.42), rgba(79,102,255,.38)) border-box;
box-shadow: 0 0 0 1px rgba(255,79,191,.12), 0 0 14px rgba(79,102,255,.16);
}
.lb-menu__chevron {
color: rgba(247,244,255,.5);
font-size: 18px;
margin-left: 4px;
transition: transform .18s ease;
}
.lb-menu__item--toggle[aria-expanded="true"] .lb-menu__chevron {
transform: rotate(90deg);
}
.lb-menu__itemIcon {
width: 18px;
height: 18px;
display: inline-block;
color: #00E0D3;
}
.lb-menu__itemIcon--settings {
position: relative;
}
.lb-menu__itemIcon--settings::before {
content: "";
position: absolute;
left: 50%;
top: 1px;
width: 9px;
height: 8px;
margin-left: -4.5px;
border: 1.6px solid currentColor;
border-bottom: none;
border-radius: 6px 6px 0 0;
}
.lb-menu__itemIcon--settings::after {
content: "";
position: absolute;
left: 3px;
right: 3px;
bottom: 2px;
height: 9px;
border-radius: 3px;
background: currentColor;
}
.lb-menu__itemIcon--profile {
border: 1.6px solid currentColor;
border-radius: 999px;
position: relative;
overflow: hidden;
}
.lb-menu__itemIcon--profile::before {
content: "";
position: absolute;
left: 50%;
top: 3.5px;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 999px;
background: currentColor;
}
.lb-menu__itemIcon--profile::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: 13px;
height: 9px;
margin-left: -6.5px;
border-radius: 999px 999px 0 0;
background: currentColor;
}
.lb-menu__itemIcon--dating {
box-sizing: border-box;
border: 3px dashed currentColor;
border-radius: 999px;
position: relative;
}
.lb-menu__itemIcon--dating::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
margin: -2.5px 0 0 -2.5px;
border-radius: 999px;
background: currentColor;
}
.lb-menu__itemIcon--help {
border: 1.6px solid currentColor;
border-radius: 999px;
position: relative;
}
.lb-menu__itemIcon--help::before {
content: "?";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.lb-menu__itemIcon--rules {
border: 1.6px solid currentColor;
border-radius: 4px;
position: relative;
}
.lb-menu__itemIcon--rules::before,
.lb-menu__itemIcon--rules::after {
content: "";
position: absolute;
left: 3px;
right: 3px;
height: 1.6px;
background: currentColor;
}
.lb-menu__itemIcon--rules::before { top: 5px; }
.lb-menu__itemIcon--rules::after { top: 10px; }
.lb-menu__itemIcon--logout {
border: 1.6px solid currentColor;
border-radius: 4px;
position: relative;
}
.lb-menu__itemIcon--logout::before {
content: "";
position: absolute;
width: 7px;
height: 1.8px;
background: currentColor;
right: -4px;
top: 7px;
}
.lb-menu__itemIcon--logout::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
border-top: 1.8px solid currentColor;
border-right: 1.8px solid currentColor;
transform: rotate(45deg);
right: -4px;
top: 6px;
}
.lb-menu__release {
display: grid;
gap: 2px;
padding: 0 4px;
}
.lb-menu__release p {
margin: 0;
color: rgba(247,244,255,.5);
font-size: 11px;
line-height: 1.35;
}
.lb-menu__release p:first-child {
color: rgba(247,244,255,.68);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.lb-menu__foot {
border-top: 1px solid rgba(255,255,255,.08);
margin-top: 12px;
padding-top: 12px;
opacity: 0;
transform: translateX(-8px);
display: grid;
gap: 10px;
}
.lb-menu__item--logout {
color: rgba(255,178,230,.96);
}
.lb-menu__item--logout .lb-menu__itemIcon {
color: rgba(255,178,230,.96);
}
.lb-menu__submenu {
padding-left: 8px;
margin-top: -2px;
display: grid;
gap: 6px;
}
.lb-menu__submenu[hidden] {
display: none;
}
.lb-menu__subitem {
min-height: 40px;
width: 100%;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.09);
background: rgba(10,14,24,.64);
color: rgba(247,244,255,.84);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
padding: 0 12px 0 16px;
text-align: left;
cursor: pointer;
position: relative;
transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.lb-menu__subitem::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 999px;
transform: translateY(-50%);
background: rgba(0,224,211,.82);
box-shadow: 0 0 8px rgba(0,224,211,.42);
}
.lb-menu__subitem:hover {
transform: translateX(2px);
border-color: rgba(0,224,211,.32);
box-shadow: 0 0 10px rgba(0,224,211,.12), 0 0 9px rgba(79,102,255,.1);
color: rgba(247,244,255,.96);
}
.lb-menu__subitem:focus-visible {
outline: none;
border-color: rgba(0,224,211,.48);
box-shadow: 0 0 0 2px rgba(0,224,211,.2), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-menu__drawer.is-subscreen .lb-menu__list,
.lb-menu__drawer.is-subscreen .lb-menu__foot {
display: none;
}
.lb-menu-screen {
display: grid;
grid-template-rows: auto 1fr;
min-height: 0;
}
.lb-menu-screen[hidden],
.lb-menu-view[hidden] {
display: none !important;
}
.lb-menu-screen__head {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 4px 12px;
}
.lb-menu-screen__back {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.9);
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.lb-menu-screen__back:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-menu-screen__title {
margin: 0;
color: rgba(247,244,255,.98);
font-family: var(--font-display);
font-size: 20px;
letter-spacing: -.01em;
}
.lb-menu-screen__body {
overflow: auto;
padding-right: 2px;
display: grid;
gap: 12px;
align-content: start;
}
.lb-menu-view {
display: grid;
gap: 12px;
}
.lb-menu-form {
display: grid;
gap: 10px;
}
.lb-menu-group {
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(12,16,27,.72);
padding: 12px;
display: grid;
gap: 10px;
}
.lb-menu-group__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.lb-menu-group__title {
margin: 0;
color: rgba(247,244,255,.96);
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
}
.lb-menu-group__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(0,224,211,.32);
color: rgba(173,255,247,.92);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
background: rgba(0,224,211,.08);
}
.lb-menu-field {
display: grid;
gap: 6px;
}
.lb-menu-field__titleRow {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.lb-menu-lockPill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid rgba(255,178,230,.32);
color: rgba(255,178,230,.9);
background: rgba(255,79,191,.08);
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
}
.lb-menu-field > span {
color: rgba(247,244,255,.82);
font-size: 12px;
letter-spacing: .03em;
}
.lb-menu-lockedInputWrap {
position: relative;
}
.lb-menu-lockIcon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
opacity: .88;
}
.lb-menu-field input,
.lb-menu-field select,
.lb-menu-field textarea {
width: 100%;
min-height: 42px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(10,14,24,.82);
color: rgba(247,244,255,.95);
font: 500 16px/1.35 var(--font-ui);
padding: 10px 12px;
}
.lb-menu-field textarea { min-height: 84px; resize: vertical; }
.lb-menu-field--locked input[readonly] {
background: rgba(18,22,34,.88);
border-color: rgba(255,255,255,.16);
color: rgba(247,244,255,.86);
padding-right: 32px;
}
.lb-menu-field--locked input[readonly]:focus-visible {
border-color: rgba(255,178,230,.42);
box-shadow: 0 0 0 2px rgba(255,178,230,.14), 0 0 0 4px rgba(255,178,230,.08);
}
.lb-menu-field input:focus-visible,
.lb-menu-field select:focus-visible,
.lb-menu-field textarea:focus-visible,
.lb-menu-linkBtn:focus-visible,
.lb-menu-btn:focus-visible {
outline: none;
border-color: rgba(0,224,211,.54);
box-shadow: 0 0 0 2px rgba(0,224,211,.2), 0 0 0 4px rgba(0,224,211,.08), 0 0 10px rgba(255,79,191,.14);
}
.lb-menu-card {
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(12,16,27,.74);
padding: 12px;
display: grid;
gap: 8px;
}
.lb-menu-card--toggle {
grid-template-columns: 1fr auto;
align-items: center;
}
.lb-menu-card__label {
margin: 0;
color: rgba(247,244,255,.95);
font-weight: 600;
font-size: 14px;
}
.lb-menu-card__copy {
margin: 0;
color: rgba(247,244,255,.72);
font-size: 13px;
line-height: 1.45;
}
.lb-menu-linkBtn {
justify-self: start;
border: 0;
background: transparent;
color: rgba(0,224,211,.92);
font-size: 13px;
padding: 2px 0;
cursor: pointer;
}
.lb-menu-switch {
position: relative;
width: 46px;
height: 28px;
display: inline-block;
}
.lb-menu-switch input {
opacity: 0;
width: 0;
height: 0;
}
.lb-menu-switch__ui {
position: absolute;
inset: 0;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(8,12,21,.84);
transition: background .2s ease, border-color .2s ease;
}
.lb-menu-switch__ui::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 999px;
top: 3px;
left: 3px;
background: rgba(247,244,255,.9);
transition: transform .2s ease;
}
.lb-menu-switch input:checked + .lb-menu-switch__ui {
border-color: rgba(255,79,191,.44);
background: linear-gradient(115deg, rgba(255,79,191,.48), rgba(79,102,255,.5));
}
.lb-menu-switch input:checked + .lb-menu-switch__ui::after {
transform: translateX(18px);
}
.lb-menu-btn {
min-height: 42px;
border: 0;
border-radius: 12px;
background: linear-gradient(108deg, #FF4FBF 0%, #BE61EB 44%, #4F66FF 100%);
color: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
box-shadow: 0 8px 18px rgba(255,79,191,.2), 0 8px 18px rgba(79,102,255,.18);
}
.lb-menu-btn--danger {
background: rgba(220,38,38,.92);
box-shadow: 0 8px 18px rgba(220,38,38,.24);
}
.lb-menu-btn--danger:disabled {
background: rgba(220,38,38,.28);
box-shadow: none;
cursor: not-allowed;
}
.lb-menu-note {
margin: 0;
color: rgba(173,255,247,.84);
font-size: 12px;
min-height: 14px;
}
.lb-menu-hint {
margin: -2px 0 2px;
color: rgba(247,244,255,.62);
font-size: 12px;
line-height: 1.4;
}
.lb-menu-empty {
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(12,16,27,.72);
padding: 14px;
}
.lb-menu-empty h4 {
margin: 0 0 6px;
font-size: 16px;
color: rgba(247,244,255,.95);
}
.lb-menu-empty p {
margin: 0;
color: rgba(247,244,255,.72);
font-size: 13px;
line-height: 1.45;
}
.lb-menu-empty p + p {
margin-top: 10px;
}
.lb-menu-empty p strong {
background: linear-gradient(96deg, #FF4FBF 0%, #B46DFF 48%, #4F66FF 76%, #00E0D3 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.lb-menu-empty__num {
background: none;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: rgba(247,244,255,.95);
color: rgba(247,244,255,.95);
}
.lb-menu-view--legal {
gap: 0;
}
.lb-legal {
display: grid;
gap: 16px;
max-width: 62ch;
}
.lb-legal__intro {
margin: 0 0 2px;
color: rgba(247,244,255,.86);
font-size: 14px;
line-height: 1.55;
}
.lb-legal__jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(12,16,27,.72);
}
.lb-legal__jump a {
border: 1.5px solid transparent;
border-radius: 999px;
padding: 5px 11px;
color: rgba(247,244,255,.86);
font-size: 11px;
letter-spacing: .02em;
text-decoration: none;
background:
linear-gradient(rgba(12,16,27,.88), rgba(12,16,27,.88)) padding-box,
linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
box-shadow:
0 0 10px rgba(207,87,232,.18),
0 0 8px rgba(79,102,255,.14);
white-space: nowrap;
transition: box-shadow .16s ease, transform .12s ease, color .16s ease;
}
.lb-legal__jump a:hover,
.lb-legal__jump a:focus-visible {
outline: none;
color: #fff;
transform: translateY(-1px);
box-shadow:
0 0 16px rgba(207,87,232,.28),
0 0 12px rgba(79,102,255,.2);
}
.lb-legal__section {
display: grid;
gap: 8px;
scroll-margin-top: 12px;
}
.lb-legal__heading {
margin: 0;
display: flex;
align-items: baseline;
gap: 8px;
background: linear-gradient(96deg, #FF4FBF 0%, #B46DFF 48%, #4F66FF 76%, #00E0D3 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-family: var(--font-display);
font-size: 16px;
letter-spacing: -.01em;
}
.lb-legal__num {
background: none;
-webkit-background-clip: unset;
background-clip: unset;
-webkit-text-fill-color: rgba(247,244,255,.97);
color: rgba(247,244,255,.97);
font-size: 13px;
font-weight: 700;
flex: none;
}
.lb-legal__subheading {
margin: 4px 0 0;
color: rgba(247,244,255,.88);
font-size: 12px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.lb-legal__section p {
margin: 0;
color: rgba(247,244,255,.74);
font-size: 13px;
line-height: 1.55;
}
.lb-legal__list {
margin: 0;
padding: 0 0 0 18px;
display: grid;
gap: 4px;
}
.lb-legal__list li {
color: rgba(247,244,255,.74);
font-size: 13px;
line-height: 1.5;
}
.lb-legal__link {
color: rgba(255,79,191,.92);
text-decoration: underline;
text-underline-offset: 2px;
}
.lb-legal__section p.lb-legal__tags {
margin: 2px 0 0;
color: rgba(247,244,255,.56);
font-size: 12px;
line-height: 1.5;
}
.lb-legal__tagsLabel {
color: rgba(255,178,230,.82);
font-weight: 700;
}
.lb-legal__section p.lb-legal__example {
margin: 4px 0;
padding: 8px 12px;
border-left: 2px solid rgba(255,79,191,.4);
background: rgba(255,79,191,.06);
border-radius: 0 8px 8px 0;
font-style: italic;
color: rgba(247,244,255,.82);
}
.lb-legal__section p.lb-legal__tip {
margin: 4px 0 0;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255,79,191,.08);
border: 1px solid rgba(255,79,191,.22);
color: rgba(247,244,255,.86);
font-size: 13px;
line-height: 1.5;
}
.lb-legal__divider {
border: none;
height: 1px;
margin: 0;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
}
.lb-faq {
display: grid;
gap: 20px;
max-width: 62ch;
}
.lb-faq__category {
display: grid;
gap: 8px;
}
.lb-faq__categoryTitle {
margin: 0 0 2px;
color: rgba(247,244,255,.55);
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.lb-faq__item {
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(12,16,27,.72);
overflow: hidden;
}
.lb-faq__item + .lb-faq__item {
margin-top: 8px;
}
.lb-faq__item[open] {
border-color: rgba(255,79,191,.28);
}
.lb-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
}
.lb-faq__q::-webkit-details-marker {
display: none;
}
.lb-faq__q:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(255,79,191,.4);
}
.lb-faq__qText {
color: rgba(247,244,255,.94);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.lb-faq__chevron {
flex: none;
width: 18px;
height: 18px;
position: relative;
}
.lb-faq__chevron::before,
.lb-faq__chevron::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
background: rgba(255,79,191,.86);
border-radius: 2px;
transition: transform .18s ease;
}
.lb-faq__chevron::before { transform: translate(-50%,-50%) rotate(90deg); }
.lb-faq__chevron::after { transform: translate(-50%,-50%); }
.lb-faq__item[open] .lb-faq__chevron::before { transform: translate(-50%,-50%) rotate(0deg); }
.lb-faq__a {
padding: 0 14px 14px;
}
.lb-faq__a p {
margin: 0;
color: rgba(247,244,255,.72);
font-size: 13px;
line-height: 1.55;
}
.lb-faq__a p + p,
.lb-faq__a ul + p,
.lb-faq__a p + ul {
margin-top: 8px;
}
.lb-faq__list {
margin: 4px 0 0;
padding: 0 0 0 18px;
display: grid;
gap: 4px;
}
.lb-faq__list li {
color: rgba(247,244,255,.72);
font-size: 13px;
line-height: 1.5;
}
.lb-guide {
display: grid;
gap: 24px;
max-width: 62ch;
}
.lb-guide__category {
display: grid;
gap: 8px;
scroll-margin-top: 12px;
}
.lb-guide__categoryTitle {
margin: 0 0 2px;
background: linear-gradient(96deg, #FF4FBF 0%, #B46DFF 48%, #4F66FF 76%, #00E0D3 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-family: var(--font-display);
font-size: 16px;
letter-spacing: -.01em;
}
.lb-faq__link {
color: rgba(255,79,191,.92);
text-decoration: underline;
text-underline-offset: 2px;
}
.lb-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.lb-menu.is-open .lb-menu__item,
.lb-menu.is-open .lb-menu__foot {
animation: lbMenuItemIn .28s ease forwards;
}
.lb-menu.is-open .lb-menu__item:nth-child(1) { animation-delay: .06s; }
.lb-menu.is-open .lb-menu__item:nth-child(2) { animation-delay: .1s; }
.lb-menu.is-open .lb-menu__item:nth-child(3) { animation-delay: .14s; }
.lb-menu.is-open .lb-menu__foot { animation-delay: .18s; }
.lb-compose[hidden] { display: none; }
.lb-compose {
position: fixed;
inset: 0;
z-index: 40;
}
.lb-compose__backdrop {
position: absolute;
inset: 0;
background: rgba(4, 7, 15, .62);
backdrop-filter: blur(4px);
}
.lb-compose__sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: calc(100dvh - env(safe-area-inset-top, 12px) - 12px);
overflow-y: auto;
border-radius: 20px 20px 0 0;
border: 1px solid rgba(255,255,255,.12);
border-bottom: 0;
background:
linear-gradient(rgba(15,19,32,.96), rgba(15,19,32,.96)) padding-box,
linear-gradient(112deg, rgba(255,79,191,.34), rgba(79,102,255,.3) 55%, rgba(0,224,211,.28)) border-box;
box-shadow: 0 -16px 34px rgba(6,9,17,.58), 0 0 18px rgba(79,102,255,.12), 0 0 14px rgba(255,79,191,.1);
padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
display: grid;
gap: 12px;
}
.lb-compose__head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
}
.lb-compose__cancel {
border: 0;
background: transparent;
color: rgba(247,244,255,.8);
font-size: 14px;
cursor: pointer;
padding: 0;
}
.lb-compose__title {
margin: 0;
justify-self: center;
font-family: var(--font-display);
font-size: 21px;
letter-spacing: -.01em;
color: rgba(247,244,255,.98);
display: inline-flex;
align-items: center;
gap: 8px;
}
.lb-compose__statusDot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #00E0D3;
box-shadow: 0 0 0 3px rgba(0,224,211,.12), 0 0 8px rgba(0,224,211,.44);
animation: lbComposerStatusPulse 2.8s ease-in-out infinite;
}
.lb-compose__titleCup {
width: 28px;
height: 28px;
object-fit: contain;
object-position: center;
}
.lb-compose__spacer { width: 44px; height: 1px; }
.lb-compose__author {
display: flex;
align-items: center;
gap: 10px;
}
.lb-compose__avatar {
width: 34px;
height: 34px;
border-radius: 999px;
position: relative;
background:
radial-gradient(circle at 50% 30%, rgba(247,244,255,.9) 0 18%, transparent 19%),
radial-gradient(circle at 50% 78%, rgba(247,244,255,.9) 0 30%, transparent 31%),
linear-gradient(140deg, rgba(255,79,191,.58), rgba(79,102,255,.58));
box-shadow: 0 0 0 2px rgba(10,14,24,.95);
}
/* Canonical Loverbyte avatar/profile gradient ring (2026-08-31 final
tidy-up) -- same mask technique and gradient as .lb-post-card__avatar,
replacing the old composer-specific teal box-shadow ring. Independent of
background-image, so it holds whether the avatar shows the default
silhouette or a hydrated photo (has-photo). */
.lb-compose__avatar::before {
content: '';
position: absolute;
inset: 0;
border-radius: 999px;
padding: 2px;
background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.lb-compose__handle {
margin: 0;
color: rgba(247,244,255,.9);
font-size: 13px;
letter-spacing: .03em;
}
.lb-compose__field textarea {
width: 100%;
min-height: 136px;
max-height: 280px;
resize: vertical;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(11,16,27,.86);
color: rgba(247,244,255,.95);
font: 500 16px/1.48 var(--font-ui);
padding: 14px;
outline: none;
}
@media (min-width: 1024px) {
.lb-post-card__body { font-size: 17px; }
.lb-thread-comment__text { font-size: 17px; }
}
.lb-compose__field textarea::placeholder {
color: rgba(247,244,255,.52);
}
.lb-compose__field textarea:focus-visible,
.lb-compose__cancel:focus-visible,
.lb-compose__toolBtn:focus-visible,
.lb-compose__post:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.1);
}
.lb-compose__field textarea:focus-visible {
border-color: rgba(255,79,191,.54);
}
.lb-compose__tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lb-compose__toolButtons {
display: flex;
align-items: center;
gap: 8px;
}
.lb-compose__toolBtn {
width: 38px;
height: 38px;
border-radius: 12px;
min-height: 36px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(12,16,27,.84);
color: rgba(247,244,255,.82);
padding: 0;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease, color .2s ease;
}
.lb-compose__toolBtn:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.45);
box-shadow: 0 0 10px rgba(0,224,211,.16), 0 0 8px rgba(79,102,255,.14);
color: rgba(247,244,255,.96);
}
.lb-compose__toolBtn.is-active {
border-color: transparent;
background:
linear-gradient(rgba(13,17,28,.94), rgba(13,17,28,.94)) padding-box,
linear-gradient(120deg, rgba(255,79,191,.88), rgba(79,102,255,.84)) border-box;
box-shadow: 0 0 0 1px rgba(255,79,191,.2), 0 0 10px rgba(79,102,255,.2);
}
.lb-compose__icon {
width: 18px;
height: 18px;
display: inline-block;
color: currentColor;
}
.lb-compose__icon--image {
background:
linear-gradient(currentColor, currentColor) 2px 15px / 14px 2px no-repeat,
radial-gradient(circle at 6px 6px, currentColor 0 2px, transparent 2.5px),
linear-gradient(145deg, transparent 45%, currentColor 46% 54%, transparent 55%) 2px 8px / 14px 8px no-repeat;
border: 1.6px solid currentColor;
border-radius: 4px;
}
.lb-compose__icon--emoji {
border: 1.6px solid currentColor;
border-radius: 999px;
position: relative;
}
.lb-compose__icon--emoji::before,
.lb-compose__icon--emoji::after {
content: "";
position: absolute;
top: 5px;
width: 2px;
height: 2px;
border-radius: 999px;
background: currentColor;
}
.lb-compose__icon--emoji::before { left: 5px; }
.lb-compose__icon--emoji::after { right: 5px; }
.lb-compose__icon--emoji {
box-shadow: inset 0 -6px 0 -5px currentColor;
}
.lb-compose__icon--tag {
width: 17px;
height: 13px;
border: 1.6px solid currentColor;
border-radius: 3px;
transform: rotate(-12deg);
position: relative;
}
.lb-compose__icon--tag::before {
content: "";
position: absolute;
width: 2.5px;
height: 2.5px;
border-radius: 999px;
background: currentColor;
left: 2px;
top: 4px;
}
.lb-compose__meta {
margin: 0;
color: rgba(247,244,255,.6);
font-size: 12px;
text-align: right;
}
.lb-compose__toolHint {
margin: -4px 0 0;
color: rgba(247,244,255,.56);
font-size: 11px;
letter-spacing: .01em;
}
.lb-compose__labels {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: -2px;
}
.lb-compose__labelChip {
min-height: 26px;
border-radius: 999px;
border: 1px solid rgba(0,224,211,.3);
background: rgba(10,16,27,.82);
color: rgba(247,244,255,.94);
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 8px 0 10px;
}
.lb-compose__labelRemove {
width: 18px;
height: 18px;
border: none;
border-radius: 999px;
background: rgba(247,244,255,.14);
color: rgba(247,244,255,.9);
font-size: 12px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
}
.lb-compose__labelRemove:hover {
background: rgba(255,79,191,.32);
}
.lb-compose__error {
min-height: 16px;
margin: -2px 0 0;
color: rgba(255,178,230,.92);
font-size: 12px;
}
.lb-compose__preview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-height: 220px;
overflow: hidden;
}
.lb-compose__thumbWrap {
position: relative;
}
.lb-compose__thumb {
width: 100%;
aspect-ratio: 4/3;
border-radius: 12px;
object-fit: cover;
border: 1px solid rgba(255,255,255,.12);
}
.lb-compose__thumbRemove {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(7,10,18,.9);
color: rgba(247,244,255,.9);
font-size: 14px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease;
}
.lb-compose__thumbRemove:hover {
border-color: rgba(0,224,211,.46);
box-shadow: 0 0 10px rgba(0,224,211,.18);
}
.lb-compose__foot {
display: flex;
justify-content: flex-end;
}
.lb-compose__post {
min-width: 114px;
min-height: 42px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(18,22,34,.84);
color: rgba(247,244,255,.72);
font-weight: 700;
font-size: 15px;
letter-spacing: .01em;
cursor: not-allowed;
transition: filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.lb-compose__post:not(:disabled) {
cursor: pointer;
color: #fff;
border-color: transparent;
background: linear-gradient(105deg, #FF4FBF 0%, #D95CE0 42%, #4F66FF 100%);
box-shadow: 0 8px 20px rgba(255,79,191,.24), 0 8px 20px rgba(79,102,255,.22);
}
.lb-compose__post:not(:disabled):hover {
filter: brightness(1.06);
}
.lb-label-picker[hidden] { display: none !important; }
.lb-label-picker {
position: fixed;
inset: 0;
z-index: 55;
}
.lb-label-picker__backdrop {
position: absolute;
inset: 0;
background: rgba(5,8,16,.58);
backdrop-filter: blur(4px);
}
.lb-label-picker__panel {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(92vw, 540px);
max-height: min(82vh, 680px);
overflow: auto;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background:
linear-gradient(rgba(14,18,31,.96), rgba(14,18,31,.96)) padding-box,
linear-gradient(112deg, rgba(255,79,191,.35), rgba(79,102,255,.3), rgba(0,224,211,.24)) border-box;
box-shadow: 0 18px 38px rgba(6,9,16,.58);
padding: 14px;
display: grid;
gap: 12px;
}
.lb-label-picker__head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
}
.lb-label-picker__title {
margin: 0;
font-family: var(--font-display);
font-size: 22px;
line-height: 1.15;
}
.lb-label-picker__copy {
margin: 6px 0 0;
color: rgba(247,244,255,.74);
font-size: 13px;
line-height: 1.45;
}
.lb-label-picker__counter {
margin: 0;
min-height: 28px;
border-radius: 999px;
border: 1px solid rgba(0,224,211,.28);
background: rgba(10,16,27,.84);
color: rgba(173,255,247,.92);
font-size: 12px;
font-weight: 600;
padding: 0 10px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.lb-label-picker__counter.is-full {
border-color: rgba(255,79,191,.42);
color: rgba(255,198,236,.94);
box-shadow: 0 0 10px rgba(255,79,191,.16);
}
.lb-label-picker__groups {
display: grid;
gap: 12px;
}
.lb-label-group {
display: grid;
gap: 8px;
}
.lb-label-group__title {
margin: 0;
color: rgba(247,244,255,.82);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
}
.lb-label-group__chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.lb-label-picker__chip {
min-height: 30px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(11,16,27,.8);
color: rgba(247,244,255,.9);
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
padding: 0 11px;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease, color .2s ease;
}
.lb-label-picker__chip:hover {
transform: translateY(-1px);
border-color: rgba(0,224,211,.4);
box-shadow: 0 0 10px rgba(79,102,255,.16);
}
.lb-label-picker__chip.is-selected {
border-color: transparent;
background:
linear-gradient(rgba(13,17,28,.94), rgba(13,17,28,.94)) padding-box,
linear-gradient(112deg, rgba(255,79,191,.88), rgba(79,102,255,.82), rgba(0,224,211,.78)) border-box;
color: #fff;
box-shadow: 0 0 0 1px rgba(255,79,191,.2), 0 0 10px rgba(79,102,255,.2);
}
.lb-label-picker__foot {
display: flex;
justify-content: flex-end;
}
.lb-label-picker__done {
min-height: 38px;
border-radius: 999px;
border: 1px solid transparent;
background: linear-gradient(105deg, #FF4FBF 0%, #D95CE0 42%, #4F66FF 100%);
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 0 16px;
cursor: pointer;
box-shadow: 0 8px 18px rgba(255,79,191,.22), 0 8px 18px rgba(79,102,255,.2);
}
.lb-label-picker__done:hover {
filter: brightness(1.05);
}
@media (min-width: 900px) {
.lb-feed-page { padding: 24px; }
.lb-feed-topbar { top: 24px; }
.lb-menu__drawer { width: min(36vw, 390px); }
.lb-thread-view { padding: 24px; }
.lb-thread-view__shell { height: calc(100dvh - 48px); }
}
@media (max-width: 760px) {
.lb-reaction-picker__panel {
left: 0;
right: 0;
top: auto;
bottom: 0;
width: 100%;
transform: none;
border-radius: 16px 16px 0 0;
border-bottom: 0;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}
.lb-reaction-picker__categoryRow {
gap: 8px;
}
.lb-tip-modal__sheet {
left: 0;
right: 0;
top: auto;
bottom: 0;
width: 100%;
transform: none;
border-radius: 20px 20px 0 0;
border-bottom: 0;
padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
}
.lb-tip-modal__providers,
.lb-tip-modal__options {
display: grid;
grid-template-columns: 1fr;
}
.lb-tip-modal__providerBtn,
.lb-tip-modal__option {
width: 100%;
}
.lb-signal__sheet {
left: 0;
right: 0;
top: auto;
bottom: 0;
width: 100%;
transform: none;
border-radius: 20px 20px 0 0;
border-bottom: 0;
padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
max-height: calc(100dvh - env(safe-area-inset-top, 12px) - 12px);
}
.lb-signal__foot {
flex-direction: column;
gap: 8px;
}
.lb-signal__send,
.lb-signal__cancel {
width: 100%;
}
.lb-signal__tools {
flex-wrap: wrap;
}
.lb-signal__metaCount {
width: 100%;
text-align: right;
}
.lb-label-picker__panel {
left: 0;
right: 0;
top: auto;
bottom: 0;
transform: none;
width: 100%;
max-height: min(84vh, 720px);
border-radius: 18px 18px 0 0;
border-bottom: 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
}
.lb-label-picker__foot {
justify-content: stretch;
}
.lb-label-picker__done {
width: 100%;
}
.lb-thread-view {
padding: 0;
background: rgba(8,11,20,.94);
}
.lb-thread-view__shell {
max-width: none;
height: 100dvh;
border-radius: 0;
border-left: 0;
border-right: 0;
}
.lb-thread-view__content {
padding: 10px;
}
}
@media (min-width: 760px) {
.lb-compose {
display: grid;
place-items: center;
}
.lb-compose__sheet {
position: relative;
width: min(640px, calc(100vw - 28px));
max-height: min(82vh, 760px);
overflow: auto;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.12);
padding: 16px 16px 14px;
}
}
@media (max-width: 420px) {
.lb-compose__tools {
flex-wrap: wrap;
justify-content: flex-start;
}
.lb-compose__meta {
width: 100%;
text-align: left;
}
.lb-thread-compose__tools {
flex-wrap: wrap;
justify-content: flex-start;
}
.lb-thread-compose__meta {
width: 100%;
text-align: left;
}
}
@media (max-width: 520px) {
.lb-feed-page {
padding: 8px;
}
.lb-feed-shell {
gap: 10px;
padding-bottom: 18px;
}
.lb-feed-topbar {
min-height: 58px;
padding: 8px 10px;
border-radius: 16px;
}
.lb-feed-topbar__iconBtn,
.lb-feed-topbar__bellBtn,
.lb-feed-topbar__signalBtn {
width: 36px;
height: 36px;
}
.lb-feed-topbar__brand img {
height: 20px;
}
.lb-user-entry {
padding: 10px;
gap: 10px;
border-radius: 16px;
}
.lb-user-entry__avatarBtn {
width: 42px;
height: 42px;
}
.lb-user-entry__avatarCore {
width: 30px;
height: 30px;
}
.lb-post-card__avatar {
width: 40px;
height: 40px;
}
.lb-user-entry__handle {
font-size: 11px;
letter-spacing: .03em;
}
.lb-user-entry__trigger {
min-height: 40px;
font-size: 13px;
padding: 0 14px;
}
.lb-vibe-card {
border-radius: 18px;
padding: 14px;
}
.lb-vibe-card__kicker {
gap: 7px;
font-size: 10px;
letter-spacing: .12em;
flex-wrap: wrap;
}
.lb-vibe-card__liveText {
font-size: 9px;
}
.lb-vibe-card__title {
margin-top: 8px;
font-size: clamp(22px, 7.2vw, 30px);
line-height: 1.12;
}
.lb-vibe-card__copy {
margin-top: 6px;
font-size: 14px;
line-height: 1.48;
}
.lb-vibe-card__tagline {
margin-top: 6px;
}
.lb-week-tabs__tab {
height: 40px;
padding: 0 13px;
font-size: 13px;
}
.lb-feed-placeholder {
border-radius: 14px;
padding: 14px;
min-height: 96px;
}
.lb-post-card {
padding: 10px;
border-radius: 14px;
}
.lb-post-card__bodyWrap {
grid-template-columns: minmax(0, 1fr) 30px;
gap: 8px;
}
.lb-thread-comment__replies {
margin-left: 4px;
padding-left: 20px;
}
.lb-thread-comment__replies.is-expanded::before {
left: 8px;
}
/* Keeps the disclosure control's indent matched to the connector line's
position at this breakpoint too (margin-left:4px + left:8px = 12px). */
.lb-thread-comment__repliesToggle {
margin-left: 12px;
}
.lb-thread-comment__replies.is-expanded .lb-thread-comment--reply::before {
left: -20px;
width: 20px;
}
.lb-rail-action {
min-height: 40px;
width: 30px;
padding: 0;
}
.lb-rail-action__icon {
font-size: 15px;
}
.lb-rail-action__count {
font-size: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.lb-feed-topbar__iconBtn,
.lb-user-entry__avatarBtn,
.lb-user-entry__trigger,
.lb-week-tabs__tab { transition: none; }
.lb-vibe-card__liveDot { animation: none; }
.lb-compose__statusDot { animation: none; }
.lb-menu__backdrop,
.lb-menu__drawer,
.lb-menu__item,
.lb-menu__close,
.lb-menu__subitem,
.lb-menu__chevron { transition: none; }
.lb-menu.is-open .lb-menu__item,
.lb-menu.is-open .lb-menu__foot { animation: none; opacity: 1; transform: translateX(0); }
}
@keyframes lbLivePulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(0,224,211,.08), 0 0 8px rgba(0,224,211,.38); }
50% { box-shadow: 0 0 0 5px rgba(0,224,211,.16), 0 0 12px rgba(0,224,211,.58); }
}
@keyframes lbYouUpFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes lbYouUpGlow {
0%, 100% { box-shadow: 0 0 10px rgba(79,102,255,.18), 0 0 8px rgba(255,79,191,.14); }
50% { box-shadow: 0 0 14px rgba(79,102,255,.24), 0 0 12px rgba(255,79,191,.2); }
}
@keyframes lbYouUpSparkle {
0%, 100% { opacity: .45; transform: scale(.85); }
50% { opacity: 1; transform: scale(1.15); }
}
@keyframes lbComposerStatusPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(0,224,211,.1), 0 0 8px rgba(0,224,211,.34); }
50% { box-shadow: 0 0 0 4px rgba(0,224,211,.18), 0 0 11px rgba(0,224,211,.54); }
}
@keyframes lbMenuItemIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── Image lightbox ─────────────────────────────────────── */
.lb-lightbox {
position: fixed;
inset: 0;
z-index: 500;
background: rgba(5, 7, 14, 0.88);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lb-lightbox__img {
max-width: min(90vw, 960px);
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
display: block;
}
.lb-lightbox__close {
position: fixed;
top: 16px;
right: 20px;
background: rgba(20, 20, 31, 0.88);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
line-height: 1;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
z-index: 501;
}
/* ── Emoji tray ─────────────────────────────────────────── */
.lb-emoji-tray {
position: fixed;
z-index: 400;
background: #14141F;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 8px;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
box-shadow: 0 8px 32px rgba(0,0,0,0.55);
max-width: min(320px, 90vw);
}
.lb-emoji-tray__btn {
background: none;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
line-height: 1;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
}
.lb-emoji-tray__btn:hover {
background: rgba(255,255,255,0.08);
}
/* ── Post card three-dot menu (Report / Hide) ─────────────────────────── */
.lb-profile-feedPost__headActions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.lb-profile-feedPost__menuWrap {
position: relative;
}
.lb-profile-feedPost__menuBtn {
width: 30px;
height: 30px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(10, 14, 24, 0.8);
color: rgba(235, 241, 255, 0.9);
font: 700 16px/1 var(--font-ui);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lb-profile-feedPost__menu {
position: absolute;
right: 0;
top: calc(100% + 6px);
z-index: 8;
min-width: 168px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(10, 14, 24, 0.97);
box-shadow: 0 14px 30px rgba(4, 8, 15, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
padding: 6px;
display: grid;
gap: 2px;
}
.lb-profile-feedPost__menuItem {
min-height: 38px;
border-radius: 8px;
border: 0;
background: transparent;
color: rgba(245, 248, 255, 0.93);
font: 600 13px/1 var(--font-ui);
text-align: left;
padding: 0 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.lb-profile-feedPost__menuItem:hover,
.lb-profile-feedPost__menuItem:active {
background: rgba(255, 255, 255, 0.08);
}
.lb-profile-feedPost__menuBtn:focus-visible,
.lb-profile-feedPost__menuItem:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.28);
}
@keyframes lb-save-shimmer {
0%, 100% { background-position: 200% 0; }
50% { background-position: 0% 0; }
}
.lb-save-shimmer {
position: relative;
display: inline-block;
padding-bottom: 1px;
background: linear-gradient(
90deg,
rgba(255,79,191,.95) 0%,
rgba(255,79,191,.95) 32%,
#ffffff 50%,
rgba(100,110,255,.95) 68%,
rgba(100,110,255,.95) 100%
);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
animation: lb-save-shimmer 4s ease-in-out infinite;
}
.lb-save-shimmer::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
border-radius: 1px;
background: linear-gradient(90deg, transparent, rgba(100,110,255,.9) 20%, rgba(255,79,191,.9) 80%, transparent);
box-shadow: 0 0 6px rgba(180,80,255,.65);
opacity: 0.9;
}
@keyframes lb-crush-highlight-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,79,191,0), inset 0 0 0 0 rgba(255,79,191,0); background-color: transparent; }
15% { box-shadow: 0 0 0 3px rgba(255,79,191,.55), inset 0 0 12px rgba(255,79,191,.12); background-color: rgba(255,79,191,.07); }
65% { box-shadow: 0 0 0 3px rgba(255,79,191,.55), inset 0 0 12px rgba(255,79,191,.12); background-color: rgba(255,79,191,.07); }
100% { box-shadow: 0 0 0 0 rgba(255,79,191,0), inset 0 0 0 0 rgba(255,79,191,0); background-color: transparent; }
}
.lb-crush-source-highlight {
animation: lb-crush-highlight-pulse 8s ease-out forwards;
border-radius: 12px;
transition: background-color 0.3s ease;
}
@keyframes lb-deleted-highlight-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,205,238,0), inset 0 0 0 0 rgba(255,205,238,0); background-color: rgba(11,16,27,.42); }
15% { box-shadow: 0 0 0 3px rgba(255,205,238,.46), inset 0 0 16px rgba(255,205,238,.14); background-color: rgba(255,205,238,.09); }
65% { box-shadow: 0 0 0 3px rgba(255,205,238,.46), inset 0 0 16px rgba(255,205,238,.14); background-color: rgba(255,205,238,.09); }
100% { box-shadow: 0 0 0 0 rgba(255,205,238,0), inset 0 0 0 0 rgba(255,205,238,0); background-color: rgba(11,16,27,.42); }
}
.lb-notification-deleted-highlight {
animation: lb-deleted-highlight-pulse 8s ease-out forwards;
border-radius: 12px;
transition: background-color 0.3s ease;
}
/* ─── Crush Milestone Modal (crush_sent / match_created / already_matched) ─── */
/* Self-contained fixed overlay — does not depend on the (currently unstyled)
.lb-crush-card-modal shell it's injected into, so it renders correctly as
a focused, centered, backdrop-blocking modal regardless of that shell. */
.lb-milestone-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(4, 6, 12, .74);
box-sizing: border-box;
}
.lb-milestone-modal__glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 30%, rgba(255,79,191,.16), transparent 55%),
radial-gradient(circle at 65% 55%, rgba(132,89,255,.14), transparent 58%),
radial-gradient(circle at 35% 65%, rgba(0,224,211,.12), transparent 58%);
}
.lb-milestone-modal__glow--celebrate {
background:
radial-gradient(circle at 50% 26%, rgba(255,79,191,.26), transparent 55%),
radial-gradient(circle at 68% 55%, rgba(132,89,255,.22), transparent 58%),
radial-gradient(circle at 30% 68%, rgba(0,224,211,.2), transparent 60%);
}
.lb-milestone-modal__body {
position: relative;
z-index: 1;
width: 100%;
max-width: 380px;
max-height: calc(100vh - 40px);
overflow-y: auto;
display: grid;
gap: 12px;
justify-items: center;
text-align: center;
padding: 32px 26px 26px;
border-radius: 22px;
background:
linear-gradient(rgba(9,11,18,.98), rgba(9,11,18,.98)) padding-box,
linear-gradient(135deg, rgba(255,79,191,.55), rgba(132,89,255,.5) 52%, rgba(0,224,211,.5)) border-box;
border: 1px solid transparent;
box-shadow: 0 24px 70px rgba(0,0,0,.55);
animation: lb-milestone-modal-in .32s cubic-bezier(.2,.8,.3,1);
}
.lb-milestone-modal__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(10,14,22,.7);
color: rgba(246,241,255,.85);
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.lb-milestone-modal__close:hover { background: rgba(20,24,34,.85); }
.lb-milestone-modal__avatarsRow {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
margin-bottom: 4px;
}
.lb-milestone-modal__person {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.lb-milestone-modal__personName {
font-size: 12.5px;
font-weight: 700;
color: rgba(246,241,255,.82);
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lb-milestone-modal__avatarWrap {
width: 68px;
height: 68px;
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
background: rgba(255,255,255,.06);
border: 2px solid rgba(255,255,255,.18);
}
.lb-milestone-modal__avatarWrap--single {
width: 72px;
height: 72px;
}
.lb-milestone-modal__avatar {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lb-milestone-modal__avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
/* Filled SVG heart — sits between the two avatar columns, vertically
centered on the avatar (not the name label beneath it). */
.lb-milestone-modal__heart {
flex-shrink: 0;
margin-top: 19px;
animation: lb-milestone-heart-pulse 2s ease-in-out infinite;
}
.lb-milestone-modal__headline {
margin: 0;
font-size: 24px;
font-weight: 800;
color: #fff;
line-height: 1.2;
}
.lb-milestone-modal__subtext {
margin: 0;
font-size: 14px;
color: rgba(246,241,255,.78);
line-height: 1.5;
}
/* Plain status line, not a boxed/disabled-looking field — the lock emoji
in the copy itself carries the icon, so this just needs to read clearly
above the CTA. */
.lb-milestone-modal__roomStatus {
margin: 2px 0 0;
color: rgba(246,241,255,.82);
font-size: 13.5px;
font-weight: 600;
line-height: 1.5;
}
/* ─── Canonical Crush/Match button system — exactly two styles ─── */
.lb-crush-btn {
margin-top: 8px;
width: 100%;
max-width: 280px;
height: 48px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 15px;
font-weight: 800;
letter-spacing: .01em;
cursor: pointer;
box-sizing: border-box;
transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.lb-crush-btn:focus-visible {
outline: 2px solid rgba(255,255,255,.85);
outline-offset: 2px;
}
.lb-crush-btn:disabled {
cursor: not-allowed;
opacity: .6;
filter: none;
transform: none;
}
.lb-crush-btn--primary {
position: relative;
overflow: hidden;
border: none;
background: linear-gradient(105deg, #ff4fbf, #cf57e8 40%, #4f66ff 70%, #00e0d3);
color: #fff;
}
.lb-crush-btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
.lb-crush-btn--primary:active:not(:disabled) { transform: translateY(1px); }
/* Gradient hairline border, matching .lb-profile-btn--follow. The flat white
border read as colourless next to the primary CTA. The fill stays dark so
this is still unmistakably the secondary action. */
.lb-crush-btn--secondary {
border: 1.5px solid transparent;
background:
linear-gradient(rgba(12,16,27,.92), rgba(12,16,27,.92)) padding-box,
linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
color: rgba(247,244,255,.92);
}
.lb-crush-btn--secondary:hover:not(:disabled) {
background:
linear-gradient(rgba(20,24,34,.94), rgba(20,24,34,.94)) padding-box,
linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
color: #fff;
}
.lb-crush-btn--secondary:active:not(:disabled) { transform: translateY(1px); }
/* One soft diagonal sweep on entrance — ported from the existing
.lb-match__cta shimmer treatment in styles.v10.css (lb-match-cta-shimmer),
changed from an infinite loop to a single run so it draws the eye once
instead of looping like a marquee. */
.lb-crush-btn--shimmer::after {
content: "";
position: absolute;
inset: -40% -20%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
transform: translateX(-60%) rotate(8deg);
animation: lb-crush-btn-shimmer-once 1.1s ease-out .55s 1 both;
pointer-events: none;
}
@keyframes lb-crush-btn-shimmer-once {
0% { opacity: 0; transform: translateX(-60%) rotate(8deg); }
25% { opacity: 1; }
100% { opacity: 0; transform: translateX(60%) rotate(8deg); }
}
@keyframes lb-milestone-modal-in {
from { opacity: 0; transform: translateY(10px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lb-milestone-heart-pulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,79,191,.5)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(79,102,255,.6)); }
}
@media (max-width: 480px) {
.lb-milestone-modal__body {
max-width: 100%;
padding: 28px 20px 22px;
}
.lb-milestone-modal__headline { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.lb-milestone-modal__body { animation: none; }
.lb-milestone-modal__heart { animation: none; }
.lb-crush-btn--shimmer::after { animation: none; display: none; }
}
/* ── Notification drawer: family filter chips + section headers ───────────
Base chip surface — dark fill, gradient hairline when active, reusing the
canonical secondary-button language. Layout and glyph sizing are set by the
hybrid filter-bar rules further down. */
.lb-feed-notif__filters {
gap: 6px;
padding: 8px 14px 10px;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.lb-feed-notif__chip {
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
background: rgba(14,18,30,.84);
color: rgba(247,244,255,.7);
font-size: 12px;
font-weight: 600;
letter-spacing: .01em;
padding: 5px 12px;
cursor: pointer;
white-space: nowrap;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.lb-feed-notif__chip:hover {
color: rgba(247,244,255,.92);
border-color: rgba(255,255,255,.24);
}
.lb-feed-notif__chip.is-active {
border: 1px solid transparent;
background:
linear-gradient(rgba(18,20,34,.96), rgba(18,20,34,.96)) padding-box,
linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
color: #fff;
}
.lb-feed-notif__sectionHead {
padding: 10px 16px 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(247,244,255,.86);
border-bottom: none;
list-style: none;
}
.lb-feed-notif__sectionHead--rest {
color: rgba(247,244,255,.42);
padding-top: 14px;
}
/* ── Drawer: internal scroll, scroll-bleed containment, position normalize ──
Manual QA: a tall list scrolled the page behind the drawer instead of the
list, and the sheet's right offset drifted between surfaces/widths. The
sheet becomes a flex column with a viewport-safe max height; only the list
scrolls, and overscroll-behavior stops the page taking over at the ends. */
.lb-feed-notif__sheet {
display: flex;
flex-direction: column;
max-height: min(72vh, calc(100vh - 54px - 16px));
max-height: min(72dvh, calc(100dvh - 54px - 16px));
margin-right: clamp(8px, 2vw, 16px);
width: min(320px, calc(100vw - 16px));
}
.lb-feed-notif__head,
.lb-feed-notif__filters {
flex: 0 0 auto;
}
.lb-feed-notif__list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Neutral, not a new accent colour. The section is already distinguished by
its position at the top, the unread rail on its rows, the gradient Crush
word and the Accept/Decline controls — a fifth colour would compete with
all of them. Uses the drawer's own off-white. */
.lb-feed-notif__sectionHead:not(.lb-feed-notif__sectionHead--rest) {
color: rgba(247,244,255,.86);
}
@media (max-width: 480px) {
.lb-feed-notif__sheet {
width: calc(100vw - 16px);
margin-right: 8px;
max-height: min(78dvh, calc(100dvh - 54px - 12px));
}
}
/* ── Hybrid filter bar: the app's own action vocabulary ───────────────────
Recognition beats icon-family purity — Crush/Poke/Tip are the emoji users
already see on post actions, Comment/Like are the existing rail SVG paths,
and All stays a word because no "all" icon exists. Equal square targets
make the mixed artwork read as one row. All six fit without scrolling. */
.lb-feed-notif__filters {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
padding: 8px 10px 10px;
overflow: visible;
}
.lb-feed-notif__chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0;
border-radius: 10px;
font-size: 15px;
line-height: 1;
}
.lb-feed-notif__chipText {
font-size: 12px;
font-weight: 700;
letter-spacing: .01em;
}
.lb-feed-notif__chipGlyph {
font-size: 15px;
line-height: 1;
}
.lb-feed-notif__chipSvg {
width: 16px;
height: 16px;
fill: currentColor;
display: block;
}
.lb-feed-notif__chip.is-active .lb-feed-notif__chipSvg { fill: #fff; }
/* profile / public-profile drawers use a different list element — same
internal-scroll contract so the page behind never takes over. */
.lb-notifications__list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* ── Private Room notification mark ──────────────────────────────────────
48px canonical envelope-heart. The tile is contrast only: it gives the
white envelope an edge against the dark drawer without turning the
transparent artwork into a coloured badge. */
.lb-feed-notif__roomIcon {
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}
.lb-feed-notif__roomIcon img {
display: block;
width: 48px;
height: 31px;
object-fit: contain;
}
.lb-feed-notif__item--room {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.lb-feed-notif__item--room .lb-feed-notif__body {
flex: 1 1 0;
min-width: 0;
}
/* CENTER mark for the Private Room milestone -- it replaces the Match heart
in this modal only, so the composition reads as Private Room rather than as
a Match with an extra badge. Sized to sit between the two avatars. */
.lb-milestone-modal__roomIcon {
flex: 0 0 auto;
display: block;
width: 72px;
height: 46px;
align-self: center;
object-fit: contain;
}
/* ── Feed activity signal ───────────────────────────────────────────────────
Two distinct states, deliberately separated:
1. PERSISTENT .has-feed-activity — calm, always legible, means "fresh
activity is waiting here". Survives the burst and unrelated day changes;
clears only on a successful explicit reveal. Never animated.
2. TEMPORARY .is-feed-activity-pulsing + .lb-feed-activity-layer — a
~4.2s readable event.
The earlier rejected attempt merged these into one fast flicker that mostly
read as vibration. Nothing here shakes, and nothing darkens the tab. */
.lb-week-tabs__tab.has-feed-activity {
border-color: rgba(0,224,211,.62);
color: rgba(247,244,255,.98);
background:
linear-gradient(rgba(10,14,22,1), rgba(10,14,22,1)) padding-box,
linear-gradient(112deg, rgba(0,224,211,.85), rgba(132,89,255,.7)) border-box;
border: 1px solid transparent;
box-shadow: 0 0 0 1px rgba(0,224,211,.1), 0 0 16px rgba(0,224,211,.2);
}
/* Label shimmer — the SAME treatment as .lb-lane-accent, reusing its gradient
and its lb-lane-hl-shimmer keyframes verbatim rather than inventing a
variant. Scoped to .has-feed-activity so it reads as part of the "something
is alive here" signal instead of permanent Today chrome.
Applied to an inner span, never the button: background-clip:text on the tab
itself would clip its gradient border and background too. */
.lb-week-tabs__tab.has-feed-activity .lb-week-tabs__tabLabel {
background: linear-gradient(92deg, #FFB2E6 0%, #FF4FBF 32%, #B968FF 62%, #4F66FF 100%);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: lb-lane-hl-shimmer 6.5s ease-in-out infinite;
}
/* A small steady dot. Reads as "something is here" at a glance without a
number, and remains meaningful for reduced-motion users who never see the
burst at all. */
.lb-week-tabs__tab.has-feed-activity::after {
content: '';
position: absolute;
top: 7px;
right: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #00e0d3;
box-shadow: 0 0 8px rgba(0,224,211,.9);
}
.lb-week-tabs__tab.has-feed-activity.is-active {
box-shadow: 0 0 0 1px rgba(0,224,211,.16), 0 0 18px rgba(0,224,211,.26);
}
/* Scale + halo, never translate. A pulse says "alive"; a jitter says "error". */
.lb-week-tabs__tab.is-feed-activity-pulsing {
animation: lb-feed-activity-pulse 1500ms cubic-bezier(.22,.9,.28,1) both;
}
@keyframes lb-feed-activity-pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,224,211,.5); }
22% { transform: scale(1.07); box-shadow: 0 0 0 7px rgba(0,224,211,0); }
44% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,224,211,.42); }
66% { transform: scale(1.05); box-shadow: 0 0 0 9px rgba(0,224,211,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,224,211,0); }
}
/* Anchored to .lb-week-tabs (already position:relative) rather than to the tab
button: the button's textContent is reassigned on every day switch, which
would destroy child particles mid-flight, and .lb-week-tabs__scroller has
overflow-x:auto and would clip them. */
.lb-feed-activity-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
z-index: 6;
}
/* NO container. The earlier version gave each particle a dark fill, a border
and a pill radius, which made the burst read as five miniature nav buttons
hovering above the real one. These are luminous free-floating marks instead:
light on black, separated from the UI by glow rather than by a box. */
.lb-feed-activity-particle {
position: absolute;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, -50%);
/* Duration is set per-particle in JS (2600-3600ms) and combined with up to
860ms of stagger gives ≈4.4s of visible motion. */
animation: lb-feed-activity-float 3400ms cubic-bezier(.16,.7,.3,1) both;
}
/* NEW: bright and instantly readable from peripheral vision. Warm-white core
with a pink/teal luminous edge, borrowing the existing accent tokens rather
than introducing an alert red or a neon sign. */
.lb-feed-activity-particle__word {
color: #fff;
font-weight: 900;
letter-spacing: .13em;
text-shadow:
0 0 6px rgba(255,255,255,.55),
0 0 14px rgba(255,79,191,.6),
0 0 26px rgba(0,224,211,.35);
}
.lb-feed-activity-particle img {
object-fit: contain;
display: block;
/* Lifts the mark off pure black so it reads as emitted light. */
filter: drop-shadow(0 0 7px rgba(255,79,191,.5)) drop-shadow(0 0 14px rgba(0,224,211,.32));
}
/* ── Hierarchy ──────────────────────────────────────────────────────────────
One hero the eye catches first, then supporters, then a small trailing mark.
Uniform scale was the other half of why the burst read as flat UI. */
.lb-feed-activity-particle--hero {
font-size: 15px;
gap: 8px;
z-index: 3;
}
.lb-feed-activity-particle--hero img { width: 30px; height: 30px; }
.lb-feed-activity-particle--support {
font-size: 11px;
z-index: 2;
}
.lb-feed-activity-particle--support img { width: 21px; height: 21px; }
.lb-feed-activity-particle--trail {
font-size: 10px;
--fa-peak: .72;
z-index: 1;
}
.lb-feed-activity-particle--trail img { width: 15px; height: 15px; }
.lb-feed-activity-particle--iconOnly {
gap: 0;
}
/* --fa-peak lets the trailing mark sit quieter than the hero without needing a
second keyframe set. */
@keyframes lb-feed-activity-float {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
/* Slight overshoot on entry so the hero visibly pops out of the tab rather
than fading in politely. */
12% { opacity: var(--fa-peak, 1); transform: translate(calc(-50% + (var(--fa-x) * .2)), calc(-50% + (var(--fa-y) * .2))) scale(1.12); }
24% { transform: translate(calc(-50% + (var(--fa-x) * .42)), calc(-50% + (var(--fa-y) * .42))) scale(1); }
/* Long readable plateau. Nothing is asked of the user here except to see it. */
72% { opacity: var(--fa-peak, 1); transform: translate(calc(-50% + (var(--fa-x) * .84)), calc(-50% + (var(--fa-y) * .84))) scale(1); }
100% { opacity: 0; transform: translate(calc(-50% + var(--fa-x)), calc(-50% + var(--fa-y))) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
/* The persistent state and its dot deliberately REMAIN — reduced motion must
still be told that activity is waiting, just without movement. */
.lb-week-tabs__tab.is-feed-activity-pulsing { animation: none; }
.lb-feed-activity-layer { display: none; }
/* Gradient text stays, sweep stops — matching how .lb-lane-accent degrades. */
.lb-week-tabs__tab.has-feed-activity .lb-week-tabs__tabLabel {
animation: none;
background-position: 0% 0;
}
}