/*
 * MewUI — spaces only (MGCS-123). Loaded AFTER mewui.css, the shared core that is identical
 * in every site. Rules here are either used only by this site, or deliberately override a
 * shared rule for it. Something two sites need belongs in the core instead.
 */

/* Style ALL file inputs consistently, not just ones tagged .mu-input */
input[type="file"] {
    padding: var(--mu-space-xs) var(--mu-space-sm);
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
    background: var(--mu-surface-light);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-sm);
    max-width: 100%;
}

input[type="file"]::file-selector-button {
    background: var(--mu-secondary);
    color: var(--mu-primary);
    border: 1px solid var(--mu-primary);
    border-radius: var(--mu-border-radius-sm);
    padding: var(--mu-space-xs) var(--mu-space-md);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    font-family: var(--mu-font-family);
    font-weight: 600;
    margin-right: var(--mu-space-sm);
    transition: filter 0.15s;
}

input[type="file"]::file-selector-button:hover {
    filter: brightness(1.15);
}

/* spaces differs from the shared core here on purpose. */
.mu-modal-header h5 {
    color: var(--mu-primary);
}

/* ============================================
   FRIEND PICKER
   ============================================ */
.mu-friend-picker {
    position: relative;
}

.mu-friend-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mu-space-xs);
    margin-bottom: var(--mu-space-sm);
}

.mu-friend-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--mu-space-xs);
    padding: 2px var(--mu-space-sm) 2px 2px;
    border-radius: var(--mu-border-radius-full);
    background: var(--mu-surface-light);
    border: 1px solid var(--mu-border-color);
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-bright);
}

.mu-friend-chip img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.mu-friend-chip-remove {
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    margin-left: 2px;
    opacity: 0.6;
}

.mu-friend-chip-remove:hover {
    opacity: 1;
}

.mu-friend-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--mu-surface);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    z-index: 10;
    display: none;
}

.mu-friend-dropdown.mu-open {
    display: block;
}

.mu-friend-option {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    padding: var(--mu-space-sm) var(--mu-space-md);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    transition: background 0.15s;
}

.mu-friend-option:hover {
    background: var(--mu-surface-light);
}

.mu-friend-option.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.mu-friend-option img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.mu-friend-option-name {
    font-weight: bold;
    color: var(--mu-text-bright);
    font-size: var(--mu-font-size-sm);
}

.mu-friend-option-status {
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
}

.mu-friend-dropdown .mu-no-results {
    padding: var(--mu-space-md);
    text-align: center;
    color: var(--mu-text-muted);
    font-size: var(--mu-font-size-sm);
}

/* ============================================
   PRESENCE INDICATOR
   ============================================ */
.mu-presence {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--mu-background);
    flex-shrink: 0;
}

.mu-presence-online {
    background: var(--mu-success);
}

.mu-presence-idle {
    background: var(--mu-warning);
}

.mu-presence-dnd {
    background: var(--mu-danger);
}

.mu-presence-offline {
    background: var(--mu-text-muted);
}

/* Presence dot positioned on avatar */
.mu-avatar-presence {
    position: relative;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
}

.mu-avatar-presence img,
.mu-avatar-presence > div {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--mu-surface-light);
}

.mu-avatar-presence .mu-presence {
    position: absolute;
    bottom: 1px;
    right: 0;
}

/* ============================================
   MEMBER LIST
   ============================================ */
.mu-member-list {
    width: 220px;
    flex-shrink: 0;
    overflow-y: auto;
}

.mu-member-item {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    padding: var(--mu-space-sm);
    border-radius: var(--mu-border-radius-sm);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    transition: background 0.15s;
}

.mu-member-item:hover {
    background: var(--mu-surface-light);
}

.mu-member-info {
    overflow: hidden;
    min-width: 0;
}

.mu-member-name {
    font-weight: bold;
    color: var(--mu-text-bright);
    font-size: var(--mu-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-member-status {
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   PROFILE CARD
   ============================================ */
.mu-profile-card {
    position: fixed;
    z-index: 100;
    width: 340px;
    background: var(--mu-surface);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: none;
}

.mu-profile-card.mu-open {
    display: block;
}

.mu-profile-card-banner {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: var(--mu-surface-light);
    border-radius: var(--mu-border-radius-lg) var(--mu-border-radius-lg) 0 0;
}

.mu-profile-card-avatar {
    width: 96px;
    height: 96px;
    border-radius: var(--mu-border-radius-full);
    object-fit: cover;
    border: 3px solid var(--mu-primary);
    background: var(--mu-surface);
    margin-top: -48px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.mu-profile-card-body {
    padding: 0 var(--mu-space-md) var(--mu-space-md);
    text-align: center;
}

.mu-profile-card-name {
    font-size: var(--mu-font-size-xl);
    font-weight: bold;
    color: var(--mu-text-bright);
    margin-top: var(--mu-space-xs);
}

.mu-profile-card-title {
    font-size: var(--mu-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mu-primary);
    font-weight: 600;
    margin-top: var(--mu-space-sm);
}

.mu-profile-card-presence {
    display: inline-flex;
    align-items: center;
    gap: var(--mu-space-xs);
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
    margin-bottom: var(--mu-space-sm);
}

.mu-profile-card-status {
    font-size: var(--mu-font-size-sm);
    color: var(--mu-primary);
    font-weight: bold;
    margin-bottom: var(--mu-space-sm);
}

.mu-profile-card-bio {
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text);
    border-top: 1px solid var(--mu-border-color);
    padding-top: var(--mu-space-sm);
    text-align: left;
}

/* A glance at somebody's profile sections in the popup (MGCS-83). Deliberately plain: this is
   a summary that says whether a full profile is worth opening, not the profile itself. */
.mu-profile-card-sections {
    border-top: 1px solid var(--mu-border-color);
    padding-top: var(--mu-space-sm);
    text-align: left;
}

.mu-profile-card-section {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--mu-space-xs);
}

.mu-profile-card-section-title {
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-bright);
    width: 100%;
}

.mu-profile-card-section-line {
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
    /* An excerpt is one line in a popup; the whole thing is a click away. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mu-profile-card-section-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--mu-border-radius-sm);
}

/* ============================================
   PRESENCE SELECTOR
   ============================================ */
.mu-presence-selector {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
}

.mu-presence-option {
    display: flex;
    align-items: center;
    gap: var(--mu-space-xs);
    padding: var(--mu-space-xs) var(--mu-space-sm);
    border-radius: var(--mu-border-radius-sm);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
    border: 1px solid transparent;
    transition: all 0.15s;
}

.mu-presence-option:hover {
    background: var(--mu-surface-light);
}

.mu-presence-option.active {
    border-color: var(--mu-border-color);
    color: var(--mu-text-bright);
}

/* ============================================
   CHAT LAYOUT
   ============================================ */
.mu-chat-layout {
    display: flex;
    gap: var(--mu-space-md);
    height: calc(100vh - 140px);
    min-height: 420px;
}

.mu-chat-sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
}

.mu-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.mu-chat-item {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    padding: var(--mu-space-md);
    border-radius: var(--mu-border-radius);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    border: 1px solid var(--mu-border-color);
    margin-bottom: var(--mu-space-sm);
    opacity: 0.6;
    transition: opacity 0.2s;
}

.mu-chat-item:hover,
.mu-chat-item.mu-selected {
    opacity: 1;
    background: var(--mu-surface-light);
}

.mu-chat-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--mu-surface-light);
}

.mu-chat-item-text {
    min-width: 0;
    flex: 1;
}

.mu-chat-item-name {
    font-weight: bold;
    color: var(--mu-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--mu-space-md);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    margin-bottom: var(--mu-space-sm);
    min-height: 300px;
}

.mu-chat-input-row {
    display: flex;
    gap: var(--mu-space-sm);
}

.mu-chat-input-row .mu-input {
    flex: 1;
}

.mu-chat-message {
    padding: 0.3rem var(--mu-space-md);
    margin-bottom: 0.1rem;
    border-radius: var(--mu-border-radius);
    border: 1px solid transparent;
    font-size: var(--mg-msg-font, 0.9rem);
}

.mu-chat-message:hover {
    border-color: var(--mu-border-color);
    background: var(--mu-surface-light);
}

.mu-chat-message .msg-body {
    font-size: var(--mg-msg-font, 0.9rem);
    line-height: 1.4;
}

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--mu-surface-light);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
}

.mu-member-role-group {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.7rem 0 0.3rem;
    opacity: 0.9;
}

/* ============================================
   CALL UI
   ============================================ */
.mu-call-bar {
    display: none;
    padding: var(--mu-space-sm) var(--mu-space-md);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    margin-bottom: var(--mu-space-sm);
}

