/* Friends + Private Messaging (docs/friends-messaging-system-design.md) - all styling for the hub
   shell, its 3 tabs (Friends/Requests/Messages), and the message-thread sub-view lives in this one
   file, mirroring rewards.css's role for the Rewards hub. */

button#friends-interface-close {
    z-index: 2;
}

.friends-interface {
    width: 100%;
    max-width: min(460px, calc(100vw - 63px));
}

div#friends-interface-header {
	background-color: #ff8d1a;
    border-radius: 5px;
    padding: 0;
    text-align: center;
    margin: 2px 2px 6px;
    height: 79px;
	background-image: url(../images/ui-elements/social-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

img#social-hero-img {
    position: absolute;
    bottom: 7px;
    left: 50%;
    translate: -50%;
	image-rendering: crisp-edges;
}

div#friends-interface-header h1 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px #00000057;
    margin: 0;
}

#friends-motto-row {
    background: #fff2e2;
    border: 1px solid #ffd9ab;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 2px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#friends-motto-row input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #333;
    background: #fff;
    box-sizing: border-box;
}

#friends-motto-row button {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.friends-interface .ui-tabs-nav li a {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 5px;
    background: #ededed;
}

.friends-interface .ui-tabs-nav li.ui-state-active a {
    background: #ff8d1a;
    color: #FFF;
}

.friends-interface .ui-tabs-nav {
    overflow: visible;
    padding-bottom: 0;
    margin: 2px;
}

.friends-interface .ui-tabs-nav li {
    position: relative;
}

/* Same fixed-height/own-scroll override as rewards.css's .ui-tabs-panel - see that file's comment
   for why display:block is needed here (overrides style.css's base display:flex centering). */
.friends-interface .ui-tabs-panel {
    display: block;
    height: min(400px, 65vh);
    overflow-x: hidden;
    padding: 0 7px 0 2px;
	overflow-y: scroll;
	width: calc(100% - 11px);
    margin: 7px auto 0;
    overflow-y: scroll;
}

@media (max-width: 400px) or (max-height: 730px){
    .friends-interface .ui-tabs-panel {
        height: min(400px, calc(100vh - 345px));
    }
}

.friends-interface .ui-tabs-panel::-webkit-scrollbar-track {
    background-color: #cfcfcf;
    border-radius: 5px;
}

.friends-interface .ui-tabs-panel::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 4px;
}

.friends-interface .ui-tabs-panel::-webkit-scrollbar {
    width: 8px;
}

/* The quantity-bubble look itself (background/border/shadow/etc.) now lives on the shared
   .notification-badge class (style.css), used here and by every other unread-count bubble this
   feature added - see that class's own comment for why this got pulled out into one place. */

/* ---------------------------------------------------------------------
   List rows (Friends / Requests / Messages tabs)
--------------------------------------------------------------------- */

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.friends-row {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.friends-row.unread {
    border: 1px solid #ff8d1a;
    background: #fff2e2;
}

.friends-row.clickable {
    cursor: pointer;
}

.friends-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
    border: 2px solid #000;
    /* Default/fallback - data-color's per-hex rules (added externally) override this for actual
       supporter colors. Background no longer comes from an inline style - see avatarHtml/the
       .friends-row render functions, friendsInterface.js. */
    background: #9e9e9e;
	text-shadow: 0px 1px 1px #00000063;
}

