.inline { display: inline; margin: 0; }
.small, button.small { width: auto; margin: 0; padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.muted { color: var(--pico-muted-color); }
.error { color: var(--pico-del-color); }
.brand { text-decoration: none; }

.feed-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }
.topic-list { list-style: none; padding: 0; }
.topic-list li { list-style: none; margin-bottom: 0.4rem; }
.topic-list a[aria-current], .filters a[aria-current] { font-weight: 700; text-decoration: underline; }
.feed-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.item { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.item .title { font-weight: 400; }
.item.unread .title { font-weight: 700; }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.85rem; color: var(--pico-muted-color); }
.badge { padding: 0 0.3rem; border: 1px solid var(--pico-muted-border-color); border-radius: 4px; font-size: 0.75rem; }
.badge.partial { border-color: var(--pico-del-color); color: var(--pico-del-color); }
.summary { margin: 0.25rem 0 0; }
.more { width: 100%; }

.notice { padding-left: 0.75rem; border-left: 3px solid var(--pico-del-color); }
.article-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.chat-pane { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
#messages { flex: 1; overflow-y: auto; }
.msg { margin-bottom: 1rem; }
.msg.user .body { padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--pico-card-sectioning-background-color); }
.steps { margin: 0 0 0.25rem; padding: 0; font-size: 0.8rem; color: var(--pico-muted-color); }
.steps li { list-style: none; }
.steps li::before { content: "› "; }
.quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.tabs { display: none; }
.row-actions { white-space: nowrap; }
.actions { display: flex; gap: 1rem; align-items: center; }
.actions button { width: auto; }
.login { max-width: 420px; margin: 4rem auto; }

@media (max-width: 768px) {
  .feed-layout, .article-layout { grid-template-columns: 1fr; }
  .tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
  .tabs button { width: auto; }
  .article-layout[data-active="article"] .chat-pane,
  .article-layout[data-active="chat"] .article-pane { display: none; }
  .chat-pane { position: static; max-height: none; }
}