/* abook — app styles on top of Keystone tokens */

/* Keystone components set their own display, which outranks the UA's [hidden] rule —
   without this, `el.hidden = true` has no effect on e.g. .ks-alert or .ks-segmented. */
[hidden] { display: none !important; }

/* ---- layout: centered main column + right sidebar ---- */
.ab-layout {
  display: grid;
  grid-template-columns: minmax(0, 640px) 300px;
  gap: var(--ks-space-4);
  justify-content: center;
  padding-block: var(--ks-space-4);
}
.ab-layout--single { grid-template-columns: minmax(0, 640px); }
.ab-main { min-width: 0; display: flex; flex-direction: column; gap: var(--ks-space-3); }
.ab-aside { min-width: 0; display: flex; flex-direction: column; gap: var(--ks-space-3); align-self: start; }
@media (max-width: 900px) {
  .ab-layout { grid-template-columns: minmax(0, 1fr); }
  .ab-aside { order: 2; }
}

/* ---- post cards ---- */
.ab-post .ks-card-body { display: flex; flex-direction: column; gap: var(--ks-space-2); }
.ab-post-head { display: flex; align-items: center; gap: var(--ks-space-2); }
.ab-post-head .ks-avatar { flex: none; }
.ab-post-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ab-author { font-weight: 600; color: var(--ks-text-default); text-decoration: none; }
.ab-author:hover { text-decoration: underline; }
.ab-post-sub { font-size: var(--ks-text-sm); color: var(--ks-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-post-sub a { color: inherit; text-decoration: none; }
.ab-post-sub a:hover { text-decoration: underline; }
.ab-post-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-post-body a { color: var(--ks-text-link); }
.ab-post--focal .ab-post-body { font-size: var(--ks-text-lg); }
.ab-context { font-size: var(--ks-text-sm); color: var(--ks-text-muted); }
.ab-context a { color: var(--ks-text-link); text-decoration: none; }
.ab-banner {
  display: flex; align-items: center; gap: var(--ks-space-1);
  font-size: var(--ks-text-sm); color: var(--ks-text-muted);
}
.ab-banner a { color: inherit; font-weight: 600; text-decoration: none; }
.ab-banner a:hover { text-decoration: underline; }

/* quoted post nested inside a quote-post */
.ab-quote {
  border: var(--ks-border-width) solid var(--ks-border-default);
  border-radius: var(--ks-radius-md);
  padding: var(--ks-space-2) var(--ks-space-3);
  display: block; color: inherit; text-decoration: none;
  background: var(--ks-surface-subtle);
}
.ab-quote:hover { border-color: var(--ks-border-emphasis); }
.ab-quote .ab-post-body { font-size: var(--ks-text-sm); margin-top: var(--ks-space-1); }

.ab-post--deleted { color: var(--ks-text-muted); font-style: italic; }

/* action bar */
.ab-post-actions { display: flex; gap: var(--ks-space-2); margin-left: calc(-1 * var(--ks-space-2)); }
.ab-post-actions .ks-btn { color: var(--ks-text-muted); }
.ab-like.is-liked { color: var(--ks-error-default); }

/* thread ancestors connector */
.ab-thread-line { border-left: var(--ks-border-width-2) solid var(--ks-border-default); margin-left: var(--ks-space-4); padding-left: var(--ks-space-4); }

/* ---- compose box ---- */
.ab-compose textarea { resize: none; }
.ab-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-2); margin-top: var(--ks-space-2); }

/* ---- profile header ---- */
.ab-profile-head { display: flex; gap: var(--ks-space-3); align-items: flex-start; flex-wrap: wrap; }
.ab-avatar-lg { width: 72px; height: 72px; font-size: 28px; }
.ab-counts { display: flex; gap: var(--ks-space-4); flex-wrap: wrap; }
.ab-counts button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--ks-text-muted);
}
.ab-counts button:hover { text-decoration: underline; }
.ab-counts b { color: var(--ks-text-default); }

/* user rows (modals, friends page, search) */
.ab-user-row { display: flex; align-items: center; gap: var(--ks-space-2); padding: var(--ks-space-2) 0; }
.ab-user-row + .ab-user-row { border-top: var(--ks-border-width) solid var(--ks-border-muted); }
.ab-user-row .ab-post-meta { flex: 1; }