.friends-avatar .dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.friends-avatar .dot.online { background: #43a047; }
.friends-avatar .dot.offline { background: #9e9e9e; }

.friends-row-body {
    flex: 1;
    min-width: 0;
}

.friends-row-name {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.friends-row.unread .friends-row-name { color: #ff8d1a; }

/* Supporter star next to a player's name - 11x12 frame at (20,38) in
   social-interface-icons-spritesheet.png, replacing the previous plain ⭐ emoji. */
.friends-supporter-star {
    display: inline-block;
    width: 13px;
    height: 14px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -20px -38px;
    background-repeat: no-repeat;
	margin-top: -2px;
	image-rendering: crisp-edges;
}

/* Supporter/admin styling - --supporter-color is set inline on .friends-row itself (see
   supporterRowStyle, friendsInterface.js), never a literal background here, so this works for
   whatever color a given player actually has. Both rules below just read that one custom property
   via var() (it inherits from .friends-row down to its children, so it only needs setting once). */
.friends-row.supporter .friends-row-name {
    color: var(--supporter-color-start);
}

/* --supporter-color-start/-end are the curated exact gradient pair for known player colors (see
   SUPPORTER_COLOR_GRADIENTS, friendsInterface.js). For an unrecognized color, JS only sets
   --supporter-color-start, so --supporter-color-end's var() fallback here derives a darker shade
   live via color-mix() instead - keeps unexpected/future colors from breaking rather than needing
   every value hardcoded. Oversized background + animating background-position (rather than
   animating the gradient's own color stops directly, which most browsers can't interpolate
   smoothly) is what makes the shift read as one continuous, seamless motion instead of a jump-cut. */
.friends-row.supporter .friends-avatar,
.thread-avatar.supporter {
    background: linear-gradient(
        135deg,
        var(--supporter-color-start) 0%,
        var(--supporter-color-end, color-mix(in srgb, var(--supporter-color-start), black 30%)) 50%,
        var(--supporter-color-start) 100%
    );
    background-size: 250% 250%;
    animation: supporterAvatarShift 6s ease-in-out infinite;
}

@keyframes supporterAvatarShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.friends-row-status {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

.friends-row-status.online { color: #0e9161; }
.friends-row-status.offline { color: #8d8d8d; }

.friends-row-room {
    font-size: 11px;
    color: #666;
    margin-top: 1px;
}

/* Room-location pin, replacing the previous plain 📍 emoji - 7x9 frame at (33,38) in
   social-interface-icons-spritesheet.png. */
.friends-room-icon {
    display: inline-block;
    width: 7px;
    height: 9px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -33px -38px;
    background-repeat: no-repeat;
    margin-right: 4px;
    image-rendering: crisp-edges;
}

.friends-row-motto {
    font-size: 11px;
    color: #ff8d1a;
    font-style: italic;
    margin-top: 3px;
}

.friends-row-preview {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-row.unread .friends-row-preview {
    color: #444;
    font-weight: 600;
}

.friends-row-time {
    display: block;
    font-size: 10px !important;
    color: #aaa;
    white-space: nowrap;
    margin-top: 2px;
}

/* Also just .notification-badge now (style.css) - see that class's comment. */

.friends-row-actions {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

/* At narrow widths, drop the action buttons onto their own row below the avatar/name instead of
   squeezing them onto the same line - .friends-row needs flex-wrap for the forced flex-basis:100%
   below to actually wrap onto a new line rather than just being clipped/overflowing. */
@media (max-width: 520px) {
    .friends-row {
        flex-wrap: wrap;
    }

    .friends-row-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-top: 0;
    }

    /* Equal-width buttons filling the full row (33.33% for 3, 25% for 4 with Visit showing) -
       flex:1 on all of them, whatever the actual count, does this automatically rather than
       needing a separate rule per count. */
    .friends-row-actions > button {
        flex: 1;
    }
}

.friends-row-actions button:hover{
	opacity: 0.75;
}

/* Shared square icon-button base for the Friends tab's row actions (Visit/Message/Block/Remove) -
   each renders its icon via a fixed-size inner span (.friends-row-action-icon below) rather than
   directly on the button's own background, since these buttons flex-grow to fill the row at
   <=520px (the stacked mobile layout, friends.css) - a background-image directly on the button
   would just reveal more of the spritesheet as the button grows wider, instead of staying one
   fixed, centered icon. */
.friends-visit-btn,
.friends-message-btn,
.friends-block-btn,
.friends-remove-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.friends-visit-btn { background-color: #0e9161; border: none; }
.friends-message-btn { background-color: #3d6fe0; border: none; }
.friends-block-btn { background-color: #d85254; border: none; }
.friends-remove-btn { background-color: #fff; border: 2px solid #c54245; }

/* Each icon is its own 38x38 frame in social-interface-icons-spritesheet.png (0,0 / 38,0 / 76,0 /
   114,0) - the span sits on top of its button's own background color/border above (background
   color still shows through the icon's transparent areas). */
.friends-row-action-icon {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
}

.friends-visit-btn .friends-row-action-icon { background-position: 0 0; }
.friends-message-btn .friends-row-action-icon { background-position: -38px 0; }
.friends-block-btn .friends-row-action-icon { background-position: -76px 0; }
.friends-remove-btn .friends-row-action-icon { background-position: -114px 0; }

/* Unlike the four buttons above, .friends-thread-delete-btn (Messages tab) never flex-grows wider
   than 38px, so it keeps rendering its icon directly on its own background rather than needing the
   inner-span treatment. */
.friends-thread-delete-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-repeat: no-repeat;
    background-position: -116px -2px;
    image-rendering: crisp-edges;
    background-color: #fff;
    border: 2px solid #c54245;
}

.friends-thread-delete-btn:hover {
    opacity: 0.75;
}

.friends-accept-btn {
    background: #0e9161;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 7px 8px;
    cursor: pointer;
}

.friends-decline-btn {
    background: #d85254;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 7px 8px;
    cursor: pointer;
}

.friends-accept-btn:hover, .friends-decline-btn:hover {
    opacity: 0.75;
}

.friends-empty-hint {
    text-align: center;
    font-size: 11px;
    color: #8d8d8d;
    margin-top: 10px;
}

.friends-compose-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #3d6fe0;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px;
    margin-bottom: 3px;
    cursor: pointer;
    text-shadow: 0 1px 1px #00000057;
	height: 30px;
}

.friends-compose-btn span{
	font-size: 12px;
}

.friends-compose-btn:last-of-type {
    margin-bottom: 8px;
}

/* Icon frame is 20x18 at (0,38) in social-interface-icons-spritesheet.png - a dedicated ::before
   box rather than putting the image on the button itself, since the button still needs its own
   solid background color behind both the icon and the text. */
.friends-compose-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    flex-shrink: 0;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: 0 -38px;
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
}

/* Mass Message - 23x22 frame at (40,38) in social-interface-icons-spritesheet.png. */
#friends-mass-compose-btn::before {
    width: 23px;
    height: 22px;
    background-position: -40px -38px;
}

/* Delete All - 16x17 frame at (63,38) in social-interface-icons-spritesheet.png. */
.friends-delete-all-btn::before {
    width: 16px;
    height: 17px;
    background-position: -63px -38px;
}

.friends-compose-btn:hover{
	background: #2454be;
}

/* Same red as button.close-button (style.css) - the main interface close button - rather than the
   default blue every other .friends-compose-btn uses, since this one is destructive. */
.friends-delete-all-btn {
    background: #d85254;
}

.friends-delete-all-btn:hover {
    background: #fd7173;
}

/* Send Message/Mass Message/Delete All wrapper - lets Send Message pair up with whichever second
   button is actually visible (Mass Message for supporters, Delete All otherwise), set via JS
   toggling .full-width on #friends-delete-all-btn (wireStaticControls, friendsInterface.js). */
.friends-messages-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 8px;
}

/* flex-basis:0% (rather than a hardcoded 50%) so this splits evenly across however many
   full-width buttons actually end up in the row - 2-way with Send Message when Delete All is the
   .icon-only square (supporters, Mass Message visible), or 2-way with Delete All itself when it's
   the plain text pill instead (non-supporters, Mass Message hidden). */
.friends-messages-buttons .friends-compose-btn {
    flex: 1 1 0%;
    width: auto;
    margin-bottom: 0;
}

/* Small square icon-only variant - shown instead of the full text pill when Mass Message is also
   visible (supporters), so it sits alongside Send Message + Mass Message rather than pairing 50/50
   with just Send Message (toggled via wireStaticControls, friendsInterface.js). */
.friends-messages-buttons .friends-delete-all-btn.icon-only {
    flex: 0 0 38px;
    padding: 10px 0;
}

.friends-messages-buttons .friends-delete-all-btn.icon-only .friends-btn-label {
    display: none;
}

/* At narrow widths, the 3-button supporter row (Send Message/Mass Message/Delete All) drops all
   three labels and becomes equal-width icon-only buttons, rather than Send Message/Mass Message
   staying full text and squeezing into an ever-narrower row. .supporter-layout is only added to
   .friends-messages-buttons for supporters/staff (wireStaticControls, friendsInterface.js) - the
   non-supporter 2-button row (Send Message/Delete All) already stays legible with text this narrow. */
@media (max-width: 435px) {
    .friends-messages-buttons.supporter-layout .friends-btn-label {
        display: none;
    }

    .friends-messages-buttons.supporter-layout .friends-compose-btn {
        flex: 1 1 0%;
        padding: 10px 0;
    }
}

/* Requests tab - Accept All (green) / Decline All (red). Reuses .friends-messages-buttons
   (Messages tab) for the same shape/size/side-by-side layout - always exactly 2 buttons here, so
   none of that row's icon-only/supporter-layout responsive variants (added for the 3-button
   Send Message/Mass Message/Delete All case) are needed. Tick/cross icons - 16x16 frames at
   (104,38)/(120,38) in social-interface-icons-spritesheet.png. */
.friends-accept-all-btn {
    background: #0e9161;
}

.friends-accept-all-btn:hover {
    background: #0c7850;
}

.friends-accept-all-btn::before {
    width: 16px;
    height: 16px;
    background-position: -104px -38px;
}

.friends-decline-all-btn {
    background: #d85254;
}

.friends-decline-all-btn:hover {
    background: #fd7173;
}

.friends-decline-all-btn::before {
    width: 16px;
    height: 16px;
    background-position: -120px -38px;
}

/* Requests tab's "Add Friend" - deliberately its OWN full-width button, above the Accept All/
   Decline All row rather than a 3rd button crammed into it: those two only show (and only make
   sense) when there are pending requests to act on, but Add Friend needs to work with zero pending
   requests too, so it can't share that same visibility gate. */
.friends-add-friend-btn {
    background: #3d6fe0;
    margin-bottom: 8px;
}

.friends-add-friend-btn:hover {
    background: #2454be;
}

/* 19x15 frame at (156,38) in social-interface-icons-spritesheet.png. */
.friends-add-friend-btn::before {
    width: 19px;
    height: 15px;
    background-position: -156px -38px;
	margin-bottom: 1px;
}

/* ---------------------------------------------------------------------
   Compose (Messages tab "+ Send a Message" friend picker)
--------------------------------------------------------------------- */

/* z-index:2 on this and the other two full-panel overlays below (#friends-mass-compose-message,
   #friends-message-thread) - .notification-badge (style.css) has an explicit z-index:1, and since
   neither it nor these overlays create their own stacking context, they're compared within the
   same one (the panel itself, via .interface's position:fixed) rather than by DOM order. Without an
   explicit z-index here, a badge nested anywhere in the Messages-tab list underneath could outrank
   these otherwise-opaque overlays and show through wherever that row happens to be. */
#friends-compose-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.compose-header {
    background: #3d6fe0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#friends-compose-search {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
}

#friends-compose-friend-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 4px 4px 0;
}

#friends-compose-friend-list::-webkit-scrollbar { width: 8px; }
#friends-compose-friend-list::-webkit-scrollbar-track { background-color: #cfcfcf; border-radius: 5px; }
#friends-compose-friend-list::-webkit-scrollbar-thumb { background-color: #000; border-radius: 4px; }

/* ---------------------------------------------------------------------
   Add Friend (Requests tab - search any username, online or not, to send a request)
--------------------------------------------------------------------- */

#friends-add-friend-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.add-friend-search-row {
    display: flex;
    gap: 4px;
    margin-bottom: 3px;
}

/* Unlike #friends-compose-search (borderless - it reads fine there since that's a live-filter,
   always-focused field), this one needs a visible border - found live in the mockup review: without
   one, an empty search field was hard to even tell was there. */
#friends-add-friend-search {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
}

/* Explicit Search button (not the live-as-you-type debounce searchUsersForStaffCompose's compose
   picker uses) - this queries every account on the server, not an already-loaded local list, so
   firing it on every keystroke would be wasteful. Enter also triggers it (wireStaticControls).
   Circular, matching .send-btn (thread view's own send button) rather than a labeled pill - icon
   only, no text. */
.add-friend-search-btn {
    background-color: #3d6fe0;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-friend-search-btn:hover {
    opacity: 0.75;
}

/* 16x16 frame at (175,38) in social-interface-icons-spritesheet.png - dedicated span (not the
   button's own background) so the button's flex centering positions it properly, matching
   .send-btn-icon's own reasoning. */
.add-friend-search-icon {
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -175px -38px;
    background-repeat: no-repeat;
	margin: -1px 0 0px -1px;
	image-rendering: crisp-edges;
}

#friends-add-friend-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

#friends-add-friend-results::-webkit-scrollbar { width: 8px; }
#friends-add-friend-results::-webkit-scrollbar-track { background-color: #cfcfcf; border-radius: 5px; }
#friends-add-friend-results::-webkit-scrollbar-thumb { background-color: #000; border-radius: 4px; }

.add-friend-add-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #0e9161;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.add-friend-add-btn:hover {
    opacity: 0.75;
}

/* 18x18 frame at (191,38) in social-interface-icons-spritesheet.png - dedicated span, same
   reasoning as .add-friend-search-icon above. */
.add-friend-add-icon {
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -191px -38px;
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
}

/* Already Friends / Request Pending (found this way, or just clicked - see renderAddFriendResults,
   friendsInterface.js) - non-interactive labels in place of the clickable add button, styled after
   the existing invite-card's own greyed-out "used" state. "sent" (just clicked, this session) and
   "pending" (already outstanding from an earlier session) look identical on purpose - functionally
   the same status either way. */
.add-friend-state-pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
    border: 1.5px solid #d3d3da;
    color: #9a9aa4;
    background: transparent;
}

.add-friend-state-pill.friends {
    border-color: #bcdfcd;
    color: #0e9161;
    background: #eafbf3;
}

.add-friend-state-pill.pending,
.add-friend-state-pill.sent {
    border-color: #c9d8fb;
    color: #3d6fe0;
    background: #edf3ff;
}

/* ---------------------------------------------------------------------
   Mass compose (Messages tab "Send Mass Message" - supporter/staff only)
--------------------------------------------------------------------- */

#friends-mass-compose-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.friends-mass-compose-online-count {
    font-size: 12px;
    margin: -4px 0 6px 0;
    background: #dff8ef;
    border: 2px solid #0e9161;
    border-radius: 6px;
    text-align: center;
    color: #105d41;
    padding: 6px;
}

