.topic-block { position: relative; }
.conversation-topic { background: var(--surface); }
.topic-expanded-title, .conversation-topic[open] .topic-collapsed-title { display: none; }
.conversation-topic[open] .topic-expanded-title { display: inline; transform: none; }
.conversation-topic summary { color: var(--ink); font-size: .875rem; padding: 12px 22px; }
.conversation-topic[open] summary { width: calc(100% - 112px); }
.conversation-topic[open] summary > span:first-child { transform: none; }
.conversation-topic[open] summary .topic-chevron { transform: rotate(180deg); }
.conversation-topic[open] summary > span:first-child { color: var(--muted); font-size: .8125rem; }
.topic-carousel { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 22px 12px; max-height: min(34svh, 260px); }
.topic-carousel::-webkit-scrollbar { display: none; }
.topic-carousel:focus-visible { outline-offset: -3px; border-radius: 14px; }
.topic-card { flex: 0 0 92%; min-width: 0; max-height: 240px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); scroll-snap-align: center; overflow-y: auto; }
.topic-card-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--muted); }
.topic-card h2 { font-size: .9375rem; line-height: 1.5; margin: 8px 0 12px; word-break: keep-all; overflow-wrap: anywhere; }
.topic-answers { gap: 8px; }
.topic-answers > div { padding: 10px 12px; border-radius: 12px; }
.topic-mine { background: var(--accent-soft); }
.topic-theirs { background: var(--panel); border: 1px solid var(--line); }
.topic-person { font-size: .75rem; margin-bottom: 6px; }
.topic-answers .answer-body, .topic-answers .answer-body p { font-size: .875rem; line-height: 1.45; margin: 0; }
.topic-next { position: absolute; top: 0; right: 12px; min-height: 44px; font-size: .8125rem; margin: 0; }
.topic-next[aria-disabled="true"] { opacity: .55; cursor: wait; }
.conversation-topic:not([open]) + .topic-next { display: none; }
.like-moment, .like-moment.is-ready, .like-moment.is-liked { margin-bottom: 8px; padding: 4px; border: 0; border-radius: 12px; background: transparent; }
.like-moment p { word-break: keep-all; overflow-wrap: anywhere; }
.conversation-time strong { display: flex; align-items: baseline; gap: 8px; }
.conversation-time strong > span { font-size: .75rem; font-weight: 400; }
.conversation-time strong > time { font-size: 1.375rem; line-height: 1.25; }
.like-moment.is-urgent { background: #fff3e7; border-color: #c16a29; }
.is-urgent .conversation-time strong { color: #8b400c; }
.is-urgent .conversation-time strong > time { animation: countdown-arrival .35s ease-out; }
.connection-like { position: relative; }
.like-burst { position: absolute; inset: 0; pointer-events: none; color: var(--accent); }
.like-burst i { position: absolute; left: 45%; top: 10%; font-style: normal; animation: heart-rise .8s ease-out both; }
.like-burst i:nth-child(2) { --drift: -28px; animation-delay: .05s; }
.like-burst i:nth-child(3) { --drift: 28px; animation-delay: .1s; }
.conversation-pane { position: relative; }
.connection-celebration { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; padding: 10px 16px; background: var(--warm); color: var(--ink); font-size: .8125rem; line-height: 1.5; }
.connection-heart { color: var(--accent); font-size: 1.125rem; line-height: 1; }
.connection-celebration strong { font-size: inherit; }
.connection-celebration.is-new .connection-heart { animation: connection-heartbeat .7s ease-out; }
.room-person.just-revealed img { animation: profile-reveal .45s ease-out; }
.room-empty span { color: var(--muted); font-size: .9375rem; font-weight: 400; }
.conversation-system-event { text-align: center; color: var(--muted); font-size: .8125rem; margin: 20px 0; padding: 12px; }
.conversation-system-event time { display: block; font-size: .6875rem; margin-top: 6px; }
.request-detail { align-content: start; text-align: left; padding: 28px; }
.request-detail > * { max-width: 540px; }
.request-detail h2 { font-size: 1.45rem; margin-top: 8px; margin-bottom: 10px; }
.request-detail .request-context { font-size: .75rem; }
.request-detail .request-expiry { width: fit-content; margin: 16px auto 24px; padding: 8px 14px; border-radius: 30px; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
.request-answers { border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-bottom: 20px; }
.request-answers h3 { font-size: .9375rem; margin: 0 0 16px; }
.request-answers ol { list-style: none; padding: 0; margin: 0; }
.request-answers li + li { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.request-answers h4 { color: var(--muted); font-size: .8125rem; line-height: 1.55; font-weight: 400; margin: 0 0 6px; }
.request-answers .answer-body { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.request-answers .answer-body p { margin: 0; }
.request-answers summary { cursor: pointer; min-height: 44px; display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-size: .875rem; margin-top: 16px; }
.request-answers summary span { color: var(--muted); font-size: .75rem; }
.request-answers details[open] summary { margin-bottom: 16px; }
.request-detail .request-disclosure { font-size: .8125rem; }
@keyframes heart-rise { from { opacity: 1; transform: translate(0,0) scale(.7); } to { opacity: 0; transform: translate(var(--drift, 0),-55px) scale(1.3); } }
@keyframes connection-heartbeat { 0%,100% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-8deg); } 65% { transform: scale(.95); } }
@keyframes profile-reveal { from { opacity: .5; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes countdown-arrival { from { transform: scale(1.1); } to { transform: scale(1); } }
@media (max-width: 640px) {
  .conversation-topic summary { padding: 10px 16px; }
  .topic-carousel { padding: 0 12px 8px; gap: 8px; }
  .topic-card { padding: 12px; flex-basis: 94%; }
  .topic-answers > div { padding: 8px; }
  .topic-next { right: 8px; }
  .conversation-time strong { gap: 6px; }
  .conversation-time strong > time { font-size: 1.25rem; }
  .request-detail { padding: 24px 16px; }
  .request-detail h2 { font-size: 1.3rem; }
  .request-answers { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .like-burst { display: none; }
  .connection-celebration.is-new .connection-heart, .room-person.just-revealed img, .is-urgent .conversation-time strong > time { animation: none; }
  .topic-carousel { scroll-behavior: auto; }
}