/* Friends' Statuses, threaded with pictures, matching the Friends Activity
   feed's language so the two tabs read as one thing.

   Fixed colours rather than inherited: member skins repaint link and text
   colours and this has to stay readable on every skin. */
.mbp-fs-item {
    background: #f2f2f2;
    padding: 7px 9px;
    margin: 0 0 6px 0;
}

.mbp-fs-head { display: flex; align-items: flex-start; gap: 8px; }

.mbp-fs-avatar img {
    width: 20px; height: 20px;
    border: 1px solid #cccccc;
    padding: 1px;
    background: #ffffff;
    display: block;
}

.mbp-fs-body { min-width: 0; }
.mbp-fs-user { font-weight: bold; }
.mbp-fs-time { color: #8a8a8a; font-size: 8pt; margin-left: 5px; white-space: nowrap; }
.mbp-fs-text { display: block; margin-top: 2px; word-wrap: break-word; }

/* Replies sit under their status, indented past the avatar. */
.mbp-fs-comments { margin: 5px 0 0 28px; }
.mbp-fs-comment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #ffffff;
    padding: 5px 8px;
    margin: 0 0 2px 0;
}
.mbp-fs-comment.mbp-fs-alt { background: #fafafa; }
.mbp-fs-by { font-weight: bold; color: #333333; }
.mbp-fs-ctext { display: block; margin-top: 2px; word-wrap: break-word; }

.mbp-fs-form { margin: 6px 0 0 28px; }
.mbp-fs-form input[type=text] {
    width: 60%; border: 1px solid #cfe0ef; border-radius: 3px;
    padding: 4px 7px; font-size: 9pt; vertical-align: middle;
}
.mbp-fs-form button {
    border: 1px solid #a9c7e8; background: #eef5fb; color: #1f5c9e;
    border-radius: 3px; padding: 4px 11px; font-size: 9pt;
    cursor: pointer; vertical-align: middle;
}

.mbp-ff-empty, .mbp-fs-empty { color: #6b6b6b; font-size: 9pt; padding: 10px 2px; }

@media (max-width: 640px) {
    .mbp-fs-comments, .mbp-fs-form { margin-left: 8px; }
    .mbp-fs-form input[type=text] { width: 100%; margin-bottom: 4px; }
}

/* Staff (and a member on their own reply) can remove a reply. Kept quiet
   until hover so it never competes with the text. */
.mbp-del-form { margin-left: auto; }
.mbp-del {
    border: 0; background: none; cursor: pointer;
    color: #b00020; font-size: 10pt; line-height: 1;
    padding: 0 2px; opacity: 0; transition: opacity .12s ease;
}
.mbp-ff-comment:hover .mbp-del,
.mbp-fs-comment:hover .mbp-del,
.mbp-del:focus { opacity: 1; }