/* Post card styles, shared by the community feed, profiles, and anywhere else a post
   is rendered. Moved out of dashboard.html when js/post-card.js was extracted: one
   renderer with its styles in another page's <style> block would have meant posts looked
   right in the feed and unstyled everywhere else. */

.post-image { max-width: 100%; border-radius: 10px; display: block; margin-top: 8px; cursor: pointer; }
.post-video {
      position: relative; margin-top: 8px; border-radius: 10px; overflow: hidden;
      cursor: pointer; max-width: 100%; line-height: 0;
    }
.post-video img { width: 100%; display: block; }
.post-video-overlay {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.22); transition: background .15s;
    }
.post-video:hover .post-video-overlay { background: rgba(0,0,0,0.34); }
.post-video-play {
      width: 58px; height: 58px; border-radius: 50%; background: rgba(255,0,0,0.9);
      display: flex; align-items: center; justify-content: center; padding-left: 3px;
    }
.post-video.playing { aspect-ratio: 16 / 9; cursor: default; }
.post-video.playing iframe { width: 100%; height: 100%; border: 0; display: block; }
.post-edit-area { width:100%; box-sizing:border-box; background:var(--bg2); border:1px solid var(--border); border-radius:10px; color:var(--text); padding:10px 12px; font-size:0.9rem; resize:none; font-family:inherit; min-height:60px; outline:none; margin-top:6px; }
.post-edit-area:focus { border-color:var(--primary); }
.post-edit-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.post-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
#post-feed > div:last-child .post-item { border-bottom: none; }
.post-item:hover { background: var(--bg3); border-radius: 0; }
.post-feed-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.post-body { flex: 1; min-width: 0; }
.post-meta { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.post-name { font-weight: 700; font-size: 0.92rem; color: var(--text); text-decoration: none; }
.post-name:hover { text-decoration: underline; }
.post-dot { color: var(--muted); font-size: 0.78rem; }
.post-time { font-size: 0.8rem; color: var(--muted); }
.post-text { font-size: 0.93rem; line-height: 1.6; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.post-actions { display: flex; gap: 4px; margin-top: 10px; }
.post-act { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 0.82rem; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 9999px; transition: all 0.15s; }
.like-btn:hover, .like-btn.liked { color: #e0245e; background: rgba(224,36,94,0.08); }
.like-btn.liked svg { fill: currentColor; }
.del-btn:hover { color: #ef4444; background: rgba(239,68,68,0.08); }
.share-btn:hover { color: var(--primary); background: rgba(139,92,246,0.08); }
.comment-btn:hover { color: var(--primary); background: rgba(139,92,246,0.08); }
.comment-panel { border-top: 1px solid var(--border); padding: 10px 16px 12px; display: none; }
.comment-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.comment-item { display: flex; gap: 9px; padding: 6px 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-name { font-weight: 700; font-size: 0.82rem; color: var(--text); text-decoration: none; }
.comment-name:hover { text-decoration: underline; }
.comment-text { font-size: 0.85rem; line-height: 1.5; color: var(--text); word-break: break-word; white-space: pre-wrap; margin-top: 1px; }
.comment-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.comment-time { font-size: 0.74rem; color: var(--muted); }
.reply-link { font-size: 0.74rem; font-weight: 700; color: var(--muted); cursor: pointer; background: none; border: none; padding: 0; }
.reply-link:hover { color: var(--primary); }
.del-comment { font-size: 0.74rem; color: var(--muted); cursor: pointer; background: none; border: none; padding: 0; }
.del-comment:hover { color: #ef4444; }
.reply-thread { margin-left: 36px; border-left: 2px solid var(--border); padding-left: 10px; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.reply-compose { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.reply-compose textarea, .comment-compose textarea {
      flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
      padding: 7px 10px; font-size: 0.83rem; color: var(--text); font-family: inherit;
      resize: none; outline: none; line-height: 1.4; min-height: 34px;
    }
.reply-compose textarea:focus, .comment-compose textarea:focus { border-color: var(--primary); }
.comment-compose { display: flex; gap: 8px; align-items: flex-start; }

@media (max-width: 640px) {
  .post-item { padding: 10px 12px; gap: 8px; }
  .post-actions { flex-wrap: wrap; }
  .post-feed-card { border-radius: 12px; }
  .reply-thread { margin-left: 20px; }
}

/* ── Reposts ── */
.repost-header { display: flex; align-items: center; gap: 6px; padding: 8px 16px 0; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.repost-header a { color: var(--muted); text-decoration: none; font-weight: 700; }
.repost-header a:hover { text-decoration: underline; }
.repost-btn:hover, .repost-btn.reposted { color: #16a34a; background: rgba(22,163,74,0.09); }

/* The quoted original. A link, not a nested post card: acting on the original from inside
   someone else's repost would be ambiguous about which post you meant. */
.repost-quote { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; margin-top: 9px; text-decoration: none; color: inherit; background: var(--bg); transition: background 0.12s, border-color 0.12s; }
.repost-quote:hover { background: var(--bg3); border-color: var(--primary); }
.repost-quote-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.repost-quote-name { font-weight: 700; font-size: 0.82rem; color: var(--text); }
.repost-quote-text { font-size: 0.86rem; line-height: 1.5; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.repost-quote-img { max-width: 100%; border-radius: 8px; display: block; margin-top: 7px; }
.repost-quote-gone { display: block; border: 1px dashed var(--border); border-radius: 12px; padding: 12px; margin-top: 9px; font-size: 0.83rem; color: var(--muted); font-style: italic; }

/* Repost / Quote chooser */
.repost-menu { position: absolute; bottom: 100%; left: 0; z-index: 40; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; min-width: 190px; display: flex; flex-direction: column; }
.repost-menu button { background: none; border: none; text-align: left; padding: 8px 11px; border-radius: 7px; font-size: 0.85rem; color: var(--text); cursor: pointer; font-family: inherit; white-space: nowrap; }
.repost-menu button:hover { background: var(--bg3); }

/* Quote composer */
.quote-box { padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.quote-box textarea { width: 100%; box-sizing: border-box; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 0.88rem; color: var(--text); font-family: inherit; resize: none; outline: none; line-height: 1.5; }
.quote-box textarea:focus { border-color: var(--primary); }
.quote-box-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

@media (max-width: 640px) {
  .repost-header { padding: 6px 12px 0; }
  .quote-box { padding: 10px 12px 12px; }
}

/* ── Mentions ── */
.mention { color: var(--primary); font-weight: 600; text-decoration: none; }
.mention:hover { text-decoration: underline; }

/* @-autocomplete. Anchored above the textarea so it never covers what is being typed. */
.mention-menu { position: absolute; bottom: 100%; left: 0; z-index: 60; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; min-width: 240px; max-width: 320px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.mention-option { display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: left; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--text); width: 100%; }
.mention-option:hover, .mention-option.active { background: var(--bg3); }
.mention-option img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mention-initial { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; flex-shrink: 0; }
.mention-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-prof { color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Topics ── */
.topic { color: var(--primary); font-weight: 600; text-decoration: none; }
.topic:hover { text-decoration: underline; }

/* Feed scope tabs */
.feed-scope { display: flex; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--border); }
.feed-tab { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.86rem; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.feed-tab:hover { color: var(--text); }
.feed-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* "Showing posts tagged #x" */
.topic-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg3); font-size: 0.85rem; color: var(--muted); }
.topic-banner-inner strong { color: var(--primary); }
.topic-banner-inner button { background: none; border: 1px solid var(--border); border-radius: 9999px; padding: 3px 12px; font-size: 0.78rem; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; }
.topic-banner-inner button:hover { color: var(--text); border-color: var(--primary); }

/* Trending list */
.trend-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.trend-row:last-child { border-bottom: none; }
.trend-tag { font-weight: 700; font-size: 0.86rem; color: var(--primary); }
.trend-count { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }