/* R206/R207 - nickname filter without touching responsive.css */
.app-shell .chat-filter-nickname {
    position: relative !important;
}

.app-shell .chat-nickname-suggestions {
    position: absolute !important;
    z-index: 12 !important;
    top: calc(100% + 5px) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    gap: 3px !important;
    padding: 5px !important;
    border: 1px solid rgba(200, 170, 109, .28) !important;
    border-radius: 12px !important;
    background: rgba(16, 23, 18, .98) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .32) !important;
}

.app-shell .chat-nickname-suggestions[hidden] {
    display: none !important;
}

.app-shell .chat-nickname-suggestions button {
    min-height: 26px !important;
    justify-content: flex-start !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--gold-light) !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    text-align: left !important;
}

.app-shell .chat-nickname-suggestions button:hover,
.app-shell .chat-nickname-suggestions button:focus-visible {
    background: rgba(200, 170, 109, .14) !important;
}

.app-shell .chat-filter-nickname input {
    cursor: text !important;
}

/* R207 - include my messages toggle */
.app-shell .chat-filter-nickname {
    gap: 6px !important;
    padding-right: 6px !important;
}

.app-shell .chat-filter-nickname input[data-chat-nickname-filter] {
    flex: 1 1 auto !important;
}

.app-shell .chat-include-mine {
    position: relative !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(234, 215, 170, .22) !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: rgba(255, 255, 255, .035) !important;
    cursor: pointer !important;
}