.mu-call-bar.mu-active {
    display: block;
}

.mu-call-controls {
    display: flex;
    gap: var(--mu-space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.mu-call-videos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mu-space-sm);
    margin-top: var(--mu-space-sm);
}

.mu-call-tile {
    position: relative;
    width: 160px;
    height: 120px;
    border-radius: var(--mu-border-radius);
    background: var(--mu-surface-light);
    overflow: hidden;
}

.mu-call-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mu-call-tile-pfp {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mu-surface);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.mu-call-tile-pfp.mu-visible {
    opacity: 1;
}

.mu-call-tile-pfp img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.mu-call-tile-name {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-bright);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 6px;
    border-radius: var(--mu-border-radius-sm);
}

.mu-call-status {
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
}

/* The "muted" marker on a call tile.

   SCOPED ON PURPOSE. Font Awesome loads AFTER this file and sets `display` on `.fas`, so a
   single-class rule here would lose on source order, and the `hidden` attribute loses to any
   class at all — which is exactly how a mic-slash came to sit on every tile while nobody was
   muted (MGCS-205). Two classes beats one, whatever the order. */
.mu-call-tile-name .mu-call-muted { display: none; }
.mu-call-tile-name .mu-call-muted.mu-visible { display: inline-block; }

/* Somebody in the call who cannot be reached (webrtc.js). It sits inside the call bar rather
   than being a toast: it is true for as long as you are in the call, and a toast that has
   already gone cannot answer "why can I not hear them". */
.mu-call-warning {
    margin: var(--mu-space-sm) 0 0;
    padding: var(--mu-space-sm) var(--mu-space-md);
    border-radius: var(--mu-border-radius-sm);
    background: color-mix(in srgb, var(--mu-warning) 15%, transparent);
    border-left: 3px solid var(--mu-warning);
    font-size: var(--mu-font-size-sm);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .mu-chat-layout {
        flex-direction: column;
    }

    .mu-chat-sidebar {
        width: 100%;
    }

    .mu-member-list {
        width: 100%;
    }
}

/* ============================================
   SETTINGS TOGGLE
   ============================================ */
.mu-setting-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mu-space-xs);
    padding: var(--mu-space-sm) var(--mu-space-md);
    border-radius: var(--mu-border-radius);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
    border: 1px solid var(--mu-border-color);
    background: transparent;
    transition: all 0.15s;
}

.mu-setting-btn:hover {
    background: var(--mu-surface-light);
}

.mu-setting-btn.mu-active {
    border-color: var(--mu-primary);
    color: var(--mu-text-bright);
}

/* ============================================
   SPACE COMPONENTS
   ============================================ */
.mu-space-card {
    display: flex;
    align-items: center;
    gap: var(--mu-space-md);
    padding: var(--mu-space-md);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    background: var(--mu-surface);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    transition: background 0.15s;
}

.mu-space-card:hover {
    background: var(--mu-surface-light);
}

.mu-space-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--mu-border-radius);
    background: var(--mu-surface-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mu-font-size-xl);
    color: var(--mu-primary);
    flex-shrink: 0;
}

.mu-space-card-info {
    flex: 1;
    min-width: 0;
}

