/*
 * Small, hand-written overrides that don't require rebuilding the compiled
 * SCSS bundle. Loaded after app.min.css so rules here win.
 */

/* Member-card header (name + verification/premium badges + online dot):
   on narrow (mobile, 2-per-row) cards a long display name could wrap onto
   a second line, and align-items:center then vertically centered the
   badges against that taller two-line name - making them appear to drift
   down/right instead of sitting next to the name. Truncating the name
   with an ellipsis keeps the whole header on one line so the badges stay
   put. */
.directory-item .card-body h4 > a[data-pjax] {
    min-width: 0;
    overflow: hidden;
}
.directory-item .card-body h4 .display-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Chat message input: the cookie-consent banner is position:fixed,
   bottom:0 with a very high z-index, sitting on top of whatever is at
   the bottom of the page. On the message page the input field is right
   there too, so on mobile (where the banner's text/buttons stack and
   take up more height) it ends up covering the input until the visitor
   has accepted/declined cookies. Reserve some space for it so the input
   stays reachable; this only matters for first-time visitors, it has no
   effect once the cookie choice is made and the banner is gone for good. */
@media (max-width: 767.98px) {
    body.body-messages .conversation-input {
        margin-bottom: 90px;
    }
}