.friends-mass-compose-input {
    flex: 1;
    resize: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.friends-mass-compose-send-btn {
    width: 100%;
    background: #3d6fe0;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px;
    cursor: pointer;
    text-shadow: 0 1px 1px #00000057;
}

.friends-mass-compose-send-btn:hover {
    background: #2454be;
}

/* Mass Message's "Attach an invite" add-on (Tier 2/3 supporter/staff perk) - violet, matching the
   thread view's own invite treatment. Hidden entirely unless canSendInvite(mainPlayer)
   (wireStaticControls, friendsInterface.js); the note textarea/hint only appear once the switch
   is toggled on. */
.invite-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3ebff;
    border: 1.5px solid #e3cdff;
    border-radius: 10px;
    padding: 9px 11px;
    margin-bottom: 8px;
}

.invite-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-toggle-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #5a3a8a;
}

.invite-toggle-sub {
    font-size: 11px;
    color: #8067a3;
    margin-top: 1px;
}

.invite-switch {
    width: 38px;
    height: 22px;
    border-radius: 12px;
    background: #d7d7dc;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.invite-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: left .15s ease;
}

.invite-switch.on {
    background: #8e43ff;
}

.invite-switch.on::after {
    left: 18px;
}

/* display:block + text-align:center (not display:flex) - these hints are wrapping prose, some with
   an inline <strong> partway through a sentence (e.g. the cooldown hint's countdown). flex would
   turn each text node/element into its own independent flex item instead of letting them flow and
   wrap together as one paragraph - exactly the "text splits into oddly-positioned separate blocks"
   bug found live when the cooldown hint's <strong> was added. */