.app-shell .chat-include-mine input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.app-shell .chat-include-mine span {
    color: transparent !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.app-shell .chat-include-mine:has(input:checked) {
    border-color: rgba(116, 211, 141, .72) !important;
    background: rgba(116, 211, 141, .16) !important;
}

.app-shell .chat-include-mine:has(input:checked) span {
    color: #74d38d !important;
}


/* R208 - clickable chat nicknames and profile actions */
.app-shell .chat-nickname-button {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #ead7aa !important;
    font: inherit !important;
    font-size: .9rem !important;
    font-weight: 880 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.app-shell .chat-nickname-button:hover,
.app-shell .chat-nickname-button:focus-visible {
    color: #fff3c8 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.public-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 10px;
}

.public-profile-actions button {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(234, 215, 170, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    color: var(--text);
    font-size: .76rem;
    font-weight: 850;
}

.public-profile-actions button:hover:not(:disabled),
.public-profile-actions button:focus-visible {
    border-color: rgba(200, 170, 109, .45);
    background: rgba(200, 170, 109, .11);
    color: var(--gold-light);
}

.public-profile-actions button:disabled {
    opacity: .55;
    cursor: default;
}

/* R217 - aligned chat prefixes with free wrapping text */
.app-shell .chat-message {
    padding: 4px 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(234, 215, 170, .08) !important;
    background: transparent !important;
}

.app-shell .chat-message.mine {
    border-color: rgba(234, 215, 170, .11) !important;
    background: transparent !important;
}

.app-shell .chat-line {
    display: block !important;
    margin: 0 !important;
    color: var(--text) !important;
    font-size: .86rem !important;
    font-weight: 760 !important;
    line-height: 1.36 !important;
    overflow-wrap: anywhere !important;
}

.app-shell .chat-line time {
    display: inline-block !important;
    width: 38px !important;
    color: #55ef9b !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-align: left !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
}

.app-shell .chat-line > strong,
.app-shell .chat-line > .chat-nickname-button {
    display: inline-block !important;
    width: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--gold-light) !important;
    font: inherit !important;
    font-size: .86rem !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
}

.app-shell .chat-line > .chat-separator {
    display: inline-block !important;
    width: 7px !important;
    color: rgba(234, 215, 170, .75) !important;
    font-weight: 900 !important;
    text-align: center !important;
    vertical-align: baseline !important;
}

.app-shell .chat-line > .chat-text {
    display: inline !important;
    color: var(--text) !important;
    font-size: .86rem !important;
    font-weight: 760 !important;
    overflow-wrap: anywhere !important;
}

.app-shell .chat-message-actions {
    margin: 2px 0 0 121px !important;
}

@media (max-width: 720px) {
    .app-shell .chat-message {
        padding-inline: 6px !important;
    }

    .app-shell .chat-line {
        font-size: .8rem !important;
    }

    .app-shell .chat-line time {
        width: 34px !important;
        font-size: .72rem !important;
    }

    .app-shell .chat-line > strong,
    .app-shell .chat-line > .chat-nickname-button {
        width: 66px !important;
        font-size: .8rem !important;
    }

    .app-shell .chat-line > .chat-separator {
        width: 6px !important;
    }

    .app-shell .chat-line > .chat-text {
        font-size: .8rem !important;
    }

    .app-shell .chat-message-actions {
        margin-left: 106px !important;
    }
}


/* R221 - compact social avatar inside chat lines */
.app-shell .chat-avatar-mini {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(234, 215, 170, .24) !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 35% 25%, rgba(234, 215, 170, .18), transparent 38%),
        linear-gradient(145deg, rgba(34, 55, 39, .95), rgba(12, 22, 15, .95)) !important;
    color: var(--gold-light) !important;
    font-size: .52rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    vertical-align: -5px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

.app-shell .chat-avatar-mini img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.app-shell .chat-avatar-button {
    cursor: pointer !important;
}

.app-shell .chat-avatar-button:hover,
.app-shell .chat-avatar-button:focus-visible {
    border-color: rgba(234, 215, 170, .5) !important;
    box-shadow:
        0 0 0 3px rgba(234, 215, 170, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
    outline: none !important;
}

.app-shell .chat-message-actions {
    margin-left: 149px !important;
}

@media (max-width: 720px) {
    .app-shell .chat-avatar-mini {
        width: 20px !important;
        height: 20px !important;
        margin-right: 5px !important;
        font-size: .48rem !important;
        vertical-align: -5px !important;
    }

    .app-shell .chat-message-actions {
        margin-left: 131px !important;
    }
}


/* R222 - chat mentions */
.app-shell .chat-mention,
.app-shell .chat-mention-button {
    display: inline !important;
    margin: 0 !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: rgba(85, 239, 155, .1) !important;
    color: #7ff0b3 !important;
    font: inherit !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
}

.app-shell .chat-mention-button {
    cursor: pointer !important;
}

.app-shell .chat-mention-button:hover,
.app-shell .chat-mention-button:focus-visible {
    background: rgba(234, 215, 170, .16) !important;
    color: #fff0bf !important;
    outline: none !important;
}

.app-shell .chat-form {
    position: relative !important;
}

.app-shell .chat-mention-suggestions {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 7px) !important;
    left: 0 !important;
    z-index: 18 !important;
    display: grid !important;
    gap: 4px !important;
    max-height: 168px !important;
    overflow-y: auto !important;
    padding: 6px !important;
    border: 1px solid rgba(200, 170, 109, .28) !important;
    border-radius: 13px !important;
    background: rgba(15, 23, 17, .98) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .36) !important;
}

.app-shell .chat-mention-suggestions[hidden] {
    display: none !important;
}

.app-shell .chat-mention-suggestions button {
    min-height: 28px !important;
    justify-content: flex-start !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--gold-light) !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-align: left !important;
}

.app-shell .chat-mention-suggestions button:hover,
.app-shell .chat-mention-suggestions button:focus-visible {
    background: rgba(200, 170, 109, .14) !important;
    outline: none !important;
}


/* R223 - typing indicator */
.app-shell .chat-typing-indicator {
    min-height: 20px !important;
    margin: 4px 0 5px !important;
    padding: 0 8px !important;
    color: #9fd6a7 !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    line-height: 20px !important;
}

.app-shell .chat-typing-indicator::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 7px !important;
    border-radius: 50% !important;
    background: #65c77b !important;
    box-shadow: 10px 0 0 rgba(101, 199, 123, .58), 20px 0 0 rgba(101, 199, 123, .28) !important;
    vertical-align: 1px !important;
}

.app-shell .chat-typing-indicator[hidden] {
    display: none !important;
}