.mu-space-card-name {
    font-weight: bold;
    color: var(--mu-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-space-card-desc {
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-space-card-meta {
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
}

/* Space banner */
.mu-space-banner {
    width: 100%;
    height: 120px;
    border-radius: var(--mu-border-radius-lg);
    background-size: cover;
    background-position: center;
    background-color: var(--mu-surface-light);
    margin-bottom: var(--mu-space-md);
}

/* A space staff have suspended (MGCS-212): a plain warning strip, not the cover-image banner. */
.mu-suspended-banner {
    width: 100%;
    padding: var(--mu-space-sm) var(--mu-space-md);
    margin-bottom: var(--mu-space-md);
    border-radius: var(--mu-border-radius);
    background: rgba(212, 160, 23, 0.15);
    border: 1px solid #d4a017;
    color: #d4a017;
    font-size: var(--mu-font-size-sm);
}

/* Channel list in space view */
.mu-channel-group {
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--mu-space-sm) 0 var(--mu-space-xs);
    font-weight: bold;
}

.mu-channel-item {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    padding: var(--mu-space-sm);
    border-radius: var(--mu-border-radius-sm);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    color: var(--mu-text-muted);
    font-size: var(--mu-font-size-sm);
    transition: background 0.15s, color 0.15s;
}

.mu-channel-item:hover {
    background: var(--mu-surface-light);
    color: var(--mu-text-bright);
}

.mu-channel-item.mu-selected {
    background: var(--mu-surface-light);
    color: var(--mu-text-bright);
}

.mu-channel-icon {
    font-size: var(--mu-font-size-md);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.mu-channel-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.mu-btn-icon {
    padding: 0.15rem 0.4rem;
    min-width: unset;
    font-size: 0.7rem;
    line-height: 1;
}

/* Role badge */
.mu-role-badge {
    display: inline-block;
    padding: 1px var(--mu-space-xs);
    border-radius: var(--mu-border-radius-sm);
    font-size: var(--mu-font-size-xs);
    background: var(--mu-surface-light);
    color: var(--mu-primary);
    font-weight: bold;
}

/* ============================================
   EMOTE PICKER
   ============================================ */
.mu-emote-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 320px;
    max-height: 300px;
    background: var(--mu-surface);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: none;
    overflow-y: auto;
    z-index: 20;
    margin-bottom: var(--mu-space-sm);
}

.mu-emote-picker.mu-open {
    display: block;
}

.mu-emote-picker-group {
    padding: var(--mu-space-xs) var(--mu-space-sm);
    font-size: var(--mu-font-size-xs);
    color: var(--mu-text-muted);
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid var(--mu-border-color);
}

.mu-emote-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mu-space-xs);
    padding: var(--mu-space-sm);
}

.mu-emote-picker-item {
    width: 32px;
    height: 32px;
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    border-radius: var(--mu-border-radius-sm);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mu-emote-picker-item:hover {
    background: var(--mu-surface-light);
}

.mu-emote-picker-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.mu-emote-btn {
    background: none;
    border: none;
    font-size: var(--mu-font-size-lg);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    padding: var(--mu-space-xs);
    color: var(--mu-text-muted);
    transition: color 0.15s;
    line-height: 1;
}

.mu-emote-btn:hover {
    color: var(--mu-text-bright);
}

/* ============================================
   INLINE EMOTES
   ============================================ */
.emote {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    object-fit: contain;
}

/* ============================================
   PERMISSION GRID
   ============================================ */
.mu-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mu-space-sm) 0;
    border-bottom: 1px solid var(--mu-border-color);
    gap: var(--mu-space-sm);
}

.mu-perm-row:last-child {
    border-bottom: none;
}

.mu-perm-label {
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-bright);
    flex: 1;
    min-width: 0;
}

.mu-perm-toggle {
    display: flex;
    gap: var(--mu-space-xs);
}

.mu-toggle {
    width: 36px;
    height: 20px;
    border-radius: var(--mu-border-radius-full);
    background: var(--mu-surface-light);
    border: 1px solid var(--mu-border-color);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    position: relative;
    transition: background 0.2s;
}

.mu-toggle.mu-on {
    background: var(--mu-primary);
    border-color: var(--mu-primary);
}

.mu-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mu-text-bright);
    transition: transform 0.2s;
}

.mu-toggle.mu-on::after {
    transform: translateX(16px);
}

/* ============================================
   CONTEXT MENU
   ============================================ */
.mu-context-menu {
    position: fixed;
    z-index: 200;
    min-width: 140px;
    background: var(--mu-surface);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: var(--mu-space-xs) 0;
    display: none;
}

.mu-context-menu.mu-open {
    display: block;
}

.mu-context-menu-item {
    padding: var(--mu-space-sm) var(--mu-space-md);
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    transition: background 0.1s;
}

.mu-context-menu-item:hover {
    background: var(--mu-surface-light);
}

.mu-context-menu-item.mu-danger {
    color: var(--mu-danger);
}

/* ============================================
   ICON BUTTONS
   ============================================ */
.mu-btn-icon {
    background: none;
    border: none;
    color: var(--mu-text-muted);
    font-size: var(--mu-font-size-md);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    padding: var(--mu-space-xs);
    transition: color 0.15s;
    line-height: 1;
}

.mu-btn-icon:hover {
    color: var(--mu-primary);
}

/* The space header (MGCS-133). Its action row did not wrap, so on a 375px phone six
   controls pushed the whole page to ~580px and the browser zoomed the space out. */