.invite-limit-hint {
	font-size: 11px;
    color: #8067a3;
    margin: -2px 0 8px 0;
    display: block;
    background: #f3ebff;
    text-align: center;
    border: 1.5px solid #e3cdff;
    padding: 8px 10px;
    border-radius: 7px;
    line-height: 1.2em;
}

.invite-limit-hint.warn {
    color: #975343;
    background: #ffecd8;
    border: 1.5px solid #e3b27f;
	margin: 1px 0 8px 0;
}

/* ---------------------------------------------------------------------
   Message thread sub-view
--------------------------------------------------------------------- */

#friends-message-thread, #friends-monitor-thread {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

#friends-message-thread .thread-header, #friends-monitor-thread .thread-header {
    background: #3d6fe0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thread-back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.thread-back-btn:hover {
    background: #ffffff57;
}

.thread-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Mirrors .friends-row-actions' own ≤520px wrap - the group (not just .report-btn, which used to
   carry the margin-left:auto now on the wrapper above) needs to move onto its own row together,
   which requires a shared wrapper since two separate flex children can't be forced to wrap onto
   the same new line as a unit. */
@media (max-width: 520px) {
    #friends-message-thread .thread-header {
        flex-wrap: wrap;
    }

    .thread-header-actions {
        flex-basis: calc(100% - 14px);
        justify-content: center;
        margin-left: 0;
        margin-top: 4px;
        background: #2459cf;
        padding: 7px;
        border-radius: 13px;
        box-shadow: inset 0px 1px 1px #0000005c;
    }
}

