/*
  thread.css: a post's conversation on faxo.com (root/post/_conversation), the way the app draws
  threaded comments: faces, ▲ score ▼, Best / Top / New, replies under a thread line.

  Self-contained: its colors are set on .fx-convo (light and dark), so it sits on any page, the
  post page (with faxo.css) or an article page with its own look, without either changing the
  other. The post's own ▲ score ▼ row (.fx-post-actions) uses it too.
  Link it with a version, and bump it when this file changes:
    <link rel="stylesheet" href="/site/thread.css?v=1">
*/

.fx-convo, .fx-post-actions {
  --cv-label: #000000;
  --cv-secondary: rgba(60, 60, 67, .6);
  --cv-tertiary: rgba(60, 60, 67, .3);
  --cv-fill: #f2f2f7;
  --cv-fill-pressed: #e5e5ea;
  --cv-accent: #007aff;
  --cv-green: #34c759;
  --cv-up: #ff6a00;
  --cv-down: #5e7bff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", Arial, sans-serif;
  color: var(--cv-label);
}
@media (prefers-color-scheme: dark) {
  .fx-convo, .fx-post-actions {
    --cv-label: #ffffff;
    --cv-secondary: rgba(235, 235, 245, .6);
    --cv-tertiary: rgba(235, 235, 245, .3);
    --cv-fill: #1c1c1e;
    --cv-fill-pressed: #2c2c2e;
    --cv-accent: #0a84ff;
    --cv-green: #30d158;
  }
}
.fx-convo *, .fx-convo *::before, .fx-convo *::after { box-sizing: border-box; }
.fx-convo a { text-decoration: none; color: inherit; }
.fx-convo img, .fx-convo svg { display: block; }

/* ---------- faces ---------- */
.fx-avatar { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--cv-fill, #f2f2f7); }
/* initials on a soft color from the name (--hue), as Contacts draws people without a photo */
.fx-initials {
  display: grid; place-items: center;
  background: hsl(var(--hue, 210) 45% 62%); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
}
@media (prefers-color-scheme: dark) { .fx-initials { background: hsl(var(--hue, 210) 30% 42%); } }
/* nobody in particular (a deleted account, anonymous, the reader): a gray silhouette */
.fx-faceless { display: grid; place-items: end center; overflow: hidden; background: var(--cv-fill-pressed, #e5e5ea); }
.fx-faceless svg { width: 80%; height: 80%; fill: var(--cv-tertiary, rgba(60, 60, 67, .3)); }

/* ---------- ▲ score ▼, Reply, Comment and Share (the app's _ThreadActions) ---------- */
.fx-post-actions, .fx-comment-actions { display: flex; align-items: center; gap: 2px; color: var(--cv-secondary); }
.fx-comment-actions { height: 32px; margin-left: -6px; }
.fx-vote { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; color: var(--cv-secondary); }
.fx-vote svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fx-vote:hover { background: var(--cv-fill); }
.fx-vote.up:hover { color: var(--cv-up); }
.fx-vote.down:hover { color: var(--cv-down); }
.fx-score { min-width: 28px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-action {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 16px;
  background: none; color: var(--cv-secondary); font: 600 13px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif; cursor: pointer;
}
.fx-action:hover { background: var(--cv-fill); color: var(--cv-label); }
.fx-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the conversation ---------- */
.fx-comments { padding: 18px 0 32px; }
.fx-comments-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fx-comments-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; }
.fx-sorts { display: flex; gap: 6px; }
/* the app's one selected-pill style: blue with white text */
.fx-sort { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 15px; background: var(--cv-fill); color: var(--cv-label); font-size: 14px; font-weight: 600; }
.fx-convo .fx-sort.on { background: var(--cv-accent); color: #fff; }
.fx-compose {
  margin: 14px 0 6px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px;
  border-radius: 22px; background: var(--cv-fill); color: var(--cv-secondary); font-size: 15px;
}
.fx-convo .fx-compose:hover { color: var(--cv-label); }
.fx-empty { margin: 28px 0; text-align: center; font-size: 15px; color: var(--cv-secondary); }

.fx-thread { list-style: none; margin: 0; padding: 0; }
.fx-comment { display: flex; gap: 10px; padding-top: 14px; }
.fx-comment-face { flex: none; }
.fx-comment-main { flex: 1; min-width: 0; }
.fx-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; line-height: 1.3; color: var(--cv-secondary); }
.fx-comment-name { font-weight: 600; color: var(--cv-label); }
.fx-convo a.fx-comment-name:hover { text-decoration: underline; }
.fx-op, .fx-pinned { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.fx-op { color: var(--cv-accent); background: color-mix(in srgb, var(--cv-accent) 14%, transparent); }
.fx-pinned { color: var(--cv-green); background: color-mix(in srgb, var(--cv-green) 14%, transparent); }
.fx-comment-text { margin-top: 3px; font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; color: var(--cv-label); }
.fx-convo .fx-comment-text a { color: var(--cv-accent); }
.fx-convo .fx-comment-text a:hover { text-decoration: underline; }
/* replies hang under their comment with a thread line down the left */
.fx-replies { margin-top: 2px; padding-left: 12px; border-left: 2px solid var(--cv-fill-pressed); }
.fx-reply { padding-top: 10px; }
.fx-convo .fx-more-replies { display: inline-block; margin-top: 6px; padding: 4px 0; color: var(--cv-accent); font-size: 13px; font-weight: 600; }
.fx-convo .fx-more-replies:hover { text-decoration: underline; }
.fx-convo .fx-see-all {
  margin-top: 24px; display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 12px;
  background: var(--cv-fill); color: var(--cv-label); font-size: 17px; font-weight: 600;
}
.fx-convo .fx-see-all:hover { background: var(--cv-fill-pressed); }