.mu-space-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.mu-space-header-info {
    flex: 1 1 160px;
    min-width: 0;
}
.mu-space-header-info h3 {
    overflow-wrap: anywhere;
}
.mu-space-header-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Grouped messages (MGCS-133): a follow-up from the same author keeps its column but drops
   the avatar and the name/date line; the full date is on hover (the row's title). */
.mu-chat-message.mu-msg-cont {
    padding-top: 0;
    padding-bottom: 0.15rem;
}
.mu-chat-message.mu-msg-cont .msg-avatar {
    visibility: hidden;
    height: 0;
}
.mu-chat-message.mu-msg-cont .msg-head {
    display: none;
}
.mu-chat-message .msg-main {
    min-width: 0;
    flex: 1;
}

/* The profile popup never outgrows the window (MGCS-133): it scrolls inside instead. */
.mu-profile-card {
    width: min(340px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

/* ============================================
   SPACE PAGE LAYOUT (MGCS-122)
   The page is exactly one viewport tall and the conversation gets whatever the header leaves,
   so the composer is on screen when a space opens. It used to be a 100vh-140px box BELOW the
   banner and header, so the composer started under the fold on a desktop, and on a phone the
   channel list, a ~300px chat and the member list were stacked into one column.
   ============================================ */
.mu-space-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mu-navbar-height) - 2 * var(--mu-space-lg));
    min-height: 480px;
}
.mu-space-page > .mu-chat-layout { flex: 1; min-height: 0; height: auto; }
.mu-space-page .mu-space-banner { height: 72px; flex: none; }
.mu-space-page .mu-space-header { flex: none; position: relative; }
.mu-space-page .mu-chat-messages { min-height: 0; }

.mu-drawer-head { display: none; }
.mu-drawer-toggle, .mu-drawer-close, .mu-space-more-btn { display: none; }
.mu-drawer-backdrop { display: none; }

@media (max-width: 1100px) {
    .mu-member-list {
        position: fixed;
        top: var(--mu-navbar-height);
        bottom: 0;
        right: 0;
        width: min(85vw, 320px);
        z-index: 95;
        overflow-y: auto;
        background: var(--mu-background);
        transform: translateX(105%);
        transition: transform 0.2s ease;
    }
    .mu-member-list.mu-drawer-open { transform: none; box-shadow: var(--mu-shadow-lg); }
    .mu-member-list .mu-card { min-height: 100%; border-radius: 0; margin: 0; }
    .mu-member-list .mu-drawer-close,
    .mu-drawer-toggle[aria-controls="member-list-wrap"] { display: inline-flex; flex: none; }
    .mu-drawer-backdrop.mu-open {
        display: block;
        position: fixed;
        inset: var(--mu-navbar-height) 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 94;
    }
}

@media (max-width: 768px) {
    .mu-main:has(.mu-space-page) { padding: var(--mu-space-sm); }
    .mu-space-page {
        height: calc(100dvh - var(--mu-navbar-height) - 2 * var(--mu-space-sm));
        min-height: 0;
        padding: 0;
    }
    .mu-space-page .mu-space-banner { display: none !important; }

    /* Compact header: icon, name, and a menu for everything else. */
    .mu-space-page .mu-space-header { flex-wrap: nowrap; gap: var(--mu-space-sm); margin-bottom: var(--mu-space-sm); }
    .mu-space-page .mu-space-header .mu-space-card-icon { width: 36px; height: 36px; font-size: 1rem; flex: none; }
    .mu-space-page #space-desc { display: none; }
    .mu-space-page .mu-space-header-info h3 { font-size: 1.1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mu-space-more-btn { display: inline-flex; margin-left: auto; flex: none; }
    .mu-space-header-actions {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 60;
        flex-direction: column;
        align-items: stretch;
        min-width: 200px;
        margin-left: 0;
        padding: var(--mu-space-sm);
        background: var(--mu-background);
        border: 1px solid var(--mu-border-color);
        border-radius: var(--mu-border-radius);
        box-shadow: var(--mu-shadow-lg);
    }
    .mu-space-header-actions.mu-open { display: flex; }
    .mu-space-header-actions > .mu-btn { justify-content: flex-start; }

    /* The conversation gets the screen; channels and members slide in over it. */
    .mu-chat-layout { flex-direction: row; gap: 0; }
    .mu-chat-sidebar,
    .mu-member-list {
        position: fixed;
        top: var(--mu-navbar-height);
        bottom: 0;
        width: min(85vw, 320px);
        z-index: 95;
        overflow-y: auto;
        background: var(--mu-background);
        transition: transform 0.2s ease;
    }
    .mu-chat-sidebar { left: 0; transform: translateX(-105%); }
    .mu-member-list { right: 0; transform: translateX(105%); }
    .mu-chat-sidebar.mu-drawer-open,
    .mu-member-list.mu-drawer-open { transform: none; box-shadow: var(--mu-shadow-lg); }
    .mu-chat-sidebar .mu-card, .mu-member-list .mu-card { min-height: 100%; border-radius: 0; margin: 0; }
    .mu-drawer-backdrop.mu-open {
        display: block;
        position: fixed;
        inset: var(--mu-navbar-height) 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 94;
    }
    .mu-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mu-space-sm); }
    .mu-drawer-toggle, .mu-drawer-close { display: inline-flex; flex: none; }

    .mu-space-page .mu-chat-main .mu-card-body { padding: var(--mu-space-sm); }
    .mu-space-page .mu-channel-head { margin-bottom: var(--mu-space-sm); }
    .mu-space-page .mu-chat-messages { padding: var(--mu-space-xs); }

    /* The profile popup is a bottom sheet on a phone. positionProfileCard() sets left/top
       for the desktop popover; these win over them here. */
    .mu-profile-card {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: 100%;
        max-height: 80vh;
        border-radius: var(--mu-border-radius-lg) var(--mu-border-radius-lg) 0 0;
    }
}

