/* Activity — old-school Xfire-flavored feed. Deliberately dense + utilitarian, not a modern social feed.
   Used by both the homepage panel (.act-panel) and the full page (.act-feed). Theme-var driven. */
.act-panel, .act-feed { --act-line: var(--border-color, var(--border, #2a2f3a)); --act-mut: var(--muted-color, #8b93a4); --act-accent: var(--link-color, #5aa2e6); }

/* homepage panel */
.act-panel { border: 1px solid var(--act-line); border-radius: 6px; overflow: hidden; margin-bottom: 12px; background: rgba(0,0,0,.12); }
.act-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px;
  background: linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.06)); border-bottom: 1px solid var(--act-line);
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--act-mut); }
.act-viewall { font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--act-accent); text-decoration: none; }
.act-viewall:hover { text-decoration: underline; }

/* a row (shared by panel + page). The row is a <div>, not an <a>: rows can contain their own links
   (.act-actor → profile), and an <a> row would nest anchors (illegal — the parser closes the row's
   <a> early and the text spills out). When a row has a url we overlay a "stretched link" that fills
   the row, and raise inner links above it so both the row click and the actor link keep working. */
.act-row { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px;
  border-bottom: 1px solid var(--act-line); text-decoration: none; color: inherit; }
.act-row:last-child { border-bottom: none; }
.act-row:hover { background: rgba(255,255,255,.045); }
.act-row-link { position: absolute; inset: 0; z-index: 0; }   /* covers the whole row; empty on purpose */
.act-body a { position: relative; z-index: 1; }               /* keep actor/inline links above the overlay */
.act-icon { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; border-radius: 5px; background: rgba(255,255,255,.05); border: 1px solid var(--act-line); }
.act-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.act-text { font-size: 13px; line-height: 1.35; color: var(--text-color, #d7dbe2); overflow-wrap: anywhere; }
.act-text b { color: var(--text-color, #eef1f6); }
.act-actor { font-weight: 700; color: var(--act-accent); text-decoration: none; }
.act-actor:hover { text-decoration: underline; }
.act-ago { font-size: 11px; color: var(--act-mut); }

/* full page */
.act-feed { max-width: 720px; }
.act-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.act-filter { font: inherit; font-size: 12px; cursor: pointer; padding: 5px 12px; border-radius: 20px;
  color: var(--act-mut); background: transparent; border: 1px solid var(--act-line); }
.act-filter:hover { color: var(--text-color, #eef1f6); }
.act-filter.is-active { color: #fff; border-color: var(--act-accent); background: color-mix(in srgb, var(--act-accent) 16%, transparent); }
.act-list { border: 1px solid var(--act-line); border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.12); }
.act-foot { margin-top: 12px; text-align: center; }
.act-more { font: inherit; font-size: 13px; cursor: pointer; padding: 7px 20px; border-radius: 6px;
  color: var(--text-color, #eef1f6); background: rgba(255,255,255,.05); border: 1px solid var(--act-line); }
.act-more:hover { background: rgba(255,255,255,.1); }
.act-empty { color: var(--act-mut); font-size: 13px; }

/* ============================================================================================
   In-chat "Activity Report" panel (assets/activity-chat.js grafts these onto the rooms chat).
   Xfire flavor: charcoal chrome + an amber brand accent for the launcher/header; rows reuse the
   theme-var .act-* styles above so they match the homepage panel and the standalone page.
   ============================================================================================ */
#fb-chat { --act-brand: #e8760c; --act-brand-2: #ffab4a; --act-line: var(--border-color, rgba(127,127,127,.28)); --act-mut: var(--muted-color, #8b93a4); }

/* launcher — a compact pill in the chat title bar (.chat-head), sitting right next to the room name
   in the top-left. It lives inside .chat-head-main (a flex row: emoji + name + category), so the
   flex gap spaces it after the name. activity-chat.js re-attaches it after chat.js rebuilds the header. */
.chat-act-btn { flex: 0 0 auto; margin-left: 2px; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 3px 10px; border-radius: 20px; color: #fff; font: inherit; font-size: 11px;
  font-weight: 800; letter-spacing: .4px; text-transform: uppercase; line-height: 1.2;
  border: 1px solid rgba(255,171,74,.55); background: linear-gradient(180deg, #f2861a, #d9660a);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(0,0,0,.3); }
.chat-act-btn:hover { background: linear-gradient(180deg, #ff922a, #e46e0d); }
.chat-act-btn:active { transform: translateY(1px); }
.chat-act-ico { font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.chat-act-label { text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.chat-act-count { flex: none; min-width: 16px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0;
  padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,.32); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset; }
.chat-act-btn.has-new .chat-act-count { background: #fff; color: #c25a00; animation: chat-act-pulse 1.6s ease-in-out infinite; }
@keyframes chat-act-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,171,74,.7); } 50% { box-shadow: 0 0 0 5px rgba(255,171,74,0); } }
#fb-chat.act-open .chat-act-btn { background: linear-gradient(180deg, #c96209, #a54e05); border-color: rgba(255,171,74,.35); }
/* narrow chat: drop the label, keep the icon + count */
@media (max-width: 560px) { .chat-act-label { display: none; } }

/* activity column — its own flex column between .chat-main and the rooms sidebar */
.chat-activity { display: none; min-width: 0; flex-direction: column; background: rgba(0,0,0,.14);
  border-left: 1px solid var(--act-line); }
#fb-chat.act-open .chat-activity { display: flex; flex: 1 1 0; }
#fb-chat.act-open .chat-main { display: none; }                    /* takeover: activity replaces chat */
#fb-chat.act-open.act-split .chat-main { display: flex; flex: 1 1 0; } /* split: chat left, activity right */
#fb-chat.act-open.act-split .chat-activity { flex: 1 1 0; }

.chat-act-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px;
  border-bottom: 1px solid var(--act-line); background: linear-gradient(180deg, rgba(232,118,12,.16), rgba(0,0,0,.10)); }
.chat-act-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-color, #eef1f6); display: flex; align-items: center; gap: 6px; }
.chat-act-title .chat-act-ico { color: var(--act-brand-2); }
.chat-act-tools { display: flex; gap: 4px; }
.chat-act-tools button { cursor: pointer; font: inherit; font-size: 12px; line-height: 1; width: 26px; height: 24px;
  display: flex; align-items: center; justify-content: center; color: var(--act-mut); background: rgba(127,127,127,.12);
  border: 1px solid var(--act-line); border-radius: 5px; }
.chat-act-tools button:hover { color: var(--text-color, #eef1f6); background: rgba(127,127,127,.22); }
.chat-act-split.is-on { color: #fff; border-color: rgba(255,171,74,.6); background: linear-gradient(180deg, #e0730f, #b95905); }

.chat-act-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--act-line); }
.chat-act-filter { font: inherit; font-size: 11px; cursor: pointer; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  color: var(--act-mut); background: transparent; border: 1px solid var(--act-line); }
.chat-act-filter:hover { color: var(--text-color, #eef1f6); }
.chat-act-filter.is-active { color: #fff; border-color: var(--act-brand-2); background: rgba(232,118,12,.22); }

.chat-act-list { flex: 1 1 auto; min-height: var(--chat-log-h, 360px); overflow-y: auto; }
.chat-act-loading { color: var(--act-mut); font-size: 12.5px; padding: 14px 12px; }
.chat-act-foot { padding: 8px 10px; text-align: center; border-top: 1px solid var(--act-line); }
.chat-act-foot:not(:has(> :not([hidden]))) { display: none; } /* no border when nothing to show */
.chat-act-more { font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 18px; border-radius: 6px;
  color: var(--text-color, #eef1f6); background: rgba(255,255,255,.05); border: 1px solid var(--act-line); }
.chat-act-more:hover { background: rgba(255,255,255,.1); }
.chat-act-empty { color: var(--act-mut); font-size: 12.5px; }

/* stacked (mobile) chat: .chat-cols becomes a column, so put activity full-width under the chat */
@media (max-width: 720px) {
  #fb-chat.act-open.act-split .chat-main,
  #fb-chat.act-open.act-split .chat-activity { flex: 1 1 auto; }
  .chat-act-list { min-height: 260px; }
}