/* ----------------------------------------------------------------------------
   feed_bar.css - the News Feed's bottom bar on every other feed's rows (Chris, S627).
   The bar itself is the News Feed's own class
   (.full_width_main_content_newsfeed_post_right_the_content_posted_bottom_bar, css/style.css:
   14px, links #3b5998), so nothing about its look is restated here. This file carries only
   what the News Feed's bar does not need: the "you picked this" state, the span controls used
   inside a row that is itself a link, and the comments window.
---------------------------------------------------------------------------- */

.mh-fb span[role="button"] { color: #3b5998; margin: 0 4px 0 0; cursor: pointer; }
.mh-fb span.newsfeed_post_permalink_link { color: #3b5998; }
.mh-fb .mh-fb-like.is-on,
.mh-fb .mh-fb-dislike.is-on { font-weight: bold; }
.mh-fb a:focus-visible,
.mh-fb span[role="button"]:focus-visible { outline: 2px solid #e9bc47; outline-offset: 2px; }

/* Comments window: the News Feed post popup's size (TOOLBAR_SPEC section 0, Tom S624) -
   960px x 92vh card, one scroll (the list), square div-table edges. */
.mh-fb-win {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); padding: 12px; box-sizing: border-box;
}
.mh-fb-card {
    display: flex; flex-direction: column; box-sizing: border-box;
    width: 960px; max-width: 100%; max-height: 92vh;
    background: #ffffff; border: 1px solid #dfdfdf; padding: 10px;
    font-family: Tahoma, 'Poppins', Geneva, sans-serif; color: #121c31;
}
.mh-fb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #dfdfdf; }
.mh-fb-title { font-size: 18px; font-weight: bold; overflow-wrap: anywhere; }
/* SM.BUTTON (docs/design/MARKETHIVE_BUTTON_PROTOCOL.md) - .mh-sm-btn lives in homepage.css,
   which most feed pages do not load, so the window carries the same values. */
.mh-fb-close, .mh-fb-post {
    flex: 0 0 auto; box-sizing: border-box; cursor: pointer;
    background: #6d83b4; border: 1px solid #121c31; border-radius: 4px; color: #ffffff;
    font-family: Tahoma, 'Poppins', Geneva, sans-serif; font-weight: bold; text-transform: uppercase;
}
.mh-fb-close { font-size: 11px; letter-spacing: 0.4px; padding: 3px 10px; line-height: 1.42857; }
.mh-fb-post { font-size: 13.33px; padding: 6px 16px; min-height: 30px; }
.mh-fb-close:hover, .mh-fb-post:hover { filter: brightness(1.1); }
.mh-fb-post:disabled { opacity: .6; cursor: default; }
.mh-fb-close:focus-visible, .mh-fb-post:focus-visible { outline: 2px solid #e9bc47; outline-offset: 2px; }

.mh-fb-list { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 10px 0; }
.mh-fb-note { font-size: 18px; color: #2f4370; padding: 10px 0; }
.mh-fb-c { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #dfdfdf; }
.mh-fb-c:last-child { border-bottom: 0; }
.mh-fb-c-pic { flex: 0 0 50px; width: 50px; height: 50px; object-fit: cover; }
.mh-fb-c-body { flex: 1 1 auto; min-width: 0; }
.mh-fb-c-head { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mh-fb-c-name { font-weight: bold; color: #3b5998; text-decoration: none; }
.mh-fb-c-when { color: #9c9b9b; }
.mh-fb-c-del { color: #3b5998; text-decoration: none; }
.mh-fb-c-text { font-size: 18px; line-height: 1.43; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }

.mh-fb-form { display: flex; gap: 10px; align-items: flex-end; padding-top: 10px; border-top: 1px solid #dfdfdf; }
.mh-fb-text {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; resize: vertical;
    border: 1px solid #a1b1d1; border-radius: 4px; padding: 10px 12px;
    font-family: Tahoma, 'Poppins', Geneva, sans-serif; font-size: 18px; line-height: 1.43; color: #121c31; background: #ffffff;
}
.mh-fb-text:focus { border-color: #2f4370; outline: none; }

@media (max-width: 700px) {
    .mh-fb-win { padding: 0; }
    .mh-fb-card { width: 100%; max-height: 100vh; height: 100vh; }
    .mh-fb-form { flex-direction: column; align-items: stretch; }
}