/* ============================================
   SPACE SETTINGS PAGE (MGCS-228)
   A full page at /s/<space>/settings, replacing a 560px modal with ten cramped tabs. The nav
   is a plain list reusing the shared .mu-sidebar-item/.mu-sidebar-link classes (mewui.css) -
   this page has one flat list of sections, not the collapsible groups staff_dash needs for
   thirty pages, so no new shared classes were needed for it.
   ============================================ */
.mu-settings-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mu-navbar-height) - 2 * var(--mu-space-lg));
    min-height: 480px;
}
.mu-settings-topbar {
    display: flex;
    align-items: center;
    gap: var(--mu-space-md);
    flex: none;
    margin-bottom: var(--mu-space-md);
}
.mu-settings-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: var(--mu-space-lg);
}
.mu-settings-nav {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 220px;
    gap: 2px;
    overflow-y: auto;
}
.mu-settings-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-right: var(--mu-space-sm);
}

@media (max-width: 768px) {
    .mu-main:has(.mu-settings-page) { padding: var(--mu-space-sm); }
    .mu-settings-page {
        height: auto;
        min-height: 0;
    }
    .mu-settings-layout {
        flex-direction: column;
        gap: var(--mu-space-sm);
    }
    .mu-settings-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: auto;
        border-bottom: 1px solid var(--mu-border-color);
        padding-bottom: var(--mu-space-xs);
    }
    .mu-settings-nav a { white-space: nowrap; flex: none; }
}

/* ============================================
   MESSAGE ACTIONS (MGCS-139)
   A hover bar for pointers that can hover; on touch screens a long-press opens the context
   menu, which becomes a sheet from the bottom of the screen on a phone.
   ============================================ */