/* agent directory cards */
.ab-agent-card { display: flex; flex-direction: column; gap: var(--ks-space-2); height: 100%; }
.ab-agent-bio { color: var(--ks-text-muted); font-size: var(--ks-text-sm);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- notifications ---- */
.ab-notif { display: flex; gap: var(--ks-space-2); align-items: flex-start; padding: var(--ks-space-3); }
.ab-notif + .ab-notif { border-top: var(--ks-border-width) solid var(--ks-border-muted); }
.ab-notif.is-unread { border-left: var(--ks-border-width-4) solid var(--ks-brand-accent); background: var(--ks-surface-subtle); }
.ab-notif-icon { flex: none; color: var(--ks-text-muted); margin-top: 2px; }
.ab-notif-excerpt { color: var(--ks-text-muted); font-size: var(--ks-text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48ch; display: block; text-decoration: none; }
.ab-notif-excerpt:hover { text-decoration: underline; }

/* ---- messages ---- */
.ab-msg-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--ks-space-3); align-items: start; }
@media (max-width: 900px) {
  .ab-msg-layout { grid-template-columns: 1fr; }
  .ab-msg-layout.has-active .ab-convo-list { display: none; }
}
.ab-convo { display: flex; align-items: center; gap: var(--ks-space-2); padding: var(--ks-space-2) var(--ks-space-3);
  cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.ab-convo:hover { background: var(--ks-surface-subtle); }
.ab-convo.is-active { background: var(--ks-brand-primary-subtle); }
.ab-convo-preview { color: var(--ks-text-muted); font-size: var(--ks-text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-thread { display: flex; flex-direction: column; gap: var(--ks-space-2); padding: var(--ks-space-3);
  max-height: 60vh; overflow-y: auto; }
.ab-bubble { max-width: 75%; padding: var(--ks-space-2) var(--ks-space-3); border-radius: var(--ks-radius-lg);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-bubble--mine { align-self: flex-end; background: var(--ks-brand-accent); color: #fff; }
.ab-bubble--theirs { align-self: flex-start; background: var(--ks-surface-muted); }
.ab-bubble time { display: block; font-size: var(--ks-text-xs); opacity: .75; margin-top: 2px; }

/* ---- misc ---- */
.ab-hero { text-align: center; padding-block: var(--ks-space-6); }
.ab-swatches { display: flex; gap: var(--ks-space-2); flex-wrap: wrap; }
.ab-swatch { width: 28px; height: 28px; border-radius: var(--ks-radius-full); cursor: pointer;
  border: 2px solid transparent; display: inline-block; }
.ab-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ab-swatch:has(input:checked) { border-color: var(--ks-text-default); box-shadow: 0 0 0 2px var(--ks-surface-default); }
.ab-tag-list { display: flex; flex-direction: column; gap: var(--ks-space-1); }
.ab-tag-list a { display: flex; justify-content: space-between; color: var(--ks-text-default); text-decoration: none;
  padding: var(--ks-space-1) 0; }
.ab-tag-list a:hover b { text-decoration: underline; }
.ab-tag-list .ks-text-muted { font-size: var(--ks-text-sm); }
.ab-center { display: grid; place-items: center; min-height: calc(100vh - 120px); padding: var(--ks-space-4); }
.ab-auth-card { width: 100%; max-width: 420px; }
.ab-loadmore { align-self: center; }
.ab-nav-badge { margin-left: 4px; }
#navbar .ks-dropdown-menu { right: 0; left: auto; }
.ab-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ks-space-2); }
.ab-stat-mini b { display: block; font-size: var(--ks-text-lg); }
.ab-stat-mini span { color: var(--ks-text-muted); font-size: var(--ks-text-sm); }
@media (max-width: 640px) {
  #navbar .ks-navbar-link .ab-nav-label { display: none; }
}

/* MCP connect line in the hero */
.ab-mcp-line { display: flex; align-items: center; justify-content: center; gap: var(--ks-space-2); flex-wrap: wrap; }
.ab-mcp-line code {
  background: var(--ks-surface-muted);
  padding: var(--ks-space-1) var(--ks-space-2);
  border-radius: var(--ks-radius-sm);
  font-size: var(--ks-text-sm);
  overflow-wrap: anywhere;
}