.report-btn {
    background: #ffffff45;
    border: none;
    border-radius: 7px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.report-btn:hover {
    background: #ffffff57;
}

.block-btn {
    background: #ffffff45;
    border: none;
    border-radius: 7px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.block-btn:hover {
    background: #ffffff57;
}

/* Invite (Tier 2/3 supporter/staff perk) - solid violet rather than the translucent-white Report/
   Block share, deliberately: this is the one action here that's a paid perk, not a moderation tool,
   so it needs to read as a distinct, "premium" action rather than blend in alongside them. Hidden by
   default (friends-interface.html) - shown only for canSendInvite(mainPlayer), regardless of who the
   other party is. */
.invite-chip-btn {
    background: #ffffff45;
    border: none;
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.invite-chip-btn:hover {
    background: #ffffff57;
}

.thread-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #9e9e9e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid #fff;
    flex-shrink: 0;
    position: relative;
	text-shadow: 0px 1px 1px #00000063;
}

.thread-avatar .dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.thread-avatar .dot.online { background: #43a047; }
.thread-avatar .dot.offline { background: #9e9e9e; }

.thread-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 2px #00000057;
}

.thread-status {
    color: #dde8fb;
    font-size: 11px;
}

#friends-message-thread .messages, #friends-monitor-thread .messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 0 7px 0 2px;
}

#friends-message-thread .messages::-webkit-scrollbar, #friends-monitor-thread .messages::-webkit-scrollbar, .friends-interface .ui-tabs-panel::-webkit-scrollbar { width: 5px; }
#friends-message-thread .messages::-webkit-scrollbar-track, #friends-monitor-thread .messages::-webkit-scrollbar-track, .friends-interface .ui-tabs-panel::-webkit-scrollbar-track { background-color: #cfcfcf; border-radius: 5px; }
#friends-message-thread .messages::-webkit-scrollbar-thumb, #friends-monitor-thread .messages::-webkit-scrollbar-thumb, .friends-interface .ui-tabs-panel::-webkit-scrollbar-thumb { background-color: #000; border-radius: 4px; }

/* Monitor (staff moderation) - .msg-row/.bubble/.msg-time above are reused as-is (them/me just
   control left/right alignment, which still reads fine as "player A / player B" here), plus a small
   sender-name label since there's no "me" in a conversation between two other players. */
.msg-sender-label {
    font-size: 10px;
    font-weight: 700;
    color: #8d8d8d;
    margin-bottom: 2px;
}

.friends-monitor-hint {
    font-size: 11px;
    color: #FFF;
    margin: 0 0 8px;
    text-align: center;
    background: #2b91f9;
    padding: 9px 9px;
    border-radius: 7px;
}

.msg-row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}

.msg-row.them { align-self: flex-start; align-items: flex-start; }
.msg-row.me { align-self: flex-end; align-items: flex-end; }

.msg-row .bubble {
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.2em;
    word-break: break-word;
}

.msg-row.them .bubble { background: #ededed; color: #222; border-bottom-left-radius: 4px; }
.msg-row.me .bubble {
	border: 2px solid #3d6fe0;
    color: #222222;
    border-bottom-right-radius: 4px;
    background: #edf3ff;
}

/* Emoji sized up independently of the bubble's own 13px font-size (wrapEmojiForDisplay,
   friendsInterface.js, wraps every emoji run in this span) - em-based so it scales off whatever the
   bubble's font-size actually is rather than a fixed px value. inline-block + the negative
   vertical-align nudge keeps the enlarged glyph's baseline sitting level with the surrounding text
   instead of pushing the line noticeably taller/lower. */
.msg-emoji {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.1em;
}

.msg-time {
    font-size: 10px;
    color: #aaa;
    margin-top: 3px;
    padding: 0 3px;
}

/* "Seen" read receipt - supporter/admin/staff perk (isSupporterOrAdmin, friendsInterface.js gates
   whether this ever renders at all), shown only under the most recent message you've sent that the
   other person has actually read. */
.msg-seen {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
    padding: 0 3px;
}

/* 11x7 frame at (93,38) in social-interface-icons-spritesheet.png. */
.msg-seen-icon {
    display: inline-block;
    width: 11px;
    height: 7px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -93px -38px;
    background-repeat: no-repeat;
    image-rendering: crisp-edges;
}

#friends-message-thread .input-bar {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#friends-message-thread .input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

#friends-message-thread .input-row input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
}

.send-btn {
    background-color: #3d6fe0;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Send icon - 14x13 frame at (79,38) in social-interface-icons-spritesheet.png, replacing the
   previous inline SVG paper-plane. A dedicated element (rather than the button's own
   background-image) so the button's flex centering (align-items/justify-content above) centers it
   properly instead of it being positioned relative to the button's own box. */
.send-btn-icon {
    display: block;
    width: 14px;
    height: 13px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -79px -38px;
    background-repeat: no-repeat;
	margin-left: 3px;
	image-rendering: crisp-edges;
}

.send-btn:hover{
	opacity: 0.75;
}

/* ---------------------------------------------------------------------
   Room invites (Tier 2/3 supporter/staff perk) - thread composer, the invite message bubble
   itself, and the Mass Message toggle (further up this file) all share this one violet (#8e43ff)
   accent, distinct from every existing action color (blue = message, green = accept/visit, red =
   destructive). See docs/friends-messaging-system-design.md.
--------------------------------------------------------------------- */

/* Pin icon, replacing the previous plain 📍 emoji placeholder - 7x10 frame at (149,38) in
   social-interface-icons-spritesheet.png. */
.invite-pin-icon {
    display: inline-block;
    width: 7px;
    height: 10px;
    background-image: url(../images/ui-elements/social-interface-icons-spritesheet.png);
    background-position: -149px -38px;
    background-repeat: no-repeat;
    flex-shrink: 0;
    image-rendering: crisp-edges;
}

.invite-icon-btn {
    background-color: #8e43ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Larger 13x16 frame at (136,38) in social-interface-icons-spritesheet.png - just this one button's
   icon, not the smaller pin used everywhere else (composer label, Mass Message toggle row). */
#friends-thread-invite-toggle-btn .invite-pin-icon {
    width: 13px;
    height: 16px;
    background-position: -136px -38px;
}

.invite-icon-btn:hover {
    opacity: 0.75;
}

/* Inline composer (thread view) - expands above .input-bar when either the header chip or the
   input-row's own invite icon is clicked. Also doubles as the Mass Message note field's styling
   (.invite-composer-input alone, without the surrounding card) - see .invite-toggle-row above. */
.invite-composer {
    background: #f3ebff;
    border: 1.5px solid #e3cdff;
    border-radius: 12px;
    padding: 10px 12px 11px;
    margin: 0 0 8px;
}

.invite-composer-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #8e43ff;
    margin-bottom: 6px;
}

.invite-composer-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: Arial, sans-serif;
    color: #3a2a55;
    resize: none;
    min-height: 44px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 8px;
}