.mu-chat-message { position: relative; }
.mu-msg-actions {
    display: none;
    position: absolute;
    top: -14px;
    right: var(--mu-space-sm);
    z-index: 5;
    gap: 2px;
    padding: 2px;
    background: var(--mu-background);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-sm);
    box-shadow: var(--mu-shadow-sm);
}
.mu-msg-actions button {
    background: none;
    border: none;
    color: var(--mu-text-muted);
    padding: 4px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.mu-msg-actions button:hover { background: var(--mu-surface-light); color: var(--mu-text-bright); }
.mu-msg-actions button[data-act="delete"]:hover { color: var(--mu-danger); }
@media (hover: hover) {
    .mu-chat-message:hover > .mu-msg-actions,
    .mu-msg-actions:focus-within { display: flex; }
}

.msg-edit-box textarea { width: 100%; resize: vertical; font-size: var(--mg-msg-font, 0.9rem); }
.msg-edit-hint { font-size: 0.72rem; margin-top: 2px; }

/* No text selection or iOS callout while a message is being long-pressed. */
@media (hover: none) {
    .mu-chat-message { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
    .mu-chat-message .msg-edit-box, .mu-chat-message .msg-edit-box * { user-select: text; -webkit-user-select: text; }
}

@media (max-width: 768px) {
    #msg-context-menu.mu-open {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: 100%;
        border-radius: var(--mu-border-radius-lg) var(--mu-border-radius-lg) 0 0;
        padding: var(--mu-space-sm) 0 calc(var(--mu-space-sm) + env(safe-area-inset-bottom));
    }
    #msg-context-menu .mu-context-menu-item { padding: 14px var(--mu-space-lg); font-size: var(--mu-font-size-md); }
}

/* Somebody's full profile, over the conversation (MGCS-118, fullprofile.js). The sections inside
   are drawn by the shared renderer with the shared section styles in mewui.css. */
.mu-full-profile-dialog { position: relative; width: min(760px, calc(100vw - 16px)); max-width: none; max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; }
.mu-full-profile-close { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0, 0, 0, 0.45); border-radius: 50%; width: 32px; height: 32px; }
.mu-full-profile-banner { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--mu-surface-light); border-radius: var(--mu-border-radius) var(--mu-border-radius) 0 0; }
.mu-full-profile-head { display: flex; align-items: flex-end; gap: var(--mu-space-md); padding: 0 var(--mu-space-md); margin-top: -40px; }
.mu-full-profile-avatar { width: 88px; height: 88px; border: 3px solid var(--mu-background); flex: none; }
.mu-full-profile-names { min-width: 0; overflow-wrap: anywhere; padding-bottom: 4px; }
.mu-full-profile-status { font-size: var(--mu-font-size-sm); color: var(--mu-text-muted); }
.mu-full-profile-body { padding: var(--mu-space-md); }
.mu-full-profile-bio { white-space: pre-line; overflow-wrap: anywhere; margin-bottom: var(--mu-space-md); }
.mu-full-profile-bio:empty { display: none; }

/* Reactions under a message (MGCS-181). */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.msg-reactions:empty { display: none; }
.mu-reaction {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.1rem 0.45rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--mu-surface-light); background: var(--mu-surface); color: var(--mu-text);
    font-size: 0.85rem; line-height: 1.4;
}
.mu-reaction.mu-mine { border-color: var(--mu-primary); }
.mu-reaction-emote { width: 18px; height: 18px; object-fit: contain; }
.mu-reaction-count { font-size: 0.75rem; color: var(--mu-text-muted); }

/* A search result (MGCS-180). */
.mu-search-hit {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; border-radius: var(--mu-border-radius);
    border: 1px solid var(--mu-surface-light); background: var(--mu-surface); color: var(--mu-text);
}
.mu-search-hit:hover, .mu-search-hit:focus-visible { border-color: var(--mu-primary); }

/* "Seen" under your last message, and a search hit being pointed at (MGCS-180/185). */
.msg-seen { font-size: 0.7rem; margin-top: 0.2rem; text-align: right; }
.mu-flash { outline: 2px solid var(--mu-primary); outline-offset: 2px; transition: outline-color 0.3s; }

/* The thread panel (MGCS-183): beside the conversation on a desktop, over it on a phone. */
.mu-thread-panel {
    position: fixed; top: var(--mu-navbar-height, 56px); right: 0; bottom: 0; width: min(420px, 100vw);
    display: flex; flex-direction: column; z-index: 150;
    background: var(--mu-background); color: var(--mu-text);
    border-left: 1px solid var(--mu-border-color); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
.mu-thread-panel[hidden] { display: none; }
.mu-thread-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--mu-border-color);
}
.mu-thread-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
.mu-thread-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--mu-border-color); }
.mu-thread-composer .mu-input { flex: 1; }
/* The "N replies" line under a message that started a thread. */
.mu-thread-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 0.3rem; padding: 2px 8px;
    border: 1px solid var(--mu-surface-light); border-radius: 999px; cursor: pointer;
    background: var(--mu-surface); color: var(--mu-primary); font-size: 0.8rem;
}
.mu-thread-link:hover, .mu-thread-link:focus-visible { border-color: var(--mu-primary); }
@media (max-width: 768px) {
    .mu-thread-panel { width: 100vw; left: 0; }
}

/* An unread thread (MGCS-183 v2). */
.mu-thread-link.mu-unread { border-color: var(--mu-primary); font-weight: 600; }
.mu-thread-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--mu-primary); flex: none;
}
.mu-thread-head .mu-btn.mu-active { color: var(--mu-primary); border-color: var(--mu-primary); }