.chat {
    background: var(--pixel-bg-medium);
    border: 3px solid var(--pixel-border);
    padding: 12px;
    
    .chat-input-wrapper {
        .chat-input {
            border: 2px solid var(--pixel-border);
            background: var(--pixel-bg-dark);
            color: var(--pixel-text);
            margin-bottom: 10px;
            padding: 8px;
            font-family: inherit;

            &:focus {
                border-color: var(--pixel-accent);
                outline: none;
            }
        }

        .send-icon {
            cursor: pointer;
            color: var(--pixel-text-dim);
            transition: color 0.1s;

            &:hover {
                color: var(--pixel-accent);
            }
        }
    }

    .online-users {
        i, .btn {
            &:hover, &:active {
                color: var(--pixel-accent);
            }
        }
    }

    #chat-messages {
        height: calc(100vh - 350px);
        max-height: calc(100vh - 350px);
        overflow-y: auto;
        overflow-x: hidden;
        color: var(--pixel-text);
        scrollbar-width: thin;
        scrollbar-color: var(--pixel-accent) var(--pixel-bg-dark);
        padding-right: 8px;
        word-wrap: break-word;
        word-break: break-word;

        @media (max-width: 992px) {
            height: 85vh;
        }

        .chat-message {
            font-size: 12px;
            margin-bottom: 6px;
            line-height: 1.4;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;

            .user-link {
                &:hover {
                    .username {
                        color: var(--pixel-accent);
                    }
                }

                .user-image {
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                    image-rendering: pixelated;
                }
            }

            .chat-message-content {
                word-break: break-word;
                overflow-wrap: break-word;
                max-width: 100%;

                .twitch-emote {
                    width: 16px;
                    height: 16px;
                    margin-right: 3px;
                }
            }
        }
    }
}

/* Custom scrollbar for chat */
#chat-messages::-webkit-scrollbar {
    width: 8px;
}

#chat-messages::-webkit-scrollbar-track {
    background: var(--pixel-bg-dark);
}

#chat-messages::-webkit-scrollbar-thumb {
    background: var(--pixel-accent);
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--pixel-purple);
}