.invite-composer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.invite-composer-cancel-btn {
    background: transparent;
    border: none;
    color: #8067a3;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 10px;
    cursor: pointer;
}

.invite-composer-send-btn {
    background: #8e43ff;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.invite-composer-send-btn:hover {
    background: #7a2ef0;
}

/* The invite message bubble itself - renders instead of .bubble for a message_type:'invite' row
   (renderThreadMessages/receiveMonitorConversationThread, friendsInterface.js). */
.invite-card {
    width: 100%;
    background: #f3ebff;
    border: 1.5px solid #e3cdff;
    border-radius: 14px;
    padding: 10px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msg-row.me .invite-card { border-bottom-right-radius: 4px; }
.msg-row.them .invite-card { border-bottom-left-radius: 4px; }

.invite-card-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #8e43ff;
}

.invite-card-text {
    font-size: 13px;
    line-height: 1.3em;
    color: #3a2a55;
}

.invite-teleport-btn {
    margin-top: 2px;
    background: #8e43ff;
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.invite-teleport-btn:hover {
    background: #7a2ef0;
}

/* Single-use - once invite_used_at is set (or the viewer is the sender, who never gets a teleport
   button on their own sent invite), the card and its action both switch to this greyed-out state. */
.invite-card.used {
    background: #f2f2f4;
    border-color: #e2e2e6;
}

.invite-card.used .invite-card-label {
    color: #9a9aa4;
}

.invite-card.used .invite-card-text {
    color: #8c8c95;
}

.invite-used-btn {
    margin-top: 2px;
    background: transparent;
    border: 1.5px solid #d3d3da;
    color: #9a9aa4;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: default;
}

.invite-sent-label {
    font-size: 11px;
    color: #8067a3;
    font-style: italic;
    margin-top: 1px;
}