.chat-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 8px;
    background-color: #151515;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;

    &:hover {
        background-color: rgba(40, 40, 40, 0.8);
    }

    &.active {
        background-color: rgba(104, 95, 255, 0.15);
    }

    .agent-role {
        flex: 1;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .settings-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        margin-left: 8px;
        padding: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        opacity: 0;
        transition: opacity 0.2s ease, background-color 0.2s ease,
            color 0.2s ease;

        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
        }
    }

    &:hover .settings-btn {
        opacity: 1;
    }

    // Make settings button always visible for selected agent
    &.active .settings-btn {
        opacity: 1;
    }
}
